Alignment with Carbon version 10.28 (#505)

* chore(deps-dev): remove @carbon/themes

* chore(deps-dev): bump devDependencies

* fix(tabs): forward click event to Tab

* feat(toggle): dispatch toggle event

* feat(tag): dispatch close event

* feat(tooltip-icon): make tooltipText slottable

* feat(dropdown): add hideLabel prop

* docs(select): add "Hidden label" example

* refactor(modal): use class directive

* feat(modal): dispatch transitionend event

* chore(deps-dev): upgrade carbon-components to 10.28.0-rc.0

* feat(date-picker): add warn state

* feat(tag): support small size variant

* fix(search): add semantic role

* feat(toolbar-search): add disabled state

* fix(composed-modal): add aria-label prop, update header semantic tags

* chore(deps-dev): upgrade carbon-components to v10.28

* docs(overflow-menu): add light variant example

* docs(link): document OutboundLink in Component API

* chore(tooltip-icon): rename slot to "tooltipText"

* docs(component-api): wrap code blocks to minimize width

* docs(aspect-ratio): remove inline outline style

* fix(tab): do not trigger focus when mounting

* docs(tabs): add reactive example

Closes #438

COMPONENT_INDEX.md

@@ -659,16 +659,16 @@ None.
 
 ### Events
 
-| Event name    | Type       | Detail |
+| Event name    | Type       | Detail                          |
-| :------------ | :--------- | :----- |
+| :------------ | :--------- | :------------------------------ |
-| click         | forwarded  | --     |
+| transitionend | dispatched | <code>{ open: boolean; }</code> |
-| mouseover     | forwarded  | --     |
+| click         | forwarded  | --                              |
-| mouseenter    | forwarded  | --     |
+| mouseover     | forwarded  | --                              |
-| mouseleave    | forwarded  | --     |
+| mouseenter    | forwarded  | --                              |
-| transitionend | forwarded  | --     |
+| mouseleave    | forwarded  | --                              |
-| submit        | dispatched | --     |
+| submit        | dispatched | --                              |
-| close         | dispatched | --     |
+| close         | dispatched | --                              |
-| open          | dispatched | --     |
+| open          | dispatched | --                              |
 
 ## `Content`
 
@@ -916,6 +916,8 @@ 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 invalid state text                     |
+| 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                     |
 | name            | <code>let</code> | No       | <code>string</code>                       | --                                               | Set a name for the input element                   |
 
 ### Slots
@@ -988,6 +990,7 @@ export interface DropdownItem {
 | warnText        | <code>let</code> | No       | <code>string</code>                         | <code>""</code>                                       | Specify the warning state text                |
 | helperText      | <code>let</code> | No       | <code>string</code>                         | <code>""</code>                                       | Specify the helper text                       |
 | label           | <code>let</code> | No       | <code>string</code>                         | --                                                    | Specify the list box label                    |
+| hideLabel       | <code>let</code> | No       | <code>boolean</code>                        | <code>false</code>                                    | Set to `true` to visually hide the label text |
 | translateWithId | <code>let</code> | No       | <code>(id: any) => string</code>            | --                                                    | Override the default translation ids          |
 | id              | <code>let</code> | No       | <code>string</code>                         | <code>"ccs-" + Math.random().toString(36)</code>      | Set an id for the list box component          |
 | name            | <code>let</code> | No       | <code>string</code>                         | --                                                    | Specify a name attribute for the list box     |
@@ -2040,17 +2043,18 @@ None.
 
 ### Events
 
-| Event name              | Type       | Detail |
+| Event name              | Type       | Detail                          |
-| :---------------------- | :--------- | :----- |
+| :---------------------- | :--------- | :------------------------------ |
-| keydown                 | forwarded  | --     |
+| transitionend           | dispatched | <code>{ open: boolean; }</code> |
-| click                   | forwarded  | --     |
+| keydown                 | forwarded  | --                              |
-| mouseover               | forwarded  | --     |
+| click                   | forwarded  | --                              |
-| mouseenter              | forwarded  | --     |
+| mouseover               | forwarded  | --                              |
-| mouseleave              | forwarded  | --     |
+| mouseenter              | forwarded  | --                              |
-| submit                  | dispatched | --     |
+| mouseleave              | forwarded  | --                              |
-| click:button--secondary | dispatched | --     |
+| submit                  | dispatched | --                              |
-| close                   | dispatched | --     |
+| click:button--secondary | dispatched | --                              |
-| open                    | dispatched | --     |
+| close                   | dispatched | --                              |
+| open                    | dispatched | --                              |
 
 ## `ModalBody`
 
@@ -3401,6 +3405,7 @@ None.
 
 | Event name | Type      | Detail |
 | :--------- | :-------- | :----- |
+| click      | forwarded | --     |
 | mouseover  | forwarded | --     |
 | mouseenter | forwarded | --     |
 | mouseleave | forwarded | --     |
@@ -3624,6 +3629,7 @@ None.
 | Prop name | Kind             | Reactive | Type                                                                                                                                                                                    | Default value                                    | Description                                            |
 | :-------- | :--------------- | :------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------ |
 | type      | <code>let</code> | No       | <code>"red" &#124; "magenta" &#124; "purple" &#124; "blue" &#124; "cyan" &#124; "teal" &#124; "green" &#124; "gray" &#124; "cool-gray" &#124; "warm-gray" &#124; "high-contrast"</code> | --                                               | Specify the type of tag                                |
+| size      | <code>let</code> | No       | <code>"sm" &#124; "default"</code>                                                                                                                                                      | <code>"default"</code>                           | --                                                     |
 | filter    | <code>let</code> | No       | <code>boolean</code>                                                                                                                                                                    | <code>false</code>                               | Set to `true` to use filterable variant                |
 | disabled  | <code>let</code> | No       | <code>boolean</code>                                                                                                                                                                    | <code>false</code>                               | Set to `true` to disable a filterable tag              |
 | skeleton  | <code>let</code> | No       | <code>boolean</code>                                                                                                                                                                    | <code>false</code>                               | Set to `true` to display the skeleton state            |
@@ -3639,18 +3645,21 @@ None.
 
 ### Events
 
-| Event name | Type      | Detail |
+| Event name | Type       | Detail |
-| :--------- | :-------- | :----- |
+| :--------- | :--------- | :----- |
-| click      | forwarded | --     |
+| click      | forwarded  | --     |
-| mouseover  | forwarded | --     |
+| mouseover  | forwarded  | --     |
-| mouseenter | forwarded | --     |
+| mouseenter | forwarded  | --     |
-| mouseleave | forwarded | --     |
+| mouseleave | forwarded  | --     |
+| close      | dispatched | --     |
 
 ## `TagSkeleton`
 
 ### Props
 
-None.
+| Prop name | Kind             | Reactive | Type                               | Default value          | Description |
+| :-------- | :--------------- | :------- | :--------------------------------- | ---------------------- | ----------- |
+| size      | <code>let</code> | No       | <code>"sm" &#124; "default"</code> | <code>"default"</code> | --          |
 
 ### Slots
 
@@ -3957,16 +3966,17 @@ None.
 
 ### Events
 
-| Event name | Type      | Detail |
+| Event name | Type       | Detail                             |
-| :--------- | :-------- | :----- |
+| :--------- | :--------- | :--------------------------------- |
-| click      | forwarded | --     |
+| toggle     | dispatched | <code>{ toggled: boolean; }</code> |
-| mouseover  | forwarded | --     |
+| click      | forwarded  | --                                 |
-| mouseenter | forwarded | --     |
+| mouseover  | forwarded  | --                                 |
-| mouseleave | forwarded | --     |
+| mouseenter | forwarded  | --                                 |
-| change     | forwarded | --     |
+| mouseleave | forwarded  | --                                 |
-| keyup      | forwarded | --     |
+| change     | forwarded  | --                                 |
-| focus      | forwarded | --     |
+| keyup      | forwarded  | --                                 |
-| blur       | forwarded | --     |
+| focus      | forwarded  | --                                 |
+| blur       | forwarded  | --                                 |
 
 ## `ToggleSkeleton`
 
@@ -4141,6 +4151,7 @@ None.
 | expanded   | <code>let</code> | Yes      | <code>boolean</code>                      | <code>false</code> | Set to `true` to expand the search bar        |
 | value      | <code>let</code> | Yes      | <code>number &#124; string</code>         | <code>""</code>    | Specify the value of the search input         |
 | persistent | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code> | Set to `true` to keep the search bar expanded |
+| disabled   | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code> | Set to `true` to disable the search bar       |
 | tabindex   | <code>let</code> | No       | <code>string</code>                       | <code>"0"</code>   | Specify the tabindex                          |
 
 ### Slots
@@ -4225,19 +4236,20 @@ None.
 
 ### Props
 
-| Prop name   | Kind             | Reactive | Type                                                            | Default value                                    | Description                                           |
+| Prop name   | Kind             | Reactive | Type                                                            | Default value                                    | Description                                                              |
-| :---------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------- |
+| :---------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------ |
-| ref         | <code>let</code> | Yes      | <code>null &#124; HTMLButtonElement</code>                      | <code>null</code>                                | Obtain a reference to the button HTML element         |
+| ref         | <code>let</code> | Yes      | <code>null &#124; HTMLButtonElement</code>                      | <code>null</code>                                | Obtain a reference to the button HTML element                            |
-| tooltipText | <code>let</code> | No       | <code>string</code>                                             | <code>""</code>                                  | Specify the tooltip text                              |
+| tooltipText | <code>let</code> | No       | <code>string</code>                                             | <code>""</code>                                  | Specify the tooltip text.<br />Alternatively, use the "tooltipText" slot |
-| align       | <code>let</code> | No       | <code>"start" &#124; "center" &#124; "end"</code>               | <code>"center"</code>                            | Set the alignment of the tooltip relative to the icon |
+| align       | <code>let</code> | No       | <code>"start" &#124; "center" &#124; "end"</code>               | <code>"center"</code>                            | Set the alignment of the tooltip relative to the icon                    |
-| direction   | <code>let</code> | No       | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code> | <code>"bottom"</code>                            | Set the direction of the tooltip relative to the icon |
+| direction   | <code>let</code> | No       | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code> | <code>"bottom"</code>                            | Set the direction of the tooltip relative to the icon                    |
-| id          | <code>let</code> | No       | <code>string</code>                                             | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the span element                        |
+| id          | <code>let</code> | No       | <code>string</code>                                             | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the span element                                           |
 
 ### Slots
 
-| Slot name | Default | Props | Fallback |
+| Slot name   | Default | Props | Fallback                   |
-| :-------- | :------ | :---- | :------- |
+| :---------- | :------ | :---- | :------------------------- |
-| --        | Yes     | --    | --       |
+| --          | Yes     | --    | --                         |
+| tooltipText | No      | --    | <code>{tooltipText}</code> |
 
 ### Events
 

docs/package.json

@@ -9,10 +9,9 @@
     "build:svite": "svite build"
   },
   "devDependencies": {
-    "@carbon/themes": "10.26.0",
     "@sveltech/routify": "^1.9.9",
     "autoprefixer": "^10.2.3",
-    "carbon-components": "10.27.0",
+    "carbon-components": "10.28.0",
     "carbon-components-svelte": "../",
     "clipboard-copy": "^3.1.0",
     "mdsvex": "^0.8.8",

docs/src/App.svelte

@@ -6,29 +6,12 @@
 <Router routes="{routes}" />
 
 <style lang="scss" global>
-  @import "@carbon/themes/scss/themes";
-
   $feature-flags: (
     enable-css-custom-properties: true,
+    ui-shell: true,
     grid-columns-16: true
   );
 
-  :root {
-    @include carbon--theme($carbon--theme--white, true);
-  }
-
-  :root[theme="g10"] {
-    @include carbon--theme($carbon--theme--g10, true);
-  }
-
-  :root[theme="g90"] {
-    @include carbon--theme($carbon--theme--g90, true);
-  }
-
-  :root[theme="g100"] {
-    @include carbon--theme($carbon--theme--g100, true);
-  }
-
   $css--font-face: true;
   $css--helpers: true;
   $css--body: true;
@@ -37,6 +20,22 @@
   $css--default-type: true;
   $css--plex: true;
 
+  // Use all Carbon themes
+  @import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss";
+
+  :root {
+    @include carbon--theme($carbon--theme--white, true);
+  }
+  :root[theme="g10"] {
+    @include carbon--theme($carbon--theme--g10, true);
+  }
+  :root[theme="g90"] {
+    @include carbon--theme($carbon--theme--g90, true);
+  }
+  :root[theme="g100"] {
+    @include carbon--theme($carbon--theme--g100, true);
+  }
+
   @import "carbon-components/scss/globals/scss/_css--reset.scss";
   @import "carbon-components/scss/globals/scss/_css--font-face.scss";
   @import "carbon-components/scss/globals/scss/_css--helpers.scss";

docs/src/COMPONENT_API.json

@@ -1713,11 +1713,15 @@
       ],
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
       "events": [
+        {
+          "type": "dispatched",
+          "name": "transitionend",
+          "detail": "{ open: boolean; }"
+        },
         { "type": "forwarded", "name": "click", "element": "div" },
         { "type": "forwarded", "name": "mouseover", "element": "div" },
         { "type": "forwarded", "name": "mouseenter", "element": "div" },
         { "type": "forwarded", "name": "mouseleave", "element": "div" },
-        { "type": "forwarded", "name": "transitionend", "element": "div" },
         { "type": "dispatched", "name": "submit" },
         { "type": "dispatched", "name": "close" },
         { "type": "dispatched", "name": "open" }
@@ -3065,6 +3069,16 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "disabled",
+          "kind": "let",
+          "description": "Set to `true` to disable the search bar",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "tabindex",
           "kind": "let",
@@ -3632,6 +3646,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": "name",
           "kind": "let",
@@ -3858,6 +3892,16 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "hideLabel",
+          "kind": "let",
+          "description": "Set to `true` to visually hide the label text",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "translateWithId",
           "kind": "let",
@@ -5608,6 +5652,11 @@
         }
       ],
       "events": [
+        {
+          "type": "dispatched",
+          "name": "transitionend",
+          "detail": "{ open: boolean; }"
+        },
         { "type": "forwarded", "name": "keydown", "element": "div" },
         { "type": "forwarded", "name": "click", "element": "div" },
         { "type": "forwarded", "name": "mouseover", "element": "div" },
@@ -7708,6 +7757,7 @@
         }
       ],
       "events": [
+        { "type": "forwarded", "name": "click", "element": "li" },
         { "type": "forwarded", "name": "mouseover", "element": "li" },
         { "type": "forwarded", "name": "mouseenter", "element": "li" },
         { "type": "forwarded", "name": "mouseleave", "element": "li" }
@@ -7763,7 +7813,17 @@
     {
       "moduleName": "TagSkeleton",
       "filePath": "/src/Tag/TagSkeleton.svelte",
-      "props": [],
+      "props": [
+        {
+          "name": "size",
+          "kind": "let",
+          "type": "\"sm\" | \"default\"",
+          "value": "\"default\"",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        }
+      ],
       "slots": [],
       "events": [
         { "type": "forwarded", "name": "click", "element": "span" },
@@ -7787,6 +7847,15 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "size",
+          "kind": "let",
+          "type": "\"sm\" | \"default\"",
+          "value": "\"default\"",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "filter",
           "kind": "let",
@@ -7858,7 +7927,8 @@
         { "type": "forwarded", "name": "click", "element": "TagSkeleton" },
         { "type": "forwarded", "name": "mouseover", "element": "TagSkeleton" },
         { "type": "forwarded", "name": "mouseenter", "element": "TagSkeleton" },
-        { "type": "forwarded", "name": "mouseleave", "element": "TagSkeleton" }
+        { "type": "forwarded", "name": "mouseleave", "element": "TagSkeleton" },
+        { "type": "dispatched", "name": "close" }
       ],
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "div | span" }
@@ -9244,6 +9314,11 @@
       ],
       "slots": [],
       "events": [
+        {
+          "type": "dispatched",
+          "name": "toggle",
+          "detail": "{ toggled: boolean; }"
+        },
         { "type": "forwarded", "name": "click", "element": "div" },
         { "type": "forwarded", "name": "mouseover", "element": "div" },
         { "type": "forwarded", "name": "mouseenter", "element": "div" },
@@ -9671,7 +9746,7 @@
         {
           "name": "tooltipText",
           "kind": "let",
-          "description": "Specify the tooltip text",
+          "description": "Specify the tooltip text.\nAlternatively, use the \"tooltipText\" slot",
           "type": "string",
           "value": "\"\"",
           "isFunction": false,
@@ -9719,7 +9794,15 @@
           "reactive": true
         }
       ],
