From 465f35c0f31ba65b6c27ece7a251621cdb9fa00a Mon Sep 17 00:00:00 2001
From: Enrico Sacchetti <enrico@theetrain.ca>
Date: Mon, 8 Jan 2024 16:17:27 -0500
Subject: [PATCH] chore: use `cds` class prefix in v11 styles

---
 src/Accordion/Accordion.svelte                |  10 +-
 src/Accordion/AccordionItem.svelte            |  21 ++--
 src/Accordion/AccordionSkeleton.svelte        |  32 ++---
 src/AspectRatio/AspectRatio.svelte            |  20 +--
 src/Breadcrumb/Breadcrumb.svelte              |   4 +-
 src/Breadcrumb/BreadcrumbItem.svelte          |   8 +-
 src/Breadcrumb/BreadcrumbSkeleton.svelte      |  10 +-
 src/Button/Button.svelte                      |  38 +++---
 src/Button/ButtonSet.svelte                   |   4 +-
 src/Button/ButtonSkeleton.svelte              |  24 ++--
 src/Checkbox/Checkbox.svelte                  |  12 +-
 src/Checkbox/CheckboxSkeleton.svelte          |   8 +-
 src/Checkbox/InlineCheckbox.svelte            |   6 +-
 src/CodeSnippet/CodeSnippet.svelte            |  66 +++++-----
 src/CodeSnippet/CodeSnippetSkeleton.svelte    |  10 +-
 src/ComboBox/ComboBox.svelte                  |  26 ++--
 src/ComposedModal/ComposedModal.svelte        |  12 +-
 src/ComposedModal/ModalBody.svelte            |   8 +-
 src/ComposedModal/ModalFooter.svelte          |   4 +-
 src/ComposedModal/ModalHeader.svelte          |  14 +--
 src/ContentSwitcher/ContentSwitcher.svelte    |   6 +-
 src/ContentSwitcher/Switch.svelte             |   6 +-
 src/ContextMenu/ContextMenu.svelte            |   8 +-
 src/ContextMenu/ContextMenuDivider.svelte     |   2 +-
 src/ContextMenu/ContextMenuOption.svelte      |  30 ++---
 src/CopyButton/CopyButton.svelte              |  16 +--
 src/DataTable/DataTable.svelte                |  43 +++----
 src/DataTable/DataTableSkeleton.svelte        |  32 ++---
 src/DataTable/Table.svelte                    |  38 +++---
 src/DataTable/TableContainer.svelte           |  12 +-
 src/DataTable/TableHeader.svelte              |  14 +--
 src/DataTable/Toolbar.svelte                  |   6 +-
 src/DataTable/ToolbarBatchActions.svelte      |  12 +-
 src/DataTable/ToolbarContent.svelte           |   2 +-
 src/DataTable/ToolbarMenu.svelte              |   2 +-
 src/DataTable/ToolbarSearch.svelte            |   8 +-
 src/DatePicker/DatePicker.svelte              |  16 +--
 src/DatePicker/DatePickerInput.svelte         |  38 +++---
 src/DatePicker/DatePickerSkeleton.svelte      |  20 +--
 src/DatePicker/createCalendar.js              |  12 +-
 src/Dropdown/Dropdown.svelte                  |  48 ++++----
 src/Dropdown/DropdownSkeleton.svelte          |  14 +--
 src/FileUploader/FileUploader.svelte          |  18 +--
 src/FileUploader/FileUploaderButton.svelte    |  28 ++---
 .../FileUploaderDropContainer.svelte          |  12 +-
 src/FileUploader/FileUploaderItem.svelte      |  18 +--
 src/FileUploader/FileUploaderSkeleton.svelte  |   4 +-
 src/FileUploader/Filename.svelte              |   6 +-
 src/FluidForm/FluidForm.svelte                |   2 +-
 src/Form/Form.svelte                          |   2 +-
 src/FormGroup/FormGroup.svelte                |   8 +-
 src/FormItem/FormItem.svelte                  |   2 +-
 src/FormLabel/FormLabel.svelte                |   2 +-
 src/Grid/Column.svelte                        |  22 ++--
 src/Grid/Grid.svelte                          |  16 +--
 src/Grid/Row.svelte                           |  14 +--
 src/InlineLoading/InlineLoading.svelte        |  10 +-
 src/Link/Link.svelte                          |  24 ++--
 src/ListBox/ListBox.svelte                    |  20 +--
 src/ListBox/ListBoxField.svelte               |   2 +-
 src/ListBox/ListBoxMenu.svelte                |   2 +-
 src/ListBox/ListBoxMenuIcon.svelte            |   4 +-
 src/ListBox/ListBoxMenuItem.svelte            |   8 +-
 src/ListBox/ListBoxSelection.svelte           |  18 +--
 src/ListItem/ListItem.svelte                  |   2 +-
 src/Loading/Loading.svelte                    |  28 ++---
 src/Modal/Modal.svelte                        |  54 ++++----
 src/Modal/modalStore.js                       |   2 +-
 src/MultiSelect/MultiSelect.svelte            |  46 +++----
 src/Notification/InlineNotification.svelte    |  26 ++--
 .../NotificationActionButton.svelte           |   2 +-
 src/Notification/NotificationButton.svelte    |   8 +-
 src/Notification/NotificationIcon.svelte      |   4 +-
 src/Notification/ToastNotification.svelte     |  24 ++--
 src/NumberInput/NumberInput.svelte            |  50 ++++----
 src/NumberInput/NumberInputSkeleton.svelte    |   6 +-
 src/OrderedList/OrderedList.svelte            |   8 +-
 src/OverflowMenu/OverflowMenu.svelte          |  28 ++---
 src/OverflowMenu/OverflowMenuItem.svelte      |  14 +--
 src/Pagination/Pagination.svelte              |  32 ++---
 src/Pagination/PaginationSkeleton.svelte      |  10 +-
 src/PaginationNav/PaginationItem.svelte       |   8 +-
 src/PaginationNav/PaginationNav.svelte        |  14 ++-
 src/PaginationNav/PaginationOverflow.svelte   |  12 +-
 src/Popover/Popover.svelte                    |  36 +++---
 src/Popover/PopoverContent.svelte             |   6 +-
 src/ProgressBar/ProgressBar.svelte            |  28 ++---
 .../ProgressIndicator.svelte                  |   6 +-
 .../ProgressIndicatorSkeleton.svelte          |  18 +--
 src/ProgressIndicator/ProgressStep.svelte     |  26 ++--
 src/RadioButton/RadioButton.svelte            |  12 +-
 src/RadioButton/RadioButtonSkeleton.svelte    |   6 +-
 src/RadioButtonGroup/RadioButtonGroup.svelte  |  15 ++-
 src/RecursiveList/RecursiveListItem.svelte    |   2 +-
 src/Search/Search.svelte                      |  28 ++---
 src/Search/SearchSkeleton.svelte              |  12 +-
 src/Select/Select.svelte                      |  62 +++++-----
 src/Select/SelectItem.svelte                  |   2 +-
 src/Select/SelectItemGroup.svelte             |   2 +-
 src/Select/SelectSkeleton.svelte              |   8 +-
 .../SkeletonPlaceholder.svelte                |   2 +-
 src/SkeletonText/SkeletonText.svelte          |   8 +-
 src/Slider/Slider.svelte                      |  32 ++---
 src/Slider/SliderSkeleton.svelte              |  18 +--
 src/StructuredList/StructuredList.svelte      |   8 +-
 src/StructuredList/StructuredListBody.svelte  |   2 +-
 src/StructuredList/StructuredListCell.svelte  |   6 +-
 src/StructuredList/StructuredListHead.svelte  |   2 +-
 src/StructuredList/StructuredListInput.svelte |   2 +-
 src/StructuredList/StructuredListRow.svelte   |   8 +-
 .../StructuredListSkeleton.svelte             |  26 ++--
 src/Tabs/Tab.svelte                           |   8 +-
 src/Tabs/TabContent.svelte                    |   2 +-
 src/Tabs/Tabs.svelte                          |   6 +-
 src/Tabs/TabsSkeleton.svelte                  |  13 +-
 src/Tag/Tag.svelte                            | 104 ++++++++--------
 src/Tag/TagSkeleton.svelte                    |   6 +-
 src/TextArea/TextArea.svelte                  |  28 ++---
 src/TextArea/TextAreaSkeleton.svelte          |   6 +-
 src/TextInput/PasswordInput.svelte            | 116 +++++++++---------
 src/TextInput/TextInput.svelte                |  84 ++++++-------
 src/TextInput/TextInputSkeleton.svelte        |   6 +-
 src/Tile/ClickableTile.svelte                 |   4 +-
 src/Tile/ExpandableTile.svelte                |  18 +--
 src/Tile/RadioTile.svelte                     |  16 +--
 src/Tile/SelectableTile.svelte                |  16 +--
 src/Tile/Tile.svelte                          |   4 +-
 src/Tile/TileGroup.svelte                     |   4 +-
 src/TimePicker/TimePicker.svelte              |  32 ++---
 src/TimePicker/TimePickerSelect.svelte        |  12 +-
 src/Toggle/Toggle.svelte                      |  26 ++--
 src/Toggle/ToggleSkeleton.svelte              |  20 +--
 src/Tooltip/Tooltip.svelte                    |  26 ++--
 src/Tooltip/TooltipFooter.svelte              |   2 +-
 .../TooltipDefinition.svelte                  |  26 ++--
 src/TooltipIcon/TooltipIcon.svelte            |  22 ++--
 src/TreeView/TreeView.svelte                  |  14 +--
 src/TreeView/TreeViewNode.svelte              |  20 +--
 src/TreeView/TreeViewNodeList.svelte          |  26 ++--
 src/Truncate/Truncate.svelte                  |   4 +-
 src/Truncate/truncate.js                      |   2 +-
 src/UIShell/Content.svelte                    |   4 +-
 src/UIShell/HamburgerMenu.svelte              |   6 +-
 src/UIShell/Header.svelte                     |   6 +-
 src/UIShell/HeaderAction.svelte               |  10 +-
 src/UIShell/HeaderActionLink.svelte           |   8 +-
 src/UIShell/HeaderGlobalAction.svelte         |   6 +-
 src/UIShell/HeaderNav.svelte                  |   4 +-
 src/UIShell/HeaderNavItem.svelte              |   4 +-
 src/UIShell/HeaderNavMenu.svelte              |  12 +-
 src/UIShell/HeaderPanelDivider.svelte         |   2 +-
 src/UIShell/HeaderPanelLink.svelte            |   4 +-
 src/UIShell/HeaderPanelLinks.svelte           |   2 +-
 src/UIShell/HeaderSearch.svelte               |   4 +-
 src/UIShell/HeaderUtilities.svelte            |   2 +-
 src/UIShell/SideNav.svelte                    |  16 +--
 src/UIShell/SideNavDivider.svelte             |   6 +-
 src/UIShell/SideNavItems.svelte               |   2 +-
 src/UIShell/SideNavLink.svelte                |  12 +-
 src/UIShell/SideNavMenu.svelte                |  16 +--
 src/UIShell/SideNavMenuItem.svelte            |   6 +-
 src/UIShell/SkipToContent.svelte              |   2 +-
 src/UnorderedList/UnorderedList.svelte        |   6 +-
 163 files changed, 1283 insertions(+), 1255 deletions(-)

diff --git a/src/Accordion/Accordion.svelte b/src/Accordion/Accordion.svelte
index 785b0163..cda63868 100644
--- a/src/Accordion/Accordion.svelte
+++ b/src/Accordion/Accordion.svelte
@@ -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--lg="{size === 'lg' || size === 'xl'}"
+    class:cds--accordion="{true}"
+    class:cds--accordion--start="{align === 'start'}"
+    class:cds--accordion--end="{align === 'end'}"
+    class:cds--accordion--sm="{size === 'sm'}"
+    class:cds--accordion--lg="{size === 'lg' || size === 'xl'}"
     {...$$restProps}
     on:click
     on:mouseover
diff --git a/src/Accordion/AccordionItem.svelte b/src/Accordion/AccordionItem.svelte
index a8034f75..f44c634e 100644
--- a/src/Accordion/AccordionItem.svelte
+++ b/src/Accordion/AccordionItem.svelte
@@ -36,11 +36,11 @@
 
 <!-- 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:cds--accordion__item="{true}"
+  class:cds--accordion__item--active="{open}"
+  class:cds--accordion__item--disabled="{disabled}"
+  class:cds--accordion__item--expanding="{animation === 'expanding'}"
+  class:cds--accordion__item--collapsing="{animation === 'collapsing'}"
   {...$$restProps}
   on:animationend
   on:animationend="{() => {
@@ -49,7 +49,7 @@
 >
   <button
     type="button"
-    class:bx--accordion__heading="{true}"
+    class:cds--accordion__heading="{true}"
     title="{iconDescription}"
     aria-expanded="{open}"
     disabled="{disabled}"
@@ -68,12 +68,15 @@
       }
     }}"
   >
-    <ChevronRight class="bx--accordion__arrow" aria-label="{iconDescription}" />
-    <div class:bx--accordion__title="{true}">
+    <ChevronRight
+      class="cds--accordion__arrow"
+      aria-label="{iconDescription}"
+    />
+    <div class:cds--accordion__title="{true}">
       <slot name="title">{title}</slot>
     </div>
   </button>
-  <div class:bx--accordion__content="{true}">
+  <div class:cds--accordion__content="{true}">
     <slot />
   </div>
 </li>
diff --git a/src/Accordion/AccordionSkeleton.svelte b/src/Accordion/AccordionSkeleton.svelte
index 9305d2fa..bc7d4726 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:cds--skeleton="{true}"
+  class:cds--accordion="{true}"
+  class:cds--accordion--start="{align === 'start'}"
+  class:cds--accordion--end="{align === 'end'}"
+  class:cds--accordion--sm="{size === 'sm'}"
+  class:cds--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:cds--accordion__item="{true}"
+      class:cds--accordion__item--active="{true}"
     >
-      <span class:bx--accordion__heading="{true}">
-        <ChevronRight class="bx--accordion__arrow" />
-        <SkeletonText class="bx--accordion__title" />
+      <span class:cds--accordion__heading="{true}">
+        <ChevronRight class="cds--accordion__arrow" />
+        <SkeletonText class="cds--accordion__title" />
       </span>
-      <div class:bx--accordion__content="{true}">
+      <div class:cds--accordion__content="{true}">
         <SkeletonText width="90%" />
         <SkeletonText width="80%" />
         <SkeletonText width="95%" />
@@ -53,10 +53,10 @@
     </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}">
-        <ChevronRight class="bx--accordion__arrow" />
-        <SkeletonText class="bx--accordion__title" />
+    <li class:cds--accordion__item="{true}">
+      <span class:cds--accordion__heading="{true}">
+        <ChevronRight class="cds--accordion__arrow" />
+        <SkeletonText class="cds--accordion__title" />
       </span>
     </li>
   {/each}
diff --git a/src/AspectRatio/AspectRatio.svelte b/src/AspectRatio/AspectRatio.svelte
index e48418be..8f25380f 100644
--- a/src/AspectRatio/AspectRatio.svelte
+++ b/src/AspectRatio/AspectRatio.svelte
@@ -7,16 +7,16 @@
 </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:cds--aspect-ratio="{true}"
+  class:cds--aspect-ratio--2x1="{ratio === '2x1'}"
+  class:cds--aspect-ratio--2x3="{ratio === '2x3'}"
+  class:cds--aspect-ratio--16x9="{ratio === '16x9'}"
+  class:cds--aspect-ratio--4x3="{ratio === '4x3'}"
+  class:cds--aspect-ratio--1x1="{ratio === '1x1'}"
+  class:cds--aspect-ratio--3x4="{ratio === '3x4'}"
+  class:cds--aspect-ratio--3x2="{ratio === '3x2'}"
+  class:cds--aspect-ratio--9x16="{ratio === '9x16'}"
+  class:cds--aspect-ratio--1x2="{ratio === '1x2'}"
   {...$$restProps}
 >
   <slot />
diff --git a/src/Breadcrumb/Breadcrumb.svelte b/src/Breadcrumb/Breadcrumb.svelte
index 9b2c13d3..3d91c336 100644
--- a/src/Breadcrumb/Breadcrumb.svelte
+++ b/src/Breadcrumb/Breadcrumb.svelte
@@ -31,8 +31,8 @@
     on:mouseleave
   >
     <ol
-      class:bx--breadcrumb="{true}"
-      class:bx--breadcrumb--no-trailing-slash="{noTrailingSlash}"
+      class:cds--breadcrumb="{true}"
+      class:cds--breadcrumb--no-trailing-slash="{noTrailingSlash}"
     >
       <slot />
     </ol>
