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
2025-09-14 18:01:06 +00:00 · 2021-02-05 05:59:10 -08:00 · 2021-02-05 05:59:10 -08:00 · 7cd3723960
commit 7cd3723960
parent 251f986304
47 changed files with 549 additions and 240 deletions
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@ -660,12 +660,12 @@ None.
 ### Events

 | Event name    | Type       | Detail                          |
-| :------------ | :--------- | :----- |
+| :------------ | :--------- | :------------------------------ |
+| transitionend | dispatched | <code>{ open: boolean; }</code> |
 | click         | forwarded  | --                              |
 | mouseover     | forwarded  | --                              |
 | mouseenter    | forwarded  | --                              |
 | mouseleave    | forwarded  | --                              |
-| transitionend | forwarded  | --     |
 | submit        | dispatched | --                              |
 | close         | dispatched | --                              |
 | open          | dispatched | --                              |
@ -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     |
@ -2041,7 +2044,8 @@ None.
 ### Events

 | Event name              | Type       | Detail                          |
-| :---------------------- | :--------- | :----- |
+| :---------------------- | :--------- | :------------------------------ |
+| transitionend           | dispatched | <code>{ open: boolean; }</code> |
 | keydown                 | forwarded  | --                              |
 | click                   | forwarded  | --                              |
 | mouseover               | forwarded  | --                              |
@ -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            |
@ -3640,17 +3646,20 @@ None.
 ### Events

 | Event name | Type       | Detail |
-| :--------- | :-------- | :----- |
+| :--------- | :--------- | :----- |
 | click      | forwarded  | --     |
 | mouseover  | forwarded  | --     |
 | mouseenter | 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

@ -3958,7 +3967,8 @@ None.
 ### Events

 | Event name | Type       | Detail                             |
-| :--------- | :-------- | :----- |
+| :--------- | :--------- | :--------------------------------- |
+| toggle     | dispatched | <code>{ toggled: boolean; }</code> |
 | click      | forwarded  | --                                 |
 | mouseover  | forwarded  | --                                 |
 | mouseenter | forwarded  | --                                 |
@ -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
@ -4226,9 +4237,9 @@ None.
 ### Props

 | 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                            |
-| 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                    |
 | 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                                           |
@ -4236,8 +4247,9 @@ None.
 ### Slots

 | Slot name   | Default | Props | Fallback                   |
-| :-------- | :------ | :---- | :------- |
+| :---------- | :------ | :---- | :------------------------- |
 | --          | Yes     | --    | --                         |
+| tooltipText | No      | --    | <code>{tooltipText}</code> |

 ### Events

--- a/docs/package.json
+++ b/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",
--- a/docs/src/App.svelte
+++ b/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";
--- a/docs/src/COMPONENT_API.json
+++ b/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" },
--- a/docs/src/components/ComponentApi.svelte
+++ b/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>
--- a/docs/src/layouts/ComponentLayout.svelte
+++ b/docs/src/layouts/ComponentLayout.svelte
@ -207,4 +207,8 @@
      display: block;
    }
  }
+
+  .preview-viewer > .bx--aspect-ratio {
+    outline: 1px solid var(--cds-interactive-04);
+  }
 </style>
--- a/docs/src/pages/components/AspectRatio.svx
+++ b/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>

--- a/docs/src/pages/components/DatePicker.svx
+++ b/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>
--- a/docs/src/pages/components/Dropdown.svx
+++ b/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.
--- a/docs/src/pages/components/Link.svx
+++ b/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";
--- a/docs/src/pages/components/OverflowMenu.svx
+++ b/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">
--- a/docs/src/pages/components/Select.svx
+++ b/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" >
--- a/docs/src/pages/components/Tabs.svx
+++ b/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">
--- a/docs/src/pages/components/Tag.svx
+++ b/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 />
+
+### Skeleton (small)
+
+<Tag size="sm" skeleton />
--- a/docs/src/pages/components/Toggle.svx
+++ b/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" />
--- a/docs/src/pages/components/TooltipIcon.svx
+++ b/docs/src/pages/components/TooltipIcon.svx
@ -17,3 +17,12 @@
 <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>