-      "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
+      "slots": [
+        { "name": "__default__", "default": true, "slot_props": "{}" },
+        {
+          "name": "tooltipText",
+          "default": false,
+          "fallback": "{tooltipText}",
+          "slot_props": "{}"
+        }
+      ],
       "events": [
         { "type": "forwarded", "name": "click", "element": "button" },
         { "type": "forwarded", "name": "mouseover", "element": "button" },

docs/src/components/ComponentApi.svelte

@@ -203,4 +203,8 @@
     margin-top: var(--cds-layout-01);
     margin-bottom: var(--cds-layout-04);
   }
+
+  code {
+    word-break: break-word;
+  }
 </style>

docs/src/layouts/ComponentLayout.svelte

@@ -207,4 +207,8 @@
       display: block;
     }
   }
+
+  .preview-viewer > .bx--aspect-ratio {
+    outline: 1px solid var(--cds-interactive-04);
+  }
 </style>

docs/src/pages/components/AspectRatio.svx

@@ -9,43 +9,43 @@ Supported aspect ratios: `"2x1"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"9x16"`,
 
 ### Default (2x1)
 
-<AspectRatio style="outline: 1px solid var(--cds-interactive-04)">
+<AspectRatio>
   2x1
 </AspectRatio>
 
 ### Ratio 16x9
 
