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

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>