Align v10.34 (#621)

* feat(theme): add g80 theme

* docs(data-table): use link with icon variant

* feat(search): support expandable variant

* fix(file-uploaded): use semantic p element instead of strong

* feat(side-nav): dispatch open, close, click:overlay events

* refactor(ui-shell): remove usage of deprecated Icon component

* feat(ui-shell): allow custom hamburger menu icons

* feat(button): support xl size

* fix(code-snippet): wrap code element with pre

* refactor(button): use button specific tooltip class for icon-only variant

* feat(password-input): support warning, inline props

* feat(data-table): support medium size

COMPONENT_INDEX.md

@@ -350,7 +350,7 @@ None.
 | ref              | <code>let</code> | Yes      | <code>null &#124; HTMLAnchorElement &#124; HTMLButtonElement</code>                                                                       | <code>null</code>      | Obtain a reference to the HTML element                                                                                                                                                        |
 | hasIconOnly      | <code>let</code> | Yes      | <code>boolean</code>                                                                                                                      | <code>false</code>     | Set to `true` for the icon-only variant                                                                                                                                                       |
 | kind             | <code>let</code> | No       | <code>"primary" &#124; "secondary" &#124; "tertiary" &#124; "ghost" &#124; "danger" &#124; "danger-tertiary" &#124; "danger-ghost"</code> | <code>"primary"</code> | Specify the kind of button                                                                                                                                                                    |
-| size             | <code>let</code> | No       | <code>"default" &#124; "field" &#124; "small"</code>                                                                                      | <code>"default"</code> | Specify the size of button                                                                                                                                                                    |
+| size             | <code>let</code> | No       | <code>"default" &#124; "field" &#124; "small" &#124; "xl"</code>                                                                          | <code>"default"</code> | Specify the size of button                                                                                                                                                                    |
 | isSelected       | <code>let</code> | No       | <code>boolean</code>                                                                                                                      | <code>false</code>     | Set to `true` to enable the selected state for an icon-only, ghost button                                                                                                                     |
 | icon             | <code>let</code> | No       | <code>typeof import("carbon-icons-svelte").CarbonIcon</code>                                                                              | --                     | Specify the icon from `carbon-icons-svelte` to render                                                                                                                                         |
 | iconDescription  | <code>let</code> | No       | <code>string</code>                                                                                                                       | --                     | Specify the ARIA label for the button icon                                                                                                                                                    |
@@ -931,14 +931,14 @@ export interface DataTableCell {
 ### Props
 
 | Prop name      | Kind             | Reactive | Type                                                                | Default value      | Description                                                                                                         |
-| :------------- | :--------------- | :------- | :-------------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------- |
+| :------------- | :--------------- | :------- | :------------------------------------------------------------------ | ------------------ | ------------------------------------------------------------------------------------------------------------------- |
 | selectedRowIds | <code>let</code> | Yes      | <code>DataTableRowId[]</code>                                       | <code>[]</code>    | Specify the row ids to be selected                                                                                  |
 | selectable     | <code>let</code> | Yes      | <code>boolean</code>                                                | <code>false</code> | Set to `true` for the selectable variant<br />Automatically set to `true` if `radio` or `batchSelection` are `true` |
 | expandedRowIds | <code>let</code> | Yes      | <code>DataTableRowId[]</code>                                       | <code>[]</code>    | Specify the row ids to be expanded                                                                                  |
 | expandable     | <code>let</code> | Yes      | <code>boolean</code>                                                | <code>false</code> | Set to `true` for the expandable variant<br />Automatically set to `true` if `batchExpansion` is `true`             |
 | rows           | <code>let</code> | Yes      | <code>DataTableRow[]</code>                                         | <code>[]</code>    | Specify the rows the data table should render<br />keys defined in `headers` are used for the row ids               |
 | headers        | <code>let</code> | No       | <code>DataTableHeader[]</code>                                      | <code>[]</code>    | Specify the data table headers                                                                                      |
-| size           | <code>let</code> | No       | <code>"compact" &#124; "short" &#124; "tall"</code> | --                 | Set the size of the data table                                                                                      |
+| size           | <code>let</code> | No       | <code>"compact" &#124; "short" &#124; "medium" &#124; "tall"</code> | --                 | Set the size of the data table                                                                                      |
 | title          | <code>let</code> | No       | <code>string</code>                                                 | <code>""</code>    | Specify the title of the data table                                                                                 |
 | description    | <code>let</code> | No       | <code>string</code>                                                 | <code>""</code>    | Specify the description of the data table                                                                           |
 | zebra          | <code>let</code> | No       | <code>boolean</code>                                                | <code>false</code> | Set to `true` to use zebra styles                                                                                   |
@@ -1506,7 +1506,7 @@ None.
 ### Props
 
 | Prop name               | Kind             | Reactive | Type                                                         | Default value      | Description                                                                                                                      |
-| :---------------------- | :--------------- | :------- | :----------------------------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------- |
+| :---------------------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------- |
 | ref                     | <code>let</code> | Yes      | <code>null &#124; HTMLAnchorElement</code>                   | <code>null</code>  | Obtain a reference to the HTML anchor element                                                                                    |
 | isSideNavOpen           | <code>let</code> | Yes      | <code>boolean</code>                                         | <code>false</code> | Set to `true` to open the side nav                                                                                               |
 | expandedByDefault       | <code>let</code> | No       | <code>boolean</code>                                         | <code>true</code>  | Set to `false` to hide the side nav by default                                                                                   |
@@ -1515,6 +1515,8 @@ None.
 | company                 | <code>let</code> | No       | <code>string</code>                                          | --                 | Specify the company name                                                                                                         |
 | platformName            | <code>let</code> | No       | <code>string</code>                                          | <code>""</code>    | Specify the platform name<br />Alternatively, use the named slot "platform" (e.g., &lt;span slot="platform"&gt;...&lt;/span&gt;) |
 | persistentHamburgerMenu | <code>let</code> | No       | <code>boolean</code>                                         | <code>false</code> | Set to `true` to persist the hamburger menu                                                                                      |
+| iconMenu                | <code>let</code> | No       | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | --                 | Specify the icon from `carbon-icons-svelte` to render for the closed state<br />Defaults to `Menu20`                             |
+| iconClose               | <code>let</code> | No       | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | --                 | Specify the icon from `carbon-icons-svelte` to render for the opened state<br />Defaults to `Close20`                            |
 
 ### Slots
 
@@ -2745,6 +2747,9 @@ None.
 | hideLabel         | <code>let</code> | No       | <code>boolean</code>                                            | <code>false</code>                               | Set to `true` to visually hide the label text         |
 | invalid           | <code>let</code> | No       | <code>boolean</code>                                            | <code>false</code>                               | Set to `true` to indicate an invalid state            |
 | invalidText       | <code>let</code> | No       | <code>string</code>                                             | <code>""</code>                                  | Specify the text for the 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                        |
+| inline            | <code>let</code> | No       | <code>boolean</code>                                            | <code>false</code>                               | Set to `true` to use inline version                   |
 | id                | <code>let</code> | No       | <code>string</code>                                             | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element                       |
 | name              | <code>let</code> | No       | <code>string</code>                                             | --                                               | Specify a name attribute for the input                |
 
@@ -3011,12 +3016,14 @@ None.
 | :------------------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ------------------------------------------------------- |
 | ref                  | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code> | <code>null</code>                                | Obtain a reference to the input HTML element            |
 | value                | <code>let</code> | Yes      | <code>string</code>                       | <code>""</code>                                  | Specify the value of the search input                   |
+| expanded             | <code>let</code> | Yes      | <code>boolean</code>                      | <code>false</code>                               | Set to `true to expand the search input                 |
 | small                | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | --                                                      |
 | size                 | <code>let</code> | No       | <code>"sm" &#124; "lg" &#124; "xl"</code> | <code>"xl"</code>                                | Specify the size of the search input                    |
 | searchClass          | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the class name passed to the outer div element  |
 | skeleton             | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to display the skeleton state             |
 | 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 search input               |
+| expandable           | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to enable the expandable variant          |
 | type                 | <code>let</code> | No       | <code>string</code>                       | <code>"text"</code>                              | Specify the `type` attribute of the search input        |
 | placeholder          | <code>let</code> | No       | <code>string</code>                       | <code>"Search..."</code>                         | Specify the `placeholder` attribute of the search input |
 | autocomplete         | <code>let</code> | No       | <code>"on" &#124; "off"</code>            | <code>"off"</code>                               | Specify the `autocomplete` attribute                    |
@@ -3032,7 +3039,9 @@ None.
 ### Events
 
 | Event name | Type       | Detail           |
-| :--------- | :--------- | :----- |
+| :--------- | :--------- | :--------------- |
+| expand     | dispatched | <code>any</code> |
+| collapse   | dispatched | <code>any</code> |
 | click      | forwarded  | --               |
 | mouseover  | forwarded  | --               |
 | mouseenter | forwarded  | --               |
@@ -3212,7 +3221,11 @@ None.
 
 ### Events
 
-None.
+| Event name    | Type       | Detail           |
+| :------------ | :--------- | :--------------- |
+| open          | dispatched | <code>any</code> |
+| close         | dispatched | <code>any</code> |
+| click:overlay | dispatched | <code>any</code> |
 
 ## `SideNavDivider`
 
@@ -3675,8 +3688,8 @@ None.
 ### Props
 
 | Prop name        | Kind             | Reactive | Type                                                                | Default value      | Description                             |
-| :--------------- | :--------------- | :------- | :-------------------------------------------------- | ------------------ | --------------------------------------- |
+| :--------------- | :--------------- | :------- | :------------------------------------------------------------------ | ------------------ | --------------------------------------- |
-| size             | <code>let</code> | No       | <code>"compact" &#124; "short" &#124; "tall"</code> | --                 | Set the size of the table               |
+| size             | <code>let</code> | No       | <code>"compact" &#124; "short" &#124; "medium" &#124; "tall"</code> | --                 | Set the size of the table               |
 | zebra            | <code>let</code> | No       | <code>boolean</code>                                                | <code>false</code> | Set to `true` to use zebra styles       |
 | useStaticWidth   | <code>let</code> | No       | <code>boolean</code>                                                | <code>false</code> | Set to `true` to use static width       |
 | shouldShowBorder | <code>let</code> | No       | <code>boolean</code>                                                | <code>false</code> | Set to `true` for the bordered variant  |

README.md

@@ -89,6 +89,7 @@ Import components from `carbon-components-svelte` in the `script` tag of your Sv
 
 - **white.css**: Default Carbon theme (light)
 - **g10.css**: Gray 10 theme (light)
+- **g80.css**: Gray 80 theme (dark)
 - **g90.css**: Gray 90 theme (dark)
 - **g100.css**: Gray 100 theme (dark)
 - **all.css**: All themes (White, Gray 10, Gray 90, Gray 100) using [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
@@ -99,6 +100,7 @@ The compiled CSS is generated from the following `.scss` files:
 
 - [css/white.scss](css/white.scss)
 - [css/g10.scss](css/g10.scss)
+- [css/g80.scss](css/g80.scss)
 - [css/g90.scss](css/g90.scss)
 - [css/g100.scss](css/g100.scss)
 - [css/all.scss](css/all.scss)
@@ -157,7 +159,7 @@ Using JavaScript:
 
 ```svelte
 <script>
-  /** @type {"white" | "g10" | "g90" | "g100"} */
+  /** @type {"white" | "g10" | "g80" | "g90" | "g100"} */
   let theme = "white";
 
   $: document.documentElement.setAttribute("theme", theme);

css/g80.scss

@@ -0,0 +1,32 @@
+$feature-flags: (
+  ui-shell: true,
+  grid-columns-16: true
+);
+
+$css--font-face: true;
+$css--helpers: true;
+$css--body: true;
+$css--use-layer: true;
+$css--reset: true;
+$css--default-type: true;
+$css--plex: true;
+
+// Use the "g80" (Gray 80) Carbon theme
+@import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss";
+@import "carbon-components/scss/globals/scss/component-tokens";
+@import "carbon-components/src/components/tag/tag";
+@import "carbon-components/src/components/notification/inline-notification";
+@import "carbon-components/src/components/notification/toast-notification";
+
+$carbon--theme: $carbon--theme--g80;
+@include carbon--theme();
+
+@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";
+

docs/package.json

@@ -11,7 +11,7 @@
   "devDependencies": {
     "@sveltech/routify": "^1.9.9",
     "autoprefixer": "^10.2.3",
-    "carbon-components": "10.33.0",
+    "carbon-components": "10.34.0",
     "carbon-components-svelte": "../",
     "mdsvex": "^0.8.8",
     "npm-run-all": "^4.1.5",

docs/src/App.svelte

@@ -48,6 +48,15 @@
     }
   }
 
+  // Set the <html> theme attribute to "g80" to use the Gray 90 theme
+  // <html theme="g80">
+  :root[theme="g80"] {
+    @include carbon--theme($carbon--theme--g80, true) {
+      @include emit-component-tokens($tag-colors);
+      @include emit-component-tokens($notification-colors);
+    }
+  }
+
   // Set the <html> theme attribute to "g90" to use the Gray 90 theme
   // <html theme="g90">
   :root[theme="g90"] {

docs/src/COMPONENT_API.json

@@ -362,7 +362,7 @@
           "name": "size",
           "kind": "let",
           "description": "Specify the size of button",
-          "type": "\"default\" | \"field\" | \"small\"",
+          "type": "\"default\" | \"field\" | \"small\" | \"xl\"",
           "value": "\"default\"",
           "isFunction": false,
           "constant": false,
@@ -1931,7 +1931,7 @@
           "name": "size",
           "kind": "let",
           "description": "Set the size of the data table",
-          "type": "\"compact\" | \"short\" | \"tall\"",
+          "type": "\"compact\" | \"short\" | \"medium\" | \"tall\"",
           "isFunction": false,
           "constant": false,
           "reactive": false
@@ -3787,6 +3787,24 @@
           "isFunction": false,
           "constant": false,
           "reactive": true
+        },
+        {
+          "name": "iconMenu",
+          "kind": "let",
+          "description": "Specify the icon from `carbon-icons-svelte` to render for the closed state\nDefaults to `Menu20`",
+          "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "iconClose",
+          "kind": "let",
+          "description": "Specify the icon from `carbon-icons-svelte` to render for the opened state\nDefaults to `Close20`",
+          "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
         }
       ],
       "slots": [
@@ -7040,6 +7058,36 @@
           "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": "inline",
+          "kind": "let",
+          "description": "Set to `true` to use inline version",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "id",
           "kind": "let",
@@ -7801,6 +7849,26 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "expandable",
+          "kind": "let",
+          "description": "Set to `true` to enable the expandable variant",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "expanded",
+          "kind": "let",
+          "description": "Set to `true to expand the search input",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": true
+        },
         {
           "name": "value",
           "kind": "let",
@@ -7894,6 +7962,8 @@
       ],
       "slots": [],
       "events": [
+        { "type": "dispatched", "name": "expand", "detail": "any" },
+        { "type": "dispatched", "name": "collapse", "detail": "any" },
         { "type": "forwarded", "name": "click", "element": "SearchSkeleton" },
         {
           "type": "forwarded",
@@ -8379,7 +8449,11 @@
         }
       ],
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
-      "events": [],
+      "events": [
+        { "type": "dispatched", "name": "open", "detail": "any" },
+        { "type": "dispatched", "name": "close", "detail": "any" },
+        { "type": "dispatched", "name": "click:overlay", "detail": "any" }
+      ],
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "nav" }
     },