diff --git a/src/Breadcrumb/BreadcrumbItem.svelte b/src/Breadcrumb/BreadcrumbItem.svelte
index 07009a42..c299e1cc 100644
--- a/src/Breadcrumb/BreadcrumbItem.svelte
+++ b/src/Breadcrumb/BreadcrumbItem.svelte
@@ -1,6 +1,6 @@
 <script>
   /**
-   * @slot {{props?: { ["aria-current"]?: string; class: "bx--link"; }}}
+   * @slot {{props?: { ["aria-current"]?: string; class: "cds--link"; }}}
    */
 
   /**
@@ -22,8 +22,8 @@
 <!-- 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 &&
+  class:cds--breadcrumb-item="{true}"
+  class:cds--breadcrumb-item--current="{isCurrentPage &&
     $$restProps['aria-current'] !== 'page'}"
   {...$$restProps}
   on:click
@@ -39,7 +39,7 @@
     <slot
       props="{{
         'aria-current': $$restProps['aria-current'],
-        class: 'bx--link',
+        class: 'cds--link',
       }}"
     />
   {/if}
diff --git a/src/Breadcrumb/BreadcrumbSkeleton.svelte b/src/Breadcrumb/BreadcrumbSkeleton.svelte
index b6ec1109..5dd2d5b7 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:cds--skeleton="{true}"
+  class:cds--breadcrumb="{true}"
+  class:cds--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:cds--breadcrumb-item="{true}">
+      <span class:cds--link="{true}">&nbsp;</span>
     </div>
   {/each}
 </div>
diff --git a/src/Button/Button.svelte b/src/Button/Button.svelte
index 178e631f..e39795a9 100644
--- a/src/Button/Button.svelte
+++ b/src/Button/Button.svelte
@@ -95,29 +95,29 @@
       hasIconOnly && kind === "ghost" && !href ? isSelected : undefined,
     ...$$restProps,
     class: [
-      "bx--btn",
-      expressive && "bx--btn--expressive",
+      "cds--btn",
+      expressive && "cds--btn--expressive",
       ((size === "small" && !expressive) ||
         (size === "sm" && !expressive) ||
         (size === "small" && !expressive)) &&
-        "bx--btn--sm",
+        "cds--btn--sm",
       ((size === "field" && !expressive) || (size === "md" && !expressive)) &&
-        "bx--btn--md",
-      size === "small" && "bx--btn--sm",
-      size === "xl" && "bx--btn--xl",
-      size === "2xl" && "bx--btn--2xl",
-      kind && `bx--btn--${kind}`,
-      disabled && "bx--btn--disabled",
-      hasIconOnly && "bx--btn--icon-only",
-      hasIconOnly && "bx--tooltip__trigger",
-      hasIconOnly && "bx--tooltip--a11y",
+        "cds--btn--md",
+      size === "small" && "cds--btn--sm",
+      size === "xl" && "cds--btn--xl",
+      size === "2xl" && "cds--btn--2xl",
+      kind && `cds--btn--${kind}`,
+      disabled && "cds--btn--disabled",
+      hasIconOnly && "cds--btn--icon-only",
+      hasIconOnly && "cds--tooltip__trigger",
+      hasIconOnly && "cds--tooltip--a11y",
       hasIconOnly &&
         tooltipPosition &&
-        `bx--btn--icon-only--${tooltipPosition}`,
+        `cds--btn--icon-only--${tooltipPosition}`,
       hasIconOnly &&
         tooltipAlignment &&
-        `bx--tooltip--align-${tooltipAlignment}`,
-      hasIconOnly && isSelected && kind === "ghost" && "bx--btn--selected",
+        `cds--tooltip--align-${tooltipAlignment}`,
+      hasIconOnly && isSelected && kind === "ghost" && "cds--btn--selected",
       $$restProps.class,
     ]
       .filter(Boolean)
@@ -151,12 +151,12 @@
     on:mouseleave
   >
     {#if hasIconOnly}
-      <span class:bx--assistive-text="{true}">{iconDescription}</span>
+      <span class:cds--assistive-text="{true}">{iconDescription}</span>
     {/if}
     <slot /><svelte:component
       this="{icon}"
       aria-hidden="true"
-      class="bx--btn__icon"
+      class="cds--btn__icon"
       aria-label="{iconDescription}"
     />
   </a>
@@ -170,12 +170,12 @@
     on:mouseleave
   >
     {#if hasIconOnly}
-      <span class:bx--assistive-text="{true}">{iconDescription}</span>
+      <span class:cds--assistive-text="{true}">{iconDescription}</span>
     {/if}
     <slot /><svelte:component
       this="{icon}"
       aria-hidden="true"
-      class="bx--btn__icon"
+      class="cds--btn__icon"
       style="{hasIconOnly ? 'margin-left: 0' : undefined}"
       aria-label="{iconDescription}"
     />
diff --git a/src/Button/ButtonSet.svelte b/src/Button/ButtonSet.svelte
index b8239a04..2a05b002 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:cds--btn-set="{true}"
+  class:cds--btn-set--stacked="{stacked}"
   {...$$restProps}
 >
   <slot />
diff --git a/src/Button/ButtonSkeleton.svelte b/src/Button/ButtonSkeleton.svelte
index 76da9766..fe2ef8ca 100644
--- a/src/Button/ButtonSkeleton.svelte
+++ b/src/Button/ButtonSkeleton.svelte
@@ -18,12 +18,12 @@
     href="{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:cds--skeleton="{true}"
+    class:cds--btn="{true}"
+    class:cds--btn--field="{size === 'field'}"
+    class:cds--btn--sm="{size === 'small'}"
+    class:cds--btn--lg="{size === 'lg'}"
+    class:cds--btn--xl="{size === 'xl'}"
     {...$$restProps}
     on:click
     on:mouseover
@@ -35,12 +35,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:cds--skeleton="{true}"
+    class:cds--btn="{true}"
+    class:cds--btn--field="{size === 'field'}"
+    class:cds--btn--sm="{size === 'small'}"
+    class:cds--btn--lg="{size === 'lg'}"
+    class:cds--btn--xl="{size === 'xl'}"
     {...$$restProps}
     on:click
     on:mouseover
diff --git a/src/Checkbox/Checkbox.svelte b/src/Checkbox/Checkbox.svelte
index 429a4b87..36207416 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:cds--form-item="{true}"
+    class:cds--checkbox-wrapper="{true}"
     {...$$restProps}
     on:click
     on:mouseover
@@ -101,7 +101,7 @@
       name="{name}"
       required="{required}"
       readonly="{readonly}"
-      class:bx--checkbox="{true}"
+      class:cds--checkbox="{true}"
       on:change="{() => {
         if (useGroup) {
           group = group.includes(value)
@@ -114,11 +114,11 @@
       on:change
       on:blur
     />
-    <label for="{id}" title="{title}" class:bx--checkbox-label="{true}">
+    <label for="{id}" title="{title}" class:cds--checkbox-label="{true}">
       <span
         bind:this="{refLabel}"
-        class:bx--checkbox-label-text="{true}"
-        class:bx--visually-hidden="{hideLabel}"
+        class:cds--checkbox-label-text="{true}"
+        class:cds--visually-hidden="{hideLabel}"
       >
         <slot name="labelText">
           {labelText}
diff --git a/src/Checkbox/CheckboxSkeleton.svelte b/src/Checkbox/CheckboxSkeleton.svelte
index 249be9e9..e4410d54 100644
--- a/src/Checkbox/CheckboxSkeleton.svelte
+++ b/src/Checkbox/CheckboxSkeleton.svelte
@@ -1,15 +1,15 @@
 <!-- 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:cds--form-item="{true}"
+  class:cds--checkbox-wrapper="{true}"
+  class:cds--checkbox-label="{true}"
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave
 >
-  <span class:bx--checkbox-label-text="{true}" class:bx--skeleton="{true}"
+  <span class:cds--checkbox-label-text="{true}" class:cds--skeleton="{true}"
   ></span>
 </div>
diff --git a/src/Checkbox/InlineCheckbox.svelte b/src/Checkbox/InlineCheckbox.svelte
index 57a02af2..991d4680 100644
--- a/src/Checkbox/InlineCheckbox.svelte
+++ b/src/Checkbox/InlineCheckbox.svelte
@@ -18,11 +18,11 @@
   export let ref = null;
 </script>
 
-<div class:bx--checkbox--inline="{true}">
+<div class:cds--checkbox--inline="{true}">
   <input
     bind:this="{ref}"
     type="checkbox"
-    class:bx--checkbox="{true}"
+    class:cds--checkbox="{true}"
     checked="{indeterminate ? false : checked}"
     indeterminate="{indeterminate}"
     id="{id}"
@@ -34,5 +34,5 @@
     for="{id}"
     title="{title}"
     aria-label="{$$props['aria-label']}"
-    class:bx--checkbox-label="{true}"></label>
+    class:cds--checkbox-label="{true}"></label>
 </div>
diff --git a/src/CodeSnippet/CodeSnippet.svelte b/src/CodeSnippet/CodeSnippet.svelte
index 3928f23d..cd485115 100644
--- a/src/CodeSnippet/CodeSnippet.svelte
+++ b/src/CodeSnippet/CodeSnippet.svelte
@@ -144,14 +144,14 @@
 {: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:cds--snippet="{true}"
+      class:cds--snippet--expand="{expanded}"
+      class:cds--snippet--light="{light}"
+      class:cds--snippet--no-copy="{hideCopyButton}"
+      class:cds--snippet--wraptext="{wrapText}"
+      class:cds--snippet--single="{type === 'single'}"
+      class:cds--snippet--inline="{type === 'inline'}"
+      class:cds--snippet--multi="{type === 'multi'}"
       {...$$restProps}
     >
       <code id="{id}">
@@ -162,16 +162,16 @@
     <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}"
+      class:cds--copy="{true}"
+      class:cds--btn--copy="{true}"
+      class:cds--copy-btn--animating="{animation}"
+      class:cds--copy-btn--fade-in="{animation === 'fade-in'}"
+      class:cds--copy-btn--fade-out="{animation === 'fade-out'}"
+      class:cds--snippet="{true}"
+      class:cds--snippet--inline="{type === 'inline'}"
+      class:cds--snippet--expand="{expanded}"
+      class:cds--snippet--light="{light}"
+      class:cds--snippet--wraptext="{wrapText}"
       aria-label="{copyLabel}"
       {...$$restProps}
       on:click
@@ -198,8 +198,8 @@
       </code>
       <span
         aria-hidden="true"
-        class:bx--assistive-text="{true}"
-        class:bx--copy-btn__feedback="{true}"
+        class:cds--assistive-text="{true}"
+        class:cds--copy-btn__feedback="{true}"
       >
         {feedback}
       </span>
@@ -208,15 +208,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:cds--snippet="{true}"
+    class:cds--snippet--expand="{expanded}"
+    class:cds--snippet--light="{light}"
+    class:cds--snippet--no-copy="{hideCopyButton}"
+    class:cds--snippet--wraptext="{wrapText}"
+    class:cds--snippet--single="{type === 'single'}"
+    class:cds--snippet--inline="{type === 'inline'}"
+    class:cds--snippet--multi="{type === 'multi'}"
+    class:cds--snippet--disabled="{type !== 'inline' && disabled}"
     {...$$restProps}
     on:mouseover
     on:mouseenter
@@ -227,7 +227,7 @@
       role="{type === 'single' ? 'textbox' : undefined}"
       tabindex="{type === 'single' && !disabled ? '0' : undefined}"
       aria-label="{$$restProps['aria-label'] || copyLabel || 'code-snippet'}"
-      class:bx--snippet-container="{true}"
+      class:cds--snippet-container="{true}"
       style:width="100%"
       style:min-height="{minHeight}px"
       style:max-height="{maxHeight}"
@@ -251,15 +251,15 @@
       <Button
         kind="ghost"
         size="small"
-        class="bx--snippet-btn--expand"
+        class="cds--snippet-btn--expand"
         disabled="{disabled}"
         on:click="{() => {
           expanded = !expanded;
         }}"
       >
-        <span class:bx--snippet-btn--text="{true}">{expandText}</span>
+        <span class:cds--snippet-btn--text="{true}">{expandText}</span>
         <ChevronDown
-          class="bx--icon-chevron--down bx--snippet__icon"
+          class="cds--icon-chevron--down cds--snippet__icon"
           aria-label="{expandText}"
         />
       </Button>
diff --git a/src/CodeSnippet/CodeSnippetSkeleton.svelte b/src/CodeSnippet/CodeSnippetSkeleton.svelte
index 64ab8a73..0d4ace64 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:cds--skeleton="{true}"
+  class:cds--snippet="{true}"
+  class:cds--snippet--single="{type === 'single'}"
+  class:cds--snippet--multi="{type === 'multi'}"
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave
 >
-  <div class:bx--snippet-container="{true}">
+  <div class:cds--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 e7e7029a..1252efb2 100644
--- a/src/ComboBox/ComboBox.svelte
+++ b/src/ComboBox/ComboBox.svelte
@@ -217,12 +217,12 @@
   }}"
 />
 
-<div class:bx--list-box__wrapper="{true}">
+<div class:cds--list-box__wrapper="{true}">
   {#if titleText || $$slots.titleText}
     <label
       for="{id}"
-      class:bx--label="{true}"
-      class:bx--label--disabled="{disabled}"
+      class:cds--label="{true}"
+      class:cds--label--disabled="{disabled}"
     >
       <slot name="titleText">
         {titleText}
@@ -230,8 +230,8 @@
     </label>
   {/if}
   <ListBox
-    class="bx--combo-box {direction === 'top' &&
-      'bx--list-box--up'} {!invalid && warn && 'bx--combo-box--warning'}"
+    class="cds--combo-box {direction === 'top' &&
+      'cds--list-box--up'} {!invalid && warn && 'cds--combo-box--warning'}"
     id="{comboId}"
     aria-label="{ariaLabel}"
     disabled="{disabled}"
@@ -273,9 +273,9 @@
         id="{id}"
         name="{name}"
         {...$$restProps}
-        class:bx--text-input="{true}"
-        class:bx--text-input--light="{light}"
-        class:bx--text-input--empty="{value === ''}"
+        class:cds--text-input="{true}"
+        class:cds--text-input--light="{light}"
+        class:cds--text-input--empty="{value === ''}"
         on:input="{({ target }) => {
           if (!open && target.value.length > 0) {
             open = true;
@@ -347,11 +347,11 @@
         on:paste
       />
       {#if invalid}
-        <WarningFilled class="bx--list-box__invalid-icon" />
+        <WarningFilled class="cds--list-box__invalid-icon" />
       {/if}
       {#if !invalid && warn}
         <WarningAltFilled
-          class="bx--list-box__invalid-icon bx--list-box__invalid-icon--warning"
+          class="cds--list-box__invalid-icon cds--list-box__invalid-icon--warning"
         />
       {/if}
       {#if value}
@@ -407,7 +407,7 @@
               {itemToString(item)}
             </slot>
             {#if selectedItem && selectedItem.id === item.id}
-              <Checkmark class="bx--list-box__menu-item__selected-icon" />
+              <Checkmark class="cds--list-box__menu-item__selected-icon" />
             {/if}
           </ListBoxMenuItem>
         {/each}
@@ -416,8 +416,8 @@
   </ListBox>
   {#if !invalid && helperText && !warn}
     <div
-      class:bx--form__helper-text="{true}"
-      class:bx--form__helper-text--disabled="{disabled}"
+      class:cds--form__helper-text="{true}"
+      class:cds--form__helper-text--disabled="{disabled}"
     >
       {helperText}
     </div>
diff --git a/src/ComposedModal/ComposedModal.svelte b/src/ComposedModal/ComposedModal.svelte
index e63f38e6..b24c05e9 100644
--- a/src/ComposedModal/ComposedModal.svelte
+++ b/src/ComposedModal/ComposedModal.svelte
@@ -100,9 +100,9 @@
 <div
   bind:this="{ref}"
   role="presentation"
-  class:bx--modal="{true}"
+  class:cds--modal="{true}"
   class:is-visible="{open}"
-  class:bx--modal--danger="{danger}"
+  class:cds--modal--danger="{danger}"
   {...$$restProps}
   on:keydown
   on:keydown="{(e) => {
@@ -157,10 +157,10 @@
     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:cds--modal-container="{true}"
+    class:cds--modal-container--xs="{size === 'xs'}"
+    class:cds--modal-container--sm="{size === 'sm'}"
+    class:cds--modal-container--lg="{size === 'lg'}"
     class="{containerClass}"
     on:click="{() => {
       didClickInnerModal = true;
diff --git a/src/ComposedModal/ModalBody.svelte b/src/ComposedModal/ModalBody.svelte
index 12b95ef0..1fd47aad 100644
--- a/src/ComposedModal/ModalBody.svelte
+++ b/src/ComposedModal/ModalBody.svelte
@@ -10,13 +10,13 @@
 <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}"
+  class:cds--modal-content="{true}"
+  class:cds--modal-content--with-form="{hasForm}"
+  class:cds--modal-scroll-content="{hasScrollingContent}"
   {...$$restProps}
 >
   <slot />
 </div>
 {#if hasScrollingContent}
-  <div class:bx--modal-content--overflow-indicator="{true}"></div>
+  <div class:cds--modal-content--overflow-indicator="{true}"></div>
 {/if}
diff --git a/src/ComposedModal/ModalFooter.svelte b/src/ComposedModal/ModalFooter.svelte
index a90be397..a7c4ad7f 100644
--- a/src/ComposedModal/ModalFooter.svelte
+++ b/src/ComposedModal/ModalFooter.svelte
@@ -48,8 +48,8 @@
 </script>
 
 <div
-  class:bx--modal-footer="{true}"
-  class:bx--modal-footer--three-button="{secondaryButtons.length === 2}"
+  class:cds--modal-footer="{true}"
+  class:cds--modal-footer--three-button="{secondaryButtons.length === 2}"
   {...$$restProps}
 >
   {#if secondaryButtons.length > 0}
diff --git a/src/ComposedModal/ModalHeader.svelte b/src/ComposedModal/ModalHeader.svelte
index f3b5c069..e718e7b1 100644
--- a/src/ComposedModal/ModalHeader.svelte
+++ b/src/ComposedModal/ModalHeader.svelte
@@ -28,11 +28,11 @@
   $: updateLabel(label);
 </script>
 
-<div class:bx--modal-header="{true}" {...$$restProps}>
+<div class:cds--modal-header="{true}" {...$$restProps}>
   {#if label}
     <h2
-      class:bx--modal-header__label="{true}"
-      class:bx--type-delta="{true}"
+      class:cds--modal-header__label="{true}"
+      class:cds--type-delta="{true}"
       class="{labelClass}"
     >
       {label}
@@ -40,8 +40,8 @@
   {/if}
   {#if title}
     <h3
-      class:bx--modal-header__heading="{true}"
-      class:bx--type-beta="{true}"
+      class:cds--modal-header__heading="{true}"
+      class:cds--type-beta="{true}"
       class="{titleClass}"
     >
       {title}
@@ -51,14 +51,14 @@
   <button
     type="button"
     aria-label="{iconDescription}"
-    class:bx--modal-close="{true}"
+    class:cds--modal-close="{true}"
     class="{closeClass}"
     on:click
     on:click="{closeModal}"
   >
     <Close
       size="{20}"
-      class="bx--modal-close__icon {closeIconClass}"
+      class="cds--modal-close__icon {closeIconClass}"
       aria-hidden="true"
     />
   </button>
diff --git a/src/ContentSwitcher/ContentSwitcher.svelte b/src/ContentSwitcher/ContentSwitcher.svelte
index 8050b753..bcd32148 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--lg="{size === 'lg' || size === 'xl'}"
+  class:cds--content-switcher="{true}"
+  class:cds--content-switcher--sm="{size === 'sm'}"
+  class:cds--content-switcher--lg="{size === 'lg' || size === 'xl'}"
   {...$$restProps}
   on:click
   on:mouseover
diff --git a/src/ContentSwitcher/Switch.svelte b/src/ContentSwitcher/Switch.svelte
index 40b52c71..137ae546 100644
--- a/src/ContentSwitcher/Switch.svelte
+++ b/src/ContentSwitcher/Switch.svelte
@@ -47,8 +47,8 @@
   aria-selected="{selected}"
   disabled="{disabled}"
   id="{id}"
-  class:bx--content-switcher-btn="{true}"
-  class:bx--content-switcher--selected="{selected}"
+  class:cds--content-switcher-btn="{true}"
+  class:cds--content-switcher--selected="{selected}"
   {...$$restProps}
   on:click
   on:click|preventDefault="{() => {
@@ -66,7 +66,7 @@
     }
   }}"
 >
-  <span class:bx--content-switcher__label="{true}">
+  <span class:cds--content-switcher__label="{true}">
     <slot>{text}</slot>
   </span>
 </button>
diff --git a/src/ContextMenu/ContextMenu.svelte b/src/ContextMenu/ContextMenu.svelte
index 1e794f0b..e55dd211 100644
--- a/src/ContextMenu/ContextMenu.svelte
+++ b/src/ContextMenu/ContextMenu.svelte
@@ -160,10 +160,10 @@
   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}"
+  class:cds--menu="{true}"
+  class:cds--menu--open="{open}"
+  class:cds--menu--invisible="{open && x === 0 && y === 0}"
+  class:cds--menu--root="{level === 1}"
   style:left="{x}px"
   style:top="{y}px"
   {...$$restProps}
diff --git a/src/ContextMenu/ContextMenuDivider.svelte b/src/ContextMenu/ContextMenuDivider.svelte
index e37d8b60..91a71b95 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:cds--menu-divider="{true}"></li>
diff --git a/src/ContextMenu/ContextMenuOption.svelte b/src/ContextMenu/ContextMenuOption.svelte
index 6f8e2194..48cb8472 100644
--- a/src/ContextMenu/ContextMenuOption.svelte
+++ b/src/ContextMenu/ContextMenuOption.svelte
@@ -173,14 +173,14 @@
   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'}"
+  class:cds--menu-option="{true}"
+  class:cds--menu-option--disabled="{true}"
+  class:cds--menu-option--active="{subOptions && submenuOpen}"
+  class:cds--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'}"
+    ref.closest('.cds--menu').getAttribute('data-level') === '2'}"
   data-sub="{subOptions}"
   data-id="{id}"
   {...$$restProps}
@@ -240,20 +240,20 @@
 >
   {#if subOptions}
     <div
-      class:bx--menu-option__content="{true}"
-      class:bx--menu-option__content--disabled="{disabled}"
+      class:cds--menu-option__content="{true}"
+      class:cds--menu-option__content--disabled="{disabled}"
     >
       {#if indented}
-        <div class:bx--menu-option__icon="{true}">
+        <div class:cds--menu-option__icon="{true}">
           <slot name="icon">
             <svelte:component this="{icon}" />
           </slot>
         </div>
       {/if}
-      <span class:bx--menu-option__label="{true}" title="{labelText}">
+      <span class:cds--menu-option__label="{true}" title="{labelText}">
         <slot name="labelText">{labelText}</slot>
       </span>
-      <div class:bx--menu-option__info="{true}"><CaretRight /></div>
+      <div class:cds--menu-option__info="{true}"><CaretRight /></div>
     </div>
 
     <ContextMenu
@@ -265,20 +265,20 @@
     </ContextMenu>
   {:else}
     <div
-      class:bx--menu-option__content="{true}"
-      class:bx--menu-option__content--disabled="{disabled}"
+      class:cds--menu-option__content="{true}"
+      class:cds--menu-option__content--disabled="{disabled}"
     >
       {#if indented}
-        <div class:bx--menu-option__icon="{true}">
+        <div class:cds--menu-option__icon="{true}">
           <slot name="icon">
             <svelte:component this="{icon}" />
           </slot>
         </div>
       {/if}
-      <span class:bx--menu-option__label="{true}" title="{labelText}">
+      <span class:cds--menu-option__label="{true}" title="{labelText}">
         <slot name="labelText">{labelText}</slot>
       </span>
-      <div class:bx--menu-option__info="{true}">
+      <div class:cds--menu-option__info="{true}">
         <slot name="shortcutText">{shortcutText}</slot>
       </div>
     </div>
diff --git a/src/CopyButton/CopyButton.svelte b/src/CopyButton/CopyButton.svelte
index c593b5ac..87ccdbe1 100644
--- a/src/CopyButton/CopyButton.svelte
+++ b/src/CopyButton/CopyButton.svelte
@@ -43,11 +43,11 @@
 <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'}"
+  class:cds--copy-btn="{true}"
+  class:cds--copy="{true}"
+  class:cds--copy-btn--animating="{animation}"
+  class:cds--copy-btn--fade-in="{animation === 'fade-in'}"
+  class:cds--copy-btn--fade-out="{animation === 'fade-out'}"
   aria-label="{iconDescription}"
   title="{iconDescription}"
   {...$$restProps}
@@ -71,11 +71,11 @@
     }
   }}"
 >
-  <Copy class="bx--snippet__icon" />
+  <Copy class="cds--snippet__icon" />
   <span
     aria-hidden="true"
-    class:bx--assistive-text="{true}"
-    class:bx--copy-btn__feedback="{true}"
+    class:cds--assistive-text="{true}"
+    class:cds--copy-btn__feedback="{true}"
   >
     {feedback}
   </span>
diff --git a/src/DataTable/DataTable.svelte b/src/DataTable/DataTable.svelte
index f68f979f..1430b519 100644
--- a/src/DataTable/DataTable.svelte
+++ b/src/DataTable/DataTable.svelte
@@ -260,14 +260,14 @@
 
 <TableContainer useStaticWidth="{useStaticWidth}" {...$$restProps}>
   {#if title || $$slots.title || description || $$slots.description}
-    <div class:bx--data-table-header="{true}">
+    <div class:cds--data-table-header="{true}">
       {#if title || $$slots.title}
-        <h4 class:bx--data-table-header__title="{true}">
+        <h4 class:cds--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:cds--data-table-header__description="{true}">
           <slot name="description">{description}</slot>
         </p>
       {/if}
@@ -287,13 +287,13 @@
         {#if expandable}
           <th
             scope="col"
-            class:bx--table-expand="{true}"
+            class:cds--table-expand="{true}"
             data-previous-value="{expanded ? 'collapsed' : undefined}"
           >
             {#if batchExpansion}
               <button
                 type="button"
-                class:bx--table-expand__button="{true}"
+                class:cds--table-expand__button="{true}"
                 on:click="{() => {
                   expanded = !expanded;
                   expandedRowIds = expanded ? expandableRowIds : [];
@@ -301,7 +301,7 @@
                   dispatch('click:header--expand', { expanded });
                 }}"
               >
-                <ChevronRight class="bx--table-expand__svg" />
+                <ChevronRight class="cds--table-expand__svg" />
               </button>
             {/if}
           </th>
@@ -310,7 +310,7 @@
           <th scope="col"></th>
         {/if}
         {#if batchSelection && !radio}
-          <th scope="col" class:bx--table-column-checkbox="{true}">
+          <th scope="col" class:cds--table-column-checkbox="{true}">
             <InlineCheckbox
               bind:ref="{refSelectAll}"
               aria-label="Select all rows"
@@ -375,18 +375,19 @@
           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
-            ? 'bx--parent-row'
-            : ''} {expandable && parentRowId === row.id
-            ? 'bx--expandable-row--hover'
+            ? 'cds--data-table--selected'
+            : ''} {expandedRows[row.id]
+            ? 'cds--expandable-row'
+            : ''} {expandable ? 'cds--parent-row' : ''} {expandable &&
+          parentRowId === row.id
+            ? 'cds--expandable-row--hover'
             : ''}"
           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)
+                /^cds--(overflow-menu|checkbox|radio-button)/.test(name)
               )
             ) {
               return;
@@ -403,7 +404,7 @@
         >
           {#if expandable}
             <TableCell
-              class="bx--table-expand"
+              class="cds--table-expand"
               headers="expand"
               data-previous-value="{!nonExpandableRowIds.includes(row.id) &&
               expandedRows[row.id]
@@ -413,7 +414,7 @@
               {#if !nonExpandableRowIds.includes(row.id)}
                 <button
                   type="button"
-                  class:bx--table-expand__button="{true}"
+                  class:cds--table-expand__button="{true}"
                   aria-label="{expandedRows[row.id]
                     ? 'Collapse current row'
                     : 'Expand current row'}"
@@ -430,15 +431,15 @@
                     });
                   }}"
                 >
-                  <ChevronRight class="bx--table-expand__svg" />
+                  <ChevronRight class="cds--table-expand__svg" />
                 </button>
               {/if}
             </TableCell>
           {/if}
           {#if selectable}
             <td
-              class:bx--table-column-checkbox="{true}"
-              class:bx--table-column-radio="{radio}"
+              class:cds--table-column-checkbox="{true}"
+              class:cds--table-column-radio="{radio}"
             >
               {#if !nonSelectableRowIds.includes(row.id)}
                 {#if radio}
@@ -472,7 +473,7 @@
           {/if}
           {#each tableCellsByRowId[row.id] as cell, j (cell.key)}
             {#if headers[j].empty}
-              <td class:bx--table-column-menu="{headers[j].columnMenu}">
+              <td class:cds--table-column-menu="{headers[j].columnMenu}">
                 <slot
                   name="cell"
                   row="{row}"
@@ -507,7 +508,7 @@
         {#if expandable}
           <tr
             data-child-row
-            class:bx--expandable-row="{true}"
+            class:cds--expandable-row="{true}"
             on:mouseenter="{() => {
               if (nonExpandableRowIds.includes(row.id)) return;
               parentRowId = row.id;
@@ -521,7 +522,7 @@
               <TableCell
                 colspan="{selectable ? headers.length + 2 : headers.length + 1}"
               >
-                <div class:bx--child-row-inner-container="{true}">
+                <div class:cds--child-row-inner-container="{true}">
                   <slot name="expanded-row" row="{row}" />
                 </div>
               </TableCell>
diff --git a/src/DataTable/DataTableSkeleton.svelte b/src/DataTable/DataTableSkeleton.svelte
index 9d759518..857d3fff 100644
--- a/src/DataTable/DataTableSkeleton.svelte
+++ b/src/DataTable/DataTableSkeleton.svelte
@@ -43,35 +43,35 @@
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
-  class:bx--skeleton="{true}"
-  class:bx--data-table-container="{true}"
+  class:cds--skeleton="{true}"
+  class:cds--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:cds--data-table-header="{true}">
+      <div class:cds--data-table-header__title="{true}"></div>
+      <div class:cds--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:cds--table-toolbar="{true}">
+      <div class:cds--toolbar-content="{true}">
         <span
-          class:bx--skeleton="{true}"
-          class:bx--btn="{true}"
-          class:bx--btn--sm="{true}"></span>
+          class:cds--skeleton="{true}"
+          class:cds--btn="{true}"
+          class:cds--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:cds--skeleton="{true}"
+    class:cds--data-table="{true}"
+    class:cds--data-table--compact="{size === 'compact'}"
+    class:cds--data-table--short="{size === 'short'}"
+    class:cds--data-table--tall="{size === 'tall'}"
+    class:cds--data-table--zebra="{zebra}"
     on:click
     on:mouseover
     on:mouseenter
diff --git a/src/DataTable/Table.svelte b/src/DataTable/Table.svelte
index f1d5c81e..22bd5896 100644
--- a/src/DataTable/Table.svelte
+++ b/src/DataTable/Table.svelte
@@ -25,17 +25,17 @@
 </script>
 
 {#if stickyHeader}
-  <section class:bx--data-table_inner-container="{true}" {...$$restProps}>
+  <section class:cds--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}"
+      class:cds--data-table="{true}"
+      class:cds--data-table--compact="{size === 'compact'}"
+      class:cds--data-table--short="{size === 'short'}"
+      class:cds--data-table--tall="{size === 'tall'}"
+      class:cds--data-table--md="{size === 'medium'}"
+      class:cds--data-table--sort="{sortable}"
+      class:cds--data-table--zebra="{zebra}"
+      class:cds--data-table--static="{useStaticWidth}"
+      class:cds--data-table--sticky-header="{stickyHeader}"
       style="{tableStyle}"
     >
       <slot />
@@ -43,15 +43,15 @@
   </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:cds--data-table="{true}"
+    class:cds--data-table--compact="{size === 'compact'}"
+    class:cds--data-table--short="{size === 'short'}"
+    class:cds--data-table--tall="{size === 'tall'}"
+    class:cds--data-table--md="{size === 'medium'}"
+    class:cds--data-table--sort="{sortable}"
+    class:cds--data-table--zebra="{zebra}"
+    class:cds--data-table--static="{useStaticWidth}"
+    class:cds--data-table--sticky-header="{stickyHeader}"
     {...$$restProps}
     style="{tableStyle}"
   >
diff --git a/src/DataTable/TableContainer.svelte b/src/DataTable/TableContainer.svelte
index 59dacf4c..ec8a124a 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:cds--data-table-container="{true}"
+  class:cds--data-table-container--static="{useStaticWidth}"
+  class:cds--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:cds--data-table-header="{true}">
+      <h4 class:cds--data-table-header__title="{true}">{title}</h4>
+      <p class:cds--data-table-header__description="{true}">{description}</p>
     </div>
   {/if}
   <slot />
diff --git a/src/DataTable/TableHeader.svelte b/src/DataTable/TableHeader.svelte
index fb32c7b3..bedf2885 100644
--- a/src/DataTable/TableHeader.svelte
+++ b/src/DataTable/TableHeader.svelte
@@ -43,24 +43,24 @@
   >
     <button
       type="button"
-      class:bx--table-sort="{true}"
-      class:bx--table-sort--active="{active}"
-      class:bx--table-sort--ascending="{active &&
+      class:cds--table-sort="{true}"
+      class:cds--table-sort--active="{active}"
+      class:cds--table-sort--ascending="{active &&
         sortDirection === 'descending'}"
       on:click
     >
-      <div class:bx--table-header-label="{true}">
+      <div class:cds--table-header-label="{true}">
         <slot />
       </div>
       <ArrowUp
         size="{20}"
         aria-label="{ariaLabel}"
-        class="bx--table-sort__icon"
+        class="cds--table-sort__icon"
       />
       <ArrowsVertical
         size="{20}"
         aria-label="{ariaLabel}"
-        class="bx--table-sort__icon-unsorted"
+        class="cds--table-sort__icon-unsorted"
       />
     </button>
   </th>
@@ -74,7 +74,7 @@
     on:mouseenter
     on:mouseleave
   >
-    <div class:bx--table-header-label="{true}">
+    <div class:cds--table-header-label="{true}">
       <slot />
     </div>
   </th>
diff --git a/src/DataTable/Toolbar.svelte b/src/DataTable/Toolbar.svelte
index 99b1f2cf..439a8031 100644
--- a/src/DataTable/Toolbar.svelte
+++ b/src/DataTable/Toolbar.svelte
@@ -24,9 +24,9 @@
 <section
   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'}"
+  class:cds--table-toolbar="{true}"
+  class:cds--table-toolbar--small="{size === 'sm'}"
+  class:cds--table-toolbar--normal="{size === 'default'}"
   style:z-index="{1}"
   {...$$restProps}
 >
diff --git a/src/DataTable/ToolbarBatchActions.svelte b/src/DataTable/ToolbarBatchActions.svelte
index 81a24c9e..f84935c5 100644
--- a/src/DataTable/ToolbarBatchActions.svelte
+++ b/src/DataTable/ToolbarBatchActions.svelte
@@ -76,19 +76,19 @@
 
 {#if !overflowVisible}
   <div
-    class:bx--batch-actions="{true}"
-    class:bx--batch-actions--active="{showActions}"
+    class:cds--batch-actions="{true}"
+    class:cds--batch-actions--active="{showActions}"
     {...$$restProps}
   >
-    <div class:bx--batch-summary="{true}">
-      <p class:bx--batch-summary__para="{true}">
+    <div class:cds--batch-summary="{true}">
+      <p class:cds--batch-summary__para="{true}">
         <span> {formatTotalSelected(batchSelectedIds.length)} </span>
       </p>
     </div>
-    <div class:bx--action-list="{true}">
+    <div class:cds--action-list="{true}">
       <slot />
       <Button
-        class="bx--batch-summary__cancel"
+        class="cds--batch-summary__cancel"
         tabindex="{showActions ? '0' : '-1'}"
         on:click="{cancel}"
       >
diff --git a/src/DataTable/ToolbarContent.svelte b/src/DataTable/ToolbarContent.svelte
index 4045772e..5546b7f5 100644
--- a/src/DataTable/ToolbarContent.svelte
+++ b/src/DataTable/ToolbarContent.svelte
@@ -1,3 +1,3 @@
-<div class:bx--toolbar-content="{true}">
+<div class:cds--toolbar-content="{true}">
   <slot />
 </div>
diff --git a/src/DataTable/ToolbarMenu.svelte b/src/DataTable/ToolbarMenu.svelte
index a769498c..25dff20a 100644
--- a/src/DataTable/ToolbarMenu.svelte
+++ b/src/DataTable/ToolbarMenu.svelte
@@ -17,7 +17,7 @@
   bind:menuRef
   icon="{Settings}"
   {...$$restProps}
-  class="bx--toolbar-action bx--overflow-menu {$$restProps.class}"
+  class="cds--toolbar-action cds--overflow-menu {$$restProps.class}"
   flipped
 >
   <slot />
diff --git a/src/DataTable/ToolbarSearch.svelte b/src/DataTable/ToolbarSearch.svelte
index 94a88969..09f38b9e 100644
--- a/src/DataTable/ToolbarSearch.svelte
+++ b/src/DataTable/ToolbarSearch.svelte
@@ -84,11 +84,11 @@
 
   $: expanded = !!value.length;
   $: classes = [
-    expanded && "bx--toolbar-search-container-active",
+    expanded && "cds--toolbar-search-container-active",
     persistent
-      ? "bx--toolbar-search-container-persistent"
-      : "bx--toolbar-search-container-expandable",
-    disabled && "bx--toolbar-search-container-disabled",
+      ? "cds--toolbar-search-container-persistent"
+      : "cds--toolbar-search-container-expandable",
+    disabled && "cds--toolbar-search-container-disabled",
   ]
     .filter(Boolean)
     .join(" ");
diff --git a/src/DatePicker/DatePicker.svelte b/src/DatePicker/DatePicker.svelte
index bbf96532..bcde2e7b 100644
--- a/src/DatePicker/DatePicker.svelte
+++ b/src/DatePicker/DatePicker.svelte
@@ -240,7 +240,7 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class:bx--form-item="{true}"
+  class:cds--form-item="{true}"
   {...$$restProps}
   on:click
   on:mouseover
@@ -251,13 +251,13 @@
   <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' &&
+    class:cds--date-picker="{true}"
+    class:cds--date-picker--short="{short}"
+    class:cds--date-picker--light="{light}"
+    class:cds--date-picker--simple="{datePickerType === 'simple'}"
+    class:cds--date-picker--single="{datePickerType === 'single'}"
+    class:cds--date-picker--range="{datePickerType === 'range'}"
+    class:cds--date-picker--nolabel="{datePickerType === 'range' &&
       $labelTextEmpty}"
     on:keydown="{(e) => {
       if (calendar?.isOpen && e.key === 'Escape') {
diff --git a/src/DatePicker/DatePickerInput.svelte b/src/DatePicker/DatePickerInput.svelte
index a116b64a..17daeb8a 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:cds--date-picker-container="{true}"
+  class:cds--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}"
+      class:cds--label="{true}"
+      class:cds--visually-hidden="{hideLabel}"
+      class:cds--label--disabled="{disabled}"
     >
       <slot name="labelText">
         {labelText}
@@ -95,9 +95,9 @@
     </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:cds--date-picker-input__wrapper="{true}"
+    class:cds--date-picker-input__wrapper--invalid="{invalid}"
+    class:cds--date-picker-input__wrapper--warn="{warn}"
   >
     <input
       bind:this="{ref}"
@@ -114,10 +114,10 @@
           ? $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--lg="{size === 'lg' || size === 'xl'}"
+      class:cds--date-picker__input="{true}"
+      class:cds--date-picker__input--invalid="{invalid}"
+      class:cds--date-picker__input--sm="{size === 'sm'}"
+      class:cds--date-picker__input--lg="{size === 'lg' || size === 'xl'}"
       on:input
       on:input="{({ target }) => {
         updateValue({ type: 'input', value: target.value });
@@ -140,32 +140,32 @@
     />
     {#if invalid}
       <WarningFilled
-        class="bx--date-picker__icon bx--date-picker__icon--invalid"
+        class="cds--date-picker__icon cds--date-picker__icon--invalid"
       />
     {/if}
     {#if !invalid && warn}
       <WarningAltFilled
-        class="bx--date-picker__icon bx--date-picker__icon--warn"
+        class="cds--date-picker__icon cds--date-picker__icon--warn"
       />
     {/if}
     {#if $hasCalendar && !invalid && !warn}
       <Calendar
-        class="bx--date-picker__icon"
+        class="cds--date-picker__icon"
         aria-label="{iconDescription}"
         on:click="{openCalendar}"
       />
     {/if}
   </div>
   {#if invalid}
-    <div class:bx--form-requirement="{true}">{invalidText}</div>
+    <div class:cds--form-requirement="{true}">{invalidText}</div>
   {/if}
   {#if !invalid && warn}
-    <div class:bx--form-requirement="{true}">{warnText}</div>
+    <div class:cds--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:cds--form__helper-text="{true}"
+      class:cds--form__helper-text--disabled="{disabled}"
     >
       {helperText}
     </div>
diff --git a/src/DatePicker/DatePickerSkeleton.svelte b/src/DatePicker/DatePickerSkeleton.svelte
index cabbd8fc..086776ba 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:cds--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:cds--date-picker="{true}"
+    class:cds--skeleton="{true}"
+    class:cds--date-picker--range="{true}"
+    class:cds--date-picker--short="{!range}"
+    class:cds--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:cds--date-picker-container="{true}">
+        <label for="{id}" class:cds--label="{true}"></label>
         <div
-          class:bx--date-picker__input="{true}"
-          class:bx--skeleton="{true}"
+          class:cds--date-picker__input="{true}"
+          class:cds--skeleton="{true}"
         ></div>
       </div>
     {/each}
diff --git a/src/DatePicker/createCalendar.js b/src/DatePicker/createCalendar.js
index b40f4cb3..c8401771 100644
--- a/src/DatePicker/createCalendar.js
+++ b/src/DatePicker/createCalendar.js
@@ -11,19 +11,19 @@ function updateClasses(instance) {
     selectedDates,
   } = instance;
 
-  calendarContainer.classList.add("bx--date-picker__calendar");
+  calendarContainer.classList.add("cds--date-picker__calendar");
   calendarContainer
     .querySelector(".flatpickr-month")
-    .classList.add("bx--date-picker__month");
+    .classList.add("cds--date-picker__month");
 
-  weekdayContainer.classList.add("bx--date-picker__weekdays");
+  weekdayContainer.classList.add("cds--date-picker__weekdays");
   weekdayContainer.querySelectorAll(".flatpickr-weekday").forEach((node) => {
-    node.classList.add("bx--date-picker__weekday");
+    node.classList.add("cds--date-picker__weekday");
   });
 
-  daysContainer.classList.add("bx--date-picker__days");
+  daysContainer.classList.add("cds--date-picker__days");
   days.querySelectorAll(".flatpickr-day").forEach((node) => {
-    node.classList.add("bx--date-picker__day");
+    node.classList.add("cds--date-picker__day");
     if (node.classList.contains("today") && selectedDates.length > 0) {
       node.classList.add("no-border");
     } else if (node.classList.contains("today") && selectedDates.length === 0) {
diff --git a/src/Dropdown/Dropdown.svelte b/src/Dropdown/Dropdown.svelte
index 087eb3a4..f882cb70 100644
--- a/src/Dropdown/Dropdown.svelte
+++ b/src/Dropdown/Dropdown.svelte
@@ -174,19 +174,19 @@
 <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:cds--dropdown__wrapper="{true}"
+  class:cds--list-box__wrapper="{true}"
+  class:cds--dropdown__wrapper--inline="{inline}"
+  class:cds--list-box__wrapper--inline="{inline}"
+  class:cds--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}"
+      class:cds--label="{true}"
+      class:cds--label--disabled="{disabled}"
+      class:cds--visually-hidden="{hideLabel}"
     >
       {titleText}
     </label>
@@ -197,16 +197,16 @@
     size="{size}"
     name="{name}"
     aria-label="{$$props['aria-label']}"
-    class="bx--dropdown
-      {direction === 'top' && 'bx--list-box--up'}
-      {invalid && 'bx--dropdown--invalid'}
-      {!invalid && warn && 'bx--dropdown--warning'}
-      {open && 'bx--dropdown--open'}
-      {size === 'sm' && 'bx--dropdown--sm'}
-      {(size === 'lg' || size === 'xl') && 'bx--dropdown--lg'}
-      {inline && 'bx--dropdown--inline'}
-      {disabled && 'bx--dropdown--disabled'}
-      {light && 'bx--dropdown--light'}"
+    class="cds--dropdown
+      {direction === 'top' && 'cds--list-box--up'}
+      {invalid && 'cds--dropdown--invalid'}
+      {!invalid && warn && 'cds--dropdown--warning'}
+      {open && 'cds--dropdown--open'}
+      {size === 'sm' && 'cds--dropdown--sm'}
+      {(size === 'lg' || size === 'xl') && 'cds--dropdown--lg'}
+      {inline && 'cds--dropdown--inline'}
+      {disabled && 'cds--dropdown--disabled'}
+      {light && 'cds--dropdown--light'}"
     on:click="{({ target }) => {
       if (disabled) return;
       open = ref.contains(target) ? !open : false;
@@ -220,17 +220,17 @@
     warnText="{warnText}"
   >
     {#if invalid}
-      <WarningFilled class="bx--list-box__invalid-icon" />
+      <WarningFilled class="cds--list-box__invalid-icon" />
     {/if}
     {#if !invalid && warn}
       <WarningAltFilled
-        class="bx--list-box__invalid-icon bx--list-box__invalid-icon--warning"
+        class="cds--list-box__invalid-icon cds--list-box__invalid-icon--warning"
       />
     {/if}
     <button
       bind:this="{ref}"
       type="button"
-      class:bx--list-box__field="{true}"
+      class:cds--list-box__field="{true}"
       tabindex="0"
       aria-expanded="{open}"
       on:keydown="{(e) => {
@@ -283,7 +283,7 @@
       translateWithId="{translateWithId}"
       id="{id}"
     >
-      <span class:bx--list-box__label="{true}">
+      <span class:cds--list-box__label="{true}">
         {#if selectedItem}{itemToString(selectedItem)}{:else}{label}{/if}
       </span>
       <ListBoxMenuIcon
@@ -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:cds--form__helper-text="{true}"
+      class:cds--form__helper-text--disabled="{disabled}"
     >
       {helperText}
     </div>
diff --git a/src/Dropdown/DropdownSkeleton.svelte b/src/Dropdown/DropdownSkeleton.svelte
index 239c8b1b..fadd0434 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:cds--skeleton="{true}"
+  class:cds--dropdown-v2="{true}"
+  class:cds--list-box="{true}"
+  class:cds--form-item="{true}"
+  class:cds--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:cds--list-box__field="{true}">
+    <span class:cds--list-box__label="{true}"></span>
   </div>
 </div>
diff --git a/src/FileUploader/FileUploader.svelte b/src/FileUploader/FileUploader.svelte
index 45434543..2931a9dd 100644
--- a/src/FileUploader/FileUploader.svelte
+++ b/src/FileUploader/FileUploader.svelte
@@ -108,7 +108,7 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class:bx--form-item="{true}"
+  class:cds--form-item="{true}"
   {...$$restProps}
   on:click
   on:mouseover
@@ -117,8 +117,8 @@
 >
   {#if labelTitle || $$slots.labelTitle}
     <p
-      class:bx--file--label="{true}"
-      class:bx--label-description--disabled="{disabled}"
+      class:cds--file--label="{true}"
+      class:cds--label-description--disabled="{disabled}"
     >
       <slot name="labelTitle">
         {labelTitle}
@@ -127,8 +127,8 @@
   {/if}
   {#if labelDescription || $$slots.labelDescription}
     <p
-      class:bx--label-description="{true}"
-      class:bx--label-description--disabled="{disabled}"
+      class:cds--label-description="{true}"
+      class:cds--label-description--disabled="{disabled}"
     >
       <slot name="labelDescription">
         {labelDescription}
@@ -149,11 +149,11 @@
       files = e.detail;
     }}"
   />
-  <div class:bx--file-container="{true}">
+  <div class:cds--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:cds--file__selected-file="{true}">
+        <p class:cds--file-filename="{true}">{name}</p>
+        <span class:cds--file__state-container="{true}">
           <Filename
             iconDescription="{iconDescription}"
             status="{status}"
diff --git a/src/FileUploader/FileUploaderButton.svelte b/src/FileUploader/FileUploaderButton.svelte
index 937f5161..adc20c20 100644
--- a/src/FileUploader/FileUploaderButton.svelte
+++ b/src/FileUploader/FileUploaderButton.svelte
@@ -72,19 +72,19 @@
   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'}"
+  class:cds--btn="{true}"
+  class:cds--btn--disabled="{disabled}"
+  class:cds--btn--primary="{kind === 'primary'}"
+  class:cds--btn--secondary="{kind === 'secondary'}"
+  class:cds--btn--tertiary="{kind === 'tertiary'}"
+  class:cds--btn--ghost="{kind === 'ghost'}"
+  class:cds--btn--danger="{kind === 'danger'}"
+  class:cds--btn--danger-tertiary="{kind === 'danger-tertiary'}"
+  class:cds--btn--danger-ghost="{kind === 'danger-ghost'}"
+  class:cds--btn--sm="{size === 'small'}"
+  class:cds--btn--field="{size === 'field'}"
+  class:cds--btn--lg="{size === 'lg'}"
+  class:cds--btn--xl="{size === 'xl'}"
   on:keydown
   on:keydown="{({ key }) => {
     if (key === ' ' || key === 'Enter') {
@@ -107,7 +107,7 @@
   id="{id}"
   multiple="{multiple}"
   name="{name}"
-  class:bx--visually-hidden="{true}"
+  class:cds--visually-hidden="{true}"
   {...$$restProps}
   on:change|stopPropagation="{({ target }) => {
     files = [...target.files];
diff --git a/src/FileUploader/FileUploaderDropContainer.svelte b/src/FileUploader/FileUploaderDropContainer.svelte
index 522df22c..f2142337 100644
--- a/src/FileUploader/FileUploaderDropContainer.svelte
+++ b/src/FileUploader/FileUploaderDropContainer.svelte
@@ -56,7 +56,7 @@
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class:bx--file="{true}"
+  class:cds--file="{true}"
   {...$$restProps}
   on:dragover
   on:dragover|preventDefault|stopPropagation="{({ dataTransfer }) => {
@@ -87,8 +87,8 @@
   <label
     for="{id}"
     tabindex="{tabindex}"
-    class:bx--file-browse-btn="{true}"
-    class:bx--file-browse-btn--disabled="{disabled}"
+    class:cds--file-browse-btn="{true}"
+    class:cds--file-browse-btn--disabled="{disabled}"
     on:keydown
     on:keydown="{({ key }) => {
       if (key === ' ' || key === 'Enter') {
@@ -98,8 +98,8 @@
   >
     <div
       role="{role}"
-      class:bx--file__drop-container="{true}"
-      class:bx--file__drop-container--drag-over="{over}"
+      class:cds--file__drop-container="{true}"
+      class:cds--file__drop-container--drag-over="{over}"
     >
       <slot name="labelText">
         {labelText}
@@ -115,7 +115,7 @@
     accept="{accept}"
     name="{name}"
     multiple="{multiple}"
-    class:bx--file-input="{true}"
+    class:cds--file-input="{true}"
     on:change="{({ target }) => {
       files = validateFiles([...target.files]);
       dispatch('add', files);
diff --git a/src/FileUploader/FileUploaderItem.svelte b/src/FileUploader/FileUploaderItem.svelte
index ad852337..85e7473c 100644
--- a/src/FileUploader/FileUploaderItem.svelte
+++ b/src/FileUploader/FileUploaderItem.svelte
@@ -43,17 +43,17 @@
 <!-- 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 === 'md' || size === 'field'}"
-  class:bx--file__selected-file--sm="{size === 'sm' || size === 'small'}"
+  class:cds--file__selected-file="{true}"
+  class:cds--file__selected-file--invalid="{invalid}"
+  class:cds--file__selected-file--md="{size === 'md' || size === 'field'}"
+  class:cds--file__selected-file--sm="{size === '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:cds--file-filename="{true}">{name}</p>
+  <span class:cds--file__state-container="{true}">
     <Filename
       on:keydown="{({ key }) => {
         if (key === ' ' || key === 'Enter') {
@@ -69,10 +69,10 @@
     />
   </span>
   {#if invalid && errorSubject}
-    <div class:bx--form-requirement="{true}">
-      <div class:bx--form-requirement__title="{true}">{errorSubject}</div>
+    <div class:cds--form-requirement="{true}">
+      <div class:cds--form-requirement__title="{true}">{errorSubject}</div>
       {#if errorBody}
-        <p class:bx--form-requirement__supplement="{true}">{errorBody}</p>
+        <p class:cds--form-requirement__supplement="{true}">{errorBody}</p>
       {/if}
     </div>
   {/if}
diff --git a/src/FileUploader/FileUploaderSkeleton.svelte b/src/FileUploader/FileUploaderSkeleton.svelte
index 92e7fab1..68042b07 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:cds--form-item="{true}"
   {...$$restProps}
   on:click
   on:mouseover
@@ -14,6 +14,6 @@
   on:mouseleave
 >
   <SkeletonText heading width="100px" />
-  <SkeletonText width="225px" class="bx--label-description" />
+  <SkeletonText width="225px" class="cds--label-description" />
   <ButtonSkeleton />
 </div>
diff --git a/src/FileUploader/Filename.svelte b/src/FileUploader/Filename.svelte
index 52828e25..9a6d8c25 100644
--- a/src/FileUploader/Filename.svelte
+++ b/src/FileUploader/Filename.svelte
@@ -32,11 +32,11 @@
 
 {#if status === "edit"}
   {#if invalid}
-    <WarningFilled class="bx--file-invalid" />
+    <WarningFilled class="cds--file-invalid" />
   {/if}
   <button
     aria-label="{iconDescription}"
-    class:bx--file-close="{true}"
+    class:cds--file-close="{true}"
     type="button"
     tabindex="0"
     {...$$restProps}
@@ -51,7 +51,7 @@
   <CheckmarkFilled
     aria-label="{iconDescription}"
     title="{iconDescription}"
-    class="bx--file-complete"
+    class="cds--file-complete"
     {...$$restProps}
   />
 {/if}
diff --git a/src/FluidForm/FluidForm.svelte b/src/FluidForm/FluidForm.svelte
index cf79c0af..d58bf699 100644
--- a/src/FluidForm/FluidForm.svelte
+++ b/src/FluidForm/FluidForm.svelte
@@ -11,7 +11,7 @@
 
 <Form
   {...$$restProps}
-  class="bx--form--fluid {$$restProps.class}"
+  class="cds--form--fluid {$$restProps.class}"
   on:click
   on:keydown
   on:mouseover
diff --git a/src/Form/Form.svelte b/src/Form/Form.svelte
index 84df00b9..76f714ba 100644
--- a/src/Form/Form.svelte
+++ b/src/Form/Form.svelte
@@ -6,7 +6,7 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <form
-  class:bx--form="{true}"
+  class:cds--form="{true}"
   bind:this="{ref}"
   {...$$restProps}
   on:click
diff --git a/src/FormGroup/FormGroup.svelte b/src/FormGroup/FormGroup.svelte
index 124e1f12..a81c90be 100644
--- a/src/FormGroup/FormGroup.svelte
+++ b/src/FormGroup/FormGroup.svelte
@@ -22,8 +22,8 @@
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <fieldset
   data-invalid="{invalid || undefined}"
-  class:bx--fieldset="{true}"
-  class:bx--fieldset--no-margin="{noMargin}"
+  class:cds--fieldset="{true}"
+  class:cds--fieldset--no-margin="{noMargin}"
   aria-labelledby="{$$restProps['aria-labelledby'] || legendId}"
   {...$$restProps}
   on:click
@@ -33,12 +33,12 @@
 >
   {#if legendText}
     <legend
-      class:bx--label="{true}"
+      class:cds--label="{true}"
       id="{legendId || $$restProps['aria-labelledby']}">{legendText}</legend
     >
   {/if}
   <slot />
   {#if message}
-    <div class:bx--form__requirement="{true}">{messageText}</div>
+    <div class:cds--form__requirement="{true}">{messageText}</div>
   {/if}
 </fieldset>
diff --git a/src/FormItem/FormItem.svelte b/src/FormItem/FormItem.svelte
index 8a3ff77d..372e4450 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:cds--form-item="{true}"
   {...$$restProps}
   on:click
   on:mouseover
diff --git a/src/FormLabel/FormLabel.svelte b/src/FormLabel/FormLabel.svelte
index fdf4c8bb..afbeb4b9 100644
--- a/src/FormLabel/FormLabel.svelte
+++ b/src/FormLabel/FormLabel.svelte
@@ -6,7 +6,7 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <label
-  class:bx--label="{true}"
+  class:cds--label="{true}"
   for="{id}"
   {...$$restProps}
   on:click
diff --git a/src/Grid/Column.svelte b/src/Grid/Column.svelte
index aa1e0c21..f00177e9 100644
--- a/src/Grid/Column.svelte
+++ b/src/Grid/Column.svelte
@@ -72,20 +72,20 @@
       const name = breakpoints[i];
 
       if (breakpoint === true) {
-        return `bx--col-${name}`;
+        return `cds--col-${name}`;
       } else if (typeof breakpoint === "number") {
-        return `bx--col-${name}-${breakpoint}`;
+        return `cds--col-${name}-${breakpoint}`;
       } else if (typeof breakpoint === "object") {
         let bp = [];
 
         if (typeof breakpoint.span === "number") {
-          bp = [...bp, `bx--col-${name}-${breakpoint.span}`];
+          bp = [...bp, `cds--col-${name}-${breakpoint.span}`];
         } else if (breakpoint.span === true) {
-          bp = [...bp, `bx--col-${name}`];
+          bp = [...bp, `cds--col-${name}`];
         }
 
         if (typeof breakpoint.offset === "number") {
-          bp = [...bp, `bx--offset-${name}-${breakpoint.offset}`];
+          bp = [...bp, `cds--offset-${name}-${breakpoint.offset}`];
         }
 
         return bp.join(" ");
@@ -98,12 +98,12 @@
     class: [
       $$restProps.class,
       columnClass,
-      !columnClass && "bx--col",
-      noGutter && "bx--no-gutter",
-      noGutterLeft && "bx--no-gutter--left",
-      noGutterRight && "bx--no-gutter--right",
-      aspectRatio && `bx--aspect-ratio bx--aspect-ratio--${aspectRatio}`,
-      padding && "bx--col-padding",
+      !columnClass && "cds--col",
+      noGutter && "cds--no-gutter",
+      noGutterLeft && "cds--no-gutter--left",
+      noGutterRight && "cds--no-gutter--right",
+      aspectRatio && `cds--aspect-ratio cds--aspect-ratio--${aspectRatio}`,
+      padding && "cds--col-padding",
     ]
       .filter(Boolean)
       .join(" "),
diff --git a/src/Grid/Grid.svelte b/src/Grid/Grid.svelte
index 113f91f6..45d89221 100644
--- a/src/Grid/Grid.svelte
+++ b/src/Grid/Grid.svelte
@@ -35,14 +35,14 @@
     ...$$restProps,
     class: [
       $$restProps.class,
-      "bx--grid",
-      condensed && "bx--grid--condensed",
-      narrow && "bx--grid--narrow",
-      fullWidth && "bx--grid--full-width",
-      noGutter && "bx--no-gutter",
-      noGutterLeft && "bx--no-gutter--left",
-      noGutterRight && "bx--no-gutter--right",
-      padding && "bx--row-padding",
+      "cds--grid",
+      condensed && "cds--grid--condensed",
+      narrow && "cds--grid--narrow",
+      fullWidth && "cds--grid--full-width",
+      noGutter && "cds--no-gutter",
+      noGutterLeft && "cds--no-gutter--left",
+      noGutterRight && "cds--no-gutter--right",
+      padding && "cds--row-padding",
     ]
       .filter(Boolean)
       .join(" "),
diff --git a/src/Grid/Row.svelte b/src/Grid/Row.svelte
index fc9058e9..65cad671 100644
--- a/src/Grid/Row.svelte
+++ b/src/Grid/Row.svelte
@@ -32,13 +32,13 @@
     ...$$restProps,
     class: [
       $$restProps.class,
-      "bx--row",
-      condensed && "bx--row--condensed",
-      narrow && "bx--row--narrow",
-      noGutter && "bx--no-gutter",
-      noGutterLeft && "bx--no-gutter--left",
-      noGutterRight && "bx--no-gutter--right",
-      padding && "bx--row-padding",
+      "cds--row",
+      condensed && "cds--row--condensed",
+      narrow && "cds--row--narrow",
+      noGutter && "cds--no-gutter",
+      noGutterLeft && "cds--no-gutter--left",
+      noGutterRight && "cds--no-gutter--right",
+      padding && "cds--row-padding",
     ]
       .filter(Boolean)
       .join(" "),
diff --git a/src/InlineLoading/InlineLoading.svelte b/src/InlineLoading/InlineLoading.svelte
index a560cb1a..13fed573 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:cds--inline-loading="{true}"
   aria-live="assertive"
   {...$$restProps}
   on:click
@@ -56,15 +56,15 @@
   on:mouseenter
   on:mouseleave
 >
-  <div class:bx--inline-loading__animation="{true}">
+  <div class:cds--inline-loading__animation="{true}">
     {#if status === "error"}
       <ErrorFilled
-        class="bx--inline-loading--error"
+        class="cds--inline-loading--error"
         title="{iconDescription || status}"
       />
     {:else if status === "finished"}
       <CheckmarkFilled
-        class="bx--inline-loading__checkmark-container"
+        class="cds--inline-loading__checkmark-container"
         title="{iconDescription || status}"
       />
     {:else if status === "inactive" || status === "active"}
@@ -77,6 +77,6 @@
     {/if}
   </div>
   {#if description}
-    <div class:bx--inline-loading__text="{true}">{description}</div>
+    <div class:cds--inline-loading__text="{true}">{description}</div>
   {/if}
 </div>
diff --git a/src/Link/Link.svelte b/src/Link/Link.svelte
index fc680c3e..63191743 100644
--- a/src/Link/Link.svelte
+++ b/src/Link/Link.svelte
@@ -38,10 +38,10 @@
   <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
   <p
     bind:this="{ref}"
-    class:bx--link="{true}"
-    class:bx--link--disabled="{disabled}"
-    class:bx--link--inline="{inline}"
-    class:bx--link--visited="{visited}"
+    class:cds--link="{true}"
+    class:cds--link--disabled="{disabled}"
+    class:cds--link--inline="{inline}"
+    class:cds--link--visited="{visited}"
     {...$$restProps}
     on:click
     on:mouseover
@@ -50,7 +50,7 @@
   >
     <slot />
     {#if !inline && ($$slots.icon || icon)}
-      <div class:bx--link__icon="{true}">
+      <div class:cds--link__icon="{true}">
         <slot name="icon">
           <svelte:component this="{icon}" />
         </slot>
@@ -60,12 +60,12 @@
 {: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'}"
+    class:cds--link="{true}"
+    class:cds--link--disabled="{disabled}"
+    class:cds--link--inline="{inline}"
+    class:cds--link--visited="{visited}"
+    class:cds--link--sm="{size === 'sm'}"
+    class:cds--link--lg="{size === 'lg'}"
     rel="{$$restProps.target === '_blank' ? 'noopener noreferrer' : undefined}"
     href="{href}"
     {...$$restProps}
@@ -76,7 +76,7 @@
   >
     <slot />
     {#if !inline && ($$slots.icon || icon)}
-      <div class:bx--link__icon="{true}">
+      <div class:cds--link__icon="{true}">
         <slot name="icon">
           <svelte:component this="{icon}" />
         </slot>
diff --git a/src/ListBox/ListBox.svelte b/src/ListBox/ListBox.svelte
index e00f2338..644ae340 100644
--- a/src/ListBox/ListBox.svelte
+++ b/src/ListBox/ListBox.svelte
@@ -37,14 +37,14 @@
   role="listbox"
   tabindex="-1"
   data-invalid="{invalid || undefined}"
-  class:bx--list-box="{true}"
-  class:bx--list-box--sm="{size === 'sm'}"
-  class:bx--list-box--lg="{size === 'lg' || 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}"
+  class:cds--list-box="{true}"
+  class:cds--list-box--sm="{size === 'sm'}"
+  class:cds--list-box--lg="{size === 'lg' || size === 'xl'}"
+  class:cds--list-box--inline="{type === 'inline'}"
+  class:cds--list-box--disabled="{disabled}"
+  class:cds--list-box--expanded="{open}"
+  class:cds--list-box--light="{light}"
+  class:cds--list-box--warning="{!invalid && warn}"
   {...$$restProps}
   on:keydown
   on:keydown="{(e) => {
@@ -57,8 +57,8 @@
   <slot />
 </div>
 {#if invalid}
-  <div class:bx--form-requirement="{true}">{invalidText}</div>
+  <div class:cds--form-requirement="{true}">{invalidText}</div>
 {/if}
 {#if !invalid && warn}
-  <div class:bx--form-requirement="{true}">{warnText}</div>
+  <div class:cds--form-requirement="{true}">{warnText}</div>
 {/if}
diff --git a/src/ListBox/ListBoxField.svelte b/src/ListBox/ListBoxField.svelte
index c1094ae2..c480b042 100644
--- a/src/ListBox/ListBoxField.svelte
+++ b/src/ListBox/ListBoxField.svelte
@@ -55,7 +55,7 @@
     ? translateWithId('close')
     : translateWithId('open')}"
   tabindex="{disabled ? '-1' : tabindex}"
-  class:bx--list-box__field="{true}"
+  class:cds--list-box__field="{true}"
   {...$$restProps}
   on:click
   on:mouseover
diff --git a/src/ListBox/ListBoxMenu.svelte b/src/ListBox/ListBoxMenu.svelte
index 1196ad70..ebee4da4 100644
--- a/src/ListBox/ListBoxMenu.svelte
+++ b/src/ListBox/ListBoxMenu.svelte
@@ -10,7 +10,7 @@
   bind:this="{ref}"
   role="listbox"
   id="menu-{id}"
-  class:bx--list-box__menu="{true}"
+  class:cds--list-box__menu="{true}"
   {...$$restProps}
   on:scroll
 >
diff --git a/src/ListBox/ListBoxMenuIcon.svelte b/src/ListBox/ListBoxMenuIcon.svelte
index 63235482..f1bf1d1e 100644
--- a/src/ListBox/ListBoxMenuIcon.svelte
+++ b/src/ListBox/ListBoxMenuIcon.svelte
@@ -29,8 +29,8 @@
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class:bx--list-box__menu-icon="{true}"
-  class:bx--list-box__menu-icon--open="{open}"
+  class:cds--list-box__menu-icon="{true}"
+  class:cds--list-box__menu-icon--open="{open}"
   {...$$restProps}
   on:click|preventDefault
 >
diff --git a/src/ListBox/ListBoxMenuItem.svelte b/src/ListBox/ListBoxMenuItem.svelte
index 28e4eae3..11725c1c 100644
--- a/src/ListBox/ListBoxMenuItem.svelte
+++ b/src/ListBox/ListBoxMenuItem.svelte
@@ -21,9 +21,9 @@
 <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}"
+  class:cds--list-box__menu-item="{true}"
+  class:cds--list-box__menu-item--active="{active}"
+  class:cds--list-box__menu-item--highlighted="{highlighted || active}"
   aria-selected="{active}"
   disabled="{disabled ? true : undefined}"
   {...$$restProps}
@@ -34,7 +34,7 @@
   <div
     bind:this="{ref}"
     title="{title}"
-    class:bx--list-box__menu-item__option="{true}"
+    class:cds--list-box__menu-item__option="{true}"
   >
     <slot />
   </div>
diff --git a/src/ListBox/ListBoxSelection.svelte b/src/ListBox/ListBoxSelection.svelte
index dec717da..02a0641e 100644
--- a/src/ListBox/ListBoxSelection.svelte
+++ b/src/ListBox/ListBoxSelection.svelte
@@ -51,19 +51,19 @@
 
 {#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:cds--tag="{true}"
+    class:cds--tag--filter="{true}"
+    class:cds--tag--high-contrast="{true}"
+    class:cds--tag--disabled="{disabled}"
   >
-    <span class:bx--tag__label="{true}" title="{selectionCount}">
+    <span class:cds--tag__label="{true}" title="{selectionCount}">
       {selectionCount}
     </span>
     <div
       bind:this="{ref}"
       role="button"
       tabindex="{disabled ? -1 : 0}"
-      class:bx--tag__close-icon="{true}"
+      class:cds--tag__close-icon="{true}"
       on:click|preventDefault|stopPropagation="{(e) => {
         if (!disabled) {
           dispatch('clear', e);
@@ -88,9 +88,9 @@
     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}"
+    class:cds--list-box__selection="{true}"
+    class:cds--tag--filter="{selectionCount}"
+    class:cds--list-box__selection--multi="{selectionCount}"
     {...$$restProps}
     on:click|preventDefault|stopPropagation="{(e) => {
       if (!disabled) {
diff --git a/src/ListItem/ListItem.svelte b/src/ListItem/ListItem.svelte
index 3e7e6f8b..6c328389 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:cds--list__item="{true}"
   {...$$restProps}
   on:click
   on:mouseover
diff --git a/src/Loading/Loading.svelte b/src/Loading/Loading.svelte
index efbd07e3..6fa8371d 100644
--- a/src/Loading/Loading.svelte
+++ b/src/Loading/Loading.svelte
@@ -16,28 +16,28 @@
 
 {#if withOverlay}
   <div
-    class:bx--loading-overlay="{true}"
-    class:bx--loading-overlay--stop="{!active}"
+    class:cds--loading-overlay="{true}"
+    class:cds--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}"
+      class:cds--loading="{true}"
+      class:cds--loading--small="{small}"
+      class:cds--loading--stop="{!active}"
     >
-      <svg class:bx--loading__svg="{true}" viewBox="0 0 100 100">
+      <svg class:cds--loading__svg="{true}" viewBox="0 0 100 100">
         <title>{description}</title>
         {#if small}
           <circle
-            class:bx--loading__background="{true}"
+            class:cds--loading__background="{true}"
             cx="50%"
             cy="50%"
             r="{spinnerRadius}"></circle>
         {/if}
         <circle
-          class:bx--loading__stroke="{true}"
+          class:cds--loading__stroke="{true}"
           cx="50%"
           cy="50%"
           r="{spinnerRadius}"></circle>
@@ -48,22 +48,22 @@
   <div
     aria-atomic="true"
     aria-live="{active ? 'assertive' : 'off'}"
-    class:bx--loading="{true}"
-    class:bx--loading--small="{small}"
-    class:bx--loading--stop="{!active}"
+    class:cds--loading="{true}"
+    class:cds--loading--small="{small}"
+    class:cds--loading--stop="{!active}"
     {...$$restProps}
   >
-    <svg class:bx--loading__svg="{true}" viewBox="0 0 100 100">
+    <svg class:cds--loading__svg="{true}" viewBox="0 0 100 100">
       <title>{description}</title>
       {#if small}
         <circle
-          class:bx--loading__background="{true}"
+          class:cds--loading__background="{true}"
           cx="50%"
           cy="50%"
           r="{spinnerRadius}"></circle>
       {/if}
       <circle
-        class:bx--loading__stroke="{true}"
+        class:cds--loading__stroke="{true}"
         cx="50%"
         cy="50%"
         r="{spinnerRadius}"></circle>
diff --git a/src/Modal/Modal.svelte b/src/Modal/Modal.svelte
index 4ce6d848..d75eeb29 100644
--- a/src/Modal/Modal.svelte
+++ b/src/Modal/Modal.svelte
@@ -125,9 +125,9 @@
     }
   });
 
-  $: modalLabelId = `bx--modal-header__label--modal-${id}`;
-  $: modalHeadingId = `bx--modal-header__heading--modal-${id}`;
-  $: modalBodyId = `bx--modal-body--${id}`;
+  $: modalLabelId = `cds--modal-header__label--modal-${id}`;
+  $: modalHeadingId = `cds--modal-header__heading--modal-${id}`;
+  $: modalBodyId = `cds--modal-body--${id}`;
   $: ariaLabel =
     modalLabel || $$props["aria-label"] || modalAriaLabel || modalHeading;
 </script>
@@ -137,10 +137,10 @@
   bind:this="{ref}"
   role="presentation"
   id="{id}"
-  class:bx--modal="{true}"
-  class:bx--modal-tall="{!passiveModal}"
+  class:cds--modal="{true}"
+  class:cds--modal-tall="{!passiveModal}"
   class:is-visible="{open}"
-  class:bx--modal--danger="{danger}"
+  class:cds--modal--danger="{danger}"
   {...$$restProps}
   on:keydown
   on:keydown="{(e) => {
@@ -199,34 +199,38 @@
     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'}"
+    class:cds--modal-container="{true}"
+    class:cds--modal-container--xs="{size === 'xs'}"
+    class:cds--modal-container--sm="{size === 'sm'}"
+    class:cds--modal-container--lg="{size === 'lg'}"
     on:click="{() => {
       didClickInnerModal = true;
     }}"
   >
-    <div class:bx--modal-header="{true}">
+    <div class:cds--modal-header="{true}">
       {#if passiveModal}
         <button
           bind:this="{buttonRef}"
           type="button"
           aria-label="{iconDescription}"
-          class:bx--modal-close="{true}"
+          class:cds--modal-close="{true}"
           on:click="{() => {
             open = false;
           }}"
         >
-          <Close size="{20}" class="bx--modal-close__icon" aria-hidden="true" />
+          <Close
+            size="{20}"
+            class="cds--modal-close__icon"
+            aria-hidden="true"
+          />
         </button>
       {/if}
       {#if modalLabel}
-        <h2 id="{modalLabelId}" class:bx--modal-header__label="{true}">
+        <h2 id="{modalLabelId}" class:cds--modal-header__label="{true}">
           <slot name="label">{modalLabel}</slot>
         </h2>
       {/if}
-      <h3 id="{modalHeadingId}" class:bx--modal-header__heading="{true}">
+      <h3 id="{modalHeadingId}" class:cds--modal-header__heading="{true}">
         <slot name="heading">{modalHeading}</slot>
       </h3>
       {#if !passiveModal}
@@ -234,21 +238,25 @@
           bind:this="{buttonRef}"
           type="button"
           aria-label="{iconDescription}"
-          class:bx--modal-close="{true}"
+          class:cds--modal-close="{true}"
           on:click="{() => {
             open = false;
           }}"
         >
-          <Close size="{20}" class="bx--modal-close__icon" aria-hidden="true" />
+          <Close
+            size="{20}"
+            class="cds--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}"
+      class:cds--modal-content="{true}"
+      class:cds--modal-content--with-form="{hasForm}"
+      class:cds--modal-scroll-content="{hasScrollingContent}"
       tabindex="{hasScrollingContent ? '0' : undefined}"
       role="{hasScrollingContent ? 'region' : undefined}"
       aria-label="{hasScrollingContent ? ariaLabel : undefined}"
@@ -257,12 +265,12 @@
       <slot />
     </div>
     {#if hasScrollingContent}
-      <div class:bx--modal-content--overflow-indicator="{true}"></div>
+      <div class:cds--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:cds--modal-footer="{true}"
+        class:cds--modal-footer--three-button="{secondaryButtons.length === 2}"
       >
         {#if secondaryButtons.length > 0}
           {#each secondaryButtons as button}
diff --git a/src/Modal/modalStore.js b/src/Modal/modalStore.js
index a985b906..691eeca6 100644
--- a/src/Modal/modalStore.js
+++ b/src/Modal/modalStore.js
@@ -32,5 +32,5 @@ export const trackModal = (openStore) =>
 
 modalsOpen.subscribe((openCount) => {
   if (typeof document !== "undefined")
-    document.body.classList.toggle("bx--body--with-modal-open", openCount > 0);
+    document.body.classList.toggle("cds--body--with-modal-open", openCount > 0);
 });
diff --git a/src/MultiSelect/MultiSelect.svelte b/src/MultiSelect/MultiSelect.svelte
index 550536a2..c35ff3b0 100644
--- a/src/MultiSelect/MultiSelect.svelte
+++ b/src/MultiSelect/MultiSelect.svelte
@@ -287,18 +287,18 @@
 
 <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}"
+  class:cds--multi-select__wrapper="{true}"
+  class:cds--list-box__wrapper="{true}"
+  class:cds--multi-select__wrapper--inline="{inline}"
+  class:cds--list-box__wrapper--inline="{inline}"
+  class:cds--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}"
+      class:cds--label="{true}"
+      class:cds--label--disabled="{disabled}"
+      class:cds--visually-hidden="{hideLabel}"
     >
       <slot name="titleText">
         {titleText}
@@ -315,19 +315,19 @@
     size="{size}"
     warn="{warn}"
     warnText="{warnText}"
-    class="bx--multi-select {direction === 'top' &&
-      'bx--list-box--up'} {filterable && 'bx--combo-box'}
-      {filterable && 'bx--multi-select--filterable'}
-      {invalid && 'bx--multi-select--invalid'}
-      {inline && 'bx--multi-select--inline'}
-      {checked.length > 0 && 'bx--multi-select--selected'}"
+    class="cds--multi-select {direction === 'top' &&
+      'cds--list-box--up'} {filterable && 'cds--combo-box'}
+      {filterable && 'cds--multi-select--filterable'}
+      {invalid && 'cds--multi-select--invalid'}
+      {inline && 'cds--multi-select--inline'}
+      {checked.length > 0 && 'cds--multi-select--selected'}"
   >
     {#if invalid}
-      <WarningFilled class="bx--list-box__invalid-icon" />
+      <WarningFilled class="cds--list-box__invalid-icon" />
     {/if}
     {#if !invalid && warn}
       <WarningAltFilled
-        class="bx--list-box__invalid-icon bx--list-box__invalid-icon--warning"
+        class="cds--list-box__invalid-icon cds--list-box__invalid-icon--warning"
       />
     {/if}
     <ListBoxField
@@ -417,9 +417,9 @@
           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}"
+          class:cds--text-input="{true}"
+          class:cds--text-input--empty="{value === ''}"
+          class:cds--text-input--light="{light}"
           on:keydown
           on:keydown|stopPropagation="{({ key }) => {
             if (key === 'Enter') {
@@ -455,7 +455,7 @@
           name="{name}"
         />
         {#if invalid}
-          <WarningFilled class="bx--list-box__invalid-icon" />
+          <WarningFilled class="cds--list-box__invalid-icon" />
         {/if}
         {#if value}
           <ListBoxSelection
@@ -479,7 +479,7 @@
         />
       {/if}
       {#if !filterable}
-        <span class:bx--list-box__label="{true}">{label}</span>
+        <span class:cds--list-box__label="{true}">{label}</span>
         <ListBoxMenuIcon open="{open}" translateWithId="{translateWithId}" />
       {/if}
     </ListBoxField>
@@ -537,8 +537,8 @@
   </ListBox>
   {#if !inline && !invalid && !warn && helperText}
     <div
-      class:bx--form__helper-text="{true}"
-      class:bx--form__helper-text--disabled="{disabled}"
+      class:cds--form__helper-text="{true}"
+      class:cds--form__helper-text--disabled="{disabled}"
     >
       {helperText}
     </div>
diff --git a/src/Notification/InlineNotification.svelte b/src/Notification/InlineNotification.svelte
index 5bde027e..65ad3d7d 100644
--- a/src/Notification/InlineNotification.svelte
+++ b/src/Notification/InlineNotification.svelte
@@ -72,32 +72,32 @@
   <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'}"
+    class:cds--inline-notification="{true}"
+    class:cds--inline-notification--low-contrast="{lowContrast}"
+    class:cds--inline-notification--hide-close-button="{hideCloseButton}"
+    class:cds--inline-notification--error="{kind === 'error'}"
+    class:cds--inline-notification--info="{kind === 'info'}"
+    class:cds--inline-notification--info-square="{kind === 'info-square'}"
+    class:cds--inline-notification--success="{kind === 'success'}"
+    class:cds--inline-notification--warning="{kind === 'warning'}"
+    class:cds--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:cds--inline-notification__details="{true}">
       <NotificationIcon
         notificationType="inline"
         kind="{kind}"
         iconDescription="{statusIconDescription}"
       />
-      <div class:bx--inline-notification__text-wrapper="{true}">
-        <p class:bx--inline-notification__title="{true}">
+      <div class:cds--inline-notification__text-wrapper="{true}">
+        <p class:cds--inline-notification__title="{true}">
           <slot name="title">{title}</slot>
         </p>
-        <div class:bx--inline-notification__subtitle="{true}">
+        <div class:cds--inline-notification__subtitle="{true}">
           <slot name="subtitle">{subtitle}</slot>
         </div>
         <slot />
diff --git a/src/Notification/NotificationActionButton.svelte b/src/Notification/NotificationActionButton.svelte
index d6cf6107..6c731f47 100644
--- a/src/Notification/NotificationActionButton.svelte
+++ b/src/Notification/NotificationActionButton.svelte
@@ -8,7 +8,7 @@
   kind="ghost"
   size="small"
   {...$$restProps}
-  class="bx--inline-notification__action-button {$$restProps.class}"
+  class="cds--inline-notification__action-button {$$restProps.class}"
   on:click
   on:mouseover
   on:mouseenter
diff --git a/src/Notification/NotificationButton.svelte b/src/Notification/NotificationButton.svelte
index 308563bf..7738e79d 100644
--- a/src/Notification/NotificationButton.svelte
+++ b/src/Notification/NotificationButton.svelte
@@ -28,8 +28,8 @@
   type="button"
   aria-label="{iconDescription}"
   title="{iconDescription}"
-  class:bx--toast-notification__close-button="{notificationType === 'toast'}"
-  class:bx--inline-notification__close-button="{notificationType === 'inline'}"
+  class:cds--toast-notification__close-button="{notificationType === 'toast'}"
+  class:cds--inline-notification__close-button="{notificationType === 'inline'}"
   {...$$restProps}
   on:click
   on:mouseover
@@ -41,7 +41,7 @@
     size="{20}"
     title="{title}"
     class="{notificationType === 'toast' &&
-      'bx--toast-notification__close-icon'} {notificationType === 'inline' &&
-      'bx--inline-notification__close-icon'}"
+      'cds--toast-notification__close-icon'} {notificationType === 'inline' &&
+      'cds--inline-notification__close-icon'}"
   />
 </button>
diff --git a/src/Notification/NotificationIcon.svelte b/src/Notification/NotificationIcon.svelte
index f106c4b5..59a8ee17 100644
--- a/src/Notification/NotificationIcon.svelte
+++ b/src/Notification/NotificationIcon.svelte
@@ -36,6 +36,6 @@
   size="{20}"
   title="{iconDescription}"
   class="{notificationType === 'toast' &&
-    'bx--toast-notification__icon'} {notificationType === 'inline' &&
-    'bx--inline-notification__icon'}"
+    'cds--toast-notification__icon'} {notificationType === 'inline' &&
+    'cds--inline-notification__icon'}"
 />
diff --git a/src/Notification/ToastNotification.svelte b/src/Notification/ToastNotification.svelte
index 63da68c0..e244b587 100644
--- a/src/Notification/ToastNotification.svelte
+++ b/src/Notification/ToastNotification.svelte
@@ -81,14 +81,14 @@
   <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'}"
+    class:cds--toast-notification="{true}"
+    class:cds--toast-notification--low-contrast="{lowContrast}"
+    class:cds--toast-notification--error="{kind === 'error'}"
+    class:cds--toast-notification--info="{kind === 'info'}"
+    class:cds--toast-notification--info-square="{kind === 'info-square'}"
+    class:cds--toast-notification--success="{kind === 'success'}"
+    class:cds--toast-notification--warning="{kind === 'warning'}"
+    class:cds--toast-notification--warning-alt="{kind === 'warning-alt'}"
     style:width="{fullWidth ? "100%" : undefined}"
     {...$$restProps}
     on:click
@@ -97,14 +97,14 @@
     on:mouseleave
   >
     <NotificationIcon kind="{kind}" iconDescription="{statusIconDescription}" />
-    <div class:bx--toast-notification__details="{true}">
-      <h3 class:bx--toast-notification__title="{true}">
+    <div class:cds--toast-notification__details="{true}">
+      <h3 class:cds--toast-notification__title="{true}">
         <slot name="title">{title}</slot>
       </h3>
-      <div class:bx--toast-notification__subtitle="{true}">
+      <div class:cds--toast-notification__subtitle="{true}">
         <slot name="subtitle">{subtitle}</slot>
       </div>
-      <div class:bx--toast-notification__caption="{true}">
+      <div class:cds--toast-notification__caption="{true}">
         <slot name="caption">{caption}</slot>
       </div>
       <slot />
diff --git a/src/NumberInput/NumberInput.svelte b/src/NumberInput/NumberInput.svelte
index ff226977..3ea1ae55 100644
--- a/src/NumberInput/NumberInput.svelte
+++ b/src/NumberInput/NumberInput.svelte
@@ -156,7 +156,7 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class:bx--form-item="{true}"
+  class:cds--form-item="{true}"
   on:click
   on:mouseover
   on:mouseenter
@@ -164,28 +164,28 @@
 >
   <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--lg="{size === 'lg' || size === 'xl'}"
+    class:cds--number="{true}"
+    class:cds--number--helpertext="{true}"
+    class:cds--number--readonly="{readonly}"
+    class:cds--number--light="{light}"
+    class:cds--number--nolabel="{hideLabel}"
+    class:cds--number--nosteppers="{hideSteppers}"
+    class:cds--number--sm="{size === 'sm'}"
+    class:cds--number--lg="{size === 'lg' || size === 'xl'}"
   >
     {#if $$slots.label || label}
       <label
         for="{id}"
-        class:bx--label="{true}"
-        class:bx--label--disabled="{disabled}"
-        class:bx--visually-hidden="{hideLabel}"
+        class:cds--label="{true}"
+        class:cds--label--disabled="{disabled}"
+        class:cds--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:cds--number__input-wrapper="{true}"
+      class:cds--number__input-wrapper--warning="{!invalid && warn}"
     >
       <input
         bind:this="{ref}"
@@ -214,22 +214,22 @@
       />
       {#if !readonly}
         {#if invalid}
-          <WarningFilled class="bx--number__invalid" />
+          <WarningFilled class="cds--number__invalid" />
         {/if}
         {#if !invalid && warn}
           <WarningAltFilled
-            class="bx--number__invalid bx--number__invalid--warning"
+            class="cds--number__invalid cds--number__invalid--warning"
           />
         {/if}
       {/if}
       {#if !hideSteppers}
-        <div class:bx--number__controls="{true}">
+        <div class:cds--number__controls="{true}">
           <button
             type="button"
             tabindex="-1"
             title="{decrementLabel || iconDescription}"
             aria-label="{decrementLabel || iconDescription}"
-            class:bx--number__control-btn="{true}"
+            class:cds--number__control-btn="{true}"
             class:down-icon="{true}"
             on:click="{() => {
               updateValue(false);
@@ -238,13 +238,13 @@
           >
             <Subtract class="down-icon" />
           </button>
-          <div class:bx--number__rule-divider="{true}"></div>
+          <div class:cds--number__rule-divider="{true}"></div>
           <button
             type="button"
             tabindex="-1"
             title="{incrementLabel || iconDescription}"
             aria-label="{incrementLabel || iconDescription}"
-            class:bx--number__control-btn="{true}"
+            class:cds--number__control-btn="{true}"
             class:up-icon="{true}"
             on:click="{() => {
               updateValue(true);
@@ -253,25 +253,25 @@
           >
             <Add class="up-icon" />
           </button>
-          <div class:bx--number__rule-divider="{true}"></div>
+          <div class:cds--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:cds--form__helper-text="{true}"
+        class:cds--form__helper-text--disabled="{disabled}"
       >
         {helperText}
       </div>
     {/if}
     {#if error}
-      <div id="{errorId}" class:bx--form-requirement="{true}">
+      <div id="{errorId}" class:cds--form-requirement="{true}">
         {invalidText}
       </div>
     {/if}
     {#if !error && warn}
-      <div id="{errorId}" class:bx--form-requirement="{true}">{warnText}</div>
+      <div id="{errorId}" class:cds--form-requirement="{true}">{warnText}</div>
     {/if}
   </div>
 </div>
diff --git a/src/NumberInput/NumberInputSkeleton.svelte b/src/NumberInput/NumberInputSkeleton.svelte
index 09090c2a..5450debe 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:cds--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:cds--label="{true}" class:cds--skeleton="{true}"></span>
   {/if}
-  <div class:bx--number="{true}" class:bx--skeleton="{true}"></div>
+  <div class:cds--number="{true}" class:cds--skeleton="{true}"></div>
 </div>
diff --git a/src/OrderedList/OrderedList.svelte b/src/OrderedList/OrderedList.svelte
index 705c996f..5636c793 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:cds--list--ordered="{!native}"
+  class:cds--list--ordered--native="{native}"
+  class:cds--list--nested="{nested}"
+  class:cds--list--expressive="{expressive}"
   {...$$restProps}
   on:click
   on:mouseover
diff --git a/src/OverflowMenu/OverflowMenu.svelte b/src/OverflowMenu/OverflowMenu.svelte
index 892888f4..71db6e0a 100644
--- a/src/OverflowMenu/OverflowMenu.svelte
+++ b/src/OverflowMenu/OverflowMenu.svelte
@@ -168,7 +168,7 @@
     focusedId.set($items[$currentIndex].id);
   }
   $: styles = `<style>
-    #${id} .bx--overflow-menu-options.bx--overflow-menu-options:after {
+    #${id} .cds--overflow-menu-options.cds--overflow-menu-options:after {
       width: ${buttonWidth ? buttonWidth + "px" : "2rem"};
     }
   <\/style>`;
@@ -195,11 +195,11 @@
   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--lg="{size === 'lg'}"
+  class:cds--overflow-menu="{true}"
+  class:cds--overflow-menu--open="{open}"
+  class:cds--overflow-menu--light="{light}"
+  class:cds--overflow-menu--sm="{size === 'sm'}"
+  class:cds--overflow-menu--lg="{size === 'lg'}"
   {...$$restProps}
   on:click
   on:click="{({ target }) => {
@@ -238,7 +238,7 @@
       this="{icon}"
       aria-label="{iconDescription}"
       title="{iconDescription}"
-      class="bx--overflow-menu__icon {iconClass}"
+      class="cds--overflow-menu__icon {iconClass}"
     />
   </slot>
   {#if open}
@@ -249,13 +249,13 @@
       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--lg="{size === 'lg'}"
-      class:bx--breadcrumb-menu-options="{!!ctxBreadcrumbItem}"
+      class:cds--overflow-menu-options="{true}"
+      class:cds--overflow-menu--flip="{flipped}"
+      class:cds--overflow-menu-options--open="{open}"
+      class:cds--overflow-menu-options--light="{light}"
+      class:cds--overflow-menu-options--sm="{size === 'sm'}"
+      class:cds--overflow-menu-options--lg="{size === 'lg'}"
+      class:cds--breadcrumb-menu-options="{!!ctxBreadcrumbItem}"
       class="{menuOptionsClass}"
     >
       <slot />
diff --git a/src/OverflowMenu/OverflowMenuItem.svelte b/src/OverflowMenu/OverflowMenuItem.svelte
index 5c1848ee..f0e03875 100644
--- a/src/OverflowMenu/OverflowMenuItem.svelte
+++ b/src/OverflowMenu/OverflowMenuItem.svelte
@@ -45,7 +45,7 @@
   $: buttonProps = {
     role: "menuitem",
     tabindex: "-1",
-    class: "bx--overflow-menu-options__btn",
+    class: "cds--overflow-menu-options__btn",
     disabled: href ? undefined : disabled,
     href: href ? href : undefined,
     title: requireTitle ? ($$slots.default ? undefined : text) : undefined,
@@ -55,10 +55,10 @@
 <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}"
+  class:cds--overflow-menu-options__option="{true}"
+  class:cds--overflow-menu--divider="{hasDivider}"
+  class:cds--overflow-menu-options__option--danger="{danger}"
+  class:cds--overflow-menu-options__option--disabled="{disabled}"
   {...$$restProps}
 >
   {#if href}
@@ -81,7 +81,7 @@
       }}"
     >
       <slot>
-        <div class:bx--overflow-menu-options__option-content="{true}">
+        <div class:cds--overflow-menu-options__option-content="{true}">
           {text}
         </div>
       </slot>
@@ -104,7 +104,7 @@
       }}"
     >
       <slot>
-        <div class:bx--overflow-menu-options__option-content="{true}">
+        <div class:cds--overflow-menu-options__option-content="{true}">
           {text}
         </div>
       </slot>
diff --git a/src/Pagination/Pagination.svelte b/src/Pagination/Pagination.svelte
index b307e078..16a7504d 100644
--- a/src/Pagination/Pagination.svelte
+++ b/src/Pagination/Pagination.svelte
@@ -94,19 +94,19 @@
   $: forwardButtonDisabled = disabled || page === totalPages;
 </script>
 
-<div id="{id}" class:bx--pagination="{true}" {...$$restProps}>
-  <div class:bx--pagination__left="{true}">
+<div id="{id}" class:cds--pagination="{true}" {...$$restProps}>
+  <div class:cds--pagination__left="{true}">
     {#if !pageSizeInputDisabled}
       <label
-        id="bx--pagination-select-{id}-count-label"
-        for="bx--pagination-select-{id}"
-        class:bx--pagination__text="{true}"
+        id="cds--pagination-select-{id}-count-label"
+        for="cds--pagination-select-{id}"
+        class:cds--pagination__text="{true}"
       >
         {itemsPerPageText}
       </label>
       <Select
-        id="bx--pagination-select-{id}"
-        class="bx--select__item-count"
+        id="cds--pagination-select-{id}"
+        class="cds--select__item-count"
         hideLabel
         noLabel
         inline
@@ -120,7 +120,7 @@
         {/each}
       </Select>
     {/if}
-    <span class:bx--pagination__text="{!pageSizeInputDisabled}">
+    <span class:cds--pagination__text="{!pageSizeInputDisabled}">
       {#if pagesUnknown}
         {itemText(pageSize * (page - 1) + 1, page * pageSize)}
       {:else}
@@ -132,11 +132,11 @@
       {/if}
     </span>
   </div>
-  <div class:bx--pagination__right="{true}">
+  <div class:cds--pagination__right="{true}">
     {#if !pageInputDisabled}
       <Select
-        id="bx--pagination-select-{id + 2}"
-        class="bx--select__page-number"
+        id="cds--pagination-select-{id + 2}"
+        class="cds--select__page-number"
         labelText="Page number, of {totalPages} pages"
         inline
         hideLabel
@@ -149,7 +149,7 @@
           <SelectItem value="{size + 1}" text="{(size + 1).toString()}" />
         {/each}
       </Select>
-      <span class:bx--pagination__text="{true}">
+      <span class:cds--pagination__text="{true}">
         {#if pagesUnknown}
           {pageText(page)}
         {:else}{pageRangeText(page, totalPages)}{/if}
@@ -162,8 +162,8 @@
       icon="{CaretLeft}"
       iconDescription="{backwardText}"
       disabled="{backButtonDisabled}"
-      class="bx--pagination__button bx--pagination__button--backward {backButtonDisabled
-        ? 'bx--pagination__button--no-index'
+      class="cds--pagination__button cds--pagination__button--backward {backButtonDisabled
+        ? 'cds--pagination__button--no-index'
         : ''}"
       on:click="{() => {
         page--;
@@ -178,8 +178,8 @@
       icon="{CaretRight}"
       iconDescription="{forwardText}"
       disabled="{forwardButtonDisabled}"
-      class="bx--pagination__button bx--pagination__button--forward {forwardButtonDisabled
-        ? 'bx--pagination__button--no-index'
+      class="cds--pagination__button cds--pagination__button--forward {forwardButtonDisabled
+        ? 'cds--pagination__button--no-index'
         : ''}"
       on:click="{() => {
         page++;
diff --git a/src/Pagination/PaginationSkeleton.svelte b/src/Pagination/PaginationSkeleton.svelte
index bab15b50..b16db01d 100644
--- a/src/Pagination/PaginationSkeleton.svelte
+++ b/src/Pagination/PaginationSkeleton.svelte
@@ -5,22 +5,22 @@
 <!-- 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:cds--pagination="{true}"
+  class:cds--skeleton="{true}"
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave
 >
-  <div class:bx--pagination__left="{true}">
+  <div class:cds--pagination__left="{true}">
     <SkeletonText width="70px" />
     <SkeletonText width="35px" />
     <SkeletonText width="105px" />
   </div>
   <div
-    class:bx--pagination__right="{true}"
-    class:bx--pagination--inline="{true}"
+    class:cds--pagination__right="{true}"
+    class:cds--pagination--inline="{true}"
   >
     <SkeletonText width="70px" />
   </div>
diff --git a/src/PaginationNav/PaginationItem.svelte b/src/PaginationNav/PaginationItem.svelte
index e57a5156..c2d06edd 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:cds--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}"
+    class:cds--pagination-nav__page="{true}"
+    class:cds--pagination-nav__page--active="{active}"
     on:click
   >
-    <span class:bx--pagination-nav__accessibility-label="{true}">
+    <span class:cds--pagination-nav__accessibility-label="{true}">
       <slot />
     </span>
     {page}
diff --git a/src/PaginationNav/PaginationNav.svelte b/src/PaginationNav/PaginationNav.svelte
index adf06929..1f784145 100644
--- a/src/PaginationNav/PaginationNav.svelte
+++ b/src/PaginationNav/PaginationNav.svelte
@@ -76,9 +76,13 @@
     .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:cds--pagination-nav="{true}"
+  {...$$restProps}
+>
+  <ul class:cds--pagination-nav__list="{true}">
+    <li class:cds--pagination-nav__list-item="{true}">
       <Button
         kind="ghost"
         tooltipAlignment="center"
@@ -153,7 +157,7 @@
         {page === total ? "Active, Page" : "Page"}
       </PaginationItem>
     {/if}
-    <li class:bx--pagination-nav__list-item="{true}">
+    <li class:cds--pagination-nav__list-item="{true}">
       <Button
         kind="ghost"
         tooltipAlignment="center"
@@ -180,7 +184,7 @@
   <div
     aria-live="polite"
     aria-atomic="true"
-    class:bx--pagination-nav__accessibility-label="{true}"
+    class:cds--pagination-nav__accessibility-label="{true}"
   >
     Page
     {page + 1}
diff --git a/src/PaginationNav/PaginationOverflow.svelte b/src/PaginationNav/PaginationOverflow.svelte
index c5e099ad..44c22fca 100644
--- a/src/PaginationNav/PaginationOverflow.svelte
+++ b/src/PaginationNav/PaginationOverflow.svelte
@@ -19,14 +19,14 @@
 </script>
 
 {#if count > 1}
-  <li class:bx--pagination-nav__list-item="{true}">
-    <div class:bx--pagination-nav__select="{true}">
+  <li class:cds--pagination-nav__list-item="{true}">
+    <div class:cds--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}"
+        class:cds--pagination-nav__page="{true}"
+        class:cds--pagination-nav__page--select="{true}"
         on:change="{({ target }) => {
           value = '';
           dispatch('select', { index: Number(target.value) });
@@ -39,8 +39,8 @@
           </option>
         {/each}
       </select>
-      <div class:bx--pagination-nav__select-icon-wrapper="{true}">
-        <OverflowMenuHorizontal class="bx--pagination-nav__select-icon" />
+      <div class:cds--pagination-nav__select-icon-wrapper="{true}">
+        <OverflowMenuHorizontal class="cds--pagination-nav__select-icon" />
       </div>
     </div>
   </li>
diff --git a/src/Popover/Popover.svelte b/src/Popover/Popover.svelte
index 3373b94d..6d9368a8 100644
--- a/src/Popover/Popover.svelte
+++ b/src/Popover/Popover.svelte
@@ -46,24 +46,24 @@
 
 <div
   bind:this="{ref}"
-  class:bx--popover-container="{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}"
+  class:cds--popover-container="{true}"
+  class:cds--popover--caret="{caret}"
+  class:cds--popover--light="{light}"
+  class:cds--popover--high-contrast="{highContrast}"
+  class:cds--popover--top="{align === 'top'}"
+  class:cds--popover--top-left="{align === 'top-left'}"
+  class:cds--popover--top-right="{align === 'top-right'}"
+  class:cds--popover--bottom="{align === 'bottom'}"
+  class:cds--popover--bottom-left="{align === 'bottom-left'}"
+  class:cds--popover--bottom-right="{align === 'bottom-right'}"
+  class:cds--popover--left="{align === 'left'}"
+  class:cds--popover--left-bottom="{align === 'left-bottom'}"
+  class:cds--popover--left-top="{align === 'left-top'}"
+  class:cds--popover--right="{align === 'right'}"
+  class:cds--popover--right-bottom="{align === 'right-bottom'}"
+  class:cds--popover--right-top="{align === 'right-top'}"
+  class:cds--popover--open="{open}"
+  class:cds--popover--relative="{relative}"
   style:position="{relative ? "relative" : undefined}"
   {...$$restProps}
 >
diff --git a/src/Popover/PopoverContent.svelte b/src/Popover/PopoverContent.svelte
index 4d30a351..325795f1 100644
--- a/src/Popover/PopoverContent.svelte
+++ b/src/Popover/PopoverContent.svelte
@@ -2,9 +2,9 @@
   export let className = null;
 </script>
 
-<span class:bx--popover="{true}" {...$$restProps}>
-  <span class:bx--popover-content="{true}" class="{className}">
+<span class:cds--popover="{true}" {...$$restProps}>
+  <span class:cds--popover-content="{true}" class="{className}">
     <slot />
   </span>
-  <span class:bx--popover-caret="{true}"></span>
+  <span class:cds--popover-caret="{true}"></span>
 </span>
diff --git a/src/ProgressBar/ProgressBar.svelte b/src/ProgressBar/ProgressBar.svelte
index 89078b3d..2a151c1a 100644
--- a/src/ProgressBar/ProgressBar.svelte
+++ b/src/ProgressBar/ProgressBar.svelte
@@ -62,20 +62,20 @@
 </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:cds--progress-bar="{true}"
+  class:cds--progress-bar--indeterminate="{indeterminate}"
+  class:cds--progress-bar--big="{size === 'md'}"
+  class:cds--progress-bar--small="{size === 'sm'}"
+  class:cds--progress-bar--inline="{kind === 'inline'}"
+  class:cds--progress-bar--indented="{kind === 'indented'}"
+  class:cds--progress-bar--error="{status === 'error'}"
+  class:cds--progress-bar--finished="{status === 'finished'}"
   {...$$restProps}
 >
   <label
     for="{id}"
-    class:bx--progress-bar__label="{true}"
-    class:bx--visually-hidden="{hideLabel}"
+    class:cds--progress-bar__label="{true}"
+    class:cds--visually-hidden="{hideLabel}"
   >
     <slot name="labelText">
       {labelText}
@@ -83,14 +83,14 @@
     {#if status === "error" || status === "finished"}
       <svelte:component
         this="{statusIcons[status]}"
-        class="bx--progress-bar__status-icon"
+        class="cds--progress-bar__status-icon"
       />
     {/if}
   </label>
   <div
     role="progressbar"
     id="{id}"
-    class:bx--progress-bar__track="{true}"
+    class:cds--progress-bar__track="{true}"
     aria-busy="{status === 'active'}"
     aria-valuemin="{indeterminate ? undefined : 0}"
     aria-valuemax="{indeterminate ? undefined : max}"
@@ -98,12 +98,12 @@
     aria-describedby="{helperText ? helperId : null}"
   >
     <div
-      class:bx--progress-bar__bar="{true}"
+      class:cds--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:cds--progress-bar__helper-text="{true}">
       {helperText}
     </div>
   {/if}
diff --git a/src/ProgressIndicator/ProgressIndicator.svelte b/src/ProgressIndicator/ProgressIndicator.svelte
index 688a797a..524cfb26 100644
--- a/src/ProgressIndicator/ProgressIndicator.svelte
+++ b/src/ProgressIndicator/ProgressIndicator.svelte
@@ -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:cds--progress="{true}"
+  class:cds--progress--vertical="{vertical}"
+  class:cds--progress--space-equal="{spaceEqually && !vertical}"
   {...$$restProps}
   on:click
   on:mouseover
diff --git a/src/ProgressIndicator/ProgressIndicatorSkeleton.svelte b/src/ProgressIndicator/ProgressIndicatorSkeleton.svelte
index d37b5538..e18a86fc 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:cds--progress="{true}"
+  class:cds--progress--vertical="{vertical}"
+  class:cds--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:cds--progress-step="{true}"
+      class:cds--progress-step--incomplete="{true}"
     >
       <div
-        class:bx--progress-step-button="{true}"
-        class:bx--progress-step-button--unclickable="{true}"
+        class:cds--progress-step-button="{true}"
+        class:cds--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:cds--progress-label="{true}"></p>
+        <span class:cds--progress-line="{true}"></span>
       </div>
     </li>
   {/each}
diff --git a/src/ProgressIndicator/ProgressStep.svelte b/src/ProgressIndicator/ProgressStep.svelte
index 09ae7c91..23cf57f0 100644
--- a/src/ProgressIndicator/ProgressStep.svelte
+++ b/src/ProgressIndicator/ProgressStep.svelte
@@ -54,11 +54,11 @@
 <!-- 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}"
+  class:cds--progress-step="{true}"
+  class:cds--progress-step--current="{current}"
+  class:cds--progress-step--complete="{complete}"
+  class:cds--progress-step--incomplete="{!complete && !current}"
+  class:cds--progress-step--disabled="{disabled}"
   {...$$restProps}
 >
   <button
@@ -66,8 +66,8 @@
     disabled="{disabled}"
     aria-disabled="{disabled}"
     tabindex="{!current && !disabled ? '0' : '-1'}"
-    class:bx--progress-step-button="{true}"
-    class:bx--progress-step-button--unclickable="{current ||
+    class:cds--progress-step-button="{true}"
+    class:cds--progress-step-button--unclickable="{current ||
       $preventChangeOnClick}"
     on:click
     on:click="{() => {
@@ -86,7 +86,7 @@
     }}"
   >
     {#if invalid}
-      <Warning class="bx--progress__warning" title="{description}" />
+      <Warning class="cds--progress__warning" title="{description}" />
     {:else if current}
       <Incomplete title="{description}" />
     {:else if complete}
@@ -94,14 +94,14 @@
     {:else}
       <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:cds--progress-text="{true}">
+      <slot props="{{ class: 'cds--progress-label' }}">
+        <p class:cds--progress-label="{true}">{label}</p>
       </slot>
       {#if secondaryLabel}
-        <p class:bx--progress-optional="{true}">{secondaryLabel}</p>
+        <p class:cds--progress-optional="{true}">{secondaryLabel}</p>
       {/if}
     </div>
-    <span class:bx--progress-line="{true}"></span>
+    <span class:cds--progress-line="{true}"></span>
   </button>
 </li>
diff --git a/src/RadioButton/RadioButton.svelte b/src/RadioButton/RadioButton.svelte
index 233faf28..9c7126d6 100644
--- a/src/RadioButton/RadioButton.svelte
+++ b/src/RadioButton/RadioButton.svelte
@@ -57,8 +57,8 @@
 </script>
 
 <div
-  class:bx--radio-button-wrapper="{true}"
-  class:bx--radio-button-wrapper--label-left="{labelPosition === 'left'}"
+  class:cds--radio-button-wrapper="{true}"
+  class:cds--radio-button-wrapper--label-left="{labelPosition === 'left'}"
   {...$$restProps}
 >
   <input
@@ -70,7 +70,7 @@
     disabled="{disabled}"
     required="{$groupRequired ?? required}"
     value="{value}"
-    class:bx--radio-button="{true}"
+    class:cds--radio-button="{true}"
     on:change
     on:change="{() => {
       if (update) {
@@ -78,10 +78,10 @@
       }
     }}"
   />
-  <label class:bx--radio-button__label="{true}" for="{id}">
-    <span class:bx--radio-button__appearance="{true}"></span>
+  <label class:cds--radio-button__label="{true}" for="{id}">
+    <span class:cds--radio-button__appearance="{true}"></span>
     {#if labelText || $$slots.labelText}
-      <span class:bx--visually-hidden="{hideLabel}">
+      <span class:cds--visually-hidden="{hideLabel}">
         <slot name="labelText">
           {labelText}
         </slot>
diff --git a/src/RadioButton/RadioButtonSkeleton.svelte b/src/RadioButton/RadioButtonSkeleton.svelte
index 93667c2e..5437da3e 100644
--- a/src/RadioButton/RadioButtonSkeleton.svelte
+++ b/src/RadioButton/RadioButtonSkeleton.svelte
@@ -1,14 +1,14 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class:bx--radio-button-wrapper="{true}"
+  class:cds--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}"
+  <div class:cds--radio-button="{true}" class:cds--skeleton="{true}"></div>
+  <span class:cds--radio-button__label="{true}" class:cds--skeleton="{true}"
   ></span>
 </div>
diff --git a/src/RadioButtonGroup/RadioButtonGroup.svelte b/src/RadioButtonGroup/RadioButtonGroup.svelte
index 3ae8c5a3..24293bf9 100644
--- a/src/RadioButtonGroup/RadioButtonGroup.svelte
+++ b/src/RadioButtonGroup/RadioButtonGroup.svelte
@@ -96,7 +96,7 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   id="{id}"
-  class:bx--form-item="{true}"
+  class:cds--form-item="{true}"
   {...$$restProps}
   on:click
   on:mouseover
@@ -104,14 +104,17 @@
   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'}"
+    class:cds--radio-button-group="{true}"
+    class:cds--radio-button-group--vertical="{orientation === 'vertical'}"
+    class:cds--radio-button-group--label-left="{labelPosition === 'left'}"
+    class:cds--radio-button-group--label-right="{labelPosition === 'right'}"
     disabled="{disabled}"
   >
     {#if legendText || $$slots.legendText}
-      <legend class:bx--label="{true}" class:bx--visually-hidden="{hideLegend}">
+      <legend
+        class:cds--label="{true}"
+        class:cds--visually-hidden="{hideLegend}"
+      >
         <slot name="legendText">{legendText}</slot>
       </legend>
     {/if}
diff --git a/src/RecursiveList/RecursiveListItem.svelte b/src/RecursiveList/RecursiveListItem.svelte
index 96e92562..b175ad4e 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:cds--link="{true}" href="{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 28f284ea..29a6550d 100644
--- a/src/Search/Search.svelte
+++ b/src/Search/Search.svelte
@@ -92,28 +92,28 @@
   <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--md="{size === 'md'}"
-    class:bx--search--lg="{size === 'lg'}"
-    class:bx--search--expandable="{expandable}"
-    class:bx--search--expanded="{expanded}"
+    class:cds--search="{true}"
+    class:cds--search--light="{light}"
+    class:cds--search--disabled="{disabled}"
+    class:cds--search--sm="{size === 'sm'}"
+    class:cds--search--md="{size === 'md'}"
+    class:cds--search--lg="{size === 'lg'}"
+    class:cds--search--expandable="{expandable}"
+    class:cds--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}"
+      class:cds--search-magnifier="{true}"
       on:click="{() => {
         if (expandable) expanded = true;
       }}"
     >
-      <svelte:component this="{icon}" class="bx--search-magnifier-icon" />
+      <svelte:component this="{icon}" class="cds--search-magnifier-icon" />
     </div>
-    <label id="{id}-search" for="{id}" class:bx--label="{true}">
+    <label id="{id}-search" for="{id}" class:cds--label="{true}">
       <slot name="labelText">
         {labelText}
       </slot>
@@ -124,7 +124,7 @@
       bind:value
       type="text"
       role="searchbox"
-      class:bx--search-input="{true}"
+      class:cds--search-input="{true}"
       autofocus="{autofocus === true ? true : undefined}"
       autocomplete="{autocomplete}"
       disabled="{disabled}"
@@ -157,8 +157,8 @@
       type="button"
       aria-label="{closeButtonLabelText}"
       disabled="{disabled}"
-      class:bx--search-close="{true}"
-      class:bx--search-close--hidden="{value === ''}"
+      class:cds--search-close="{true}"
+      class:cds--search-close--hidden="{value === ''}"
       on:click
       on:click="{() => {
         value = '';
diff --git a/src/Search/SearchSkeleton.svelte b/src/Search/SearchSkeleton.svelte
index c0c0b194..73dae4a4 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--md="{size === 'md'}"
-  class:bx--search--lg="{size === 'lg'}"
+  class:cds--skeleton="{true}"
+  class:cds--search--sm="{size === 'sm'}"
+  class:cds--search--md="{size === 'md'}"
+  class:cds--search--lg="{size === 'lg'}"
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave
 >
-  <span class:bx--label="{true}"></span>
-  <div class:bx--search-input="{true}"></div>
+  <span class:cds--label="{true}"></span>
+  <div class:cds--search-input="{true}"></div>
 </div>
diff --git a/src/Select/Select.svelte b/src/Select/Select.svelte
index f055d329..b652484e 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:cds--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:cds--select="{true}"
+    class:cds--select--inline="{inline}"
+    class:cds--select--light="{light}"
+    class:cds--select--invalid="{invalid}"
+    class:cds--select--disabled="{disabled}"
+    class:cds--select--warning="{warn}"
   >
     {#if !noLabel}
       <label
         for="{id}"
-        class:bx--label="{true}"
-        class:bx--visually-hidden="{hideLabel}"
-        class:bx--label--disabled="{disabled}"
+        class:cds--label="{true}"
+        class:cds--visually-hidden="{hideLabel}"
+        class:cds--label--disabled="{disabled}"
       >
         <slot name="labelText">
           {labelText}
@@ -146,9 +146,9 @@
       </label>
     {/if}
     {#if inline}
-      <div class:bx--select-input--inline__wrapper="{true}">
+      <div class:cds--select-input--inline__wrapper="{true}">
         <div
-          class:bx--select-input__wrapper="{true}"
+          class:cds--select-input__wrapper="{true}"
           data-invalid="{invalid || undefined}"
         >
           <select
@@ -159,9 +159,9 @@
             required="{required || undefined}"
             id="{id}"
             name="{name}"
-            class:bx--select-input="{true}"
-            class:bx--select-input--sm="{size === 'sm'}"
-            class:bx--select-input--lg="{size === 'lg' || size === 'xl'}"
+            class:cds--select-input="{true}"
+            class:cds--select-input--sm="{size === 'sm'}"
+            class:cds--select-input--lg="{size === 'lg' || size === 'xl'}"
             on:change="{handleChange}"
             on:change
             on:input
@@ -170,21 +170,21 @@
           >
             <slot />
           </select>
-          <ChevronDown class="bx--select__arrow" />
+          <ChevronDown class="cds--select__arrow" />
           {#if invalid}
-            <WarningFilled class="bx--select__invalid-icon" />
+            <WarningFilled class="cds--select__invalid-icon" />
           {/if}
         </div>
         {#if invalid}
-          <div class:bx--form-requirement="{true}" id="{errorId}">
+          <div class:cds--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:cds--form__helper-text="{true}"
+          class:cds--form__helper-text--disabled="{disabled}"
         >
           {helperText}
         </div>
@@ -192,7 +192,7 @@
     {/if}
     {#if !inline}
       <div
-        class:bx--select-input__wrapper="{true}"
+        class:cds--select-input__wrapper="{true}"
         data-invalid="{invalid || undefined}"
       >
         <select
@@ -203,9 +203,9 @@
           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--lg="{size === 'lg' || size === 'xl'}"
+          class:cds--select-input="{true}"
+          class:cds--select-input--sm="{size === 'sm'}"
+          class:cds--select-input--lg="{size === 'lg' || size === 'xl'}"
           on:change="{handleChange}"
           on:change
           on:input
@@ -214,31 +214,31 @@
         >
           <slot />
         </select>
-        <ChevronDown class="bx--select__arrow" />
+        <ChevronDown class="cds--select__arrow" />
         {#if invalid}
-          <WarningFilled class="bx--select__invalid-icon" />
+          <WarningFilled class="cds--select__invalid-icon" />
         {/if}
         {#if !invalid && warn}
           <WarningAltFilled
-            class="bx--select__invalid-icon bx--select__invalid-icon--warning"
+            class="cds--select__invalid-icon cds--select__invalid-icon--warning"
           />
         {/if}
       </div>
       {#if !invalid && helperText}
         <div
-          class:bx--form__helper-text="{true}"
-          class:bx--form__helper-text--disabled="{disabled}"
+          class:cds--form__helper-text="{true}"
+          class:cds--form__helper-text--disabled="{disabled}"
         >
           {helperText}
         </div>
       {/if}
       {#if invalid}
-        <div id="{errorId}" class:bx--form-requirement="{true}">
+        <div id="{errorId}" class:cds--form-requirement="{true}">
           {invalidText}
         </div>
       {/if}
       {#if !invalid && warn}
-        <div id="{errorId}" class:bx--form-requirement="{true}">
+        <div id="{errorId}" class:cds--form-requirement="{true}">
           {warnText}
         </div>
       {/if}
diff --git a/src/Select/SelectItem.svelte b/src/Select/SelectItem.svelte
index a3304924..ca38d374 100644
--- a/src/Select/SelectItem.svelte
+++ b/src/Select/SelectItem.svelte
@@ -51,7 +51,7 @@
   disabled="{disabled}"
   hidden="{hidden}"
   selected="{selected}"
-  class:bx--select-option="{true}"
+  class:cds--select-option="{true}"
   class="{className}"
   style="{style}"
 >
diff --git a/src/Select/SelectItemGroup.svelte b/src/Select/SelectItemGroup.svelte
index 45686f5d..56a4116d 100644
--- a/src/Select/SelectItemGroup.svelte
+++ b/src/Select/SelectItemGroup.svelte
@@ -9,7 +9,7 @@
 <optgroup
   label="{label}"
   disabled="{disabled}"
-  class:bx--select-optgroup="{true}"
+  class:cds--select-optgroup="{true}"
   {...$$restProps}
 >
   <slot />
diff --git a/src/Select/SelectSkeleton.svelte b/src/Select/SelectSkeleton.svelte
index 2e43163c..c94c76ab 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:cds--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:cds--label="{true}" class:cds--skeleton="{true}"></span>
   {/if}
-  <div class:bx--select="{true}" class:bx--skeleton="{true}">
-    <div class:bx--select-input="{true}"></div>
+  <div class:cds--select="{true}" class:cds--skeleton="{true}">
+    <div class:cds--select-input="{true}"></div>
   </div>
 </div>
diff --git a/src/SkeletonPlaceholder/SkeletonPlaceholder.svelte b/src/SkeletonPlaceholder/SkeletonPlaceholder.svelte
index 37a11a41..d591f574 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:cds--skeleton__placeholder="{true}"
   {...$$restProps}
   on:click
   on:mouseover
diff --git a/src/SkeletonText/SkeletonText.svelte b/src/SkeletonText/SkeletonText.svelte
index 9b8d7d64..20262f92 100644
--- a/src/SkeletonText/SkeletonText.svelte
+++ b/src/SkeletonText/SkeletonText.svelte
@@ -29,8 +29,8 @@
       return widthPx ? rand : `calc(${width} - ${rand})`;
     }) as width}
       <p
-        class:bx--skeleton__text="{true}"
-        class:bx--skeleton__heading="{heading}"
+        class:cds--skeleton__text="{true}"
+        class:cds--skeleton__heading="{heading}"
         style:width="{width}"
       ></p>
     {/each}
@@ -38,8 +38,8 @@
 {:else}
   <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
   <p
-    class:bx--skeleton__text="{true}"
-    class:bx--skeleton__heading="{heading}"
+    class:cds--skeleton__text="{true}"
+    class:cds--skeleton__heading="{heading}"
     style:width="{width}"
     {...$$restProps}
     on:click
diff --git a/src/Slider/Slider.svelte b/src/Slider/Slider.svelte
index 33b55e49..f0115989 100644
--- a/src/Slider/Slider.svelte
+++ b/src/Slider/Slider.svelte
@@ -139,7 +139,7 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class:bx--form-item="{true}"
+  class:cds--form-item="{true}"
   {...$$restProps}
   on:click
   on:mouseover
@@ -149,22 +149,22 @@
   <label
     for="{id}"
     id="{labelId}"
-    class:bx--label="{true}"
-    class:bx--label--disabled="{disabled}"
-    class:bx--visually-hidden="{hideLabel}"
+    class:cds--label="{true}"
+    class:cds--label--disabled="{disabled}"
+    class:cds--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:cds--slider-container="{true}" style:width="{fullWidth && "100%"}">
+    <span class:cds--slider__range-label="{true}">{minLabel || min}</span>
     <div
       bind:this="{ref}"
       role="presentation"
       tabindex="-1"
-      class:bx--slider="{true}"
-      class:bx--slider--disabled="{disabled}"
+      class:cds--slider="{true}"
+      class:cds--slider--disabled="{disabled}"
       style:max-width="{fullWidth ? "none" : undefined}"
       on:mousedown="{startDragging}"
       on:mousedown="{startHolding}"
@@ -185,7 +185,7 @@
       <div
         role="slider"
         tabindex="0"
-        class:bx--slider__thumb="{true}"
+        class:cds--slider__thumb="{true}"
         style:left="{left}%"
         aria-valuemax="{max}"
         aria-valuemin="{min}"
@@ -193,21 +193,21 @@
         aria-labelledby="{labelId}"
         id="{id}"
       ></div>
-      <div bind:this="{trackRef}" class:bx--slider__track="{true}"></div>
+      <div bind:this="{trackRef}" class:cds--slider__track="{true}"></div>
       <div
-        class:bx--slider__filled-track="{true}"
+        class:cds--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:cds--slider__range-label="{true}">{maxLabel || max}</span>
     <input
       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}"
+      class:cds--text-input="{true}"
+      class:cds--slider-text-input="{true}"
+      class:cds--text-input--light="{light}"
+      class:cds--text-input--invalid="{invalid}"
       value="{value}"
       aria-labelledby="{$$props['aria-label'] ? undefined : labelId}"
       aria-label="{$$props['aria-label'] || 'Slider number input'}"
diff --git a/src/Slider/SliderSkeleton.svelte b/src/Slider/SliderSkeleton.svelte
index d84ec8c0..683a15a8 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:cds--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:cds--label="{true}" class:cds--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:cds--slider-container="{true}" class:cds--skeleton="{true}">
+    <span class:cds--slider__range-label="{true}"></span>
+    <div class:cds--slider="{true}">
+      <div class:cds--slider__track="{true}"></div>
+      <div class:cds--slider__filled-track="{true}"></div>
+      <div class:cds--slider__thumb="{true}"></div>
     </div>
-    <span class:bx--slider__range-label="{true}"></span>
+    <span class:cds--slider__range-label="{true}"></span>
   </div>
 </div>
diff --git a/src/StructuredList/StructuredList.svelte b/src/StructuredList/StructuredList.svelte
index 4acc311e..62ba0b29 100644
--- a/src/StructuredList/StructuredList.svelte
+++ b/src/StructuredList/StructuredList.svelte
@@ -35,10 +35,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:cds--structured-list="{true}"
+  class:cds--structured-list--selection="{selection}"
+  class:cds--structured-list--condensed="{condensed}"
+  class:cds--structured-list--flush="{flush}"
   {...$$restProps}
   on:click
   on:mouseover
diff --git a/src/StructuredList/StructuredListBody.svelte b/src/StructuredList/StructuredListBody.svelte
index f722ff93..49e07dae 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:cds--structured-list-tbody="{true}"
   {...$$restProps}
   on:click
   on:mouseover
diff --git a/src/StructuredList/StructuredListCell.svelte b/src/StructuredList/StructuredListCell.svelte
index 93a162b3..20c149cf 100644
--- a/src/StructuredList/StructuredListCell.svelte
+++ b/src/StructuredList/StructuredListCell.svelte
@@ -9,9 +9,9 @@
 <!-- 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}"
+  class:cds--structured-list-th="{head}"
+  class:cds--structured-list-td="{!head}"
+  class:cds--structured-list-content--nowrap="{noWrap}"
   {...$$restProps}
   on:click
   on:mouseover
diff --git a/src/StructuredList/StructuredListHead.svelte b/src/StructuredList/StructuredListHead.svelte
index 3004a5dd..4eac1791 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:cds--structured-list-thead="{true}"
   {...$$restProps}
   on:click
   on:mouseover
diff --git a/src/StructuredList/StructuredListInput.svelte b/src/StructuredList/StructuredListInput.svelte
index 2b0f365e..9399b53e 100644
--- a/src/StructuredList/StructuredListInput.svelte
+++ b/src/StructuredList/StructuredListInput.svelte
@@ -37,7 +37,7 @@
   name="{name}"
   title="{title}"
   value="{value}"
-  class:bx--structured-list-input="{true}"
+  class:cds--structured-list-input="{true}"
   {...$$restProps}
   on:change="{() => {
     update(value);
diff --git a/src/StructuredList/StructuredListRow.svelte b/src/StructuredList/StructuredListRow.svelte
index 58085b9a..ddaf2e63 100644
--- a/src/StructuredList/StructuredListRow.svelte
+++ b/src/StructuredList/StructuredListRow.svelte
@@ -16,8 +16,8 @@
   <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
   <label
     tabindex="{tabindex}"
-    class:bx--structured-list-row="{true}"
-    class:bx--structured-list-row--header-row="{head}"
+    class:cds--structured-list-row="{true}"
+    class:cds--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:cds--structured-list-row="{true}"
+    class:cds--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..6137aed0 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:cds--skeleton="{true}"
+  class:cds--structured-list="{true}"
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave
 >
-  <div class:bx--structured-list-thead="{true}">
+  <div class:cds--structured-list-thead="{true}">
     <div
-      class:bx--structured-list-row="{true}"
-      class:bx--structured-list-row--header-row="{true}"
+      class:cds--structured-list-row="{true}"
+      class:cds--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:cds--structured-list-th="{true}"><span></span></div>
+      <div class:cds--structured-list-th="{true}"><span></span></div>
+      <div class:cds--structured-list-th="{true}"><span></span></div>
     </div>
   </div>
-  <div class:bx--structured-list-tbody="{true}">
+  <div class:cds--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:cds--structured-list-row="{true}">
+        <div class:cds--structured-list-td="{true}"></div>
+        <div class:cds--structured-list-td="{true}"></div>
+        <div class:cds--structured-list-td="{true}"></div>
       </div>
     {/each}
   </div>
diff --git a/src/Tabs/Tab.svelte b/src/Tabs/Tab.svelte
index 5ce4cce1..5e7e8332 100644
--- a/src/Tabs/Tab.svelte
+++ b/src/Tabs/Tab.svelte
@@ -34,10 +34,10 @@
   bind:this="{ref}"
   tabindex="{disabled ? '-1' : tabindex}"
   role="tab"
-  class:bx--tabs__nav-item="{true}"
-  class:bx--tabs__nav-link="{true}"
-  class:bx--tabs__nav-item--disabled="{disabled}"
-  class:bx--tabs__nav-item--selected="{selected}"
+  class:cds--tabs__nav-item="{true}"
+  class:cds--tabs__nav-link="{true}"
+  class:cds--tabs__nav-item--disabled="{disabled}"
+  class:cds--tabs__nav-item--selected="{selected}"
   aria-selected="{selected}"
   aria-disabled="{disabled}"
   id="{id}"
diff --git a/src/Tabs/TabContent.svelte b/src/Tabs/TabContent.svelte
index b04cacf5..e64347f2 100644
--- a/src/Tabs/TabContent.svelte
+++ b/src/Tabs/TabContent.svelte
@@ -19,7 +19,7 @@
   aria-hidden="{!selected}"
   hidden="{selected ? undefined : ''}"
   id="{id}"
-  class:bx--tab-content="{true}"
+  class:cds--tab-content="{true}"
   {...$$restProps}
 >
   <slot />
diff --git a/src/Tabs/Tabs.svelte b/src/Tabs/Tabs.svelte
index 02bbb448..5e9d28e2 100644
--- a/src/Tabs/Tabs.svelte
+++ b/src/Tabs/Tabs.svelte
@@ -110,11 +110,11 @@
 
 <div
   role="navigation"
-  class:bx--tabs="{true}"
-  class:bx--tabs--contained="{contained}"
+  class:cds--tabs="{true}"
+  class:cds--tabs--contained="{contained}"
   {...$$restProps}
 >
-  <div bind:this="{refTabList}" role="tablist" class:bx--tab--list="{true}">
+  <div bind:this="{refTabList}" role="tablist" class:cds--tab--list="{true}">
     <slot />
   </div>
 </div>
diff --git a/src/Tabs/TabsSkeleton.svelte b/src/Tabs/TabsSkeleton.svelte
index afd81be3..9af75e09 100644
--- a/src/Tabs/TabsSkeleton.svelte
+++ b/src/Tabs/TabsSkeleton.svelte
@@ -12,18 +12,21 @@
 <!-- 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--contained="{type === 'container'}"
+  class:cds--tabs="{true}"
+  class:cds--skeleton="{true}"
+  class:cds--tabs--contained="{type === 'container'}"
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave
 >
-  <div class:bx--tab--list="{true}">
+  <div class:cds--tab--list="{true}">
     {#each Array.from({ length: count }, (_, i) => i) as item}
-      <span class:bx--tabs__nav-item="{true}" class:bx--tabs__nav-link="{true}">
+      <span
+        class:cds--tabs__nav-item="{true}"
+        class:cds--tabs__nav-link="{true}"
+      >
         <span></span>
       </span>
     {/each}
diff --git a/src/Tag/Tag.svelte b/src/Tag/Tag.svelte
index 84ebbc5e..2d8c8736 100644
--- a/src/Tag/Tag.svelte
+++ b/src/Tag/Tag.svelte
@@ -55,31 +55,31 @@
   <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'}"
+    class:cds--tag="{true}"
+    class:cds--tag--disabled="{disabled}"
+    class:cds--tag--filter="{filter}"
+    class:cds--tag--sm="{size === 'sm'}"
+    class:cds--tag--red="{type === 'red'}"
+    class:cds--tag--magenta="{type === 'magenta'}"
+    class:cds--tag--purple="{type === 'purple'}"
+    class:cds--tag--blue="{type === 'blue'}"
+    class:cds--tag--cyan="{type === 'cyan'}"
+    class:cds--tag--teal="{type === 'teal'}"
+    class:cds--tag--green="{type === 'green'}"
+    class:cds--tag--gray="{type === 'gray'}"
+    class:cds--tag--cool-gray="{type === 'cool-gray'}"
+    class:cds--tag--warm-gray="{type === 'warm-gray'}"
+    class:cds--tag--high-contrast="{type === 'high-contrast'}"
+    class:cds--tag--outline="{type === 'outline'}"
     {...$$restProps}
   >
-    <slot props="{{ class: 'bx--tag__label' }}">
-      <span class:bx--tag__label="{true}">{type}</span>
+    <slot props="{{ class: 'cds--tag__label' }}">
+      <span class:cds--tag__label="{true}">{type}</span>
     </slot>
     <button
       type="button"
       aria-labelledby="{id}"
-      class:bx--tag__close-icon="{true}"
+      class:cds--tag__close-icon="{true}"
       disabled="{disabled}"
       title="{title}"
       on:click|stopPropagation
@@ -100,22 +100,22 @@
     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'}"
+    class:cds--tag="{true}"
+    class:cds--tag--interactive="{true}"
+    class:cds--tag--disabled="{disabled}"
+    class:cds--tag--sm="{size === 'sm'}"
+    class:cds--tag--red="{type === 'red'}"
+    class:cds--tag--magenta="{type === 'magenta'}"
+    class:cds--tag--purple="{type === 'purple'}"
+    class:cds--tag--blue="{type === 'blue'}"
+    class:cds--tag--cyan="{type === 'cyan'}"
+    class:cds--tag--teal="{type === 'teal'}"
+    class:cds--tag--green="{type === 'green'}"
+    class:cds--tag--gray="{type === 'gray'}"
+    class:cds--tag--cool-gray="{type === 'cool-gray'}"
+    class:cds--tag--warm-gray="{type === 'warm-gray'}"
+    class:cds--tag--high-contrast="{type === 'high-contrast'}"
+    class:cds--tag--outline="{type === 'outline'}"
     {...$$restProps}
     on:click
     on:mouseover
@@ -123,7 +123,7 @@
     on:mouseleave
   >
     {#if $$slots.icon || icon}
-      <div class:bx--tag__custom-icon="{true}">
+      <div class:cds--tag__custom-icon="{true}">
         <slot name="icon">
           <svelte:component this="{icon}" />
         </slot>
@@ -137,21 +137,21 @@
   <!-- 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'}"
+    class:cds--tag="{true}"
+    class:cds--tag--disabled="{disabled}"
+    class:cds--tag--sm="{size === 'sm'}"
+    class:cds--tag--red="{type === 'red'}"
+    class:cds--tag--magenta="{type === 'magenta'}"
+    class:cds--tag--purple="{type === 'purple'}"
+    class:cds--tag--blue="{type === 'blue'}"
+    class:cds--tag--cyan="{type === 'cyan'}"
+    class:cds--tag--teal="{type === 'teal'}"
+    class:cds--tag--green="{type === 'green'}"
+    class:cds--tag--gray="{type === 'gray'}"
+    class:cds--tag--cool-gray="{type === 'cool-gray'}"
+    class:cds--tag--warm-gray="{type === 'warm-gray'}"
+    class:cds--tag--high-contrast="{type === 'high-contrast'}"
+    class:cds--tag--outline="{type === 'outline'}"
     {...$$restProps}
     on:click
     on:mouseover
@@ -159,7 +159,7 @@
     on:mouseleave
   >
     {#if $$slots.icon || icon}
-      <div class:bx--tag__custom-icon="{true}">
+      <div class:cds--tag__custom-icon="{true}">
         <slot name="icon">
           <svelte:component this="{icon}" />
         </slot>
diff --git a/src/Tag/TagSkeleton.svelte b/src/Tag/TagSkeleton.svelte
index 335df304..f330df00 100644
--- a/src/Tag/TagSkeleton.svelte
+++ b/src/Tag/TagSkeleton.svelte
@@ -6,9 +6,9 @@
 <!-- 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:cds--tag="{true}"
+  class:cds--tag--sm="{size === 'sm'}"
+  class:cds--skeleton="{true}"
   {...$$restProps}
   on:click
   on:mouseover
diff --git a/src/TextArea/TextArea.svelte b/src/TextArea/TextArea.svelte
index bd11d718..d49ffe77 100644
--- a/src/TextArea/TextArea.svelte
+++ b/src/TextArea/TextArea.svelte
@@ -69,33 +69,33 @@
   on:mouseover
   on:mouseenter
   on:mouseleave
-  class:bx--form-item="{true}"
+  class:cds--form-item="{true}"
 >
   {#if (labelText || $$slots.labelText) && !hideLabel}
-    <div class:bx--text-area__label-wrapper="{true}">
+    <div class:cds--text-area__label-wrapper="{true}">
       <label
         for="{id}"
-        class:bx--label="{true}"
-        class:bx--visually-hidden="{hideLabel}"
-        class:bx--label--disabled="{disabled}"
+        class:cds--label="{true}"
+        class:cds--visually-hidden="{hideLabel}"
+        class:cds--label--disabled="{disabled}"
       >
         <slot name="labelText">
           {labelText}
         </slot>
       </label>
       {#if maxCount}
-        <div class:bx--label="{true}" class:bx--label--disabled="{disabled}">
+        <div class:cds--label="{true}" class:cds--label--disabled="{disabled}">
           {value.length}/{maxCount}
         </div>
       {/if}
     </div>
   {/if}
   <div
-    class:bx--text-area__wrapper="{true}"
+    class:cds--text-area__wrapper="{true}"
     data-invalid="{invalid || undefined}"
   >
     {#if invalid}
-      <WarningFilled class="bx--text-area__invalid-icon" />
+      <WarningFilled class="cds--text-area__invalid-icon" />
     {/if}
     <textarea
       bind:this="{ref}"
@@ -109,9 +109,9 @@
       rows="{rows}"
       placeholder="{placeholder}"
       readonly="{readonly}"
-      class:bx--text-area="{true}"
-      class:bx--text-area--light="{light}"
-      class:bx--text-area--invalid="{invalid}"
+      class:cds--text-area="{true}"
+      class:cds--text-area--light="{light}"
+      class:cds--text-area--invalid="{invalid}"
       maxlength="{maxCount ?? undefined}"
       style="{cols ? '' : 'width: 100%;'}"
       {...$$restProps}
@@ -125,13 +125,13 @@
   </div>
   {#if !invalid && helperText}
     <div
-      class:bx--form__helper-text="{true}"
-      class:bx--form__helper-text--disabled="{disabled}"
+      class:cds--form__helper-text="{true}"
+      class:cds--form__helper-text--disabled="{disabled}"
     >
       {helperText}
     </div>
   {/if}
   {#if invalid}
-    <div id="{errorId}" class:bx--form-requirement="{true}">{invalidText}</div>
+    <div id="{errorId}" class:cds--form-requirement="{true}">{invalidText}</div>
   {/if}
 </div>
diff --git a/src/TextArea/TextAreaSkeleton.svelte b/src/TextArea/TextAreaSkeleton.svelte
index beb862d1..1b21b996 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:cds--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:cds--label="{true}" class:cds--skeleton="{true}"></span>
   {/if}
-  <div class:bx--skeleton="{true}" class:bx--text-area="{true}"></div>
+  <div class:cds--skeleton="{true}" class:cds--text-area="{true}"></div>
 </div>
diff --git a/src/TextInput/PasswordInput.svelte b/src/TextInput/PasswordInput.svelte
index a7a89e3a..c39121b4 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:cds--form-item="{true}"
+  class:cds--text-input-wrapper="{true}"
+  class:cds--password-input-wrapper="{!isFluid}"
+  class:cds--text-input-wrapper--light="{light}"
+  class:cds--text-input-wrapper--inline="{inline}"
   on:click
   on:mouseover
   on:mouseenter
@@ -111,12 +111,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--lg="{inline && (size === 'lg' || size === 'xl')}"
+      class:cds--label="{true}"
+      class:cds--visually-hidden="{hideLabel}"
+      class:cds--label--disabled="{disabled}"
+      class:cds--label--inline="{inline}"
+      class:cds--label--inline--sm="{inline && size === 'sm'}"
+      class:cds--label--inline--lg="{inline &&
+        (size === 'lg' || size === 'xl')}"
     >
       <slot name="labelText">
         {labelText}
@@ -125,9 +126,9 @@
     {#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}"
+        class:cds--form__helper-text="{true}"
+        class:cds--form__helper-text--disabled="{disabled}"
+        class:cds--form__helper-text--inline="{inline}"
       >
         {helperText}
       </div>
@@ -136,12 +137,13 @@
   {#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--lg="{inline && (size === 'lg' || size === 'xl')}"
+      class:cds--label="{true}"
+      class:cds--visually-hidden="{hideLabel}"
+      class:cds--label--disabled="{disabled}"
+      class:cds--label--inline="{inline}"
+      class:cds--label--inline--sm="{inline && size === 'sm'}"
+      class:cds--label--inline--lg="{inline &&
+        (size === 'lg' || size === 'xl')}"
     >
       <slot name="labelText">
         {labelText}
@@ -149,21 +151,21 @@
     </label>
   {/if}
   <div
-    class:bx--text-input__field-outer-wrapper="{true}"
-    class:bx--text-input__field-outer-wrapper--inline="{inline}"
+    class:cds--text-input__field-outer-wrapper="{true}"
+    class:cds--text-input__field-outer-wrapper--inline="{inline}"
   >
     <div
-      class:bx--text-input__field-wrapper="{true}"
-      class:bx--text-input__field-wrapper--warning="{warn}"
+      class:cds--text-input__field-wrapper="{true}"
+      class:cds--text-input__field-wrapper--warning="{warn}"
       data-invalid="{invalid || undefined}"
     >
       {#if invalid}
-        <WarningFilled class="bx--text-input__invalid-icon" />
+        <WarningFilled class="cds--text-input__invalid-icon" />
       {/if}
       {#if !invalid && warn}
         <WarningAltFilled
-          class="bx--text-input__invalid-icon
-            bx--text-input__invalid-icon--warning"
+          class="cds--text-input__invalid-icon
+            cds--text-input__invalid-icon--warning"
         />
       {/if}
       <input
@@ -183,13 +185,13 @@
         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--lg="{size === 'lg' || size === 'xl'}"
+        class:cds--text-input="{true}"
+        class:cds--password-input="{true}"
+        class:cds--text-input--light="{light}"
+        class:cds--text-input--invalid="{invalid}"
+        class:cds--text-input--warning="{warn}"
+        class:cds--text-input--sm="{size === 'sm'}"
+        class:cds--text-input--lg="{size === 'lg' || size === 'xl'}"
         {...$$restProps}
         on:change
         on:input
@@ -203,8 +205,8 @@
         on:paste
       />
       {#if isFluid && invalid}
-        <hr class="bx--text-input__divider" />
-        <div class="bx--form-requirement" id="{errorId}">
+        <hr class="cds--text-input__divider" />
+        <div class="cds--form-requirement" id="{errorId}">
           {invalidText}
         </div>
       {/if}
@@ -212,54 +214,54 @@
         <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'}"
+          class:cds--text-input--password__visibility__toggle="{true}"
+          class:cds--btn="{true}"
+          class:cds--btn--icon-only="{true}"
+          class:cds--btn--disabled="{disabled}"
+          class:cds--tooltip__trigger="{true}"
+          class:cds--tooltip--a11y="{true}"
+          class:cds--tooltip--top="{tooltipPosition === 'top'}"
+          class:cds--tooltip--right="{tooltipPosition === 'right'}"
+          class:cds--tooltip--bottom="{tooltipPosition === 'bottom'}"
+          class:cds--tooltip--left="{tooltipPosition === 'left'}"
+          class:cds--tooltip--align-start="{tooltipAlignment === 'start'}"
+          class:cds--tooltip--align-center="{tooltipAlignment === 'center'}"
+          class:cds--tooltip--align-end="{tooltipAlignment === 'end'}"
           on:click="{() => {
             type = type === 'password' ? 'text' : 'password';
           }}"
         >
           {#if !disabled}
-            <span class:bx--assistive-text="{true}">
+            <span class:cds--assistive-text="{true}">
               {#if type === "text"}
                 {hidePasswordLabel}
               {:else}{showPasswordLabel}{/if}
             </span>
           {/if}
           {#if type === "text"}
-            <ViewOff class="bx--icon-visibility-off" />
+            <ViewOff class="cds--icon-visibility-off" />
           {:else}
-            <View class="bx--icon-visibility-on" />
+            <View class="cds--icon-visibility-on" />
           {/if}
         </button>
       {/if}
     </div>
     {#if !isFluid && invalid}
-      <div class:bx--form-requirement="{true}" id="{errorId}">
+      <div class:cds--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:cds--form__helper-text="{true}"
+        class:cds--form__helper-text--disabled="{disabled}"
+        class:cds--form__helper-text--inline="{inline}"
       >
         {helperText}
       </div>
     {/if}
     {#if !isFluid && !invalid && warn}
-      <div class:bx--form-requirement="{true}" id="{warnId}">{warnText}</div>
+      <div class:cds--form-requirement="{true}" id="{warnId}">{warnText}</div>
     {/if}
   </div>
 </div>
diff --git a/src/TextInput/TextInput.svelte b/src/TextInput/TextInput.svelte
index fb574ef4..377641c8 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:cds--form-item="{true}"
+  class:cds--text-input-wrapper="{true}"
+  class:cds--text-input-wrapper--inline="{inline}"
+  class:cds--text-input-wrapper--light="{light}"
+  class:cds--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:cds--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--lg="{size === 'lg' || size === 'xl'}"
+          class:cds--label="{true}"
+          class:cds--visually-hidden="{hideLabel}"
+          class:cds--label--disabled="{disabled}"
+          class:cds--label--inline="{inline}"
+          class:cds--label--inline--sm="{size === 'sm'}"
+          class:cds--label--inline--lg="{size === 'lg' || 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:cds--form__helper-text="{true}"
+          class:cds--form__helper-text--disabled="{disabled}"
+          class:cds--form__helper-text--inline="{inline}"
         >
           {helperText}
         </div>
@@ -146,12 +146,12 @@
   {#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'}"
+      class:cds--label="{true}"
+      class:cds--visually-hidden="{hideLabel}"
+      class:cds--label--disabled="{disabled}"
+      class:cds--label--inline="{inline}"
+      class:cds--label--inline-sm="{inline && size === 'sm'}"
+      class:cds--label--inline-xl="{inline && size === 'xl'}"
     >
       <slot name="labelText">
         {labelText}
@@ -159,23 +159,23 @@
     </label>
   {/if}
   <div
-    class:bx--text-input__field-outer-wrapper="{true}"
-    class:bx--text-input__field-outer-wrapper--inline="{inline}"
+    class:cds--text-input__field-outer-wrapper="{true}"
+    class:cds--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}"
+      class:cds--text-input__field-wrapper="{true}"
+      class:cds--text-input__field-wrapper--warning="{!invalid && warn}"
     >
       {#if !readonly}
         {#if invalid}
-          <WarningFilled class="bx--text-input__invalid-icon" />
+          <WarningFilled class="cds--text-input__invalid-icon" />
         {/if}
         {#if !invalid && warn}
           <WarningAltFilled
-            class="bx--text-input__invalid-icon
-            bx--text-input__invalid-icon--warning"
+            class="cds--text-input__invalid-icon
+            cds--text-input__invalid-icon--warning"
           />
         {/if}
       {/if}
@@ -198,12 +198,12 @@
         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--lg="{size === 'lg' || size === 'xl'}"
+        class:cds--text-input="{true}"
+        class:cds--text-input--light="{light}"
+        class:cds--text-input--invalid="{error}"
+        class:cds--text-input--warning="{warn}"
+        class:cds--text-input--sm="{size === 'sm'}"
+        class:cds--text-input--lg="{size === 'lg' || size === 'xl'}"
         {...$$restProps}
         on:change="{onChange}"
         on:input="{onInput}"
@@ -214,34 +214,34 @@
         on:paste
       />
       {#if isFluid}
-        <hr class:bx--text-input__divider="{true}" />
+        <hr class:cds--text-input__divider="{true}" />
       {/if}
       {#if isFluid && !inline && invalid}
-        <div class:bx--form-requirement="{true}" id="{errorId}">
+        <div class:cds--form-requirement="{true}" id="{errorId}">
           {invalidText}
         </div>
       {/if}
       {#if isFluid && !inline && warn}
-        <div class:bx--form-requirement="{true}" id="{warnId}">{warnText}</div>
+        <div class:cds--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}"
+        class:cds--form__helper-text="{true}"
+        class:cds--form__helper-text--disabled="{disabled}"
+        class:cds--form__helper-text--inline="{inline}"
       >
         {helperText}
       </div>
     {/if}
     {#if !isFluid && invalid}
-      <div class:bx--form-requirement="{true}" id="{errorId}">
+      <div class:cds--form-requirement="{true}" id="{errorId}">
         {invalidText}
       </div>
     {/if}
     {#if !isFluid && !invalid && warn}
-      <div class:bx--form-requirement="{true}" id="{warnId}">{warnText}</div>
+      <div class:cds--form-requirement="{true}" id="{warnId}">{warnText}</div>
     {/if}
   </div>
 </div>
diff --git a/src/TextInput/TextInputSkeleton.svelte b/src/TextInput/TextInputSkeleton.svelte
index 690ea42d..5a4eb605 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:cds--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:cds--label="{true}" class:cds--skeleton="{true}"></span>
   {/if}
-  <div class:bx--skeleton="{true}" class:bx--text-input="{true}"></div>
+  <div class:cds--skeleton="{true}" class:cds--text-input="{true}"></div>
 </div>
diff --git a/src/Tile/ClickableTile.svelte b/src/Tile/ClickableTile.svelte
index 3121a317..f55c58fb 100644
--- a/src/Tile/ClickableTile.svelte
+++ b/src/Tile/ClickableTile.svelte
@@ -22,8 +22,8 @@
 <Link
   {...$$restProps}
   disabled="{disabled}"
-  class="bx--tile bx--tile--clickable {clicked &&
-    'bx--tile--is-clicked'} {light && 'bx--tile--light'} {$$restProps.class}"
+  class="cds--tile cds--tile--clickable {clicked &&
+    'cds--tile--is-clicked'} {light && 'cds--tile--light'} {$$restProps.class}"
   href="{href}"
   on:click
   on:click="{() => {
diff --git a/src/Tile/ExpandableTile.svelte b/src/Tile/ExpandableTile.svelte
index fe8ae386..81c3f88c 100644
--- a/src/Tile/ExpandableTile.svelte
+++ b/src/Tile/ExpandableTile.svelte
@@ -70,10 +70,10 @@
   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}"
+  class:cds--tile="{true}"
+  class:cds--tile--expandable="{true}"
+  class:cds--tile--is-expanded="{expanded}"
+  class:cds--tile--light="{light}"
   style:max-height="{expanded ? "none" : `${tileMaxHeight + tilePadding}px`}"
   {...$$restProps}
   on:click
@@ -86,17 +86,17 @@
   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:cds--tile-content="{true}">
+      <span class:cds--tile-content__above-the-fold="{true}">
         <slot name="above" />
       </span>
     </div>
-    <div class:bx--tile__chevron="{true}">
+    <div class:cds--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:cds--tile-content="{true}">
+      <span class:cds--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..5ddb846e 100644
--- a/src/Tile/RadioTile.svelte
+++ b/src/Tile/RadioTile.svelte
@@ -55,7 +55,7 @@
   tabindex="{disabled ? undefined : tabindex}"
   disabled="{disabled}"
   required="{$groupRequired ?? required}"
-  class:bx--tile-input="{true}"
+  class:cds--tile-input="{true}"
   on:change
   on:change="{() => {
     if (disabled) return;
@@ -74,21 +74,21 @@
 <!-- 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}"
+  class:cds--tile="{true}"
+  class:cds--tile--selectable="{true}"
+  class:cds--tile--is-selected="{checked}"
+  class:cds--tile--light="{light}"
+  class:cds--tile--disabled="{disabled}"
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave
 >
-  <span class:bx--tile__checkmark="{true}">
+  <span class:cds--tile__checkmark="{true}">
     <CheckmarkFilled aria-label="{iconDescription}" title="{iconDescription}" />
   </span>
-  <span class:bx--tile-content="{true}">
+  <span class:cds--tile-content="{true}">
     <slot />
   </span>
 </label>
diff --git a/src/Tile/SelectableTile.svelte b/src/Tile/SelectableTile.svelte
index a2719d11..b5e7793b 100644
--- a/src/Tile/SelectableTile.svelte
+++ b/src/Tile/SelectableTile.svelte
@@ -49,7 +49,7 @@
   bind:this="{ref}"
   type="checkbox"
   tabindex="-1"
-  class:bx--tile-input="{true}"
+  class:cds--tile-input="{true}"
   checked="{selected}"
   id="{id}"
   value="{value}"
@@ -63,11 +63,11 @@
 <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}"
+  class:cds--tile="{true}"
+  class:cds--tile--selectable="{true}"
+  class:cds--tile--is-selected="{selected}"
+  class:cds--tile--light="{light}"
+  class:cds--tile--disabled="{disabled}"
   {...$$restProps}
   on:click
   on:click|preventDefault="{() => {
@@ -86,10 +86,10 @@
     }
   }}"
 >
-  <span class:bx--tile__checkmark="{true}">
+  <span class:cds--tile__checkmark="{true}">
     <CheckmarkFilled aria-label="{iconDescription}" title="{iconDescription}" />
   </span>
-  <span class:bx--tile-content="{true}">
+  <span class:cds--tile-content="{true}">
     <slot />
   </span>
 </label>
diff --git a/src/Tile/Tile.svelte b/src/Tile/Tile.svelte
index c044bf02..e3727156 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:cds--tile="{true}"
+  class:cds--tile--light="{light}"
   {...$$restProps}
   on:click
   on:mouseover
diff --git a/src/Tile/TileGroup.svelte b/src/Tile/TileGroup.svelte
index 5934c659..c23fb38b 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="{disabled}" class:cds--tile-group="{true}" {...$$restProps}>
   {#if legend}
-    <legend class:bx--label="{true}">{legend}</legend>
+    <legend class:cds--label="{true}">{legend}</legend>
   {/if}
   <div>
     <slot />
diff --git a/src/TimePicker/TimePicker.svelte b/src/TimePicker/TimePicker.svelte
index 3d812f12..ccabaa60 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:cds--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--lg="{size === 'lg' || size === 'xl'}"
-    class:bx--select--light="{light}"
+    class:cds--time-picker="{true}"
+    class:cds--time-picker--light="{light}"
+    class:cds--time-picker--invalid="{invalid}"
+    class:cds--time-picker--sm="{size === 'sm'}"
+    class:cds--time-picker--lg="{size === 'lg' || size === 'xl'}"
+    class:cds--select--light="{light}"
   >
-    <div class:bx--time-picker__input="{true}">
+    <div class:cds--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}"
+          class:cds--label="{true}"
+          class:cds--visually-hidden="{hideLabel}"
+          class:cds--label--disabled="{disabled}"
         >
           <slot name="labelText">
             {labelText}
@@ -94,10 +94,10 @@
         name="{name}"
         disabled="{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:cds--time-picker__input-field="{true}"
+        class:cds--text-input="{true}"
+        class:cds--text-input--light="{light}"
+        class:cds--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:cds--form-requirement="{true}">{invalidText}</div>
   {/if}
 </div>
diff --git a/src/TimePicker/TimePickerSelect.svelte b/src/TimePicker/TimePickerSelect.svelte
index 32eee7a2..d283cec9 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:cds--select="{true}"
+  class:cds--time-picker__select="{true}"
   {...$$restProps}
   on:click
   on:mouseover
@@ -52,8 +52,8 @@
   {#if labelText || $$slots.labelText}
     <label
       for="{id}"
-      class:bx--label="{true}"
-      class:bx--visually-hidden="{true}"
+      class:cds--label="{true}"
+      class:cds--visually-hidden="{true}"
     >
       <slot name="labelText">
         {labelText}
@@ -67,7 +67,7 @@
     name="{name}"
     disabled="{disabled}"
     value="{value}"
-    class:bx--select-input="{true}"
+    class:cds--select-input="{true}"
     on:change="{({ target }) => {
       selectedValue.set(target.value);
     }}"
@@ -77,6 +77,6 @@
   <ChevronDown
     aria-label="{iconDescription}"
     title="{iconDescription}"
-    class="bx--select__arrow"
+    class="cds--select__arrow"
   />
 </div>
diff --git a/src/Toggle/Toggle.svelte b/src/Toggle/Toggle.svelte
index 95571c11..0a44b6f9 100644
--- a/src/Toggle/Toggle.svelte
+++ b/src/Toggle/Toggle.svelte
@@ -48,10 +48,10 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class:bx--form-item="{true}"
+  class:cds--form-item="{true}"
   style:user-select="none"
-  class:bx--toggle="{true}"
-  class:bx--toggle--disabled="{disabled}"
+  class:cds--toggle="{true}"
+  class:cds--toggle--disabled="{disabled}"
   {...$$restProps}
   on:click
   on:mouseover
@@ -62,7 +62,7 @@
   <input
     role="switch"
     type="checkbox"
-    class:bx--toggle__button="{true}"
+    class:cds--toggle__button="{true}"
     checked="{toggled}"
     on:change="{() => {
       toggled = !toggled;
@@ -84,29 +84,29 @@
   <label
     aria-label="{labelText ? undefined : $$props['aria-label'] || 'Toggle'}"
     for="{id}"
-    class:bx--toggle__label="{true}"
+    class:cds--toggle__label="{true}"
   >
     <span
-      class:bx--toggle__label-text="{true}"
-      class:bx--visually-hidden="{hideLabel}"
+      class:cds--toggle__label-text="{true}"
+      class:cds--visually-hidden="{hideLabel}"
     >
       <slot name="labelText">
         {labelText}
       </slot>
     </span>
     <div
-      class:bx--toggle__appearance="{true}"
-      class:bx--toggle__appearance--sm="{isSm}"
+      class:cds--toggle__appearance="{true}"
+      class:cds--toggle__appearance--sm="{isSm}"
       style="{hideLabel && 'margin-top: 0'}"
     >
       <div
         aria-hidden="true"
-        class:bx--toggle__switch="{true}"
-        class:bx--toggle__switch--checked="{toggled}"
+        class:cds--toggle__switch="{true}"
+        class:cds--toggle__switch--checked="{toggled}"
       >
         {#if isSm}
           <svg
-            class:bx--toggle__check="{true}"
+            class:cds--toggle__check="{true}"
             width="6px"
             height="5px"
             viewBox="0 0 6 5"
@@ -115,7 +115,7 @@
           </svg>
         {/if}
       </div>
-      <span class:bx--toggle__text="{true}" aria-hidden="{true}"
+      <span class:cds--toggle__text="{true}" aria-hidden="{true}"
         >{sideLabel}</span
       >
     </div>
diff --git a/src/Toggle/ToggleSkeleton.svelte b/src/Toggle/ToggleSkeleton.svelte
index 5b07cf5b..349060f1 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:cds--form-item="{true}"
   {...$$restProps}
   on:click
   on:mouseover
@@ -25,27 +25,27 @@
   <input
     type="checkbox"
     id="{id}"
-    class:bx--toggle="{true}"
-    class:bx--toggle--small="{size === 'sm'}"
-    class:bx--skeleton="{true}"
+    class:cds--toggle="{true}"
+    class:cds--toggle--small="{size === 'sm'}"
+    class:cds--skeleton="{true}"
   />
   <label
     aria-label="{labelText
       ? undefined
       : $$props['aria-label'] || 'Toggle is loading'}"
     for="{id}"
-    class:bx--toggle__label="{true}"
-    class:bx--skeleton="{true}"
+    class:cds--toggle__label="{true}"
+    class:cds--skeleton="{true}"
   >
     {#if labelText || $$slots.labelText}
-      <span class:bx--toggle__label-text="{true}">
+      <span class:cds--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:cds--toggle__text--left="{true}"></span>
+    <span class:cds--toggle__appearance="{true}"></span>
+    <span class:cds--toggle__text--right="{true}"></span>
   </label>
 </div>
diff --git a/src/Tooltip/Tooltip.svelte b/src/Tooltip/Tooltip.svelte
index cc7c8d20..73707944 100644
--- a/src/Tooltip/Tooltip.svelte
+++ b/src/Tooltip/Tooltip.svelte
@@ -168,7 +168,7 @@
     role: "button",
     "aria-haspopup": "true",
     id: hideIcon ? triggerId : undefined,
-    class: hideIcon ? "bx--tooltip__label" : "bx--tooltip__trigger",
+    class: hideIcon ? "cds--tooltip__label" : "cds--tooltip__trigger",
     "aria-expanded": open,
     "aria-describedby": open ? tooltipId : undefined,
     "aria-labelledby": triggerText ? triggerId : undefined,
@@ -205,7 +205,7 @@
   {...$$restProps}
 >
   {#if !hideIcon}
-    <div bind:this="{ref}" id="{triggerId}" class:bx--tooltip__label="{true}">
+    <div bind:this="{ref}" id="{triggerId}" class:cds--tooltip__label="{true}">
       <slot name="triggerText">{triggerText}</slot>
       <!-- svelte-ignore a11y-no-static-element-interactions -->
       <div
@@ -241,24 +241,24 @@
       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'}"
+      class:cds--tooltip="{true}"
+      class:cds--tooltip--shown="{open}"
+      class:cds--tooltip--top="{direction === 'top'}"
+      class:cds--tooltip--right="{direction === 'right'}"
+      class:cds--tooltip--bottom="{direction === 'bottom'}"
+      class:cds--tooltip--left="{direction === 'left'}"
+      class:cds--tooltip--align-center="{align === 'center'}"
+      class:cds--tooltip--align-start="{align === 'start'}"
+      class:cds--tooltip--align-end="{align === 'end'}"
       on:keydown="{onKeydown}"
     >
-      <span class:bx--tooltip__caret="{true}"></span>
+      <span class:cds--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:cds--tooltip__content="{true}"
         tabindex="-1"
         role="dialog"
       >
diff --git a/src/Tooltip/TooltipFooter.svelte b/src/Tooltip/TooltipFooter.svelte
index 946bbef3..febc751a 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:cds--tooltip__footer="{true}">
   <slot />
 </div>
diff --git a/src/TooltipDefinition/TooltipDefinition.svelte b/src/TooltipDefinition/TooltipDefinition.svelte
index 5c310aa4..a5af50ea 100644
--- a/src/TooltipDefinition/TooltipDefinition.svelte
+++ b/src/TooltipDefinition/TooltipDefinition.svelte
@@ -49,8 +49,8 @@
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <span
-  class:bx--tooltip--definition="{true}"
-  class:bx--tooltip--a11y="{true}"
+  class:cds--tooltip--definition="{true}"
+  class:cds--tooltip--a11y="{true}"
   {...$$restProps}
   on:mouseenter="{show}"
   on:mouseleave="{hide}"
@@ -59,16 +59,16 @@
     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'}"
+    class:cds--tooltip--a11y="{true}"
+    class:cds--tooltip__trigger="{true}"
+    class:cds--tooltip__trigger--definition="{true}"
+    class:cds--tooltip--hidden="{!open}"
+    class:cds--tooltip--visible="{open}"
+    class:cds--tooltip--top="{direction === 'top'}"
+    class:cds--tooltip--bottom="{direction === 'bottom'}"
+    class:cds--tooltip--align-start="{align === 'start'}"
+    class:cds--tooltip--align-center="{align === 'center'}"
+    class:cds--tooltip--align-end="{align === 'end'}"
     on:click
     on:mouseover
     on:mouseenter
@@ -79,7 +79,7 @@
   >
     <slot />
   </button>
-  <div role="tooltip" id="{id}" class:bx--assistive-text="{true}">
+  <div role="tooltip" id="{id}" class:cds--assistive-text="{true}">
     <slot name="tooltip">{tooltipText}</slot>
   </div>
 </span>
diff --git a/src/TooltipIcon/TooltipIcon.svelte b/src/TooltipIcon/TooltipIcon.svelte
index 81a5b3ac..8fc0e5ed 100644
--- a/src/TooltipIcon/TooltipIcon.svelte
+++ b/src/TooltipIcon/TooltipIcon.svelte
@@ -47,16 +47,16 @@
   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'}"
+  class:cds--tooltip__trigger="{true}"
+  class:cds--tooltip--a11y="{true}"
+  class:cds--tooltip--hidden="{hidden || disabled}"
+  class:cds--tooltip--top="{direction === 'top'}"
+  class:cds--tooltip--right="{direction === 'right'}"
+  class:cds--tooltip--bottom="{direction === 'bottom'}"
+  class:cds--tooltip--left="{direction === 'left'}"
+  class:cds--tooltip--align-start="{align === 'start'}"
+  class:cds--tooltip--align-center="{align === 'center'}"
+  class:cds--tooltip--align-end="{align === 'end'}"
   style:cursor="{disabled ? "not-allowed" : "default"}"
   {...$$restProps}
   on:click
@@ -73,7 +73,7 @@
     hidden = false;
   }}"
 >
-  <span id="{id}" class:bx--assistive-text="{true}">
+  <span id="{id}" class:cds--assistive-text="{true}">
     <slot name="tooltipText">{tooltipText}</slot>
   </span>
   <slot>
diff --git a/src/TreeView/TreeView.svelte b/src/TreeView/TreeView.svelte
index aa51df1d..8e8325ba 100644
--- a/src/TreeView/TreeView.svelte
+++ b/src/TreeView/TreeView.svelte
@@ -198,7 +198,7 @@
 
   onMount(() => {
     const firstFocusableNode = ref.querySelector(
-      "li.bx--tree-node:not(.bx--tree-node--disabled)"
+      "li.cds--tree-node:not(.cds--tree-node--disabled)"
     );
 
     if (firstFocusableNode != null) {
@@ -231,9 +231,9 @@
   $: if (ref) {
     treeWalker = document.createTreeWalker(ref, NodeFilter.SHOW_ELEMENT, {
       acceptNode: (node) => {
-        if (node.classList.contains("bx--tree-node--disabled"))
+        if (node.classList.contains("cds--tree-node--disabled"))
           return NodeFilter.FILTER_REJECT;
-        if (node.matches("li.bx--tree-node")) return NodeFilter.FILTER_ACCEPT;
+        if (node.matches("li.cds--tree-node")) return NodeFilter.FILTER_ACCEPT;
         return NodeFilter.FILTER_SKIP;
       },
     });
@@ -242,7 +242,7 @@
 
 {#if !hideLabel}
   <!-- svelte-ignore a11y-label-has-associated-control -->
-  <label id="{labelId}" class:bx--label="{true}">
+  <label id="{labelId}" class:cds--label="{true}">
     <slot name="labelText">{labelText}</slot>
   </label>
 {/if}
@@ -252,9 +252,9 @@
   {...$$restProps}
   role="tree"
   bind:this="{ref}"
-  class:bx--tree="{true}"
-  class:bx--tree--xs="{size === 'xs'}"
-  class:bx--tree--sm="{size === 'sm'}"
+  class:cds--tree="{true}"
+  class:cds--tree--xs="{size === 'xs'}"
+  class:cds--tree--sm="{size === 'sm'}"
   aria-label="{hideLabel ? labelText : undefined}"
   aria-labelledby="{!hideLabel ? labelId : undefined}"
   aria-multiselectable="{selectedIds.length > 1 || undefined}"
diff --git a/src/TreeView/TreeViewNode.svelte b/src/TreeView/TreeViewNode.svelte
index 5e0aedd6..05e70882 100644
--- a/src/TreeView/TreeViewNode.svelte
+++ b/src/TreeView/TreeViewNode.svelte
@@ -25,8 +25,8 @@
    * @returns {null | HTMLElement}
    */
   function findParentTreeNode(node) {
-    if (node.classList.contains("bx--tree-parent-node")) return node;
-    if (node.classList.contains("bx--tree")) return null;
+    if (node.classList.contains("cds--tree-parent-node")) return node;
+    if (node.classList.contains("cds--tree")) return null;
     return findParentTreeNode(node.parentNode);
   }
 </script>
