Alignment with Carbon version 10.31 (#571)

* chore(deps-dev): upgrade carbon-components to v10.31.0 * fix(slider): use CSS to hide input if hideTextInput is true * docs(slider): add hidden text input, invalid, disabled examples * feat(tabs): support "container" type for TabsSkeleton * chore(list-box): remove hotfix inline style to center dropdown chevron * fix(number-input): use add, subtract icons and update markup * feat(select): add warning state * docs(select): add invalid state example * docs(select): add helper text example * fix(structured-list): add "rowgroup" role to StructuredListBody * docs: release code snippet max-width * docs(select): add skeleton hidden label example * feat(popover): add Popover component * feat(pagination): dispatch button click events to be consistent with PaginationNav * fix(multi-select): type clear as a custom event * docs(radio-button): add disabled buttons example * chore(tabs): use absolute icon import * fix(link): remove line breaks within anchor link * docs(radio-button): adjust section copy verbiage * chore(deps-dev): upgrade carbon-icons-svelte to v10.27 v10.27 uses the SvelteComponentTyped interface * docs(accordion): adjust section title verbiage * test(types): fix warnings from svelte-check * fix(search): only set autofocus attribute if equals true * feat(popover): add closeOnOutsideClick prop * docs: style [data-outline] as relative positioned * feat(context-menu): add initial ContextMenu * feat(context-menu): annotate props, generate types * feat(context-menu): add initial focus logic * fix(context-menu): correctly tab in/out of nested menus * chore(context-menu): update types * fix(context-menu): obtain radio id from node directly * docs(context-menu): add examples and test * fix(context-menu): prevent default keydown behavior
2025-09-14 18:01:06 +00:00 · 2021-03-20 10:39:14 -07:00 · 2021-03-20 10:39:14 -07:00 · 5fad0cb3c7
commit 5fad0cb3c7
parent afed4fa2fa
52 changed files with 1758 additions and 103 deletions
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@ -1,6 +1,6 @@
 # Component Index

-> 160 components exported from carbon-components-svelte@0.30.0.
+> 166 components exported from carbon-components-svelte@0.30.0.

 ## Components

@ -24,6 +24,11 @@
 - [`ComposedModal`](#composedmodal)
 - [`Content`](#content)
 - [`ContentSwitcher`](#contentswitcher)
+- [`ContextMenu`](#contextmenu)
+- [`ContextMenuDivider`](#contextmenudivider)
+- [`ContextMenuGroup`](#contextmenugroup)
+- [`ContextMenuOption`](#contextmenuoption)
+- [`ContextMenuRadioGroup`](#contextmenuradiogroup)
 - [`Copy`](#copy)
 - [`CopyButton`](#copybutton)
 - [`DataTable`](#datatable)
@ -93,6 +98,7 @@
 - [`PaginationNav`](#paginationnav)
 - [`PaginationSkeleton`](#paginationskeleton)
 - [`PasswordInput`](#passwordinput)
+- [`Popover`](#popover)
 - [`ProgressIndicator`](#progressindicator)
 - [`ProgressIndicatorSkeleton`](#progressindicatorskeleton)
 - [`ProgressStep`](#progressstep)
@ -722,6 +728,117 @@ None.
 | mouseenter | forwarded  | --                  |
 | mouseleave | forwarded  | --                  |

+## `ContextMenu`
+
+### Props
+
+| Prop name | Kind             | Reactive | Type                                      | Default value      | Description                                                                      |
+| :-------- | :--------------- | :------- | :---------------------------------------- | ------------------ | -------------------------------------------------------------------------------- |
+| ref       | <code>let</code> | Yes      | <code>null &#124; HTMLUListElement</code> | <code>null</code>  | Obtain a reference to the unordered list HTML element                            |
+| y         | <code>let</code> | Yes      | <code>number</code>                       | <code>0</code>     | Specify the vertical offset of the menu position                                 |
+| x         | <code>let</code> | Yes      | <code>number</code>                       | <code>0</code>     | Specify the horizontal offset of the menu position                               |
+| open      | <code>let</code> | Yes      | <code>boolean</code>                      | <code>false</code> | Set to `true` to open the menu<br />Either `x` and `y` must be greater than zero |
+
+### Slots
+
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| --        | Yes     | --    | --       |
+
+### Events
+
+| Event name | Type       | Detail |
+| :--------- | :--------- | :----- |
+| click      | forwarded  | --     |
+| keydown    | forwarded  | --     |
+| open       | dispatched | --     |
+| close      | dispatched | --     |
+
+## `ContextMenuDivider`
+
+### Props
+
+None.
+
+### Slots
+
+None.
+
+### Events
+
+None.
+
+## `ContextMenuGroup`
+
+### Props
+
+| Prop name   | Kind             | Reactive | Type                  | Default value   | Description            |
+| :---------- | :--------------- | :------- | :-------------------- | --------------- | ---------------------- |
+| selectedIds | <code>let</code> | Yes      | <code>string[]</code> | <code>[]</code> | --                     |
+| labelText   | <code>let</code> | No       | <code>string</code>   | <code>""</code> | Specify the label text |
+
+### Slots
+
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| --        | Yes     | --    | --       |
+
+### Events
+
+None.
+
+## `ContextMenuOption`
+
+### Props
+
+| Prop name    | Kind             | Reactive | Type                                                         | Default value                                    | Description                                                                                                                        |
+| :----------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- |
+| ref          | <code>let</code> | Yes      | <code>null &#124; HTMLLIElement</code>                       | <code>null</code>                                | Obtain a reference to the list item HTML element                                                                                   |
+| selectable   | <code>let</code> | Yes      | <code>boolean</code>                                         | <code>false</code>                               | Set to `true` to enable the selectable variant<br />Automatically set to `true` if `selected` is `true`                            |
+| 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                                                                                                  |
+| 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;) |
+| id           | <code>let</code> | No       | <code>string</code>                                          | <code>"ccs-" + Math.random().toString(36)</code> | Specify the id<br />It's recommended to provide an id as a value to bind to within a selectable/radio menu group                   |
+
+### Slots
+
+| Slot name    | Default | Props | Fallback                    |
+| :----------- | :------ | :---- | :-------------------------- |
+| --           | Yes     | --    | --                          |
+| labelText    | No      | --    | <code>{labelText}</code>    |
+| shortcutText | No      | --    | <code>{shortcutText}</code> |
+
+### Events
+
+| Event name | Type       | Detail |
+| :--------- | :--------- | :----- |
+| keydown    | forwarded  | --     |
+| mouseenter | forwarded  | --     |
+| mouseleave | forwarded  | --     |
+| click      | dispatched | --     |
+
+## `ContextMenuRadioGroup`
+
+### Props
+
+| Prop name  | Kind             | Reactive | Type                | Default value   | Description                     |
+| :--------- | :--------------- | :------- | :------------------ | --------------- | ------------------------------- |
+| selectedId | <code>let</code> | Yes      | <code>string</code> | <code>""</code> | Set the selected radio group id |
+| labelText  | <code>let</code> | No       | <code>string</code> | <code>""</code> | Specify the label text          |
+
+### Slots
+
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| --        | Yes     | --    | --       |
+
+### Events
+
+None.
+
 ## `Copy`

 ### Props
@ -2238,7 +2355,7 @@ None.
 | Event name | Type       | Detail                                                                                              |
 | :--------- | :--------- | :-------------------------------------------------------------------------------------------------- |
 | select     | dispatched | <code>{ selectedIds: string[]; selected: MultiSelectItem[]; unselected: MultiSelectItem[]; }</code> |
-| clear      | forwarded  | --                                                                                                  |
+| clear      | dispatched | <code>any</code>                                                                                    |
 | keydown    | forwarded  | --                                                                                                  |
 | focus      | forwarded  | --                                                                                                  |
 | blur       | forwarded  | --                                                                                                  |
@ -2541,9 +2658,11 @@ None.

 ### Events

-| Event name | Type       | Detail                                           |
-| :--------- | :--------- | :----------------------------------------------- |
-| update     | dispatched | <code>{ pageSize: number; page: number; }</code> |
+| Event name             | Type       | Detail                                           |
+| :--------------------- | :--------- | :----------------------------------------------- |
+| update                 | dispatched | <code>{ pageSize: number; page: number; }</code> |
+| click:button--previous | dispatched | <code>{ page: number; }</code>                   |
+| click:button--next     | dispatched | <code>{ page: number; }</code>                   |

 ## `PaginationNav`

@ -2632,6 +2751,32 @@ None.
 | focus      | forwarded | --     |
 | blur       | forwarded | --     |

+## `Popover`
+
+### Props
+
+| Prop name           | Kind             | Reactive | Type                                                                                                                                                                                                                            | Default value      | Description                                            |
+| :------------------ | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------ | ------------------------------------------------------ |
+| open                | <code>let</code> | Yes      | <code>boolean</code>                                                                                                                                                                                                            | <code>false</code> | Set to `true` to display the popover                   |
+| closeOnOutsideClick | <code>let</code> | No       | <code>boolean</code>                                                                                                                                                                                                            | <code>false</code> | Set to `true` to close the popover on an outside click |
+| caret               | <code>let</code> | No       | <code>boolean</code>                                                                                                                                                                                                            | <code>false</code> | Set to `true` render a caret                           |
+| align               | <code>let</code> | No       | <code>"top" &#124; "top-left" &#124; "top-right" &#124; "bottom" &#124; "bottom-left" &#124; "bottom-right" &#124; "left" &#124; "left-bottom" &#124; "left-top" &#124; "right" &#124; "right-bottom" &#124; "right-top"</code> | <code>"top"</code> | Specify the alignment of the caret                     |
+| light               | <code>let</code> | No       | <code>boolean</code>                                                                                                                                                                                                            | <code>false</code> | Set to `true` to enable the light variant              |
+| highContrast        | <code>let</code> | No       | <code>boolean</code>                                                                                                                                                                                                            | <code>false</code> | Set to `true` to enable the high contrast variant      |
+| relative            | <code>let</code> | No       | <code>boolean</code>                                                                                                                                                                                                            | <code>false</code> | Set to `true` to use a relative position               |
+
+### Slots
+
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| --        | Yes     | --    | --       |
+
+### Events
+
+| Event name    | Type       | Detail |
+| :------------ | :--------- | :----- |
+| click:outside | dispatched | --     |
+
 ## `ProgressIndicator`

 ### Props
@ -2920,6 +3065,8 @@ None.
 | name        | <code>let</code> | No       | <code>string</code>                        | --                                               | Specify a name attribute for the select element |
 | invalid     | <code>let</code> | No       | <code>boolean</code>                       | <code>false</code>                               | Set to `true` to indicate an invalid state      |
 | invalidText | <code>let</code> | No       | <code>string</code>                        | <code>""</code>                                  | Specify the invalid state text                  |
+| warn        | <code>let</code> | No       | <code>boolean</code>                       | <code>false</code>                               | Set to `true` to indicate an warning state      |
+| warnText    | <code>let</code> | No       | <code>string</code>                        | <code>""</code>                                  | Specify the warning state text                  |
 | helperText  | <code>let</code> | No       | <code>string</code>                        | <code>""</code>                                  | Specify the helper text                         |
 | noLabel     | <code>let</code> | No       | <code>boolean</code>                       | <code>false</code>                               | Set to `true` to not render a label             |
 | labelText   | <code>let</code> | No       | <code>string</code>                        | <code>""</code>                                  | Specify the label text                          |
@ -3682,9 +3829,10 @@ None.

 ### Props

-| Prop name | Kind             | Reactive | Type                | Default value  | Description                          |
-| :-------- | :--------------- | :------- | :------------------ | -------------- | ------------------------------------ |
-| count     | <code>let</code> | No       | <code>number</code> | <code>4</code> | Specify the number of tabs to render |
+| Prop name | Kind             | Reactive | Type                                      | Default value          | Description                          |
+| :-------- | :--------------- | :------- | :---------------------------------------- | ---------------------- | ------------------------------------ |
+| count     | <code>let</code> | No       | <code>number</code>                       | <code>4</code>         | Specify the number of tabs to render |
+| type      | <code>let</code> | No       | <code>"default" &#124; "container"</code> | <code>"default"</code> | Specify the type of tabs             |

 ### Slots

--- a/docs/package.json
+++ b/docs/package.json
@ -11,7 +11,7 @@
  "devDependencies": {
    "@sveltech/routify": "^1.9.9",
    "autoprefixer": "^10.2.3",
-    "carbon-components": "10.30.0",
+    "carbon-components": "10.31.0",
    "carbon-components-svelte": "../",
    "clipboard-copy": "^3.1.0",
    "mdsvex": "^0.8.8",
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@ -1,5 +1,5 @@
 {
-  "total": 160,
+  "total": 166,
  "components": [
    {
      "moduleName": "Accordion",
@ -1556,6 +1556,244 @@
      "typedefs": [],
      "rest_props": { "type": "Element", "name": "div" }
    },
+    {
+      "moduleName": "ContextMenu",
+      "filePath": "src/ContextMenu/ContextMenu.svelte",
+      "props": [
+        {
+          "name": "open",
+          "kind": "let",
+          "description": "Set to `true` to open the menu\nEither `x` and `y` must be greater than zero",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": true
+        },
+        {
+          "name": "x",
+          "kind": "let",
+          "description": "Specify the horizontal offset of the menu position",
+          "type": "number",
+          "value": "0",
+          "isFunction": false,
+          "constant": false,
+          "reactive": true
+        },
+        {
+          "name": "y",
+          "kind": "let",
+          "description": "Specify the vertical offset of the menu position",
+          "type": "number",
+          "value": "0",
+          "isFunction": false,
+          "constant": false,
+          "reactive": true
+        },
+        {
+          "name": "ref",
+          "kind": "let",
+          "description": "Obtain a reference to the unordered list HTML element",
+          "type": "null | HTMLUListElement",
+          "value": "null",
+          "isFunction": false,
+          "constant": false,
+          "reactive": true
+        }
+      ],
+      "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
+      "events": [
+        { "type": "forwarded", "name": "click", "element": "ul" },
+        { "type": "forwarded", "name": "keydown", "element": "ul" },
+        { "type": "dispatched", "name": "open" },
+        { "type": "dispatched", "name": "close" }
+      ],
+      "typedefs": [],
+      "rest_props": { "type": "Element", "name": "ul" }
+    },
+    {
+      "moduleName": "ContextMenuDivider",
+      "filePath": "src/ContextMenu/ContextMenuDivider.svelte",
+      "props": [],
+      "slots": [],
+      "events": [],
+      "typedefs": []
+    },
+    {
+      "moduleName": "ContextMenuGroup",
+      "filePath": "src/ContextMenu/ContextMenuGroup.svelte",
+      "props": [
+        {
+          "name": "selectedIds",
+          "kind": "let",
+          "type": "string[]",
+          "value": "[]",
+          "isFunction": false,
+          "constant": false,
+          "reactive": true
+        },
+        {
+          "name": "labelText",
+          "kind": "let",
+          "description": "Specify the label text",
+          "type": "string",
+          "value": "\"\"",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        }
+      ],
+      "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
+      "events": [],
+      "typedefs": []
+    },
+    {
+      "moduleName": "ContextMenuOption",
+      "filePath": "src/ContextMenu/ContextMenuOption.svelte",
+      "props": [
+        {
+          "name": "disabled",
+          "kind": "let",
+          "description": "Set to `true` to enable the disabled state",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "indented",
+          "kind": "let",
+          "description": "Set to `true` to indent the label",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": true
+        },
+        {
+          "name": "icon",
+          "kind": "let",
+          "description": "Specify the icon from `carbon-icons-svelte` to render\nIcon is rendered to the left of the label text",
+          "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
+          "isFunction": false,
+          "constant": false,
+          "reactive": true
+        },
+        {
+          "name": "labelText",
+          "kind": "let",
+          "description": "Specify the label text\nAlternatively, use the \"labelText\" slot (e.g., <span slot=\"labelText\">...</span>)",
+          "type": "string",
+          "value": "\"\"",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "selected",
+          "kind": "let",
+          "description": "Set to `true` to use the selected variant",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": true
+        },
+        {
+          "name": "selectable",
+          "kind": "let",
+          "description": "Set to `true` to enable the selectable variant\nAutomatically set to `true` if `selected` is `true`",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": true
+        },
+        {
+          "name": "shortcutText",
+          "kind": "let",
+          "description": "Specify the shortcut text\nAlternatively, use the \"shortcutText\" slot (e.g., <span slot=\"shortcutText\">...</span>)",
+          "type": "string",
+          "value": "\"\"",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "id",
+          "kind": "let",
+          "description": "Specify the id\nIt's recommended to provide an id as a value to bind to within a selectable/radio menu group",
+          "type": "string",
+          "value": "\"ccs-\" + Math.random().toString(36)",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "ref",
+          "kind": "let",
+          "description": "Obtain a reference to the list item HTML element",
+          "type": "null | HTMLLIElement",
+          "value": "null",
+          "isFunction": false,
+          "constant": false,
+          "reactive": true
+        }
+      ],
+      "slots": [
+        { "name": "__default__", "default": true, "slot_props": "{}" },
+        {
+          "name": "labelText",
+          "default": false,
+          "fallback": "{labelText}",
+          "slot_props": "{}"
+        },
+        {
+          "name": "shortcutText",
+          "default": false,
+          "fallback": "{shortcutText}",
+          "slot_props": "{}"
+        }
+      ],
+      "events": [
+        { "type": "forwarded", "name": "keydown", "element": "li" },
+        { "type": "forwarded", "name": "mouseenter", "element": "li" },
+        { "type": "forwarded", "name": "mouseleave", "element": "li" },
+        { "type": "dispatched", "name": "click" }
+      ],
+      "typedefs": [],
+      "rest_props": { "type": "Element", "name": "li" }
+    },
+    {
+      "moduleName": "ContextMenuRadioGroup",
+      "filePath": "src/ContextMenu/ContextMenuRadioGroup.svelte",
+      "props": [
+        {
+          "name": "selectedId",
+          "kind": "let",
+          "description": "Set the selected radio group id",
+          "type": "string",
+          "value": "\"\"",
+          "isFunction": false,
+          "constant": false,
+          "reactive": true
+        },
+        {
+          "name": "labelText",
+          "kind": "let",
+          "description": "Specify the label text",
+          "type": "string",
+          "value": "\"\"",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        }
+      ],
+      "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
+      "events": [],
+      "typedefs": []
+    },
    {
      "moduleName": "Copy",
      "filePath": "src/Copy/Copy.svelte",
@ -5539,7 +5777,7 @@
          "name": "select",
          "detail": "{ selectedIds: string[]; selected: MultiSelectItem[]; unselected: MultiSelectItem[]; }"
        },
-        { "type": "forwarded", "name": "clear", "element": "ListBoxSelection" },
+        { "type": "dispatched", "name": "clear", "detail": "any" },
        { "type": "forwarded", "name": "keydown", "element": "input" },
        { "type": "forwarded", "name": "focus", "element": "input" },
        { "type": "forwarded", "name": "blur", "element": "input" }
@ -6475,6 +6713,16 @@
          "type": "dispatched",
          "name": "update",
          "detail": "{ pageSize: number; page: number; }"
+        },
+        {
+          "type": "dispatched",
+          "name": "click:button--previous",
+          "detail": "{ page: number; }"
+        },
+        {
+          "type": "dispatched",
+          "name": "click:button--next",
+          "detail": "{ page: number; }"
        }
      ],
      "typedefs": [],
@ -6778,6 +7026,86 @@
      "typedefs": [],
      "rest_props": { "type": "Element", "name": "input" }
    },
+    {
+      "moduleName": "Popover",
+      "filePath": "src/Popover/Popover.svelte",
+      "props": [
+        {
+          "name": "open",
+          "kind": "let",
+          "description": "Set to `true` to display the popover",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": true
+        },
+        {
+          "name": "closeOnOutsideClick",
+          "kind": "let",
+          "description": "Set to `true` to close the popover on an outside click",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "caret",
+          "kind": "let",
+          "description": "Set to `true` render a caret",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "align",
+          "kind": "let",
+          "description": "Specify the alignment of the caret",
+          "type": "\"top\" | \"top-left\" | \"top-right\" | \"bottom\" | \"bottom-left\" | \"bottom-right\" | \"left\" | \"left-bottom\" | \"left-top\" | \"right\" | \"right-bottom\" | \"right-top\"",
+          "value": "\"top\"",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "light",
+          "kind": "let",
+          "description": "Set to `true` to enable the light variant",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "highContrast",
+          "kind": "let",
+          "description": "Set to `true` to enable the high contrast variant",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "relative",
+          "kind": "let",
+          "description": "Set to `true` to use a relative position",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        }
+      ],
+      "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
+      "events": [{ "type": "dispatched", "name": "click:outside" }],
+      "typedefs": [],
+      "rest_props": { "type": "Element", "name": "div" }
+    },
    {
      "moduleName": "ProgressIndicator",
      "filePath": "src/ProgressIndicator/ProgressIndicator.svelte",
@ -7638,6 +7966,26 @@
          "constant": false,
          "reactive": false
        },
+        {
+          "name": "warn",
+          "kind": "let",
+          "description": "Set to `true` to indicate an warning state",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "warnText",
+          "kind": "let",
+          "description": "Specify the warning state text",
+          "type": "string",
+          "value": "\"\"",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
        {
          "name": "helperText",
          "kind": "let",
@ -9148,6 +9496,16 @@
          "isFunction": false,
          "constant": false,
          "reactive": false
+        },
+        {
+          "name": "type",
+          "kind": "let",
+          "description": "Specify the type of tabs",
+          "type": "\"default\" | \"container\"",
+          "value": "\"default\"",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
        }
      ],
      "slots": [],
--- a/docs/src/components/Preview.svelte
+++ b/docs/src/components/Preview.svelte
@ -55,6 +55,10 @@
    max-width: 56rem;
  }

+  .code-override .bx--snippet {
+    max-width: none;
+  }
+
  .code-override .bx--copy-btn,
  .code-override .bx--snippet,
  .code-override button.bx--btn.bx--snippet-btn--expand {
--- a/docs/src/layouts/ComponentLayout.svelte
+++ b/docs/src/layouts/ComponentLayout.svelte
@ -208,7 +208,12 @@
    }
  }

-  .preview-viewer > .bx--aspect-ratio {
+  .preview-viewer > .bx--aspect-ratio,
+  .preview-viewer [data-outline] {
    outline: 1px solid var(--cds-interactive-04);
  }
+
+  [data-outline] {
+    position: relative;
+  }
 </style>
--- a/docs/src/pages/_layout.svelte
+++ b/docs/src/pages/_layout.svelte
@ -20,7 +20,7 @@
  import Footer from "../components/Footer.svelte";

  const deprecated = ["ToggleSmall", "Icon"];
-  const new_components = ["ImageLoader", "LocalStorage"];
+  const new_components = ["Popover", "ContextMenu"];

  let isOpen = false;
  let isSideNavOpen = true;
@ -105,10 +105,18 @@
          >
            {child.title}
            {#if deprecated.includes(child.title)}
-              <Tag size="sm" type="red">Deprecated</Tag>
+              <Tag size="sm" type="red" style="margin-top: 0; margin-bottom: 0">
+                Deprecated
+              </Tag>
            {/if}
            {#if new_components.includes(child.title)}
-              <Tag size="sm" type="green">New</Tag>
+              <Tag
+                size="sm"
+                type="green"
+                style="margin-top: 0; margin-bottom: 0"
+              >
+                New
+              </Tag>
            {/if}
          </SideNavMenuItem>
        {/each}
--- a/docs/src/pages/components/Accordion.svx
+++ b/docs/src/pages/components/Accordion.svx
@ -27,7 +27,7 @@ See the [ExpandableAccordion recipe](/recipes/ExpandableAccordion) for a togglea
  </AccordionItem>
 </Accordion>

-### Chevron aligned left
+### Left-aligned chevron

 <Accordion align="start">
  <AccordionItem title="Natural Language Classifier">
@ -148,7 +148,7 @@ See the [ExpandableAccordion recipe](/recipes/ExpandableAccordion) for a togglea

 <Accordion skeleton />

-### Skeleton (chevron aligned left)
+### Skeleton (left-aligned chevron)

 <Accordion skeleton align="start" />

--- a/docs/src/pages/components/ContextMenu.svx
+++ b/docs/src/pages/components/ContextMenu.svx
@ -0,0 +1,17 @@
+---
+components: ["ContextMenu", "ContextMenuGroup", "ContextMenuRadioGroup", "ContextMenuOption", "ContextMenuDivider"]
+---
+
+<script>
+    import Preview from "../../components/Preview.svelte";
+</script>
+
+In the examples, right click anywhere within the iframe.
+  
+### Default
+  
+<FileSource src="/framed/ContextMenu/ContextMenu" />
+
+### Radio groups
+  
+<FileSource src="/framed/ContextMenu/ContextMenuGroups" />
--- a/docs/src/pages/components/Popover.svx
+++ b/docs/src/pages/components/Popover.svx
@ -0,0 +1,77 @@
+<script>
+  import { Popover } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Default
+
+By default, the position of the popover component is absolute.
+
+<div data-outline>
+    Parent
+    <Popover open>
+        <div style="padding: var(--cds-spacing-05)">Content</div>
+    </Popover>
+</div>
+
+### Relative position
+
+Set `relative` to `true` to use a relative position.
+
+<div data-outline>
+    Parent
+    <Popover relative open>
+        <div style="padding: var(--cds-spacing-05)">Content</div>
+    </Popover>
+</div>
+
+### Close on outside click
+
+Set `closeOnOutsideClick` to set `open` to `false` when clicking outside of the popover.
+
+<div data-outline>
+    Parent
+    <Popover open closeOnOutsideClick on:click:outside={() => {console.log('on:click:outside')}}>
+        <div style="padding: var(--cds-spacing-05)">Content</div>
+    </Popover>
+</div>
+
+### With caret
+
+<div data-outline>
+    Parent
+    <Popover caret open>
+        <div style="padding: var(--cds-spacing-05)">Content</div>
+    </Popover>
+</div>
+
+### Custom caret alignment
+
+By default, the caret is aligned "top".
+
+Possible `align` values include `"top"`, `"top-left"`, `"top-right"`, `"bottom"`, `"bottom-left"`, `"bottom-right"`, `"left"`, `"left-bottom"`, `"left-top"`, `"right"`, `"right-bottom"` or `"right-top"`.
+
+<div data-outline>
+    Parent
+    <Popover caret align="top-left" open>
+        <div style="padding: var(--cds-spacing-05)">Content</div>
+    </Popover>
+</div>
+
+### Light variant
+
+<div data-outline>
+    Parent
+    <Popover light open>
+        <div style="padding: var(--cds-spacing-05)">Content</div>
+    </Popover>
+</div>
+
+### High contrast variant
+
+<div data-outline>
+    Parent
+    <Popover highContrast open>
+        <div style="padding: var(--cds-spacing-05)">Content</div>
+    </Popover>
+</div>
--- a/docs/src/pages/components/RadioButton.svx
+++ b/docs/src/pages/components/RadioButton.svx
@ -47,7 +47,7 @@ Bind the selected value using the `selected` prop.

 <FileSource src="/framed/RadioButton/ProgrammaticRadioButton" />

-### Label text aligned left
+### Left-aligned label text

 <RadioButtonGroup labelPosition="left" legendText="Storage tier (disk)" selected="standard">
  <RadioButton labelText="Free (1 GB)" value="free" />
@ -55,6 +55,14 @@ Bind the selected value using the `selected` prop.
  <RadioButton labelText="Pro (128 GB)" value="pro" />
 </RadioButtonGroup>

+### Disabled buttons
+
+<RadioButtonGroup labelPosition="left" legendText="Storage tier (disk)" selected="standard">
+  <RadioButton disabled labelText="Free (1 GB)" value="free" />
+  <RadioButton labelText="Standard (10 GB)" value="standard" />
+  <RadioButton disabled labelText="Pro (128 GB)" value="pro" />
+</RadioButtonGroup>
+
 ### Vertical orientation

 <RadioButtonGroup orientation="vertical" legendText="Storage tier (disk)" selected="standard">
@ -71,7 +79,7 @@ Bind the selected value using the `selected` prop.
  <RadioButtonSkeleton />
 </RadioButtonGroup>

-### Skeleton (vertical orientation)
+### Skeleton (vertical)

 <RadioButtonGroup orientation="vertical" legendText="Storage tier (disk)">
  <RadioButtonSkeleton />
--- a/docs/src/pages/components/Select.svx
+++ b/docs/src/pages/components/Select.svx
@ -16,6 +16,15 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
  <SelectItem value="g100" text="Gray 100" />
 </Select>

+### Helper text
+
+<Select helperText="Carbon offers 4 themes (2 light, 2 dark)" labelText="Carbon theme" selected="g10" >
+  <SelectItem value="white" text="White" />
+  <SelectItem value="g10" text="Gray 10" />
+  <SelectItem value="g90" text="Gray 90" />
+  <SelectItem value="g100" text="Gray 100" />
+</Select>
+
 ### Hidden label

 <Select hideLabel labelText="Carbon theme" selected="g10" >
@ -75,7 +84,25 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
  <SelectItem value="g100" text="Gray 100" />
 </Select>

-### Disabled
+### Invalid state
+
+<Select invalid invalidText="Theme must be a dark variant" labelText="Carbon theme" selected="g10" >
+  <SelectItem value="white" text="White" />
+  <SelectItem value="g10" text="Gray 10" />
+  <SelectItem value="g90" text="Gray 90" />
+  <SelectItem value="g100" text="Gray 100" />
+</Select>
+
+### Warning state
+
+<Select warn warnText="The selected theme will not be persisted" labelText="Carbon theme" selected="g10" >
+  <SelectItem value="white" text="White" />
+  <SelectItem value="g10" text="Gray 10" />
+  <SelectItem value="g90" text="Gray 90" />
+  <SelectItem value="g100" text="Gray 100" />
+</Select>
+
+### Disabled state

 <Select disabled labelText="Carbon theme" selected="g10" >
  <SelectItem value="white" text="White" />
@ -86,4 +113,8 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]

 ### Skeleton

-<SelectSkeleton />
+<SelectSkeleton />
+
+### Skeleton (hidden label)
+
+<SelectSkeleton hideLabel />
--- a/docs/src/pages/components/Slider.svx
+++ b/docs/src/pages/components/Slider.svx
@ -11,6 +11,10 @@ components: ["Slider", "SliderSkeleton"]

 <Slider />

+### Hidden text input
+
+<Slider hideTextInput />
+
 ### Custom minimum, maximum values

 <Slider labelText="Runtime memory (MB)" min={10} max={990} maxLabel="990 MB" value={100} />
@ -23,6 +27,14 @@ components: ["Slider", "SliderSkeleton"]

 <Slider light labelText="Runtime memory (MB)" min={10} max={990} maxLabel="990 MB" value={100}  step={10} />

+### Invalid state
+
+<Slider invalid labelText="Runtime memory (MB)" min={10} max={990} maxLabel="990 MB" value={100}  step={10} />
+
+### Disabled state
+
+<Slider disabled labelText="Runtime memory (MB)" min={10} max={990} maxLabel="990 MB" value={100}  step={10} />
+
 ### Skeleton

 <SliderSkeleton />
--- a/docs/src/pages/components/Tabs.svx
+++ b/docs/src/pages/components/Tabs.svx
@ -37,6 +37,10 @@ components: ["Tabs", "Tab", "TabContent", "TabsSkeleton"]
  </div>
 </Tabs>

-### Skeleton
+### Skeleton (default)

-<TabsSkeleton count={3} />
+<TabsSkeleton count={3} />
+
+### Skeleton (container)
+
+<TabsSkeleton type="container" count={3} />
--- a/docs/src/pages/framed/ContextMenu/ContextMenu.svelte
+++ b/docs/src/pages/framed/ContextMenu/ContextMenu.svelte
@ -0,0 +1,45 @@
+<script>
+  import {
+    ContextMenu,
+    ContextMenuDivider,
+    ContextMenuGroup,
+    ContextMenuOption,
+  } from "carbon-components-svelte";
+  import CopyFile16 from "carbon-icons-svelte/lib/CopyFile16";
+  import Cut16 from "carbon-icons-svelte/lib/Cut16";
+
+  let selectedIds = [];
+
+  $: console.log("selectedIds", selectedIds);
+</script>
+
+<ContextMenu>
+  <ContextMenuOption
+    indented
+    labelText="Copy"
+    shortcutText="⌘C"
+    icon="{CopyFile16}"
+  />
+  <ContextMenuOption
+    indented
+    labelText="Cut"
+    shortcutText="⌘X"
+    icon="{Cut16}"
+  />
+  <ContextMenuDivider />
+  <ContextMenuOption indented labelText="Export as">
+    <ContextMenuGroup labelText="Export options" bind:selectedIds>
+      <ContextMenuOption id="pdf" labelText="PDF" />
+      <ContextMenuOption id="txt" labelText="TXT" />
+      <ContextMenuOption id="mp3" labelText="MP3" />
+    </ContextMenuGroup>
+  </ContextMenuOption>
+  <ContextMenuDivider />
+  <ContextMenuOption selectable labelText="Remove metadata" />
+  <ContextMenuDivider />
+  <ContextMenuGroup labelText="Style options">
+    <ContextMenuOption id="0" labelText="Font smoothing" selected />
+    <ContextMenuOption id="1" labelText="Reduce noise" />
+    <ContextMenuOption id="2" labelText="Auto-sharpen" />
+  </ContextMenuGroup>
+</ContextMenu>
--- a/docs/src/pages/framed/ContextMenu/ContextMenuGroups.svelte
+++ b/docs/src/pages/framed/ContextMenu/ContextMenuGroups.svelte
@ -0,0 +1,23 @@
+<script>
+  import {
+    ContextMenu,
+    ContextMenuDivider,
+    ContextMenuOption,
+    ContextMenuRadioGroup,
+  } from "carbon-components-svelte";
+
+  let selectedId = "0";
+
+  $: console.log("selectedId", selectedId);
+</script>
+
+<ContextMenu>
+  <ContextMenuOption indented labelText="Open" />
+  <ContextMenuDivider />
+  <ContextMenuRadioGroup bind:selectedId labelText="Radio group">
+    <ContextMenuOption id="0" labelText="Set as foreground" />
+    <ContextMenuOption id="1" labelText="Set as background" />
+  </ContextMenuRadioGroup>
+  <ContextMenuDivider />
+  <ContextMenuOption selectable labelText="Lock layer" />
+</ContextMenu>
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@ -837,15 +837,15 @@ caniuse-lite@^1.0.30001173, caniuse-lite@^1.0.30001178:
  integrity sha512-n8JVqXuZMVSPKiPiypjFtDTXc4jWIdjxull0f92WLo7e1MSi3uJ3NvveakSh/aCl1QKFAvIz3vIj0v+0K+FrXw==

 carbon-components-svelte@../:
-  version "0.29.2"
+  version "0.30.0"
  dependencies:
    carbon-icons-svelte "^10.21.0"
    flatpickr "4.6.9"

-carbon-components@10.30.0:
-  version "10.30.0"
-  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.30.0.tgz#c572620361ffdc8f4f67ed84b19ca2e29a912330"
-  integrity sha512-pHnrPcICl7L8vUHEXks4ZfAtyaGIP01aX7O/szg45/7Po2pQ3hXW1TBppYaUsw3UD+qGOF/CW7ID9Op6IQK4dA==
+carbon-components@10.31.0:
+  version "10.31.0"
+  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.31.0.tgz#050751e7fb4d845b7d1c6e8ac7fdfa9c71403c12"
+  integrity sha512-gUXRky9rUHavqFLJJQf+Lzouk8GHsXJUjxRgTOUQ6vdBfA0ks6ugwptG8fiFGwCJJht/CW9/YsKb5w8N9a39sg==
  dependencies:
    "@carbon/telemetry" "0.0.0-alpha.6"
    flatpickr "4.6.1"
--- a/package.json
+++ b/package.json
@ -23,7 +23,7 @@
    "publish-examples": "node scripts/publish-examples"
  },
  "dependencies": {
-    "carbon-icons-svelte": "^10.21.0",
+    "carbon-icons-svelte": "^10.27.0",
    "flatpickr": "4.6.9"
  },
  "devDependencies": {
@ -31,7 +31,7 @@
    "@rollup/plugin-node-resolve": "^11.1.1",
    "@tsconfig/svelte": "^1.0.10",
    "autoprefixer": "^10.2.4",
-    "carbon-components": "10.30.0",
+    "carbon-components": "10.31.0",
    "gh-pages": "^3.1.0",
    "husky": "^4.3.8",
    "lint-staged": "^10.5.3",
--- a/src/ContextMenu/ContextMenu.svelte
+++ b/src/ContextMenu/ContextMenu.svelte
@ -0,0 +1,130 @@
+<script>
+  /**
+   * Set to `true` to open the menu
+   * Either `x` and `y` must be greater than zero
+   */
+  export let open = false;
+
+  /** Specify the horizontal offset of the menu position */
+  export let x = 0;
+
+  /** Specify the vertical offset of the menu position */
+  export let y = 0;
+
+  /** Obtain a reference to the unordered list HTML element */
+  export let ref = null;
+
+  import {
+    setContext,
+    getContext,
+    afterUpdate,
+    createEventDispatcher,
+  } from "svelte";
+  import { writable } from "svelte/store";
+
+  const dispatch = createEventDispatcher();
+  const position = writable([x, y]);
+  const currentIndex = writable(-1);
+  const hasPopup = writable(false);
+  const ctx = getContext("ContextMenu");
+
+  let options = [];
+  let direction = 1;
+  let prevX = 0;
+  let prevY = 0;
+  let focusIndex = -1;
+
+  function close() {
+    open = false;
+    x = 0;
+    y = 0;
+    prevX = 0;
+    prevY = 0;
+    focusIndex = -1;
+  }
+
+  setContext("ContextMenu", {
+    currentIndex,
+    position,
+    close,
+    setPopup: (popup) => {
+      hasPopup.set(popup);
+    },
+  });
+
+  afterUpdate(() => {
+    if (open) {
+      options = [...ref.querySelectorAll("li[data-nested='false']")];
+
+      if (level === 1) {
+        if (prevX !== x || prevY !== y) ref.focus();
+        prevX = x;
+        prevY = y;
+      }
+
+      dispatch("open");
+    } else {
+      dispatch("close");
+    }
+
+    if (!$hasPopup && options[focusIndex]) options[focusIndex].focus();
+  });
+
+  $: level = !ctx ? 1 : 2;
+  $: currentIndex.set(focusIndex);
+</script>
+
+<svelte:window
+  on:contextmenu|preventDefault="{(e) => {
+    if (level > 1) return;
+    if (open || x === 0) x = e.x;
+    if (open || y === 0) y = e.y;
+    position.set([x, y]);
+    open = true;
+  }}"
+  on:click="{(e) => {
+    if (!open) return;
+    if (e.target.contains(ref)) close();
+  }}"
+  on:keydown="{(e) => {
+    if (open && e.key === 'Escape') close();
+  }}"
+/>
+
+<ul
+  bind:this="{ref}"
+  role="menu"
+  tabindex="-1"
+  data-direction="{direction}"
+  data-level="{level}"
+  class:bx--context-menu="{true}"
+  class:bx--context-menu--open="{open}"
+  class:bx--context-menu--invisible="{open && x === 0 && y === 0}"
+  class:bx--context-menu--root="{level === 1}"
+  {...$$restProps}
+  style="left: {x}px; top: {y}px; {$$restProps.style}"
+  on:click
+  on:click="{({ target }) => {
+    const closestOption = target.closest('[tabindex]');
+
+    if (closestOption && closestOption.getAttribute('role') !== 'menuitem') {
+      close();
+    }
+  }}"
+  on:keydown
+  on:keydown|preventDefault="{(e) => {
+    if ($hasPopup) return;
+
+    if (e.key === 'ArrowDown') {
+      if (focusIndex < options.length - 1) focusIndex++;
+    } else if (e.key === 'ArrowUp') {
+      if (focusIndex === -1) {
+        focusIndex = options.length - 1;
+      } else {
+        if (focusIndex > 0) focusIndex--;
+      }
+    }
+  }}"
+>
+  <slot />
+</ul>
--- a/src/ContextMenu/ContextMenuDivider.svelte
+++ b/src/ContextMenu/ContextMenuDivider.svelte
@ -0,0 +1 @@
+<li role="separator" class:bx--context-menu-divider="{true}"></li>
--- a/src/ContextMenu/ContextMenuGroup.svelte
+++ b/src/ContextMenu/ContextMenuGroup.svelte
@ -0,0 +1,36 @@
+<script>
+  /** @type {string[]} */
+  export let selectedIds = [];
+
+  /** Specify the label text */
+  export let labelText = "";
+
+  import { setContext } from "svelte";
+  import { writable } from "svelte/store";
+
+  const currentIds = writable([]);
+
+  setContext("ContextMenuGroup", {
+    currentIds,
+    addOption: ({ id }) => {
+      if (!selectedIds.includes(id)) {
+        selectedIds = [...selectedIds, id];
+      }
+    },
+    toggleOption: ({ id }) => {
+      if (!selectedIds.includes(id)) {
+        selectedIds = [...selectedIds, id];
+      } else {
+        selectedIds = selectedIds.filter((_) => _ !== id);
+      }
+    },
+  });
+
+  $: currentIds.set(selectedIds);
+</script>
+
+<li role="none">
+  <ul role="group" aria-label="{labelText}">
+    <slot />
+  </ul>
+</li>
--- a/src/ContextMenu/ContextMenuOption.svelte
+++ b/src/ContextMenu/ContextMenuOption.svelte
@ -0,0 +1,263 @@
+<script>
+  /** Set to `true` to enable the disabled state */
+  export let disabled = false;
+
+  /** Set to `true` to indent the label */
+  export let indented = false;
+
+  /**
+   * Specify the icon from `carbon-icons-svelte` to render
+   * Icon is rendered to the left of the label text
+   * @type {typeof import("carbon-icons-svelte").CarbonIcon}
+   */
+  export let icon = undefined;
+
+  /**
+   * Specify the label text
+   * Alternatively, use the "labelText" slot (e.g., <span slot="labelText">...</span>)
+   */
+  export let labelText = "";
+
+  /** Set to `true` to use the selected variant */
+  export let selected = false;
+
+  /**
+   * Set to `true` to enable the selectable variant
+   * Automatically set to `true` if `selected` is `true`
+   */
+  export let selectable = false;
+
+  /**
+   * Specify the shortcut text
+   * Alternatively, use the "shortcutText" slot (e.g., <span slot="shortcutText">...</span>)
+   */
+  export let shortcutText = "";
+
+  /**
+   * Specify the id
+   * It's recommended to provide an id as a value to bind to within a selectable/radio menu group
+   */
+  export let id = "ccs-" + Math.random().toString(36);
+
+  /** Obtain a reference to the list item HTML element */
+  export let ref = null;
+
+  import { onMount, getContext, createEventDispatcher, tick } from "svelte";
+  import ContextMenu from "./ContextMenu.svelte";
+  import Checkmark16 from "carbon-icons-svelte/lib/Checkmark16/Checkmark16.svelte";
+  import CaretRight16 from "carbon-icons-svelte/lib/CaretRight16/CaretRight16.svelte";
+
+  const dispatch = createEventDispatcher();
+  const ctx = getContext("ContextMenu");
+  const ctxGroup = getContext("ContextMenuGroup");
+  const ctxRadioGroup = getContext("ContextMenuRadioGroup");
+
+  // "moderate-01" duration (ms) from Carbon motion recommended for small expansion, short distance movements
+  const moderate01 = 150;
+
+  let unsubCurrentIds = undefined;
+  let unsubCurrentId = undefined;
+  let timeoutHover = undefined;
+  let rootMenuPosition = [0, 0];
+  let focusIndex = 0;
+  let options = [];
+  let role = "menuitem";
+  let submenuOpen = false;
+  let submenuPosition = [0, 0];
+
+  const unsubPosition = ctx.position.subscribe((position) => {
+    rootMenuPosition = position;
+  });
+
+  function handleClick(opts = {}) {
+    if (disabled) return ctx.close();
+    if (subOptions) return;
+
+    if (!!ctxGroup) {
+      ctxGroup.toggleOption({ id });
+    } else if (!!ctxRadioGroup) {
+      if (opts.fromKeyboard) {
+        ctxRadioGroup.setOption({ id: opts.id });
+      } else {
+        ctxRadioGroup.setOption({ id });
+      }
+    } else {
+      selected = !selected;
+    }
+
+    ctx.close();
+    dispatch("click");
+  }
+
+  onMount(() => {
+    if (selected === true) selectable = true;
+
+    if (ctxGroup) {
+      unsubCurrentIds = ctxGroup.currentIds.subscribe((_currentIds) => {
+        selected = _currentIds.includes(id);
+      });
+    }
+
+    if (ctxRadioGroup) {
+      unsubCurrentId = ctxRadioGroup.currentId.subscribe((_id) => {
+        selected = id === _id;
+      });
+    }
+
+    return () => {
+      unsubPosition();
+      if (unsubCurrentIds) unsubCurrentIds();
+      if (unsubCurrentId) unsubCurrentId();
+      if (typeof timeoutHover === "number") clearTimeout(timeoutHover);
+    };
+  });
+
+  $: isSelectable = !!ctxGroup || selectable;
+  $: isRadio = !!ctxRadioGroup;
+  $: subOptions = $$slots.default;
+  $: ctx.setPopup(submenuOpen);
+  $: if (submenuOpen) {
+    const { width, y } = ref.getBoundingClientRect();
+    submenuPosition = [rootMenuPosition[0] + width, y];
+  }
+  $: {
+    if (isSelectable) {
+      indented = true;
+      role = "menuitemcheckbox";
+
+      if (selected) {
+        if (ctxGroup) ctxGroup.addOption({ id });
+        icon = Checkmark16;
+      } else {
+        icon = undefined;
+      }
+    }
+
+    if (isRadio) {
+      indented = true;
+      role = "menuitemradio";
+      ctxRadioGroup.addOption({ id });
+
+      if (selected) {
+        if (ctxRadioGroup) ctxRadioGroup.setOption({ id });
+        icon = Checkmark16;
+      } else {
+        icon = undefined;
+      }
+    }
+  }
+</script>
+
+<li
+  bind:this="{ref}"
+  role="{role}"
+  tabindex="-1"
+  aria-disabled="{!subOptions && disabled}"
+  aria-haspopup="{subOptions ? true : undefined}"
+  aria-expanded="{subOptions ? submenuOpen : undefined}"
+  class:bx--context-menu-option="{true}"
+  class:bx--context-menu-option--disabled="{true}"
+  class:bx--context-menu-option--active="{subOptions && submenuOpen}"
+  indented="{indented}"
+  aria-checked="{isSelectable || isRadio ? selected : undefined}"
+  data-nested="{ref &&
+    ref.closest('.bx--context-menu').getAttribute('data-level') === '2'}"
+  data-sub="{subOptions}"
+  data-id="{id}"
+  {...$$restProps}
+  on:keydown
+  on:keydown="{async ({ key, target }) => {
+    if (
+      subOptions &&
+      (key === 'ArrowRight' || key === ' ' || key === 'Enter')
+    ) {
+      submenuOpen = true;
+      await tick();
+      options = [...ref.querySelectorAll('li[tabindex]')];
+      if (options[focusIndex]) options[focusIndex].focus();
+      return;
+    }
+
+    if (submenuOpen) {
+      if (key === 'ArrowLeft') {
+        submenuOpen = false;
+        focusIndex = 0;
+        return;
+      }
+
+      if (key === 'ArrowDown') {
+        if (focusIndex < options.length - 1) focusIndex++;
+      } else if (key === 'ArrowUp') {
+        if (focusIndex === -1) {
+          focusIndex = options.length - 1;
+        } else {
+          if (focusIndex > 0) focusIndex--;
+        }
+      }
+
+      if (options[focusIndex]) options[focusIndex].focus();
+    }
+
+    if (key === ' ' || key === 'Enter') {
+      handleClick({ fromKeyboard: true, id: target.getAttribute('data-id') });
+    }
+  }}"
+  on:mouseenter
+  on:mouseenter="{() => {
+    if (subOptions) {
+      timeoutHover = setTimeout(() => {
+        submenuOpen = true;
+      }, moderate01);
+    }
+  }}"
+  on:mouseleave
+  on:mouseleave="{(e) => {
+    if (subOptions) {
+      if (typeof timeoutHover === 'number') clearTimeout(timeoutHover);
+      submenuOpen = false;
+    }
+  }}"
+  on:click="{handleClick}"
+>
+  {#if subOptions}
+    <div
+      class:bx--context-menu-option__content="{true}"
+      class:bx--context-menu-option__content--disabled="{disabled}"
+    >
+      {#if indented}
+        <div class:bx--context-menu-option__icon="{true}">
+          <svelte:component this="{icon}" />
+        </div>
+      {/if}
+      <span class:bx--context-menu-option__label="{true}" title="{labelText}">
+        <slot name="labelText">{labelText}</slot>
+      </span>
+      <div class:bx--context-menu-option__info="{true}"><CaretRight16 /></div>
+    </div>
+
+    <ContextMenu
+      open="{submenuOpen}"
+      x="{submenuPosition[0]}"
+      y="{submenuPosition[1]}"
+    >
+      <slot />
+    </ContextMenu>
+  {:else}
+    <div
+      class:bx--context-menu-option__content="{true}"
+      class:bx--context-menu-option__content--disabled="{disabled}"
+    >
+      {#if indented}
+        <div class:bx--context-menu-option__icon="{true}">
+          <svelte:component this="{icon}" />
+        </div>
+      {/if}
+      <span class:bx--context-menu-option__label="{true}" title="{labelText}">
+        <slot name="labelText">{labelText}</slot>
+      </span>
+      <div class:bx--context-menu-option__info="{true}">
+        <slot name="shortcutText">{shortcutText}</slot>
+      </div>
+    </div>
+  {/if}
+</li>
--- a/src/ContextMenu/ContextMenuRadioGroup.svelte
+++ b/src/ContextMenu/ContextMenuRadioGroup.svelte
@ -0,0 +1,34 @@
+<script>
+  /** Set the selected radio group id */
+  export let selectedId = "";
+
+  /** Specify the label text */
+  export let labelText = "";
+
+  import { setContext } from "svelte";
+  import { writable } from "svelte/store";
+
+  const currentId = writable("");
+  const radioIds = writable([]);
+
+  setContext("ContextMenuRadioGroup", {
+    currentId,
+    radioIds,
+    addOption: ({ id }) => {
+      if (!$radioIds.includes(id)) {
+        radioIds.update((_) => [..._, id]);
+      }
+    },
+    setOption: ({ id }) => {
+      selectedId = id;
+    },
+  });
+
+  $: currentId.set(selectedId);
+</script>
+
+<li role="none">
+  <ul role="group" aria-label="{labelText}">
+    <slot />
+  </ul>
+</li>
--- a/src/ContextMenu/index.js
+++ b/src/ContextMenu/index.js
@ -0,0 +1,5 @@
+export { default as ContextMenu } from "./ContextMenu.svelte";
+export { default as ContextMenuDivider } from "./ContextMenuDivider.svelte";
+export { default as ContextMenuGroup } from "./ContextMenuGroup.svelte";
+export { default as ContextMenuOption } from "./ContextMenuOption.svelte";
+export { default as ContextMenuRadioGroup } from "./ContextMenuRadioGroup.svelte";
--- a/src/Link/Link.svelte
+++ b/src/Link/Link.svelte
@ -40,7 +40,6 @@
    <slot />
  </p>
 {:else}
-  <!-- svelte-ignore a11y-missing-attribute -->
  <a
    bind:this="{ref}"
    class:bx--link="{true}"
@ -55,8 +54,6 @@
    on:click
    on:mouseover
    on:mouseenter
-    on:mouseleave
+    on:mouseleave><slot /></a
  >
-    <slot />
-  </a>
 {/if}
--- a/src/ListBox/ListBoxMenuIcon.svelte
+++ b/src/ListBox/ListBoxMenuIcon.svelte
@ -30,7 +30,6 @@
  class:bx--list-box__menu-icon--open="{open}"
  {...$$restProps}
  on:click|preventDefault
-  style="top: 0; bottom: 0; margin: auto;"
 >
  <ChevronDown16 aria-label="{description}" title="{description}" />
 </div>
--- a/src/MultiSelect/MultiSelect.svelte
+++ b/src/MultiSelect/MultiSelect.svelte
@ -1,4 +1,12 @@
 <script>
+  /**
+   * @typedef {string} MultiSelectItemId
+   * @typedef {string} MultiSelectItemText
+   * @typedef {{ id: MultiSelectItemId; text: MultiSelectItemText; }} MultiSelectItem
+   * @event {{ selectedIds: string[]; selected: MultiSelectItem[]; unselected: MultiSelectItem[]; }} select
+   * @event {any} clear
+   */
+
  /**
   * Set the multiselect items
   * @type {MultiSelectItem[]}
@ -117,13 +125,6 @@
   */
  export let name = undefined;

-  /**
-   * @typedef {string} MultiSelectItemId
-   * @typedef {string} MultiSelectItemText
-   * @typedef {{ id: MultiSelectItemId; text: MultiSelectItemText; }} MultiSelectItem
-   * @event {{ selectedIds: string[]; selected: MultiSelectItem[]; unselected: MultiSelectItem[]; }} select
-   */
-
  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";
--- a/src/NumberInput/NumberInput.svelte
+++ b/src/NumberInput/NumberInput.svelte
@ -101,8 +101,8 @@
  export let ref = null;

  import { createEventDispatcher, afterUpdate } from "svelte";
-  import CaretDownGlyph from "carbon-icons-svelte/lib/CaretDownGlyph/CaretDownGlyph.svelte";
-  import CaretUpGlyph from "carbon-icons-svelte/lib/CaretUpGlyph/CaretUpGlyph.svelte";
+  import Add16 from "carbon-icons-svelte/lib/Add16/Add16.svelte";
+  import Subtract16 from "carbon-icons-svelte/lib/Subtract16/Subtract16.svelte";
  import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
  import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";

@ -187,7 +187,7 @@
          }}"
          disabled="{disabled}"
        >
-          <CaretDownGlyph class="down-icon" />
+          <Subtract16 class="down-icon" />
        </button>
        <input
          bind:this="{ref}"
@ -221,7 +221,7 @@
          }}"
          disabled="{disabled}"
        >