@@ -9318,7 +9392,7 @@
           "name": "size",
           "kind": "let",
           "description": "Set the size of the table",
-          "type": "\"compact\" | \"short\" | \"tall\"",
+          "type": "\"compact\" | \"short\" | \"medium\" | \"tall\"",
           "isFunction": false,
           "constant": false,
           "reactive": false

docs/src/components/Theme.svelte

@@ -1,7 +1,7 @@
 <script>
   export let persist = false;
   export let persistKey = "carbon-theme";
-  export const themes = ["white", "g10", "g90", "g100"];
+  export const themes = ["white", "g10", "g80", "g90", "g100"];
 
   import { onMount, afterUpdate } from "svelte";
   import { theme } from "../store";

docs/src/layouts/ComponentLayout.svelte

@@ -62,6 +62,7 @@
           >
             <SelectItem value="white" text="White" />
             <SelectItem value="g10" text="Gray 10" />
+            <SelectItem value="g80" text="Gray 80" />
             <SelectItem value="g90" text="Gray 90" />
             <SelectItem value="g100" text="Gray 100" />
           </Select>

docs/src/pages/components/Button.svx

@@ -94,6 +94,14 @@ If an `href` value is specified, the component will render an [anchor element](h
 <Button size="small" kind="ghost">Ghost</Button>
 <Button size="small" kind="danger">Danger</Button>
 
+### Extra-large button
+
+<Button size="xl">Primary</Button>
+<Button size="xl" kind="secondary">Secondary</Button>
+<Button size="xl" kind="tertiary">Tertiary</Button>
+<Button size="xl" kind="ghost">Ghost</Button>
+<Button size="xl" kind="danger">Danger</Button>
+
 ### Disabled button
 
 <Button disabled>Disabled button</Button>

docs/src/pages/components/DataTable.svx

@@ -132,7 +132,7 @@ The slot name for the table header cells is `"cell-header"`.
   </span>
   <span slot="cell" let:row let:cell>
     {#if cell.key === 'rule' && cell.value === 'Round robin'}
-      <Link inline href="https://en.wikipedia.org/wiki/Round-robin_DNS" target="_blank">{cell.value} <Launch16 /></Link>
+      <Link icon={Launch16} href="https://en.wikipedia.org/wiki/Round-robin_DNS" target="_blank">{cell.value}</Link>
     {:else}
       {cell.value}
     {/if}
@@ -438,6 +438,61 @@ The slot name for the table header cells is `"cell-header"`.
   ]}"
 />
 