-<AspectRatio ratio="16x9" style="outline: 1px solid var(--cds-interactive-04)">
+<AspectRatio ratio="16x9">
   16x9
 </AspectRatio>
 
 ### Ratio 4x3
 
-<AspectRatio ratio="4x3" style="outline: 1px solid var(--cds-interactive-04)">
+<AspectRatio ratio="4x3">
   4x3
 </AspectRatio>
 
 ### Ratio 1x1
 
-<AspectRatio ratio="1x1" style="outline: 1px solid var(--cds-interactive-04)">
+<AspectRatio ratio="1x1">
   1x1
 </AspectRatio>
 
 ### Ratio 3x4
 
-<AspectRatio ratio="3x4" style="outline: 1px solid var(--cds-interactive-04)">
+<AspectRatio ratio="3x4">
   3x4
 </AspectRatio>
 
 ### Ratio 9x16
 
-<AspectRatio ratio="9x16" style="outline: 1px solid var(--cds-interactive-04)">
+<AspectRatio ratio="9x16">
   9x16
 </AspectRatio>
 
 ### Ratio 1x2
 
-<AspectRatio ratio="1x2" style="outline: 1px solid var(--cds-interactive-04)">
+<AspectRatio ratio="1x2">
   1x2
 </AspectRatio>
 

docs/src/pages/components/DatePicker.svx

@@ -43,6 +43,12 @@ components: ["DatePicker", "DatePickerInput", "DatePickerSkeleton"]
   <DatePickerInput invalid invalidText="Invalid date" labelText="Date of birth" placeholder="mm/dd/yyyy" />
 </DatePicker>
 
+### Warning state
+
+<DatePicker>
+  <DatePickerInput warn warnText="This info will not be stored" labelText="Date of birth" placeholder="mm/dd/yyyy" />
+</DatePicker>
+
 ### Disabled state
 
 <DatePicker>

docs/src/pages/components/Dropdown.svx

@@ -13,6 +13,12 @@ components: ["Dropdown", "DropdownSkeleton"]
   {id: "1", text: "Email"},
   {id: "2", text: "Fax"}]}" />
 
+### Hidden label
+
+<Dropdown hideLabel titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},
+  {id: "1", text: "Email"},
+  {id: "2", text: "Fax"}]}" />
+
 ### Format item display text
 
 Use the `itemToString` prop to format the display of individual items.

docs/src/pages/components/Link.svx

@@ -1,3 +1,7 @@
+---
+components: ["Link", "OutboundLink"]
+---
+
 <script>
   import { Link, OutboundLink } from "carbon-components-svelte";
   import Preview from "../../components/Preview.svelte";

docs/src/pages/components/OverflowMenu.svx

@@ -32,6 +32,14 @@ components: ["OverflowMenu", "OverflowMenuItem"]
   <OverflowMenuItem danger text="Delete service" />
 </OverflowMenu>
 
+### Light variant
+
+<OverflowMenu light>
+  <OverflowMenuItem text="Manage credentials" />
+  <OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" />
+  <OverflowMenuItem danger text="Delete service" />
+</OverflowMenu>
+
 ### Extra-large size
 
 <OverflowMenu size="xl">

docs/src/pages/components/Select.svx

@@ -16,6 +16,15 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
   <SelectItem value="g100" text="Gray 100" />
 </Select>
 
+### Hidden label
+
+<Select hideLabel labelText="Carbon theme" selected="g10" >
+  <SelectItem value="white" text="White" />
+  <SelectItem value="g10" text="Gray 10" />
+  <SelectItem value="g90" text="Gray 90" />
+  <SelectItem value="g100" text="Gray 100" />
+</Select>
+
 ### Item groups
 
 <Select labelText="Carbon theme" selected="g10" >

docs/src/pages/components/Tabs.svx

@@ -20,6 +20,10 @@ components: ["Tabs", "Tab", "TabContent", "TabsSkeleton"]
   </div>
 </Tabs>
 
+### Reactive example
+
+<FileSource src="/framed/Tabs/TabsReactive" />
+
 ### Container type
 
 <Tabs type="container">

docs/src/pages/components/Tag.svx

@@ -9,6 +9,10 @@
 
 <Tag>IBM Cloud</Tag>
 
+### Small size
+
+<Tag size="sm">IBM Cloud</Tag>
+
 ### Tag types
 
 <Tag type="red">red</Tag>
@@ -25,15 +29,18 @@
 
 ### Filterable
 
-<Tag filter on:click>Filterable</Tag>
+<Tag filter on:close>Filterable</Tag>
 
 ### Custom icon
 
 Note: rendering a custom icon cannnot be used with the filterable variant.
 
 <Tag icon={IbmCloud16}>IBM Cloud</Tag>
-<Tag icon={Document16} type="blue">API documentation</Tag>
 
 ### Skeleton
 
-<Tag skeleton />
+<Tag skeleton />
+
+### Skeleton (small)
+
+<Tag size="sm" skeleton />

docs/src/pages/components/Toggle.svx

@@ -19,6 +19,10 @@ components: ["Toggle", "ToggleSkeleton"]
 
 <FileSource src="/framed/Toggle/ToggleReactive" />
 
+### on:toggle event
+
+<Toggle labelText="Push notifications" on:toggle={e => console.log(e.detail)} />
+
 ### Custom labels
 
 <Toggle labelText="Push notifications" labelA="No" labelB="Yes" />

docs/src/pages/components/TooltipIcon.svx

@@ -16,4 +16,13 @@
 <TooltipIcon tooltipText="Top start" direction="top" align="start"><Filter20 /></TooltipIcon>
 <TooltipIcon tooltipText="Right end" direction="right" align="end"><Filter20 /></TooltipIcon>
 <TooltipIcon tooltipText="Bottom start" direction="bottom" align="start"><Filter20 /></TooltipIcon>
-<TooltipIcon tooltipText="Left start" direction="left" align="start"><Filter20 /></TooltipIcon>
+<TooltipIcon tooltipText="Left start" direction="left" align="start"><Filter20 /></TooltipIcon>
+
+### Custom tooltip text
+
+Use the "text" slot to customize the tooltip text.
+
+<TooltipIcon>
+  <span slot="tooltipText" style="color: red">Carbon is an open source design system by IBM.</span>
+  <Carbon24 />
+</TooltipIcon>

docs/src/pages/framed/Modal/ComposedModal.svelte

@@ -11,7 +11,7 @@
 </script>
 
 <ComposedModal open>
-  <ModalHeader title="Confirm changes" />
+  <ModalHeader label="Changes" title="Confirm changes" />
   <ModalBody hasForm>
     <Checkbox labelText="I have reviewed the changes" bind:checked />
   </ModalBody>

docs/src/pages/framed/Tabs/TabsReactive.svelte

@@ -0,0 +1,36 @@
+<script>
+  import { Tabs, Tab, TabContent, Button } from "carbon-components-svelte";
+
+  let selected = 0;
+</script>
+
+<Tabs bind:selected>
+  <Tab label="Tab label 1" />
+  <Tab label="Tab label 2" />
+  <Tab label="Tab label 3" />
+  <div slot="content">
+    <TabContent>Content 1</TabContent>
+    <TabContent>Content 2</TabContent>
+    <TabContent>Content 3</TabContent>
+  </div>
+</Tabs>
+
+<div>
+  <h4>Selected index: {selected}</h4>
+</div>
+
+<div>
+  <Button
+    size="small"
+    disabled="{selected === 1}"
+    on:click="{() => (selected = 1)}"
+  >
+    Set index to 1
+  </Button>
+</div>
+
+<style>
+  div {
+    margin-top: var(--cds-spacing-05);
+  }
+</style>

