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

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

README.md

@@ -164,7 +164,6 @@ Using JavaScript:
 </script>
 
 <button on:click="{() => (theme = 'g90')}">Update theme</button>
-
 ```
 
 ## Preprocessors

actions/index.js

@@ -0,0 +1 @@
+export { truncate } from "./truncate";

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");
+    },
+  };
+}

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";
+// Programmatically update the theme in JavaScript:
-@import "carbon-components/scss/globals/scss/_css--font-face.scss";
+// document.documentElement.setAttribute("theme", "g90");
-@import "carbon-components/scss/globals/scss/_css--helpers.scss";
+
-@import "carbon-components/scss/globals/scss/_css--body.scss";
+@import "carbon-components/scss/globals/scss/_css--reset";
-@import "carbon-components/scss/globals/grid/_grid.scss";
+@import "carbon-components/scss/globals/scss/_css--font-face";
-@import "carbon-components/scss/globals/scss/styles.scss";
+@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";
+

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--reset";
-@import "carbon-components/scss/globals/scss/_css--font-face.scss";
+@import "carbon-components/scss/globals/scss/_css--font-face";
-@import "carbon-components/scss/globals/scss/_css--helpers.scss";
+@import "carbon-components/scss/globals/scss/_css--helpers";
-@import "carbon-components/scss/globals/scss/_css--body.scss";
+@import "carbon-components/scss/globals/scss/_css--body";
-@import "carbon-components/scss/globals/grid/_grid.scss";
+@import "carbon-components/scss/globals/grid/grid";
-@import "carbon-components/scss/globals/scss/styles.scss";
+
+// Import all component styles
+@import "carbon-components/scss/globals/scss/styles";
+

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--reset";
-@import "carbon-components/scss/globals/scss/_css--font-face.scss";
+@import "carbon-components/scss/globals/scss/_css--font-face";
-@import "carbon-components/scss/globals/scss/_css--helpers.scss";
+@import "carbon-components/scss/globals/scss/_css--helpers";
-@import "carbon-components/scss/globals/scss/_css--body.scss";
+@import "carbon-components/scss/globals/scss/_css--body";
-@import "carbon-components/scss/globals/grid/_grid.scss";
+@import "carbon-components/scss/globals/grid/grid";
-@import "carbon-components/scss/globals/scss/styles.scss";
+
+// Import all component styles
+@import "carbon-components/scss/globals/scss/styles";

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--reset";
-@import "carbon-components/scss/globals/scss/_css--font-face.scss";
+@import "carbon-components/scss/globals/scss/_css--font-face";
-@import "carbon-components/scss/globals/scss/_css--helpers.scss";
+@import "carbon-components/scss/globals/scss/_css--helpers";
-@import "carbon-components/scss/globals/scss/_css--body.scss";
+@import "carbon-components/scss/globals/scss/_css--body";
-@import "carbon-components/scss/globals/grid/_grid.scss";
+@import "carbon-components/scss/globals/grid/grid";
-@import "carbon-components/scss/globals/scss/styles.scss";
+
+// Import all component styles
+@import "carbon-components/scss/globals/scss/styles";

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--reset";
-@import "carbon-components/scss/globals/scss/_css--font-face.scss";
+@import "carbon-components/scss/globals/scss/_css--font-face";
-@import "carbon-components/scss/globals/scss/_css--helpers.scss";
+@import "carbon-components/scss/globals/scss/_css--helpers";
-@import "carbon-components/scss/globals/scss/_css--body.scss";
+@import "carbon-components/scss/globals/scss/_css--body";
-@import "carbon-components/scss/globals/grid/_grid.scss";
+@import "carbon-components/scss/globals/grid/grid";
-@import "carbon-components/scss/globals/scss/styles.scss";
+
+// Import all component styles
+@import "carbon-components/scss/globals/scss/styles";

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",

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";
+  // Programmatically update the theme in JavaScript:
-  @import "carbon-components/scss/globals/scss/_css--font-face.scss";
+  // document.documentElement.setAttribute("theme", "g90");
-  @import "carbon-components/scss/globals/scss/_css--helpers.scss";
+
-  @import "carbon-components/scss/globals/scss/_css--body.scss";
+  @import "carbon-components/scss/globals/scss/_css--reset";
-  @import "carbon-components/scss/globals/grid/_grid.scss";
+  @import "carbon-components/scss/globals/scss/_css--font-face";
-  @import "carbon-components/scss/globals/scss/styles.scss";
+  @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>

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",

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"

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"},

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..."

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>

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>

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
 

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>

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>
 

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";

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:
+carbon-components@10.29.0:
-  version "10.28.0"
+  version "10.29.0"
-  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.28.0.tgz#c4d2b23df2559cf3b0226867c45e2e84e0af7c4e"
+  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.29.0.tgz#9fd31f1a5cce4cb59a7196222e524d8442fd9026"
-  integrity sha512-bFsyngr625zc/t2gl4BPFYl0/ed4q38rrPihQxBXHhLAdeZNyy8xyOQlbh1PEQbTu47H/s/bxVo6QiFm/VmLZA==
+  integrity sha512-y7BPEfwWxE1URTjrtHz4+rYQwB0u/e7WptlbTH2Lb/iqRYCe6T94u9EVZuq0ZZTpRUNRckbI1irt0AV3J/qlcA==
   dependencies:
     "@carbon/telemetry" "0.0.0-alpha.6"
     flatpickr "4.6.1"

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"
   ]
 }

src/Button/Button.svelte

@@ -122,10 +122,9 @@
     on:mouseenter
     on:mouseleave
   />
-{:else}
+{:else if as}
-  {#if as}
   <slot props="{buttonProps}" />
-  {:else if href && !disabled}
+{:else if href && !disabled}
   <!-- svelte-ignore a11y-missing-attribute -->
   <a
     bind:this="{ref}"
@@ -146,7 +145,7 @@
       aria-label="{iconDescription}"
     />
   </a>
-  {:else}
+{:else}
   <button
     bind:this="{ref}"
     {...buttonProps}
@@ -166,5 +165,4 @@
       aria-label="{iconDescription}"
     />
   </button>
-  {/if}
 {/if}

src/CodeSnippet/CodeSnippet.svelte

@@ -103,8 +103,7 @@
     on:mouseenter
     on:mouseleave
   />
-{:else}
+{:else if type === "inline"}
-  {#if type === "inline"}
   {#if hideCopyButton}
     <span
       class:bx--snippet="{true}"
@@ -136,8 +135,7 @@
         'bx--snippet--light'}
           {hideCopyButton &&
         'bx--snippet--no-copy'}
-          {wrapText &&
+          {wrapText && 'bx--snippet--wraptext'}"
-          'bx--snippet--wraptext'}"
       {...$$restProps}
       on:click
       on:mouseover
@@ -149,7 +147,7 @@
       </code>
     </Copy>
   {/if}
-  {:else}
+{:else}
   <div
     class:bx--snippet="{true}"
     class:bx--snippet--expand="{expanded}"
@@ -205,5 +203,4 @@
       </Button>
     {/if}
   </div>
-  {/if}
 {/if}

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) {
+  function change(dir) {
-    let index = highlightedIndex + direction;
+    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}"

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) {
+  function change(dir) {
-    let index = highlightedIndex + direction;
+    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 ===

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 &&

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>

src/Tag/Tag.svelte

@@ -48,8 +48,7 @@
     on:mouseenter
     on:mouseleave
   />
-{:else}
+{:else if filter}
-  {#if filter}
   <div
     aria-label="{title}"
     id="{id}"
@@ -89,7 +88,7 @@
       <Close16 />
     </button>
   </div>
-  {:else}
+{:else}
   <div
     id="{id}"
     class:bx--tag="{true}"
@@ -121,5 +120,4 @@
       <slot />
     </span>
   </div>
-  {/if}
 {/if}

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}"
+      <span aria-hidden="true" class:bx--toggle__text--on="{true}">
-        >{labelB}</span
+        {labelB}
-      >
+      </span>
     </span>
   </label>
 </div>

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>

src/Truncate/index.js

@@ -0,0 +1 @@
+export { default as Truncate } from "./Truncate.svelte";

src/UIShell/SideNavDivider.svelte

@@ -0,0 +1 @@
+<li role="separator" class:bx--side-nav__divider="{true}" {...$$restProps}></li>

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";

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,

tests/ComboBox.test.svelte

@@ -10,6 +10,7 @@
 </script>
 
 <ComboBox
+  direction="top"
   titleText="Contact"
   placeholder="Select contact method"
   items="{items}"

tests/Dropdown.test.svelte

@@ -3,6 +3,7 @@
 </script>
 
 <Dropdown
+  direction="top"
   titleText="Contact"
   selectedIndex="{0}"
   items="{[

tests/MultiSelect.test.svelte

@@ -3,6 +3,7 @@
 </script>
 
 <MultiSelect
+  direction="top"
   titleText="Contact"
   label="Select contact methods..."
   items="{[

tests/RadioTile.test.svelte

@@ -9,7 +9,7 @@
 </TileGroup>
 
 <TileGroup legend="Service pricing tiers">
-  <RadioTile value="0" checked>Lite plan</RadioTile>
+  <RadioTile light value="0" checked>Lite plan</RadioTile>
-  <RadioTile value="1">Standard plan</RadioTile>
+  <RadioTile light value="1">Standard plan</RadioTile>
-  <RadioTile value="2">Plus plan</RadioTile>
+  <RadioTile light value="2">Plus plan</RadioTile>
 </TileGroup>

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>

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

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
    */

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"

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: {} }
+> {}

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,
+  {},
+  {}
+> {}

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";

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:
+carbon-components@10.29.0:
-  version "10.28.0"
+  version "10.29.0"
-  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.28.0.tgz#c4d2b23df2559cf3b0226867c45e2e84e0af7c4e"
+  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.29.0.tgz#9fd31f1a5cce4cb59a7196222e524d8442fd9026"
-  integrity sha512-bFsyngr625zc/t2gl4BPFYl0/ed4q38rrPihQxBXHhLAdeZNyy8xyOQlbh1PEQbTu47H/s/bxVo6QiFm/VmLZA==
+  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:
+prettier-plugin-svelte@^2.1.5:
-  version "2.1.1"
+  version "2.1.5"
-  resolved "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-2.1.1.tgz#e6613cac4292b5bbda5250680565c131b0da5ced"
+  resolved "https://registry.yarnpkg.com/prettier-plugin-svelte/-/prettier-plugin-svelte-2.1.5.tgz#cb1df2bffafa0562f05e02c6e9373806ef51ebb1"
-  integrity sha512-U0gRsdJtveyusHd86OUPD+lEVd13bHPPF/CZD/csKjz0Y+Cv4WbUy9x8tA5vaHFtf0tsu8Yb1MrfuhN3GH2gig==
+  integrity sha512-7ySuC/n0Rk8v6GrzoruojfLYde6ncjeFCAA65Dm+fXrK2Mgc3FlvzXMPpm//P3LgfEoc3zMEG/xog1YeoNhdSQ==
 
 prettier@^2.2.1:
   version "2.2.1"