+### Medium rows
+
+<DataTable size="medium"
+  headers="{[
+    { key: "name", value: "Name" },
+    { key: "protocol", value: "Protocol" },
+    { key: "port", value: "Port" },
+    { key: "rule", value: "Rule" }
+  ]}"
+  rows="{[
+    {
+      id: "a",
+      name: "Load Balancer 3",
+      protocol: "HTTP",
+      port: 3000,
+      rule: "Round robin"
+    },
+    {
+      id: "b",
+      name: "Load Balancer 1",
+      protocol: "HTTP",
+      port: 443,
+      rule: "Round robin"
+    },
+    {
+      id: "c",
+      name: "Load Balancer 2",
+      protocol: "HTTP",
+      port: 80,
+      rule: "DNS delegation"
+    },
+    {
+      id: "d",
+      name: "Load Balancer 6",
+      protocol: "HTTP",
+      port: 3000,
+      rule: "Round robin"
+    },
+    {
+      id: "e",
+      name: "Load Balancer 4",
+      protocol: "HTTP",
+      port: 443,
+      rule: "Round robin"
+    },
+    {
+      id: "f",
+      name: "Load Balancer 5",
+      protocol: "HTTP",
+      port: 80,
+      rule: "DNS delegation"
+    },
+  ]}"
+/>
+
 ### Short rows
 
 <DataTable size="short"