-          <CaretUpGlyph class="up-icon" />
+          <Add16 class="up-icon" />
        </button>
      </div>
    {:else}
@ -271,23 +271,7 @@
        <div class:bx--number__controls="{true}">
          <button
            type="button"
-            aria-live="polite"
-            aria-atomic="true"
-            title="{incrementLabel || iconDescription}"
-            aria-label="{incrementLabel || iconDescription}"
-            class:bx--number__control-btn="{true}"
-            class:up-icon="{true}"
-            on:click="{() => {
-              updateValue(1);
-            }}"
-            disabled="{disabled}"
-          >
-            <CaretUpGlyph class="up-icon" />
-          </button>
-          <button
-            type="button"
-            aria-live="polite"
-            aria-atomic="true"
+            tabindex="-1"
            title="{decrementLabel || iconDescription}"
            aria-label="{decrementLabel || iconDescription}"
            class:bx--number__control-btn="{true}"
@ -297,8 +281,24 @@
            }}"
            disabled="{disabled}"
          >
-            <CaretDownGlyph class="down-icon" />
+            <Subtract16 class="down-icon" />
          </button>
+          <div class:bx--number__rule-divider="{true}"></div>
+          <button
+            type="button"
+            tabindex="-1"
+            title="{incrementLabel || iconDescription}"
+            aria-label="{incrementLabel || iconDescription}"
+            class:bx--number__control-btn="{true}"
+            class:up-icon="{true}"
+            on:click="{() => {
+              updateValue(1);
+            }}"
+            disabled="{disabled}"
+          >
+            <Add16 class="up-icon" />
+          </button>
+          <div class:bx--number__rule-divider="{true}"></div>
        </div>
      </div>
    {/if}