docs/yarn.lock

@@ -119,21 +119,6 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
-"@carbon/colors@^10.19.0":
-  version "10.19.0"
-  resolved "https://registry.npmjs.org/@carbon/colors/-/colors-10.19.0.tgz#b3fe4b8302f5a0d8450d4fe9af36eed40c035426"
-  integrity sha512-LrlxOuIrpWQmn8VmSu0VwuT4hRiXmSOtt9Yjs5OKEUuSIxADZFMpY+fJIvMu7q69Y4XeV6XNYrJpIExOfb62iw==
-
-"@carbon/import-once@^10.5.0":
-  version "10.5.0"
-  resolved "https://registry.npmjs.org/@carbon/import-once/-/import-once-10.5.0.tgz#9a84b50a761aa561ae6600a6c34b9955d97b3fd8"
-  integrity sha512-OlyJpA5wJ9XNv/FAogN4TGhwmrdyVYeoJ/ARkcmbdWiXwq4OTCVki9MUlV779+HYseLlXBxtlA1No3/R4Sds0g==
-
-"@carbon/layout@^10.17.0":
-  version "10.17.0"
-  resolved "https://registry.npmjs.org/@carbon/layout/-/layout-10.17.0.tgz#de2b80673c0ee13c451adf7060e63b117a87bc30"
-  integrity sha512-FS198XBh0dxfjU2GJ35b85gQbnuNFSK8IcpSBsgX7KKSIktwpPy0WV40EGQoZD/qFPIJpzZRngkJWD+d6vhf7w==
-
 "@carbon/telemetry@0.0.0-alpha.6":
   version "0.0.0-alpha.6"
   resolved "https://registry.npmjs.org/@carbon/telemetry/-/telemetry-0.0.0-alpha.6.tgz#1d11e64f310e98f32c3db0c55f02e047f2398087"
@@ -150,24 +135,6 @@
     winston "^3.3.3"
     yargs "^16.1.1"
 
-"@carbon/themes@10.26.0":
-  version "10.26.0"
-  resolved "https://registry.npmjs.org/@carbon/themes/-/themes-10.26.0.tgz#61720c0e51ebe6a1121e22d0f764b0d55cf8533d"
-  integrity sha512-8S/S3S9l+7lbxGpbz81eoRxOYtloFTMPBZtcOmfUE1bwX3y31hhxc+4hrTCqdS0LQQSDvGebfYxiF7bfiVRFRg==
-  dependencies:
-    "@carbon/colors" "^10.19.0"
-    "@carbon/layout" "^10.17.0"
-    "@carbon/type" "^10.20.0"
-    color "^3.1.2"
-
-"@carbon/type@^10.20.0":
-  version "10.20.0"
-  resolved "https://registry.npmjs.org/@carbon/type/-/type-10.20.0.tgz#cea815adb8edceb98b4f7111d82ce6aa6ac59a96"
-  integrity sha512-F12I0oSR9CwFavdO357+a+2S7bGK4V3iaT5F89WNBR6RyV6jSTVq02rqWaRtmDK7Axy0dH/8Dxbq/xnLynFb6g==
-  dependencies:
-    "@carbon/import-once" "^10.5.0"
-    "@carbon/layout" "^10.17.0"
-
 "@dabh/diagnostics@^2.0.2":
   version "2.0.2"
   resolved "https://registry.npmjs.org/@dabh/diagnostics/-/diagnostics-2.0.2.tgz#290d08f7b381b8f94607dc8f471a12c675f9db31"
@@ -870,15 +837,15 @@ caniuse-lite@^1.0.30001173, caniuse-lite@^1.0.30001178:
   integrity sha512-n8JVqXuZMVSPKiPiypjFtDTXc4jWIdjxull0f92WLo7e1MSi3uJ3NvveakSh/aCl1QKFAvIz3vIj0v+0K+FrXw==
 
 carbon-components-svelte@../:
-  version "0.26.0"
+  version "0.27.0"
   dependencies:
     carbon-icons-svelte "^10.21.0"
     flatpickr "4.6.9"
 
-carbon-components@10.27.0:
+carbon-components@10.28.0:
-  version "10.27.0"
+  version "10.28.0"
-  resolved "https://registry.npmjs.org/carbon-components/-/carbon-components-10.27.0.tgz#b984ee1b87371a64ecd041853993ffc69c9191a0"
+  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.28.0.tgz#c4d2b23df2559cf3b0226867c45e2e84e0af7c4e"
-  integrity sha512-kDW3ezjfqxTydIMLZ+pTxA3oWsmhET330NTVe47hXeCRsoZ000tq0ZwGbbliSjlW2wY4s5nKxWkMj0b+dkeFyQ==
+  integrity sha512-bFsyngr625zc/t2gl4BPFYl0/ed4q38rrPihQxBXHhLAdeZNyy8xyOQlbh1PEQbTu47H/s/bxVo6QiFm/VmLZA==
   dependencies:
     "@carbon/telemetry" "0.0.0-alpha.6"
     flatpickr "4.6.1"
@@ -1052,7 +1019,7 @@ color-name@^1.0.0, color-name@~1.1.4:
   resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
-color-string@^1.5.2, color-string@^1.5.4:
+color-string@^1.5.2:
   version "1.5.4"
   resolved "https://registry.npmjs.org/color-string/-/color-string-1.5.4.tgz#dd51cd25cfee953d138fe4002372cc3d0e504cb6"
   integrity sha512-57yF5yt8Xa3czSEW1jfQDE79Idk0+AkN/4KWad6tbdxUmAs3MvjxlWSWD4deYytcRfoZ9nhKyFl1kj5tBvidbw==
@@ -1068,14 +1035,6 @@ color@3.0.x:
     color-convert "^1.9.1"
     color-string "^1.5.2"
 
-color@^3.1.2:
-  version "3.1.3"
-  resolved "https://registry.npmjs.org/color/-/color-3.1.3.tgz#ca67fb4e7b97d611dcde39eceed422067d91596e"
-  integrity sha512-xgXAcTHa2HeFCGLE9Xs/R82hujGtu9Jd9x4NW3T34+OMs7VoPsjwzRczKHvTAHeJwWFwX5j15+MgAppE8ztObQ==
-  dependencies:
-    color-convert "^1.9.1"
-    color-string "^1.5.4"
-
 colorette@^1.2.1:
   version "1.2.1"
   resolved "https://registry.npmjs.org/colorette/-/colorette-1.2.1.tgz#4d0b921325c14faf92633086a536db6e89564b1b"

package.json