@@ -94,12 +94,12 @@
   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}"
+  class:cds--tree-node="{true}"
+  class:cds--tree-leaf-node="{true}"
+  class:cds--tree-node--active="{id === $activeNodeId}"
+  class:cds--tree-node--selected="{selected}"
+  class:cds--tree-node--disabled="{disabled}"
+  class:cds--tree-node--with-icon="{icon}"
   on:click|stopPropagation="{() => {
     if (disabled) return;
     clickNode(node);
@@ -124,8 +124,8 @@
     focusNode(node);
   }}"
 >
-  <div bind:this="{refLabel}" class:bx--tree-node__label="{true}">
-    <svelte:component this="{icon}" class="bx--tree-node__icon" />
+  <div bind:this="{refLabel}" class:cds--tree-node__label="{true}">
+    <svelte:component this="{icon}" class="cds--tree-node__icon" />
     <slot node="{node}">
       {text}
     </slot>
diff --git a/src/TreeView/TreeViewNodeList.svelte b/src/TreeView/TreeViewNodeList.svelte
index b3dce695..5f80c806 100644
--- a/src/TreeView/TreeViewNodeList.svelte
+++ b/src/TreeView/TreeViewNodeList.svelte
@@ -87,12 +87,12 @@
     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}"
+    class:cds--tree-node="{true}"
+    class:cds--tree-parent-node="{true}"
+    class:cds--tree-node--active="{id === $activeNodeId}"
+    class:cds--tree-node--selected="{selected}"
+    class:cds--tree-node--disabled="{disabled}"
+    class:cds--tree-node--with-icon="{icon}"
     aria-expanded="{expanded}"
     on:click|stopPropagation="{() => {
       if (disabled) return;