--- a/src/Pagination/Pagination.svelte
+++ b/src/Pagination/Pagination.svelte
@ -1,6 +1,8 @@
 <script>
  /**
   * @event {{ pageSize: number; page: number; }} update
+   * @event {{ page: number; }} click:button--previous
+   * @event {{ page: number; }} click:button--next
   */

  /** Specify the current page index */
@ -162,6 +164,7 @@
        : ''}"
      on:click="{() => {
        page--;
+        dispatch('click:button--previous', { page });
      }}"
    />
    <Button
@ -177,6 +180,7 @@
        : ''}"
      on:click="{() => {
        page++;
+        dispatch('click:button--next', { page });
      }}"
    />
  </div>
--- a/src/Popover/Popover.svelte
+++ b/src/Popover/Popover.svelte
@ -0,0 +1,68 @@
+<script>
+  /** Set to `true` to display the popover */
+  export let open = false;
+
+  /** Set to `true` to close the popover on an outside click */
+  export let closeOnOutsideClick = false;
+
+  /** Set to `true` render a caret */
+  export let caret = false;
+
+  /**
+   * Specify the alignment of the caret
+   * @type {"top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "left" | "left-bottom" | "left-top" | "right" | "right-bottom" | "right-top"}
+   */
+  export let align = "top";
+
+  /** Set to `true` to enable the light variant */
+  export let light = false;
+
+  /** Set to `true` to enable the high contrast variant */
+  export let highContrast = false;
+
+  /** Set to `true` to use a relative position */
+  export let relative = false;
+
+  import { createEventDispatcher } from "svelte";
+
+  const dispatch = createEventDispatcher();
+
+  let ref = null;
+</script>
+
+<svelte:window
+  on:click="{(e) => {
+    if (!open) return;
+    if (e.target.contains(ref)) {
+      dispatch('click:outside');
+      if (closeOnOutsideClick) open = false;
+    }
+  }}"
+/>
+
+<div
+  bind:this="{ref}"
+  class:bx--popover="{true}"
+  class:bx--popover--caret="{caret}"
+  class:bx--popover--light="{light}"
+  class:bx--popover--high-contrast="{highContrast}"
+  class:bx--popover--top="{align === 'top'}"
+  class:bx--popover--top-left="{align === 'top-left'}"
+  class:bx--popover--top-right="{align === 'top-right'}"
+  class:bx--popover--bottom="{align === 'bottom'}"
+  class:bx--popover--bottom-left="{align === 'bottom-left'}"
+  class:bx--popover--bottom-right="{align === 'bottom-right'}"
+  class:bx--popover--left="{align === 'left'}"
+  class:bx--popover--left-bottom="{align === 'left-bottom'}"
+  class:bx--popover--left-top="{align === 'left-top'}"
+  class:bx--popover--right="{align === 'right'}"
+  class:bx--popover--right-bottom="{align === 'right-bottom'}"
+  class:bx--popover--right-top="{align === 'right-top'}"
+  class:bx--popover--open="{open}"
+  class:bx--popover--relative="{relative}"
+  {...$$restProps}
+>
+  <div class:bx--popover-contents="{true}">
+    <slot />
+  </div>
+</div>
--- a/src/Popover/index.js
+++ b/src/Popover/index.js
@ -0,0 +1 @@
+export { default as Popover } from "./Popover.svelte";
--- a/src/Search/Search.svelte
+++ b/src/Search/Search.svelte
@ -108,7 +108,7 @@
      bind:this="{ref}"
      role="searchbox"
      class:bx--search-input="{true}"
