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/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>