@@ -137,11 +137,11 @@
       focusNode(node);
     }}"
   >
-    <div class:bx--tree-node__label="{true}" bind:this="{refLabel}">
+    <div class:cds--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}"
+        class:cds--tree-parent-node__toggle="{true}"
         disabled="{disabled}"
         on:click="{() => {
           if (disabled) return;
@@ -151,17 +151,17 @@
         }}"
       >
         <CaretDown
-          class="bx--tree-parent-node__toggle-icon {expanded &&
-            'bx--tree-parent-node__toggle-icon--expanded'}"
+          class="cds--tree-parent-node__toggle-icon {expanded &&
+            'cds--tree-parent-node__toggle-icon--expanded'}"
         />
       </span>
-      <span class:bx--tree-node__label__details="{true}">
-        <svelte:component this="{icon}" class="bx--tree-node__icon" />
+      <span class:cds--tree-node__label__details="{true}">
+        <svelte:component this="{icon}" class="cds--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:cds--tree-node__children="{true}">
         {#each children as child (child.id)}
           {#if Array.isArray(child.children)}
             <svelte:self {...child} let:node>
diff --git a/src/Truncate/Truncate.svelte b/src/Truncate/Truncate.svelte
index f9853f06..4056a796 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:cds--text-truncate-end="{clamp === 'end'}"
+  class:cds--text-truncate-front="{clamp === 'front'}"
   {...$$restProps}
 >
   <slot />
diff --git a/src/Truncate/truncate.js b/src/Truncate/truncate.js
index c737b317..4e683b83 100644
--- a/src/Truncate/truncate.js
+++ b/src/Truncate/truncate.js
@@ -7,7 +7,7 @@
  * <h1 use:truncate={{ clamp: "front" }}>...</h1>
  */
 export function truncate(node, options = {}) {
-  const prefix = "bx--text-truncate-";
+  const prefix = "cds--text-truncate-";
 
   function toggleClass(front = false) {
     const classes = [...node.classList]
diff --git a/src/UIShell/Content.svelte b/src/UIShell/Content.svelte
index 598d287b..c6867759 100644
--- a/src/UIShell/Content.svelte
+++ b/src/UIShell/Content.svelte
@@ -6,7 +6,7 @@
 
   /**
    * By default, the `SideNav` applies a left margin of `3rem` to `Content`
-   * if it's a sibling component (e.g., .bx--side-nav ~ .bx--content).
+   * if it's a sibling component (e.g., .cds--side-nav ~ .cds--content).
    *
    * We manually unset the left margin if the `SideNav`
    * is collapsed and if it's not the `rail` variant.
@@ -16,7 +16,7 @@
 
 <main
   id="{id}"
-  class:bx--content="{true}"
+  class:cds--content="{true}"
   style:margin-left="{unsetLeftMargin ? 0 : undefined}"
   {...$$restProps}
 >
diff --git a/src/UIShell/HamburgerMenu.svelte b/src/UIShell/HamburgerMenu.svelte
index c5be0db9..09867334 100644
--- a/src/UIShell/HamburgerMenu.svelte
+++ b/src/UIShell/HamburgerMenu.svelte
@@ -34,9 +34,9 @@
   type="button"
   title="{ariaLabel}"
   aria-label="{ariaLabel}"
-  class:bx--header__action="{true}"
-  class:bx--header__menu-trigger="{true}"
-  class:bx--header__menu-toggle="{true}"
+  class:cds--header__action="{true}"
+  class:cds--header__menu-trigger="{true}"
+  class:cds--header__menu-toggle="{true}"
   {...$$restProps}
   on:click
   on:click="{() => (isOpen = !isOpen)}"
diff --git a/src/UIShell/Header.svelte b/src/UIShell/Header.svelte
index 3574f01e..8280a38b 100644
--- a/src/UIShell/Header.svelte
+++ b/src/UIShell/Header.svelte
@@ -80,7 +80,7 @@
 
 <svelte:window bind:innerWidth="{winWidth}" />
 
-<header aria-label="{ariaLabel}" class:bx--header="{true}">
+<header aria-label="{ariaLabel}" class:cds--header="{true}">
   <slot name="skip-to-content" />
   {#if ($shouldRenderHamburgerMenu && winWidth < expansionBreakpoint) || persistentHamburgerMenu}
     <HamburgerMenu
@@ -91,13 +91,13 @@
   {/if}
   <a
     href="{href}"
-    class:bx--header__name="{true}"
+    class:cds--header__name="{true}"
     bind:this="{ref}"
     {...$$restProps}
     on:click
   >
     {#if company || $$slots.company}
-      <span class:bx--header__name--prefix="{true}"
+      <span class:cds--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 14602ee5..91f9ba30 100644
--- a/src/UIShell/HeaderAction.svelte
+++ b/src/UIShell/HeaderAction.svelte
@@ -68,9 +68,9 @@
 <button
   bind:this="{ref}"
   type="button"
-  class:bx--header__action="{true}"
-  class:bx--header__action--active="{isOpen}"
-  class:bx--btn--icon-only="{!text}"
+  class:cds--header__action="{true}"
+  class:cds--header__action--active="{isOpen}"
+  class:cds--btn--icon-only="{!text}"
   class:action-text="{text}"
   {...$$restProps}
   on:click
@@ -95,8 +95,8 @@
 {#if isOpen}
   <div
     bind:this="{refPanel}"
-    class:bx--header-panel="{true}"
-    class:bx--header-panel--expanded="{true}"
+    class:cds--header-panel="{true}"
+    class:cds--header-panel--expanded="{true}"
     transition:slide|local="{{
       ...transition,
       duration: transition === false ? 0 : transition.duration,
diff --git a/src/UIShell/HeaderActionLink.svelte b/src/UIShell/HeaderActionLink.svelte
index 3d439244..0615082b 100644
--- a/src/UIShell/HeaderActionLink.svelte
+++ b/src/UIShell/HeaderActionLink.svelte
@@ -20,9 +20,9 @@
 
 <a
   bind:this="{ref}"
-  class:bx--header__action="{true}"
-  class:bx--header__action--active="{linkIsActive}"
-  class:bx--btn--icon-only="{true}"
+  class:cds--header__action="{true}"
+  class:cds--header__action--active="{linkIsActive}"
+  class:cds--btn--icon-only="{true}"
   href="{href}"
   rel="{$$restProps.target === '_blank' ? 'noopener noreferrer' : undefined}"
   {...$$restProps}
@@ -34,7 +34,7 @@
 </a>
 
 <style>
-  .bx--header__action {
+  .cds--header__action {
     color: var(--bx-text-primary);
   }
 </style>
diff --git a/src/UIShell/HeaderGlobalAction.svelte b/src/UIShell/HeaderGlobalAction.svelte
index e877f36d..4f59725a 100644
--- a/src/UIShell/HeaderGlobalAction.svelte
+++ b/src/UIShell/HeaderGlobalAction.svelte
@@ -15,9 +15,9 @@
 <button
   type="button"
   bind:this="{ref}"
-  class:bx--header__action="{true}"
-  class:bx--header__action--active="{isActive}"
-  class:bx--btn--icon-only="{true}"
+  class:cds--header__action="{true}"
+  class:cds--header__action--active="{isActive}"
+  class:cds--btn--icon-only="{true}"
   {...$$restProps}
   on:click
 >
diff --git a/src/UIShell/HeaderNav.svelte b/src/UIShell/HeaderNav.svelte
index 2c86579c..6eb64a78 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:cds--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:cds--header__menu-bar="{true}">
     <slot />
   </ul>
 </nav>
diff --git a/src/UIShell/HeaderNavItem.svelte b/src/UIShell/HeaderNavItem.svelte
index 5b9ba073..d32bc927 100644
--- a/src/UIShell/HeaderNavItem.svelte
+++ b/src/UIShell/HeaderNavItem.svelte
@@ -44,7 +44,7 @@
     tabindex="0"
     href="{href}"
     rel="{$$restProps.target === '_blank' ? 'noopener noreferrer' : undefined}"
-    class:bx--header__menu-item="{true}"
+    class:cds--header__menu-item="{true}"
     aria-current="{isSelected ? 'page' : undefined}"
     {...$$restProps}
     on:click
@@ -61,6 +61,6 @@
       }
     }}"
   >
-    <span class:bx--text-truncate--end="{true}"><slot>{text}</slot></span>
+    <span class:cds--text-truncate--end="{true}"><slot>{text}</slot></span>
   </a>
 </li>
diff --git a/src/UIShell/HeaderNavMenu.svelte b/src/UIShell/HeaderNavMenu.svelte
index 0ec7ef37..f28787f3 100644
--- a/src/UIShell/HeaderNavMenu.svelte
+++ b/src/UIShell/HeaderNavMenu.svelte
@@ -49,8 +49,8 @@
 
 <li
   role="none"
-  class:bx--header__submenu="{true}"
-  class:bx--header__submenu--current="{isCurrentSubmenu}"
+  class:cds--header__submenu="{true}"
+  class:cds--header__submenu--current="{isCurrentSubmenu}"
   on:click="{(e) => {
     if (!menuRef.contains(e.target)) {
       e.preventDefault();
@@ -72,8 +72,8 @@
     aria-expanded="{expanded}"
     aria-label="{text}"
     href="{href}"
-    class:bx--header__menu-item="{true}"
-    class:bx--header__menu-title="{true}"
+    class:cds--header__menu-item="{true}"
+    class:cds--header__menu-title="{true}"
     style:z-index="{1}"
     {...$$restProps}
     on:keydown
@@ -92,14 +92,14 @@
     on:blur
   >
     {text}
-    <ChevronDown class="bx--header__menu-arrow" />
+    <ChevronDown class="cds--header__menu-arrow" />
   </a>
   <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
   <ul
     bind:this="{menuRef}"
     role="menu"
     aria-label="{text}"
-    class:bx--header__menu="{true}"
+    class:cds--header__menu="{true}"
   >
     <slot />
   </ul>
diff --git a/src/UIShell/HeaderPanelDivider.svelte b/src/UIShell/HeaderPanelDivider.svelte
index 283eaa93..feb81f69 100644
--- a/src/UIShell/HeaderPanelDivider.svelte
+++ b/src/UIShell/HeaderPanelDivider.svelte
@@ -5,7 +5,7 @@
     </span>
   </li>
 {/if}
-<hr class:bx--switcher__item--divider="{true}" />
+<hr class:cds--switcher__item--divider="{true}" />
 
 <style>
   /**
diff --git a/src/UIShell/HeaderPanelLink.svelte b/src/UIShell/HeaderPanelLink.svelte
index e2dc9584..78fe9a99 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:cds--switcher__item="{true}">
   <a
     bind:this="{ref}"
     href="{href}"
     rel="{$$restProps.target === '_blank' ? 'noopener noreferrer' : undefined}"
-    class:bx--switcher__item-link="{true}"
+    class:cds--switcher__item-link="{true}"
     {...$$restProps}
     on:click
   >
diff --git a/src/UIShell/HeaderPanelLinks.svelte b/src/UIShell/HeaderPanelLinks.svelte
index 59859153..0b2df5cd 100644
--- a/src/UIShell/HeaderPanelLinks.svelte
+++ b/src/UIShell/HeaderPanelLinks.svelte
@@ -1,3 +1,3 @@
-<ul class:bx--switcher__item="{true}">
+<ul class:cds--switcher__item="{true}">
   <slot />
 </ul>
diff --git a/src/UIShell/HeaderSearch.svelte b/src/UIShell/HeaderSearch.svelte
index 44b93572..3ad2303c 100644
--- a/src/UIShell/HeaderSearch.svelte
+++ b/src/UIShell/HeaderSearch.svelte
@@ -68,7 +68,7 @@
       aria-label="Search"
       aria-expanded="{active}"
       tabindex="{active ? '-1' : '0'}"
-      class:bx--header__action="{true}"
+      class:cds--header__action="{true}"
       class:disabled="{active}"
       on:click="{() => {
         active = true;
@@ -134,7 +134,7 @@
       type="button"
       aria-label="Clear search"
       tabindex="{active ? '0' : '-1'}"
-      class:bx--header__action="{true}"
+      class:cds--header__action="{true}"
       class:hidden="{!active}"
       on:click="{() => {
         reset();
diff --git a/src/UIShell/HeaderUtilities.svelte b/src/UIShell/HeaderUtilities.svelte
index c9942f4e..4f2a9a2b 100644
--- a/src/UIShell/HeaderUtilities.svelte
+++ b/src/UIShell/HeaderUtilities.svelte
@@ -1,3 +1,3 @@
-<div class:bx--header__global="{true}">
+<div class:cds--header__global="{true}">
   <slot />
 </div>
diff --git a/src/UIShell/SideNav.svelte b/src/UIShell/SideNav.svelte
index 7ba772b3..7b8f452b 100644
--- a/src/UIShell/SideNav.svelte
+++ b/src/UIShell/SideNav.svelte
@@ -62,22 +62,22 @@
       dispatch('click:overlay');
       isOpen = false;
     }}"
-    class:bx--side-nav__overlay="{true}"
-    class:bx--side-nav__overlay-active="{isOpen}"
+    class:cds--side-nav__overlay="{true}"
+    class:cds--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
+  class:cds--side-nav__navigation="{true}"
+  class:cds--side-nav="{true}"
+  class:cds--side-nav--ux="{true}"
+  class:cds--side-nav--expanded="{rail && winWidth >= expansionBreakpoint
     ? false
     : isOpen}"
-  class:bx--side-nav--collapsed="{!isOpen && !rail}"
-  class:bx--side-nav--rail="{rail}"
+  class:cds--side-nav--collapsed="{!isOpen && !rail}"
+  class:cds--side-nav--rail="{rail}"
   {...$$restProps}
 >
   <slot />
diff --git a/src/UIShell/SideNavDivider.svelte b/src/UIShell/SideNavDivider.svelte
index 26284398..87366d2f 100644
--- a/src/UIShell/SideNavDivider.svelte
+++ b/src/UIShell/SideNavDivider.svelte
@@ -1 +1,5 @@
-<li role="separator" class:bx--side-nav__divider="{true}" {...$$restProps}></li>
+<li
+  role="separator"
+  class:cds--side-nav__divider="{true}"
+  {...$$restProps}
+></li>
diff --git a/src/UIShell/SideNavItems.svelte b/src/UIShell/SideNavItems.svelte
index 886b66d4..c9cb9ad3 100644
--- a/src/UIShell/SideNavItems.svelte
+++ b/src/UIShell/SideNavItems.svelte
@@ -1,3 +1,3 @@
-<ul class:bx--side-nav__items="{true}">
+<ul class:cds--side-nav__items="{true}">
   <slot />
 </ul>
diff --git a/src/UIShell/SideNavLink.svelte b/src/UIShell/SideNavLink.svelte
index 6bd4c9c1..e2590ae7 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:cds--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}"
+    class:cds--side-nav__link="{true}"
+    class:cds--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:cds--side-nav__icon="{true}"
+        class:cds--side-nav__icon--small="{true}"
       >
         <slot name="icon">
           <svelte:component this="{icon}" />
         </slot>
       </div>
     {/if}
-    <span class:bx--side-nav__link-text="{true}">
+    <span class:cds--side-nav__link-text="{true}">
       <slot>
         {text}
       </slot>
diff --git a/src/UIShell/SideNavMenu.svelte b/src/UIShell/SideNavMenu.svelte
index d1e7b6a5..91adc4b8 100644
--- a/src/UIShell/SideNavMenu.svelte
+++ b/src/UIShell/SideNavMenu.svelte
@@ -20,12 +20,12 @@
   import ChevronDown from "../icons/ChevronDown.svelte";
 </script>
 
-<li class:bx--side-nav__item="{true}" class:bx--side-nav__item--icon="{icon}">
+<li class:cds--side-nav__item="{true}" class:cds--side-nav__item--icon="{icon}">
   <button
     type="button"
     bind:this="{ref}"
     aria-expanded="{expanded}"
-    class:bx--side-nav__submenu="{true}"
+    class:cds--side-nav__submenu="{true}"
     {...$$restProps}
     on:click
     on:click="{() => {
@@ -33,17 +33,17 @@
     }}"
   >
     {#if $$slots.icon || icon}
-      <div class:bx--side-nav__icon="{true}">
+      <div class:cds--side-nav__icon="{true}">
         <slot name="icon">
           <svelte:component this="{icon}" />
         </slot>
       </div>
     {/if}
-    <span class:bx--side-nav__submenu-title="{true}">{text}</span>
+    <span class:cds--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:cds--side-nav__icon="{true}"
+      class:cds--side-nav__icon--small="{true}"
+      class:cds--side-nav__submenu-chevron="{true}"
     >
       <ChevronDown />
     </div>
@@ -51,7 +51,7 @@
   <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
   <ul
     role="menu"
-    class:bx--side-nav__menu="{true}"
+    class:cds--side-nav__menu="{true}"
     style:max-height="{expanded ? "none" : undefined}"
   >
     <slot />
diff --git a/src/UIShell/SideNavMenuItem.svelte b/src/UIShell/SideNavMenuItem.svelte
index cfb73636..612d454d 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:cds--side-nav__menu-item="{true}">
   <a
     bind:this="{ref}"
     aria-current="{isSelected ? 'page' : undefined}"
     href="{href}"
-    class:bx--side-nav__link="{true}"
+    class:cds--side-nav__link="{true}"
     {...$$restProps}
     on:click
   >
-    <span class:bx--side-nav__link-text="{true}"><slot>{text}</slot></span>
+    <span class:cds--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..303a91d5 100644
--- a/src/UIShell/SkipToContent.svelte
+++ b/src/UIShell/SkipToContent.svelte
@@ -9,7 +9,7 @@
 <a
   href="{href}"
   tabindex="{tabindex}"
-  class:bx--skip-to-content="{true}"
+  class:cds--skip-to-content="{true}"
   {...$$restProps}
   on:click
 >
diff --git a/src/UnorderedList/UnorderedList.svelte b/src/UnorderedList/UnorderedList.svelte
index e2d53e54..e5401593 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:cds--list--unordered="{true}"
+  class:cds--list--nested="{nested}"
+  class:cds--list--expressive="{expressive}"
   {...$$restProps}
   on:click
   on:mouseover