├── .github ├── FUNDING.yml ├── ISSUE_TEMPLATE │ └── config.yml └── workflows │ ├── checks.yml │ └── release.yml ├── .gitignore ├── .prettierignore ├── CHANGELOG.md ├── COMPONENT_INDEX.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── SECURITY.md ├── carbon.yml ├── css ├── _popover.scss ├── all.css ├── all.scss ├── g10.css ├── g10.scss ├── g100.css ├── g100.scss ├── g80.css ├── g80.scss ├── g90.css ├── g90.scss ├── white.css └── white.scss ├── docs ├── .gitignore ├── index.html ├── package-lock.json ├── package.json ├── public │ └── favicon.ico ├── scripts │ └── index-docs.js ├── src │ ├── App.svelte │ ├── COMPONENT_API.json │ ├── components │ │ ├── ComponentApi.svelte │ │ ├── InlineSnippet.svelte │ │ ├── Preview.svelte │ │ ├── PreviewTypeScript.svelte │ │ └── TileCard.svelte │ ├── global.css │ ├── index.js │ ├── layouts │ │ └── ComponentLayout.svelte │ ├── pages │ │ ├── _fallback.svelte │ │ ├── _layout.svelte │ │ ├── components │ │ │ ├── Accordion.svx │ │ │ ├── AspectRatio.svx │ │ │ ├── Breadcrumb.svx │ │ │ ├── Breakpoint.svx │ │ │ ├── Button.svx │ │ │ ├── ButtonSet.svx │ │ │ ├── Checkbox.svx │ │ │ ├── ClickableTile.svx │ │ │ ├── CodeSnippet.svx │ │ │ ├── ComboBox.svx │ │ │ ├── ComposedModal.svx │ │ │ ├── ContentSwitcher.svx │ │ │ ├── ContextMenu.svx │ │ │ ├── CopyButton.svx │ │ │ ├── DataTable.svx │ │ │ ├── DatePicker.svx │ │ │ ├── Dropdown.svx │ │ │ ├── ExpandableTile.svx │ │ │ ├── FileUploader.svx │ │ │ ├── FluidForm.svx │ │ │ ├── Form.svx │ │ │ ├── Grid.svx │ │ │ ├── ImageLoader.svx │ │ │ ├── InlineLoading.svx │ │ │ ├── InlineNotification.svx │ │ │ ├── Link.svx │ │ │ ├── Loading.svx │ │ │ ├── LocalStorage.svx │ │ │ ├── Modal.svx │ │ │ ├── MultiSelect.svx │ │ │ ├── NumberInput.svx │ │ │ ├── OrderedList.svx │ │ │ ├── OverflowMenu.svx │ │ │ ├── Pagination.svx │ │ │ ├── PaginationNav.svx │ │ │ ├── PasswordInput.svx │ │ │ ├── Popover.svx │ │ │ ├── ProgressBar.svx │ │ │ ├── ProgressIndicator.svx │ │ │ ├── RadioButton.svx │ │ │ ├── RadioTile.svx │ │ │ ├── RecursiveList.svx │ │ │ ├── Search.svx │ │ │ ├── Select.svx │ │ │ ├── SelectableTile.svx │ │ │ ├── SkeletonPlaceholder.svx │ │ │ ├── SkeletonText.svx │ │ │ ├── Slider.svx │ │ │ ├── StructuredList.svx │ │ │ ├── Tabs.svx │ │ │ ├── Tag.svx │ │ │ ├── TextArea.svx │ │ │ ├── TextInput.svx │ │ │ ├── Theme.svx │ │ │ ├── Tile.svx │ │ │ ├── TimePicker.svx │ │ │ ├── ToastNotification.svx │ │ │ ├── Toggle.svx │ │ │ ├── Tooltip.svx │ │ │ ├── TooltipDefinition.svx │ │ │ ├── TooltipIcon.svx │ │ │ ├── TreeView.svx │ │ │ ├── Truncate.svx │ │ │ ├── UIShell.svx │ │ │ └── UnorderedList.svx │ │ ├── framed │ │ │ ├── Accordion │ │ │ │ └── ExpandableAccordion.svelte │ │ │ ├── Breadcrumbs │ │ │ │ └── Breadcrumbs.svelte │ │ │ ├── Breakpoint │ │ │ │ ├── Breakpoint.svelte │ │ │ │ └── BreakpointObserver.svelte │ │ │ ├── Button │ │ │ │ ├── ProgrammaticFocus.svelte │ │ │ │ └── SelectedIconOnlyButton.svelte │ │ │ ├── Checkbox │ │ │ │ ├── CheckboxReactive.svelte │ │ │ │ └── MultipleCheckboxes.svelte │ │ │ ├── CodeSnippet │ │ │ │ ├── CodeSnippetOverride.svelte │ │ │ │ ├── CodeSnippetReactive.svelte │ │ │ │ ├── DynamicCodeSnippet.svelte │ │ │ │ └── HiddenCodeSnippet.svelte │ │ │ ├── ComboBox │ │ │ │ ├── ComboBoxClear.svelte │ │ │ │ ├── ComboBoxSlot.svelte │ │ │ │ ├── FilterableComboBox.svelte │ │ │ │ ├── FilterableComboBoxCustomLabel.svelte │ │ │ │ ├── MultipleComboBox.svelte │ │ │ │ └── ReactiveComboBox.svelte │ │ │ ├── ContentSwitcher │ │ │ │ └── ContentSwitcherReactive.svelte │ │ │ ├── ContextMenu │ │ │ │ ├── ContextMenu.svelte │ │ │ │ ├── ContextMenuGroups.svelte │ │ │ │ ├── ContextMenuTarget.svelte │ │ │ │ └── ContextMenuTargets.svelte │ │ │ ├── CopyButton │ │ │ │ └── CopyButtonOverride.svelte │ │ │ ├── DataTable │ │ │ │ ├── DataTableAppendColumns.svelte │ │ │ │ ├── DataTableBatchSelection.svelte │ │ │ │ ├── DataTableBatchSelectionInitial.svelte │ │ │ │ ├── DataTableBatchSelectionToolbar.svelte │ │ │ │ ├── DataTableBatchSelectionToolbarControlled.svelte │ │ │ │ ├── DataTableExpandableSelectable.svelte │ │ │ │ ├── DataTableExpandableZebra.svelte │ │ │ │ ├── DataTableFilterCustom.svelte │ │ │ │ ├── DataTableFilterable.svelte │ │ │ │ ├── DataTableHeaderWidth.svelte │ │ │ │ ├── DataTableNonExpandableRows.svelte │ │ │ │ ├── DataTableNonSelectableRows.svelte │ │ │ │ ├── DataTablePagination.svelte │ │ │ │ ├── DataTableProgrammaticSorting.svelte │ │ │ │ ├── RadioSelectableDataTable.svelte │ │ │ │ └── SelectableDataTable.svelte │ │ │ ├── DatePicker │ │ │ │ ├── DatePickerModal.svelte │ │ │ │ ├── DatePickerRange.svelte │ │ │ │ └── DatePickerSingle.svelte │ │ │ ├── Dropdown │ │ │ │ ├── DropdownSlot.svelte │ │ │ │ └── MultipleDropdown.svelte │ │ │ ├── FileUploader │ │ │ │ └── FileUploaderClearFiles.svelte │ │ │ ├── FluidForm │ │ │ │ └── FluidFormInvalid.svelte │ │ │ ├── Grid │ │ │ │ ├── AspectRatioColumns.svelte │ │ │ │ ├── CondensedGrid.svelte │ │ │ │ ├── FullWidthGrid.svelte │ │ │ │ ├── Grid.svelte │ │ │ │ ├── NarrowGrid.svelte │ │ │ │ ├── OffsetColumns.svelte │ │ │ │ ├── PaddedGrid.svelte │ │ │ │ └── ResponsiveGrid.svelte │ │ │ ├── ImageLoader │ │ │ │ ├── DynamicImageLoader.svelte │ │ │ │ └── ProgrammaticImageLoader.svelte │ │ │ ├── InlineLoading │ │ │ │ └── InlineLoadingUx.svelte │ │ │ ├── Loading │ │ │ │ └── Loading.svelte │ │ │ ├── LocalStorage │ │ │ │ ├── LocalStorage.svelte │ │ │ │ └── LocalStorageClear.svelte │ │ │ ├── Modal │ │ │ │ ├── 3ButtonComposedModal.svelte │ │ │ │ ├── 3ButtonModal.svelte │ │ │ │ ├── ComposedModal.svelte │ │ │ │ ├── DangerModal.svelte │ │ │ │ ├── Modal.svelte │ │ │ │ ├── ModalButtonWithIcon.svelte │ │ │ │ ├── ModalCustomFocus.svelte │ │ │ │ ├── ModalExtraSmall.svelte │ │ │ │ ├── ModalLarge.svelte │ │ │ │ ├── ModalMultiple.svelte │ │ │ │ ├── ModalPreventOutsideClick.svelte │ │ │ │ ├── ModalScrollingContent.svelte │ │ │ │ ├── ModalSmall.svelte │ │ │ │ └── PassiveModal.svelte │ │ │ ├── MultiSelect │ │ │ │ ├── MultiSelectSlot.svelte │ │ │ │ └── MultipleMultiSelect.svelte │ │ │ ├── NumberInput │ │ │ │ └── NumberInputEmpty.svelte │ │ │ ├── PaginationNav │ │ │ │ └── PaginationNavReactive.svelte │ │ │ ├── Popover │ │ │ │ └── WithButton.svelte │ │ │ ├── ProgressBar │ │ │ │ └── ProgressBarUx.svelte │ │ │ ├── ProgressIndicator │ │ │ │ └── ProgrammaticProgressIndicator.svelte │ │ │ ├── RadioButton │ │ │ │ └── RadioButtonReactive.svelte │ │ │ ├── RadioTile │ │ │ │ ├── RadioTileReactive.svelte │ │ │ │ └── RadioTileReactiveOneWay.svelte │ │ │ ├── RecursiveList │ │ │ │ ├── RecursiveList.svelte │ │ │ │ ├── RecursiveListFlatArray.svelte │ │ │ │ ├── RecursiveListOrdered.svelte │ │ │ │ └── RecursiveListOrderedNative.svelte │ │ │ ├── Search │ │ │ │ ├── SearchExpandableReactive.svelte │ │ │ │ └── SearchReactive.svelte │ │ │ ├── Select │ │ │ │ └── SelectReactive.svelte │ │ │ ├── Tabs │ │ │ │ └── TabsReactive.svelte │ │ │ ├── Theme │ │ │ │ ├── Theme.svelte │ │ │ │ ├── ThemePersist.svelte │ │ │ │ ├── ThemeSelect.svelte │ │ │ │ ├── ThemeSelectCustom.svelte │ │ │ │ ├── ThemeToggle.svelte │ │ │ │ ├── ThemeToggleCustom.svelte │ │ │ │ └── ThemeTokens.svelte │ │ │ ├── ToastNotification │ │ │ │ └── ToastNotificationTimeout.svelte │ │ │ ├── Toggle │ │ │ │ └── ToggleReactive.svelte │ │ │ ├── Tooltip │ │ │ │ └── TooltipReactive.svelte │ │ │ ├── TreeView │ │ │ │ ├── TreeView.svelte │ │ │ │ ├── TreeViewActive.svelte │ │ │ │ ├── TreeViewCollapseAll.svelte │ │ │ │ ├── TreeViewCollapseNodes.svelte │ │ │ │ ├── TreeViewCompact.svelte │ │ │ │ ├── TreeViewExpandAll.svelte │ │ │ │ ├── TreeViewExpandNodes.svelte │ │ │ │ ├── TreeViewExpanded.svelte │ │ │ │ ├── TreeViewFlatArray.svelte │ │ │ │ ├── TreeViewIcons.svelte │ │ │ │ ├── TreeViewMultiselect.svelte │ │ │ │ ├── TreeViewShowNode.svelte │ │ │ │ └── TreeViewSlot.svelte │ │ │ ├── UIShell │ │ │ │ ├── Header.svelte │ │ │ │ ├── HeaderMultipleSwitcher.svelte │ │ │ │ ├── HeaderNav.svelte │ │ │ │ ├── HeaderNavRail.svelte │ │ │ │ ├── HeaderSearch.svelte │ │ │ │ ├── HeaderSwitcher.svelte │ │ │ │ ├── HeaderUtilities.svelte │ │ │ │ └── PersistedHamburgerMenu.svelte │ │ │ └── _reset.svelte │ │ └── index.svelte │ └── store.js ├── svelte.config.js └── vite.config.js ├── examples ├── rollup │ ├── .gitignore │ ├── package-lock.json │ ├── package.json │ ├── public │ │ └── index.html │ ├── rollup.config.js │ └── src │ │ ├── App.svelte │ │ └── index.js ├── sveltekit │ ├── .gitignore │ ├── jsconfig.json │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── app.d.ts │ │ ├── app.html │ │ └── routes │ │ │ ├── +layout.svelte │ │ │ └── +page.svelte │ ├── svelte.config.js │ └── vite.config.js ├── vite │ ├── .gitignore │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ └── App.svelte │ └── vite.config.js └── webpack │ ├── .gitignore │ ├── package-lock.json │ ├── package.json │ ├── src │ ├── App.svelte │ └── index.js │ └── webpack.config.js ├── package-lock.json ├── package.json ├── scripts ├── build-css.js ├── build-docs.js └── format-component-api.js ├── src ├── Accordion │ ├── Accordion.svelte │ ├── AccordionItem.svelte │ ├── AccordionSkeleton.svelte │ └── index.js ├── AspectRatio │ ├── AspectRatio.svelte │ └── index.js ├── Breadcrumb │ ├── Breadcrumb.svelte │ ├── BreadcrumbItem.svelte │ ├── BreadcrumbSkeleton.svelte │ └── index.js ├── Breakpoint │ ├── Breakpoint.svelte │ ├── breakpointObserver.d.ts │ ├── breakpointObserver.js │ ├── breakpoints.d.ts │ ├── breakpoints.js │ ├── index.d.ts │ └── index.js ├── Button │ ├── Button.svelte │ ├── ButtonSet.svelte │ ├── ButtonSkeleton.svelte │ └── index.js ├── Checkbox │ ├── Checkbox.svelte │ ├── CheckboxSkeleton.svelte │ ├── InlineCheckbox.svelte │ └── index.js ├── CodeSnippet │ ├── CodeSnippet.svelte │ ├── CodeSnippetSkeleton.svelte │ └── index.js ├── ComboBox │ ├── ComboBox.svelte │ └── index.js ├── ComposedModal │ ├── ComposedModal.svelte │ ├── ModalBody.svelte │ ├── ModalFooter.svelte │ ├── ModalHeader.svelte │ └── index.js ├── ContentSwitcher │ ├── ContentSwitcher.svelte │ ├── Switch.svelte │ └── index.js ├── ContextMenu │ ├── ContextMenu.svelte │ ├── ContextMenuDivider.svelte │ ├── ContextMenuGroup.svelte │ ├── ContextMenuOption.svelte │ ├── ContextMenuRadioGroup.svelte │ └── index.js ├── CopyButton │ ├── CopyButton.svelte │ └── index.js ├── DataTable │ ├── DataTable.svelte │ ├── DataTableSkeleton.svelte │ ├── DataTableTypes.d.ts │ ├── Table.svelte │ ├── TableBody.svelte │ ├── TableCell.svelte │ ├── TableContainer.svelte │ ├── TableHead.svelte │ ├── TableHeader.svelte │ ├── TableRow.svelte │ ├── Toolbar.svelte │ ├── ToolbarBatchActions.svelte │ ├── ToolbarContent.svelte │ ├── ToolbarMenu.svelte │ ├── ToolbarMenuItem.svelte │ ├── ToolbarSearch.svelte │ └── index.js ├── DatePicker │ ├── DatePicker.svelte │ ├── DatePickerInput.svelte │ ├── DatePickerSkeleton.svelte │ ├── createCalendar.js │ └── index.js ├── Dropdown │ ├── Dropdown.svelte │ ├── DropdownSkeleton.svelte │ └── index.js ├── FileUploader │ ├── FileUploader.svelte │ ├── FileUploaderButton.svelte │ ├── FileUploaderDropContainer.svelte │ ├── FileUploaderItem.svelte │ ├── FileUploaderSkeleton.svelte │ ├── Filename.svelte │ └── index.js ├── FluidForm │ ├── FluidForm.svelte │ └── index.js ├── Form │ ├── Form.svelte │ └── index.js ├── FormGroup │ ├── FormGroup.svelte │ └── index.js ├── FormItem │ ├── FormItem.svelte │ └── index.js ├── FormLabel │ ├── FormLabel.svelte │ └── index.js ├── Grid │ ├── Column.svelte │ ├── Grid.svelte │ ├── Row.svelte │ └── index.js ├── ImageLoader │ ├── ImageLoader.svelte │ └── index.js ├── InlineLoading │ ├── InlineLoading.svelte │ └── index.js ├── Link │ ├── Link.svelte │ ├── OutboundLink.svelte │ └── index.js ├── ListBox │ ├── ListBox.svelte │ ├── ListBoxField.svelte │ ├── ListBoxMenu.svelte │ ├── ListBoxMenuIcon.svelte │ ├── ListBoxMenuItem.svelte │ ├── ListBoxSelection.svelte │ └── index.js ├── ListItem │ ├── ListItem.svelte │ └── index.js ├── Loading │ ├── Loading.svelte │ └── index.js ├── LocalStorage │ ├── LocalStorage.svelte │ └── index.js ├── Modal │ ├── Modal.svelte │ ├── index.js │ └── modalStore.js ├── MultiSelect │ ├── MultiSelect.svelte │ └── index.js ├── Notification │ ├── InlineNotification.svelte │ ├── NotificationActionButton.svelte │ ├── NotificationButton.svelte │ ├── NotificationIcon.svelte │ ├── ToastNotification.svelte │ └── index.js ├── NumberInput │ ├── NumberInput.svelte │ ├── NumberInputSkeleton.svelte │ └── index.js ├── OrderedList │ ├── OrderedList.svelte │ └── index.js ├── OverflowMenu │ ├── OverflowMenu.svelte │ ├── OverflowMenuItem.svelte │ └── index.js ├── Pagination │ ├── Pagination.svelte │ ├── PaginationSkeleton.svelte │ └── index.js ├── PaginationNav │ ├── PaginationItem.svelte │ ├── PaginationNav.svelte │ ├── PaginationOverflow.svelte │ └── index.js ├── Popover │ ├── Popover.svelte │ └── index.js ├── ProgressBar │ ├── ProgressBar.svelte │ └── index.js ├── ProgressIndicator │ ├── ProgressIndicator.svelte │ ├── ProgressIndicatorSkeleton.svelte │ ├── ProgressStep.svelte │ └── index.js ├── RadioButton │ ├── RadioButton.svelte │ ├── RadioButtonSkeleton.svelte │ └── index.js ├── RadioButtonGroup │ ├── RadioButtonGroup.svelte │ └── index.js ├── RecursiveList │ ├── RecursiveList.svelte │ ├── RecursiveListItem.svelte │ └── index.js ├── Search │ ├── Search.svelte │ ├── SearchSkeleton.svelte │ └── index.js ├── Select │ ├── Select.svelte │ ├── SelectItem.svelte │ ├── SelectItemGroup.svelte │ ├── SelectSkeleton.svelte │ └── index.js ├── SkeletonPlaceholder │ ├── SkeletonPlaceholder.svelte │ └── index.js ├── SkeletonText │ ├── SkeletonText.svelte │ └── index.js ├── Slider │ ├── Slider.svelte │ ├── SliderSkeleton.svelte │ └── index.js ├── StructuredList │ ├── StructuredList.svelte │ ├── StructuredListBody.svelte │ ├── StructuredListCell.svelte │ ├── StructuredListHead.svelte │ ├── StructuredListInput.svelte │ ├── StructuredListRow.svelte │ ├── StructuredListSkeleton.svelte │ └── index.js ├── Tabs │ ├── Tab.svelte │ ├── TabContent.svelte │ ├── Tabs.svelte │ ├── TabsSkeleton.svelte │ └── index.js ├── Tag │ ├── Tag.svelte │ ├── TagSkeleton.svelte │ └── index.js ├── TextArea │ ├── TextArea.svelte │ ├── TextAreaSkeleton.svelte │ └── index.js ├── TextInput │ ├── PasswordInput.svelte │ ├── TextInput.svelte │ ├── TextInputSkeleton.svelte │ └── index.js ├── Theme │ ├── Theme.svelte │ └── index.js ├── Tile │ ├── ClickableTile.svelte │ ├── ExpandableTile.svelte │ ├── RadioTile.svelte │ ├── SelectableTile.svelte │ ├── Tile.svelte │ ├── TileGroup.svelte │ └── index.js ├── TimePicker │ ├── TimePicker.svelte │ ├── TimePickerSelect.svelte │ └── index.js ├── Toggle │ ├── Toggle.svelte │ ├── ToggleSkeleton.svelte │ └── index.js ├── Tooltip │ ├── Tooltip.svelte │ ├── TooltipFooter.svelte │ └── index.js ├── TooltipDefinition │ ├── TooltipDefinition.svelte │ └── index.js ├── TooltipIcon │ ├── TooltipIcon.svelte │ └── index.js ├── TreeView │ ├── TreeView.svelte │ ├── TreeViewNode.svelte │ ├── TreeViewNodeList.svelte │ ├── index.d.ts │ └── index.js ├── Truncate │ ├── Truncate.svelte │ ├── index.js │ ├── truncate.d.ts │ └── truncate.js ├── UIShell │ ├── Content.svelte │ ├── HamburgerMenu.svelte │ ├── Header.svelte │ ├── HeaderAction.svelte │ ├── HeaderActionLink.svelte │ ├── HeaderGlobalAction.svelte │ ├── HeaderNav.svelte │ ├── HeaderNavItem.svelte │ ├── HeaderNavMenu.svelte │ ├── HeaderPanelDivider.svelte │ ├── HeaderPanelLink.svelte │ ├── HeaderPanelLinks.svelte │ ├── HeaderSearch.svelte │ ├── HeaderUtilities.svelte │ ├── SideNav.svelte │ ├── SideNavDivider.svelte │ ├── SideNavItems.svelte │ ├── SideNavLink.svelte │ ├── SideNavMenu.svelte │ ├── SideNavMenuItem.svelte │ ├── SkipToContent.svelte │ ├── index.js │ └── navStore.js ├── UnorderedList │ ├── UnorderedList.svelte │ └── index.js ├── icons │ ├── Add.svelte │ ├── ArrowUp.svelte │ ├── ArrowsVertical.svelte │ ├── Calendar.svelte │ ├── CaretDown.svelte │ ├── CaretLeft.svelte │ ├── CaretRight.svelte │ ├── Checkmark.svelte │ ├── CheckmarkFilled.svelte │ ├── CheckmarkOutline.svelte │ ├── ChevronDown.svelte │ ├── ChevronRight.svelte │ ├── CircleDash.svelte │ ├── Close.svelte │ ├── Copy.svelte │ ├── EditOff.svelte │ ├── ErrorFilled.svelte │ ├── IconSearch.svelte │ ├── Incomplete.svelte │ ├── Information.svelte │ ├── InformationFilled.svelte │ ├── InformationSquareFilled.svelte │ ├── Launch.svelte │ ├── Menu.svelte │ ├── OverflowMenuHorizontal.svelte │ ├── OverflowMenuVertical.svelte │ ├── Settings.svelte │ ├── Subtract.svelte │ ├── Switcher.svelte │ ├── View.svelte │ ├── ViewOff.svelte │ ├── Warning.svelte │ ├── WarningAltFilled.svelte │ └── WarningFilled.svelte ├── index.js └── utils │ ├── toHierarchy.d.ts │ └── toHierarchy.js ├── telemetry.yml ├── tests ├── Accordion │ ├── Accordion.disabled.test.svelte │ ├── Accordion.programmatic.test.svelte │ ├── Accordion.skeleton.test.svelte │ ├── Accordion.test.svelte │ └── Accordion.test.ts ├── App.test.svelte ├── AspectRatio │ ├── AspectRatio.test.svelte │ └── AspectRatio.test.ts ├── Breadcrumb │ ├── Breadcrumb.dynamic.test.svelte │ ├── Breadcrumb.noTrailingSlash.test.svelte │ ├── Breadcrumb.skeleton.test.svelte │ ├── Breadcrumb.test.svelte │ └── Breadcrumb.test.ts ├── Breakpoint │ ├── Breakpoint.test.svelte │ ├── Breakpoint.test.ts │ ├── BreakpointObserver.test.svelte │ └── Breakpoints.test.svelte ├── Button │ ├── Button.test.svelte │ └── Button.test.ts ├── ButtonSet │ ├── ButtonSet.test.svelte │ └── ButtonSet.test.ts ├── Checkbox │ ├── Checkbox.group.test.svelte │ ├── Checkbox.skeleton.test.svelte │ ├── Checkbox.slot.test.svelte │ ├── Checkbox.test.svelte │ └── Checkbox.test.ts ├── CodeSnippet │ ├── CodeSnippet.test.ts │ ├── CodeSnippetCopyButton.test.svelte │ ├── CodeSnippetCustomEvents.test.svelte │ ├── CodeSnippetExpandable.test.svelte │ ├── CodeSnippetExpandedByDefault.svelte │ ├── CodeSnippetInline.test.svelte │ ├── CodeSnippetMultiline.test.svelte │ ├── CodeSnippetWithCustomCopyText.test.svelte │ ├── CodeSnippetWithHideShowMore.test.svelte │ └── CodeSnippetWithWrapText.test.svelte ├── Column │ ├── Column.test.svelte │ └── Column.test.ts ├── ComboBox │ ├── ComboBox.test.svelte │ ├── ComboBox.test.ts │ └── ComboBoxCustom.test.svelte ├── ContentSwitcher │ ├── ContentSwitcher.custom.test.svelte │ ├── ContentSwitcher.disabled.test.svelte │ ├── ContentSwitcher.selectedIndex.test.svelte │ ├── ContentSwitcher.size.test.svelte │ ├── ContentSwitcher.test.svelte │ └── ContentSwitcher.test.ts ├── ContextMenu │ ├── ContextMenu.test.svelte │ └── ContextMenu.test.ts ├── CopyButton │ ├── CopyButton.test.svelte │ └── CopyButton.test.ts ├── DataTable │ ├── DataTable.test.svelte │ ├── DataTable.test.ts │ ├── DataTableBatchSelectionToolbar.test.svelte │ ├── DataTableBatchSelectionToolbar.test.ts │ ├── DataTableSearch.test.svelte │ ├── DataTableSearch.test.ts │ ├── DuplicateDataTables.test.svelte │ └── DuplicateDataTables.test.ts ├── DatePicker │ ├── DatePicker.test.svelte │ ├── DatePicker.test.ts │ └── DatePickerRange.test.svelte ├── Dropdown │ ├── Dropdown.test.svelte │ ├── Dropdown.test.ts │ └── DropdownSlot.test.svelte ├── ExpandableTile │ ├── ExpandableTile.test.svelte │ ├── ExpandableTile.test.ts │ └── ExpandableTileCustom.test.svelte ├── FileUploader.test.svelte ├── FluidForm │ ├── FluidForm.test.svelte │ └── FluidForm.test.ts ├── Form │ ├── Form.test.svelte │ └── Form.test.ts ├── Grid │ ├── Grid.test.svelte │ └── Grid.test.ts ├── HeaderNav.test.svelte ├── HeaderSearch.svelte ├── HeaderSwitcher.test.svelte ├── HeaderUtilities.test.svelte ├── ImageLoader │ ├── ImageLoader.test.svelte │ └── ImageLoader.test.ts ├── InlineLoading │ ├── InlineLoading.test.svelte │ └── InlineLoading.test.ts ├── InlineNotification │ ├── InlineNotification.close.test.svelte │ ├── InlineNotification.test.svelte │ ├── InlineNotification.test.ts │ └── InlineNotificationCustom.test.svelte ├── Link │ ├── Link.test.svelte │ └── Link.test.ts ├── Loading │ ├── Loading.test.svelte │ └── Loading.test.ts ├── LocalStorage │ ├── LocalStorage.test.svelte │ ├── LocalStorage.test.ts │ ├── LocalStorageObject.test.svelte │ ├── LocalStorageObject.test.ts │ ├── LocalStoragePrimitive.test.svelte │ └── LocalStoragePrimitive.test.ts ├── Modal │ ├── Modal.test.svelte │ └── Modal.test.ts ├── MultiSelect │ ├── MultiSelect.test.svelte │ ├── MultiSelect.test.ts │ └── MultiSelectSlot.test.svelte ├── NumberInput │ ├── NumberInput.test.svelte │ ├── NumberInput.test.ts │ └── NumberInputCustom.test.svelte ├── OrderedList │ ├── OrderedList.test.svelte │ └── OrderedList.test.ts ├── OverflowMenu │ ├── OverflowMenu.test.svelte │ └── OverflowMenu.test.ts ├── Pagination │ ├── Pagination.test.svelte │ └── Pagination.test.ts ├── PaginationNav │ ├── PaginationNav.test.svelte │ └── PaginationNav.test.ts ├── PasswordInput │ ├── PasswordInput.test.svelte │ └── PasswordInput.test.ts ├── PersistedHamburgerMenu.test.svelte ├── Popover │ ├── Popover.test.svelte │ └── Popover.test.ts ├── ProgressBar │ ├── ProgressBar.test.svelte │ └── ProgressBar.test.ts ├── ProgressIndicator │ ├── ProgressIndicator.test.svelte │ └── ProgressIndicator.test.ts ├── RadioButton │ ├── RadioButton.test.svelte │ ├── RadioButton.test.ts │ └── RadioButtonCustom.test.svelte ├── RadioTile │ ├── RadioTile.group.test.svelte │ ├── RadioTile.single.test.svelte │ ├── RadioTile.test.svelte │ ├── RadioTile.test.ts │ └── RadioTileCustom.test.svelte ├── RecursiveList │ ├── RecursiveList.hierarchy.test.svelte │ ├── RecursiveList.test.svelte │ └── RecursiveList.test.ts ├── Search │ ├── Search.test.svelte │ ├── Search.test.ts │ ├── SearchExpandable.test.svelte │ └── SearchSkeleton.test.svelte ├── Select │ ├── Select.falsy.test.svelte │ ├── Select.group.test.svelte │ ├── Select.skeleton.test.svelte │ ├── Select.test.svelte │ └── Select.test.ts ├── SkeletonPlaceholder │ ├── SkeletonPlaceholder.test.svelte │ └── SkeletonPlaceholder.test.ts ├── SkeletonText │ ├── SkeletonText.test.svelte │ └── SkeletonText.test.ts ├── Slider │ ├── Slider.test.svelte │ └── Slider.test.ts ├── StructuredList │ ├── StructuredList.test.svelte │ ├── StructuredList.test.ts │ └── StructuredListCustom.test.svelte ├── Tabs │ ├── Tabs.test.svelte │ └── Tabs.test.ts ├── Tag │ ├── Tag.test.svelte │ └── Tag.test.ts ├── TextArea │ ├── TextArea.test.svelte │ ├── TextArea.test.ts │ └── TextAreaCustom.test.svelte ├── TextInput │ ├── TextInput.test.svelte │ ├── TextInput.test.ts │ └── TextInputCustom.test.svelte ├── Theme │ ├── Theme.test.svelte │ ├── Theme.test.ts │ ├── ThemeSelect.test.svelte │ ├── ThemeSelectCustom.test.svelte │ ├── ThemeToggle.test.svelte │ └── ThemeToggleCustom.test.svelte ├── Tile │ ├── ClickableTile.test.svelte │ ├── ClickableTile.test.ts │ ├── SelectableTile.test.svelte │ ├── SelectableTile.test.ts │ ├── Tile.test.svelte │ └── Tile.test.ts ├── TimePicker │ ├── TimePicker.test.svelte │ ├── TimePicker.test.ts │ └── TimePickerCustom.test.svelte ├── ToastNotification │ ├── ToastNotification.close.test.svelte │ ├── ToastNotification.test.svelte │ ├── ToastNotification.test.ts │ └── ToastNotificationCustom.test.svelte ├── Toggle │ ├── Toggle.test.svelte │ └── Toggle.test.ts ├── Tooltip │ ├── Tooltip.test.ts │ ├── TooltipAlignments.test.svelte │ ├── TooltipCustomContent.test.svelte │ ├── TooltipCustomIcon.test.svelte │ ├── TooltipDefault.test.svelte │ ├── TooltipDirections.test.svelte │ ├── TooltipEvents.test.svelte │ ├── TooltipHideIcon.test.svelte │ └── TooltipOpen.test.svelte ├── TooltipDefinition │ ├── TooltipDefinition.test.svelte │ └── TooltipDefinition.test.ts ├── TooltipIcon │ ├── TooltipIcon.test.svelte │ └── TooltipIcon.test.ts ├── TreeView │ ├── TreeView.hierarchy.test.svelte │ ├── TreeView.test.svelte │ ├── TreeView.test.ts │ └── toHierarchy.test.ts ├── Truncate │ ├── Truncate.test.svelte │ ├── Truncate.test.ts │ └── TruncateAction.test.svelte ├── UnorderedList │ ├── UnorderedList.test.svelte │ └── UnorderedList.test.ts ├── index.html └── setup-tests.ts ├── thumbnails ├── breakpoint.svg ├── button-set.svg ├── clickable-tile.svg ├── composed-modal.svg ├── context-menu.svg ├── expandable-tile.svg ├── fluid-form.svg ├── image-loader.svg ├── inline-notification.svg ├── local-storage.svg ├── ordered-list.svg ├── password-input.svg ├── radio-tile.svg ├── recursive-list.svg ├── selectable-tile.svg ├── skeleton-placeholder.svg ├── skeleton-text.svg ├── skeleton.svg ├── toast-notification.svg ├── tooltip-icon.svg ├── truncate.svg └── unordered-list.svg ├── tsconfig.json ├── types ├── Accordion │ ├── Accordion.svelte.d.ts │ ├── AccordionItem.svelte.d.ts │ └── AccordionSkeleton.svelte.d.ts ├── AspectRatio │ └── AspectRatio.svelte.d.ts ├── Breadcrumb │ ├── Breadcrumb.svelte.d.ts │ ├── BreadcrumbItem.svelte.d.ts │ └── BreadcrumbSkeleton.svelte.d.ts ├── Breakpoint │ ├── Breakpoint.svelte.d.ts │ ├── breakpointObserver.d.ts │ ├── breakpoints.d.ts │ └── index.d.ts ├── Button │ ├── Button.svelte.d.ts │ ├── ButtonSet.svelte.d.ts │ └── ButtonSkeleton.svelte.d.ts ├── Checkbox │ ├── Checkbox.svelte.d.ts │ └── CheckboxSkeleton.svelte.d.ts ├── CodeSnippet │ ├── CodeSnippet.svelte.d.ts │ └── CodeSnippetSkeleton.svelte.d.ts ├── ComboBox │ └── ComboBox.svelte.d.ts ├── ComposedModal │ ├── ComposedModal.svelte.d.ts │ ├── ModalBody.svelte.d.ts │ ├── ModalFooter.svelte.d.ts │ └── ModalHeader.svelte.d.ts ├── ContentSwitcher │ ├── ContentSwitcher.svelte.d.ts │ └── Switch.svelte.d.ts ├── ContextMenu │ ├── ContextMenu.svelte.d.ts │ ├── ContextMenuDivider.svelte.d.ts │ ├── ContextMenuGroup.svelte.d.ts │ ├── ContextMenuOption.svelte.d.ts │ └── ContextMenuRadioGroup.svelte.d.ts ├── CopyButton │ └── CopyButton.svelte.d.ts ├── DataTable │ ├── DataTable.svelte.d.ts │ ├── DataTableSkeleton.svelte.d.ts │ ├── DataTableTypes.d.ts │ ├── Table.svelte.d.ts │ ├── TableBody.svelte.d.ts │ ├── TableCell.svelte.d.ts │ ├── TableContainer.svelte.d.ts │ ├── TableHead.svelte.d.ts │ ├── TableHeader.svelte.d.ts │ ├── TableRow.svelte.d.ts │ ├── Toolbar.svelte.d.ts │ ├── ToolbarBatchActions.svelte.d.ts │ ├── ToolbarContent.svelte.d.ts │ ├── ToolbarMenu.svelte.d.ts │ ├── ToolbarMenuItem.svelte.d.ts │ └── ToolbarSearch.svelte.d.ts ├── DatePicker │ ├── DatePicker.svelte.d.ts │ ├── DatePickerInput.svelte.d.ts │ └── DatePickerSkeleton.svelte.d.ts ├── Dropdown │ ├── Dropdown.svelte.d.ts │ └── DropdownSkeleton.svelte.d.ts ├── FileUploader │ ├── FileUploader.svelte.d.ts │ ├── FileUploaderButton.svelte.d.ts │ ├── FileUploaderDropContainer.svelte.d.ts │ ├── FileUploaderItem.svelte.d.ts │ ├── FileUploaderSkeleton.svelte.d.ts │ └── Filename.svelte.d.ts ├── FluidForm │ └── FluidForm.svelte.d.ts ├── Form │ └── Form.svelte.d.ts ├── FormGroup │ └── FormGroup.svelte.d.ts ├── FormItem │ └── FormItem.svelte.d.ts ├── FormLabel │ └── FormLabel.svelte.d.ts ├── Grid │ ├── Column.svelte.d.ts │ ├── Grid.svelte.d.ts │ └── Row.svelte.d.ts ├── ImageLoader │ └── ImageLoader.svelte.d.ts ├── InlineLoading │ └── InlineLoading.svelte.d.ts ├── Link │ ├── Link.svelte.d.ts │ └── OutboundLink.svelte.d.ts ├── ListBox │ ├── ListBox.svelte.d.ts │ ├── ListBoxField.svelte.d.ts │ ├── ListBoxMenu.svelte.d.ts │ ├── ListBoxMenuIcon.svelte.d.ts │ ├── ListBoxMenuItem.svelte.d.ts │ └── ListBoxSelection.svelte.d.ts ├── ListItem │ └── ListItem.svelte.d.ts ├── Loading │ └── Loading.svelte.d.ts ├── LocalStorage │ └── LocalStorage.svelte.d.ts ├── Modal │ └── Modal.svelte.d.ts ├── MultiSelect │ └── MultiSelect.svelte.d.ts ├── Notification │ ├── InlineNotification.svelte.d.ts │ ├── NotificationActionButton.svelte.d.ts │ ├── NotificationButton.svelte.d.ts │ ├── NotificationIcon.svelte.d.ts │ └── ToastNotification.svelte.d.ts ├── NumberInput │ ├── NumberInput.svelte.d.ts │ └── NumberInputSkeleton.svelte.d.ts ├── OrderedList │ └── OrderedList.svelte.d.ts ├── OverflowMenu │ ├── OverflowMenu.svelte.d.ts │ └── OverflowMenuItem.svelte.d.ts ├── Pagination │ ├── Pagination.svelte.d.ts │ └── PaginationSkeleton.svelte.d.ts ├── PaginationNav │ └── PaginationNav.svelte.d.ts ├── Popover │ └── Popover.svelte.d.ts ├── ProgressBar │ └── ProgressBar.svelte.d.ts ├── ProgressIndicator │ ├── ProgressIndicator.svelte.d.ts │ ├── ProgressIndicatorSkeleton.svelte.d.ts │ └── ProgressStep.svelte.d.ts ├── RadioButton │ ├── RadioButton.svelte.d.ts │ └── RadioButtonSkeleton.svelte.d.ts ├── RadioButtonGroup │ └── RadioButtonGroup.svelte.d.ts ├── RecursiveList │ └── RecursiveList.svelte.d.ts ├── Search │ ├── Search.svelte.d.ts │ └── SearchSkeleton.svelte.d.ts ├── Select │ ├── Select.svelte.d.ts │ ├── SelectItem.svelte.d.ts │ ├── SelectItemGroup.svelte.d.ts │ └── SelectSkeleton.svelte.d.ts ├── SkeletonPlaceholder │ └── SkeletonPlaceholder.svelte.d.ts ├── SkeletonText │ └── SkeletonText.svelte.d.ts ├── Slider │ ├── Slider.svelte.d.ts │ └── SliderSkeleton.svelte.d.ts ├── StructuredList │ ├── StructuredList.svelte.d.ts │ ├── StructuredListBody.svelte.d.ts │ ├── StructuredListCell.svelte.d.ts │ ├── StructuredListHead.svelte.d.ts │ ├── StructuredListInput.svelte.d.ts │ ├── StructuredListRow.svelte.d.ts │ └── StructuredListSkeleton.svelte.d.ts ├── Tabs │ ├── Tab.svelte.d.ts │ ├── TabContent.svelte.d.ts │ ├── Tabs.svelte.d.ts │ └── TabsSkeleton.svelte.d.ts ├── Tag │ ├── Tag.svelte.d.ts │ └── TagSkeleton.svelte.d.ts ├── TextArea │ ├── TextArea.svelte.d.ts │ └── TextAreaSkeleton.svelte.d.ts ├── TextInput │ ├── PasswordInput.svelte.d.ts │ ├── TextInput.svelte.d.ts │ └── TextInputSkeleton.svelte.d.ts ├── Theme │ └── Theme.svelte.d.ts ├── Tile │ ├── ClickableTile.svelte.d.ts │ ├── ExpandableTile.svelte.d.ts │ ├── RadioTile.svelte.d.ts │ ├── SelectableTile.svelte.d.ts │ ├── Tile.svelte.d.ts │ └── TileGroup.svelte.d.ts ├── TimePicker │ ├── TimePicker.svelte.d.ts │ └── TimePickerSelect.svelte.d.ts ├── Toggle │ ├── Toggle.svelte.d.ts │ └── ToggleSkeleton.svelte.d.ts ├── Tooltip │ ├── Tooltip.svelte.d.ts │ └── TooltipFooter.svelte.d.ts ├── TooltipDefinition │ └── TooltipDefinition.svelte.d.ts ├── TooltipIcon │ └── TooltipIcon.svelte.d.ts ├── TreeView │ ├── TreeView.svelte.d.ts │ └── index.d.ts ├── Truncate │ ├── Truncate.svelte.d.ts │ └── truncate.d.ts ├── UIShell │ ├── Content.svelte.d.ts │ ├── Header.svelte.d.ts │ ├── HeaderAction.svelte.d.ts │ ├── HeaderActionLink.svelte.d.ts │ ├── HeaderGlobalAction.svelte.d.ts │ ├── HeaderNav.svelte.d.ts │ ├── HeaderNavItem.svelte.d.ts │ ├── HeaderNavMenu.svelte.d.ts │ ├── HeaderPanelDivider.svelte.d.ts │ ├── HeaderPanelLink.svelte.d.ts │ ├── HeaderPanelLinks.svelte.d.ts │ ├── HeaderSearch.svelte.d.ts │ ├── HeaderUtilities.svelte.d.ts │ ├── SideNav.svelte.d.ts │ ├── SideNavDivider.svelte.d.ts │ ├── SideNavItems.svelte.d.ts │ ├── SideNavLink.svelte.d.ts │ ├── SideNavMenu.svelte.d.ts │ ├── SideNavMenuItem.svelte.d.ts │ └── SkipToContent.svelte.d.ts ├── UnorderedList │ └── UnorderedList.svelte.d.ts ├── index.d.ts └── utils │ └── toHierarchy.d.ts └── vite.config.ts /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: metonym 2 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: true 2 | contact_links: 3 | - name: Ask a question 4 | url: https://github.com/carbon-design-system/carbon-components-svelte/discussions 5 | about: Please ask and answer questions here. 6 | - name: Carbon Design System Discord 7 | url: https://discord.gg/J7JEUEkTRX 8 | about: Chat with us on Discord. 9 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | .vscode 4 | .idea -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | /css 2 | /types 3 | .svelte-kit 4 | .routify 5 | dist 6 | client 7 | build 8 | *.svx 9 | COMPONENT_API.json -------------------------------------------------------------------------------- /docs/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /dist 3 | /.routify 4 | src/SEARCH_INDEX.json -------------------------------------------------------------------------------- /docs/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carbon-design-system/carbon-components-svelte/ecc818ff61559840897133b1e40670ba0c2b26ee/docs/public/favicon.ico -------------------------------------------------------------------------------- /docs/src/App.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /docs/src/components/InlineSnippet.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |
9 | copy(text)} /> 10 |
11 | 12 | 17 | -------------------------------------------------------------------------------- /docs/src/components/PreviewTypeScript.svelte: -------------------------------------------------------------------------------- 1 | 16 | 17 | {#if type === "multi"} 18 |
19 | 20 | {@html highlightedCode} 21 | 22 |
23 | {/if} 24 | 25 | {#if type === "inline"} 26 | 27 | {@html highlightedCode} 28 | 29 | {/if} 30 | -------------------------------------------------------------------------------- /docs/src/index.js: -------------------------------------------------------------------------------- 1 | import App from "./App.svelte"; 2 | import "../../css/all.css"; 3 | import "./global.css"; 4 | 5 | const app = new App({ target: document.body }); 6 | 7 | export default app; 8 | -------------------------------------------------------------------------------- /docs/src/pages/_fallback.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | 12 |

404

13 |
14 | Page not found. 15 | Return home 16 |
17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /docs/src/pages/components/ButtonSet.svx: -------------------------------------------------------------------------------- 1 | 6 | 7 | Group related buttons together in a set. Use this component to create consistent spacing and alignment between multiple buttons. 8 | 9 | ## Default 10 | 11 | Place buttons side by side in a horizontal layout. 12 | 13 | 14 | 15 | 16 | 17 | 18 | ## Stacked 19 | 20 | Set `stacked` to `true` to arrange buttons vertically. 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /docs/src/pages/components/SkeletonPlaceholder.svx: -------------------------------------------------------------------------------- 1 | 5 | 6 | `SkeletonPlaceholder` provides a loading state placeholder that can be used to indicate content is being loaded. It supports custom sizing and forwards mouse events for interactive loading states. 7 | 8 | ## Default 9 | 10 | Create a basic skeleton placeholder with default styling. 11 | 12 | 13 | 14 | ## Custom size 15 | 16 | Specify custom dimensions using the `style` prop. 17 | 18 | 19 | -------------------------------------------------------------------------------- /docs/src/pages/components/Tile.svx: -------------------------------------------------------------------------------- 1 | 5 | 6 | `Tile` provides a container for displaying content in a structured, card-like format. It supports light and dark variants and can be used to create consistent, visually distinct content sections. 7 | 8 | ## Default 9 | 10 | Create a basic tile container for your content. 11 | 12 | Content 13 | 14 | ## Light variant 15 | 16 | Use the light variant for light-themed backgrounds by setting `light` to `true`. 17 | 18 | Content -------------------------------------------------------------------------------- /docs/src/pages/framed/Breadcrumbs/Breadcrumbs.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | {#each items as item, i} 13 | 14 | {item.text} 15 | 16 | {/each} 17 | 18 | -------------------------------------------------------------------------------- /docs/src/pages/framed/Breakpoint/Breakpoint.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | (events = [...events, e.detail])} /> 9 | 10 |

Resize the width of your browser.

11 |
Breakpoint size
12 |

{size}

13 | 14 |
on:change
15 | 
{JSON.stringify(events, null, 2)}
16 | 17 | 27 | -------------------------------------------------------------------------------- /docs/src/pages/framed/Breakpoint/BreakpointObserver.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 |

Current breakpoint size: {$size}

10 |

Current breakpoint value: {breakpoints[$size]}px

11 |

Smaller than medium: {$smaller}

12 |

Larger than medium: {$larger}

13 | -------------------------------------------------------------------------------- /docs/src/pages/framed/Button/ProgrammaticFocus.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 16 | -------------------------------------------------------------------------------- /docs/src/pages/framed/Checkbox/CheckboxReactive.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 |
10 | 11 |
12 | 13 | checked: 14 | {checked} 15 | -------------------------------------------------------------------------------- /docs/src/pages/framed/Checkbox/MultipleCheckboxes.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | {#each values as value} 9 | 10 | {/each} 11 | 12 |
13 | 14 |
15 | 16 | Selected: 17 | {JSON.stringify(group)} 18 | -------------------------------------------------------------------------------- /docs/src/pages/framed/CodeSnippet/CodeSnippetOverride.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | copy(text)} 9 | /> 10 | -------------------------------------------------------------------------------- /docs/src/pages/framed/CodeSnippet/CodeSnippetReactive.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | i + 1).join("\n")} 12 | bind:expanded 13 | on:expand={() => { 14 | console.log("on:expand"); 15 | }} 16 | on:collapse={() => { 17 | console.log("on:collapse"); 18 | }} 19 | /> 20 | -------------------------------------------------------------------------------- /docs/src/pages/framed/CodeSnippet/DynamicCodeSnippet.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | 16 | 17 | -------------------------------------------------------------------------------- /docs/src/pages/framed/ComboBox/ComboBoxClear.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /docs/src/pages/framed/ComboBox/ComboBoxSlot.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 16 |
17 | {item.text} 18 |
19 |
20 | id: {item.id} - index: 21 | {index} 22 |
23 | 24 | 25 | 30 | -------------------------------------------------------------------------------- /docs/src/pages/framed/ComboBox/FilterableComboBox.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | 20 | -------------------------------------------------------------------------------- /docs/src/pages/framed/ComboBox/ReactiveComboBox.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 16 |
17 | 20 | 21 | -------------------------------------------------------------------------------- /docs/src/pages/framed/ContentSwitcher/ContentSwitcherReactive.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 21 |
22 | 23 |
Selected index: {selectedIndex}
24 | 25 | 30 | -------------------------------------------------------------------------------- /docs/src/pages/framed/CopyButton/CopyButtonOverride.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | copy(text)} /> 7 | -------------------------------------------------------------------------------- /docs/src/pages/framed/DataTable/DataTableBatchSelection.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | ({ 18 | id: i, 19 | name: "Load Balancer " + (i + 1), 20 | protocol: "HTTP", 21 | port: i % 3 ? (i % 2 ? 3000 : 80) : 443, 22 | rule: i % 3 ? "Round robin" : "DNS delegation", 23 | }))} 24 | /> 25 | -------------------------------------------------------------------------------- /docs/src/pages/framed/DataTable/DataTableBatchSelectionInitial.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | ({ 18 | id: i, 19 | name: "Load Balancer " + (i + 1), 20 | protocol: "HTTP", 21 | port: i % 3 ? (i % 2 ? 3000 : 80) : 443, 22 | rule: i % 3 ? "Round robin" : "DNS delegation", 23 | }))} 24 | /> 25 | -------------------------------------------------------------------------------- /docs/src/pages/framed/DataTable/DataTableHeaderWidth.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | ({ 13 | id: i, 14 | name: "Load Balancer " + (i + 1), 15 | protocol: "HTTP", 16 | port: i % 3 ? (i % 2 ? 3000 : 80) : 443, 17 | rule: i % 3 ? "Round robin" : "DNS delegation", 18 | }))} 19 | /> 20 | -------------------------------------------------------------------------------- /docs/src/pages/framed/DataTable/SelectableDataTable.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | ({ 18 | id: i, 19 | name: "Load Balancer " + (i + 1), 20 | protocol: "HTTP", 21 | port: i % 3 ? (i % 2 ? 3000 : 80) : 443, 22 | rule: i % 3 ? "Round robin" : "DNS delegation", 23 | }))} 24 | /> 25 | -------------------------------------------------------------------------------- /docs/src/pages/framed/DatePicker/DatePickerModal.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 | 13 | 14 | (open = false)} 20 | > 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /docs/src/pages/framed/DatePicker/DatePickerRange.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /docs/src/pages/framed/DatePicker/DatePickerSingle.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /docs/src/pages/framed/Dropdown/DropdownSlot.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 16 |
17 | {item.text} 18 |
19 |
20 | id: {item.id} - index: 21 | {index} 22 |
23 | 24 | 25 | 30 | -------------------------------------------------------------------------------- /docs/src/pages/framed/FileUploader/FileUploaderClearFiles.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 16 | 17 |
18 | 19 | 26 | 29 | -------------------------------------------------------------------------------- /docs/src/pages/framed/FluidForm/FluidFormInvalid.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 | 15 | 16 | 25 | 26 | -------------------------------------------------------------------------------- /docs/src/pages/framed/Grid/AspectRatioColumns.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 2x1 8 | 2x1 9 | 10 | 11 | -------------------------------------------------------------------------------- /docs/src/pages/framed/Grid/CondensedGrid.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | Column 8 | Column 9 | Column 10 | Column 11 | 12 | 13 | -------------------------------------------------------------------------------- /docs/src/pages/framed/Grid/FullWidthGrid.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | Column 8 | Column 9 | Column 10 | Column 11 | 12 | 13 | -------------------------------------------------------------------------------- /docs/src/pages/framed/Grid/Grid.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | Column 8 | Column 9 | Column 10 | Column 11 | 12 | 13 | -------------------------------------------------------------------------------- /docs/src/pages/framed/Grid/NarrowGrid.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | Column 8 | Column 9 | Column 10 | Column 11 | 12 | 13 | -------------------------------------------------------------------------------- /docs/src/pages/framed/Grid/OffsetColumns.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | Offset 3 8 | Offset 2 9 | Offset 1 10 | Offset 0 11 | 12 | 13 | -------------------------------------------------------------------------------- /docs/src/pages/framed/Grid/ResponsiveGrid.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | sm: 1, md: 4, lg: 8 8 | sm: 1, md: 2, lg: 2 9 | sm: 1, md: 1, lg: 1 10 | sm: 1, md: 1, lg: 1 11 | 12 | 13 | -------------------------------------------------------------------------------- /docs/src/pages/framed/ImageLoader/DynamicImageLoader.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 | 22 | 23 |
24 | 25 |
26 | -------------------------------------------------------------------------------- /docs/src/pages/framed/ImageLoader/ProgrammaticImageLoader.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 | 19 | 20 | 21 | 22 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /docs/src/pages/framed/Loading/Loading.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /docs/src/pages/framed/LocalStorage/LocalStorage.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | { 14 | events = [...events, { event: "on:save" }]; 15 | }} 16 | on:update={({ detail }) => { 17 | events = [...events, { event: "on:update", detail }]; 18 | }} 19 | /> 20 | 21 | 22 | 23 |
24 | 25 | 
{JSON.stringify(events, null, 2)}
26 | -------------------------------------------------------------------------------- /docs/src/pages/framed/LocalStorage/LocalStorageClear.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /docs/src/pages/framed/Modal/3ButtonModal.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | { 15 | if (detail.text === "Cancel") open = false; 16 | if (detail.text === "Edit") console.log("Edit"); 17 | }} 18 | on:open 19 | on:close 20 | on:submit 21 | > 22 |