+
+### 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>
--- a/docs/src/pages/framed/Modal/ComposedModal.svelte
+++ b/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>
--- a/docs/src/pages/framed/Tabs/TabsReactive.svelte
+++ b/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>
--- a/docs/yarn.lock
+++ b/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:
-  version "10.27.0"
-  resolved "https://registry.npmjs.org/carbon-components/-/carbon-components-10.27.0.tgz#b984ee1b87371a64ecd041853993ffc69c9191a0"
-  integrity sha512-kDW3ezjfqxTydIMLZ+pTxA3oWsmhET330NTVe47hXeCRsoZ000tq0ZwGbbliSjlW2wY4s5nKxWkMj0b+dkeFyQ==
+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"
@ -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"
--- a/package.json
+++ b/package.json
@ -25,12 +25,11 @@
    "flatpickr": "4.6.9"
  },
  "devDependencies": {
-    "@carbon/themes": "^10.26.0",
-    "@rollup/plugin-commonjs": "^16.0.0",
-    "@rollup/plugin-node-resolve": "^10.0.0",
+    "@rollup/plugin-commonjs": "^17.1.0",
+    "@rollup/plugin-node-resolve": "^11.1.1",
    "@tsconfig/svelte": "^1.0.10",
-    "autoprefixer": "^10.2.3",
-    "carbon-components": "10.27.0",
+    "autoprefixer": "^10.2.4",
+    "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-check": "^1.1.28",
+    "svelte": "^3.32.1",
+    "svelte-check": "^1.1.32",
    "typescript": "^4.1.3"
  },
  "husky": {
--- a/src/ComposedModal/ComposedModal.svelte
+++ b/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="{({ currentTarget }) => {
+  on:transitionend="{({ propertyName, 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'}"
--- a/src/ComposedModal/ModalHeader.svelte
+++ b/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
--- a/src/DataTable/ToolbarSearch.svelte
+++ b/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
--- a/src/DatePicker/DatePickerInput.svelte
+++ b/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>
--- a/src/Dropdown/Dropdown.svelte
+++ b/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>
--- a/src/Modal/Modal.svelte
+++ b/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;
          }}"
--- a/src/Search/Search.svelte
+++ b/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}"
--- a/src/Tabs/Tab.svelte
+++ b/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) {
+
+  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);
--- a/src/Tag/Tag.svelte
+++ b/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'}"
--- a/src/Tag/TagSkeleton.svelte
+++ b/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
--- a/src/Toggle/Toggle.svelte
+++ b/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
--- a/src/TooltipIcon/TooltipIcon.svelte
+++ b/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>
--- a/tests/Tag.test.svelte
+++ b/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>

--- a/tests/Toggle.test.svelte
+++ b/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" />

--- a/tests/TooltipIcon.test.svelte
+++ b/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>
--- a/tsconfig.json
+++ b/tsconfig.json
@ -1 +1 @@
-{ "extends": "@tsconfig/svelte/tsconfig.json" }
+{ "extends": "@tsconfig/svelte" }
--- a/types/ComposedModal/ComposedModal.d.ts
+++ b/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;
--- a/types/DataTable/ToolbarSearch.d.ts
+++ b/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"
--- a/types/DatePicker/DatePickerInput.d.ts
+++ b/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
   */
--- a/types/Dropdown/Dropdown.d.ts
+++ b/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
   */
--- a/types/Modal/Modal.d.ts
+++ b/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;
--- a/types/Tabs/Tab.d.ts
+++ b/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;
--- a/types/Tag/Tag.d.ts
+++ b/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;
 }
