Alignment with Carbon version 10.29 (#529)

* chore: patch prettier-plugin-svelte * docs(tag): add filterable small tag example * feat(ui-shell): add SideNavDivider * feat(combo-box): support warning state * docs(combo-box): add invalid state example * fix(progress-step): add title to warning icon * docs(progress-indicator): add invalid step example * docs(progress-indicator): add disabled steps example * feat(truncate): add text truncation component and action * docs(radio-tile): fix light variant example * fix(side-effects): add pre-compiled CSS to library side effects * refactor(css): use shorthand scss imports, add comments * refactor(truncate): rename "direction" prop to "clamp" * chore(deps-dev): bump carbon-components to v10.29.0 * feat(combo-box): add direction prop * feat(dropdown): add direction prop * feat(multi-select): add direction prop
2025-09-14 18:01:06 +00:00 · 2021-02-19 16:08:16 -08:00 · 2021-02-19 16:08:16 -08:00 · 14e714fa61
commit 14e714fa61
parent 827a9822e7
48 changed files with 729 additions and 277 deletions
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@ -1,6 +1,6 @@
 # Component Index

-> 156 components exported from carbon-components-svelte@0.28.0.
+> 158 components exported from carbon-components-svelte@0.28.0.

 ## Components

@ -107,6 +107,7 @@
 - [`SelectSkeleton`](#selectskeleton)
 - [`SelectableTile`](#selectabletile)
 - [`SideNav`](#sidenav)
+- [`SideNavDivider`](#sidenavdivider)
 - [`SideNavItems`](#sidenavitems)
 - [`SideNavLink`](#sidenavlink)
 - [`SideNavMenu`](#sidenavmenu)
@ -159,6 +160,7 @@
 - [`Tooltip`](#tooltip)
 - [`TooltipDefinition`](#tooltipdefinition)
 - [`TooltipIcon`](#tooltipicon)
+- [`Truncate`](#truncate)
 - [`UnorderedList`](#unorderedlist)

 ---
@ -609,6 +611,7 @@ export interface ComboBoxItem {
 | selectedIndex    | <code>let</code> | Yes      | <code>number</code>                                         | <code>-1</code>                                       | Set the selected item by value index                                     |
 | items            | <code>let</code> | No       | <code>ComboBoxItem[]</code>                                 | <code>[]</code>                                       | Set the combobox items                                                   |
 | itemToString     | <code>let</code> | No       | <code>(item: ComboBoxItem) => string</code>                 | <code>(item) => item.text &#124;&#124; item.id</code> | Override the display of a combobox item                                  |
+| direction        | <code>let</code> | No       | <code>"bottom" &#124; "top"</code>                          | <code>"bottom"</code>                                 | Specify the direction of the combobox dropdown menu                      |
 | size             | <code>let</code> | No       | <code>"sm" &#124; "xl"</code>                               | --                                                    | Set the size of the combobox                                             |
 | disabled         | <code>let</code> | No       | <code>boolean</code>                                        | <code>false</code>                                    | Set to `true` to disable the combobox                                    |
 | titleText        | <code>let</code> | No       | <code>string</code>                                         | <code>""</code>                                       | Specify the title text of the combobox                                   |
@ -616,6 +619,8 @@ export interface ComboBoxItem {
 | helperText       | <code>let</code> | No       | <code>string</code>                                         | <code>""</code>                                       | Specify the helper text                                                  |
 | invalidText      | <code>let</code> | No       | <code>string</code>                                         | <code>""</code>                                       | Specify the invalid state text                                           |
 | invalid          | <code>let</code> | No       | <code>boolean</code>                                        | <code>false</code>                                    | Set to `true` to indicate an invalid state                               |
+| warn             | <code>let</code> | No       | <code>boolean</code>                                        | <code>false</code>                                    | Set to `true` to indicate an warning state                               |
+| warnText         | <code>let</code> | No       | <code>string</code>                                         | <code>""</code>                                       | Specify the warning state text                                           |
 | light            | <code>let</code> | No       | <code>boolean</code>                                        | <code>false</code>                                    | Set to `true` to enable the light variant                                |
 | shouldFilterItem | <code>let</code> | No       | <code>(item: ComboBoxItem, value: string) => boolean</code> | <code>() => true</code>                               | Determine if an item should be filtered given the current combobox value |
 | translateWithId  | <code>let</code> | No       | <code>(id: any) => string</code>                            | --                                                    | Override the default translation ids                                     |
@ -980,6 +985,7 @@ export interface DropdownItem {
 | items           | <code>let</code> | No       | <code>DropdownItem[]</code>                 | <code>[]</code>                                       | Set the dropdown items                        |
 | itemToString    | <code>let</code> | No       | <code>(item: DropdownItem) => string</code> | <code>(item) => item.text &#124;&#124; item.id</code> | Override the display of a dropdown item       |
 | type            | <code>let</code> | No       | <code>"default" &#124; "inline"</code>      | <code>"default"</code>                                | Specify the type of dropdown                  |
+| direction       | <code>let</code> | No       | <code>"bottom" &#124; "top"</code>          | <code>"bottom"</code>                                 | Specify the direction of the dropdown menu    |
 | size            | <code>let</code> | No       | <code>"sm" &#124; "lg" &#124; "xl"</code>   | --                                                    | Specify the size of the dropdown field        |
 | light           | <code>let</code> | No       | <code>boolean</code>                        | <code>false</code>                                    | Set to `true` to enable the light variant     |
 | disabled        | <code>let</code> | No       | <code>boolean</code>                        | <code>false</code>                                    | Set to `true` to disable the dropdown         |
@ -2150,6 +2156,7 @@ export interface MultiSelectItem {
 | itemToString      | <code>let</code> | No       | <code>(item: MultiSelectItem) => string</code>                                                 | <code>(item) => item.text &#124;&#124; item.id</code>                               | Override the display of a multiselect item                                            |
 | size              | <code>let</code> | No       | <code>"sm" &#124; "lg" &#124; "xl"</code>                                                      | --                                                                                  | Set the size of the combobox                                                          |
 | type              | <code>let</code> | No       | <code>"default" &#124; "inline"</code>                                                         | <code>"default"</code>                                                              | Specify the type of multiselect                                                       |
+| direction         | <code>let</code> | No       | <code>"bottom" &#124; "top"</code>                                                             | <code>"bottom"</code>                                                               | Specify the direction of the multiselect dropdown menu                                |
 | selectionFeedback | <code>let</code> | No       | <code>"top" &#124; "fixed" &#124; "top-after-reopen"</code>                                    | <code>"top-after-reopen"</code>                                                     | Specify the selection feedback after selecting items                                  |
 | disabled          | <code>let</code> | No       | <code>boolean</code>                                                                           | <code>false</code>                                                                  | Set to `true` to disable the dropdown                                                 |
 | filterable        | <code>let</code> | No       | <code>boolean</code>                                                                           | <code>false</code>                                                                  | Set to `true` to filter items                                                         |
@ -2988,6 +2995,20 @@ None.

 None.

+## `SideNavDivider`
+
+### Props
+
+None.
+
+### Slots
+
+None.
+
+### Events
+
+None.
+
 ## `SideNavItems`

 ### Props
@ -4261,6 +4282,24 @@ None.
 | mouseleave | forwarded | --     |
 | focus      | forwarded | --     |

+## `Truncate`
+
+### Props
+
+| Prop name | Kind             | Reactive | Type                              | Default value      | Description |
+| :-------- | :--------------- | :------- | :-------------------------------- | ------------------ | ----------- |
+| clamp     | <code>let</code> | No       | <code>"end" &#124; "front"</code> | <code>"end"</code> | --          |
+
+### Slots
+
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| --        | Yes     | --    | --       |
+
+### Events
+
+None.
+
 ## `UnorderedList`

 ### Props
--- a/README.md
+++ b/README.md
@ -164,7 +164,6 @@ Using JavaScript:
 </script>

 <button on:click="{() => (theme = 'g90')}">Update theme</button>
-
 ```

 ## Preprocessors
--- a/actions/index.js
+++ b/actions/index.js
@ -0,0 +1 @@
+export { truncate } from "./truncate";
--- a/actions/truncate.js
+++ b/actions/truncate.js
@ -0,0 +1,25 @@
+/**
+ * Svelte action that applies single-line text truncation to an element
+ * @param {HTMLElement} node
+ * @param {{ clamp?: "end" | "front" }} params
+ * @example
+ * <script>
+ *   import { truncate } from "carbon-components-svelte/actions";
+ * </script>
+ *
+ * <h1 use:truncate>...</h1>
+ * <h1 use:truncate={{ clamp: "front" }}>...</h1>
+ */
+export function truncate(node, params = {}) {
+  function toggleClass(front = false) {
+    node.className = `bx--text-truncate--${front ? "front" : "end"}`;
+  }
+
+  toggleClass(params.clamp === "front");
+
+  return {
+    update(params) {
+      toggleClass(params.clamp === "front");
+    },
+  };
+}
--- a/css/all.scss
+++ b/css/all.scss
@ -1,4 +1,8 @@
+// This is a recipe for dynamic, client-side theming
+// All Carbon themes are included (White, Gray 10, Gray 90, Gray 100)
+
 $feature-flags: (
+  // Custom CSS properties must be enabled to dynamically switch themes
  enable-css-custom-properties: true,
  ui-shell: true,
  grid-columns-16: true
@ -15,14 +19,30 @@ $css--plex: true;
 // Use all Carbon themes
@import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss";

+// The default theme is "white" (White)
 :root { @include carbon--theme($carbon--theme--white, true); }
+
+// Set the <html> theme attribute to "g10" to use the Gray 10 theme
+// <html theme="g10">
 :root[theme="g10"] { @include carbon--theme($carbon--theme--g10, true); }
+
+// Set the <html> theme attribute to "g90" to use the Gray 90 theme
+// <html theme="g90">
 :root[theme="g90"] { @include carbon--theme($carbon--theme--g90, true); }
+
+// Set the <html> theme attribute to "g100" to use the Gray 100 theme
+// <html theme="g100">
 :root[theme="g100"] { @include carbon--theme($carbon--theme--g100, true); }

-@import "carbon-components/scss/globals/scss/_css--reset.scss";
-@import "carbon-components/scss/globals/scss/_css--font-face.scss";
-@import "carbon-components/scss/globals/scss/_css--helpers.scss";
-@import "carbon-components/scss/globals/scss/_css--body.scss";
-@import "carbon-components/scss/globals/grid/_grid.scss";
-@import "carbon-components/scss/globals/scss/styles.scss";
+// Programmatically update the theme in JavaScript:
+// document.documentElement.setAttribute("theme", "g90");
+
+@import "carbon-components/scss/globals/scss/_css--reset";
+@import "carbon-components/scss/globals/scss/_css--font-face";
+@import "carbon-components/scss/globals/scss/_css--helpers";
+@import "carbon-components/scss/globals/scss/_css--body";
+@import "carbon-components/scss/globals/grid/grid";
+
+// Import all component styles
+@import "carbon-components/scss/globals/scss/styles";
+
--- a/css/g10.scss
+++ b/css/g10.scss
@ -17,9 +17,12 @@ $css--plex: true;
 $carbon--theme: $carbon--theme--g10;
@include carbon--theme();

-@import "carbon-components/scss/globals/scss/_css--reset.scss";
-@import "carbon-components/scss/globals/scss/_css--font-face.scss";
-@import "carbon-components/scss/globals/scss/_css--helpers.scss";
-@import "carbon-components/scss/globals/scss/_css--body.scss";
-@import "carbon-components/scss/globals/grid/_grid.scss";
-@import "carbon-components/scss/globals/scss/styles.scss";
+@import "carbon-components/scss/globals/scss/_css--reset";
+@import "carbon-components/scss/globals/scss/_css--font-face";
+@import "carbon-components/scss/globals/scss/_css--helpers";
+@import "carbon-components/scss/globals/scss/_css--body";
+@import "carbon-components/scss/globals/grid/grid";
+
+// Import all component styles
+@import "carbon-components/scss/globals/scss/styles";
+
--- a/css/g100.scss
+++ b/css/g100.scss
@ -17,9 +17,11 @@ $css--plex: true;
 $carbon--theme: $carbon--theme--g100;
@include carbon--theme();

-@import "carbon-components/scss/globals/scss/_css--reset.scss";
-@import "carbon-components/scss/globals/scss/_css--font-face.scss";
-@import "carbon-components/scss/globals/scss/_css--helpers.scss";
-@import "carbon-components/scss/globals/scss/_css--body.scss";
-@import "carbon-components/scss/globals/grid/_grid.scss";
-@import "carbon-components/scss/globals/scss/styles.scss";
+@import "carbon-components/scss/globals/scss/_css--reset";
+@import "carbon-components/scss/globals/scss/_css--font-face";
+@import "carbon-components/scss/globals/scss/_css--helpers";
+@import "carbon-components/scss/globals/scss/_css--body";
+@import "carbon-components/scss/globals/grid/grid";
+
+// Import all component styles
+@import "carbon-components/scss/globals/scss/styles";
--- a/css/g90.scss
+++ b/css/g90.scss
@ -17,9 +17,11 @@ $css--plex: true;
 $carbon--theme: $carbon--theme--g90;
@include carbon--theme();

-@import "carbon-components/scss/globals/scss/_css--reset.scss";
-@import "carbon-components/scss/globals/scss/_css--font-face.scss";
-@import "carbon-components/scss/globals/scss/_css--helpers.scss";
-@import "carbon-components/scss/globals/scss/_css--body.scss";
-@import "carbon-components/scss/globals/grid/_grid.scss";
-@import "carbon-components/scss/globals/scss/styles.scss";
+@import "carbon-components/scss/globals/scss/_css--reset";
+@import "carbon-components/scss/globals/scss/_css--font-face";
+@import "carbon-components/scss/globals/scss/_css--helpers";
+@import "carbon-components/scss/globals/scss/_css--body";
+@import "carbon-components/scss/globals/grid/grid";
+
+// Import all component styles
+@import "carbon-components/scss/globals/scss/styles";
--- a/css/white.scss
+++ b/css/white.scss
@ -17,9 +17,11 @@ $css--plex: true;
 $carbon--theme: $carbon--theme--white;
@include carbon--theme();

-@import "carbon-components/scss/globals/scss/_css--reset.scss";
-@import "carbon-components/scss/globals/scss/_css--font-face.scss";
-@import "carbon-components/scss/globals/scss/_css--helpers.scss";
-@import "carbon-components/scss/globals/scss/_css--body.scss";
-@import "carbon-components/scss/globals/grid/_grid.scss";
-@import "carbon-components/scss/globals/scss/styles.scss";
+@import "carbon-components/scss/globals/scss/_css--reset";
+@import "carbon-components/scss/globals/scss/_css--font-face";
+@import "carbon-components/scss/globals/scss/_css--helpers";
+@import "carbon-components/scss/globals/scss/_css--body";
+@import "carbon-components/scss/globals/grid/grid";
+
+// Import all component styles
+@import "carbon-components/scss/globals/scss/styles";
--- a/docs/package.json
+++ b/docs/package.json
@ -11,7 +11,7 @@
  "devDependencies": {
    "@sveltech/routify": "^1.9.9",
    "autoprefixer": "^10.2.3",
-    "carbon-components": "10.28.0",
+    "carbon-components": "10.29.0",
    "carbon-components-svelte": "../",
    "clipboard-copy": "^3.1.0",
    "mdsvex": "^0.8.8",
--- a/docs/src/App.svelte
+++ b/docs/src/App.svelte
@ -6,7 +6,11 @@
 <Router routes="{routes}" />

 <style lang="scss" global>
+  // This is a recipe for dynamic, client-side theming
+  // All Carbon themes are included (White, Gray 10, Gray 90, Gray 100)
+
  $feature-flags: (
+    // Custom CSS properties must be enabled to dynamically switch themes
    enable-css-custom-properties: true,
    ui-shell: true,
    grid-columns-16: true
@ -23,23 +27,38 @@
  // Use all Carbon themes
  @import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss";

+  // The default theme is "white" (White)
  :root {
    @include carbon--theme($carbon--theme--white, true);
  }
+
+  // Set the <html> theme attribute to "g10" to use the Gray 10 theme
+  // <html theme="g10">
  :root[theme="g10"] {
    @include carbon--theme($carbon--theme--g10, true);
  }
+
+  // Set the <html> theme attribute to "g90" to use the Gray 90 theme
+  // <html theme="g90">
  :root[theme="g90"] {
    @include carbon--theme($carbon--theme--g90, true);
  }
+
+  // Set the <html> theme attribute to "g100" to use the Gray 100 theme
+  // <html theme="g100">
  :root[theme="g100"] {
    @include carbon--theme($carbon--theme--g100, true);
  }

-  @import "carbon-components/scss/globals/scss/_css--reset.scss";
-  @import "carbon-components/scss/globals/scss/_css--font-face.scss";
-  @import "carbon-components/scss/globals/scss/_css--helpers.scss";
-  @import "carbon-components/scss/globals/scss/_css--body.scss";
-  @import "carbon-components/scss/globals/grid/_grid.scss";
-  @import "carbon-components/scss/globals/scss/styles.scss";
+  // Programmatically update the theme in JavaScript:
+  // document.documentElement.setAttribute("theme", "g90");
+
+  @import "carbon-components/scss/globals/scss/_css--reset";
+  @import "carbon-components/scss/globals/scss/_css--font-face";
+  @import "carbon-components/scss/globals/scss/_css--helpers";
+  @import "carbon-components/scss/globals/scss/_css--body";
+  @import "carbon-components/scss/globals/grid/grid";
+
+  // Import all component styles
+  @import "carbon-components/scss/globals/scss/styles";
 </style>
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@ -1,5 +1,5 @@
 {
-  "total": 156,
+  "total": 158,
  "components": [
    {
      "moduleName": "Accordion",
@ -1189,6 +1189,16 @@
          "constant": false,
          "reactive": true
        },
+        {
+          "name": "direction",
+          "kind": "let",
+          "description": "Specify the direction of the combobox dropdown menu",
+          "type": "\"bottom\" | \"top\"",
+          "value": "\"bottom\"",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
        {
          "name": "size",
          "kind": "let",
@ -1258,6 +1268,26 @@
          "constant": false,
          "reactive": false
        },
+        {
+          "name": "warn",
+          "kind": "let",
+          "description": "Set to `true` to indicate an warning state",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "warnText",
+          "kind": "let",
+          "description": "Specify the warning state text",
+          "type": "string",
+          "value": "\"\"",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
        {
          "name": "light",
          "kind": "let",
@ -2290,6 +2320,16 @@
          "constant": false,
          "reactive": false
        },
+        {
+          "name": "direction",
+          "kind": "let",
+          "description": "Specify the direction of the dropdown menu",
+          "type": "\"bottom\" | \"top\"",
+          "value": "\"bottom\"",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
        {
          "name": "size",
          "kind": "let",
@ -5142,6 +5182,16 @@
          "constant": false,
          "reactive": false
        },
+        {
+          "name": "direction",
+          "kind": "let",
+          "description": "Specify the direction of the multiselect dropdown menu",
+          "type": "\"bottom\" | \"top\"",
+          "value": "\"bottom\"",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
        {
          "name": "selectionFeedback",
          "kind": "let",
@ -7733,6 +7783,15 @@
      "typedefs": [],
      "rest_props": { "type": "Element", "name": "nav" }
    },
+    {
+      "moduleName": "SideNavDivider",
+      "filePath": "src/UIShell/SideNavDivider.svelte",
+      "props": [],
+      "slots": [],
+      "events": [],
+      "typedefs": [],
+      "rest_props": { "type": "Element", "name": "li" }
+    },
    {
      "moduleName": "SideNavItems",
      "filePath": "src/UIShell/SideNav/SideNavItems.svelte",
@ -10635,6 +10694,25 @@
      "typedefs": [],
      "rest_props": { "type": "Element", "name": "button" }
    },
+    {
+      "moduleName": "Truncate",
+      "filePath": "src/Truncate/Truncate.svelte",
+      "props": [
+        {
+          "name": "clamp",
+          "kind": "let",
+          "type": "\"end\" | \"front\"",
+          "value": "\"end\"",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        }
+      ],
+      "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
+      "events": [],
+      "typedefs": [],
+      "rest_props": { "type": "Element", "name": "p" }
+    },
    {
      "moduleName": "UnorderedList",
      "filePath": "src/UnorderedList/UnorderedList.svelte",
--- a/docs/src/pages/components/ComboBox.svx
+++ b/docs/src/pages/components/ComboBox.svx
@ -30,6 +30,17 @@ items={[

 <FileSource src="/framed/ComboBox/FilterableComboBox" />

+### Top direction
+
+Set `direction` to `"top"` for the combobox dropdown menu to appear above the input.
+
+<ComboBox direction="top" titleText="Contact" placeholder="Select contact method"
+items={[
+  {id: "0", text: "Slack"},
+  {id: "1", text: "Email"},
+  {id: "2", text: "Fax"}
+  ]}  />
+
 ### Light variant

 <ComboBox light titleText="Contact" placeholder="Select contact method"
@ -59,6 +70,24 @@ items={[
  {id: "2", text: "Fax"}
  ]}  />

+### Invalid state
+
+<ComboBox invalid invalidText="Secondary contact method must be different from the primary contact" titleText="Contact" placeholder="Select contact method"
+items={[
+  {id: "0", text: "Slack"},
+  {id: "1", text: "Email"},
+  {id: "2", text: "Fax"}
+  ]}  />
+
+### Warning state
+
+<ComboBox warn warnText="This contact method is not associated with your account" titleText="Contact" placeholder="Select contact method"
+items={[
+  {id: "0", text: "Slack"},
+  {id: "1", text: "Email"},
+  {id: "2", text: "Fax"}
+  ]}  />
+
 ### Disabled

 <ComboBox disabled titleText="Contact" placeholder="Select contact method"
--- a/docs/src/pages/components/Dropdown.svx
+++ b/docs/src/pages/components/Dropdown.svx
@ -33,6 +33,14 @@ Use the `itemToString` prop to format the display of individual items.

 <FileSource src="/framed/Dropdown/MultipleDropdown" />

+### Top direction
+
+Set `direction` to `"top"` for the dropdown menu to appear above the input.
+
+<Dropdown direction="top" titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},
+  {id: "1", text: "Email"},
+  {id: "2", text: "Fax"}]}" />
+
 ### Light variant

 <Dropdown light titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},
--- a/docs/src/pages/components/MultiSelect.svx
+++ b/docs/src/pages/components/MultiSelect.svx
@ -51,6 +51,16 @@ Use the `itemToString` prop to format the display of individual items.
    sortItem="{() => {}}"
  />

+### Top direction
+
+Set `direction` to `"top"` for the dropdown menu to appear above the input.
+
+<MultiSelect direction="top" titleText="Contact" label="Select contact methods..."
+    items="{[{id: "0", text: "Slack"},
+    {id: "1", text: "Email"},
+    {id: "2", text: "Fax"}]}"
+  />
+
 ### Light variant

 <MultiSelect light titleText="Contact" label="Select contact methods..."
--- a/docs/src/pages/components/ProgressIndicator.svx
+++ b/docs/src/pages/components/ProgressIndicator.svx
@ -59,6 +59,40 @@ When programmatically updating the `currentIndex`, keep in mind that only comple

 <FileSource src="/framed/ProgressIndicator/ProgrammaticProgressIndicator" />

+### Invalid step
+
+<ProgressIndicator>
+  <ProgressStep complete
+    label="Step 1"
+    description="The progress indicator will listen for clicks on the steps"
+  />
+  <ProgressStep invalid
+    label="Step 2"
+    description="The progress indicator will listen for clicks on the steps"
+  />
+  <ProgressStep
+    label="Step 3"
+    description="The progress indicator will listen for clicks on the steps"
+  />
+</ProgressIndicator>
+
+### Disabled steps
+
+<ProgressIndicator>
+  <ProgressStep complete
+    label="Step 1"
+    description="The progress indicator will listen for clicks on the steps"
+  />
+  <ProgressStep disabled
+    label="Step 2"
+    description="The progress indicator will listen for clicks on the steps"
+  />
+  <ProgressStep disabled
+    label="Step 3"
+    description="The progress indicator will listen for clicks on the steps"
+  />
+</ProgressIndicator>
+
 ### Spaced-equally

 <ProgressIndicator spaceEqually>
--- a/docs/src/pages/components/RadioTile.svx
+++ b/docs/src/pages/components/RadioTile.svx
@ -24,13 +24,13 @@ components: ["TileGroup", "RadioTile"]
 ### Light variant

 <TileGroup legend="Service pricing tiers">
-  <RadioTile value="0" checked>
+  <RadioTile light value="0" checked>
    Lite plan
  </RadioTile>
-  <RadioTile value="1">
+  <RadioTile light value="1">
    Standard plan
  </RadioTile>
-  <RadioTile value="2">
+  <RadioTile light value="2">
    Plus plan
  </RadioTile>
 </TileGroup>
--- a/docs/src/pages/components/Tag.svx
+++ b/docs/src/pages/components/Tag.svx
@ -29,7 +29,11 @@

 ### Filterable

-<Tag filter on:close>Filterable</Tag>
+<Tag filter on:close>carbon-components</Tag>
+
+### Filterable (small)
+
+<Tag size="sm" filter on:close>carbon-components</Tag>

 ### Custom icon

--- a/docs/src/pages/components/Truncate.svx
+++ b/docs/src/pages/components/Truncate.svx
@ -0,0 +1,37 @@
+
+<script>
+  import { Truncate } from "carbon-components-svelte";
+  import { truncate } from "carbon-components-svelte/actions";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+This utility component wraps the `.bx--text-truncate--*` CSS selectors from [carbon-components](https://github.com/carbon-design-system/carbon/blob/master/packages/components/src/globals/scss/_helper-classes.scss#L11) for single-line text truncation.
+
+### Default
+
+By default, text will be clamped at the end of the line. Text is wrapped with a paragraph (`p`) element. Use the [truncate action](#usetruncate) to truncate text in other elements.
+
+<Truncate>
+  Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM.
+</Truncate>
+
+### Clamp front
+
+Set `clamp` to `"front"` to clamp the text from the front.
+
+<Truncate clamp="front">
+  Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM.
+</Truncate>
+
+### use:truncate
+
+The `truncate` action can be used on other HTML elements.
+
+Import path: `import { truncate } from "carbon-components-svelte/actions";`
+
+<h4 use:truncate>
+  Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM.
+</h4>
+<h4 use:truncate={{ clamp: "front" }}>
+  Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM.
+</h4>
--- a/docs/src/pages/framed/UIShell/HeaderNav.svelte
+++ b/docs/src/pages/framed/UIShell/HeaderNav.svelte
@ -9,6 +9,7 @@
    SideNavMenu,
    SideNavMenuItem,
    SideNavLink,
+    SideNavDivider,
    SkipToContent,
    Content,
    Grid,
@ -33,6 +34,7 @@
      <HeaderNavItem href="/" text="Link 2" />
      <HeaderNavItem href="/" text="Link 3" />
    </HeaderNavMenu>
+    <HeaderNavItem href="/" text="Link 4" />
  </HeaderNav>
 </Header>

@ -46,6 +48,8 @@
      <SideNavMenuItem href="/" text="Link 2" />
      <SideNavMenuItem href="/" text="Link 3" />
    </SideNavMenu>
+    <SideNavDivider />
+    <SideNavLink text="Link 4" />
  </SideNavItems>
 </SideNav>

--- a/docs/svelte.config.js
+++ b/docs/svelte.config.js
@ -38,6 +38,9 @@ function createImports(source) {
  const ccs_imports = Array.from(inlineComponents.keys());
  const icon_imports = Array.from(icons.keys());

+  if (ccs_imports.length === 0) return "";
+  // TODO: determine if action is used, and generate import accordingly
+
  return `
  <script>
    import {${ccs_imports.join(",")}} from "carbon-components-svelte";
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@ -837,15 +837,15 @@ caniuse-lite@^1.0.30001173, caniuse-lite@^1.0.30001178:
  integrity sha512-n8JVqXuZMVSPKiPiypjFtDTXc4jWIdjxull0f92WLo7e1MSi3uJ3NvveakSh/aCl1QKFAvIz3vIj0v+0K+FrXw==

 carbon-components-svelte@../:
-  version "0.27.0"
+  version "0.28.0"
  dependencies:
    carbon-icons-svelte "^10.21.0"
    flatpickr "4.6.9"

-carbon-components@10.28.0:
-  version "10.28.0"
-  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.28.0.tgz#c4d2b23df2559cf3b0226867c45e2e84e0af7c4e"
-  integrity sha512-bFsyngr625zc/t2gl4BPFYl0/ed4q38rrPihQxBXHhLAdeZNyy8xyOQlbh1PEQbTu47H/s/bxVo6QiFm/VmLZA==
+carbon-components@10.29.0:
+  version "10.29.0"
+  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.29.0.tgz#9fd31f1a5cce4cb59a7196222e524d8442fd9026"
+  integrity sha512-y7BPEfwWxE1URTjrtHz4+rYQwB0u/e7WptlbTH2Lb/iqRYCe6T94u9EVZuq0ZZTpRUNRckbI1irt0AV3J/qlcA==
  dependencies:
    "@carbon/telemetry" "0.0.0-alpha.6"
    flatpickr "4.6.1"
--- a/package.json
+++ b/package.json
@ -8,7 +8,9 @@
  "main": "./lib/index.js",
  "module": "./lib/index.mjs",
  "types": "./types/index.d.ts",
-  "sideEffects": false,
+  "sideEffects": [
+    "css/*.css"
+  ],
  "scripts": {
    "test": "run-p test:*",
    "test:types": "svelte-check --workspace tests",
@ -29,14 +31,14 @@
    "@rollup/plugin-node-resolve": "^11.1.1",
    "@tsconfig/svelte": "^1.0.10",
    "autoprefixer": "^10.2.4",
-    "carbon-components": "10.28.0",
+    "carbon-components": "10.29.0",
    "gh-pages": "^3.1.0",
    "husky": "^4.3.8",
    "lint-staged": "^10.5.3",
    "npm-run-all": "^4.1.5",
    "postcss": "^8.2.4",
    "prettier": "^2.2.1",
-    "prettier-plugin-svelte": "^2.1.1",
+    "prettier-plugin-svelte": "^2.1.5",
    "rollup": "^2.38.4",
    "rollup-plugin-svelte": "^7.1.0",
    "rollup-plugin-terser": "^7.0.2",
@ -78,6 +80,7 @@
    "src",
    "types",
    "css",
-    "preprocess"
+    "preprocess",
+    "actions"
  ]
 }
--- a/src/Button/Button.svelte
+++ b/src/Button/Button.svelte
@ -122,49 +122,47 @@
    on:mouseenter
    on:mouseleave
  />
+{:else if as}
+  <slot props="{buttonProps}" />
+{:else if href && !disabled}
+  <!-- svelte-ignore a11y-missing-attribute -->
+  <a
+    bind:this="{ref}"
+    {...buttonProps}
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+  >
+    {#if hasIconOnly}
+      <span class:bx--assistive-text="{true}">{iconDescription}</span>
+    {/if}
+    <slot />
+    <svelte:component
+      this="{icon}"
+      aria-hidden="true"
+      class="bx--btn__icon"
+      aria-label="{iconDescription}"
+    />
+  </a>
 {:else}
-  {#if as}
-    <slot props="{buttonProps}" />
-  {:else if href && !disabled}
-    <!-- svelte-ignore a11y-missing-attribute -->
-    <a
-      bind:this="{ref}"
-      {...buttonProps}
-      on:click
-      on:mouseover
-      on:mouseenter
-      on:mouseleave
-    >
-      {#if hasIconOnly}
-        <span class:bx--assistive-text="{true}">{iconDescription}</span>
-      {/if}
-      <slot />
-      <svelte:component
-        this="{icon}"
-        aria-hidden="true"
-        class="bx--btn__icon"
-        aria-label="{iconDescription}"
-      />
-    </a>
-  {:else}
-    <button
-      bind:this="{ref}"
-      {...buttonProps}
-      on:click
-      on:mouseover
-      on:mouseenter
-      on:mouseleave
-    >
-      {#if hasIconOnly}
-        <span class:bx--assistive-text="{true}">{iconDescription}</span>
-      {/if}
-      <slot />
-      <svelte:component
-        this="{icon}"
-        aria-hidden="true"
-        class="bx--btn__icon"
-        aria-label="{iconDescription}"
-      />
-    </button>
-  {/if}
+  <button
+    bind:this="{ref}"
+    {...buttonProps}
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+  >
+    {#if hasIconOnly}
+      <span class:bx--assistive-text="{true}">{iconDescription}</span>
+    {/if}
+    <slot />
+    <svelte:component
+      this="{icon}"
+      aria-hidden="true"
+      class="bx--btn__icon"
+      aria-label="{iconDescription}"
+    />
+  </button>
 {/if}
--- a/src/CodeSnippet/CodeSnippet.svelte
+++ b/src/CodeSnippet/CodeSnippet.svelte
@ -103,54 +103,9 @@
    on:mouseenter
    on:mouseleave
  />
-{: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'}"
-        {...$$restProps}
-      >
-        <code id="{id}">
-          <slot>{code}</slot>
-        </code>
-      </span>
-    {:else}
-      <Copy
-        aria-label="{copyLabel}"
-        aria-describedby="{id}"
-        feedback="{feedback}"
-        feedbackTimeout="{feedbackTimeout}"
-        class="bx--snippet {type && `bx--snippet--${type}`}
-          {type ===
-          'inline' && 'bx--btn--copy'}
-          {expanded &&
-          'bx--snippet--expand'}
-          {light &&
-          'bx--snippet--light'}
-          {hideCopyButton &&
-          'bx--snippet--no-copy'}
-          {wrapText &&
-          'bx--snippet--wraptext'}"
-        {...$$restProps}
-        on:click
-        on:mouseover
-        on:mouseenter
-        on:mouseleave
-      >
-        <code id="{id}">
-          <slot>{code}</slot>
-        </code>
-      </Copy>
-    {/if}
-  {:else}
-    <div
+{:else if type === "inline"}
+  {#if hideCopyButton}
+    <span
      class:bx--snippet="{true}"
      class:bx--snippet--expand="{expanded}"
      class:bx--snippet--light="{light}"
@ -159,51 +114,93 @@
      class:bx--snippet--single="{type === 'single'}"
      class:bx--snippet--inline="{type === 'inline'}"
      class:bx--snippet--multi="{type === 'multi'}"
-      class:bx--snippet--disabled="{type !== 'inline' && disabled}"
      {...$$restProps}
+    >
+      <code id="{id}">
+        <slot>{code}</slot>
+      </code>
+    </span>
+  {:else}
+    <Copy
+      aria-label="{copyLabel}"
+      aria-describedby="{id}"
+      feedback="{feedback}"
+      feedbackTimeout="{feedbackTimeout}"
+      class="bx--snippet {type && `bx--snippet--${type}`}
+          {type ===
+        'inline' && 'bx--btn--copy'}
+          {expanded &&
+        'bx--snippet--expand'}
+          {light &&
+        'bx--snippet--light'}
+          {hideCopyButton &&
+        'bx--snippet--no-copy'}
+          {wrapText && 'bx--snippet--wraptext'}"
+      {...$$restProps}
+      on:click
      on:mouseover
      on:mouseenter
      on:mouseleave
    >
-      <div
-        role="{type === 'single' ? 'textbox' : undefined}"
-        tabindex="{type === 'single' && !disabled ? '0' : undefined}"
-        aria-label="{$$restProps['aria-label'] || copyLabel || 'code-snippet'}"
-        class:bx--snippet-container="{true}"
-      >
-        <code>
-          <pre bind:this="{ref}">
+      <code id="{id}">
+        <slot>{code}</slot>
+      </code>
+    </Copy>
+  {/if}
+{:else}
+  <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}"
+    {...$$restProps}
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+  >
+    <div
+      role="{type === 'single' ? 'textbox' : undefined}"
+      tabindex="{type === 'single' && !disabled ? '0' : undefined}"
+      aria-label="{$$restProps['aria-label'] || copyLabel || 'code-snippet'}"
+      class:bx--snippet-container="{true}"
+    >
+      <code>
+        <pre bind:this="{ref}">
            <slot>{code}</slot>
          </pre>
-        </code>
-      </div>
-      {#if !hideCopyButton}
-        <CopyButton
-          disabled="{disabled}"
-          feedback="{feedback}"
-          feedbackTimeout="{feedbackTimeout}"
-          iconDescription="{copyButtonDescription}"
-          on:click
-          on:animationend
-        />
-      {/if}
-      {#if showMoreLess}
-        <Button
-          kind="ghost"
-          size="field"
-          class="bx--snippet-btn--expand"
-          disabled="{disabled}"
-          on:click="{() => {
-            expanded = !expanded;
-          }}"
-        >
-          <span class:bx--snippet-btn--text="{true}">{expandText}</span>
-          <ChevronDown16
-            class="bx--icon-chevron--down bx--snippet__icon"
-            aria-label="{expandText}"
-          />
-        </Button>
-      {/if}
+      </code>
    </div>
-  {/if}
+    {#if !hideCopyButton}
+      <CopyButton
+        disabled="{disabled}"
+        feedback="{feedback}"
+        feedbackTimeout="{feedbackTimeout}"
+        iconDescription="{copyButtonDescription}"
+        on:click
+        on:animationend
+      />
+    {/if}
+    {#if showMoreLess}
+      <Button
+        kind="ghost"
+        size="field"
+        class="bx--snippet-btn--expand"
+        disabled="{disabled}"
+        on:click="{() => {
+          expanded = !expanded;
+        }}"
+      >
+        <span class:bx--snippet-btn--text="{true}">{expandText}</span>
+        <ChevronDown16
+          class="bx--icon-chevron--down bx--snippet__icon"
+          aria-label="{expandText}"
+        />
+      </Button>
+    {/if}
+  </div>
 {/if}
--- a/src/ComboBox/ComboBox.svelte
+++ b/src/ComboBox/ComboBox.svelte
@ -22,6 +22,12 @@
  /** Specify the selected combobox value */
  export let value = "";

+  /**
+   * Specify the direction of the combobox dropdown menu
+   * @type {"bottom" | "top"}
+   */
+  export let direction = "bottom";
+
  /**
   * Set the size of the combobox
   * @type {"sm" | "xl"}
@ -46,6 +52,12 @@
  /** Set to `true` to indicate an invalid state */
  export let invalid = false;

+  /** Set to `true` to indicate an warning state */
+  export let warn = false;
+
+  /** Specify the warning state text */
+  export let warnText = "";
+
  /** Set to `true` to enable the light variant */
  export let light = false;

@ -84,6 +96,7 @@

  import { createEventDispatcher, afterUpdate, tick } from "svelte";
  import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
+  import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
  import ListBox from "../ListBox/ListBox.svelte";
  import ListBoxField from "../ListBox/ListBoxField.svelte";
  import ListBoxMenu from "../ListBox/ListBoxMenu.svelte";
@ -97,8 +110,8 @@
  let inputValue = "";
  let highlightedIndex = -1;

-  function change(direction) {
-    let index = highlightedIndex + direction;
+  function change(dir) {
+    let index = highlightedIndex + dir;

    if (index < 0) {
      index = items.length - 1;
@ -158,7 +171,8 @@
    </label>
  {/if}
  <ListBox
-    class="bx--combo-box"
+    class="bx--combo-box {direction === 'top' &&
+      'bx--list-box--up'} {!invalid && warn && 'bx--combo-box--warning'}"
    id="{comboId}"
    aria-label="{ariaLabel}"
    disabled="{disabled}"
@ -167,6 +181,8 @@
    open="{open}"
    light="{light}"
    size="{size}"
+    warn="{warn}"
+    warnText="{warnText}"
  >
    <ListBoxField
      role="button"
@ -236,6 +252,11 @@
      {#if invalid}
        <WarningFilled16 class="bx--list-box__invalid-icon" />
      {/if}
+      {#if !invalid && warn}
+        <WarningAltFilled16
+          class="bx--list-box__invalid-icon bx--list-box__invalid-icon--warning"
+        />
+      {/if}
      {#if inputValue}
        <ListBoxSelection
          on:clear
@ -286,7 +307,7 @@
      </ListBoxMenu>
    {/if}
  </ListBox>
-  {#if !invalid && helperText}
+  {#if !invalid && helperText && !warn}
    <div
      class:bx--form__helper-text="{true}"
      class:bx--form__helper-text--disabled="{disabled}"
--- a/src/Dropdown/Dropdown.svelte
+++ b/src/Dropdown/Dropdown.svelte
@ -27,6 +27,12 @@
   */
  export let type = "default";

+  /**
+   * Specify the direction of the dropdown menu
+   * @type {"bottom" | "top"}
+   */
+  export let direction = "bottom";
+
  /**
   * Specify the size of the dropdown field
   * @type {"sm" | "lg" | "xl"}
@ -105,8 +111,8 @@
  let selectedId = undefined;
  let highlightedIndex = -1;

-  function change(direction) {
-    let index = highlightedIndex + direction;
+  function change(dir) {
+    let index = highlightedIndex + dir;

    if (index < 0) {
      index = items.length - 1;
@ -159,7 +165,8 @@
    id="{id}"
    name="{name}"
    aria-label="{$$props['aria-label']}"
-    class="bx--dropdown {invalid && 'bx--dropdown--invalid'} {!invalid &&
+    class="bx--dropdown {direction === 'top' && 'bx--list-box--up'} {invalid &&
+      'bx--dropdown--invalid'} {!invalid &&
      warn &&
      'bx--dropdown--warning'} {open && 'bx--dropdown--open'}
      {size ===
--- a/src/MultiSelect/MultiSelect.svelte
+++ b/src/MultiSelect/MultiSelect.svelte
@ -32,6 +32,12 @@
   */
  export let type = "default";

+  /**
+   * Specify the direction of the multiselect dropdown menu
+   * @type {"bottom" | "top"}
+   */
+  export let direction = "bottom";
+
  /**
   * Specify the selection feedback after selecting items
   * @type {"top" | "fixed" | "top-after-reopen"}
@ -252,7 +258,8 @@
    size="{size}"
    warn="{warn}"
    warnText="{warnText}"
-    class="bx--multi-select {filterable && 'bx--combo-box'}
+    class="bx--multi-select {direction === 'top' &&
+      'bx--list-box--up'} {filterable && 'bx--combo-box'}
      {filterable &&
      'bx--multi-select--filterable'}
      {invalid &&
--- a/src/ProgressIndicator/ProgressStep.svelte
+++ b/src/ProgressIndicator/ProgressStep.svelte
@ -80,7 +80,7 @@
    }}"
  >
    {#if invalid}
-      <Warning16 class="bx--progress__warning" />
+      <Warning16 class="bx--progress__warning" title="{description}" />
    {:else if current}
      <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>
--- a/src/Tag/Tag.svelte
+++ b/src/Tag/Tag.svelte
@ -48,78 +48,76 @@
    on:mouseenter
    on:mouseleave
  />
-{:else}
-  {#if filter}
-    <div
-      aria-label="{title}"
-      id="{id}"
-      class:bx--tag="{true}"
-      class:bx--tag--disabled="{disabled}"
-      class:bx--tag--filter="{filter}"
-      class:bx--tag--sm="{size === 'sm'}"
-      class:bx--tag--red="{type === 'red'}"
-      class:bx--tag--magenta="{type === 'magenta'}"
-      class:bx--tag--purple="{type === 'purple'}"
-      class:bx--tag--blue="{type === 'blue'}"
-      class:bx--tag--cyan="{type === 'cyan'}"
-      class:bx--tag--teal="{type === 'teal'}"
-      class:bx--tag--green="{type === 'green'}"
-      class:bx--tag--gray="{type === 'gray'}"
-      class:bx--tag--cool-gray="{type === 'cool-gray'}"
-      class:bx--tag--warm-gray="{type === 'warm-gray'}"
-      class:bx--tag--high-contrast="{type === 'high-contrast'}"
-      {...$$restProps}
-    >
-      <slot props="{{ class: 'bx--tag__label' }}">
-        <span class:bx--tag__label="{true}">{type}</span>
-      </slot>
-      <button
-        aria-labelledby="{id}"
-        class:bx--tag__close-icon="{true}"
-        disabled="{disabled}"
-        title="{title}"
-        on:click|stopPropagation
-        on:click|stopPropagation="{() => {
-          dispatch('close');
-        }}"
-        on:mouseover
-        on:mouseenter
-        on:mouseleave
-      >
-        <Close16 />
-      </button>
-    </div>
-  {:else}
-    <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'}"
-      {...$$restProps}
-      on:click
+{:else if filter}
+  <div
+    aria-label="{title}"
+    id="{id}"
+    class:bx--tag="{true}"
+    class:bx--tag--disabled="{disabled}"
+    class:bx--tag--filter="{filter}"
+    class:bx--tag--sm="{size === 'sm'}"
+    class:bx--tag--red="{type === 'red'}"
+    class:bx--tag--magenta="{type === 'magenta'}"
+    class:bx--tag--purple="{type === 'purple'}"
+    class:bx--tag--blue="{type === 'blue'}"
+    class:bx--tag--cyan="{type === 'cyan'}"
+    class:bx--tag--teal="{type === 'teal'}"
+    class:bx--tag--green="{type === 'green'}"
+    class:bx--tag--gray="{type === 'gray'}"
+    class:bx--tag--cool-gray="{type === 'cool-gray'}"
+    class:bx--tag--warm-gray="{type === 'warm-gray'}"
+    class:bx--tag--high-contrast="{type === 'high-contrast'}"
+    {...$$restProps}
+  >
+    <slot props="{{ class: 'bx--tag__label' }}">
+      <span class:bx--tag__label="{true}">{type}</span>
+    </slot>
+    <button
+      aria-labelledby="{id}"
+      class:bx--tag__close-icon="{true}"
+      disabled="{disabled}"
+      title="{title}"
+      on:click|stopPropagation
+      on:click|stopPropagation="{() => {
+        dispatch('close');
+      }}"
      on:mouseover
      on:mouseenter
      on:mouseleave
    >
-      {#if icon}
-        <div class:bx--tag__custom-icon="{true}">
-          <svelte:component this="{icon}" />
-        </div>
-      {/if}
-      <span>
-        <slot />
-      </span>
-    </div>
-  {/if}
+      <Close16 />
+    </button>
+  </div>
+{:else}
+  <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'}"
+    {...$$restProps}
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+  >
+    {#if icon}
+      <div class:bx--tag__custom-icon="{true}">
+        <svelte:component this="{icon}" />
+      </div>
+    {/if}
+    <span>
+      <slot />
+    </span>
+  </div>
 {/if}
--- a/src/Toggle/Toggle.svelte
+++ b/src/Toggle/Toggle.svelte
@ -80,9 +80,9 @@
      <span aria-hidden="true" class:bx--toggle__text--off="{true}">
        {labelA}
      </span>
-      <span aria-hidden="true" class:bx--toggle__text--on="{true}"
-        >{labelB}</span
-      >
+      <span aria-hidden="true" class:bx--toggle__text--on="{true}">
+        {labelB}
+      </span>
    </span>
  </label>
 </div>
--- a/src/Truncate/Truncate.svelte
+++ b/src/Truncate/Truncate.svelte
@ -0,0 +1,12 @@
+<script>
+  /** @type {"end" | "front"}*/
+  export let clamp = "end";
+</script>
+
+<p
+  class:bx--text-truncate--end="{clamp === 'end'}"
+  class:bx--text-truncate--front="{clamp === 'front'}"
+  {...$$restProps}
+>
+  <slot />
+</p>
--- a/src/Truncate/index.js
+++ b/src/Truncate/index.js
@ -0,0 +1 @@
+export { default as Truncate } from "./Truncate.svelte";
--- a/src/UIShell/SideNavDivider.svelte
+++ b/src/UIShell/SideNavDivider.svelte
@ -0,0 +1 @@
+<li role="separator" class:bx--side-nav__divider="{true}" {...$$restProps}></li>
--- a/src/UIShell/index.js
+++ b/src/UIShell/index.js
@ -18,3 +18,4 @@ export { default as Content } from "./Content.svelte";
 export { default as SkipToContent } from "./SkipToContent.svelte";
 export { default as HeaderGlobalAction } from "./HeaderGlobalAction.svelte";
 export { default as HeaderSearch } from "./HeaderSearch.svelte";
+export { default as SideNavDivider } from "./SideNavDivider.svelte";
--- a/src/index.js
+++ b/src/index.js
@ -114,6 +114,7 @@ export { ToggleSmall, ToggleSmallSkeleton } from "./ToggleSmall";
 export { Tooltip } from "./Tooltip";
 export { TooltipDefinition } from "./TooltipDefinition";
 export { TooltipIcon } from "./TooltipIcon";
+export { Truncate } from "./Truncate";
 export {
  Header,
  HeaderAction,
@ -131,6 +132,7 @@ export {
  SideNavLink,
  SideNavMenu,
  SideNavMenuItem,
+  SideNavDivider,
  Content,
  SkipToContent,
  HeaderGlobalAction,
--- a/tests/ComboBox.test.svelte
+++ b/tests/ComboBox.test.svelte
@ -10,6 +10,7 @@
 </script>

 <ComboBox
+  direction="top"
  titleText="Contact"
  placeholder="Select contact method"
  items="{items}"
--- a/tests/Dropdown.test.svelte
+++ b/tests/Dropdown.test.svelte
@ -3,6 +3,7 @@
 </script>

 <Dropdown
+  direction="top"
  titleText="Contact"
  selectedIndex="{0}"
  items="{[
--- a/tests/MultiSelect.test.svelte
+++ b/tests/MultiSelect.test.svelte
@ -3,6 +3,7 @@
 </script>

 <MultiSelect
+  direction="top"
  titleText="Contact"
  label="Select contact methods..."
  items="{[
--- a/tests/RadioTile.test.svelte
+++ b/tests/RadioTile.test.svelte
@ -9,7 +9,7 @@
 </TileGroup>

 <TileGroup legend="Service pricing tiers">
-  <RadioTile value="0" checked>Lite plan</RadioTile>
-  <RadioTile value="1">Standard plan</RadioTile>
-  <RadioTile value="2">Plus plan</RadioTile>
+  <RadioTile light value="0" checked>Lite plan</RadioTile>
+  <RadioTile light value="1">Standard plan</RadioTile>
+  <RadioTile light value="2">Plus plan</RadioTile>
 </TileGroup>
--- a/tests/Truncate.test.svelte
+++ b/tests/Truncate.test.svelte
@ -0,0 +1,23 @@
+<script lang="ts">
+  import { Truncate } from "../types";
+  import { truncate } from "../actions";
+</script>
+
+<Truncate>
+  Carbon Components Svelte is a Svelte component library that implements the
+  Carbon Design System, an open source design system by IBM.
+</Truncate>
+
+<Truncate clamp="front">
+  Carbon Components Svelte is a Svelte component library that implements the
+  Carbon Design System, an open source design system by IBM.
+</Truncate>
+
+<h4 use:truncate>
+  Carbon Components Svelte is a Svelte component library that implements the
+  Carbon Design System, an open source design system by IBM.
+</h4>
+<h4 use:truncate="{{ clamp: 'front' }}">
+  Carbon Components Svelte is a Svelte component library that implements the
+  Carbon Design System, an open source design system by IBM.
+</h4>
--- a/types/ComboBox/ComboBox.d.ts
+++ b/types/ComboBox/ComboBox.d.ts
@ -32,6 +32,12 @@ export interface ComboBoxProps
   */
  value?: string;

+  /**
+   * Specify the direction of the combobox dropdown menu
+   * @default "bottom"
+   */
+  direction?: "bottom" | "top";
+
  /**
   * Set the size of the combobox
   */
@ -73,6 +79,18 @@ export interface ComboBoxProps
   */
  invalid?: boolean;

+  /**
+   * Set to `true` to indicate an warning state
+   * @default false
+   */
+  warn?: boolean;
+
+  /**
+   * Specify the warning state text
+   * @default ""
+   */
+  warnText?: string;
+
  /**
   * Set to `true` to enable the light variant
   * @default false
--- a/types/Dropdown/Dropdown.d.ts
+++ b/types/Dropdown/Dropdown.d.ts
@ -36,6 +36,12 @@ export interface DropdownProps
   */
  type?: "default" | "inline";

+  /**
+   * Specify the direction of the dropdown menu
+   * @default "bottom"
+   */
+  direction?: "bottom" | "top";
+
  /**
   * Specify the size of the dropdown field
   */
--- a/types/MultiSelect/MultiSelect.d.ts
+++ b/types/MultiSelect/MultiSelect.d.ts
@ -47,6 +47,12 @@ export interface MultiSelectProps
   */
  type?: "default" | "inline";

+  /**
+   * Specify the direction of the multiselect dropdown menu
+   * @default "bottom"
+   */
+  direction?: "bottom" | "top";
+
  /**
   * Specify the selection feedback after selecting items
   * @default "top-after-reopen"
--- a/types/Truncate/Truncate.d.ts
+++ b/types/Truncate/Truncate.d.ts
@ -0,0 +1,16 @@
+/// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
+
+export interface TruncateProps
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["p"]> {
+  /**
+   * @default "end"
+   */
+  clamp?: "end" | "front";
+}
+
+export default class Truncate extends SvelteComponentTyped<
+  TruncateProps,
+  {},
+  { default: {} }
+> {}
--- a/types/UIShell/SideNavDivider.d.ts
+++ b/types/UIShell/SideNavDivider.d.ts
@ -0,0 +1,11 @@
+/// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
+
+export interface SideNavDividerProps
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> {}
+
+export default class SideNavDivider extends SvelteComponentTyped<
+  SideNavDividerProps,
+  {},
+  {}
+> {}
--- a/types/index.d.ts
+++ b/types/index.d.ts
@ -133,6 +133,7 @@ export { default as ToggleSmallSkeleton } from "./ToggleSmall/ToggleSmallSkeleto
 export { default as Tooltip } from "./Tooltip/Tooltip";
 export { default as TooltipDefinition } from "./TooltipDefinition/TooltipDefinition";
 export { default as TooltipIcon } from "./TooltipIcon/TooltipIcon";
+export { default as Truncate } from "./Truncate/Truncate";
 export { default as Header } from "./UIShell/GlobalHeader/Header";
 export { default as HeaderAction } from "./UIShell/GlobalHeader/HeaderAction";
 export { default as HeaderActionLink } from "./UIShell/GlobalHeader/HeaderActionLink";
@ -149,6 +150,7 @@ export { default as SideNavItems } from "./UIShell/SideNav/SideNavItems";
 export { default as SideNavLink } from "./UIShell/SideNav/SideNavLink";
 export { default as SideNavMenu } from "./UIShell/SideNav/SideNavMenu";
 export { default as SideNavMenuItem } from "./UIShell/SideNav/SideNavMenuItem";
+export { default as SideNavDivider } from "./UIShell/SideNavDivider";
 export { default as Content } from "./UIShell/Content";
 export { default as SkipToContent } from "./UIShell/SkipToContent";
 export { default as HeaderGlobalAction } from "./UIShell/HeaderGlobalAction";
--- a/yarn.lock
+++ b/yarn.lock
@ -453,10 +453,10 @@ caniuse-lite@^1.0.30001181:
  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001183.tgz#7a57ba9d6584119bb5f2bc76d3cc47ba9356b3e2"
  integrity sha512-7JkwTEE1hlRKETbCFd8HDZeLiQIUcl8rC6JgNjvHCNaxOeNmQ9V4LvQXRUsKIV2CC73qKxljwVhToaA3kLRqTw==

-carbon-components@10.28.0:
-  version "10.28.0"
-  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.28.0.tgz#c4d2b23df2559cf3b0226867c45e2e84e0af7c4e"
-  integrity sha512-bFsyngr625zc/t2gl4BPFYl0/ed4q38rrPihQxBXHhLAdeZNyy8xyOQlbh1PEQbTu47H/s/bxVo6QiFm/VmLZA==
+carbon-components@10.29.0:
+  version "10.29.0"
+  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.29.0.tgz#9fd31f1a5cce4cb59a7196222e524d8442fd9026"
+  integrity sha512-y7BPEfwWxE1URTjrtHz4+rYQwB0u/e7WptlbTH2Lb/iqRYCe6T94u9EVZuq0ZZTpRUNRckbI1irt0AV3J/qlcA==
  dependencies:
    "@carbon/telemetry" "0.0.0-alpha.6"
    flatpickr "4.6.1"
@ -1899,10 +1899,10 @@ prepend-http@^1.0.0:
  resolved "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
  integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=

-prettier-plugin-svelte@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-2.1.1.tgz#e6613cac4292b5bbda5250680565c131b0da5ced"
-  integrity sha512-U0gRsdJtveyusHd86OUPD+lEVd13bHPPF/CZD/csKjz0Y+Cv4WbUy9x8tA5vaHFtf0tsu8Yb1MrfuhN3GH2gig==
+prettier-plugin-svelte@^2.1.5:
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/prettier-plugin-svelte/-/prettier-plugin-svelte-2.1.5.tgz#cb1df2bffafa0562f05e02c6e9373806ef51ebb1"
+  integrity sha512-7ySuC/n0Rk8v6GrzoruojfLYde6ncjeFCAA65Dm+fXrK2Mgc3FlvzXMPpm//P3LgfEoc3zMEG/xog1YeoNhdSQ==

 prettier@^2.2.1:
  version "2.2.1"
				`@ -0,0 +1 @@`
				`export { default as Truncate } from "./Truncate.svelte";`
				`@ -0,0 +1 @@`
				`<li role="separator" class:bx--side-nav__divider="{true}" {...$$restProps}></li>`