Alignment with Carbon version 10.30 (#559)

* feat(toolbar): forward "clear" event in ToolbarSearch

* docs(search): add on:clear example

* fix(ui-shell): set aria-hidden in SideNav

Ref c2b4f1f00

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

* fix(text-input): use bx--text-input class for TextInputSkeleton

* fix(radio-button): only render span if labelText is truthy

* docs(password-input): add custom tooltip example

* feat(button): add isSelected prop for icon-only, ghost buttons

* feat(radio-button): add legendText prop to RadioButtonGroup

* docs(tag): add filterable (disabled) variant

* feat(tag): add interactive prop

* chore(number-input): deprecate the mobile variant

Mobile variant styles will no longer work.

* feat(button): set aria-pressed attribute if icon-only, ghost button is selected

* fix(multi-select): type dispatched select event

* fix(button): remove redundant "button" role

* feat(icon): deprecate Icon, IconSkeleton

* feat(ui-shell): make SideNavMenuItem text slottable

* fix(list-box): update styles for ListBoxSelection

* fix(list-box): temporarily apply override styles to ListBoxMenuIcon for chevron

* fix(tag): set disabled prop on interactive tag

* docs(button): extract selected, icon-only button example

* feat(tooltip): elevate z-index of tooltip when open

* feat: forward restProps to input element

* fix(types): fix TimePicker test to pass svelte-check

* feat: add ImageLoader component

* test: add ImageLoader

* feat: add LocalStorage component

* test(local-storage): fix invalid file

* chore(docs): use green tag type

docs/src/pages/framed/Button/SelectedIconOnlyButton.svelte

@@ -0,0 +1,30 @@
+<script>
+  import { Button } from "carbon-components-svelte";
+  import TextBold16 from "carbon-icons-svelte/lib/TextBold16";
+  import TextItalic16 from "carbon-icons-svelte/lib/TextItalic16";
+  import TextUnderline16 from "carbon-icons-svelte/lib/TextUnderline16";
+
+  let index = 1;
+</script>
+
+<Button
+  isSelected="{index === 0}"
+  kind="ghost"
+  iconDescription="Bold"
+  icon="{TextBold16}"
+  on:click="{() => (index = 0)}"
+/>
+<Button
+  isSelected="{index === 1}"
+  kind="ghost"
+  iconDescription="Italicize"
+  icon="{TextItalic16}"
+  on:click="{() => (index = 1)}"
+/>
+<Button
+  isSelected="{index === 2}"
+  kind="ghost"
+  iconDescription="Underline"
+  icon="{TextUnderline16}"
+  on:click="{() => (index = 2)}"
+/>

docs/src/pages/framed/ImageLoader/ProgrammaticImageLoader.svelte

@@ -0,0 +1,26 @@
+<script>
+  import { ImageLoader, Button } from "carbon-components-svelte";
+
+  const src =
+    "https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg";
+  const srcError = src + "1";
+
+  let imageLoader;
+  let error;
+</script>
+
+<Button
+  kind="ghost"
+  disabled="{!imageLoader || error}"
+  on:click="{() => imageLoader.loadImage(srcError)}"
+>
+  Simulate error
+</Button>
+
+<ImageLoader bind:this="{imageLoader}" bind:error fadeIn src="{src}">
+  <div slot="error">
+    <Button kind="ghost" on:click="{() => imageLoader.loadImage(src)}">
+      Error. Try again
+    </Button>
+  </div>
+</ImageLoader>

docs/src/pages/framed/LocalStorage/LocalStorage.svelte

@@ -0,0 +1,29 @@
+<script>
+  import { LocalStorage, Toggle, Button } from "carbon-components-svelte";
+
+  let storage;
+  let toggled = false;
+  let events = [];
+
+  $: document.documentElement.setAttribute("theme", toggled ? "g100" : "white");
+</script>
+
+<LocalStorage
+  bind:this="{storage}"
+  key="dark-mode"
+  bind:value="{toggled}"
+  on:save="{() => {
+    events = [...events, { event: 'on:save' }];
+  }}"
+  on:update="{({ detail }) => {
+    events = [...events, { event: 'on:update', detail }];
+  }}"
+/>
+
+<Toggle size="sm" labelText="Dark mode" bind:toggled />
+
+<br />
+
+<pre>
+  {JSON.stringify(events, null, 2)}
+</pre>

docs/src/pages/framed/RadioButton/ProgrammaticRadioButton.svelte

@@ -2,7 +2,6 @@
   import {
     ButtonSet,
     Button,
-    FormGroup,
     RadioButtonGroup,
     RadioButton,
   } from "carbon-components-svelte";
@@ -10,17 +9,17 @@
   let plan = "standard";
 </script>
 
-<FormGroup legendText="Storage tier (disk)">
-  <RadioButtonGroup bind:selected="{plan}">
-    <RadioButton labelText="Free (1 GB)" value="free" />
-    <RadioButton labelText="Standard (10 GB)" value="standard" />
-    <RadioButton labelText="Pro (128 GB)" value="pro" />
-  </RadioButtonGroup>
-</FormGroup>
+<RadioButtonGroup legendText="Storage tier (disk)" bind:selected="{plan}">
+  <RadioButton labelText="Free (1 GB)" value="free" />
+  <RadioButton labelText="Standard (10 GB)" value="standard" />
+  <RadioButton labelText="Pro (128 GB)" value="pro" />
+</RadioButtonGroup>
 
-<ButtonSet>
+<ButtonSet style="margin-top: var(--cds-layout-03)">
   {#each ["free", "standard", "pro"] as value}
     <Button
+      disabled="{plan === value}"
+      kind="secondary"
       on:click="{() => {
         plan = value;
       }}"