-      autofocus="{autofocus}"
+      autofocus="{autofocus === true ? true : undefined}"
      autocomplete="{autocomplete}"
      disabled="{disabled}"
      id="{id}"
--- a/src/Select/Select.svelte
+++ b/src/Select/Select.svelte
@ -39,6 +39,12 @@
  /** Specify the invalid state text */
  export let invalidText = "";

+  /** Set to `true` to indicate an warning state */
+  export let warn = false;
+
+  /** Specify the warning state text */
+  export let warnText = "";
+
  /** Specify the helper text */
  export let helperText = "";

@ -58,6 +64,7 @@
  import { writable } from "svelte/store";
  import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16/ChevronDown16.svelte";
  import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
+  import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";

  const dispatch = createEventDispatcher();
  const selectedValue = writable(selected);
@ -80,6 +87,7 @@
    class:bx--select--light="{light}"
    class:bx--select--invalid="{invalid}"
    class:bx--select--disabled="{disabled}"
+    class:bx--select--warning="{warn}"
  >
    {#if !noLabel}
      <label
@ -158,6 +166,11 @@
        {#if invalid}
          <WarningFilled16 class="bx--select__invalid-icon" />
        {/if}
+        {#if !invalid && warn}
+          <WarningAltFilled16
+            class="bx--select__invalid-icon bx--select__invalid-icon--warning"
+          />
+        {/if}
      </div>
      {#if !invalid && helperText}
        <div
@ -172,6 +185,11 @@
          {invalidText}
        </div>
      {/if}
+      {#if !invalid && warn}
+        <div id="{errorId}" class:bx--form-requirement="{true}">
+          {warnText}
+        </div>
+      {/if}
    {/if}
  </div>
 </div>
--- a/src/Slider/Slider.svelte
+++ b/src/Slider/Slider.svelte
@ -191,21 +191,27 @@
      />
    </div>
    <span class:bx--slider__range-label="{true}">{maxLabel || max}</span>
-    {#if !hideTextInput}
-      <input
-        type="{inputType}"
-        id="input-{id}"
-        aria-label="{$$props['aria-label'] || 'Slider number input'}"
-        class:bx--text-input="{true}"
-        class:bx--slider-text-input="{true}"
-        class:bx--text-input--light="{light}"
-        class:bx--text-input--invalid="{invalid}"
-        on:change="{({ target }) => {
-          value = Number(target.value);
-        }}"
-        disabled="{disabled}"
-        value="{value}"
-      />
-    {/if}
+    <input
+      type="{hideTextInput ? 'hidden' : inputType}"
+      style="{hideTextInput ? 'display: none' : undefined}"
+      id="input-{id}"
+      name="{name}"
+      class:bx--text-input="{true}"
+      class:bx--slider-text-input="{true}"
+      class:bx--text-input--light="{light}"
+      class:bx--text-input--invalid="{invalid}"
+      value="{value}"
+      aria-label="{$$props['aria-label'] || 'Slider number input'}"
+      disabled="{disabled}"
+      required="{required}"
+      min="{min}"
+      max="{max}"
+      step="{step}"
+      on:change="{({ target }) => {
+        value = Number(target.value);
+      }}"
+      data-invalid="{invalid || null}"
+      aria-invalid="{invalid || null}"
+    />
  </div>
 </div>
--- a/src/StructuredList/StructuredListBody.svelte
+++ b/src/StructuredList/StructuredListBody.svelte
@ -1,5 +1,6 @@
 <div
  class:bx--structured-list-tbody="{true}"
+  role="rowgroup"
  {...$$restProps}
  on:click
  on:mouseover
--- a/src/Tabs/Tabs.svelte
+++ b/src/Tabs/Tabs.svelte
@ -19,7 +19,7 @@

  import { createEventDispatcher, afterUpdate, setContext } from "svelte";
  import { writable, derived } from "svelte/store";
-  import ChevronDownGlyph from "carbon-icons-svelte/lib/ChevronDownGlyph";
+  import ChevronDownGlyph from "carbon-icons-svelte/lib/ChevronDownGlyph/ChevronDownGlyph.svelte";

  const dispatch = createEventDispatcher();

--- a/src/Tabs/TabsSkeleton.svelte
+++ b/src/Tabs/TabsSkeleton.svelte
@ -1,27 +1,31 @@
 <script>
  /** Specify the number of tabs to render */
  export let count = 4;
+
+  /**
+   * Specify the type of tabs
+   * @type {"default" | "container"}
+   */
+  export let type = "default";
 </script>

 <div
  class:bx--tabs="{true}"
  class:bx--skeleton="{true}"
+  class:bx--tabs--scrollable="{true}"
+  class:bx--tabs--scrollable--container="{type === 'container'}"
  {...$$restProps}
  on:click
  on:mouseover
  on:mouseenter
  on:mouseleave
 >
-  <div class:bx--tabs-trigger="{true}">
-    <div class:bx--tabs-trigger-text="{true}">&nbsp;</div>
-    <svg width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
-      <path d="M10 0L5 5 0 0z"></path>
-    </svg>
-  </div>
-  <ul class:bx--tabs__nav="{true}" class:bx--tabs__nav--hidden="{true}">
-    {#each Array.from({ length: count }, (_, i) => i) as item, i (item)}
-      <li class:bx--tabs__nav-item="{true}">
-        <div class:bx--tabs__nav-link="{true}">&nbsp;</div>
+  <ul class:bx--tabs--scrollable__nav="{true}">
+    {#each Array.from({ length: count }, (_, i) => i) as item}
+      <li class:bx--tabs--scrollable__nav-item="{true}">
+        <div class:bx--tabs__nav-link="{true}">
+          <span></span>
+        </div>
      </li>
    {/each}
  </ul>
--- a/src/index.js
+++ b/src/index.js
@ -4,6 +4,13 @@ export { Breadcrumb, BreadcrumbItem, BreadcrumbSkeleton } from "./Breadcrumb";
 export { Button, ButtonSkeleton, ButtonSet } from "./Button";
 export { Checkbox, CheckboxSkeleton } from "./Checkbox";
 export { ContentSwitcher, Switch } from "./ContentSwitcher";
+export {
+  ContextMenu,
+  ContextMenuDivider,
+  ContextMenuGroup,
+  ContextMenuOption,
+  ContextMenuRadioGroup,
+} from "./ContextMenu";
 export { Copy } from "./Copy";
 export { CopyButton } from "./CopyButton";
 export { ComboBox } from "./ComboBox";
@ -77,6 +84,7 @@ export { OrderedList } from "./OrderedList";
 export { OverflowMenu, OverflowMenuItem } from "./OverflowMenu";
 export { Pagination, PaginationSkeleton } from "./Pagination";
 export { PaginationNav } from "./PaginationNav";
+export { Popover } from "./Popover";
 export {
  ProgressIndicator,
  ProgressIndicatorSkeleton,
--- a/tests/ContextMenu.test.svelte
+++ b/tests/ContextMenu.test.svelte
@ -0,0 +1,58 @@
+<script lang="ts">
+  import {
+    ContextMenu,
+    ContextMenuDivider,
+    ContextMenuOption,
+    ContextMenuRadioGroup,
+    ContextMenuGroup,
+  } from "../types";
+  import CopyFile16 from "carbon-icons-svelte/lib/CopyFile16";
+  import Cut16 from "carbon-icons-svelte/lib/Cut16";
+
+  let selectedId = "0";
+  let selectedIds = [];
+
+  $: console.log("selectedId", selectedId);
+</script>
+
+<ContextMenu>
+  <ContextMenuOption
+    indented
+    labelText="Copy"
+    shortcutText="⌘C"
+    icon="{CopyFile16}"
+  />
+  <ContextMenuOption
+    indented
+    labelText="Cut"
+    shortcutText="⌘X"
+    icon="{Cut16}"
+  />
+  <ContextMenuDivider />
+  <ContextMenuOption indented labelText="Export as">
+    <ContextMenuGroup labelText="Export options" bind:selectedIds>
+      <ContextMenuOption id="pdf" labelText="PDF" />
+      <ContextMenuOption id="txt" labelText="TXT" />
+      <ContextMenuOption id="mp3" labelText="MP3" />
+    </ContextMenuGroup>
+  </ContextMenuOption>
+  <ContextMenuDivider />
+  <ContextMenuOption selectable labelText="Remove metadata" />
+  <ContextMenuDivider />
+  <ContextMenuGroup labelText="Style options">
+    <ContextMenuOption id="0" labelText="Font smoothing" selected />
+    <ContextMenuOption id="1" labelText="Reduce noise" />
+    <ContextMenuOption id="2" labelText="Auto-sharpen" />
+  </ContextMenuGroup>
+</ContextMenu>
+
+<ContextMenu on:open on:close>
+  <ContextMenuOption indented labelText="Open" />
+  <ContextMenuDivider />
+  <ContextMenuRadioGroup bind:selectedId labelText="Radio group">
+    <ContextMenuOption id="0" labelText="Set as foreground" />
+    <ContextMenuOption id="1" labelText="Set as background" />
+  </ContextMenuRadioGroup>
+  <ContextMenuDivider />
+  <ContextMenuOption indented labelText="Lock layer" />
+</ContextMenu>
--- a/tests/LocalStorage.test.svelte
+++ b/tests/LocalStorage.test.svelte
@ -1,7 +1,7 @@
 <script lang="ts">
  import { LocalStorage } from "../types";

-  let storage;
+  let storage: LocalStorage;
  let toggled = false;
  let events = [];
 </script>
--- a/tests/Popover.test.svelte
+++ b/tests/Popover.test.svelte
@ -0,0 +1,20 @@
+<script lang="ts">
+  import { Popover } from "../types";
+
+  let open = false;
+</script>
+
+<Popover
+  bind:open
+  closeOnOutsideClick
+  align="right"
+  caret
+  relative
+  light
+  highContrast
+  on:click:outside="{() => {
+    console.log('on:click:outside');
+  }}"
+>
+  <div style="padding: var(--cds-spacing-05)">Content</div>
+</Popover>
--- a/types/ContextMenu/ContextMenu.d.ts
+++ b/types/ContextMenu/ContextMenu.d.ts
@ -0,0 +1,41 @@
+/// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
+
+export interface ContextMenuProps
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["ul"]> {
+  /**
+   * Set to `true` to open the menu
+   * Either `x` and `y` must be greater than zero
+   * @default false
+   */
+  open?: boolean;
+
+  /**
+   * Specify the horizontal offset of the menu position
+   * @default 0
+   */
+  x?: number;
+
+  /**
+   * Specify the vertical offset of the menu position
+   * @default 0
+   */
+  y?: number;
+
+  /**
+   * Obtain a reference to the unordered list HTML element
+   * @default null
+   */
+  ref?: null | HTMLUListElement;
+}
+
+export default class ContextMenu extends SvelteComponentTyped<
+  ContextMenuProps,
+  {
+    click: WindowEventMap["click"];
+    keydown: WindowEventMap["keydown"];
+    open: CustomEvent<any>;
+    close: CustomEvent<any>;
+  },
+  { default: {} }
+> {}
--- a/types/ContextMenu/ContextMenuDivider.d.ts
+++ b/types/ContextMenu/ContextMenuDivider.d.ts
@ -0,0 +1,10 @@
+/// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
+
+export interface ContextMenuDividerProps {}
+
+export default class ContextMenuDivider extends SvelteComponentTyped<
+  ContextMenuDividerProps,
+  {},
+  {}
+> {}
--- a/types/ContextMenu/ContextMenuGroup.d.ts
+++ b/types/ContextMenu/ContextMenuGroup.d.ts
@ -0,0 +1,21 @@
+/// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
+
+export interface ContextMenuGroupProps {
+  /**
+   * @default []
+   */
+  selectedIds?: string[];
+
+  /**
+   * Specify the label text
+   * @default ""
+   */
+  labelText?: string;
+}
+
+export default class ContextMenuGroup extends SvelteComponentTyped<
+  ContextMenuGroupProps,
+  {},
+  { default: {} }
+> {}
--- a/types/ContextMenu/ContextMenuOption.d.ts
+++ b/types/ContextMenu/ContextMenuOption.d.ts
@ -0,0 +1,74 @@
+/// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
+
+export interface ContextMenuOptionProps
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> {
+  /**
+   * Set to `true` to enable the disabled state
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Set to `true` to indent the label
+   * @default false
+   */
+  indented?: boolean;
+
+  /**
+   * Specify the icon from `carbon-icons-svelte` to render
+   * Icon is rendered to the left of the label text
+   */
+  icon?: typeof import("carbon-icons-svelte").CarbonIcon;
+
+  /**
+   * Specify the label text
+   * Alternatively, use the "labelText" slot (e.g., <span slot="labelText">...</span>)
+   * @default ""
+   */
+  labelText?: string;
+
+  /**
+   * Set to `true` to use the selected variant
+   * @default false
+   */
+  selected?: boolean;
+
+  /**
+   * Set to `true` to enable the selectable variant
+   * Automatically set to `true` if `selected` is `true`
+   * @default false
+   */
+  selectable?: boolean;
+
+  /**
+   * Specify the shortcut text
+   * Alternatively, use the "shortcutText" slot (e.g., <span slot="shortcutText">...</span>)
+   * @default ""
+   */
+  shortcutText?: string;
+
+  /**
+   * Specify the id
+   * It's recommended to provide an id as a value to bind to within a selectable/radio menu group
+   * @default "ccs-" + Math.random().toString(36)
+   */
+  id?: string;
+
+  /**
+   * Obtain a reference to the list item HTML element
+   * @default null
+   */
+  ref?: null | HTMLLIElement;
+}
+
+export default class ContextMenuOption extends SvelteComponentTyped<
+  ContextMenuOptionProps,
+  {
+    keydown: WindowEventMap["keydown"];
+    mouseenter: WindowEventMap["mouseenter"];
+    mouseleave: WindowEventMap["mouseleave"];
+    click: CustomEvent<any>;
+  },
+  { default: {}; labelText: {}; shortcutText: {} }
+> {}
--- a/types/ContextMenu/ContextMenuRadioGroup.d.ts
+++ b/types/ContextMenu/ContextMenuRadioGroup.d.ts
@ -0,0 +1,22 @@
+/// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
+
+export interface ContextMenuRadioGroupProps {
+  /**
+   * Set the selected radio group id
+   * @default ""
+   */
+  selectedId?: string;
+
+  /**
+   * Specify the label text
+   * @default ""
+   */
+  labelText?: string;
+}
+
+export default class ContextMenuRadioGroup extends SvelteComponentTyped<
+  ContextMenuRadioGroupProps,
+  {},
+  { default: {} }
+> {}
--- a/types/MultiSelect/MultiSelect.d.ts
+++ b/types/MultiSelect/MultiSelect.d.ts
@ -184,7 +184,7 @@ export default class MultiSelect extends SvelteComponentTyped<
      selected: MultiSelectItem[];
      unselected: MultiSelectItem[];
    }>;
-    clear: WindowEventMap["clear"];
+    clear: CustomEvent<any>;
    keydown: WindowEventMap["keydown"];
    focus: WindowEventMap["focus"];
    blur: WindowEventMap["blur"];
--- a/types/Pagination/Pagination.d.ts
+++ b/types/Pagination/Pagination.d.ts
@ -102,6 +102,10 @@ export interface PaginationProps

 export default class Pagination extends SvelteComponentTyped<
  PaginationProps,
-  { update: CustomEvent<{ pageSize: number; page: number }> },
+  {
+    update: CustomEvent<{ pageSize: number; page: number }>;
+    ["click:button--previous"]: CustomEvent<{ page: number }>;
+    ["click:button--next"]: CustomEvent<{ page: number }>;
+  },
  {}
 > {}
--- a/types/Popover/Popover.d.ts
+++ b/types/Popover/Popover.d.ts
@ -0,0 +1,65 @@
+/// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
+
+export interface PopoverProps
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * Set to `true` to display the popover
+   * @default false
+   */
+  open?: boolean;
+
+  /**
+   * Set to `true` to close the popover on an outside click
+   * @default false
+   */
+  closeOnOutsideClick?: boolean;
+
+  /**
+   * Set to `true` render a caret
+   * @default false
+   */
+  caret?: boolean;
+
+  /**
+   * Specify the alignment of the caret
+   * @default "top"
+   */
+  align?:
+    | "top"
+    | "top-left"
+    | "top-right"
+    | "bottom"
+    | "bottom-left"
+    | "bottom-right"
+    | "left"
+    | "left-bottom"
+    | "left-top"
+    | "right"
+    | "right-bottom"
+    | "right-top";
+
+  /**
+   * Set to `true` to enable the light variant
+   * @default false
+   */
+  light?: boolean;
+
+  /**
+   * Set to `true` to enable the high contrast variant
+   * @default false
+   */
+  highContrast?: boolean;
+
+  /**
+   * Set to `true` to use a relative position
+   * @default false
+   */
+  relative?: boolean;
+}
+
+export default class Popover extends SvelteComponentTyped<
+  PopoverProps,
+  { ["click:outside"]: CustomEvent<any> },
+  { default: {} }
+> {}
--- a/types/Select/Select.d.ts
+++ b/types/Select/Select.d.ts
@ -54,6 +54,18 @@ export interface SelectProps
   */
  invalidText?: string;

+  /**
+   * Set to `true` to indicate an warning state
+   * @default false
+   */
+  warn?: boolean;
+
+  /**
+   * Specify the warning state text
+   * @default ""
+   */
+  warnText?: string;
+
  /**
   * Specify the helper text
   * @default ""
--- a/types/Tabs/TabsSkeleton.d.ts
+++ b/types/Tabs/TabsSkeleton.d.ts
@ -8,6 +8,12 @@ export interface TabsSkeletonProps
   * @default 4
   */
  count?: number;
+
+  /**
+   * Specify the type of tabs
+   * @default "default"
+   */
+  type?: "default" | "container";
 }

 export default class TabsSkeleton extends SvelteComponentTyped<
