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

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>