docs/src/pages/components/PasswordInput.svx

@@ -27,6 +27,10 @@ Set prop `type` to `"text"` to toggle password visibility.
 
 <PasswordInput light labelText="Password" placeholder="Enter password..." />
 
+### Inline
+
+<PasswordInput inline labelText="Password" placeholder="Enter password..." />
+
 ### Extra-large size
 
 <PasswordInput size="xl" labelText="Password" placeholder="Enter password..." />
@@ -39,6 +43,10 @@ Set prop `type` to `"text"` to toggle password visibility.
 
 <PasswordInput invalid invalidText="Incorrect user name or password." labelText="Password" placeholder="Enter password..." />
 
+### Warning state
+
+<PasswordInput warn warnText="Password has been reset." labelText="Password" placeholder="Enter password..." />
+
 ### Disabled state
 
 <PasswordInput disabled labelText="Password" placeholder="Enter password..." />

docs/src/pages/components/Search.svx

@@ -23,6 +23,10 @@ The "clear" event is dispatched when clicking the "X" button in the search input
 
 <Search value="Cloud functions" on:clear={() => console.log('clear')}/>
 
+### Expandable variant
+
+<Search expandable on:expand on:collapse />
+
 ### Light variant
 
 <Search light />
@@ -35,7 +39,7 @@ The "clear" event is dispatched when clicking the "X" button in the search input
 
 <Search size="sm" />
 
-### Disabled
+### Disabled state
 
 <Search disabled />
 

docs/src/pages/components/Select.svx

@@ -12,15 +12,17 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
 <Select labelText="Carbon theme" selected="g10" >
   <SelectItem value="white" text="White" />
   <SelectItem value="g10" text="Gray 10" />
+  <SelectItem value="g80" text="Gray 80" />
   <SelectItem value="g90" text="Gray 90" />
   <SelectItem value="g100" text="Gray 100" />
 </Select>
 
 ### Helper text
 
-<Select helperText="Carbon offers 4 themes (2 light, 2 dark)" labelText="Carbon theme" selected="g10" >
+<Select helperText="Carbon offers 4 themes (2 light, 3 dark)" labelText="Carbon theme" selected="g10" >
   <SelectItem value="white" text="White" />
   <SelectItem value="g10" text="Gray 10" />
+  <SelectItem value="g80" text="Gray 80" />
   <SelectItem value="g90" text="Gray 90" />
   <SelectItem value="g100" text="Gray 100" />
 </Select>
@@ -30,6 +32,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
 <Select hideLabel labelText="Carbon theme" selected="g10" >
   <SelectItem value="white" text="White" />
   <SelectItem value="g10" text="Gray 10" />
+  <SelectItem value="g80" text="Gray 80" />
   <SelectItem value="g90" text="Gray 90" />
   <SelectItem value="g100" text="Gray 100" />
 </Select>
@@ -43,6 +46,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
     <SelectItem value="g10" text="Gray 10" />
   </SelectItemGroup>
   <SelectItemGroup label="Dark theme">
+    <SelectItem value="g80" text="Gray 80" />
     <SelectItem value="g90" text="Gray 90" />
     <SelectItem value="g100" text="Gray 100" />
   </SelectItemGroup>
@@ -53,6 +57,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
 <Select light labelText="Carbon theme" selected="g10" >
   <SelectItem value="white" text="White" />
   <SelectItem value="g10" text="Gray 10" />
+  <SelectItem value="g80" text="Gray 80" />
   <SelectItem value="g90" text="Gray 90" />
   <SelectItem value="g100" text="Gray 100" />
 </Select>
@@ -62,6 +67,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
 <Select inline labelText="Carbon theme" selected="g10" >
   <SelectItem value="white" text="White" />
   <SelectItem value="g10" text="Gray 10" />
+  <SelectItem value="g80" text="Gray 80" />
   <SelectItem value="g90" text="Gray 90" />
   <SelectItem value="g100" text="Gray 100" />
 </Select>
@@ -71,6 +77,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
 <Select size="xl" labelText="Carbon theme" selected="g10" >
   <SelectItem value="white" text="White" />
   <SelectItem value="g10" text="Gray 10" />
+  <SelectItem value="g80" text="Gray 80" />
   <SelectItem value="g90" text="Gray 90" />
   <SelectItem value="g100" text="Gray 100" />
 </Select>
@@ -80,6 +87,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
 <Select size="sm" labelText="Carbon theme" selected="g10" >
   <SelectItem value="white" text="White" />
   <SelectItem value="g10" text="Gray 10" />
+  <SelectItem value="g80" text="Gray 80" />
   <SelectItem value="g90" text="Gray 90" />
   <SelectItem value="g100" text="Gray 100" />
 </Select>
@@ -89,6 +97,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
 <Select invalid invalidText="Theme must be a dark variant" labelText="Carbon theme" selected="g10" >
   <SelectItem value="white" text="White" />
   <SelectItem value="g10" text="Gray 10" />
+  <SelectItem value="g80" text="Gray 80" />
   <SelectItem value="g90" text="Gray 90" />
   <SelectItem value="g100" text="Gray 100" />
 </Select>
@@ -98,6 +107,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
 <Select warn warnText="The selected theme will not be persisted" labelText="Carbon theme" selected="g10" >
   <SelectItem value="white" text="White" />
   <SelectItem value="g10" text="Gray 10" />