--- a/types/index.d.ts
+++ b/types/index.d.ts
@ -12,6 +12,11 @@ export { default as Checkbox } from "./Checkbox/Checkbox";
 export { default as CheckboxSkeleton } from "./Checkbox/CheckboxSkeleton";
 export { default as ContentSwitcher } from "./ContentSwitcher/ContentSwitcher";
 export { default as Switch } from "./ContentSwitcher/Switch";
+export { default as ContextMenu } from "./ContextMenu/ContextMenu";
+export { default as ContextMenuDivider } from "./ContextMenu/ContextMenuDivider";
+export { default as ContextMenuGroup } from "./ContextMenu/ContextMenuGroup";
+export { default as ContextMenuOption } from "./ContextMenu/ContextMenuOption";
+export { default as ContextMenuRadioGroup } from "./ContextMenu/ContextMenuRadioGroup";
 export { default as Copy } from "./Copy/Copy";
 export { default as CopyButton } from "./CopyButton/CopyButton";
 export { default as ComboBox } from "./ComboBox/ComboBox";
@ -86,6 +91,7 @@ export { default as OverflowMenuItem } from "./OverflowMenu/OverflowMenuItem";
 export { default as Pagination } from "./Pagination/Pagination";
 export { default as PaginationSkeleton } from "./Pagination/PaginationSkeleton";
 export { default as PaginationNav } from "./PaginationNav/PaginationNav";