Create a new Cloudant database in the US South region.

23 | 24 | -------------------------------------------------------------------------------- /docs/src/pages/framed/Modal/ComposedModal.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /docs/src/pages/framed/Modal/DangerModal.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | (open = false)} 16 | on:open 17 | on:close 18 | on:submit 19 | > 20 |

This is a permanent action and cannot be undone.

21 | 22 | -------------------------------------------------------------------------------- /docs/src/pages/framed/Modal/Modal.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | (open = false)} 15 | on:open 16 | on:close 17 | on:submit 18 | > 19 |

Create a new Cloudant database in the US South region.

20 | 21 | -------------------------------------------------------------------------------- /docs/src/pages/framed/Modal/ModalButtonWithIcon.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 17 |

Do you really want to invite someone?

18 | 19 | -------------------------------------------------------------------------------- /docs/src/pages/framed/Modal/ModalCustomFocus.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | (open = false)} 16 | on:open 17 | on:close 18 | on:submit 19 | > 20 |

Create a new Cloudant database in the US South region.

21 |
22 | 27 | 28 | -------------------------------------------------------------------------------- /docs/src/pages/framed/Modal/ModalExtraSmall.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 20 |

Create a new Cloudant database in the US South region.

21 | 22 | -------------------------------------------------------------------------------- /docs/src/pages/framed/Modal/ModalLarge.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 20 |