+  <SelectItem value="g80" text="Gray 80" />
   <SelectItem value="g90" text="Gray 90" />
   <SelectItem value="g100" text="Gray 100" />
 </Select>
@@ -107,6 +117,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
 <Select disabled labelText="Carbon theme" selected="g10" >
   <SelectItem value="white" text="White" />
   <SelectItem value="g10" text="Gray 10" />
+  <SelectItem value="g80" text="Gray 80" />
   <SelectItem value="g90" text="Gray 90" />
   <SelectItem value="g100" text="Gray 100" />
 </Select>

docs/yarn.lock

@@ -837,16 +837,16 @@ caniuse-lite@^1.0.30001173, caniuse-lite@^1.0.30001178:
   integrity sha512-n8JVqXuZMVSPKiPiypjFtDTXc4jWIdjxull0f92WLo7e1MSi3uJ3NvveakSh/aCl1QKFAvIz3vIj0v+0K+FrXw==
 
 carbon-components-svelte@../:
-  version "0.32.2"
+  version "0.33.0"
   dependencies:
     carbon-icons-svelte "^10.27.0"
     clipboard-copy "3.2.0"
     flatpickr "4.6.9"
 
-carbon-components@10.33.0:
+carbon-components@10.34.0:
-  version "10.33.0"
+  version "10.34.0"
-  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.33.0.tgz#c573de233530270d172a2cae0faba5d1530725e5"
+  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.34.0.tgz#38a8bc4e03193e09459b22caf0fe2c72a64a63e8"
-  integrity sha512-u9eqP0tZTdyd4RzD5isK1LqTH+Lb+3jUtei7dkKXBK5sm+Xx8yP8l2koOZqzsFzaMGpeZOlO/3ajmDQ+LK6Gbw==
+  integrity sha512-KgWIFvJv5lg0puFsjXwIqv99ew8u1gUnrjN6/0vmyz2T/sJxGkDuiGAUlZsjmpsF+z2weK9pDu4cutjHYId2Sg==
   dependencies:
     "@carbon/telemetry" "0.0.0-alpha.6"
     flatpickr "4.6.1"

package.json

@@ -32,7 +32,7 @@
     "@rollup/plugin-node-resolve": "^11.1.1",
     "@tsconfig/svelte": "^1.0.10",
     "autoprefixer": "^10.2.4",
-    "carbon-components": "10.33.0",
+    "carbon-components": "10.34.0",
     "gh-pages": "^3.1.0",
     "husky": "^4.3.8",
     "lint-staged": "^10.5.3",

src/Button/Button.svelte

@@ -13,7 +13,7 @@
 
   /**
    * Specify the size of button
-   * @type {"default" | "field" | "small"}
+   * @type {"default" | "field" | "small" | "xl"}
    */
   export let size = "default";
 
@@ -100,12 +100,15 @@
       "bx--btn",
       size === "field" && "bx--btn--field",
       size === "small" && "bx--btn--sm",
+      size === "xl" && "bx--btn--xl",
       kind && `bx--btn--${kind}`,
       disabled && "bx--btn--disabled",
       hasIconOnly && "bx--btn--icon-only",
       hasIconOnly && "bx--tooltip__trigger",
       hasIconOnly && "bx--tooltip--a11y",
-      hasIconOnly && tooltipPosition && `bx--tooltip--${tooltipPosition}`,
+      hasIconOnly &&
+        tooltipPosition &&
+        `bx--btn--icon-only--${tooltipPosition}`,
       hasIconOnly &&
         tooltipAlignment &&
         `bx--tooltip--align-${tooltipAlignment}`,

src/CodeSnippet/CodeSnippet.svelte

@@ -179,11 +179,10 @@
       aria-label="{$$restProps['aria-label'] || copyLabel || 'code-snippet'}"
       class:bx--snippet-container="{true}"
     >
-      <code>
+      <pre
-        <pre bind:this="{ref}">
+        bind:this="{ref}">
-            <slot>{code}</slot>
+        <code><slot>{code}</slot></code>
       </pre>
