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

COMPONENT_INDEX.md

@@ -1,6 +1,6 @@
 # Component Index
 
-> 166 components exported from carbon-components-svelte@0.31.1.
+> 167 components exported from carbon-components-svelte@0.31.1.
 
 ## Components
 
@@ -167,6 +167,7 @@
 - [`ToolbarSearch`](#toolbarsearch)
 - [`Tooltip`](#tooltip)
 - [`TooltipDefinition`](#tooltipdefinition)
+- [`TooltipFooter`](#tooltipfooter)
 - [`TooltipIcon`](#tooltipicon)
 - [`Truncate`](#truncate)
 - [`UnorderedList`](#unorderedlist)
@@ -500,25 +501,25 @@ None.
 
 ### Props
 
-| Prop name             | Kind             | Reactive | Type                                                 | Default value                                    | Description                                                                                                                |
+| Prop name             | Kind             | Reactive | Type                                                 | Default value                                    | Description                                                                                                                                                                   |
-| :-------------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------- |
+| :-------------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| ref                   | <code>let</code> | Yes      | <code>null &#124; HTMLPreElement</code>              | <code>null</code>                                | Obtain a reference to the pre HTML element                                                                                 |
+| ref                   | <code>let</code> | Yes      | <code>null &#124; HTMLPreElement</code>              | <code>null</code>                                | Obtain a reference to the pre HTML element                                                                                                                                    |
-| showMoreLess          | <code>let</code> | Yes      | <code>boolean</code>                                 | <code>false</code>                               | Set to `true` to enable the show more/less button                                                                          |
+| showMoreLess          | <code>let</code> | Yes      | <code>boolean</code>                                 | <code>false</code>                               | Set to `true` to enable the show more/less button                                                                                                                             |
-| expanded              | <code>let</code> | Yes      | <code>boolean</code>                                 | <code>false</code>                               | Set to `true` to expand a multi-line code snippet (type="multi")                                                           |
+| expanded              | <code>let</code> | Yes      | <code>boolean</code>                                 | <code>false</code>                               | Set to `true` to expand a multi-line code snippet (type="multi")                                                                                                              |
-| type                  | <code>let</code> | No       | <code>"single" &#124; "inline" &#124; "multi"</code> | <code>"single"</code>                            | Set the type of code snippet                                                                                               |
+| type                  | <code>let</code> | No       | <code>"single" &#124; "inline" &#124; "multi"</code> | <code>"single"</code>                            | Set the type of code snippet                                                                                                                                                  |
-| code                  | <code>let</code> | No       | <code>string</code>                                  | --                                               | Set the code snippet text<br />Alternatively, use the default slot (e.g., &lt;CodeSnippet&gt;{`code`}&lt;/CodeSnippet&gt;) |
+| code                  | <code>let</code> | No       | <code>string</code>                                  | --                                               | Set the code snippet text<br />Alternatively, use the default slot (e.g., &lt;CodeSnippet&gt;{`code`}&lt;/CodeSnippet&gt;)<br />You must use the `code` prop to copy the code |
-| hideCopyButton        | <code>let</code> | No       | <code>boolean</code>                                 | <code>false</code>                               | Set to `true` to hide the copy button                                                                                      |
+| hideCopyButton        | <code>let</code> | No       | <code>boolean</code>                                 | <code>false</code>                               | Set to `true` to hide the copy button                                                                                                                                         |
-| disabled              | <code>let</code> | No       | <code>boolean</code>                                 | <code>false</code>                               | Set to `true` for the disabled variant<br />Only applies to the "single", "multi" types                                    |
+| disabled              | <code>let</code> | No       | <code>boolean</code>                                 | <code>false</code>                               | Set to `true` for the disabled variant<br />Only applies to the "single", "multi" types                                                                                       |
-| wrapText              | <code>let</code> | No       | <code>boolean</code>                                 | <code>false</code>                               | Set to `true` to wrap the text<br />Note that `type` must be "multi"                                                       |
+| wrapText              | <code>let</code> | No       | <code>boolean</code>                                 | <code>false</code>                               | Set to `true` to wrap the text<br />Note that `type` must be "multi"                                                                                                          |
-| light                 | <code>let</code> | No       | <code>boolean</code>                                 | <code>false</code>                               | Set to `true` to enable the light variant                                                                                  |
+| light                 | <code>let</code> | No       | <code>boolean</code>                                 | <code>false</code>                               | Set to `true` to enable the light variant                                                                                                                                     |
-| skeleton              | <code>let</code> | No       | <code>boolean</code>                                 | <code>false</code>                               | Set to `true` to display the skeleton state                                                                                |
+| skeleton              | <code>let</code> | No       | <code>boolean</code>                                 | <code>false</code>                               | Set to `true` to display the skeleton state                                                                                                                                   |
-| copyButtonDescription | <code>let</code> | No       | <code>string</code>                                  | --                                               | Specify the ARIA label for the copy button icon                                                                            |
+| copyButtonDescription | <code>let</code> | No       | <code>string</code>                                  | --                                               | Specify the ARIA label for the copy button icon                                                                                                                               |
-| copyLabel             | <code>let</code> | No       | <code>string</code>                                  | --                                               | Specify the ARIA label of the copy button                                                                                  |
+| copyLabel             | <code>let</code> | No       | <code>string</code>                                  | --                                               | Specify the ARIA label of the copy button                                                                                                                                     |
-| feedback              | <code>let</code> | No       | <code>string</code>                                  | <code>"Copied!"</code>                           | Specify the feedback text displayed when clicking the snippet                                                              |
+| feedback              | <code>let</code> | No       | <code>string</code>                                  | <code>"Copied!"</code>                           | Specify the feedback text displayed when clicking the snippet                                                                                                                 |
-| feedbackTimeout       | <code>let</code> | No       | <code>number</code>                                  | <code>2000</code>                                | Set the timeout duration (ms) to display feedback text                                                                     |
+| feedbackTimeout       | <code>let</code> | No       | <code>number</code>                                  | <code>2000</code>                                | Set the timeout duration (ms) to display feedback text                                                                                                                        |
-| showLessText          | <code>let</code> | No       | <code>string</code>                                  | <code>"Show less"</code>                         | Specify the show less text<br />`type` must be "multi"                                                                     |
+| showLessText          | <code>let</code> | No       | <code>string</code>                                  | <code>"Show less"</code>                         | Specify the show less text<br />`type` must be "multi"                                                                                                                        |
-| showMoreText          | <code>let</code> | No       | <code>string</code>                                  | <code>"Show more"</code>                         | Specify the show more text<br />`type` must be "multi"                                                                     |
+| showMoreText          | <code>let</code> | No       | <code>string</code>                                  | <code>"Show more"</code>                         | Specify the show more text<br />`type` must be "multi"                                                                                                                        |
-| id                    | <code>let</code> | No       | <code>string</code>                                  | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the code element                                                                                             |
+| id                    | <code>let</code> | No       | <code>string</code>                                  | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the code element                                                                                                                                                |
 
 ### Slots
 
@@ -528,13 +529,14 @@ None.
 
 ### Events
 
-| Event name   | Type      | Detail |
+| Event name   | Type       | Detail |
-| :----------- | :-------- | :----- |
+| :----------- | :--------- | :----- |
-| click        | forwarded | --     |
+| click        | forwarded  | --     |
-| mouseover    | forwarded | --     |
+| mouseover    | forwarded  | --     |
-| mouseenter   | forwarded | --     |
+| mouseenter   | forwarded  | --     |
-| mouseleave   | forwarded | --     |
+| mouseleave   | forwarded  | --     |
-| animationend | forwarded | --     |
+| animationend | forwarded  | --     |
+| copy         | dispatched | --     |
 
 ## `CodeSnippetSkeleton`
 
@@ -798,6 +800,7 @@ None.
 | selected     | <code>let</code> | Yes      | <code>boolean</code>                                         | <code>false</code>                               | Set to `true` to use the selected variant                                                                                          |
 | icon         | <code>let</code> | Yes      | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | --                                               | Specify the icon from `carbon-icons-svelte` to render<br />Icon is rendered to the left of the label text                          |
 | indented     | <code>let</code> | Yes      | <code>boolean</code>                                         | <code>false</code>                               | Set to `true` to indent the label                                                                                                  |
+| kind         | <code>let</code> | No       | <code>"default" &#124; "danger"</code>                       | <code>"default"</code>                           | Specify the kind of option                                                                                                         |
 | disabled     | <code>let</code> | No       | <code>boolean</code>                                         | <code>false</code>                               | Set to `true` to enable the disabled state                                                                                         |
 | labelText    | <code>let</code> | No       | <code>string</code>                                          | <code>""</code>                                  | Specify the label text<br />Alternatively, use the "labelText" slot (e.g., &lt;span slot="labelText"&gt;...&lt;/span&gt;)          |
 | shortcutText | <code>let</code> | No       | <code>string</code>                                          | <code>""</code>                                  | Specify the shortcut text<br />Alternatively, use the "shortcutText" slot (e.g., &lt;span slot="shortcutText"&gt;...&lt;/span&gt;) |
@@ -869,6 +872,7 @@ None.
 | Prop name       | Kind             | Reactive | Type                | Default value                    | Description                                      |
 | :-------------- | :--------------- | :------- | :------------------ | -------------------------------- | ------------------------------------------------ |
 | iconDescription | <code>let</code> | No       | <code>string</code> | <code>"Copy to clipboard"</code> | Set the title and ARIA label for the copy button |
+| text            | <code>let</code> | No       | <code>string</code> | --                               | Specify the text to copy                         |
 
 ### Slots
 
@@ -876,10 +880,11 @@ None.
 
 ### Events
 
-| Event name   | Type      | Detail |
+| Event name   | Type       | Detail |
-| :----------- | :-------- | :----- |
+| :----------- | :--------- | :----- |
-| click        | forwarded | --     |
+| click        | forwarded  | --     |
-| animationend | forwarded | --     |
+| animationend | forwarded  | --     |
+| copy         | dispatched | --     |
 
 ## `DataTable`
 
@@ -894,7 +899,7 @@ export interface DataTableEmptyHeader {
   key: DataTableKey;
   empty: boolean;
   display?: (item: Value) => DataTableValue;
-  sort?: (a: DataTableValue, b: DataTableValue) => 0 | -1 | 1;
+  sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1);
   columnMenu?: boolean;
 }
 
@@ -902,7 +907,7 @@ export interface DataTableNonEmptyHeader {
   key: DataTableKey;
   value: DataTableValue;
   display?: (item: Value) => DataTableValue;
-  sort?: (a: DataTableValue, b: DataTableValue) => 0 | -1 | 1;
+  sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1);
   columnMenu?: boolean;
 }
 
@@ -952,16 +957,16 @@ export interface DataTableCell {
 
 ### Events
 
-| Event name           | Type       | Detail                                                                                                 |
+| Event name           | Type       | Detail                                                                                                  |
-| :------------------- | :--------- | :----------------------------------------------------------------------------------------------------- |
+| :------------------- | :--------- | :------------------------------------------------------------------------------------------------------ |
-| click                | dispatched | <code>{ header?: DataTableHeader; row?: DataTableRow; cell?: DataTableCell; }</code>                   |
+| click                | dispatched | <code>{ header?: DataTableHeader; row?: DataTableRow; cell?: DataTableCell; }</code>                    |
-| click:header--expand | dispatched | <code>{ expanded: boolean; }</code>                                                                    |
+| click:header--expand | dispatched | <code>{ expanded: boolean; }</code>                                                                     |
-| click:header         | dispatched | <code>{ header: DataTableHeader; sortDirection: "ascending" &#124; "descending" &#124; "none" }</code> |
+| click:header         | dispatched | <code>{ header: DataTableHeader; sortDirection?: "ascending" &#124; "descending" &#124; "none" }</code> |
-| click:row            | dispatched | <code>DataTableRow</code>                                                                              |
+| click:row            | dispatched | <code>DataTableRow</code>                                                                               |
-| mouseenter:row       | dispatched | <code>DataTableRow</code>                                                                              |
+| mouseenter:row       | dispatched | <code>DataTableRow</code>                                                                               |
-| mouseleave:row       | dispatched | <code>DataTableRow</code>                                                                              |
+| mouseleave:row       | dispatched | <code>DataTableRow</code>                                                                               |
-| click:row--expand    | dispatched | <code>{ expanded: boolean; row: DataTableRow; }</code>                                                 |
+| click:row--expand    | dispatched | <code>{ expanded: boolean; row: DataTableRow; }</code>                                                  |
-| click:cell           | dispatched | <code>DataTableCell</code>                                                                             |
+| click:cell           | dispatched | <code>DataTableCell</code>                                                                              |
 
 ## `DataTableSkeleton`
 
@@ -1402,12 +1407,13 @@ None.
 
 ### Props
 
-| Prop name   | Kind             | Reactive | Type                 | Default value      | Description                                |
+| Prop name   | Kind             | Reactive | Type                 | Default value      | Description                                   |
-| :---------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------------ |
+| :---------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------------- |
-| invalid     | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
+| invalid     | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state    |
-| message     | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to render a form requirement |
+| message     | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to render a form requirement    |
-| messageText | <code>let</code> | No       | <code>string</code>  | <code>""</code>    | Specify the message text                   |
+| noMargin    | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` for to remove the bottom margin |
-| legendText  | <code>let</code> | No       | <code>string</code>  | <code>""</code>    | Specify the legend text                    |
+| messageText | <code>let</code> | No       | <code>string</code>  | <code>""</code>    | Specify the message text                      |
+| legendText  | <code>let</code> | No       | <code>string</code>  | <code>""</code>    | Specify the legend text                       |
 
 ### Slots
 
@@ -2323,6 +2329,7 @@ export interface MultiSelectItem {
 
 | Prop name         | Kind             | Reactive | Type                                                                                           | Default value                                                                       | Description                                                                           |
 | :---------------- | :--------------- | :------- | :--------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
+| inputRef          | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code>                                                      | <code>null</code>                                                                   | Obtain a reference to the input HTML element                                          |
 | open              | <code>let</code> | Yes      | <code>boolean</code>                                                                           | <code>false</code>                                                                  | Set to `true` to open the dropdown                                                    |
 | value             | <code>let</code> | Yes      | <code>string</code>                                                                            | <code>""</code>                                                                     | Specify the multiselect value                                                         |
 | selectedIds       | <code>let</code> | Yes      | <code>MultiSelectItemId[]</code>                                                               | <code>[]</code>                                                                     | Set the selected ids                                                                  |
@@ -2576,13 +2583,13 @@ None.
 | :--------------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------- |
 | menuRef          | <code>let</code> | Yes      | <code>null &#124; HTMLUListElement</code>                    | <code>null</code>                                | Obtain a reference to the overflow menu element                   |
 | buttonRef        | <code>let</code> | Yes      | <code>null &#124; HTMLButtonElement</code>                   | <code>null</code>                                | Obtain a reference to the trigger button element                  |
+| icon             | <code>let</code> | Yes      | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | --                                               | Specify the icon from `carbon-icons-svelte` to render             |
 | open             | <code>let</code> | Yes      | <code>boolean</code>                                         | <code>false</code>                               | Set to `true` to open the menu                                    |
 | size             | <code>let</code> | No       | <code>"sm" &#124; "xl"</code>                                | --                                               | Specify the size of the overflow menu                             |
 | direction        | <code>let</code> | No       | <code>"top" &#124; "bottom"</code>                           | <code>"bottom"</code>                            | Specify the direction of the overflow menu relative to the button |
 | light            | <code>let</code> | No       | <code>boolean</code>                                         | <code>false</code>                               | Set to `true` to enable the light variant                         |
 | flipped          | <code>let</code> | No       | <code>boolean</code>                                         | <code>false</code>                               | Set to `true` to flip the menu relative to the button             |
 | menuOptionsClass | <code>let</code> | No       | <code>string</code>                                          | --                                               | Specify the menu options class                                    |
-| icon             | <code>let</code> | No       | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | --                                               | Specify the icon from `carbon-icons-svelte` to render             |
 | iconClass        | <code>let</code> | No       | <code>string</code>                                          | --                                               | Specify the icon class                                            |
 | iconDescription  | <code>let</code> | No       | <code>string</code>                                          | <code>"Open and close list of options"</code>    | Specify the ARIA label for the icon                               |
 | id               | <code>let</code> | No       | <code>string</code>                                          | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the button element                                  |
@@ -2945,6 +2952,7 @@ None.
 | :-------------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | -------------------------------------------------------- |
 | checked         | <code>let</code> | Yes      | <code>boolean</code> | <code>false</code>                               | Set to `true` to check the tile                          |
 | light           | <code>let</code> | No       | <code>boolean</code> | <code>false</code>                               | Set to `true` to enable the light variant                |
+| disabled        | <code>let</code> | No       | <code>boolean</code> | <code>false</code>                               | Set to `true` to disable the tile                        |
 | value           | <code>let</code> | No       | <code>string</code>  | <code>""</code>                                  | Specify the value of the radio input                     |
 | tabindex        | <code>let</code> | No       | <code>string</code>  | <code>"0"</code>                                 | Specify the tabindex                                     |
 | iconDescription | <code>let</code> | No       | <code>string</code>  | <code>"Tile checkmark"</code>                    | Specify the ARIA label for the radio tile checkmark icon |
@@ -3002,6 +3010,7 @@ None.
 | value                | <code>let</code> | Yes      | <code>string</code>                       | <code>""</code>                                  | Specify the value of the search input                   |
 | small                | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | --                                                      |
 | size                 | <code>let</code> | No       | <code>"sm" &#124; "lg" &#124; "xl"</code> | <code>"xl"</code>                                | Specify the size of the search input                    |
+| searchClass          | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the class name passed to the outer div element  |
 | skeleton             | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to display the skeleton state             |
 | light                | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to enable the light variant               |
 | disabled             | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to disable the search input               |
@@ -3158,6 +3167,7 @@ None.
 | ref             | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code> | <code>null</code>                                | Obtain a reference to the input HTML element                  |
 | selected        | <code>let</code> | Yes      | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to select the tile                              |
 | light           | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to enable the light variant                     |
+| disabled        | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to disable the tile                             |
 | title           | <code>let</code> | No       | <code>string</code>                       | <code>"title"</code>                             | Specify the title of the selectable tile                      |
 | value           | <code>let</code> | No       | <code>string</code>                       | <code>"value"</code>                             | Specify the value of the selectable tile                      |
 | tabindex        | <code>let</code> | No       | <code>string</code>                       | <code>"0"</code>                                 | Specify the tabindex                                          |
@@ -3762,11 +3772,12 @@ None.
 
 ### Props
 
-| Prop name       | Kind             | Reactive | Type                      | Default value                                    | Description                          |
+| Prop name       | Kind             | Reactive | Type                      | Default value                                    | Description                                            |
-| :-------------- | :--------------- | :------- | :------------------------ | ------------------------------------------------ | ------------------------------------ |
+| :-------------- | :--------------- | :------- | :------------------------ | ------------------------------------------------ | ------------------------------------------------------ |
-| scope           | <code>let</code> | No       | <code>string</code>       | <code>"col"</code>                               | Specify the `scope` attribute        |
+| disableSorting  | <code>let</code> | No       | <code>boolean</code>      | <code>false</code>                               | Set to `true` to disable sorting on this specific cell |
-| translateWithId | <code>let</code> | No       | <code>() => string</code> | <code>() => ""</code>                            | Override the default id translations |
+| scope           | <code>let</code> | No       | <code>string</code>       | <code>"col"</code>                               | Specify the `scope` attribute                          |
-| id              | <code>let</code> | No       | <code>string</code>       | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the top-level element  |
+| translateWithId | <code>let</code> | No       | <code>() => string</code> | <code>() => ""</code>                            | Override the default id translations                   |
+| id              | <code>let</code> | No       | <code>string</code>       | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the top-level element                    |
 
 ### Slots
 
@@ -4464,6 +4475,24 @@ None.
 | mouseleave | forwarded | --     |
 | focus      | forwarded | --     |
 
+## `TooltipFooter`
+
+### Props
+
+| Prop name            | Kind             | Reactive | Type                | Default value                                  | Description                                                                 |
+| :------------------- | :--------------- | :------- | :------------------ | ---------------------------------------------- | --------------------------------------------------------------------------- |
+| selectorPrimaryFocus | <code>let</code> | No       | <code>string</code> | <code>"a[href], button:not([disabled])"</code> | Specify a selector to be focused inside the footer when opening the tooltip |
+
+### Slots
+
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| --        | Yes     | --    | --       |
+
+### Events
+
+None.
+
 ## `TooltipIcon`
 
 ### Props

docs/package.json

@@ -11,9 +11,8 @@
   "devDependencies": {
     "@sveltech/routify": "^1.9.9",
     "autoprefixer": "^10.2.3",
-    "carbon-components": "10.31.0",
+    "carbon-components": "10.32.0",
     "carbon-components-svelte": "../",
-    "clipboard-copy": "^3.1.0",
     "mdsvex": "^0.8.8",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.2.4",

docs/src/COMPONENT_API.json

@@ -1,5 +1,5 @@
 {
-  "total": 166,
+  "total": 167,
   "components": [
     {
       "moduleName": "Accordion",
@@ -805,7 +805,7 @@
         {
           "name": "code",
           "kind": "let",
-          "description": "Set the code snippet text\nAlternatively, use the default slot (e.g., <CodeSnippet>{`code`}</CodeSnippet>)",
+          "description": "Set the code snippet text\nAlternatively, use the default slot (e.g., <CodeSnippet>{`code`}</CodeSnippet>)\nYou must use the `code` prop to copy the code",
           "type": "string",
           "isFunction": false,
           "constant": false,
@@ -989,7 +989,12 @@
           "name": "mouseleave",
           "element": "CodeSnippetSkeleton"
         },
-        { "type": "forwarded", "name": "animationend", "element": "CopyButton" }
+        {
+          "type": "forwarded",
+          "name": "animationend",
+          "element": "CopyButton"
+        },
+        { "type": "dispatched", "name": "copy" }
       ],
       "typedefs": [],
       "rest_props": { "type": "InlineComponent", "name": "CodeSnippetSkeleton" }
@@ -1651,6 +1656,16 @@
       "moduleName": "ContextMenuOption",
       "filePath": "src/ContextMenu/ContextMenuOption.svelte",
       "props": [
+        {
+          "name": "kind",
+          "kind": "let",
+          "description": "Specify the kind of option",
+          "type": "\"default\" | \"danger\"",
+          "value": "\"default\"",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "disabled",
           "kind": "let",
@@ -1857,12 +1872,22 @@
           "isFunction": false,
           "constant": false,
           "reactive": false
+        },
+        {
+          "name": "text",
+          "kind": "let",
+          "description": "Specify the text to copy",
+          "type": "string",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
         }
       ],
       "slots": [],
       "events": [
         { "type": "forwarded", "name": "click", "element": "Copy" },
-        { "type": "forwarded", "name": "animationend", "element": "Copy" }
+        { "type": "forwarded", "name": "animationend", "element": "Copy" },
+        { "type": "dispatched", "name": "copy" }
       ],
       "typedefs": [],
       "rest_props": { "type": "InlineComponent", "name": "Copy" },
@@ -2056,7 +2081,7 @@
         {
           "type": "dispatched",
           "name": "click:header",
-          "detail": "{ header: DataTableHeader; sortDirection: \"ascending\" | \"descending\" | \"none\" }"
+          "detail": "{ header: DataTableHeader; sortDirection?: \"ascending\" | \"descending\" | \"none\" }"
         },
         { "type": "dispatched", "name": "click:row", "detail": "DataTableRow" },
         {
@@ -2092,14 +2117,14 @@
           "ts": "type DataTableValue = any"
         },
         {
-          "type": "{ key: DataTableKey; empty: boolean; display?: (item: Value) => DataTableValue; sort?: (a: DataTableValue, b: DataTableValue) => (0 | -1 | 1); columnMenu?: boolean; }",
+          "type": "{ key: DataTableKey; empty: boolean; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; }",
           "name": "DataTableEmptyHeader",
-          "ts": "interface DataTableEmptyHeader { key: DataTableKey; empty: boolean; display?: (item: Value) => DataTableValue; sort?: (a: DataTableValue, b: DataTableValue) => (0 | -1 | 1); columnMenu?: boolean; }"
+          "ts": "interface DataTableEmptyHeader { key: DataTableKey; empty: boolean; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; }"
         },
         {
-          "type": "{ key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; sort?: (a: DataTableValue, b: DataTableValue) => (0 | -1 | 1); columnMenu?: boolean; }",
+          "type": "{ key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; }",
           "name": "DataTableNonEmptyHeader",
-          "ts": "interface DataTableNonEmptyHeader { key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; sort?: (a: DataTableValue, b: DataTableValue) => (0 | -1 | 1); columnMenu?: boolean; }"
+          "ts": "interface DataTableNonEmptyHeader { key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; }"
         },
         {
           "type": "DataTableNonEmptyHeader | DataTableEmptyHeader",
@@ -2207,10 +2232,7 @@
       ],
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "div" },
-      "extends": {
+      "extends": { "interface": "DataTableHeader", "import": "\"./DataTable\"" }
-        "interface": "DataTableHeader",
-        "import": "\"../DataTable/DataTable\""
-      }
     },
     {
       "moduleName": "DatePicker",
@@ -3499,6 +3521,16 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "noMargin",
+          "kind": "let",
+          "description": "Set to `true` for to remove the bottom margin",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "messageText",
           "kind": "let",
@@ -5766,6 +5798,16 @@
           "isFunction": false,
           "constant": false,
           "reactive": false
+        },
+        {
+          "name": "inputRef",
+          "kind": "let",
+          "description": "Obtain a reference to the input HTML element",
+          "type": "null | HTMLInputElement",
+          "value": "null",
+          "isFunction": false,
+          "constant": false,
+          "reactive": true
         }
       ],
       "slots": [],
@@ -6354,7 +6396,7 @@
           "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
           "isFunction": false,
           "constant": false,
-          "reactive": false
+          "reactive": true
         },
         {
           "name": "iconClass",
@@ -7518,6 +7560,16 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "disabled",
+          "kind": "let",
+          "description": "Set to `true` to disable the tile",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "value",
           "kind": "let",
@@ -7690,6 +7742,16 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "searchClass",
+          "kind": "let",
+          "description": "Specify the class name passed to the outer div element",
+          "type": "string",
+          "value": "\"\"",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "skeleton",
           "kind": "let",
@@ -8171,6 +8233,16 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "disabled",
+          "kind": "let",
+          "description": "Set to `true` to disable the tile",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "title",
           "kind": "let",
@@ -9369,6 +9441,16 @@
       "moduleName": "TableHeader",
       "filePath": "src/DataTable/TableHeader.svelte",
       "props": [
+        {
+          "name": "disableSorting",
+          "kind": "let",
+          "description": "Set to `true` to disable sorting on this specific cell",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "scope",
           "kind": "let",
@@ -11157,6 +11239,25 @@
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "div" }
     },
+    {
+      "moduleName": "TooltipFooter",
+      "filePath": "src/Tooltip/TooltipFooter.svelte",
+      "props": [
+        {
+          "name": "selectorPrimaryFocus",
+          "kind": "let",
+          "description": "Specify a selector to be focused inside the footer when opening the tooltip",
+          "type": "string",
+          "value": "\"a[href], button:not([disabled])\"",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        }
+      ],
+      "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
+      "events": [],
+      "typedefs": []
+    },
     {
       "moduleName": "TooltipIcon",
       "filePath": "src/TooltipIcon/TooltipIcon.svelte",

docs/src/components/InlineSnippet.svelte

@@ -2,17 +2,10 @@
   export let code = "";
 
   import { CodeSnippet } from "carbon-components-svelte";
-  import copy from "clipboard-copy";
 </script>
 
 <div>
-  <CodeSnippet
+  <CodeSnippet code="{code}" type="inline" />
-    code="{code}"
-    type="inline"
-    on:click="{() => {
-      copy(code);
-    }}"
-  />
 </div>
 
 <style>

docs/src/components/Preview.svelte

@@ -6,7 +6,6 @@
 
   import { CodeSnippet, Button } from "carbon-components-svelte";
   import Launch16 from "carbon-icons-svelte/lib/Launch16";
-  import copy from "clipboard-copy";
   import { url } from "@sveltech/routify";
   import { theme } from "../store";
 
@@ -41,7 +40,7 @@
     {/if}
   </div>
   <div class="code-override">
-    <CodeSnippet type="multi" on:click="{() => copy(codeRaw)}">
+    <CodeSnippet type="multi" code="{codeRaw}">
       {@html code}
     </CodeSnippet>
   </div>

docs/src/pages/_layout.svelte

@@ -105,7 +105,11 @@
           >
             {child.title}
             {#if deprecated.includes(child.title)}
-              <Tag size="sm" type="red" style="margin-top: 0; margin-bottom: 0">
+              <Tag
+                size="sm"
+                type="red"
+                style="margin-top: 0; margin-bottom: 0; cursor: inherit"
+              >
                 Deprecated
               </Tag>
             {/if}
@@ -113,7 +117,7 @@
               <Tag
                 size="sm"
                 type="green"
-                style="margin-top: 0; margin-bottom: 0"
+                style="margin-top: 0; margin-bottom: 0; cursor: inherit"
               >
                 New
               </Tag>

docs/src/pages/components/Breadcrumb.svx

@@ -6,6 +6,8 @@ components: ["Breadcrumb", "BreadcrumbItem"]
   import {
     Breadcrumb,
     BreadcrumbItem,
+    OverflowMenu,
+    OverflowMenuItem
   } from "carbon-components-svelte";
   import Preview from "../../components/Preview.svelte";
 </script>
@@ -27,6 +29,20 @@ See the [Breadcrumbs recipe](/recipes/Breadcrumbs) for a reusable breadcrumbs co
   <BreadcrumbItem href="/profile" isCurrentPage>Profile</BreadcrumbItem>
 </Breadcrumb>
 
+### Overflow menu
+
+<Breadcrumb>
+  <BreadcrumbItem href="/">Home</BreadcrumbItem>
+  <BreadcrumbItem href="/api">API documentation</BreadcrumbItem>
+  <BreadcrumbItem>
+    <OverflowMenu>
+      <OverflowMenuItem href="/api/data" text="Data" />
+      <OverflowMenuItem href="/api/data/latest" text="Latest" />
+    </OverflowMenu>
+  </BreadcrumbItem>
+  <BreadcrumbItem href="/api/data/latest/usage" isCurrentPage>Usage</BreadcrumbItem>
+</Breadcrumb>
+
 ### Skeleton
 
 <Breadcrumb noTrailingSlash skeleton count={3} />

docs/src/pages/components/CodeSnippet.svx

@@ -28,21 +28,27 @@ let comment = `
 </script>
 
 <InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
-  <div class="body-short-01">By design, the copy button does not copy text to the clipboard. You will need to write your own logic. Refer to the <Link href="/recipes/CopyableCodeSnippet">CopyableCodeSnippet recipe</Link> for an example.</div>
+  <div class="body-short-01">As of version 0.32, the CodeSnippet will copy the provided `code` text when clicking the copy button.</div>
 </InlineNotification>
 
 ### Default (single-line)
 
-<CodeSnippet>yarn add -D carbon-components-svelte</CodeSnippet>
+<CodeSnippet code="yarn add -D carbon-components-svelte" />
 
 ### Inline
 
-<CodeSnippet type="inline">rm -rf node_modules/</CodeSnippet>
+<CodeSnippet type="inline" code="rm -rf node_modules/" />
 
 ### Multi-line
 
 <CodeSnippet type="multi" {code} />
 
+### Custom copy feedback text
+
+Use the `feedback` prop to override the default copy button feedback text.
+
+<CodeSnippet type="multi" {code} feedback="Copied to clipboard" />
+
 ### Hidden copy button
 
 <CodeSnippet type="multi" {code} hideCopyButton />
@@ -51,7 +57,7 @@ let comment = `
 
 The `disabled` prop applies only to the `"single"` and `"multi"` code snippet types.
 
-<CodeSnippet disabled>yarn add -D carbon-components-svelte</CodeSnippet>
+<CodeSnippet disabled code="yarn add -D carbon-components-svelte" />
 <br />
 <CodeSnippet disabled type="multi" code="{comment}" />
 

docs/src/pages/components/ContentSwitcher.svx

@@ -28,13 +28,6 @@ components: ["ContentSwitcher", "Switch"]
 
 <FileSource src="/framed/ContentSwitcher/ContentSwitcherReactive" />
 
-### Light variant
-
-<ContentSwitcher light>
-  <Switch text="Latest news" />
-  <Switch text="Trending" />
-</ContentSwitcher>
-
 ### Custom switch slot
 
 <ContentSwitcher>

docs/src/pages/components/CopyButton.svx

@@ -4,13 +4,13 @@
 </script>
 
 <InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
-  <div class="body-short-01">By design, the copy button does not copy text to the clipboard. You will need to write your own logic. Refer to the <Link href="/recipes/CopyableCodeSnippet">CopyableCodeSnippet recipe</Link> for an example.</div>
+  <div class="body-short-01">As of version 0.32, this component will copy the provided `code` text when clicking the button.</div>
 </InlineNotification>
 
 ### Default
 
-<CopyButton on:click />
+<CopyButton text="Carbon svelte" />
 
-### Custom feedback
+### Custom feedback text
 
-<CopyButton on:click feedback="Copied to clipboard" />
+<CopyButton text="Carbon svelte" feedback="Copied to clipboard" />

docs/src/pages/components/DataTable.svx

@@ -550,10 +550,16 @@ The slot name for the table header cells is `"cell-header"`.
 
 ### Sortable
 
+Set `sortable` to `true` to enable table column sorting.
+
+To disable sorting on a specific column, set `sort` to `false` in the header object passed to the `headers` prop.
+
+In the example below, the "Protocol" column is not sortable.
+
 <DataTable sortable
   headers="{[
     { key: "name", value: "Name" },
-    { key: "protocol", value: "Protocol" },
+    { key: "protocol", value: "Protocol", sort: false },
     { key: "port", value: "Port" },
     { key: "rule", value: "Rule" }
   ]}"
@@ -757,6 +763,189 @@ In the following example, each row in the sortable data table has an overflow me
   </div>
 </DataTable>
 
+### Expandable (compact size)
+
+<DataTable size="compact" expandable
+  headers="{[
+    { key: "name", value: "Name" },
+    { key: "protocol", value: "Protocol" },
+    { key: "port", value: "Port" },
+    { key: "rule", value: "Rule" }
+  ]}"
+  rows="{[
+    {
+      id: "a",
+      name: "Load Balancer 3",
+      protocol: "HTTP",
+      port: 3000,
+      rule: "Round robin"
+    },
+    {
+      id: "b",
+      name: "Load Balancer 1",
+      protocol: "HTTP",
+      port: 443,
+      rule: "Round robin"
+    },
+    {
+      id: "c",
+      name: "Load Balancer 2",
+      protocol: "HTTP",
+      port: 80,
+      rule: "DNS delegation"
+    },
+    {
+      id: "d",
+      name: "Load Balancer 6",
+      protocol: "HTTP",
+      port: 3000,
+      rule: "Round robin"
+    },
+    {
+      id: "e",
+      name: "Load Balancer 4",
+      protocol: "HTTP",
+      port: 443,
+      rule: "Round robin"
+    },
+    {
+      id: "f",
+      name: "Load Balancer 5",
+      protocol: "HTTP",
+      port: 80,
+      rule: "DNS delegation"
+    },
+  ]}"
+>
+  <div slot="expanded-row" let:row>
+    <pre>
+      {JSON.stringify(row, null, 2)}
+    </pre>
+  </div>
+</DataTable>
+
+### Expandable (short size)
+
+<DataTable size="short" expandable
+  headers="{[
+    { key: "name", value: "Name" },
+    { key: "protocol", value: "Protocol" },
+    { key: "port", value: "Port" },
+    { key: "rule", value: "Rule" }
+  ]}"
+  rows="{[
+    {
+      id: "a",
+      name: "Load Balancer 3",
+      protocol: "HTTP",
+      port: 3000,
+      rule: "Round robin"
+    },
+    {
+      id: "b",
+      name: "Load Balancer 1",
+      protocol: "HTTP",
+      port: 443,
+      rule: "Round robin"
+    },
+    {
+      id: "c",
+      name: "Load Balancer 2",
+      protocol: "HTTP",
+      port: 80,
+      rule: "DNS delegation"
+    },
+    {
+      id: "d",
+      name: "Load Balancer 6",
+      protocol: "HTTP",
+      port: 3000,
+      rule: "Round robin"
+    },
+    {
+      id: "e",
+      name: "Load Balancer 4",
+      protocol: "HTTP",
+      port: 443,
+      rule: "Round robin"
+    },
+    {
+      id: "f",
+      name: "Load Balancer 5",
+      protocol: "HTTP",
+      port: 80,
+      rule: "DNS delegation"
+    },
+  ]}"
+>
+  <div slot="expanded-row" let:row>
+    <pre>
+      {JSON.stringify(row, null, 2)}
+    </pre>
+  </div>
+</DataTable>
+
+### Expandable (tall size)
+
+<DataTable size="tall" expandable
+  headers="{[
+    { key: "name", value: "Name" },
+    { key: "protocol", value: "Protocol" },
+    { key: "port", value: "Port" },
+    { key: "rule", value: "Rule" }
+  ]}"
+  rows="{[
+    {
+      id: "a",
+      name: "Load Balancer 3",
+      protocol: "HTTP",
+      port: 3000,
+      rule: "Round robin"
+    },
+    {
+      id: "b",
+      name: "Load Balancer 1",
+      protocol: "HTTP",
+      port: 443,
+      rule: "Round robin"
+    },
+    {
+      id: "c",
+      name: "Load Balancer 2",
+      protocol: "HTTP",
+      port: 80,
+      rule: "DNS delegation"
+    },
+    {
+      id: "d",
+      name: "Load Balancer 6",
+      protocol: "HTTP",
+      port: 3000,
+      rule: "Round robin"
+    },
+    {
+      id: "e",
+      name: "Load Balancer 4",
+      protocol: "HTTP",
+      port: 443,
+      rule: "Round robin"
+    },
+    {
+      id: "f",
+      name: "Load Balancer 5",
+      protocol: "HTTP",
+      port: 80,
+      rule: "DNS delegation"
+    },
+  ]}"
+>
+  <div slot="expanded-row" let:row>
+    <pre>
+      {JSON.stringify(row, null, 2)}
+    </pre>
+  </div>
+</DataTable>
+
 ### Batch expansion
 
 <DataTable batchExpansion
@@ -832,6 +1021,12 @@ In the following example, each row in the sortable data table has an overflow me
 
 <DataTableSkeleton headers={[{ value: "Name" }, {value: "Protocol"}, {value:"Port"}, { value: "Rule"}]} rows={10} />
 
+### Skeleton with empty header
+
+Pass an object with `"empty"` set to `true` to render an empty table header column.
+
+<DataTableSkeleton headers={[{ value: "Name" }, {value: "Protocol"}, {value:"Port"}, { value: "Rule"}, { empty: true }]} rows={10} />
+
 ### Skeleton without header, toolbar
 
 <DataTableSkeleton showHeader={false} showToolbar={false} />

docs/src/pages/components/RadioTile.svx

@@ -33,4 +33,18 @@ components: ["TileGroup", "RadioTile"]
   <RadioTile light value="2">
     Plus plan
   </RadioTile>
+</TileGroup>
+
+### Disabled state
+
+<TileGroup legend="Service pricing tiers">
+  <RadioTile value="0" checked>
+    Lite plan
+  </RadioTile>
+  <RadioTile value="1" disabled>
+    Standard plan
+  </RadioTile>
+  <RadioTile value="2" disabled>
+    Plus plan
+  </RadioTile>
 </TileGroup>

docs/src/pages/components/SelectableTile.svx

@@ -33,4 +33,18 @@ components: ["SelectableTile"]
   <SelectableTile light>
     Multi-select Tile
   </SelectableTile>
+</div>
+
+### Disabled state
+
+<div role="group" aria-label="selectable tiles">
+  <SelectableTile selected>
+    Multi-select Tile
+  </SelectableTile>
+  <SelectableTile disabled>
+    Multi-select Tile
+  </SelectableTile>
+  <SelectableTile disabled>
+    Multi-select Tile
+  </SelectableTile>
 </div>

docs/src/pages/components/TimePicker.svx

@@ -59,7 +59,21 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
   </TimePickerSelect>
 </TimePicker>
 
-### Disabled
+### Invalid state
+
+<TimePicker invalid invalidText="A valid value is required" labelText="Cron job" placeholder="hh:mm">
+  <TimePickerSelect value="PM">
+    <SelectItem value="am" text="AM" />
+    <SelectItem value="pm" text="PM" />
+  </TimePickerSelect>
+  <TimePickerSelect value="PDT">
+    <SelectItem value="pdt" text="PDT" />
+    <SelectItem value="gmt" text="GMT" />
+  </TimePickerSelect>
+</TimePicker>
+
+
+### Disabled state
 
 <TimePicker labelText="Cron job" placeholder="hh:mm" disabled>
   <TimePickerSelect value="PM" disabled>

docs/src/pages/components/Tooltip.svx

@@ -1,5 +1,9 @@
+---
+components: ["Tooltip", "TooltipFooter"]
+---
+
 <script>
-  import { Tooltip, Link, Button } from "carbon-components-svelte";
+  import { Tooltip, TooltipFooter, Link, Button } from "carbon-components-svelte";
   import Catalog16 from "carbon-icons-svelte/lib/Catalog16";
   import Preview from "../../components/Preview.svelte";
 </script>
@@ -45,10 +49,10 @@ By default, the tooltip is triggered by an information icon.
   <p>
     Resources are provisioned based on your account's organization.
   </p>
-  <div class="bx--tooltip__footer">
+  <TooltipFooter selectorPrimaryFocus="#d">
     <Link href="/">Learn more</Link>
-    <Button size="small">Manage</Button>
+    <Button id="d" size="small">Manage</Button>
-  </div>
+</TooltipFooter>
 </Tooltip>
 
 ### Custom icon (component)

docs/src/pages/framed/ContextMenu/ContextMenu.svelte

@@ -42,4 +42,6 @@
     <ContextMenuOption id="1" labelText="Reduce noise" />
     <ContextMenuOption id="2" labelText="Auto-sharpen" />
   </ContextMenuGroup>
+  <ContextMenuDivider />
+  <ContextMenuOption indented kind="danger" labelText="Delete" />
 </ContextMenu>

docs/src/pages/framed/CopyableCodeSnippet/CopyableCodeSnippet.svelte

@@ -1,8 +0,0 @@
-<script>
-  export let code = "yarn add -D carbon-component-svelte";
-
-  import { CodeSnippet } from "carbon-components-svelte";
-  import copy from "clipboard-copy";
-</script>
-
-<CodeSnippet on:click="{() => copy(code)}" code="{code}" />

docs/src/pages/index.svelte

@@ -9,7 +9,6 @@
   } from "carbon-components-svelte";
   import TileCard from "../components/TileCard.svelte";
   import { metatags } from "@sveltech/routify";
-  import copy from "clipboard-copy";
 
   metatags.title = "Carbon Components Svelte";
   metatags.description =
@@ -53,21 +52,9 @@
       <Column>
         <h3>Install</h3>
         <h4>Installing with yarn:</h4>
-        <CodeSnippet
+        <CodeSnippet code="{installYarn}" />
-          code="{installYarn}"
-          on:click="{() => {
-            copy(installYarn);
-          }}"
-        />
-
         <h4>Using npm:</h4>
-
+        <CodeSnippet code="{installNpm}" />
-        <CodeSnippet
-          code="{installNpm}"
-          on:click="{() => {
-            copy(installNpm);
-          }}"
-        />
       </Column>
     </Row>
     <Row>

docs/src/pages/recipes/CopyableCodeSnippet.svx

@@ -1,17 +0,0 @@
----
-layout: recipe
----
-
-<script>
-  import Preview from "../../components/Preview.svelte";
-</script>
-
-The [CodeSnippet](/components/CodeSnippet) and [CopyButton](/components/CopyButton) components do not include logic to copy the supplied `code` text.
-
-You can use a third party open source module like [clipboard-copy](https://www.npmjs.com/package/clipboard-copy) that is compatible with modern web browsers.
-
-## clipboard-copy
-
-This documentation website uses [clipboard-copy](https://www.npmjs.com/package/clipboard-copy).
-
-<FileSource src="/framed/CopyableCodeSnippet/CopyableCodeSnippet" />

docs/yarn.lock

@@ -837,25 +837,26 @@ caniuse-lite@^1.0.30001173, caniuse-lite@^1.0.30001178:
   integrity sha512-n8JVqXuZMVSPKiPiypjFtDTXc4jWIdjxull0f92WLo7e1MSi3uJ3NvveakSh/aCl1QKFAvIz3vIj0v+0K+FrXw==
 
 carbon-components-svelte@../:
-  version "0.30.0"
+  version "0.31.1"
   dependencies:
-    carbon-icons-svelte "^10.21.0"
+    carbon-icons-svelte "^10.27.0"
+    clipboard-copy "3.2.0"
     flatpickr "4.6.9"
 
-carbon-components@10.31.0:
+carbon-components@10.32.0:
-  version "10.31.0"
+  version "10.32.0"
-  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.31.0.tgz#050751e7fb4d845b7d1c6e8ac7fdfa9c71403c12"
+  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.32.0.tgz#0fbf60ea8fc12cea43ae7860bec844b3c2c0880f"
-  integrity sha512-gUXRky9rUHavqFLJJQf+Lzouk8GHsXJUjxRgTOUQ6vdBfA0ks6ugwptG8fiFGwCJJht/CW9/YsKb5w8N9a39sg==
+  integrity sha512-LM44X6VhUc+yrZBSz+IW1aT/OGxAS0oiiy/kV7CiDpsUDF5zlPOwgokZbeYLo2mhB1wBZ1q9jwvItZ4zfaZuMw==
   dependencies:
     "@carbon/telemetry" "0.0.0-alpha.6"
     flatpickr "4.6.1"
     lodash.debounce "^4.0.8"
     warning "^3.0.0"
 
-carbon-icons-svelte@^10.21.0:
+carbon-icons-svelte@^10.27.0:
-  version "10.21.0"
+  version "10.28.0"
-  resolved "https://registry.npmjs.org/carbon-icons-svelte/-/carbon-icons-svelte-10.21.0.tgz#9bbdd37d5513d484e9706d6335c121f60f3186c4"
+  resolved "https://registry.yarnpkg.com/carbon-icons-svelte/-/carbon-icons-svelte-10.28.0.tgz#812a6eae858d0c9e043067c714910fcfb6249cd2"
-  integrity sha512-5NNaRdmbS4N36dUGNj72Ys3VqVjH3fZ69AhYUHx+bH02GFYCwAaE49qjtP77kP7DKMtDV9NmMEti/P/JB83aYQ==
+  integrity sha512-C3K+U2PRy63WHFZme1HQNju89rhVIQmUkfgBrZzcezdutkhXbSPOY+o/MI0B2mDcQ7G9gfhEpqsXET8gBTWfJQ==
 
 caseless@~0.12.0:
   version "0.12.0"
@@ -946,10 +947,10 @@ cli-spinners@^2.2.0:
   resolved "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.4.0.tgz#c6256db216b878cfba4720e719cec7cf72685d7f"
   integrity sha512-sJAofoarcm76ZGpuooaO0eDy8saEy+YoZBLjC4h8srt4jeBnkYeOgqxgsJQTpyt2LjI5PTfLJHSL+41Yu4fEJA==
 
-clipboard-copy@^3.1.0:
+clipboard-copy@3.2.0:
-  version "3.1.0"
+  version "3.2.0"
-  resolved "https://registry.npmjs.org/clipboard-copy/-/clipboard-copy-3.1.0.tgz#4c59030a43d4988990564a664baeafba99f78ca4"
+  resolved "https://registry.yarnpkg.com/clipboard-copy/-/clipboard-copy-3.2.0.tgz#3c5b8651d3512dcfad295d77a9eb09e7fac8d5fb"
-  integrity sha512-Xsu1NddBXB89IUauda5BIq3Zq73UWkjkaQlPQbLNvNsd5WBMnTWPNKYR6HGaySOxGYZ+BKxP2E9X4ElnI3yiPA==
+  integrity sha512-vooFaGFL6ulEP1liiaWFBmmfuPm3cY3y7T9eB83ZTnYc/oFeAKsq3NcDrOkBC8XaauEE8zHQwI7k0+JSYiVQSQ==
 
 clipboard@^2.0.0:
   version "2.0.6"

package.json

@@ -24,6 +24,7 @@
   },
   "dependencies": {
     "carbon-icons-svelte": "^10.27.0",
+    "clipboard-copy": "3.2.0",
     "flatpickr": "4.6.9"
   },
   "devDependencies": {
@@ -31,7 +32,7 @@
     "@rollup/plugin-node-resolve": "^11.1.1",
     "@tsconfig/svelte": "^1.0.10",
     "autoprefixer": "^10.2.4",
-    "carbon-components": "10.31.0",
+    "carbon-components": "10.32.0",
     "gh-pages": "^3.1.0",
     "husky": "^4.3.8",
     "lint-staged": "^10.5.3",

preprocess/api.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.31.0",
+  "version": "0.31.1",
   "components": {
     "Accordion": {
       "path": "carbon-components-svelte/src/Accordion/Accordion.svelte"

rollup.config.js

@@ -14,7 +14,10 @@ export default ["es", "umd"].map((format) => {
       format,
       file: UMD ? pkg.main : pkg.module,
       name: UMD ? "carbon-components-svelte" : undefined,
-      globals: { flatpickr: "flatpickr" },
+      globals: {
+        flatpickr: "flatpickr",
+        "clipboard-copy": "copy",
+      },
     },
     external: Object.keys(pkg.dependencies),
     plugins: [

src/Breadcrumb/BreadcrumbItem.svelte

@@ -13,6 +13,10 @@
   export let isCurrentPage = false;
 
   import Link from "../Link/Link.svelte";
+
+  import { setContext } from "svelte";
+
+  setContext("BreadcrumbItem", {});
 </script>
 
 <li

src/CodeSnippet/CodeSnippet.svelte

@@ -8,6 +8,7 @@
   /**
    * Set the code snippet text
    * Alternatively, use the default slot (e.g., <CodeSnippet>{`code`}</CodeSnippet>)
+   * You must use the `code` prop to copy the code
    * @type {string}
    */
   export let code = undefined;
@@ -75,18 +76,26 @@
   /** Obtain a reference to the pre HTML element */
   export let ref = null;
 
-  import { tick } from "svelte";
+  import { createEventDispatcher, tick } from "svelte";
+  import copy from "clipboard-copy";
   import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16/ChevronDown16.svelte";
   import Button from "../Button/Button.svelte";
   import Copy from "../Copy/Copy.svelte";
   import CopyButton from "../CopyButton/CopyButton.svelte";
   import CodeSnippetSkeleton from "./CodeSnippetSkeleton.svelte";
 
+  const dispatch = createEventDispatcher();
+
   function setShowMoreLess() {
     const { height } = ref.getBoundingClientRect();
     if (height > 0) showMoreLess = ref.getBoundingClientRect().height > 255;
   }
 
+  function copyCode() {
+    copy(code);
+    dispatch("copy");
+  }
+
   $: expandText = expanded ? showLessText : showMoreText;
   $: if (type === "multi" && ref) {
     if (code === undefined) setShowMoreLess();
@@ -138,6 +147,7 @@
           {wrapText && 'bx--snippet--wraptext'}"
       {...$$restProps}
       on:click
+      on:click="{copyCode}"
       on:mouseover
       on:mouseenter
       on:mouseleave
@@ -182,6 +192,7 @@
         feedbackTimeout="{feedbackTimeout}"
         iconDescription="{copyButtonDescription}"
         on:click
+        on:click="{copyCode}"
         on:animationend
       />
     {/if}

src/ComposedModal/ModalBody.svelte

@@ -11,6 +11,7 @@
   role="{hasScrollingContent ? 'region' : undefined}"
   class:bx--modal-content="{true}"
   class:bx--modal-content--with-form="{hasForm}"
+  class:bx--modal-scroll-content="{hasScrollingContent}"
   {...$$restProps}
 >
   <slot />

src/ContentSwitcher/ContentSwitcher.svelte

@@ -6,7 +6,10 @@
   /** Set the selected index of the switch item */
   export let selectedIndex = 0;
 
-  /** Set to `true` to enable the light variant */
+  /**
+   * Set to `true` to enable the light variant
+   * @deprecated
+   */
   export let light = false;
 
   /**

src/ContextMenu/ContextMenu.svelte

@@ -26,6 +26,7 @@
   const position = writable([x, y]);
   const currentIndex = writable(-1);
   const hasPopup = writable(false);
+  const menuOffsetX = writable(0);
   const ctx = getContext("ContextMenu");
 
   let options = [];
@@ -44,6 +45,7 @@
   }
 
   setContext("ContextMenu", {
+    menuOffsetX,
     currentIndex,
     position,
     close,
@@ -77,8 +79,26 @@
 <svelte:window
   on:contextmenu|preventDefault="{(e) => {
     if (level > 1) return;
-    if (open || x === 0) x = e.x;
+
-    if (open || y === 0) y = e.y;
+    const { height, width } = ref.getBoundingClientRect();
+
+    if (open || x === 0) {
+      if (window.innerWidth - width < e.x) {
+        x = e.x - width;
+      } else {
+        x = e.x;
+      }
+    }
+
+    if (open || y === 0) {
+      menuOffsetX.set(e.x);
+
+      if (window.innerHeight - height < e.y) {
+        y = e.y - height;
+      } else {
+        y = e.y;
+      }
+    }
     position.set([x, y]);
     open = true;
   }}"

src/ContextMenu/ContextMenuOption.svelte

@@ -1,4 +1,10 @@
 <script>
+  /**
+   * Specify the kind of option
+   * @type {"default" | "danger"}
+   */
+  export let kind = "default";
+
   /** Set to `true` to enable the disabled state */
   export let disabled = false;
 
@@ -64,11 +70,16 @@
   let role = "menuitem";
   let submenuOpen = false;
   let submenuPosition = [0, 0];
+  let menuOffsetX = 0;
 
   const unsubPosition = ctx.position.subscribe((position) => {
     rootMenuPosition = position;
   });
 
+  const unsubMenuOffsetX = ctx.menuOffsetX.subscribe((_menuOffsetX) => {
+    menuOffsetX = _menuOffsetX;
+  });
+
   function handleClick(opts = {}) {
     if (disabled) return ctx.close();
     if (subOptions) return;
@@ -106,6 +117,7 @@
 
     return () => {
       unsubPosition();
+      unsubMenuOffsetX();
       if (unsubCurrentIds) unsubCurrentIds();
       if (unsubCurrentId) unsubCurrentId();
       if (typeof timeoutHover === "number") clearTimeout(timeoutHover);
@@ -118,7 +130,13 @@
   $: ctx.setPopup(submenuOpen);
   $: if (submenuOpen) {
     const { width, y } = ref.getBoundingClientRect();
-    submenuPosition = [rootMenuPosition[0] + width, y];
+    let x = rootMenuPosition[0] + width;
+
+    if (window.innerWidth - menuOffsetX < width) {
+      x = rootMenuPosition[0] - width;
+    }
+
+    submenuPosition = [x, y];
   }
   $: {
     if (isSelectable) {
@@ -158,6 +176,7 @@
   class:bx--context-menu-option="{true}"
   class:bx--context-menu-option--disabled="{true}"
   class:bx--context-menu-option--active="{subOptions && submenuOpen}"
+  class:bx--context-menu-option--danger="{!subOptions && kind === 'danger'}"
   indented="{indented}"
   aria-checked="{isSelectable || isRadio ? selected : undefined}"
   data-nested="{ref &&

src/CopyButton/CopyButton.svelte

@@ -4,8 +4,18 @@
   /** Set the title and ARIA label for the copy button */
   export let iconDescription = "Copy to clipboard";
 
-  import { Copy } from "../Copy";
+  /**
-  import Copy16 from "carbon-icons-svelte/lib/Copy16";
+   * Specify the text to copy
+   * @type {string}
+   */
+  export let text = undefined;
+
+  import Copy from "../Copy/Copy.svelte";
+  import Copy16 from "carbon-icons-svelte/lib/Copy16/Copy16.svelte";
+  import copy from "clipboard-copy";
+  import { createEventDispatcher } from "svelte";
+
+  const dispatch = createEventDispatcher();
 </script>
 
 <Copy
@@ -14,6 +24,12 @@
   title="{iconDescription}"
   {...$$restProps}
   on:click
+  on:click="{() => {
+    if (text !== undefined) {
+      copy(text);
+      dispatch('copy');
+    }
+  }}"
   on:animationend
 >
   <Copy16 class="bx--snippet__icon" />

src/DataTable/DataTable.svelte

@@ -2,8 +2,8 @@
   /**
    * @typedef {string} DataTableKey
    * @typedef {any} DataTableValue
-   * @typedef {{ key: DataTableKey; empty: boolean; display?: (item: Value) => DataTableValue; sort?: (a: DataTableValue, b: DataTableValue) => (0 | -1 | 1); columnMenu?: boolean; }} DataTableEmptyHeader
+   * @typedef {{ key: DataTableKey; empty: boolean; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; }} DataTableEmptyHeader
-   * @typedef {{ key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; sort?: (a: DataTableValue, b: DataTableValue) => (0 | -1 | 1); columnMenu?: boolean; }} DataTableNonEmptyHeader
+   * @typedef {{ key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; }} DataTableNonEmptyHeader
    * @typedef {DataTableNonEmptyHeader | DataTableEmptyHeader} DataTableHeader
    * @typedef {{ id: any; [key: string]: DataTableValue; }} DataTableRow
    * @typedef {string} DataTableRowId
@@ -13,7 +13,7 @@
    * @slot {{ row: DataTableRow; cell: DataTableCell; }} cell
    * @event {{ header?: DataTableHeader; row?: DataTableRow; cell?: DataTableCell; }} click
    * @event {{ expanded: boolean; }} click:header--expand
-   * @event {{ header: DataTableHeader; sortDirection: "ascending" | "descending" | "none" }} click:header
+   * @event {{ header: DataTableHeader; sortDirection?: "ascending" | "descending" | "none" }} click:header
    * @event {DataTableRow} click:row
    * @event {DataTableRow} mouseenter:row
    * @event {DataTableRow} mouseleave:row
@@ -250,20 +250,26 @@
             <th scope="col"></th>
           {:else}
             <TableHeader
+              disableSorting="{header.sort === false}"
               on:click="{() => {
                 dispatch('click', { header });
-                let active = header.key === $sortHeader.key;
+
-                let currentSortDirection = active
+                if (header.sort === false) {
-                  ? $sortHeader.sortDirection
+                  dispatch('click:header', { header });
-                  : 'none';
+                } else {
-                let sortDirection = sortDirectionMap[currentSortDirection];
+                  let active = header.key === $sortHeader.key;
-                dispatch('click:header', { header, sortDirection });
+                  let currentSortDirection = active
-                sortHeader.set({
+                    ? $sortHeader.sortDirection
-                  id: sortDirection === 'none' ? null : $thKeys[header.key],
+                    : 'none';
-                  key: header.key,
+                  let sortDirection = sortDirectionMap[currentSortDirection];
-                  sort: header.sort,
+                  dispatch('click:header', { header, sortDirection });
-                  sortDirection,
+                  sortHeader.set({
-                });
+                    id: sortDirection === 'none' ? null : $thKeys[header.key],
+                    key: header.key,
+                    sort: header.sort,
+                    sortDirection,
+                  });
+                }
               }}"
             >
               <slot name="cell-header" header="{header}">{header.value}</slot>

src/DataTable/DataTableSkeleton.svelte

@@ -1,5 +1,5 @@
 <script>
-  /** @extends {"../DataTable/DataTable"} DataTableHeader */
+  /** @extends {"./DataTable"} DataTableHeader */
 
   /**
    * Specify the number of columns
@@ -77,7 +77,11 @@
     <thead>
       <tr>
         {#each cols as col (col)}
-          <th>{values[col] || ""}</th>
+          {#if typeof values[col] === "object" && values[col].empty === true}
+            <th></th>
+          {:else}
+            <th>{values[col] || ""}</th>
+          {/if}
         {/each}
       </tr>
     </thead>

src/DataTable/TableHeader.svelte

@@ -1,4 +1,7 @@
 <script>
+  /** Set to `true` to disable sorting on this specific cell */
+  export let disableSorting = false;
+
   /** Specify the `scope` attribute */
   export let scope = "col";
 
@@ -12,8 +15,8 @@
   export let id = "ccs-" + Math.random().toString(36);
 
   import { getContext } from "svelte";
-  import ArrowUp20 from "carbon-icons-svelte/lib/ArrowUp20";
+  import ArrowUp20 from "carbon-icons-svelte/lib/ArrowUp20/ArrowUp20.svelte";
-  import ArrowsVertical20 from "carbon-icons-svelte/lib/ArrowsVertical20";
+  import ArrowsVertical20 from "carbon-icons-svelte/lib/ArrowsVertical20/ArrowsVertical20.svelte";
 
   const { sortHeader, tableSortable, add } = getContext("DataTable");
 
@@ -24,7 +27,7 @@
   $: ariaLabel = translateWithId();
 </script>
 
-{#if $tableSortable}
+{#if $tableSortable && !disableSorting}
   <th
     aria-sort="{active ? $sortHeader.sortDirection : 'none'}"
     scope="{scope}"

src/DataTable/ToolbarSearch.svelte

@@ -32,32 +32,33 @@
     await tick();
     ref.focus();
   }
+
+  $: classes = [
+    expanded && "bx--toolbar-search-container-active",
+    persistent
+      ? "bx--toolbar-search-container-persistent"
+      : "bx--toolbar-search-container-expandable",
+    disabled && "bx--toolbar-search-container-disabled",
+  ]
+    .filter(Boolean)
+    .join(" ");
 </script>
 
-<div
+<Search
-  tabindex="{expanded || disabled ? '-1' : tabindex}"
+  size="sm"
-  class:bx--toolbar-action="{true}"
+  tabindex="{tabindex}"
-  class:bx--toolbar-search-container-active="{expanded}"
+  disabled="{disabled}"
-  class:bx--toolbar-search-container-expandable="{!persistent}"
+  {...$$restProps}
-  class:bx--toolbar-search-container-persistent="{persistent}"
+  searchClass="{classes} {$$restProps.class}"
-  class:bx--toolbar-search-container-disabled="{disabled}"
+  bind:ref
-  on:click="{expandSearch}"
+  bind:value
+  on:clear
+  on:change
+  on:input
+  on:focus
   on:focus="{expandSearch}"
->
+  on:blur
-  <Search
+  on:blur="{() => {
-    size="sm"
+    expanded = !persistent && !!value.length;
-    tabindex="{expanded ? tabindex : '-1'}"
+  }}"
-    disabled="{disabled}"
+/>
-    {...$$restProps}
-    bind:ref
-    bind:value
-    on:clear
-    on:change
-    on:input
-    on:focus
-    on:blur
-    on:blur="{() => {
-      expanded = !persistent && !!value.length;
-    }}"
-  />
-</div>

src/FormGroup/FormGroup.svelte

@@ -5,6 +5,9 @@
   /** Set to `true` to render a form requirement */
   export let message = false;
 
+  /** Set to `true` for to remove the bottom margin */
+  export let noMargin = false;
+
   /** Specify the message text */
   export let messageText = "";
 
@@ -15,6 +18,7 @@
 <fieldset
   data-invalid="{invalid || undefined}"
   class:bx--fieldset="{true}"
+  class:bx--fieldset--no-margin="{noMargin}"
   {...$$restProps}
   on:click
   on:mouseover

src/MultiSelect/MultiSelect.svelte

@@ -125,6 +125,9 @@
    */
   export let name = undefined;
 
+  /** Obtain a reference to the input HTML element */
+  export let inputRef = null;
+
   import { afterUpdate, createEventDispatcher, setContext } from "svelte";
   import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
   import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
@@ -143,7 +146,7 @@
   let multiSelectRef = null;
   let fieldRef = null;
   let selectionRef = null;
-  let inputRef = null;
+
   let inputValue = "";
   let initialSorted = false;
   let highlightedIndex = -1;

src/OverflowMenu/OverflowMenu.svelte

@@ -54,11 +54,19 @@
   /** Obtain a reference to the overflow menu element */
   export let menuRef = null;
 
-  import { createEventDispatcher, setContext, afterUpdate } from "svelte";
+  import {
+    createEventDispatcher,
+    getContext,
+    setContext,
+    afterUpdate,
+  } from "svelte";
   import { writable } from "svelte/store";
   import OverflowMenuVertical16 from "carbon-icons-svelte/lib/OverflowMenuVertical16/OverflowMenuVertical16.svelte";
+  import OverflowMenuHorizontal16 from "carbon-icons-svelte/lib/OverflowMenuHorizontal16/OverflowMenuHorizontal16.svelte";
+
   import { formatStyle } from "./formatStyle";
 
+  const ctxBreadcrumbItem = getContext("BreadcrumbItem");
   const dispatch = createEventDispatcher();
   const items = writable([]);
   const currentId = writable(undefined);
@@ -68,6 +76,10 @@
   let buttonWidth = undefined;
   let onMountAfterUpdate = true;
 
+  $: if (ctxBreadcrumbItem) {
+    icon = OverflowMenuHorizontal16;
+  }
+
   setContext("OverflowMenu", {
     focusedId,
     add: ({ id, text, primaryFocus }) => {
@@ -123,6 +135,11 @@
       } else if (direction === "bottom") {
         menuRef.style.top = height + "px";
       }
+
+      if (ctxBreadcrumbItem) {
+        menuRef.style.top = height + 10 + "px";
+        menuRef.style.left = -11 + "px";
+      }
     }
 
     if (!open) {
@@ -218,6 +235,7 @@
       class:bx--overflow-menu-options--light="{light}"
       class:bx--overflow-menu-options--sm="{size === 'sm'}"
       class:bx--overflow-menu-options--xl="{size === 'xl'}"
+      class:bx--breadcrumb-menu-options="{!!ctxBreadcrumbItem}"
       class:menuOptionsClass
     >
       <slot />

src/Search/Search.svelte

@@ -12,6 +12,9 @@
    */
   export let size = "xl";
 
+  /** Specify the class name passed to the outer div element */
+  export let searchClass = "";
+
   /**
    * Set to `true` to display the skeleton state
    * @type {boolean} [skeleton=false]
@@ -98,6 +101,7 @@
     class:bx--search--sm="{size === 'sm' || small}"
     class:bx--search--lg="{size === 'lg'}"
     class:bx--search--xl="{size === 'xl'}"
+    class="{searchClass}"
   >
     <Search16 class="bx--search-magnifier" />
     <label id="{id}-search" for="{id}" class:bx--label="{true}"

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;

src/TimePicker/TimePicker.svelte

@@ -67,6 +67,7 @@
   <div
     class:bx--time-picker="{true}"
     class:bx--time-picker--light="{light}"
+    class:bx--time-picker--invalid="{invalid}"
     class:bx--time-picker--sm="{size === 'sm'}"
     class:bx--time-picker--xl="{size === 'xl'}"
     class:bx--select--light="{light}"

src/Tooltip/Tooltip.svelte

@@ -63,10 +63,14 @@
   /** Obtain a reference to the icon HTML element */
   export let refIcon = null;
 
-  import { createEventDispatcher, afterUpdate } from "svelte";
+  import { createEventDispatcher, afterUpdate, setContext } from "svelte";
+  import { writable } from "svelte/store";
   import Information16 from "carbon-icons-svelte/lib/Information16/Information16.svelte";
 
   const dispatch = createEventDispatcher();
+  const tooltipOpen = writable(open);
+
+  setContext("Tooltip", { tooltipOpen });
 
   function onKeydown(e) {
     if (e.key === "Escape") {
@@ -143,6 +147,7 @@
     }
   });
 
+  $: tooltipOpen.set(open);
   $: dispatch(open ? "open" : "close");
   $: buttonProps = {
     role: "button",

src/Tooltip/TooltipFooter.svelte

@@ -0,0 +1,29 @@
+<script>
+  /** Specify a selector to be focused inside the footer when opening the tooltip */
+  export let selectorPrimaryFocus = "a[href], button:not([disabled])";
+
+  import { getContext, onMount } from "svelte";
+
+  let ref = null;
+  let open = false;
+
+  const ctx = getContext("Tooltip");
+  const unsubscribe = ctx.tooltipOpen.subscribe((tooltipOpen) => {
+    open = tooltipOpen;
+  });
+
+  onMount(() => {
+    return () => {
+      unsubscribe();
+    };
+  });
+
+  $: if (open && ref) {
+    const node = ref.querySelector(selectorPrimaryFocus);
+    if (node) node.focus();
+  }
+</script>
+
+<div bind:this="{ref}" class:bx--tooltip__footer="{true}">
+  <slot />
+</div>

src/Tooltip/index.js

@@ -1 +1,2 @@
 export { default as Tooltip } from "./Tooltip.svelte";
+export { default as TooltipFooter } from "./TooltipFooter.svelte";

src/index.js

@@ -121,7 +121,7 @@ export {
 export { TimePicker, TimePickerSelect } from "./TimePicker";
 export { Toggle, ToggleSkeleton } from "./Toggle";
 export { ToggleSmall, ToggleSmallSkeleton } from "./ToggleSmall";
-export { Tooltip } from "./Tooltip";
+export { Tooltip, TooltipFooter } from "./Tooltip";
 export { TooltipDefinition } from "./TooltipDefinition";
 export { TooltipIcon } from "./TooltipIcon";
 export { Truncate } from "./Truncate";

tests/ContextMenu.test.svelte

@@ -17,6 +17,7 @@
 
 <ContextMenu>
   <ContextMenuOption
+    kind="danger"
     indented
     labelText="Copy"
     shortcutText="⌘C"

tests/DataTable.test.svelte

@@ -10,13 +10,14 @@
     Button,
     Link,
   } from "../types";
+  import type { DataTableHeader } from "../types/DataTable/DataTable";
   import Launch16 from "carbon-icons-svelte/lib/Launch16";
 
-  const headers = [
+  const headers: DataTableHeader[] = [
     { key: "name", value: "Name" },
     { key: "protocol", value: "Protocol" },
     { key: "port", value: "Port" },
-    { key: "rule", value: "Rule" },
+    { key: "rule", value: "Rule", sort: false },
   ];
   const rows = [
     {
@@ -249,6 +250,7 @@
     { value: 'Protocol' },
     { value: 'Port' },
     { value: 'Rule' },
+    { empty: true },
   ]}"
   rows="{10}"
 />

types/CodeSnippet/CodeSnippet.d.ts

@@ -11,6 +11,7 @@ export interface CodeSnippetProps {
   /**
    * Set the code snippet text
    * Alternatively, use the default slot (e.g., <CodeSnippet>{`code`}</CodeSnippet>)
+   * You must use the `code` prop to copy the code
    */
   code?: string;
 
@@ -115,6 +116,7 @@ export default class CodeSnippet extends SvelteComponentTyped<
     mouseenter: WindowEventMap["mouseenter"];
     mouseleave: WindowEventMap["mouseleave"];
     animationend: WindowEventMap["animationend"];
+    copy: CustomEvent<any>;
   },
   { default: {} }
 > {}

types/ContextMenu/ContextMenuOption.d.ts

@@ -3,6 +3,12 @@ import { SvelteComponentTyped } from "svelte";
 
 export interface ContextMenuOptionProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> {
+  /**
+   * Specify the kind of option
+   * @default "default"
+   */
+  kind?: "default" | "danger";
+
   /**
    * Set to `true` to enable the disabled state
    * @default false

types/CopyButton/CopyButton.d.ts

@@ -8,6 +8,11 @@ export interface CopyButtonProps extends CopyProps {
    * @default "Copy to clipboard"
    */
   iconDescription?: string;
+
+  /**
+   * Specify the text to copy
+   */
+  text?: string;
 }
 
 export default class CopyButton extends SvelteComponentTyped<
@@ -15,6 +20,7 @@ export default class CopyButton extends SvelteComponentTyped<
   {
     click: WindowEventMap["click"];
     animationend: WindowEventMap["animationend"];
+    copy: CustomEvent<any>;
   },
   {}
 > {}

types/DataTable/DataTable.d.ts

@@ -9,7 +9,7 @@ export interface DataTableEmptyHeader {
   key: DataTableKey;
   empty: boolean;
   display?: (item: Value) => DataTableValue;
-  sort?: (a: DataTableValue, b: DataTableValue) => 0 | -1 | 1;
+  sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1);
   columnMenu?: boolean;
 }
 
@@ -17,7 +17,7 @@ export interface DataTableNonEmptyHeader {
   key: DataTableKey;
   value: DataTableValue;
   display?: (item: Value) => DataTableValue;
-  sort?: (a: DataTableValue, b: DataTableValue) => 0 | -1 | 1;
+  sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1);
   columnMenu?: boolean;
 }
 
@@ -141,7 +141,7 @@ export default class DataTable extends SvelteComponentTyped<
     ["click:header--expand"]: CustomEvent<{ expanded: boolean }>;
     ["click:header"]: CustomEvent<{
       header: DataTableHeader;
-      sortDirection: "ascending" | "descending" | "none";
+      sortDirection?: "ascending" | "descending" | "none";
     }>;
     ["click:row"]: CustomEvent<DataTableRow>;
     ["mouseenter:row"]: CustomEvent<DataTableRow>;

types/DataTable/DataTableSkeleton.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="svelte" />
 import { SvelteComponentTyped } from "svelte";
-import { DataTableHeader } from "../DataTable/DataTable";
+import { DataTableHeader } from "./DataTable";
 
 export interface DataTableSkeletonProps
   extends DataTableHeader,

types/DataTable/TableHeader.d.ts

@@ -3,6 +3,12 @@ import { SvelteComponentTyped } from "svelte";
 
 export interface TableHeaderProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["th"]> {
+  /**
+   * Set to `true` to disable sorting on this specific cell
+   * @default false
+   */
+  disableSorting?: boolean;
+
   /**
    * Specify the `scope` attribute
    * @default "col"

types/FormGroup/FormGroup.d.ts

@@ -15,6 +15,12 @@ export interface FormGroupProps
    */
   message?: boolean;
 
+  /**
+   * Set to `true` for to remove the bottom margin
+   * @default false
+   */
+  noMargin?: boolean;
+
   /**
    * Specify the message text
    * @default ""

types/MultiSelect/MultiSelect.d.ts

@@ -174,6 +174,12 @@ export interface MultiSelectProps
    * Specify a name attribute for the select
    */
   name?: string;
+
+  /**
+   * Obtain a reference to the input HTML element
+   * @default null
+   */
+  inputRef?: null | HTMLInputElement;
 }
 
 export default class MultiSelect extends SvelteComponentTyped<

types/Search/Search.d.ts

@@ -13,6 +13,12 @@ export interface SearchProps {
    */
   size?: "sm" | "lg" | "xl";
 
+  /**
+   * Specify the class name passed to the outer div element
+   * @default ""
+   */
+  searchClass?: string;
+
   /**
    * Set to `true` to display the skeleton state
    * @default false

types/Tile/RadioTile.d.ts

@@ -15,6 +15,12 @@ export interface RadioTileProps
    */
   light?: boolean;
 
+  /**
+   * Set to `true` to disable the tile
+   * @default false
+   */
+  disabled?: boolean;
+
   /**
    * Specify the value of the radio input
    * @default ""

types/Tile/SelectableTile.d.ts

@@ -15,6 +15,12 @@ export interface SelectableTileProps
    */
   light?: boolean;
 
+  /**
+   * Set to `true` to disable the tile
+   * @default false
+   */
+  disabled?: boolean;
+
   /**
    * Specify the title of the selectable tile
    * @default "title"

types/Tooltip/TooltipFooter.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
+
+export interface TooltipFooterProps {
+  /**
+   * Specify a selector to be focused inside the footer when opening the tooltip
+   * @default "a[href], button:not([disabled])"
+   */
+  selectorPrimaryFocus?: string;
+}
+
+export default class TooltipFooter extends SvelteComponentTyped<
+  TooltipFooterProps,
+  {},
+  { default: {} }
+> {}

types/index.d.ts

@@ -139,6 +139,7 @@ export { default as ToggleSkeleton } from "./Toggle/ToggleSkeleton";
 export { default as ToggleSmall } from "./ToggleSmall/ToggleSmall";
 export { default as ToggleSmallSkeleton } from "./ToggleSmall/ToggleSmallSkeleton";
 export { default as Tooltip } from "./Tooltip/Tooltip";
+export { default as TooltipFooter } from "./Tooltip/TooltipFooter";
 export { default as TooltipDefinition } from "./TooltipDefinition/TooltipDefinition";
 export { default as TooltipIcon } from "./TooltipIcon/TooltipIcon";
 export { default as Truncate } from "./Truncate/Truncate";

yarn.lock

@@ -453,10 +453,10 @@ caniuse-lite@^1.0.30001181:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001183.tgz#7a57ba9d6584119bb5f2bc76d3cc47ba9356b3e2"
   integrity sha512-7JkwTEE1hlRKETbCFd8HDZeLiQIUcl8rC6JgNjvHCNaxOeNmQ9V4LvQXRUsKIV2CC73qKxljwVhToaA3kLRqTw==
 
-carbon-components@10.31.0:
+carbon-components@10.32.0:
-  version "10.31.0"
+  version "10.32.0"
-  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.31.0.tgz#050751e7fb4d845b7d1c6e8ac7fdfa9c71403c12"
+  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.32.0.tgz#0fbf60ea8fc12cea43ae7860bec844b3c2c0880f"
-  integrity sha512-gUXRky9rUHavqFLJJQf+Lzouk8GHsXJUjxRgTOUQ6vdBfA0ks6ugwptG8fiFGwCJJht/CW9/YsKb5w8N9a39sg==
+  integrity sha512-LM44X6VhUc+yrZBSz+IW1aT/OGxAS0oiiy/kV7CiDpsUDF5zlPOwgokZbeYLo2mhB1wBZ1q9jwvItZ4zfaZuMw==
   dependencies:
     "@carbon/telemetry" "0.0.0-alpha.6"
     flatpickr "4.6.1"
@@ -540,6 +540,11 @@ cli-truncate@^2.1.0:
     slice-ansi "^3.0.0"
     string-width "^4.2.0"
 
+clipboard-copy@3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/clipboard-copy/-/clipboard-copy-3.2.0.tgz#3c5b8651d3512dcfad295d77a9eb09e7fac8d5fb"
+  integrity sha512-vooFaGFL6ulEP1liiaWFBmmfuPm3cY3y7T9eB83ZTnYc/oFeAKsq3NcDrOkBC8XaauEE8zHQwI7k0+JSYiVQSQ==
+
 cliui@^7.0.2:
   version "7.0.4"
   resolved "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz#a0265ee655476fc807aea9df3df8df7783808b4f"