Create a new Cloudant database in the US South region.

21 | 22 | -------------------------------------------------------------------------------- /docs/src/pages/framed/Modal/ModalPreventOutsideClick.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 20 |

Create a new Cloudant database in the US South region.

21 | 22 | -------------------------------------------------------------------------------- /docs/src/pages/framed/Modal/ModalScrollingContent.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 10 |

11 | Cloudant is a fully managed, distributed database optimized for heavy 12 | workloads and fast-growing web and mobile apps, IBM Cloudant is available as 13 | an IBM Cloud® service with a 99.99% SLA. 14 |

15 |
16 |

17 | The database elastically scales throughput and storage, and its API and 18 | replication protocols are compatible with Apache CouchDB for hybrid or 19 | multicloud architectures. 20 |

21 | 22 | -------------------------------------------------------------------------------- /docs/src/pages/framed/Modal/ModalSmall.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 20 |

Create a new Cloudant database in the US South region.

21 | 22 | -------------------------------------------------------------------------------- /docs/src/pages/framed/Modal/PassiveModal.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 10 |

11 | IBM Cloudant is a distributed, secure database with global availability and 12 | zero vendor lock-in used to build web and mobile apps at scale. 13 |

14 | 15 | -------------------------------------------------------------------------------- /docs/src/pages/framed/MultiSelect/MultiSelectSlot.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 16 |
17 | {item.text} 18 |
19 |
20 | id: {item.id} - index: 21 | {index} 22 |
23 | 24 | 25 | 34 | -------------------------------------------------------------------------------- /docs/src/pages/framed/NumberInput/NumberInputEmpty.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 |
10 | 11 | 12 |
13 | 14 | Value: 15 | {value} 16 | -------------------------------------------------------------------------------- /docs/src/pages/framed/PaginationNav/PaginationNavReactive.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 |
10 | 13 |
14 | 15 | page: 16 | {page} 17 | -------------------------------------------------------------------------------- /docs/src/pages/framed/Popover/WithButton.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |
9 | 10 | { 14 | console.log("on:click:outside"); 15 | open = ref.contains(detail.target); 16 | }} 17 | > 18 |
Content
19 | 20 |
21 | -------------------------------------------------------------------------------- /docs/src/pages/framed/RadioTile/RadioTileReactive.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | {#each values as value} 11 | {value} 12 | {/each} 13 | 14 | 15 |
16 | Selected: {selected} 17 |
18 | 19 | 26 | 27 | 32 | -------------------------------------------------------------------------------- /docs/src/pages/framed/RadioTile/RadioTileReactiveOneWay.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | (selected = detail)} 13 | > 14 | {#each values as value} 15 | 16 | {value} 17 | 18 | {/each} 19 | 20 | 21 |
22 | 23 | Selected: {selected} 24 | -------------------------------------------------------------------------------- /docs/src/pages/framed/RecursiveList/RecursiveList.svelte: -------------------------------------------------------------------------------- 1 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /docs/src/pages/framed/RecursiveList/RecursiveListFlatArray.svelte: -------------------------------------------------------------------------------- 1 | 19 | 20 | node.pid)} /> 21 | -------------------------------------------------------------------------------- /docs/src/pages/framed/RecursiveList/RecursiveListOrdered.svelte: -------------------------------------------------------------------------------- 1 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /docs/src/pages/framed/RecursiveList/RecursiveListOrderedNative.svelte: -------------------------------------------------------------------------------- 1 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /docs/src/pages/framed/Search/SearchExpandableReactive.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 |
10 | 11 | Expanded: 12 | {expanded} 13 | -------------------------------------------------------------------------------- /docs/src/pages/framed/Search/SearchReactive.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 |
10 | 11 | 18 | 26 | 27 |
28 | 29 |
Value: {value}
30 | 31 | 36 | -------------------------------------------------------------------------------- /docs/src/pages/framed/Select/SelectReactive.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 14 | 15 |
16 | Selected: {selected} 17 |
18 | 19 | 22 | -------------------------------------------------------------------------------- /docs/src/pages/framed/Tabs/TabsReactive.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Content 1 13 | Content 2 14 | Content 3 15 | 16 | 17 | 18 |
19 | 20 |
21 | 22 | Selected index: 23 | {selected} 24 | -------------------------------------------------------------------------------- /docs/src/pages/framed/Theme/Theme.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | {#each ["white", "g10", "g80", "g90", "g100"] as value} 15 | 16 | {/each} 17 | 18 | -------------------------------------------------------------------------------- /docs/src/pages/framed/Theme/ThemePersist.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | {#each ["white", "g10", "g80", "g90", "g100"] as value} 15 | 16 | {/each} 17 | 18 | -------------------------------------------------------------------------------- /docs/src/pages/framed/Theme/ThemeSelect.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /docs/src/pages/framed/Theme/ThemeSelectCustom.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 13 | -------------------------------------------------------------------------------- /docs/src/pages/framed/Theme/ThemeToggle.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /docs/src/pages/framed/Theme/ThemeToggleCustom.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 15 | -------------------------------------------------------------------------------- /docs/src/pages/framed/Theme/ThemeTokens.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /docs/src/pages/framed/Toggle/ToggleReactive.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 |
10 | 14 |
15 | 16 |
Toggled: {toggled}
17 | 18 | 23 | -------------------------------------------------------------------------------- /docs/src/pages/framed/Tooltip/TooltipReactive.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 |

Resources are provisioned based on your account's organization.

9 | 10 | 11 |
12 | 15 |
16 | 17 |
Open: {open}
18 | 19 | 24 | -------------------------------------------------------------------------------- /docs/src/store.js: -------------------------------------------------------------------------------- 1 | import { writable } from "svelte/store"; 2 | 3 | export const theme = writable("white"); 4 | -------------------------------------------------------------------------------- /docs/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import { svelte } from "@sveltejs/vite-plugin-svelte"; 3 | 4 | export default defineConfig({ 5 | plugins: [svelte()], 6 | optimizeDeps: { 7 | include: ["clipboard-copy", "flatpickr/dist/plugins/rangePlugin"], 8 | exclude: [ 9 | "carbon-components-svelte", 10 | "carbon-icons-svelte", 11 | "@sveltech/routify", 12 | ], 13 | }, 14 | }); 15 | -------------------------------------------------------------------------------- /examples/rollup/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | /.vscode 3 | /build 4 | /node_modules 5 | /public/build -------------------------------------------------------------------------------- /examples/rollup/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "type": "module", 4 | "scripts": { 5 | "dev": "rollup -cw", 6 | "build": "rollup -c" 7 | }, 8 | "dependencies": { 9 | "carbon-components-svelte": "^0.88.4" 10 | }, 11 | "devDependencies": { 12 | "@rollup/plugin-commonjs": "^26.0.3", 13 | "@rollup/plugin-node-resolve": "^15.3.1", 14 | "@rollup/plugin-terser": "^0.4.4", 15 | "carbon-preprocess-svelte": "^0.11.11", 16 | "rollup": "^4.40.2", 17 | "rollup-plugin-css-only": "^4.5.2", 18 | "rollup-plugin-svelte": "^7.2.2", 19 | "svelte": "^4.2.19" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /examples/rollup/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | rollup 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /examples/rollup/src/App.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /examples/rollup/src/index.js: -------------------------------------------------------------------------------- 1 | import App from "./App.svelte"; 2 | 3 | const app = new App({ target: document.body }); 4 | 5 | export default app; 6 | -------------------------------------------------------------------------------- /examples/sveltekit/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | /node_modules 3 | /.svelte-kit 4 | /build 5 | -------------------------------------------------------------------------------- /examples/sveltekit/jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.svelte-kit/tsconfig.json", 3 | "compilerOptions": { 4 | "ignoreDeprecations": "5.0" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /examples/sveltekit/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "type": "module", 4 | "scripts": { 5 | "dev": "vite dev", 6 | "build": "vite build", 7 | "preview": "vite preview" 8 | }, 9 | "dependencies": { 10 | "carbon-components-svelte": "^0.88.4", 11 | "carbon-pictograms-svelte": "^13.5.0" 12 | }, 13 | "devDependencies": { 14 | "@sveltejs/kit": "^2.21.0", 15 | "@sveltejs/vite-plugin-svelte": "^3.1.2", 16 | "carbon-preprocess-svelte": "^0.11.11", 17 | "svelte": "^4.2.19", 18 | "vite": "^5.4.19" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /examples/sveltekit/src/app.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | // See https://kit.svelte.dev/docs/types#the-app-namespace 4 | // for information about these interfaces 5 | declare namespace App { 6 | // interface Locals {} 7 | // interface Platform {} 8 | // interface Session {} 9 | // interface Stuff {} 10 | } 11 | -------------------------------------------------------------------------------- /examples/sveltekit/src/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | %sveltekit.head% 7 | 8 | 9 |
%sveltekit.body%
10 | 11 | 12 | -------------------------------------------------------------------------------- /examples/sveltekit/src/routes/+layout.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /examples/sveltekit/src/routes/+page.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 9 | 10 | {JSON.stringify(breakpoints)} 11 | -------------------------------------------------------------------------------- /examples/sveltekit/svelte.config.js: -------------------------------------------------------------------------------- 1 | import { optimizeImports } from "carbon-preprocess-svelte"; 2 | 3 | /** @type {import('@sveltejs/kit').Config} */ 4 | export default { 5 | preprocess: [optimizeImports()], 6 | }; 7 | -------------------------------------------------------------------------------- /examples/sveltekit/vite.config.js: -------------------------------------------------------------------------------- 1 | import { sveltekit } from "@sveltejs/kit/vite"; 2 | import { optimizeCss } from "carbon-preprocess-svelte"; 3 | 4 | /** @type {import('vite').UserConfig} */ 5 | export default { 6 | // Optional: since we use the `optimizeImports` preprocessor, we can exclude 7 | // `carbon-components-svelte` and `carbon-pictograms-svelte` from the 8 | // `optimizeDeps` configuration for even faster cold starts. 9 | optimizeDeps: { 10 | exclude: ["carbon-components-svelte", "carbon-pictograms-svelte"], 11 | }, 12 | plugins: [sveltekit(), optimizeCss()], 13 | }; 14 | -------------------------------------------------------------------------------- /examples/vite/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .vscode 3 | node_modules/ 4 | dist/ -------------------------------------------------------------------------------- /examples/vite/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /examples/vite/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "type": "module", 4 | "scripts": { 5 | "dev": "vite", 6 | "build": "vite build" 7 | }, 8 | "dependencies": { 9 | "carbon-components-svelte": "^0.88.4" 10 | }, 11 | "devDependencies": { 12 | "@sveltejs/vite-plugin-svelte": "^3.1.2", 13 | "carbon-preprocess-svelte": "^0.11.11", 14 | "svelte": "^4.2.19", 15 | "vite": "^5.4.19" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /examples/vite/src/App.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | {breakpoints.md} 8 | -------------------------------------------------------------------------------- /examples/vite/vite.config.js: -------------------------------------------------------------------------------- 1 | import { svelte } from "@sveltejs/vite-plugin-svelte"; 2 | import { optimizeImports, optimizeCss } from "carbon-preprocess-svelte"; 3 | 4 | /** @type {import('vite').UserConfig} */ 5 | export default { 6 | // Optional: since we use the `optimizeImports` preprocessor, we can exclude 7 | // `carbon-components-svelte` and `carbon-pictograms-svelte` from the 8 | // `optimizeDeps` configuration for even faster cold starts. 9 | optimizeDeps: { 10 | exclude: ["carbon-components-svelte"], 11 | }, 12 | plugins: [ 13 | svelte({ 14 | preprocess: [optimizeImports()], 15 | }), 16 | optimizeCss(), 17 | ], 18 | }; 19 | -------------------------------------------------------------------------------- /examples/webpack/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | /node_modules 3 | public -------------------------------------------------------------------------------- /examples/webpack/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "scripts": { 4 | "dev": "webpack serve", 5 | "build": "NODE_ENV=production webpack" 6 | }, 7 | "dependencies": { 8 | "carbon-components-svelte": "^0.88.4" 9 | }, 10 | "devDependencies": { 11 | "carbon-preprocess-svelte": "^0.11.11", 12 | "css-loader": "^7.1.2", 13 | "html-webpack-plugin": "^5.6.3", 14 | "mini-css-extract-plugin": "^2.9.2", 15 | "svelte": "^4.2.19", 16 | "svelte-loader": "^3.2.4", 17 | "webpack": "^5.99.8", 18 | "webpack-cli": "^5.1.4", 19 | "webpack-dev-server": "^5.2.1" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /examples/webpack/src/App.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /examples/webpack/src/index.js: -------------------------------------------------------------------------------- 1 | import App from "./App.svelte"; 2 | 3 | const app = new App({ target: document.body }); 4 | 5 | export default app; 6 | -------------------------------------------------------------------------------- /scripts/build-docs.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import fs from "node:fs"; 3 | import { globSync } from "tinyglobby"; 4 | import { sveld } from "sveld"; 5 | import pkg from "../package.json" with { type: "json" }; 6 | 7 | sveld({ 8 | glob: true, 9 | markdown: true, 10 | markdownOptions: { 11 | onAppend: (type, document, components) => { 12 | if (type === "h1") 13 | document.append( 14 | "quote", 15 | `${components.size} components exported from ${pkg.name}@${pkg.version}.`, 16 | ); 17 | }, 18 | }, 19 | json: true, 20 | jsonOptions: { 21 | outFile: "docs/src/COMPONENT_API.json", 22 | }, 23 | }); 24 | 25 | for (const file of globSync(["./src/**/*.d.ts"])) { 26 | console.log("Copying", file, " to types/"); 27 | fs.copyFileSync(file, file.replace(/src/, "types")); 28 | } 29 | -------------------------------------------------------------------------------- /src/Accordion/index.js: -------------------------------------------------------------------------------- 1 | export { default as Accordion } from "./Accordion.svelte"; 2 | export { default as AccordionItem } from "./AccordionItem.svelte"; 3 | export { default as AccordionSkeleton } from "./AccordionSkeleton.svelte"; 4 | -------------------------------------------------------------------------------- /src/AspectRatio/index.js: -------------------------------------------------------------------------------- 1 | export { default as AspectRatio } from "./AspectRatio.svelte"; 2 | -------------------------------------------------------------------------------- /src/Breadcrumb/index.js: -------------------------------------------------------------------------------- 1 | export { default as Breadcrumb } from "./Breadcrumb.svelte"; 2 | export { default as BreadcrumbItem } from "./BreadcrumbItem.svelte"; 3 | export { default as BreadcrumbSkeleton } from "./BreadcrumbSkeleton.svelte"; 4 | -------------------------------------------------------------------------------- /src/Breakpoint/breakpoints.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Pixel sizes of Carbon grid breakpoints. 3 | * @type {Record} 4 | */ 5 | export const breakpoints: Record; 6 | 7 | export type BreakpointSize = "sm" | "md" | "lg" | "xlg" | "max"; 8 | 9 | export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584; 10 | 11 | export default breakpoints; 12 | -------------------------------------------------------------------------------- /src/Breakpoint/breakpoints.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Pixel sizes of Carbon grid breakpoints. 3 | * @type {Record} 4 | */ 5 | export const breakpoints = Object.freeze({ 6 | sm: 320, 7 | md: 672, 8 | lg: 1056, 9 | xlg: 1312, 10 | max: 1584, 11 | }); 12 | 13 | export default breakpoints; 14 | -------------------------------------------------------------------------------- /src/Breakpoint/index.d.ts: -------------------------------------------------------------------------------- 1 | // @ts-nocheck `Breakpoint` is auto-generated by `sveld`. 2 | export { default as Breakpoint } from "./Breakpoint.svelte"; 3 | export { breakpointObserver } from "./breakpointObserver"; 4 | export { breakpoints } from "./breakpoints"; 5 | -------------------------------------------------------------------------------- /src/Breakpoint/index.js: -------------------------------------------------------------------------------- 1 | export { default as Breakpoint } from "./Breakpoint.svelte"; 2 | export { breakpointObserver } from "./breakpointObserver"; 3 | export { breakpoints } from "./breakpoints"; 4 | -------------------------------------------------------------------------------- /src/Button/ButtonSet.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |
11 | 12 |
13 | -------------------------------------------------------------------------------- /src/Button/index.js: -------------------------------------------------------------------------------- 1 | export { default as Button } from "./Button.svelte"; 2 | export { default as ButtonSkeleton } from "./ButtonSkeleton.svelte"; 3 | export { default as ButtonSet } from "./ButtonSet.svelte"; 4 | -------------------------------------------------------------------------------- /src/Checkbox/CheckboxSkeleton.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 |
13 | 14 |
15 | -------------------------------------------------------------------------------- /src/Checkbox/index.js: -------------------------------------------------------------------------------- 1 | export { default as Checkbox } from "./Checkbox.svelte"; 2 | export { default as CheckboxSkeleton } from "./CheckboxSkeleton.svelte"; 3 | export { default as InlineCheckbox } from "./InlineCheckbox.svelte"; 4 | -------------------------------------------------------------------------------- /src/CodeSnippet/CodeSnippetSkeleton.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | 11 |
22 |
23 | {#if type === "single"} 24 | 25 | {:else if type === "multi"} {/if} 26 |
27 |
28 | -------------------------------------------------------------------------------- /src/CodeSnippet/index.js: -------------------------------------------------------------------------------- 1 | export { default as CodeSnippet } from "./CodeSnippet.svelte"; 2 | export { default as CodeSnippetSkeleton } from "./CodeSnippetSkeleton.svelte"; 3 | -------------------------------------------------------------------------------- /src/ComboBox/index.js: -------------------------------------------------------------------------------- 1 | export { default as ComboBox } from "./ComboBox.svelte"; 2 | -------------------------------------------------------------------------------- /src/ComposedModal/ModalBody.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 |
18 | 19 |
20 | {#if hasScrollingContent} 21 |
22 | {/if} 23 | -------------------------------------------------------------------------------- /src/ComposedModal/index.js: -------------------------------------------------------------------------------- 1 | export { default as ComposedModal } from "./ComposedModal.svelte"; 2 | export { default as ModalHeader } from "./ModalHeader.svelte"; 3 | export { default as ModalBody } from "./ModalBody.svelte"; 4 | export { default as ModalFooter } from "./ModalFooter.svelte"; 5 | -------------------------------------------------------------------------------- /src/ContentSwitcher/index.js: -------------------------------------------------------------------------------- 1 | export { default as ContentSwitcher } from "./ContentSwitcher.svelte"; 2 | export { default as Switch } from "./Switch.svelte"; 3 | -------------------------------------------------------------------------------- /src/ContextMenu/ContextMenuDivider.svelte: -------------------------------------------------------------------------------- 1 |
  • 2 | -------------------------------------------------------------------------------- /src/ContextMenu/index.js: -------------------------------------------------------------------------------- 1 | export { default as ContextMenu } from "./ContextMenu.svelte"; 2 | export { default as ContextMenuDivider } from "./ContextMenuDivider.svelte"; 3 | export { default as ContextMenuGroup } from "./ContextMenuGroup.svelte"; 4 | export { default as ContextMenuOption } from "./ContextMenuOption.svelte"; 5 | export { default as ContextMenuRadioGroup } from "./ContextMenuRadioGroup.svelte"; 6 | -------------------------------------------------------------------------------- /src/CopyButton/index.js: -------------------------------------------------------------------------------- 1 | export { default as CopyButton } from "./CopyButton.svelte"; 2 | -------------------------------------------------------------------------------- /src/DataTable/DataTableTypes.d.ts: -------------------------------------------------------------------------------- 1 | type PathDepth = [never, 0, 1, 2, ...0[]]; 2 | 3 | type Join = K extends string | number 4 | ? P extends string | number 5 | ? `${K}${"" extends P ? "" : "."}${P}` 6 | : never 7 | : never; 8 | 9 | // For performance, the maximum traversal depth is 10. 10 | export type PropertyPath = [D] extends [never] 11 | ? never 12 | : T extends object 13 | ? { 14 | [K in keyof T]-?: K extends string | number 15 | ? `${K}` | Join> 16 | : never; 17 | }[keyof T] 18 | : ""; 19 | -------------------------------------------------------------------------------- /src/DataTable/TableBody.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/DataTable/TableCell.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/DataTable/TableHead.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/DataTable/TableRow.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/DataTable/ToolbarContent.svelte: -------------------------------------------------------------------------------- 1 |
    2 | 3 |
    4 | -------------------------------------------------------------------------------- /src/DataTable/ToolbarMenu.svelte: -------------------------------------------------------------------------------- 1 | 14 | 15 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/DataTable/ToolbarMenuItem.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/DatePicker/index.js: -------------------------------------------------------------------------------- 1 | export { default as DatePicker } from "./DatePicker.svelte"; 2 | export { default as DatePickerInput } from "./DatePickerInput.svelte"; 3 | export { default as DatePickerSkeleton } from "./DatePickerSkeleton.svelte"; 4 | -------------------------------------------------------------------------------- /src/Dropdown/DropdownSkeleton.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 |
    20 |
    21 | 22 |
    23 |
    24 | -------------------------------------------------------------------------------- /src/Dropdown/index.js: -------------------------------------------------------------------------------- 1 | export { default as Dropdown } from "./Dropdown.svelte"; 2 | export { default as DropdownSkeleton } from "./DropdownSkeleton.svelte"; 3 | -------------------------------------------------------------------------------- /src/FileUploader/FileUploaderSkeleton.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 |
    16 | 17 | 18 | 19 |
    20 | -------------------------------------------------------------------------------- /src/FileUploader/index.js: -------------------------------------------------------------------------------- 1 | export { default as FileUploader } from "./FileUploader.svelte"; 2 | export { default as FileUploaderButton } from "./FileUploaderButton.svelte"; 3 | export { default as FileUploaderItem } from "./FileUploaderItem.svelte"; 4 | export { default as FileUploaderDropContainer } from "./FileUploaderDropContainer.svelte"; 5 | export { default as Filename } from "./Filename.svelte"; 6 | export { default as FileUploaderSkeleton } from "./FileUploaderSkeleton.svelte"; 7 | -------------------------------------------------------------------------------- /src/FluidForm/FluidForm.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |
    22 | 23 | 24 | -------------------------------------------------------------------------------- /src/FluidForm/index.js: -------------------------------------------------------------------------------- 1 | export { default as FluidForm } from "./FluidForm.svelte"; 2 | -------------------------------------------------------------------------------- /src/Form/Form.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 |
    19 | 20 | 21 | -------------------------------------------------------------------------------- /src/Form/index.js: -------------------------------------------------------------------------------- 1 | export { default as Form } from "./Form.svelte"; 2 | -------------------------------------------------------------------------------- /src/FormGroup/index.js: -------------------------------------------------------------------------------- 1 | export { default as FormGroup } from "./FormGroup.svelte"; 2 | -------------------------------------------------------------------------------- /src/FormItem/FormItem.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 |
    11 | 12 |
    13 | -------------------------------------------------------------------------------- /src/FormItem/index.js: -------------------------------------------------------------------------------- 1 | export { default as FormItem } from "./FormItem.svelte"; 2 | -------------------------------------------------------------------------------- /src/FormLabel/FormLabel.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 19 | -------------------------------------------------------------------------------- /src/FormLabel/index.js: -------------------------------------------------------------------------------- 1 | export { default as FormLabel } from "./FormLabel.svelte"; 2 | -------------------------------------------------------------------------------- /src/Grid/index.js: -------------------------------------------------------------------------------- 1 | export { default as Grid } from "./Grid.svelte"; 2 | export { default as Row } from "./Row.svelte"; 3 | export { default as Column } from "./Column.svelte"; 4 | -------------------------------------------------------------------------------- /src/ImageLoader/index.js: -------------------------------------------------------------------------------- 1 | export { default as ImageLoader } from "./ImageLoader.svelte"; 2 | -------------------------------------------------------------------------------- /src/InlineLoading/index.js: -------------------------------------------------------------------------------- 1 | export { default as InlineLoading } from "./InlineLoading.svelte"; 2 | -------------------------------------------------------------------------------- /src/Link/OutboundLink.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/Link/index.js: -------------------------------------------------------------------------------- 1 | export { default as Link } from "./Link.svelte"; 2 | export { default as OutboundLink } from "./OutboundLink.svelte"; 3 | -------------------------------------------------------------------------------- /src/ListBox/ListBoxMenu.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 19 | -------------------------------------------------------------------------------- /src/ListBox/index.js: -------------------------------------------------------------------------------- 1 | export { default as ListBox } from "./ListBox.svelte"; 2 | export { default as ListBoxField } from "./ListBoxField.svelte"; 3 | export { default as ListBoxMenu } from "./ListBoxMenu.svelte"; 4 | export { default as ListBoxMenuIcon } from "./ListBoxMenuIcon.svelte"; 5 | export { default as ListBoxMenuItem } from "./ListBoxMenuItem.svelte"; 6 | export { default as ListBoxSelection } from "./ListBoxSelection.svelte"; 7 | -------------------------------------------------------------------------------- /src/ListItem/ListItem.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 |
  • 11 | 12 |
    • 13 | -------------------------------------------------------------------------------- /src/ListItem/index.js: -------------------------------------------------------------------------------- 1 | export { default as ListItem } from "./ListItem.svelte"; 2 | -------------------------------------------------------------------------------- /src/Loading/index.js: -------------------------------------------------------------------------------- 1 | export { default as Loading } from "./Loading.svelte"; 2 | -------------------------------------------------------------------------------- /src/LocalStorage/index.js: -------------------------------------------------------------------------------- 1 | export { default as LocalStorage } from "./LocalStorage.svelte"; 2 | -------------------------------------------------------------------------------- /src/Modal/index.js: -------------------------------------------------------------------------------- 1 | export { default as Modal } from "./Modal.svelte"; 2 | -------------------------------------------------------------------------------- /src/MultiSelect/index.js: -------------------------------------------------------------------------------- 1 | export { default as MultiSelect } from "./MultiSelect.svelte"; 2 | -------------------------------------------------------------------------------- /src/Notification/NotificationActionButton.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 19 | -------------------------------------------------------------------------------- /src/Notification/index.js: -------------------------------------------------------------------------------- 1 | export { default as ToastNotification } from "./ToastNotification.svelte"; 2 | export { default as InlineNotification } from "./InlineNotification.svelte"; 3 | export { default as NotificationActionButton } from "./NotificationActionButton.svelte"; 4 | export { default as NotificationButton } from "./NotificationButton.svelte"; 5 | export { default as NotificationIcon } from "./NotificationIcon.svelte"; 6 | -------------------------------------------------------------------------------- /src/NumberInput/NumberInputSkeleton.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 |
    16 | {#if !hideLabel} 17 | 18 | {/if} 19 |
    20 |
    21 | -------------------------------------------------------------------------------- /src/NumberInput/index.js: -------------------------------------------------------------------------------- 1 | export { default as NumberInput } from "./NumberInput.svelte"; 2 | export { default as NumberInputSkeleton } from "./NumberInputSkeleton.svelte"; 3 | -------------------------------------------------------------------------------- /src/OrderedList/OrderedList.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 | 13 | 14 |
      25 | 26 |
    27 | -------------------------------------------------------------------------------- /src/OrderedList/index.js: -------------------------------------------------------------------------------- 1 | export { default as OrderedList } from "./OrderedList.svelte"; 2 | -------------------------------------------------------------------------------- /src/OverflowMenu/index.js: -------------------------------------------------------------------------------- 1 | export { default as OverflowMenu } from "./OverflowMenu.svelte"; 2 | export { default as OverflowMenuItem } from "./OverflowMenuItem.svelte"; 3 | -------------------------------------------------------------------------------- /src/Pagination/PaginationSkeleton.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 |
    16 |
    17 | 18 | 19 | 20 |
    21 |
    22 | 23 |
    24 |
    25 | -------------------------------------------------------------------------------- /src/Pagination/index.js: -------------------------------------------------------------------------------- 1 | export { default as Pagination } from "./Pagination.svelte"; 2 | export { default as PaginationSkeleton } from "./PaginationSkeleton.svelte"; 3 | -------------------------------------------------------------------------------- /src/PaginationNav/PaginationItem.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 |
  • 10 | 23 |
    • 24 | -------------------------------------------------------------------------------- /src/PaginationNav/index.js: -------------------------------------------------------------------------------- 1 | export { default as PaginationNav } from "./PaginationNav.svelte"; 2 | -------------------------------------------------------------------------------- /src/Popover/index.js: -------------------------------------------------------------------------------- 1 | export { default as Popover } from "./Popover.svelte"; 2 | -------------------------------------------------------------------------------- /src/ProgressBar/index.js: -------------------------------------------------------------------------------- 1 | export { default as ProgressBar } from "./ProgressBar.svelte"; 2 | -------------------------------------------------------------------------------- /src/ProgressIndicator/index.js: -------------------------------------------------------------------------------- 1 | export { default as ProgressIndicator } from "./ProgressIndicator.svelte"; 2 | export { default as ProgressIndicatorSkeleton } from "./ProgressIndicatorSkeleton.svelte"; 3 | export { default as ProgressStep } from "./ProgressStep.svelte"; 4 | -------------------------------------------------------------------------------- /src/RadioButton/RadioButtonSkeleton.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 |
    11 |
    12 | 13 |
    14 | -------------------------------------------------------------------------------- /src/RadioButton/index.js: -------------------------------------------------------------------------------- 1 | export { default as RadioButton } from "./RadioButton.svelte"; 2 | export { default as RadioButtonSkeleton } from "./RadioButtonSkeleton.svelte"; 3 | -------------------------------------------------------------------------------- /src/RadioButtonGroup/index.js: -------------------------------------------------------------------------------- 1 | export { default as RadioButtonGroup } from "./RadioButtonGroup.svelte"; 2 | -------------------------------------------------------------------------------- /src/RecursiveList/RecursiveListItem.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 | 15 | {#if text && !href}{text}{/if} 16 | {#if href}{text || href}{/if} 17 | {#if !text && html}{@html html}{/if} 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/RecursiveList/index.js: -------------------------------------------------------------------------------- 1 | export { default as RecursiveList } from "./RecursiveList.svelte"; 2 | -------------------------------------------------------------------------------- /src/Search/SearchSkeleton.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | 11 |
    22 | 23 |
    24 |
    25 | -------------------------------------------------------------------------------- /src/Search/index.js: -------------------------------------------------------------------------------- 1 | export { default as Search } from "./Search.svelte"; 2 | export { default as SearchSkeleton } from "./SearchSkeleton.svelte"; 3 | -------------------------------------------------------------------------------- /src/Select/SelectItemGroup.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/Select/SelectSkeleton.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 |
    16 | {#if !hideLabel} 17 | 18 | {/if} 19 |
    20 |
    21 |
    22 |
    23 | -------------------------------------------------------------------------------- /src/Select/index.js: -------------------------------------------------------------------------------- 1 | export { default as Select } from "./Select.svelte"; 2 | export { default as SelectSkeleton } from "./SelectSkeleton.svelte"; 3 | export { default as SelectItem } from "./SelectItem.svelte"; 4 | export { default as SelectItemGroup } from "./SelectItemGroup.svelte"; 5 | -------------------------------------------------------------------------------- /src/SkeletonPlaceholder/SkeletonPlaceholder.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 |
    11 | -------------------------------------------------------------------------------- /src/SkeletonPlaceholder/index.js: -------------------------------------------------------------------------------- 1 | export { default as SkeletonPlaceholder } from "./SkeletonPlaceholder.svelte"; 2 | -------------------------------------------------------------------------------- /src/SkeletonText/index.js: -------------------------------------------------------------------------------- 1 | export { default as SkeletonText } from "./SkeletonText.svelte"; 2 | -------------------------------------------------------------------------------- /src/Slider/index.js: -------------------------------------------------------------------------------- 1 | export { default as Slider } from "./Slider.svelte"; 2 | export { default as SliderSkeleton } from "./SliderSkeleton.svelte"; 3 | -------------------------------------------------------------------------------- /src/StructuredList/StructuredListBody.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 |
    12 | 13 |
    14 | -------------------------------------------------------------------------------- /src/StructuredList/StructuredListCell.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 |
    21 | 22 |
    23 | -------------------------------------------------------------------------------- /src/StructuredList/StructuredListHead.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 |
    12 | 13 |
    14 | -------------------------------------------------------------------------------- /src/StructuredList/index.js: -------------------------------------------------------------------------------- 1 | export { default as StructuredList } from "./StructuredList.svelte"; 2 | export { default as StructuredListSkeleton } from "./StructuredListSkeleton.svelte"; 3 | export { default as StructuredListBody } from "./StructuredListBody.svelte"; 4 | export { default as StructuredListHead } from "./StructuredListHead.svelte"; 5 | export { default as StructuredListCell } from "./StructuredListCell.svelte"; 6 | export { default as StructuredListRow } from "./StructuredListRow.svelte"; 7 | export { default as StructuredListInput } from "./StructuredListInput.svelte"; 8 | -------------------------------------------------------------------------------- /src/Tabs/TabContent.svelte: -------------------------------------------------------------------------------- 1 | 15 | 16 | 27 | -------------------------------------------------------------------------------- /src/Tabs/index.js: -------------------------------------------------------------------------------- 1 | export { default as Tabs } from "./Tabs.svelte"; 2 | export { default as Tab } from "./Tab.svelte"; 3 | export { default as TabContent } from "./TabContent.svelte"; 4 | export { default as TabsSkeleton } from "./TabsSkeleton.svelte"; 5 | -------------------------------------------------------------------------------- /src/Tag/TagSkeleton.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 18 | -------------------------------------------------------------------------------- /src/Tag/index.js: -------------------------------------------------------------------------------- 1 | export { default as Tag } from "./Tag.svelte"; 2 | export { default as TagSkeleton } from "./TagSkeleton.svelte"; 3 | -------------------------------------------------------------------------------- /src/TextArea/TextAreaSkeleton.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 |
    16 | {#if !hideLabel} 17 | 18 | {/if} 19 |
    20 |
    21 | -------------------------------------------------------------------------------- /src/TextArea/index.js: -------------------------------------------------------------------------------- 1 | export { default as TextArea } from "./TextArea.svelte"; 2 | export { default as TextAreaSkeleton } from "./TextAreaSkeleton.svelte"; 3 | -------------------------------------------------------------------------------- /src/TextInput/TextInputSkeleton.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 |
    16 | {#if !hideLabel} 17 | 18 | {/if} 19 |
    20 |
    21 | -------------------------------------------------------------------------------- /src/TextInput/index.js: -------------------------------------------------------------------------------- 1 | export { default as TextInput } from "./TextInput.svelte"; 2 | export { default as TextInputSkeleton } from "./TextInputSkeleton.svelte"; 3 | export { default as PasswordInput } from "./PasswordInput.svelte"; 4 | -------------------------------------------------------------------------------- /src/Theme/index.js: -------------------------------------------------------------------------------- 1 | export { default as Theme } from "./Theme.svelte"; 2 | -------------------------------------------------------------------------------- /src/Tile/Tile.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 |
    17 | 18 |
    19 | -------------------------------------------------------------------------------- /src/Tile/index.js: -------------------------------------------------------------------------------- 1 | export { default as Tile } from "./Tile.svelte"; 2 | export { default as ClickableTile } from "./ClickableTile.svelte"; 3 | export { default as ExpandableTile } from "./ExpandableTile.svelte"; 4 | export { default as SelectableTile } from "./SelectableTile.svelte"; 5 | export { default as RadioTile } from "./RadioTile.svelte"; 6 | export { default as TileGroup } from "./TileGroup.svelte"; 7 | -------------------------------------------------------------------------------- /src/TimePicker/index.js: -------------------------------------------------------------------------------- 1 | export { default as TimePicker } from "./TimePicker.svelte"; 2 | export { default as TimePickerSelect } from "./TimePickerSelect.svelte"; 3 | -------------------------------------------------------------------------------- /src/Toggle/index.js: -------------------------------------------------------------------------------- 1 | export { default as Toggle } from "./Toggle.svelte"; 2 | export { default as ToggleSkeleton } from "./ToggleSkeleton.svelte"; 3 | -------------------------------------------------------------------------------- /src/Tooltip/TooltipFooter.svelte: -------------------------------------------------------------------------------- 1 | 26 | 27 |
    28 | 29 |
    30 | -------------------------------------------------------------------------------- /src/Tooltip/index.js: -------------------------------------------------------------------------------- 1 | export { default as Tooltip } from "./Tooltip.svelte"; 2 | export { default as TooltipFooter } from "./TooltipFooter.svelte"; 3 | -------------------------------------------------------------------------------- /src/TooltipDefinition/index.js: -------------------------------------------------------------------------------- 1 | export { default as TooltipDefinition } from "./TooltipDefinition.svelte"; 2 | -------------------------------------------------------------------------------- /src/TooltipIcon/index.js: -------------------------------------------------------------------------------- 1 | export { default as TooltipIcon } from "./TooltipIcon.svelte"; 2 | -------------------------------------------------------------------------------- /src/TreeView/index.d.ts: -------------------------------------------------------------------------------- 1 | export { default as TreeView } from "./TreeView.svelte"; 2 | -------------------------------------------------------------------------------- /src/TreeView/index.js: -------------------------------------------------------------------------------- 1 | export { default as TreeView } from "./TreeView.svelte"; 2 | -------------------------------------------------------------------------------- /src/Truncate/Truncate.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |

    11 | 12 |

    13 | -------------------------------------------------------------------------------- /src/Truncate/index.js: -------------------------------------------------------------------------------- 1 | export { default as Truncate } from "./Truncate.svelte"; 2 | export { truncate } from "./truncate"; 3 | -------------------------------------------------------------------------------- /src/Truncate/truncate.d.ts: -------------------------------------------------------------------------------- 1 | interface TruncateOptions { 2 | clamp?: "end" | "front"; 3 | } 4 | 5 | export function TruncateAction( 6 | node: HTMLElement, 7 | options?: TruncateOptions, 8 | ): { 9 | update: (options?: TruncateOptions) => void; 10 | }; 11 | 12 | export default TruncateAction; 13 | -------------------------------------------------------------------------------- /src/UIShell/Content.svelte: -------------------------------------------------------------------------------- 1 | 16 | 17 |
    23 | 24 |
    25 | -------------------------------------------------------------------------------- /src/UIShell/HeaderNav.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 14 | -------------------------------------------------------------------------------- /src/UIShell/HeaderPanelDivider.svelte: -------------------------------------------------------------------------------- 1 | {#if $$slots.default} 2 |
  • 3 | 4 |
    • 5 | {/if} 6 |
    7 | 8 | 23 | -------------------------------------------------------------------------------- /src/UIShell/HeaderPanelLink.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |
  • 13 | 21 | 22 | 23 |
    • 24 | -------------------------------------------------------------------------------- /src/UIShell/HeaderPanelLinks.svelte: -------------------------------------------------------------------------------- 1 |
      2 | 3 |
    4 | -------------------------------------------------------------------------------- /src/UIShell/HeaderUtilities.svelte: -------------------------------------------------------------------------------- 1 |
    2 | 3 |
    4 | -------------------------------------------------------------------------------- /src/UIShell/SideNavDivider.svelte: -------------------------------------------------------------------------------- 1 |
  • 2 | -------------------------------------------------------------------------------- /src/UIShell/SideNavItems.svelte: -------------------------------------------------------------------------------- 1 |
      2 | 3 |
    4 | -------------------------------------------------------------------------------- /src/UIShell/SideNavMenuItem.svelte: -------------------------------------------------------------------------------- 1 | 20 | 21 |
  • 22 | 30 | {text} 31 | 32 |
    • 33 | -------------------------------------------------------------------------------- /src/UIShell/SkipToContent.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | Skip to main content 11 | 12 | -------------------------------------------------------------------------------- /src/UIShell/navStore.js: -------------------------------------------------------------------------------- 1 | import { writable } from "svelte/store"; 2 | 3 | export const shouldRenderHamburgerMenu = writable(false); 4 | 5 | export const isSideNavCollapsed = writable(false); 6 | 7 | export const isSideNavRail = writable(false); 8 | -------------------------------------------------------------------------------- /src/UnorderedList/UnorderedList.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | 11 |
      21 | 22 |
    23 | -------------------------------------------------------------------------------- /src/UnorderedList/index.js: -------------------------------------------------------------------------------- 1 | export { default as UnorderedList } from "./UnorderedList.svelte"; 2 | -------------------------------------------------------------------------------- /src/icons/Add.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 | 24 | {#if title}{title}{/if} 25 | 28 | 29 | -------------------------------------------------------------------------------- /src/icons/ArrowUp.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 | 24 | {#if title}{title}{/if} 25 | 28 | 29 | -------------------------------------------------------------------------------- /src/icons/CaretDown.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 | 24 | {#if title}{title}{/if} 25 | 26 | 27 | -------------------------------------------------------------------------------- /src/icons/CaretLeft.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 | 24 | {#if title}{title}{/if} 25 | 26 | 27 | -------------------------------------------------------------------------------- /src/icons/CaretRight.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 | 24 | {#if title}{title}{/if} 25 | 26 | 27 | -------------------------------------------------------------------------------- /src/icons/Checkmark.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 | 24 | {#if title}{title}{/if} 25 | 26 | 27 | -------------------------------------------------------------------------------- /src/icons/ChevronDown.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 | 24 | {#if title}{title}{/if} 25 | 26 | 27 | -------------------------------------------------------------------------------- /src/icons/ChevronRight.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 | 24 | {#if title}{title}{/if} 25 | 26 | 27 | -------------------------------------------------------------------------------- /src/icons/Close.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 | 24 | {#if title}{title}{/if} 25 | 28 | 29 | -------------------------------------------------------------------------------- /src/icons/Menu.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 | 24 | {#if title}{title}{/if} 25 | 26 | 27 | -------------------------------------------------------------------------------- /src/icons/Subtract.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 | 24 | {#if title}{title}{/if} 25 | 26 | 27 | -------------------------------------------------------------------------------- /src/utils/toHierarchy.d.ts: -------------------------------------------------------------------------------- 1 | type NodeLike = { 2 | id: string | number; 3 | nodes?: NodeLike[]; 4 | [key: string]: any; 5 | }; 6 | 7 | /** Create a hierarchical tree from a flat array. */ 8 | export function toHierarchy< 9 | T extends NodeLike, 10 | K extends keyof Omit, 11 | >( 12 | flatArray: T[] | readonly T[], 13 | /** 14 | * Function that returns the parent ID for a given node. 15 | * @example 16 | * toHierarchy(flatArray, (node) => node.parentId); 17 | */ 18 | getParentId: (node: T) => T[K] | null, 19 | ): (T & { nodes?: (T & { nodes?: T[] })[] })[]; 20 | 21 | export default toHierarchy; 22 | -------------------------------------------------------------------------------- /telemetry.yml: -------------------------------------------------------------------------------- 1 | # yaml-language-server: $schema=https://unpkg.com/@ibm/telemetry-config-schema@v1/dist/config.schema.json 2 | 3 | version: 1 4 | projectId: 449708c0-69d7-4b6b-b12a-c4afe605be24 5 | endpoint: https://www-api.ibm.com/ibm-telemetry/v1/metrics 6 | collect: 7 | npm: 8 | dependencies: null 9 | js: 10 | functions: {} 11 | tokens: null 12 | -------------------------------------------------------------------------------- /tests/Accordion/Accordion.skeleton.test.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /tests/AspectRatio/AspectRatio.test.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 2x1 6 | 2x3 7 | 16x9 8 | 4x3 9 | 1x1 10 | 3x4 11 | 3x2 12 | 9x16 13 | 1x2 14 | -------------------------------------------------------------------------------- /tests/AspectRatio/AspectRatio.test.ts: -------------------------------------------------------------------------------- 1 | import { render, screen } from "@testing-library/svelte"; 2 | import AspectRatio from "./AspectRatio.test.svelte"; 3 | 4 | describe("AspectRatio", () => { 5 | it("renders correctly", () => { 6 | render(AspectRatio); 7 | 8 | ["2x1", "2x3", "16x9", "4x3", "1x1", "3x4", "3x2", "9x16", "1x2"].forEach( 9 | (ratio) => { 10 | const boundingElement = screen.getByText(ratio).parentElement; 11 | expect(boundingElement).toHaveClass(`bx--aspect-ratio--${ratio}`); 12 | }, 13 | ); 14 | }); 15 | }); 16 | -------------------------------------------------------------------------------- /tests/Breadcrumb/Breadcrumb.dynamic.test.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 14 | {#each items as item, i} 15 | 16 | {item.text} 17 | 18 | {/each} 19 | 20 | -------------------------------------------------------------------------------- /tests/Breadcrumb/Breadcrumb.noTrailingSlash.test.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | Home 7 | Profile 8 | 9 | -------------------------------------------------------------------------------- /tests/Breadcrumb/Breadcrumb.skeleton.test.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /tests/Breadcrumb/Breadcrumb.test.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | Dashboard 7 | Annual reports 8 | 2019 9 | 10 | -------------------------------------------------------------------------------- /tests/Breakpoint/BreakpointObserver.test.svelte: -------------------------------------------------------------------------------- 1 | 19 | 20 |
    {smallerThanMd}
    21 |
    {largerThanMd}
    22 | -------------------------------------------------------------------------------- /tests/Breakpoint/Breakpoints.test.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
    {breakpoints.sm}
    6 |
    {breakpoints.md}
    7 |
    {breakpoints.lg}
    8 |
    {breakpoints.xlg}
    9 |
    {breakpoints.max}
    10 | -------------------------------------------------------------------------------- /tests/ButtonSet/ButtonSet.test.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /tests/Checkbox/Checkbox.group.test.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 15 | 16 | 22 | 23 | 29 | -------------------------------------------------------------------------------- /tests/Checkbox/Checkbox.skeleton.test.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /tests/Checkbox/Checkbox.slot.test.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | Custom label content 7 | 8 | -------------------------------------------------------------------------------- /tests/Checkbox/Checkbox.test.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 | console.log("check")} 19 | on:click={() => console.log("click")} 20 | /> 21 | -------------------------------------------------------------------------------- /tests/CodeSnippet/CodeSnippetCopyButton.test.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /tests/CodeSnippet/CodeSnippetCustomEvents.test.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 | Copy events: {copyCount} 12 | 13 | 18 | -------------------------------------------------------------------------------- /tests/CodeSnippet/CodeSnippetExpandable.test.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 16 | -------------------------------------------------------------------------------- /tests/CodeSnippet/CodeSnippetExpandedByDefault.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 17 | -------------------------------------------------------------------------------- /tests/CodeSnippet/CodeSnippetInline.test.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /tests/CodeSnippet/CodeSnippetMultiline.test.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 11 | -------------------------------------------------------------------------------- /tests/CodeSnippet/CodeSnippetWithCustomCopyText.test.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | -------------------------------------------------------------------------------- /tests/CodeSnippet/CodeSnippetWithHideShowMore.test.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 17 | -------------------------------------------------------------------------------- /tests/CodeSnippet/CodeSnippetWithWrapText.test.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 17 | -------------------------------------------------------------------------------- /tests/ContentSwitcher/ContentSwitcher.custom.test.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 |
    Custom Content
    8 |     9 | 10 |     11 | -------------------------------------------------------------------------------- /tests/ContentSwitcher/ContentSwitcher.disabled.test.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /tests/ContentSwitcher/ContentSwitcher.selectedIndex.test.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /tests/ContentSwitcher/ContentSwitcher.size.test.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /tests/ContentSwitcher/ContentSwitcher.test.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /tests/CopyButton/CopyButton.test.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | { 9 | console.log("copied"); 10 | }} 11 | /> 12 | 13 | 19 | 20 | { 24 | console.log(`Custom copy: ${text}`); 25 | }} 26 | /> 27 | -------------------------------------------------------------------------------- /tests/DataTable/DuplicateDataTables.test.svelte: -------------------------------------------------------------------------------- 1 | 14 | 15 | 16 | 17 | 18 | 25 | 32 | -------------------------------------------------------------------------------- /tests/DatePicker/DatePickerRange.test.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /tests/Dropdown/DropdownSlot.test.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 | 22 | 23 | Item {index + 1}: {item.text} 24 | 25 | 26 | -------------------------------------------------------------------------------- /tests/FluidForm/FluidForm.test.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 | { 15 | if (preventDefault) { 16 | e.preventDefault(); 17 | } 18 | console.log("submit", e); 19 | }} 20 | > 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /tests/Form/Form.test.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |
    { 10 | if (preventDefault) { 11 | e.preventDefault(); 12 | } 13 | console.log("submit", e); 14 | }} 15 | > 16 | 17 | 18 | 19 | 20 | 21 | 22 |
    23 | -------------------------------------------------------------------------------- /tests/InlineNotification/InlineNotification.close.test.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | { 9 | e.preventDefault(); 10 | console.log("close", e.detail); 11 | }} 12 | /> 13 | -------------------------------------------------------------------------------- /tests/InlineNotification/InlineNotificationCustom.test.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | Custom Title: 10 | Custom subtitle content. 11 | 12 | Learn more 13 | 14 | 15 | -------------------------------------------------------------------------------- /tests/Loading/Loading.test.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 |
    7 | 8 |
    9 | 10 | 11 |
    12 | 13 |
    14 | 15 | 16 |
    17 | 18 |
    19 | 20 | 21 |
    22 | 23 |
    24 | 25 | 26 |
    27 | 28 |
    29 | -------------------------------------------------------------------------------- /tests/LocalStorage/LocalStorage.test.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 | 10 | 11 | 12 |
    13 | 14 |
    15 | 16 | 17 |
    18 | 19 |
    20 | -------------------------------------------------------------------------------- /tests/LocalStorage/LocalStorageObject.test.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |
    8 | { 12 | console.log("update event", detail); 13 | }} 14 | /> 15 |
    16 | -------------------------------------------------------------------------------- /tests/LocalStorage/LocalStoragePrimitive.test.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |
    8 | { 12 | console.log("save event"); 13 | }} 14 | on:update={({ detail }) => { 15 | console.log("update event", detail); 16 | }} 17 | /> 18 |
    19 | -------------------------------------------------------------------------------- /tests/MultiSelect/MultiSelectSlot.test.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 |
    10 | {item.id} {item.text} {index} 11 |
    12 |     13 | -------------------------------------------------------------------------------- /tests/NumberInput/NumberInputCustom.test.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | Custom Label Text 7 | 8 | -------------------------------------------------------------------------------- /tests/RadioButton/RadioButtonCustom.test.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | Custom Label Text 7 | 8 | -------------------------------------------------------------------------------- /tests/RadioTile/RadioTile.group.test.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | {#each values as value} 11 | {value} 12 | {/each} 13 | 14 | 15 |
    16 | Selected: {selected} 17 |
    18 | 19 | 26 | -------------------------------------------------------------------------------- /tests/RadioTile/RadioTile.single.test.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 |
    Custom content
    7 |     8 | -------------------------------------------------------------------------------- /tests/RadioTile/RadioTileCustom.test.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 |
    Custom content
    8 |     9 |     10 | -------------------------------------------------------------------------------- /tests/RecursiveList/RecursiveList.hierarchy.test.svelte: -------------------------------------------------------------------------------- 1 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /tests/RecursiveList/RecursiveList.test.svelte: -------------------------------------------------------------------------------- 1 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /tests/Search/Search.test.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | { 13 | console.log("clear"); 14 | }} 15 | /> 16 | 17 | 18 | -------------------------------------------------------------------------------- /tests/Search/SearchExpandable.test.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | { 15 | console.log("expanded"); 16 | }} 17 | on:collapse={() => { 18 | console.log("collapsed"); 19 | }} 20 | /> 21 | 22 |
    Status: {expanded ? "expanded" : "collapsed"}
    23 | -------------------------------------------------------------------------------- /tests/Search/SearchSkeleton.test.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /tests/Select/Select.falsy.test.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | 16 | -------------------------------------------------------------------------------- /tests/Select/Select.group.test.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 | 22 | -------------------------------------------------------------------------------- /tests/Select/Select.skeleton.test.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /tests/SkeletonPlaceholder/SkeletonPlaceholder.test.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | { 9 | console.log("click"); 10 | }} 11 | on:mouseover={() => { 12 | console.log("mouseover"); 13 | }} 14 | on:mouseenter={() => { 15 | console.log("mouseenter"); 16 | }} 17 | on:mouseleave={() => { 18 | console.log("mouseleave"); 19 | }} 20 | /> 21 | -------------------------------------------------------------------------------- /tests/SkeletonText/SkeletonText.test.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | { 16 | console.log("click"); 17 | }} 18 | on:mouseover={() => { 19 | console.log("mouseover"); 20 | }} 21 | on:mouseenter={() => { 22 | console.log("mouseenter"); 23 | }} 24 | on:mouseleave={() => { 25 | console.log("mouseleave"); 26 | }} 27 | /> 28 | -------------------------------------------------------------------------------- /tests/StructuredList/StructuredListCustom.test.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | 15 |
    Custom Header
    16 |     17 |     18 |     19 | 20 | 21 | 22 |
    Custom Content
    23 |     24 |     25 |     26 |     27 | -------------------------------------------------------------------------------- /tests/TextArea/TextAreaCustom.test.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | -------------------------------------------------------------------------------- /tests/TextInput/TextInputCustom.test.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | Custom Label Text 7 | 8 | -------------------------------------------------------------------------------- /tests/Theme/Theme.test.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 | 11 | 12 |
    13 | { 18 | console.log("update", detail); 19 | }} 20 | > 21 | 22 | 23 |
    24 | -------------------------------------------------------------------------------- /tests/Theme/ThemeSelect.test.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | { 8 | console.log("update", detail); 9 | }} 10 | /> 11 | -------------------------------------------------------------------------------- /tests/Theme/ThemeSelectCustom.test.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | { 13 | console.log("update", detail); 14 | }} 15 | /> 16 | -------------------------------------------------------------------------------- /tests/Theme/ThemeToggle.test.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | { 8 | console.log("update", detail); 9 | }} 10 | /> 11 | -------------------------------------------------------------------------------- /tests/Theme/ThemeToggleCustom.test.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | { 15 | console.log("update", detail); 16 | }} 17 | /> 18 | -------------------------------------------------------------------------------- /tests/Tile/ClickableTile.test.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | Link only 7 | 8 | 9 | 15 | Link with light variant 16 | 17 | 18 | { 22 | console.log("clicked"); 23 | }} 24 | > 25 | Click me 26 | 27 | 28 | Clicked 29 | 30 | 31 | Disabled tile 32 | 33 | -------------------------------------------------------------------------------- /tests/Tile/SelectableTile.test.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | { 23 | console.log("select", e.detail); 24 | }} 25 | on:deselect={(e) => { 26 | console.log("deselect", e.detail); 27 | }} 28 | > 29 | Test Tile Content 30 | 31 | -------------------------------------------------------------------------------- /tests/Tile/Tile.test.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | Default tile 6 | 7 | Light variant 8 | 9 | { 12 | console.log("clicked"); 13 | }} 14 | > 15 | Clickable tile 16 | 17 | 18 | 19 | Custom attributes 20 | 21 | -------------------------------------------------------------------------------- /tests/TimePicker/TimePickerCustom.test.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | Custom Label Text 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /tests/ToastNotification/ToastNotification.close.test.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | { 10 | e.preventDefault(); 11 | console.log("close", e.detail); 12 | }} 13 | /> 14 | -------------------------------------------------------------------------------- /tests/ToastNotification/ToastNotificationCustom.test.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | Custom Title: 7 | Custom subtitle content. 8 | Custom caption content. 9 | 10 | -------------------------------------------------------------------------------- /tests/Toggle/Toggle.test.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | { 11 | console.log("toggled:", e.detail.toggled); 12 | }} 13 | /> 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 26 | -------------------------------------------------------------------------------- /tests/Tooltip/TooltipAlignments.test.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |
    8 | {#each alignments as align} 9 |
    10 | 11 | Tooltip with {align} alignment 12 | 13 |
    14 | {/each} 15 |
    16 | -------------------------------------------------------------------------------- /tests/Tooltip/TooltipCustomContent.test.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 |

    Custom tooltip content

    7 |     8 | -------------------------------------------------------------------------------- /tests/Tooltip/TooltipCustomIcon.test.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 |
    🔍
    7 | Custom icon tooltip 8 |     9 | -------------------------------------------------------------------------------- /tests/Tooltip/TooltipDefault.test.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /tests/Tooltip/TooltipDirections.test.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |
    8 | {#each directions as direction} 9 |
    10 | 11 | Tooltip with {direction} direction 12 | 13 |
    14 | {/each} 15 |
    16 | -------------------------------------------------------------------------------- /tests/Tooltip/TooltipEvents.test.svelte: -------------------------------------------------------------------------------- 1 | 15 | 16 |
    17 |

    Open events: {openCount}

    18 |

    Close events: {closeCount}

    19 | 20 | 25 | Interact with this tooltip to trigger events 26 | 27 |
    28 | -------------------------------------------------------------------------------- /tests/Tooltip/TooltipHideIcon.test.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | This tooltip has its icon hidden 11 | 12 | -------------------------------------------------------------------------------- /tests/Tooltip/TooltipOpen.test.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | This tooltip is initially open 7 | 8 | -------------------------------------------------------------------------------- /tests/TooltipDefinition/TooltipDefinition.test.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 | { 19 | console.log("open"); 20 | }} 21 | on:close={() => { 22 | console.log("close"); 23 | }} 24 | > 25 | {triggerContent} 26 | 27 | -------------------------------------------------------------------------------- /tests/TooltipIcon/TooltipIcon.test.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /tests/Truncate/Truncate.test.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | {text} 11 | 12 | -------------------------------------------------------------------------------- /tests/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "noEmit": true, 4 | "erasableSyntaxOnly": true, 5 | "esModuleInterop": true, 6 | "forceConsistentCasingInFileNames": true, 7 | "ignoreDeprecations": "5.0", 8 | "verbatimModuleSyntax": true, 9 | "isolatedModules": true, 10 | "target": "ESNext", 11 | "module": "ESNext", 12 | "moduleResolution": "node", 13 | "noUnusedLocals": true, 14 | "noUnusedParameters": true, 15 | "noImplicitAny": true, 16 | "strict": true, 17 | "skipLibCheck": true, 18 | "skipDefaultLibCheck": true, 19 | "paths": { 20 | "carbon-components-svelte": ["./types"], 21 | "carbon-components-svelte/*": ["./types/*"] 22 | } 23 | }, 24 | "include": ["src", "tests"] 25 | } 26 | -------------------------------------------------------------------------------- /types/AspectRatio/AspectRatio.svelte.d.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteComponentTyped } from "svelte"; 2 | import type { SvelteHTMLElements } from "svelte/elements"; 3 | 4 | type $RestProps = SvelteHTMLElements["div"]; 5 | 6 | type $Props = { 7 | /** 8 | * Specify the aspect ratio 9 | * @default "2x1" 10 | */ 11 | ratio?: 12 | | "2x1" 13 | | "2x3" 14 | | "16x9" 15 | | "4x3" 16 | | "1x1" 17 | | "3x4" 18 | | "3x2" 19 | | "9x16" 20 | | "1x2"; 21 | 22 | [key: `data-${string}`]: any; 23 | }; 24 | 25 | export type AspectRatioProps = Omit<$RestProps, keyof $Props> & $Props; 26 | 27 | export default class AspectRatio extends SvelteComponentTyped< 28 | AspectRatioProps, 29 | Record, 30 | { default: {} } 31 | > {} 32 | -------------------------------------------------------------------------------- /types/Breakpoint/breakpoints.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Pixel sizes of Carbon grid breakpoints. 3 | * @type {Record} 4 | */ 5 | export const breakpoints: Record; 6 | 7 | export type BreakpointSize = "sm" | "md" | "lg" | "xlg" | "max"; 8 | 9 | export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584; 10 | 11 | export default breakpoints; 12 | -------------------------------------------------------------------------------- /types/Breakpoint/index.d.ts: -------------------------------------------------------------------------------- 1 | // @ts-nocheck `Breakpoint` is auto-generated by `sveld`. 2 | export { default as Breakpoint } from "./Breakpoint.svelte"; 3 | export { breakpointObserver } from "./breakpointObserver"; 4 | export { breakpoints } from "./breakpoints"; 5 | -------------------------------------------------------------------------------- /types/Button/ButtonSet.svelte.d.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteComponentTyped } from "svelte"; 2 | import type { SvelteHTMLElements } from "svelte/elements"; 3 | 4 | type $RestProps = SvelteHTMLElements["div"]; 5 | 6 | type $Props = { 7 | /** 8 | * Set to `true` to stack the buttons vertically 9 | * @default false 10 | */ 11 | stacked?: boolean; 12 | 13 | [key: `data-${string}`]: any; 14 | }; 15 | 16 | export type ButtonSetProps = Omit<$RestProps, keyof $Props> & $Props; 17 | 18 | export default class ButtonSet extends SvelteComponentTyped< 19 | ButtonSetProps, 20 | Record, 21 | { default: {} } 22 | > {} 23 | -------------------------------------------------------------------------------- /types/Checkbox/CheckboxSkeleton.svelte.d.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteComponentTyped } from "svelte"; 2 | import type { SvelteHTMLElements } from "svelte/elements"; 3 | 4 | type $RestProps = SvelteHTMLElements["div"]; 5 | 6 | type $Props = { 7 | [key: `data-${string}`]: any; 8 | }; 9 | 10 | export type CheckboxSkeletonProps = Omit<$RestProps, keyof $Props> & $Props; 11 | 12 | export default class CheckboxSkeleton extends SvelteComponentTyped< 13 | CheckboxSkeletonProps, 14 | { 15 | click: WindowEventMap["click"]; 16 | mouseover: WindowEventMap["mouseover"]; 17 | mouseenter: WindowEventMap["mouseenter"]; 18 | mouseleave: WindowEventMap["mouseleave"]; 19 | }, 20 | {} 21 | > {} 22 | -------------------------------------------------------------------------------- /types/CodeSnippet/CodeSnippetSkeleton.svelte.d.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteComponentTyped } from "svelte"; 2 | import type { SvelteHTMLElements } from "svelte/elements"; 3 | 4 | type $RestProps = SvelteHTMLElements["div"]; 5 | 6 | type $Props = { 7 | /** 8 | * Set the type of code snippet 9 | * @default "single" 10 | */ 11 | type?: "single" | "multi"; 12 | 13 | [key: `data-${string}`]: any; 14 | }; 15 | 16 | export type CodeSnippetSkeletonProps = Omit<$RestProps, keyof $Props> & $Props; 17 | 18 | export default class CodeSnippetSkeleton extends SvelteComponentTyped< 19 | CodeSnippetSkeletonProps, 20 | { 21 | click: WindowEventMap["click"]; 22 | mouseover: WindowEventMap["mouseover"]; 23 | mouseenter: WindowEventMap["mouseenter"]; 24 | mouseleave: WindowEventMap["mouseleave"]; 25 | }, 26 | {} 27 | > {} 28 | -------------------------------------------------------------------------------- /types/ComposedModal/ModalBody.svelte.d.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteComponentTyped } from "svelte"; 2 | import type { SvelteHTMLElements } from "svelte/elements"; 3 | 4 | type $RestProps = SvelteHTMLElements["div"]; 5 | 6 | type $Props = { 7 | /** 8 | * Set to `true` if the modal contains form elements 9 | * @default false 10 | */ 11 | hasForm?: boolean; 12 | 13 | /** 14 | * Set to `true` if the modal contains scrolling content 15 | * @default false 16 | */ 17 | hasScrollingContent?: boolean; 18 | 19 | [key: `data-${string}`]: any; 20 | }; 21 | 22 | export type ModalBodyProps = Omit<$RestProps, keyof $Props> & $Props; 23 | 24 | export default class ModalBody extends SvelteComponentTyped< 25 | ModalBodyProps, 26 | Record, 27 | { default: {} } 28 | > {} 29 | -------------------------------------------------------------------------------- /types/ContextMenu/ContextMenuDivider.svelte.d.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteComponentTyped } from "svelte"; 2 | 3 | export type ContextMenuDividerProps = {}; 4 | 5 | export default class ContextMenuDivider extends SvelteComponentTyped< 6 | ContextMenuDividerProps, 7 | Record, 8 | {} 9 | > {} 10 | -------------------------------------------------------------------------------- /types/ContextMenu/ContextMenuGroup.svelte.d.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteComponentTyped } from "svelte"; 2 | 3 | export type ContextMenuGroupProps = { 4 | /** 5 | * @default [] 6 | */ 7 | selectedIds?: ReadonlyArray; 8 | 9 | /** 10 | * Specify the label text 11 | * @default "" 12 | */ 13 | labelText?: string; 14 | }; 15 | 16 | export default class ContextMenuGroup extends SvelteComponentTyped< 17 | ContextMenuGroupProps, 18 | Record, 19 | { default: {} } 20 | > {} 21 | -------------------------------------------------------------------------------- /types/ContextMenu/ContextMenuRadioGroup.svelte.d.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteComponentTyped } from "svelte"; 2 | 3 | export type ContextMenuRadioGroupProps = { 4 | /** 5 | * Set the selected radio group id 6 | * @default "" 7 | */ 8 | selectedId?: string; 9 | 10 | /** 11 | * Specify the label text 12 | * @default "" 13 | */ 14 | labelText?: string; 15 | }; 16 | 17 | export default class ContextMenuRadioGroup extends SvelteComponentTyped< 18 | ContextMenuRadioGroupProps, 19 | Record, 20 | { default: {} } 21 | > {} 22 | -------------------------------------------------------------------------------- /types/DataTable/DataTableTypes.d.ts: -------------------------------------------------------------------------------- 1 | type PathDepth = [never, 0, 1, 2, ...0[]]; 2 | 3 | type Join = K extends string | number 4 | ? P extends string | number 5 | ? `${K}${"" extends P ? "" : "."}${P}` 6 | : never 7 | : never; 8 | 9 | // For performance, the maximum traversal depth is 10. 10 | export type PropertyPath = [D] extends [never] 11 | ? never 12 | : T extends object 13 | ? { 14 | [K in keyof T]-?: K extends string | number 15 | ? `${K}` | Join> 16 | : never; 17 | }[keyof T] 18 | : ""; 19 | -------------------------------------------------------------------------------- /types/DataTable/TableBody.svelte.d.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteComponentTyped } from "svelte"; 2 | import type { SvelteHTMLElements } from "svelte/elements"; 3 | 4 | type $RestProps = SvelteHTMLElements["tbody"]; 5 | 6 | type $Props = { 7 | [key: `data-${string}`]: any; 8 | }; 9 | 10 | export type TableBodyProps = Omit<$RestProps, keyof $Props> & $Props; 11 | 12 | export default class TableBody extends SvelteComponentTyped< 13 | TableBodyProps, 14 | Record, 15 | { default: {} } 16 | > {} 17 | -------------------------------------------------------------------------------- /types/DataTable/TableCell.svelte.d.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteComponentTyped } from "svelte"; 2 | import type { SvelteHTMLElements } from "svelte/elements"; 3 | 4 | type $RestProps = SvelteHTMLElements["td"]; 5 | 6 | type $Props = { 7 | [key: `data-${string}`]: any; 8 | }; 9 | 10 | export type TableCellProps = Omit<$RestProps, keyof $Props> & $Props; 11 | 12 | export default class TableCell extends SvelteComponentTyped< 13 | TableCellProps, 14 | { 15 | click: WindowEventMap["click"]; 16 | mouseover: WindowEventMap["mouseover"]; 17 | mouseenter: WindowEventMap["mouseenter"]; 18 | mouseleave: WindowEventMap["mouseleave"]; 19 | }, 20 | { default: {} } 21 | > {} 22 | -------------------------------------------------------------------------------- /types/DataTable/TableHead.svelte.d.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteComponentTyped } from "svelte"; 2 | import type { SvelteHTMLElements } from "svelte/elements"; 3 | 4 | type $RestProps = SvelteHTMLElements["thead"]; 5 | 6 | type $Props = { 7 | [key: `data-${string}`]: any; 8 | }; 9 | 10 | export type TableHeadProps = Omit<$RestProps, keyof $Props> & $Props; 11 | 12 | export default class TableHead extends SvelteComponentTyped< 13 | TableHeadProps, 14 | { 15 | click: WindowEventMap["click"]; 16 | mouseover: WindowEventMap["mouseover"]; 17 | mouseenter: WindowEventMap["mouseenter"]; 18 | mouseleave: WindowEventMap["mouseleave"]; 19 | }, 20 | { default: {} } 21 | > {} 22 | -------------------------------------------------------------------------------- /types/DataTable/TableRow.svelte.d.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteComponentTyped } from "svelte"; 2 | import type { SvelteHTMLElements } from "svelte/elements"; 3 | 4 | type $RestProps = SvelteHTMLElements["tr"]; 5 | 6 | type $Props = { 7 | [key: `data-${string}`]: any; 8 | }; 9 | 10 | export type TableRowProps = Omit<$RestProps, keyof $Props> & $Props; 11 | 12 | export default class TableRow extends SvelteComponentTyped< 13 | TableRowProps, 14 | { 15 | click: WindowEventMap["click"]; 16 | mouseover: WindowEventMap["mouseover"]; 17 | mouseenter: WindowEventMap["mouseenter"]; 18 | mouseleave: WindowEventMap["mouseleave"]; 19 | }, 20 | { default: {} } 21 | > {} 22 | -------------------------------------------------------------------------------- /types/DataTable/Toolbar.svelte.d.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteComponentTyped } from "svelte"; 2 | import type { SvelteHTMLElements } from "svelte/elements"; 3 | 4 | type $RestProps = SvelteHTMLElements["section"]; 5 | 6 | type $Props = { 7 | /** 8 | * Specify the toolbar size 9 | * @default "default" 10 | */ 11 | size?: "sm" | "default"; 12 | 13 | [key: `data-${string}`]: any; 14 | }; 15 | 16 | export type ToolbarProps = Omit<$RestProps, keyof $Props> & $Props; 17 | 18 | export default class Toolbar extends SvelteComponentTyped< 19 | ToolbarProps, 20 | Record, 21 | { default: {} } 22 | > {} 23 | -------------------------------------------------------------------------------- /types/DataTable/ToolbarContent.svelte.d.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteComponentTyped } from "svelte"; 2 | 3 | export type ToolbarContentProps = {}; 4 | 5 | export default class ToolbarContent extends SvelteComponentTyped< 6 | ToolbarContentProps, 7 | Record, 8 | { default: {} } 9 | > {} 10 | -------------------------------------------------------------------------------- /types/DataTable/ToolbarMenu.svelte.d.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteComponentTyped } from "svelte"; 2 | import type { OverflowMenuProps } from "../OverflowMenu/OverflowMenu.svelte"; 3 | 4 | export type ToolbarMenuProps = OverflowMenuProps & {}; 5 | 6 | export default class ToolbarMenu extends SvelteComponentTyped< 7 | ToolbarMenuProps, 8 | Record, 9 | { default: {} } 10 | > {} 11 | -------------------------------------------------------------------------------- /types/DataTable/ToolbarMenuItem.svelte.d.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteComponentTyped } from "svelte"; 2 | import type { OverflowMenuItemProps } from "../OverflowMenu/OverflowMenuItem.svelte"; 3 | 4 | export type ToolbarMenuItemProps = OverflowMenuItemProps & {}; 5 | 6 | export default class ToolbarMenuItem extends SvelteComponentTyped< 7 | ToolbarMenuItemProps, 8 | { click: WindowEventMap["click"]; keydown: WindowEventMap["keydown"] }, 9 | { default: {} } 10 | > {} 11 | -------------------------------------------------------------------------------- /types/Dropdown/DropdownSkeleton.svelte.d.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteComponentTyped } from "svelte"; 2 | import type { SvelteHTMLElements } from "svelte/elements"; 3 | 4 | type $RestProps = SvelteHTMLElements["div"]; 5 | 6 | type $Props = { 7 | /** 8 | * Set to `true` to use the inline variant 9 | * @default false 10 | */ 11 | inline?: boolean; 12 | 13 | [key: `data-${string}`]: any; 14 | }; 15 | 16 | export type DropdownSkeletonProps = Omit<$RestProps, keyof $Props> & $Props; 17 | 18 | export default class DropdownSkeleton extends SvelteComponentTyped< 19 | DropdownSkeletonProps, 20 | { 21 | click: WindowEventMap["click"]; 22 | mouseover: WindowEventMap["mouseover"]; 23 | mouseenter: WindowEventMap["mouseenter"]; 24 | mouseleave: WindowEventMap["mouseleave"]; 25 | }, 26 | {} 27 | > {} 28 | -------------------------------------------------------------------------------- /types/FileUploader/FileUploaderSkeleton.svelte.d.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteComponentTyped } from "svelte"; 2 | import type { SvelteHTMLElements } from "svelte/elements"; 3 | 4 | type $RestProps = SvelteHTMLElements["div"]; 5 | 6 | type $Props = { 7 | [key: `data-${string}`]: any; 8 | }; 9 | 10 | export type FileUploaderSkeletonProps = Omit<$RestProps, keyof $Props> & $Props; 11 | 12 | export default class FileUploaderSkeleton extends SvelteComponentTyped< 13 | FileUploaderSkeletonProps, 14 | { 15 | click: WindowEventMap["click"]; 16 | mouseover: WindowEventMap["mouseover"]; 17 | mouseenter: WindowEventMap["mouseenter"]; 18 | mouseleave: WindowEventMap["mouseleave"]; 19 | }, 20 | {} 21 | > {} 22 | -------------------------------------------------------------------------------- /types/FluidForm/FluidForm.svelte.d.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteComponentTyped } from "svelte"; 2 | import type { SvelteHTMLElements } from "svelte/elements"; 3 | 4 | type $RestProps = SvelteHTMLElements["form"]; 5 | 6 | type $Props = { 7 | [key: `data-${string}`]: any; 8 | }; 9 | 10 | export type FluidFormProps = Omit<$RestProps, keyof $Props> & $Props; 11 | 12 | export default class FluidForm extends SvelteComponentTyped< 13 | FluidFormProps, 14 | { 15 | click: WindowEventMap["click"]; 16 | keydown: WindowEventMap["keydown"]; 17 | mouseover: WindowEventMap["mouseover"]; 18 | mouseenter: WindowEventMap["mouseenter"]; 19 | mouseleave: WindowEventMap["mouseleave"]; 20 | submit: WindowEventMap["submit"]; 21 | }, 22 | { default: {} } 23 | > {} 24 | -------------------------------------------------------------------------------- /types/FormItem/FormItem.svelte.d.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteComponentTyped } from "svelte"; 2 | import type { SvelteHTMLElements } from "svelte/elements"; 3 | 4 | type $RestProps = SvelteHTMLElements["div"]; 5 | 6 | type $Props = { 7 | [key: `data-${string}`]: any; 8 | }; 9 | 10 | export type FormItemProps = Omit<$RestProps, keyof $Props> & $Props; 11 | 12 | export default class FormItem extends SvelteComponentTyped< 13 | FormItemProps, 14 | { 15 | click: WindowEventMap["click"]; 16 | mouseover: WindowEventMap["mouseover"]; 17 | mouseenter: WindowEventMap["mouseenter"]; 18 | mouseleave: WindowEventMap["mouseleave"]; 19 | }, 20 | { default: {} } 21 | > {} 22 | -------------------------------------------------------------------------------- /types/FormLabel/FormLabel.svelte.d.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteComponentTyped } from "svelte"; 2 | import type { SvelteHTMLElements } from "svelte/elements"; 3 | 4 | type $RestProps = SvelteHTMLElements["label"]; 5 | 6 | type $Props = { 7 | /** 8 | * Set an id to be used by the label element 9 | * @default "ccs-" + Math.random().toString(36) 10 | */ 11 | id?: string; 12 | 13 | [key: `data-${string}`]: any; 14 | }; 15 | 16 | export type FormLabelProps = Omit<$RestProps, keyof $Props> & $Props; 17 | 18 | export default class FormLabel extends SvelteComponentTyped< 19 | FormLabelProps, 20 | { 21 | click: WindowEventMap["click"]; 22 | mouseover: WindowEventMap["mouseover"]; 23 | mouseenter: WindowEventMap["mouseenter"]; 24 | mouseleave: WindowEventMap["mouseleave"]; 25 | }, 26 | { default: {} } 27 | > {} 28 | -------------------------------------------------------------------------------- /types/Link/OutboundLink.svelte.d.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteComponentTyped } from "svelte"; 2 | import type { LinkProps } from "./Link.svelte"; 3 | 4 | export type OutboundLinkProps = LinkProps & {}; 5 | 6 | export default class OutboundLink extends SvelteComponentTyped< 7 | OutboundLinkProps, 8 | { 9 | click: WindowEventMap["click"]; 10 | mouseover: WindowEventMap["mouseover"]; 11 | mouseenter: WindowEventMap["mouseenter"]; 12 | mouseleave: WindowEventMap["mouseleave"]; 13 | }, 14 | { default: {} } 15 | > {} 16 | -------------------------------------------------------------------------------- /types/ListBox/ListBoxMenu.svelte.d.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteComponentTyped } from "svelte"; 2 | import type { SvelteHTMLElements } from "svelte/elements"; 3 | 4 | type $RestProps = SvelteHTMLElements["div"]; 5 | 6 | type $Props = { 7 | /** 8 | * Set an id for the top-level element 9 | * @default "ccs-" + Math.random().toString(36) 10 | */ 11 | id?: string; 12 | 13 | /** 14 | * Obtain a reference to the HTML element 15 | * @default null 16 | */ 17 | ref?: null | HTMLDivElement; 18 | 19 | [key: `data-${string}`]: any; 20 | }; 21 | 22 | export type ListBoxMenuProps = Omit<$RestProps, keyof $Props> & $Props; 23 | 24 | export default class ListBoxMenu extends SvelteComponentTyped< 25 | ListBoxMenuProps, 26 | { scroll: WindowEventMap["scroll"] }, 27 | { default: {} } 28 | > {} 29 | -------------------------------------------------------------------------------- /types/ListItem/ListItem.svelte.d.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteComponentTyped } from "svelte"; 2 | import type { SvelteHTMLElements } from "svelte/elements"; 3 | 4 | type $RestProps = SvelteHTMLElements["li"]; 5 | 6 | type $Props = { 7 | [key: `data-${string}`]: any; 8 | }; 9 | 10 | export type ListItemProps = Omit<$RestProps, keyof $Props> & $Props; 11 | 12 | export default class ListItem extends SvelteComponentTyped< 13 | ListItemProps, 14 | { 15 | click: WindowEventMap["click"]; 16 | mouseover: WindowEventMap["mouseover"]; 17 | mouseenter: WindowEventMap["mouseenter"]; 18 | mouseleave: WindowEventMap["mouseleave"]; 19 | }, 20 | { default: {} } 21 | > {} 22 | -------------------------------------------------------------------------------- /types/Notification/NotificationActionButton.svelte.d.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteComponentTyped } from "svelte"; 2 | import type { ButtonProps } from "../Button/Button.svelte"; 3 | 4 | export type NotificationActionButtonProps = ButtonProps & {}; 5 | 6 | export default class NotificationActionButton extends SvelteComponentTyped< 7 | NotificationActionButtonProps, 8 | { 9 | click: WindowEventMap["click"]; 10 | mouseover: WindowEventMap["mouseover"]; 11 | mouseenter: WindowEventMap["mouseenter"]; 12 | mouseleave: WindowEventMap["mouseleave"]; 13 | }, 14 | { default: {} } 15 | > {} 16 | -------------------------------------------------------------------------------- /types/Notification/NotificationIcon.svelte.d.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteComponentTyped } from "svelte"; 2 | 3 | export type NotificationIconProps = { 4 | /** 5 | * Specify the kind of notification icon 6 | * @default "error" 7 | */ 8 | kind?: 9 | | "error" 10 | | "info" 11 | | "info-square" 12 | | "success" 13 | | "warning" 14 | | "warning-alt"; 15 | 16 | /** 17 | * Set the type of notification 18 | * @default "toast" 19 | */ 20 | notificationType?: "toast" | "inline"; 21 | 22 | /** 23 | * Specify the ARIA label for the icon 24 | * @default undefined 25 | */ 26 | iconDescription: undefined; 27 | }; 28 | 29 | export default class NotificationIcon extends SvelteComponentTyped< 30 | NotificationIconProps, 31 | Record, 32 | {} 33 | > {} 34 | -------------------------------------------------------------------------------- /types/Pagination/PaginationSkeleton.svelte.d.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteComponentTyped } from "svelte"; 2 | import type { SvelteHTMLElements } from "svelte/elements"; 3 | 4 | type $RestProps = SvelteHTMLElements["div"]; 5 | 6 | type $Props = { 7 | [key: `data-${string}`]: any; 8 | }; 9 | 10 | export type PaginationSkeletonProps = Omit<$RestProps, keyof $Props> & $Props; 11 | 12 | export default class PaginationSkeleton extends SvelteComponentTyped< 13 | PaginationSkeletonProps, 14 | { 15 | click: WindowEventMap["click"]; 16 | mouseover: WindowEventMap["mouseover"]; 17 | mouseenter: WindowEventMap["mouseenter"]; 18 | mouseleave: WindowEventMap["mouseleave"]; 19 | }, 20 | {} 21 | > {} 22 | -------------------------------------------------------------------------------- /types/RadioButton/RadioButtonSkeleton.svelte.d.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteComponentTyped } from "svelte"; 2 | import type { SvelteHTMLElements } from "svelte/elements"; 3 | 4 | type $RestProps = SvelteHTMLElements["div"]; 5 | 6 | type $Props = { 7 | [key: `data-${string}`]: any; 8 | }; 9 | 10 | export type RadioButtonSkeletonProps = Omit<$RestProps, keyof $Props> & $Props; 11 | 12 | export default class RadioButtonSkeleton extends SvelteComponentTyped< 13 | RadioButtonSkeletonProps, 14 | { 15 | click: WindowEventMap["click"]; 16 | mouseover: WindowEventMap["mouseover"]; 17 | mouseenter: WindowEventMap["mouseenter"]; 18 | mouseleave: WindowEventMap["mouseleave"]; 19 | }, 20 | {} 21 | > {} 22 | -------------------------------------------------------------------------------- /types/Search/SearchSkeleton.svelte.d.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteComponentTyped } from "svelte"; 2 | import type { SvelteHTMLElements } from "svelte/elements"; 3 | 4 | type $RestProps = SvelteHTMLElements["div"]; 5 | 6 | type $Props = { 7 | /** 8 | * Specify the size of the search input 9 | * @default "xl" 10 | */ 11 | size?: "sm" | "lg" | "xl"; 12 | 13 | [key: `data-${string}`]: any; 14 | }; 15 | 16 | export type SearchSkeletonProps = Omit<$RestProps, keyof $Props> & $Props; 17 | 18 | export default class SearchSkeleton extends SvelteComponentTyped< 19 | SearchSkeletonProps, 20 | { 21 | click: WindowEventMap["click"]; 22 | mouseover: WindowEventMap["mouseover"]; 23 | mouseenter: WindowEventMap["mouseenter"]; 24 | mouseleave: WindowEventMap["mouseleave"]; 25 | }, 26 | {} 27 | > {} 28 | -------------------------------------------------------------------------------- /types/Select/SelectItemGroup.svelte.d.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteComponentTyped } from "svelte"; 2 | import type { SvelteHTMLElements } from "svelte/elements"; 3 | 4 | type $RestProps = SvelteHTMLElements["optgroup"]; 5 | 6 | type $Props = { 7 | /** 8 | * Set to `true` to disable the optgroup element 9 | * @default false 10 | */ 11 | disabled?: boolean; 12 | 13 | /** 14 | * Specify the label attribute of the optgroup element 15 | * @default "Provide label" 16 | */ 17 | label?: string; 18 | 19 | [key: `data-${string}`]: any; 20 | }; 21 | 22 | export type SelectItemGroupProps = Omit<$RestProps, keyof $Props> & $Props; 23 | 24 | export default class SelectItemGroup extends SvelteComponentTyped< 25 | SelectItemGroupProps, 26 | Record, 27 | { default: {} } 28 | > {} 29 | -------------------------------------------------------------------------------- /types/Select/SelectSkeleton.svelte.d.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteComponentTyped } from "svelte"; 2 | import type { SvelteHTMLElements } from "svelte/elements"; 3 | 4 | type $RestProps = SvelteHTMLElements["div"]; 5 | 6 | type $Props = { 7 | /** 8 | * Set to `true` to hide the label text 9 | * @default false 10 | */ 11 | hideLabel?: boolean; 12 | 13 | [key: `data-${string}`]: any; 14 | }; 15 | 16 | export type SelectSkeletonProps = Omit<$RestProps, keyof $Props> & $Props; 17 | 18 | export default class SelectSkeleton extends SvelteComponentTyped< 19 | SelectSkeletonProps, 20 | { 21 | click: WindowEventMap["click"]; 22 | mouseover: WindowEventMap["mouseover"]; 23 | mouseenter: WindowEventMap["mouseenter"]; 24 | mouseleave: WindowEventMap["mouseleave"]; 25 | }, 26 | {} 27 | > {} 28 | -------------------------------------------------------------------------------- /types/SkeletonPlaceholder/SkeletonPlaceholder.svelte.d.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteComponentTyped } from "svelte"; 2 | import type { SvelteHTMLElements } from "svelte/elements"; 3 | 4 | type $RestProps = SvelteHTMLElements["div"]; 5 | 6 | type $Props = { 7 | [key: `data-${string}`]: any; 8 | }; 9 | 10 | export type SkeletonPlaceholderProps = Omit<$RestProps, keyof $Props> & $Props; 11 | 12 | export default class SkeletonPlaceholder extends SvelteComponentTyped< 13 | SkeletonPlaceholderProps, 14 | { 15 | click: WindowEventMap["click"]; 16 | mouseover: WindowEventMap["mouseover"]; 17 | mouseenter: WindowEventMap["mouseenter"]; 18 | mouseleave: WindowEventMap["mouseleave"]; 19 | }, 20 | {} 21 | > {} 22 | -------------------------------------------------------------------------------- /types/Slider/SliderSkeleton.svelte.d.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteComponentTyped } from "svelte"; 2 | import type { SvelteHTMLElements } from "svelte/elements"; 3 | 4 | type $RestProps = SvelteHTMLElements["div"]; 5 | 6 | type $Props = { 7 | /** 8 | * Set to `true` to hide the label text 9 | * @default false 10 | */ 11 | hideLabel?: boolean; 12 | 13 | [key: `data-${string}`]: any; 14 | }; 15 | 16 | export type SliderSkeletonProps = Omit<$RestProps, keyof $Props> & $Props; 17 | 18 | export default class SliderSkeleton extends SvelteComponentTyped< 19 | SliderSkeletonProps, 20 | { 21 | click: WindowEventMap["click"]; 22 | mouseover: WindowEventMap["mouseover"]; 23 | mouseenter: WindowEventMap["mouseenter"]; 24 | mouseleave: WindowEventMap["mouseleave"]; 25 | }, 26 | {} 27 | > {} 28 | -------------------------------------------------------------------------------- /types/StructuredList/StructuredListBody.svelte.d.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteComponentTyped } from "svelte"; 2 | import type { SvelteHTMLElements } from "svelte/elements"; 3 | 4 | type $RestProps = SvelteHTMLElements["div"]; 5 | 6 | type $Props = { 7 | [key: `data-${string}`]: any; 8 | }; 9 | 10 | export type StructuredListBodyProps = Omit<$RestProps, keyof $Props> & $Props; 11 | 12 | export default class StructuredListBody extends SvelteComponentTyped< 13 | StructuredListBodyProps, 14 | { 15 | click: WindowEventMap["click"]; 16 | mouseover: WindowEventMap["mouseover"]; 17 | mouseenter: WindowEventMap["mouseenter"]; 18 | mouseleave: WindowEventMap["mouseleave"]; 19 | }, 20 | { default: {} } 21 | > {} 22 | -------------------------------------------------------------------------------- /types/StructuredList/StructuredListHead.svelte.d.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteComponentTyped } from "svelte"; 2 | import type { SvelteHTMLElements } from "svelte/elements"; 3 | 4 | type $RestProps = SvelteHTMLElements["div"]; 5 | 6 | type $Props = { 7 | [key: `data-${string}`]: any; 8 | }; 9 | 10 | export type StructuredListHeadProps = Omit<$RestProps, keyof $Props> & $Props; 11 | 12 | export default class StructuredListHead extends SvelteComponentTyped< 13 | StructuredListHeadProps, 14 | { 15 | click: WindowEventMap["click"]; 16 | mouseover: WindowEventMap["mouseover"]; 17 | mouseenter: WindowEventMap["mouseenter"]; 18 | mouseleave: WindowEventMap["mouseleave"]; 19 | }, 20 | { default: {} } 21 | > {} 22 | -------------------------------------------------------------------------------- /types/Tabs/TabContent.svelte.d.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteComponentTyped } from "svelte"; 2 | import type { SvelteHTMLElements } from "svelte/elements"; 3 | 4 | type $RestProps = SvelteHTMLElements["div"]; 5 | 6 | type $Props = { 7 | /** 8 | * Set an id for the top-level element 9 | * @default "ccs-" + Math.random().toString(36) 10 | */ 11 | id?: string; 12 | 13 | [key: `data-${string}`]: any; 14 | }; 15 | 16 | export type TabContentProps = Omit<$RestProps, keyof $Props> & $Props; 17 | 18 | export default class TabContent extends SvelteComponentTyped< 19 | TabContentProps, 20 | Record, 21 | { default: {} } 22 | > {} 23 | -------------------------------------------------------------------------------- /types/Tag/TagSkeleton.svelte.d.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteComponentTyped } from "svelte"; 2 | import type { SvelteHTMLElements } from "svelte/elements"; 3 | 4 | type $RestProps = SvelteHTMLElements["span"]; 5 | 6 | type $Props = { 7 | /** 8 | * @default "default" 9 | */ 10 | size?: "sm" | "default"; 11 | 12 | [key: `data-${string}`]: any; 13 | }; 14 | 15 | export type TagSkeletonProps = Omit<$RestProps, keyof $Props> & $Props; 16 | 17 | export default class TagSkeleton extends SvelteComponentTyped< 18 | TagSkeletonProps, 19 | { 20 | click: WindowEventMap["click"]; 21 | mouseover: WindowEventMap["mouseover"]; 22 | mouseenter: WindowEventMap["mouseenter"]; 23 | mouseleave: WindowEventMap["mouseleave"]; 24 | }, 25 | {} 26 | > {} 27 | -------------------------------------------------------------------------------- /types/TextArea/TextAreaSkeleton.svelte.d.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteComponentTyped } from "svelte"; 2 | import type { SvelteHTMLElements } from "svelte/elements"; 3 | 4 | type $RestProps = SvelteHTMLElements["div"]; 5 | 6 | type $Props = { 7 | /** 8 | * Set to `true` to visually hide the label text 9 | * @default false 10 | */ 11 | hideLabel?: boolean; 12 | 13 | [key: `data-${string}`]: any; 14 | }; 15 | 16 | export type TextAreaSkeletonProps = Omit<$RestProps, keyof $Props> & $Props; 17 | 18 | export default class TextAreaSkeleton extends SvelteComponentTyped< 19 | TextAreaSkeletonProps, 20 | { 21 | click: WindowEventMap["click"]; 22 | mouseover: WindowEventMap["mouseover"]; 23 | mouseenter: WindowEventMap["mouseenter"]; 24 | mouseleave: WindowEventMap["mouseleave"]; 25 | }, 26 | {} 27 | > {} 28 | -------------------------------------------------------------------------------- /types/TextInput/TextInputSkeleton.svelte.d.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteComponentTyped } from "svelte"; 2 | import type { SvelteHTMLElements } from "svelte/elements"; 3 | 4 | type $RestProps = SvelteHTMLElements["div"]; 5 | 6 | type $Props = { 7 | /** 8 | * Set to `true` to hide the label text 9 | * @default false 10 | */ 11 | hideLabel?: boolean; 12 | 13 | [key: `data-${string}`]: any; 14 | }; 15 | 16 | export type TextInputSkeletonProps = Omit<$RestProps, keyof $Props> & $Props; 17 | 18 | export default class TextInputSkeleton extends SvelteComponentTyped< 19 | TextInputSkeletonProps, 20 | { 21 | click: WindowEventMap["click"]; 22 | mouseover: WindowEventMap["mouseover"]; 23 | mouseenter: WindowEventMap["mouseenter"]; 24 | mouseleave: WindowEventMap["mouseleave"]; 25 | }, 26 | {} 27 | > {} 28 | -------------------------------------------------------------------------------- /types/Tile/Tile.svelte.d.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteComponentTyped } from "svelte"; 2 | import type { SvelteHTMLElements } from "svelte/elements"; 3 | 4 | type $RestProps = SvelteHTMLElements["div"]; 5 | 6 | type $Props = { 7 | /** 8 | * Set to `true` to enable the light variant 9 | * @default false 10 | */ 11 | light?: boolean; 12 | 13 | [key: `data-${string}`]: any; 14 | }; 15 | 16 | export type TileProps = Omit<$RestProps, keyof $Props> & $Props; 17 | 18 | export default class Tile extends SvelteComponentTyped< 19 | TileProps, 20 | { 21 | click: WindowEventMap["click"]; 22 | mouseover: WindowEventMap["mouseover"]; 23 | mouseenter: WindowEventMap["mouseenter"]; 24 | mouseleave: WindowEventMap["mouseleave"]; 25 | }, 26 | { default: {} } 27 | > {} 28 | -------------------------------------------------------------------------------- /types/Tooltip/TooltipFooter.svelte.d.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteComponentTyped } from "svelte"; 2 | 3 | export type TooltipFooterProps = { 4 | /** 5 | * Specify a selector to be focused inside the footer when opening the tooltip 6 | * @default "a[href], button:not([disabled])" 7 | */ 8 | selectorPrimaryFocus?: string; 9 | }; 10 | 11 | export default class TooltipFooter extends SvelteComponentTyped< 12 | TooltipFooterProps, 13 | Record, 14 | { default: {} } 15 | > {} 16 | -------------------------------------------------------------------------------- /types/TreeView/index.d.ts: -------------------------------------------------------------------------------- 1 | export { default as TreeView } from "./TreeView.svelte"; 2 | -------------------------------------------------------------------------------- /types/Truncate/Truncate.svelte.d.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteComponentTyped } from "svelte"; 2 | import type { SvelteHTMLElements } from "svelte/elements"; 3 | 4 | type $RestProps = SvelteHTMLElements["p"]; 5 | 6 | type $Props = { 7 | /** 8 | * @default "end" 9 | */ 10 | clamp?: "end" | "front"; 11 | 12 | [key: `data-${string}`]: any; 13 | }; 14 | 15 | export type TruncateProps = Omit<$RestProps, keyof $Props> & $Props; 16 | 17 | export default class Truncate extends SvelteComponentTyped< 18 | TruncateProps, 19 | Record, 20 | { default: {} } 21 | > {} 22 | -------------------------------------------------------------------------------- /types/Truncate/truncate.d.ts: -------------------------------------------------------------------------------- 1 | interface TruncateOptions { 2 | clamp?: "end" | "front"; 3 | } 4 | 5 | export function TruncateAction( 6 | node: HTMLElement, 7 | options?: TruncateOptions, 8 | ): { 9 | update: (options?: TruncateOptions) => void; 10 | }; 11 | 12 | export default TruncateAction; 13 | -------------------------------------------------------------------------------- /types/UIShell/Content.svelte.d.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteComponentTyped } from "svelte"; 2 | import type { SvelteHTMLElements } from "svelte/elements"; 3 | 4 | type $RestProps = SvelteHTMLElements["main"]; 5 | 6 | type $Props = { 7 | /** 8 | * Specify the id for the main element 9 | * @default "main-content" 10 | */ 11 | id?: string; 12 | 13 | [key: `data-${string}`]: any; 14 | }; 15 | 16 | export type ContentProps = Omit<$RestProps, keyof $Props> & $Props; 17 | 18 | export default class Content extends SvelteComponentTyped< 19 | ContentProps, 20 | Record, 21 | { default: {} } 22 | > {} 23 | -------------------------------------------------------------------------------- /types/UIShell/HeaderGlobalAction.svelte.d.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteComponentTyped } from "svelte"; 2 | import type { ButtonProps } from "../Button/Button.svelte"; 3 | 4 | export type HeaderGlobalActionProps = ButtonProps & { 5 | /** 6 | * Set to `true` to use the active variant 7 | * @default false 8 | */ 9 | isActive?: boolean; 10 | 11 | /** 12 | * Specify the icon to render 13 | * @default undefined 14 | */ 15 | icon?: any; 16 | 17 | /** 18 | * Obtain a reference to the HTML button element 19 | * @default null 20 | */ 21 | ref?: HTMLButtonElement; 22 | }; 23 | 24 | export default class HeaderGlobalAction extends SvelteComponentTyped< 25 | HeaderGlobalActionProps, 26 | { click: WindowEventMap["click"] }, 27 | {} 28 | > {} 29 | -------------------------------------------------------------------------------- /types/UIShell/HeaderNav.svelte.d.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteComponentTyped } from "svelte"; 2 | import type { SvelteHTMLElements } from "svelte/elements"; 3 | 4 | type $RestProps = SvelteHTMLElements["nav"]; 5 | 6 | type $Props = { 7 | [key: `data-${string}`]: any; 8 | }; 9 | 10 | export type HeaderNavProps = Omit<$RestProps, keyof $Props> & $Props; 11 | 12 | export default class HeaderNav extends SvelteComponentTyped< 13 | HeaderNavProps, 14 | Record, 15 | { default: {} } 16 | > {} 17 | -------------------------------------------------------------------------------- /types/UIShell/HeaderPanelDivider.svelte.d.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteComponentTyped } from "svelte"; 2 | 3 | export type HeaderPanelDividerProps = {}; 4 | 5 | export default class HeaderPanelDivider extends SvelteComponentTyped< 6 | HeaderPanelDividerProps, 7 | Record, 8 | { default: {} } 9 | > {} 10 | -------------------------------------------------------------------------------- /types/UIShell/HeaderPanelLink.svelte.d.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteComponentTyped } from "svelte"; 2 | import type { SvelteHTMLElements } from "svelte/elements"; 3 | 4 | type $RestProps = SvelteHTMLElements["a"]; 5 | 6 | type $Props = { 7 | /** 8 | * Specify the `href` attribute 9 | * @default undefined 10 | */ 11 | href?: string; 12 | 13 | /** 14 | * Obtain a reference to the HTML anchor element 15 | * @default null 16 | */ 17 | ref?: null | HTMLAnchorElement; 18 | 19 | [key: `data-${string}`]: any; 20 | }; 21 | 22 | export type HeaderPanelLinkProps = Omit<$RestProps, keyof $Props> & $Props; 23 | 24 | export default class HeaderPanelLink extends SvelteComponentTyped< 25 | HeaderPanelLinkProps, 26 | { click: WindowEventMap["click"] }, 27 | { default: {} } 28 | > {} 29 | -------------------------------------------------------------------------------- /types/UIShell/HeaderPanelLinks.svelte.d.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteComponentTyped } from "svelte"; 2 | 3 | export type HeaderPanelLinksProps = {}; 4 | 5 | export default class HeaderPanelLinks extends SvelteComponentTyped< 6 | HeaderPanelLinksProps, 7 | Record, 8 | { default: {} } 9 | > {} 10 | -------------------------------------------------------------------------------- /types/UIShell/HeaderUtilities.svelte.d.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteComponentTyped } from "svelte"; 2 | 3 | export type HeaderUtilitiesProps = {}; 4 | 5 | export default class HeaderUtilities extends SvelteComponentTyped< 6 | HeaderUtilitiesProps, 7 | Record, 8 | { default: {} } 9 | > {} 10 | -------------------------------------------------------------------------------- /types/UIShell/SideNavDivider.svelte.d.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteComponentTyped } from "svelte"; 2 | import type { SvelteHTMLElements } from "svelte/elements"; 3 | 4 | type $RestProps = SvelteHTMLElements["li"]; 5 | 6 | type $Props = { 7 | [key: `data-${string}`]: any; 8 | }; 9 | 10 | export type SideNavDividerProps = Omit<$RestProps, keyof $Props> & $Props; 11 | 12 | export default class SideNavDivider extends SvelteComponentTyped< 13 | SideNavDividerProps, 14 | Record, 15 | {} 16 | > {} 17 | -------------------------------------------------------------------------------- /types/UIShell/SideNavItems.svelte.d.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteComponentTyped } from "svelte"; 2 | 3 | export type SideNavItemsProps = {}; 4 | 5 | export default class SideNavItems extends SvelteComponentTyped< 6 | SideNavItemsProps, 7 | Record, 8 | { default: {} } 9 | > {} 10 | -------------------------------------------------------------------------------- /types/UIShell/SkipToContent.svelte.d.ts: -------------------------------------------------------------------------------- 1 | import type { SvelteComponentTyped } from "svelte"; 2 | import type { SvelteHTMLElements } from "svelte/elements"; 3 | 4 | type $RestProps = SvelteHTMLElements["a"]; 5 | 6 | type $Props = { 7 | /** 8 | * Specify the `href` attribute 9 | * @default "#main-content" 10 | */ 11 | href?: string; 12 | 13 | /** 14 | * Specify the tabindex 15 | * @default "0" 16 | */ 17 | tabindex?: string; 18 | 19 | [key: `data-${string}`]: any; 20 | }; 21 | 22 | export type SkipToContentProps = Omit<$RestProps, keyof $Props> & $Props; 23 | 24 | export default class SkipToContent extends SvelteComponentTyped< 25 | SkipToContentProps, 26 | { click: WindowEventMap["click"] }, 27 | { default: {} } 28 | > {} 29 | -------------------------------------------------------------------------------- /types/utils/toHierarchy.d.ts: -------------------------------------------------------------------------------- 1 | type NodeLike = { 2 | id: string | number; 3 | nodes?: NodeLike[]; 4 | [key: string]: any; 5 | }; 6 | 7 | /** Create a hierarchical tree from a flat array. */ 8 | export function toHierarchy< 9 | T extends NodeLike, 10 | K extends keyof Omit, 11 | >( 12 | flatArray: T[] | readonly T[], 13 | /** 14 | * Function that returns the parent ID for a given node. 15 | * @example 16 | * toHierarchy(flatArray, (node) => node.parentId); 17 | */ 18 | getParentId: (node: T) => T[K] | null, 19 | ): (T & { nodes?: (T & { nodes?: T[] })[] })[]; 20 | 21 | export default toHierarchy; 22 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | /// 2 | import { svelte, vitePreprocess } from "@sveltejs/vite-plugin-svelte"; 3 | import { optimizeImports } from "carbon-preprocess-svelte"; 4 | import { defineConfig } from "vite"; 5 | 6 | export default defineConfig({ 7 | root: "./tests", 8 | plugins: [ 9 | svelte({ 10 | preprocess: [vitePreprocess(), optimizeImports()], 11 | }), 12 | ], 13 | optimizeDeps: { 14 | exclude: ["carbon-components-svelte", "carbon-icons-svelte"], 15 | }, 16 | resolve: process.env.VITEST ? { conditions: ["browser"] } : undefined, 17 | test: { 18 | globals: true, 19 | environment: "jsdom", 20 | clearMocks: true, 21 | // Suppress `console` output in CI. 22 | silent: !!process.env.CI, 23 | setupFiles: ["./tests/setup-tests.ts"], 24 | }, 25 | }); 26 | --------------------------------------------------------------------------------