Alignment with Carbon version 10.32 (#588)

* feat(code-snippet): add copy functionality

- docs: add custom feedback copy text example

* feat(tile): support disabled state for SelectableTile, RadioTile

Closes #539

* build(rollup): add clipboard-copy to globals

* feat(copy-button): add copy functionality

* feat(content-switcher): deprecate the light prop

- docs: remove the light variant example

* fix(toolbar-search): remove outer div

* feat(search): add searchClass prop

* fix(composed-modal): set hasScrollingContent class on ModalBody

* docs(data-table): add expandable size examples

* feat(tooltip): add TooltipFooter component

* fix(time-picker): correctly display invalidText

* feat(breadcrumb): support overflow menu

* feat(multi-select): export inputRef prop

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

* feat(form): add noMargin prop to FormGroup

* docs(tooltip): document TooltipFooter

* feat(context-menu): support danger kind for ContextMenuOption

* feat(data-table): support rendering empty table header in skeleton

* refactor(types): use shorter import path in DataTableSkeleton

* feat(data-table): allow sorting to be disabled for a specific header

* docs(data-table): update example to desort the Protocol header

As an example, it makes more sense because all the values ("http") are the same.

* fix(context-menu): set initial y offset of context menu based on window height #577

* fix(context-menu): render submenu based on viewport constraints #577

src/Tile/RadioTile.svelte

@@ -5,6 +5,9 @@
   /** Set to `true` to enable the light variant */
   export let light = false;
 
+  /** Set to `true` to disable the tile */
+  export let disabled = false;
+
   /** Specify the value of the radio input */
   export let value = "";
 
@@ -21,7 +24,7 @@
   export let name = "";
 
   import { getContext } from "svelte";
-  import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16";
+  import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16/CheckmarkFilled16.svelte";
 
   const { add, update, selectedValue } = getContext("TileGroup");
 
@@ -36,14 +39,17 @@
   name="{name}"
   value="{value}"
   checked="{checked}"
-  tabindex="{tabindex}"
+  tabindex="{disabled ? undefined : tabindex}"
+  disabled="{disabled}"
   class:bx--tile-input="{true}"
   on:change
   on:change="{() => {
+    if (disabled) return;
     update(value);
   }}"
   on:keydown
   on:keydown="{(e) => {
+    if (disabled) return;
     if (e.key === ' ' || e.key === 'Enter') {
       e.preventDefault();
       update(value);
@@ -56,6 +62,7 @@
   class:bx--tile--selectable="{true}"
   class:bx--tile--is-selected="{checked}"
   class:bx--tile--light="{light}"
+  class:bx--tile--disabled="{disabled}"
   {...$$restProps}
   on:click
   on:mouseover

src/Tile/SelectableTile.svelte

@@ -5,6 +5,9 @@
   /** Set to `true` to enable the light variant */
   export let light = false;
 
+  /** Set to `true` to disable the tile */
+  export let disabled = false;
+
   /** Specify the title of the selectable tile */
   export let title = "title";
 
@@ -30,11 +33,11 @@
   export let ref = null;
 
   import { createEventDispatcher } from "svelte";
-  import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16";
+  import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16/CheckmarkFilled16.svelte";
 
   const dispatch = createEventDispatcher();
 
-  $: dispatch(selected ? "select" : "deselect", id);
+  $: if (!disabled) dispatch(selected ? "select" : "deselect", id);
 </script>
 
 <input
@@ -47,17 +50,20 @@
   value="{value}"
   name="{name}"
   title="{title}"
+  disabled="{disabled}"
 />
 <label
   for="{id}"
-  tabindex="{tabindex}"
+  tabindex="{disabled ? undefined : tabindex}"
   class:bx--tile="{true}"
   class:bx--tile--selectable="{true}"
   class:bx--tile--is-selected="{selected}"
   class:bx--tile--light="{light}"
+  class:bx--tile--disabled="{disabled}"
   {...$$restProps}
   on:click
   on:click|preventDefault="{() => {
+    if (disabled) return;
     selected = !selected;
   }}"
   on:mouseover
@@ -65,6 +71,7 @@
   on:mouseleave
   on:keydown
   on:keydown="{(e) => {
+    if (disabled) return;
     if (e.key === ' ' || e.key === 'Enter') {
       e.preventDefault();
       selected = !selected;