@@ -25,12 +25,11 @@
     "flatpickr": "4.6.9"
   },
   "devDependencies": {
-    "@carbon/themes": "^10.26.0",
+    "@rollup/plugin-commonjs": "^17.1.0",
-    "@rollup/plugin-commonjs": "^16.0.0",
+    "@rollup/plugin-node-resolve": "^11.1.1",
-    "@rollup/plugin-node-resolve": "^10.0.0",
     "@tsconfig/svelte": "^1.0.10",
-    "autoprefixer": "^10.2.3",
+    "autoprefixer": "^10.2.4",
-    "carbon-components": "10.27.0",
+    "carbon-components": "10.28.0",
     "gh-pages": "^3.1.0",
     "husky": "^4.3.8",
     "lint-staged": "^10.5.3",
@@ -38,13 +37,13 @@
     "postcss": "^8.2.4",
     "prettier": "^2.2.1",
     "prettier-plugin-svelte": "^2.1.1",
-    "rollup": "^2.38.0",
+    "rollup": "^2.38.4",
     "rollup-plugin-svelte": "^7.1.0",
     "rollup-plugin-terser": "^7.0.2",
-    "sass": "^1.32.5",
+    "sass": "^1.32.6",
     "sveld": "0.3.0",
-    "svelte": "^3.32.0",
+    "svelte": "^3.32.1",
-    "svelte-check": "^1.1.28",
+    "svelte-check": "^1.1.32",
     "typescript": "^4.1.3"
   },
   "husky": {

src/ComposedModal/ComposedModal.svelte

@@ -1,4 +1,8 @@
 <script>
+  /**
+   * @event {{ open: boolean; }} transitionend
+   */
+
   /**
    * Set the size of the composed modal
    * @type {"xs" | "sm" | "lg"}
@@ -34,8 +38,10 @@
     afterUpdate,
     onDestroy,
   } from "svelte";
+  import { writable } from "svelte/store";
 
   const dispatch = createEventDispatcher();
+  const label = writable(undefined);
 
   let buttonRef = null;
   let innerModal = null;
@@ -51,6 +57,9 @@
     declareRef: (ref) => {
       buttonRef = ref;
     },
+    updateLabel: (value) => {
+      label.set(value);
+    },
   });
 
   function focus(element) {
@@ -102,8 +111,11 @@
   on:mouseover
   on:mouseenter
   on:mouseleave
-  on:transitionend
+  on:transitionend="{({ propertyName, currentTarget }) => {
-  on:transitionend="{({ currentTarget }) => {
+    if (propertyName === 'transform') {
+      dispatch('transitionend', { open });
+    }
+
     if (didOpen) {
       focus(currentTarget);
       didOpen = false;
@@ -112,6 +124,9 @@
 >
   <div
     bind:this="{innerModal}"
+    role="dialog"
+    aria-modal="true"
+    aria-label="{$$props['aria-label'] || $label || undefined}"
     class:bx--modal-container="{true}"
     class:bx--modal-container--xs="{size === 'xs'}"
     class:bx--modal-container--sm="{size === 'sm'}"

src/ComposedModal/ModalHeader.svelte

@@ -23,27 +23,29 @@
   import { getContext } from "svelte";
   import Close20 from "carbon-icons-svelte/lib/Close20/Close20.svelte";
 
-  const { closeModal } = getContext("ComposedModal");
+  const { closeModal, updateLabel } = getContext("ComposedModal");
+
+  $: updateLabel(label);
 </script>
 
 <div class:bx--modal-header="{true}" {...$$restProps}>
   {#if label}
-    <p
+    <h2
       class:bx--modal-header__label="{true}"
       class:bx--type-delta="{true}"
       class="{labelClass}"
     >
       {label}
-    </p>
+    </h2>
   {/if}
   {#if title}
-    <p
+    <h3
       class:bx--modal-header__heading="{true}"
       class:bx--type-beta="{true}"
       class="{titleClass}"
     >
       {title}
-    </p>
+    </h3>
   {/if}
   <slot />
   <button

src/DataTable/ToolbarSearch.svelte

@@ -11,6 +11,9 @@
   /** Set to `true` to keep the search bar expanded */
   export let persistent = false;
 
+  /** Set to `true` to disable the search bar */
+  export let disabled = false;
+
   /** Specify the tabindex */
   export let tabindex = "0";
 
@@ -21,10 +24,10 @@
   export let ref = null;
 
   import { tick } from "svelte";
-  import { Search } from "../Search";
+  import Search from "../Search/Search.svelte";
 
   async function expandSearch() {
-    if (persistent || expanded) return;
+    if (disabled || persistent || expanded) return;
     expanded = true;
     await tick();
     ref.focus();
@@ -32,17 +35,19 @@
 </script>
 
 <div
-  tabindex="{expanded ? '-1' : tabindex}"
+  tabindex="{expanded || disabled ? '-1' : tabindex}"
   class:bx--toolbar-action="{true}"
   class:bx--toolbar-search-container-active="{expanded}"
   class:bx--toolbar-search-container-expandable="{!persistent}"
   class:bx--toolbar-search-container-persistent="{persistent}"
+  class:bx--toolbar-search-container-disabled="{disabled}"
   on:click="{expandSearch}"
   on:focus="{expandSearch}"
 >
   <Search
     size="sm"
     tabindex="{expanded ? tabindex : '-1'}"
+    disabled="{disabled}"
     {...$$restProps}
     bind:ref
     bind:value

src/DatePicker/DatePickerInput.svelte

@@ -35,6 +35,12 @@
   /** Specify the invalid state text */
   export let invalidText = "";
 
+  /** Set to `true` to indicate an warning state */
+  export let warn = false;
+
+  /** Specify the warning state text */
+  export let warnText = "";
+
   /**
    * Set a name for the input element
    * @type {string}
@@ -45,7 +51,9 @@
   export let ref = null;
 
   import { getContext, onMount } from "svelte";
-  import Calendar16 from "carbon-icons-svelte/lib/Calendar16";
+  import Calendar16 from "carbon-icons-svelte/lib/Calendar16/Calendar16.svelte";
+  import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
+  import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
 
   const {
     range,
@@ -81,7 +89,11 @@
       {labelText}
     </label>
   {/if}
-  <div class:bx--date-picker-input__wrapper="{true}">
+  <div
+    class:bx--date-picker-input__wrapper="{true}"
+    class:bx--date-picker-input__wrapper--invalid="{invalid}"
+    class:bx--date-picker-input__wrapper--warn="{warn}"
+  >
     <input
       bind:this="{ref}"
       data-invalid="{invalid || undefined}"
@@ -93,6 +105,7 @@
       pattern="{pattern}"
       disabled="{disabled}"
       class:bx--date-picker__input="{true}"
+      class:bx--date-picker__input--invalid="{invalid}"
       class="{size && `bx--date-picker__input--${size}`}"
       on:input
       on:input="{({ target }) => {
@@ -112,6 +125,18 @@
         blurInput(relatedTarget);
       }}"
     />
+    {#if !$hasCalendar}
+      {#if invalid}
+        <WarningFilled16
+          class="bx--date-picker__icon bx--date-picker__icon--invalid"
+        />
+      {/if}
+      {#if !invalid && warn}
+        <WarningAltFilled16
+          class="bx--date-picker__icon bx--date-picker__icon--warn"
+        />
+      {/if}
+    {/if}
     {#if $hasCalendar}
       <Calendar16
         role="img"
@@ -125,4 +150,7 @@
   {#if invalid}
     <div class:bx--form-requirement="{true}">{invalidText}</div>
   {/if}
+  {#if !invalid && warn}
+    <div class:bx--form-requirement="{true}">{warnText}</div>
+  {/if}
 </div>

src/Dropdown/Dropdown.svelte

@@ -69,6 +69,9 @@
    */
   export let label = undefined;
 
+  /** Set to `true` to visually hide the label text */
+  export let hideLabel = false;
+
   /**
    * Override the default translation ids
    * @type {(id: any) => string}
@@ -145,6 +148,7 @@
       for="{id}"
       class:bx--label="{true}"
       class:bx--label--disabled="{disabled}"
+      class:bx--visually-hidden="{hideLabel}"
     >
       {titleText}
     </label>

src/Modal/Modal.svelte

@@ -1,4 +1,8 @@
 <script>
+  /**
+   * @event {{ open: boolean; }} transitionend
+   */
+
   /**
    * Set the size of the modal
    * @type {"xs" | "sm" | "lg"}
@@ -151,6 +155,11 @@
   on:mouseover
   on:mouseenter
   on:mouseleave
+  on:transitionend="{(e) => {
+    if (e.propertyName === 'transform') {
+      dispatch('transitionend', { open });
+    }
+  }}"
 >
   <div
     bind:this="{innerModal}"
@@ -174,7 +183,7 @@
           type="button"
           aria-label="{iconDescription}"
           title="{iconDescription}"
-          class="bx--modal-close"
+          class:bx--modal-close="{true}"
           on:click="{() => {
             open = false;
           }}"

src/Search/Search.svelte

@@ -90,6 +90,8 @@
   />
 {:else}
   <div
+    role="search"
+    aria-labelledby="{id}-search"
     class:bx--search="{true}"
     class:bx--search--light="{light}"
     class:bx--search--disabled="{disabled}"
@@ -99,7 +101,9 @@
     {...$$restProps}
   >
     <Search16 class="bx--search-magnifier" />
-    <label for="{id}" class:bx--label="{true}">{labelText}</label>
+    <label id="{id}-search" for="{id}" class:bx--label="{true}"
+      >{labelText}</label
+    >
     <!-- svelte-ignore a11y-autofocus -->
     <input
       bind:this="{ref}"

src/Tabs/Tab.svelte

@@ -20,16 +20,27 @@
   /** Obtain a reference to the anchor HTML element */
   export let ref = null;
 
-  import { getContext } from "svelte";
+  import { onMount, afterUpdate, getContext, tick } from "svelte";
 
   const { selectedTab, add, update, change } = getContext("Tabs");
 
   add({ id, label, disabled });
 
+  let didMount = false;
+
   $: selected = $selectedTab === id;
-  $: if (selected && ref) {
+
-    ref.focus();
+  onMount(() => {
-  }
+    tick().then(() => {
+      didMount = true;
+    });
+  });
+
+  afterUpdate(() => {
+    if (didMount && selected && ref) {
+      ref.focus();
+    }
+  });
 </script>
 
 <li
@@ -39,6 +50,7 @@
   class:bx--tabs__nav-item--disabled="{disabled}"
   class:bx--tabs__nav-item--selected="{selected}"
   {...$$restProps}
+  on:click|preventDefault
   on:click|preventDefault="{() => {
     if (!disabled) {
       update(id);

src/Tag/Tag.svelte

@@ -7,6 +7,9 @@
    */
   export let type = undefined;
 
+  /** @type {"sm" | "default"} */
+  export let size = "default";
+
   /** Set to `true` to use filterable variant */
   export let filter = false;
 
@@ -30,10 +33,15 @@
 
   import Close16 from "carbon-icons-svelte/lib/Close16/Close16.svelte";
   import TagSkeleton from "./TagSkeleton.svelte";
+
+  import { createEventDispatcher } from "svelte";
+
+  const dispatch = createEventDispatcher();
 </script>
 
 {#if skeleton}
   <TagSkeleton
+    size="{size}"
     {...$$restProps}
     on:click
     on:mouseover
@@ -48,6 +56,7 @@
       class:bx--tag="{true}"
       class:bx--tag--disabled="{disabled}"
       class:bx--tag--filter="{filter}"
+      class:bx--tag--sm="{size === 'sm'}"
       class:bx--tag--red="{type === 'red'}"
       class:bx--tag--magenta="{type === 'magenta'}"
       class:bx--tag--purple="{type === 'purple'}"
@@ -70,6 +79,9 @@
         disabled="{disabled}"
         title="{title}"
         on:click|stopPropagation
+        on:click|stopPropagation="{() => {
+          dispatch('close');
+        }}"
         on:mouseover
         on:mouseenter
         on:mouseleave
@@ -82,6 +94,7 @@
       id="{id}"
       class:bx--tag="{true}"
       class:bx--tag--disabled="{disabled}"
+      class:bx--tag--sm="{size === 'sm'}"
       class:bx--tag--red="{type === 'red'}"
       class:bx--tag--magenta="{type === 'magenta'}"
       class:bx--tag--purple="{type === 'purple'}"

src/Tag/TagSkeleton.svelte

@@ -1,5 +1,11 @@
+<script>
+  /** @type {"sm" | "default"} */
+  export let size = "default";
+</script>
+
 <span
   class:bx--tag="{true}"
+  class:bx--tag--sm="{size === 'sm'}"
   class:bx--skeleton="{true}"
   {...$$restProps}
   on:click

src/Toggle/Toggle.svelte

@@ -1,4 +1,8 @@
 <script>
+  /**
+   * @event {{ toggled: boolean; }} toggle
+   */
+
   /**
    * Specify the toggle size
    * @type {"default" | "sm"}
@@ -28,6 +32,12 @@
    * @type {string}
    */
   export let name = undefined;
+
+  import { createEventDispatcher } from "svelte";
+
+  const dispatch = createEventDispatcher();
+
+  $: dispatch("toggle", { toggled });
 </script>
 
 <div

src/TooltipIcon/TooltipIcon.svelte

@@ -1,5 +1,8 @@
 <script>
-  /** Specify the tooltip text */
+  /**
+   * Specify the tooltip text.
+   * Alternatively, use the "tooltipText" slot
+   */
   export let tooltipText = "";
 
   /**
@@ -56,6 +59,8 @@
     hidden = false;
   }}"
 >
-  <span id="{id}" class:bx--assistive-text="{true}">{tooltipText}</span>
+  <span id="{id}" class:bx--assistive-text="{true}">
+    <slot name="tooltipText">{tooltipText}</slot>
+  </span>
   <slot />
 </button>

tests/Tag.test.svelte

@@ -27,7 +27,7 @@
 
 <Tag type="high-contrast">high-contrast</Tag>
 
-<Tag filter on:click>Filterable</Tag>
+<Tag filter on:click on:close>Filterable</Tag>
 
 <Tag icon="{Add16}">Custom icon</Tag>
 

tests/Toggle.test.svelte

@@ -4,7 +4,13 @@
 
 <Toggle labelText="Push notifications" />
 
-<Toggle labelText="Push notifications" toggled />
+<Toggle
+  labelText="Push notifications"
+  toggled
+  on:toggle="{(e) => {
+    console.log(e.detail.toggled);
+  }}"
+/>
 
 <Toggle labelText="Push notifications" labelA="No" labelB="Yes" />
 

tests/TooltipIcon.test.svelte

@@ -23,3 +23,10 @@
 <TooltipIcon tooltipText="Left start" direction="left" align="start">
   <Filter20 />
 </TooltipIcon>
+
+<TooltipIcon>
+  <span slot="text" style="color: red"
+    >Carbon is an open source design system by IBM.</span
+  >
+  <Carbon24 />
+</TooltipIcon>

tsconfig.json

@@ -1 +1 @@
-{ "extends": "@tsconfig/svelte/tsconfig.json" }
+{ "extends": "@tsconfig/svelte" }

types/ComposedModal/ComposedModal.d.ts

@@ -49,11 +49,11 @@ export default class ComposedModal {
     default: {};
   };
 
+  $on(eventname: "transitionend", cb: (event: CustomEvent<{ open: boolean }>) => void): () => void;
   $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
   $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
   $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
   $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
-  $on(eventname: "transitionend", cb: (event: WindowEventMap["transitionend"]) => void): () => void;
   $on(eventname: "submit", cb: (event: CustomEvent<any>) => void): () => void;
   $on(eventname: "close", cb: (event: CustomEvent<any>) => void): () => void;
   $on(eventname: "open", cb: (event: CustomEvent<any>) => void): () => void;

types/DataTable/ToolbarSearch.d.ts

@@ -19,6 +19,12 @@ export interface ToolbarSearchProps {
    */
   persistent?: boolean;
 
+  /**
+   * Set to `true` to disable the search bar
+   * @default false
+   */
+  disabled?: boolean;
+
   /**
    * Specify the tabindex
    * @default "0"

types/DatePicker/DatePickerInput.d.ts

@@ -66,6 +66,18 @@ export interface DatePickerInputProps extends svelte.JSX.HTMLAttributes<HTMLElem
    */
   invalidText?: string;
 
+  /**
+   * Set to `true` to indicate an warning state
+   * @default false
+   */
+  warn?: boolean;
+
+  /**
+   * Specify the warning state text
+   * @default ""
+   */
+  warnText?: string;
+
   /**
    * Set a name for the input element
    */

types/Dropdown/Dropdown.d.ts

@@ -104,6 +104,12 @@ export interface DropdownProps extends svelte.JSX.HTMLAttributes<HTMLElementTagN
    */
   label?: string;
 
+  /**
+   * Set to `true` to visually hide the label text
+   * @default false
+   */
+  hideLabel?: boolean;
+
   /**
    * Override the default translation ids
    */

types/Modal/Modal.d.ts

@@ -120,6 +120,7 @@ export default class Modal {
     label: {};
   };
 
+  $on(eventname: "transitionend", cb: (event: CustomEvent<{ open: boolean }>) => void): () => void;
   $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
   $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
   $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;

types/Tabs/Tab.d.ts

@@ -45,6 +45,7 @@ export default class Tab {
     default: {};
   };
 
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
   $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
   $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
   $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;

types/Tag/Tag.d.ts

@@ -19,6 +19,11 @@ export interface TagProps
     | "warm-gray"
     | "high-contrast";
 
+  /**
+   * @default "default"
+   */
+  size?: "sm" | "default";
+
   /**
    * Set to `true` to use filterable variant
    * @default false
@@ -65,5 +70,6 @@ export default class Tag {
   $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
   $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
   $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: "close", cb: (event: CustomEvent<any>) => void): () => void;
   $on(eventname: string, cb: (event: Event) => void): () => void;
 }

types/Tag/TagSkeleton.d.ts

@@ -1,6 +1,11 @@
 /// <reference types="svelte" />
 
-export interface TagSkeletonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["span"]> {}
+export interface TagSkeletonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["span"]> {
+  /**
+   * @default "default"
+   */
+  size?: "sm" | "default";
+}
 
 export default class TagSkeleton {
   $$prop_def: TagSkeletonProps;

types/Toggle/Toggle.d.ts

@@ -53,6 +53,7 @@ export default class Toggle {
   $$prop_def: ToggleProps;
   $$slot_def: {};
 
+  $on(eventname: "toggle", cb: (event: CustomEvent<{ toggled: boolean }>) => void): () => void;
   $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
   $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
   $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;

types/TooltipIcon/TooltipIcon.d.ts

@@ -2,7 +2,8 @@
 
 export interface TooltipIconProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> {
   /**
-   * Specify the tooltip text
+   * Specify the tooltip text.
+   * Alternatively, use the "tooltipText" slot
    * @default ""
    */
   tooltipText?: string;
@@ -36,6 +37,7 @@ export default class TooltipIcon {
   $$prop_def: TooltipIconProps;
   $$slot_def: {
     default: {};
+    tooltipText: {};
   };
 
   $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;

yarn.lock

@@ -105,21 +105,6 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
-"@carbon/colors@^10.19.0":
-  version "10.19.0"
-  resolved "https://registry.npmjs.org/@carbon/colors/-/colors-10.19.0.tgz#b3fe4b8302f5a0d8450d4fe9af36eed40c035426"
-  integrity sha512-LrlxOuIrpWQmn8VmSu0VwuT4hRiXmSOtt9Yjs5OKEUuSIxADZFMpY+fJIvMu7q69Y4XeV6XNYrJpIExOfb62iw==
-
-"@carbon/import-once@^10.5.0":
-  version "10.5.0"
-  resolved "https://registry.npmjs.org/@carbon/import-once/-/import-once-10.5.0.tgz#9a84b50a761aa561ae6600a6c34b9955d97b3fd8"
-  integrity sha512-OlyJpA5wJ9XNv/FAogN4TGhwmrdyVYeoJ/ARkcmbdWiXwq4OTCVki9MUlV779+HYseLlXBxtlA1No3/R4Sds0g==
-
-"@carbon/layout@^10.17.0":
-  version "10.17.0"
-  resolved "https://registry.npmjs.org/@carbon/layout/-/layout-10.17.0.tgz#de2b80673c0ee13c451adf7060e63b117a87bc30"
-  integrity sha512-FS198XBh0dxfjU2GJ35b85gQbnuNFSK8IcpSBsgX7KKSIktwpPy0WV40EGQoZD/qFPIJpzZRngkJWD+d6vhf7w==
-
 "@carbon/telemetry@0.0.0-alpha.6":
   version "0.0.0-alpha.6"
   resolved "https://registry.npmjs.org/@carbon/telemetry/-/telemetry-0.0.0-alpha.6.tgz#1d11e64f310e98f32c3db0c55f02e047f2398087"
@@ -136,24 +121,6 @@
     winston "^3.3.3"
     yargs "^16.1.1"
 
-"@carbon/themes@^10.26.0":
-  version "10.26.0"
-  resolved "https://registry.npmjs.org/@carbon/themes/-/themes-10.26.0.tgz#61720c0e51ebe6a1121e22d0f764b0d55cf8533d"
-  integrity sha512-8S/S3S9l+7lbxGpbz81eoRxOYtloFTMPBZtcOmfUE1bwX3y31hhxc+4hrTCqdS0LQQSDvGebfYxiF7bfiVRFRg==
-  dependencies:
-    "@carbon/colors" "^10.19.0"
-    "@carbon/layout" "^10.17.0"
-    "@carbon/type" "^10.20.0"
-    color "^3.1.2"
-
-"@carbon/type@^10.20.0":
-  version "10.20.0"
-  resolved "https://registry.npmjs.org/@carbon/type/-/type-10.20.0.tgz#cea815adb8edceb98b4f7111d82ce6aa6ac59a96"
-  integrity sha512-F12I0oSR9CwFavdO357+a+2S7bGK4V3iaT5F89WNBR6RyV6jSTVq02rqWaRtmDK7Axy0dH/8Dxbq/xnLynFb6g==
-  dependencies:
-    "@carbon/import-once" "^10.5.0"
-    "@carbon/layout" "^10.17.0"
-
 "@dabh/diagnostics@^2.0.2":
   version "2.0.2"
   resolved "https://registry.npmjs.org/@dabh/diagnostics/-/diagnostics-2.0.2.tgz#290d08f7b381b8f94607dc8f471a12c675f9db31"
@@ -184,10 +151,10 @@
     "@nodelib/fs.scandir" "2.1.4"
     fastq "^1.6.0"
 
-"@rollup/plugin-commonjs@^16.0.0":
+"@rollup/plugin-commonjs@^17.1.0":
-  version "16.0.0"
+  version "17.1.0"
-  resolved "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-16.0.0.tgz#169004d56cd0f0a1d0f35915d31a036b0efe281f"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-commonjs/-/plugin-commonjs-17.1.0.tgz#757ec88737dffa8aa913eb392fade2e45aef2a2d"
-  integrity sha512-LuNyypCP3msCGVQJ7ki8PqYdpjfEkE/xtFa5DqlF+7IBD0JsfMZ87C58heSwIMint58sAUZbt3ITqOmdQv/dXw==
+  integrity sha512-PoMdXCw0ZyvjpCMT5aV4nkL0QywxP29sODQsSGeDpr/oI49Qq9tRtAsb/LbYbDzFlOydVEqHmmZWFtXJEAX9ew==
   dependencies:
     "@rollup/pluginutils" "^3.1.0"
     commondir "^1.0.1"
@@ -209,6 +176,18 @@
     is-module "^1.0.0"
     resolve "^1.17.0"
 
+"@rollup/plugin-node-resolve@^11.1.1":
+  version "11.1.1"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-11.1.1.tgz#47bc34252914794a1b06fb50371d7520a03f91f3"
+  integrity sha512-zlBXR4eRS+2m79TsUZWhsd0slrHUYdRx4JF+aVQm+MI0wsKdlpC2vlDVjmlGvtZY1vsefOT9w3JxvmWSBei+Lg==
+  dependencies:
+    "@rollup/pluginutils" "^3.1.0"
+    "@types/resolve" "1.17.1"
+    builtin-modules "^3.1.0"
+    deepmerge "^4.2.2"
+    is-module "^1.0.0"
+    resolve "^1.19.0"
+
 "@rollup/pluginutils@^3.1.0":
   version "3.1.0"
   resolved "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz#706b4524ee6dc8b103b3c995533e5ad680c02b9b"
@@ -390,13 +369,13 @@ at-least-node@^1.0.0:
   resolved "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz#602cd4b46e844ad4effc92a8011a3c46e0238dc2"
   integrity sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==
 
-autoprefixer@^10.2.3:
+autoprefixer@^10.2.4:
-  version "10.2.3"
+  version "10.2.4"
-  resolved "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.2.3.tgz#2834b55b75cfc10fa80c66000a66dc94b7136804"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.2.4.tgz#c0e7cf24fcc6a1ae5d6250c623f0cb8beef2f7e1"
-  integrity sha512-vlz+iv+EnLkVaTgX8wApfYzmK3LUfK8Z9XAnmflzxMy/+oFuNK8fVGQV79SOpBv4jxk2YQJimw4hXIKZ29570A==
+  integrity sha512-DCCdUQiMD+P/as8m3XkeTUkUKuuRqLGcwD0nll7wevhqoJfMRpJlkFd1+MQh1pvupjiQuip42lc/VFvfUTMSKw==
   dependencies:
     browserslist "^4.16.1"
-    caniuse-lite "^1.0.30001178"
+    caniuse-lite "^1.0.30001181"
     colorette "^1.2.1"
     fraction.js "^4.0.13"
     normalize-range "^0.1.2"
@@ -471,15 +450,20 @@ callsites@^3.0.0:
   resolved "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
-caniuse-lite@^1.0.30001173, caniuse-lite@^1.0.30001178:
+caniuse-lite@^1.0.30001173:
   version "1.0.30001180"
   resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001180.tgz#67abcd6d1edf48fa5e7d1e84091d1d65ab76e33b"
   integrity sha512-n8JVqXuZMVSPKiPiypjFtDTXc4jWIdjxull0f92WLo7e1MSi3uJ3NvveakSh/aCl1QKFAvIz3vIj0v+0K+FrXw==
 
-carbon-components@10.27.0:
+caniuse-lite@^1.0.30001181:
-  version "10.27.0"
+  version "1.0.30001183"
-  resolved "https://registry.npmjs.org/carbon-components/-/carbon-components-10.27.0.tgz#b984ee1b87371a64ecd041853993ffc69c9191a0"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001183.tgz#7a57ba9d6584119bb5f2bc76d3cc47ba9356b3e2"
-  integrity sha512-kDW3ezjfqxTydIMLZ+pTxA3oWsmhET330NTVe47hXeCRsoZ000tq0ZwGbbliSjlW2wY4s5nKxWkMj0b+dkeFyQ==
+  integrity sha512-7JkwTEE1hlRKETbCFd8HDZeLiQIUcl8rC6JgNjvHCNaxOeNmQ9V4LvQXRUsKIV2CC73qKxljwVhToaA3kLRqTw==
+
+carbon-components@10.28.0:
+  version "10.28.0"
+  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.28.0.tgz#c4d2b23df2559cf3b0226867c45e2e84e0af7c4e"
+  integrity sha512-bFsyngr625zc/t2gl4BPFYl0/ed4q38rrPihQxBXHhLAdeZNyy8xyOQlbh1PEQbTu47H/s/bxVo6QiFm/VmLZA==
   dependencies:
     "@carbon/telemetry" "0.0.0-alpha.6"
     flatpickr "4.6.1"
@@ -603,7 +587,7 @@ color-name@^1.0.0, color-name@~1.1.4:
   resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
-color-string@^1.5.2, color-string@^1.5.4:
+color-string@^1.5.2:
   version "1.5.4"
   resolved "https://registry.npmjs.org/color-string/-/color-string-1.5.4.tgz#dd51cd25cfee953d138fe4002372cc3d0e504cb6"
   integrity sha512-57yF5yt8Xa3czSEW1jfQDE79Idk0+AkN/4KWad6tbdxUmAs3MvjxlWSWD4deYytcRfoZ9nhKyFl1kj5tBvidbw==
@@ -619,14 +603,6 @@ color@3.0.x:
     color-convert "^1.9.1"
     color-string "^1.5.2"
 
-color@^3.1.2:
-  version "3.1.3"
-  resolved "https://registry.npmjs.org/color/-/color-3.1.3.tgz#ca67fb4e7b97d611dcde39eceed422067d91596e"
-  integrity sha512-xgXAcTHa2HeFCGLE9Xs/R82hujGtu9Jd9x4NW3T34+OMs7VoPsjwzRczKHvTAHeJwWFwX5j15+MgAppE8ztObQ==
-  dependencies:
-    color-convert "^1.9.1"
-    color-string "^1.5.4"
-
 colorette@^1.2.1:
   version "1.2.1"
   resolved "https://registry.npmjs.org/colorette/-/colorette-1.2.1.tgz#4d0b921325c14faf92633086a536db6e89564b1b"
@@ -1266,6 +1242,13 @@ is-callable@^1.1.4, is-callable@^1.2.2:
   resolved "https://registry.npmjs.org/is-callable/-/is-callable-1.2.2.tgz#c7c6715cd22d4ddb48d3e19970223aceabb080d9"
   integrity sha512-dnMqspv5nU3LoewK2N/y7KLtxtakvTuaCsU9FU50/QDmdbHNy/4/JuRtMHqRU22o3q+W89YQndQEeCVwK+3qrA==
 
+is-core-module@^2.1.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.2.0.tgz#97037ef3d52224d85163f5597b2b63d9afed981a"
+  integrity sha512-XRAfAdyyY5F5cOXn7hYQDqh2Xmii+DEfIcQGxK/uNwMHhIkPWO0g8msXcbzLe+MpGoR951MlqM/2iIlU4vKDdQ==
+  dependencies:
+    has "^1.0.3"
+
 is-date-object@^1.0.1:
   version "1.0.2"
   resolved "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e"
@@ -2036,6 +2019,14 @@ resolve@^1.10.0, resolve@^1.17.0:
   dependencies:
     path-parse "^1.0.6"
 
+resolve@^1.19.0:
+  version "1.19.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.19.0.tgz#1af5bf630409734a067cae29318aac7fa29a267c"
+  integrity sha512-rArEXAgsBG4UgRGcynxWIWKFvh/XZCcS8UJdHhwy91zwAvCZIbcs+vAbflgBnNjYMs/i/i+/Ux6IZhML1yPvxg==
+  dependencies:
+    is-core-module "^2.1.0"
+    path-parse "^1.0.6"
+
 responselike@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/responselike/-/responselike-2.0.0.tgz#26391bcc3174f750f9a79eacc40a12a5c42d7723"
@@ -2097,12 +2088,12 @@ rollup@^2.33.3:
   optionalDependencies:
     fsevents "~2.1.2"
 
-rollup@^2.38.0:
+rollup@^2.38.4:
-  version "2.38.0"
+  version "2.38.4"
-  resolved "https://registry.npmjs.org/rollup/-/rollup-2.38.0.tgz#57942d5a10826cb12ed1f19c261f774efa502d2d"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.38.4.tgz#1b84ea8728c73b1a00a6a6e9c630ec8c3fe48cea"
-  integrity sha512-ay9zDiNitZK/LNE/EM2+v5CZ7drkB2xyDljvb1fQJCGnq43ZWRkhxN145oV8GmoW1YNi4sA/1Jdkr2LfawJoXw==
+  integrity sha512-B0LcJhjiwKkTl79aGVF/u5KdzsH8IylVfV56Ut6c9ouWLJcUK17T83aZBetNYSnZtXf2OHD4+2PbmRW+Fp5ulg==
   optionalDependencies:
-    fsevents "~2.1.2"
+    fsevents "~2.3.1"
 
 run-parallel@^1.1.9:
   version "1.1.10"
@@ -2126,10 +2117,10 @@ safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
   integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
 
-sass@^1.32.5:
+sass@^1.32.6:
-  version "1.32.5"
+  version "1.32.6"
-  resolved "https://registry.npmjs.org/sass/-/sass-1.32.5.tgz#2882d22ad5748c05fa9bff6c3b0ffbc4f4b9e1dc"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.32.6.tgz#e3646c8325cd97ff75a8a15226007f3ccd221393"
-  integrity sha512-kU1yJ5zUAmPxr7f3q0YXTAd1oZjSR1g3tYyv+xu0HZSl5JiNOaE987eiz7wCUvbm4I9fGWGU2TgApTtcP4GMNQ==
+  integrity sha512-1bcDHDcSqeFtMr0JXI3xc/CXX6c4p0wHHivJdru8W7waM7a1WjKMm4m/Z5sY7CbVw4Whi2Chpcw6DFfSWwGLzQ==
   dependencies:
     chokidar ">=2.0.0 <4.0.0"
 
@@ -2426,10 +2417,10 @@ sveld@0.3.0:
     rollup-plugin-svelte "^6.1.1"
     svelte "^3.30.0"
 
-svelte-check@^1.1.28:
+svelte-check@^1.1.32:
-  version "1.1.28"
+  version "1.1.32"
-  resolved "https://registry.npmjs.org/svelte-check/-/svelte-check-1.1.28.tgz#f7ef1cff9a0b05368880c6a4a523cdc9c1edeb1a"
+  resolved "https://registry.yarnpkg.com/svelte-check/-/svelte-check-1.1.32.tgz#a3b6865130ad82861122664b27f93f9e57350484"
-  integrity sha512-jp1i8JImIwyH8gp2G9nLZ1+HXUgxPbuuT4StzeAvHdQ27b0u8XANoODcjl2w15i1J33EiH4S4CE9M3o9kau4cg==
+  integrity sha512-tnG79CAz9F5kY8EYGeTfKNSN2OPbSQR/BVAFB60cFYa4P59Ti+6iGZ4gxNFm+dmzFSgZ5bjDq/AJneA0h7Pxow==
   dependencies:
     chalk "^4.0.0"
     chokidar "^3.4.1"
@@ -2455,10 +2446,10 @@ svelte@^3.30.0:
   resolved "https://registry.npmjs.org/svelte/-/svelte-3.30.0.tgz#cbde341e96bf34f4ac73c8f14f8a014e03bfb7d6"
   integrity sha512-z+hdIACb9TROGvJBQWcItMtlr4s0DBUgJss6qWrtFkOoIInkG+iAMo/FJZQFyDBQZc+dul2+TzYSi/tpTT5/Ag==
 
-svelte@^3.32.0:
+svelte@^3.32.1:
-  version "3.32.0"
+  version "3.32.1"
-  resolved "https://registry.npmjs.org/svelte/-/svelte-3.32.0.tgz#06d7dcdf65e62a708c74231f7099569df43e3af6"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.32.1.tgz#c4b6e35517d0ed77e652cc8964ef660afa2f70f3"
-  integrity sha512-+EA3qfKDG0uB16s7m1z9Nc1o01G7YC4eq1cnHOzCy+fKsvGAJrjhjBIM3zCW2eZUu639UbHQElaOPQWUjBN3Yw==
+  integrity sha512-j1KmD2ZOU0RGq1/STDXjwfh0/eJ/Deh2NXyuz1bpR9eOcz9yImn4CGxXdbSAN7cMTm9a7IyPUIbuBCzu/pXK0g==
 
 terser@^5.0.0:
   version "5.3.0"