--- a/types/Tag/TagSkeleton.d.ts
+++ b/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;
--- a/types/Toggle/Toggle.d.ts
+++ b/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;
--- a/types/TooltipIcon/TooltipIcon.d.ts
+++ b/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;
--- a/yarn.lock
+++ b/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":
-  version "16.0.0"
-  resolved "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-16.0.0.tgz#169004d56cd0f0a1d0f35915d31a036b0efe281f"
-  integrity sha512-LuNyypCP3msCGVQJ7ki8PqYdpjfEkE/xtFa5DqlF+7IBD0JsfMZ87C58heSwIMint58sAUZbt3ITqOmdQv/dXw==
+"@rollup/plugin-commonjs@^17.1.0":
+  version "17.1.0"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-commonjs/-/plugin-commonjs-17.1.0.tgz#757ec88737dffa8aa913eb392fade2e45aef2a2d"
+  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:
-  version "10.2.3"
-  resolved "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.2.3.tgz#2834b55b75cfc10fa80c66000a66dc94b7136804"
-  integrity sha512-vlz+iv+EnLkVaTgX8wApfYzmK3LUfK8Z9XAnmflzxMy/+oFuNK8fVGQV79SOpBv4jxk2YQJimw4hXIKZ29570A==
+autoprefixer@^10.2.4:
+  version "10.2.4"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.2.4.tgz#c0e7cf24fcc6a1ae5d6250c623f0cb8beef2f7e1"
+  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:
-  version "10.27.0"
-  resolved "https://registry.npmjs.org/carbon-components/-/carbon-components-10.27.0.tgz#b984ee1b87371a64ecd041853993ffc69c9191a0"
-  integrity sha512-kDW3ezjfqxTydIMLZ+pTxA3oWsmhET330NTVe47hXeCRsoZ000tq0ZwGbbliSjlW2wY4s5nKxWkMj0b+dkeFyQ==
+caniuse-lite@^1.0.30001181:
+  version "1.0.30001183"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001183.tgz#7a57ba9d6584119bb5f2bc76d3cc47ba9356b3e2"
+  integrity sha512-7JkwTEE1hlRKETbCFd8HDZeLiQIUcl8rC6JgNjvHCNaxOeNmQ9V4LvQXRUsKIV2CC73qKxljwVhToaA3kLRqTw==
+
+carbon-components@10.28.0:
+  version "10.28.0"
+  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.28.0.tgz#c4d2b23df2559cf3b0226867c45e2e84e0af7c4e"
+  integrity sha512-bFsyngr625zc/t2gl4BPFYl0/ed4q38rrPihQxBXHhLAdeZNyy8xyOQlbh1PEQbTu47H/s/bxVo6QiFm/VmLZA==
  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:
-  version "2.38.0"
-  resolved "https://registry.npmjs.org/rollup/-/rollup-2.38.0.tgz#57942d5a10826cb12ed1f19c261f774efa502d2d"
-  integrity sha512-ay9zDiNitZK/LNE/EM2+v5CZ7drkB2xyDljvb1fQJCGnq43ZWRkhxN145oV8GmoW1YNi4sA/1Jdkr2LfawJoXw==
+rollup@^2.38.4:
+  version "2.38.4"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.38.4.tgz#1b84ea8728c73b1a00a6a6e9c630ec8c3fe48cea"
+  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:
-  version "1.32.5"
-  resolved "https://registry.npmjs.org/sass/-/sass-1.32.5.tgz#2882d22ad5748c05fa9bff6c3b0ffbc4f4b9e1dc"
-  integrity sha512-kU1yJ5zUAmPxr7f3q0YXTAd1oZjSR1g3tYyv+xu0HZSl5JiNOaE987eiz7wCUvbm4I9fGWGU2TgApTtcP4GMNQ==
+sass@^1.32.6:
+  version "1.32.6"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.32.6.tgz#e3646c8325cd97ff75a8a15226007f3ccd221393"
+  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:
-  version "1.1.28"
-  resolved "https://registry.npmjs.org/svelte-check/-/svelte-check-1.1.28.tgz#f7ef1cff9a0b05368880c6a4a523cdc9c1edeb1a"
-  integrity sha512-jp1i8JImIwyH8gp2G9nLZ1+HXUgxPbuuT4StzeAvHdQ27b0u8XANoODcjl2w15i1J33EiH4S4CE9M3o9kau4cg==
+svelte-check@^1.1.32:
+  version "1.1.32"
+  resolved "https://registry.yarnpkg.com/svelte-check/-/svelte-check-1.1.32.tgz#a3b6865130ad82861122664b27f93f9e57350484"
+  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:
-  version "3.32.0"
-  resolved "https://registry.npmjs.org/svelte/-/svelte-3.32.0.tgz#06d7dcdf65e62a708c74231f7099569df43e3af6"
-  integrity sha512-+EA3qfKDG0uB16s7m1z9Nc1o01G7YC4eq1cnHOzCy+fKsvGAJrjhjBIM3zCW2eZUu639UbHQElaOPQWUjBN3Yw==
+svelte@^3.32.1:
+  version "3.32.1"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.32.1.tgz#c4b6e35517d0ed77e652cc8964ef660afa2f70f3"
+  integrity sha512-j1KmD2ZOU0RGq1/STDXjwfh0/eJ/Deh2NXyuz1bpR9eOcz9yImn4CGxXdbSAN7cMTm9a7IyPUIbuBCzu/pXK0g==

 terser@^5.0.0:
  version "5.3.0"