-      </code>
     </div>
     {#if !hideCopyButton}
       <CopyButton

src/DataTable/DataTable.svelte

@@ -37,7 +37,7 @@
 
   /**
    * Set the size of the data table
-   * @type {"compact" | "short" | "tall"}
+   * @type {"compact" | "short" | "medium" | "tall"}
    */
   export let size = undefined;
 

src/DataTable/Table.svelte

@@ -1,7 +1,7 @@
 <script>
   /**
    * Set the size of the table
-   * @type {"compact" | "short" | "tall"}
+   * @type {"compact" | "short" | "medium" | "tall"}
    */
   export let size = undefined;
 
@@ -28,6 +28,7 @@
       class:bx--data-table--compact="{size === 'compact'}"
       class:bx--data-table--short="{size === 'short'}"
       class:bx--data-table--tall="{size === 'tall'}"
+      class:bx--data-table--md="{size === 'medium'}"
       class:bx--data-table--sort="{sortable}"
       class:bx--data-table--zebra="{zebra}"
       class:bx--data-table--static="{useStaticWidth}"
@@ -43,6 +44,7 @@
     class:bx--data-table--compact="{size === 'compact'}"
     class:bx--data-table--short="{size === 'short'}"
     class:bx--data-table--tall="{size === 'tall'}"
+    class:bx--data-table--md="{size === 'medium'}"
     class:bx--data-table--sort="{sortable}"
     class:bx--data-table--zebra="{zebra}"
     class:bx--data-table--static="{useStaticWidth}"

src/FileUploader/FileUploader.svelte

@@ -84,7 +84,7 @@
   on:mouseenter
   on:mouseleave
 >
-  <strong class:bx--file--label="{true}">{labelTitle}</strong>
+  <p class:bx--file--label="{true}">{labelTitle}</p>
   <p class:bx--label-description="{true}">{labelDescription}</p>
   <FileUploaderButton
     disableLabelChanges

src/Search/Search.svelte

@@ -1,8 +1,12 @@
 <script>
+  /**
+   * @event {any} expand
+   * @event {any} collapse
+   */
+
   /**
    * @deprecated this prop will be removed in the next major release
    * Use size="sm" instead
-   * @type {boolean} [small=false]
    */
   export let small = false;
 
@@ -15,40 +19,28 @@
   /** Specify the class name passed to the outer div element */
   export let searchClass = "";
 
-  /**
+  /** Set to `true` to display the skeleton state  */
-   * Set to `true` to display the skeleton state
-   * @type {boolean} [skeleton=false]
-   */
   export let skeleton = false;
 
-  /**
+  /** Set to `true` to enable the light variant */
-   * Set to `true` to enable the light variant
-   * @type {boolean} [light=false]
-   */
   export let light = false;
 
-  /**
+  /** Set to `true` to disable the search input */
-   * Set to `true` to disable the search input
-   * @type {boolean} [disabled=false]
-   */
   export let disabled = false;
 
-  /**
+  /** Set to `true` to enable the expandable variant */
-   * Specify the value of the search input
+  export let expandable = false;
-   * @type {string} [value=""]
+
-   */
+  /** Set to `true to expand the search input */
+  export let expanded = false;
+
+  /** Specify the value of the search input */
   export let value = "";
 
-  /**
+  /** Specify the `type` attribute of the search input */
-   * Specify the `type` attribute of the search input
-   * @type {string} [type="text"]
-   */
   export let type = "text";
 
-  /**
+  /** Specify the `placeholder` attribute of the search input */
-   * Specify the `placeholder` attribute of the search input
-   * @type {string} [placeholder="Search..."]
-   */
   export let placeholder = "Search...";
 
   /**
@@ -79,6 +71,11 @@
   import SearchSkeleton from "./SearchSkeleton.svelte";
 
   const dispatch = createEventDispatcher();
+
+  let searchRef = null;
+
+  $: if (expanded && ref) ref.focus();
+  $: dispatch(expanded ? "expand" : "collapse");
 </script>
 
 {#if skeleton}
@@ -101,9 +98,17 @@
     class:bx--search--sm="{size === 'sm' || small}"
     class:bx--search--lg="{size === 'lg'}"
     class:bx--search--xl="{size === 'xl'}"
+    class:bx--search--expandable="{expandable}"
+    class:bx--search--expanded="{expanded}"
     class="{searchClass}"
   >
-    <div class:bx--search-magnifier="{true}">
+    <div
+      bind:this="{searchRef}"
+      class:bx--search-magnifier="{true}"
+      on:click="{() => {
+        if (expandable) expanded = true;
+      }}"
+    >
       <Search16 class="bx--search-magnifier-icon" />
     </div>
     <label id="{id}-search" for="{id}" class:bx--label="{true}"
@@ -128,7 +133,15 @@
         value = target.value;
       }}"
       on:focus
+      on:focus="{() => {
+        if (expandable) expanded = true;
+      }}"
       on:blur
+      on:blur="{() => {
+        if (expanded && value.trim().length === 0) {
+          expanded = false;
+        }
+      }}"
       on:keydown
       on:keydown="{({ key }) => {
         if (key === 'Escape') {

src/TextInput/PasswordInput.svelte

@@ -59,6 +59,15 @@
   /** Specify the text for the invalid state */
   export let invalidText = "";
 
+  /** Set to `true` to indicate an warning state */
+  export let warn = false;
+
+  /** Specify the warning state text */
+  export let warnText = "";
+
+  /** Set to `true` to use inline version */
+  export let inline = false;
+
   /** Set an id for the input element */
   export let id = "ccs-" + Math.random().toString(36);
 
@@ -73,6 +82,7 @@
 
   import { getContext } from "svelte";
   import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
+  import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
   import View16 from "carbon-icons-svelte/lib/View16/View16.svelte";
   import ViewOff16 from "carbon-icons-svelte/lib/ViewOff16/ViewOff16.svelte";
 
@@ -80,39 +90,77 @@
 
   $: isFluid = !!ctx && ctx.isFluid;
   $: errorId = `error-${id}`;
+  $: warnId = `warn-${id}`;
 </script>
 
 <div
   class:bx--form-item="{true}"
   class:bx--text-input-wrapper="{true}"
   class:bx--password-input-wrapper="{!isFluid}"
+  class:bx--text-input-wrapper--light="{light}"
+  class:bx--text-input-wrapper--inline="{inline}"
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave
 >
-  {#if labelText}
+  {#if inline}
     <label
       for="{id}"
       class:bx--label="{true}"
       class:bx--visually-hidden="{hideLabel}"
       class:bx--label--disabled="{disabled}"
+      class:bx--label--inline="{inline}"
+      class:bx--label--inline--sm="{inline && size === 'sm'}"
+      class:bx--label--inline--xl="{inline && size === 'xl'}"
+    >
+      {labelText}
+    </label>
+    {#if !isFluid && helperText}
+      <div
+        class:bx--form__helper-text="{true}"
+        class:bx--form__helper-text--disabled="{disabled}"
+        class:bx--form__helper-text--inline="{inline}"
+      >
+        {helperText}
+      </div>
+    {/if}
+  {:else}
+    <label
+      for="{id}"
+      class:bx--label="{true}"
+      class:bx--visually-hidden="{hideLabel}"
+      class:bx--label--disabled="{disabled}"
+      class:bx--label--inline="{inline}"
+      class:bx--label--inline--sm="{inline && size === 'sm'}"
+      class:bx--label--inline--xl="{inline && size === 'xl'}"
     >
       {labelText}
     </label>
   {/if}
+  <div
+    class:bx--text-input__field-outer-wrapper="{true}"
+    class:bx--text-input__field-outer-wrapper--inline="{inline}"
+  >
     <div
       class:bx--text-input__field-wrapper="{true}"
+      class:bx--text-input__field-wrapper--warning="{warn}"
       data-invalid="{invalid || undefined}"
     >
       {#if invalid}
         <WarningFilled16 class="bx--text-input__invalid-icon" />
       {/if}
+      {#if !invalid && warn}
+        <WarningAltFilled16
+          class="bx--text-input__invalid-icon
+            bx--text-input__invalid-icon--warning"
+        />
+      {/if}
       <input
         bind:this="{ref}"
         data-invalid="{invalid || undefined}"
         aria-invalid="{invalid || undefined}"
-      aria-describedby="{invalid ? errorId : undefined}"
+        aria-describedby="{invalid ? errorId : warn ? warnId : undefined}"
         id="{id}"
         name="{name}"
         placeholder="{placeholder}"
@@ -123,6 +171,7 @@
         class:bx--password-input="{true}"
         class:bx--text-input--light="{light}"
         class:bx--text-input--invalid="{invalid}"
+        class:bx--text-input--warning="{warn}"
         {...$$restProps}
         class="{size && `bx--text-input--${size}`}"
         on:change
@@ -165,15 +214,22 @@
         {/if}
       </button>
     </div>
-  {#if !invalid && helperText}
+    {#if !isFluid && invalid}
+      <div class:bx--form-requirement="{true}" id="{errorId}">
+        {invalidText}
+      </div>
+    {/if}
+    {#if !invalid && !warn && !isFluid && !inline}
       <div
         class:bx--form__helper-text="{true}"
         class:bx--form__helper-text--disabled="{disabled}"
+        class:bx--form__helper-text--inline="{inline}"
       >
         {helperText}
       </div>
     {/if}
-  {#if invalid}
+    {#if !isFluid && !invalid && warn}
-    <div class:bx--form-requirement="{true}" id="{errorId}">{invalidText}</div>
+      <div class:bx--form-requirement="{true}" id="{warnId}">{warnText}</div>
     {/if}
   </div>
+</div>

src/UIShell/GlobalHeader/Header.svelte

@@ -35,6 +35,22 @@
   /** Obtain a reference to the HTML anchor element */
   export let ref = null;
 
+  /**
+   * Specify the icon from `carbon-icons-svelte` to render for the closed state
+   * Defaults to `Menu20`
+   * @type {typeof import("carbon-icons-svelte").CarbonIcon}
+   */
+  export let iconMenu = Menu20;
+
+  /**
+   * Specify the icon from `carbon-icons-svelte` to render for the opened state
+   * Defaults to `Close20`
+   * @type {typeof import("carbon-icons-svelte").CarbonIcon}
+   */
+  export let iconClose = Close20;
+
+  import Close20 from "carbon-icons-svelte/lib/Close20/Close20.svelte";
+  import Menu20 from "carbon-icons-svelte/lib/Menu20/Menu20.svelte";
   import { shouldRenderHamburgerMenu } from "../navStore";
   import HamburgerMenu from "../SideNav/HamburgerMenu.svelte";
 
@@ -52,7 +68,11 @@
 <header role="banner" aria-label="{ariaLabel}" class:bx--header="{true}">
   <slot name="skip-to-content" />
   {#if ($shouldRenderHamburgerMenu && winWidth < 1056) || persistentHamburgerMenu}
-    <HamburgerMenu bind:isOpen="{isSideNavOpen}" />
+    <HamburgerMenu
+      bind:isOpen="{isSideNavOpen}"
+      iconClose="{iconClose}"
+      iconMenu="{iconMenu}"
+    />
   {/if}
   <a
     href="{href}"

src/UIShell/GlobalHeader/HeaderActionSearch.svelte

@@ -15,7 +15,6 @@
   import { createEventDispatcher } from "svelte";
   import Close20 from "carbon-icons-svelte/lib/Close20";
   import Search20 from "carbon-icons-svelte/lib/Search20";
-  import { Icon } from "../../Icon";
   import searchStore from "../searchStore";
 
   const dispatch = createEventDispatcher();
@@ -96,7 +95,7 @@
         }
       }}"
     >
-      <Icon title="Search" tabindex="0" render="{Search20}" />
+      <svelte:component this="{Search20}" title="Search" tabindex="0" />
     </button>
     <input
       bind:this="{elInput}"
@@ -130,7 +129,7 @@
         }
       }}"
     >
-      <Icon title="Close" tabindex="0" render="{Close20}" />
+      <svelte:component this="{Close20}" title="Close" tabindex="0" />
     </button>
   </div>
 </div>

src/UIShell/SideNav/HamburgerMenu.svelte

@@ -8,18 +8,31 @@
   /** Set to `true` to toggle the open state */
   export let isOpen = false;
 
+  /**
+   * Specify the icon from `carbon-icons-svelte` to render for the closed state
+   * Defaults to `Menu20`
+   * @type {typeof import("carbon-icons-svelte").CarbonIcon}
+   */
+  export let iconMenu = Menu20;
+
+  /**
+   * Specify the icon from `carbon-icons-svelte` to render for the opened state
+   * Defaults to `Close20`
+   * @type {typeof import("carbon-icons-svelte").CarbonIcon}
+   */
+  export let iconClose = Close20;
+
   /** Obtain a reference to the HTML button element */
   export let ref = null;
 
   import Close20 from "carbon-icons-svelte/lib/Close20/Close20.svelte";
   import Menu20 from "carbon-icons-svelte/lib/Menu20/Menu20.svelte";
-  import { Icon } from "../../Icon";
 </script>
 
 <button
   bind:this="{ref}"
   type="button"
-  title="Open menu"
+  title="{ariaLabel}"
   aria-label="{ariaLabel}"
   class:bx--header__action="{true}"
   class:bx--header__menu-trigger="{true}"
@@ -28,8 +41,5 @@
   on:click
   on:click="{() => (isOpen = !isOpen)}"
 >
-  <Icon
+  <svelte:component this="{isOpen ? iconClose : iconMenu}" />
-    title="{isOpen ? 'Close' : 'Open Menu'}"
-    render="{isOpen ? Close20 : Menu20}"
-  />
 </button>

src/UIShell/SideNav/SideNav.svelte

@@ -1,4 +1,10 @@
 <script>
+  /**
+   * @event {any} open
+   * @event {any} close
+   * @event {any} click:overlay
+   */
+
   /** Set to `true` to use the fixed variant */
   export let fixed = false;
 
@@ -11,9 +17,13 @@
   /** Set to `true` to toggle the expanded state */
   export let isOpen = false;
 
-  import { onMount } from "svelte";
+  import { onMount, createEventDispatcher } from "svelte";
   import { shouldRenderHamburgerMenu } from "../navStore";
 
+  const dispatch = createEventDispatcher();
+
+  $: dispatch(isOpen ? "open" : "close");
+
   onMount(() => {
     shouldRenderHamburgerMenu.set(true);
     return () => shouldRenderHamburgerMenu.set(false);
@@ -23,6 +33,7 @@
 {#if !fixed}
   <div
     on:click="{() => {
+      dispatch('click:overlay');
       isOpen = false;
     }}"
     class:bx--side-nav__overlay="{true}"

src/UIShell/SideNav/SideNavLink.svelte

@@ -22,8 +22,6 @@
 
   /** Obtain a reference to the HTML anchor element */
   export let ref = null;
-
-  import Icon from "../../Icon/Icon.svelte";
 </script>
 
 <li class:bx--side-nav__item="{true}">
@@ -42,7 +40,7 @@
         class:bx--side-nav__icon="{true}"
         class:bx--side-nav__icon--small="{true}"
       >
-        <Icon render="{icon}" />
+        <svelte:component this="{icon}" />
       </div>
     {/if}
     <span class:bx--side-nav__link-text="{true}">{text}</span>

src/UIShell/SideNav/SideNavMenu.svelte

@@ -18,7 +18,6 @@
   export let ref = null;
 
   import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16/ChevronDown16.svelte";
-  import Icon from "../../Icon/Icon.svelte";
 </script>
 
 <li class:bx--side-nav__item="{true}" class:bx--side-nav__item--icon="{icon}">
@@ -35,7 +34,7 @@
   >
     {#if icon}
       <div class:bx--side-nav__icon="{true}">
-        <Icon render="{icon}" />
+        <svelte:component this="{icon}" />
       </div>
     {/if}
     <span class:bx--side-nav__submenu-title="{true}">{text}</span>
@@ -44,7 +43,7 @@
       class:bx--side-nav__icon--small="{true}"
       class:bx--side-nav__submenu-chevron="{true}"
     >
-      <Icon title="Open Menu" tabindex="0" render="{ChevronDown16}" />
+      <svelte:component this="{ChevronDown16}" title="Open Menu" tabindex="0" />
     </div>
   </button>
   <ul role="menu" class:bx--side-nav__menu="{true}">

types/Button/Button.d.ts

@@ -24,7 +24,7 @@ export interface ButtonProps
    * Specify the size of button
    * @default "default"
    */
-  size?: "default" | "field" | "small";
+  size?: "default" | "field" | "small" | "xl";
 
   /**
    * Set to `true` to enable the selected state for an icon-only, ghost button

types/DataTable/DataTable.d.ts

@@ -54,7 +54,7 @@ export interface DataTableProps
   /**
    * Set the size of the data table
    */
-  size?: "compact" | "short" | "tall";
+  size?: "compact" | "short" | "medium" | "tall";
 
   /**
    * Specify the title of the data table

types/DataTable/Table.d.ts

@@ -6,7 +6,7 @@ export interface TableProps
   /**
    * Set the size of the table
    */
-  size?: "compact" | "short" | "tall";
+  size?: "compact" | "short" | "medium" | "tall";
 
   /**
    * Set to `true` to use zebra styles

types/Search/Search.d.ts

@@ -37,6 +37,18 @@ export interface SearchProps {
    */
   disabled?: boolean;
 
+  /**
+   * Set to `true` to enable the expandable variant
+   * @default false
+   */
+  expandable?: boolean;
+
+  /**
+   * Set to `true to expand the search input
+   * @default false
+   */
+  expanded?: boolean;
+
   /**
    * Specify the value of the search input
    * @default ""
@@ -95,6 +107,8 @@ export interface SearchProps {
 export default class Search extends SvelteComponentTyped<
   SearchProps,
   {
+    expand: CustomEvent<any>;
+    collapse: CustomEvent<any>;
     click: WindowEventMap["click"];
     mouseover: WindowEventMap["mouseover"];
     mouseenter: WindowEventMap["mouseenter"];

types/TextInput/PasswordInput.d.ts

@@ -92,6 +92,24 @@ export interface PasswordInputProps
    */
   invalidText?: string;
 
+  /**
+   * Set to `true` to indicate an warning state
+   * @default false
+   */
+  warn?: boolean;
+
+  /**
+   * Specify the warning state text
+   * @default ""
+   */
+  warnText?: string;
+
+  /**
+   * Set to `true` to use inline version
+   * @default false
+   */
+  inline?: boolean;
+
   /**
    * Set an id for the input element
    * @default "ccs-" + Math.random().toString(36)

types/UIShell/GlobalHeader/Header.d.ts

@@ -48,6 +48,18 @@ export interface HeaderProps
    * @default null
    */
   ref?: null | HTMLAnchorElement;
+
+  /**
+   * Specify the icon from `carbon-icons-svelte` to render for the closed state
+   * Defaults to `Menu20`
+   */
+  iconMenu?: typeof import("carbon-icons-svelte").CarbonIcon;
+
+  /**
+   * Specify the icon from `carbon-icons-svelte` to render for the opened state
+   * Defaults to `Close20`
+   */
+  iconClose?: typeof import("carbon-icons-svelte").CarbonIcon;
 }
 
 export default class Header extends SvelteComponentTyped<

types/UIShell/SideNav/SideNav.d.ts

@@ -23,6 +23,10 @@ export interface SideNavProps
 
 export default class SideNav extends SvelteComponentTyped<
   SideNavProps,
-  {},
+  {
+    open: CustomEvent<any>;
+    close: CustomEvent<any>;
+    ["click:overlay"]: CustomEvent<any>;
+  },
   { default: {} }
 > {}

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.33.0:
+carbon-components@10.34.0:
-  version "10.33.0"
+  version "10.34.0"
-  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.33.0.tgz#c573de233530270d172a2cae0faba5d1530725e5"
+  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.34.0.tgz#38a8bc4e03193e09459b22caf0fe2c72a64a63e8"
-  integrity sha512-u9eqP0tZTdyd4RzD5isK1LqTH+Lb+3jUtei7dkKXBK5sm+Xx8yP8l2koOZqzsFzaMGpeZOlO/3ajmDQ+LK6Gbw==
+  integrity sha512-KgWIFvJv5lg0puFsjXwIqv99ew8u1gUnrjN6/0vmyz2T/sJxGkDuiGAUlZsjmpsF+z2weK9pDu4cutjHYId2Sg==
   dependencies:
     "@carbon/telemetry" "0.0.0-alpha.6"
     flatpickr "4.6.1"