From 8e996dc68375ee8c1b6c5b2b9aa9807d2e9370cc Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Mon, 11 Nov 2024 21:27:04 -0800
Subject: [PATCH] chore: format files with Prettier 3

---
 README.md                                     |   2 +-
 docs/src/App.svelte                           |   2 +-
 docs/src/components/ComponentApi.svelte       |  10 +-
 docs/src/components/InlineSnippet.svelte      |   2 +-
 docs/src/components/Preview.svelte            |   8 +-
 docs/src/components/TileCard.svelte           |  10 +-
 docs/src/layouts/ComponentLayout.svelte       |  20 +-
 docs/src/pages/_fallback.svelte               |   2 +-
 docs/src/pages/_layout.svelte                 |  45 ++--
 .../Accordion/ExpandableAccordion.svelte      |   4 +-
 .../framed/Breadcrumbs/Breadcrumbs.svelte     |   2 +-
 .../pages/framed/Breakpoint/Breakpoint.svelte |   2 +-
 .../framed/Button/ProgrammaticFocus.svelte    |   4 +-
 .../Button/SelectedIconOnlyButton.svelte      |  18 +-
 .../framed/Checkbox/CheckboxReactive.svelte   |   2 +-
 .../framed/Checkbox/MultipleCheckboxes.svelte |   4 +-
 .../CodeSnippet/CodeSnippetOverride.svelte    |   2 +-
 .../CodeSnippet/CodeSnippetReactive.svelte    |  16 +-
 .../CodeSnippet/DynamicCodeSnippet.svelte     |   2 +-
 .../CodeSnippet/HiddenCodeSnippet.svelte      |   8 +-
 .../framed/ComboBox/ComboBoxClear.svelte      |  16 +-
 .../pages/framed/ComboBox/ComboBoxSlot.svelte |  10 +-
 .../framed/ComboBox/FilterableComboBox.svelte |  12 +-
 .../FilterableComboBoxCustomLabel.svelte      |  14 +-
 .../framed/ComboBox/MultipleComboBox.svelte   |   8 +-
 .../framed/ComboBox/ReactiveComboBox.svelte   |  14 +-
 .../ContentSwitcherReactive.svelte            |   4 +-
 .../framed/ContextMenu/ContextMenu.svelte     |   4 +-
 .../ContextMenu/ContextMenuTarget.svelte      |   8 +-
 .../ContextMenu/ContextMenuTargets.svelte     |  13 +-
 .../CopyButton/CopyButtonOverride.svelte      |   2 +-
 .../DataTable/DataTableAppendColumns.svelte   |   2 +-
 .../DataTable/DataTableBatchSelection.svelte  |  20 +-
 .../DataTableBatchSelectionInitial.svelte     |  20 +-
 .../DataTableBatchSelectionToolbar.svelte     |   4 +-
 ...ableBatchSelectionToolbarControlled.svelte |  20 +-
 .../DataTableExpandableSelectable.svelte      |  22 +-
 .../DataTable/DataTableExpandableZebra.svelte |  66 +++---
 .../DataTable/DataTableFilterCustom.svelte    |  24 +-
 .../DataTable/DataTableFilterable.svelte      |  20 +-
 .../DataTable/DataTableHeaderWidth.svelte     |  22 +-
 .../DataTableNonExpandableRows.svelte         |  18 +-
 .../DataTableNonSelectableRows.svelte         |  18 +-
 .../DataTable/DataTablePagination.svelte      |  20 +-
 .../DataTableProgrammaticSorting.svelte       |  90 ++++----
 .../DataTable/RadioSelectableDataTable.svelte |   2 +-
 .../DataTable/SelectableDataTable.svelte      |  20 +-
 .../framed/DatePicker/DatePickerModal.svelte  |   4 +-
 .../pages/framed/Dropdown/DropdownSlot.svelte |  10 +-
 .../framed/Dropdown/MultipleDropdown.svelte   |  10 +-
 .../FileUploaderClearFiles.svelte             |  12 +-
 .../framed/FluidForm/FluidFormInvalid.svelte  |   4 +-
 .../pages/framed/Grid/OffsetColumns.svelte    |   8 +-
 .../pages/framed/Grid/ResponsiveGrid.svelte   |   8 +-
 .../ImageLoader/DynamicImageLoader.svelte     |   6 +-
 .../ProgrammaticImageLoader.svelte            |   8 +-
 .../InlineLoading/InlineLoadingUx.svelte      |   8 +-
 .../framed/LocalStorage/LocalStorage.svelte   |  14 +-
 .../LocalStorage/LocalStorageClear.svelte     |   4 +-
 .../framed/Modal/3ButtonComposedModal.svelte  |  16 +-
 .../pages/framed/Modal/3ButtonModal.svelte    |  12 +-
 .../pages/framed/Modal/ComposedModal.svelte   |   2 +-
 .../src/pages/framed/Modal/DangerModal.svelte |   4 +-
 docs/src/pages/framed/Modal/Modal.svelte      |   4 +-
 .../framed/Modal/ModalButtonWithIcon.svelte   |   4 +-
 .../framed/Modal/ModalCustomFocus.svelte      |   4 +-
 .../pages/framed/Modal/ModalExtraSmall.svelte |   2 +-
 docs/src/pages/framed/Modal/ModalLarge.svelte |   2 +-
 .../pages/framed/Modal/ModalMultiple.svelte   |  12 +-
 .../Modal/ModalPreventOutsideClick.svelte     |   2 +-
 .../framed/Modal/ModalScrollingContent.svelte |   2 +-
 docs/src/pages/framed/Modal/ModalSmall.svelte |   2 +-
 .../pages/framed/Modal/PassiveModal.svelte    |   2 +-
 .../framed/MultiSelect/MultiSelectSlot.svelte |  10 +-
 .../MultiSelect/MultipleMultiSelect.svelte    |   8 +-
 .../NumberInput/NumberInputEmpty.svelte       |   4 +-
 .../PaginationNavReactive.svelte              |   2 +-
 .../pages/framed/Popover/WithButton.svelte    |  10 +-
 .../framed/ProgressBar/ProgressBarUx.svelte   |  22 +-
 .../ProgrammaticProgressIndicator.svelte      |   8 +-
 .../RadioButton/RadioButtonReactive.svelte    |   8 +-
 .../framed/RadioTile/RadioTileReactive.svelte |   6 +-
 .../RadioTile/RadioTileReactiveOneWay.svelte  |   4 +-
 .../framed/RecursiveList/RecursiveList.svelte |   2 +-
 .../RecursiveList/RecursiveListOrdered.svelte |   2 +-
 .../RecursiveListOrderedNative.svelte         |   2 +-
 .../pages/framed/Search/SearchReactive.svelte |   8 +-
 .../pages/framed/Select/SelectReactive.svelte |   2 +-
 .../src/pages/framed/Tabs/TabsReactive.svelte |   2 +-
 docs/src/pages/framed/Theme/Theme.svelte      |   4 +-
 .../pages/framed/Theme/ThemePersist.svelte    |   4 +-
 .../framed/Theme/ThemeSelectCustom.svelte     |   8 +-
 .../framed/Theme/ThemeToggleCustom.svelte     |  12 +-
 .../src/pages/framed/Theme/ThemeTokens.svelte |  10 +-
 .../ToastNotificationTimeout.svelte           |  14 +-
 .../pages/framed/Toggle/ToggleReactive.svelte |   2 +-
 .../framed/Tooltip/TooltipReactive.svelte     |   2 +-
 .../src/pages/framed/TreeView/TreeView.svelte |   8 +-
 .../framed/TreeView/TreeViewActive.svelte     |   8 +-
 .../TreeView/TreeViewCollapseAll.svelte       |   6 +-
 .../TreeView/TreeViewCollapseNodes.svelte     |   8 +-
 .../framed/TreeView/TreeViewCompact.svelte    |   8 +-
 .../framed/TreeView/TreeViewExpandAll.svelte  |   8 +-
 .../TreeView/TreeViewExpandNodes.svelte       |  10 +-
 .../framed/TreeView/TreeViewExpanded.svelte   |   8 +-
 .../framed/TreeView/TreeViewIcons.svelte      |   8 +-
 .../TreeView/TreeViewMultiselect.svelte       |   8 +-
 .../framed/TreeView/TreeViewShowNode.svelte   |  13 +-
 .../pages/framed/TreeView/TreeViewSlot.svelte |  12 +-
 .../src/pages/framed/UIShell/HeaderNav.svelte |   2 +-
 .../pages/framed/UIShell/HeaderNavRail.svelte |  12 +-
 .../pages/framed/UIShell/HeaderSearch.svelte  |  30 +--
 .../framed/UIShell/HeaderSwitcher.svelte      |   6 +-
 .../framed/UIShell/HeaderUtilities.svelte     |  11 +-
 .../UIShell/PersistedHamburgerMenu.svelte     |   4 +-
 docs/src/pages/framed/_reset.svelte           |   2 +-
 docs/src/pages/index.svelte                   |  32 +--
 docs/svelte.config.js                         |  16 +-
 scripts/build-docs.js                         |   2 +-
 src/Accordion/Accordion.svelte                |  14 +-
 src/Accordion/AccordionItem.svelte            |  40 ++--
 src/Accordion/AccordionSkeleton.svelte        |  24 +-
 src/AspectRatio/AspectRatio.svelte            |  22 +-
 src/Breadcrumb/Breadcrumb.svelte              |   6 +-
 src/Breadcrumb/BreadcrumbItem.svelte          |  16 +-
 src/Breadcrumb/BreadcrumbSkeleton.svelte      |  10 +-
 src/Breakpoint/Breakpoint.svelte              |   2 +-
 src/Breakpoint/breakpointObserver.d.ts        |   2 +-
 src/Breakpoint/breakpointObserver.js          |  12 +-
 src/Breakpoint/index.d.ts                     |   1 -
 src/Button/Button.svelte                      |  28 +--
 src/Button/ButtonSet.svelte                   |   4 +-
 src/Button/ButtonSkeleton.svelte              |  28 +--
 src/Checkbox/Checkbox.svelte                  |  34 +--
 src/Checkbox/CheckboxSkeleton.svelte          |   9 +-
 src/Checkbox/InlineCheckbox.svelte            |  21 +-
 src/CodeSnippet/CodeSnippet.svelte            | 118 +++++-----
 src/CodeSnippet/CodeSnippetSkeleton.svelte    |  10 +-
 src/ComboBox/ComboBox.svelte                  | 150 ++++++-------
 src/ComposedModal/ComposedModal.svelte        |  46 ++--
 src/ComposedModal/ModalBody.svelte            |  12 +-
 src/ComposedModal/ModalFooter.svelte          |  28 +--
 src/ComposedModal/ModalHeader.svelte          |  24 +-
 src/ContentSwitcher/ContentSwitcher.svelte    |   6 +-
 src/ContentSwitcher/Switch.svelte             |  28 +--
 src/ContextMenu/ContextMenu.svelte            |  46 ++--
 src/ContextMenu/ContextMenuDivider.svelte     |   2 +-
 src/ContextMenu/ContextMenuGroup.svelte       |   2 +-
 src/ContextMenu/ContextMenuOption.svelte      |  90 ++++----
 src/ContextMenu/ContextMenuRadioGroup.svelte  |   2 +-
 src/CopyButton/CopyButton.svelte              |  36 +--
 src/DataTable/DataTable.svelte                | 194 ++++++++--------
 src/DataTable/DataTableSkeleton.svelte        |  37 ++--
 src/DataTable/DataTableTypes.d.ts             |  16 +-
 src/DataTable/Table.svelte                    |  42 ++--
 src/DataTable/TableContainer.svelte           |  12 +-
 src/DataTable/TableHeader.svelte              |  31 ++-
 src/DataTable/Toolbar.svelte                  |  10 +-
 src/DataTable/ToolbarBatchActions.svelte      |  14 +-
 src/DataTable/ToolbarContent.svelte           |   2 +-
 src/DataTable/ToolbarMenu.svelte              |   2 +-
 src/DataTable/ToolbarSearch.svelte            |  12 +-
 src/DatePicker/DatePicker.svelte              |  36 +--
 src/DatePicker/DatePickerInput.svelte         |  80 +++----
 src/DatePicker/DatePickerSkeleton.svelte      |  20 +-
 src/Dropdown/Dropdown.svelte                  | 116 +++++-----
 src/Dropdown/DropdownSkeleton.svelte          |  14 +-
 src/FileUploader/FileUploader.svelte          |  56 ++---
 src/FileUploader/FileUploaderButton.svelte    |  64 +++---
 .../FileUploaderDropContainer.svelte          |  68 +++---
 src/FileUploader/FileUploaderItem.svelte      |  40 ++--
 src/FileUploader/FileUploaderSkeleton.svelte  |   2 +-
 src/FileUploader/Filename.svelte              |  12 +-
 src/Form/Form.svelte                          |   4 +-
 src/FormGroup/FormGroup.svelte                |  14 +-
 src/FormItem/FormItem.svelte                  |   2 +-
 src/FormLabel/FormLabel.svelte                |   4 +-
 src/Grid/Column.svelte                        |   2 +-
 src/Grid/Grid.svelte                          |   2 +-
 src/Grid/Row.svelte                           |   2 +-
 src/ImageLoader/ImageLoader.svelte            |  14 +-
 src/InlineLoading/InlineLoading.svelte        |  16 +-
 src/Link/Link.svelte                          |  36 +--
 src/Link/OutboundLink.svelte                  |   2 +-
 src/ListBox/ListBox.svelte                    |  28 +--
 src/ListBox/ListBoxField.svelte               |  20 +-
 src/ListBox/ListBoxMenu.svelte                |   4 +-
 src/ListBox/ListBoxMenuIcon.svelte            |   6 +-
 src/ListBox/ListBoxMenuItem.svelte            |  16 +-
 src/ListBox/ListBoxSelection.svelte           |  64 +++---
 src/ListItem/ListItem.svelte                  |   2 +-
 src/Loading/Loading.svelte                    |  44 ++--
 src/Modal/Modal.svelte                        | 136 ++++++------
 src/MultiSelect/MultiSelect.svelte            | 207 +++++++++---------
 src/Notification/InlineNotification.svelte    |  40 ++--
 src/Notification/NotificationButton.svelte    |  14 +-
 src/Notification/NotificationIcon.svelte      |   6 +-
 src/Notification/ToastNotification.svelte     |  38 ++--
 src/NumberInput/NumberInput.svelte            | 104 ++++-----
 src/NumberInput/NumberInputSkeleton.svelte    |   6 +-
 src/OrderedList/OrderedList.svelte            |   8 +-
 src/OverflowMenu/OverflowMenu.svelte          |  72 +++---
 src/OverflowMenu/OverflowMenuItem.svelte      |  42 ++--
 src/Pagination/Pagination.svelte              |  62 +++---
 src/Pagination/PaginationSkeleton.svelte      |  11 +-
 src/PaginationNav/PaginationItem.svelte       |  12 +-
 src/PaginationNav/PaginationNav.svelte        | 108 ++++-----
 src/PaginationNav/PaginationOverflow.svelte   |  30 +--
 src/Popover/Popover.svelte                    |  48 ++--
 src/ProgressBar/ProgressBar.svelte            |  44 ++--
 .../ProgressIndicator.svelte                  |  10 +-
 .../ProgressIndicatorSkeleton.svelte          |  18 +-
 src/ProgressIndicator/ProgressStep.svelte     |  52 ++---
 src/RadioButton/RadioButton.svelte            |  32 +--
 src/RadioButton/RadioButtonSkeleton.svelte    |   7 +-
 src/RadioButtonGroup/RadioButtonGroup.svelte  |  16 +-
 src/RecursiveList/RecursiveList.svelte        |   6 +-
 src/RecursiveList/RecursiveListItem.svelte    |   2 +-
 src/Search/Search.svelte                      |  84 +++----
 src/Search/SearchSkeleton.svelte              |  12 +-
 src/Select/Select.svelte                      |  90 ++++----
 src/Select/SelectItem.svelte                  |  14 +-
 src/Select/SelectItemGroup.svelte             |   7 +-
 src/Select/SelectSkeleton.svelte              |   8 +-
 .../SkeletonPlaceholder.svelte                |   2 +-
 src/SkeletonText/SkeletonText.svelte          |  12 +-
 src/Slider/Slider.svelte                      |  98 ++++-----
 src/Slider/SliderSkeleton.svelte              |  18 +-
 src/StructuredList/StructuredList.svelte      |   8 +-
 src/StructuredList/StructuredListBody.svelte  |   2 +-
 src/StructuredList/StructuredListCell.svelte  |   8 +-
 src/StructuredList/StructuredListHead.svelte  |   2 +-
 src/StructuredList/StructuredListInput.svelte |  18 +-
 src/StructuredList/StructuredListRow.svelte   |  10 +-
 .../StructuredListSkeleton.svelte             |  26 +--
 src/Tabs/Tab.svelte                           |  36 +--
 src/Tabs/TabContent.svelte                    |  10 +-
 src/Tabs/Tabs.svelte                          |  36 +--
 src/Tabs/TabsSkeleton.svelte                  |  14 +-
 src/Tag/Tag.svelte                            | 136 ++++++------
 src/Tag/TagSkeleton.svelte                    |   9 +-
 src/TextArea/TextArea.svelte                  |  56 +++--
 src/TextArea/TextAreaSkeleton.svelte          |   6 +-
 src/TextInput/PasswordInput.svelte            | 150 ++++++-------
 src/TextInput/TextInput.svelte                | 122 +++++------
 src/TextInput/TextInputSkeleton.svelte        |   6 +-
 src/Theme/Theme.svelte                        |  18 +-
 src/Tile/ClickableTile.svelte                 |  14 +-
 src/Tile/ExpandableTile.svelte                |  34 +--
 src/Tile/RadioTile.svelte                     |  46 ++--
 src/Tile/SelectableTile.svelte                |  46 ++--
 src/Tile/Tile.svelte                          |   4 +-
 src/Tile/TileGroup.svelte                     |   4 +-
 src/TimePicker/TimePicker.svelte              |  50 ++---
 src/TimePicker/TimePickerSelect.svelte        |  30 ++-
 src/Toggle/Toggle.svelte                      |  40 ++--
 src/Toggle/ToggleSkeleton.svelte              |  28 +--
 src/Tooltip/Tooltip.svelte                    |  66 +++---
 src/Tooltip/TooltipFooter.svelte              |   2 +-
 .../TooltipDefinition.svelte                  |  44 ++--
 src/TooltipIcon/TooltipIcon.svelte            |  46 ++--
 src/TreeView/TreeView.svelte                  |  26 +--
 src/TreeView/TreeViewNode.svelte              |  48 ++--
 src/TreeView/TreeViewNodeList.svelte          |  76 +++----
 src/Truncate/Truncate.svelte                  |   4 +-
 src/Truncate/truncate.d.ts                    |   2 +-
 src/UIShell/Content.svelte                    |   6 +-
 src/UIShell/HamburgerMenu.svelte              |  16 +-
 src/UIShell/Header.svelte                     |  18 +-
 src/UIShell/HeaderAction.svelte               |  36 +--
 src/UIShell/HeaderActionLink.svelte           |  12 +-
 src/UIShell/HeaderGlobalAction.svelte         |   4 +-
 src/UIShell/HeaderNav.svelte                  |   4 +-
 src/UIShell/HeaderNavItem.svelte              |  16 +-
 src/UIShell/HeaderNavMenu.svelte              |  46 ++--
 src/UIShell/HeaderPanelDivider.svelte         |   4 +-
 src/UIShell/HeaderPanelLink.svelte            |  10 +-
 src/UIShell/HeaderPanelLinks.svelte           |   2 +-
 src/UIShell/HeaderSearch.svelte               |  96 ++++----
 src/UIShell/HeaderUtilities.svelte            |   2 +-
 src/UIShell/SideNav.svelte                    |  32 +--
 src/UIShell/SideNavDivider.svelte             |   2 +-
 src/UIShell/SideNavItems.svelte               |   2 +-
 src/UIShell/SideNavLink.svelte                |  22 +-
 src/UIShell/SideNavMenu.svelte                |  28 +--
 src/UIShell/SideNavMenuItem.svelte            |  12 +-
 src/UIShell/SkipToContent.svelte              |   8 +-
 src/UnorderedList/UnorderedList.svelte        |   6 +-
 src/icons/Add.svelte                          |   4 +-
 src/icons/ArrowUp.svelte                      |   4 +-
 src/icons/ArrowsVertical.svelte               |   4 +-
 src/icons/Calendar.svelte                     |   4 +-
 src/icons/CaretDown.svelte                    |   4 +-
 src/icons/CaretLeft.svelte                    |   4 +-
 src/icons/CaretRight.svelte                   |   4 +-
 src/icons/Checkmark.svelte                    |   4 +-
 src/icons/CheckmarkFilled.svelte              |   7 +-
 src/icons/CheckmarkOutline.svelte             |   4 +-
 src/icons/ChevronDown.svelte                  |   4 +-
 src/icons/ChevronRight.svelte                 |   4 +-
 src/icons/CircleDash.svelte                   |   4 +-
 src/icons/Close.svelte                        |   4 +-
 src/icons/Copy.svelte                         |   4 +-
 src/icons/EditOff.svelte                      |   4 +-
 src/icons/ErrorFilled.svelte                  |   7 +-
 src/icons/IconSearch.svelte                   |   4 +-
 src/icons/Incomplete.svelte                   |   4 +-
 src/icons/Information.svelte                  |   4 +-
 src/icons/InformationFilled.svelte            |   7 +-
 src/icons/InformationSquareFilled.svelte      |   7 +-
 src/icons/Launch.svelte                       |   4 +-
 src/icons/Menu.svelte                         |   4 +-
 src/icons/OverflowMenuHorizontal.svelte       |   4 +-
 src/icons/OverflowMenuVertical.svelte         |   4 +-
 src/icons/Settings.svelte                     |   4 +-
 src/icons/Subtract.svelte                     |   4 +-
 src/icons/Switcher.svelte                     |   4 +-
 src/icons/View.svelte                         |   4 +-
 src/icons/ViewOff.svelte                      |   4 +-
 src/icons/Warning.svelte                      |   4 +-
 src/icons/WarningAltFilled.svelte             |   7 +-
 src/icons/WarningFilled.svelte                |   7 +-
 tests/Accordion.test.svelte                   |   4 +-
 tests/Breadcrumb.test.svelte                  |   2 +-
 tests/Breadcrumbs.test.svelte                 |  12 +-
 tests/Breakpoint.test.svelte                  |  12 +-
 tests/Button.test.svelte                      |   4 +-
 tests/ButtonSet.test.svelte                   |   2 +-
 tests/CodeSnippet.test.svelte                 |   2 +-
 tests/ComboBox.test.svelte                    |  30 +--
 tests/ComposedModal.test.svelte               |   8 +-
 tests/ContentSwitcher.test.svelte             |   2 +-
 tests/ContextMenu.test.svelte                 |  17 +-
 tests/CopyButton.test.svelte                  |   2 +-
 tests/CopyableCodeSnippet.test.svelte         |   2 +-
 tests/DangerModal.test.svelte                 |   4 +-
 tests/DataTable.test.svelte                   | 192 ++++++++--------
 tests/DataTableAppendColumns.test.svelte      |   8 +-
 tests/DataTableBatchSelection.test.svelte     |   7 +-
 ...DataTableBatchSelectionToolbar.test.svelte |   4 +-
 tests/DataTableNestedHeaders.test.svelte      |  24 +-
 tests/DatePicker.test.svelte                  |  14 +-
 tests/Dropdown.test.svelte                    |  70 +++---
 tests/DynamicCodeSnippet.test.svelte          |   2 +-
 tests/FileUploader.test.svelte                |  20 +-
 tests/FilterableComboBox.test.svelte          |  12 +-
 tests/FluidForm.test.svelte                   |   6 +-
 tests/HeaderNav.test.svelte                   |   2 +-
 tests/HeaderSearch.svelte                     |  18 +-
 tests/HeaderSwitcher.test.svelte              |   4 +-
 tests/HeaderUtilities.test.svelte             |   6 +-
 tests/HiddenCodeSnippet.test.svelte           |   8 +-
 tests/ImageLoader.test.svelte                 |   8 +-
 tests/InlineLoadingUx.test.svelte             |  10 +-
 tests/InlineNotification.test.svelte          |   9 +-
 tests/Loading.test.svelte                     |   4 +-
 tests/LocalStorage.test.svelte                |  16 +-
 tests/Modal.test.svelte                       |   8 +-
 tests/MultiSelect.test.svelte                 | 122 +++++------
 tests/NumberInput.test.svelte                 |  30 +--
 tests/OffsetColumns.test.svelte               |   8 +-
 tests/OverflowMenu.test.svelte                |   6 +-
 tests/Pagination.test.svelte                  |  20 +-
 tests/PaginationNav.test.svelte               |  14 +-
 tests/PassiveModal.test.svelte                |   2 +-
 tests/PersistedHamburgerMenu.test.svelte      |   4 +-
 tests/Popover.test.svelte                     |   6 +-
 tests/ProgressBar.test.svelte                 |   4 +-
 tests/ProgressIndicator.test.svelte           |   6 +-
 tests/RadioButton.test.svelte                 |  10 +-
 tests/RadioSelectableDataTable.test.svelte    |   2 +-
 tests/RadioTile.test.svelte                   |   4 +-
 tests/RecursiveList.test.svelte               |   2 +-
 tests/ResponsiveGrid.test.svelte              |  24 +-
 tests/Select.test.svelte                      |   4 +-
 tests/SelectableDataTable.test.svelte         |   2 +-
 tests/SkeletonText.test.svelte                |   2 +-
 tests/Slider.test.svelte                      |  30 +--
 tests/StructuredList.test.svelte              |   6 +-
 tests/Tabs.test.svelte                        |  13 +-
 tests/Tag.test.svelte                         |   2 +-
 tests/TextArea.test.svelte                    |   2 +-
 tests/TextInput.test.svelte                   |   6 +-
 tests/Theme.test.svelte                       |  22 +-
 tests/TimePicker.test.svelte                  |   8 +-
 tests/ToastNotification.test.svelte           |   4 +-
 tests/Toggle.test.svelte                      |   4 +-
 tests/Tooltip.test.svelte                     |   2 +-
 tests/TreeView.test.svelte                    |   8 +-
 tests/Truncate.test.svelte                    |   2 +-
 tsconfig.json                                 |  40 ++--
 391 files changed, 3725 insertions(+), 3785 deletions(-)

diff --git a/README.md b/README.md
index c6c6f550..05f8cc7e 100644
--- a/README.md
+++ b/README.md
@@ -105,7 +105,7 @@ import "carbon-components-svelte/css/all.css";
 Update the theme by setting the `theme` attribute on the `html` element. The default `theme` is `"white"`.
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en" theme="g10">
   <body>
     ...
diff --git a/docs/src/App.svelte b/docs/src/App.svelte
index e2d19ce3..8bd114e6 100644
--- a/docs/src/App.svelte
+++ b/docs/src/App.svelte
@@ -3,4 +3,4 @@
   import { routes } from "../.routify/routes";
 </script>
 
-<Router routes="{routes}" />
+<Router {routes} />
diff --git a/docs/src/components/ComponentApi.svelte b/docs/src/components/ComponentApi.svelte
index 3f16ff76..a355a00c 100644
--- a/docs/src/components/ComponentApi.svelte
+++ b/docs/src/components/ComponentApi.svelte
@@ -32,16 +32,16 @@
 
   $: source = `https://github.com/carbon-design-system/carbon-components-svelte/tree/master/${component.filePath}`;
   $: forwarded_events = component.events.filter(
-    (event) => event.type === "forwarded"
+    (event) => event.type === "forwarded",
   );
   $: dispatched_events = component.events.filter(
-    (event) => event.type === "dispatched"
+    (event) => event.type === "dispatched",
   );
 </script>
 
 <p style="margin-bottom: var(--cds-layout-02)">
   Source code:
-  <OutboundLink size="lg" inline href="{source}">
+  <OutboundLink size="lg" inline href={source}>
     {component.filePath}
   </OutboundLink>
 </p>
@@ -65,7 +65,7 @@
         }) as prop (prop.name)}
           <StructuredListRow>
             <StructuredListCell noWrap>
-              <InlineSnippet code="{prop.name}" />
+              <InlineSnippet code={prop.name} />
               {#if prop.reactive}
                 <div
                   style="white-space: nowrap; margin-top: var(--cds-spacing-03); margin-bottom: var(--cds-spacing-{prop.isRequired
@@ -99,7 +99,7 @@
                   {:else if type.startsWith("(")}
                     <code class="code-01">{type}</code>
                   {:else}
-                    <InlineSnippet code="{type}" />
+                    <InlineSnippet code={type} />
                   {/if}
                 </div>
               {/each}
diff --git a/docs/src/components/InlineSnippet.svelte b/docs/src/components/InlineSnippet.svelte
index 136fe90b..b908e575 100644
--- a/docs/src/components/InlineSnippet.svelte
+++ b/docs/src/components/InlineSnippet.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <div>
-  <CodeSnippet code="{code}" type="inline" copy="{(text) => copy(text)}" />
+  <CodeSnippet {code} type="inline" copy={(text) => copy(text)} />
 </div>
 
 <style>
diff --git a/docs/src/components/Preview.svelte b/docs/src/components/Preview.svelte
index d2902546..29252776 100644
--- a/docs/src/components/Preview.svelte
+++ b/docs/src/components/Preview.svelte
@@ -26,8 +26,8 @@
         kind="ghost"
         target="_blank"
         size="field"
-        href="{themedSrcUrl}"
-        icon="{Launch}"
+        href={themedSrcUrl}
+        icon={Launch}
       >
         Open in new tab
       </Button>
@@ -35,13 +35,13 @@
   {/if}
   <div class="preview-viewer" class:framed>
     {#if framed}
-      <iframe title="{src.split('/').pop()}" src="{themedSrcUrl}"></iframe>
+      <iframe title={src.split("/").pop()} src={themedSrcUrl}></iframe>
     {:else}
       <slot />
     {/if}
   </div>
   <div class="code-override">
-    <CodeSnippet type="multi" code="{codeRaw}" copy="{(text) => copy(text)}">
+    <CodeSnippet type="multi" code={codeRaw} copy={(text) => copy(text)}>
       {@html code}
     </CodeSnippet>
   </div>
diff --git a/docs/src/components/TileCard.svelte b/docs/src/components/TileCard.svelte
index bfdbf3eb..b484aa49 100644
--- a/docs/src/components/TileCard.svelte
+++ b/docs/src/components/TileCard.svelte
@@ -15,8 +15,8 @@
 <div class="card-wrapper" class:borderRight class:borderBottom>
   <AspectRatio>
     <svelte:component
-      this="{tileComponent}"
-      href="{href}"
+      this={tileComponent}
+      {href}
       {...$$restProps}
       style="height: 100%;"
     >
@@ -29,11 +29,11 @@
         </div>
         <div class="card-footer">
           <svelte:component
-            this="{LogoGithub}"
-            size="{32}"
+            this={LogoGithub}
+            size={32}
             style="fill: var(--cds-icon-01)"
           />
-          <Launch size="{20}" style="fill: var(--cds-icon-01)" />
+          <Launch size={20} style="fill: var(--cds-icon-01)" />
         </div>
       </div>
     </svelte:component>
diff --git a/docs/src/layouts/ComponentLayout.svelte b/docs/src/layouts/ComponentLayout.svelte
index 75fde5c0..77844c98 100644
--- a/docs/src/layouts/ComponentLayout.svelte
+++ b/docs/src/layouts/ComponentLayout.svelte
@@ -29,7 +29,7 @@
 
   // TODO: `find` is not supported in IE
   $: api_components = components.map((i) =>
-    COMPONENT_API.components.find((_) => _.moduleName === i)
+    COMPONENT_API.components.find((_) => _.moduleName === i),
   );
   $: multiple = api_components.length > 1;
 
@@ -62,7 +62,7 @@
 
   // TODO: [refactor] read from package.json value
   $: sourceCode = `https://github.com/carbon-design-system/carbon-components-svelte/tree/master/${formatSourceURL(
-    multiple
+    multiple,
   )}`;
 </script>
 
@@ -83,7 +83,7 @@
             id="select-theme"
             inline
             labelText="Theme"
-            bind:selected="{$theme}"
+            bind:selected={$theme}
           >
             <SelectItem value="white" text="White" />
             <SelectItem value="g10" text="Gray 10" />
@@ -95,8 +95,8 @@
             kind="ghost"
             target="_blank"
             size="field"
-            href="{sourceCode}"
-            icon="{Code}"
+            href={sourceCode}
+            icon={Code}
           >
             Source code
           </Button>
@@ -144,28 +144,28 @@
     </Row>
 
     <Row>
-      <Column class="prose" noGutter="{multiple}">
+      <Column class="prose" noGutter={multiple}>
         {#if multiple}
           <Tabs class="override-tabs">
             {#each api_components as component (component.moduleName)}
-              <Tab label="{component.moduleName}" />
+              <Tab label={component.moduleName} />
             {/each}
             <div slot="content" style="padding-top: var(--cds-spacing-06)">
               {#each api_components as component (component.moduleName)}
                 <TabContent>
-                  <ComponentApi component="{component}" />
+                  <ComponentApi {component} />
                 </TabContent>
               {/each}
             </div>
           </Tabs>
         {:else}
-          <ComponentApi component="{api_components[0]}" />
+          <ComponentApi component={api_components[0]} />
         {/if}
       </Column>
     </Row>
   </Grid>
 
-  <Column class="table" xlg="{4}" lg="{5}">
+  <Column class="table" xlg={4} lg={5}>
     <div class="toc">
       <h5>Examples</h5>
       <slot name="aside" />
diff --git a/docs/src/pages/_fallback.svelte b/docs/src/pages/_fallback.svelte
index 29a40603..2bb884c7 100644
--- a/docs/src/pages/_fallback.svelte
+++ b/docs/src/pages/_fallback.svelte
@@ -12,7 +12,7 @@
         <h1>404</h1>
         <div>
           Page not found.
-          <Link href="{$url('/')}">Return home</Link>
+          <Link href={$url("/")}>Return home</Link>
         </div>
       </Column>
     </Row>
diff --git a/docs/src/pages/_layout.svelte b/docs/src/pages/_layout.svelte
index 4b5b9beb..c88eb2bb 100644
--- a/docs/src/pages/_layout.svelte
+++ b/docs/src/pages/_layout.svelte
@@ -52,7 +52,7 @@
 
   $: isMobile = innerWidth < 1056;
   $: components = $layout.children.filter(
-    (child) => child.title === "components"
+    (child) => child.title === "components",
   )[0];
 
   $beforeUrlChange(() => {
@@ -65,7 +65,7 @@
 <svelte:window bind:innerWidth />
 
 <svelte:body
-  on:keydown="{(e) => {
+  on:keydown={(e) => {
     if (active) return;
     if (
       document.activeElement instanceof HTMLInputElement ||
@@ -76,14 +76,15 @@
     }
 
     const isCommandOrControl = e.metaKey || e.ctrlKey;
-    const isCmdK = isCommandOrControl && e.key.toLowerCase() === 'k';
-    const isSlash = e.key === '/';
+    const isCmdK = isCommandOrControl && e.key.toLowerCase() === "k";
+    const isSlash = e.key === "/";
 
     if (isCmdK || isSlash) {
       e.preventDefault();
       active = true;
     }
-  }}" />
+  }}
+/>
 
 <svelte:head>
   <!-- Tealium/GA Set up -->
@@ -123,26 +124,26 @@
 
 <Theme
   persist
-  bind:theme="{$theme}"
-  on:update="{(e) => {
+  bind:theme={$theme}
+  on:update={(e) => {
     const theme = e.detail.theme;
     document.documentElement.style.setProperty(
-      'color-scheme',
-      ['white', 'g10'].includes(theme) ? 'light' : 'dark'
+      "color-scheme",
+      ["white", "g10"].includes(theme) ? "light" : "dark",
     );
-  }}"
+  }}
 >
   <Header
     aria-label="Navigation"
-    href="{$url('/')}"
-    expandedByDefault="{true}"
+    href={$url("/")}
+    expandedByDefault={true}
     bind:isSideNavOpen
   >
     <svelte:fragment slot="skip-to-content">
       <SkipToContent />
     </svelte:fragment>
 
-    <span slot="platform" class="platform-name" class:hidden="{active}">
+    <span slot="platform" class="platform-name" class:hidden={active}>
       Carbon Components Svelte &nbsp;<code class="code-01"
         >v{process.env.VERSION || ""}</code
       >
@@ -152,17 +153,17 @@
         bind:value
         bind:active
         placeholder="Search"
-        results="{results}"
-        on:select="{(e) => {
+        {results}
+        on:select={(e) => {
           $goto(e.detail.selectedResult.href);
-        }}"
+        }}
       />
       <HeaderActionLink
-        icon="{LogoGithub}"
+        icon={LogoGithub}
         href="https://github.com/carbon-design-system/carbon-components-svelte"
         target="_blank"
       />
-      <HeaderAction transition="{false}" bind:isOpen>
+      <HeaderAction transition={false} bind:isOpen>
         <HeaderPanelLinks>
           <HeaderPanelDivider>Carbon Svelte portfolio</HeaderPanelDivider>
           <HeaderPanelLink
@@ -197,13 +198,13 @@
     </HeaderUtilities>
   </Header>
 
-  <SideNav bind:isOpen="{isSideNavOpen}">
+  <SideNav bind:isOpen={isSideNavOpen}>
     <SideNavItems>
       {#each components.children.filter((child) => !deprecated.includes(child.title)) as child (child.path)}
         <SideNavMenuItem
-          text="{child.title}"
-          href="{$url(child.path)}"
-          isSelected="{$isActive($url(child.path))}"
+          text={child.title}
+          href={$url(child.path)}
+          isSelected={$isActive($url(child.path))}
         >
           {child.title}
           {#if deprecated.includes(child.title)}
diff --git a/docs/src/pages/framed/Accordion/ExpandableAccordion.svelte b/docs/src/pages/framed/Accordion/ExpandableAccordion.svelte
index 3b8ce26e..5a6efd3e 100644
--- a/docs/src/pages/framed/Accordion/ExpandableAccordion.svelte
+++ b/docs/src/pages/framed/Accordion/ExpandableAccordion.svelte
@@ -22,14 +22,14 @@
   let open = false;
 </script>
 
-<Button kind="ghost" size="field" on:click="{() => (open = !open)}">
+<Button kind="ghost" size="field" on:click={() => (open = !open)}>
   {open ? "Collapse" : "Expand"}
   all
 </Button>
 
 <Accordion>
   {#each items as item}
-    <AccordionItem title="{item.title}" open="{open}">
+    <AccordionItem title={item.title} {open}>
       <p>{item.description}</p>
     </AccordionItem>
   {/each}
diff --git a/docs/src/pages/framed/Breadcrumbs/Breadcrumbs.svelte b/docs/src/pages/framed/Breadcrumbs/Breadcrumbs.svelte
index 6a43e299..838c1aaa 100644
--- a/docs/src/pages/framed/Breadcrumbs/Breadcrumbs.svelte
+++ b/docs/src/pages/framed/Breadcrumbs/Breadcrumbs.svelte
@@ -10,7 +10,7 @@
 
 <Breadcrumb>
   {#each items as item, i}
-    <BreadcrumbItem href="{item.href}" isCurrentPage="{i === items.length - 1}">
+    <BreadcrumbItem href={item.href} isCurrentPage={i === items.length - 1}>
       {item.text}
     </BreadcrumbItem>
   {/each}
diff --git a/docs/src/pages/framed/Breakpoint/Breakpoint.svelte b/docs/src/pages/framed/Breakpoint/Breakpoint.svelte
index 9f2473f9..d80ad126 100644
--- a/docs/src/pages/framed/Breakpoint/Breakpoint.svelte
+++ b/docs/src/pages/framed/Breakpoint/Breakpoint.svelte
@@ -5,7 +5,7 @@
   let events = [];
 </script>
 
-<Breakpoint bind:size on:change="{(e) => (events = [...events, e.detail])}" />
+<Breakpoint bind:size on:change={(e) => (events = [...events, e.detail])} />
 
 <p>Resize the width of your browser.</p>
 <h6>Breakpoint size</h6>
diff --git a/docs/src/pages/framed/Button/ProgrammaticFocus.svelte b/docs/src/pages/framed/Button/ProgrammaticFocus.svelte
index 5040808a..a8cff295 100644
--- a/docs/src/pages/framed/Button/ProgrammaticFocus.svelte
+++ b/docs/src/pages/framed/Button/ProgrammaticFocus.svelte
@@ -7,9 +7,9 @@
 <Button bind:ref>Primary button</Button>
 <Button
   kind="ghost"
-  on:click="{() => {
+  on:click={() => {
     ref?.focus();
-  }}"
+  }}
 >
   Click to focus the Primary button
 </Button>
diff --git a/docs/src/pages/framed/Button/SelectedIconOnlyButton.svelte b/docs/src/pages/framed/Button/SelectedIconOnlyButton.svelte
index 6ff0f983..bf2b4bd4 100644
--- a/docs/src/pages/framed/Button/SelectedIconOnlyButton.svelte
+++ b/docs/src/pages/framed/Button/SelectedIconOnlyButton.svelte
@@ -8,23 +8,23 @@
 </script>
 
 <Button
-  isSelected="{index === 0}"
+  isSelected={index === 0}
   kind="ghost"
   iconDescription="Bold"
-  icon="{TextBold}"
-  on:click="{() => (index = 0)}"
+  icon={TextBold}
+  on:click={() => (index = 0)}
 />
 <Button
-  isSelected="{index === 1}"
+  isSelected={index === 1}
   kind="ghost"
   iconDescription="Italicize"
-  icon="{TextItalic}"
-  on:click="{() => (index = 1)}"
+  icon={TextItalic}
+  on:click={() => (index = 1)}
 />
 <Button
-  isSelected="{index === 2}"
+  isSelected={index === 2}
   kind="ghost"
   iconDescription="Underline"
-  icon="{TextUnderline}"
-  on:click="{() => (index = 2)}"
+  icon={TextUnderline}
+  on:click={() => (index = 2)}
 />
diff --git a/docs/src/pages/framed/Checkbox/CheckboxReactive.svelte b/docs/src/pages/framed/Checkbox/CheckboxReactive.svelte
index a58be9eb..f09a714d 100644
--- a/docs/src/pages/framed/Checkbox/CheckboxReactive.svelte
+++ b/docs/src/pages/framed/Checkbox/CheckboxReactive.svelte
@@ -7,7 +7,7 @@
 <Checkbox labelText="Label text" bind:checked />
 
 <div style="margin: var(--cds-layout-01) 0">
-  <Button on:click="{() => (checked = !checked)}">Toggle</Button>
+  <Button on:click={() => (checked = !checked)}>Toggle</Button>
 </div>
 
 <strong>checked:</strong>
diff --git a/docs/src/pages/framed/Checkbox/MultipleCheckboxes.svelte b/docs/src/pages/framed/Checkbox/MultipleCheckboxes.svelte
index d66c444b..446ca49f 100644
--- a/docs/src/pages/framed/Checkbox/MultipleCheckboxes.svelte
+++ b/docs/src/pages/framed/Checkbox/MultipleCheckboxes.svelte
@@ -6,11 +6,11 @@
 </script>
 
 {#each values as value}
-  <Checkbox bind:group labelText="{value}" value="{value}" />
+  <Checkbox bind:group labelText={value} {value} />
 {/each}
 
 <div style="margin: var(--cds-layout-01) 0">
-  <Button on:click="{() => (group = ['Banana'])}">Set to ["Banana"]</Button>
+  <Button on:click={() => (group = ["Banana"])}>Set to ["Banana"]</Button>
 </div>
 
 <strong>Selected:</strong>
diff --git a/docs/src/pages/framed/CodeSnippet/CodeSnippetOverride.svelte b/docs/src/pages/framed/CodeSnippet/CodeSnippetOverride.svelte
index 64ccab08..708fc219 100644
--- a/docs/src/pages/framed/CodeSnippet/CodeSnippetOverride.svelte
+++ b/docs/src/pages/framed/CodeSnippet/CodeSnippetOverride.svelte
@@ -5,5 +5,5 @@
 
 <CodeSnippet
   code="npm i carbon-components-svelte"
-  copy="{(text) => copy(text)}"
+  copy={(text) => copy(text)}
 />
diff --git a/docs/src/pages/framed/CodeSnippet/CodeSnippetReactive.svelte b/docs/src/pages/framed/CodeSnippet/CodeSnippetReactive.svelte
index 0d307c9e..37013d04 100644
--- a/docs/src/pages/framed/CodeSnippet/CodeSnippetReactive.svelte
+++ b/docs/src/pages/framed/CodeSnippet/CodeSnippetReactive.svelte
@@ -4,16 +4,16 @@
   let expanded = false;
 </script>
 
-<Button on:click="{() => (expanded = !expanded)}">Toggle expansion</Button>
+<Button on:click={() => (expanded = !expanded)}>Toggle expansion</Button>
 
 <CodeSnippet
   type="multi"
-  code="{Array.from({ length: 30 }, (_, i) => i + 1).join('\n')}"
+  code={Array.from({ length: 30 }, (_, i) => i + 1).join("\n")}
   bind:expanded
-  on:expand="{() => {
-    console.log('on:expand');
-  }}"
-  on:collapse="{() => {
-    console.log('on:collapse');
-  }}"
+  on:expand={() => {
+    console.log("on:expand");
+  }}
+  on:collapse={() => {
+    console.log("on:collapse");
+  }}
 />
diff --git a/docs/src/pages/framed/CodeSnippet/DynamicCodeSnippet.svelte b/docs/src/pages/framed/CodeSnippet/DynamicCodeSnippet.svelte
index ca658505..df541f85 100644
--- a/docs/src/pages/framed/CodeSnippet/DynamicCodeSnippet.svelte
+++ b/docs/src/pages/framed/CodeSnippet/DynamicCodeSnippet.svelte
@@ -13,4 +13,4 @@
   labelText="Trigger snippet overflow"
   style="margin-bottom: var(--cds-spacing-05)"
 />
-<CodeSnippet type="multi" code="{code}" />
+<CodeSnippet type="multi" {code} />
diff --git a/docs/src/pages/framed/CodeSnippet/HiddenCodeSnippet.svelte b/docs/src/pages/framed/CodeSnippet/HiddenCodeSnippet.svelte
index 10634950..adc5c0e6 100644
--- a/docs/src/pages/framed/CodeSnippet/HiddenCodeSnippet.svelte
+++ b/docs/src/pages/framed/CodeSnippet/HiddenCodeSnippet.svelte
@@ -17,16 +17,16 @@
   <h5>"Show more" will not render</h5>
   <br />
 {/if}
-<div class:hidden="{!toggled}">
-  <CodeSnippet type="multi" code="{code}" />
+<div class:hidden={!toggled}>
+  <CodeSnippet type="multi" {code} />
 </div>
 
 {#if toggled}
   <br /><br />
   <h5>"Show more" will render</h5>
   <br />
-  <div class:hidden="{!toggled}">
-    <CodeSnippet type="multi" code="{code}" />
+  <div class:hidden={!toggled}>
+    <CodeSnippet type="multi" {code} />
   </div>
 {/if}
 
diff --git a/docs/src/pages/framed/ComboBox/ComboBoxClear.svelte b/docs/src/pages/framed/ComboBox/ComboBoxClear.svelte
index de314152..746a3d5c 100644
--- a/docs/src/pages/framed/ComboBox/ComboBoxClear.svelte
+++ b/docs/src/pages/framed/ComboBox/ComboBoxClear.svelte
@@ -8,13 +8,13 @@
   titleText="Contact"
   placeholder="Select contact method"
   selectedId="1"
-  bind:this="{ref}"
-  items="{[
-    { id: '0', text: 'Slack' },
-    { id: '1', text: 'Email' },
-    { id: '2', text: 'Fax' },
-  ]}"
+  bind:this={ref}
+  items={[
+    { id: "0", text: "Slack" },
+    { id: "1", text: "Email" },
+    { id: "2", text: "Fax" },
+  ]}
 />
 <br />
-<Button on:click="{ref.clear}">Clear</Button>
-<Button on:click="{() => ref.clear({ focus: false })}">Clear (no focus)</Button>
+<Button on:click={ref.clear}>Clear</Button>
+<Button on:click={() => ref.clear({ focus: false })}>Clear (no focus)</Button>
diff --git a/docs/src/pages/framed/ComboBox/ComboBoxSlot.svelte b/docs/src/pages/framed/ComboBox/ComboBoxSlot.svelte
index 1cf8198f..c822c404 100644
--- a/docs/src/pages/framed/ComboBox/ComboBoxSlot.svelte
+++ b/docs/src/pages/framed/ComboBox/ComboBoxSlot.svelte
@@ -5,11 +5,11 @@
 <ComboBox
   titleText="Contact"
   placeholder="Select contact method"
-  items="{[
-    { id: '0', text: 'Slack' },
-    { id: '1', text: 'Email' },
-    { id: '2', text: 'Fax' },
-  ]}"
+  items={[
+    { id: "0", text: "Slack" },
+    { id: "1", text: "Email" },
+    { id: "2", text: "Fax" },
+  ]}
   let:item
   let:index
 >
diff --git a/docs/src/pages/framed/ComboBox/FilterableComboBox.svelte b/docs/src/pages/framed/ComboBox/FilterableComboBox.svelte
index 38d408ba..d4b5be05 100644
--- a/docs/src/pages/framed/ComboBox/FilterableComboBox.svelte
+++ b/docs/src/pages/framed/ComboBox/FilterableComboBox.svelte
@@ -10,10 +10,10 @@
 <ComboBox
   titleText="Contact"
   placeholder="Select contact method"
-  items="{[
-    { id: '0', text: 'Slack' },
-    { id: '1', text: 'Email' },
-    { id: '2', text: 'Fax' },
-  ]}"
-  shouldFilterItem="{shouldFilterItem}"
+  items={[
+    { id: "0", text: "Slack" },
+    { id: "1", text: "Email" },
+    { id: "2", text: "Fax" },
+  ]}
+  {shouldFilterItem}
 />
diff --git a/docs/src/pages/framed/ComboBox/FilterableComboBoxCustomLabel.svelte b/docs/src/pages/framed/ComboBox/FilterableComboBoxCustomLabel.svelte
index c5eda1ce..0b300fbb 100644
--- a/docs/src/pages/framed/ComboBox/FilterableComboBoxCustomLabel.svelte
+++ b/docs/src/pages/framed/ComboBox/FilterableComboBoxCustomLabel.svelte
@@ -24,11 +24,11 @@
 <ComboBox
   titleText="Contact"
   placeholder="Select contact method"
-  items="{[
-    { id: '0', key: 'Slack' },
-    { id: '1', key: 'Email' },
-    { id: '2', key: 'Fax' },
-  ]}"
-  shouldFilterItem="{shouldFilterItem}"
-  itemToString="{itemToString}"
+  items={[
+    { id: "0", key: "Slack" },
+    { id: "1", key: "Email" },
+    { id: "2", key: "Fax" },
+  ]}
+  {shouldFilterItem}
+  {itemToString}
 />
diff --git a/docs/src/pages/framed/ComboBox/MultipleComboBox.svelte b/docs/src/pages/framed/ComboBox/MultipleComboBox.svelte
index 7e53612f..680ac301 100644
--- a/docs/src/pages/framed/ComboBox/MultipleComboBox.svelte
+++ b/docs/src/pages/framed/ComboBox/MultipleComboBox.svelte
@@ -18,19 +18,19 @@
 </script>
 
 <ComboBox
-  bind:selectedId="{comboBox1_selectedId}"
+  bind:selectedId={comboBox1_selectedId}
   titleText="Primary contact"
   placeholder="Select primary contact method"
-  items="{items}"
+  {items}
 />
 
 <div>Primary: {primary}</div>
 
 <ComboBox
-  bind:selectedId="{comboBox2_selectedId}"
+  bind:selectedId={comboBox2_selectedId}
   titleText="Secondary contact"
   placeholder="Select secondary contact method"
-  items="{items}"
+  {items}
 />
 
 <div>Secondary: {secondary}</div>
diff --git a/docs/src/pages/framed/ComboBox/ReactiveComboBox.svelte b/docs/src/pages/framed/ComboBox/ReactiveComboBox.svelte
index 9c594761..7ed29f00 100644
--- a/docs/src/pages/framed/ComboBox/ReactiveComboBox.svelte
+++ b/docs/src/pages/framed/ComboBox/ReactiveComboBox.svelte
@@ -7,14 +7,14 @@
   titleText="Contact"
   placeholder="Select contact method"
   bind:selectedId
-  items="{[
-    { id: '0', text: 'Slack' },
-    { id: '1', text: 'Email' },
-    { id: '2', text: 'Fax' },
-  ]}"
+  items={[
+    { id: "0", text: "Slack" },
+    { id: "1", text: "Email" },
+    { id: "2", text: "Fax" },
+  ]}
 />
 <br />
-<Button on:click="{() => (selectedId = undefined)}"
+<Button on:click={() => (selectedId = undefined)}
   >Set to undefined (unselected)</Button
 >
-<Button on:click="{() => (selectedId = '2')}">Set to 2 (Fax)</Button>
+<Button on:click={() => (selectedId = "2")}>Set to 2 (Fax)</Button>
diff --git a/docs/src/pages/framed/ContentSwitcher/ContentSwitcherReactive.svelte b/docs/src/pages/framed/ContentSwitcher/ContentSwitcherReactive.svelte
index 517c25c2..7b13e88f 100644
--- a/docs/src/pages/framed/ContentSwitcher/ContentSwitcherReactive.svelte
+++ b/docs/src/pages/framed/ContentSwitcher/ContentSwitcherReactive.svelte
@@ -13,8 +13,8 @@
 <div>
   <Button
     size="small"
-    disabled="{selectedIndex === 2}"
-    on:click="{() => (selectedIndex = 2)}"
+    disabled={selectedIndex === 2}
+    on:click={() => (selectedIndex = 2)}
   >
     Set selected to 2
   </Button>
diff --git a/docs/src/pages/framed/ContextMenu/ContextMenu.svelte b/docs/src/pages/framed/ContextMenu/ContextMenu.svelte
index 21e92b03..d2ad8365 100644
--- a/docs/src/pages/framed/ContextMenu/ContextMenu.svelte
+++ b/docs/src/pages/framed/ContextMenu/ContextMenu.svelte
@@ -18,9 +18,9 @@
     indented
     labelText="Copy"
     shortcutText="⌘C"
-    icon="{CopyFile}"
+    icon={CopyFile}
   />
-  <ContextMenuOption indented labelText="Cut" shortcutText="⌘X" icon="{Cut}" />
+  <ContextMenuOption indented labelText="Cut" shortcutText="⌘X" icon={Cut} />
   <ContextMenuDivider />
   <ContextMenuOption indented labelText="Export as">
     <ContextMenuGroup labelText="Export options" bind:selectedIds>
diff --git a/docs/src/pages/framed/ContextMenu/ContextMenuTarget.svelte b/docs/src/pages/framed/ContextMenu/ContextMenuTarget.svelte
index d957059e..1403827a 100644
--- a/docs/src/pages/framed/ContextMenu/ContextMenuTarget.svelte
+++ b/docs/src/pages/framed/ContextMenu/ContextMenuTarget.svelte
@@ -11,14 +11,14 @@
   let target;
 </script>
 
-<ContextMenu target="{target}" on:open="{(e) => console.log(e.detail)}">
+<ContextMenu {target} on:open={(e) => console.log(e.detail)}>
   <ContextMenuOption
     indented
     labelText="Copy"
     shortcutText="⌘C"
-    icon="{CopyFile}"
+    icon={CopyFile}
   />
-  <ContextMenuOption indented labelText="Cut" shortcutText="⌘X" icon="{Cut}" />
+  <ContextMenuOption indented labelText="Cut" shortcutText="⌘X" icon={Cut} />
   <ContextMenuDivider />
   <ContextMenuOption indented labelText="Export as">
     <ContextMenuGroup labelText="Export options">
@@ -40,7 +40,7 @@
 </ContextMenu>
 
 <div>
-  <p bind:this="{target}">Right click this element</p>
+  <p bind:this={target}>Right click this element</p>
 </div>
 
 <style>
diff --git a/docs/src/pages/framed/ContextMenu/ContextMenuTargets.svelte b/docs/src/pages/framed/ContextMenu/ContextMenuTargets.svelte
index c9363250..0d8cf8a2 100644
--- a/docs/src/pages/framed/ContextMenu/ContextMenuTargets.svelte
+++ b/docs/src/pages/framed/ContextMenu/ContextMenuTargets.svelte
@@ -12,17 +12,14 @@
   let target2;
 </script>
 
-<ContextMenu
-  target="{[target, target2]}"
-  on:open="{(e) => console.log(e.detail)}"
->
+<ContextMenu target={[target, target2]} on:open={(e) => console.log(e.detail)}>
   <ContextMenuOption
     indented
     labelText="Copy"
     shortcutText="⌘C"
-    icon="{CopyFile}"
+    icon={CopyFile}
   />
-  <ContextMenuOption indented labelText="Cut" shortcutText="⌘X" icon="{Cut}" />
+  <ContextMenuOption indented labelText="Cut" shortcutText="⌘X" icon={Cut} />
   <ContextMenuDivider />
   <ContextMenuOption indented labelText="Export as">
     <ContextMenuGroup labelText="Export options">
@@ -44,8 +41,8 @@
 </ContextMenu>
 
 <div>
-  <p bind:this="{target}">Right click this element</p>
-  <p bind:this="{target2}">... or this one</p>
+  <p bind:this={target}>Right click this element</p>
+  <p bind:this={target2}>... or this one</p>
 </div>
 
 <style>
diff --git a/docs/src/pages/framed/CopyButton/CopyButtonOverride.svelte b/docs/src/pages/framed/CopyButton/CopyButtonOverride.svelte
index 09f8e66a..b1ed17b7 100644
--- a/docs/src/pages/framed/CopyButton/CopyButtonOverride.svelte
+++ b/docs/src/pages/framed/CopyButton/CopyButtonOverride.svelte
@@ -3,4 +3,4 @@
   import { CopyButton } from "carbon-components-svelte";
 </script>
 
-<CopyButton text="Carbon svelte" copy="{(text) => copy(text)}" />
+<CopyButton text="Carbon svelte" copy={(text) => copy(text)} />
diff --git a/docs/src/pages/framed/DataTable/DataTableAppendColumns.svelte b/docs/src/pages/framed/DataTable/DataTableAppendColumns.svelte
index dffa197f..5b447768 100644
--- a/docs/src/pages/framed/DataTable/DataTableAppendColumns.svelte
+++ b/docs/src/pages/framed/DataTable/DataTableAppendColumns.svelte
@@ -22,7 +22,7 @@
   ];
 </script>
 
-<DataTable sortable headers="{headers}" rows="{rows}">
+<DataTable sortable {headers} {rows}>
   <svelte:fragment slot="cell" let:cell>
     {#if cell.key === "overflow"}
       <OverflowMenu flipped>
diff --git a/docs/src/pages/framed/DataTable/DataTableBatchSelection.svelte b/docs/src/pages/framed/DataTable/DataTableBatchSelection.svelte
index cc92ca0b..c16847da 100644
--- a/docs/src/pages/framed/DataTable/DataTableBatchSelection.svelte
+++ b/docs/src/pages/framed/DataTable/DataTableBatchSelection.svelte
@@ -9,16 +9,16 @@
 <DataTable
   batchSelection
   bind:selectedRowIds
-  headers="{[
-    { key: 'name', value: 'Name' },
-    { key: 'port', value: 'Port' },
-    { key: 'rule', value: 'Rule' },
-  ]}"
-  rows="{Array.from({ length: 6 }).map((_, i) => ({
+  headers={[
+    { key: "name", value: "Name" },
+    { key: "port", value: "Port" },
+    { key: "rule", value: "Rule" },
+  ]}
+  rows={Array.from({ length: 6 }).map((_, i) => ({
     id: i,
-    name: 'Load Balancer ' + (i + 1),
-    protocol: 'HTTP',
+    name: "Load Balancer " + (i + 1),
+    protocol: "HTTP",
     port: i % 3 ? (i % 2 ? 3000 : 80) : 443,
-    rule: i % 3 ? 'Round robin' : 'DNS delegation',
-  }))}"
+    rule: i % 3 ? "Round robin" : "DNS delegation",
+  }))}
 />
diff --git a/docs/src/pages/framed/DataTable/DataTableBatchSelectionInitial.svelte b/docs/src/pages/framed/DataTable/DataTableBatchSelectionInitial.svelte
index 2a602a55..fd7b7aa1 100644
--- a/docs/src/pages/framed/DataTable/DataTableBatchSelectionInitial.svelte
+++ b/docs/src/pages/framed/DataTable/DataTableBatchSelectionInitial.svelte
@@ -9,16 +9,16 @@
 <DataTable
   batchSelection
   bind:selectedRowIds
-  headers="{[
-    { key: 'name', value: 'Name' },
-    { key: 'port', value: 'Port' },
-    { key: 'rule', value: 'Rule' },
-  ]}"
-  rows="{Array.from({ length: 6 }).map((_, i) => ({
+  headers={[
+    { key: "name", value: "Name" },
+    { key: "port", value: "Port" },
+    { key: "rule", value: "Rule" },
+  ]}
+  rows={Array.from({ length: 6 }).map((_, i) => ({
     id: i,
-    name: 'Load Balancer ' + (i + 1),
-    protocol: 'HTTP',
+    name: "Load Balancer " + (i + 1),
+    protocol: "HTTP",
     port: i % 3 ? (i % 2 ? 3000 : 80) : 443,
-    rule: i % 3 ? 'Round robin' : 'DNS delegation',
-  }))}"
+    rule: i % 3 ? "Round robin" : "DNS delegation",
+  }))}
 />
diff --git a/docs/src/pages/framed/DataTable/DataTableBatchSelectionToolbar.svelte b/docs/src/pages/framed/DataTable/DataTableBatchSelectionToolbar.svelte
index 77681aeb..1e36b952 100644
--- a/docs/src/pages/framed/DataTable/DataTableBatchSelectionToolbar.svelte
+++ b/docs/src/pages/framed/DataTable/DataTableBatchSelectionToolbar.svelte
@@ -31,10 +31,10 @@
   $: console.log("selectedRowIds", selectedRowIds);
 </script>
 
-<DataTable batchSelection bind:selectedRowIds headers="{headers}" rows="{rows}">
+<DataTable batchSelection bind:selectedRowIds {headers} {rows}>
   <Toolbar>
     <ToolbarBatchActions>
-      <Button icon="{Save}">Save</Button>
+      <Button icon={Save}>Save</Button>
     </ToolbarBatchActions>
     <ToolbarContent>
       <ToolbarSearch />
diff --git a/docs/src/pages/framed/DataTable/DataTableBatchSelectionToolbarControlled.svelte b/docs/src/pages/framed/DataTable/DataTableBatchSelectionToolbarControlled.svelte
index 08e5981e..52a750dc 100644
--- a/docs/src/pages/framed/DataTable/DataTableBatchSelectionToolbarControlled.svelte
+++ b/docs/src/pages/framed/DataTable/DataTableBatchSelectionToolbarControlled.svelte
@@ -32,32 +32,32 @@
 
 <DataTable
   selectable
-  batchSelection="{active}"
+  batchSelection={active}
   bind:selectedRowIds
-  headers="{headers}"
-  rows="{rows}"
+  {headers}
+  {rows}
 >
   <Toolbar>
     <ToolbarBatchActions
       bind:active
-      on:cancel="{(e) => {
+      on:cancel={(e) => {
         e.preventDefault();
         active = false;
-      }}"
+      }}
     >
       <Button
-        icon="{TrashCan}"
-        disabled="{selectedRowIds.length === 0}"
-        on:click="{() => {
+        icon={TrashCan}
+        disabled={selectedRowIds.length === 0}
+        on:click={() => {
           rows = rows.filter((row) => !selectedRowIds.includes(row.id));
           selectedRowIds = [];
-        }}"
+        }}
       >
         Delete
       </Button>
     </ToolbarBatchActions>
     <ToolbarContent>
-      <Button on:click="{() => (active = true)}">Edit rows</Button>
+      <Button on:click={() => (active = true)}>Edit rows</Button>
     </ToolbarContent>
   </Toolbar>
 </DataTable>
diff --git a/docs/src/pages/framed/DataTable/DataTableExpandableSelectable.svelte b/docs/src/pages/framed/DataTable/DataTableExpandableSelectable.svelte
index ef5834fb..4b0f280a 100644
--- a/docs/src/pages/framed/DataTable/DataTableExpandableSelectable.svelte
+++ b/docs/src/pages/framed/DataTable/DataTableExpandableSelectable.svelte
@@ -15,19 +15,19 @@
   batchSelection
   bind:expandedRowIds
   bind:selectedRowIds
-  headers="{[
-    { key: 'name', value: 'Name' },
-    { key: 'protocol', value: 'Protocol' },
-    { key: 'port', value: 'Port' },
-    { key: 'rule', value: 'Rule' },
-  ]}"
-  rows="{Array.from({ length: 6 }).map((_, i) => ({
+  headers={[
+    { key: "name", value: "Name" },
+    { key: "protocol", value: "Protocol" },
+    { key: "port", value: "Port" },
+    { key: "rule", value: "Rule" },
+  ]}
+  rows={Array.from({ length: 6 }).map((_, i) => ({
     id: i,
-    name: 'Load Balancer ' + (i + 1),
-    protocol: 'HTTP',
+    name: "Load Balancer " + (i + 1),
+    protocol: "HTTP",
     port: i % 3 ? (i % 2 ? 3000 : 80) : 443,
-    rule: i % 3 ? 'Round robin' : 'DNS delegation',
-  }))}"
+    rule: i % 3 ? "Round robin" : "DNS delegation",
+  }))}
 >
   <svelte:fragment slot="expanded-row" let:row>
     <pre> {JSON.stringify(row, null, 2)}</pre>
diff --git a/docs/src/pages/framed/DataTable/DataTableExpandableZebra.svelte b/docs/src/pages/framed/DataTable/DataTableExpandableZebra.svelte
index 49f52442..df4f4c97 100644
--- a/docs/src/pages/framed/DataTable/DataTableExpandableZebra.svelte
+++ b/docs/src/pages/framed/DataTable/DataTableExpandableZebra.svelte
@@ -5,57 +5,57 @@
 <DataTable
   zebra
   expandable
-  nonExpandableRowIds="{['a', 'd']}"
-  headers="{[
-    { key: 'name', value: 'Name' },
-    { key: 'protocol', value: 'Protocol' },
-    { key: 'port', value: 'Port' },
-    { key: 'rule', value: 'Rule' },
-  ]}"
-  rows="{[
+  nonExpandableRowIds={["a", "d"]}
+  headers={[
+    { key: "name", value: "Name" },
+    { key: "protocol", value: "Protocol" },
+    { key: "port", value: "Port" },
+    { key: "rule", value: "Rule" },
+  ]}
+  rows={[
     {
-      id: 'a',
-      name: 'Load Balancer 3',
-      protocol: 'HTTP',
+      id: "a",
+      name: "Load Balancer 3",
+      protocol: "HTTP",
       port: 3000,
-      rule: 'Round robin',
+      rule: "Round robin",
     },
     {
-      id: 'b',
-      name: 'Load Balancer 1',
-      protocol: 'HTTP',
+      id: "b",
+      name: "Load Balancer 1",
+      protocol: "HTTP",
       port: 443,
-      rule: 'Round robin',
+      rule: "Round robin",
     },
     {
-      id: 'c',
-      name: 'Load Balancer 2',
-      protocol: 'HTTP',
+      id: "c",
+      name: "Load Balancer 2",
+      protocol: "HTTP",
       port: 80,
-      rule: 'DNS delegation',
+      rule: "DNS delegation",
     },
     {
-      id: 'd',
-      name: 'Load Balancer 6',
-      protocol: 'HTTP',
+      id: "d",
+      name: "Load Balancer 6",
+      protocol: "HTTP",
       port: 3000,
-      rule: 'Round robin',
+      rule: "Round robin",
     },
     {
-      id: 'e',
-      name: 'Load Balancer 4',
-      protocol: 'HTTP',
+      id: "e",
+      name: "Load Balancer 4",
+      protocol: "HTTP",
       port: 443,
-      rule: 'Round robin',
+      rule: "Round robin",
     },
     {
-      id: 'f',
-      name: 'Load Balancer 5',
-      protocol: 'HTTP',
+      id: "f",
+      name: "Load Balancer 5",
+      protocol: "HTTP",
       port: 80,
-      rule: 'DNS delegation',
+      rule: "DNS delegation",
     },
-  ]}"
+  ]}
 >
   <svelte:fragment slot="expanded-row" let:row>
     <pre>{JSON.stringify(row, null, 2)}</pre>
diff --git a/docs/src/pages/framed/DataTable/DataTableFilterCustom.svelte b/docs/src/pages/framed/DataTable/DataTableFilterCustom.svelte
index 91e0a186..00107bd0 100644
--- a/docs/src/pages/framed/DataTable/DataTableFilterCustom.svelte
+++ b/docs/src/pages/framed/DataTable/DataTableFilterCustom.svelte
@@ -22,27 +22,27 @@
 </script>
 
 <DataTable
-  headers="{[
-    { key: 'name', value: 'Name' },
-    { key: 'protocol', value: 'Protocol' },
-    { key: 'port', value: 'Port' },
-    { key: 'rule', value: 'Rule' },
-  ]}"
-  rows="{rows}"
-  pageSize="{pageSize}"
-  page="{page}"
+  headers={[
+    { key: "name", value: "Name" },
+    { key: "protocol", value: "Protocol" },
+    { key: "port", value: "Port" },
+    { key: "rule", value: "Rule" },
+  ]}
+  {rows}
+  {pageSize}
+  {page}
 >
   <Toolbar>
     <ToolbarContent>
       <ToolbarSearch
         persistent
         value="round"
-        shouldFilterRows="{(row, value) => {
+        shouldFilterRows={(row, value) => {
           return (
             /(6|8)$/.test(row.name) &&
             row.rule.toLowerCase().includes(value.toLowerCase())
           );
-        }}"
+        }}
         bind:filteredRowIds
       />
     </ToolbarContent>
@@ -52,6 +52,6 @@
 <Pagination
   bind:pageSize
   bind:page
-  totalItems="{filteredRowIds.length}"
+  totalItems={filteredRowIds.length}
   pageSizeInputDisabled
 />
diff --git a/docs/src/pages/framed/DataTable/DataTableFilterable.svelte b/docs/src/pages/framed/DataTable/DataTableFilterable.svelte
index b83f9a46..424b22ae 100644
--- a/docs/src/pages/framed/DataTable/DataTableFilterable.svelte
+++ b/docs/src/pages/framed/DataTable/DataTableFilterable.svelte
@@ -22,15 +22,15 @@
 </script>
 
 <DataTable
-  headers="{[
-    { key: 'name', value: 'Name' },
-    { key: 'protocol', value: 'Protocol' },
-    { key: 'port', value: 'Port' },
-    { key: 'rule', value: 'Rule' },
-  ]}"
-  rows="{rows}"
-  pageSize="{pageSize}"
-  page="{page}"
+  headers={[
+    { key: "name", value: "Name" },
+    { key: "protocol", value: "Protocol" },
+    { key: "port", value: "Port" },
+    { key: "rule", value: "Rule" },
+  ]}
+  {rows}
+  {pageSize}
+  {page}
 >
   <Toolbar>
     <ToolbarContent>
@@ -47,6 +47,6 @@
 <Pagination
   bind:pageSize
   bind:page
-  totalItems="{filteredRowIds.length}"
+  totalItems={filteredRowIds.length}
   pageSizeInputDisabled
 />
diff --git a/docs/src/pages/framed/DataTable/DataTableHeaderWidth.svelte b/docs/src/pages/framed/DataTable/DataTableHeaderWidth.svelte
index cf2faaf4..4150e6e9 100644
--- a/docs/src/pages/framed/DataTable/DataTableHeaderWidth.svelte
+++ b/docs/src/pages/framed/DataTable/DataTableHeaderWidth.svelte
@@ -3,17 +3,17 @@
 </script>
 
 <DataTable
-  headers="{[
-    { key: 'name', value: 'Name', width: '50%', minWidth: '200px' },
-    { key: 'protocol', value: 'Protocol', width: '60px' },
-    { key: 'port', value: 'Port', width: '60px' },
-    { key: 'rule', value: 'Rule', width: '10rem' },
-  ]}"
-  rows="{Array.from({ length: 6 }).map((_, i) => ({
+  headers={[
+    { key: "name", value: "Name", width: "50%", minWidth: "200px" },
+    { key: "protocol", value: "Protocol", width: "60px" },
+    { key: "port", value: "Port", width: "60px" },
+    { key: "rule", value: "Rule", width: "10rem" },
+  ]}
+  rows={Array.from({ length: 6 }).map((_, i) => ({
     id: i,
-    name: 'Load Balancer ' + (i + 1),
-    protocol: 'HTTP',
+    name: "Load Balancer " + (i + 1),
+    protocol: "HTTP",
     port: i % 3 ? (i % 2 ? 3000 : 80) : 443,
-    rule: i % 3 ? 'Round robin' : 'DNS delegation',
-  }))}"
+    rule: i % 3 ? "Round robin" : "DNS delegation",
+  }))}
 />
diff --git a/docs/src/pages/framed/DataTable/DataTableNonExpandableRows.svelte b/docs/src/pages/framed/DataTable/DataTableNonExpandableRows.svelte
index 51ebf012..95699af6 100644
--- a/docs/src/pages/framed/DataTable/DataTableNonExpandableRows.svelte
+++ b/docs/src/pages/framed/DataTable/DataTableNonExpandableRows.svelte
@@ -49,16 +49,16 @@
 
 <DataTable
   batchExpansion
-  nonExpandableRowIds="{rows
+  nonExpandableRowIds={rows
     .filter((row) => row.port < 3000)
-    .map((row) => row.id)}"
-  headers="{[
-    { key: 'name', value: 'Name' },
-    { key: 'protocol', value: 'Protocol' },
-    { key: 'port', value: 'Port' },
-    { key: 'rule', value: 'Rule' },
-  ]}"
-  rows="{rows}"
+    .map((row) => row.id)}
+  headers={[
+    { key: "name", value: "Name" },
+    { key: "protocol", value: "Protocol" },
+    { key: "port", value: "Port" },
+    { key: "rule", value: "Rule" },
+  ]}
+  {rows}
 >
   <svelte:fragment slot="expanded-row" let:row>
     <pre>{JSON.stringify(row, null, 2)}</pre>
diff --git a/docs/src/pages/framed/DataTable/DataTableNonSelectableRows.svelte b/docs/src/pages/framed/DataTable/DataTableNonSelectableRows.svelte
index 5c262761..40e1fb63 100644
--- a/docs/src/pages/framed/DataTable/DataTableNonSelectableRows.svelte
+++ b/docs/src/pages/framed/DataTable/DataTableNonSelectableRows.svelte
@@ -49,14 +49,14 @@
 
 <DataTable
   batchSelection
-  nonSelectableRowIds="{rows
+  nonSelectableRowIds={rows
     .filter((row) => row.port === 3000)
-    .map((row) => row.id)}"
-  headers="{[
-    { key: 'name', value: 'Name' },
-    { key: 'protocol', value: 'Protocol' },
-    { key: 'port', value: 'Port' },
-    { key: 'rule', value: 'Rule' },
-  ]}"
-  rows="{rows}"
+    .map((row) => row.id)}
+  headers={[
+    { key: "name", value: "Name" },
+    { key: "protocol", value: "Protocol" },
+    { key: "port", value: "Port" },
+    { key: "rule", value: "Rule" },
+  ]}
+  {rows}
 />
diff --git a/docs/src/pages/framed/DataTable/DataTablePagination.svelte b/docs/src/pages/framed/DataTable/DataTablePagination.svelte
index ed287cbb..f4cfc55c 100644
--- a/docs/src/pages/framed/DataTable/DataTablePagination.svelte
+++ b/docs/src/pages/framed/DataTable/DataTablePagination.svelte
@@ -16,19 +16,19 @@
   sortable
   title="Load balancers"
   description="Your organization's active load balancers."
-  headers="{[
-    { key: 'name', value: 'Name' },
-    { key: 'protocol', value: 'Protocol' },
-    { key: 'port', value: 'Port' },
-    { key: 'rule', value: 'Rule' },
-  ]}"
-  pageSize="{pageSize}"
-  page="{page}"
-  rows="{rows}"
+  headers={[
+    { key: "name", value: "Name" },
+    { key: "protocol", value: "Protocol" },
+    { key: "port", value: "Port" },
+    { key: "rule", value: "Rule" },
+  ]}
+  {pageSize}
+  {page}
+  {rows}
 />
 <Pagination
   bind:pageSize
   bind:page
-  totalItems="{rows.length}"
+  totalItems={rows.length}
   pageSizeInputDisabled
 />
diff --git a/docs/src/pages/framed/DataTable/DataTableProgrammaticSorting.svelte b/docs/src/pages/framed/DataTable/DataTableProgrammaticSorting.svelte
index c86e548f..785487c7 100644
--- a/docs/src/pages/framed/DataTable/DataTableProgrammaticSorting.svelte
+++ b/docs/src/pages/framed/DataTable/DataTableProgrammaticSorting.svelte
@@ -10,32 +10,32 @@
 
 <Button
   kind="tertiary"
-  disabled="{sortKey === 'port' && sortDirection === 'ascending'}"
-  on:click="{() => {
-    sortKey = 'port';
-    sortDirection = 'ascending';
-  }}"
+  disabled={sortKey === "port" && sortDirection === "ascending"}
+  on:click={() => {
+    sortKey = "port";
+    sortDirection = "ascending";
+  }}
 >
   Sort "port" in ascending order
 </Button>
 
 <Button
   kind="tertiary"
-  disabled="{sortKey === 'name' && sortDirection === 'descending'}"
-  on:click="{() => {
-    sortKey = 'name';
-    sortDirection = 'descending';
-  }}"
+  disabled={sortKey === "name" && sortDirection === "descending"}
+  on:click={() => {
+    sortKey = "name";
+    sortDirection = "descending";
+  }}
 >
   Sort "name" in descending order
 </Button>
 
 <Button
   kind="ghost"
-  on:click="{() => {
+  on:click={() => {
     sortKey = null;
-    sortDirection = 'none';
-  }}"
+    sortDirection = "none";
+  }}
 >
   Clear sorting
 </Button>
@@ -44,54 +44,54 @@
   sortable
   bind:sortKey
   bind:sortDirection
-  headers="{[
-    { key: 'name', value: 'Name' },
-    { key: 'protocol', value: 'Protocol', sort: false },
-    { key: 'port', value: 'Port' },
-    { key: 'rule', value: 'Rule' },
-  ]}"
-  rows="{[
+  headers={[
+    { key: "name", value: "Name" },
+    { key: "protocol", value: "Protocol", sort: false },
+    { key: "port", value: "Port" },
+    { key: "rule", value: "Rule" },
+  ]}
+  rows={[
     {
-      id: 'a',
-      name: 'Load Balancer 3',
-      protocol: 'HTTP',
+      id: "a",
+      name: "Load Balancer 3",
+      protocol: "HTTP",
       port: 3000,
-      rule: 'Round robin',
+      rule: "Round robin",
     },
     {
-      id: 'b',
-      name: 'Load Balancer 1',
-      protocol: 'HTTP',
+      id: "b",
+      name: "Load Balancer 1",
+      protocol: "HTTP",
       port: 443,
-      rule: 'Round robin',
+      rule: "Round robin",
     },
     {
-      id: 'c',
-      name: 'Load Balancer 2',
-      protocol: 'HTTP',
+      id: "c",
+      name: "Load Balancer 2",
+      protocol: "HTTP",
       port: 80,
-      rule: 'DNS delegation',
+      rule: "DNS delegation",
     },
     {
-      id: 'd',
-      name: 'Load Balancer 6',
-      protocol: 'HTTP',
+      id: "d",
+      name: "Load Balancer 6",
+      protocol: "HTTP",
       port: 3000,
-      rule: 'Round robin',
+      rule: "Round robin",
     },
     {
-      id: 'e',
-      name: 'Load Balancer 4',
-      protocol: 'HTTP',
+      id: "e",
+      name: "Load Balancer 4",
+      protocol: "HTTP",
       port: 443,
-      rule: 'Round robin',
+      rule: "Round robin",
     },
     {
-      id: 'f',
-      name: 'Load Balancer 5',
-      protocol: 'HTTP',
+      id: "f",
+      name: "Load Balancer 5",
+      protocol: "HTTP",
       port: 80,
-      rule: 'DNS delegation',
+      rule: "DNS delegation",
     },
-  ]}"
+  ]}
 />
diff --git a/docs/src/pages/framed/DataTable/RadioSelectableDataTable.svelte b/docs/src/pages/framed/DataTable/RadioSelectableDataTable.svelte
index c78460f3..692ce51a 100644
--- a/docs/src/pages/framed/DataTable/RadioSelectableDataTable.svelte
+++ b/docs/src/pages/framed/DataTable/RadioSelectableDataTable.svelte
@@ -21,4 +21,4 @@
   $: console.log("selectedRowIds", selectedRowIds);
 </script>
 
-<DataTable radio bind:selectedRowIds headers="{headers}" rows="{rows}" />
+<DataTable radio bind:selectedRowIds {headers} {rows} />
diff --git a/docs/src/pages/framed/DataTable/SelectableDataTable.svelte b/docs/src/pages/framed/DataTable/SelectableDataTable.svelte
index 2d0ee17e..2d38bad8 100644
--- a/docs/src/pages/framed/DataTable/SelectableDataTable.svelte
+++ b/docs/src/pages/framed/DataTable/SelectableDataTable.svelte
@@ -9,16 +9,16 @@
 <DataTable
   selectable
   bind:selectedRowIds
-  headers="{[
-    { key: 'name', value: 'Name' },
-    { key: 'port', value: 'Port' },
-    { key: 'rule', value: 'Rule' },
-  ]}"
-  rows="{Array.from({ length: 6 }).map((_, i) => ({
+  headers={[
+    { key: "name", value: "Name" },
+    { key: "port", value: "Port" },
+    { key: "rule", value: "Rule" },
+  ]}
+  rows={Array.from({ length: 6 }).map((_, i) => ({
     id: i,
-    name: 'Load Balancer ' + (i + 1),
-    protocol: 'HTTP',
+    name: "Load Balancer " + (i + 1),
+    protocol: "HTTP",
     port: i % 3 ? (i % 2 ? 3000 : 80) : 443,
-    rule: i % 3 ? 'Round robin' : 'DNS delegation',
-  }))}"
+    rule: i % 3 ? "Round robin" : "DNS delegation",
+  }))}
 />
diff --git a/docs/src/pages/framed/DatePicker/DatePickerModal.svelte b/docs/src/pages/framed/DatePicker/DatePickerModal.svelte
index 7b47d312..a5240321 100644
--- a/docs/src/pages/framed/DatePicker/DatePickerModal.svelte
+++ b/docs/src/pages/framed/DatePicker/DatePickerModal.svelte
@@ -9,14 +9,14 @@
   let open = false;
 </script>
 
-<Button on:click="{() => (open = true)}">Select date</Button>
+<Button on:click={() => (open = true)}>Select date</Button>
 
 <Modal
   bind:open
   modalHeading="Meeting date"
   primaryButtonText="Confirm"
   secondaryButtonText="Cancel"
-  on:click:button--secondary="{() => (open = false)}"
+  on:click:button--secondary={() => (open = false)}
 >
   <DatePicker datePickerType="single" style="min-height: 420px">
     <DatePickerInput labelText="Meeting date" placeholder="mm/dd/yyyy" />
diff --git a/docs/src/pages/framed/Dropdown/DropdownSlot.svelte b/docs/src/pages/framed/Dropdown/DropdownSlot.svelte
index 5d10635e..8a4cc761 100644
--- a/docs/src/pages/framed/Dropdown/DropdownSlot.svelte
+++ b/docs/src/pages/framed/Dropdown/DropdownSlot.svelte
@@ -5,11 +5,11 @@
 <Dropdown
   titleText="Contact"
   selectedId="0"
-  items="{[
-    { id: '0', text: 'Slack' },
-    { id: '1', text: 'Email' },
-    { id: '2', text: 'Fax' },
-  ]}"
+  items={[
+    { id: "0", text: "Slack" },
+    { id: "1", text: "Email" },
+    { id: "2", text: "Fax" },
+  ]}
   let:item
   let:index
 >
diff --git a/docs/src/pages/framed/Dropdown/MultipleDropdown.svelte b/docs/src/pages/framed/Dropdown/MultipleDropdown.svelte
index 0de755a2..5762f9d2 100644
--- a/docs/src/pages/framed/Dropdown/MultipleDropdown.svelte
+++ b/docs/src/pages/framed/Dropdown/MultipleDropdown.svelte
@@ -19,18 +19,18 @@
 
 <Dropdown
   titleText="Primary contact"
-  bind:selectedId="{dropdown1_selectedId}"
-  items="{items}"
+  bind:selectedId={dropdown1_selectedId}
+  {items}
 />
 
 <div>Primary: {primary}</div>
 
 <Dropdown
-  invalid="{dropdown1_selectedId === dropdown2_selectedId}"
+  invalid={dropdown1_selectedId === dropdown2_selectedId}
   invalidText="Secondary contact method must be different from the primary contact"
   titleText="Secondary contact"
-  bind:selectedId="{dropdown2_selectedId}"
-  items="{items}"
+  bind:selectedId={dropdown2_selectedId}
+  {items}
 />
 
 <div>Secondary: {secondary}</div>
diff --git a/docs/src/pages/framed/FileUploader/FileUploaderClearFiles.svelte b/docs/src/pages/framed/FileUploader/FileUploaderClearFiles.svelte
index 9b6aba34..8f139ed1 100644
--- a/docs/src/pages/framed/FileUploader/FileUploaderClearFiles.svelte
+++ b/docs/src/pages/framed/FileUploader/FileUploaderClearFiles.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <FileUploader
-  bind:this="{fileUploader}"
+  bind:this={fileUploader}
   multiple
   labelTitle="Upload files"
   buttonLabel="Add files"
@@ -18,15 +18,11 @@
 
 <Button
   kind="tertiary"
-  disabled="{!files.length}"
-  on:click="{fileUploader.clearFiles}"
+  disabled={!files.length}
+  on:click={fileUploader.clearFiles}
 >
   Clear (programmatic)
 </Button>
-<Button
-  kind="tertiary"
-  disabled="{!files.length}"
-  on:click="{() => (files = [])}"
->
+<Button kind="tertiary" disabled={!files.length} on:click={() => (files = [])}>
   Clear (two-way binding)
 </Button>
diff --git a/docs/src/pages/framed/FluidForm/FluidFormInvalid.svelte b/docs/src/pages/framed/FluidForm/FluidFormInvalid.svelte
index caabd8dc..10e69760 100644
--- a/docs/src/pages/framed/FluidForm/FluidFormInvalid.svelte
+++ b/docs/src/pages/framed/FluidForm/FluidFormInvalid.svelte
@@ -14,8 +14,8 @@
 <FluidForm>
   <TextInput labelText="User name" placeholder="Enter user name..." required />
   <PasswordInput
-    bind:value="{password}"
-    invalid="{invalid}"
+    bind:value={password}
+    {invalid}
     invalidText="Your password must be at least 6 characters as well as contain at least one uppercase, one lowercase, and one number."
     required
     type="password"
diff --git a/docs/src/pages/framed/Grid/OffsetColumns.svelte b/docs/src/pages/framed/Grid/OffsetColumns.svelte
index 3aa8f1c6..0df78e3f 100644
--- a/docs/src/pages/framed/Grid/OffsetColumns.svelte
+++ b/docs/src/pages/framed/Grid/OffsetColumns.svelte
@@ -4,9 +4,9 @@
 
 <Grid>
   <Row>
-    <Column sm="{{ span: 1, offset: 3 }}">Offset 3</Column>
-    <Column sm="{{ span: 2, offset: 2 }}">Offset 2</Column>
-    <Column sm="{{ span: 3, offset: 1 }}">Offset 1</Column>
-    <Column sm="{{ span: 4, offset: 0 }}">Offset 0</Column>
+    <Column sm={{ span: 1, offset: 3 }}>Offset 3</Column>
+    <Column sm={{ span: 2, offset: 2 }}>Offset 2</Column>
+    <Column sm={{ span: 3, offset: 1 }}>Offset 1</Column>
+    <Column sm={{ span: 4, offset: 0 }}>Offset 0</Column>
   </Row>
 </Grid>
diff --git a/docs/src/pages/framed/Grid/ResponsiveGrid.svelte b/docs/src/pages/framed/Grid/ResponsiveGrid.svelte
index a60004b4..09b13bb2 100644
--- a/docs/src/pages/framed/Grid/ResponsiveGrid.svelte
+++ b/docs/src/pages/framed/Grid/ResponsiveGrid.svelte
@@ -4,9 +4,9 @@
 
 <Grid>
   <Row>
-    <Column sm="{1}" md="{4}" lg="{8}">sm: 1, md: 4, lg: 8</Column>
-    <Column sm="{1}" md="{2}" lg="{2}">sm: 1, md: 2, lg: 2</Column>
-    <Column sm="{1}" md="{1}" lg="{1}">sm: 1, md: 1, lg: 1</Column>
-    <Column sm="{1}" md="{1}" lg="{1}">sm: 1, md: 1, lg: 1</Column>
+    <Column sm={1} md={4} lg={8}>sm: 1, md: 4, lg: 8</Column>
+    <Column sm={1} md={2} lg={2}>sm: 1, md: 2, lg: 2</Column>
+    <Column sm={1} md={1} lg={1}>sm: 1, md: 1, lg: 1</Column>
+    <Column sm={1} md={1} lg={1}>sm: 1, md: 1, lg: 1</Column>
   </Row>
 </Grid>
diff --git a/docs/src/pages/framed/ImageLoader/DynamicImageLoader.svelte b/docs/src/pages/framed/ImageLoader/DynamicImageLoader.svelte
index 134bd3b6..4075f3e8 100644
--- a/docs/src/pages/framed/ImageLoader/DynamicImageLoader.svelte
+++ b/docs/src/pages/framed/ImageLoader/DynamicImageLoader.svelte
@@ -13,13 +13,13 @@
 
 <Button
   kind="ghost"
-  on:click="{() => {
+  on:click={() => {
     index = index === 0 ? 1 : 0;
-  }}"
+  }}
 >
   Toggle image
 </Button>
 
 <div style:margin-top="1rem" style:width="100%" style:max-width="120px">
-  <ImageLoader ratio="1x1" fadeIn src="{src}" alt="{src}" />
+  <ImageLoader ratio="1x1" fadeIn {src} alt={src} />
 </div>
diff --git a/docs/src/pages/framed/ImageLoader/ProgrammaticImageLoader.svelte b/docs/src/pages/framed/ImageLoader/ProgrammaticImageLoader.svelte
index dab9501e..4146b577 100644
--- a/docs/src/pages/framed/ImageLoader/ProgrammaticImageLoader.svelte
+++ b/docs/src/pages/framed/ImageLoader/ProgrammaticImageLoader.svelte
@@ -11,15 +11,15 @@
 
 <Button
   kind="ghost"
-  disabled="{!imageLoader || error}"
-  on:click="{() => imageLoader.loadImage(srcError)}"
+  disabled={!imageLoader || error}
+  on:click={() => imageLoader.loadImage(srcError)}
 >
   Simulate error
 </Button>
 
-<ImageLoader bind:this="{imageLoader}" bind:error fadeIn src="{src}">
+<ImageLoader bind:this={imageLoader} bind:error fadeIn {src}>
   <svelte:fragment slot="error">
-    <Button kind="ghost" on:click="{() => imageLoader.loadImage(src)}">
+    <Button kind="ghost" on:click={() => imageLoader.loadImage(src)}>
       Error. Try again
     </Button>
   </svelte:fragment>
diff --git a/docs/src/pages/framed/InlineLoading/InlineLoadingUx.svelte b/docs/src/pages/framed/InlineLoading/InlineLoadingUx.svelte
index 7eac3445..5829bc7d 100644
--- a/docs/src/pages/framed/InlineLoading/InlineLoadingUx.svelte
+++ b/docs/src/pages/framed/InlineLoading/InlineLoadingUx.svelte
@@ -37,14 +37,14 @@
 <ButtonSet>
   <Button
     kind="ghost"
-    disabled="{state === 'dormant' || state === 'finished'}"
-    on:click="{() => (state = 'inactive')}"
+    disabled={state === "dormant" || state === "finished"}
+    on:click={() => (state = "inactive")}
   >
     Cancel
   </Button>
   {#if state !== "dormant"}
-    <InlineLoading status="{state}" description="{descriptionMap[state]}" />
+    <InlineLoading status={state} description={descriptionMap[state]} />
   {:else}
-    <Button on:click="{() => (state = 'active')}">Submit</Button>
+    <Button on:click={() => (state = "active")}>Submit</Button>
   {/if}
 </ButtonSet>
diff --git a/docs/src/pages/framed/LocalStorage/LocalStorage.svelte b/docs/src/pages/framed/LocalStorage/LocalStorage.svelte
index e1e11e30..9c0917c6 100644
--- a/docs/src/pages/framed/LocalStorage/LocalStorage.svelte
+++ b/docs/src/pages/framed/LocalStorage/LocalStorage.svelte
@@ -9,13 +9,13 @@
 
 <LocalStorage
   key="dark-mode"
-  bind:value="{toggled}"
-  on:save="{() => {
-    events = [...events, { event: 'on:save' }];
-  }}"
-  on:update="{({ detail }) => {
-    events = [...events, { event: 'on:update', detail }];
-  }}"
+  bind:value={toggled}
+  on:save={() => {
+    events = [...events, { event: "on:save" }];
+  }}
+  on:update={({ detail }) => {
+    events = [...events, { event: "on:update", detail }];
+  }}
 />
 
 <Toggle size="sm" labelText="Dark mode" bind:toggled />
diff --git a/docs/src/pages/framed/LocalStorage/LocalStorageClear.svelte b/docs/src/pages/framed/LocalStorage/LocalStorageClear.svelte
index c3dad5e4..09284410 100644
--- a/docs/src/pages/framed/LocalStorage/LocalStorageClear.svelte
+++ b/docs/src/pages/framed/LocalStorage/LocalStorageClear.svelte
@@ -7,11 +7,11 @@
   $: document.documentElement.setAttribute("theme", toggled ? "g100" : "white");
 </script>
 
-<LocalStorage bind:this="{storage}" bind:value="{toggled}" />
+<LocalStorage bind:this={storage} bind:value={toggled} />
 
 <Toggle size="sm" labelText="Dark mode" bind:toggled />
 
 <br />
 <br />
 
-<Button size="small" on:click="{storage.clearAll}">Clear storage</Button>
+<Button size="small" on:click={storage.clearAll}>Clear storage</Button>
diff --git a/docs/src/pages/framed/Modal/3ButtonComposedModal.svelte b/docs/src/pages/framed/Modal/3ButtonComposedModal.svelte
index f53b5a31..1205de23 100644
--- a/docs/src/pages/framed/Modal/3ButtonComposedModal.svelte
+++ b/docs/src/pages/framed/Modal/3ButtonComposedModal.svelte
@@ -12,20 +12,20 @@
   let checked = false;
 </script>
 
-<Button on:click="{() => (open = true)}">Review changes</Button>
+<Button on:click={() => (open = true)}>Review changes</Button>
 
-<ComposedModal bind:open on:submit="{() => (open = false)}">
+<ComposedModal bind:open on:submit={() => (open = false)}>
   <ModalHeader label="Changes" title="Confirm changes" />
   <ModalBody hasForm>
     <Checkbox labelText="I have reviewed the changes" bind:checked />
   </ModalBody>
   <ModalFooter
     primaryButtonText="Proceed"
-    primaryButtonDisabled="{!checked}"
-    secondaryButtons="{[{ text: 'Cancel' }, { text: 'Review' }]}"
-    on:click:button--secondary="{({ detail }) => {
-      if (detail.text === 'Cancel') open = false;
-      if (detail.text === 'Review') console.log('Review');
-    }}"
+    primaryButtonDisabled={!checked}
+    secondaryButtons={[{ text: "Cancel" }, { text: "Review" }]}
+    on:click:button--secondary={({ detail }) => {
+      if (detail.text === "Cancel") open = false;
+      if (detail.text === "Review") console.log("Review");
+    }}
   />
 </ComposedModal>
diff --git a/docs/src/pages/framed/Modal/3ButtonModal.svelte b/docs/src/pages/framed/Modal/3ButtonModal.svelte
index aed0c062..888d77cc 100644
--- a/docs/src/pages/framed/Modal/3ButtonModal.svelte
+++ b/docs/src/pages/framed/Modal/3ButtonModal.svelte
@@ -4,17 +4,17 @@
   let open = false;
 </script>
 
-<Button on:click="{() => (open = true)}">Create database</Button>
+<Button on:click={() => (open = true)}>Create database</Button>
 
 <Modal
   bind:open
   modalHeading="Create database"
   primaryButtonText="Confirm"
-  secondaryButtons="{[{ text: 'Cancel' }, { text: 'Edit' }]}"
-  on:click:button--secondary="{({ detail }) => {
-    if (detail.text === 'Cancel') open = false;
-    if (detail.text === 'Edit') console.log('Edit');
-  }}"
+  secondaryButtons={[{ text: "Cancel" }, { text: "Edit" }]}
+  on:click:button--secondary={({ detail }) => {
+    if (detail.text === "Cancel") open = false;
+    if (detail.text === "Edit") console.log("Edit");
+  }}
   on:open
   on:close
   on:submit
diff --git a/docs/src/pages/framed/Modal/ComposedModal.svelte b/docs/src/pages/framed/Modal/ComposedModal.svelte
index b3c17f4b..dd2c1779 100644
--- a/docs/src/pages/framed/Modal/ComposedModal.svelte
+++ b/docs/src/pages/framed/Modal/ComposedModal.svelte
@@ -15,5 +15,5 @@
   <ModalBody hasForm>
     <Checkbox labelText="I have reviewed the changes" bind:checked />
   </ModalBody>
-  <ModalFooter primaryButtonText="Proceed" primaryButtonDisabled="{!checked}" />
+  <ModalFooter primaryButtonText="Proceed" primaryButtonDisabled={!checked} />
 </ComposedModal>
diff --git a/docs/src/pages/framed/Modal/DangerModal.svelte b/docs/src/pages/framed/Modal/DangerModal.svelte
index 877c5c9a..4a2a3616 100644
--- a/docs/src/pages/framed/Modal/DangerModal.svelte
+++ b/docs/src/pages/framed/Modal/DangerModal.svelte
@@ -4,7 +4,7 @@
   let open = false;
 </script>
 
-<Button kind="danger" on:click="{() => (open = true)}">Delete all</Button>
+<Button kind="danger" on:click={() => (open = true)}>Delete all</Button>
 
 <Modal
   danger
@@ -12,7 +12,7 @@
   modalHeading="Delete all instances"
   primaryButtonText="Delete"
   secondaryButtonText="Cancel"
-  on:click:button--secondary="{() => (open = false)}"
+  on:click:button--secondary={() => (open = false)}
   on:open
   on:close
   on:submit
diff --git a/docs/src/pages/framed/Modal/Modal.svelte b/docs/src/pages/framed/Modal/Modal.svelte
index 0b80b0be..86e96ff6 100644
--- a/docs/src/pages/framed/Modal/Modal.svelte
+++ b/docs/src/pages/framed/Modal/Modal.svelte
@@ -4,14 +4,14 @@
   let open = false;
 </script>
 
-<Button on:click="{() => (open = true)}">Create database</Button>
+<Button on:click={() => (open = true)}>Create database</Button>
 
 <Modal
   bind:open
   modalHeading="Create database"
   primaryButtonText="Confirm"
   secondaryButtonText="Cancel"
-  on:click:button--secondary="{() => (open = false)}"
+  on:click:button--secondary={() => (open = false)}
   on:open
   on:close
   on:submit
diff --git a/docs/src/pages/framed/Modal/ModalButtonWithIcon.svelte b/docs/src/pages/framed/Modal/ModalButtonWithIcon.svelte
index cf69f2ab..a2bb8588 100644
--- a/docs/src/pages/framed/Modal/ModalButtonWithIcon.svelte
+++ b/docs/src/pages/framed/Modal/ModalButtonWithIcon.svelte
@@ -5,13 +5,13 @@
   let open = false;
 </script>
 
-<Button on:click="{() => (open = true)}">Create database</Button>
+<Button on:click={() => (open = true)}>Create database</Button>
 
 <Modal
   bind:open
   modalHeading="Invite someone"
   primaryButtonText="Send invitation"
-  primaryButtonIcon="{Send}"
+  primaryButtonIcon={Send}
   secondaryButtonText="Cancel"
 >
   <p>Do you really want to invite someone?</p>
diff --git a/docs/src/pages/framed/Modal/ModalCustomFocus.svelte b/docs/src/pages/framed/Modal/ModalCustomFocus.svelte
index ea37142a..df43257d 100644
--- a/docs/src/pages/framed/Modal/ModalCustomFocus.svelte
+++ b/docs/src/pages/framed/Modal/ModalCustomFocus.svelte
@@ -4,7 +4,7 @@
   let open = false;
 </script>
 
-<Button on:click="{() => (open = true)}">Create database</Button>
+<Button on:click={() => (open = true)}>Create database</Button>
 
 <Modal
   bind:open
@@ -12,7 +12,7 @@
   primaryButtonText="Confirm"
   secondaryButtonText="Cancel"
   selectorPrimaryFocus="#db-name"
-  on:click:button--secondary="{() => (open = false)}"
+  on:click:button--secondary={() => (open = false)}
   on:open
   on:close
   on:submit
diff --git a/docs/src/pages/framed/Modal/ModalExtraSmall.svelte b/docs/src/pages/framed/Modal/ModalExtraSmall.svelte
index 2c78917f..0b20556d 100644
--- a/docs/src/pages/framed/Modal/ModalExtraSmall.svelte
+++ b/docs/src/pages/framed/Modal/ModalExtraSmall.svelte
@@ -4,7 +4,7 @@
   let open = false;
 </script>
 
-<Button on:click="{() => (open = true)}">Create database</Button>
+<Button on:click={() => (open = true)}>Create database</Button>
 
 <Modal
   size="xs"
diff --git a/docs/src/pages/framed/Modal/ModalLarge.svelte b/docs/src/pages/framed/Modal/ModalLarge.svelte
index 73a4ac4e..2f1eeebb 100644
--- a/docs/src/pages/framed/Modal/ModalLarge.svelte
+++ b/docs/src/pages/framed/Modal/ModalLarge.svelte
@@ -4,7 +4,7 @@
   let open = false;
 </script>
 
-<Button on:click="{() => (open = true)}">Create database</Button>
+<Button on:click={() => (open = true)}>Create database</Button>
 
 <Modal
   size="lg"
diff --git a/docs/src/pages/framed/Modal/ModalMultiple.svelte b/docs/src/pages/framed/Modal/ModalMultiple.svelte
index 97a0e292..f0af2b29 100644
--- a/docs/src/pages/framed/Modal/ModalMultiple.svelte
+++ b/docs/src/pages/framed/Modal/ModalMultiple.svelte
@@ -5,17 +5,17 @@
   let openDelete = false;
 </script>
 
-<Button on:click="{() => (openCreate = true)}">Create database</Button>
-<Button kind="danger-tertiary" on:click="{() => (openDelete = true)}">
+<Button on:click={() => (openCreate = true)}>Create database</Button>
+<Button kind="danger-tertiary" on:click={() => (openDelete = true)}>
   Delete database
 </Button>
 
 <Modal
-  bind:open="{openCreate}"
+  bind:open={openCreate}
   modalHeading="Create database"
   primaryButtonText="Confirm"
   secondaryButtonText="Cancel"
-  on:click:button--secondary="{() => (openCreate = false)}"
+  on:click:button--secondary={() => (openCreate = false)}
   on:open
   on:close
   on:submit
@@ -25,11 +25,11 @@
 
 <Modal
   danger
-  bind:open="{openDelete}"
+  bind:open={openDelete}
   modalHeading="Delete database"
   primaryButtonText="Delete"
   secondaryButtonText="Cancel"
-  on:click:button--secondary="{() => (openDelete = false)}"
+  on:click:button--secondary={() => (openDelete = false)}
   on:open
   on:close
   on:submit
diff --git a/docs/src/pages/framed/Modal/ModalPreventOutsideClick.svelte b/docs/src/pages/framed/Modal/ModalPreventOutsideClick.svelte
index 64f09dc9..b4cd4fb2 100644
--- a/docs/src/pages/framed/Modal/ModalPreventOutsideClick.svelte
+++ b/docs/src/pages/framed/Modal/ModalPreventOutsideClick.svelte
@@ -4,7 +4,7 @@
   let open = false;
 </script>
 
-<Button on:click="{() => (open = true)}">Create database</Button>
+<Button on:click={() => (open = true)}>Create database</Button>
 
 <Modal
   preventCloseOnClickOutside
diff --git a/docs/src/pages/framed/Modal/ModalScrollingContent.svelte b/docs/src/pages/framed/Modal/ModalScrollingContent.svelte
index 5f77745b..14ecbb9a 100644
--- a/docs/src/pages/framed/Modal/ModalScrollingContent.svelte
+++ b/docs/src/pages/framed/Modal/ModalScrollingContent.svelte
@@ -4,7 +4,7 @@
   let open = false;
 </script>
 
-<Button on:click="{() => (open = true)}">Create database</Button>
+<Button on:click={() => (open = true)}>Create database</Button>
 
 <Modal bind:open passiveModal modalHeading="About Cloudant" hasScrollingContent>
   <p>
diff --git a/docs/src/pages/framed/Modal/ModalSmall.svelte b/docs/src/pages/framed/Modal/ModalSmall.svelte
index d28fca07..9c5463cc 100644
--- a/docs/src/pages/framed/Modal/ModalSmall.svelte
+++ b/docs/src/pages/framed/Modal/ModalSmall.svelte
@@ -4,7 +4,7 @@
   let open = false;
 </script>
 
-<Button on:click="{() => (open = true)}">Create database</Button>
+<Button on:click={() => (open = true)}>Create database</Button>
 
 <Modal
   size="sm"
diff --git a/docs/src/pages/framed/Modal/PassiveModal.svelte b/docs/src/pages/framed/Modal/PassiveModal.svelte
index e610db7d..a2be1f90 100644
--- a/docs/src/pages/framed/Modal/PassiveModal.svelte
+++ b/docs/src/pages/framed/Modal/PassiveModal.svelte
@@ -4,7 +4,7 @@
   let open = false;
 </script>
 
-<Button kind="tertiary" on:click="{() => (open = true)}">Learn more</Button>
+<Button kind="tertiary" on:click={() => (open = true)}>Learn more</Button>
 
 <Modal passiveModal bind:open modalHeading="IBM Cloudant" on:open on:close>
   <p>
diff --git a/docs/src/pages/framed/MultiSelect/MultiSelectSlot.svelte b/docs/src/pages/framed/MultiSelect/MultiSelectSlot.svelte
index 96d591b0..a745294f 100644
--- a/docs/src/pages/framed/MultiSelect/MultiSelectSlot.svelte
+++ b/docs/src/pages/framed/MultiSelect/MultiSelectSlot.svelte
@@ -5,11 +5,11 @@
 <MultiSelect
   titleText="Contact"
   label="Select contact methods..."
-  items="{[
-    { id: '0', text: 'Slack' },
-    { id: '1', text: 'Email' },
-    { id: '2', text: 'Fax' },
-  ]}"
+  items={[
+    { id: "0", text: "Slack" },
+    { id: "1", text: "Email" },
+    { id: "2", text: "Fax" },
+  ]}
   let:item
   let:index
 >
diff --git a/docs/src/pages/framed/MultiSelect/MultipleMultiSelect.svelte b/docs/src/pages/framed/MultiSelect/MultipleMultiSelect.svelte
index b1c8c3b3..78150a0e 100644
--- a/docs/src/pages/framed/MultiSelect/MultipleMultiSelect.svelte
+++ b/docs/src/pages/framed/MultiSelect/MultipleMultiSelect.svelte
@@ -21,18 +21,18 @@
 
 <MultiSelect
   titleText="Primary contact"
-  bind:selectedIds="{multiselect1_selectedIds}"
+  bind:selectedIds={multiselect1_selectedIds}
   label="Select contact methods..."
-  items="{items}"
+  {items}
 />
 
 <div>Primary: {primary}</div>
 
 <MultiSelect
   titleText="Secondary contact"
-  bind:selectedIds="{multiselect2_selectedIds}"
+  bind:selectedIds={multiselect2_selectedIds}
   label="Select contact methods..."
-  items="{items}"
+  {items}
 />
 
 <div>Secondary: {secondary}</div>
diff --git a/docs/src/pages/framed/NumberInput/NumberInputEmpty.svelte b/docs/src/pages/framed/NumberInput/NumberInputEmpty.svelte
index cc76a330..50e994f0 100644
--- a/docs/src/pages/framed/NumberInput/NumberInputEmpty.svelte
+++ b/docs/src/pages/framed/NumberInput/NumberInputEmpty.svelte
@@ -7,8 +7,8 @@
 <NumberInput allowEmpty bind:value />
 
 <div style="margin: var(--cds-layout-01) 0">
-  <Button on:click="{() => (value = null)}">Set to null</Button>
-  <Button on:click="{() => (value = 0)}">Set to 0</Button>
+  <Button on:click={() => (value = null)}>Set to null</Button>
+  <Button on:click={() => (value = 0)}>Set to 0</Button>
 </div>
 
 <strong>Value:</strong>
diff --git a/docs/src/pages/framed/PaginationNav/PaginationNavReactive.svelte b/docs/src/pages/framed/PaginationNav/PaginationNavReactive.svelte
index c8e51b10..f97e27df 100644
--- a/docs/src/pages/framed/PaginationNav/PaginationNavReactive.svelte
+++ b/docs/src/pages/framed/PaginationNav/PaginationNavReactive.svelte
@@ -7,7 +7,7 @@
 <PaginationNav bind:page />
 
 <div style="margin: var(--cds-layout-01) 0">
-  <Button on:click="{() => (page = 1)}" disabled="{page === 0}">
+  <Button on:click={() => (page = 1)} disabled={page === 0}>
     Set page to 1
   </Button>
 </div>
diff --git a/docs/src/pages/framed/Popover/WithButton.svelte b/docs/src/pages/framed/Popover/WithButton.svelte
index 6b3709c7..7ad1edea 100644
--- a/docs/src/pages/framed/Popover/WithButton.svelte
+++ b/docs/src/pages/framed/Popover/WithButton.svelte
@@ -5,15 +5,15 @@
   let ref = null;
 </script>
 
-<div bind:this="{ref}" style:position="relative">
-  <Button on:click="{() => (open = !open)}">Toggle popover</Button>
+<div bind:this={ref} style:position="relative">
+  <Button on:click={() => (open = !open)}>Toggle popover</Button>
   <Popover
     bind:open
     align="bottom-left"
-    on:click:outside="{({ detail }) => {
-      console.log('on:click:outside');
+    on:click:outside={({ detail }) => {
+      console.log("on:click:outside");
       open = ref.contains(detail.target);
-    }}"
+    }}
   >
     <div style="padding: var(--cds-spacing-05)">Content</div>
   </Popover>
diff --git a/docs/src/pages/framed/ProgressBar/ProgressBarUx.svelte b/docs/src/pages/framed/ProgressBar/ProgressBarUx.svelte
index ff416901..58f1c2cd 100644
--- a/docs/src/pages/framed/ProgressBar/ProgressBarUx.svelte
+++ b/docs/src/pages/framed/ProgressBar/ProgressBarUx.svelte
@@ -13,18 +13,12 @@
   }
 </script>
 
-<ProgressBar
-  labelText="Upload status"
-  value="{value}"
-  max="{max}"
-  helperText="{helperText}"
-  status="{status}"
-/>
+<ProgressBar labelText="Upload status" {value} {max} {helperText} {status} />
 
 <ButtonSet style="margin-top: var(--cds-spacing-08)">
   <Button
-    disabled="{value > 0}"
-    on:click="{() => {
+    disabled={value > 0}
+    on:click={() => {
       const interval = setInterval(() => {
         const delta = Math.random() * 10;
 
@@ -35,17 +29,17 @@
           clearInterval(interval);
         }
       }, 30);
-    }}"
+    }}
   >
     Start
   </Button>
   <Button
     kind="tertiary"
-    disabled="{value !== max}"
-    on:click="{() => {
+    disabled={value !== max}
+    on:click={() => {
       value = 0;
-      status = 'active';
-    }}"
+      status = "active";
+    }}
   >
     Reset
   </Button>
diff --git a/docs/src/pages/framed/ProgressIndicator/ProgrammaticProgressIndicator.svelte b/docs/src/pages/framed/ProgressIndicator/ProgrammaticProgressIndicator.svelte
index f833e346..7060e8ac 100644
--- a/docs/src/pages/framed/ProgressIndicator/ProgrammaticProgressIndicator.svelte
+++ b/docs/src/pages/framed/ProgressIndicator/ProgrammaticProgressIndicator.svelte
@@ -22,7 +22,7 @@
   />
   <ProgressStep
     complete
-    bind:current="{thirdStepCurrent}"
+    bind:current={thirdStepCurrent}
     label="Step 3"
     description="The progress indicator will listen for clicks on the steps"
   />
@@ -34,10 +34,10 @@
 
 <div style="margin: var(--cds-layout-02) 0">
   <Button
-    kind="{currentIndex === 2 ? 'secondary' : 'primary'}"
-    on:click="{() => {
+    kind={currentIndex === 2 ? "secondary" : "primary"}
+    on:click={() => {
       currentIndex = currentIndex === 2 ? 0 : 2;
-    }}"
+    }}
   >
     Set currentIndex to
     {currentIndex === 2 ? 0 : 2}
diff --git a/docs/src/pages/framed/RadioButton/RadioButtonReactive.svelte b/docs/src/pages/framed/RadioButton/RadioButtonReactive.svelte
index 0de33503..0b780137 100644
--- a/docs/src/pages/framed/RadioButton/RadioButtonReactive.svelte
+++ b/docs/src/pages/framed/RadioButton/RadioButtonReactive.svelte
@@ -13,10 +13,10 @@
 <RadioButtonGroup
   legendText="Storage tier (disk)"
   name="plan"
-  bind:selected="{plan}"
+  bind:selected={plan}
 >
   {#each plans as value (value)}
-    <RadioButton labelText="{value}" value="{value}" />
+    <RadioButton labelText={value} {value} />
   {/each}
 </RadioButtonGroup>
 
@@ -25,8 +25,8 @@
     <Button
       size="small"
       kind="secondary"
-      disabled="{plan === value}"
-      on:click="{() => (plan = value)}"
+      disabled={plan === value}
+      on:click={() => (plan = value)}
     >
       Select "{value}"
     </Button>
diff --git a/docs/src/pages/framed/RadioTile/RadioTileReactive.svelte b/docs/src/pages/framed/RadioTile/RadioTileReactive.svelte
index 839a9e8e..c07c695c 100644
--- a/docs/src/pages/framed/RadioTile/RadioTileReactive.svelte
+++ b/docs/src/pages/framed/RadioTile/RadioTileReactive.svelte
@@ -8,7 +8,7 @@
 
 <TileGroup legend="Service pricing tiers" name="plan" bind:selected>
   {#each values as value}
-    <RadioTile value="{value}">{value}</RadioTile>
+    <RadioTile {value}>{value}</RadioTile>
   {/each}
 </TileGroup>
 
@@ -18,8 +18,8 @@
 
 <Button
   size="small"
-  disabled="{selected === values[1]}"
-  on:click="{() => (selected = values[1])}"
+  disabled={selected === values[1]}
+  on:click={() => (selected = values[1])}
 >
   Set to "{values[1]}"
 </Button>
diff --git a/docs/src/pages/framed/RadioTile/RadioTileReactiveOneWay.svelte b/docs/src/pages/framed/RadioTile/RadioTileReactiveOneWay.svelte
index 727ae996..d67f0b87 100644
--- a/docs/src/pages/framed/RadioTile/RadioTileReactiveOneWay.svelte
+++ b/docs/src/pages/framed/RadioTile/RadioTileReactiveOneWay.svelte
@@ -9,10 +9,10 @@
 <TileGroup
   legend="Service pricing tiers"
   name="plan"
-  on:select="{({ detail }) => (selected = detail)}"
+  on:select={({ detail }) => (selected = detail)}
 >
   {#each values as value}
-    <RadioTile value="{value}" checked="{selected === value}">
+    <RadioTile {value} checked={selected === value}>
       {value}
     </RadioTile>
   {/each}
diff --git a/docs/src/pages/framed/RecursiveList/RecursiveList.svelte b/docs/src/pages/framed/RecursiveList/RecursiveList.svelte
index 8983382d..059c16e6 100644
--- a/docs/src/pages/framed/RecursiveList/RecursiveList.svelte
+++ b/docs/src/pages/framed/RecursiveList/RecursiveList.svelte
@@ -29,4 +29,4 @@
   ];
 </script>
 
-<RecursiveList nodes="{nodes}" />
+<RecursiveList {nodes} />
diff --git a/docs/src/pages/framed/RecursiveList/RecursiveListOrdered.svelte b/docs/src/pages/framed/RecursiveList/RecursiveListOrdered.svelte
index dad01af4..447a2652 100644
--- a/docs/src/pages/framed/RecursiveList/RecursiveListOrdered.svelte
+++ b/docs/src/pages/framed/RecursiveList/RecursiveListOrdered.svelte
@@ -29,4 +29,4 @@
   ];
 </script>
 
-<RecursiveList type="ordered" nodes="{nodes}" />
+<RecursiveList type="ordered" {nodes} />
diff --git a/docs/src/pages/framed/RecursiveList/RecursiveListOrderedNative.svelte b/docs/src/pages/framed/RecursiveList/RecursiveListOrderedNative.svelte
index f5a62957..e72def7c 100644
--- a/docs/src/pages/framed/RecursiveList/RecursiveListOrderedNative.svelte
+++ b/docs/src/pages/framed/RecursiveList/RecursiveListOrderedNative.svelte
@@ -29,4 +29,4 @@
   ];
 </script>
 
-<RecursiveList type="ordered-native" nodes="{nodes}" />
+<RecursiveList type="ordered-native" {nodes} />
diff --git a/docs/src/pages/framed/Search/SearchReactive.svelte b/docs/src/pages/framed/Search/SearchReactive.svelte
index 23dee3dc..918fea74 100644
--- a/docs/src/pages/framed/Search/SearchReactive.svelte
+++ b/docs/src/pages/framed/Search/SearchReactive.svelte
@@ -10,16 +10,16 @@
   <ButtonSet>
     <Button
       size="small"
-      disabled="{value === 'Cloud functions'}"
-      on:click="{() => (value = 'Cloud functions')}"
+      disabled={value === "Cloud functions"}
+      on:click={() => (value = "Cloud functions")}
     >
       Set value
     </Button>
     <Button
       kind="ghost"
       size="small"
-      disabled="{value.length === 0}"
-      on:click="{() => (value = '')}"
+      disabled={value.length === 0}
+      on:click={() => (value = "")}
     >
       Clear value
     </Button>
diff --git a/docs/src/pages/framed/Select/SelectReactive.svelte b/docs/src/pages/framed/Select/SelectReactive.svelte
index e7110169..c0eea9a9 100644
--- a/docs/src/pages/framed/Select/SelectReactive.svelte
+++ b/docs/src/pages/framed/Select/SelectReactive.svelte
@@ -16,6 +16,6 @@
   Selected: <strong>{selected}</strong>
 </div>
 
-<Button disabled="{selected === 'g90'}" on:click="{() => (selected = 'g90')}">
+<Button disabled={selected === "g90"} on:click={() => (selected = "g90")}>
   Set to "g90"
 </Button>
diff --git a/docs/src/pages/framed/Tabs/TabsReactive.svelte b/docs/src/pages/framed/Tabs/TabsReactive.svelte
index c6e5070a..91769024 100644
--- a/docs/src/pages/framed/Tabs/TabsReactive.svelte
+++ b/docs/src/pages/framed/Tabs/TabsReactive.svelte
@@ -16,7 +16,7 @@
 </Tabs>
 
 <div style="margin: var(--cds-layout-01) 0">
-  <Button on:click="{() => (selected = 1)}">Set index to 1</Button>
+  <Button on:click={() => (selected = 1)}>Set index to 1</Button>
 </div>
 
 <strong>Selected index:</strong>
diff --git a/docs/src/pages/framed/Theme/Theme.svelte b/docs/src/pages/framed/Theme/Theme.svelte
index b99cb540..43e78517 100644
--- a/docs/src/pages/framed/Theme/Theme.svelte
+++ b/docs/src/pages/framed/Theme/Theme.svelte
@@ -10,8 +10,8 @@
 
 <Theme bind:theme />
 
-<RadioButtonGroup legendText="Carbon theme" bind:selected="{theme}">
+<RadioButtonGroup legendText="Carbon theme" bind:selected={theme}>
   {#each ["white", "g10", "g80", "g90", "g100"] as value}
-    <RadioButton labelText="{value}" value="{value}" />
+    <RadioButton labelText={value} {value} />
   {/each}
 </RadioButtonGroup>
diff --git a/docs/src/pages/framed/Theme/ThemePersist.svelte b/docs/src/pages/framed/Theme/ThemePersist.svelte
index bd43a91a..9a896e0e 100644
--- a/docs/src/pages/framed/Theme/ThemePersist.svelte
+++ b/docs/src/pages/framed/Theme/ThemePersist.svelte
@@ -10,8 +10,8 @@
 
 <Theme bind:theme persist persistKey="__carbon-theme" />
 
-<RadioButtonGroup legendText="Carbon theme" bind:selected="{theme}">
+<RadioButtonGroup legendText="Carbon theme" bind:selected={theme}>
   {#each ["white", "g10", "g80", "g90", "g100"] as value}
-    <RadioButton labelText="{value}" value="{value}" />
+    <RadioButton labelText={value} {value} />
   {/each}
 </RadioButtonGroup>
diff --git a/docs/src/pages/framed/Theme/ThemeSelectCustom.svelte b/docs/src/pages/framed/Theme/ThemeSelectCustom.svelte
index 0a8ad4b1..414b581b 100644
--- a/docs/src/pages/framed/Theme/ThemeSelectCustom.svelte
+++ b/docs/src/pages/framed/Theme/ThemeSelectCustom.svelte
@@ -4,9 +4,9 @@
 
 <Theme
   render="select"
-  select="{{
-    themes: ['white', 'g90', 'g100'],
-    labelText: 'Select a theme',
+  select={{
+    themes: ["white", "g90", "g100"],
+    labelText: "Select a theme",
     inline: true,
-  }}"
+  }}
 />
diff --git a/docs/src/pages/framed/Theme/ThemeToggleCustom.svelte b/docs/src/pages/framed/Theme/ThemeToggleCustom.svelte
index 635bd7b3..f09075cb 100644
--- a/docs/src/pages/framed/Theme/ThemeToggleCustom.svelte
+++ b/docs/src/pages/framed/Theme/ThemeToggleCustom.svelte
@@ -4,11 +4,11 @@
 
 <Theme
   render="toggle"
-  toggle="{{
-    themes: ['g10', 'g80'],
-    labelA: 'Enable dark mode',
-    labelB: 'Enable dark mode',
+  toggle={{
+    themes: ["g10", "g80"],
+    labelA: "Enable dark mode",
+    labelB: "Enable dark mode",
     hideLabel: true,
-    size: 'sm',
-  }}"
+    size: "sm",
+  }}
 />
diff --git a/docs/src/pages/framed/Theme/ThemeTokens.svelte b/docs/src/pages/framed/Theme/ThemeTokens.svelte
index 3a2b1d2f..80362026 100644
--- a/docs/src/pages/framed/Theme/ThemeTokens.svelte
+++ b/docs/src/pages/framed/Theme/ThemeTokens.svelte
@@ -4,11 +4,11 @@
 
 <Theme
   theme="g90"
-  tokens="{{
-    'interactive-01': '#d02670',
-    'hover-primary': '#ee5396',
-    'active-primary': '#9f1853',
-  }}"
+  tokens={{
+    "interactive-01": "#d02670",
+    "hover-primary": "#ee5396",
+    "active-primary": "#9f1853",
+  }}
 />
 
 <Button>Primary button</Button>
diff --git a/docs/src/pages/framed/ToastNotification/ToastNotificationTimeout.svelte b/docs/src/pages/framed/ToastNotification/ToastNotificationTimeout.svelte
index 547ba581..209a5475 100644
--- a/docs/src/pages/framed/ToastNotification/ToastNotificationTimeout.svelte
+++ b/docs/src/pages/framed/ToastNotification/ToastNotificationTimeout.svelte
@@ -7,10 +7,10 @@
 </script>
 
 <Button
-  disabled="{showNotification}"
-  on:click="{() => {
+  disabled={showNotification}
+  on:click={() => {
     timeout = 3_000; // 3 seconds
-  }}"
+  }}
 >
   Show notification
 </Button>
@@ -18,15 +18,15 @@
 {#if showNotification}
   <div transition:fade>
     <ToastNotification
-      timeout="{timeout}"
+      {timeout}
       kind="success"
       title="Success"
       subtitle="This notification will autoclose in {timeout.toLocaleString()} ms."
-      caption="{new Date().toLocaleString()}"
-      on:close="{(e) => {
+      caption={new Date().toLocaleString()}
+      on:close={(e) => {
         timeout = undefined;
         console.log(e.detail.timeout); // true if closed via timeout
-      }}"
+      }}
     />
   </div>
 {/if}
diff --git a/docs/src/pages/framed/Toggle/ToggleReactive.svelte b/docs/src/pages/framed/Toggle/ToggleReactive.svelte
index 4b88ef14..31649e32 100644
--- a/docs/src/pages/framed/Toggle/ToggleReactive.svelte
+++ b/docs/src/pages/framed/Toggle/ToggleReactive.svelte
@@ -7,7 +7,7 @@
 <Toggle labelText="Push notifications" bind:toggled />
 
 <div>
-  <Button size="small" on:click="{() => (toggled = !toggled)}">
+  <Button size="small" on:click={() => (toggled = !toggled)}>
     Toggle
     {toggled ? "off" : "on"}
   </Button>
diff --git a/docs/src/pages/framed/Tooltip/TooltipReactive.svelte b/docs/src/pages/framed/Tooltip/TooltipReactive.svelte
index 70fa73e3..ea658f94 100644
--- a/docs/src/pages/framed/Tooltip/TooltipReactive.svelte
+++ b/docs/src/pages/framed/Tooltip/TooltipReactive.svelte
@@ -9,7 +9,7 @@
 </Tooltip>
 
 <div style="margin-top: var(--cds-spacing-12);">
-  <Button size="small" on:click="{() => (open = !open)}">
+  <Button size="small" on:click={() => (open = !open)}>
     {open ? "Close tooltip" : "Open tooltip"}
   </Button>
 </div>
diff --git a/docs/src/pages/framed/TreeView/TreeView.svelte b/docs/src/pages/framed/TreeView/TreeView.svelte
index 08079b44..91d994ec 100644
--- a/docs/src/pages/framed/TreeView/TreeView.svelte
+++ b/docs/src/pages/framed/TreeView/TreeView.svelte
@@ -47,12 +47,12 @@
 
 <TreeView
   labelText="Cloud Products"
-  nodes="{nodes}"
+  {nodes}
   bind:activeId
   bind:selectedIds
-  on:select="{({ detail }) => console.log('select', detail)}"
-  on:toggle="{({ detail }) => console.log('toggle', detail)}"
-  on:focus="{({ detail }) => console.log('focus', detail)}"
+  on:select={({ detail }) => console.log("select", detail)}
+  on:toggle={({ detail }) => console.log("toggle", detail)}
+  on:focus={({ detail }) => console.log("focus", detail)}
 />
 
 <div>Active node id: {activeId}</div>
diff --git a/docs/src/pages/framed/TreeView/TreeViewActive.svelte b/docs/src/pages/framed/TreeView/TreeViewActive.svelte
index 4f856401..4831b718 100644
--- a/docs/src/pages/framed/TreeView/TreeViewActive.svelte
+++ b/docs/src/pages/framed/TreeView/TreeViewActive.svelte
@@ -47,12 +47,12 @@
 
 <TreeView
   labelText="Cloud Products"
-  nodes="{nodes}"
+  {nodes}
   bind:activeId
   bind:selectedIds
-  on:select="{({ detail }) => console.log('select', detail)}"
-  on:toggle="{({ detail }) => console.log('toggle', detail)}"
-  on:focus="{({ detail }) => console.log('focus', detail)}"
+  on:select={({ detail }) => console.log("select", detail)}
+  on:toggle={({ detail }) => console.log("toggle", detail)}
+  on:focus={({ detail }) => console.log("focus", detail)}
 />
 
 <div>Active node id: {activeId}</div>
diff --git a/docs/src/pages/framed/TreeView/TreeViewCollapseAll.svelte b/docs/src/pages/framed/TreeView/TreeViewCollapseAll.svelte
index bb113457..00053737 100644
--- a/docs/src/pages/framed/TreeView/TreeViewCollapseAll.svelte
+++ b/docs/src/pages/framed/TreeView/TreeViewCollapseAll.svelte
@@ -46,14 +46,14 @@
 </script>
 
 <div>
-  <Button on:click="{treeview?.collapseAll}">Collapse all</Button>
+  <Button on:click={treeview?.collapseAll}>Collapse all</Button>
 </div>
 
 <TreeView
-  bind:this="{treeview}"
+  bind:this={treeview}
   bind:expandedIds
   labelText="Cloud Products"
-  nodes="{nodes}"
+  {nodes}
 />
 
 <style>
diff --git a/docs/src/pages/framed/TreeView/TreeViewCollapseNodes.svelte b/docs/src/pages/framed/TreeView/TreeViewCollapseNodes.svelte
index 8ab0e8f2..d94919da 100644
--- a/docs/src/pages/framed/TreeView/TreeViewCollapseNodes.svelte
+++ b/docs/src/pages/framed/TreeView/TreeViewCollapseNodes.svelte
@@ -49,19 +49,19 @@
 
 <div>
   <Button
-    on:click="{() => {
+    on:click={() => {
       treeview?.collapseNodes((node) => node.disabled);
-    }}"
+    }}
   >
     Collapse disabled nodes
   </Button>
 </div>
 
 <TreeView
-  bind:this="{treeview}"
+  bind:this={treeview}
   bind:expandedIds
   labelText="Cloud Products"
-  nodes="{nodes}"
+  {nodes}
 />
 
 <style>
diff --git a/docs/src/pages/framed/TreeView/TreeViewCompact.svelte b/docs/src/pages/framed/TreeView/TreeViewCompact.svelte
index 6072c831..1e06dd08 100644
--- a/docs/src/pages/framed/TreeView/TreeViewCompact.svelte
+++ b/docs/src/pages/framed/TreeView/TreeViewCompact.svelte
@@ -48,12 +48,12 @@
 <TreeView
   size="compact"
   labelText="Cloud Products"
-  nodes="{nodes}"
+  {nodes}
   bind:activeId
   bind:selectedIds
-  on:select="{({ detail }) => console.log('select', detail)}"
-  on:toggle="{({ detail }) => console.log('toggle', detail)}"
-  on:focus="{({ detail }) => console.log('focus', detail)}"
+  on:select={({ detail }) => console.log("select", detail)}
+  on:toggle={({ detail }) => console.log("toggle", detail)}
+  on:focus={({ detail }) => console.log("focus", detail)}
 />
 
 <div>Active node id: {activeId}</div>
diff --git a/docs/src/pages/framed/TreeView/TreeViewExpandAll.svelte b/docs/src/pages/framed/TreeView/TreeViewExpandAll.svelte
index b382bf18..e799e95b 100644
--- a/docs/src/pages/framed/TreeView/TreeViewExpandAll.svelte
+++ b/docs/src/pages/framed/TreeView/TreeViewExpandAll.svelte
@@ -45,14 +45,10 @@
 </script>
 
 <div>
-  <Button on:click="{treeview?.expandAll}">Expand all</Button>
+  <Button on:click={treeview?.expandAll}>Expand all</Button>
 </div>
 
-<TreeView
-  bind:this="{treeview}"
-  labelText="Cloud Products"
-  nodes="{nodes}"
-/>
+<TreeView bind:this={treeview} labelText="Cloud Products" {nodes} />
 
 <style>
   div {
diff --git a/docs/src/pages/framed/TreeView/TreeViewExpandNodes.svelte b/docs/src/pages/framed/TreeView/TreeViewExpandNodes.svelte
index 369aa20c..2dd17b99 100644
--- a/docs/src/pages/framed/TreeView/TreeViewExpandNodes.svelte
+++ b/docs/src/pages/framed/TreeView/TreeViewExpandNodes.svelte
@@ -46,19 +46,15 @@
 
 <div>
   <Button
-    on:click="{() => {
+    on:click={() => {
       treeview?.expandNodes((node) => /^IBM/.test(node.text));
-    }}"
+    }}
   >
     Expand nodes starting with "IBM"
   </Button>
 </div>
 
-<TreeView
-  bind:this="{treeview}"
-  labelText="Cloud Products"
-  nodes="{nodes}"
-/>
+<TreeView bind:this={treeview} labelText="Cloud Products" {nodes} />
 
 <style>
   div {
diff --git a/docs/src/pages/framed/TreeView/TreeViewExpanded.svelte b/docs/src/pages/framed/TreeView/TreeViewExpanded.svelte
index ba63b6b5..a5149bc4 100644
--- a/docs/src/pages/framed/TreeView/TreeViewExpanded.svelte
+++ b/docs/src/pages/framed/TreeView/TreeViewExpanded.svelte
@@ -48,13 +48,13 @@
 
 <TreeView
   labelText="Cloud Products"
-  nodes="{nodes}"
+  {nodes}
   bind:activeId
   bind:selectedIds
   bind:expandedIds
-  on:select="{({ detail }) => console.log('select', detail)}"
-  on:toggle="{({ detail }) => console.log('toggle', detail)}"
-  on:focus="{({ detail }) => console.log('focus', detail)}"
+  on:select={({ detail }) => console.log("select", detail)}
+  on:toggle={({ detail }) => console.log("toggle", detail)}
+  on:focus={({ detail }) => console.log("focus", detail)}
 />
 
 <div>Active node id: {activeId}</div>
diff --git a/docs/src/pages/framed/TreeView/TreeViewIcons.svelte b/docs/src/pages/framed/TreeView/TreeViewIcons.svelte
index 0db84209..5c290861 100644
--- a/docs/src/pages/framed/TreeView/TreeViewIcons.svelte
+++ b/docs/src/pages/framed/TreeView/TreeViewIcons.svelte
@@ -76,12 +76,12 @@
 
 <TreeView
   labelText="Cloud Products"
-  nodes="{nodes}"
+  {nodes}
   bind:activeId
   bind:selectedIds
-  on:select="{({ detail }) => console.log('select', detail)}"
-  on:toggle="{({ detail }) => console.log('toggle', detail)}"
-  on:focus="{({ detail }) => console.log('focus', detail)}"
+  on:select={({ detail }) => console.log("select", detail)}
+  on:toggle={({ detail }) => console.log("toggle", detail)}
+  on:focus={({ detail }) => console.log("focus", detail)}
 />
 
 <div>Active node id: {activeId}</div>
diff --git a/docs/src/pages/framed/TreeView/TreeViewMultiselect.svelte b/docs/src/pages/framed/TreeView/TreeViewMultiselect.svelte
index 5457950e..51212f7c 100644
--- a/docs/src/pages/framed/TreeView/TreeViewMultiselect.svelte
+++ b/docs/src/pages/framed/TreeView/TreeViewMultiselect.svelte
@@ -47,12 +47,12 @@
 
 <TreeView
   labelText="Cloud Products"
-  nodes="{nodes}"
+  {nodes}
   bind:activeId
   bind:selectedIds
-  on:select="{({ detail }) => console.log('select', detail)}"
-  on:toggle="{({ detail }) => console.log('toggle', detail)}"
-  on:focus="{({ detail }) => console.log('focus', detail)}"
+  on:select={({ detail }) => console.log("select", detail)}
+  on:toggle={({ detail }) => console.log("toggle", detail)}
+  on:focus={({ detail }) => console.log("focus", detail)}
 />
 
 <div>Active node id: {activeId}</div>
diff --git a/docs/src/pages/framed/TreeView/TreeViewShowNode.svelte b/docs/src/pages/framed/TreeView/TreeViewShowNode.svelte
index e824574f..8969f580 100644
--- a/docs/src/pages/framed/TreeView/TreeViewShowNode.svelte
+++ b/docs/src/pages/framed/TreeView/TreeViewShowNode.svelte
@@ -31,19 +31,14 @@
 <ButtonSet style="margin-bottom: var(--cds-spacing-05)">
   {#each [nodeSpark, nodeBlockchain] as { id, text }}
     <Button
-      on:click="{() => {
+      on:click={() => {
         treeview?.showNode(id);
-      }}"
+      }}
     >
       Show "{text}"
     </Button>
   {/each}
-  <Button kind="tertiary" on:click="{treeview.collapseAll}">Collapse all</Button
-  >
+  <Button kind="tertiary" on:click={treeview.collapseAll}>Collapse all</Button>
 </ButtonSet>
 
-<TreeView
-  bind:this="{treeview}"
-  labelText="Cloud Products"
-  nodes="{nodes}"
-/>
+<TreeView bind:this={treeview} labelText="Cloud Products" {nodes} />
diff --git a/docs/src/pages/framed/TreeView/TreeViewSlot.svelte b/docs/src/pages/framed/TreeView/TreeViewSlot.svelte
index b1159ca4..81b3d6d3 100644
--- a/docs/src/pages/framed/TreeView/TreeViewSlot.svelte
+++ b/docs/src/pages/framed/TreeView/TreeViewSlot.svelte
@@ -45,16 +45,10 @@
   ];
 </script>
 
-<TreeView
-  labelText="Cloud Products"
-  activeId="{activeId}"
-  selectedIds="{selectedIds}"
-  nodes="{nodes}"
-  let:node
->
+<TreeView labelText="Cloud Products" {activeId} {selectedIds} {nodes} let:node>
   <span
-    style:color="{node.selected ? "var(--cds-interactive-04)" : "inherit"}"
-    style:text-decoration="{node.disabled ? "inherit" : "underline"}"
+    style:color={node.selected ? "var(--cds-interactive-04)" : "inherit"}
+    style:text-decoration={node.disabled ? "inherit" : "underline"}
   >
     {node.text} (id: {node.id})
   </span>
diff --git a/docs/src/pages/framed/UIShell/HeaderNav.svelte b/docs/src/pages/framed/UIShell/HeaderNav.svelte
index 0f8024a3..b6c8dc8a 100644
--- a/docs/src/pages/framed/UIShell/HeaderNav.svelte
+++ b/docs/src/pages/framed/UIShell/HeaderNav.svelte
@@ -37,7 +37,7 @@
   </HeaderNav>
 </Header>
 
-<SideNav bind:isOpen="{isSideNavOpen}">
+<SideNav bind:isOpen={isSideNavOpen}>
   <SideNavItems>
     <SideNavLink text="Link 1" />
     <SideNavLink text="Link 2" />
diff --git a/docs/src/pages/framed/UIShell/HeaderNavRail.svelte b/docs/src/pages/framed/UIShell/HeaderNavRail.svelte
index dbd7fb87..0341d1a6 100644
--- a/docs/src/pages/framed/UIShell/HeaderNavRail.svelte
+++ b/docs/src/pages/framed/UIShell/HeaderNavRail.svelte
@@ -38,18 +38,18 @@
   </HeaderNav>
 </Header>
 
-<SideNav bind:isOpen="{isSideNavOpen}" rail>
+<SideNav bind:isOpen={isSideNavOpen} rail>
   <SideNavItems>
-    <SideNavLink icon="{Fade}" text="Link 1" href="/" isSelected />
-    <SideNavLink icon="{Fade}" text="Link 2" href="/" />
-    <SideNavLink icon="{Fade}" text="Link 3" href="/" />
-    <SideNavMenu icon="{Fade}" text="Menu">
+    <SideNavLink icon={Fade} text="Link 1" href="/" isSelected />
+    <SideNavLink icon={Fade} text="Link 2" href="/" />
+    <SideNavLink icon={Fade} text="Link 3" href="/" />
+    <SideNavMenu icon={Fade} text="Menu">
       <SideNavMenuItem href="/" text="Link 1" />
       <SideNavMenuItem href="/" text="Link 2" />
       <SideNavMenuItem href="/" text="Link 3" />
     </SideNavMenu>
     <SideNavDivider />
-    <SideNavLink icon="{Fade}" text="Link 4" href="/" />
+    <SideNavLink icon={Fade} text="Link 4" href="/" />
   </SideNavItems>
 </SideNav>
 
diff --git a/docs/src/pages/framed/UIShell/HeaderSearch.svelte b/docs/src/pages/framed/UIShell/HeaderSearch.svelte
index 1e9c8f0f..2cf6f863 100644
--- a/docs/src/pages/framed/UIShell/HeaderSearch.svelte
+++ b/docs/src/pages/framed/UIShell/HeaderSearch.svelte
@@ -72,19 +72,19 @@
       bind:value
       bind:selectedResultIndex
       placeholder="Search services"
-      results="{results}"
-      on:active="{() => {
-        events = [...events, { type: 'active' }];
-      }}"
-      on:inactive="{() => {
-        events = [...events, { type: 'inactive' }];
-      }}"
-      on:clear="{() => {
-        events = [...events, { type: 'clear' }];
-      }}"
-      on:select="{(e) => {
-        events = [...events, { type: 'select', ...e.detail }];
-      }}"
+      {results}
+      on:active={() => {
+        events = [...events, { type: "active" }];
+      }}
+      on:inactive={() => {
+        events = [...events, { type: "inactive" }];
+      }}
+      on:clear={() => {
+        events = [...events, { type: "clear" }];
+      }}
+      on:select={(e) => {
+        events = [...events, { type: "select", ...e.detail }];
+      }}
     />
   </HeaderUtilities>
 </Header>
@@ -95,9 +95,9 @@
       <Column>
         <h1>HeaderSearch</h1>
         <Button
-          on:click="{() => {
+          on:click={() => {
             active = true;
-          }}"
+          }}
         >
           Activate the search bar
         </Button>
diff --git a/docs/src/pages/framed/UIShell/HeaderSwitcher.svelte b/docs/src/pages/framed/UIShell/HeaderSwitcher.svelte
index c06c72a5..69624ea2 100644
--- a/docs/src/pages/framed/UIShell/HeaderSwitcher.svelte
+++ b/docs/src/pages/framed/UIShell/HeaderSwitcher.svelte
@@ -45,7 +45,7 @@
     <SkipToContent />
   </svelte:fragment>
   <HeaderUtilities>
-    <HeaderAction bind:isOpen transition="{transitions[selected].value}">
+    <HeaderAction bind:isOpen transition={transitions[selected].value}>
       <HeaderPanelLinks>
         <HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>
         <HeaderPanelLink>Switcher item 1</HeaderPanelLink>
@@ -60,7 +60,7 @@
   </HeaderUtilities>
 </Header>
 
-<SideNav bind:isOpen="{isSideNavOpen}">
+<SideNav bind:isOpen={isSideNavOpen}>
   <SideNavItems>
     <SideNavLink text="Link 1" />
     <SideNavLink text="Link 2" />
@@ -84,7 +84,7 @@
         </p>
         <TileGroup legend="App switcher transitions" bind:selected>
           {#each Object.keys(transitions) as key}
-            <RadioTile value="{key}">{transitions[key].text}</RadioTile>
+            <RadioTile value={key}>{transitions[key].text}</RadioTile>
           {/each}
         </TileGroup>
       </Column>
diff --git a/docs/src/pages/framed/UIShell/HeaderUtilities.svelte b/docs/src/pages/framed/UIShell/HeaderUtilities.svelte
index d02ce83c..d80000bc 100644
--- a/docs/src/pages/framed/UIShell/HeaderUtilities.svelte
+++ b/docs/src/pages/framed/UIShell/HeaderUtilities.svelte
@@ -29,21 +29,18 @@
     <HeaderGlobalAction
       iconDescription="Settings"
       tooltipAlignment="start"
-      icon="{SettingsAdjust}"
-    />
-    <HeaderGlobalAction
-      iconDescription="Profile"
-      icon="{UserAvatarFilledAlt}"
+      icon={SettingsAdjust}
     />
+    <HeaderGlobalAction iconDescription="Profile" icon={UserAvatarFilledAlt} />
     <HeaderGlobalAction
       iconDescription="Log out"
       tooltipAlignment="end"
-      icon="{Logout}"
+      icon={Logout}
     />
   </HeaderUtilities>
 </Header>
 
-<SideNav bind:isOpen="{isSideNavOpen}">
+<SideNav bind:isOpen={isSideNavOpen}>
   <SideNavItems>
     <SideNavLink text="Link 1" />
     <SideNavLink text="Link 2" />
diff --git a/docs/src/pages/framed/UIShell/PersistedHamburgerMenu.svelte b/docs/src/pages/framed/UIShell/PersistedHamburgerMenu.svelte
index 6bad2c56..ef63d7fd 100644
--- a/docs/src/pages/framed/UIShell/PersistedHamburgerMenu.svelte
+++ b/docs/src/pages/framed/UIShell/PersistedHamburgerMenu.svelte
@@ -20,7 +20,7 @@
 </script>
 
 <Header
-  persistentHamburgerMenu="{true}"
+  persistentHamburgerMenu={true}
   company="IBM"
   platformName="Carbon Svelte"
   bind:isSideNavOpen
@@ -40,7 +40,7 @@
   </HeaderNav>
 </Header>
 
-<SideNav bind:isOpen="{isSideNavOpen}">
+<SideNav bind:isOpen={isSideNavOpen}>
   <SideNavItems>
     <SideNavLink text="Link 1" />
     <SideNavLink text="Link 2" />
diff --git a/docs/src/pages/framed/_reset.svelte b/docs/src/pages/framed/_reset.svelte
index 27f9ace0..dfc4ea34 100644
--- a/docs/src/pages/framed/_reset.svelte
+++ b/docs/src/pages/framed/_reset.svelte
@@ -19,7 +19,7 @@
       document.documentElement.setAttribute("theme", current_theme);
       document.documentElement.style.setProperty(
         "color-scheme",
-        ["white", "g10"].includes(current_theme) ? "light" : "dark"
+        ["white", "g10"].includes(current_theme) ? "light" : "dark",
       );
     }
   }
diff --git a/docs/src/pages/index.svelte b/docs/src/pages/index.svelte
index 7c036b81..20514fa7 100644
--- a/docs/src/pages/index.svelte
+++ b/docs/src/pages/index.svelte
@@ -79,7 +79,7 @@
       </Column>
     </Row>
     <Row style="margin-bottom: var(--cds-layout-02)">
-      <Column max="{10}" xlg="{10}">
+      <Column max={10} xlg={10}>
         <h2 style="margin-top: var(--cds-layout-02)">Installation</h2>
       </Column>
     </Row>
@@ -92,16 +92,16 @@
           <Tab label="Bun" />
           <div slot="content" style="margin: 1rem -1rem">
             <TabContent>
-              <CodeSnippet code="{installNpm}" />
+              <CodeSnippet code={installNpm} />
             </TabContent>
             <TabContent>
-              <CodeSnippet code="{installPnpm}" />
+              <CodeSnippet code={installPnpm} />
             </TabContent>
             <TabContent>
-              <CodeSnippet code="{installYarn}" />
+              <CodeSnippet code={installYarn} />
             </TabContent>
             <TabContent>
-              <CodeSnippet code="{installBun}" />
+              <CodeSnippet code={installBun} />
             </TabContent>
           </div>
         </Tabs>
@@ -118,17 +118,17 @@
         <RadioButtonGroup
           style="margin-top: var(--cds-spacing-08)"
           legendText="Carbon themes"
-          bind:selected="{$theme}"
+          bind:selected={$theme}
         >
           {#each ["white", "g10", "g80", "g90", "g100"] as value}
-            <RadioButton labelText="{themes[value]}" value="{value}" />
+            <RadioButton labelText={themes[value]} {value} />
           {/each}
         </RadioButtonGroup>
       </Column>
     </Row>
 
     <Row>
-      <Column max="{8}" xlg="{8}" noGutter>
+      <Column max={8} xlg={8} noGutter>
         <Tabs autoWidth>
           <Tab label="CSS StyleSheet" />
           <Tab label="SCSS" />
@@ -148,7 +148,7 @@
               <Row padding noGutter>
                 <Column>
                   <p>
-                    <CodeSnippet type="single" code="{cssImport}" />
+                    <CodeSnippet type="single" code={cssImport} />
                   </p>
                 </Column>
               </Row>
@@ -186,7 +186,7 @@
         <Row padding noGutter>
           <Column>
             <p>
-              <CodeSnippet type="single" code="{cssImportAll}" />
+              <CodeSnippet type="single" code={cssImportAll} />
             </p>
           </Column>
         </Row>
@@ -197,7 +197,7 @@
         <Row padding noGutter>
           <Column>
             <p>
-              <CodeSnippet type="multi" code="{cssThemeToggle}" />
+              <CodeSnippet type="multi" code={cssThemeToggle} />
             </p>
           </Column>
         </Row>
@@ -221,7 +221,7 @@
       </Column>
     </Row>
     <Row noGutter>
-      <Column xlg="{5}" lg="{8}" md="{4}">
+      <Column xlg={5} lg={8} md={4}>
         <TileCard
           borderRight
           borderBottom
@@ -231,7 +231,7 @@
           href="https://github.com/carbon-design-system/carbon-components-svelte"
         />
       </Column>
-      <Column xlg="{5}" lg="{8}" md="{4}">
+      <Column xlg={5} lg={8} md={4}>
         <TileCard
           borderBottom
           title="Carbon Icons Svelte"
@@ -242,7 +242,7 @@
       </Column>
     </Row>
     <Row noGutter>
-      <Column xlg="{5}" lg="{8}" md="{4}">
+      <Column xlg={5} lg={8} md={4}>
         <TileCard
           borderBottom
           borderRight
@@ -252,7 +252,7 @@
           href="https://github.com/carbon-design-system/carbon-pictograms-svelte"
         />
       </Column>
-      <Column xlg="{5}" lg="{8}" md="{4}">
+      <Column xlg={5} lg={8} md={4}>
         <TileCard
           borderBottom
           title="Carbon Charts Svelte"
@@ -263,7 +263,7 @@
       </Column>
     </Row>
     <Row noGutter>
-      <Column xlg="{5}" lg="{8}" md="{4}">
+      <Column xlg={5} lg={8} md={4}>
         <TileCard
           title="Carbon Preprocess Svelte"
           subtitle="Collection of Carbon Svelte preprocessors"
diff --git a/docs/svelte.config.js b/docs/svelte.config.js
index ff5dbccb..d592e06f 100644
--- a/docs/svelte.config.js
+++ b/docs/svelte.config.js
@@ -64,7 +64,7 @@ function createImports(source) {
         ? icon_imports
             .map(
               (icon) =>
-                `import ${icon} from "carbon-icons-svelte/lib/${icon}.svelte";`
+                `import ${icon} from "carbon-icons-svelte/lib/${icon}.svelte";`,
             )
             .join("\n")
         : ""
@@ -88,7 +88,7 @@ function plugin() {
       const highlightedCode = Prism.highlight(
         formattedCode,
         Prism.languages.svelte,
-        "svelte"
+        "svelte",
       );
 
       node.value = `<Preview codeRaw="{\`${formattedCode}\`}" code="{\`${highlightedCode}\`}">${node.value}</Preview>`;
@@ -111,7 +111,7 @@ function plugin() {
 
       const sourceCode = fs.readFileSync(
         path.join("src/pages", `${src}.svelte`),
-        "utf-8"
+        "utf-8",
       );
       const formattedCode = format(sourceCode, {
         parser: "svelte",
@@ -119,7 +119,7 @@ function plugin() {
       const highlightedCode = Prism.highlight(
         formattedCode,
         Prism.languages.svelte,
-        "svelte"
+        "svelte",
       );
 
       node.value = `<Preview framed src="${src}" codeRaw="{\`${formattedCode}\`}" code="{\`${highlightedCode}\`}" />`;
@@ -149,7 +149,7 @@ export default {
         return {
           code: content.replace(
             /process.env.VERSION/g,
-            JSON.stringify(pkg.version)
+            JSON.stringify(pkg.version),
           ),
         };
       },
@@ -173,7 +173,7 @@ export default {
             if (node.type === "Element") {
               if (node.name === "h2") {
                 const id = node.attributes.find(
-                  (attribute) => attribute.name === "id"
+                  (attribute) => attribute.name === "id",
                 );
                 toc.push({
                   id: id.value[0].raw,
@@ -192,7 +192,7 @@ export default {
                     ${toc
                       .map(
                         (item) =>
-                          `<li class="bx--list__item"><a class="bx--link" href="\#${item.id}">${item.text}</a></li>`
+                          `<li class="bx--list__item"><a class="bx--link" href="\#${item.id}">${item.text}</a></li>`,
                       )
                       .join("")}
                   <h5>Component API</h5>
@@ -216,7 +216,7 @@ export default {
                   </li>
                 </ul>
               </div>
-            </Layout_MDSVEX_DEFAULT>`
+            </Layout_MDSVEX_DEFAULT>`,
           ),
         };
       },
diff --git a/scripts/build-docs.js b/scripts/build-docs.js
index be68b8d9..2378f5d8 100644
--- a/scripts/build-docs.js
+++ b/scripts/build-docs.js
@@ -12,7 +12,7 @@ sveld({
       if (type === "h1")
         document.append(
           "quote",
-          `${components.size} components exported from ${pkg.name}@${pkg.version}.`
+          `${components.size} components exported from ${pkg.name}@${pkg.version}.`,
         );
     },
   },
diff --git a/src/Accordion/Accordion.svelte b/src/Accordion/Accordion.svelte
index c879cd04..fb1362eb 100644
--- a/src/Accordion/Accordion.svelte
+++ b/src/Accordion/Accordion.svelte
@@ -34,8 +34,8 @@
 {#if skeleton}
   <AccordionSkeleton
     {...$$restProps}
-    align="{align}"
-    size="{size}"
+    {align}
+    {size}
     on:click
     on:mouseover
     on:mouseenter
@@ -44,11 +44,11 @@
 {:else}
   <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
   <ul
-    class:bx--accordion="{true}"
-    class:bx--accordion--start="{align === 'start'}"
-    class:bx--accordion--end="{align === 'end'}"
-    class:bx--accordion--sm="{size === 'sm'}"
-    class:bx--accordion--xl="{size === 'xl'}"
+    class:bx--accordion={true}
+    class:bx--accordion--start={align === "start"}
+    class:bx--accordion--end={align === "end"}
+    class:bx--accordion--sm={size === "sm"}
+    class:bx--accordion--xl={size === "xl"}
     {...$$restProps}
     on:click
     on:mouseover
diff --git a/src/Accordion/AccordionItem.svelte b/src/Accordion/AccordionItem.svelte
index a8034f75..9095aa63 100644
--- a/src/Accordion/AccordionItem.svelte
+++ b/src/Accordion/AccordionItem.svelte
@@ -36,44 +36,44 @@
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <li
-  class:bx--accordion__item="{true}"
-  class:bx--accordion__item--active="{open}"
-  class:bx--accordion__item--disabled="{disabled}"
-  class:bx--accordion__item--expanding="{animation === 'expanding'}"
-  class:bx--accordion__item--collapsing="{animation === 'collapsing'}"
+  class:bx--accordion__item={true}
+  class:bx--accordion__item--active={open}
+  class:bx--accordion__item--disabled={disabled}
+  class:bx--accordion__item--expanding={animation === "expanding"}
+  class:bx--accordion__item--collapsing={animation === "collapsing"}
   {...$$restProps}
   on:animationend
-  on:animationend="{() => {
+  on:animationend={() => {
     animation = undefined;
-  }}"
+  }}
 >
   <button
     type="button"
-    class:bx--accordion__heading="{true}"
-    title="{iconDescription}"
-    aria-expanded="{open}"
-    disabled="{disabled}"
+    class:bx--accordion__heading={true}
+    title={iconDescription}
+    aria-expanded={open}
+    {disabled}
     on:click
-    on:click="{() => {
+    on:click={() => {
       open = !open;
-      animation = open ? 'expanding' : 'collapsing';
-    }}"
+      animation = open ? "expanding" : "collapsing";
+    }}
     on:mouseover
     on:mouseenter
     on:mouseleave
     on:keydown
-    on:keydown="{({ key }) => {
-      if (open && key === 'Escape') {
+    on:keydown={({ key }) => {
+      if (open && key === "Escape") {
         open = false;
       }
-    }}"
+    }}
   >
-    <ChevronRight class="bx--accordion__arrow" aria-label="{iconDescription}" />
-    <div class:bx--accordion__title="{true}">
+    <ChevronRight class="bx--accordion__arrow" aria-label={iconDescription} />
+    <div class:bx--accordion__title={true}>
       <slot name="title">{title}</slot>
     </div>
   </button>
-  <div class:bx--accordion__content="{true}">
+  <div class:bx--accordion__content={true}>
     <slot />
   </div>
 </li>
diff --git a/src/Accordion/AccordionSkeleton.svelte b/src/Accordion/AccordionSkeleton.svelte
index 9305d2fa..59e31599 100644
--- a/src/Accordion/AccordionSkeleton.svelte
+++ b/src/Accordion/AccordionSkeleton.svelte
@@ -24,12 +24,12 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <ul
-  class:bx--skeleton="{true}"
-  class:bx--accordion="{true}"
-  class:bx--accordion--start="{align === 'start'}"
-  class:bx--accordion--end="{align === 'end'}"
-  class:bx--accordion--sm="{size === 'sm'}"
-  class:bx--accordion--xl="{size === 'xl'}"
+  class:bx--skeleton={true}
+  class:bx--accordion={true}
+  class:bx--accordion--start={align === "start"}
+  class:bx--accordion--end={align === "end"}
+  class:bx--accordion--sm={size === "sm"}
+  class:bx--accordion--xl={size === "xl"}
   {...$$restProps}
   on:click
   on:mouseover
@@ -38,14 +38,14 @@
 >
   {#if open}
     <li
-      class:bx--accordion__item="{true}"
-      class:bx--accordion__item--active="{true}"
+      class:bx--accordion__item={true}
+      class:bx--accordion__item--active={true}
     >
-      <span class:bx--accordion__heading="{true}">
+      <span class:bx--accordion__heading={true}>
         <ChevronRight class="bx--accordion__arrow" />
         <SkeletonText class="bx--accordion__title" />
       </span>
-      <div class:bx--accordion__content="{true}">
+      <div class:bx--accordion__content={true}>
         <SkeletonText width="90%" />
         <SkeletonText width="80%" />
         <SkeletonText width="95%" />
@@ -53,8 +53,8 @@
     </li>
   {/if}
   {#each Array.from({ length: open ? count - 1 : count }, (_, i) => i) as item (item)}
-    <li class:bx--accordion__item="{true}">
-      <span class:bx--accordion__heading="{true}">
+    <li class:bx--accordion__item={true}>
+      <span class:bx--accordion__heading={true}>
         <ChevronRight class="bx--accordion__arrow" />
         <SkeletonText class="bx--accordion__title" />
       </span>
diff --git a/src/AspectRatio/AspectRatio.svelte b/src/AspectRatio/AspectRatio.svelte
index d3322124..9b676fc0 100644
--- a/src/AspectRatio/AspectRatio.svelte
+++ b/src/AspectRatio/AspectRatio.svelte
@@ -7,19 +7,19 @@
 </script>
 
 <div
-  class:bx--aspect-ratio="{true}"
-  class:bx--aspect-ratio--2x1="{ratio === '2x1'}"
-  class:bx--aspect-ratio--2x3="{ratio === '2x3'}"
-  class:bx--aspect-ratio--16x9="{ratio === '16x9'}"
-  class:bx--aspect-ratio--4x3="{ratio === '4x3'}"
-  class:bx--aspect-ratio--1x1="{ratio === '1x1'}"
-  class:bx--aspect-ratio--3x4="{ratio === '3x4'}"
-  class:bx--aspect-ratio--3x2="{ratio === '3x2'}"
-  class:bx--aspect-ratio--9x16="{ratio === '9x16'}"
-  class:bx--aspect-ratio--1x2="{ratio === '1x2'}"
+  class:bx--aspect-ratio={true}
+  class:bx--aspect-ratio--2x1={ratio === "2x1"}
+  class:bx--aspect-ratio--2x3={ratio === "2x3"}
+  class:bx--aspect-ratio--16x9={ratio === "16x9"}
+  class:bx--aspect-ratio--4x3={ratio === "4x3"}
+  class:bx--aspect-ratio--1x1={ratio === "1x1"}
+  class:bx--aspect-ratio--3x4={ratio === "3x4"}
+  class:bx--aspect-ratio--3x2={ratio === "3x2"}
+  class:bx--aspect-ratio--9x16={ratio === "9x16"}
+  class:bx--aspect-ratio--1x2={ratio === "1x2"}
   {...$$restProps}
 >
-  <div class:bx--aspect-ratio--object="{true}">
+  <div class:bx--aspect-ratio--object={true}>
     <slot />
   </div>
 </div>
diff --git a/src/Breadcrumb/Breadcrumb.svelte b/src/Breadcrumb/Breadcrumb.svelte
index 9b2c13d3..cffe0dd8 100644
--- a/src/Breadcrumb/Breadcrumb.svelte
+++ b/src/Breadcrumb/Breadcrumb.svelte
@@ -13,7 +13,7 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 {#if skeleton}
   <BreadcrumbSkeleton
-    noTrailingSlash="{noTrailingSlash}"
+    {noTrailingSlash}
     {...$$restProps}
     on:click
     on:mouseover
@@ -31,8 +31,8 @@
     on:mouseleave
   >
     <ol
-      class:bx--breadcrumb="{true}"
-      class:bx--breadcrumb--no-trailing-slash="{noTrailingSlash}"
+      class:bx--breadcrumb={true}
+      class:bx--breadcrumb--no-trailing-slash={noTrailingSlash}
     >
       <slot />
     </ol>
diff --git a/src/Breadcrumb/BreadcrumbItem.svelte b/src/Breadcrumb/BreadcrumbItem.svelte
index 07009a42..aed4eb78 100644
--- a/src/Breadcrumb/BreadcrumbItem.svelte
+++ b/src/Breadcrumb/BreadcrumbItem.svelte
@@ -22,9 +22,9 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <li
-  class:bx--breadcrumb-item="{true}"
-  class:bx--breadcrumb-item--current="{isCurrentPage &&
-    $$restProps['aria-current'] !== 'page'}"
+  class:bx--breadcrumb-item={true}
+  class:bx--breadcrumb-item--current={isCurrentPage &&
+    $$restProps["aria-current"] !== "page"}
   {...$$restProps}
   on:click
   on:mouseover
@@ -32,15 +32,15 @@
   on:mouseleave
 >
   {#if href}
-    <Link href="{href}" aria-current="{$$restProps['aria-current']}">
+    <Link {href} aria-current={$$restProps["aria-current"]}>
       <slot />
     </Link>
   {:else}
     <slot
-      props="{{
-        'aria-current': $$restProps['aria-current'],
-        class: 'bx--link',
-      }}"
+      props={{
+        "aria-current": $$restProps["aria-current"],
+        class: "bx--link",
+      }}
     />
   {/if}
 </li>
diff --git a/src/Breadcrumb/BreadcrumbSkeleton.svelte b/src/Breadcrumb/BreadcrumbSkeleton.svelte
index b6ec1109..3e18be77 100644
--- a/src/Breadcrumb/BreadcrumbSkeleton.svelte
+++ b/src/Breadcrumb/BreadcrumbSkeleton.svelte
@@ -9,9 +9,9 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class:bx--skeleton="{true}"
-  class:bx--breadcrumb="{true}"
-  class:bx--breadcrumb--no-trailing-slash="{noTrailingSlash}"
+  class:bx--skeleton={true}
+  class:bx--breadcrumb={true}
+  class:bx--breadcrumb--no-trailing-slash={noTrailingSlash}
   {...$$restProps}
   on:click
   on:mouseover
@@ -19,8 +19,8 @@
   on:mouseleave
 >
   {#each Array.from({ length: count }, (_, i) => i) as item (item)}
-    <div class:bx--breadcrumb-item="{true}">
-      <span class:bx--link="{true}">&nbsp;</span>
+    <div class:bx--breadcrumb-item={true}>
+      <span class:bx--link={true}>&nbsp;</span>
     </div>
   {/each}
 </div>
diff --git a/src/Breakpoint/Breakpoint.svelte b/src/Breakpoint/Breakpoint.svelte
index b9d89dcd..5154d027 100644
--- a/src/Breakpoint/Breakpoint.svelte
+++ b/src/Breakpoint/Breakpoint.svelte
@@ -44,4 +44,4 @@
     dispatch("change", { size, breakpointValue: breakpoints[size] });
 </script>
 
-<slot size="{size}" sizes="{sizes}" />
+<slot {size} {sizes} />
diff --git a/src/Breakpoint/breakpointObserver.d.ts b/src/Breakpoint/breakpointObserver.d.ts
index 69175629..77cfe464 100644
--- a/src/Breakpoint/breakpointObserver.d.ts
+++ b/src/Breakpoint/breakpointObserver.d.ts
@@ -9,7 +9,7 @@ export function breakpointObserver(): {
   subscribe: (
     this: void,
     run: Subscriber<any>,
-    invalidate?: (value?: any) => void
+    invalidate?: (value?: any) => void,
   ) => Unsubscriber;
   /**
    * Returns a store readable store that returns whether the current
diff --git a/src/Breakpoint/breakpointObserver.js b/src/Breakpoint/breakpointObserver.js
index c87fc4d1..0a13549f 100644
--- a/src/Breakpoint/breakpointObserver.js
+++ b/src/Breakpoint/breakpointObserver.js
@@ -14,19 +14,19 @@ export function breakpointObserver() {
     const match = {
       sm: window.matchMedia(`(max-width: ${breakpoints.md}px)`),
       md: window.matchMedia(
-        `(min-width: ${breakpoints.md}px) and (max-width: ${breakpoints.lg}px)`
+        `(min-width: ${breakpoints.md}px) and (max-width: ${breakpoints.lg}px)`,
       ),
       lg: window.matchMedia(
-        `(min-width: ${breakpoints.lg}px) and (max-width: ${breakpoints.xlg}px)`
+        `(min-width: ${breakpoints.lg}px) and (max-width: ${breakpoints.xlg}px)`,
       ),
       xlg: window.matchMedia(
-        `(min-width: ${breakpoints.xlg}px) and (max-width: ${breakpoints.max}px)`
+        `(min-width: ${breakpoints.xlg}px) and (max-width: ${breakpoints.max}px)`,
       ),
       max: window.matchMedia(`(min-width: ${breakpoints.max}px)`),
     };
     const matchers = Object.entries(match);
     const sizeByMedia = Object.fromEntries(
-      matchers.map(([size, queryList]) => [queryList.media, size])
+      matchers.map(([size, queryList]) => [queryList.media, size]),
     );
 
     const size = matchers.find(([size, queryList]) => queryList.matches)[0];
@@ -39,12 +39,12 @@ export function breakpointObserver() {
     }
 
     matchers.forEach(([size, queryList]) =>
-      queryList.addEventListener("change", handleChange)
+      queryList.addEventListener("change", handleChange),
     );
 
     return () => {
       matchers.forEach(([size, queryList]) =>
-        queryList.removeEventListener("change", handleChange)
+        queryList.removeEventListener("change", handleChange),
       );
     };
   });
diff --git a/src/Breakpoint/index.d.ts b/src/Breakpoint/index.d.ts
index c6d0e4d0..6b191a64 100644
--- a/src/Breakpoint/index.d.ts
+++ b/src/Breakpoint/index.d.ts
@@ -2,4 +2,3 @@
 export { default as Breakpoint } from "./Breakpoint.svelte";
 export { breakpointObserver } from "./breakpointObserver";
 export { breakpoints } from "./breakpoints";
-
diff --git a/src/Button/Button.svelte b/src/Button/Button.svelte
index 1a45236c..c4858687 100644
--- a/src/Button/Button.svelte
+++ b/src/Button/Button.svelte
@@ -136,10 +136,10 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 {#if skeleton}
   <ButtonSkeleton
-    href="{href}"
-    size="{size}"
+    {href}
+    {size}
     {...$$restProps}
-    style="{hasIconOnly && 'width: 3rem;'}"
+    style={hasIconOnly && "width: 3rem;"}
     on:click
     on:focus
     on:blur
@@ -148,12 +148,12 @@
     on:mouseleave
   />
 {:else if as}
-  <slot props="{buttonProps}" />
+  <slot props={buttonProps} />
 {:else if href && !disabled}
   <!-- svelte-ignore a11y-missing-attribute -->
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <a
-    bind:this="{ref}"
+    bind:this={ref}
     {...buttonProps}
     on:click
     on:focus
@@ -163,26 +163,26 @@
     on:mouseleave
   >
     {#if hasIconOnly}
-      <span class:bx--assistive-text="{true}">{iconDescription}</span>
+      <span class:bx--assistive-text={true}>{iconDescription}</span>
     {/if}
     <slot />
     {#if $$slots.icon}
       <slot
         name="icon"
-        style="{hasIconOnly ? 'margin-left: 0' : undefined}"
+        style={hasIconOnly ? "margin-left: 0" : undefined}
         {...iconProps}
       />
     {:else if icon}
       <svelte:component
-        this="{icon}"
-        style="{hasIconOnly ? 'margin-left: 0' : undefined}"
+        this={icon}
+        style={hasIconOnly ? "margin-left: 0" : undefined}
         {...iconProps}
       />
     {/if}
   </a>
 {:else}
   <button
-    bind:this="{ref}"
+    bind:this={ref}
     {...buttonProps}
     on:click
     on:focus
@@ -192,19 +192,19 @@
     on:mouseleave
   >
     {#if hasIconOnly}
-      <span class:bx--assistive-text="{true}">{iconDescription}</span>
+      <span class:bx--assistive-text={true}>{iconDescription}</span>
     {/if}
     <slot />
     {#if $$slots.icon}
       <slot
         name="icon"
-        style="{hasIconOnly ? 'margin-left: 0' : undefined}"
+        style={hasIconOnly ? "margin-left: 0" : undefined}
         {...iconProps}
       />
     {:else if icon}
       <svelte:component
-        this="{icon}"
-        style="{hasIconOnly ? 'margin-left: 0' : undefined}"
+        this={icon}
+        style={hasIconOnly ? "margin-left: 0" : undefined}
         {...iconProps}
       />
     {/if}
diff --git a/src/Button/ButtonSet.svelte b/src/Button/ButtonSet.svelte
index b8239a04..4317028d 100644
--- a/src/Button/ButtonSet.svelte
+++ b/src/Button/ButtonSet.svelte
@@ -4,8 +4,8 @@
 </script>
 
 <div
-  class:bx--btn-set="{true}"
-  class:bx--btn-set--stacked="{stacked}"
+  class:bx--btn-set={true}
+  class:bx--btn-set--stacked={stacked}
   {...$$restProps}
 >
   <slot />
diff --git a/src/Button/ButtonSkeleton.svelte b/src/Button/ButtonSkeleton.svelte
index ebdae2a8..baa52ebd 100644
--- a/src/Button/ButtonSkeleton.svelte
+++ b/src/Button/ButtonSkeleton.svelte
@@ -15,15 +15,15 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 {#if href}
   <a
-    href="{href}"
-    rel="{$$restProps.target === '_blank' ? 'noopener noreferrer' : undefined}"
+    {href}
+    rel={$$restProps.target === "_blank" ? "noopener noreferrer" : undefined}
     role="button"
-    class:bx--skeleton="{true}"
-    class:bx--btn="{true}"
-    class:bx--btn--field="{size === 'field'}"
-    class:bx--btn--sm="{size === 'small'}"
-    class:bx--btn--lg="{size === 'lg'}"
-    class:bx--btn--xl="{size === 'xl'}"
+    class:bx--skeleton={true}
+    class:bx--btn={true}
+    class:bx--btn--field={size === "field"}
+    class:bx--btn--sm={size === "small"}
+    class:bx--btn--lg={size === "lg"}
+    class:bx--btn--xl={size === "xl"}
     {...$$restProps}
     on:click
     on:focus
@@ -37,12 +37,12 @@
 {:else}
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
-    class:bx--skeleton="{true}"
-    class:bx--btn="{true}"
-    class:bx--btn--field="{size === 'field'}"
-    class:bx--btn--sm="{size === 'small'}"
-    class:bx--btn--lg="{size === 'lg'}"
-    class:bx--btn--xl="{size === 'xl'}"
+    class:bx--skeleton={true}
+    class:bx--btn={true}
+    class:bx--btn--field={size === "field"}
+    class:bx--btn--sm={size === "small"}
+    class:bx--btn--lg={size === "lg"}
+    class:bx--btn--xl={size === "xl"}
     {...$$restProps}
     on:click
     on:focus
diff --git a/src/Checkbox/Checkbox.svelte b/src/Checkbox/Checkbox.svelte
index 7e134c76..1abdbe0d 100644
--- a/src/Checkbox/Checkbox.svelte
+++ b/src/Checkbox/Checkbox.svelte
@@ -82,8 +82,8 @@
 {:else}
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
-    class:bx--form-item="{true}"
-    class:bx--checkbox-wrapper="{true}"
+    class:bx--form-item={true}
+    class:bx--checkbox-wrapper={true}
     {...$$restProps}
     on:click
     on:mouseover
@@ -91,18 +91,18 @@
     on:mouseleave
   >
     <input
-      bind:this="{ref}"
+      bind:this={ref}
       type="checkbox"
-      value="{value}"
-      checked="{checked}"
-      disabled="{disabled}"
-      id="{id}"
+      {value}
+      {checked}
+      {disabled}
+      {id}
       bind:indeterminate
-      name="{name}"
-      required="{required}"
-      readonly="{readonly}"
-      class:bx--checkbox="{true}"
-      on:change="{() => {
+      {name}
+      {required}
+      {readonly}
+      class:bx--checkbox={true}
+      on:change={() => {
         if (useGroup) {
           group = group.includes(value)
             ? group.filter((_value) => _value !== value)
@@ -110,16 +110,16 @@
         } else {
           checked = !checked;
         }
-      }}"
+      }}
       on:change
       on:focus
       on:blur
     />
-    <label for="{id}" title="{title}" class:bx--checkbox-label="{true}">
+    <label for={id} {title} class:bx--checkbox-label={true}>
       <span
-        bind:this="{refLabel}"
-        class:bx--checkbox-label-text="{true}"
-        class:bx--visually-hidden="{hideLabel}"
+        bind:this={refLabel}
+        class:bx--checkbox-label-text={true}
+        class:bx--visually-hidden={hideLabel}
       >
         <slot name="labelText">
           {labelText}
diff --git a/src/Checkbox/CheckboxSkeleton.svelte b/src/Checkbox/CheckboxSkeleton.svelte
index 249be9e9..6bb8333d 100644
--- a/src/Checkbox/CheckboxSkeleton.svelte
+++ b/src/Checkbox/CheckboxSkeleton.svelte
@@ -1,15 +1,14 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class:bx--form-item="{true}"
-  class:bx--checkbox-wrapper="{true}"
-  class:bx--checkbox-label="{true}"
+  class:bx--form-item={true}
+  class:bx--checkbox-wrapper={true}
+  class:bx--checkbox-label={true}
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave
 >
-  <span class:bx--checkbox-label-text="{true}" class:bx--skeleton="{true}"
-  ></span>
+  <span class:bx--checkbox-label-text={true} class:bx--skeleton={true}></span>
 </div>
diff --git a/src/Checkbox/InlineCheckbox.svelte b/src/Checkbox/InlineCheckbox.svelte
index 5cdcc3b2..adda8701 100644
--- a/src/Checkbox/InlineCheckbox.svelte
+++ b/src/Checkbox/InlineCheckbox.svelte
@@ -18,23 +18,24 @@
   export let ref = null;
 </script>
 
-<div class:bx--checkbox--inline="{true}">
+<div class:bx--checkbox--inline={true}>
   <input
-    bind:this="{ref}"
+    bind:this={ref}
     type="checkbox"
-    class:bx--checkbox="{true}"
-    checked="{indeterminate ? false : checked}"
+    class:bx--checkbox={true}
+    checked={indeterminate ? false : checked}
     bind:indeterminate
-    id="{id}"
+    {id}
     {...$$restProps}
-    aria-checked="{indeterminate ? undefined : checked}"
+    aria-checked={indeterminate ? undefined : checked}
     on:change
     on:focus
     on:blur
   />
   <label
-    for="{id}"
-    title="{title}"
-    aria-label="{$$props['aria-label']}"
-    class:bx--checkbox-label="{true}"></label>
+    for={id}
+    {title}
+    aria-label={$$props["aria-label"]}
+    class:bx--checkbox-label={true}
+  ></label>
 </div>
diff --git a/src/CodeSnippet/CodeSnippet.svelte b/src/CodeSnippet/CodeSnippet.svelte
index 3c93a31a..9fdc5c28 100644
--- a/src/CodeSnippet/CodeSnippet.svelte
+++ b/src/CodeSnippet/CodeSnippet.svelte
@@ -146,7 +146,7 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 {#if skeleton}
   <CodeSnippetSkeleton
-    type="{type}"
+    {type}
     {...$$restProps}
     on:click
     on:mouseover
@@ -156,17 +156,17 @@
 {:else if type === "inline"}
   {#if hideCopyButton}
     <span
-      class:bx--snippet="{true}"
-      class:bx--snippet--expand="{expanded}"
-      class:bx--snippet--light="{light}"
-      class:bx--snippet--no-copy="{hideCopyButton}"
-      class:bx--snippet--wraptext="{wrapText}"
-      class:bx--snippet--single="{type === 'single'}"
-      class:bx--snippet--inline="{type === 'inline'}"
-      class:bx--snippet--multi="{type === 'multi'}"
+      class:bx--snippet={true}
+      class:bx--snippet--expand={expanded}
+      class:bx--snippet--light={light}
+      class:bx--snippet--no-copy={hideCopyButton}
+      class:bx--snippet--wraptext={wrapText}
+      class:bx--snippet--single={type === "single"}
+      class:bx--snippet--inline={type === "inline"}
+      class:bx--snippet--multi={type === "multi"}
       {...$$restProps}
     >
-      <code id="{id}">
+      <code {id}>
         <slot>{code}</slot>
       </code>
     </span>
@@ -174,44 +174,44 @@
     <button
       type="button"
       aria-live="polite"
-      class:bx--copy="{true}"
-      class:bx--btn--copy="{true}"
-      class:bx--copy-btn--animating="{animation}"
-      class:bx--copy-btn--fade-in="{animation === 'fade-in'}"
-      class:bx--copy-btn--fade-out="{animation === 'fade-out'}"
-      class:bx--snippet="{true}"
-      class:bx--snippet--inline="{type === 'inline'}"
-      class:bx--snippet--expand="{expanded}"
-      class:bx--snippet--light="{light}"
-      class:bx--snippet--wraptext="{wrapText}"
-      aria-label="{copyLabel}"
+      class:bx--copy={true}
+      class:bx--btn--copy={true}
+      class:bx--copy-btn--animating={animation}
+      class:bx--copy-btn--fade-in={animation === "fade-in"}
+      class:bx--copy-btn--fade-out={animation === "fade-out"}
+      class:bx--snippet={true}
+      class:bx--snippet--inline={type === "inline"}
+      class:bx--snippet--expand={expanded}
+      class:bx--snippet--light={light}
+      class:bx--snippet--wraptext={wrapText}
+      aria-label={copyLabel}
       {...$$restProps}
       on:click
-      on:click="{() => {
+      on:click={() => {
         copy(code);
-        dispatch('copy');
-        if (animation === 'fade-in') return;
-        animation = 'fade-in';
+        dispatch("copy");
+        if (animation === "fade-in") return;
+        animation = "fade-in";
         timeout = setTimeout(() => {
-          animation = 'fade-out';
+          animation = "fade-out";
         }, feedbackTimeout);
-      }}"
-      on:animationend="{({ animationName }) => {
-        if (animationName === 'hide-feedback') {
+      }}
+      on:animationend={({ animationName }) => {
+        if (animationName === "hide-feedback") {
           animation = undefined;
         }
-      }}"
+      }}
       on:mouseover
       on:mouseenter
       on:mouseleave
     >
-      <code id="{id}">
+      <code {id}>
         <slot>{code}</slot>
       </code>
       <span
         aria-hidden="true"
-        class:bx--assistive-text="{true}"
-        class:bx--copy-btn__feedback="{true}"
+        class:bx--assistive-text={true}
+        class:bx--copy-btn__feedback={true}
       >
         {feedback}
       </span>
@@ -220,15 +220,15 @@
 {:else}
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
-    class:bx--snippet="{true}"
-    class:bx--snippet--expand="{expanded}"
-    class:bx--snippet--light="{light}"
-    class:bx--snippet--no-copy="{hideCopyButton}"
-    class:bx--snippet--wraptext="{wrapText}"
-    class:bx--snippet--single="{type === 'single'}"
-    class:bx--snippet--inline="{type === 'inline'}"
-    class:bx--snippet--multi="{type === 'multi'}"
-    class:bx--snippet--disabled="{type !== 'inline' && disabled}"
+    class:bx--snippet={true}
+    class:bx--snippet--expand={expanded}
+    class:bx--snippet--light={light}
+    class:bx--snippet--no-copy={hideCopyButton}
+    class:bx--snippet--wraptext={wrapText}
+    class:bx--snippet--single={type === "single"}
+    class:bx--snippet--inline={type === "inline"}
+    class:bx--snippet--multi={type === "multi"}
+    class:bx--snippet--disabled={type !== "inline" && disabled}
     {...$$restProps}
     on:mouseover
     on:mouseenter
@@ -236,24 +236,24 @@
   >
     <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
     <div
-      role="{type === 'single' ? 'textbox' : undefined}"
-      tabindex="{type === 'single' && !disabled ? '0' : undefined}"
-      aria-label="{$$restProps['aria-label'] || copyLabel || 'code-snippet'}"
-      class:bx--snippet-container="{true}"
+      role={type === "single" ? "textbox" : undefined}
+      tabindex={type === "single" && !disabled ? "0" : undefined}
+      aria-label={$$restProps["aria-label"] || copyLabel || "code-snippet"}
+      class:bx--snippet-container={true}
       style:width="100%"
       style:min-height="{minHeight}px"
-      style:max-height="{maxHeight}"
+      style:max-height={maxHeight}
     >
-      <pre bind:this="{ref}"><code><slot>{code}</slot></code></pre>
+      <pre bind:this={ref}><code><slot>{code}</slot></code></pre>
     </div>
     {#if !hideCopyButton}
       <CopyButton
-        text="{code}"
-        copy="{copy}"
-        disabled="{disabled}"
-        feedback="{feedback}"
-        feedbackTimeout="{feedbackTimeout}"
-        iconDescription="{copyButtonDescription}"
+        text={code}
+        {copy}
+        {disabled}
+        {feedback}
+        {feedbackTimeout}
+        iconDescription={copyButtonDescription}
         on:click
         on:copy
         on:animationend
@@ -264,15 +264,15 @@
         kind="ghost"
         size="small"
         class="bx--snippet-btn--expand"
-        disabled="{disabled}"
-        on:click="{() => {
+        {disabled}
+        on:click={() => {
           expanded = !expanded;
-        }}"
+        }}
       >
-        <span class:bx--snippet-btn--text="{true}">{expandText}</span>
+        <span class:bx--snippet-btn--text={true}>{expandText}</span>
         <ChevronDown
           class="bx--icon-chevron--down bx--snippet__icon"
-          aria-label="{expandText}"
+          aria-label={expandText}
         />
       </Button>
     {/if}
diff --git a/src/CodeSnippet/CodeSnippetSkeleton.svelte b/src/CodeSnippet/CodeSnippetSkeleton.svelte
index 64ab8a73..3854e105 100644
--- a/src/CodeSnippet/CodeSnippetSkeleton.svelte
+++ b/src/CodeSnippet/CodeSnippetSkeleton.svelte
@@ -9,17 +9,17 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class:bx--skeleton="{true}"
-  class:bx--snippet="{true}"
-  class:bx--snippet--single="{type === 'single'}"
-  class:bx--snippet--multi="{type === 'multi'}"
+  class:bx--skeleton={true}
+  class:bx--snippet={true}
+  class:bx--snippet--single={type === "single"}
+  class:bx--snippet--multi={type === "multi"}
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave
 >
-  <div class:bx--snippet-container="{true}">
+  <div class:bx--snippet-container={true}>
     {#if type === "single"}
       <span></span>
     {:else if type === "multi"}<span></span> <span></span> <span></span>{/if}
diff --git a/src/ComboBox/ComboBox.svelte b/src/ComboBox/ComboBox.svelte
index 437a5834..4ec4e85e 100644
--- a/src/ComboBox/ComboBox.svelte
+++ b/src/ComboBox/ComboBox.svelte
@@ -211,20 +211,16 @@
 </script>
 
 <svelte:window
-  on:click="{({ target }) => {
+  on:click={({ target }) => {
     if (open && ref && !ref.contains(target)) {
       open = false;
     }
-  }}"
+  }}
 />
 
-<div class:bx--list-box__wrapper="{true}">
+<div class:bx--list-box__wrapper={true}>
   {#if titleText || $$slots.titleText}
-    <label
-      for="{id}"
-      class:bx--label="{true}"
-      class:bx--label--disabled="{disabled}"
-    >
+    <label for={id} class:bx--label={true} class:bx--label--disabled={disabled}>
       <slot name="titleText">
         {titleText}
       </slot>
@@ -233,51 +229,51 @@
   <ListBox
     class="bx--combo-box {direction === 'top' &&
       'bx--list-box--up'} {!invalid && warn && 'bx--combo-box--warning'}"
-    id="{comboId}"
-    aria-label="{ariaLabel}"
-    disabled="{disabled}"
-    invalid="{invalid}"
-    invalidText="{invalidText}"
-    open="{open}"
-    light="{light}"
-    size="{size}"
-    warn="{warn}"
-    warnText="{warnText}"
+    id={comboId}
+    aria-label={ariaLabel}
+    {disabled}
+    {invalid}
+    {invalidText}
+    {open}
+    {light}
+    {size}
+    {warn}
+    {warnText}
   >
     <ListBoxField
       role="button"
-      aria-expanded="{open}"
-      on:click="{async () => {
+      aria-expanded={open}
+      on:click={async () => {
         if (disabled) return;
         open = true;
         await tick();
         ref.focus();
-      }}"
-      id="{id}"
-      disabled="{disabled}"
-      translateWithId="{translateWithId}"
+      }}
+      {id}
+      {disabled}
+      {translateWithId}
     >
       <input
-        bind:this="{ref}"
+        bind:this={ref}
         bind:value
         tabindex="0"
         autocomplete="off"
         aria-autocomplete="list"
-        aria-expanded="{open}"
-        aria-activedescendant="{highlightedId}"
-        aria-labelledby="{comboId}"
-        aria-disabled="{disabled}"
-        aria-controls="{open ? menuId : undefined}"
-        aria-owns="{open ? menuId : undefined}"
-        disabled="{disabled}"
-        placeholder="{placeholder}"
-        id="{id}"
-        name="{name}"
+        aria-expanded={open}
+        aria-activedescendant={highlightedId}
+        aria-labelledby={comboId}
+        aria-disabled={disabled}
+        aria-controls={open ? menuId : undefined}
+        aria-owns={open ? menuId : undefined}
+        {disabled}
+        {placeholder}
+        {id}
+        {name}
         {...$$restProps}
-        class:bx--text-input="{true}"
-        class:bx--text-input--light="{light}"
-        class:bx--text-input--empty="{value === ''}"
-        on:input="{({ target }) => {
+        class:bx--text-input={true}
+        class:bx--text-input--light={light}
+        class:bx--text-input--empty={value === ""}
+        on:input={({ target }) => {
           if (!open && target.value.length > 0) {
             open = true;
           }
@@ -286,14 +282,14 @@
             clear();
             open = true;
           }
-        }}"
+        }}
         on:keydown
-        on:keydown|stopPropagation="{(e) => {
+        on:keydown|stopPropagation={(e) => {
           const { key } = e;
-          if (['Enter', 'ArrowDown', 'ArrowUp'].includes(key)) {
+          if (["Enter", "ArrowDown", "ArrowUp"].includes(key)) {
             e.preventDefault();
           }
-          if (key === 'Enter') {
+          if (key === "Enter") {
             open = !open;
             if (
               highlightedIndex > -1 &&
@@ -310,7 +306,8 @@
               const matchedItem =
                 filteredItems.find(
                   (e) =>
-                    e.text.toLowerCase() === value?.toLowerCase() && !e.disabled
+                    e.text.toLowerCase() === value?.toLowerCase() &&
+                    !e.disabled,
                 ) ?? filteredItems.find((e) => !e.disabled);
               if (matchedItem) {
                 // typed value has matched or fallback to first enabled item
@@ -321,30 +318,30 @@
               }
             }
             highlightedIndex = -1;
-          } else if (key === 'Tab') {
+          } else if (key === "Tab") {
             open = false;
-          } else if (key === 'ArrowDown') {
+          } else if (key === "ArrowDown") {
             change(1);
-          } else if (key === 'ArrowUp') {
+          } else if (key === "ArrowUp") {
             change(-1);
-          } else if (key === 'Escape') {
+          } else if (key === "Escape") {
             open = false;
           }
-        }}"
+        }}
         on:keyup
         on:focus
         on:blur
-        on:blur="{({ relatedTarget }) => {
+        on:blur={({ relatedTarget }) => {
           if (!open || !relatedTarget) return;
           if (
             relatedTarget &&
-            !['INPUT', 'SELECT', 'TEXTAREA'].includes(relatedTarget.tagName) &&
-            relatedTarget.getAttribute('role') !== 'button' &&
-            relatedTarget.getAttribute('role') !== 'searchbox'
+            !["INPUT", "SELECT", "TEXTAREA"].includes(relatedTarget.tagName) &&
+            relatedTarget.getAttribute("role") !== "button" &&
+            relatedTarget.getAttribute("role") !== "searchbox"
           ) {
             ref.focus();
           }
-        }}"
+        }}
         on:paste
       />
       {#if invalid}
@@ -358,36 +355,31 @@
       {#if value}
         <ListBoxSelection
           on:clear
-          on:clear="{clear}"
-          translateWithId="{translateWithIdSelection}"
-          disabled="{disabled}"
-          open="{open}"
+          on:clear={clear}
+          translateWithId={translateWithIdSelection}
+          {disabled}
+          {open}
         />
       {/if}
       <ListBoxMenuIcon
-        on:click="{(e) => {
+        on:click={(e) => {
           if (disabled) return;
           e.stopPropagation();
           open = !open;
-        }}"
-        translateWithId="{translateWithId}"
-        open="{open}"
+        }}
+        {translateWithId}
+        {open}
       />
     </ListBoxField>
     {#if open}
-      <ListBoxMenu
-        aria-label="{ariaLabel}"
-        id="{id}"
-        on:scroll
-        bind:ref="{listRef}"
-      >
+      <ListBoxMenu aria-label={ariaLabel} {id} on:scroll bind:ref={listRef}>
         {#each filteredItems as item, i (item.id)}
           <ListBoxMenuItem
-            id="{item.id}"
-            active="{selectedId === item.id}"
-            highlighted="{highlightedIndex === i}"
-            disabled="{item.disabled}"
-            on:click="{(e) => {
+            id={item.id}
+            active={selectedId === item.id}
+            highlighted={highlightedIndex === i}
+            disabled={item.disabled}
+            on:click={(e) => {
               if (item.disabled) {
                 e.stopPropagation();
                 return;
@@ -398,13 +390,13 @@
               if (filteredItems[i]) {
                 value = itemToString(filteredItems[i]);
               }
-            }}"
-            on:mouseenter="{() => {
+            }}
+            on:mouseenter={() => {
               if (item.disabled) return;
               highlightedIndex = i;
-            }}"
+            }}
           >
-            <slot item="{item}" index="{i}">
+            <slot {item} index={i}>
               {itemToString(item)}
             </slot>
             {#if selectedItem && selectedItem.id === item.id}
@@ -417,8 +409,8 @@
   </ListBox>
   {#if !invalid && helperText && !warn}
     <div
-      class:bx--form__helper-text="{true}"
-      class:bx--form__helper-text--disabled="{disabled}"
+      class:bx--form__helper-text={true}
+      class:bx--form__helper-text--disabled={disabled}
     >
       {helperText}
     </div>
diff --git a/src/ComposedModal/ComposedModal.svelte b/src/ComposedModal/ComposedModal.svelte
index e63f38e6..bd7fa82e 100644
--- a/src/ComposedModal/ComposedModal.svelte
+++ b/src/ComposedModal/ComposedModal.svelte
@@ -98,18 +98,18 @@
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
-  bind:this="{ref}"
+  bind:this={ref}
   role="presentation"
-  class:bx--modal="{true}"
-  class:is-visible="{open}"
-  class:bx--modal--danger="{danger}"
+  class:bx--modal={true}
+  class:is-visible={open}
+  class:bx--modal--danger={danger}
   {...$$restProps}
   on:keydown
-  on:keydown="{(e) => {
+  on:keydown={(e) => {
     if (open) {
-      if (e.key === 'Escape') {
+      if (e.key === "Escape") {
         open = false;
-      } else if (e.key === 'Tab') {
+      } else if (e.key === "Tab") {
         // taken from github.com/carbon-design-system/carbon/packages/react/src/internal/keyboard/navigation.js
         const selectorTabbable = `
   a[href], area[href], input:not([disabled]):not([tabindex='-1']),
@@ -130,41 +130,41 @@
         e.preventDefault();
       }
     }
-  }}"
+  }}
   on:click
-  on:click="{() => {
+  on:click={() => {
     if (!didClickInnerModal && !preventCloseOnClickOutside) open = false;
     didClickInnerModal = false;
-  }}"
+  }}
   on:mouseover
   on:mouseenter
   on:mouseleave
-  on:transitionend="{({ propertyName, currentTarget }) => {
-    if (propertyName === 'transform') {
-      dispatch('transitionend', { open });
+  on:transitionend={({ propertyName, currentTarget }) => {
+    if (propertyName === "transform") {
+      dispatch("transitionend", { open });
     }
 
     if (didOpen) {
       focus(currentTarget);
       didOpen = false;
     }
-  }}"
+  }}
 >
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
   <div
-    bind:this="{innerModal}"
+    bind:this={innerModal}
     role="dialog"
     aria-modal="true"
-    aria-label="{$$props['aria-label'] || $label || undefined}"
-    class:bx--modal-container="{true}"
-    class:bx--modal-container--xs="{size === 'xs'}"
-    class:bx--modal-container--sm="{size === 'sm'}"
-    class:bx--modal-container--lg="{size === 'lg'}"
-    class="{containerClass}"
-    on:click="{() => {
+    aria-label={$$props["aria-label"] || $label || undefined}
+    class:bx--modal-container={true}
+    class:bx--modal-container--xs={size === "xs"}
+    class:bx--modal-container--sm={size === "sm"}
+    class:bx--modal-container--lg={size === "lg"}
+    class={containerClass}
+    on:click={() => {
       didClickInnerModal = true;
-    }}"
+    }}
   >
     <slot />
   </div>
diff --git a/src/ComposedModal/ModalBody.svelte b/src/ComposedModal/ModalBody.svelte
index 12b95ef0..91bd89b2 100644
--- a/src/ComposedModal/ModalBody.svelte
+++ b/src/ComposedModal/ModalBody.svelte
@@ -8,15 +8,15 @@
 
 <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 <div
-  tabindex="{hasScrollingContent ? '0' : undefined}"
-  role="{hasScrollingContent ? 'region' : undefined}"
-  class:bx--modal-content="{true}"
-  class:bx--modal-content--with-form="{hasForm}"
-  class:bx--modal-scroll-content="{hasScrollingContent}"
+  tabindex={hasScrollingContent ? "0" : undefined}
+  role={hasScrollingContent ? "region" : undefined}
+  class:bx--modal-content={true}
+  class:bx--modal-content--with-form={hasForm}
+  class:bx--modal-scroll-content={hasScrollingContent}
   {...$$restProps}
 >
   <slot />
 </div>
 {#if hasScrollingContent}
-  <div class:bx--modal-content--overflow-indicator="{true}"></div>
+  <div class:bx--modal-content--overflow-indicator={true}></div>
 {/if}
diff --git a/src/ComposedModal/ModalFooter.svelte b/src/ComposedModal/ModalFooter.svelte
index a90be397..b51936c1 100644
--- a/src/ComposedModal/ModalFooter.svelte
+++ b/src/ComposedModal/ModalFooter.svelte
@@ -48,17 +48,17 @@
 </script>
 
 <div
-  class:bx--modal-footer="{true}"
-  class:bx--modal-footer--three-button="{secondaryButtons.length === 2}"
+  class:bx--modal-footer={true}
+  class:bx--modal-footer--three-button={secondaryButtons.length === 2}
   {...$$restProps}
 >
   {#if secondaryButtons.length > 0}
     {#each secondaryButtons as button}
       <Button
         kind="secondary"
-        on:click="{() => {
-          dispatch('click:button--secondary', { text: button.text });
-        }}"
+        on:click={() => {
+          dispatch("click:button--secondary", { text: button.text });
+        }}
       >
         {button.text}
       </Button>
@@ -66,22 +66,22 @@
   {:else if secondaryButtonText}
     <Button
       kind="secondary"
-      class="{secondaryClass}"
-      on:click="{() => {
+      class={secondaryClass}
+      on:click={() => {
         closeModal();
-        dispatch('click:button--secondary', { text: secondaryButtonText });
-      }}"
+        dispatch("click:button--secondary", { text: secondaryButtonText });
+      }}
     >
       {secondaryButtonText}
     </Button>
   {/if}
   {#if primaryButtonText}
     <Button
-      kind="{danger ? 'danger' : 'primary'}"
-      disabled="{primaryButtonDisabled}"
-      class="{primaryClass}"
-      icon="{primaryButtonIcon}"
-      on:click="{submit}"
+      kind={danger ? "danger" : "primary"}
+      disabled={primaryButtonDisabled}
+      class={primaryClass}
+      icon={primaryButtonIcon}
+      on:click={submit}
     >
       {primaryButtonText}
     </Button>
diff --git a/src/ComposedModal/ModalHeader.svelte b/src/ComposedModal/ModalHeader.svelte
index f3b5c069..c59debb6 100644
--- a/src/ComposedModal/ModalHeader.svelte
+++ b/src/ComposedModal/ModalHeader.svelte
@@ -28,21 +28,21 @@
   $: updateLabel(label);
 </script>
 
-<div class:bx--modal-header="{true}" {...$$restProps}>
+<div class:bx--modal-header={true} {...$$restProps}>
   {#if label}
     <h2
-      class:bx--modal-header__label="{true}"
-      class:bx--type-delta="{true}"
-      class="{labelClass}"
+      class:bx--modal-header__label={true}
+      class:bx--type-delta={true}
+      class={labelClass}
     >
       {label}
     </h2>
   {/if}
   {#if title}
     <h3
-      class:bx--modal-header__heading="{true}"
-      class:bx--type-beta="{true}"
-      class="{titleClass}"
+      class:bx--modal-header__heading={true}
+      class:bx--type-beta={true}
+      class={titleClass}
     >
       {title}
     </h3>
@@ -50,14 +50,14 @@
   <slot />
   <button
     type="button"
-    aria-label="{iconDescription}"
-    class:bx--modal-close="{true}"
-    class="{closeClass}"
+    aria-label={iconDescription}
+    class:bx--modal-close={true}
+    class={closeClass}
     on:click
-    on:click="{closeModal}"
+    on:click={closeModal}
   >
     <Close
-      size="{20}"
+      size={20}
       class="bx--modal-close__icon {closeIconClass}"
       aria-hidden="true"
     />
diff --git a/src/ContentSwitcher/ContentSwitcher.svelte b/src/ContentSwitcher/ContentSwitcher.svelte
index 3cd822e9..e2707e4c 100644
--- a/src/ContentSwitcher/ContentSwitcher.svelte
+++ b/src/ContentSwitcher/ContentSwitcher.svelte
@@ -61,9 +61,9 @@
 <!-- svelte-ignore a11y-interactive-supports-focus -->
 <div
   role="tablist"
-  class:bx--content-switcher="{true}"
-  class:bx--content-switcher--sm="{size === 'sm'}"
-  class:bx--content-switcher--xl="{size === 'xl'}"
+  class:bx--content-switcher={true}
+  class:bx--content-switcher--sm={size === "sm"}
+  class:bx--content-switcher--xl={size === "xl"}
   {...$$restProps}
   on:click
   on:mouseover
diff --git a/src/ContentSwitcher/Switch.svelte b/src/ContentSwitcher/Switch.svelte
index 910889a5..1a82a67e 100644
--- a/src/ContentSwitcher/Switch.svelte
+++ b/src/ContentSwitcher/Switch.svelte
@@ -40,33 +40,33 @@
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <button
-  bind:this="{ref}"
+  bind:this={ref}
   type="button"
   role="tab"
-  tabindex="{selected ? '0' : '-1'}"
-  aria-selected="{selected}"
-  disabled="{disabled}"
-  id="{id}"
-  class:bx--content-switcher-btn="{true}"
-  class:bx--content-switcher--selected="{selected}"
+  tabindex={selected ? "0" : "-1"}
+  aria-selected={selected}
+  {disabled}
+  {id}
+  class:bx--content-switcher-btn={true}
+  class:bx--content-switcher--selected={selected}
   {...$$restProps}
   on:click
-  on:click|preventDefault="{() => {
+  on:click|preventDefault={() => {
     ctx.update(id);
-  }}"
+  }}
   on:mouseover
   on:mouseenter
   on:mouseleave
   on:keydown
-  on:keydown="{({ key }) => {
-    if (key === 'ArrowRight') {
+  on:keydown={({ key }) => {
+    if (key === "ArrowRight") {
       ctx.change(1);
-    } else if (key === 'ArrowLeft') {
+    } else if (key === "ArrowLeft") {
       ctx.change(-1);
     }
-  }}"
+  }}
 >
-  <span class:bx--content-switcher__label="{true}">
+  <span class:bx--content-switcher__label={true}>
     <slot>{text}</slot>
   </span>
 </button>
diff --git a/src/ContextMenu/ContextMenu.svelte b/src/ContextMenu/ContextMenu.svelte
index 283d7772..a03da2cb 100644
--- a/src/ContextMenu/ContextMenu.svelte
+++ b/src/ContextMenu/ContextMenu.svelte
@@ -97,7 +97,7 @@
       if (target != null) {
         if (Array.isArray(target)) {
           target.forEach((node) =>
-            node?.removeEventListener("contextmenu", openMenu)
+            node?.removeEventListener("contextmenu", openMenu),
           );
         } else {
           target.removeEventListener("contextmenu", openMenu);
@@ -139,58 +139,58 @@
 </script>
 
 <svelte:window
-  on:contextmenu="{(e) => {
+  on:contextmenu={(e) => {
     if (target != null) return;
     if (level > 1) return;
     if (!ref) return;
     openMenu(e);
-  }}"
-  on:click="{(e) => {
+  }}
+  on:click={(e) => {
     if (!open) return;
     close();
-  }}"
-  on:keydown="{(e) => {
-    if (open && e.key === 'Escape') close();
-  }}"
+  }}
+  on:keydown={(e) => {
+    if (open && e.key === "Escape") close();
+  }}
 />
 
 <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
 <ul
-  bind:this="{ref}"
+  bind:this={ref}
   role="menu"
   tabindex="-1"
-  data-direction="{direction}"
-  data-level="{level}"
-  class:bx--menu="{true}"
-  class:bx--menu--open="{open}"
-  class:bx--menu--invisible="{open && x === 0 && y === 0}"
-  class:bx--menu--root="{level === 1}"
+  data-direction={direction}
+  data-level={level}
+  class:bx--menu={true}
+  class:bx--menu--open={open}
+  class:bx--menu--invisible={open && x === 0 && y === 0}
+  class:bx--menu--root={level === 1}
   style:left="{x}px"
   style:top="{y}px"
   {...$$restProps}
   on:click
-  on:click="{({ target }) => {
-    const closestOption = target.closest('[tabindex]');
+  on:click={({ target }) => {
+    const closestOption = target.closest("[tabindex]");
 
-    if (closestOption && closestOption.getAttribute('role') !== 'menuitem') {
+    if (closestOption && closestOption.getAttribute("role") !== "menuitem") {
       close();
     }
-  }}"
+  }}
   on:keydown
-  on:keydown="{(e) => {
+  on:keydown={(e) => {
     if (open) e.preventDefault();
     if ($hasPopup) return;
 
-    if (e.key === 'ArrowDown') {
+    if (e.key === "ArrowDown") {
       if (focusIndex < options.length - 1) focusIndex++;
-    } else if (e.key === 'ArrowUp') {
+    } else if (e.key === "ArrowUp") {
       if (focusIndex === -1) {
         focusIndex = options.length - 1;
       } else {
         if (focusIndex > 0) focusIndex--;
       }
     }
-  }}"
+  }}
 >
   <slot />
 </ul>
diff --git a/src/ContextMenu/ContextMenuDivider.svelte b/src/ContextMenu/ContextMenuDivider.svelte
index e37d8b60..9bfae595 100644
--- a/src/ContextMenu/ContextMenuDivider.svelte
+++ b/src/ContextMenu/ContextMenuDivider.svelte
@@ -1 +1 @@
-<li role="separator" class:bx--menu-divider="{true}"></li>
+<li role="separator" class:bx--menu-divider={true}></li>
diff --git a/src/ContextMenu/ContextMenuGroup.svelte b/src/ContextMenu/ContextMenuGroup.svelte
index c38d683a..7850f043 100644
--- a/src/ContextMenu/ContextMenuGroup.svelte
+++ b/src/ContextMenu/ContextMenuGroup.svelte
@@ -30,7 +30,7 @@
 </script>
 
 <li role="none">
-  <ul role="group" aria-label="{labelText}">
+  <ul role="group" aria-label={labelText}>
     <slot />
   </ul>
 </li>
diff --git a/src/ContextMenu/ContextMenuOption.svelte b/src/ContextMenu/ContextMenuOption.svelte
index 6f8e2194..f8277277 100644
--- a/src/ContextMenu/ContextMenuOption.svelte
+++ b/src/ContextMenu/ContextMenuOption.svelte
@@ -167,46 +167,46 @@
 </script>
 
 <li
-  bind:this="{ref}"
-  role="{role}"
+  bind:this={ref}
+  {role}
   tabindex="-1"
-  aria-disabled="{!subOptions && disabled}"
-  aria-haspopup="{subOptions ? true : undefined}"
-  aria-expanded="{subOptions ? submenuOpen : undefined}"
-  class:bx--menu-option="{true}"
-  class:bx--menu-option--disabled="{true}"
-  class:bx--menu-option--active="{subOptions && submenuOpen}"
-  class:bx--menu-option--danger="{!subOptions && kind === 'danger'}"
-  indented="{indented}"
-  aria-checked="{isSelectable || isRadio ? selected : undefined}"
-  data-nested="{ref &&
-    ref.closest('.bx--menu').getAttribute('data-level') === '2'}"
-  data-sub="{subOptions}"
-  data-id="{id}"
+  aria-disabled={!subOptions && disabled}
+  aria-haspopup={subOptions ? true : undefined}
+  aria-expanded={subOptions ? submenuOpen : undefined}
+  class:bx--menu-option={true}
+  class:bx--menu-option--disabled={true}
+  class:bx--menu-option--active={subOptions && submenuOpen}
+  class:bx--menu-option--danger={!subOptions && kind === "danger"}
+  {indented}
+  aria-checked={isSelectable || isRadio ? selected : undefined}
+  data-nested={ref &&
+    ref.closest(".bx--menu").getAttribute("data-level") === "2"}
+  data-sub={subOptions}
+  data-id={id}
   {...$$restProps}
   on:keydown
-  on:keydown="{async ({ key, target }) => {
+  on:keydown={async ({ key, target }) => {
     if (
       subOptions &&
-      (key === 'ArrowRight' || key === ' ' || key === 'Enter')
+      (key === "ArrowRight" || key === " " || key === "Enter")
     ) {
       submenuOpen = true;
       await tick();
-      options = [...ref.querySelectorAll('li[tabindex]')];
+      options = [...ref.querySelectorAll("li[tabindex]")];
       if (options[focusIndex]) options[focusIndex].focus();
       return;
     }
 
     if (submenuOpen) {
-      if (key === 'ArrowLeft') {
+      if (key === "ArrowLeft") {
         submenuOpen = false;
         focusIndex = 0;
         return;
       }
 
-      if (key === 'ArrowDown') {
+      if (key === "ArrowDown") {
         if (focusIndex < options.length - 1) focusIndex++;
-      } else if (key === 'ArrowUp') {
+      } else if (key === "ArrowUp") {
         if (focusIndex === -1) {
           focusIndex = options.length - 1;
         } else {
@@ -217,68 +217,68 @@
       if (options[focusIndex]) options[focusIndex].focus();
     }
 
-    if (key === ' ' || key === 'Enter') {
-      handleClick({ fromKeyboard: true, id: target.getAttribute('data-id') });
+    if (key === " " || key === "Enter") {
+      handleClick({ fromKeyboard: true, id: target.getAttribute("data-id") });
     }
-  }}"
+  }}
   on:mouseenter
-  on:mouseenter="{() => {
+  on:mouseenter={() => {
     if (subOptions) {
       timeoutHover = setTimeout(() => {
         submenuOpen = true;
       }, moderate01);
     }
-  }}"
+  }}
   on:mouseleave
-  on:mouseleave="{(e) => {
+  on:mouseleave={(e) => {
     if (subOptions) {
-      if (typeof timeoutHover === 'number') clearTimeout(timeoutHover);
+      if (typeof timeoutHover === "number") clearTimeout(timeoutHover);
       submenuOpen = false;
     }
-  }}"
-  on:click="{handleClick}"
+  }}
+  on:click={handleClick}
 >
   {#if subOptions}
     <div
-      class:bx--menu-option__content="{true}"
-      class:bx--menu-option__content--disabled="{disabled}"
+      class:bx--menu-option__content={true}
+      class:bx--menu-option__content--disabled={disabled}
     >
       {#if indented}
-        <div class:bx--menu-option__icon="{true}">
+        <div class:bx--menu-option__icon={true}>
           <slot name="icon">
-            <svelte:component this="{icon}" />
+            <svelte:component this={icon} />
           </slot>
         </div>
       {/if}
-      <span class:bx--menu-option__label="{true}" title="{labelText}">
+      <span class:bx--menu-option__label={true} title={labelText}>
         <slot name="labelText">{labelText}</slot>
       </span>
-      <div class:bx--menu-option__info="{true}"><CaretRight /></div>
+      <div class:bx--menu-option__info={true}><CaretRight /></div>
     </div>
 
     <ContextMenu
-      open="{submenuOpen}"
-      x="{submenuPosition[0]}"
-      y="{submenuPosition[1]}"
+      open={submenuOpen}
+      x={submenuPosition[0]}
+      y={submenuPosition[1]}
     >
       <slot />
     </ContextMenu>
   {:else}
     <div
-      class:bx--menu-option__content="{true}"
-      class:bx--menu-option__content--disabled="{disabled}"
+      class:bx--menu-option__content={true}
+      class:bx--menu-option__content--disabled={disabled}
     >
       {#if indented}
-        <div class:bx--menu-option__icon="{true}">
+        <div class:bx--menu-option__icon={true}>
           <slot name="icon">
-            <svelte:component this="{icon}" />
+            <svelte:component this={icon} />
           </slot>
         </div>
       {/if}
-      <span class:bx--menu-option__label="{true}" title="{labelText}">
+      <span class:bx--menu-option__label={true} title={labelText}>
         <slot name="labelText">{labelText}</slot>
       </span>
-      <div class:bx--menu-option__info="{true}">
+      <div class:bx--menu-option__info={true}>
         <slot name="shortcutText">{shortcutText}</slot>
       </div>
     </div>
diff --git a/src/ContextMenu/ContextMenuRadioGroup.svelte b/src/ContextMenu/ContextMenuRadioGroup.svelte
index 5d6bc593..3b4938a2 100644
--- a/src/ContextMenu/ContextMenuRadioGroup.svelte
+++ b/src/ContextMenu/ContextMenuRadioGroup.svelte
@@ -28,7 +28,7 @@
 </script>
 
 <li role="none">
-  <ul role="group" aria-label="{labelText}">
+  <ul role="group" aria-label={labelText}>
     <slot />
   </ul>
 </li>
diff --git a/src/CopyButton/CopyButton.svelte b/src/CopyButton/CopyButton.svelte
index c593b5ac..03eba49a 100644
--- a/src/CopyButton/CopyButton.svelte
+++ b/src/CopyButton/CopyButton.svelte
@@ -43,39 +43,39 @@
 <button
   type="button"
   aria-live="polite"
-  class:bx--copy-btn="{true}"
-  class:bx--copy="{true}"
-  class:bx--copy-btn--animating="{animation}"
-  class:bx--copy-btn--fade-in="{animation === 'fade-in'}"
-  class:bx--copy-btn--fade-out="{animation === 'fade-out'}"
-  aria-label="{iconDescription}"
-  title="{iconDescription}"
+  class:bx--copy-btn={true}
+  class:bx--copy={true}
+  class:bx--copy-btn--animating={animation}
+  class:bx--copy-btn--fade-in={animation === "fade-in"}
+  class:bx--copy-btn--fade-out={animation === "fade-out"}
+  aria-label={iconDescription}
+  title={iconDescription}
   {...$$restProps}
   on:click
-  on:click="{() => {
+  on:click={() => {
     if (text !== undefined) {
       copy(text);
-      dispatch('copy');
+      dispatch("copy");
     }
 
-    if (animation === 'fade-in') return;
-    animation = 'fade-in';
+    if (animation === "fade-in") return;
+    animation = "fade-in";
     timeout = setTimeout(() => {
-      animation = 'fade-out';
+      animation = "fade-out";
     }, feedbackTimeout);
-  }}"
+  }}
   on:animationend
-  on:animationend="{({ animationName }) => {
-    if (animationName === 'hide-feedback') {
+  on:animationend={({ animationName }) => {
+    if (animationName === "hide-feedback") {
       animation = undefined;
     }
-  }}"
+  }}
 >
   <Copy class="bx--snippet__icon" />
   <span
     aria-hidden="true"
-    class:bx--assistive-text="{true}"
-    class:bx--copy-btn__feedback="{true}"
+    class:bx--assistive-text={true}
+    class:bx--copy-btn__feedback={true}
   >
     {feedback}
   </span>
diff --git a/src/DataTable/DataTable.svelte b/src/DataTable/DataTable.svelte
index 01755445..0d27e08d 100644
--- a/src/DataTable/DataTable.svelte
+++ b/src/DataTable/DataTable.svelte
@@ -227,7 +227,7 @@
 
   $: expandedRows = expandedRowIds.reduce(
     (a, id) => ({ ...a, [id]: true }),
-    {}
+    {},
   );
 
   let refSelectAll = null;
@@ -235,10 +235,10 @@
   $: batchSelectedIds.set(selectedRowIds);
   $: rowIds = $tableRows.map((row) => row.id);
   $: expandableRowIds = rowIds.filter(
-    (id) => !nonExpandableRowIds.includes(id)
+    (id) => !nonExpandableRowIds.includes(id),
   );
   $: selectableRowIds = rowIds.filter(
-    (id) => !nonSelectableRowIds.includes(id)
+    (id) => !nonSelectableRowIds.includes(id),
   );
   $: selectAll =
     selectableRowIds.length > 0 &&
@@ -300,7 +300,7 @@
   $: displayedSortedRows = getDisplayedRows(sortedRows, page, pageSize);
 
   $: hasCustomHeaderWidth = headers.some(
-    (header) => header.width || header.minWidth
+    (header) => header.width || header.minWidth,
   );
 
   /** @type {(header: DataTableHeader) => undefined | string} */
@@ -314,16 +314,16 @@
   };
 </script>
 
-<TableContainer useStaticWidth="{useStaticWidth}" {...$$restProps}>
+<TableContainer {useStaticWidth} {...$$restProps}>
   {#if title || $$slots.title || description || $$slots.description}
-    <div class:bx--data-table-header="{true}">
+    <div class:bx--data-table-header={true}>
       {#if title || $$slots.title}
-        <h4 class:bx--data-table-header__title="{true}">
+        <h4 class:bx--data-table-header__title={true}>
           <slot name="title">{title}</slot>
         </h4>
       {/if}
       {#if description || $$slots.description}
-        <p class:bx--data-table-header__description="{true}">
+        <p class:bx--data-table-header__description={true}>
           <slot name="description">{description}</slot>
         </p>
       {/if}
@@ -331,31 +331,31 @@
   {/if}
   <slot />
   <Table
-    zebra="{zebra}"
-    size="{size}"
-    stickyHeader="{stickyHeader}"
-    sortable="{sortable}"
-    useStaticWidth="{useStaticWidth}"
-    tableStyle="{hasCustomHeaderWidth && 'table-layout: fixed'}"
+    {zebra}
+    {size}
+    {stickyHeader}
+    {sortable}
+    {useStaticWidth}
+    tableStyle={hasCustomHeaderWidth && "table-layout: fixed"}
   >
     <TableHead>
       <TableRow>
         {#if expandable}
           <th
             scope="col"
-            class:bx--table-expand="{true}"
-            data-previous-value="{expanded ? 'collapsed' : undefined}"
+            class:bx--table-expand={true}
+            data-previous-value={expanded ? "collapsed" : undefined}
           >
             {#if batchExpansion}
               <button
                 type="button"
-                class:bx--table-expand__button="{true}"
-                on:click="{() => {
+                class:bx--table-expand__button={true}
+                on:click={() => {
                   expanded = !expanded;
                   expandedRowIds = expanded ? expandableRowIds : [];
 
-                  dispatch('click:header--expand', { expanded });
-                }}"
+                  dispatch("click:header--expand", { expanded });
+                }}
               >
                 <ChevronRight class="bx--table-expand__svg" />
               </button>
@@ -366,14 +366,14 @@
           <th scope="col"></th>
         {/if}
         {#if batchSelection && !radio}
-          <th scope="col" class:bx--table-column-checkbox="{true}">
+          <th scope="col" class:bx--table-column-checkbox={true}>
             <InlineCheckbox
-              bind:ref="{refSelectAll}"
+              bind:ref={refSelectAll}
               aria-label="Select all rows"
-              checked="{selectAll}"
-              indeterminate="{indeterminate}"
-              on:change="{(e) => {
-                dispatch('click:header--select', {
+              checked={selectAll}
+              {indeterminate}
+              on:change={(e) => {
+                dispatch("click:header--select", {
                   indeterminate,
                   selected: !indeterminate && e.target.checked,
                 });
@@ -390,36 +390,36 @@
                 } else {
                   selectedRowIds = [];
                 }
-              }}"
+              }}
             />
           </th>
         {/if}
         {#each headers as header (header.key)}
           {#if header.empty}
-            <th scope="col" style="{formatHeaderWidth(header)}"></th>
+            <th scope="col" style={formatHeaderWidth(header)}></th>
           {:else}
             <TableHeader
-              id="{header.key}"
-              style="{formatHeaderWidth(header)}"
-              sortable="{sortable && header.sort !== false}"
-              sortDirection="{sortKey === header.key ? sortDirection : 'none'}"
-              active="{sortKey === header.key}"
-              on:click="{() => {
-                dispatch('click', { header });
+              id={header.key}
+              style={formatHeaderWidth(header)}
+              sortable={sortable && header.sort !== false}
+              sortDirection={sortKey === header.key ? sortDirection : "none"}
+              active={sortKey === header.key}
+              on:click={() => {
+                dispatch("click", { header });
 
                 if (header.sort === false) {
-                  dispatch('click:header', { header });
+                  dispatch("click:header", { header });
                 } else {
                   let currentSortDirection =
-                    sortKey === header.key ? sortDirection : 'none';
+                    sortKey === header.key ? sortDirection : "none";
                   sortDirection = sortDirectionMap[currentSortDirection];
                   sortKey =
-                    sortDirection === 'none' ? null : thKeys[header.key];
-                  dispatch('click:header', { header, sortDirection });
+                    sortDirection === "none" ? null : thKeys[header.key];
+                  dispatch("click:header", { header, sortDirection });
                 }
-              }}"
+              }}
             >
-              <slot name="cell-header" header="{header}">{header.value}</slot>
+              <slot name="cell-header" {header}>{header.value}</slot>
             </TableHeader>
           {/if}
         {/each}
@@ -428,8 +428,8 @@
     <TableBody>
       {#each sorting ? displayedSortedRows : displayedRows as row, i (row.id)}
         <TableRow
-          data-row="{row.id}"
-          data-parent-row="{expandable ? true : undefined}"
+          data-row={row.id}
+          data-parent-row={expandable ? true : undefined}
           class="{selectedRowIds.includes(row.id)
             ? 'bx--data-table--selected'
             : ''} {expandedRows[row.id] ? 'bx--expandable-row' : ''} {expandable
@@ -437,54 +437,54 @@
             : ''} {expandable && parentRowId === row.id
             ? 'bx--expandable-row--hover'
             : ''}"
-          on:click="{({ target }) => {
+          on:click={({ target }) => {
             // forgo "click", "click:row" events if target
             // resembles an overflow menu, a checkbox, or radio button
             if (
               [...target.classList].some((name) =>
-                /^bx--(overflow-menu|checkbox|radio-button)/.test(name)
+                /^bx--(overflow-menu|checkbox|radio-button)/.test(name),
               )
             ) {
               return;
             }
-            dispatch('click', { row });
-            dispatch('click:row', row);
-          }}"
-          on:mouseenter="{() => {
-            dispatch('mouseenter:row', row);
-          }}"
-          on:mouseleave="{() => {
-            dispatch('mouseleave:row', row);
-          }}"
+            dispatch("click", { row });
+            dispatch("click:row", row);
+          }}
+          on:mouseenter={() => {
+            dispatch("mouseenter:row", row);
+          }}
+          on:mouseleave={() => {
+            dispatch("mouseleave:row", row);
+          }}
         >
           {#if expandable}
             <TableCell
               class="bx--table-expand"
               headers="expand"
-              data-previous-value="{!nonExpandableRowIds.includes(row.id) &&
+              data-previous-value={!nonExpandableRowIds.includes(row.id) &&
               expandedRows[row.id]
-                ? 'collapsed'
-                : undefined}"
+                ? "collapsed"
+                : undefined}
             >
               {#if !nonExpandableRowIds.includes(row.id)}
                 <button
                   type="button"
-                  class:bx--table-expand__button="{true}"
-                  aria-label="{expandedRows[row.id]
-                    ? 'Collapse current row'
-                    : 'Expand current row'}"
-                  on:click|stopPropagation="{() => {
+                  class:bx--table-expand__button={true}
+                  aria-label={expandedRows[row.id]
+                    ? "Collapse current row"
+                    : "Expand current row"}
+                  on:click|stopPropagation={() => {
                     const rowExpanded = !!expandedRows[row.id];
 
                     expandedRowIds = rowExpanded
                       ? expandedRowIds.filter((id) => id !== row.id)
                       : [...expandedRowIds, row.id];
 
-                    dispatch('click:row--expand', {
+                    dispatch("click:row--expand", {
                       row,
                       expanded: !rowExpanded,
                     });
-                  }}"
+                  }}
                 >
                   <ChevronRight class="bx--table-expand__svg" />
                 </button>
@@ -493,34 +493,34 @@
           {/if}
           {#if selectable}
             <td
-              class:bx--table-column-checkbox="{true}"
-              class:bx--table-column-radio="{radio}"
+              class:bx--table-column-checkbox={true}
+              class:bx--table-column-radio={radio}
             >
               {#if !nonSelectableRowIds.includes(row.id)}
                 {#if radio}
                   <RadioButton
                     name="select-row-{row.id}"
-                    checked="{selectedRowIds.includes(row.id)}"
-                    on:change="{() => {
+                    checked={selectedRowIds.includes(row.id)}
+                    on:change={() => {
                       selectedRowIds = [row.id];
-                      dispatch('click:row--select', { row, selected: true });
-                    }}"
+                      dispatch("click:row--select", { row, selected: true });
+                    }}
                   />
                 {:else}
                   <InlineCheckbox
                     name="select-row-{row.id}"
-                    checked="{selectedRowIds.includes(row.id)}"
-                    on:change="{() => {
+                    checked={selectedRowIds.includes(row.id)}
+                    on:change={() => {
                       if (selectedRowIds.includes(row.id)) {
                         selectedRowIds = selectedRowIds.filter(
-                          (id) => id !== row.id
+                          (id) => id !== row.id,
                         );
-                        dispatch('click:row--select', { row, selected: false });
+                        dispatch("click:row--select", { row, selected: false });
                       } else {
                         selectedRowIds = [...selectedRowIds, row.id];
-                        dispatch('click:row--select', { row, selected: true });
+                        dispatch("click:row--select", { row, selected: true });
                       }
-                    }}"
+                    }}
                   />
                 {/if}
               {/if}
@@ -528,31 +528,19 @@
           {/if}
           {#each tableCellsByRowId[row.id] as cell, j (cell.key)}
             {#if headers[j].empty}
-              <td class:bx--table-column-menu="{headers[j].columnMenu}">
-                <slot
-                  name="cell"
-                  row="{row}"
-                  cell="{cell}"
-                  rowIndex="{i}"
-                  cellIndex="{j}"
-                >
+              <td class:bx--table-column-menu={headers[j].columnMenu}>
+                <slot name="cell" {row} {cell} rowIndex={i} cellIndex={j}>
                   {cell.display ? cell.display(cell.value, row) : cell.value}
                 </slot>
               </td>
             {:else}
               <TableCell
-                on:click="{() => {
-                  dispatch('click', { row, cell });
-                  dispatch('click:cell', cell);
-                }}"
+                on:click={() => {
+                  dispatch("click", { row, cell });
+                  dispatch("click:cell", cell);
+                }}
               >
-                <slot
-                  name="cell"
-                  row="{row}"
-                  cell="{cell}"
-                  rowIndex="{i}"
-                  cellIndex="{j}"
-                >
+                <slot name="cell" {row} {cell} rowIndex={i} cellIndex={j}>
                   {cell.display ? cell.display(cell.value, row) : cell.value}
                 </slot>
               </TableCell>
@@ -563,22 +551,22 @@
         {#if expandable}
           <tr
             data-child-row
-            class:bx--expandable-row="{true}"
-            on:mouseenter="{() => {
+            class:bx--expandable-row={true}
+            on:mouseenter={() => {
               if (nonExpandableRowIds.includes(row.id)) return;
               parentRowId = row.id;
-            }}"
-            on:mouseleave="{() => {
+            }}
+            on:mouseleave={() => {
               if (nonExpandableRowIds.includes(row.id)) return;
               parentRowId = null;
-            }}"
+            }}
           >
             {#if expandedRows[row.id] && !nonExpandableRowIds.includes(row.id)}
               <TableCell
-                colspan="{selectable ? headers.length + 2 : headers.length + 1}"
+                colspan={selectable ? headers.length + 2 : headers.length + 1}
               >
-                <div class:bx--child-row-inner-container="{true}">
-                  <slot name="expanded-row" row="{row}" />
+                <div class:bx--child-row-inner-container={true}>
+                  <slot name="expanded-row" {row} />
                 </div>
               </TableCell>
             {/if}
diff --git a/src/DataTable/DataTableSkeleton.svelte b/src/DataTable/DataTableSkeleton.svelte
index 9d759518..dca50a7b 100644
--- a/src/DataTable/DataTableSkeleton.svelte
+++ b/src/DataTable/DataTableSkeleton.svelte
@@ -33,45 +33,46 @@
   export let showToolbar = true;
 
   $: values = headers.map((header) =>
-    header.value !== undefined ? header.value : header
+    header.value !== undefined ? header.value : header,
   );
   $: cols = Array.from(
     { length: headers.length > 0 ? headers.length : columns },
-    (_, i) => i
+    (_, i) => i,
   );
 </script>
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
-  class:bx--skeleton="{true}"
-  class:bx--data-table-container="{true}"
+  class:bx--skeleton={true}
+  class:bx--data-table-container={true}
   {...$$restProps}
 >
   {#if showHeader}
-    <div class:bx--data-table-header="{true}">
-      <div class:bx--data-table-header__title="{true}"></div>
-      <div class:bx--data-table-header__description="{true}"></div>
+    <div class:bx--data-table-header={true}>
+      <div class:bx--data-table-header__title={true}></div>
+      <div class:bx--data-table-header__description={true}></div>
     </div>
   {/if}
   {#if showToolbar}
-    <section aria-label="data table toolbar" class:bx--table-toolbar="{true}">
-      <div class:bx--toolbar-content="{true}">
+    <section aria-label="data table toolbar" class:bx--table-toolbar={true}>
+      <div class:bx--toolbar-content={true}>
         <span
-          class:bx--skeleton="{true}"
-          class:bx--btn="{true}"
-          class:bx--btn--sm="{true}"></span>
+          class:bx--skeleton={true}
+          class:bx--btn={true}
+          class:bx--btn--sm={true}
+        ></span>
       </div>
     </section>
   {/if}
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
   <table
-    class:bx--skeleton="{true}"
-    class:bx--data-table="{true}"
-    class:bx--data-table--compact="{size === 'compact'}"
-    class:bx--data-table--short="{size === 'short'}"
-    class:bx--data-table--tall="{size === 'tall'}"
-    class:bx--data-table--zebra="{zebra}"
+    class:bx--skeleton={true}
+    class:bx--data-table={true}
+    class:bx--data-table--compact={size === "compact"}
+    class:bx--data-table--short={size === "short"}
+    class:bx--data-table--tall={size === "tall"}
+    class:bx--data-table--zebra={zebra}
     on:click
     on:mouseover
     on:mouseenter
diff --git a/src/DataTable/DataTableTypes.d.ts b/src/DataTable/DataTableTypes.d.ts
index 02fd5de9..c7c8c589 100644
--- a/src/DataTable/DataTableTypes.d.ts
+++ b/src/DataTable/DataTableTypes.d.ts
@@ -2,17 +2,17 @@ type PathDepth = [never, 0, 1, 2, ...0[]];
 
 type Join<K, P> = K extends string | number
   ? P extends string | number
-  ? `${K}${"" extends P ? "" : "."}${P}`
-  : never
+    ? `${K}${"" extends P ? "" : "."}${P}`
+    : never
   : never;
 
 // For performance, the maximum traversal depth is 10.
 export type PropertyPath<T, D extends number = 10> = [D] extends [never]
   ? never
   : T extends object
-  ? {
-    [K in keyof T]-?: K extends string | number
-    ? `${K}` | Join<K, PropertyPath<T[K], PathDepth[D]>>
-    : never;
-  }[keyof T]
-  : "";
+    ? {
+        [K in keyof T]-?: K extends string | number
+          ? `${K}` | Join<K, PropertyPath<T[K], PathDepth[D]>>
+          : never;
+      }[keyof T]
+    : "";
diff --git a/src/DataTable/Table.svelte b/src/DataTable/Table.svelte
index f1d5c81e..a8554439 100644
--- a/src/DataTable/Table.svelte
+++ b/src/DataTable/Table.svelte
@@ -25,35 +25,35 @@
 </script>
 
 {#if stickyHeader}
-  <section class:bx--data-table_inner-container="{true}" {...$$restProps}>
+  <section class:bx--data-table_inner-container={true} {...$$restProps}>
     <table
-      class:bx--data-table="{true}"
-      class:bx--data-table--compact="{size === 'compact'}"
-      class:bx--data-table--short="{size === 'short'}"
-      class:bx--data-table--tall="{size === 'tall'}"
-      class:bx--data-table--md="{size === 'medium'}"
-      class:bx--data-table--sort="{sortable}"
-      class:bx--data-table--zebra="{zebra}"
-      class:bx--data-table--static="{useStaticWidth}"
-      class:bx--data-table--sticky-header="{stickyHeader}"
-      style="{tableStyle}"
+      class:bx--data-table={true}
+      class:bx--data-table--compact={size === "compact"}
+      class:bx--data-table--short={size === "short"}
+      class:bx--data-table--tall={size === "tall"}
+      class:bx--data-table--md={size === "medium"}
+      class:bx--data-table--sort={sortable}
+      class:bx--data-table--zebra={zebra}
+      class:bx--data-table--static={useStaticWidth}
+      class:bx--data-table--sticky-header={stickyHeader}
+      style={tableStyle}
     >
       <slot />
     </table>
   </section>
 {:else}
   <table
-    class:bx--data-table="{true}"
-    class:bx--data-table--compact="{size === 'compact'}"
-    class:bx--data-table--short="{size === 'short'}"
-    class:bx--data-table--tall="{size === 'tall'}"
-    class:bx--data-table--md="{size === 'medium'}"
-    class:bx--data-table--sort="{sortable}"
-    class:bx--data-table--zebra="{zebra}"
-    class:bx--data-table--static="{useStaticWidth}"
-    class:bx--data-table--sticky-header="{stickyHeader}"
+    class:bx--data-table={true}
+    class:bx--data-table--compact={size === "compact"}
+    class:bx--data-table--short={size === "short"}
+    class:bx--data-table--tall={size === "tall"}
+    class:bx--data-table--md={size === "medium"}
+    class:bx--data-table--sort={sortable}
+    class:bx--data-table--zebra={zebra}
+    class:bx--data-table--static={useStaticWidth}
+    class:bx--data-table--sticky-header={stickyHeader}
     {...$$restProps}
-    style="{tableStyle}"
+    style={tableStyle}
   >
     <slot />
   </table>
diff --git a/src/DataTable/TableContainer.svelte b/src/DataTable/TableContainer.svelte
index 59dacf4c..275c93ab 100644
--- a/src/DataTable/TableContainer.svelte
+++ b/src/DataTable/TableContainer.svelte
@@ -13,15 +13,15 @@
 </script>
 
 <div
-  class:bx--data-table-container="{true}"
-  class:bx--data-table-container--static="{useStaticWidth}"
-  class:bx--data-table--max-width="{stickyHeader}"
+  class:bx--data-table-container={true}
+  class:bx--data-table-container--static={useStaticWidth}
+  class:bx--data-table--max-width={stickyHeader}
   {...$$restProps}
 >
   {#if title}
-    <div class:bx--data-table-header="{true}">
-      <h4 class:bx--data-table-header__title="{true}">{title}</h4>
-      <p class:bx--data-table-header__description="{true}">{description}</p>
+    <div class:bx--data-table-header={true}>
+      <h4 class:bx--data-table-header__title={true}>{title}</h4>
+      <p class:bx--data-table-header__description={true}>{description}</p>
     </div>
   {/if}
   <slot />
diff --git a/src/DataTable/TableHeader.svelte b/src/DataTable/TableHeader.svelte
index fb32c7b3..7e9a6496 100644
--- a/src/DataTable/TableHeader.svelte
+++ b/src/DataTable/TableHeader.svelte
@@ -33,9 +33,9 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 {#if sortable}
   <th
-    aria-sort="{active ? sortDirection : 'none'}"
-    scope="{scope}"
-    data-header="{id}"
+    aria-sort={active ? sortDirection : "none"}
+    {scope}
+    data-header={id}
     {...$$restProps}
     on:mouseover
     on:mouseenter
@@ -43,38 +43,33 @@
   >
     <button
       type="button"
-      class:bx--table-sort="{true}"
-      class:bx--table-sort--active="{active}"
-      class:bx--table-sort--ascending="{active &&
-        sortDirection === 'descending'}"
+      class:bx--table-sort={true}
+      class:bx--table-sort--active={active}
+      class:bx--table-sort--ascending={active && sortDirection === "descending"}
       on:click
     >
-      <div class:bx--table-header-label="{true}">
+      <div class:bx--table-header-label={true}>
         <slot />
       </div>
-      <ArrowUp
-        size="{20}"
-        aria-label="{ariaLabel}"
-        class="bx--table-sort__icon"
-      />
+      <ArrowUp size={20} aria-label={ariaLabel} class="bx--table-sort__icon" />
       <ArrowsVertical
-        size="{20}"
-        aria-label="{ariaLabel}"
+        size={20}
+        aria-label={ariaLabel}
         class="bx--table-sort__icon-unsorted"
       />
     </button>
   </th>
 {:else}
   <th
-    scope="{scope}"
-    data-header="{id}"
+    {scope}
+    data-header={id}
     {...$$restProps}
     on:click
     on:mouseover
     on:mouseenter
     on:mouseleave
   >
-    <div class:bx--table-header-label="{true}">
+    <div class:bx--table-header-label={true}>
       <slot />
     </div>
   </th>
diff --git a/src/DataTable/Toolbar.svelte b/src/DataTable/Toolbar.svelte
index 99b1f2cf..f8e3dc20 100644
--- a/src/DataTable/Toolbar.svelte
+++ b/src/DataTable/Toolbar.svelte
@@ -22,12 +22,12 @@
 </script>
 
 <section
-  bind:this="{ref}"
+  bind:this={ref}
   aria-label="data table toolbar"
-  class:bx--table-toolbar="{true}"
-  class:bx--table-toolbar--small="{size === 'sm'}"
-  class:bx--table-toolbar--normal="{size === 'default'}"
-  style:z-index="{1}"
+  class:bx--table-toolbar={true}
+  class:bx--table-toolbar--small={size === "sm"}
+  class:bx--table-toolbar--normal={size === "default"}
+  style:z-index={1}
   {...$$restProps}
 >
   <slot />
diff --git a/src/DataTable/ToolbarBatchActions.svelte b/src/DataTable/ToolbarBatchActions.svelte
index 81a24c9e..360cb044 100644
--- a/src/DataTable/ToolbarBatchActions.svelte
+++ b/src/DataTable/ToolbarBatchActions.svelte
@@ -76,21 +76,21 @@
 
 {#if !overflowVisible}
   <div
-    class:bx--batch-actions="{true}"
-    class:bx--batch-actions--active="{showActions}"
+    class:bx--batch-actions={true}
+    class:bx--batch-actions--active={showActions}
     {...$$restProps}
   >
-    <div class:bx--batch-summary="{true}">
-      <p class:bx--batch-summary__para="{true}">
+    <div class:bx--batch-summary={true}>
+      <p class:bx--batch-summary__para={true}>
         <span> {formatTotalSelected(batchSelectedIds.length)} </span>
       </p>
     </div>
-    <div class:bx--action-list="{true}">
+    <div class:bx--action-list={true}>
       <slot />
       <Button
         class="bx--batch-summary__cancel"
-        tabindex="{showActions ? '0' : '-1'}"
-        on:click="{cancel}"
+        tabindex={showActions ? "0" : "-1"}
+        on:click={cancel}
       >
         <slot name="cancel">Cancel</slot>
       </Button>
diff --git a/src/DataTable/ToolbarContent.svelte b/src/DataTable/ToolbarContent.svelte
index 4045772e..ba6a0ba5 100644
--- a/src/DataTable/ToolbarContent.svelte
+++ b/src/DataTable/ToolbarContent.svelte
@@ -1,3 +1,3 @@
-<div class:bx--toolbar-content="{true}">
+<div class:bx--toolbar-content={true}>
   <slot />
 </div>
diff --git a/src/DataTable/ToolbarMenu.svelte b/src/DataTable/ToolbarMenu.svelte
index 9fd0bb8a..50b22135 100644
--- a/src/DataTable/ToolbarMenu.svelte
+++ b/src/DataTable/ToolbarMenu.svelte
@@ -14,7 +14,7 @@
 
 <OverflowMenu
   bind:menuRef
-  icon="{Settings}"
+  icon={Settings}
   {...$$restProps}
   class="bx--toolbar-action bx--overflow-menu {$$restProps.class}"
   flipped
diff --git a/src/DataTable/ToolbarSearch.svelte b/src/DataTable/ToolbarSearch.svelte
index 7d0dc948..d9f33bcc 100644
--- a/src/DataTable/ToolbarSearch.svelte
+++ b/src/DataTable/ToolbarSearch.svelte
@@ -76,22 +76,22 @@
 </script>
 
 <Search
-  tabindex="{tabindex}"
-  disabled="{disabled}"
+  {tabindex}
+  {disabled}
   {...$$restProps}
   searchClass="{classes} {$$restProps.class}"
   bind:ref
   bind:value
   on:clear
-  on:clear="{expandSearch}"
+  on:clear={expandSearch}
   on:change
   on:input
   on:focus
-  on:focus="{expandSearch}"
+  on:focus={expandSearch}
   on:blur
-  on:blur="{() => {
+  on:blur={() => {
     expanded = !persistent && !!value.length;
-  }}"
+  }}
   on:keyup
   on:keydown
   on:paste
diff --git a/src/DatePicker/DatePicker.svelte b/src/DatePicker/DatePicker.svelte
index bbf96532..7b309fc6 100644
--- a/src/DatePicker/DatePicker.svelte
+++ b/src/DatePicker/DatePicker.svelte
@@ -80,7 +80,7 @@
   const inputIds = derived(inputs, (_) => _.map(({ id }) => id));
   const labelTextEmpty = derived(
     inputs,
-    (_) => _.filter(({ labelText }) => !!labelText).length === 0
+    (_) => _.filter(({ labelText }) => !!labelText).length === 0,
   );
   const inputValue = writable(value);
   const inputValueFrom = writable(valueFrom);
@@ -183,7 +183,7 @@
     calendar?.calendarContainer?.setAttribute("role", "application");
     calendar?.calendarContainer?.setAttribute(
       "aria-label",
-      "calendar-container"
+      "calendar-container",
     );
   }
 
@@ -230,17 +230,17 @@
 </script>
 
 <svelte:window
-  on:click="{({ target }) => {
+  on:click={({ target }) => {
     if (!calendar || !calendar.isOpen) return;
     if (datePickerRef && datePickerRef.contains(target)) return;
     if (!calendar.calendarContainer.contains(target)) calendar.close();
-  }}"
+  }}
 />
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class:bx--form-item="{true}"
+  class:bx--form-item={true}
   {...$$restProps}
   on:click
   on:mouseover
@@ -249,22 +249,22 @@
 >
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
-    bind:this="{datePickerRef}"
-    id="{id}"
-    class:bx--date-picker="{true}"
-    class:bx--date-picker--short="{short}"
-    class:bx--date-picker--light="{light}"
-    class:bx--date-picker--simple="{datePickerType === 'simple'}"
-    class:bx--date-picker--single="{datePickerType === 'single'}"
-    class:bx--date-picker--range="{datePickerType === 'range'}"
-    class:bx--date-picker--nolabel="{datePickerType === 'range' &&
-      $labelTextEmpty}"
-    on:keydown="{(e) => {
-      if (calendar?.isOpen && e.key === 'Escape') {
+    bind:this={datePickerRef}
+    {id}
+    class:bx--date-picker={true}
+    class:bx--date-picker--short={short}
+    class:bx--date-picker--light={light}
+    class:bx--date-picker--simple={datePickerType === "simple"}
+    class:bx--date-picker--single={datePickerType === "single"}
+    class:bx--date-picker--range={datePickerType === "range"}
+    class:bx--date-picker--nolabel={datePickerType === "range" &&
+      $labelTextEmpty}
+    on:keydown={(e) => {
+      if (calendar?.isOpen && e.key === "Escape") {
         e.stopPropagation();
         calendar.close();
       }
-    }}"
+    }}
   >
     <slot />
   </div>
diff --git a/src/DatePicker/DatePickerInput.svelte b/src/DatePicker/DatePickerInput.svelte
index ad4a3bd6..c7c900ad 100644
--- a/src/DatePicker/DatePickerInput.svelte
+++ b/src/DatePicker/DatePickerInput.svelte
@@ -79,15 +79,15 @@
 </script>
 
 <div
-  class:bx--date-picker-container="{true}"
-  class:bx--date-picker--nolabel="{!labelText}"
+  class:bx--date-picker-container={true}
+  class:bx--date-picker--nolabel={!labelText}
 >
   {#if labelText || $$slots.labelText}
     <label
-      for="{id}"
-      class:bx--label="{true}"
-      class:bx--visually-hidden="{hideLabel}"
-      class:bx--label--disabled="{disabled}"
+      for={id}
+      class:bx--label={true}
+      class:bx--visually-hidden={hideLabel}
+      class:bx--label--disabled={disabled}
     >
       <slot name="labelText">
         {labelText}
@@ -95,47 +95,47 @@
     </label>
   {/if}
   <div
-    class:bx--date-picker-input__wrapper="{true}"
-    class:bx--date-picker-input__wrapper--invalid="{invalid}"
-    class:bx--date-picker-input__wrapper--warn="{warn}"
+    class:bx--date-picker-input__wrapper={true}
+    class:bx--date-picker-input__wrapper--invalid={invalid}
+    class:bx--date-picker-input__wrapper--warn={warn}
   >
     <input
-      bind:this="{ref}"
-      data-invalid="{invalid || undefined}"
-      id="{id}"
-      name="{name}"
-      placeholder="{placeholder}"
-      type="{type}"
-      pattern="{pattern}"
-      disabled="{disabled}"
+      bind:this={ref}
+      data-invalid={invalid || undefined}
+      {id}
+      {name}
+      {placeholder}
+      {type}
+      {pattern}
+      {disabled}
       {...$$restProps}
-      value="{$range
+      value={$range
         ? $inputIds.indexOf(id) === 0
           ? $inputValueFrom
           : $inputValueTo
-        : $inputValue}"
-      class:bx--date-picker__input="{true}"
-      class:bx--date-picker__input--invalid="{invalid}"
-      class:bx--date-picker__input--sm="{size === 'sm'}"
-      class:bx--date-picker__input--xl="{size === 'xl'}"
+        : $inputValue}
+      class:bx--date-picker__input={true}
+      class:bx--date-picker__input--invalid={invalid}
+      class:bx--date-picker__input--sm={size === "sm"}
+      class:bx--date-picker__input--xl={size === "xl"}
       on:input
-      on:input="{({ target }) => {
-        updateValue({ type: 'input', value: target.value });
-      }}"
-      on:change="{({ target }) => {
-        updateValue({ type: 'change', value: target.value });
-      }}"
+      on:input={({ target }) => {
+        updateValue({ type: "input", value: target.value });
+      }}
+      on:change={({ target }) => {
+        updateValue({ type: "change", value: target.value });
+      }}
       on:keydown
-      on:keydown="{({ key }) => {
-        if (key === 'ArrowDown') {
+      on:keydown={({ key }) => {
+        if (key === "ArrowDown") {
           focusCalendar();
         }
-      }}"
+      }}
       on:keyup
       on:blur
-      on:blur="{({ relatedTarget }) => {
+      on:blur={({ relatedTarget }) => {
         blurInput(relatedTarget);
-      }}"
+      }}
       on:paste
     />
     {#if invalid}
@@ -151,21 +151,21 @@
     {#if $hasCalendar && !invalid && !warn}
       <Calendar
         class="bx--date-picker__icon"
-        aria-label="{iconDescription}"
-        on:click="{openCalendar}"
+        aria-label={iconDescription}
+        on:click={openCalendar}
       />
     {/if}
   </div>
   {#if invalid}
-    <div class:bx--form-requirement="{true}">{invalidText}</div>
+    <div class:bx--form-requirement={true}>{invalidText}</div>
   {/if}
   {#if !invalid && warn}
-    <div class:bx--form-requirement="{true}">{warnText}</div>
+    <div class:bx--form-requirement={true}>{warnText}</div>
   {/if}
   {#if !invalid && !warn && helperText}
     <div
-      class:bx--form__helper-text="{true}"
-      class:bx--form__helper-text--disabled="{disabled}"
+      class:bx--form__helper-text={true}
+      class:bx--form__helper-text--disabled={disabled}
     >
       {helperText}
     </div>
diff --git a/src/DatePicker/DatePickerSkeleton.svelte b/src/DatePicker/DatePickerSkeleton.svelte
index cabbd8fc..0c17c3e8 100644
--- a/src/DatePicker/DatePickerSkeleton.svelte
+++ b/src/DatePicker/DatePickerSkeleton.svelte
@@ -9,7 +9,7 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class:bx--form-item="{true}"
+  class:bx--form-item={true}
   {...$$restProps}
   on:click
   on:mouseover
@@ -17,18 +17,18 @@
   on:mouseleave
 >
   <div
-    class:bx--date-picker="{true}"
-    class:bx--skeleton="{true}"
-    class:bx--date-picker--range="{true}"
-    class:bx--date-picker--short="{!range}"
-    class:bx--date-picker--simple="{!range}"
+    class:bx--date-picker={true}
+    class:bx--skeleton={true}
+    class:bx--date-picker--range={true}
+    class:bx--date-picker--short={!range}
+    class:bx--date-picker--simple={!range}
   >
     {#each Array.from({ length: range ? 2 : 1 }, (_, i) => i) as input, i (input)}
-      <div class:bx--date-picker-container="{true}">
-        <label for="{id}" class:bx--label="{true}"></label>
+      <div class:bx--date-picker-container={true}>
+        <label for={id} class:bx--label={true}></label>
         <div
-          class:bx--date-picker__input="{true}"
-          class:bx--skeleton="{true}"
+          class:bx--date-picker__input={true}
+          class:bx--skeleton={true}
         ></div>
       </div>
     {/each}
diff --git a/src/Dropdown/Dropdown.svelte b/src/Dropdown/Dropdown.svelte
index 8567d0c3..a1928ac1 100644
--- a/src/Dropdown/Dropdown.svelte
+++ b/src/Dropdown/Dropdown.svelte
@@ -171,32 +171,32 @@
   });
 </script>
 
-<svelte:window on:click="{pageClickHandler}" />
+<svelte:window on:click={pageClickHandler} />
 
 <div
-  class:bx--dropdown__wrapper="{true}"
-  class:bx--list-box__wrapper="{true}"
-  class:bx--dropdown__wrapper--inline="{inline}"
-  class:bx--list-box__wrapper--inline="{inline}"
-  class:bx--dropdown__wrapper--inline--invalid="{inline && invalid}"
+  class:bx--dropdown__wrapper={true}
+  class:bx--list-box__wrapper={true}
+  class:bx--dropdown__wrapper--inline={inline}
+  class:bx--list-box__wrapper--inline={inline}
+  class:bx--dropdown__wrapper--inline--invalid={inline && invalid}
   {...$$restProps}
 >
   {#if titleText}
     <label
-      for="{id}"
-      class:bx--label="{true}"
-      class:bx--label--disabled="{disabled}"
-      class:bx--visually-hidden="{hideLabel}"
+      for={id}
+      class:bx--label={true}
+      class:bx--label--disabled={disabled}
+      class:bx--visually-hidden={hideLabel}
     >
       {titleText}
     </label>
   {/if}
   <ListBox
-    role="{undefined}"
-    type="{type}"
-    size="{size}"
-    name="{name}"
-    aria-label="{$$props['aria-label']}"
+    role={undefined}
+    {type}
+    {size}
+    {name}
+    aria-label={$$props["aria-label"]}
     class="bx--dropdown 
       {direction === 'top' && 'bx--list-box--up'} 
       {invalid && 'bx--dropdown--invalid'} 
@@ -207,17 +207,17 @@
       {inline && 'bx--dropdown--inline'}
       {disabled && 'bx--dropdown--disabled'}
       {light && 'bx--dropdown--light'}"
-    on:click="{({ target }) => {
+    on:click={({ target }) => {
       if (disabled) return;
       open = ref.contains(target) ? !open : false;
-    }}"
-    disabled="{disabled}"
-    open="{open}"
-    invalid="{invalid}"
-    invalidText="{invalidText}"
-    light="{light}"
-    warn="{warn}"
-    warnText="{warnText}"
+    }}
+    {disabled}
+    {open}
+    {invalid}
+    {invalidText}
+    {light}
+    {warn}
+    {warnText}
   >
     {#if invalid}
       <WarningFilled class="bx--list-box__invalid-icon" />
@@ -228,17 +228,17 @@
       />
     {/if}
     <button
-      bind:this="{ref}"
+      bind:this={ref}
       type="button"
-      class:bx--list-box__field="{true}"
+      class:bx--list-box__field={true}
       tabindex="0"
-      aria-expanded="{open}"
-      on:keydown="{(e) => {
+      aria-expanded={open}
+      on:keydown={(e) => {
         const { key } = e;
-        if (['Enter', 'ArrowDown', 'ArrowUp'].includes(key)) {
+        if (["Enter", "ArrowDown", "ArrowUp"].includes(key)) {
           e.preventDefault();
         }
-        if (key === 'Enter') {
+        if (key === "Enter") {
           open = !open;
           if (
             highlightedIndex > -1 &&
@@ -248,22 +248,22 @@
             dispatchSelect();
             open = false;
           }
-        } else if (key === 'Tab') {
+        } else if (key === "Tab") {
           open = false;
           ref.blur();
-        } else if (key === 'ArrowDown') {
+        } else if (key === "ArrowDown") {
           if (!open) open = true;
           change(1);
-        } else if (key === 'ArrowUp') {
+        } else if (key === "ArrowUp") {
           if (!open) open = true;
           change(-1);
-        } else if (key === 'Escape') {
+        } else if (key === "Escape") {
           open = false;
         }
-      }}"
-      on:keyup="{(e) => {
+      }}
+      on:keyup={(e) => {
         const { key } = e;
-        if ([' '].includes(key)) {
+        if ([" "].includes(key)) {
           e.preventDefault();
         } else {
           return;
@@ -278,33 +278,33 @@
           dispatchSelect();
           open = false;
         }
-      }}"
-      disabled="{disabled}"
-      translateWithId="{translateWithId}"
-      id="{id}"
+      }}
+      {disabled}
+      {translateWithId}
+      {id}
     >
-      <span class:bx--list-box__label="{true}">
+      <span class:bx--list-box__label={true}>
         {#if selectedItem}{itemToString(selectedItem)}{:else}{label}{/if}
       </span>
       <ListBoxMenuIcon
-        on:click="{(e) => {
+        on:click={(e) => {
           e.stopPropagation();
           if (disabled) return;
           open = !open;
-        }}"
-        translateWithId="{translateWithId}"
-        open="{open}"
+        }}
+        {translateWithId}
+        {open}
       />
     </button>
     {#if open}
-      <ListBoxMenu aria-labelledby="{id}" id="{id}">
+      <ListBoxMenu aria-labelledby={id} {id}>
         {#each items as item, i (item.id)}
           <ListBoxMenuItem
-            id="{item.id}"
-            active="{selectedId === item.id}"
-            highlighted="{highlightedIndex === i}"
-            disabled="{item.disabled}"
-            on:click="{(e) => {
+            id={item.id}
+            active={selectedId === item.id}
+            highlighted={highlightedIndex === i}
+            disabled={item.disabled}
+            on:click={(e) => {
               if (item.disabled) {
                 e.stopPropagation();
                 return;
@@ -312,13 +312,13 @@
               selectedId = item.id;
               dispatchSelect();
               ref.focus();
-            }}"
-            on:mouseenter="{() => {
+            }}
+            on:mouseenter={() => {
               if (item.disabled) return;
               highlightedIndex = i;
-            }}"
+            }}
           >
-            <slot item="{item}" index="{i}">
+            <slot {item} index={i}>
               {itemToString(item)}
             </slot>
           </ListBoxMenuItem>
@@ -328,8 +328,8 @@
   </ListBox>
   {#if !inline && !invalid && !warn && helperText}
     <div
-      class:bx--form__helper-text="{true}"
-      class:bx--form__helper-text--disabled="{disabled}"
+      class:bx--form__helper-text={true}
+      class:bx--form__helper-text--disabled={disabled}
     >
       {helperText}
     </div>
diff --git a/src/Dropdown/DropdownSkeleton.svelte b/src/Dropdown/DropdownSkeleton.svelte
index 239c8b1b..7e6316d0 100644
--- a/src/Dropdown/DropdownSkeleton.svelte
+++ b/src/Dropdown/DropdownSkeleton.svelte
@@ -6,18 +6,18 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class:bx--skeleton="{true}"
-  class:bx--dropdown-v2="{true}"
-  class:bx--list-box="{true}"
-  class:bx--form-item="{true}"
-  class:bx--list-box--inline="{inline}"
+  class:bx--skeleton={true}
+  class:bx--dropdown-v2={true}
+  class:bx--list-box={true}
+  class:bx--form-item={true}
+  class:bx--list-box--inline={inline}
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave
 >
-  <div role="button" class:bx--list-box__field="{true}">
-    <span class:bx--list-box__label="{true}"></span>
+  <div role="button" class:bx--list-box__field={true}>
+    <span class:bx--list-box__label={true}></span>
   </div>
 </div>
diff --git a/src/FileUploader/FileUploader.svelte b/src/FileUploader/FileUploader.svelte
index 45434543..85daadf3 100644
--- a/src/FileUploader/FileUploader.svelte
+++ b/src/FileUploader/FileUploader.svelte
@@ -90,14 +90,16 @@
     if (addedIds.length > 0) {
       dispatch(
         "add",
-        addedIds.map((id) => files.find((file) => id === getFileId(file)))
+        addedIds.map((id) => files.find((file) => id === getFileId(file))),
       );
     }
 
     if (removedIds.length > 0) {
       dispatch(
         "remove",
-        removedIds.map((id) => prevFiles.find((file) => id === getFileId(file)))
+        removedIds.map((id) =>
+          prevFiles.find((file) => id === getFileId(file)),
+        ),
       );
     }
 
@@ -108,7 +110,7 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class:bx--form-item="{true}"
+  class:bx--form-item={true}
   {...$$restProps}
   on:click
   on:mouseover
@@ -117,8 +119,8 @@
 >
   {#if labelTitle || $$slots.labelTitle}
     <p
-      class:bx--file--label="{true}"
-      class:bx--label-description--disabled="{disabled}"
+      class:bx--file--label={true}
+      class:bx--label-description--disabled={disabled}
     >
       <slot name="labelTitle">
         {labelTitle}
@@ -127,8 +129,8 @@
   {/if}
   {#if labelDescription || $$slots.labelDescription}
     <p
-      class:bx--label-description="{true}"
-      class:bx--label-description--disabled="{disabled}"
+      class:bx--label-description={true}
+      class:bx--label-description--disabled={disabled}
     >
       <slot name="labelDescription">
         {labelDescription}
@@ -136,37 +138,37 @@
     </p>
   {/if}
   <FileUploaderButton
-    disabled="{disabled}"
+    {disabled}
     disableLabelChanges
-    labelText="{buttonLabel}"
-    accept="{accept}"
-    name="{name}"
-    multiple="{multiple}"
-    kind="{kind}"
-    size="{size}"
+    labelText={buttonLabel}
+    {accept}
+    {name}
+    {multiple}
+    {kind}
+    {size}
     on:change
-    on:change="{(e) => {
+    on:change={(e) => {
       files = e.detail;
-    }}"
+    }}
   />
-  <div class:bx--file-container="{true}">
+  <div class:bx--file-container={true}>
     {#each files as { name }, i}
-      <span class:bx--file__selected-file="{true}">
-        <p class:bx--file-filename="{true}">{name}</p>
-        <span class:bx--file__state-container="{true}">
+      <span class:bx--file__selected-file={true}>
+        <p class:bx--file-filename={true}>{name}</p>
+        <span class:bx--file__state-container={true}>
           <Filename
-            iconDescription="{iconDescription}"
-            status="{status}"
+            {iconDescription}
+            {status}
             on:keydown
-            on:keydown="{({ key }) => {
-              if (key === ' ' || key === 'Enter') {
+            on:keydown={({ key }) => {
+              if (key === " " || key === "Enter") {
                 files = files.filter((_, index) => index !== i);
               }
-            }}"
+            }}
             on:click
-            on:click="{() => {
+            on:click={() => {
               files = files.filter((_, index) => index !== i);
-            }}"
+            }}
           />
         </span>
       </span>
diff --git a/src/FileUploader/FileUploaderButton.svelte b/src/FileUploader/FileUploaderButton.svelte
index 937f5161..da6ff18e 100644
--- a/src/FileUploader/FileUploaderButton.svelte
+++ b/src/FileUploader/FileUploaderButton.svelte
@@ -69,57 +69,57 @@
 <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <label
-  aria-disabled="{disabled}"
-  for="{id}"
-  tabindex="{disabled ? '-1' : tabindex}"
-  class:bx--btn="{true}"
-  class:bx--btn--disabled="{disabled}"
-  class:bx--btn--primary="{kind === 'primary'}"
-  class:bx--btn--secondary="{kind === 'secondary'}"
-  class:bx--btn--tertiary="{kind === 'tertiary'}"
-  class:bx--btn--ghost="{kind === 'ghost'}"
-  class:bx--btn--danger="{kind === 'danger'}"
-  class:bx--btn--danger-tertiary="{kind === 'danger-tertiary'}"
-  class:bx--btn--danger-ghost="{kind === 'danger-ghost'}"
-  class:bx--btn--sm="{size === 'small'}"
-  class:bx--btn--field="{size === 'field'}"
-  class:bx--btn--lg="{size === 'lg'}"
-  class:bx--btn--xl="{size === 'xl'}"
+  aria-disabled={disabled}
+  for={id}
+  tabindex={disabled ? "-1" : tabindex}
+  class:bx--btn={true}
+  class:bx--btn--disabled={disabled}
+  class:bx--btn--primary={kind === "primary"}
+  class:bx--btn--secondary={kind === "secondary"}
+  class:bx--btn--tertiary={kind === "tertiary"}
+  class:bx--btn--ghost={kind === "ghost"}
+  class:bx--btn--danger={kind === "danger"}
+  class:bx--btn--danger-tertiary={kind === "danger-tertiary"}
+  class:bx--btn--danger-ghost={kind === "danger-ghost"}
+  class:bx--btn--sm={size === "small"}
+  class:bx--btn--field={size === "field"}
+  class:bx--btn--lg={size === "lg"}
+  class:bx--btn--xl={size === "xl"}
   on:keydown
-  on:keydown="{({ key }) => {
-    if (key === ' ' || key === 'Enter') {
+  on:keydown={({ key }) => {
+    if (key === " " || key === "Enter") {
       ref.click();
     }
-  }}"
+  }}
 >
-  <span role="{role}">
+  <span {role}>
     <slot name="labelText">
       {labelText}
     </slot>
   </span>
 </label>
 <input
-  bind:this="{ref}"
+  bind:this={ref}
   type="file"
   tabindex="-1"
-  accept="{accept}"
-  disabled="{disabled}"
-  id="{id}"
-  multiple="{multiple}"
-  name="{name}"
-  class:bx--visually-hidden="{true}"
+  {accept}
+  {disabled}
+  {id}
+  {multiple}
+  {name}
+  class:bx--visually-hidden={true}
   {...$$restProps}
-  on:change|stopPropagation="{({ target }) => {
+  on:change|stopPropagation={({ target }) => {
     files = [...target.files];
 
     if (files && !disableLabelChanges) {
       labelText = files.length > 1 ? `${files.length} files` : files[0].name;
     }
 
-    dispatch('change', files);
-  }}"
+    dispatch("change", files);
+  }}
   on:click
-  on:click="{({ target }) => {
+  on:click={({ target }) => {
     target.value = null;
-  }}"
+  }}
 />
diff --git a/src/FileUploader/FileUploaderDropContainer.svelte b/src/FileUploader/FileUploaderDropContainer.svelte
index 522df22c..91c4f81f 100644
--- a/src/FileUploader/FileUploaderDropContainer.svelte
+++ b/src/FileUploader/FileUploaderDropContainer.svelte
@@ -56,50 +56,50 @@
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class:bx--file="{true}"
+  class:bx--file={true}
   {...$$restProps}
   on:dragover
-  on:dragover|preventDefault|stopPropagation="{({ dataTransfer }) => {
+  on:dragover|preventDefault|stopPropagation={({ dataTransfer }) => {
     if (!disabled) {
       over = true;
-      dataTransfer.dropEffect = 'copy';
+      dataTransfer.dropEffect = "copy";
     }
-  }}"
+  }}
   on:dragleave
-  on:dragleave|preventDefault|stopPropagation="{({ dataTransfer }) => {
+  on:dragleave|preventDefault|stopPropagation={({ dataTransfer }) => {
     if (!disabled) {
       over = false;
-      dataTransfer.dropEffect = 'move';
+      dataTransfer.dropEffect = "move";
     }
-  }}"
+  }}
   on:drop
-  on:drop|preventDefault|stopPropagation="{({ dataTransfer }) => {
+  on:drop|preventDefault|stopPropagation={({ dataTransfer }) => {
     if (!disabled) {
       over = false;
       files = validateFiles([...dataTransfer.files]);
-      dispatch('add', files);
-      dispatch('change', files);
+      dispatch("add", files);
+      dispatch("change", files);
     }
-  }}"
+  }}
 >
   <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
   <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
   <label
-    for="{id}"
-    tabindex="{tabindex}"
-    class:bx--file-browse-btn="{true}"
-    class:bx--file-browse-btn--disabled="{disabled}"
+    for={id}
+    {tabindex}
+    class:bx--file-browse-btn={true}
+    class:bx--file-browse-btn--disabled={disabled}
     on:keydown
-    on:keydown="{({ key }) => {
-      if (key === ' ' || key === 'Enter') {
+    on:keydown={({ key }) => {
+      if (key === " " || key === "Enter") {
         ref.click();
       }
-    }}"
+    }}
   >
     <div
-      role="{role}"
-      class:bx--file__drop-container="{true}"
-      class:bx--file__drop-container--drag-over="{over}"
+      {role}
+      class:bx--file__drop-container={true}
+      class:bx--file__drop-container--drag-over={over}
     >
       <slot name="labelText">
         {labelText}
@@ -107,23 +107,23 @@
     </div>
   </label>
   <input
-    bind:this="{ref}"
+    bind:this={ref}
     type="file"
     tabindex="-1"
-    id="{id}"
-    disabled="{disabled}"
-    accept="{accept}"
-    name="{name}"
-    multiple="{multiple}"
-    class:bx--file-input="{true}"
-    on:change="{({ target }) => {
+    {id}
+    {disabled}
+    {accept}
+    {name}
+    {multiple}
+    class:bx--file-input={true}
+    on:change={({ target }) => {
       files = validateFiles([...target.files]);
-      dispatch('add', files);
-      dispatch('change', files);
-    }}"
+      dispatch("add", files);
+      dispatch("change", files);
+    }}
     on:click
-    on:click="{({ target }) => {
+    on:click={({ target }) => {
       target.value = null;
-    }}"
+    }}
   />
 </div>
diff --git a/src/FileUploader/FileUploaderItem.svelte b/src/FileUploader/FileUploaderItem.svelte
index 0a6b2ab9..b0172062 100644
--- a/src/FileUploader/FileUploaderItem.svelte
+++ b/src/FileUploader/FileUploaderItem.svelte
@@ -42,37 +42,37 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <span
-  id="{id}"
-  class:bx--file__selected-file="{true}"
-  class:bx--file__selected-file--invalid="{invalid}"
-  class:bx--file__selected-file--md="{size === 'field'}"
-  class:bx--file__selected-file--sm="{size === 'small'}"
+  {id}
+  class:bx--file__selected-file={true}
+  class:bx--file__selected-file--invalid={invalid}
+  class:bx--file__selected-file--md={size === "field"}
+  class:bx--file__selected-file--sm={size === "small"}
   {...$$restProps}
   on:mouseover
   on:mouseenter
   on:mouseleave
 >
-  <p class:bx--file-filename="{true}">{name}</p>
-  <span class:bx--file__state-container="{true}">
+  <p class:bx--file-filename={true}>{name}</p>
+  <span class:bx--file__state-container={true}>
     <Filename
-      on:keydown="{({ key }) => {
-        if (key === ' ' || key === 'Enter') {
-          dispatch('delete', id);
+      on:keydown={({ key }) => {
+        if (key === " " || key === "Enter") {
+          dispatch("delete", id);
         }
-      }}"
-      on:click="{() => {
-        dispatch('delete', id);
-      }}"
-      iconDescription="{iconDescription}"
-      status="{status}"
-      invalid="{invalid}"
+      }}
+      on:click={() => {
+        dispatch("delete", id);
+      }}
+      {iconDescription}
+      {status}
+      {invalid}
     />
   </span>
   {#if invalid && errorSubject}
-    <div class:bx--form-requirement="{true}">
-      <div class:bx--form-requirement__title="{true}">{errorSubject}</div>
+    <div class:bx--form-requirement={true}>
+      <div class:bx--form-requirement__title={true}>{errorSubject}</div>
       {#if errorBody}
-        <p class:bx--form-requirement__supplement="{true}">{errorBody}</p>
+        <p class:bx--form-requirement__supplement={true}>{errorBody}</p>
       {/if}
     </div>
   {/if}
diff --git a/src/FileUploader/FileUploaderSkeleton.svelte b/src/FileUploader/FileUploaderSkeleton.svelte
index 92e7fab1..bbc538ed 100644
--- a/src/FileUploader/FileUploaderSkeleton.svelte
+++ b/src/FileUploader/FileUploaderSkeleton.svelte
@@ -6,7 +6,7 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class:bx--form-item="{true}"
+  class:bx--form-item={true}
   {...$$restProps}
   on:click
   on:mouseover
diff --git a/src/FileUploader/Filename.svelte b/src/FileUploader/Filename.svelte
index 52828e25..86d0c6e6 100644
--- a/src/FileUploader/Filename.svelte
+++ b/src/FileUploader/Filename.svelte
@@ -23,10 +23,10 @@
 
 {#if status === "uploading"}
   <Loading
-    description="{iconDescription}"
+    description={iconDescription}
     {...$$restProps}
     small
-    withOverlay="{false}"
+    withOverlay={false}
   />
 {/if}
 
@@ -35,8 +35,8 @@
     <WarningFilled class="bx--file-invalid" />
   {/if}
   <button
-    aria-label="{iconDescription}"
-    class:bx--file-close="{true}"
+    aria-label={iconDescription}
+    class:bx--file-close={true}
     type="button"
     tabindex="0"
     {...$$restProps}
@@ -49,8 +49,8 @@
 
 {#if status === "complete"}
   <CheckmarkFilled
-    aria-label="{iconDescription}"
-    title="{iconDescription}"
+    aria-label={iconDescription}
+    title={iconDescription}
     class="bx--file-complete"
     {...$$restProps}
   />
diff --git a/src/Form/Form.svelte b/src/Form/Form.svelte
index 84df00b9..5e23ef28 100644
--- a/src/Form/Form.svelte
+++ b/src/Form/Form.svelte
@@ -6,8 +6,8 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <form
-  class:bx--form="{true}"
-  bind:this="{ref}"
+  class:bx--form={true}
+  bind:this={ref}
   {...$$restProps}
   on:click
   on:keydown
diff --git a/src/FormGroup/FormGroup.svelte b/src/FormGroup/FormGroup.svelte
index 124e1f12..d41c43f7 100644
--- a/src/FormGroup/FormGroup.svelte
+++ b/src/FormGroup/FormGroup.svelte
@@ -21,10 +21,10 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <fieldset
-  data-invalid="{invalid || undefined}"
-  class:bx--fieldset="{true}"
-  class:bx--fieldset--no-margin="{noMargin}"
-  aria-labelledby="{$$restProps['aria-labelledby'] || legendId}"
+  data-invalid={invalid || undefined}
+  class:bx--fieldset={true}
+  class:bx--fieldset--no-margin={noMargin}
+  aria-labelledby={$$restProps["aria-labelledby"] || legendId}
   {...$$restProps}
   on:click
   on:mouseover
@@ -33,12 +33,12 @@
 >
   {#if legendText}
     <legend
-      class:bx--label="{true}"
-      id="{legendId || $$restProps['aria-labelledby']}">{legendText}</legend
+      class:bx--label={true}
+      id={legendId || $$restProps["aria-labelledby"]}>{legendText}</legend
     >
   {/if}
   <slot />
   {#if message}
-    <div class:bx--form__requirement="{true}">{messageText}</div>
+    <div class:bx--form__requirement={true}>{messageText}</div>
   {/if}
 </fieldset>
diff --git a/src/FormItem/FormItem.svelte b/src/FormItem/FormItem.svelte
index 8a3ff77d..155dc10c 100644
--- a/src/FormItem/FormItem.svelte
+++ b/src/FormItem/FormItem.svelte
@@ -1,7 +1,7 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class:bx--form-item="{true}"
+  class:bx--form-item={true}
   {...$$restProps}
   on:click
   on:mouseover
diff --git a/src/FormLabel/FormLabel.svelte b/src/FormLabel/FormLabel.svelte
index fdf4c8bb..0258d81a 100644
--- a/src/FormLabel/FormLabel.svelte
+++ b/src/FormLabel/FormLabel.svelte
@@ -6,8 +6,8 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <label
-  class:bx--label="{true}"
-  for="{id}"
+  class:bx--label={true}
+  for={id}
   {...$$restProps}
   on:click
   on:mouseover
diff --git a/src/Grid/Column.svelte b/src/Grid/Column.svelte
index aa1e0c21..02283331 100644
--- a/src/Grid/Column.svelte
+++ b/src/Grid/Column.svelte
@@ -111,7 +111,7 @@
 </script>
 
 {#if as}
-  <slot props="{props}" />
+  <slot {props} />
 {:else}
   <div {...props}>
     <slot />
diff --git a/src/Grid/Grid.svelte b/src/Grid/Grid.svelte
index 113f91f6..6398f966 100644
--- a/src/Grid/Grid.svelte
+++ b/src/Grid/Grid.svelte
@@ -50,7 +50,7 @@
 </script>
 
 {#if as}
-  <slot props="{props}" />
+  <slot {props} />
 {:else}
   <div {...props}>
     <slot />
diff --git a/src/Grid/Row.svelte b/src/Grid/Row.svelte
index fc9058e9..24dfff33 100644
--- a/src/Grid/Row.svelte
+++ b/src/Grid/Row.svelte
@@ -46,7 +46,7 @@
 </script>
 
 {#if as}
-  <slot props="{props}" />
+  <slot {props} />
 {:else}
   <div {...props}>
     <slot />
diff --git a/src/ImageLoader/ImageLoader.svelte b/src/ImageLoader/ImageLoader.svelte
index 5e054a67..91f67bdd 100644
--- a/src/ImageLoader/ImageLoader.svelte
+++ b/src/ImageLoader/ImageLoader.svelte
@@ -85,9 +85,9 @@
       <img
         style:width="100%"
         {...$$restProps}
-        src="{src}"
-        alt="{alt}"
-        transition:fade|local="{{ duration: fadeIn ? fast02 : 0 }}"
+        {src}
+        {alt}
+        transition:fade|local={{ duration: fadeIn ? fast02 : 0 }}
       />
     {/if}
   {/key}
@@ -95,7 +95,7 @@
     <slot name="error" />
   {/if}
 {:else}
-  <AspectRatio ratio="{ratio}">
+  <AspectRatio {ratio}>
     {#if loading}
       <slot name="loading" />
     {/if}
@@ -104,9 +104,9 @@
         <img
           style:width="100%"
           {...$$restProps}
-          src="{src}"
-          alt="{alt}"
-          transition:fade|local="{{ duration: fadeIn ? fast02 : 0 }}"
+          {src}
+          {alt}
+          transition:fade|local={{ duration: fadeIn ? fast02 : 0 }}
         />
       {/if}
     {/key}
diff --git a/src/InlineLoading/InlineLoading.svelte b/src/InlineLoading/InlineLoading.svelte
index a560cb1a..1005ddb5 100644
--- a/src/InlineLoading/InlineLoading.svelte
+++ b/src/InlineLoading/InlineLoading.svelte
@@ -48,7 +48,7 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class:bx--inline-loading="{true}"
+  class:bx--inline-loading={true}
   aria-live="assertive"
   {...$$restProps}
   on:click
@@ -56,27 +56,27 @@
   on:mouseenter
   on:mouseleave
 >
-  <div class:bx--inline-loading__animation="{true}">
+  <div class:bx--inline-loading__animation={true}>
     {#if status === "error"}
       <ErrorFilled
         class="bx--inline-loading--error"
-        title="{iconDescription || status}"
+        title={iconDescription || status}
       />
     {:else if status === "finished"}
       <CheckmarkFilled
         class="bx--inline-loading__checkmark-container"
-        title="{iconDescription || status}"
+        title={iconDescription || status}
       />
     {:else if status === "inactive" || status === "active"}
       <Loading
         small
-        description="{iconDescription}"
-        withOverlay="{false}"
-        active="{status === 'active'}"
+        description={iconDescription}
+        withOverlay={false}
+        active={status === "active"}
       />
     {/if}
   </div>
   {#if description}
-    <div class:bx--inline-loading__text="{true}">{description}</div>
+    <div class:bx--inline-loading__text={true}>{description}</div>
   {/if}
 </div>
diff --git a/src/Link/Link.svelte b/src/Link/Link.svelte
index 629a3973..4bdf386c 100644
--- a/src/Link/Link.svelte
+++ b/src/Link/Link.svelte
@@ -38,13 +38,13 @@
 {#if disabled}
   <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
   <a
-    bind:this="{ref}"
+    bind:this={ref}
     role="link"
     aria-disabled="true"
-    class:bx--link="{true}"
-    class:bx--link--disabled="{disabled}"
-    class:bx--link--inline="{inline}"
-    class:bx--link--visited="{visited}"
+    class:bx--link={true}
+    class:bx--link--disabled={disabled}
+    class:bx--link--inline={inline}
+    class:bx--link--visited={visited}
     {...$$restProps}
     on:click
     on:mouseover
@@ -53,24 +53,24 @@
   >
     <slot />
     {#if !inline && ($$slots.icon || icon)}
-      <div class:bx--link__icon="{true}">
+      <div class:bx--link__icon={true}>
         <slot name="icon">
-          <svelte:component this="{icon}" />
+          <svelte:component this={icon} />
         </slot>
       </div>
     {/if}
   </a>
 {:else}
   <a
-    bind:this="{ref}"
-    class:bx--link="{true}"
-    class:bx--link--disabled="{disabled}"
-    class:bx--link--inline="{inline}"
-    class:bx--link--visited="{visited}"
-    class:bx--link--sm="{size === 'sm'}"
-    class:bx--link--lg="{size === 'lg'}"
-    rel="{$$restProps.target === '_blank' ? 'noopener noreferrer' : undefined}"
-    href="{href}"
+    bind:this={ref}
+    class:bx--link={true}
+    class:bx--link--disabled={disabled}
+    class:bx--link--inline={inline}
+    class:bx--link--visited={visited}
+    class:bx--link--sm={size === "sm"}
+    class:bx--link--lg={size === "lg"}
+    rel={$$restProps.target === "_blank" ? "noopener noreferrer" : undefined}
+    {href}
     {...$$restProps}
     on:click
     on:mouseover
@@ -79,9 +79,9 @@
   >
     <slot />
     {#if !inline && ($$slots.icon || icon)}
-      <div class:bx--link__icon="{true}">
+      <div class:bx--link__icon={true}>
         <slot name="icon">
-          <svelte:component this="{icon}" />
+          <svelte:component this={icon} />
         </slot>
       </div>
     {/if}
diff --git a/src/Link/OutboundLink.svelte b/src/Link/OutboundLink.svelte
index 16172910..bf291d8d 100644
--- a/src/Link/OutboundLink.svelte
+++ b/src/Link/OutboundLink.svelte
@@ -12,7 +12,7 @@
   on:mouseenter
   on:mouseleave
   target="_blank"
-  icon="{Launch}"
+  icon={Launch}
 >
   <slot />
 </Link>
diff --git a/src/ListBox/ListBox.svelte b/src/ListBox/ListBox.svelte
index 3443024f..9d7f5088 100644
--- a/src/ListBox/ListBox.svelte
+++ b/src/ListBox/ListBox.svelte
@@ -36,29 +36,29 @@
 <div
   role="listbox"
   tabindex="-1"
-  data-invalid="{invalid || undefined}"
-  class:bx--list-box="{true}"
-  class:bx--list-box--sm="{size === 'sm'}"
-  class:bx--list-box--xl="{size === 'xl'}"
-  class:bx--list-box--inline="{type === 'inline'}"
-  class:bx--list-box--disabled="{disabled}"
-  class:bx--list-box--expanded="{open}"
-  class:bx--list-box--light="{light}"
-  class:bx--list-box--warning="{!invalid && warn}"
+  data-invalid={invalid || undefined}
+  class:bx--list-box={true}
+  class:bx--list-box--sm={size === "sm"}
+  class:bx--list-box--xl={size === "xl"}
+  class:bx--list-box--inline={type === "inline"}
+  class:bx--list-box--disabled={disabled}
+  class:bx--list-box--expanded={open}
+  class:bx--list-box--light={light}
+  class:bx--list-box--warning={!invalid && warn}
   {...$$restProps}
   on:keydown
-  on:keydown="{(e) => {
-    if (e.key === 'Escape') {
+  on:keydown={(e) => {
+    if (e.key === "Escape") {
       e.stopPropagation();
     }
-  }}"
+  }}
   on:click|preventDefault
 >
   <slot />
 </div>
 {#if invalid}
-  <div class:bx--form-requirement="{true}">{invalidText}</div>
+  <div class:bx--form-requirement={true}>{invalidText}</div>
 {/if}
 {#if !invalid && warn}
-  <div class:bx--form-requirement="{true}">{warnText}</div>
+  <div class:bx--form-requirement={true}>{warnText}</div>
 {/if}
diff --git a/src/ListBox/ListBoxField.svelte b/src/ListBox/ListBoxField.svelte
index c1094ae2..8b9950d1 100644
--- a/src/ListBox/ListBoxField.svelte
+++ b/src/ListBox/ListBoxField.svelte
@@ -45,17 +45,15 @@
 
 <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 <div
-  bind:this="{ref}"
-  role="{role}"
-  aria-expanded="{ariaExpanded}"
-  aria-owns="{(ariaExpanded && menuId) || undefined}"
-  aria-controls="{(ariaExpanded && menuId) || undefined}"
-  aria-disabled="{disabled}"
-  aria-label="{ariaExpanded
-    ? translateWithId('close')
-    : translateWithId('open')}"
-  tabindex="{disabled ? '-1' : tabindex}"
-  class:bx--list-box__field="{true}"
+  bind:this={ref}
+  {role}
+  aria-expanded={ariaExpanded}
+  aria-owns={(ariaExpanded && menuId) || undefined}
+  aria-controls={(ariaExpanded && menuId) || undefined}
+  aria-disabled={disabled}
+  aria-label={ariaExpanded ? translateWithId("close") : translateWithId("open")}
+  tabindex={disabled ? "-1" : tabindex}
+  class:bx--list-box__field={true}
   {...$$restProps}
   on:click
   on:mouseover
diff --git a/src/ListBox/ListBoxMenu.svelte b/src/ListBox/ListBoxMenu.svelte
index 1196ad70..ad24a607 100644
--- a/src/ListBox/ListBoxMenu.svelte
+++ b/src/ListBox/ListBoxMenu.svelte
@@ -7,10 +7,10 @@
 </script>
 
 <div
-  bind:this="{ref}"
+  bind:this={ref}
   role="listbox"
   id="menu-{id}"
-  class:bx--list-box__menu="{true}"
+  class:bx--list-box__menu={true}
   {...$$restProps}
   on:scroll
 >
diff --git a/src/ListBox/ListBoxMenuIcon.svelte b/src/ListBox/ListBoxMenuIcon.svelte
index 63235482..1d53fe19 100644
--- a/src/ListBox/ListBoxMenuIcon.svelte
+++ b/src/ListBox/ListBoxMenuIcon.svelte
@@ -29,10 +29,10 @@
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class:bx--list-box__menu-icon="{true}"
-  class:bx--list-box__menu-icon--open="{open}"
+  class:bx--list-box__menu-icon={true}
+  class:bx--list-box__menu-icon--open={open}
   {...$$restProps}
   on:click|preventDefault
 >
-  <ChevronDown aria-label="{description}" title="{description}" />
+  <ChevronDown aria-label={description} title={description} />
 </div>
diff --git a/src/ListBox/ListBoxMenuItem.svelte b/src/ListBox/ListBoxMenuItem.svelte
index 28e4eae3..dd2ff422 100644
--- a/src/ListBox/ListBoxMenuItem.svelte
+++ b/src/ListBox/ListBoxMenuItem.svelte
@@ -21,21 +21,17 @@
 <div
   role="option"
   tabindex="-1"
-  class:bx--list-box__menu-item="{true}"
-  class:bx--list-box__menu-item--active="{active}"
-  class:bx--list-box__menu-item--highlighted="{highlighted || active}"
-  aria-selected="{active}"
-  disabled="{disabled ? true : undefined}"
+  class:bx--list-box__menu-item={true}
+  class:bx--list-box__menu-item--active={active}
+  class:bx--list-box__menu-item--highlighted={highlighted || active}
+  aria-selected={active}
+  disabled={disabled ? true : undefined}
   {...$$restProps}
   on:click
   on:mouseenter
   on:mouseleave
 >
-  <div
-    bind:this="{ref}"
-    title="{title}"
-    class:bx--list-box__menu-item__option="{true}"
-  >
+  <div bind:this={ref} {title} class:bx--list-box__menu-item__option={true}>
     <slot />
   </div>
 </div>
diff --git a/src/ListBox/ListBoxSelection.svelte b/src/ListBox/ListBoxSelection.svelte
index 276026ce..beb800d8 100644
--- a/src/ListBox/ListBoxSelection.svelte
+++ b/src/ListBox/ListBoxSelection.svelte
@@ -55,57 +55,57 @@
 
 {#if selectionCount !== undefined}
   <div
-    class:bx--tag="{true}"
-    class:bx--tag--filter="{true}"
-    class:bx--tag--high-contrast="{true}"
-    class:bx--tag--disabled="{disabled}"
+    class:bx--tag={true}
+    class:bx--tag--filter={true}
+    class:bx--tag--high-contrast={true}
+    class:bx--tag--disabled={disabled}
   >
-    <span class:bx--tag__label="{true}" title="{selectionCount}">
+    <span class:bx--tag__label={true} title={selectionCount}>
       {selectionCount}
     </span>
     <div
-      bind:this="{ref}"
+      bind:this={ref}
       role="button"
-      tabindex="{disabled ? -1 : 0}"
-      class:bx--tag__close-icon="{true}"
-      on:click|preventDefault|stopPropagation="{(e) => {
+      tabindex={disabled ? -1 : 0}
+      class:bx--tag__close-icon={true}
+      on:click|preventDefault|stopPropagation={(e) => {
         if (!disabled) {
-          dispatch('clear', e);
+          dispatch("clear", e);
         }
-      }}"
-      on:keydown|stopPropagation="{(e) => {
-        if (!disabled && e.key === 'Enter') {
-          dispatch('clear', e);
+      }}
+      on:keydown|stopPropagation={(e) => {
+        if (!disabled && e.key === "Enter") {
+          dispatch("clear", e);
         }
-      }}"
-      disabled="{disabled}"
-      aria-label="{translationIds.clearAll}"
-      title="{description}"
+      }}
+      {disabled}
+      aria-label={translationIds.clearAll}
+      title={description}
     >
       <Close />
     </div>
   </div>
 {:else}
   <div
-    bind:this="{ref}"
+    bind:this={ref}
     role="button"
-    aria-label="{description}"
-    title="{description}"
-    tabindex="{disabled ? '-1' : '0'}"
-    class:bx--list-box__selection="{true}"
-    class:bx--tag--filter="{selectionCount}"
-    class:bx--list-box__selection--multi="{selectionCount}"
+    aria-label={description}
+    title={description}
+    tabindex={disabled ? "-1" : "0"}
+    class:bx--list-box__selection={true}
+    class:bx--tag--filter={selectionCount}
+    class:bx--list-box__selection--multi={selectionCount}
     {...$$restProps}
-    on:click|preventDefault|stopPropagation="{(e) => {
+    on:click|preventDefault|stopPropagation={(e) => {
       if (!disabled) {
-        dispatch('clear', e);
+        dispatch("clear", e);
       }
-    }}"
-    on:keydown|stopPropagation="{(e) => {
-      if (!disabled && e.key === 'Enter') {
-        dispatch('clear', e);
+    }}
+    on:keydown|stopPropagation={(e) => {
+      if (!disabled && e.key === "Enter") {
+        dispatch("clear", e);
       }
-    }}"
+    }}
   >
     {#if selectionCount !== undefined}{selectionCount}{/if}
     <Close />
diff --git a/src/ListItem/ListItem.svelte b/src/ListItem/ListItem.svelte
index 3e7e6f8b..65c289a0 100644
--- a/src/ListItem/ListItem.svelte
+++ b/src/ListItem/ListItem.svelte
@@ -1,7 +1,7 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <li
-  class:bx--list__item="{true}"
+  class:bx--list__item={true}
   {...$$restProps}
   on:click
   on:mouseover
diff --git a/src/Loading/Loading.svelte b/src/Loading/Loading.svelte
index efbd07e3..5aede5fb 100644
--- a/src/Loading/Loading.svelte
+++ b/src/Loading/Loading.svelte
@@ -16,57 +16,61 @@
 
 {#if withOverlay}
   <div
-    class:bx--loading-overlay="{true}"
-    class:bx--loading-overlay--stop="{!active}"
+    class:bx--loading-overlay={true}
+    class:bx--loading-overlay--stop={!active}
     {...$$restProps}
   >
     <div
       aria-atomic="true"
-      aria-live="{active ? 'assertive' : 'off'}"
-      class:bx--loading="{true}"
-      class:bx--loading--small="{small}"
-      class:bx--loading--stop="{!active}"
+      aria-live={active ? "assertive" : "off"}
+      class:bx--loading={true}
+      class:bx--loading--small={small}
+      class:bx--loading--stop={!active}
     >
-      <svg class:bx--loading__svg="{true}" viewBox="0 0 100 100">
+      <svg class:bx--loading__svg={true} viewBox="0 0 100 100">
         <title>{description}</title>
         {#if small}
           <circle
-            class:bx--loading__background="{true}"
+            class:bx--loading__background={true}
             cx="50%"
             cy="50%"
-            r="{spinnerRadius}"></circle>
+            r={spinnerRadius}
+          ></circle>
         {/if}
         <circle
-          class:bx--loading__stroke="{true}"
+          class:bx--loading__stroke={true}
           cx="50%"
           cy="50%"
-          r="{spinnerRadius}"></circle>
+          r={spinnerRadius}
+        ></circle>
       </svg>
     </div>
   </div>
 {:else}
   <div
     aria-atomic="true"
-    aria-live="{active ? 'assertive' : 'off'}"
-    class:bx--loading="{true}"
-    class:bx--loading--small="{small}"
-    class:bx--loading--stop="{!active}"
+    aria-live={active ? "assertive" : "off"}
+    class:bx--loading={true}
+    class:bx--loading--small={small}
+    class:bx--loading--stop={!active}
     {...$$restProps}
   >
-    <svg class:bx--loading__svg="{true}" viewBox="0 0 100 100">
+    <svg class:bx--loading__svg={true} viewBox="0 0 100 100">
       <title>{description}</title>
       {#if small}
         <circle
-          class:bx--loading__background="{true}"
+          class:bx--loading__background={true}
           cx="50%"
           cy="50%"
-          r="{spinnerRadius}"></circle>
+          r={spinnerRadius}
+        ></circle>
       {/if}
       <circle
-        class:bx--loading__stroke="{true}"
+        class:bx--loading__stroke={true}
         cx="50%"
         cy="50%"
-        r="{spinnerRadius}"></circle>
+        r={spinnerRadius}
+      ></circle>
     </svg>
   </div>
 {/if}
diff --git a/src/Modal/Modal.svelte b/src/Modal/Modal.svelte
index 4ce6d848..e41bcce8 100644
--- a/src/Modal/Modal.svelte
+++ b/src/Modal/Modal.svelte
@@ -134,20 +134,20 @@
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
-  bind:this="{ref}"
+  bind:this={ref}
   role="presentation"
-  id="{id}"
-  class:bx--modal="{true}"
-  class:bx--modal-tall="{!passiveModal}"
-  class:is-visible="{open}"
-  class:bx--modal--danger="{danger}"
+  {id}
+  class:bx--modal={true}
+  class:bx--modal-tall={!passiveModal}
+  class:is-visible={open}
+  class:bx--modal--danger={danger}
   {...$$restProps}
   on:keydown
-  on:keydown="{(e) => {
+  on:keydown={(e) => {
     if (open) {
-      if (e.key === 'Escape') {
+      if (e.key === "Escape") {
         open = false;
-      } else if (e.key === 'Tab') {
+      } else if (e.key === "Tab") {
         // trap focus
 
         // taken from github.com/carbon-design-system/carbon/packages/react/src/internal/keyboard/navigation.js
@@ -170,107 +170,107 @@
         e.preventDefault();
       } else if (
         shouldSubmitOnEnter &&
-        e.key === 'Enter' &&
+        e.key === "Enter" &&
         !primaryButtonDisabled
       ) {
-        dispatch('submit');
-        dispatch('click:button--primary');
+        dispatch("submit");
+        dispatch("click:button--primary");
       }
     }
-  }}"
+  }}
   on:click
-  on:click="{() => {
+  on:click={() => {
     if (!didClickInnerModal && !preventCloseOnClickOutside) open = false;
     didClickInnerModal = false;
-  }}"
+  }}
   on:mouseover
   on:mouseenter
   on:mouseleave
-  on:transitionend="{(e) => {
-    if (e.propertyName === 'transform') {
-      dispatch('transitionend', { open });
+  on:transitionend={(e) => {
+    if (e.propertyName === "transform") {
+      dispatch("transitionend", { open });
     }
-  }}"
+  }}
 >
   <div
-    bind:this="{innerModal}"
+    bind:this={innerModal}
     tabindex="-1"
-    role="{alert ? (passiveModal ? 'alert' : 'alertdialog') : 'dialog'}"
-    aria-describedby="{alert && !passiveModal ? modalBodyId : undefined}"
+    role={alert ? (passiveModal ? "alert" : "alertdialog") : "dialog"}
+    aria-describedby={alert && !passiveModal ? modalBodyId : undefined}
     aria-modal="true"
-    aria-label="{ariaLabel}"
-    class:bx--modal-container="{true}"
-    class:bx--modal-container--xs="{size === 'xs'}"
-    class:bx--modal-container--sm="{size === 'sm'}"
-    class:bx--modal-container--lg="{size === 'lg'}"
-    on:click="{() => {
+    aria-label={ariaLabel}
+    class:bx--modal-container={true}
+    class:bx--modal-container--xs={size === "xs"}
+    class:bx--modal-container--sm={size === "sm"}
+    class:bx--modal-container--lg={size === "lg"}
+    on:click={() => {
       didClickInnerModal = true;
-    }}"
+    }}
   >
-    <div class:bx--modal-header="{true}">
+    <div class:bx--modal-header={true}>
       {#if passiveModal}
         <button
-          bind:this="{buttonRef}"
+          bind:this={buttonRef}
           type="button"
-          aria-label="{iconDescription}"
-          class:bx--modal-close="{true}"
-          on:click="{() => {
+          aria-label={iconDescription}
+          class:bx--modal-close={true}
+          on:click={() => {
             open = false;
-          }}"
+          }}
         >
-          <Close size="{20}" class="bx--modal-close__icon" aria-hidden="true" />
+          <Close size={20} class="bx--modal-close__icon" aria-hidden="true" />
         </button>
       {/if}
       {#if modalLabel}
-        <h2 id="{modalLabelId}" class:bx--modal-header__label="{true}">
+        <h2 id={modalLabelId} class:bx--modal-header__label={true}>
           <slot name="label">{modalLabel}</slot>
         </h2>
       {/if}
-      <h3 id="{modalHeadingId}" class:bx--modal-header__heading="{true}">
+      <h3 id={modalHeadingId} class:bx--modal-header__heading={true}>
         <slot name="heading">{modalHeading}</slot>
       </h3>
       {#if !passiveModal}
         <button
-          bind:this="{buttonRef}"
+          bind:this={buttonRef}
           type="button"
-          aria-label="{iconDescription}"
-          class:bx--modal-close="{true}"
-          on:click="{() => {
+          aria-label={iconDescription}
+          class:bx--modal-close={true}
+          on:click={() => {
             open = false;
-          }}"
+          }}
         >
-          <Close size="{20}" class="bx--modal-close__icon" aria-hidden="true" />
+          <Close size={20} class="bx--modal-close__icon" aria-hidden="true" />
         </button>
       {/if}
     </div>
     <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
     <div
-      id="{modalBodyId}"
-      class:bx--modal-content="{true}"
-      class:bx--modal-content--with-form="{hasForm}"
-      class:bx--modal-scroll-content="{hasScrollingContent}"
-      tabindex="{hasScrollingContent ? '0' : undefined}"
-      role="{hasScrollingContent ? 'region' : undefined}"
-      aria-label="{hasScrollingContent ? ariaLabel : undefined}"
-      aria-labelledby="{modalLabel ? modalLabelId : modalHeadingId}"
+      id={modalBodyId}
+      class:bx--modal-content={true}
+      class:bx--modal-content--with-form={hasForm}
+      class:bx--modal-scroll-content={hasScrollingContent}
+      tabindex={hasScrollingContent ? "0" : undefined}
+      role={hasScrollingContent ? "region" : undefined}
+      aria-label={hasScrollingContent ? ariaLabel : undefined}
+      aria-labelledby={modalLabel ? modalLabelId : modalHeadingId}
     >
       <slot />
     </div>
     {#if hasScrollingContent}
-      <div class:bx--modal-content--overflow-indicator="{true}"></div>
+      <div class:bx--modal-content--overflow-indicator={true}></div>
     {/if}
     {#if !passiveModal}
       <div
-        class:bx--modal-footer="{true}"
-        class:bx--modal-footer--three-button="{secondaryButtons.length === 2}"
+        class:bx--modal-footer={true}
+        class:bx--modal-footer--three-button={secondaryButtons.length === 2}
       >
         {#if secondaryButtons.length > 0}
           {#each secondaryButtons as button}
             <Button
               kind="secondary"
-              on:click="{() => {
-                dispatch('click:button--secondary', { text: button.text });
-              }}"
+              on:click={() => {
+                dispatch("click:button--secondary", { text: button.text });
+              }}
             >
               {button.text}
             </Button>
@@ -278,23 +278,23 @@
         {:else if secondaryButtonText}
           <Button
             kind="secondary"
-            on:click="{() => {
-              dispatch('click:button--secondary', {
+            on:click={() => {
+              dispatch("click:button--secondary", {
                 text: secondaryButtonText,
               });
-            }}"
+            }}
           >
             {secondaryButtonText}
           </Button>
         {/if}
         <Button
-          kind="{danger ? 'danger' : 'primary'}"
-          disabled="{primaryButtonDisabled}"
-          icon="{primaryButtonIcon}"
-          on:click="{() => {
-            dispatch('submit');
-            dispatch('click:button--primary');
-          }}"
+          kind={danger ? "danger" : "primary"}
+          disabled={primaryButtonDisabled}
+          icon={primaryButtonIcon}
+          on:click={() => {
+            dispatch("submit");
+            dispatch("click:button--primary");
+          }}
         >
           {primaryButtonText}
         </Button>
diff --git a/src/MultiSelect/MultiSelect.svelte b/src/MultiSelect/MultiSelect.svelte
index 6f054d4d..abbdf772 100644
--- a/src/MultiSelect/MultiSelect.svelte
+++ b/src/MultiSelect/MultiSelect.svelte
@@ -275,32 +275,33 @@
   $: filteredItems = sortedItems.filter((item) => filterItem(item, value));
   $: highlightedId =
     highlightedIndex > -1
-      ? (filterable ? filteredItems : sortedItems)[highlightedIndex]?.id ?? null
+      ? ((filterable ? filteredItems : sortedItems)[highlightedIndex]?.id ??
+        null)
       : null;
 </script>
 
 <svelte:window
-  on:click="{({ target }) => {
+  on:click={({ target }) => {
     if (open && multiSelectRef && !multiSelectRef.contains(target)) {
       open = false;
     }
-  }}"
+  }}
 />
 
 <div
-  bind:this="{multiSelectRef}"
-  class:bx--multi-select__wrapper="{true}"
-  class:bx--list-box__wrapper="{true}"
-  class:bx--multi-select__wrapper--inline="{inline}"
-  class:bx--list-box__wrapper--inline="{inline}"
-  class:bx--multi-select__wrapper--inline--invalid="{inline && invalid}"
+  bind:this={multiSelectRef}
+  class:bx--multi-select__wrapper={true}
+  class:bx--list-box__wrapper={true}
+  class:bx--multi-select__wrapper--inline={inline}
+  class:bx--list-box__wrapper--inline={inline}
+  class:bx--multi-select__wrapper--inline--invalid={inline && invalid}
 >
   {#if titleText || $$slots.titleText}
     <label
-      for="{id}"
-      class:bx--label="{true}"
-      class:bx--label--disabled="{disabled}"
-      class:bx--visually-hidden="{hideLabel}"
+      for={id}
+      class:bx--label={true}
+      class:bx--label--disabled={disabled}
+      class:bx--visually-hidden={hideLabel}
     >
       <slot name="titleText">
         {titleText}
@@ -308,15 +309,15 @@
     </label>
   {/if}
   <ListBox
-    role="{undefined}"
-    disabled="{disabled}"
-    invalid="{invalid}"
-    invalidText="{invalidText}"
-    open="{open}"
-    light="{light}"
-    size="{size}"
-    warn="{warn}"
-    warnText="{warnText}"
+    role={undefined}
+    {disabled}
+    {invalid}
+    {invalidText}
+    {open}
+    {light}
+    {size}
+    {warn}
+    {warnText}
     class="bx--multi-select {direction === 'top' &&
       'bx--list-box--up'} {filterable && 'bx--combo-box'}
       {filterable && 'bx--multi-select--filterable'}
@@ -335,8 +336,8 @@
     <ListBoxField
       role="button"
       tabindex="0"
-      aria-expanded="{open}"
-      on:click="{() => {
+      aria-expanded={open}
+      on:click={() => {
         if (disabled) return;
         if (filterable) {
           open = true;
@@ -344,191 +345,187 @@
         } else {
           open = !open;
         }
-      }}"
-      on:keydown="{(e) => {
+      }}
+      on:keydown={(e) => {
         if (filterable) {
           return;
         }
         const key = e.key;
-        if ([' ', 'ArrowUp', 'ArrowDown'].includes(key)) {
+        if ([" ", "ArrowUp", "ArrowDown"].includes(key)) {
           e.preventDefault();
         }
-        if (key === ' ') {
+        if (key === " ") {
           open = !open;
-        } else if (key === 'Tab') {
+        } else if (key === "Tab") {
           if (selectionRef && checked.length > 0) {
             selectionRef.focus();
           } else {
             open = false;
             fieldRef.blur();
           }
-        } else if (key === 'ArrowDown') {
+        } else if (key === "ArrowDown") {
           change(1);
-        } else if (key === 'ArrowUp') {
+        } else if (key === "ArrowUp") {
           change(-1);
-        } else if (key === 'Enter') {
+        } else if (key === "Enter") {
           if (highlightedIndex > -1) {
             sortedItems = sortedItems.map((item, i) => {
               if (i !== highlightedIndex) return item;
               return { ...item, checked: !item.checked };
             });
           }
-        } else if (key === 'Escape') {
+        } else if (key === "Escape") {
           open = false;
         }
-      }}"
-      on:focus="{() => {
+      }}
+      on:focus={() => {
         if (filterable) {
           open = true;
           if (inputRef) inputRef.focus();
         }
-      }}"
-      on:blur="{(e) => {
-        if (!filterable) dispatch('blur', e);
-      }}"
-      id="{id}"
-      disabled="{disabled}"
-      translateWithId="{translateWithId}"
+      }}
+      on:blur={(e) => {
+        if (!filterable) dispatch("blur", e);
+      }}
+      {id}
+      {disabled}
+      {translateWithId}
     >
       {#if checked.length > 0}
         <ListBoxSelection
-          selectionCount="{checked.length}"
+          selectionCount={checked.length}
           on:clear
-          on:clear="{() => {
+          on:clear={() => {
             selectedIds = [];
             sortedItems = sortedItems.map((item) => ({
               ...item,
               checked: false,
             }));
             if (fieldRef) fieldRef.blur();
-          }}"
-          translateWithId="{translateWithIdSelection}"
-          disabled="{disabled}"
+          }}
+          translateWithId={translateWithIdSelection}
+          {disabled}
         />
       {/if}
       {#if filterable}
         <input
-          bind:this="{inputRef}"
+          bind:this={inputRef}
           bind:value
           {...$$restProps}
           role="combobox"
           tabindex="0"
           autocomplete="off"
           aria-autocomplete="list"
-          aria-expanded="{open}"
-          aria-activedescendant="{highlightedId}"
-          aria-disabled="{disabled}"
-          aria-controls="{menuId}"
-          class:bx--text-input="{true}"
-          class:bx--text-input--empty="{value === ''}"
-          class:bx--text-input--light="{light}"
+          aria-expanded={open}
+          aria-activedescendant={highlightedId}
+          aria-disabled={disabled}
+          aria-controls={menuId}
+          class:bx--text-input={true}
+          class:bx--text-input--empty={value === ""}
+          class:bx--text-input--light={light}
           on:keydown
-          on:keydown|stopPropagation="{({ key }) => {
-            if (key === 'Enter') {
+          on:keydown|stopPropagation={({ key }) => {
+            if (key === "Enter") {
               if (highlightedId) {
                 const filteredItemIndex = sortedItems.findIndex(
-                  (item) => item.id === highlightedId
+                  (item) => item.id === highlightedId,
                 );
                 sortedItems = sortedItems.map((item, i) => {
                   if (i !== filteredItemIndex) return item;
                   return { ...item, checked: !item.checked };
                 });
               }
-            } else if (key === 'Tab') {
+            } else if (key === "Tab") {
               open = false;
               inputRef.blur();
-            } else if (key === 'ArrowDown') {
+            } else if (key === "ArrowDown") {
               change(1);
-            } else if (key === 'ArrowUp') {
+            } else if (key === "ArrowUp") {
               change(-1);
-            } else if (key === 'Escape') {
+            } else if (key === "Escape") {
               open = false;
-            } else if (key === ' ') {
+            } else if (key === " ") {
               if (!open) open = true;
             }
-          }}"
+          }}
           on:keyup
           on:focus
           on:blur
           on:paste
-          disabled="{disabled}"
-          placeholder="{placeholder}"
-          id="{id}"
-          name="{name}"
+          {disabled}
+          {placeholder}
+          {id}
+          {name}
         />
         {#if invalid}
           <WarningFilled class="bx--list-box__invalid-icon" />
         {/if}
         {#if value}
           <ListBoxSelection
-            on:clear="{() => {
-              value = '';
+            on:clear={() => {
+              value = "";
               open = false;
-            }}"
-            translateWithId="{translateWithIdSelection}"
-            disabled="{disabled}"
-            open="{open}"
+            }}
+            translateWithId={translateWithIdSelection}
+            {disabled}
+            {open}
           />
         {/if}
         <ListBoxMenuIcon
           style="pointer-events: {open ? 'auto' : 'none'}"
-          on:click="{(e) => {
+          on:click={(e) => {
             e.stopPropagation();
             open = !open;
-          }}"
-          translateWithId="{translateWithId}"
-          open="{open}"
+          }}
+          {translateWithId}
+          {open}
         />
       {/if}
       {#if !filterable}
-        <span class:bx--list-box__label="{true}">{label}</span>
-        <ListBoxMenuIcon open="{open}" translateWithId="{translateWithId}" />
+        <span class:bx--list-box__label={true}>{label}</span>
+        <ListBoxMenuIcon {open} {translateWithId} />
       {/if}
     </ListBoxField>
-    <div style:display="{open ? "block" : "none"}">
-      <ListBoxMenu
-        aria-label="{ariaLabel}"
-        id="{id}"
-        aria-multiselectable="true"
-      >
+    <div style:display={open ? "block" : "none"}>
+      <ListBoxMenu aria-label={ariaLabel} {id} aria-multiselectable="true">
         {#each filterable ? filteredItems : sortedItems as item, i (item.id)}
           <ListBoxMenuItem
-            id="{item.id}"
+            id={item.id}
             role="option"
             aria-labelledby="checkbox-{item.id}"
-            aria-selected="{item.checked}"
-            active="{item.checked}"
-            highlighted="{highlightedIndex === i}"
-            disabled="{item.disabled}"
-            on:click="{(e) => {
+            aria-selected={item.checked}
+            active={item.checked}
+            highlighted={highlightedIndex === i}
+            disabled={item.disabled}
+            on:click={(e) => {
               if (item.disabled) {
                 e.stopPropagation();
                 return;
               }
               sortedItems = sortedItems.map((_) =>
-                _.id === item.id ? { ..._, checked: !_.checked } : _
+                _.id === item.id ? { ..._, checked: !_.checked } : _,
               );
               fieldRef.focus();
-            }}"
-            on:mouseenter="{() => {
+            }}
+            on:mouseenter={() => {
               if (item.disabled) return;
               highlightedIndex = i;
-            }}"
+            }}
           >
             <Checkbox
-              name="{item.id}"
-              title="{useTitleInItem ? itemToString(item) : undefined}"
+              name={item.id}
+              title={useTitleInItem ? itemToString(item) : undefined}
               {...itemToInput(item)}
               readonly
               tabindex="-1"
               id="checkbox-{item.id}"
-              checked="{item.checked}"
-              disabled="{item.disabled}"
-              on:blur="{() => {
+              checked={item.checked}
+              disabled={item.disabled}
+              on:blur={() => {
                 if (i === filteredItems.length - 1) open = false;
-              }}"
+              }}
             >
-              <slot slot="labelText" item="{item}" index="{i}">
+              <slot slot="labelText" {item} index={i}>
                 {itemToString(item)}
               </slot>
             </Checkbox>
@@ -539,8 +536,8 @@
   </ListBox>
   {#if !inline && !invalid && !warn && helperText}
     <div
-      class:bx--form__helper-text="{true}"
-      class:bx--form__helper-text--disabled="{disabled}"
+      class:bx--form__helper-text={true}
+      class:bx--form__helper-text--disabled={disabled}
     >
       {helperText}
     </div>
diff --git a/src/Notification/InlineNotification.svelte b/src/Notification/InlineNotification.svelte
index 5bde027e..9cea92f4 100644
--- a/src/Notification/InlineNotification.svelte
+++ b/src/Notification/InlineNotification.svelte
@@ -49,7 +49,7 @@
     const shouldContinue = dispatch(
       "close",
       { timeout: closeFromTimeout === true },
-      { cancelable: true }
+      { cancelable: true },
     );
     if (shouldContinue) {
       open = false;
@@ -70,34 +70,34 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 {#if open}
   <div
-    role="{role}"
-    kind="{kind}"
-    class:bx--inline-notification="{true}"
-    class:bx--inline-notification--low-contrast="{lowContrast}"
-    class:bx--inline-notification--hide-close-button="{hideCloseButton}"
-    class:bx--inline-notification--error="{kind === 'error'}"
-    class:bx--inline-notification--info="{kind === 'info'}"
-    class:bx--inline-notification--info-square="{kind === 'info-square'}"
-    class:bx--inline-notification--success="{kind === 'success'}"
-    class:bx--inline-notification--warning="{kind === 'warning'}"
-    class:bx--inline-notification--warning-alt="{kind === 'warning-alt'}"
+    {role}
+    {kind}
+    class:bx--inline-notification={true}
+    class:bx--inline-notification--low-contrast={lowContrast}
+    class:bx--inline-notification--hide-close-button={hideCloseButton}
+    class:bx--inline-notification--error={kind === "error"}
+    class:bx--inline-notification--info={kind === "info"}
+    class:bx--inline-notification--info-square={kind === "info-square"}
+    class:bx--inline-notification--success={kind === "success"}
+    class:bx--inline-notification--warning={kind === "warning"}
+    class:bx--inline-notification--warning-alt={kind === "warning-alt"}
     {...$$restProps}
     on:click
     on:mouseover
     on:mouseenter
     on:mouseleave
   >
-    <div class:bx--inline-notification__details="{true}">
+    <div class:bx--inline-notification__details={true}>
       <NotificationIcon
         notificationType="inline"
-        kind="{kind}"
-        iconDescription="{statusIconDescription}"
+        {kind}
+        iconDescription={statusIconDescription}
       />
-      <div class:bx--inline-notification__text-wrapper="{true}">
-        <p class:bx--inline-notification__title="{true}">
+      <div class:bx--inline-notification__text-wrapper={true}>
+        <p class:bx--inline-notification__title={true}>
           <slot name="title">{title}</slot>
         </p>
-        <div class:bx--inline-notification__subtitle="{true}">
+        <div class:bx--inline-notification__subtitle={true}>
           <slot name="subtitle">{subtitle}</slot>
         </div>
         <slot />
@@ -106,9 +106,9 @@
     <slot name="actions" />
     {#if !hideCloseButton}
       <NotificationButton
-        iconDescription="{closeButtonDescription}"
+        iconDescription={closeButtonDescription}
         notificationType="inline"
-        on:click="{close}"
+        on:click={close}
       />
     {/if}
   </div>
diff --git a/src/Notification/NotificationButton.svelte b/src/Notification/NotificationButton.svelte
index 308563bf..4d937a1d 100644
--- a/src/Notification/NotificationButton.svelte
+++ b/src/Notification/NotificationButton.svelte
@@ -26,10 +26,10 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <button
   type="button"
-  aria-label="{iconDescription}"
-  title="{iconDescription}"
-  class:bx--toast-notification__close-button="{notificationType === 'toast'}"
-  class:bx--inline-notification__close-button="{notificationType === 'inline'}"
+  aria-label={iconDescription}
+  title={iconDescription}
+  class:bx--toast-notification__close-button={notificationType === "toast"}
+  class:bx--inline-notification__close-button={notificationType === "inline"}
   {...$$restProps}
   on:click
   on:mouseover
@@ -37,9 +37,9 @@
   on:mouseleave
 >
   <svelte:component
-    this="{icon}"
-    size="{20}"
-    title="{title}"
+    this={icon}
+    size={20}
+    {title}
     class="{notificationType === 'toast' &&
       'bx--toast-notification__close-icon'} {notificationType === 'inline' &&
       'bx--inline-notification__close-icon'}"
diff --git a/src/Notification/NotificationIcon.svelte b/src/Notification/NotificationIcon.svelte
index f106c4b5..188b4faa 100644
--- a/src/Notification/NotificationIcon.svelte
+++ b/src/Notification/NotificationIcon.svelte
@@ -32,9 +32,9 @@
 </script>
 
 <svelte:component
-  this="{icons[kind]}"
-  size="{20}"
-  title="{iconDescription}"
+  this={icons[kind]}
+  size={20}
+  title={iconDescription}
   class="{notificationType === 'toast' &&
     'bx--toast-notification__icon'} {notificationType === 'inline' &&
     'bx--inline-notification__icon'}"
diff --git a/src/Notification/ToastNotification.svelte b/src/Notification/ToastNotification.svelte
index b8ac4924..a9f9f62c 100644
--- a/src/Notification/ToastNotification.svelte
+++ b/src/Notification/ToastNotification.svelte
@@ -61,7 +61,7 @@
     const shouldContinue = dispatch(
       "close",
       { timeout: closeFromTimeout === true },
-      { cancelable: true }
+      { cancelable: true },
     );
     if (shouldContinue) {
       open = false;
@@ -92,40 +92,40 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 {#if open}
   <div
-    role="{role}"
-    kind="{kind}"
-    class:bx--toast-notification="{true}"
-    class:bx--toast-notification--low-contrast="{lowContrast}"
-    class:bx--toast-notification--error="{kind === 'error'}"
-    class:bx--toast-notification--info="{kind === 'info'}"
-    class:bx--toast-notification--info-square="{kind === 'info-square'}"
-    class:bx--toast-notification--success="{kind === 'success'}"
-    class:bx--toast-notification--warning="{kind === 'warning'}"
-    class:bx--toast-notification--warning-alt="{kind === 'warning-alt'}"
-    style:width="{fullWidth ? "100%" : undefined}"
+    {role}
+    {kind}
+    class:bx--toast-notification={true}
+    class:bx--toast-notification--low-contrast={lowContrast}
+    class:bx--toast-notification--error={kind === "error"}
+    class:bx--toast-notification--info={kind === "info"}
+    class:bx--toast-notification--info-square={kind === "info-square"}
+    class:bx--toast-notification--success={kind === "success"}
+    class:bx--toast-notification--warning={kind === "warning"}
+    class:bx--toast-notification--warning-alt={kind === "warning-alt"}
+    style:width={fullWidth ? "100%" : undefined}
     {...$$restProps}
     on:click
     on:mouseover
     on:mouseenter
     on:mouseleave
   >
-    <NotificationIcon kind="{kind}" iconDescription="{statusIconDescription}" />
-    <div class:bx--toast-notification__details="{true}">
-      <h3 class:bx--toast-notification__title="{true}">
+    <NotificationIcon {kind} iconDescription={statusIconDescription} />
+    <div class:bx--toast-notification__details={true}>
+      <h3 class:bx--toast-notification__title={true}>
         <slot name="title">{title}</slot>
       </h3>
-      <div class:bx--toast-notification__subtitle="{true}">
+      <div class:bx--toast-notification__subtitle={true}>
         <slot name="subtitle">{subtitle}</slot>
       </div>
-      <div class:bx--toast-notification__caption="{true}">
+      <div class:bx--toast-notification__caption={true}>
         <slot name="caption">{caption}</slot>
       </div>
       <slot />
     </div>
     {#if !hideCloseButton}
       <NotificationButton
-        iconDescription="{closeButtonDescription}"
-        on:click="{close}"
+        iconDescription={closeButtonDescription}
+        on:click={close}
       />
     {/if}
   </div>
diff --git a/src/NumberInput/NumberInput.svelte b/src/NumberInput/NumberInput.svelte
index 59009775..784c9f87 100644
--- a/src/NumberInput/NumberInput.svelte
+++ b/src/NumberInput/NumberInput.svelte
@@ -156,56 +156,56 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class:bx--form-item="{true}"
+  class:bx--form-item={true}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave
 >
   <div
-    data-invalid="{error || undefined}"
-    class:bx--number="{true}"
-    class:bx--number--helpertext="{true}"
-    class:bx--number--readonly="{readonly}"
-    class:bx--number--light="{light}"
-    class:bx--number--nolabel="{hideLabel}"
-    class:bx--number--nosteppers="{hideSteppers}"
-    class:bx--number--sm="{size === 'sm'}"
-    class:bx--number--xl="{size === 'xl'}"
+    data-invalid={error || undefined}
+    class:bx--number={true}
+    class:bx--number--helpertext={true}
+    class:bx--number--readonly={readonly}
+    class:bx--number--light={light}
+    class:bx--number--nolabel={hideLabel}
+    class:bx--number--nosteppers={hideSteppers}
+    class:bx--number--sm={size === "sm"}
+    class:bx--number--xl={size === "xl"}
   >
     {#if $$slots.label || label}
       <label
-        for="{id}"
-        class:bx--label="{true}"
-        class:bx--label--disabled="{disabled}"
-        class:bx--visually-hidden="{hideLabel}"
+        for={id}
+        class:bx--label={true}
+        class:bx--label--disabled={disabled}
+        class:bx--visually-hidden={hideLabel}
       >
         <slot name="label">{label}</slot>
       </label>
     {/if}
     <div
-      class:bx--number__input-wrapper="{true}"
-      class:bx--number__input-wrapper--warning="{!invalid && warn}"
+      class:bx--number__input-wrapper={true}
+      class:bx--number__input-wrapper--warning={!invalid && warn}
     >
       <input
-        bind:this="{ref}"
+        bind:this={ref}
         type="number"
         pattern="[0-9]*"
-        aria-describedby="{errorId}"
-        data-invalid="{error || undefined}"
-        aria-invalid="{error || undefined}"
-        aria-label="{label ? undefined : ariaLabel}"
-        disabled="{disabled}"
-        id="{id}"
-        name="{name}"
-        max="{max}"
-        min="{min}"
-        step="{step}"
-        value="{value ?? ''}"
-        readonly="{readonly}"
+        aria-describedby={errorId}
+        data-invalid={error || undefined}
+        aria-invalid={error || undefined}
+        aria-label={label ? undefined : ariaLabel}
+        {disabled}
+        {id}
+        {name}
+        {max}
+        {min}
+        {step}
+        value={value ?? ""}
+        {readonly}
         {...$$restProps}
-        on:change="{onChange}"
-        on:input="{onInput}"
+        on:change={onChange}
+        on:input={onInput}
         on:keydown
         on:keyup
         on:focus
@@ -225,55 +225,55 @@
         {/if}
       {/if}
       {#if !hideSteppers}
-        <div class:bx--number__controls="{true}">
+        <div class:bx--number__controls={true}>
           <button
             type="button"
             tabindex="-1"
-            title="{decrementLabel || iconDescription}"
-            aria-label="{decrementLabel || iconDescription}"
-            class:bx--number__control-btn="{true}"
-            class:down-icon="{true}"
-            on:click="{() => {
+            title={decrementLabel || iconDescription}
+            aria-label={decrementLabel || iconDescription}
+            class:bx--number__control-btn={true}
+            class:down-icon={true}
+            on:click={() => {
               updateValue(false);
-            }}"
-            disabled="{disabled}"
+            }}
+            {disabled}
           >
             <Subtract class="down-icon" />
           </button>
-          <div class:bx--number__rule-divider="{true}"></div>
+          <div class:bx--number__rule-divider={true}></div>
           <button
             type="button"
             tabindex="-1"
-            title="{incrementLabel || iconDescription}"
-            aria-label="{incrementLabel || iconDescription}"
-            class:bx--number__control-btn="{true}"
-            class:up-icon="{true}"
-            on:click="{() => {
+            title={incrementLabel || iconDescription}
+            aria-label={incrementLabel || iconDescription}
+            class:bx--number__control-btn={true}
+            class:up-icon={true}
+            on:click={() => {
               updateValue(true);
-            }}"
-            disabled="{disabled}"
+            }}
+            {disabled}
           >
             <Add class="up-icon" />
           </button>
-          <div class:bx--number__rule-divider="{true}"></div>
+          <div class:bx--number__rule-divider={true}></div>
         </div>
       {/if}
     </div>
     {#if !error && !warn && helperText}
       <div
-        class:bx--form__helper-text="{true}"
-        class:bx--form__helper-text--disabled="{disabled}"
+        class:bx--form__helper-text={true}
+        class:bx--form__helper-text--disabled={disabled}
       >
         {helperText}
       </div>
     {/if}
     {#if error}
-      <div id="{errorId}" class:bx--form-requirement="{true}">
+      <div id={errorId} class:bx--form-requirement={true}>
         {invalidText}
       </div>
     {/if}
     {#if !error && warn}
-      <div id="{errorId}" class:bx--form-requirement="{true}">{warnText}</div>
+      <div id={errorId} class:bx--form-requirement={true}>{warnText}</div>
     {/if}
   </div>
 </div>
diff --git a/src/NumberInput/NumberInputSkeleton.svelte b/src/NumberInput/NumberInputSkeleton.svelte
index 09090c2a..b43a271f 100644
--- a/src/NumberInput/NumberInputSkeleton.svelte
+++ b/src/NumberInput/NumberInputSkeleton.svelte
@@ -6,7 +6,7 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class:bx--form-item="{true}"
+  class:bx--form-item={true}
   {...$$restProps}
   on:click
   on:mouseover
@@ -14,7 +14,7 @@
   on:mouseleave
 >
   {#if !hideLabel}
-    <span class:bx--label="{true}" class:bx--skeleton="{true}"></span>
+    <span class:bx--label={true} class:bx--skeleton={true}></span>
   {/if}
-  <div class:bx--number="{true}" class:bx--skeleton="{true}"></div>
+  <div class:bx--number={true} class:bx--skeleton={true}></div>
 </div>
diff --git a/src/OrderedList/OrderedList.svelte b/src/OrderedList/OrderedList.svelte
index 705c996f..999c113b 100644
--- a/src/OrderedList/OrderedList.svelte
+++ b/src/OrderedList/OrderedList.svelte
@@ -12,10 +12,10 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <ol
-  class:bx--list--ordered="{!native}"
-  class:bx--list--ordered--native="{native}"
-  class:bx--list--nested="{nested}"
-  class:bx--list--expressive="{expressive}"
+  class:bx--list--ordered={!native}
+  class:bx--list--ordered--native={native}
+  class:bx--list--nested={nested}
+  class:bx--list--expressive={expressive}
   {...$$restProps}
   on:click
   on:mouseover
diff --git a/src/OverflowMenu/OverflowMenu.svelte b/src/OverflowMenu/OverflowMenu.svelte
index b8052252..0979e03a 100644
--- a/src/OverflowMenu/OverflowMenu.svelte
+++ b/src/OverflowMenu/OverflowMenu.svelte
@@ -180,84 +180,84 @@
 </svelte:head>
 
 <svelte:window
-  on:click="{({ target }) => {
+  on:click={({ target }) => {
     if (buttonRef && buttonRef.contains(target)) return;
     if (menuRef && !menuRef.contains(target)) {
       open = false;
     }
-  }}"
+  }}
 />
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <button
-  bind:this="{buttonRef}"
+  bind:this={buttonRef}
   type="button"
   aria-haspopup="true"
-  aria-expanded="{open}"
-  aria-label="{ariaLabel}"
-  id="{id}"
-  class:bx--overflow-menu="{true}"
-  class:bx--overflow-menu--open="{open}"
-  class:bx--overflow-menu--light="{light}"
-  class:bx--overflow-menu--sm="{size === 'sm'}"
-  class:bx--overflow-menu--xl="{size === 'xl'}"
+  aria-expanded={open}
+  aria-label={ariaLabel}
+  {id}
+  class:bx--overflow-menu={true}
+  class:bx--overflow-menu--open={open}
+  class:bx--overflow-menu--light={light}
+  class:bx--overflow-menu--sm={size === "sm"}
+  class:bx--overflow-menu--xl={size === "xl"}
   {...$$restProps}
   on:click
-  on:click="{({ target }) => {
+  on:click={({ target }) => {
     if (!(menuRef && menuRef.contains(target))) {
       open = !open;
-      if (!open) dispatch('close');
+      if (!open) dispatch("close");
     }
-  }}"
+  }}
   on:mouseover
   on:mouseenter
   on:mouseleave
   on:keydown
-  on:keydown="{(e) => {
+  on:keydown={(e) => {
     if (open) {
-      if (['ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowUp'].includes(e.key)) {
+      if (["ArrowDown", "ArrowLeft", "ArrowRight", "ArrowUp"].includes(e.key)) {
         e.preventDefault();
-      } else if (e.key === 'Escape') {
+      } else if (e.key === "Escape") {
         e.stopPropagation();
-        dispatch('close');
+        dispatch("close");
         open = false;
         buttonRef.focus();
       }
     }
-  }}"
-  on:focusout="{(e) => {
+  }}
+  on:focusout={(e) => {
     if (open) {
       if (!buttonRef.contains(e.relatedTarget)) {
-        dispatch('close');
+        dispatch("close");
         open = false;
       }
     }
-  }}"
+  }}
 >
   <slot name="menu">
     <svelte:component
-      this="{icon}"
-      aria-label="{iconDescription}"
-      title="{iconDescription}"
+      this={icon}
+      aria-label={iconDescription}
+      title={iconDescription}
       class="bx--overflow-menu__icon {iconClass}"
     />
   </slot>
   {#if open}
     <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
     <ul
-      bind:this="{menuRef}"
+      bind:this={menuRef}
       role="menu"
       tabindex="-1"
-      aria-label="{ariaLabel}"
-      data-floating-menu-direction="{direction}"
-      class:bx--overflow-menu-options="{true}"
-      class:bx--overflow-menu--flip="{flipped}"
-      class:bx--overflow-menu-options--open="{open}"
-      class:bx--overflow-menu-options--light="{light}"
-      class:bx--overflow-menu-options--sm="{size === 'sm'}"
-      class:bx--overflow-menu-options--xl="{size === 'xl'}"
-      class:bx--breadcrumb-menu-options="{!!ctxBreadcrumbItem}"
-      class="{menuOptionsClass}"
+      aria-label={ariaLabel}
+      data-floating-menu-direction={direction}
+      class:bx--overflow-menu-options={true}
+      class:bx--overflow-menu--flip={flipped}
+      class:bx--overflow-menu-options--open={open}
+      class:bx--overflow-menu-options--light={light}
+      class:bx--overflow-menu-options--sm={size === "sm"}
+      class:bx--overflow-menu-options--xl={size === "xl"}
+      class:bx--breadcrumb-menu-options={!!ctxBreadcrumbItem}
+      class={menuOptionsClass}
     >
       <slot />
     </ul>
diff --git a/src/OverflowMenu/OverflowMenuItem.svelte b/src/OverflowMenu/OverflowMenuItem.svelte
index 5c1848ee..b0d74f19 100644
--- a/src/OverflowMenu/OverflowMenuItem.svelte
+++ b/src/OverflowMenu/OverflowMenuItem.svelte
@@ -54,57 +54,57 @@
 
 <li
   role="none"
-  id="{id}"
-  class:bx--overflow-menu-options__option="{true}"
-  class:bx--overflow-menu--divider="{hasDivider}"
-  class:bx--overflow-menu-options__option--danger="{danger}"
-  class:bx--overflow-menu-options__option--disabled="{disabled}"
+  {id}
+  class:bx--overflow-menu-options__option={true}
+  class:bx--overflow-menu--divider={hasDivider}
+  class:bx--overflow-menu-options__option--danger={danger}
+  class:bx--overflow-menu-options__option--disabled={disabled}
   {...$$restProps}
 >
   {#if href}
     <!-- svelte-ignore a11y-missing-attribute -->
     <!-- svelte-ignore a11y-no-static-element-interactions -->
     <a
-      bind:this="{ref}"
+      bind:this={ref}
       {...buttonProps}
       on:click
-      on:click="{() => {
+      on:click={() => {
         update(id);
-      }}"
+      }}
       on:keydown
-      on:keydown="{({ key }) => {
-        if (key === 'ArrowDown') {
+      on:keydown={({ key }) => {
+        if (key === "ArrowDown") {
           change(1);
-        } else if (key === 'ArrowUp') {
+        } else if (key === "ArrowUp") {
           change(-1);
         }
-      }}"
+      }}
     >
       <slot>
-        <div class:bx--overflow-menu-options__option-content="{true}">
+        <div class:bx--overflow-menu-options__option-content={true}>
           {text}
         </div>
       </slot>
     </a>
   {:else}
     <button
-      bind:this="{ref}"
+      bind:this={ref}
       {...buttonProps}
       on:click
-      on:click="{() => {
+      on:click={() => {
         update(id);
-      }}"
+      }}
       on:keydown
-      on:keydown="{({ key }) => {
-        if (key === 'ArrowDown') {
+      on:keydown={({ key }) => {
+        if (key === "ArrowDown") {
           change(1);
-        } else if (key === 'ArrowUp') {
+        } else if (key === "ArrowUp") {
           change(-1);
         }
-      }}"
+      }}
     >
       <slot>
-        <div class:bx--overflow-menu-options__option-content="{true}">
+        <div class:bx--overflow-menu-options__option-content={true}>
           {text}
         </div>
       </slot>
diff --git a/src/Pagination/Pagination.svelte b/src/Pagination/Pagination.svelte
index b307e078..1306e912 100644
--- a/src/Pagination/Pagination.svelte
+++ b/src/Pagination/Pagination.svelte
@@ -94,13 +94,13 @@
   $: forwardButtonDisabled = disabled || page === totalPages;
 </script>
 
-<div id="{id}" class:bx--pagination="{true}" {...$$restProps}>
-  <div class:bx--pagination__left="{true}">
+<div {id} class:bx--pagination={true} {...$$restProps}>
+  <div class:bx--pagination__left={true}>
     {#if !pageSizeInputDisabled}
       <label
         id="bx--pagination-select-{id}-count-label"
         for="bx--pagination-select-{id}"
-        class:bx--pagination__text="{true}"
+        class:bx--pagination__text={true}
       >
         {itemsPerPageText}
       </label>
@@ -110,29 +110,29 @@
         hideLabel
         noLabel
         inline
-        on:change="{() => {
-          dispatch('change', { pageSize });
-        }}"
-        bind:selected="{pageSize}"
+        on:change={() => {
+          dispatch("change", { pageSize });
+        }}
+        bind:selected={pageSize}
       >
         {#each pageSizes as size, i (size)}
-          <SelectItem value="{size}" text="{size.toString()}" />
+          <SelectItem value={size} text={size.toString()} />
         {/each}
       </Select>
     {/if}
-    <span class:bx--pagination__text="{!pageSizeInputDisabled}">
+    <span class:bx--pagination__text={!pageSizeInputDisabled}>
       {#if pagesUnknown}
         {itemText(pageSize * (page - 1) + 1, page * pageSize)}
       {:else}
         {itemRangeText(
           Math.min(pageSize * (page - 1) + 1, totalItems),
           Math.min(page * pageSize, totalItems),
-          totalItems
+          totalItems,
         )}
       {/if}
     </span>
   </div>
-  <div class:bx--pagination__right="{true}">
+  <div class:bx--pagination__right={true}>
     {#if !pageInputDisabled}
       <Select
         id="bx--pagination-select-{id + 2}"
@@ -140,16 +140,16 @@
         labelText="Page number, of {totalPages} pages"
         inline
         hideLabel
-        on:change="{() => {
-          dispatch('change', { page });
-        }}"
-        bind:selected="{page}"
+        on:change={() => {
+          dispatch("change", { page });
+        }}
+        bind:selected={page}
       >
         {#each selectItems as size, i (size)}
-          <SelectItem value="{size + 1}" text="{(size + 1).toString()}" />
+          <SelectItem value={size + 1} text={(size + 1).toString()} />
         {/each}
       </Select>
-      <span class:bx--pagination__text="{true}">
+      <span class:bx--pagination__text={true}>
         {#if pagesUnknown}
           {pageText(page)}
         {:else}{pageRangeText(page, totalPages)}{/if}
@@ -159,33 +159,33 @@
       kind="ghost"
       tooltipAlignment="center"
       tooltipPosition="top"
-      icon="{CaretLeft}"
-      iconDescription="{backwardText}"
-      disabled="{backButtonDisabled}"
+      icon={CaretLeft}
+      iconDescription={backwardText}
+      disabled={backButtonDisabled}
       class="bx--pagination__button bx--pagination__button--backward {backButtonDisabled
         ? 'bx--pagination__button--no-index'
         : ''}"
-      on:click="{() => {
+      on:click={() => {
         page--;
-        dispatch('click:button--previous', { page });
-        dispatch('change', { page });
-      }}"
+        dispatch("click:button--previous", { page });
+        dispatch("change", { page });
+      }}
     />
     <Button
       kind="ghost"
       tooltipAlignment="end"
       tooltipPosition="top"
-      icon="{CaretRight}"
-      iconDescription="{forwardText}"
-      disabled="{forwardButtonDisabled}"
+      icon={CaretRight}
+      iconDescription={forwardText}
+      disabled={forwardButtonDisabled}
       class="bx--pagination__button bx--pagination__button--forward {forwardButtonDisabled
         ? 'bx--pagination__button--no-index'
         : ''}"
-      on:click="{() => {
+      on:click={() => {
         page++;
-        dispatch('click:button--next', { page });
-        dispatch('change', { page });
-      }}"
+        dispatch("click:button--next", { page });
+        dispatch("change", { page });
+      }}
     />
   </div>
 </div>
diff --git a/src/Pagination/PaginationSkeleton.svelte b/src/Pagination/PaginationSkeleton.svelte
index bab15b50..f3838074 100644
--- a/src/Pagination/PaginationSkeleton.svelte
+++ b/src/Pagination/PaginationSkeleton.svelte
@@ -5,23 +5,20 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class:bx--pagination="{true}"
-  class:bx--skeleton="{true}"
+  class:bx--pagination={true}
+  class:bx--skeleton={true}
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave
 >
-  <div class:bx--pagination__left="{true}">
+  <div class:bx--pagination__left={true}>
     <SkeletonText width="70px" />
     <SkeletonText width="35px" />
     <SkeletonText width="105px" />
   </div>
-  <div
-    class:bx--pagination__right="{true}"
-    class:bx--pagination--inline="{true}"
-  >
+  <div class:bx--pagination__right={true} class:bx--pagination--inline={true}>
     <SkeletonText width="70px" />
   </div>
 </div>
diff --git a/src/PaginationNav/PaginationItem.svelte b/src/PaginationNav/PaginationItem.svelte
index e57a5156..889a899e 100644
--- a/src/PaginationNav/PaginationItem.svelte
+++ b/src/PaginationNav/PaginationItem.svelte
@@ -6,16 +6,16 @@
   export let active = false;
 </script>
 
-<li class:bx--pagination-nav__list-item="{true}">
+<li class:bx--pagination-nav__list-item={true}>
   <button
     type="button"
-    data-page="{page}"
-    aria-current="{active ? 'page' : undefined}"
-    class:bx--pagination-nav__page="{true}"
-    class:bx--pagination-nav__page--active="{active}"
+    data-page={page}
+    aria-current={active ? "page" : undefined}
+    class:bx--pagination-nav__page={true}
+    class:bx--pagination-nav__page--active={active}
     on:click
   >
-    <span class:bx--pagination-nav__accessibility-label="{true}">
+    <span class:bx--pagination-nav__accessibility-label={true}>
       <slot />
     </span>
     {page}
diff --git a/src/PaginationNav/PaginationNav.svelte b/src/PaginationNav/PaginationNav.svelte
index adf06929..cfac082f 100644
--- a/src/PaginationNav/PaginationNav.svelte
+++ b/src/PaginationNav/PaginationNav.svelte
@@ -76,111 +76,111 @@
     .slice(startOffset + front, (back + 1) * -1);
 </script>
 
-<nav aria-label="pagination" class:bx--pagination-nav="{true}" {...$$restProps}>
-  <ul class:bx--pagination-nav__list="{true}">
-    <li class:bx--pagination-nav__list-item="{true}">
+<nav aria-label="pagination" class:bx--pagination-nav={true} {...$$restProps}>
+  <ul class:bx--pagination-nav__list={true}>
+    <li class:bx--pagination-nav__list-item={true}>
       <Button
         kind="ghost"
         tooltipAlignment="center"
-        tooltipPosition="{tooltipPosition === 'inside'
-          ? 'right'
-          : tooltipPosition === 'outside'
-          ? 'left'
-          : tooltipPosition}"
-        iconDescription="{backwardText}"
-        disabled="{!loop && page === 1}"
-        icon="{CaretLeft}"
-        on:click="{() => {
+        tooltipPosition={tooltipPosition === "inside"
+          ? "right"
+          : tooltipPosition === "outside"
+            ? "left"
+            : tooltipPosition}
+        iconDescription={backwardText}
+        disabled={!loop && page === 1}
+        icon={CaretLeft}
+        on:click={() => {
           if (page <= 1) {
             if (loop) page = total;
           } else {
             page--;
           }
-          dispatch('click:button--previous', { page });
-          dispatch('change', { page });
-        }}"
+          dispatch("click:button--previous", { page });
+          dispatch("change", { page });
+        }}
       />
     </li>
     {#if fit > MIN || (fit <= MIN && page <= 1)}
       <PaginationItem
-        page="{1}"
-        active="{page === 1}"
-        on:click="{() => {
+        page={1}
+        active={page === 1}
+        on:click={() => {
           page = 1;
-          dispatch('change', { page });
-        }}"
+          dispatch("change", { page });
+        }}
       >
         {page === 1 ? "Active, Page" : "Page"}
       </PaginationItem>
     {/if}
     <PaginationOverflow
-      fromIndex="{startOffset}"
-      count="{front}"
-      on:select="{({ detail }) => {
+      fromIndex={startOffset}
+      count={front}
+      on:select={({ detail }) => {
         page = detail.index;
-        dispatch('change', { page });
-      }}"
+        dispatch("change", { page });
+      }}
     />
     {#each items as item}
       <PaginationItem
-        page="{item + 1}"
-        active="{page === item + 1}"
-        on:click="{() => {
+        page={item + 1}
+        active={page === item + 1}
+        on:click={() => {
           page = item + 1;
-          dispatch('change', { page });
-        }}"
+          dispatch("change", { page });
+        }}
       >
         {page === item ? "Active, Page" : "Page"}
       </PaginationItem>
     {/each}
     <PaginationOverflow
-      fromIndex="{total - back - 1}"
-      count="{back}"
-      on:select="{({ detail }) => {
+      fromIndex={total - back - 1}
+      count={back}
+      on:select={({ detail }) => {
         page = detail.index;
-        dispatch('change', { page });
-      }}"
+        dispatch("change", { page });
+      }}
     />
     {#if total > 1}
       <PaginationItem
-        page="{total}"
-        active="{page === total}"
-        on:click="{() => {
+        page={total}
+        active={page === total}
+        on:click={() => {
           page = total;
-          dispatch('change', { page });
-        }}"
+          dispatch("change", { page });
+        }}
       >
         {page === total ? "Active, Page" : "Page"}
       </PaginationItem>
     {/if}
-    <li class:bx--pagination-nav__list-item="{true}">
+    <li class:bx--pagination-nav__list-item={true}>
       <Button
         kind="ghost"
         tooltipAlignment="center"
-        tooltipPosition="{tooltipPosition === 'inside'
-          ? 'left'
-          : tooltipPosition === 'outside'
-          ? 'right'
-          : tooltipPosition}"
-        iconDescription="{forwardText}"
-        disabled="{!loop && page === total}"
-        icon="{CaretRight}"
-        on:click="{() => {
+        tooltipPosition={tooltipPosition === "inside"
+          ? "left"
+          : tooltipPosition === "outside"
+            ? "right"
+            : tooltipPosition}
+        iconDescription={forwardText}
+        disabled={!loop && page === total}
+        icon={CaretRight}
+        on:click={() => {
           if (page >= total) {
             if (loop) page = 1;
           } else {
             page++;
           }
-          dispatch('click:button--next', { page });
-          dispatch('change', { page });
-        }}"
+          dispatch("click:button--next", { page });
+          dispatch("change", { page });
+        }}
       />
     </li>
   </ul>
   <div
     aria-live="polite"
     aria-atomic="true"
-    class:bx--pagination-nav__accessibility-label="{true}"
+    class:bx--pagination-nav__accessibility-label={true}
   >
     Page
     {page + 1}
diff --git a/src/PaginationNav/PaginationOverflow.svelte b/src/PaginationNav/PaginationOverflow.svelte
index c5e099ad..f9191378 100644
--- a/src/PaginationNav/PaginationOverflow.svelte
+++ b/src/PaginationNav/PaginationOverflow.svelte
@@ -19,37 +19,37 @@
 </script>
 
 {#if count > 1}
-  <li class:bx--pagination-nav__list-item="{true}">
-    <div class:bx--pagination-nav__select="{true}">
+  <li class:bx--pagination-nav__list-item={true}>
+    <div class:bx--pagination-nav__select={true}>
       <!-- svelte-ignore a11y-no-onchange -->
       <select
         aria-label="Select Page number"
-        value="{value}"
-        class:bx--pagination-nav__page="{true}"
-        class:bx--pagination-nav__page--select="{true}"
-        on:change="{({ target }) => {
-          value = '';
-          dispatch('select', { index: Number(target.value) });
-        }}"
+        {value}
+        class:bx--pagination-nav__page={true}
+        class:bx--pagination-nav__page--select={true}
+        on:change={({ target }) => {
+          value = "";
+          dispatch("select", { index: Number(target.value) });
+        }}
       >
         <option value="" hidden></option>
         {#each Array.from({ length: count }, (_, i) => i) as i}
-          <option value="{fromIndex + i + 1}" data-page="{fromIndex + i + 1}">
+          <option value={fromIndex + i + 1} data-page={fromIndex + i + 1}>
             {fromIndex + i + 1}
           </option>
         {/each}
       </select>
-      <div class:bx--pagination-nav__select-icon-wrapper="{true}">
+      <div class:bx--pagination-nav__select-icon-wrapper={true}>
         <OverflowMenuHorizontal class="bx--pagination-nav__select-icon" />
       </div>
     </div>
   </li>
 {:else if count === 1}
   <PaginationItem
-    page="{fromIndex + 1}"
-    on:click="{() => {
-      dispatch('select', { index: fromIndex });
-    }}"
+    page={fromIndex + 1}
+    on:click={() => {
+      dispatch("select", { index: fromIndex });
+    }}
   >
     Page
   </PaginationItem>
diff --git a/src/Popover/Popover.svelte b/src/Popover/Popover.svelte
index 2249cc9c..982d5d35 100644
--- a/src/Popover/Popover.svelte
+++ b/src/Popover/Popover.svelte
@@ -35,39 +35,39 @@
 </script>
 
 <svelte:window
-  on:click="{(e) => {
+  on:click={(e) => {
     if (!open) return;
     if (!ref.contains(e.target)) {
-      dispatch('click:outside', { target: e.target });
+      dispatch("click:outside", { target: e.target });
       if (closeOnOutsideClick) open = false;
     }
-  }}"
+  }}
 />
 
 <div
-  bind:this="{ref}"
-  class:bx--popover="{true}"
-  class:bx--popover--caret="{caret}"
-  class:bx--popover--light="{light}"
-  class:bx--popover--high-contrast="{highContrast}"
-  class:bx--popover--top="{align === 'top'}"
-  class:bx--popover--top-left="{align === 'top-left'}"
-  class:bx--popover--top-right="{align === 'top-right'}"
-  class:bx--popover--bottom="{align === 'bottom'}"
-  class:bx--popover--bottom-left="{align === 'bottom-left'}"
-  class:bx--popover--bottom-right="{align === 'bottom-right'}"
-  class:bx--popover--left="{align === 'left'}"
-  class:bx--popover--left-bottom="{align === 'left-bottom'}"
-  class:bx--popover--left-top="{align === 'left-top'}"
-  class:bx--popover--right="{align === 'right'}"
-  class:bx--popover--right-bottom="{align === 'right-bottom'}"
-  class:bx--popover--right-top="{align === 'right-top'}"
-  class:bx--popover--open="{open}"
-  class:bx--popover--relative="{relative}"
-  style:position="{relative ? "relative" : undefined}"
+  bind:this={ref}
+  class:bx--popover={true}
+  class:bx--popover--caret={caret}
+  class:bx--popover--light={light}
+  class:bx--popover--high-contrast={highContrast}
+  class:bx--popover--top={align === "top"}
+  class:bx--popover--top-left={align === "top-left"}
+  class:bx--popover--top-right={align === "top-right"}
+  class:bx--popover--bottom={align === "bottom"}
+  class:bx--popover--bottom-left={align === "bottom-left"}
+  class:bx--popover--bottom-right={align === "bottom-right"}
+  class:bx--popover--left={align === "left"}
+  class:bx--popover--left-bottom={align === "left-bottom"}
+  class:bx--popover--left-top={align === "left-top"}
+  class:bx--popover--right={align === "right"}
+  class:bx--popover--right-bottom={align === "right-bottom"}
+  class:bx--popover--right-top={align === "right-top"}
+  class:bx--popover--open={open}
+  class:bx--popover--relative={relative}
+  style:position={relative ? "relative" : undefined}
   {...$$restProps}
 >
-  <div class:bx--popover-contents="{true}">
+  <div class:bx--popover-contents={true}>
     <slot />
   </div>
 </div>
diff --git a/src/ProgressBar/ProgressBar.svelte b/src/ProgressBar/ProgressBar.svelte
index 89078b3d..2fe1138d 100644
--- a/src/ProgressBar/ProgressBar.svelte
+++ b/src/ProgressBar/ProgressBar.svelte
@@ -62,48 +62,48 @@
 </script>
 
 <div
-  class:bx--progress-bar="{true}"
-  class:bx--progress-bar--indeterminate="{indeterminate}"
-  class:bx--progress-bar--big="{size === 'md'}"
-  class:bx--progress-bar--small="{size === 'sm'}"
-  class:bx--progress-bar--inline="{kind === 'inline'}"
-  class:bx--progress-bar--indented="{kind === 'indented'}"
-  class:bx--progress-bar--error="{status === 'error'}"
-  class:bx--progress-bar--finished="{status === 'finished'}"
+  class:bx--progress-bar={true}
+  class:bx--progress-bar--indeterminate={indeterminate}
+  class:bx--progress-bar--big={size === "md"}
+  class:bx--progress-bar--small={size === "sm"}
+  class:bx--progress-bar--inline={kind === "inline"}
+  class:bx--progress-bar--indented={kind === "indented"}
+  class:bx--progress-bar--error={status === "error"}
+  class:bx--progress-bar--finished={status === "finished"}
   {...$$restProps}
 >
   <label
-    for="{id}"
-    class:bx--progress-bar__label="{true}"
-    class:bx--visually-hidden="{hideLabel}"
+    for={id}
+    class:bx--progress-bar__label={true}
+    class:bx--visually-hidden={hideLabel}
   >
     <slot name="labelText">
       {labelText}
     </slot>
     {#if status === "error" || status === "finished"}
       <svelte:component
-        this="{statusIcons[status]}"
+        this={statusIcons[status]}
         class="bx--progress-bar__status-icon"
       />
     {/if}
   </label>
   <div
     role="progressbar"
-    id="{id}"
-    class:bx--progress-bar__track="{true}"
-    aria-busy="{status === 'active'}"
-    aria-valuemin="{indeterminate ? undefined : 0}"
-    aria-valuemax="{indeterminate ? undefined : max}"
-    aria-valuenow="{indeterminate ? undefined : capped}"
-    aria-describedby="{helperText ? helperId : null}"
+    {id}
+    class:bx--progress-bar__track={true}
+    aria-busy={status === "active"}
+    aria-valuemin={indeterminate ? undefined : 0}
+    aria-valuemax={indeterminate ? undefined : max}
+    aria-valuenow={indeterminate ? undefined : capped}
+    aria-describedby={helperText ? helperId : null}
   >
     <div
-      class:bx--progress-bar__bar="{true}"
-      style:transform="{status === "active" && `scaleX(${capped / max})`}"
+      class:bx--progress-bar__bar={true}
+      style:transform={status === "active" && `scaleX(${capped / max})`}
     ></div>
   </div>
   {#if helperText}
-    <div id="{helperId}" class:bx--progress-bar__helper-text="{true}">
+    <div id={helperId} class:bx--progress-bar__helper-text={true}>
       {helperText}
     </div>
   {/if}
diff --git a/src/ProgressIndicator/ProgressIndicator.svelte b/src/ProgressIndicator/ProgressIndicator.svelte
index 26cb9db5..1c25b942 100644
--- a/src/ProgressIndicator/ProgressIndicator.svelte
+++ b/src/ProgressIndicator/ProgressIndicator.svelte
@@ -17,7 +17,7 @@
   const dispatch = createEventDispatcher();
   const steps = writable([]);
   const stepsById = derived(steps, (steps) =>
-    steps.reduce((a, c) => ({ ...a, [c.id]: c }), {})
+    steps.reduce((a, c) => ({ ...a, [c.id]: c }), {}),
   );
   const preventChangeOnClickStore = writable(preventChangeOnClick);
 
@@ -58,7 +58,7 @@
     _.map((step, i) => ({
       ...step,
       current: i === currentIndex,
-    }))
+    })),
   );
   $: preventChangeOnClickStore.set(preventChangeOnClick);
 </script>
@@ -66,9 +66,9 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <ul
-  class:bx--progress="{true}"
-  class:bx--progress--vertical="{vertical}"
-  class:bx--progress--space-equal="{spaceEqually && !vertical}"
+  class:bx--progress={true}
+  class:bx--progress--vertical={vertical}
+  class:bx--progress--space-equal={spaceEqually && !vertical}
   {...$$restProps}
   on:click
   on:mouseover
diff --git a/src/ProgressIndicator/ProgressIndicatorSkeleton.svelte b/src/ProgressIndicator/ProgressIndicatorSkeleton.svelte
index d37b5538..8797ac6e 100644
--- a/src/ProgressIndicator/ProgressIndicatorSkeleton.svelte
+++ b/src/ProgressIndicator/ProgressIndicatorSkeleton.svelte
@@ -9,9 +9,9 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <ul
-  class:bx--progress="{true}"
-  class:bx--progress--vertical="{vertical}"
-  class:bx--skeleton="{true}"
+  class:bx--progress={true}
+  class:bx--progress--vertical={vertical}
+  class:bx--skeleton={true}
   {...$$restProps}
   on:click
   on:mouseover
@@ -20,18 +20,18 @@
 >
   {#each Array.from({ length: count }, (_, i) => i) as item, i (item)}
     <li
-      class:bx--progress-step="{true}"
-      class:bx--progress-step--incomplete="{true}"
+      class:bx--progress-step={true}
+      class:bx--progress-step--incomplete={true}
     >
       <div
-        class:bx--progress-step-button="{true}"
-        class:bx--progress-step-button--unclickable="{true}"
+        class:bx--progress-step-button={true}
+        class:bx--progress-step-button--unclickable={true}
       >
         <svg>
           <path d="M 7, 7 m -7, 0 a 7,7 0 1,0 14,0 a 7,7 0 1,0 -14,0"></path>
         </svg>
-        <p class:bx--progress-label="{true}"></p>
-        <span class:bx--progress-line="{true}"></span>
+        <p class:bx--progress-label={true}></p>
+        <span class:bx--progress-line={true}></span>
       </div>
     </li>
   {/each}
diff --git a/src/ProgressIndicator/ProgressStep.svelte b/src/ProgressIndicator/ProgressStep.svelte
index 09ae7c91..d29d3715 100644
--- a/src/ProgressIndicator/ProgressStep.svelte
+++ b/src/ProgressIndicator/ProgressStep.svelte
@@ -53,55 +53,55 @@
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <li
-  id="{id}"
-  class:bx--progress-step="{true}"
-  class:bx--progress-step--current="{current}"
-  class:bx--progress-step--complete="{complete}"
-  class:bx--progress-step--incomplete="{!complete && !current}"
-  class:bx--progress-step--disabled="{disabled}"
+  {id}
+  class:bx--progress-step={true}
+  class:bx--progress-step--current={current}
+  class:bx--progress-step--complete={complete}
+  class:bx--progress-step--incomplete={!complete && !current}
+  class:bx--progress-step--disabled={disabled}
   {...$$restProps}
 >
   <button
     type="button"
-    disabled="{disabled}"
-    aria-disabled="{disabled}"
-    tabindex="{!current && !disabled ? '0' : '-1'}"
-    class:bx--progress-step-button="{true}"
-    class:bx--progress-step-button--unclickable="{current ||
-      $preventChangeOnClick}"
+    {disabled}
+    aria-disabled={disabled}
+    tabindex={!current && !disabled ? "0" : "-1"}
+    class:bx--progress-step-button={true}
+    class:bx--progress-step-button--unclickable={current ||
+      $preventChangeOnClick}
     on:click
-    on:click="{() => {
+    on:click={() => {
       if (!step.complete) return;
       change(step.index);
-    }}"
+    }}
     on:mouseover
     on:mouseenter
     on:mouseleave
     on:keydown
-    on:keydown="{(e) => {
+    on:keydown={(e) => {
       if (!step.complete) return;
-      if (e.key === ' ' || e.key === 'Enter') {
+      if (e.key === " " || e.key === "Enter") {
         change(step.index);
       }
-    }}"
+    }}
   >
     {#if invalid}
-      <Warning class="bx--progress__warning" title="{description}" />
+      <Warning class="bx--progress__warning" title={description} />
     {:else if current}
-      <Incomplete title="{description}" />
+      <Incomplete title={description} />
     {:else if complete}
-      <CheckmarkOutline title="{description}" />
+      <CheckmarkOutline title={description} />
     {:else}
-      <CircleDash title="{description}" />
+      <CircleDash title={description} />
     {/if}
-    <div class:bx--progress-text="{true}">
-      <slot props="{{ class: 'bx--progress-label' }}">
-        <p class:bx--progress-label="{true}">{label}</p>
+    <div class:bx--progress-text={true}>
+      <slot props={{ class: "bx--progress-label" }}>
+        <p class:bx--progress-label={true}>{label}</p>
       </slot>
       {#if secondaryLabel}
-        <p class:bx--progress-optional="{true}">{secondaryLabel}</p>
+        <p class:bx--progress-optional={true}>{secondaryLabel}</p>
       {/if}
     </div>
-    <span class:bx--progress-line="{true}"></span>
+    <span class:bx--progress-line={true}></span>
   </button>
 </li>
diff --git a/src/RadioButton/RadioButton.svelte b/src/RadioButton/RadioButton.svelte
index 233faf28..6fecf17e 100644
--- a/src/RadioButton/RadioButton.svelte
+++ b/src/RadioButton/RadioButton.svelte
@@ -42,7 +42,7 @@
   import { readable } from "svelte/store";
 
   const { add, update, selectedValue, groupName, groupRequired } = getContext(
-    "RadioButtonGroup"
+    "RadioButtonGroup",
   ) ?? {
     groupName: readable(undefined),
     groupRequired: readable(undefined),
@@ -57,31 +57,31 @@
 </script>
 
 <div
-  class:bx--radio-button-wrapper="{true}"
-  class:bx--radio-button-wrapper--label-left="{labelPosition === 'left'}"
+  class:bx--radio-button-wrapper={true}
+  class:bx--radio-button-wrapper--label-left={labelPosition === "left"}
   {...$$restProps}
 >
   <input
-    bind:this="{ref}"
+    bind:this={ref}
     type="radio"
-    id="{id}"
-    name="{$groupName ?? name}"
-    checked="{checked}"
-    disabled="{disabled}"
-    required="{$groupRequired ?? required}"
-    value="{value}"
-    class:bx--radio-button="{true}"
+    {id}
+    name={$groupName ?? name}
+    {checked}
+    {disabled}
+    required={$groupRequired ?? required}
+    {value}
+    class:bx--radio-button={true}
     on:change
-    on:change="{() => {
+    on:change={() => {
       if (update) {
         update(value);
       }
-    }}"
+    }}
   />
-  <label class:bx--radio-button__label="{true}" for="{id}">
-    <span class:bx--radio-button__appearance="{true}"></span>
+  <label class:bx--radio-button__label={true} for={id}>
+    <span class:bx--radio-button__appearance={true}></span>
     {#if labelText || $$slots.labelText}
-      <span class:bx--visually-hidden="{hideLabel}">
+      <span class:bx--visually-hidden={hideLabel}>
         <slot name="labelText">
           {labelText}
         </slot>
diff --git a/src/RadioButton/RadioButtonSkeleton.svelte b/src/RadioButton/RadioButtonSkeleton.svelte
index 93667c2e..b76a0089 100644
--- a/src/RadioButton/RadioButtonSkeleton.svelte
+++ b/src/RadioButton/RadioButtonSkeleton.svelte
@@ -1,14 +1,13 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class:bx--radio-button-wrapper="{true}"
+  class:bx--radio-button-wrapper={true}
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave
 >
-  <div class:bx--radio-button="{true}" class:bx--skeleton="{true}"></div>
-  <span class:bx--radio-button__label="{true}" class:bx--skeleton="{true}"
-  ></span>
+  <div class:bx--radio-button={true} class:bx--skeleton={true}></div>
+  <span class:bx--radio-button__label={true} class:bx--skeleton={true}></span>
 </div>
diff --git a/src/RadioButtonGroup/RadioButtonGroup.svelte b/src/RadioButtonGroup/RadioButtonGroup.svelte
index 3ae8c5a3..2784c438 100644
--- a/src/RadioButtonGroup/RadioButtonGroup.svelte
+++ b/src/RadioButtonGroup/RadioButtonGroup.svelte
@@ -95,8 +95,8 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  id="{id}"
-  class:bx--form-item="{true}"
+  {id}
+  class:bx--form-item={true}
   {...$$restProps}
   on:click
   on:mouseover
@@ -104,14 +104,14 @@
   on:mouseleave
 >
   <fieldset
-    class:bx--radio-button-group="{true}"
-    class:bx--radio-button-group--vertical="{orientation === 'vertical'}"
-    class:bx--radio-button-group--label-left="{labelPosition === 'left'}"
-    class:bx--radio-button-group--label-right="{labelPosition === 'right'}"
-    disabled="{disabled}"
+    class:bx--radio-button-group={true}
+    class:bx--radio-button-group--vertical={orientation === "vertical"}
+    class:bx--radio-button-group--label-left={labelPosition === "left"}
+    class:bx--radio-button-group--label-right={labelPosition === "right"}
+    {disabled}
   >
     {#if legendText || $$slots.legendText}
-      <legend class:bx--label="{true}" class:bx--visually-hidden="{hideLegend}">
+      <legend class:bx--label={true} class:bx--visually-hidden={hideLegend}>
         <slot name="legendText">{legendText}</slot>
       </legend>
     {/if}
diff --git a/src/RecursiveList/RecursiveList.svelte b/src/RecursiveList/RecursiveList.svelte
index 5909b056..ecdba5c9 100644
--- a/src/RecursiveList/RecursiveList.svelte
+++ b/src/RecursiveList/RecursiveList.svelte
@@ -22,14 +22,14 @@
 </script>
 
 <svelte:component
-  this="{type === 'unordered' ? UnorderedList : OrderedList}"
-  native="{type === 'ordered-native'}"
+  this={type === "unordered" ? UnorderedList : OrderedList}
+  native={type === "ordered-native"}
   {...$$restProps}
 >
   {#each nodes as child}
     {#if Array.isArray(child.nodes)}
       <RecursiveListItem {...child}>
-        <svelte:self {...child} type="{type}" nested />
+        <svelte:self {...child} {type} nested />
       </RecursiveListItem>
     {:else}
       <RecursiveListItem {...child} />
diff --git a/src/RecursiveList/RecursiveListItem.svelte b/src/RecursiveList/RecursiveListItem.svelte
index 96e92562..51dfdf74 100644
--- a/src/RecursiveList/RecursiveListItem.svelte
+++ b/src/RecursiveList/RecursiveListItem.svelte
@@ -13,7 +13,7 @@
 
 <ListItem>
   {#if text && !href}{text}{/if}
-  {#if href}<a class:bx--link="{true}" href="{href}">{text || href}</a>{/if}
+  {#if href}<a class:bx--link={true} {href}>{text || href}</a>{/if}
   {#if !text && html}{@html html}{/if}
   <slot />
 </ListItem>
diff --git a/src/Search/Search.svelte b/src/Search/Search.svelte
index 1b37d0f9..aebdfd3f 100644
--- a/src/Search/Search.svelte
+++ b/src/Search/Search.svelte
@@ -82,7 +82,7 @@
 <!-- svelte-ignore a11y-autofocus -->
 {#if skeleton}
   <SearchSkeleton
-    size="{size}"
+    {size}
     {...$$restProps}
     on:click
     on:mouseover
@@ -93,81 +93,81 @@
   <div
     role="search"
     aria-labelledby="{id}-search"
-    class:bx--search="{true}"
-    class:bx--search--light="{light}"
-    class:bx--search--disabled="{disabled}"
-    class:bx--search--sm="{size === 'sm'}"
-    class:bx--search--lg="{size === 'lg'}"
-    class:bx--search--xl="{size === 'xl'}"
-    class:bx--search--expandable="{expandable}"
-    class:bx--search--expanded="{expanded}"
-    class="{searchClass}"
+    class:bx--search={true}
+    class:bx--search--light={light}
+    class:bx--search--disabled={disabled}
+    class:bx--search--sm={size === "sm"}
+    class:bx--search--lg={size === "lg"}
+    class:bx--search--xl={size === "xl"}
+    class:bx--search--expandable={expandable}
+    class:bx--search--expanded={expanded}
+    class={searchClass}
   >
     <!-- svelte-ignore a11y-click-events-have-key-events -->
     <!-- svelte-ignore a11y-no-static-element-interactions -->
     <div
-      bind:this="{searchRef}"
-      class:bx--search-magnifier="{true}"
-      on:click="{() => {
+      bind:this={searchRef}
+      class:bx--search-magnifier={true}
+      on:click={() => {
         if (expandable) expanded = true;
-      }}"
+      }}
     >
-      <svelte:component this="{icon}" class="bx--search-magnifier-icon" />
+      <svelte:component this={icon} class="bx--search-magnifier-icon" />
     </div>
-    <label id="{id}-search" for="{id}" class:bx--label="{true}">
+    <label id="{id}-search" for={id} class:bx--label={true}>
       <slot name="labelText">
         {labelText}
       </slot>
     </label>
     <!-- svelte-ignore a11y-autofocus -->
     <input
-      bind:this="{ref}"
+      bind:this={ref}
       bind:value
       type="text"
       role="searchbox"
-      class:bx--search-input="{true}"
-      autofocus="{autofocus === true ? true : undefined}"
-      autocomplete="{autocomplete}"
-      disabled="{disabled}"
-      id="{id}"
-      placeholder="{placeholder}"
+      class:bx--search-input={true}
+      autofocus={autofocus === true ? true : undefined}
+      {autocomplete}
+      {disabled}
+      {id}
+      {placeholder}
       {...$$restProps}
       on:change
       on:input
       on:focus
-      on:focus="{() => {
+      on:focus={() => {
         if (expandable) expanded = true;
-      }}"
+      }}
       on:blur
-      on:blur="{() => {
-        if (expanded && (value === '' || value == null)) {
+      on:blur={() => {
+        if (expanded && (value === "" || value == null)) {
           expanded = false;
         }
-      }}"
+      }}
       on:keydown
-      on:keydown="{({ key }) => {
-        if (key === 'Escape') {
-          value = '';
-          dispatch('clear');
+      on:keydown={({ key }) => {
+        if (key === "Escape") {
+          value = "";
+          dispatch("clear");
         }
-      }}"
+      }}
       on:keyup
       on:paste
     />
     <button
       type="button"
-      aria-label="{closeButtonLabelText}"
-      disabled="{disabled}"
-      class:bx--search-close="{true}"
-      class:bx--search-close--hidden="{value === '' || value == null}"
+      aria-label={closeButtonLabelText}
+      {disabled}
+      class:bx--search-close={true}
+      class:bx--search-close--hidden={value === "" || value == null}
       on:click
-      on:click="{() => {
-        value = '';
+      on:click={() => {
+        value = "";
         ref.focus();
-        dispatch('clear');
-      }}"
+        dispatch("clear");
+      }}
     >
-      <svelte:component this="{Close}" size="{size === 'xl' ? 20 : 16}" />
+      <svelte:component this={Close} size={size === "xl" ? 20 : 16} />
     </button>
   </div>
 {/if}
diff --git a/src/Search/SearchSkeleton.svelte b/src/Search/SearchSkeleton.svelte
index 91ea37d1..ca4d9a88 100644
--- a/src/Search/SearchSkeleton.svelte
+++ b/src/Search/SearchSkeleton.svelte
@@ -9,16 +9,16 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class:bx--skeleton="{true}"
-  class:bx--search--sm="{size === 'sm'}"
-  class:bx--search--lg="{size === 'lg'}"
-  class:bx--search--xl="{size === 'xl'}"
+  class:bx--skeleton={true}
+  class:bx--search--sm={size === "sm"}
+  class:bx--search--lg={size === "lg"}
+  class:bx--search--xl={size === "xl"}
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave
 >
-  <span class:bx--label="{true}"></span>
-  <div class:bx--search-input="{true}"></div>
+  <span class:bx--label={true}></span>
+  <div class:bx--search-input={true}></div>
 </div>
diff --git a/src/Select/Select.svelte b/src/Select/Select.svelte
index d1a76f94..3ff81601 100644
--- a/src/Select/Select.svelte
+++ b/src/Select/Select.svelte
@@ -124,21 +124,21 @@
   $: selectedValue.set(selected ?? $defaultValue);
 </script>
 
-<div class:bx--form-item="{true}" {...$$restProps}>
+<div class:bx--form-item={true} {...$$restProps}>
   <div
-    class:bx--select="{true}"
-    class:bx--select--inline="{inline}"
-    class:bx--select--light="{light}"
-    class:bx--select--invalid="{invalid}"
-    class:bx--select--disabled="{disabled}"
-    class:bx--select--warning="{warn}"
+    class:bx--select={true}
+    class:bx--select--inline={inline}
+    class:bx--select--light={light}
+    class:bx--select--invalid={invalid}
+    class:bx--select--disabled={disabled}
+    class:bx--select--warning={warn}
   >
     {#if !noLabel}
       <label
-        for="{id}"
-        class:bx--label="{true}"
-        class:bx--visually-hidden="{hideLabel}"
-        class:bx--label--disabled="{disabled}"
+        for={id}
+        class:bx--label={true}
+        class:bx--visually-hidden={hideLabel}
+        class:bx--label--disabled={disabled}
       >
         <slot name="labelText">
           {labelText}
@@ -146,23 +146,23 @@
       </label>
     {/if}
     {#if inline}
-      <div class:bx--select-input--inline__wrapper="{true}">
+      <div class:bx--select-input--inline__wrapper={true}>
         <div
-          class:bx--select-input__wrapper="{true}"
-          data-invalid="{invalid || undefined}"
+          class:bx--select-input__wrapper={true}
+          data-invalid={invalid || undefined}
         >
           <select
-            bind:this="{ref}"
-            aria-describedby="{invalid ? errorId : undefined}"
-            aria-invalid="{invalid || undefined}"
-            disabled="{disabled || undefined}"
-            required="{required || undefined}"
-            id="{id}"
-            name="{name}"
-            class:bx--select-input="{true}"
-            class:bx--select-input--sm="{size === 'sm'}"
-            class:bx--select-input--xl="{size === 'xl'}"
-            on:change="{handleChange}"
+            bind:this={ref}
+            aria-describedby={invalid ? errorId : undefined}
+            aria-invalid={invalid || undefined}
+            disabled={disabled || undefined}
+            required={required || undefined}
+            {id}
+            {name}
+            class:bx--select-input={true}
+            class:bx--select-input--sm={size === "sm"}
+            class:bx--select-input--xl={size === "xl"}
+            on:change={handleChange}
             on:change
             on:input
             on:focus
@@ -176,15 +176,15 @@
           {/if}
         </div>
         {#if invalid}
-          <div class:bx--form-requirement="{true}" id="{errorId}">
+          <div class:bx--form-requirement={true} id={errorId}>
             {invalidText}
           </div>
         {/if}
       </div>
       {#if !invalid && !warn && helperText}
         <div
-          class:bx--form__helper-text="{true}"
-          class:bx--form__helper-text--disabled="{disabled}"
+          class:bx--form__helper-text={true}
+          class:bx--form__helper-text--disabled={disabled}
         >
           {helperText}
         </div>
@@ -192,21 +192,21 @@
     {/if}
     {#if !inline}
       <div
-        class:bx--select-input__wrapper="{true}"
-        data-invalid="{invalid || undefined}"
+        class:bx--select-input__wrapper={true}
+        data-invalid={invalid || undefined}
       >
         <select
-          bind:this="{ref}"
-          id="{id}"
-          name="{name}"
-          aria-describedby="{invalid ? errorId : undefined}"
-          disabled="{disabled || undefined}"
-          required="{required || undefined}"
-          aria-invalid="{invalid || undefined}"
-          class:bx--select-input="{true}"
-          class:bx--select-input--sm="{size === 'sm'}"
-          class:bx--select-input--xl="{size === 'xl'}"
-          on:change="{handleChange}"
+          bind:this={ref}
+          {id}
+          {name}
+          aria-describedby={invalid ? errorId : undefined}
+          disabled={disabled || undefined}
+          required={required || undefined}
+          aria-invalid={invalid || undefined}
+          class:bx--select-input={true}
+          class:bx--select-input--sm={size === "sm"}
+          class:bx--select-input--xl={size === "xl"}
+          on:change={handleChange}
           on:change
           on:input
           on:focus
@@ -226,19 +226,19 @@
       </div>
       {#if !invalid && helperText}
         <div
-          class:bx--form__helper-text="{true}"
-          class:bx--form__helper-text--disabled="{disabled}"
+          class:bx--form__helper-text={true}
+          class:bx--form__helper-text--disabled={disabled}
         >
           {helperText}
         </div>
       {/if}
       {#if invalid}
-        <div id="{errorId}" class:bx--form-requirement="{true}">
+        <div id={errorId} class:bx--form-requirement={true}>
           {invalidText}
         </div>
       {/if}
       {#if !invalid && warn}
-        <div id="{errorId}" class:bx--form-requirement="{true}">
+        <div id={errorId} class:bx--form-requirement={true}>
           {warnText}
         </div>
       {/if}
diff --git a/src/Select/SelectItem.svelte b/src/Select/SelectItem.svelte
index a3304924..9bb6b556 100644
--- a/src/Select/SelectItem.svelte
+++ b/src/Select/SelectItem.svelte
@@ -47,13 +47,13 @@
 </script>
 
 <option
-  value="{value}"
-  disabled="{disabled}"
-  hidden="{hidden}"
-  selected="{selected}"
-  class:bx--select-option="{true}"
-  class="{className}"
-  style="{style}"
+  {value}
+  {disabled}
+  {hidden}
+  {selected}
+  class:bx--select-option={true}
+  class={className}
+  {style}
 >
   {text || value}
 </option>
diff --git a/src/Select/SelectItemGroup.svelte b/src/Select/SelectItemGroup.svelte
index 45686f5d..5be31637 100644
--- a/src/Select/SelectItemGroup.svelte
+++ b/src/Select/SelectItemGroup.svelte
@@ -6,11 +6,6 @@
   export let label = "Provide label";
 </script>
 
-<optgroup
-  label="{label}"
-  disabled="{disabled}"
-  class:bx--select-optgroup="{true}"
-  {...$$restProps}
->
+<optgroup {label} {disabled} class:bx--select-optgroup={true} {...$$restProps}>
   <slot />
 </optgroup>
diff --git a/src/Select/SelectSkeleton.svelte b/src/Select/SelectSkeleton.svelte
index 2e43163c..5755c1ec 100644
--- a/src/Select/SelectSkeleton.svelte
+++ b/src/Select/SelectSkeleton.svelte
@@ -6,7 +6,7 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class:bx--form-item="{true}"
+  class:bx--form-item={true}
   {...$$restProps}
   on:click
   on:mouseover
@@ -14,9 +14,9 @@
   on:mouseleave
 >
   {#if !hideLabel}
-    <span class:bx--label="{true}" class:bx--skeleton="{true}"></span>
+    <span class:bx--label={true} class:bx--skeleton={true}></span>
   {/if}
-  <div class:bx--select="{true}" class:bx--skeleton="{true}">
-    <div class:bx--select-input="{true}"></div>
+  <div class:bx--select={true} class:bx--skeleton={true}>
+    <div class:bx--select-input={true}></div>
   </div>
 </div>
diff --git a/src/SkeletonPlaceholder/SkeletonPlaceholder.svelte b/src/SkeletonPlaceholder/SkeletonPlaceholder.svelte
index 37a11a41..55ecc7c8 100644
--- a/src/SkeletonPlaceholder/SkeletonPlaceholder.svelte
+++ b/src/SkeletonPlaceholder/SkeletonPlaceholder.svelte
@@ -1,7 +1,7 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class:bx--skeleton__placeholder="{true}"
+  class:bx--skeleton__placeholder={true}
   {...$$restProps}
   on:click
   on:mouseover
diff --git a/src/SkeletonText/SkeletonText.svelte b/src/SkeletonText/SkeletonText.svelte
index 9b8d7d64..3f6a8641 100644
--- a/src/SkeletonText/SkeletonText.svelte
+++ b/src/SkeletonText/SkeletonText.svelte
@@ -29,18 +29,18 @@
       return widthPx ? rand : `calc(${width} - ${rand})`;
     }) as width}
       <p
-        class:bx--skeleton__text="{true}"
-        class:bx--skeleton__heading="{heading}"
-        style:width="{width}"
+        class:bx--skeleton__text={true}
+        class:bx--skeleton__heading={heading}
+        style:width
       ></p>
     {/each}
   </div>
 {:else}
   <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
   <p
-    class:bx--skeleton__text="{true}"
-    class:bx--skeleton__heading="{heading}"
-    style:width="{width}"
+    class:bx--skeleton__text={true}
+    class:bx--skeleton__heading={heading}
+    style:width
     {...$$restProps}
     on:click
     on:mouseover
diff --git a/src/Slider/Slider.svelte b/src/Slider/Slider.svelte
index a2696921..bafb8f1b 100644
--- a/src/Slider/Slider.svelte
+++ b/src/Slider/Slider.svelte
@@ -135,17 +135,17 @@
 </script>
 
 <svelte:window
-  on:mousemove="{move}"
-  on:touchmove="{move}"
-  on:mouseup="{stopHolding}"
-  on:touchend="{stopHolding}"
-  on:touchcancel="{stopHolding}"
+  on:mousemove={move}
+  on:touchmove={move}
+  on:mouseup={stopHolding}
+  on:touchend={stopHolding}
+  on:touchcancel={stopHolding}
 />
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class:bx--form-item="{true}"
+  class:bx--form-item={true}
   {...$$restProps}
   on:click
   on:mouseover
@@ -153,29 +153,29 @@
   on:mouseleave
 >
   <label
-    for="{id}"
-    id="{labelId}"
-    class:bx--label="{true}"
-    class:bx--label--disabled="{disabled}"
-    class:bx--visually-hidden="{hideLabel}"
+    for={id}
+    id={labelId}
+    class:bx--label={true}
+    class:bx--label--disabled={disabled}
+    class:bx--visually-hidden={hideLabel}
   >
     <slot name="labelText">
       {labelText}
     </slot>
   </label>
-  <div class:bx--slider-container="{true}" style:width="{fullWidth && "100%"}">
-    <span class:bx--slider__range-label="{true}">{minLabel || min}</span>
+  <div class:bx--slider-container={true} style:width={fullWidth && "100%"}>
+    <span class:bx--slider__range-label={true}>{minLabel || min}</span>
     <div
-      bind:this="{ref}"
+      bind:this={ref}
       role="presentation"
       tabindex="-1"
-      class:bx--slider="{true}"
-      class:bx--slider--disabled="{disabled}"
-      style:max-width="{fullWidth ? "none" : undefined}"
-      on:mousedown="{startDragging}"
-      on:mousedown="{startHolding}"
-      on:touchstart="{startHolding}"
-      on:keydown="{({ shiftKey, key }) => {
+      class:bx--slider={true}
+      class:bx--slider--disabled={disabled}
+      style:max-width={fullWidth ? "none" : undefined}
+      on:mousedown={startDragging}
+      on:mousedown={startHolding}
+      on:touchstart={startHolding}
+      on:keydown={({ shiftKey, key }) => {
         const keys = {
           ArrowDown: -1,
           ArrowLeft: -1,
@@ -186,47 +186,47 @@
           value +=
             step * (shiftKey ? range / step / stepMultiplier : 1) * keys[key];
         }
-      }}"
+      }}
     >
       <div
         role="slider"
         tabindex="0"
-        class:bx--slider__thumb="{true}"
+        class:bx--slider__thumb={true}
         style:left="{left}%"
-        aria-valuemax="{max}"
-        aria-valuemin="{min}"
-        aria-valuenow="{value}"
-        aria-labelledby="{labelId}"
-        id="{id}"
+        aria-valuemax={max}
+        aria-valuemin={min}
+        aria-valuenow={value}
+        aria-labelledby={labelId}
+        {id}
       ></div>
-      <div bind:this="{trackRef}" class:bx--slider__track="{true}"></div>
+      <div bind:this={trackRef} class:bx--slider__track={true}></div>
       <div
-        class:bx--slider__filled-track="{true}"
+        class:bx--slider__filled-track={true}
         style:transform="translate(0, -50%) scaleX({left / 100})"
       ></div>
     </div>
-    <span class:bx--slider__range-label="{true}">{maxLabel || max}</span>
+    <span class:bx--slider__range-label={true}>{maxLabel || max}</span>
     <input
-      type="{hideTextInput ? 'hidden' : inputType}"
+      type={hideTextInput ? "hidden" : inputType}
       id="input-{id}"
-      name="{name}"
-      class:bx--text-input="{true}"
-      class:bx--slider-text-input="{true}"
-      class:bx--text-input--light="{light}"
-      class:bx--text-input--invalid="{invalid}"
-      value="{value}"
-      aria-labelledby="{$$props['aria-label'] ? undefined : labelId}"
-      aria-label="{$$props['aria-label'] || 'Slider number input'}"
-      disabled="{disabled}"
-      required="{required}"
-      min="{min}"
-      max="{max}"
-      step="{step}"
-      on:change="{({ target }) => {
+      {name}
+      class:bx--text-input={true}
+      class:bx--slider-text-input={true}
+      class:bx--text-input--light={light}
+      class:bx--text-input--invalid={invalid}
+      {value}
+      aria-labelledby={$$props["aria-label"] ? undefined : labelId}
+      aria-label={$$props["aria-label"] || "Slider number input"}
+      {disabled}
+      {required}
+      {min}
+      {max}
+      {step}
+      on:change={({ target }) => {
         value = Number(target.value);
-      }}"
-      data-invalid="{invalid || null}"
-      aria-invalid="{invalid || null}"
+      }}
+      data-invalid={invalid || null}
+      aria-invalid={invalid || null}
     />
   </div>
 </div>
diff --git a/src/Slider/SliderSkeleton.svelte b/src/Slider/SliderSkeleton.svelte
index d84ec8c0..f5da1801 100644
--- a/src/Slider/SliderSkeleton.svelte
+++ b/src/Slider/SliderSkeleton.svelte
@@ -6,7 +6,7 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class:bx--form-item="{true}"
+  class:bx--form-item={true}
   {...$$restProps}
   on:click
   on:mouseover
@@ -14,15 +14,15 @@
   on:mouseleave
 >
   {#if !hideLabel}
-    <span class:bx--label="{true}" class:bx--skeleton="{true}"></span>
+    <span class:bx--label={true} class:bx--skeleton={true}></span>
   {/if}
-  <div class:bx--slider-container="{true}" class:bx--skeleton="{true}">
-    <span class:bx--slider__range-label="{true}"></span>
-    <div class:bx--slider="{true}">
-      <div class:bx--slider__track="{true}"></div>
-      <div class:bx--slider__filled-track="{true}"></div>
-      <div class:bx--slider__thumb="{true}"></div>
+  <div class:bx--slider-container={true} class:bx--skeleton={true}>
+    <span class:bx--slider__range-label={true}></span>
+    <div class:bx--slider={true}>
+      <div class:bx--slider__track={true}></div>
+      <div class:bx--slider__filled-track={true}></div>
+      <div class:bx--slider__thumb={true}></div>
     </div>
-    <span class:bx--slider__range-label="{true}"></span>
+    <span class:bx--slider__range-label={true}></span>
   </div>
 </div>
diff --git a/src/StructuredList/StructuredList.svelte b/src/StructuredList/StructuredList.svelte
index a38256db..6023f4ab 100644
--- a/src/StructuredList/StructuredList.svelte
+++ b/src/StructuredList/StructuredList.svelte
@@ -39,10 +39,10 @@
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <div
   role="table"
-  class:bx--structured-list="{true}"
-  class:bx--structured-list--selection="{selection}"
-  class:bx--structured-list--condensed="{condensed}"
-  class:bx--structured-list--flush="{flush}"
+  class:bx--structured-list={true}
+  class:bx--structured-list--selection={selection}
+  class:bx--structured-list--condensed={condensed}
+  class:bx--structured-list--flush={flush}
   {...$$restProps}
   on:click
   on:mouseover
diff --git a/src/StructuredList/StructuredListBody.svelte b/src/StructuredList/StructuredListBody.svelte
index f722ff93..22358504 100644
--- a/src/StructuredList/StructuredListBody.svelte
+++ b/src/StructuredList/StructuredListBody.svelte
@@ -2,7 +2,7 @@
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <div
   role="rowgroup"
-  class:bx--structured-list-tbody="{true}"
+  class:bx--structured-list-tbody={true}
   {...$$restProps}
   on:click
   on:mouseover
diff --git a/src/StructuredList/StructuredListCell.svelte b/src/StructuredList/StructuredListCell.svelte
index 93a162b3..a1a2b15c 100644
--- a/src/StructuredList/StructuredListCell.svelte
+++ b/src/StructuredList/StructuredListCell.svelte
@@ -8,10 +8,10 @@
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
-  role="{head ? 'columnheader' : 'cell'}"
-  class:bx--structured-list-th="{head}"
-  class:bx--structured-list-td="{!head}"
-  class:bx--structured-list-content--nowrap="{noWrap}"
+  role={head ? "columnheader" : "cell"}
+  class:bx--structured-list-th={head}
+  class:bx--structured-list-td={!head}
+  class:bx--structured-list-content--nowrap={noWrap}
   {...$$restProps}
   on:click
   on:mouseover
diff --git a/src/StructuredList/StructuredListHead.svelte b/src/StructuredList/StructuredListHead.svelte
index 3004a5dd..0190dc0b 100644
--- a/src/StructuredList/StructuredListHead.svelte
+++ b/src/StructuredList/StructuredListHead.svelte
@@ -2,7 +2,7 @@
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <div
   role="rowgroup"
-  class:bx--structured-list-thead="{true}"
+  class:bx--structured-list-thead={true}
   {...$$restProps}
   on:click
   on:mouseover
diff --git a/src/StructuredList/StructuredListInput.svelte b/src/StructuredList/StructuredListInput.svelte
index 2b0f365e..d7c03c87 100644
--- a/src/StructuredList/StructuredListInput.svelte
+++ b/src/StructuredList/StructuredListInput.svelte
@@ -29,17 +29,17 @@
 </script>
 
 <input
-  bind:this="{ref}"
+  bind:this={ref}
   type="radio"
   tabindex="-1"
-  checked="{checked}"
-  id="{id}"
-  name="{name}"
-  title="{title}"
-  value="{value}"
-  class:bx--structured-list-input="{true}"
+  {checked}
+  {id}
+  {name}
+  {title}
+  {value}
+  class:bx--structured-list-input={true}
   {...$$restProps}
-  on:change="{() => {
+  on:change={() => {
     update(value);
-  }}"
+  }}
 />
diff --git a/src/StructuredList/StructuredListRow.svelte b/src/StructuredList/StructuredListRow.svelte
index 58085b9a..073e8a35 100644
--- a/src/StructuredList/StructuredListRow.svelte
+++ b/src/StructuredList/StructuredListRow.svelte
@@ -15,9 +15,9 @@
   <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
   <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
   <label
-    tabindex="{tabindex}"
-    class:bx--structured-list-row="{true}"
-    class:bx--structured-list-row--header-row="{head}"
+    {tabindex}
+    class:bx--structured-list-row={true}
+    class:bx--structured-list-row--header-row={head}
     {...$$restProps}
     on:click
     on:mouseover
@@ -31,8 +31,8 @@
   <!-- svelte-ignore a11y-interactive-supports-focus -->
   <div
     role="row"
-    class:bx--structured-list-row="{true}"
-    class:bx--structured-list-row--header-row="{head}"
+    class:bx--structured-list-row={true}
+    class:bx--structured-list-row--header-row={head}
     {...$$restProps}
     on:click
     on:mouseover
diff --git a/src/StructuredList/StructuredListSkeleton.svelte b/src/StructuredList/StructuredListSkeleton.svelte
index 300294d9..8b54d64c 100644
--- a/src/StructuredList/StructuredListSkeleton.svelte
+++ b/src/StructuredList/StructuredListSkeleton.svelte
@@ -6,30 +6,30 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class:bx--skeleton="{true}"
-  class:bx--structured-list="{true}"
+  class:bx--skeleton={true}
+  class:bx--structured-list={true}
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave
 >
-  <div class:bx--structured-list-thead="{true}">
+  <div class:bx--structured-list-thead={true}>
     <div
-      class:bx--structured-list-row="{true}"
-      class:bx--structured-list-row--header-row="{true}"
+      class:bx--structured-list-row={true}
+      class:bx--structured-list-row--header-row={true}
     >
-      <div class:bx--structured-list-th="{true}"><span></span></div>
-      <div class:bx--structured-list-th="{true}"><span></span></div>
-      <div class:bx--structured-list-th="{true}"><span></span></div>
+      <div class:bx--structured-list-th={true}><span></span></div>
+      <div class:bx--structured-list-th={true}><span></span></div>
+      <div class:bx--structured-list-th={true}><span></span></div>
     </div>
   </div>
-  <div class:bx--structured-list-tbody="{true}">
+  <div class:bx--structured-list-tbody={true}>
     {#each Array.from({ length: rows }, (_, i) => i) as row, i (row)}
-      <div class:bx--structured-list-row="{true}">
-        <div class:bx--structured-list-td="{true}"></div>
-        <div class:bx--structured-list-td="{true}"></div>
-        <div class:bx--structured-list-td="{true}"></div>
+      <div class:bx--structured-list-row={true}>
+        <div class:bx--structured-list-td={true}></div>
+        <div class:bx--structured-list-td={true}></div>
+        <div class:bx--structured-list-td={true}></div>
       </div>
     {/each}
   </div>
diff --git a/src/Tabs/Tab.svelte b/src/Tabs/Tab.svelte
index 1bf59aa3..abfd9281 100644
--- a/src/Tabs/Tab.svelte
+++ b/src/Tabs/Tab.svelte
@@ -33,41 +33,41 @@
 <li
   tabindex="-1"
   role="presentation"
-  class:bx--tabs__nav-item="{true}"
-  class:bx--tabs__nav-item--disabled="{disabled}"
-  class:bx--tabs__nav-item--selected="{selected}"
+  class:bx--tabs__nav-item={true}
+  class:bx--tabs__nav-item--disabled={disabled}
+  class:bx--tabs__nav-item--selected={selected}
   {...$$restProps}
   on:click|preventDefault
-  on:click|preventDefault="{() => {
+  on:click|preventDefault={() => {
     if (!disabled) {
       update(id);
     }
-  }}"
+  }}
   on:mouseover
   on:mouseenter
   on:mouseleave
-  on:keydown="{({ key }) => {
+  on:keydown={({ key }) => {
     if (!disabled) {
-      if (key === 'ArrowRight') {
+      if (key === "ArrowRight") {
         change(1);
-      } else if (key === 'ArrowLeft') {
+      } else if (key === "ArrowLeft") {
         change(-1);
-      } else if (key === ' ' || key === 'Enter') {
+      } else if (key === " " || key === "Enter") {
         update(id);
       }
     }
-  }}"
+  }}
 >
   <a
-    bind:this="{ref}"
+    bind:this={ref}
     role="tab"
-    tabindex="{disabled ? '-1' : tabindex}"
-    aria-selected="{selected}"
-    aria-disabled="{disabled}"
-    id="{id}"
-    href="{href}"
-    class:bx--tabs__nav-link="{true}"
-    style:width="{$useAutoWidth ? "auto" : undefined}"
+    tabindex={disabled ? "-1" : tabindex}
+    aria-selected={selected}
+    aria-disabled={disabled}
+    {id}
+    {href}
+    class:bx--tabs__nav-link={true}
+    style:width={$useAutoWidth ? "auto" : undefined}
   >
     <slot>{label}</slot>
   </a>
diff --git a/src/Tabs/TabContent.svelte b/src/Tabs/TabContent.svelte
index b04cacf5..9df06f27 100644
--- a/src/Tabs/TabContent.svelte
+++ b/src/Tabs/TabContent.svelte
@@ -15,11 +15,11 @@
 
 <div
   role="tabpanel"
-  aria-labelledby="{tabId}"
-  aria-hidden="{!selected}"
-  hidden="{selected ? undefined : ''}"
-  id="{id}"
-  class:bx--tab-content="{true}"
+  aria-labelledby={tabId}
+  aria-hidden={!selected}
+  hidden={selected ? undefined : ""}
+  {id}
+  class:bx--tab-content={true}
   {...$$restProps}
 >
   <slot />
diff --git a/src/Tabs/Tabs.svelte b/src/Tabs/Tabs.svelte
index 9a2f04c3..a3231e94 100644
--- a/src/Tabs/Tabs.svelte
+++ b/src/Tabs/Tabs.svelte
@@ -32,13 +32,13 @@
 
   const tabs = writable([]);
   const tabsById = derived(tabs, (_) =>
-    _.reduce((a, c) => ({ ...a, [c.id]: c }), {})
+    _.reduce((a, c) => ({ ...a, [c.id]: c }), {}),
   );
   const useAutoWidth = writable(autoWidth);
   const selectedTab = writable(undefined);
   const content = writable([]);
   const contentById = derived(content, (_) =>
-    _.reduce((a, c) => ({ ...a, [c.id]: c }), {})
+    _.reduce((a, c) => ({ ...a, [c.id]: c }), {}),
   );
   const selectedContent = writable(undefined);
 
@@ -125,42 +125,42 @@
 
 <div
   role="navigation"
-  class:bx--tabs="{true}"
-  class:bx--tabs--container="{type === 'container'}"
+  class:bx--tabs={true}
+  class:bx--tabs--container={type === "container"}
   {...$$restProps}
 >
   <div
     role="listbox"
     tabindex="0"
-    class:bx--tabs-trigger="{true}"
-    aria-label="{$$props['aria-label'] || 'listbox'}"
-    on:click="{() => {
+    class:bx--tabs-trigger={true}
+    aria-label={$$props["aria-label"] || "listbox"}
+    on:click={() => {
       dropdownHidden = !dropdownHidden;
-    }}"
+    }}
     on:keypress
-    on:keypress="{() => {
+    on:keypress={() => {
       dropdownHidden = !dropdownHidden;
-    }}"
+    }}
   >
     <a
       tabindex="-1"
-      class:bx--tabs-trigger-text="{true}"
-      href="{triggerHref}"
+      class:bx--tabs-trigger-text={true}
+      href={triggerHref}
       on:click|preventDefault
-      on:click|preventDefault|stopPropagation="{() => {
+      on:click|preventDefault|stopPropagation={() => {
         dropdownHidden = !dropdownHidden;
-      }}"
+      }}
     >
       {#if currentTab}{currentTab.label}{/if}
     </a>
-    <ChevronDown aria-hidden="true" title="{iconDescription}" />
+    <ChevronDown aria-hidden="true" title={iconDescription} />
   </div>
   <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
   <ul
-    bind:this="{refTabList}"
+    bind:this={refTabList}
     role="tablist"
-    class:bx--tabs__nav="{true}"
-    class:bx--tabs__nav--hidden="{dropdownHidden}"
+    class:bx--tabs__nav={true}
+    class:bx--tabs__nav--hidden={dropdownHidden}
   >
     <slot />
   </ul>
diff --git a/src/Tabs/TabsSkeleton.svelte b/src/Tabs/TabsSkeleton.svelte
index 1fdc68fc..bfc0a778 100644
--- a/src/Tabs/TabsSkeleton.svelte
+++ b/src/Tabs/TabsSkeleton.svelte
@@ -12,20 +12,20 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class:bx--tabs="{true}"
-  class:bx--skeleton="{true}"
-  class:bx--tabs--scrollable="{true}"
-  class:bx--tabs--scrollable--container="{type === 'container'}"
+  class:bx--tabs={true}
+  class:bx--skeleton={true}
+  class:bx--tabs--scrollable={true}
+  class:bx--tabs--scrollable--container={type === "container"}
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave
 >
-  <ul class:bx--tabs--scrollable__nav="{true}">
+  <ul class:bx--tabs--scrollable__nav={true}>
     {#each Array.from({ length: count }, (_, i) => i) as item}
-      <li class:bx--tabs--scrollable__nav-item="{true}">
-        <div class:bx--tabs__nav-link="{true}">
+      <li class:bx--tabs--scrollable__nav-item={true}>
+        <div class:bx--tabs__nav-link={true}>
           <span></span>
         </div>
       </li>
diff --git a/src/Tag/Tag.svelte b/src/Tag/Tag.svelte
index 84ebbc5e..b75bda6a 100644
--- a/src/Tag/Tag.svelte
+++ b/src/Tag/Tag.svelte
@@ -44,7 +44,7 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 {#if skeleton}
   <TagSkeleton
-    size="{size}"
+    {size}
     {...$$restProps}
     on:click
     on:mouseover
@@ -53,39 +53,39 @@
   />
 {:else if filter}
   <div
-    aria-label="{title}"
-    id="{id}"
-    class:bx--tag="{true}"
-    class:bx--tag--disabled="{disabled}"
-    class:bx--tag--filter="{filter}"
-    class:bx--tag--sm="{size === 'sm'}"
-    class:bx--tag--red="{type === 'red'}"
-    class:bx--tag--magenta="{type === 'magenta'}"
-    class:bx--tag--purple="{type === 'purple'}"
-    class:bx--tag--blue="{type === 'blue'}"
-    class:bx--tag--cyan="{type === 'cyan'}"
-    class:bx--tag--teal="{type === 'teal'}"
-    class:bx--tag--green="{type === 'green'}"
-    class:bx--tag--gray="{type === 'gray'}"
-    class:bx--tag--cool-gray="{type === 'cool-gray'}"
-    class:bx--tag--warm-gray="{type === 'warm-gray'}"
-    class:bx--tag--high-contrast="{type === 'high-contrast'}"
-    class:bx--tag--outline="{type === 'outline'}"
+    aria-label={title}
+    {id}
+    class:bx--tag={true}
+    class:bx--tag--disabled={disabled}
+    class:bx--tag--filter={filter}
+    class:bx--tag--sm={size === "sm"}
+    class:bx--tag--red={type === "red"}
+    class:bx--tag--magenta={type === "magenta"}
+    class:bx--tag--purple={type === "purple"}
+    class:bx--tag--blue={type === "blue"}
+    class:bx--tag--cyan={type === "cyan"}
+    class:bx--tag--teal={type === "teal"}
+    class:bx--tag--green={type === "green"}
+    class:bx--tag--gray={type === "gray"}
+    class:bx--tag--cool-gray={type === "cool-gray"}
+    class:bx--tag--warm-gray={type === "warm-gray"}
+    class:bx--tag--high-contrast={type === "high-contrast"}
+    class:bx--tag--outline={type === "outline"}
     {...$$restProps}
   >
-    <slot props="{{ class: 'bx--tag__label' }}">
-      <span class:bx--tag__label="{true}">{type}</span>
+    <slot props={{ class: "bx--tag__label" }}>
+      <span class:bx--tag__label={true}>{type}</span>
     </slot>
     <button
       type="button"
-      aria-labelledby="{id}"
-      class:bx--tag__close-icon="{true}"
-      disabled="{disabled}"
-      title="{title}"
+      aria-labelledby={id}
+      class:bx--tag__close-icon={true}
+      {disabled}
+      {title}
       on:click|stopPropagation
-      on:click|stopPropagation="{() => {
-        dispatch('close');
-      }}"
+      on:click|stopPropagation={() => {
+        dispatch("close");
+      }}
       on:mouseover
       on:mouseenter
       on:mouseleave
@@ -96,26 +96,26 @@
 {:else if interactive}
   <button
     type="button"
-    id="{id}"
-    disabled="{disabled}"
-    aria-disabled="{disabled}"
-    tabindex="{disabled ? '-1' : undefined}"
-    class:bx--tag="{true}"
-    class:bx--tag--interactive="{true}"
-    class:bx--tag--disabled="{disabled}"
-    class:bx--tag--sm="{size === 'sm'}"
-    class:bx--tag--red="{type === 'red'}"
-    class:bx--tag--magenta="{type === 'magenta'}"
-    class:bx--tag--purple="{type === 'purple'}"
-    class:bx--tag--blue="{type === 'blue'}"
-    class:bx--tag--cyan="{type === 'cyan'}"
-    class:bx--tag--teal="{type === 'teal'}"
-    class:bx--tag--green="{type === 'green'}"
-    class:bx--tag--gray="{type === 'gray'}"
-    class:bx--tag--cool-gray="{type === 'cool-gray'}"
-    class:bx--tag--warm-gray="{type === 'warm-gray'}"
-    class:bx--tag--high-contrast="{type === 'high-contrast'}"
-    class:bx--tag--outline="{type === 'outline'}"
+    {id}
+    {disabled}
+    aria-disabled={disabled}
+    tabindex={disabled ? "-1" : undefined}
+    class:bx--tag={true}
+    class:bx--tag--interactive={true}
+    class:bx--tag--disabled={disabled}
+    class:bx--tag--sm={size === "sm"}
+    class:bx--tag--red={type === "red"}
+    class:bx--tag--magenta={type === "magenta"}
+    class:bx--tag--purple={type === "purple"}
+    class:bx--tag--blue={type === "blue"}
+    class:bx--tag--cyan={type === "cyan"}
+    class:bx--tag--teal={type === "teal"}
+    class:bx--tag--green={type === "green"}
+    class:bx--tag--gray={type === "gray"}
+    class:bx--tag--cool-gray={type === "cool-gray"}
+    class:bx--tag--warm-gray={type === "warm-gray"}
+    class:bx--tag--high-contrast={type === "high-contrast"}
+    class:bx--tag--outline={type === "outline"}
     {...$$restProps}
     on:click
     on:mouseover
@@ -123,9 +123,9 @@
     on:mouseleave
   >
     {#if $$slots.icon || icon}
-      <div class:bx--tag__custom-icon="{true}">
+      <div class:bx--tag__custom-icon={true}>
         <slot name="icon">
-          <svelte:component this="{icon}" />
+          <svelte:component this={icon} />
         </slot>
       </div>
     {/if}
@@ -136,22 +136,22 @@
 {:else}
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
-    id="{id}"
-    class:bx--tag="{true}"
-    class:bx--tag--disabled="{disabled}"
-    class:bx--tag--sm="{size === 'sm'}"
-    class:bx--tag--red="{type === 'red'}"
-    class:bx--tag--magenta="{type === 'magenta'}"
-    class:bx--tag--purple="{type === 'purple'}"
-    class:bx--tag--blue="{type === 'blue'}"
-    class:bx--tag--cyan="{type === 'cyan'}"
-    class:bx--tag--teal="{type === 'teal'}"
-    class:bx--tag--green="{type === 'green'}"
-    class:bx--tag--gray="{type === 'gray'}"
-    class:bx--tag--cool-gray="{type === 'cool-gray'}"
-    class:bx--tag--warm-gray="{type === 'warm-gray'}"
-    class:bx--tag--high-contrast="{type === 'high-contrast'}"
-    class:bx--tag--outline="{type === 'outline'}"
+    {id}
+    class:bx--tag={true}
+    class:bx--tag--disabled={disabled}
+    class:bx--tag--sm={size === "sm"}
+    class:bx--tag--red={type === "red"}
+    class:bx--tag--magenta={type === "magenta"}
+    class:bx--tag--purple={type === "purple"}
+    class:bx--tag--blue={type === "blue"}
+    class:bx--tag--cyan={type === "cyan"}
+    class:bx--tag--teal={type === "teal"}
+    class:bx--tag--green={type === "green"}
+    class:bx--tag--gray={type === "gray"}
+    class:bx--tag--cool-gray={type === "cool-gray"}
+    class:bx--tag--warm-gray={type === "warm-gray"}
+    class:bx--tag--high-contrast={type === "high-contrast"}
+    class:bx--tag--outline={type === "outline"}
     {...$$restProps}
     on:click
     on:mouseover
@@ -159,9 +159,9 @@
     on:mouseleave
   >
     {#if $$slots.icon || icon}
-      <div class:bx--tag__custom-icon="{true}">
+      <div class:bx--tag__custom-icon={true}>
         <slot name="icon">
-          <svelte:component this="{icon}" />
+          <svelte:component this={icon} />
         </slot>
       </div>
     {/if}
diff --git a/src/Tag/TagSkeleton.svelte b/src/Tag/TagSkeleton.svelte
index 335df304..3092f558 100644
--- a/src/Tag/TagSkeleton.svelte
+++ b/src/Tag/TagSkeleton.svelte
@@ -6,11 +6,12 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <span
-  class:bx--tag="{true}"
-  class:bx--tag--sm="{size === 'sm'}"
-  class:bx--skeleton="{true}"
+  class:bx--tag={true}
+  class:bx--tag--sm={size === "sm"}
+  class:bx--skeleton={true}
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
-  on:mouseleave></span>
+  on:mouseleave
+></span>
diff --git a/src/TextArea/TextArea.svelte b/src/TextArea/TextArea.svelte
index 98a73a33..1a3cf7b7 100644
--- a/src/TextArea/TextArea.svelte
+++ b/src/TextArea/TextArea.svelte
@@ -69,50 +69,47 @@
   on:mouseover
   on:mouseenter
   on:mouseleave
-  class:bx--form-item="{true}"
+  class:bx--form-item={true}
 >
   {#if (labelText || $$slots.labelText) && !hideLabel}
-    <div class:bx--text-area__label-wrapper="{true}">
+    <div class:bx--text-area__label-wrapper={true}>
       <label
-        for="{id}"
-        class:bx--label="{true}"
-        class:bx--visually-hidden="{hideLabel}"
-        class:bx--label--disabled="{disabled}"
+        for={id}
+        class:bx--label={true}
+        class:bx--visually-hidden={hideLabel}
+        class:bx--label--disabled={disabled}
       >
         <slot name="labelText">
           {labelText}
         </slot>
       </label>
       {#if maxCount}
-        <div class:bx--label="{true}" class:bx--label--disabled="{disabled}">
+        <div class:bx--label={true} class:bx--label--disabled={disabled}>
           {value.length}/{maxCount}
         </div>
       {/if}
     </div>
   {/if}
-  <div
-    class:bx--text-area__wrapper="{true}"
-    data-invalid="{invalid || undefined}"
-  >
+  <div class:bx--text-area__wrapper={true} data-invalid={invalid || undefined}>
     {#if invalid}
       <WarningFilled class="bx--text-area__invalid-icon" />
     {/if}
     <textarea
-      bind:this="{ref}"
+      bind:this={ref}
       bind:value
-      aria-invalid="{invalid || undefined}"
-      aria-describedby="{invalid ? errorId : undefined}"
-      disabled="{disabled}"
-      id="{id}"
-      name="{name}"
-      cols="{cols}"
-      rows="{rows}"
-      placeholder="{placeholder}"
-      readonly="{readonly}"
-      class:bx--text-area="{true}"
-      class:bx--text-area--light="{light}"
-      class:bx--text-area--invalid="{invalid}"
-      maxlength="{maxCount ?? undefined}"
+      aria-invalid={invalid || undefined}
+      aria-describedby={invalid ? errorId : undefined}
+      {disabled}
+      {id}
+      {name}
+      {cols}
+      {rows}
+      {placeholder}
+      {readonly}
+      class:bx--text-area={true}
+      class:bx--text-area--light={light}
+      class:bx--text-area--invalid={invalid}
+      maxlength={maxCount ?? undefined}
       {...$$restProps}
       on:change
       on:input
@@ -120,17 +117,18 @@
       on:keyup
       on:focus
       on:blur
-      on:paste></textarea>
+      on:paste
+    ></textarea>
   </div>
   {#if !invalid && helperText}
     <div
-      class:bx--form__helper-text="{true}"
-      class:bx--form__helper-text--disabled="{disabled}"
+      class:bx--form__helper-text={true}
+      class:bx--form__helper-text--disabled={disabled}
     >
       {helperText}
     </div>
   {/if}
   {#if invalid}
-    <div id="{errorId}" class:bx--form-requirement="{true}">{invalidText}</div>
+    <div id={errorId} class:bx--form-requirement={true}>{invalidText}</div>
   {/if}
 </div>
diff --git a/src/TextArea/TextAreaSkeleton.svelte b/src/TextArea/TextAreaSkeleton.svelte
index beb862d1..4541059e 100644
--- a/src/TextArea/TextAreaSkeleton.svelte
+++ b/src/TextArea/TextAreaSkeleton.svelte
@@ -6,7 +6,7 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class:bx--form-item="{true}"
+  class:bx--form-item={true}
   {...$$restProps}
   on:click
   on:mouseover
@@ -14,7 +14,7 @@
   on:mouseleave
 >
   {#if !hideLabel}
-    <span class:bx--label="{true}" class:bx--skeleton="{true}"></span>
+    <span class:bx--label={true} class:bx--skeleton={true}></span>
   {/if}
-  <div class:bx--skeleton="{true}" class:bx--text-area="{true}"></div>
+  <div class:bx--skeleton={true} class:bx--text-area={true}></div>
 </div>
diff --git a/src/TextInput/PasswordInput.svelte b/src/TextInput/PasswordInput.svelte
index 17574410..a660ac2d 100644
--- a/src/TextInput/PasswordInput.svelte
+++ b/src/TextInput/PasswordInput.svelte
@@ -98,11 +98,11 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class:bx--form-item="{true}"
-  class:bx--text-input-wrapper="{true}"
-  class:bx--password-input-wrapper="{!isFluid}"
-  class:bx--text-input-wrapper--light="{light}"
-  class:bx--text-input-wrapper--inline="{inline}"
+  class:bx--form-item={true}
+  class:bx--text-input-wrapper={true}
+  class:bx--password-input-wrapper={!isFluid}
+  class:bx--text-input-wrapper--light={light}
+  class:bx--text-input-wrapper--inline={inline}
   on:click
   on:mouseover
   on:mouseenter
@@ -110,13 +110,13 @@
 >
   {#if inline}
     <label
-      for="{id}"
-      class:bx--label="{true}"
-      class:bx--visually-hidden="{hideLabel}"
-      class:bx--label--disabled="{disabled}"
-      class:bx--label--inline="{inline}"
-      class:bx--label--inline--sm="{inline && size === 'sm'}"
-      class:bx--label--inline--xl="{inline && size === 'xl'}"
+      for={id}
+      class:bx--label={true}
+      class:bx--visually-hidden={hideLabel}
+      class:bx--label--disabled={disabled}
+      class:bx--label--inline={inline}
+      class:bx--label--inline--sm={inline && size === "sm"}
+      class:bx--label--inline--xl={inline && size === "xl"}
     >
       <slot name="labelText">
         {labelText}
@@ -124,10 +124,10 @@
     </label>
     {#if !isFluid && helperText}
       <div
-        id="{helperId}"
-        class:bx--form__helper-text="{true}"
-        class:bx--form__helper-text--disabled="{disabled}"
-        class:bx--form__helper-text--inline="{inline}"
+        id={helperId}
+        class:bx--form__helper-text={true}
+        class:bx--form__helper-text--disabled={disabled}
+        class:bx--form__helper-text--inline={inline}
       >
         {helperText}
       </div>
@@ -135,13 +135,13 @@
   {/if}
   {#if !inline && (labelText || $$slots.labelText)}
     <label
-      for="{id}"
-      class:bx--label="{true}"
-      class:bx--visually-hidden="{hideLabel}"
-      class:bx--label--disabled="{disabled}"
-      class:bx--label--inline="{inline}"
-      class:bx--label--inline--sm="{inline && size === 'sm'}"
-      class:bx--label--inline--xl="{inline && size === 'xl'}"
+      for={id}
+      class:bx--label={true}
+      class:bx--visually-hidden={hideLabel}
+      class:bx--label--disabled={disabled}
+      class:bx--label--inline={inline}
+      class:bx--label--inline--sm={inline && size === "sm"}
+      class:bx--label--inline--xl={inline && size === "xl"}
     >
       <slot name="labelText">
         {labelText}
@@ -149,13 +149,13 @@
     </label>
   {/if}
   <div
-    class:bx--text-input__field-outer-wrapper="{true}"
-    class:bx--text-input__field-outer-wrapper--inline="{inline}"
+    class:bx--text-input__field-outer-wrapper={true}
+    class:bx--text-input__field-outer-wrapper--inline={inline}
   >
     <div
-      class:bx--text-input__field-wrapper="{true}"
-      class:bx--text-input__field-wrapper--warning="{warn}"
-      data-invalid="{invalid || undefined}"
+      class:bx--text-input__field-wrapper={true}
+      class:bx--text-input__field-wrapper--warning={warn}
+      data-invalid={invalid || undefined}
     >
       {#if invalid}
         <WarningFilled class="bx--text-input__invalid-icon" />
@@ -167,35 +167,35 @@
         />
       {/if}
       <input
-        bind:this="{ref}"
-        data-invalid="{invalid || undefined}"
-        aria-invalid="{invalid || undefined}"
-        aria-describedby="{invalid
+        bind:this={ref}
+        data-invalid={invalid || undefined}
+        aria-invalid={invalid || undefined}
+        aria-describedby={invalid
           ? errorId
           : warn
-          ? warnId
-          : helperText
-          ? helperId
-          : undefined}"
-        id="{id}"
-        name="{name}"
-        placeholder="{placeholder}"
-        type="{type}"
-        value="{value ?? ''}"
-        disabled="{disabled}"
-        class:bx--text-input="{true}"
-        class:bx--password-input="{true}"
-        class:bx--text-input--light="{light}"
-        class:bx--text-input--invalid="{invalid}"
-        class:bx--text-input--warning="{warn}"
-        class:bx--text-input--sm="{size === 'sm'}"
-        class:bx--text-input--xl="{size === 'xl'}"
+            ? warnId
+            : helperText
+              ? helperId
+              : undefined}
+        {id}
+        {name}
+        {placeholder}
+        {type}
+        value={value ?? ""}
+        {disabled}
+        class:bx--text-input={true}
+        class:bx--password-input={true}
+        class:bx--text-input--light={light}
+        class:bx--text-input--invalid={invalid}
+        class:bx--text-input--warning={warn}
+        class:bx--text-input--sm={size === "sm"}
+        class:bx--text-input--xl={size === "xl"}
         {...$$restProps}
         on:change
         on:input
-        on:input="{({ target }) => {
+        on:input={({ target }) => {
           value = target.value;
-        }}"
+        }}
         on:keydown
         on:keyup
         on:focus
@@ -204,33 +204,33 @@
       />
       {#if isFluid && invalid}
         <hr class="bx--text-input__divider" />
-        <div class="bx--form-requirement" id="{errorId}">
+        <div class="bx--form-requirement" id={errorId}>
           {invalidText}
         </div>
       {/if}
       {#if !(isFluid && invalid)}
         <button
           type="button"
-          disabled="{disabled}"
-          class:bx--text-input--password__visibility__toggle="{true}"
-          class:bx--btn="{true}"
-          class:bx--btn--icon-only="{true}"
-          class:bx--btn--disabled="{disabled}"
-          class:bx--tooltip__trigger="{true}"
-          class:bx--tooltip--a11y="{true}"
-          class:bx--tooltip--top="{tooltipPosition === 'top'}"
-          class:bx--tooltip--right="{tooltipPosition === 'right'}"
-          class:bx--tooltip--bottom="{tooltipPosition === 'bottom'}"
-          class:bx--tooltip--left="{tooltipPosition === 'left'}"
-          class:bx--tooltip--align-start="{tooltipAlignment === 'start'}"
-          class:bx--tooltip--align-center="{tooltipAlignment === 'center'}"
-          class:bx--tooltip--align-end="{tooltipAlignment === 'end'}"
-          on:click="{() => {
-            type = type === 'password' ? 'text' : 'password';
-          }}"
+          {disabled}
+          class:bx--text-input--password__visibility__toggle={true}
+          class:bx--btn={true}
+          class:bx--btn--icon-only={true}
+          class:bx--btn--disabled={disabled}
+          class:bx--tooltip__trigger={true}
+          class:bx--tooltip--a11y={true}
+          class:bx--tooltip--top={tooltipPosition === "top"}
+          class:bx--tooltip--right={tooltipPosition === "right"}
+          class:bx--tooltip--bottom={tooltipPosition === "bottom"}
+          class:bx--tooltip--left={tooltipPosition === "left"}
+          class:bx--tooltip--align-start={tooltipAlignment === "start"}
+          class:bx--tooltip--align-center={tooltipAlignment === "center"}
+          class:bx--tooltip--align-end={tooltipAlignment === "end"}
+          on:click={() => {
+            type = type === "password" ? "text" : "password";
+          }}
         >
           {#if !disabled}
-            <span class:bx--assistive-text="{true}">
+            <span class:bx--assistive-text={true}>
               {#if type === "text"}
                 {hidePasswordLabel}
               {:else}{showPasswordLabel}{/if}
@@ -245,21 +245,21 @@
       {/if}
     </div>
     {#if !isFluid && invalid}
-      <div class:bx--form-requirement="{true}" id="{errorId}">
+      <div class:bx--form-requirement={true} id={errorId}>
         {invalidText}
       </div>
     {/if}
     {#if !invalid && !warn && !isFluid && !inline && helperText}
       <div
-        class:bx--form__helper-text="{true}"
-        class:bx--form__helper-text--disabled="{disabled}"
-        class:bx--form__helper-text--inline="{inline}"
+        class:bx--form__helper-text={true}
+        class:bx--form__helper-text--disabled={disabled}
+        class:bx--form__helper-text--inline={inline}
       >
         {helperText}
       </div>
     {/if}
     {#if !isFluid && !invalid && warn}
-      <div class:bx--form-requirement="{true}" id="{warnId}">{warnText}</div>
+      <div class:bx--form-requirement={true} id={warnId}>{warnText}</div>
     {/if}
   </div>
 </div>
diff --git a/src/TextInput/TextInput.svelte b/src/TextInput/TextInput.svelte
index 46a88ef0..c2cfb319 100644
--- a/src/TextInput/TextInput.svelte
+++ b/src/TextInput/TextInput.svelte
@@ -105,27 +105,27 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class:bx--form-item="{true}"
-  class:bx--text-input-wrapper="{true}"
-  class:bx--text-input-wrapper--inline="{inline}"
-  class:bx--text-input-wrapper--light="{light}"
-  class:bx--text-input-wrapper--readonly="{readonly}"
+  class:bx--form-item={true}
+  class:bx--text-input-wrapper={true}
+  class:bx--text-input-wrapper--inline={inline}
+  class:bx--text-input-wrapper--light={light}
+  class:bx--text-input-wrapper--readonly={readonly}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave
 >
   {#if inline}
-    <div class:bx--text-input__label-helper-wrapper="{true}">
+    <div class:bx--text-input__label-helper-wrapper={true}>
       {#if labelText}
         <label
-          for="{id}"
-          class:bx--label="{true}"
-          class:bx--visually-hidden="{hideLabel}"
-          class:bx--label--disabled="{disabled}"
-          class:bx--label--inline="{inline}"
-          class:bx--label--inline--sm="{size === 'sm'}"
-          class:bx--label--inline--xl="{size === 'xl'}"
+          for={id}
+          class:bx--label={true}
+          class:bx--visually-hidden={hideLabel}
+          class:bx--label--disabled={disabled}
+          class:bx--label--inline={inline}
+          class:bx--label--inline--sm={size === "sm"}
+          class:bx--label--inline--xl={size === "xl"}
         >
           <slot name="labelText">
             {labelText}
@@ -134,9 +134,9 @@
       {/if}
       {#if !isFluid && helperText}
         <div
-          class:bx--form__helper-text="{true}"
-          class:bx--form__helper-text--disabled="{disabled}"
-          class:bx--form__helper-text--inline="{inline}"
+          class:bx--form__helper-text={true}
+          class:bx--form__helper-text--disabled={disabled}
+          class:bx--form__helper-text--inline={inline}
         >
           {helperText}
         </div>
@@ -145,13 +145,13 @@
   {/if}
   {#if !inline && (labelText || $$slots.labelText)}
     <label
-      for="{id}"
-      class:bx--label="{true}"
-      class:bx--visually-hidden="{hideLabel}"
-      class:bx--label--disabled="{disabled}"
-      class:bx--label--inline="{inline}"
-      class:bx--label--inline-sm="{inline && size === 'sm'}"
-      class:bx--label--inline-xl="{inline && size === 'xl'}"
+      for={id}
+      class:bx--label={true}
+      class:bx--visually-hidden={hideLabel}
+      class:bx--label--disabled={disabled}
+      class:bx--label--inline={inline}
+      class:bx--label--inline-sm={inline && size === "sm"}
+      class:bx--label--inline-xl={inline && size === "xl"}
     >
       <slot name="labelText">
         {labelText}
@@ -159,14 +159,14 @@
     </label>
   {/if}
   <div
-    class:bx--text-input__field-outer-wrapper="{true}"
-    class:bx--text-input__field-outer-wrapper--inline="{inline}"
+    class:bx--text-input__field-outer-wrapper={true}
+    class:bx--text-input__field-outer-wrapper--inline={inline}
   >
     <div
-      data-invalid="{error || undefined}"
-      data-warn="{warn || undefined}"
-      class:bx--text-input__field-wrapper="{true}"
-      class:bx--text-input__field-wrapper--warning="{!invalid && warn}"
+      data-invalid={error || undefined}
+      data-warn={warn || undefined}
+      class:bx--text-input__field-wrapper={true}
+      class:bx--text-input__field-wrapper--warning={!invalid && warn}
     >
       {#if readonly}
         <EditOff class="bx--text-input__readonly-icon" />
@@ -182,33 +182,33 @@
         {/if}
       {/if}
       <input
-        bind:this="{ref}"
-        data-invalid="{error || undefined}"
-        aria-invalid="{error || undefined}"
-        data-warn="{warn || undefined}"
-        aria-describedby="{error
+        bind:this={ref}
+        data-invalid={error || undefined}
+        aria-invalid={error || undefined}
+        data-warn={warn || undefined}
+        aria-describedby={error
           ? errorId
           : warn
-          ? warnId
-          : helperText
-          ? helperId
-          : undefined}"
-        disabled="{disabled}"
-        id="{id}"
-        name="{name}"
-        placeholder="{placeholder}"
+            ? warnId
+            : helperText
+              ? helperId
+              : undefined}
+        {disabled}
+        {id}
+        {name}
+        {placeholder}
         bind:value
-        required="{required}"
-        readonly="{readonly}"
-        class:bx--text-input="{true}"
-        class:bx--text-input--light="{light}"
-        class:bx--text-input--invalid="{error}"
-        class:bx--text-input--warning="{warn}"
-        class:bx--text-input--sm="{size === 'sm'}"
-        class:bx--text-input--xl="{size === 'xl'}"
+        {required}
+        {readonly}
+        class:bx--text-input={true}
+        class:bx--text-input--light={light}
+        class:bx--text-input--invalid={error}
+        class:bx--text-input--warning={warn}
+        class:bx--text-input--sm={size === "sm"}
+        class:bx--text-input--xl={size === "xl"}
         {...$$restProps}
-        on:change="{onChange}"
-        on:input="{onInput}"
+        on:change={onChange}
+        on:input={onInput}
         on:keydown
         on:keyup
         on:focus
@@ -216,34 +216,34 @@
         on:paste
       />
       {#if isFluid}
-        <hr class:bx--text-input__divider="{true}" />
+        <hr class:bx--text-input__divider={true} />
       {/if}
       {#if isFluid && !inline && invalid}
-        <div class:bx--form-requirement="{true}" id="{errorId}">
+        <div class:bx--form-requirement={true} id={errorId}>
           {invalidText}
         </div>
       {/if}
       {#if isFluid && !inline && warn}
-        <div class:bx--form-requirement="{true}" id="{warnId}">{warnText}</div>
+        <div class:bx--form-requirement={true} id={warnId}>{warnText}</div>
       {/if}
     </div>
     {#if !invalid && !warn && !isFluid && !inline && helperText}
       <div
-        id="{helperId}"
-        class:bx--form__helper-text="{true}"
-        class:bx--form__helper-text--disabled="{disabled}"
-        class:bx--form__helper-text--inline="{inline}"
+        id={helperId}
+        class:bx--form__helper-text={true}
+        class:bx--form__helper-text--disabled={disabled}
+        class:bx--form__helper-text--inline={inline}
       >
         {helperText}
       </div>
     {/if}
     {#if !isFluid && invalid}
-      <div class:bx--form-requirement="{true}" id="{errorId}">
+      <div class:bx--form-requirement={true} id={errorId}>
         {invalidText}
       </div>
     {/if}
     {#if !isFluid && !invalid && warn}
-      <div class:bx--form-requirement="{true}" id="{warnId}">{warnText}</div>
+      <div class:bx--form-requirement={true} id={warnId}>{warnText}</div>
     {/if}
   </div>
 </div>
diff --git a/src/TextInput/TextInputSkeleton.svelte b/src/TextInput/TextInputSkeleton.svelte
index 690ea42d..23da8b95 100644
--- a/src/TextInput/TextInputSkeleton.svelte
+++ b/src/TextInput/TextInputSkeleton.svelte
@@ -6,7 +6,7 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class:bx--form-item="{true}"
+  class:bx--form-item={true}
   {...$$restProps}
   on:click
   on:mouseover
@@ -14,7 +14,7 @@
   on:mouseleave
 >
   {#if !hideLabel}
-    <span class:bx--label="{true}" class:bx--skeleton="{true}"></span>
+    <span class:bx--label={true} class:bx--skeleton={true}></span>
   {/if}
-  <div class:bx--skeleton="{true}" class:bx--text-input="{true}"></div>
+  <div class:bx--skeleton={true} class:bx--text-input={true}></div>
 </div>
diff --git a/src/Theme/Theme.svelte b/src/Theme/Theme.svelte
index 89d00527..b276b483 100644
--- a/src/Theme/Theme.svelte
+++ b/src/Theme/Theme.svelte
@@ -88,31 +88,31 @@
     } else {
       console.warn(
         `[Theme.svelte] invalid theme "${theme}". Value must be one of: ${JSON.stringify(
-          Object.keys(themes)
-        )}`
+          Object.keys(themes),
+        )}`,
       );
     }
   }
 </script>
 
 {#if persist}
-  <LocalStorage bind:value="{theme}" key="{persistKey}" />
+  <LocalStorage bind:value={theme} key={persistKey} />
 {/if}
 
 {#if render === "toggle"}
   <Toggle
     {...toggle}
-    toggled="{theme === toggle.themes[1]}"
-    on:toggle="{({ detail }) => {
+    toggled={theme === toggle.themes[1]}
+    on:toggle={({ detail }) => {
       theme = detail.toggled ? toggle.themes[1] : toggle.themes[0];
-    }}"
+    }}
   />
 {:else if render === "select"}
-  <Select {...select} bind:selected="{theme}">
+  <Select {...select} bind:selected={theme}>
     {#each select.themes as theme (theme)}
-      <SelectItem value="{theme}" text="{themes[theme]}" />
+      <SelectItem value={theme} text={themes[theme]} />
     {/each}
   </Select>
 {/if}
 
-<slot theme="{theme}" />
+<slot {theme} />
diff --git a/src/Tile/ClickableTile.svelte b/src/Tile/ClickableTile.svelte
index 3121a317..8dbd2e96 100644
--- a/src/Tile/ClickableTile.svelte
+++ b/src/Tile/ClickableTile.svelte
@@ -21,20 +21,20 @@
 
 <Link
   {...$$restProps}
-  disabled="{disabled}"
+  {disabled}
   class="bx--tile bx--tile--clickable {clicked &&
     'bx--tile--is-clicked'} {light && 'bx--tile--light'} {$$restProps.class}"
-  href="{href}"
+  {href}
   on:click
-  on:click="{() => {
+  on:click={() => {
     clicked = !clicked;
-  }}"
+  }}
   on:keydown
-  on:keydown="{({ key }) => {
-    if (key === ' ' || key === 'Enter') {
+  on:keydown={({ key }) => {
+    if (key === " " || key === "Enter") {
       clicked = !clicked;
     }
-  }}"
+  }}
   on:mouseover
   on:mouseenter
   on:mouseleave
diff --git a/src/Tile/ExpandableTile.svelte b/src/Tile/ExpandableTile.svelte
index fe8ae386..5f8f9f6e 100644
--- a/src/Tile/ExpandableTile.svelte
+++ b/src/Tile/ExpandableTile.svelte
@@ -64,39 +64,39 @@
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <button
-  bind:this="{ref}"
+  bind:this={ref}
   type="button"
-  id="{id}"
-  aria-expanded="{expanded}"
-  tabindex="{tabindex}"
-  title="{expanded ? tileExpandedIconText : tileCollapsedIconText}"
-  class:bx--tile="{true}"
-  class:bx--tile--expandable="{true}"
-  class:bx--tile--is-expanded="{expanded}"
-  class:bx--tile--light="{light}"
-  style:max-height="{expanded ? "none" : `${tileMaxHeight + tilePadding}px`}"
+  {id}
+  aria-expanded={expanded}
+  {tabindex}
+  title={expanded ? tileExpandedIconText : tileCollapsedIconText}
+  class:bx--tile={true}
+  class:bx--tile--expandable={true}
+  class:bx--tile--is-expanded={expanded}
+  class:bx--tile--light={light}
+  style:max-height={expanded ? "none" : `${tileMaxHeight + tilePadding}px`}
   {...$$restProps}
   on:click
-  on:click="{() => {
+  on:click={() => {
     expanded = !expanded;
-  }}"
+  }}
   on:keypress
   on:mouseover
   on:mouseenter
   on:mouseleave
 >
   <div>
-    <div bind:this="{refAbove}" class:bx--tile-content="{true}">
-      <span class:bx--tile-content__above-the-fold="{true}">
+    <div bind:this={refAbove} class:bx--tile-content={true}>
+      <span class:bx--tile-content__above-the-fold={true}>
         <slot name="above" />
       </span>
     </div>
-    <div class:bx--tile__chevron="{true}">
+    <div class:bx--tile__chevron={true}>
       <span>{expanded ? tileExpandedLabel : tileCollapsedLabel}</span>
       <ChevronDown />
     </div>
-    <div class:bx--tile-content="{true}">
-      <span class:bx--tile-content__below-the-fold="{true}">
+    <div class:bx--tile-content={true}>
+      <span class:bx--tile-content__below-the-fold={true}>
         <slot name="below" />
       </span>
     </div>
diff --git a/src/Tile/RadioTile.svelte b/src/Tile/RadioTile.svelte
index 2d1e741b..5e960c89 100644
--- a/src/Tile/RadioTile.svelte
+++ b/src/Tile/RadioTile.svelte
@@ -34,7 +34,7 @@
   import CheckmarkFilled from "../icons/CheckmarkFilled.svelte";
 
   const { add, update, selectedValue, groupName, groupRequired } = getContext(
-    "TileGroup"
+    "TileGroup",
   ) ?? {
     groupName: readable(undefined),
     groupRequired: readable(undefined),
@@ -48,47 +48,47 @@
 
 <input
   type="radio"
-  id="{id}"
-  name="{$groupName ?? name}"
-  value="{value}"
-  checked="{checked}"
-  tabindex="{disabled ? undefined : tabindex}"
-  disabled="{disabled}"
-  required="{$groupRequired ?? required}"
-  class:bx--tile-input="{true}"
+  {id}
+  name={$groupName ?? name}
+  {value}
+  {checked}
+  tabindex={disabled ? undefined : tabindex}
+  {disabled}
+  required={$groupRequired ?? required}
+  class:bx--tile-input={true}
   on:change
-  on:change="{() => {
+  on:change={() => {
     if (disabled) return;
     update(value);
-  }}"
+  }}
   on:keydown
-  on:keydown="{(e) => {
+  on:keydown={(e) => {
     if (disabled) return;
-    if (e.key === ' ' || e.key === 'Enter') {
+    if (e.key === " " || e.key === "Enter") {
       e.preventDefault();
       update(value);
     }
-  }}"
+  }}
 />
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <label
-  for="{id}"
-  class:bx--tile="{true}"
-  class:bx--tile--selectable="{true}"
-  class:bx--tile--is-selected="{checked}"
-  class:bx--tile--light="{light}"
-  class:bx--tile--disabled="{disabled}"
+  for={id}
+  class:bx--tile={true}
+  class:bx--tile--selectable={true}
+  class:bx--tile--is-selected={checked}
+  class:bx--tile--light={light}
+  class:bx--tile--disabled={disabled}
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave
 >
-  <span class:bx--tile__checkmark="{true}">
-    <CheckmarkFilled aria-label="{iconDescription}" title="{iconDescription}" />
+  <span class:bx--tile__checkmark={true}>
+    <CheckmarkFilled aria-label={iconDescription} title={iconDescription} />
   </span>
-  <span class:bx--tile-content="{true}">
+  <span class:bx--tile-content={true}>
     <slot />
   </span>
 </label>
diff --git a/src/Tile/SelectableTile.svelte b/src/Tile/SelectableTile.svelte
index a2719d11..9d655678 100644
--- a/src/Tile/SelectableTile.svelte
+++ b/src/Tile/SelectableTile.svelte
@@ -46,50 +46,50 @@
 </script>
 
 <input
-  bind:this="{ref}"
+  bind:this={ref}
   type="checkbox"
   tabindex="-1"
-  class:bx--tile-input="{true}"
-  checked="{selected}"
-  id="{id}"
-  value="{value}"
-  name="{name}"
-  title="{title}"
-  disabled="{disabled}"
+  class:bx--tile-input={true}
+  checked={selected}
+  {id}
+  {value}
+  {name}
+  {title}
+  {disabled}
 />
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <label
-  for="{id}"
-  tabindex="{disabled ? undefined : tabindex}"
-  class:bx--tile="{true}"
-  class:bx--tile--selectable="{true}"
-  class:bx--tile--is-selected="{selected}"
-  class:bx--tile--light="{light}"
-  class:bx--tile--disabled="{disabled}"
+  for={id}
+  tabindex={disabled ? undefined : tabindex}
+  class:bx--tile={true}
+  class:bx--tile--selectable={true}
+  class:bx--tile--is-selected={selected}
+  class:bx--tile--light={light}
+  class:bx--tile--disabled={disabled}
   {...$$restProps}
   on:click
-  on:click|preventDefault="{() => {
+  on:click|preventDefault={() => {
     if (disabled) return;
     selected = !selected;
-  }}"
+  }}
   on:mouseover
   on:mouseenter
   on:mouseleave
   on:keydown
-  on:keydown="{(e) => {
+  on:keydown={(e) => {
     if (disabled) return;
-    if (e.key === ' ' || e.key === 'Enter') {
+    if (e.key === " " || e.key === "Enter") {
       e.preventDefault();
       selected = !selected;
     }
-  }}"
+  }}
 >
-  <span class:bx--tile__checkmark="{true}">
-    <CheckmarkFilled aria-label="{iconDescription}" title="{iconDescription}" />
+  <span class:bx--tile__checkmark={true}>
+    <CheckmarkFilled aria-label={iconDescription} title={iconDescription} />
   </span>
-  <span class:bx--tile-content="{true}">
+  <span class:bx--tile-content={true}>
     <slot />
   </span>
 </label>
diff --git a/src/Tile/Tile.svelte b/src/Tile/Tile.svelte
index c044bf02..02972b77 100644
--- a/src/Tile/Tile.svelte
+++ b/src/Tile/Tile.svelte
@@ -6,8 +6,8 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class:bx--tile="{true}"
-  class:bx--tile--light="{light}"
+  class:bx--tile={true}
+  class:bx--tile--light={light}
   {...$$restProps}
   on:click
   on:mouseover
diff --git a/src/Tile/TileGroup.svelte b/src/Tile/TileGroup.svelte
index 5934c659..a6458b8d 100644
--- a/src/Tile/TileGroup.svelte
+++ b/src/Tile/TileGroup.svelte
@@ -56,9 +56,9 @@
   $: $groupRequired = required;
 </script>
 
-<fieldset disabled="{disabled}" class:bx--tile-group="{true}" {...$$restProps}>
+<fieldset {disabled} class:bx--tile-group={true} {...$$restProps}>
   {#if legend}
-    <legend class:bx--label="{true}">{legend}</legend>
+    <legend class:bx--label={true}>{legend}</legend>
   {/if}
   <div>
     <slot />
diff --git a/src/TimePicker/TimePicker.svelte b/src/TimePicker/TimePicker.svelte
index 29def9a6..61bd5c60 100644
--- a/src/TimePicker/TimePicker.svelte
+++ b/src/TimePicker/TimePicker.svelte
@@ -55,27 +55,27 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class:bx--form-item="{true}"
+  class:bx--form-item={true}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave
 >
   <div
-    class:bx--time-picker="{true}"
-    class:bx--time-picker--light="{light}"
-    class:bx--time-picker--invalid="{invalid}"
-    class:bx--time-picker--sm="{size === 'sm'}"
-    class:bx--time-picker--xl="{size === 'xl'}"
-    class:bx--select--light="{light}"
+    class:bx--time-picker={true}
+    class:bx--time-picker--light={light}
+    class:bx--time-picker--invalid={invalid}
+    class:bx--time-picker--sm={size === "sm"}
+    class:bx--time-picker--xl={size === "xl"}
+    class:bx--select--light={light}
   >
-    <div class:bx--time-picker__input="{true}">
+    <div class:bx--time-picker__input={true}>
       {#if labelText || $$slots.labelText}
         <label
-          for="{id}"
-          class:bx--label="{true}"
-          class:bx--visually-hidden="{hideLabel}"
-          class:bx--label--disabled="{disabled}"
+          for={id}
+          class:bx--label={true}
+          class:bx--visually-hidden={hideLabel}
+          class:bx--label--disabled={disabled}
         >
           <slot name="labelText">
             {labelText}
@@ -83,21 +83,21 @@
         </label>
       {/if}
       <input
-        bind:this="{ref}"
+        bind:this={ref}
         bind:value
         type="text"
-        data-invalid="{invalid || undefined}"
-        pattern="{pattern}"
-        placeholder="{placeholder}"
-        maxlength="{maxlength}"
-        id="{id}"
-        name="{name}"
-        disabled="{disabled}"
+        data-invalid={invalid || undefined}
+        {pattern}
+        {placeholder}
+        {maxlength}
+        {id}
+        {name}
+        {disabled}
         {...$$restProps}
-        class:bx--time-picker__input-field="{true}"
-        class:bx--text-input="{true}"
-        class:bx--text-input--light="{light}"
-        class:bx--text-input--invalid="{invalid}"
+        class:bx--time-picker__input-field={true}
+        class:bx--text-input={true}
+        class:bx--text-input--light={light}
+        class:bx--text-input--invalid={invalid}
         on:change
         on:input
         on:keydown
@@ -110,6 +110,6 @@
     <slot />
   </div>
   {#if invalid}
-    <div class:bx--form-requirement="{true}">{invalidText}</div>
+    <div class:bx--form-requirement={true}>{invalidText}</div>
   {/if}
 </div>
diff --git a/src/TimePicker/TimePickerSelect.svelte b/src/TimePicker/TimePickerSelect.svelte
index 32eee7a2..ee5b20fb 100644
--- a/src/TimePicker/TimePickerSelect.svelte
+++ b/src/TimePicker/TimePickerSelect.svelte
@@ -41,8 +41,8 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class:bx--select="{true}"
-  class:bx--time-picker__select="{true}"
+  class:bx--select={true}
+  class:bx--time-picker__select={true}
   {...$$restProps}
   on:click
   on:mouseover
@@ -50,11 +50,7 @@
   on:mouseleave
 >
   {#if labelText || $$slots.labelText}
-    <label
-      for="{id}"
-      class:bx--label="{true}"
-      class:bx--visually-hidden="{true}"
-    >
+    <label for={id} class:bx--label={true} class:bx--visually-hidden={true}>
       <slot name="labelText">
         {labelText}
       </slot>
@@ -62,21 +58,21 @@
   {/if}
   <!-- svelte-ignore a11y-no-onchange -->
   <select
-    bind:this="{ref}"
-    id="{id}"
-    name="{name}"
-    disabled="{disabled}"
-    value="{value}"
-    class:bx--select-input="{true}"
-    on:change="{({ target }) => {
+    bind:this={ref}
+    {id}
+    {name}
+    {disabled}
+    {value}
+    class:bx--select-input={true}
+    on:change={({ target }) => {
       selectedValue.set(target.value);
-    }}"
+    }}
   >
     <slot />
   </select>
   <ChevronDown
-    aria-label="{iconDescription}"
-    title="{iconDescription}"
+    aria-label={iconDescription}
+    title={iconDescription}
     class="bx--select__arrow"
   />
 </div>
diff --git a/src/Toggle/Toggle.svelte b/src/Toggle/Toggle.svelte
index 5c865194..e8a19d56 100644
--- a/src/Toggle/Toggle.svelte
+++ b/src/Toggle/Toggle.svelte
@@ -46,7 +46,7 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class:bx--form-item="{true}"
+  class:bx--form-item={true}
   style:user-select="none"
   {...$$restProps}
   on:click
@@ -58,46 +58,46 @@
   <input
     role="switch"
     type="checkbox"
-    class:bx--toggle-input="{true}"
-    class:bx--toggle-input--small="{size === 'sm'}"
-    checked="{toggled}"
-    on:change="{() => {
+    class:bx--toggle-input={true}
+    class:bx--toggle-input--small={size === "sm"}
+    checked={toggled}
+    on:change={() => {
       toggled = !toggled;
-    }}"
+    }}
     on:change
-    on:keyup="{(e) => {
-      if (e.key === ' ' || e.key === 'Enter') {
+    on:keyup={(e) => {
+      if (e.key === " " || e.key === "Enter") {
         e.preventDefault();
         toggled = !toggled;
       }
-    }}"
+    }}
     on:keyup
     on:focus
     on:blur
-    disabled="{disabled}"
-    id="{id}"
-    name="{name}"
+    {disabled}
+    {id}
+    {name}
   />
   <label
-    aria-label="{labelText ? undefined : $$props['aria-label'] || 'Toggle'}"
-    for="{id}"
-    class:bx--toggle-input__label="{true}"
+    aria-label={labelText ? undefined : $$props["aria-label"] || "Toggle"}
+    for={id}
+    class:bx--toggle-input__label={true}
   >
-    <span class:bx--visually-hidden="{hideLabel}">
+    <span class:bx--visually-hidden={hideLabel}>
       <slot name="labelText">
         {labelText}
       </slot>
     </span>
     <span
-      class:bx--toggle__switch="{true}"
-      style:margin-top="{hideLabel ? 0 : undefined}"
+      class:bx--toggle__switch={true}
+      style:margin-top={hideLabel ? 0 : undefined}
     >
-      <span aria-hidden="true" class:bx--toggle__text--off="{true}">
+      <span aria-hidden="true" class:bx--toggle__text--off={true}>
         <slot name="labelA">
           {labelA}
         </slot>
       </span>
-      <span aria-hidden="true" class:bx--toggle__text--on="{true}">
+      <span aria-hidden="true" class:bx--toggle__text--on={true}>
         <slot name="labelB">
           {labelB}
         </slot>
diff --git a/src/Toggle/ToggleSkeleton.svelte b/src/Toggle/ToggleSkeleton.svelte
index 5b07cf5b..0956c0b8 100644
--- a/src/Toggle/ToggleSkeleton.svelte
+++ b/src/Toggle/ToggleSkeleton.svelte
@@ -15,7 +15,7 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class:bx--form-item="{true}"
+  class:bx--form-item={true}
   {...$$restProps}
   on:click
   on:mouseover
@@ -24,28 +24,28 @@
 >
   <input
     type="checkbox"
-    id="{id}"
-    class:bx--toggle="{true}"
-    class:bx--toggle--small="{size === 'sm'}"
-    class:bx--skeleton="{true}"
+    {id}
+    class:bx--toggle={true}
+    class:bx--toggle--small={size === "sm"}
+    class:bx--skeleton={true}
   />
   <label
-    aria-label="{labelText
+    aria-label={labelText
       ? undefined
-      : $$props['aria-label'] || 'Toggle is loading'}"
-    for="{id}"
-    class:bx--toggle__label="{true}"
-    class:bx--skeleton="{true}"
+      : $$props["aria-label"] || "Toggle is loading"}
+    for={id}
+    class:bx--toggle__label={true}
+    class:bx--skeleton={true}
   >
     {#if labelText || $$slots.labelText}
-      <span class:bx--toggle__label-text="{true}">
+      <span class:bx--toggle__label-text={true}>
         <slot name="labelText">
           {labelText}
         </slot>
       </span>
     {/if}
-    <span class:bx--toggle__text--left="{true}"></span>
-    <span class:bx--toggle__appearance="{true}"></span>
-    <span class:bx--toggle__text--right="{true}"></span>
+    <span class:bx--toggle__text--left={true}></span>
+    <span class:bx--toggle__appearance={true}></span>
+    <span class:bx--toggle__text--right={true}></span>
   </label>
 </div>
diff --git a/src/Tooltip/Tooltip.svelte b/src/Tooltip/Tooltip.svelte
index cc7c8d20..b1f4a42d 100644
--- a/src/Tooltip/Tooltip.svelte
+++ b/src/Tooltip/Tooltip.svelte
@@ -179,7 +179,7 @@
 </script>
 
 <svelte:window
-  on:mousedown="{({ target }) => {
+  on:mousedown={({ target }) => {
     if (open) {
       if (target.contains(refTooltip)) {
         if (refIcon) {
@@ -189,48 +189,48 @@
         }
       }
     }
-  }}"
-  on:click|capture="{({ target }) => {
+  }}
+  on:click|capture={({ target }) => {
     if (open && !ref.contains(target) && !refTooltip.contains(target)) {
       setTimeout(() => {
         open = false;
       });
     }
-  }}"
+  }}
 />
 
 <div
   style:position="relative"
-  style:z-index="{open ? 1 : undefined}"
+  style:z-index={open ? 1 : undefined}
   {...$$restProps}
 >
   {#if !hideIcon}
-    <div bind:this="{ref}" id="{triggerId}" class:bx--tooltip__label="{true}">
+    <div bind:this={ref} id={triggerId} class:bx--tooltip__label={true}>
       <slot name="triggerText">{triggerText}</slot>
       <!-- svelte-ignore a11y-no-static-element-interactions -->
       <div
-        bind:this="{refIcon}"
+        bind:this={refIcon}
         {...buttonProps}
-        aria-describedby="{tooltipId}"
-        on:mousedown="{onMousedown}"
-        on:focus="{onFocus}"
-        on:keydown="{onKeydown}"
+        aria-describedby={tooltipId}
+        on:mousedown={onMousedown}
+        on:focus={onFocus}
+        on:keydown={onKeydown}
       >
         <slot name="icon">
-          <svelte:component this="{icon}" name="{iconName}" />
+          <svelte:component this={icon} name={iconName} />
         </slot>
       </div>
     </div>
   {:else}
     <!-- svelte-ignore a11y-no-static-element-interactions -->
     <div
-      bind:this="{ref}"
+      bind:this={ref}
       {...buttonProps}
-      aria-describedby="{tooltipId}"
-      on:mousedown="{onMousedown}"
-      on:focus="{onFocus}"
-      on:blur="{onBlur}"
-      on:keydown="{onKeydown}"
+      aria-describedby={tooltipId}
+      on:mousedown={onMousedown}
+      on:focus={onFocus}
+      on:blur={onBlur}
+      on:keydown={onKeydown}
     >
       <slot name="triggerText">{triggerText}</slot>
     </div>
@@ -238,27 +238,27 @@
   {#if open}
     <!-- svelte-ignore a11y-no-static-element-interactions -->
     <div
-      bind:this="{refTooltip}"
-      id="{tooltipId}"
-      data-floating-menu-direction="{direction}"
-      class:bx--tooltip="{true}"
-      class:bx--tooltip--shown="{open}"
-      class:bx--tooltip--top="{direction === 'top'}"
-      class:bx--tooltip--right="{direction === 'right'}"
-      class:bx--tooltip--bottom="{direction === 'bottom'}"
-      class:bx--tooltip--left="{direction === 'left'}"
-      class:bx--tooltip--align-center="{align === 'center'}"
-      class:bx--tooltip--align-start="{align === 'start'}"
-      class:bx--tooltip--align-end="{align === 'end'}"
-      on:keydown="{onKeydown}"
+      bind:this={refTooltip}
+      id={tooltipId}
+      data-floating-menu-direction={direction}
+      class:bx--tooltip={true}
+      class:bx--tooltip--shown={open}
+      class:bx--tooltip--top={direction === "top"}
+      class:bx--tooltip--right={direction === "right"}
+      class:bx--tooltip--bottom={direction === "bottom"}
+      class:bx--tooltip--left={direction === "left"}
+      class:bx--tooltip--align-center={align === "center"}
+      class:bx--tooltip--align-start={align === "start"}
+      class:bx--tooltip--align-end={align === "end"}
+      on:keydown={onKeydown}
     >
-      <span class:bx--tooltip__caret="{true}"></span>
+      <span class:bx--tooltip__caret={true}></span>
       <!-- svelte-ignore a11y-click-events-have-key-events -->
       <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
       <div
         on:click|stopPropagation
         on:mousedown|stopPropagation
-        class:bx--tooltip__content="{true}"
+        class:bx--tooltip__content={true}
         tabindex="-1"
         role="dialog"
       >
diff --git a/src/Tooltip/TooltipFooter.svelte b/src/Tooltip/TooltipFooter.svelte
index 946bbef3..61035467 100644
--- a/src/Tooltip/TooltipFooter.svelte
+++ b/src/Tooltip/TooltipFooter.svelte
@@ -24,6 +24,6 @@
   }
 </script>
 
-<div bind:this="{ref}" class:bx--tooltip__footer="{true}">
+<div bind:this={ref} class:bx--tooltip__footer={true}>
   <slot />
 </div>
diff --git a/src/TooltipDefinition/TooltipDefinition.svelte b/src/TooltipDefinition/TooltipDefinition.svelte
index 5c310aa4..cd0e4fd7 100644
--- a/src/TooltipDefinition/TooltipDefinition.svelte
+++ b/src/TooltipDefinition/TooltipDefinition.svelte
@@ -42,44 +42,44 @@
 </script>
 
 <svelte:window
-  on:keydown="{({ key }) => {
-    if (key === 'Escape') hide();
-  }}"
+  on:keydown={({ key }) => {
+    if (key === "Escape") hide();
+  }}
 />
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <span
-  class:bx--tooltip--definition="{true}"
-  class:bx--tooltip--a11y="{true}"
+  class:bx--tooltip--definition={true}
+  class:bx--tooltip--a11y={true}
   {...$$restProps}
-  on:mouseenter="{show}"
-  on:mouseleave="{hide}"
+  on:mouseenter={show}
+  on:mouseleave={hide}
 >
   <button
-    bind:this="{ref}"
+    bind:this={ref}
     type="button"
-    aria-describedby="{id}"
-    class:bx--tooltip--a11y="{true}"
-    class:bx--tooltip__trigger="{true}"
-    class:bx--tooltip__trigger--definition="{true}"
-    class:bx--tooltip--hidden="{!open}"
-    class:bx--tooltip--visible="{open}"
-    class:bx--tooltip--top="{direction === 'top'}"
-    class:bx--tooltip--bottom="{direction === 'bottom'}"
-    class:bx--tooltip--align-start="{align === 'start'}"
-    class:bx--tooltip--align-center="{align === 'center'}"
-    class:bx--tooltip--align-end="{align === 'end'}"
+    aria-describedby={id}
+    class:bx--tooltip--a11y={true}
+    class:bx--tooltip__trigger={true}
+    class:bx--tooltip__trigger--definition={true}
+    class:bx--tooltip--hidden={!open}
+    class:bx--tooltip--visible={open}
+    class:bx--tooltip--top={direction === "top"}
+    class:bx--tooltip--bottom={direction === "bottom"}
+    class:bx--tooltip--align-start={align === "start"}
+    class:bx--tooltip--align-center={align === "center"}
+    class:bx--tooltip--align-end={align === "end"}
     on:click
     on:mouseover
     on:mouseenter
     on:mouseleave
     on:focus
-    on:focus="{show}"
-    on:blur="{hide}"
+    on:focus={show}
+    on:blur={hide}
   >
     <slot />
   </button>
-  <div role="tooltip" id="{id}" class:bx--assistive-text="{true}">
+  <div role="tooltip" {id} class:bx--assistive-text={true}>
     <slot name="tooltip">{tooltipText}</slot>
   </div>
 </span>
diff --git a/src/TooltipIcon/TooltipIcon.svelte b/src/TooltipIcon/TooltipIcon.svelte
index 81a5b3ac..6f871f11 100644
--- a/src/TooltipIcon/TooltipIcon.svelte
+++ b/src/TooltipIcon/TooltipIcon.svelte
@@ -36,47 +36,47 @@
 </script>
 
 <svelte:window
-  on:keydown="{({ key }) => {
-    if (key === 'Escape') {
+  on:keydown={({ key }) => {
+    if (key === "Escape") {
       hidden = true;
     }
-  }}"
+  }}
 />
 
 <button
-  bind:this="{ref}"
-  disabled="{disabled}"
-  aria-describedby="{id}"
-  class:bx--tooltip__trigger="{true}"
-  class:bx--tooltip--a11y="{true}"
-  class:bx--tooltip--hidden="{hidden || disabled}"
-  class:bx--tooltip--top="{direction === 'top'}"
-  class:bx--tooltip--right="{direction === 'right'}"
-  class:bx--tooltip--bottom="{direction === 'bottom'}"
-  class:bx--tooltip--left="{direction === 'left'}"
-  class:bx--tooltip--align-start="{align === 'start'}"
-  class:bx--tooltip--align-center="{align === 'center'}"
-  class:bx--tooltip--align-end="{align === 'end'}"
-  style:cursor="{disabled ? "not-allowed" : "default"}"
+  bind:this={ref}
+  {disabled}
+  aria-describedby={id}
+  class:bx--tooltip__trigger={true}
+  class:bx--tooltip--a11y={true}
+  class:bx--tooltip--hidden={hidden || disabled}
+  class:bx--tooltip--top={direction === "top"}
+  class:bx--tooltip--right={direction === "right"}
+  class:bx--tooltip--bottom={direction === "bottom"}
+  class:bx--tooltip--left={direction === "left"}
+  class:bx--tooltip--align-start={align === "start"}
+  class:bx--tooltip--align-center={align === "center"}
+  class:bx--tooltip--align-end={align === "end"}
+  style:cursor={disabled ? "not-allowed" : "default"}
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
-  on:mouseenter="{() => {
+  on:mouseenter={() => {
     if (disabled) return;
     hidden = false;
-  }}"
+  }}
   on:mouseleave
   on:focus
-  on:focus="{() => {
+  on:focus={() => {
     if (disabled) return;
     hidden = false;
-  }}"
+  }}
 >
-  <span id="{id}" class:bx--assistive-text="{true}">
+  <span {id} class:bx--assistive-text={true}>
     <slot name="tooltipText">{tooltipText}</slot>
   </span>
   <slot>
-    <svelte:component this="{icon}" />
+    <svelte:component this={icon} />
   </slot>
 </button>
diff --git a/src/TreeView/TreeView.svelte b/src/TreeView/TreeView.svelte
index ab8c3dad..260ba145 100644
--- a/src/TreeView/TreeView.svelte
+++ b/src/TreeView/TreeView.svelte
@@ -99,7 +99,7 @@
       .filter(
         (node) =>
           filterNode(node) ||
-          node.nodes?.some((child) => filterNode(child) && child.nodes)
+          node.nodes?.some((child) => filterNode(child) && child.nodes),
       )
       .map((node) => node.id);
   }
@@ -198,7 +198,7 @@
 
   onMount(() => {
     const firstFocusableNode = ref.querySelector(
-      "li.bx--tree-node:not(.bx--tree-node--disabled)"
+      "li.bx--tree-node:not(.bx--tree-node--disabled)",
     );
 
     if (firstFocusableNode != null) {
@@ -242,7 +242,7 @@
 
 {#if !hideLabel}
   <!-- svelte-ignore a11y-label-has-associated-control -->
-  <label id="{labelId}" class:bx--label="{true}">
+  <label id={labelId} class:bx--label={true}>
     <slot name="labelText">{labelText}</slot>
   </label>
 {/if}
@@ -251,18 +251,18 @@
 <ul
   {...$$restProps}
   role="tree"
-  bind:this="{ref}"
-  class:bx--tree="{true}"
-  class:bx--tree--default="{size === 'default'}"
-  class:bx--tree--compact="{size === 'compact'}"
-  aria-label="{hideLabel ? labelText : undefined}"
-  aria-labelledby="{!hideLabel ? labelId : undefined}"
-  aria-multiselectable="{selectedIds.length > 1 || undefined}"
+  bind:this={ref}
+  class:bx--tree={true}
+  class:bx--tree--default={size === "default"}
+  class:bx--tree--compact={size === "compact"}
+  aria-label={hideLabel ? labelText : undefined}
+  aria-labelledby={!hideLabel ? labelId : undefined}
+  aria-multiselectable={selectedIds.length > 1 || undefined}
   on:keydown
-  on:keydown|stopPropagation="{handleKeyDown}"
+  on:keydown|stopPropagation={handleKeyDown}
 >
-  <TreeViewNodeList root nodes="{nodes}" let:node>
-    <slot node="{node}">
+  <TreeViewNodeList root {nodes} let:node>
+    <slot {node}>
       {node.text}
     </slot>
   </TreeViewNodeList>
diff --git a/src/TreeView/TreeViewNode.svelte b/src/TreeView/TreeViewNode.svelte
index 5e0aedd6..f6aa55b4 100644
--- a/src/TreeView/TreeViewNode.svelte
+++ b/src/TreeView/TreeViewNode.svelte
@@ -87,46 +87,46 @@
 
 <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
 <li
-  bind:this="{ref}"
+  bind:this={ref}
   role="treeitem"
-  id="{id}"
-  tabindex="{disabled ? undefined : -1}"
-  aria-current="{id === $activeNodeId || undefined}"
-  aria-selected="{disabled ? undefined : selected}"
-  aria-disabled="{disabled}"
-  class:bx--tree-node="{true}"
-  class:bx--tree-leaf-node="{true}"
-  class:bx--tree-node--active="{id === $activeNodeId}"
-  class:bx--tree-node--selected="{selected}"
-  class:bx--tree-node--disabled="{disabled}"
-  class:bx--tree-node--with-icon="{icon}"
-  on:click|stopPropagation="{() => {
+  {id}
+  tabindex={disabled ? undefined : -1}
+  aria-current={id === $activeNodeId || undefined}
+  aria-selected={disabled ? undefined : selected}
+  aria-disabled={disabled}
+  class:bx--tree-node={true}
+  class:bx--tree-leaf-node={true}
+  class:bx--tree-node--active={id === $activeNodeId}
+  class:bx--tree-node--selected={selected}
+  class:bx--tree-node--disabled={disabled}
+  class:bx--tree-node--with-icon={icon}
+  on:click|stopPropagation={() => {
     if (disabled) return;
     clickNode(node);
-  }}"
-  on:keydown="{(e) => {
-    if (e.key === 'ArrowLeft' || e.key === 'ArrowRight' || e.key === 'Enter') {
+  }}
+  on:keydown={(e) => {
+    if (e.key === "ArrowLeft" || e.key === "ArrowRight" || e.key === "Enter") {
       e.stopPropagation();
     }
 
-    if (e.key === 'ArrowLeft') {
+    if (e.key === "ArrowLeft") {
       const parentNode = findParentTreeNode(ref.parentNode);
       if (parentNode) parentNode.focus();
     }
 
-    if (e.key === 'Enter' || e.key === ' ') {
+    if (e.key === "Enter" || e.key === " ") {
       e.preventDefault();
       if (disabled) return;
       clickNode(node);
     }
-  }}"
-  on:focus="{() => {
+  }}
+  on:focus={() => {
     focusNode(node);
-  }}"
+  }}
 >
-  <div bind:this="{refLabel}" class:bx--tree-node__label="{true}">
-    <svelte:component this="{icon}" class="bx--tree-node__icon" />
-    <slot node="{node}">
+  <div bind:this={refLabel} class:bx--tree-node__label={true}>
+    <svelte:component this={icon} class="bx--tree-node__icon" />
+    <slot {node}>
       {text}
     </slot>
   </div>
diff --git a/src/TreeView/TreeViewNodeList.svelte b/src/TreeView/TreeViewNodeList.svelte
index 2ebe1a98..9b4edef6 100644
--- a/src/TreeView/TreeViewNodeList.svelte
+++ b/src/TreeView/TreeViewNodeList.svelte
@@ -68,11 +68,11 @@
   {#each nodes as child (child.id)}
     {#if Array.isArray(child.nodes)}
       <svelte:self {...child} let:node>
-        <slot node="{node}" />
+        <slot {node} />
       </svelte:self>
     {:else}
       <TreeViewNode leaf {...child} let:node>
-        <slot node="{node}" />
+        <slot {node} />
       </TreeViewNode>
     {/if}
   {/each}
@@ -80,40 +80,40 @@
   {@const selected = $selectedNodeIds.includes(id)}
   <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
   <li
-    bind:this="{ref}"
+    bind:this={ref}
     role="treeitem"
-    id="{id}"
-    tabindex="{disabled ? undefined : -1}"
-    aria-current="{id === $activeNodeId || undefined}"
-    aria-selected="{disabled ? undefined : selected}"
-    aria-disabled="{disabled}"
-    class:bx--tree-node="{true}"
-    class:bx--tree-parent-node="{true}"
-    class:bx--tree-node--active="{id === $activeNodeId}"
-    class:bx--tree-node--selected="{selected}"
-    class:bx--tree-node--disabled="{disabled}"
-    class:bx--tree-node--with-icon="{icon}"
-    aria-expanded="{expanded}"
-    on:click|stopPropagation="{() => {
+    {id}
+    tabindex={disabled ? undefined : -1}
+    aria-current={id === $activeNodeId || undefined}
+    aria-selected={disabled ? undefined : selected}
+    aria-disabled={disabled}
+    class:bx--tree-node={true}
+    class:bx--tree-parent-node={true}
+    class:bx--tree-node--active={id === $activeNodeId}
+    class:bx--tree-node--selected={selected}
+    class:bx--tree-node--disabled={disabled}
+    class:bx--tree-node--with-icon={icon}
+    aria-expanded={expanded}
+    on:click|stopPropagation={() => {
       if (disabled) return;
       clickNode(node);
-    }}"
-    on:keydown="{(e) => {
+    }}
+    on:keydown={(e) => {
       if (
-        e.key === 'ArrowLeft' ||
-        e.key === 'ArrowRight' ||
-        e.key === 'Enter'
+        e.key === "ArrowLeft" ||
+        e.key === "ArrowRight" ||
+        e.key === "Enter"
       ) {
         e.stopPropagation();
       }
 
-      if (parent && e.key === 'ArrowLeft') {
+      if (parent && e.key === "ArrowLeft") {
         expanded = false;
         expandNode(node, false);
         toggleNode(node);
       }
 
-      if (parent && e.key === 'ArrowRight') {
+      if (parent && e.key === "ArrowRight") {
         if (expanded) {
           ref.lastChild.firstElementChild?.focus();
         } else {
@@ -123,7 +123,7 @@
         }
       }
 
-      if (e.key === 'Enter' || e.key === ' ') {
+      if (e.key === "Enter" || e.key === " ") {
         e.preventDefault();
         if (disabled) return;
         expanded = !expanded;
@@ -132,44 +132,44 @@
         expandNode(node, expanded);
         ref.focus();
       }
-    }}"
-    on:focus="{() => {
+    }}
+    on:focus={() => {
       focusNode(node);
-    }}"
+    }}
   >
-    <div class:bx--tree-node__label="{true}" bind:this="{refLabel}">
+    <div class:bx--tree-node__label={true} bind:this={refLabel}>
       <!-- svelte-ignore a11y-click-events-have-key-events -->
       <!-- svelte-ignore a11y-no-static-element-interactions -->
       <span
-        class:bx--tree-parent-node__toggle="{true}"
-        disabled="{disabled}"
-        on:click="{() => {
+        class:bx--tree-parent-node__toggle={true}
+        {disabled}
+        on:click={() => {
           if (disabled) return;
           expanded = !expanded;
           expandNode(node, expanded);
           toggleNode(node);
-        }}"
+        }}
       >
         <CaretDown
           class="bx--tree-parent-node__toggle-icon {expanded &&
             'bx--tree-parent-node__toggle-icon--expanded'}"
         />
       </span>
-      <span class:bx--tree-node__label__details="{true}">
-        <svelte:component this="{icon}" class="bx--tree-node__icon" />
-        <slot node="{{ ...node, selected, disabled }}" />
+      <span class:bx--tree-node__label__details={true}>
+        <svelte:component this={icon} class="bx--tree-node__icon" />
+        <slot node={{ ...node, selected, disabled }} />
       </span>
     </div>
     {#if expanded}
-      <ul role="group" class:bx--tree-node__children="{true}">
+      <ul role="group" class:bx--tree-node__children={true}>
         {#each nodes as child (child.id)}
           {#if Array.isArray(child.nodes)}
             <svelte:self {...child} let:node>
-              <slot node="{node}" />
+              <slot {node} />
             </svelte:self>
           {:else}
             <TreeViewNode leaf {...child} let:node>
-              <slot node="{node}">{node.text}</slot>
+              <slot {node}>{node.text}</slot>
             </TreeViewNode>
           {/if}
         {/each}
diff --git a/src/Truncate/Truncate.svelte b/src/Truncate/Truncate.svelte
index 465d66d8..432be1a5 100644
--- a/src/Truncate/Truncate.svelte
+++ b/src/Truncate/Truncate.svelte
@@ -4,8 +4,8 @@
 </script>
 
 <p
-  class:bx--text-truncate--end="{clamp === 'end'}"
-  class:bx--text-truncate--front="{clamp === 'front'}"
+  class:bx--text-truncate--end={clamp === "end"}
+  class:bx--text-truncate--front={clamp === "front"}
   {...$$restProps}
 >
   <slot />
diff --git a/src/Truncate/truncate.d.ts b/src/Truncate/truncate.d.ts
index 35557fc0..f0fa9967 100644
--- a/src/Truncate/truncate.d.ts
+++ b/src/Truncate/truncate.d.ts
@@ -4,7 +4,7 @@ interface TruncateOptions {
 
 export function TruncateAction(
   node: HTMLElement,
-  options?: TruncateOptions
+  options?: TruncateOptions,
 ): {
   update: (options?: TruncateOptions) => void;
 };
diff --git a/src/UIShell/Content.svelte b/src/UIShell/Content.svelte
index 598d287b..0b504265 100644
--- a/src/UIShell/Content.svelte
+++ b/src/UIShell/Content.svelte
@@ -15,9 +15,9 @@
 </script>
 
 <main
-  id="{id}"
-  class:bx--content="{true}"
-  style:margin-left="{unsetLeftMargin ? 0 : undefined}"
+  {id}
+  class:bx--content={true}
+  style:margin-left={unsetLeftMargin ? 0 : undefined}
   {...$$restProps}
 >
   <slot />
diff --git a/src/UIShell/HamburgerMenu.svelte b/src/UIShell/HamburgerMenu.svelte
index c5be0db9..671c80c4 100644
--- a/src/UIShell/HamburgerMenu.svelte
+++ b/src/UIShell/HamburgerMenu.svelte
@@ -30,16 +30,16 @@
 </script>
 
 <button
-  bind:this="{ref}"
+  bind:this={ref}
   type="button"
-  title="{ariaLabel}"
-  aria-label="{ariaLabel}"
-  class:bx--header__action="{true}"
-  class:bx--header__menu-trigger="{true}"
-  class:bx--header__menu-toggle="{true}"
+  title={ariaLabel}
+  aria-label={ariaLabel}
+  class:bx--header__action={true}
+  class:bx--header__menu-trigger={true}
+  class:bx--header__menu-toggle={true}
   {...$$restProps}
   on:click
-  on:click="{() => (isOpen = !isOpen)}"
+  on:click={() => (isOpen = !isOpen)}
 >
-  <svelte:component this="{isOpen ? iconClose : iconMenu}" size="{20}" />
+  <svelte:component this={isOpen ? iconClose : iconMenu} size={20} />
 </button>
diff --git a/src/UIShell/Header.svelte b/src/UIShell/Header.svelte
index 3574f01e..bee16773 100644
--- a/src/UIShell/Header.svelte
+++ b/src/UIShell/Header.svelte
@@ -78,26 +78,22 @@
     : "" + (uiShellAriaLabel || $$props["aria-label"] || platformName);
 </script>
 
-<svelte:window bind:innerWidth="{winWidth}" />
+<svelte:window bind:innerWidth={winWidth} />
 
-<header aria-label="{ariaLabel}" class:bx--header="{true}">
+<header aria-label={ariaLabel} class:bx--header={true}>
   <slot name="skip-to-content" />
   {#if ($shouldRenderHamburgerMenu && winWidth < expansionBreakpoint) || persistentHamburgerMenu}
-    <HamburgerMenu
-      bind:isOpen="{isSideNavOpen}"
-      iconClose="{iconClose}"
-      iconMenu="{iconMenu}"
-    />
+    <HamburgerMenu bind:isOpen={isSideNavOpen} {iconClose} {iconMenu} />
   {/if}
   <a
-    href="{href}"
-    class:bx--header__name="{true}"
-    bind:this="{ref}"
+    {href}
+    class:bx--header__name={true}
+    bind:this={ref}
     {...$$restProps}
     on:click
   >
     {#if company || $$slots.company}
-      <span class:bx--header__name--prefix="{true}"
+      <span class:bx--header__name--prefix={true}
         ><slot name="company">{company}&nbsp;</slot></span
       >
     {/if}
diff --git a/src/UIShell/HeaderAction.svelte b/src/UIShell/HeaderAction.svelte
index c614d534..b6b49676 100644
--- a/src/UIShell/HeaderAction.svelte
+++ b/src/UIShell/HeaderAction.svelte
@@ -52,7 +52,7 @@
 </script>
 
 <svelte:window
-  on:click="{({ target }) => {
+  on:click={({ target }) => {
     if (
       isOpen &&
       !ref.contains(target) &&
@@ -60,47 +60,47 @@
       !preventCloseOnClickOutside
     ) {
       isOpen = false;
-      dispatch('close');
+      dispatch("close");
     }
-  }}"
+  }}
 />
 
 <button
-  bind:this="{ref}"
+  bind:this={ref}
   type="button"
-  class:bx--header__action="{true}"
-  class:bx--header__action--active="{isOpen}"
-  class:bx--header__action--text="{text}"
+  class:bx--header__action={true}
+  class:bx--header__action--active={isOpen}
+  class:bx--header__action--text={text}
   {...$$restProps}
   on:click
-  on:click|stopPropagation="{() => {
+  on:click|stopPropagation={() => {
     isOpen = !isOpen;
-    dispatch(isOpen ? 'open' : 'close');
-  }}"
+    dispatch(isOpen ? "open" : "close");
+  }}
 >
   {#if isOpen}
     <slot name="closeIcon">
-      <svelte:component this="{closeIcon}" size="{20}" />
+      <svelte:component this={closeIcon} size={20} />
     </slot>
   {:else}
     <slot name="icon">
-      <svelte:component this="{icon}" size="{20}" />
+      <svelte:component this={icon} size={20} />
     </slot>
   {/if}
   <slot name="text">
-    {#if text}<span class:bx--header__action-text="{true}">{text}</span>{/if}
+    {#if text}<span class:bx--header__action-text={true}>{text}</span>{/if}
   </slot>
 </button>
 {#if isOpen}
   <div
-    bind:this="{refPanel}"
-    class:bx--header-panel="{true}"
-    class:bx--header-panel--expanded="{true}"
+    bind:this={refPanel}
+    class:bx--header-panel={true}
+    class:bx--header-panel--expanded={true}
     style:overflow-y="auto"
-    transition:slide|local="{{
+    transition:slide|local={{
       ...transition,
       duration: transition === false ? 0 : transition.duration,
-    }}"
+    }}
   >
     <slot />
   </div>
diff --git a/src/UIShell/HeaderActionLink.svelte b/src/UIShell/HeaderActionLink.svelte
index 9e3ef4c6..b83e69df 100644
--- a/src/UIShell/HeaderActionLink.svelte
+++ b/src/UIShell/HeaderActionLink.svelte
@@ -19,16 +19,16 @@
 </script>
 
 <a
-  bind:this="{ref}"
-  class:bx--header__action="{true}"
-  class:bx--header__action--active="{linkIsActive}"
-  href="{href}"
-  rel="{$$restProps.target === '_blank' ? 'noopener noreferrer' : undefined}"
+  bind:this={ref}
+  class:bx--header__action={true}
+  class:bx--header__action--active={linkIsActive}
+  {href}
+  rel={$$restProps.target === "_blank" ? "noopener noreferrer" : undefined}
   {...$$restProps}
   on:click
 >
   <slot name="icon">
-    <svelte:component this="{icon}" size="{20}" />
+    <svelte:component this={icon} size={20} />
   </slot>
 </a>
 
diff --git a/src/UIShell/HeaderGlobalAction.svelte b/src/UIShell/HeaderGlobalAction.svelte
index 13e220ee..2cf674f2 100644
--- a/src/UIShell/HeaderGlobalAction.svelte
+++ b/src/UIShell/HeaderGlobalAction.svelte
@@ -28,6 +28,6 @@
     .join(" ");
 </script>
 
-<Button bind:ref {...$$restProps} class="{buttonClass}" on:click>
-  <svelte:component this="{icon}" slot="icon" size="{20}" />
+<Button bind:ref {...$$restProps} class={buttonClass} on:click>
+  <svelte:component this={icon} slot="icon" size={20} />
 </Button>
diff --git a/src/UIShell/HeaderNav.svelte b/src/UIShell/HeaderNav.svelte
index 2c86579c..0c2dc451 100644
--- a/src/UIShell/HeaderNav.svelte
+++ b/src/UIShell/HeaderNav.svelte
@@ -5,9 +5,9 @@
   };
 </script>
 
-<nav {...props} class:bx--header__nav="{true}" {...$$restProps}>
+<nav {...props} class:bx--header__nav={true} {...$$restProps}>
   <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
-  <ul {...props} role="menubar" class:bx--header__menu-bar="{true}">
+  <ul {...props} role="menubar" class:bx--header__menu-bar={true}>
     <slot />
   </ul>
 </nav>
diff --git a/src/UIShell/HeaderNavItem.svelte b/src/UIShell/HeaderNavItem.svelte
index 5b9ba073..9d37f9fb 100644
--- a/src/UIShell/HeaderNavItem.svelte
+++ b/src/UIShell/HeaderNavItem.svelte
@@ -39,13 +39,13 @@
 
 <li role="none">
   <a
-    bind:this="{ref}"
+    bind:this={ref}
     role="menuitem"
     tabindex="0"
-    href="{href}"
-    rel="{$$restProps.target === '_blank' ? 'noopener noreferrer' : undefined}"
-    class:bx--header__menu-item="{true}"
-    aria-current="{isSelected ? 'page' : undefined}"
+    {href}
+    rel={$$restProps.target === "_blank" ? "noopener noreferrer" : undefined}
+    class:bx--header__menu-item={true}
+    aria-current={isSelected ? "page" : undefined}
     {...$$restProps}
     on:click
     on:mouseover
@@ -55,12 +55,12 @@
     on:keydown
     on:focus
     on:blur
-    on:blur="{() => {
+    on:blur={() => {
       if (selectedItemIds.indexOf(id) === selectedItemIds.length - 1) {
         ctx?.closeMenu();
       }
-    }}"
+    }}
   >
-    <span class:bx--text-truncate--end="{true}"><slot>{text}</slot></span>
+    <span class:bx--text-truncate--end={true}><slot>{text}</slot></span>
   </a>
 </li>
diff --git a/src/UIShell/HeaderNavMenu.svelte b/src/UIShell/HeaderNavMenu.svelte
index 0ec7ef37..a395a2e8 100644
--- a/src/UIShell/HeaderNavMenu.svelte
+++ b/src/UIShell/HeaderNavMenu.svelte
@@ -40,49 +40,49 @@
 </script>
 
 <svelte:window
-  on:click="{({ target }) => {
+  on:click={({ target }) => {
     if (!ref.contains(target)) {
       expanded = false;
     }
-  }}"
+  }}
 />
 
 <li
   role="none"
-  class:bx--header__submenu="{true}"
-  class:bx--header__submenu--current="{isCurrentSubmenu}"
-  on:click="{(e) => {
+  class:bx--header__submenu={true}
+  class:bx--header__submenu--current={isCurrentSubmenu}
+  on:click={(e) => {
     if (!menuRef.contains(e.target)) {
       e.preventDefault();
     }
     expanded = !expanded;
-  }}"
-  on:keydown="{(e) => {
-    if (e.key === 'Enter') {
+  }}
+  on:keydown={(e) => {
+    if (e.key === "Enter") {
       e.stopPropagation();
       expanded = !expanded;
     }
-  }}"
+  }}
 >
   <a
-    bind:this="{ref}"
+    bind:this={ref}
     role="menuitem"
     tabindex="0"
     aria-haspopup="menu"
-    aria-expanded="{expanded}"
-    aria-label="{text}"
-    href="{href}"
-    class:bx--header__menu-item="{true}"
-    class:bx--header__menu-title="{true}"
-    style:z-index="{1}"
+    aria-expanded={expanded}
+    aria-label={text}
+    {href}
+    class:bx--header__menu-item={true}
+    class:bx--header__menu-title={true}
+    style:z-index={1}
     {...$$restProps}
     on:keydown
-    on:keydown="{(e) => {
-      if (e.key === ' ') e.preventDefault();
-      if (e.key === 'Enter' || e.key === ' ') {
+    on:keydown={(e) => {
+      if (e.key === " ") e.preventDefault();
+      if (e.key === "Enter" || e.key === " ") {
         expanded = !expanded;
       }
-    }}"
+    }}
     on:click|preventDefault
     on:mouseover
     on:mouseenter
@@ -96,10 +96,10 @@
   </a>
   <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
   <ul
-    bind:this="{menuRef}"
+    bind:this={menuRef}
     role="menu"
-    aria-label="{text}"
-    class:bx--header__menu="{true}"
+    aria-label={text}
+    class:bx--header__menu={true}
   >
     <slot />
   </ul>
diff --git a/src/UIShell/HeaderPanelDivider.svelte b/src/UIShell/HeaderPanelDivider.svelte
index 93dd3070..6e2d33e2 100644
--- a/src/UIShell/HeaderPanelDivider.svelte
+++ b/src/UIShell/HeaderPanelDivider.svelte
@@ -1,9 +1,9 @@
 {#if $$slots.default}
-  <li class:bx--header-panel-divider="{true}">
+  <li class:bx--header-panel-divider={true}>
     <slot />
   </li>
 {/if}
-<hr class:bx--switcher__item--divider="{true}" />
+<hr class:bx--switcher__item--divider={true} />
 
 <style>
   /**
diff --git a/src/UIShell/HeaderPanelLink.svelte b/src/UIShell/HeaderPanelLink.svelte
index e2dc9584..7cbbcc95 100644
--- a/src/UIShell/HeaderPanelLink.svelte
+++ b/src/UIShell/HeaderPanelLink.svelte
@@ -9,12 +9,12 @@
   export let ref = null;
 </script>
 
-<li class:bx--switcher__item="{true}">
+<li class:bx--switcher__item={true}>
   <a
-    bind:this="{ref}"
-    href="{href}"
-    rel="{$$restProps.target === '_blank' ? 'noopener noreferrer' : undefined}"
-    class:bx--switcher__item-link="{true}"
+    bind:this={ref}
+    {href}
+    rel={$$restProps.target === "_blank" ? "noopener noreferrer" : undefined}
+    class:bx--switcher__item-link={true}
     {...$$restProps}
     on:click
   >
diff --git a/src/UIShell/HeaderPanelLinks.svelte b/src/UIShell/HeaderPanelLinks.svelte
index 59859153..1f10ab39 100644
--- a/src/UIShell/HeaderPanelLinks.svelte
+++ b/src/UIShell/HeaderPanelLinks.svelte
@@ -1,3 +1,3 @@
-<ul class:bx--switcher__item="{true}">
+<ul class:bx--switcher__item={true}>
   <slot />
 </ul>
diff --git a/src/UIShell/HeaderSearch.svelte b/src/UIShell/HeaderSearch.svelte
index ac7f089d..5057e149 100644
--- a/src/UIShell/HeaderSearch.svelte
+++ b/src/UIShell/HeaderSearch.svelte
@@ -55,66 +55,66 @@
 </script>
 
 <svelte:window
-  on:mouseup="{({ target }) => {
+  on:mouseup={({ target }) => {
     if (active && !refSearch.contains(target)) active = false;
-  }}"
+  }}
 />
 
 <div
-  bind:this="{refSearch}"
-  class:bx--header__search="{true}"
+  bind:this={refSearch}
+  class:bx--header__search={true}
   role="search"
-  class:bx--header__search--active="{active}"
+  class:bx--header__search--active={active}
 >
   <label
-    class:bx--header__search-label="{true}"
+    class:bx--header__search-label={true}
     for="search-input"
     id="search-label">Search</label
   >
   <div
-    class:bx--header__search-menu="{true}"
+    class:bx--header__search-menu={true}
     aria-owns="search-menu"
     aria-haspopup="menu"
   >
     <button
       type="button"
       aria-label="Search"
-      aria-expanded="{active}"
-      tabindex="{active ? '-1' : '0'}"
-      class:bx--header-search-button="{true}"
-      class:bx--header__action="{true}"
-      class:bx--header-search-button--disabled="{active}"
-      on:click="{() => {
+      aria-expanded={active}
+      tabindex={active ? "-1" : "0"}
+      class:bx--header-search-button={true}
+      class:bx--header__action={true}
+      class:bx--header-search-button--disabled={active}
+      on:click={() => {
         active = true;
-      }}"
+      }}
     >
-      <IconSearch size="{20}" title="Search" />
+      <IconSearch size={20} title="Search" />
     </button>
     <input
-      bind:this="{ref}"
+      bind:this={ref}
       type="text"
       autocomplete="off"
       placeholder="Search..."
-      tabindex="{active ? '0' : '-1'}"
-      class:bx--header__search-input="{true}"
-      class:bx--header__search--active="{active}"
+      tabindex={active ? "0" : "-1"}
+      class:bx--header__search-input={true}
+      class:bx--header__search--active={active}
       {...$$restProps}
       id="search-input"
       aria-autocomplete="list"
       aria-controls="search-menu"
-      aria-activedescendant="{selectedId}"
+      aria-activedescendant={selectedId}
       bind:value
       on:change
       on:input
       on:focus
       on:blur
       on:keydown
-      on:keydown="{(e) => {
+      on:keydown={(e) => {
         switch (e.key) {
-          case 'Enter':
+          case "Enter":
             selectResult();
             break;
-          case 'ArrowDown':
+          case "ArrowDown":
             e.preventDefault();
             if (selectedResultIndex === results.length - 1) {
               selectedResultIndex = 0;
@@ -122,7 +122,7 @@
               selectedResultIndex += 1;
             }
             break;
-          case 'ArrowUp':
+          case "ArrowUp":
             e.preventDefault();
             if (selectedResultIndex === 0) {
               selectedResultIndex = results.length - 1;
@@ -130,34 +130,34 @@
               selectedResultIndex -= 1;
             }
             break;
-          case 'Escape':
-            if (value === '') {
+          case "Escape":
+            if (value === "") {
               // If the search bar is empty, deactivate the input.
               active = false;
             }
 
             // Reset the search query but keep the search bar active.
             // Do not dispatch "clear" event as that should fire only on the "x" button.
-            value = '';
+            value = "";
             selectedResultIndex = 0;
             break;
         }
-      }}"
+      }}
       on:paste
     />
     <button
       type="button"
       aria-label="Clear search"
-      tabindex="{active ? '0' : '-1'}"
-      class:bx--header__action="{true}"
-      class:bx--header-search-button="{true}"
-      class:bx--header-search-button--hidden="{!active}"
-      on:click="{() => {
+      tabindex={active ? "0" : "-1"}
+      class:bx--header__action={true}
+      class:bx--header-search-button={true}
+      class:bx--header-search-button--hidden={!active}
+      on:click={() => {
         reset();
-        dispatch('clear');
-      }}"
+        dispatch("clear");
+      }}
     >
-      <Close size="{20}" title="Close" />
+      <Close size={20} title="Close" />
     </button>
   </div>
 
@@ -167,7 +167,7 @@
       aria-labelledby="search-label"
       role="menu"
       id="search-menu"
-      class:bx--header-search-menu="{true}"
+      class:bx--header-search-menu={true}
     >
       {#each results as result, i}
         <li role="none">
@@ -175,20 +175,20 @@
             tabindex="-1"
             id="search-menuitem-{i}"
             role="menuitem"
-            href="{result.href}"
-            class:bx--header-search-menu-item="{true}"
-            class:bx--header-search-menu-item--selected="{selectedId ===
-              `search-menuitem-${i}`}"
-            on:click|preventDefault="{async () => {
+            href={result.href}
+            class:bx--header-search-menu-item={true}
+            class:bx--header-search-menu-item--selected={selectedId ===
+              `search-menuitem-${i}`}
+            on:click|preventDefault={async () => {
               selectedResultIndex = i;
               await tick();
               selectResult();
-            }}"
+            }}
           >
-            <slot result="{result}" index="{i}">
+            <slot {result} index={i}>
               {result.text}
               {#if result.description}<span
-                  class:bx--header-search-menu-description="{true}"
+                  class:bx--header-search-menu-description={true}
                   >– {result.description}</span
                 >{/if}
             </slot>
@@ -222,7 +222,8 @@
     height: 3rem;
     background-color: #393939;
     color: #fff;
-    transition: max-width 0.11s cubic-bezier(0.2, 0, 0.38, 0.9),
+    transition:
+      max-width 0.11s cubic-bezier(0.2, 0, 0.38, 0.9),
       background 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
   }
 
@@ -272,7 +273,8 @@
     padding: 0;
     flex-shrink: 0;
     opacity: 1;
-    transition: background-color 0.11s cubic-bezier(0.2, 0, 0.38, 0.9),
+    transition:
+      background-color 0.11s cubic-bezier(0.2, 0, 0.38, 0.9),
       opacity 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
   }
 
diff --git a/src/UIShell/HeaderUtilities.svelte b/src/UIShell/HeaderUtilities.svelte
index c9942f4e..460c8c70 100644
--- a/src/UIShell/HeaderUtilities.svelte
+++ b/src/UIShell/HeaderUtilities.svelte
@@ -1,3 +1,3 @@
-<div class:bx--header__global="{true}">
+<div class:bx--header__global={true}>
   <slot />
 </div>
diff --git a/src/UIShell/SideNav.svelte b/src/UIShell/SideNav.svelte
index 7ba772b3..7f6fd33e 100644
--- a/src/UIShell/SideNav.svelte
+++ b/src/UIShell/SideNav.svelte
@@ -52,32 +52,32 @@
   });
 </script>
 
-<svelte:window bind:innerWidth="{winWidth}" />
+<svelte:window bind:innerWidth={winWidth} />
 
 {#if !fixed}
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
-    on:click="{() => {
-      dispatch('click:overlay');
+    on:click={() => {
+      dispatch("click:overlay");
       isOpen = false;
-    }}"
-    class:bx--side-nav__overlay="{true}"
-    class:bx--side-nav__overlay-active="{isOpen}"
-    style:z-index="{isOpen ? 6000 : undefined}"
+    }}
+    class:bx--side-nav__overlay={true}
+    class:bx--side-nav__overlay-active={isOpen}
+    style:z-index={isOpen ? 6000 : undefined}
   ></div>
 {/if}
 <nav
-  aria-hidden="{!isOpen}"
-  aria-label="{ariaLabel}"
-  class:bx--side-nav__navigation="{true}"
-  class:bx--side-nav="{true}"
-  class:bx--side-nav--ux="{true}"
-  class:bx--side-nav--expanded="{rail && winWidth >= expansionBreakpoint
+  aria-hidden={!isOpen}
+  aria-label={ariaLabel}
+  class:bx--side-nav__navigation={true}
+  class:bx--side-nav={true}
+  class:bx--side-nav--ux={true}
+  class:bx--side-nav--expanded={rail && winWidth >= expansionBreakpoint
     ? false
-    : isOpen}"
-  class:bx--side-nav--collapsed="{!isOpen && !rail}"
-  class:bx--side-nav--rail="{rail}"
+    : isOpen}
+  class:bx--side-nav--collapsed={!isOpen && !rail}
+  class:bx--side-nav--rail={rail}
   {...$$restProps}
 >
   <slot />
diff --git a/src/UIShell/SideNavDivider.svelte b/src/UIShell/SideNavDivider.svelte
index 26284398..5fc5cae0 100644
--- a/src/UIShell/SideNavDivider.svelte
+++ b/src/UIShell/SideNavDivider.svelte
@@ -1 +1 @@
-<li role="separator" class:bx--side-nav__divider="{true}" {...$$restProps}></li>
+<li role="separator" class:bx--side-nav__divider={true} {...$$restProps}></li>
diff --git a/src/UIShell/SideNavItems.svelte b/src/UIShell/SideNavItems.svelte
index 886b66d4..ca3804ff 100644
--- a/src/UIShell/SideNavItems.svelte
+++ b/src/UIShell/SideNavItems.svelte
@@ -1,3 +1,3 @@
-<ul class:bx--side-nav__items="{true}">
+<ul class:bx--side-nav__items={true}>
   <slot />
 </ul>
diff --git a/src/UIShell/SideNavLink.svelte b/src/UIShell/SideNavLink.svelte
index 6bd4c9c1..c7df3b45 100644
--- a/src/UIShell/SideNavLink.svelte
+++ b/src/UIShell/SideNavLink.svelte
@@ -24,28 +24,28 @@
   export let ref = null;
 </script>
 
-<li class:bx--side-nav__item="{true}">
+<li class:bx--side-nav__item={true}>
   <a
-    bind:this="{ref}"
-    aria-current="{isSelected ? 'page' : undefined}"
-    href="{href}"
-    rel="{$$restProps.target === '_blank' ? 'noopener noreferrer' : undefined}"
-    class:bx--side-nav__link="{true}"
-    class:bx--side-nav__link--current="{isSelected}"
+    bind:this={ref}
+    aria-current={isSelected ? "page" : undefined}
+    {href}
+    rel={$$restProps.target === "_blank" ? "noopener noreferrer" : undefined}
+    class:bx--side-nav__link={true}
+    class:bx--side-nav__link--current={isSelected}
     {...$$restProps}
     on:click
   >
     {#if $$slots.icon || icon}
       <div
-        class:bx--side-nav__icon="{true}"
-        class:bx--side-nav__icon--small="{true}"
+        class:bx--side-nav__icon={true}
+        class:bx--side-nav__icon--small={true}
       >
         <slot name="icon">
-          <svelte:component this="{icon}" />
+          <svelte:component this={icon} />
         </slot>
       </div>
     {/if}
-    <span class:bx--side-nav__link-text="{true}">
+    <span class:bx--side-nav__link-text={true}>
       <slot>
         {text}
       </slot>
diff --git a/src/UIShell/SideNavMenu.svelte b/src/UIShell/SideNavMenu.svelte
index d1e7b6a5..92dc24b9 100644
--- a/src/UIShell/SideNavMenu.svelte
+++ b/src/UIShell/SideNavMenu.svelte
@@ -20,30 +20,30 @@
   import ChevronDown from "../icons/ChevronDown.svelte";
 </script>
 
-<li class:bx--side-nav__item="{true}" class:bx--side-nav__item--icon="{icon}">
+<li class:bx--side-nav__item={true} class:bx--side-nav__item--icon={icon}>
   <button
     type="button"
-    bind:this="{ref}"
-    aria-expanded="{expanded}"
-    class:bx--side-nav__submenu="{true}"
+    bind:this={ref}
+    aria-expanded={expanded}
+    class:bx--side-nav__submenu={true}
     {...$$restProps}
     on:click
-    on:click="{() => {
+    on:click={() => {
       expanded = !expanded;
-    }}"
+    }}
   >
     {#if $$slots.icon || icon}
-      <div class:bx--side-nav__icon="{true}">
+      <div class:bx--side-nav__icon={true}>
         <slot name="icon">
-          <svelte:component this="{icon}" />
+          <svelte:component this={icon} />
         </slot>
       </div>
     {/if}
-    <span class:bx--side-nav__submenu-title="{true}">{text}</span>
+    <span class:bx--side-nav__submenu-title={true}>{text}</span>
     <div
-      class:bx--side-nav__icon="{true}"
-      class:bx--side-nav__icon--small="{true}"
-      class:bx--side-nav__submenu-chevron="{true}"
+      class:bx--side-nav__icon={true}
+      class:bx--side-nav__icon--small={true}
+      class:bx--side-nav__submenu-chevron={true}
     >
       <ChevronDown />
     </div>
@@ -51,8 +51,8 @@
   <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
   <ul
     role="menu"
-    class:bx--side-nav__menu="{true}"
-    style:max-height="{expanded ? "none" : undefined}"
+    class:bx--side-nav__menu={true}
+    style:max-height={expanded ? "none" : undefined}
   >
     <slot />
   </ul>
diff --git a/src/UIShell/SideNavMenuItem.svelte b/src/UIShell/SideNavMenuItem.svelte
index cfb73636..6798d684 100644
--- a/src/UIShell/SideNavMenuItem.svelte
+++ b/src/UIShell/SideNavMenuItem.svelte
@@ -18,15 +18,15 @@
   export let ref = null;
 </script>
 
-<li class:bx--side-nav__menu-item="{true}">
+<li class:bx--side-nav__menu-item={true}>
   <a
-    bind:this="{ref}"
-    aria-current="{isSelected ? 'page' : undefined}"
-    href="{href}"
-    class:bx--side-nav__link="{true}"
+    bind:this={ref}
+    aria-current={isSelected ? "page" : undefined}
+    {href}
+    class:bx--side-nav__link={true}
     {...$$restProps}
     on:click
   >
-    <span class:bx--side-nav__link-text="{true}"><slot>{text}</slot></span>
+    <span class:bx--side-nav__link-text={true}><slot>{text}</slot></span>
   </a>
 </li>
diff --git a/src/UIShell/SkipToContent.svelte b/src/UIShell/SkipToContent.svelte
index cbba79ce..bc5db761 100644
--- a/src/UIShell/SkipToContent.svelte
+++ b/src/UIShell/SkipToContent.svelte
@@ -6,12 +6,6 @@
   export let tabindex = "0";
 </script>
 
-<a
-  href="{href}"
-  tabindex="{tabindex}"
-  class:bx--skip-to-content="{true}"
-  {...$$restProps}
-  on:click
->
+<a {href} {tabindex} class:bx--skip-to-content={true} {...$$restProps} on:click>
   <slot>Skip to main content</slot>
 </a>
diff --git a/src/UnorderedList/UnorderedList.svelte b/src/UnorderedList/UnorderedList.svelte
index e2d53e54..d3254f64 100644
--- a/src/UnorderedList/UnorderedList.svelte
+++ b/src/UnorderedList/UnorderedList.svelte
@@ -9,9 +9,9 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <ul
-  class:bx--list--unordered="{true}"
-  class:bx--list--nested="{nested}"
-  class:bx--list--expressive="{expressive}"
+  class:bx--list--unordered={true}
+  class:bx--list--nested={nested}
+  class:bx--list--expressive={expressive}
   {...$$restProps}
   on:click
   on:mouseover
diff --git a/src/icons/Add.svelte b/src/icons/Add.svelte
index 6685769d..4af39323 100644
--- a/src/icons/Add.svelte
+++ b/src/icons/Add.svelte
@@ -16,8 +16,8 @@
   viewBox="0 0 32 32"
   fill="currentColor"
   preserveAspectRatio="xMidYMid meet"
-  width="{size}"
-  height="{size}"
+  width={size}
+  height={size}
   {...attributes}
   {...$$restProps}
 >
diff --git a/src/icons/ArrowUp.svelte b/src/icons/ArrowUp.svelte
index 04f928f9..fe33675c 100644
--- a/src/icons/ArrowUp.svelte
+++ b/src/icons/ArrowUp.svelte
@@ -16,8 +16,8 @@
   viewBox="0 0 32 32"
   fill="currentColor"
   preserveAspectRatio="xMidYMid meet"
-  width="{size}"
-  height="{size}"
+  width={size}
+  height={size}
   {...attributes}
   {...$$restProps}
 >
diff --git a/src/icons/ArrowsVertical.svelte b/src/icons/ArrowsVertical.svelte
index 00f42e3f..15ef5951 100644
--- a/src/icons/ArrowsVertical.svelte
+++ b/src/icons/ArrowsVertical.svelte
@@ -16,8 +16,8 @@
   viewBox="0 0 32 32"
   fill="currentColor"
   preserveAspectRatio="xMidYMid meet"
-  width="{size}"
-  height="{size}"
+  width={size}
+  height={size}
   {...attributes}
   {...$$restProps}
 >
diff --git a/src/icons/Calendar.svelte b/src/icons/Calendar.svelte
index 650feb03..7c60cb9d 100644
--- a/src/icons/Calendar.svelte
+++ b/src/icons/Calendar.svelte
@@ -16,8 +16,8 @@
   viewBox="0 0 32 32"
   fill="currentColor"
   preserveAspectRatio="xMidYMid meet"
-  width="{size}"
-  height="{size}"
+  width={size}
+  height={size}
   {...attributes}
   {...$$restProps}
 >
diff --git a/src/icons/CaretDown.svelte b/src/icons/CaretDown.svelte
index 329c5173..7e552f21 100644
--- a/src/icons/CaretDown.svelte
+++ b/src/icons/CaretDown.svelte
@@ -16,8 +16,8 @@
   viewBox="0 0 32 32"
   fill="currentColor"
   preserveAspectRatio="xMidYMid meet"
-  width="{size}"
-  height="{size}"
+  width={size}
+  height={size}
   {...attributes}
   {...$$restProps}
 >
diff --git a/src/icons/CaretLeft.svelte b/src/icons/CaretLeft.svelte
index 19d8e0c8..dd6a41e8 100644
--- a/src/icons/CaretLeft.svelte
+++ b/src/icons/CaretLeft.svelte
@@ -16,8 +16,8 @@
   viewBox="0 0 32 32"
   fill="currentColor"
   preserveAspectRatio="xMidYMid meet"
-  width="{size}"
-  height="{size}"
+  width={size}
+  height={size}
   {...attributes}
   {...$$restProps}
 >
diff --git a/src/icons/CaretRight.svelte b/src/icons/CaretRight.svelte
index f307e3f9..81b4c27e 100644
--- a/src/icons/CaretRight.svelte
+++ b/src/icons/CaretRight.svelte
@@ -16,8 +16,8 @@
   viewBox="0 0 32 32"
   fill="currentColor"
   preserveAspectRatio="xMidYMid meet"
-  width="{size}"
-  height="{size}"
+  width={size}
+  height={size}
   {...attributes}
   {...$$restProps}
 >
diff --git a/src/icons/Checkmark.svelte b/src/icons/Checkmark.svelte
index 50181d20..3d68e9a3 100644
--- a/src/icons/Checkmark.svelte
+++ b/src/icons/Checkmark.svelte
@@ -16,8 +16,8 @@
   viewBox="0 0 32 32"
   fill="currentColor"
   preserveAspectRatio="xMidYMid meet"
-  width="{size}"
-  height="{size}"
+  width={size}
+  height={size}
   {...attributes}
   {...$$restProps}
 >
diff --git a/src/icons/CheckmarkFilled.svelte b/src/icons/CheckmarkFilled.svelte
index 79892183..fafb50b2 100644
--- a/src/icons/CheckmarkFilled.svelte
+++ b/src/icons/CheckmarkFilled.svelte
@@ -16,8 +16,8 @@
   viewBox="0 0 32 32"
   fill="currentColor"
   preserveAspectRatio="xMidYMid meet"
-  width="{size}"
-  height="{size}"
+  width={size}
+  height={size}
   {...attributes}
   {...$$restProps}
 >
@@ -27,5 +27,6 @@
   ></path><path
     fill="none"
     d="M14 21.591L9 16.591 10.591 15 14 18.409 21.41 11 23.005 12.585 14 21.591z"
-    data-icon-path="inner-path"></path>
+    data-icon-path="inner-path"
+  ></path>
 </svg>
diff --git a/src/icons/CheckmarkOutline.svelte b/src/icons/CheckmarkOutline.svelte
index 66eddcb9..549ee5d3 100644
--- a/src/icons/CheckmarkOutline.svelte
+++ b/src/icons/CheckmarkOutline.svelte
@@ -16,8 +16,8 @@
   viewBox="0 0 32 32"
   fill="currentColor"
   preserveAspectRatio="xMidYMid meet"
-  width="{size}"
-  height="{size}"
+  width={size}
+  height={size}
   {...attributes}
   {...$$restProps}
 >
diff --git a/src/icons/ChevronDown.svelte b/src/icons/ChevronDown.svelte
index 94b2f64c..d5f54c3e 100644
--- a/src/icons/ChevronDown.svelte
+++ b/src/icons/ChevronDown.svelte
@@ -16,8 +16,8 @@
   viewBox="0 0 32 32"
   fill="currentColor"
   preserveAspectRatio="xMidYMid meet"
-  width="{size}"
-  height="{size}"
+  width={size}
+  height={size}
   {...attributes}
   {...$$restProps}
 >
diff --git a/src/icons/ChevronRight.svelte b/src/icons/ChevronRight.svelte
index e573bf9c..aea4fb8a 100644
--- a/src/icons/ChevronRight.svelte
+++ b/src/icons/ChevronRight.svelte
@@ -16,8 +16,8 @@
   viewBox="0 0 32 32"
   fill="currentColor"
   preserveAspectRatio="xMidYMid meet"
-  width="{size}"
-  height="{size}"
+  width={size}
+  height={size}
   {...attributes}
   {...$$restProps}
 >
diff --git a/src/icons/CircleDash.svelte b/src/icons/CircleDash.svelte
index d9a6f256..da27d0f0 100644
--- a/src/icons/CircleDash.svelte
+++ b/src/icons/CircleDash.svelte
@@ -16,8 +16,8 @@
   viewBox="0 0 32 32"
   fill="currentColor"
   preserveAspectRatio="xMidYMid meet"
-  width="{size}"
-  height="{size}"
+  width={size}
+  height={size}
   {...attributes}
   {...$$restProps}
 >
diff --git a/src/icons/Close.svelte b/src/icons/Close.svelte
index 3c1cdc35..907a02dc 100644
--- a/src/icons/Close.svelte
+++ b/src/icons/Close.svelte
@@ -16,8 +16,8 @@
   viewBox="0 0 32 32"
   fill="currentColor"
   preserveAspectRatio="xMidYMid meet"
-  width="{size}"
-  height="{size}"
+  width={size}
+  height={size}
   {...attributes}
   {...$$restProps}
 >
diff --git a/src/icons/Copy.svelte b/src/icons/Copy.svelte
index 4407ed6a..40dfc97f 100644
--- a/src/icons/Copy.svelte
+++ b/src/icons/Copy.svelte
@@ -16,8 +16,8 @@
   viewBox="0 0 32 32"
   fill="currentColor"
   preserveAspectRatio="xMidYMid meet"
-  width="{size}"
-  height="{size}"
+  width={size}
+  height={size}
   {...attributes}
   {...$$restProps}
 >
diff --git a/src/icons/EditOff.svelte b/src/icons/EditOff.svelte
index ef7c2c07..4bb6c0a8 100644
--- a/src/icons/EditOff.svelte
+++ b/src/icons/EditOff.svelte
@@ -16,8 +16,8 @@
   viewBox="0 0 32 32"
   fill="currentColor"
   preserveAspectRatio="xMidYMid meet"
-  width="{size}"
-  height="{size}"
+  width={size}
+  height={size}
   {...attributes}
   {...$$restProps}
 >
diff --git a/src/icons/ErrorFilled.svelte b/src/icons/ErrorFilled.svelte
index b64cbcf4..0ead6512 100644
--- a/src/icons/ErrorFilled.svelte
+++ b/src/icons/ErrorFilled.svelte
@@ -16,8 +16,8 @@
   viewBox="0 0 32 32"
   fill="currentColor"
   preserveAspectRatio="xMidYMid meet"
-  width="{size}"
-  height="{size}"
+  width={size}
+  height={size}
   {...attributes}
   {...$$restProps}
 >
@@ -26,7 +26,8 @@
     fill="none"
     d="M14.9 7.2H17.1V24.799H14.9z"
     data-icon-path="inner-path"
-    transform="rotate(-45 16 16)"></path><path
+    transform="rotate(-45 16 16)"
+  ></path><path
     d="M16,2A13.914,13.914,0,0,0,2,16,13.914,13.914,0,0,0,16,30,13.914,13.914,0,0,0,30,16,13.914,13.914,0,0,0,16,2Zm5.4449,21L9,10.5557,10.5557,9,23,21.4448Z"
   ></path>
 </svg>
diff --git a/src/icons/IconSearch.svelte b/src/icons/IconSearch.svelte
index f008ae98..d9c04bd1 100644
--- a/src/icons/IconSearch.svelte
+++ b/src/icons/IconSearch.svelte
@@ -16,8 +16,8 @@
   viewBox="0 0 32 32"
   fill="currentColor"
   preserveAspectRatio="xMidYMid meet"
-  width="{size}"
-  height="{size}"
+  width={size}
+  height={size}
   {...attributes}
   {...$$restProps}
 >
diff --git a/src/icons/Incomplete.svelte b/src/icons/Incomplete.svelte
index bfca384d..8da36b5b 100644
--- a/src/icons/Incomplete.svelte
+++ b/src/icons/Incomplete.svelte
@@ -16,8 +16,8 @@
   viewBox="0 0 32 32"
   fill="currentColor"
   preserveAspectRatio="xMidYMid meet"
-  width="{size}"
-  height="{size}"
+  width={size}
+  height={size}
   {...attributes}
   {...$$restProps}
 >
diff --git a/src/icons/Information.svelte b/src/icons/Information.svelte
index f14233db..69268293 100644
--- a/src/icons/Information.svelte
+++ b/src/icons/Information.svelte
@@ -16,8 +16,8 @@
   viewBox="0 0 32 32"
   fill="currentColor"
   preserveAspectRatio="xMidYMid meet"
-  width="{size}"
-  height="{size}"
+  width={size}
+  height={size}
   {...attributes}
   {...$$restProps}
 >
diff --git a/src/icons/InformationFilled.svelte b/src/icons/InformationFilled.svelte
index c29c9a1b..00ad6c1d 100644
--- a/src/icons/InformationFilled.svelte
+++ b/src/icons/InformationFilled.svelte
@@ -16,8 +16,8 @@
   viewBox="0 0 32 32"
   fill="currentColor"
   preserveAspectRatio="xMidYMid meet"
-  width="{size}"
-  height="{size}"
+  width={size}
+  height={size}
   {...attributes}
   {...$$restProps}
 >
@@ -25,7 +25,8 @@
   <path
     fill="none"
     d="M16,8a1.5,1.5,0,1,1-1.5,1.5A1.5,1.5,0,0,1,16,8Zm4,13.875H17.125v-8H13v2.25h1.875v5.75H12v2.25h8Z"
-    data-icon-path="inner-path"></path><path
+    data-icon-path="inner-path"
+  ></path><path
     d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,6a1.5,1.5,0,1,1-1.5,1.5A1.5,1.5,0,0,1,16,8Zm4,16.125H12v-2.25h2.875v-5.75H13v-2.25h4.125v8H20Z"
   ></path>
 </svg>
diff --git a/src/icons/InformationSquareFilled.svelte b/src/icons/InformationSquareFilled.svelte
index f682cfef..76f3ecb4 100644
--- a/src/icons/InformationSquareFilled.svelte
+++ b/src/icons/InformationSquareFilled.svelte
@@ -16,8 +16,8 @@
   viewBox="0 0 32 32"
   fill="currentColor"
   preserveAspectRatio="xMidYMid meet"
-  width="{size}"
-  height="{size}"
+  width={size}
+  height={size}
   {...attributes}
   {...$$restProps}
 >
@@ -25,7 +25,8 @@
   <path
     fill="none"
     d="M16,8a1.5,1.5,0,1,1-1.5,1.5A1.5,1.5,0,0,1,16,8Zm4,13.875H17.125v-8H13v2.25h1.875v5.75H12v2.25h8Z"
-    data-icon-path="inner-path"></path><path
+    data-icon-path="inner-path"
+  ></path><path
     d="M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM16,8a1.5,1.5,0,1,1-1.5,1.5A1.5,1.5,0,0,1,16,8Zm4,16.125H12v-2.25h2.875v-5.75H13v-2.25h4.125v8H20Z"
   ></path>
 </svg>
diff --git a/src/icons/Launch.svelte b/src/icons/Launch.svelte
index 89133eb2..ddda8cb9 100644
--- a/src/icons/Launch.svelte
+++ b/src/icons/Launch.svelte
@@ -16,8 +16,8 @@
   viewBox="0 0 32 32"
   fill="currentColor"
   preserveAspectRatio="xMidYMid meet"
-  width="{size}"
-  height="{size}"
+  width={size}
+  height={size}
   {...attributes}
   {...$$restProps}
 >
diff --git a/src/icons/Menu.svelte b/src/icons/Menu.svelte
index b8c3fc29..8a8f5cbe 100644
--- a/src/icons/Menu.svelte
+++ b/src/icons/Menu.svelte
@@ -16,8 +16,8 @@
   viewBox="0 0 32 32"
   fill="currentColor"
   preserveAspectRatio="xMidYMid meet"
-  width="{size}"
-  height="{size}"
+  width={size}
+  height={size}
   {...attributes}
   {...$$restProps}
 >
diff --git a/src/icons/OverflowMenuHorizontal.svelte b/src/icons/OverflowMenuHorizontal.svelte
index 6a6b79a8..0c514eaa 100644
--- a/src/icons/OverflowMenuHorizontal.svelte
+++ b/src/icons/OverflowMenuHorizontal.svelte
@@ -16,8 +16,8 @@
   viewBox="0 0 32 32"
   fill="currentColor"
   preserveAspectRatio="xMidYMid meet"
-  width="{size}"
-  height="{size}"
+  width={size}
+  height={size}
   {...attributes}
   {...$$restProps}
 >
diff --git a/src/icons/OverflowMenuVertical.svelte b/src/icons/OverflowMenuVertical.svelte
index 2d8e1146..aa9ac02f 100644
--- a/src/icons/OverflowMenuVertical.svelte
+++ b/src/icons/OverflowMenuVertical.svelte
@@ -16,8 +16,8 @@
   viewBox="0 0 32 32"
   fill="currentColor"
   preserveAspectRatio="xMidYMid meet"
-  width="{size}"
-  height="{size}"
+  width={size}
+  height={size}
   {...attributes}
   {...$$restProps}
 >
diff --git a/src/icons/Settings.svelte b/src/icons/Settings.svelte
index d31d44bb..c6993e2f 100644
--- a/src/icons/Settings.svelte
+++ b/src/icons/Settings.svelte
@@ -16,8 +16,8 @@
   viewBox="0 0 32 32"
   fill="currentColor"
   preserveAspectRatio="xMidYMid meet"
-  width="{size}"
-  height="{size}"
+  width={size}
+  height={size}
   {...attributes}
   {...$$restProps}
 >
diff --git a/src/icons/Subtract.svelte b/src/icons/Subtract.svelte
index 85192cab..81ca3fc3 100644
--- a/src/icons/Subtract.svelte
+++ b/src/icons/Subtract.svelte
@@ -16,8 +16,8 @@
   viewBox="0 0 32 32"
   fill="currentColor"
   preserveAspectRatio="xMidYMid meet"
-  width="{size}"
-  height="{size}"
+  width={size}
+  height={size}
   {...attributes}
   {...$$restProps}
 >
diff --git a/src/icons/Switcher.svelte b/src/icons/Switcher.svelte
index 9b503fff..eb16536b 100644
--- a/src/icons/Switcher.svelte
+++ b/src/icons/Switcher.svelte
@@ -16,8 +16,8 @@
   viewBox="0 0 32 32"
   fill="currentColor"
   preserveAspectRatio="xMidYMid meet"
-  width="{size}"
-  height="{size}"
+  width={size}
+  height={size}
   {...attributes}
   {...$$restProps}
 >
diff --git a/src/icons/View.svelte b/src/icons/View.svelte
index 4d738240..acfedf77 100644
--- a/src/icons/View.svelte
+++ b/src/icons/View.svelte
@@ -16,8 +16,8 @@
   viewBox="0 0 32 32"
   fill="currentColor"
   preserveAspectRatio="xMidYMid meet"
-  width="{size}"
-  height="{size}"
+  width={size}
+  height={size}
   {...attributes}
   {...$$restProps}
 >
diff --git a/src/icons/ViewOff.svelte b/src/icons/ViewOff.svelte
index c12b3d9b..50bc80ab 100644
--- a/src/icons/ViewOff.svelte
+++ b/src/icons/ViewOff.svelte
@@ -16,8 +16,8 @@
   viewBox="0 0 32 32"
   fill="currentColor"
   preserveAspectRatio="xMidYMid meet"
-  width="{size}"
-  height="{size}"
+  width={size}
+  height={size}
   {...attributes}
   {...$$restProps}
 >
diff --git a/src/icons/Warning.svelte b/src/icons/Warning.svelte
index 0988e277..b5e19352 100644
--- a/src/icons/Warning.svelte
+++ b/src/icons/Warning.svelte
@@ -16,8 +16,8 @@
   viewBox="0 0 32 32"
   fill="currentColor"
   preserveAspectRatio="xMidYMid meet"
-  width="{size}"
-  height="{size}"
+  width={size}
+  height={size}
   {...attributes}
   {...$$restProps}
 >
diff --git a/src/icons/WarningAltFilled.svelte b/src/icons/WarningAltFilled.svelte
index d8a767b0..71f59e54 100644
--- a/src/icons/WarningAltFilled.svelte
+++ b/src/icons/WarningAltFilled.svelte
@@ -16,8 +16,8 @@
   viewBox="0 0 32 32"
   fill="currentColor"
   preserveAspectRatio="xMidYMid meet"
-  width="{size}"
-  height="{size}"
+  width={size}
+  height={size}
   {...attributes}
   {...$$restProps}
 >
@@ -25,7 +25,8 @@
   <path
     fill="none"
     d="M16,26a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,16,26Zm-1.125-5h2.25V12h-2.25Z"
-    data-icon-path="inner-path"></path><path
+    data-icon-path="inner-path"
+  ></path><path
     d="M16.002,6.1714h-.004L4.6487,27.9966,4.6506,28H27.3494l.0019-.0034ZM14.875,12h2.25v9h-2.25ZM16,26a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,16,26Z"
   ></path><path
     d="M29,30H3a1,1,0,0,1-.8872-1.4614l13-25a1,1,0,0,1,1.7744,0l13,25A1,1,0,0,1,29,30ZM4.6507,28H27.3493l.002-.0033L16.002,6.1714h-.004L4.6487,27.9967Z"
diff --git a/src/icons/WarningFilled.svelte b/src/icons/WarningFilled.svelte
index 51a0d259..e6d42122 100644
--- a/src/icons/WarningFilled.svelte
+++ b/src/icons/WarningFilled.svelte
@@ -16,8 +16,8 @@
   viewBox="0 0 32 32"
   fill="currentColor"
   preserveAspectRatio="xMidYMid meet"
-  width="{size}"
-  height="{size}"
+  width={size}
+  height={size}
   {...attributes}
   {...$$restProps}
 >
@@ -28,5 +28,6 @@
     fill="none"
     d="M17.5,23.5c0,0.8-0.7,1.5-1.5,1.5c-0.8,0-1.5-0.7-1.5-1.5S15.2,22,16,22	C16.8,22,17.5,22.7,17.5,23.5z M17.1,8h-2.2v11h2.2V8z"
     data-icon-path="inner-path"
-    opacity="0"></path>
+    opacity="0"
+  ></path>
 </svg>
diff --git a/tests/Accordion.test.svelte b/tests/Accordion.test.svelte
index f57bf8d7..aa42a525 100644
--- a/tests/Accordion.test.svelte
+++ b/tests/Accordion.test.svelte
@@ -210,9 +210,9 @@
 
 <Accordion skeleton align="start" />
 
-<Accordion skeleton count="{3}" />
+<Accordion skeleton count={3} />
 
-<Accordion skeleton open="{false}" />
+<Accordion skeleton open={false} />
 
 <Accordion skeleton size="xl" />
 
diff --git a/tests/Breadcrumb.test.svelte b/tests/Breadcrumb.test.svelte
index 600cde92..1fbb2c19 100644
--- a/tests/Breadcrumb.test.svelte
+++ b/tests/Breadcrumb.test.svelte
@@ -13,4 +13,4 @@
   <BreadcrumbItem href="/profile" isCurrentPage>Profile</BreadcrumbItem>
 </Breadcrumb>
 
-<Breadcrumb noTrailingSlash skeleton count="{3}" />
+<Breadcrumb noTrailingSlash skeleton count={3} />
diff --git a/tests/Breadcrumbs.test.svelte b/tests/Breadcrumbs.test.svelte
index 9202858d..d3a5d540 100644
--- a/tests/Breadcrumbs.test.svelte
+++ b/tests/Breadcrumbs.test.svelte
@@ -7,17 +7,19 @@
     { href: "/reports/2019", text: "2019" },
   ];
 
-  import { Row, Column, Breadcrumb, BreadcrumbItem } from "carbon-components-svelte";
+  import {
+    Row,
+    Column,
+    Breadcrumb,
+    BreadcrumbItem,
+  } from "carbon-components-svelte";
 </script>
 
 <Row>
   <Column>
     <Breadcrumb>
       {#each items as item, i}
-        <BreadcrumbItem
-          href="{item.href}"
-          isCurrentPage="{i === items.length - 1}"
-        >
+        <BreadcrumbItem href={item.href} isCurrentPage={i === items.length - 1}>
           {item.text}
         </BreadcrumbItem>
       {/each}
diff --git a/tests/Breakpoint.test.svelte b/tests/Breakpoint.test.svelte
index 205d172c..f881cb4f 100644
--- a/tests/Breakpoint.test.svelte
+++ b/tests/Breakpoint.test.svelte
@@ -1,5 +1,9 @@
 <script lang="ts">
-  import { Breakpoint, breakpointObserver, breakpoints } from "carbon-components-svelte";
+  import {
+    Breakpoint,
+    breakpointObserver,
+    breakpoints,
+  } from "carbon-components-svelte";
   import type { BreakpointProps } from "carbon-components-svelte/Breakpoint/Breakpoint.svelte";
 
   let size: BreakpointProps["size"];
@@ -15,10 +19,10 @@
 
 <Breakpoint
   bind:size
-  let:size="{currentSize}"
-  on:change="{(e) => {
+  let:size={currentSize}
+  on:change={(e) => {
     console.log(e.detail);
-  }}"
+  }}
 >
   {currentSize}
 </Breakpoint>
diff --git a/tests/Button.test.svelte b/tests/Button.test.svelte
index 595cc503..49bdcdbb 100644
--- a/tests/Button.test.svelte
+++ b/tests/Button.test.svelte
@@ -17,10 +17,10 @@
 
 <Button kind="danger-ghost">Danger ghost button</Button>
 
-<Button icon="{Add}">With icon</Button>
+<Button icon={Add}>With icon</Button>
 
 <Button
-  icon="{Add}"
+  icon={Add}
   tooltipPosition="bottom"
   tooltipAlignment="center"
   iconDescription="Tooltip text"
diff --git a/tests/ButtonSet.test.svelte b/tests/ButtonSet.test.svelte
index 99c2a600..f6b8bf89 100644
--- a/tests/ButtonSet.test.svelte
+++ b/tests/ButtonSet.test.svelte
@@ -9,6 +9,6 @@
 </ButtonSet>
 
 <ButtonSet stacked>
-  <Button icon="{Login}">Log in</Button>
+  <Button icon={Login}>Log in</Button>
   <Button kind="ghost">Sign up</Button>
 </ButtonSet>
diff --git a/tests/CodeSnippet.test.svelte b/tests/CodeSnippet.test.svelte
index 52a924b1..6ec4e88b 100644
--- a/tests/CodeSnippet.test.svelte
+++ b/tests/CodeSnippet.test.svelte
@@ -4,7 +4,7 @@
 
 <CodeSnippet
   type="inline"
-  copy="{(text) => text}"
+  copy={(text) => text}
   code=""
   hideCopyButton
   disabled
diff --git a/tests/ComboBox.test.svelte b/tests/ComboBox.test.svelte
index cd750f4e..c6bf6ac6 100644
--- a/tests/ComboBox.test.svelte
+++ b/tests/ComboBox.test.svelte
@@ -15,25 +15,25 @@
 </script>
 
 <ComboBox
-  bind:this="{ref}"
+  bind:this={ref}
   direction="top"
   titleText="Contact"
   placeholder="Select contact method"
-  items="{items}"
-  on:select="{(e) => {
+  {items}
+  on:select={(e) => {
     console.log(e.detail.selectedId);
-  }}"
-  on:clear="{(e) => {
+  }}
+  on:clear={(e) => {
     console.log(e.detail);
-  }}"
-  translateWithId="{(id) => {
+  }}
+  translateWithId={(id) => {
     console.log(id); // "open" | "close"
     return id;
-  }}"
-  translateWithIdSelection="{(id) => {
+  }}
+  translateWithIdSelection={(id) => {
     console.log(id); // "clearSelection"
     return id;
-  }}"
+  }}
   let:item
   let:index
 >
@@ -45,33 +45,33 @@
   titleText="Contact"
   placeholder="Select contact method"
   selectedId="1"
-  items="{items}"
+  {items}
 />
 
 <ComboBox
   light
   titleText="Contact"
   placeholder="Select contact method"
-  items="{items}"
+  {items}
 />
 
 <ComboBox
   titleText="Contact"
   placeholder="Select contact method"
   size="xl"
-  items="{items}"
+  {items}
 />
 
 <ComboBox
   titleText="Contact"
   placeholder="Select contact method"
   size="sm"
-  items="{items}"
+  {items}
 />
 
 <ComboBox
   disabled
   titleText="Contact"
   placeholder="Select contact method"
-  items="{items}"
+  {items}
 />
diff --git a/tests/ComposedModal.test.svelte b/tests/ComposedModal.test.svelte
index 92a3dc64..5bfd178b 100644
--- a/tests/ComposedModal.test.svelte
+++ b/tests/ComposedModal.test.svelte
@@ -17,10 +17,10 @@
   </ModalBody>
   <ModalFooter
     primaryButtonText="Proceed"
-    primaryButtonDisabled="{!checked}"
-    secondaryButtons="{[{ text: 'Cancel' }, { text: 'Duplicate' }]}"
-    on:click:button--secondary="{({ detail }) => {
+    primaryButtonDisabled={!checked}
+    secondaryButtons={[{ text: "Cancel" }, { text: "Duplicate" }]}
+    on:click:button--secondary={({ detail }) => {
       console.log(detail);
-    }}"
+    }}
   />
 </ComposedModal>
diff --git a/tests/ContentSwitcher.test.svelte b/tests/ContentSwitcher.test.svelte
index 4e36f9b0..4d3bb3e8 100644
--- a/tests/ContentSwitcher.test.svelte
+++ b/tests/ContentSwitcher.test.svelte
@@ -3,7 +3,7 @@
   import Analytics from "carbon-icons-svelte/lib/Analytics.svelte";
 </script>
 
-<ContentSwitcher size="xl" selectedIndex="{1}">
+<ContentSwitcher size="xl" selectedIndex={1}>
   <Switch disabled text="Latest news" />
   <Switch text="Trending" />
   <Switch>
diff --git a/tests/ContextMenu.test.svelte b/tests/ContextMenu.test.svelte
index 9af40696..b3b29483 100644
--- a/tests/ContextMenu.test.svelte
+++ b/tests/ContextMenu.test.svelte
@@ -17,23 +17,20 @@
   $: console.log("selectedId", selectedId);
 </script>
 
-<div bind:this="{ref}"></div>
+<div bind:this={ref}></div>
 
-<ContextMenu target="{null}" open on:open="{(e) => console.log(e.detail)}">
+<ContextMenu target={null} open on:open={(e) => console.log(e.detail)}>
   <ContextMenuOption
     kind="danger"
     indented
     labelText="Copy"
     shortcutText="⌘C"
-    icon="{CopyFile}"
+    icon={CopyFile}
   />
-  <ContextMenuOption indented labelText="Cut" shortcutText="⌘X" icon="{Cut}" />
+  <ContextMenuOption indented labelText="Cut" shortcutText="⌘X" icon={Cut} />
   <ContextMenuDivider />
   <ContextMenuOption indented labelText="Export as">
-    <ContextMenuGroup
-      labelText="Export options"
-      bind:selectedIds="{selectedIds}"
-    >
+    <ContextMenuGroup labelText="Export options" bind:selectedIds>
       <ContextMenuOption id="pdf" labelText="PDF" />
       <ContextMenuOption id="txt" labelText="TXT" />
       <ContextMenuOption id="mp3" labelText="MP3" />
@@ -49,10 +46,10 @@
   </ContextMenuGroup>
 </ContextMenu>
 
-<ContextMenu target="{[null, ref]}" on:open on:close>
+<ContextMenu target={[null, ref]} on:open on:close>
   <ContextMenuOption indented labelText="Open" />
   <ContextMenuDivider />
-  <ContextMenuRadioGroup bind:selectedId="{selectedId}" labelText="Radio group">
+  <ContextMenuRadioGroup bind:selectedId labelText="Radio group">
     <ContextMenuOption id="0" labelText="Set as foreground" />
     <ContextMenuOption id="1" labelText="Set as background" />
   </ContextMenuRadioGroup>
diff --git a/tests/CopyButton.test.svelte b/tests/CopyButton.test.svelte
index 234c71cc..929adc28 100644
--- a/tests/CopyButton.test.svelte
+++ b/tests/CopyButton.test.svelte
@@ -6,6 +6,6 @@
   text="text"
   on:click
   on:copy
-  copy="{(text) => text}"
+  copy={(text) => text}
   feedback="Copied to clipboard"
 />
diff --git a/tests/CopyableCodeSnippet.test.svelte b/tests/CopyableCodeSnippet.test.svelte
index 3ef9a24f..b22b0eb6 100644
--- a/tests/CopyableCodeSnippet.test.svelte
+++ b/tests/CopyableCodeSnippet.test.svelte
@@ -5,4 +5,4 @@
   import { CodeSnippet } from "carbon-components-svelte";
 </script>
 
-<CodeSnippet on:click="{() => copy(code)}">{code}</CodeSnippet>
+<CodeSnippet on:click={() => copy(code)}>{code}</CodeSnippet>
diff --git a/tests/DangerModal.test.svelte b/tests/DangerModal.test.svelte
index 72d94e92..c86b7fe3 100644
--- a/tests/DangerModal.test.svelte
+++ b/tests/DangerModal.test.svelte
@@ -4,7 +4,7 @@
   let open = false;
 </script>
 
-<Button kind="danger" on:click="{() => (open = true)}">Delete all</Button>
+<Button kind="danger" on:click={() => (open = true)}>Delete all</Button>
 
 <Modal
   danger
@@ -12,7 +12,7 @@
   modalHeading="Delete all instances"
   primaryButtonText="Delete"
   secondaryButtonText="Cancel"
-  on:click:button--secondary="{() => (open = false)}"
+  on:click:button--secondary={() => (open = false)}
   on:open
   on:close
   on:submit
diff --git a/tests/DataTable.test.svelte b/tests/DataTable.test.svelte
index 406d4748..38ae3165 100644
--- a/tests/DataTable.test.svelte
+++ b/tests/DataTable.test.svelte
@@ -73,15 +73,15 @@
 </script>
 
 <DataTable
-  headers="{headers}"
-  rows="{rows}"
+  {headers}
+  {rows}
   style=""
   sortKey="name"
   sortDirection="descending"
   class="class"
 />
 
-<DataTable headers="{headers}" rows="{rows}">
+<DataTable {headers} {rows}>
   <span slot="cell-header" let:header>
     {#if header.key === "port"}
       {header.value}
@@ -105,24 +105,24 @@
 <DataTable
   title="Load balancers"
   description="Your organization's active load balancers."
-  headers="{headers}"
-  rows="{rows}"
+  {headers}
+  {rows}
   useStaticWidth
 />
 
 <DataTable
   title="Load balancers"
   description="Your organization's active load balancers."
-  headers="{headers}"
-  rows="{rows}"
+  {headers}
+  {rows}
 >
   <Toolbar>
     <ToolbarContent>
       <ToolbarSearch
-        bind:filteredRowIds="{filteredRowIds}"
-        shouldFilterRows="{(row, value) => {
+        bind:filteredRowIds
+        shouldFilterRows={(row, value) => {
           return row.name.includes(value);
-        }}"
+        }}
       />
       <ToolbarMenu>
         <ToolbarMenuItem primaryFocus>Restart all</ToolbarMenuItem>
@@ -140,8 +140,8 @@
   size="short"
   title="Load balancers"
   description="Your organization's active load balancers."
-  headers="{headers}"
-  rows="{rows}"
+  {headers}
+  {rows}
 >
   <Toolbar size="sm">
     <ToolbarContent>
@@ -158,90 +158,85 @@
   </Toolbar>
 </DataTable>
 
-<DataTable zebra headers="{headers}" rows="{rows}" />
+<DataTable zebra {headers} {rows} />
 
-<DataTable size="tall" headers="{headers}" rows="{rows}" />
+<DataTable size="tall" {headers} {rows} />
 
-<DataTable size="short" headers="{headers}" rows="{rows}" />
+<DataTable size="short" {headers} {rows} />
 
-<DataTable size="compact" headers="{headers}" rows="{rows}" />
+<DataTable size="compact" {headers} {rows} />
 
-<DataTable sortable headers="{headers}" rows="{rows}" />
+<DataTable sortable {headers} {rows} />
 
 <DataTable
   sortable
   title="Load balancers"
   description="Your organization's active load balancers."
-  headers="{[
-    { key: 'name', value: 'Name' },
-    { key: 'protocol', value: 'Protocol' },
-    { key: 'port', value: 'Port' },
-    { key: 'cost', value: 'Cost', display: (cost) => cost + ' €' },
+  headers={[
+    { key: "name", value: "Name" },
+    { key: "protocol", value: "Protocol" },
+    { key: "port", value: "Port" },
+    { key: "cost", value: "Cost", display: (cost) => cost + " €" },
     {
-      key: 'expireDate',
-      value: 'Expire date',
+      key: "expireDate",
+      value: "Expire date",
       display: (date) => new Date(date).toLocaleString(),
       sort,
     },
-  ]}"
-  rows="{[
+  ]}
+  rows={[
     {
       id: 0,
-      name: 'Load Balancer 3',
-      protocol: 'HTTP',
+      name: "Load Balancer 3",
+      protocol: "HTTP",
       port: 3000,
       cost: 100,
-      expireDate: '2020-10-21',
+      expireDate: "2020-10-21",
     },
     {
-      id: 'b',
-      name: 'Load Balancer 1',
-      protocol: 'HTTP',
+      id: "b",
+      name: "Load Balancer 1",
+      protocol: "HTTP",
       port: 443,
       cost: 200,
-      expireDate: '2020-09-10',
+      expireDate: "2020-09-10",
     },
     {
-      id: 'c',
-      name: 'Load Balancer 2',
-      protocol: 'HTTP',
+      id: "c",
+      name: "Load Balancer 2",
+      protocol: "HTTP",
       port: 80,
       cost: 150,
-      expireDate: '2020-11-24',
+      expireDate: "2020-11-24",
     },
     {
-      id: 'd',
-      name: 'Load Balancer 6',
-      protocol: 'HTTP',
+      id: "d",
+      name: "Load Balancer 6",
+      protocol: "HTTP",
       port: 3000,
       cost: 250,
-      expireDate: '2020-12-01',
+      expireDate: "2020-12-01",
     },
     {
-      id: 'e',
-      name: 'Load Balancer 4',
-      protocol: 'HTTP',
+      id: "e",
+      name: "Load Balancer 4",
+      protocol: "HTTP",
       port: 443,
       cost: 550,
-      expireDate: '2021-03-21',
+      expireDate: "2021-03-21",
     },
     {
-      id: 'f',
-      name: 'Load Balancer 5',
-      protocol: 'HTTP',
+      id: "f",
+      name: "Load Balancer 5",
+      protocol: "HTTP",
       port: 80,
       cost: 400,
-      expireDate: '2020-11-14',
+      expireDate: "2020-11-14",
     },
-  ]}"
+  ]}
 />
 
-<DataTable
-  expandable
-  nonExpandableRowIds="{['a', 'b']}"
-  headers="{headers}"
-  rows="{rows}"
->
+<DataTable expandable nonExpandableRowIds={["a", "b"]} {headers} {rows}>
   <div slot="expanded-row" let:row>
     <pre>
       {JSON.stringify(row, null, 2)}
@@ -249,7 +244,7 @@
   </div>
 </DataTable>
 
-<DataTable batchExpansion headers="{headers}" rows="{rows}">
+<DataTable batchExpansion {headers} {rows}>
   <div slot="expanded-row" let:row>
     <pre>
       {JSON.stringify(row, null, 2)}
@@ -259,60 +254,57 @@
 
 <DataTableSkeleton />
 
-<DataTableSkeleton
-  headers="{['Name', 'Protocol', 'Port', 'Rule']}"
-  rows="{10}"
-/>
+<DataTableSkeleton headers={["Name", "Protocol", "Port", "Rule"]} rows={10} />
 
 <DataTableSkeleton
-  headers="{[
-    { value: 'Name' },
-    { value: 'Protocol' },
-    { value: 'Port' },
-    { value: 'Rule' },
+  headers={[
+    { value: "Name" },
+    { value: "Protocol" },
+    { value: "Port" },
+    { value: "Rule" },
     { empty: true },
-  ]}"
-  rows="{10}"
+  ]}
+  rows={10}
 />
 
-<DataTableSkeleton headers="{headers}" rows="{10}" />
+<DataTableSkeleton {headers} rows={10} />
 
-<DataTableSkeleton showHeader="{false}" showToolbar="{false}" />
+<DataTableSkeleton showHeader={false} showToolbar={false} />
 
-<DataTableSkeleton showHeader="{false}" showToolbar="{false}" size="tall" />
+<DataTableSkeleton showHeader={false} showToolbar={false} size="tall" />
 
-<DataTableSkeleton showHeader="{false}" showToolbar="{false}" size="short" />
+<DataTableSkeleton showHeader={false} showToolbar={false} size="short" />
 
-<DataTableSkeleton showHeader="{false}" showToolbar="{false}" size="compact" />
+<DataTableSkeleton showHeader={false} showToolbar={false} size="compact" />
 
 <DataTable
-  rows="{[
+  rows={[
     {
-      name: 'Load Balancer 3',
-      protocol: 'HTTP',
+      name: "Load Balancer 3",
+      protocol: "HTTP",
       port: 3000,
-      rule: 'Round robin',
-      id: '-',
+      rule: "Round robin",
+      id: "-",
     },
-  ]}"
-  headers="{[
+  ]}
+  headers={[
     {
-      key: 'name',
-      value: 'Name',
+      key: "name",
+      value: "Name",
     },
     {
-      key: 'protocol',
-      value: 'Protocol',
+      key: "protocol",
+      value: "Protocol",
       display: (value) => {
-        return value + ' Protocol';
+        return value + " Protocol";
       },
     },
     {
-      key: 'port',
-      value: 'Port',
+      key: "port",
+      value: "Port",
       display: (value, row) => {
         console.log(row.port);
-        return value + ' €';
+        return value + " €";
       },
       sort: (a, b) => {
         if (a > b) return 1;
@@ -320,31 +312,31 @@
       },
     },
     {
-      key: 'rule',
-      value: 'Rule',
+      key: "rule",
+      value: "Rule",
     },
-  ]}"
+  ]}
   sortKey="name"
-  on:click:row="{(e) => {
+  on:click:row={(e) => {
     const detail = e.detail;
     detail.name;
     detail.port;
-  }}"
-  on:click:cell="{(e) => {
+  }}
+  on:click:cell={(e) => {
     const detail = e.detail;
     switch (detail.key) {
-      case 'name':
+      case "name":
         detail.value;
         break;
     }
-  }}"
-  on:click="{(e) => {
+  }}
+  on:click={(e) => {
     e.detail.cell;
     e.detail.row?.name;
-  }}"
-  on:click:row--expand="{(e) => {
+  }}
+  on:click:row--expand={(e) => {
     const detail = e.detail;
     detail.row.id;
     detail.row.name;
-  }}"
+  }}
 />
diff --git a/tests/DataTableAppendColumns.test.svelte b/tests/DataTableAppendColumns.test.svelte
index 8641869a..98c5ecd8 100644
--- a/tests/DataTableAppendColumns.test.svelte
+++ b/tests/DataTableAppendColumns.test.svelte
@@ -1,5 +1,9 @@
 <script lang="ts">
-  import { DataTable, OverflowMenu, OverflowMenuItem } from "carbon-components-svelte";
+  import {
+    DataTable,
+    OverflowMenu,
+    OverflowMenuItem,
+  } from "carbon-components-svelte";
 
   const headers = [
     { key: "name", value: "Name" },
@@ -18,7 +22,7 @@
   ];
 </script>
 
-<DataTable sortable headers="{headers}" rows="{rows}">
+<DataTable sortable {headers} {rows}>
   <span slot="cell" let:cell>
     {#if cell.key === "overflow"}
       <OverflowMenu flipped>
diff --git a/tests/DataTableBatchSelection.test.svelte b/tests/DataTableBatchSelection.test.svelte
index 0408974d..30f40a0c 100644
--- a/tests/DataTableBatchSelection.test.svelte
+++ b/tests/DataTableBatchSelection.test.svelte
@@ -21,9 +21,4 @@
   $: console.log("selectedRowIds", selectedRowIds);
 </script>
 
-<DataTable
-  batchSelection
-  bind:selectedRowIds
-  headers="{headers}"
-  rows="{rows}"
-/>
+<DataTable batchSelection bind:selectedRowIds {headers} {rows} />
diff --git a/tests/DataTableBatchSelectionToolbar.test.svelte b/tests/DataTableBatchSelectionToolbar.test.svelte
index 2e98eb9b..b5c5e70e 100644
--- a/tests/DataTableBatchSelectionToolbar.test.svelte
+++ b/tests/DataTableBatchSelectionToolbar.test.svelte
@@ -31,10 +31,10 @@
   $: console.log("selectedRowIds", selectedRowIds);
 </script>
 
-<DataTable batchSelection bind:selectedRowIds headers="{headers}" rows="{rows}">
+<DataTable batchSelection bind:selectedRowIds {headers} {rows}>
   <Toolbar>
     <ToolbarBatchActions>
-      <Button icon="{Save}">Save</Button>
+      <Button icon={Save}>Save</Button>
     </ToolbarBatchActions>
     <ToolbarContent>
       <ToolbarSearch />
diff --git a/tests/DataTableNestedHeaders.test.svelte b/tests/DataTableNestedHeaders.test.svelte
index 0b24d31b..88d53467 100644
--- a/tests/DataTableNestedHeaders.test.svelte
+++ b/tests/DataTableNestedHeaders.test.svelte
@@ -3,21 +3,21 @@
 </script>
 
 <DataTable
-  headers="{[
-    { key: 'name', value: 'Name' },
-    { key: 'protocol', value: 'Protocol', width: '400px', minWidth: '40%' },
-    { key: 'port', value: 'Port' },
-    { key: 'rule.name', value: 'Rule', sort: false },
-  ]}"
-  rows="{[
+  headers={[
+    { key: "name", value: "Name" },
+    { key: "protocol", value: "Protocol", width: "400px", minWidth: "40%" },
+    { key: "port", value: "Port" },
+    { key: "rule.name", value: "Rule", sort: false },
+  ]}
+  rows={[
     {
-      id: 'a',
-      name: 'Load Balancer 3',
-      protocol: 'HTTP',
+      id: "a",
+      name: "Load Balancer 3",
+      protocol: "HTTP",
       port: 3000,
-      'rule.name': 'Round robin',
+      "rule.name": "Round robin",
     },
-  ]}"
+  ]}
 >
   <span slot="cell" let:cell let:row>
     {cell.key === "rule.name"}
diff --git a/tests/DatePicker.test.svelte b/tests/DatePicker.test.svelte
index 5b1f70dc..b7bce24a 100644
--- a/tests/DatePicker.test.svelte
+++ b/tests/DatePicker.test.svelte
@@ -1,12 +1,16 @@
 <script lang="ts">
-  import { DatePicker, DatePickerSkeleton, DatePickerInput } from "carbon-components-svelte";
+  import {
+    DatePicker,
+    DatePickerSkeleton,
+    DatePickerInput,
+  } from "carbon-components-svelte";
   import { Russian } from "flatpickr/dist/l10n/ru.js";
 </script>
 
 <DatePicker
-  locale="{Russian}"
+  locale={Russian}
   datePickerType="single"
-  flatpickrProps="{{ static: true }}"
+  flatpickrProps={{ static: true }}
   on:change
 >
   <DatePickerInput labelText="Meeting date" placeholder="mm/dd/yyyy" on:paste />
@@ -14,9 +18,9 @@
 
 <DatePicker
   locale="az"
-  on:change="{(e) => {
+  on:change={(e) => {
     console.log(e.detail);
-  }}"
+  }}
 >
   <DatePickerInput
     labelText="Date of birth"
diff --git a/tests/Dropdown.test.svelte b/tests/Dropdown.test.svelte
index 8a8ee934..3ba410d6 100644
--- a/tests/Dropdown.test.svelte
+++ b/tests/Dropdown.test.svelte
@@ -10,7 +10,7 @@
 
   let itemsWithoutConst = [...items];
 
-  type FieldId = typeof items[number]["id"]; // 'foo' | 'bar' | 'baz'
+  type FieldId = (typeof items)[number]["id"]; // 'foo' | 'bar' | 'baz'
 
   export const fieldId: FieldId = "bar";
 
@@ -33,14 +33,14 @@
   direction="top"
   titleText="Contact"
   selectedId="0"
-  items="{items}"
-  on:select="{(e) => {
+  {items}
+  on:select={(e) => {
     console.log(e.detail.selectedId);
-  }}"
-  translateWithId="{(id) => {
+  }}
+  translateWithId={(id) => {
     console.log(id); // "open" | "close"
     return id;
-  }}"
+  }}
   let:item
   let:index
 >
@@ -49,67 +49,67 @@
 </Dropdown>
 
 <Dropdown
-  itemToString="{(item) => {
-    return item.text + ' (' + item.id + ')';
-  }}"
+  itemToString={(item) => {
+    return item.text + " (" + item.id + ")";
+  }}
   titleText="Contact"
   selectedId="0"
-  items="{itemsWithoutConst}"
+  items={itemsWithoutConst}
 />
 
 <Dropdown
   light
   titleText="Contact"
   selectedId="0"
-  items="{[
-    { id: '0', text: 'Slack' },
-    { id: '1', text: 'Email' },
-    { id: '2', text: 'Fax' },
-  ]}"
+  items={[
+    { id: "0", text: "Slack" },
+    { id: "1", text: "Email" },
+    { id: "2", text: "Fax" },
+  ]}
 />
 
 <Dropdown
   type="inline"
   titleText="Contact"
   selectedId="0"
-  items="{[
-    { id: '0', text: 'Slack' },
-    { id: '1', text: 'Email' },
-    { id: '2', text: 'Fax' },
-  ]}"
+  items={[
+    { id: "0", text: "Slack" },
+    { id: "1", text: "Email" },
+    { id: "2", text: "Fax" },
+  ]}
 />
 
 <Dropdown
   size="xl"
   titleText="Contact"
   selectedId="0"
-  items="{[
-    { id: '0', text: 'Slack' },
-    { id: '1', text: 'Email' },
-    { id: '2', text: 'Fax' },
-  ]}"
+  items={[
+    { id: "0", text: "Slack" },
+    { id: "1", text: "Email" },
+    { id: "2", text: "Fax" },
+  ]}
 />
 
 <Dropdown
   size="sm"
   titleText="Contact"
   selectedId="0"
-  items="{[
-    { id: '0', text: 'Slack' },
-    { id: '1', text: 'Email' },
-    { id: '2', text: 'Fax' },
-  ]}"
+  items={[
+    { id: "0", text: "Slack" },
+    { id: "1", text: "Email" },
+    { id: "2", text: "Fax" },
+  ]}
 />
 
 <Dropdown
   disabled
   titleText="Contact"
   selectedId="0"
-  items="{[
-    { id: '0', text: 'Slack' },
-    { id: '1', text: 'Email' },
-    { id: '2', text: 'Fax' },
-  ]}"
+  items={[
+    { id: "0", text: "Slack" },
+    { id: "1", text: "Email" },
+    { id: "2", text: "Fax" },
+  ]}
 />
 
 <DropdownSkeleton />
diff --git a/tests/DynamicCodeSnippet.test.svelte b/tests/DynamicCodeSnippet.test.svelte
index 079b9328..9c7ff1db 100644
--- a/tests/DynamicCodeSnippet.test.svelte
+++ b/tests/DynamicCodeSnippet.test.svelte
@@ -7,4 +7,4 @@
   $: code = Array.from({ length }, (_, i) => i + 1).join("\n");
 </script>
 
-<CodeSnippet type="multi" code="{code}" />
+<CodeSnippet type="multi" {code} />
diff --git a/tests/FileUploader.test.svelte b/tests/FileUploader.test.svelte
index 8519e12f..88af294d 100644
--- a/tests/FileUploader.test.svelte
+++ b/tests/FileUploader.test.svelte
@@ -23,31 +23,31 @@
   kind="tertiary"
   size="xl"
   labelText="Add files"
-  on:change="{(e) => {
+  on:change={(e) => {
     console.log(e.detail); // File[]
-  }}"
+  }}
 />
 
 <FileUploader
   kind="danger-ghost"
   size="lg"
-  bind:this="{fileUploader}"
+  bind:this={fileUploader}
   multiple
   labelTitle="Upload files"
   buttonLabel="Add files"
   labelDescription="Only JPEG files are accepted."
-  accept="{['.jpg', '.jpeg']}"
+  accept={[".jpg", ".jpeg"]}
   status="complete"
   bind:files
-  on:add="{(e) => {
+  on:add={(e) => {
     console.log(e.detail); // File[]
-  }}"
-  on:remove="{(e) => {
+  }}
+  on:remove={(e) => {
     console.log(e.detail); // File[]
-  }}"
-  on:change="{(e) => {
+  }}
+  on:change={(e) => {
     console.log(e.detail); // File[]
-  }}"
+  }}
 />
 
 <FileUploaderItem name="README.md" status="uploading" />
diff --git a/tests/FilterableComboBox.test.svelte b/tests/FilterableComboBox.test.svelte
index 4a4056a6..d4e216b3 100644
--- a/tests/FilterableComboBox.test.svelte
+++ b/tests/FilterableComboBox.test.svelte
@@ -10,10 +10,10 @@
 <ComboBox
   titleText="Contact"
   placeholder="Select contact method"
-  items="{[
-    { id: '0', text: 'Slack' },
-    { id: '1', text: 'Email' },
-    { id: '2', text: 'Fax' },
-  ]}"
-  shouldFilterItem="{shouldFilterItem}"
+  items={[
+    { id: "0", text: "Slack" },
+    { id: "1", text: "Email" },
+    { id: "2", text: "Fax" },
+  ]}
+  {shouldFilterItem}
 />
diff --git a/tests/FluidForm.test.svelte b/tests/FluidForm.test.svelte
index 807aeb50..46f93e00 100644
--- a/tests/FluidForm.test.svelte
+++ b/tests/FluidForm.test.svelte
@@ -1,5 +1,9 @@
 <script lang="ts">
-  import { FluidForm, TextInput, PasswordInput } from "carbon-components-svelte";
+  import {
+    FluidForm,
+    TextInput,
+    PasswordInput,
+  } from "carbon-components-svelte";
 </script>
 
 <FluidForm action="" method="get">
diff --git a/tests/HeaderNav.test.svelte b/tests/HeaderNav.test.svelte
index 9cc8f086..3b8c5776 100644
--- a/tests/HeaderNav.test.svelte
+++ b/tests/HeaderNav.test.svelte
@@ -36,7 +36,7 @@
   </HeaderNav>
 </Header>
 
-<SideNav bind:isOpen="{isSideNavOpen}">
+<SideNav bind:isOpen={isSideNavOpen}>
   <SideNavItems>
     <SideNavLink text="Link 1" />
     <SideNavLink text="Link 2" />
diff --git a/tests/HeaderSearch.svelte b/tests/HeaderSearch.svelte
index 62887f0b..d0fe5e34 100644
--- a/tests/HeaderSearch.svelte
+++ b/tests/HeaderSearch.svelte
@@ -18,7 +18,7 @@
     Row,
     Column,
   } from "carbon-components-svelte";
-    import type { ComponentProps } from "svelte";
+  import type { ComponentProps } from "svelte";
 
   let isSideNavOpen = false;
   let isOpen = false;
@@ -65,15 +65,15 @@
       bind:active
       bind:value
       bind:selectedResultIndex
-      results="{results}"
+      {results}
       on:active
       on:inactive
-      on:clear="{() => {
-        console.log('on:clear');
-      }}"
-      on:select="{(e) => {
-        console.log('on:select', e.detail);
-      }}"
+      on:clear={() => {
+        console.log("on:clear");
+      }}
+      on:select={(e) => {
+        console.log("on:select", e.detail);
+      }}
       on:paste
       let:result
       let:index
@@ -95,7 +95,7 @@
   </HeaderUtilities>
 </Header>
 
-<SideNav bind:isOpen="{isSideNavOpen}">
+<SideNav bind:isOpen={isSideNavOpen}>
   <SideNavItems>
     <SideNavLink text="Link 1" />
     <SideNavLink text="Link 2" />
diff --git a/tests/HeaderSwitcher.test.svelte b/tests/HeaderSwitcher.test.svelte
index f9f0da86..d18e4fff 100644
--- a/tests/HeaderSwitcher.test.svelte
+++ b/tests/HeaderSwitcher.test.svelte
@@ -27,7 +27,7 @@
     <SkipToContent />
   </div>
   <HeaderUtilities>
-    <HeaderAction bind:isOpen transition="{false}">
+    <HeaderAction bind:isOpen transition={false}>
       <HeaderPanelLinks>
         <HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>
         <HeaderPanelLink>Switcher item 1</HeaderPanelLink>
@@ -42,7 +42,7 @@
   </HeaderUtilities>
 </Header>
 
-<SideNav bind:isOpen="{isSideNavOpen}">
+<SideNav bind:isOpen={isSideNavOpen}>
   <SideNavItems>
     <SideNavLink text="Link 1" />
     <SideNavLink text="Link 2" />
diff --git a/tests/HeaderUtilities.test.svelte b/tests/HeaderUtilities.test.svelte
index 32b264ce..574a163a 100644
--- a/tests/HeaderUtilities.test.svelte
+++ b/tests/HeaderUtilities.test.svelte
@@ -30,12 +30,12 @@
     <SkipToContent />
   </div>
   <HeaderUtilities>
-    <HeaderGlobalAction iconDescription="Settings" icon="{SettingsAdjust}" />
+    <HeaderGlobalAction iconDescription="Settings" icon={SettingsAdjust} />
     <HeaderAction
       bind:isOpen
       on:open
       on:close
-      transition="{{ duration: 400, easing: quintOut }}"
+      transition={{ duration: 400, easing: quintOut }}
     >
       <HeaderPanelLinks>
         <HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>
@@ -51,7 +51,7 @@
   </HeaderUtilities>
 </Header>
 
-<SideNav bind:isOpen="{isSideNavOpen}">
+<SideNav bind:isOpen={isSideNavOpen}>
   <SideNavItems>
     <SideNavLink text="Link 1" />
     <SideNavLink text="Link 2" />
diff --git a/tests/HiddenCodeSnippet.test.svelte b/tests/HiddenCodeSnippet.test.svelte
index 64cb9202..699657ec 100644
--- a/tests/HiddenCodeSnippet.test.svelte
+++ b/tests/HiddenCodeSnippet.test.svelte
@@ -10,16 +10,16 @@
   <h5>"Show more" will not render</h5>
   <br />
 {/if}
-<div class:hidden="{!toggled}">
-  <CodeSnippet type="multi" code="{code}" />
+<div class:hidden={!toggled}>
+  <CodeSnippet type="multi" {code} />
 </div>
 
 {#if toggled}
   <br /><br />
   <h5>"Show more" will render</h5>
   <br />
-  <div class:hidden="{!toggled}">
-    <CodeSnippet type="multi" code="{code}" />
+  <div class:hidden={!toggled}>
+    <CodeSnippet type="multi" {code} />
   </div>
 {/if}
 
diff --git a/tests/ImageLoader.test.svelte b/tests/ImageLoader.test.svelte
index 91df4e53..1a3f8e1a 100644
--- a/tests/ImageLoader.test.svelte
+++ b/tests/ImageLoader.test.svelte
@@ -13,10 +13,10 @@
   fadeIn
   ratio="16x9"
   src=""
-  on:load="{(e) => {
+  on:load={(e) => {
     console.log(e.detail); // null
-  }}"
-  on:error="{(e) => {
+  }}
+  on:error={(e) => {
     console.log(e.detail); // null
-  }}"
+  }}
 />
diff --git a/tests/InlineLoadingUx.test.svelte b/tests/InlineLoadingUx.test.svelte
index 571b666c..85ee8031 100644
--- a/tests/InlineLoadingUx.test.svelte
+++ b/tests/InlineLoadingUx.test.svelte
@@ -19,7 +19,7 @@
   } as const satisfies Record<State, State>;
 
   let timeout: NodeJS.Timeout | undefined = undefined;
-  let state: State= "dormant";
+  let state: State = "dormant";
 
   function reset(incomingState?: State) {
     if (typeof timeout === "number") {
@@ -41,14 +41,14 @@
 <ButtonSet>
   <Button
     kind="ghost"
-    disabled="{state === 'dormant' || state === 'finished'}"
-    on:click="{() => (state = 'inactive')}"
+    disabled={state === "dormant" || state === "finished"}
+    on:click={() => (state = "inactive")}
   >
     Cancel
   </Button>
   {#if state !== "dormant"}
-    <InlineLoading status="{state}" description="{descriptionMap[state]}" />
+    <InlineLoading status={state} description={descriptionMap[state]} />
   {:else}
-    <Button on:click="{() => (state = 'active')}">Submit</Button>
+    <Button on:click={() => (state = "active")}>Submit</Button>
   {/if}
 </ButtonSet>
diff --git a/tests/InlineNotification.test.svelte b/tests/InlineNotification.test.svelte
index 54e3b22f..856bc2b8 100644
--- a/tests/InlineNotification.test.svelte
+++ b/tests/InlineNotification.test.svelte
@@ -1,5 +1,8 @@
 <script lang="ts">
-  import { InlineNotification, NotificationActionButton } from "carbon-components-svelte";
+  import {
+    InlineNotification,
+    NotificationActionButton,
+  } from "carbon-components-svelte";
 </script>
 
 <InlineNotification on:close />
@@ -8,9 +11,9 @@
   hideCloseButton
   kind="warning"
   title="Upcoming scheduled maintenance"
-  on:close="{(e) => {
+  on:close={(e) => {
     console.log(e.detail.timeout);
-  }}"
+  }}
 />
 
 <InlineNotification kind="warning" title="Upcoming scheduled maintenance">
diff --git a/tests/Loading.test.svelte b/tests/Loading.test.svelte
index f91b5bb6..2095cd4e 100644
--- a/tests/Loading.test.svelte
+++ b/tests/Loading.test.svelte
@@ -2,6 +2,6 @@
   import { Loading } from "carbon-components-svelte";
 </script>
 
-<Loading withOverlay="{false}" />
+<Loading withOverlay={false} />
 
-<Loading withOverlay="{false}" small />
+<Loading withOverlay={false} small />
diff --git a/tests/LocalStorage.test.svelte b/tests/LocalStorage.test.svelte
index 69d48e2d..b67e50e3 100644
--- a/tests/LocalStorage.test.svelte
+++ b/tests/LocalStorage.test.svelte
@@ -10,13 +10,13 @@
 </script>
 
 <LocalStorage
-  bind:this="{storage}"
+  bind:this={storage}
   key="dark-mode"
-  bind:value="{toggled}"
-  on:save="{() => {
-    events = [...events, { event: 'on:save' }];
-  }}"
-  on:update="{({ detail }) => {
-    events = [...events, { event: 'on:update', detail }];
-  }}"
+  bind:value={toggled}
+  on:save={() => {
+    events = [...events, { event: "on:save" }];
+  }}
+  on:update={({ detail }) => {
+    events = [...events, { event: "on:update", detail }];
+  }}
 />
diff --git a/tests/Modal.test.svelte b/tests/Modal.test.svelte
index 37d690ce..e9f5332b 100644
--- a/tests/Modal.test.svelte
+++ b/tests/Modal.test.svelte
@@ -4,18 +4,18 @@
   let open = false;
 </script>
 
-<Button on:click="{() => (open = true)}">Create database</Button>
+<Button on:click={() => (open = true)}>Create database</Button>
 
 <Modal
   bind:open
   modalHeading="Create database"
   primaryButtonText="Confirm"
-  secondaryButtons="{[{ text: 'Cancel' }, { text: 'Duplicate' }]}"
+  secondaryButtons={[{ text: "Cancel" }, { text: "Duplicate" }]}
   secondaryButtonText="Cancel"
-  on:click:button--secondary="{({ detail }) => {
+  on:click:button--secondary={({ detail }) => {
     console.log(detail);
     open = false;
-  }}"
+  }}
   on:open
   on:close
   on:submit
diff --git a/tests/MultiSelect.test.svelte b/tests/MultiSelect.test.svelte
index fbf8c8c1..8d88d747 100644
--- a/tests/MultiSelect.test.svelte
+++ b/tests/MultiSelect.test.svelte
@@ -16,28 +16,28 @@
   label="Select contact methods..."
   hideLabel
   bind:selectedIds
-  items="{[
-    { id: 0, text: 'Slack' },
-    { id: '1', text: 'Email' },
-    { id: '2', text: 'Fax', disabled: true },
-  ]}"
-  on:select="{(e) => {
+  items={[
+    { id: 0, text: "Slack" },
+    { id: "1", text: "Email" },
+    { id: "2", text: "Fax", disabled: true },
+  ]}
+  on:select={(e) => {
     console.log(e.detail.selectedIds);
     console.log(e.detail.selected);
     console.log(e.detail.unselected);
-  }}"
-  on:blur="{(e) => {
+  }}
+  on:blur={(e) => {
     e.detail; // number | FocusEvent
-  }}"
+  }}
   on:paste
-  translateWithId="{(id) => {
+  translateWithId={(id) => {
     console.log(id); // "open" | "close"
     return id;
-  }}"
-  translateWithIdSelection="{(id) => {
+  }}
+  translateWithIdSelection={(id) => {
     console.log(id); // "clearAll" | "clearSelection"
     return id;
-  }}"
+  }}
   let:item
   let:index
 >
@@ -48,93 +48,93 @@
 <MultiSelect
   titleText="Contact"
   label="Select contact methods..."
-  items="{[
-    { id: '0', text: 'Slack' },
-    { id: '1', text: 'Email' },
-    { id: '2', text: 'Fax' },
-  ]}"
-  sortItem="{() => {}}"
+  items={[
+    { id: "0", text: "Slack" },
+    { id: "1", text: "Email" },
+    { id: "2", text: "Fax" },
+  ]}
+  sortItem={() => {}}
 />
 
 <MultiSelect
-  selectedIds="{['0', '1']}"
+  selectedIds={["0", "1"]}
   titleText="Contact"
   label="Select contact methods..."
-  items="{[
-    { id: '0', text: 'Slack' },
-    { id: '1', text: 'Email' },
-    { id: '2', text: 'Fax' },
-  ]}"
+  items={[
+    { id: "0", text: "Slack" },
+    { id: "1", text: "Email" },
+    { id: "2", text: "Fax" },
+  ]}
 />
 
 <MultiSelect
-  itemToString="{(item) => {
-    return item.text + ' (' + item.id + ')';
-  }}"
+  itemToString={(item) => {
+    return item.text + " (" + item.id + ")";
+  }}
   titleText="Contact"
   label="Select contact methods..."
-  items="{[
-    { id: '0', text: 'Slack' },
-    { id: '1', text: 'Email' },
-    { id: '2', text: 'Fax' },
-  ]}"
-  sortItem="{() => {}}"
+  items={[
+    { id: "0", text: "Slack" },
+    { id: "1", text: "Email" },
+    { id: "2", text: "Fax" },
+  ]}
+  sortItem={() => {}}
 />
 
 <MultiSelect
   light
   titleText="Contact"
   label="Select contact methods..."
-  items="{[
-    { id: '0', text: 'Slack' },
-    { id: '1', text: 'Email' },
-    { id: '2', text: 'Fax' },
-  ]}"
+  items={[
+    { id: "0", text: "Slack" },
+    { id: "1", text: "Email" },
+    { id: "2", text: "Fax" },
+  ]}
 />
 
 <MultiSelect
   type="inline"
   titleText="Contact"
   label="Select contact methods..."
-  items="{[
-    { id: '0', text: 'Slack' },
-    { id: '1', text: 'Email' },
-    { id: '2', text: 'Fax' },
-  ]}"
+  items={[
+    { id: "0", text: "Slack" },
+    { id: "1", text: "Email" },
+    { id: "2", text: "Fax" },
+  ]}
 />
 
 <MultiSelect
   size="xl"
   titleText="Contact"
   label="Select contact methods..."
-  items="{[
-    { id: '0', text: 'Slack' },
-    { id: '1', text: 'Email' },
-    { id: '2', text: 'Fax' },
-  ]}"
+  items={[
+    { id: "0", text: "Slack" },
+    { id: "1", text: "Email" },
+    { id: "2", text: "Fax" },
+  ]}
 />
 
 <MultiSelect
   size="sm"
   titleText="Contact"
   label="Select contact methods..."
-  items="{[
-    { id: '0', text: 'Slack' },
-    { id: '1', text: 'Email' },
-    { id: '2', text: 'Fax' },
-  ]}"
+  items={[
+    { id: "0", text: "Slack" },
+    { id: "1", text: "Email" },
+    { id: "2", text: "Fax" },
+  ]}
 />
 
 <MultiSelect
   filterable
-  filterItem="{(item, query) => {
+  filterItem={(item, query) => {
     return item.text.toLowerCase().includes(query.toLowerCase());
-  }}"
+  }}
   titleText="Contact"
   placeholder="Filter contact methods..."
-  items="{[
-    { id: '0', text: 'Slack' },
-    { id: '1', text: 'Email' },
-    { id: '2', text: 'Fax' },
-  ]}"
+  items={[
+    { id: "0", text: "Slack" },
+    { id: "1", text: "Email" },
+    { id: "2", text: "Fax" },
+  ]}
 />
diff --git a/tests/NumberInput.test.svelte b/tests/NumberInput.test.svelte
index 09f5b5c8..c1176783 100644
--- a/tests/NumberInput.test.svelte
+++ b/tests/NumberInput.test.svelte
@@ -10,18 +10,18 @@
 <NumberInput
   disabled
   light
-  min="{4}"
-  max="{20}"
-  value="{4}"
+  min={4}
+  max={20}
+  value={4}
   label="Clusters"
   helperText="Clusters provisioned in your region"
   invalidText="Number must be between 4 and 20."
-  on:input="{(e) => {
+  on:input={(e) => {
     console.log({ input: e.detail }); // null | number
-  }}"
-  on:change="{(e) => {
+  }}
+  on:change={(e) => {
     console.log({ change: e.detail }); // null | number
-  }}"
+  }}
   on:keydown
   on:keyup
   on:paste
@@ -30,19 +30,19 @@
 <NumberInput
   disabled
   light
-  min="{1}"
-  max="{10}"
-  value="{4}"
-  step="{0.1}"
+  min={1}
+  max={10}
+  value={4}
+  step={0.1}
   label="Clusters"
   helperText="Clusters provisioned in your region"
   invalidText="Number must be between 1 and 10."
-  on:input="{(e) => {
+  on:input={(e) => {
     console.log({ input: e.detail }); // null | number
-  }}"
-  on:change="{(e) => {
+  }}
+  on:change={(e) => {
     console.log(e.detail); // null | number
-  }}"
+  }}
   on:keydown
   on:keyup
   on:paste
diff --git a/tests/OffsetColumns.test.svelte b/tests/OffsetColumns.test.svelte
index 685e62b3..3873576d 100644
--- a/tests/OffsetColumns.test.svelte
+++ b/tests/OffsetColumns.test.svelte
@@ -5,25 +5,25 @@
 <Grid>
   <Row>
     <Column
-      sm="{{ span: 1, offset: 3 }}"
+      sm={{ span: 1, offset: 3 }}
       style="outline: 1px solid var(--cds-interactive-04)"
     >
       Offset 3
     </Column>
     <Column
-      sm="{{ span: 2, offset: 2 }}"
+      sm={{ span: 2, offset: 2 }}
       style="outline: 1px solid var(--cds-interactive-04)"
     >
       Offset 2
     </Column>
     <Column
-      sm="{{ span: 3, offset: 1 }}"
+      sm={{ span: 3, offset: 1 }}
       style="outline: 1px solid var(--cds-interactive-04)"
     >
       Offset 1
     </Column>
     <Column
-      sm="{{ span: 4, offset: 0 }}"
+      sm={{ span: 4, offset: 0 }}
       style="outline: 1px solid var(--cds-interactive-04)"
     >
       Offset 0
diff --git a/tests/OverflowMenu.test.svelte b/tests/OverflowMenu.test.svelte
index 579031b7..2e90e289 100644
--- a/tests/OverflowMenu.test.svelte
+++ b/tests/OverflowMenu.test.svelte
@@ -4,9 +4,9 @@
 </script>
 
 <OverflowMenu
-  on:close="{(e) => {
+  on:close={(e) => {
     console.log(e.detail); // { index: number; text: string; }
-  }}"
+  }}
 >
   <OverflowMenuItem text="Manage credentials" />
   <OverflowMenuItem
@@ -61,7 +61,7 @@
   <OverflowMenuItem primaryFocus danger text="Delete service" />
 </OverflowMenu>
 
-<OverflowMenu icon="{Add}">
+<OverflowMenu icon={Add}>
   <OverflowMenuItem text="Manage credentials" />
   <OverflowMenuItem
     href="https://cloud.ibm.com/docs/api-gateway/"
diff --git a/tests/Pagination.test.svelte b/tests/Pagination.test.svelte
index 489fd88c..7c26b9e5 100644
--- a/tests/Pagination.test.svelte
+++ b/tests/Pagination.test.svelte
@@ -3,22 +3,22 @@
 </script>
 
 <Pagination
-  totalItems="{102}"
-  pageSizes="{[10, 15, 20]}"
-  on:change="{(e) => {
+  totalItems={102}
+  pageSizes={[10, 15, 20]}
+  on:change={(e) => {
     console.log(e.detail); // { pageSize?: number, page?: number }
-  }}"
-  on:update="{(e) => {
+  }}
+  on:update={(e) => {
     console.log(e.detail); // { pageSize: number; page: number; }
-  }}"
+  }}
 />
 
-<Pagination totalItems="{102}" page="{4}" />
+<Pagination totalItems={102} page={4} />
 
-<Pagination totalItems="{102}" pageSizes="{[16, 36, 99]}" pageSize="{36}" />
+<Pagination totalItems={102} pageSizes={[16, 36, 99]} pageSize={36} />
 
-<Pagination totalItems="{102}" pageInputDisabled />
+<Pagination totalItems={102} pageInputDisabled />
 
-<Pagination totalItems="{102}" pageSizeInputDisabled />
+<Pagination totalItems={102} pageSizeInputDisabled />
 
 <PaginationSkeleton />
diff --git a/tests/PaginationNav.test.svelte b/tests/PaginationNav.test.svelte
index 698fa9e1..872194a9 100644
--- a/tests/PaginationNav.test.svelte
+++ b/tests/PaginationNav.test.svelte
@@ -5,15 +5,15 @@
 <PaginationNav />
 
 <PaginationNav
-  total="{3}"
+  total={3}
   loop
-  on:change="{(e) => {
+  on:change={(e) => {
     console.log(e.detail); // { page: number; }
-  }}"
-  on:click:button--next="{(e) => {
+  }}
+  on:click:button--next={(e) => {
     console.log(e.detail); // { page: number; }
-  }}"
-  on:click:button--previous="{(e) => {
+  }}
+  on:click:button--previous={(e) => {
     console.log(e.detail); // { page: number; }
-  }}"
+  }}
 />
diff --git a/tests/PassiveModal.test.svelte b/tests/PassiveModal.test.svelte
index be4f6c31..2ea912ee 100644
--- a/tests/PassiveModal.test.svelte
+++ b/tests/PassiveModal.test.svelte
@@ -4,7 +4,7 @@
   let open = false;
 </script>
 
-<Button kind="tertiary" on:click="{() => (open = true)}">Learn more</Button>
+<Button kind="tertiary" on:click={() => (open = true)}>Learn more</Button>
 
 <Modal passiveModal bind:open modalHeading="IBM Cloudant" on:open on:close>
   <p>
diff --git a/tests/PersistedHamburgerMenu.test.svelte b/tests/PersistedHamburgerMenu.test.svelte
index 501bfe76..5992d0f8 100644
--- a/tests/PersistedHamburgerMenu.test.svelte
+++ b/tests/PersistedHamburgerMenu.test.svelte
@@ -20,7 +20,7 @@
 </script>
 
 <Header
-  persistentHamburgerMenu="{true}"
+  persistentHamburgerMenu={true}
   company="IBM"
   platformName="Carbon Svelte"
   bind:isSideNavOpen
@@ -41,7 +41,7 @@
   </HeaderNav>
 </Header>
 
-<SideNav bind:isOpen="{isSideNavOpen}">
+<SideNav bind:isOpen={isSideNavOpen}>
   <SideNavItems>
     <SideNavLink text="Link 1" />
     <SideNavLink text="Link 2" />
diff --git a/tests/Popover.test.svelte b/tests/Popover.test.svelte
index 8ddf063f..3ca51da8 100644
--- a/tests/Popover.test.svelte
+++ b/tests/Popover.test.svelte
@@ -12,9 +12,9 @@
   relative
   light
   highContrast
-  on:click:outside="{() => {
-    console.log('on:click:outside');
-  }}"
+  on:click:outside={() => {
+    console.log("on:click:outside");
+  }}
 >
   <div style="padding: var(--cds-spacing-05)">Content</div>
 </Popover>
diff --git a/tests/ProgressBar.test.svelte b/tests/ProgressBar.test.svelte
index 0a0f0716..3ab6d75d 100644
--- a/tests/ProgressBar.test.svelte
+++ b/tests/ProgressBar.test.svelte
@@ -7,8 +7,8 @@
 <ProgressBar
   kind="inline"
   size="md"
-  value="{40}"
-  max="{100}"
+  value={40}
+  max={100}
   labelText="Upload status"
   hideLabel
   helperText="40 MB of 100 MB"
diff --git a/tests/ProgressIndicator.test.svelte b/tests/ProgressIndicator.test.svelte
index 7db4c31b..0f1e5cc7 100644
--- a/tests/ProgressIndicator.test.svelte
+++ b/tests/ProgressIndicator.test.svelte
@@ -6,7 +6,7 @@
   } from "carbon-components-svelte";
 </script>
 
-<ProgressIndicator currentIndex="{2}">
+<ProgressIndicator currentIndex={2}>
   <ProgressStep
     complete
     label="Step 1"
@@ -28,7 +28,7 @@
   />
 </ProgressIndicator>
 
-<ProgressIndicator preventChangeOnClick currentIndex="{2}">
+<ProgressIndicator preventChangeOnClick currentIndex={2}>
   <ProgressStep
     complete
     label="Step 1"
@@ -80,4 +80,4 @@
   />
 </ProgressIndicator>
 
-<ProgressIndicatorSkeleton count="{3}" />
+<ProgressIndicatorSkeleton count={3} />
diff --git a/tests/RadioButton.test.svelte b/tests/RadioButton.test.svelte
index 68652677..e22109ce 100644
--- a/tests/RadioButton.test.svelte
+++ b/tests/RadioButton.test.svelte
@@ -1,13 +1,17 @@
 <script lang="ts">
-  import { RadioButton, RadioButtonSkeleton, RadioButtonGroup } from "carbon-components-svelte";
+  import {
+    RadioButton,
+    RadioButtonSkeleton,
+    RadioButtonGroup,
+  } from "carbon-components-svelte";
 </script>
 
 <RadioButtonGroup
   legendText="Storage tier (disk)"
   selected="standard"
-  on:change="{(e) => {
+  on:change={(e) => {
     console.log(e.detail); // string
-  }}"
+  }}
 >
   <RadioButton labelText="Free (1 GB)" value="free" />
   <RadioButton labelText="Standard (10 GB)" value="standard" />
diff --git a/tests/RadioSelectableDataTable.test.svelte b/tests/RadioSelectableDataTable.test.svelte
index 9225f573..4cfeb4ba 100644
--- a/tests/RadioSelectableDataTable.test.svelte
+++ b/tests/RadioSelectableDataTable.test.svelte
@@ -21,4 +21,4 @@
   $: console.log("selectedRowIds", selectedRowIds);
 </script>
 
-<DataTable radio bind:selectedRowIds headers="{headers}" rows="{rows}" />
+<DataTable radio bind:selectedRowIds {headers} {rows} />
diff --git a/tests/RadioTile.test.svelte b/tests/RadioTile.test.svelte
index 31780ad1..45356d3b 100644
--- a/tests/RadioTile.test.svelte
+++ b/tests/RadioTile.test.svelte
@@ -7,9 +7,9 @@
   required
   legend="Service pricing tiers"
   selected="0"
-  on:select="{(e) => {
+  on:select={(e) => {
     console.log(e.detail); // string
-  }}"
+  }}
 >
   <RadioTile light checked value="0">Lite plan</RadioTile>
   <RadioTile value="1">Standard plan</RadioTile>
diff --git a/tests/RecursiveList.test.svelte b/tests/RecursiveList.test.svelte
index c686401d..4aeda094 100644
--- a/tests/RecursiveList.test.svelte
+++ b/tests/RecursiveList.test.svelte
@@ -29,4 +29,4 @@
   ];
 </script>
 
-<RecursiveList type="ordered" nodes="{nodes}" />
+<RecursiveList type="ordered" {nodes} />
diff --git a/tests/ResponsiveGrid.test.svelte b/tests/ResponsiveGrid.test.svelte
index cd1b2e92..0231d54a 100644
--- a/tests/ResponsiveGrid.test.svelte
+++ b/tests/ResponsiveGrid.test.svelte
@@ -5,33 +5,33 @@
 <Grid>
   <Row>
     <Column
-      sm="{1}"
-      md="{4}"
-      lg="{8}"
+      sm={1}
+      md={4}
+      lg={8}
       style="outline: 1px solid var(--cds-interactive-04)"
     >
       sm: 1, md: 4, lg: 8
     </Column>
     <Column
-      sm="{1}"
-      md="{2}"
-      lg="{2}"
+      sm={1}
+      md={2}
+      lg={2}
       style="outline: 1px solid var(--cds-interactive-04)"
     >
       sm: 1, md: 2, lg: 2
     </Column>
     <Column
-      sm="{1}"
-      md="{1}"
-      lg="{1}"
+      sm={1}
+      md={1}
+      lg={1}
       style="outline: 1px solid var(--cds-interactive-04)"
     >
       sm: 1, md: 1, lg: 1
     </Column>
     <Column
-      sm="{1}"
-      md="{1}"
-      lg="{1}"
+      sm={1}
+      md={1}
+      lg={1}
       style="outline: 1px solid var(--cds-interactive-04)"
     >
       sm: 1, md: 1, lg: 1
diff --git a/tests/Select.test.svelte b/tests/Select.test.svelte
index e456854e..181c7643 100644
--- a/tests/Select.test.svelte
+++ b/tests/Select.test.svelte
@@ -14,8 +14,8 @@
   <SelectItem value="g100" text="Gray 100" />
 </Select>
 
-<Select labelText="Carbon theme" selected="{0}">
-  <SelectItem value="{0}" text="Select a theme" disabled hidden />
+<Select labelText="Carbon theme" selected={0}>
+  <SelectItem value={0} text="Select a theme" disabled hidden />
   <SelectItemGroup label="Light theme">
     <SelectItem value="white" text="White" />
     <SelectItem value="g10" text="Gray 10" />
diff --git a/tests/SelectableDataTable.test.svelte b/tests/SelectableDataTable.test.svelte
index ec6fec84..e235ae80 100644
--- a/tests/SelectableDataTable.test.svelte
+++ b/tests/SelectableDataTable.test.svelte
@@ -21,4 +21,4 @@
   $: console.log("selectedRowIds", selectedRowIds);
 </script>
 
-<DataTable selectable bind:selectedRowIds headers="{headers}" rows="{rows}" />
+<DataTable selectable bind:selectedRowIds {headers} {rows} />
diff --git a/tests/SkeletonText.test.svelte b/tests/SkeletonText.test.svelte
index 8822c9dc..9a96f2bd 100644
--- a/tests/SkeletonText.test.svelte
+++ b/tests/SkeletonText.test.svelte
@@ -10,6 +10,6 @@
 
 <SkeletonText paragraph />
 
-<SkeletonText paragraph lines="{8}" />
+<SkeletonText paragraph lines={8} />
 
 <SkeletonText paragraph width="50%" />
diff --git a/tests/Slider.test.svelte b/tests/Slider.test.svelte
index 016b100c..23bacfa4 100644
--- a/tests/Slider.test.svelte
+++ b/tests/Slider.test.svelte
@@ -6,36 +6,36 @@
 
 <Slider
   labelText="Runtime memory (MB)"
-  min="{10}"
-  max="{990}"
+  min={10}
+  max={990}
   maxLabel="990 MB"
-  value="{100}"
+  value={100}
   fullWidth
-  on:change="{(e) => {
+  on:change={(e) => {
     console.log(e.detail); // number
-  }}"
-  on:input="{(e) => {
+  }}
+  on:input={(e) => {
     console.log(e.detail); // number
-  }}"
+  }}
 />
 
 <Slider
   labelText="Runtime memory (MB)"
-  min="{10}"
-  max="{990}"
+  min={10}
+  max={990}
   maxLabel="990 MB"
-  value="{100}"
-  step="{10}"
+  value={100}
+  step={10}
 />
 
 <Slider
   light
   labelText="Runtime memory (MB)"
-  min="{10}"
-  max="{990}"
+  min={10}
+  max={990}
   maxLabel="990 MB"
-  value="{100}"
-  step="{10}"
+  value={100}
+  step={10}
 />
 
 <SliderSkeleton />
diff --git a/tests/StructuredList.test.svelte b/tests/StructuredList.test.svelte
index 34c62445..f04ece1f 100644
--- a/tests/StructuredList.test.svelte
+++ b/tests/StructuredList.test.svelte
@@ -14,9 +14,9 @@
 <StructuredList
   selection
   selected="row-1-value"
-  on:change="{(e) => {
+  on:change={(e) => {
     console.log(e.detail); // string
-  }}"
+  }}
 >
   <StructuredListHead>
     <StructuredListRow head>
@@ -97,4 +97,4 @@
   </StructuredListBody>
 </StructuredList>
 
-<StructuredListSkeleton rows="{3}" />
+<StructuredListSkeleton rows={3} />
diff --git a/tests/Tabs.test.svelte b/tests/Tabs.test.svelte
index f1571853..5f2dd5b8 100644
--- a/tests/Tabs.test.svelte
+++ b/tests/Tabs.test.svelte
@@ -1,11 +1,16 @@
 <script lang="ts">
-  import { Tabs, Tab, TabContent, TabsSkeleton } from "carbon-components-svelte";
+  import {
+    Tabs,
+    Tab,
+    TabContent,
+    TabsSkeleton,
+  } from "carbon-components-svelte";
 </script>
 
 <Tabs
-  on:change="{(e) => {
+  on:change={(e) => {
     console.log(e.detail); // number
-  }}"
+  }}
 >
   <Tab label="Tab label 1" />
   <Tab label="Tab label 2" />
@@ -40,4 +45,4 @@
 
 <TabContent>Content 3</TabContent>
 
-<TabsSkeleton count="{3}" />
+<TabsSkeleton count={3} />
diff --git a/tests/Tag.test.svelte b/tests/Tag.test.svelte
index df555e0e..4812f5f3 100644
--- a/tests/Tag.test.svelte
+++ b/tests/Tag.test.svelte
@@ -31,7 +31,7 @@
 
 <Tag filter on:click on:close>Filterable</Tag>
 
-<Tag icon="{Add}">Custom icon</Tag>
+<Tag icon={Add}>Custom icon</Tag>
 
 <Tag interactive>Text</Tag>
 
diff --git a/tests/TextArea.test.svelte b/tests/TextArea.test.svelte
index e98840b4..104dea23 100644
--- a/tests/TextArea.test.svelte
+++ b/tests/TextArea.test.svelte
@@ -6,7 +6,7 @@
   value=""
   hideLabel
   light
-  rows="{10}"
+  rows={10}
   labelText="App description"
   helperText="A rich description helps us better recommend related products and services"
   placeholder="Enter a description..."
diff --git a/tests/TextInput.test.svelte b/tests/TextInput.test.svelte
index c0c64d0d..63b5dd87 100644
--- a/tests/TextInput.test.svelte
+++ b/tests/TextInput.test.svelte
@@ -10,9 +10,9 @@
   labelText="User name"
   placeholder="Enter user name..."
   bind:value
-  on:input="{(e) => console.log(e.detail)}"
-  on:change="{(e) => (value = e.detail)}"
-  on:paste="{(e) => console.log(e)}"
+  on:input={(e) => console.log(e.detail)}
+  on:change={(e) => (value = e.detail)}
+  on:paste={(e) => console.log(e)}
 />
 
 <TextInput
diff --git a/tests/Theme.test.svelte b/tests/Theme.test.svelte
index 2232ee44..929e5386 100644
--- a/tests/Theme.test.svelte
+++ b/tests/Theme.test.svelte
@@ -9,16 +9,16 @@
   bind:theme
   persist
   persistKey="carbon-theme"
-  on:update="{(e) => console.log(e.detail.theme)}"
-  tokens="{{ 'button-primary': 'violet' }}"
+  on:update={(e) => console.log(e.detail.theme)}
+  tokens={{ "button-primary": "violet" }}
   render="toggle"
-  toggle="{{
-    themes: ['g10', 'g90'],
-    labelA: '',
-    labelB: '',
-  }}"
-  select="{{
-    themes: ['g10', 'g90'],
-    labelText: '',
-  }}"
+  toggle={{
+    themes: ["g10", "g90"],
+    labelA: "",
+    labelB: "",
+  }}
+  select={{
+    themes: ["g10", "g90"],
+    labelText: "",
+  }}
 />
diff --git a/tests/TimePicker.test.svelte b/tests/TimePicker.test.svelte
index 6e14f793..8f25bf81 100644
--- a/tests/TimePicker.test.svelte
+++ b/tests/TimePicker.test.svelte
@@ -1,9 +1,13 @@
 <script lang="ts">
-  import { TimePicker, TimePickerSelect, SelectItem } from "carbon-components-svelte";
+  import {
+    TimePicker,
+    TimePickerSelect,
+    SelectItem,
+  } from "carbon-components-svelte";
 </script>
 
 <TimePicker
-  spellcheck="{false}"
+  spellcheck={false}
   labelText="Cron job"
   placeholder="hh:mm"
   on:paste
diff --git a/tests/ToastNotification.test.svelte b/tests/ToastNotification.test.svelte
index bd773961..7610e7c9 100644
--- a/tests/ToastNotification.test.svelte
+++ b/tests/ToastNotification.test.svelte
@@ -8,9 +8,9 @@
   hideCloseButton
   kind="warning"
   title="Upcoming scheduled maintenance"
-  on:close="{(e) => {
+  on:close={(e) => {
     console.log(e.detail.timeout);
-  }}"
+  }}
 />
 
 <ToastNotification kind="error" />
diff --git a/tests/Toggle.test.svelte b/tests/Toggle.test.svelte
index 31d6b586..77da9c44 100644
--- a/tests/Toggle.test.svelte
+++ b/tests/Toggle.test.svelte
@@ -7,9 +7,9 @@
 <Toggle
   labelText="Push notifications"
   toggled
-  on:toggle="{(e) => {
+  on:toggle={(e) => {
     console.log(e.detail.toggled);
-  }}"
+  }}
 />
 
 <Toggle labelText="Push notifications" labelA="No" labelB="Yes" />
diff --git a/tests/Tooltip.test.svelte b/tests/Tooltip.test.svelte
index 6518d323..7d57f2c8 100644
--- a/tests/Tooltip.test.svelte
+++ b/tests/Tooltip.test.svelte
@@ -41,7 +41,7 @@
 
 <Button size="small">Manage</Button>
 
-<Tooltip triggerText="Resource list" icon="{Catalog}">
+<Tooltip triggerText="Resource list" icon={Catalog}>
   <p>Resources are provisioned based on your account's organization.</p>
 </Tooltip>
 
diff --git a/tests/TreeView.test.svelte b/tests/TreeView.test.svelte
index 2c9dfce8..ed45e79e 100644
--- a/tests/TreeView.test.svelte
+++ b/tests/TreeView.test.svelte
@@ -63,16 +63,16 @@
 </script>
 
 <TreeView
-  bind:this="{treeview}"
+  bind:this={treeview}
   size="compact"
   labelText="Cloud Products"
   {nodes}
   bind:activeId
   bind:selectedIds
   bind:expandedIds
-  on:select="{({ detail }) => console.log('select', detail)}"
-  on:toggle="{({ detail }) => console.log('toggle', detail)}"
-  on:focus="{({ detail }) => console.log('focus', detail)}"
+  on:select={({ detail }) => console.log("select", detail)}
+  on:toggle={({ detail }) => console.log("toggle", detail)}
+  on:focus={({ detail }) => console.log("focus", detail)}
   let:node
 >
   {node.id}
diff --git a/tests/Truncate.test.svelte b/tests/Truncate.test.svelte
index 81615247..64f4049e 100644
--- a/tests/Truncate.test.svelte
+++ b/tests/Truncate.test.svelte
@@ -16,7 +16,7 @@
   Carbon Components Svelte is a Svelte component library that implements the
   Carbon Design System, an open source design system by IBM.
 </h4>
-<h4 use:truncate="{{ clamp: 'front' }}">
+<h4 use:truncate={{ clamp: "front" }}>
   Carbon Components Svelte is a Svelte component library that implements the
   Carbon Design System, an open source design system by IBM.
 </h4>
diff --git a/tsconfig.json b/tsconfig.json
index bb95ddd8..ceaa383b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,21 +1,21 @@
 {
-    "compilerOptions": {
-      "noEmit": true,
-      "esModuleInterop": true,
-      "forceConsistentCasingInFileNames": true,
-      "ignoreDeprecations": "5.0",
-      "verbatimModuleSyntax": true,
-      "isolatedModules": true,
-      "target": "ESNext",
-      "module": "ESNext",
-      "moduleResolution": "node",
-      "noUnusedLocals": true,
-      "noUnusedParameters": true,
-      "strict": true,
-      "paths": {
-        "carbon-components-svelte": ["./types"],
-        "carbon-components-svelte/*": ["./types/*"]
-      }
-    },
-    "include": ["src", "tests"]
-  }
\ No newline at end of file
+  "compilerOptions": {
+    "noEmit": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "ignoreDeprecations": "5.0",
+    "verbatimModuleSyntax": true,
+    "isolatedModules": true,
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "strict": true,
+    "paths": {
+      "carbon-components-svelte": ["./types"],
+      "carbon-components-svelte/*": ["./types/*"]
+    }
+  },
+  "include": ["src", "tests"]
+}