+export { default as Popover } from "./Popover/Popover";
 export { default as ProgressIndicator } from "./ProgressIndicator/ProgressIndicator";
 export { default as ProgressIndicatorSkeleton } from "./ProgressIndicator/ProgressIndicatorSkeleton";
 export { default as ProgressStep } from "./ProgressIndicator/ProgressStep";
--- a/yarn.lock
+++ b/yarn.lock
@ -453,20 +453,20 @@ 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.30.0:
-  version "10.30.0"
-  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.30.0.tgz#c572620361ffdc8f4f67ed84b19ca2e29a912330"
-  integrity sha512-pHnrPcICl7L8vUHEXks4ZfAtyaGIP01aX7O/szg45/7Po2pQ3hXW1TBppYaUsw3UD+qGOF/CW7ID9Op6IQK4dA==
+carbon-components@10.31.0:
+  version "10.31.0"
+  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.31.0.tgz#050751e7fb4d845b7d1c6e8ac7fdfa9c71403c12"
+  integrity sha512-gUXRky9rUHavqFLJJQf+Lzouk8GHsXJUjxRgTOUQ6vdBfA0ks6ugwptG8fiFGwCJJht/CW9/YsKb5w8N9a39sg==
  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:
-  version "10.21.0"
-  resolved "https://registry.npmjs.org/carbon-icons-svelte/-/carbon-icons-svelte-10.21.0.tgz#9bbdd37d5513d484e9706d6335c121f60f3186c4"
-  integrity sha512-5NNaRdmbS4N36dUGNj72Ys3VqVjH3fZ69AhYUHx+bH02GFYCwAaE49qjtP77kP7DKMtDV9NmMEti/P/JB83aYQ==
+carbon-icons-svelte@^10.27.0:
+  version "10.27.0"
+  resolved "https://registry.yarnpkg.com/carbon-icons-svelte/-/carbon-icons-svelte-10.27.0.tgz#918e806d09e0e9cf61cf756ff0f9be49125ff9ea"
+  integrity sha512-e3l95wurOuEYMQxaDT2oYH322yRKgvTq5TDkzvylMGlCkA8erJH5lSwCM59VNFgPtptH4fIW9FlbQtpfp4iQ7Q==

 chalk@^2.0.0, chalk@^2.4.1:
  version "2.4.2"
				`@ -0,0 +1 @@`
				`<li role="separator" class:bx--context-menu-divider="{true}"></li>`
				`@ -0,0 +1 @@`
				`export { default as Popover } from "./Popover.svelte";`