Merge branch 'master' into header-action-prevent-close-click-outside

2025-09-18 11:36:36 +00:00 · 2023-07-13 07:35:00 -07:00 · 2023-07-13 07:35:00 -07:00 · 7c6b5619a4
commit 7c6b5619a4
parent ff4e33a735 9b3f014a0b
226 changed files with 2124 additions and 747 deletions
--- a/.github/ISSUE_TEMPLATE/config.yml
+++ b/.github/ISSUE_TEMPLATE/config.yml
@ -0,0 +1,8 @@
+blank_issues_enabled: true
+contact_links:
+  - name: Ask a question
+    url: https://github.com/carbon-design-system/carbon-components-svelte/discussions
+    about: Please ask and answer questions here.
+  - name: Carbon Design System Discord
+    url: https://discord.gg/J7JEUEkTRX
+    about: Chat with us on Discord.
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@ -17,8 +17,19 @@ jobs:
          path: "**/node_modules"
          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}

-      - name: Install dependencies and build the library
+      - name: Install dependencies, build, test, and lint the codebase
        run: |
          yarn
          yarn build:lib
          yarn test:types
+          yarn lint
+
+  deploy-docs:
+    if: github.ref == 'refs/heads/master'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Trigger deploy
+        env:
+          deploy_url: ${{ secrets.RENDER_DEPLOY_HOOK_URL }}
+        run: |
+          curl -X GET "$deploy_url"
--- a/.husky/.gitignore
+++ b/.husky/.gitignore
@ -1 +0,0 @@
-_
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@ -1,4 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-npx lint-staged
--- a/.prettierignore
+++ b/.prettierignore
@ -1,5 +1,6 @@
 /lib
 /css
+/types
 .svelte-kit
 .routify
 dist
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,11 +1,108 @@
 # Changelog

-All notable changes to this project will be documented in this file.
+All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.

-The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
-and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+### [0.76.1](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.76.0...v0.76.1) (2023-07-08)

-<!-- ## Unreleased -->
+
+### Bug Fixes
+
+* **date-picker:** hide `helperText` if invalid or warning state ([#1759](https://github.com/carbon-design-system/carbon-components-svelte/issues/1759)) ([d5a4a8b](https://github.com/carbon-design-system/carbon-components-svelte/commit/d5a4a8b94a8753545a54f7e43f1773e49a1ff208))
+* **select:** hide `helperText` if invalid or warning state ([#1761](https://github.com/carbon-design-system/carbon-components-svelte/issues/1761)) ([7579c03](https://github.com/carbon-design-system/carbon-components-svelte/commit/7579c032faa3f1b9ad9d42f76da876f38725141e))
+* **slider:** `disabled` Slider should not submit a form ([#1758](https://github.com/carbon-design-system/carbon-components-svelte/issues/1758)) ([ab21c89](https://github.com/carbon-design-system/carbon-components-svelte/commit/ab21c89ab9240f61bd15d8c20bad65b3b469a29c))
+* **types:** allow `data-*` attributes for props forwarded to HTML elements ([#1741](https://github.com/carbon-design-system/carbon-components-svelte/issues/1741)) ([7fdc2ef](https://github.com/carbon-design-system/carbon-components-svelte/commit/7fdc2ef7f072382842cbb6bfc8e12e083aef1a1e))
+
+### [0.76.0](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.75.1...v0.75.2) (2023-06-21)
+
+
+### Features
+
+* make `titleText` slottable in `MultiSelect`, `ComboBox` ([#1750](https://github.com/carbon-design-system/carbon-components-svelte/issues/1750)) ([0b4f19c](https://github.com/carbon-design-system/carbon-components-svelte/commit/0b4f19c87e8479f0649fa2c5dc84beb4c1a1e302)), closes [#1747](https://github.com/carbon-design-system/carbon-components-svelte/issues/1747)
+
+### [0.75.1](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.75.0...v0.75.1) (2023-06-02)
+
+
+### Bug Fixes
+
+* **expandable-tile:** set tile height using resize observer ([#1738](https://github.com/carbon-design-system/carbon-components-svelte/issues/1738)) ([a369962](https://github.com/carbon-design-system/carbon-components-svelte/commit/a369962fdf96f95bbdcc2f8f9f84c5d900ec4087))
+
+### [0.75.0](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.74.0...v0.74.1) (2023-05-21)
+
+### Features
+
+- **pagination-nav:** add `tooltipPosition` prop ([#1733](https://github.com/carbon-design-system/carbon-components-svelte/issues/1733)) ([60a796e](https://github.com/carbon-design-system/carbon-components-svelte/commit/60a796ea48b17a4e8829b8782aaddb569534c7c4)), closes [#1656](https://github.com/carbon-design-system/carbon-components-svelte/issues/1656)
+
+### [0.74.0](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.73.5...v0.74.0) (2023-05-18)
+
+### Features
+
+- **ui-shell:** make `HeaderNavItem` slottable ([#1693](https://github.com/carbon-design-system/carbon-components-svelte/issues/1693)) ([b9aaa3a](https://github.com/carbon-design-system/carbon-components-svelte/commit/b9aaa3adcaf87e34ac3d45a2e39f1db92ebe1b33))
+
+### Bug Fixes
+
+- resolve `a11y` warnings from Svelte version 3.58 ([#1732](https://github.com/carbon-design-system/carbon-components-svelte/issues/1732)) ([c02b473](https://github.com/carbon-design-system/carbon-components-svelte/commit/c02b4738bce612359148267c79450c6650bf68d3))
+
+### [0.73.5](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.73.4...v0.73.5) (2023-03-26)
+
+### [0.73.4](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.73.3...v0.73.4) (2023-03-21)
+
+### Bug Fixes
+
+- **selectable-tile:** include dispatched events in types ([#1695](https://github.com/carbon-design-system/carbon-components-svelte/issues/1695)) ([ca40dd1](https://github.com/carbon-design-system/carbon-components-svelte/commit/ca40dd18c2af1bc755b857c39469427038f20ece)), closes [#1694](https://github.com/carbon-design-system/carbon-components-svelte/issues/1694)
+- **text-input:** correctly set input padding for warning state ([#1688](https://github.com/carbon-design-system/carbon-components-svelte/issues/1688)) ([821233a](https://github.com/carbon-design-system/carbon-components-svelte/commit/821233ab4f0bf247dea6a8aa32b79d15424ff059)), closes [#1687](https://github.com/carbon-design-system/carbon-components-svelte/issues/1687)
+
+### [0.73.3](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.73.2...v0.73.3) (2023-03-11)
+
+### Bug Fixes
+
+- **1684:** hide helper text container in password input when not used ([#1685](https://github.com/carbon-design-system/carbon-components-svelte/issues/1685)) ([42349eb](https://github.com/carbon-design-system/carbon-components-svelte/commit/42349ebc61fdc8756fc5209d4cb63f4f9a63dce9))
+
+### [0.73.2](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.73.1...v0.73.2) (2023-02-27)
+
+### Bug Fixes
+
+- `readonly` should override `error` behavior in `TextInput`, `NumberInput` ([#1666](https://github.com/carbon-design-system/carbon-components-svelte/issues/1666)) ([6386c33](https://github.com/carbon-design-system/carbon-components-svelte/commit/6386c33f939b5fa310e8eb5a51412c6151de75d2)), closes [/github.com/carbon-design-system/carbon-components-svelte/pull/1666#pullrequestreview-1314558645](https://github.com/carbon-design-system//github.com/carbon-design-system/carbon-components-svelte/pull/1666/issues/pullrequestreview-1314558645)
+
+### [0.73.1](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.73.0...v0.73.1) (2023-02-19)
+
+### Bug Fixes
+
+- **textinput/passwordinput:** apply aria-describedby to hint text ([b435be4](https://github.com/carbon-design-system/carbon-components-svelte/commit/b435be4f1221b30c9afd7a9e1c6867b38eeadeaa)), closes [#1633](https://github.com/carbon-design-system/carbon-components-svelte/issues/1633)
+
+### [0.73.0](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.72.3...v0.73.0) (2023-02-19)
+
+### Features
+
+- **progress-bar:** add `status` prop ([#1560](https://github.com/carbon-design-system/carbon-components-svelte/issues/1560)) ([7ddbf17](https://github.com/carbon-design-system/carbon-components-svelte/commit/7ddbf17cbb82bd78256037af8028ea20b9c35d5a))
+
+### [0.72.3](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.72.2...v0.72.3) (2023-02-11)
+
+### Bug Fixes
+
+- **types:** add missing `$$restProps` for `Checkbox`, `Filename`, `FluidForm` ([#1655](https://github.com/carbon-design-system/carbon-components-svelte/issues/1655)) ([6450e8b](https://github.com/carbon-design-system/carbon-components-svelte/commit/6450e8b0b17e1538043f131d64e2d1fc667c95a8))
+
+### [0.72.2](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.72.1...v0.72.2) (2023-02-05)
+
+### Bug Fixes
+
+- **dropdown:** dispatch correct `selectedItem` in `select` event ([#1646](https://github.com/carbon-design-system/carbon-components-svelte/issues/1646)) ([d897484](https://github.com/carbon-design-system/carbon-components-svelte/commit/d897484abfcc8be351ac87b0f0bb49900f4b4b1d)), closes [#1645](https://github.com/carbon-design-system/carbon-components-svelte/issues/1645)
+
+### [0.72.1](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.72.0...v0.72.1) (2023-01-25)
+
+### Bug Fixes
+
+- **dropdown:** fix ssr issue ([#1639](https://github.com/carbon-design-system/carbon-components-svelte/issues/1639)) ([8cb5d53](https://github.com/carbon-design-system/carbon-components-svelte/commit/8cb5d538f7ad10d7c93e10c04f01d2c77b4eba44)), closes [#1638](https://github.com/carbon-design-system/carbon-components-svelte/issues/1638)
+
+## [0.72.0](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.71.0...v0.72.0) (2023-01-18)
+
+### ⚠ BREAKING CHANGES
+
+- **tree-view:** remove `expanded` property from `TreeNode` interface (#1631)
+
+### Bug Fixes
+
+- **dropdown:** close when user clicks outside iframe ([#1596](https://github.com/carbon-design-system/carbon-components-svelte/issues/1596)) ([73aa6e2](https://github.com/carbon-design-system/carbon-components-svelte/commit/73aa6e216aa99df3b0b3186398e6466db523cf88)), closes [#1595](https://github.com/carbon-design-system/carbon-components-svelte/issues/1595)
+- **tree-view:** remove `expanded` property from `TreeNode` interface ([#1631](https://github.com/carbon-design-system/carbon-components-svelte/issues/1631)) ([ec867c4](https://github.com/carbon-design-system/carbon-components-svelte/commit/ec867c46ba7adce02938d6516557d3312591fa5f)), closes [#1630](https://github.com/carbon-design-system/carbon-components-svelte/issues/1630)

 ## [0.71.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.71.0) - 2022-12-31

--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@ -1,6 +1,6 @@
 # Component Index

-> 165 components exported from carbon-components-svelte@0.71.0.
+> 165 components exported from carbon-components-svelte@0.76.1.

 ## Components

@ -684,6 +684,7 @@ export interface ComboBoxItem {
 | Slot name | Default | Props                                               | Fallback                          |
 | :-------- | :------ | :-------------------------------------------------- | :-------------------------------- |
 | --        | Yes     | <code>{ item: ComboBoxItem; index: number } </code> | <code>{itemToString(item)}</code> |
+| titleText | No      | --                                                  | <code>{titleText}</code>          |

 ### Events

@ -1584,8 +1585,9 @@ None.
 ### Slots

 | Slot name       | Default | Props | Fallback                     |
-| :-------------- | :------ | :---- | :-------------------------- |
+| :-------------- | :------ | :---- | :--------------------------- |
 | --              | Yes     | --    | --                           |
+| company         | No      | --    | <code>{company}&nbsp;</code> |
 | platform        | No      | --    | <code>{platformName}</code>  |
 | skip-to-content | No      | --    | --                           |

@ -1698,7 +1700,9 @@ None.

 ### Slots

-None.
+| Slot name | Default | Props | Fallback            |
+| :-------- | :------ | :---- | :------------------ |
+| --        | Yes     | --    | <code>{text}</code> |

 ### Events

@ -2388,6 +2392,7 @@ export interface MultiSelectItem {
 | Slot name | Default | Props                                                  | Fallback                          |
 | :-------- | :------ | :----------------------------------------------------- | :-------------------------------- |
 | --        | Yes     | <code>{ item: MultiSelectItem; index: number } </code> | <code>{itemToString(item)}</code> |
+| titleText | No      | --                                                     | <code>{titleText}</code>          |

 ### Events

@ -2696,13 +2701,14 @@ None.
 ### Props

 | Prop name       | Required | Kind             | Reactive | Type                                                                                             | Default value                | Description                                                         |
-| :----------- | :------- | :--------------- | :------- | -------------------- | ---------------------------- | ----------------------------------------- |
+| :-------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------------------------------ | ---------------------------- | ------------------------------------------------------------------- |
 | page            | No       | <code>let</code> | Yes      | <code>number</code>                                                                              | <code>1</code>               | Specify the current page index                                      |
 | total           | No       | <code>let</code> | No       | <code>number</code>                                                                              | <code>10</code>              | Specify the total number of pages                                   |
 | shown           | No       | <code>let</code> | No       | <code>number</code>                                                                              | <code>10</code>              | Specify the total number of pages to show                           |
 | loop            | No       | <code>let</code> | No       | <code>boolean</code>                                                                             | <code>false</code>           | Set to `true` to loop the navigation                                |
 | forwardText     | No       | <code>let</code> | No       | <code>string</code>                                                                              | <code>"Next page"</code>     | Specify the forward button text                                     |
 | backwardText    | No       | <code>let</code> | No       | <code>string</code>                                                                              | <code>"Previous page"</code> | Specify the backward button text                                    |
+| tooltipPosition | No       | <code>let</code> | No       | <code>"top" &#124; "right" &#124; "bottom" &#124; "left" &#124; "outside" &#124; "inside"</code> | <code>"bottom"</code>        | Set the position of the tooltip relative to the pagination buttons. |

 ### Slots

@ -2820,6 +2826,7 @@ None.
 | value      | No       | <code>let</code> | No       | <code>number</code>                                      | <code>undefined</code>                           | Specify the current value                     |
 | max        | No       | <code>let</code> | No       | <code>number</code>                                      | <code>100</code>                                 | Specify the maximum value                     |
 | kind       | No       | <code>let</code> | No       | <code>"default" &#124; "inline" &#124; "indented"</code> | <code>"default"</code>                           | Specify the kind of progress bar              |
+| status     | No       | <code>let</code> | No       | <code>"active" &#124; "finished" &#124; "error"</code>   | <code>"active"</code>                            | Specify the status                            |
 | size       | No       | <code>let</code> | No       | <code>"sm" &#124; "md"</code>                            | <code>"md"</code>                                | Specify the size                              |
 | labelText  | No       | <code>let</code> | No       | <code>string</code>                                      | <code>""</code>                                  | Specify the label text                        |
 | hideLabel  | No       | <code>let</code> | No       | <code>boolean</code>                                     | <code>false</code>                               | Set to `true` to visually hide the label text |
@ -3273,7 +3280,9 @@ None.
 ### Events

 | Event name | Type       | Detail              |
-| :--------- | :-------- | :----- |
+| :--------- | :--------- | :------------------ |
+| select     | dispatched | <code>string</code> |
+| deselect   | dispatched | <code>string</code> |
 | click      | forwarded  | --                  |
 | mouseover  | forwarded  | --                  |
 | mouseenter | forwarded  | --                  |
@ -4662,7 +4671,6 @@ export interface TreeNode {
  text: any;
  icon?: typeof import("svelte").SvelteComponent;
  disabled?: boolean;
-  expanded?: boolean;
  children?: TreeNode[];
 }
 ```
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -2,6 +2,19 @@

 Before submitting a pull request (PR), consider [filing an issue](https://github.com/carbon-design-system/carbon-components-svelte/issues) to gain clarity and direction.

+- [Prerequisites](#prerequisites)
+- [Project set-up](#project-set-up)
+  - [Install](#install)
+- [Documentation set-up](#documentation-set-up)
+- [Development workflow](#development-workflow)
+  - [Component Format](#component-format)
+  - [Editing a component](#editing-a-component)
+  - [Creating a component](#creating-a-component)
+  - [Run `yarn build:docs`](#run-yarn-builddocs)
+- [Submit a Pull Request](#submit-a-pull-request)
+  - [Sync Your Fork](#sync-your-fork)
+  - [Submit a PR](#submit-a-pr)
+
 ## Prerequisites

 - [Node.js](https://nodejs.org/en/download/package-manager/) (version >=12)
@ -145,3 +158,34 @@ git merge upstream/master
 ### Submit a PR

 After you've pushed your changes to remote, submit your PR. Make sure you are comparing `<YOUR_USER_ID>/feature` to `origin/master`.
+
+## Maintainer guide
+
+The following items only apply to project maintainers.
+
+### Release
+
+Locally, while on `master` and the branch is clean, run `yarn release`. This command will:
+
+- Build library and docs
+- Bump package.json version
+- Add notes to Changelog
+
+This command will not create a commit nor tag. Afterwards, perform the following manually:
+
+```sh
+# 1. Stage prepared files for a commit
+git add .
+
+# 2. Commit based on the current version, either manually or with jq
+git commit -m "v$(jq -r '.version' package.json)"
+
+# 3. Create a tag based on the current version, either manually or with `jq`:
+git tag "v$(jq -r '.version' package.json)"
+
+# 4. Push branch and tag, then publish
+git push origin master [tag]
+yarn publish
+
+# 5. Generate release notes on GitHub, and comment on issues and pull requests
+```
--- a/README.md
+++ b/README.md
@ -3,6 +3,9 @@
 [![NPM][npm]][npm-url]
 ![GitHub](https://img.shields.io/github/license/ibm/carbon-components-svelte?color=262626&style=for-the-badge)
 ![npm downloads to date](https://img.shields.io/npm/dt/carbon-components-svelte?color=262626&style=for-the-badge)
+<a href="https://discord.gg/J7JEUEkTRX">
+<img src="https://img.shields.io/discord/689212587170201628?color=5865F2&style=for-the-badge" alt="Chat with us on Discord">
+</a>

 Carbon Components Svelte is a [Svelte](https://github.com/sveltejs/svelte) component library that implements the [Carbon Design System](https://github.com/carbon-design-system), an open source design system by IBM.

@ -17,10 +20,6 @@ The Carbon Svelte portfolio also includes:

 ## [Documentation](https://carbon-components-svelte.onrender.com)

-The documentation site is deployed to [Render](https://render.com) as a Static Site. See [render.yaml](render.yaml) for details.
-
-[![Deploy to Render](https://render.com/images/deploy-to-render-button.svg)](https://render.com/deploy?repo=https://github.com/carbon-design-system/carbon-components-svelte)
-
 Other forms of documentation are auto-generated:

 - **[TypeScript definitions](types)**: Component TypeScript definitions
--- a/carbon.yml
+++ b/carbon.yml
@ -212,6 +212,14 @@ assets:
        name: Storybook
        action: link
        url: https://carbon-components-svelte.onrender.com/components/DatePicker
+  definition-tooltip:
+    status: stable
+    framework: svelte
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://carbon-components-svelte.onrender.com/components/TooltipDefinition
  dropdown:
    status: stable
    framework: svelte
@ -667,14 +675,6 @@ assets:
        name: Storybook
        action: link
        url: https://carbon-components-svelte.onrender.com/components/Tooltip
-  tooltip-definition:
-    status: stable
-    framework: svelte
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://carbon-components-svelte.onrender.com/components/TooltipDefinition
  tooltip-icon:
    name: Tootlip icon
    status: stable
--- a/css/all.css
+++ b/css/all.css
--- a/css/g10.css
+++ b/css/g10.css
--- a/css/g100.css
+++ b/css/g100.css
--- a/css/g80.css
+++ b/css/g80.css
--- a/css/g90.css
+++ b/css/g90.css
--- a/css/white.css
+++ b/css/white.css
--- a/docs/package.json
+++ b/docs/package.json
@ -22,7 +22,7 @@
    "prism-svelte": "^0.4.7",
    "prismjs": "^1.28.0",
    "remark-slug": "^6.0.0",
-    "svelte": "^3.49.0",
+    "svelte": "^3.58.0",
    "vite": "^3.0.9"
  },
  "routify": {
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@ -924,7 +924,7 @@
        { "type": "forwarded", "name": "blur", "element": "input" }
      ],
      "typedefs": [],
-      "rest_props": { "type": "InlineComponent", "name": "CheckboxSkeleton" }
+      "rest_props": { "type": "Element", "name": "div" }
    },
    {
      "moduleName": "CheckboxSkeleton",
@ -1743,6 +1743,12 @@
          "default": true,
          "fallback": "{itemToString(item)}",
          "slot_props": "{ item: ComboBoxItem; index: number }"
+        },
+        {
+          "name": "titleText",
+          "default": false,
+          "fallback": "{titleText}",
+          "slot_props": "{}"
        }
      ],
      "events": [
@ -4399,7 +4405,7 @@
        { "type": "forwarded", "name": "keydown", "element": "button" }
      ],
      "typedefs": [],
-      "rest_props": { "type": "InlineComponent", "name": "Loading" }
+      "rest_props": { "type": "Element", "name": "div | button | svg" }
    },
    {
      "moduleName": "FluidForm",
@ -4416,7 +4422,7 @@
        { "type": "forwarded", "name": "submit", "element": "Form" }
      ],
      "typedefs": [],
-      "rest_props": { "type": "InlineComponent", "name": "Form" }
+      "rest_props": { "type": "Element", "name": "form" }
    },
    {
      "moduleName": "Form",
@ -4827,6 +4833,12 @@
      "moduleExports": [],
      "slots": [
        { "name": "__default__", "default": true, "slot_props": "{}" },
+        {
+          "name": "company",
+          "default": false,
+          "fallback": "{company}&nbsp;",
+          "slot_props": "{}"
+        },
        {
          "name": "platform",
          "default": false,
@ -5134,7 +5146,14 @@
        }
      ],
      "moduleExports": [],
-      "slots": [],
+      "slots": [
+        {
+          "name": "__default__",
+          "default": true,
+          "fallback": "{text}",
+          "slot_props": "{}"
+        }
+      ],
      "events": [
        { "type": "forwarded", "name": "click", "element": "a" },
        { "type": "forwarded", "name": "mouseover", "element": "a" },
@ -7359,6 +7378,12 @@
          "default": true,
          "fallback": "{itemToString(item)}",
          "slot_props": "{ item: MultiSelectItem; index: number }"
+        },
+        {
+          "name": "titleText",
+          "default": false,
+          "fallback": "{titleText}",
+          "slot_props": "{}"
        }
      ],
      "events": [
@ -8525,6 +8550,18 @@
          "isRequired": false,
          "constant": false,
          "reactive": false
+        },
+        {
+          "name": "tooltipPosition",
+          "kind": "let",
+          "description": "Set the position of the tooltip relative to the pagination buttons.",
+          "type": "\"top\" | \"right\" | \"bottom\" | \"left\" | \"outside\" | \"inside\"",
+          "value": "\"bottom\"",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "isRequired": false,
+          "constant": false,
+          "reactive": false
        }
      ],
      "moduleExports": [],
@ -8985,6 +9022,18 @@
          "constant": false,
          "reactive": false
        },
+        {
+          "name": "status",
+          "kind": "let",
+          "description": "Specify the status",
+          "type": "\"active\" | \"finished\" | \"error\"",
+          "value": "\"active\"",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "isRequired": false,
+          "constant": false,
+          "reactive": false
+        },
        {
          "name": "size",
          "kind": "let",
@ -10544,6 +10593,8 @@
      "moduleExports": [],
      "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
      "events": [
+        { "type": "dispatched", "name": "select", "detail": "string" },
+        { "type": "dispatched", "name": "deselect", "detail": "string" },
        { "type": "forwarded", "name": "click", "element": "label" },
        { "type": "forwarded", "name": "mouseover", "element": "label" },
        { "type": "forwarded", "name": "mouseenter", "element": "label" },
@ -14534,9 +14585,9 @@
          "ts": "type TreeNodeId = string | number"
        },
        {
-          "type": "{ id: TreeNodeId; text: any; icon?: typeof import(\"svelte\").SvelteComponent; disabled?: boolean; expanded?: boolean; children?: TreeNode[]; }",
+          "type": "{ id: TreeNodeId; text: any; icon?: typeof import(\"svelte\").SvelteComponent; disabled?: boolean; children?: TreeNode[]; }",
          "name": "TreeNode",
-          "ts": "interface TreeNode { id: TreeNodeId; text: any; icon?: typeof import(\"svelte\").SvelteComponent; disabled?: boolean; expanded?: boolean; children?: TreeNode[]; }"
+          "ts": "interface TreeNode { id: TreeNodeId; text: any; icon?: typeof import(\"svelte\").SvelteComponent; disabled?: boolean; children?: TreeNode[]; }"
        }
      ],
      "rest_props": { "type": "Element", "name": "ul" }
--- a/docs/src/components/Theme.svelte
+++ b/docs/src/components/Theme.svelte
@ -1,30 +0,0 @@
-<script>
-  export let persist = false;
-  export let persistKey = "carbon-theme";
-  export const themes = ["white", "g10", "g80", "g90", "g100"];
-
-  import { onMount, afterUpdate } from "svelte";
-  import { theme } from "../store";
-
-  const isValidTheme = (value) => themes.includes(value);
-
-  onMount(() => {
-    try {
-      const persisted_theme = localStorage.getItem(persistKey);
-      if (isValidTheme(persisted_theme)) theme.set(persisted_theme);
-    } catch (e) {}
-  });
-
-  afterUpdate(() => {
-    if (isValidTheme($theme)) {
-      document.documentElement.setAttribute("theme", $theme);
-      if (persist) {
-        try {
-          localStorage.setItem(persistKey, $theme);
-        } catch (e) {}
-      }
-    }
-  });
-</script>
-
-<slot />
--- a/docs/src/global.css
+++ b/docs/src/global.css
@ -33,6 +33,11 @@ html[theme="g90"] .code-override {
  overflow-x: auto;
 }

+/* Addig this to the layout grid fixes overstretching. */
+.fix-overflow {
+  min-width: 0;
+}
+
 .token.tag,
 .token.operator {
  color: #6ea6ff;
@ -167,16 +172,6 @@ html[theme="g90"] .code-override {
  margin-bottom: var(--cds-layout-01);
 }

-.table {
-  position: sticky;
-  max-height: calc(100vh - 3rem);
-  top: 3rem;
-  padding-top: var(--cds-spacing-05);
-  padding-bottom: var(--cds-spacing-05);
-  padding-left: var(--cds-spacing-08);
-  overflow-y: auto;
-}
-
 .code-01 {
  font-size: var(--cds-code-01-font-size);
  font-weight: var(--cds-code-01-font-weight);
--- a/docs/src/layouts/ComponentLayout.svelte
+++ b/docs/src/layouts/ComponentLayout.svelte
@ -66,7 +66,7 @@
 </script>

 <Content data-components>
-  <Grid>
+  <Grid class="fix-overflow">
    <Row>
      <Column>
        <h1>{component}</h1>
--- a/docs/src/pages/_layout.svelte
+++ b/docs/src/pages/_layout.svelte
@ -12,10 +12,11 @@
    SideNav,
    SideNavItems,
    SideNavMenuItem,
+    Theme,
    Tag,
  } from "carbon-components-svelte";
  import LogoGithub from "carbon-icons-svelte/lib/LogoGithub.svelte";
-  import Theme from "../components/Theme.svelte";
+  import { theme } from "../store";

  const deprecated = [];
  const new_components = [];
@ -38,7 +39,7 @@
 <!-- routify:options bundle=true -->
 <svelte:window bind:innerWidth />

-<Theme persist>
+<Theme persist bind:theme="{$theme}">
  <Header
    aria-label="Navigation"
    href="{$url('/')}"
--- a/docs/src/pages/components/Button.svx
+++ b/docs/src/pages/components/Button.svx
@ -120,9 +120,10 @@ If an `href` value is specified, the component will render an [anchor element](h
 <Button size="xl" kind="ghost">Ghost</Button>
 <Button size="xl" kind="danger">Danger</Button>

-## Disabled button
+## Disabled state

 <Button disabled>Disabled button</Button>
+<Button disabled iconDescription="Tooltip text" icon={Add} />

 ## Expressive styles

--- a/docs/src/pages/components/ExpandableTile.svx
+++ b/docs/src/pages/components/ExpandableTile.svx
@ -3,7 +3,29 @@
  import Preview from "../../components/Preview.svelte";
 </script>

-## Default (unexpanded)
+## Default
+
+This component uses a [resize observer](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to determine the height of the above-the-fold content.
+
+It's unexpanded by default.
+
+<ExpandableTile>
+  <div slot="above">
+    <div>
+      Above the fold content here
+    </div>
+    <br />
+    <br />
+    <div>
+      More above the fold content
+    </div>
+  </div>
+  <div slot="below">Below the fold content here</div>
+</ExpandableTile>
+
+## Custom tile heights
+
+Set a custom height for the tiles on the "above" and "below" slots.

 <ExpandableTile>
  <div slot="above" style="height: 10rem">Above the fold content here</div>
@ -13,22 +35,22 @@
 ## Expanded

 <ExpandableTile expanded>
-  <div slot="above" style="height: 10rem">Above the fold content here</div>
-  <div slot="below" style="height: 10rem">Below the fold content here</div>
+  <div slot="above">Above the fold content here</div>
+  <div slot="below">Below the fold content here</div>
 </ExpandableTile>

 ## Light variant

 <ExpandableTile light>
-  <div slot="above" style="height: 10rem">Above the fold content here</div>
-  <div slot="below" style="height: 10rem">Below the fold content here</div>
+  <div slot="above">Above the fold content here</div>
+  <div slot="below">Below the fold content here</div>
 </ExpandableTile>

 ## With icon labels

 <ExpandableTile tileExpandedLabel="View less" tileCollapsedLabel="View more">
-  <div slot="above" style="height: 10rem">Above the fold content here</div>
-  <div slot="below" style="height: 10rem">Below the fold content here</div>
+  <div slot="above">Above the fold content here</div>
+  <div slot="below">Below the fold content here</div>
 </ExpandableTile>

 ## With interactive content
@ -36,7 +58,7 @@
 For tiles containing interactive content, use `stopPropagation` to prevent the tile from toggling.

 <ExpandableTile tileExpandedLabel="View less" tileCollapsedLabel="View more">
-  <div slot="above" style="height: 10rem">
+  <div slot="above">
    <a href="/" on:click|preventDefault|stopPropagation={() => console.log("Hello world")}>
      Native element
    </a>
@ -48,5 +70,5 @@ For tiles containing interactive content, use `stopPropagation` to prevent the t
      Svelte component
    </Button>
  </div>
-  <div slot="below" style="height: 10rem">Below the fold content here</div>
+  <div slot="below">Below the fold content here</div>
 </ExpandableTile>
--- a/docs/src/pages/components/PaginationNav.svx
+++ b/docs/src/pages/components/PaginationNav.svx
@ -43,3 +43,9 @@ Use the `forwardText` and `backwardText` props to customize the button text.
  forwardText="Next"
  backwardText="Previous"
 />
+
+## Tooltip Position
+
+Use the `tooltipPosition` prop to change the alignment of the tooltip.
+
+<PaginationNav tooltipPosition="outside" total={3} loop />
--- a/docs/src/pages/components/PasswordInput.svx
+++ b/docs/src/pages/components/PasswordInput.svx
@ -50,3 +50,7 @@ Set prop `type` to `"text"` to toggle password visibility.
 ## Disabled state

 <PasswordInput disabled labelText="Password" placeholder="Enter password..." />
+
+## With helper text
+
+<PasswordInput helperText="Your password should be hard to guess" labelText="Password" placeholder="Enter password..." />
--- a/docs/src/pages/components/ProgressBar.svx
+++ b/docs/src/pages/components/ProgressBar.svx
@ -21,6 +21,18 @@ Specify a `value` for the progress bar to be determinate.

 <ProgressBar value={40} labelText="Upload status" helperText="40 MB of 100 MB" />

+## Finished status
+
+Specify `status="finished"` for the progress bar.
+
+<ProgressBar value={100} status="finished" labelText="Upload file" helperText="Upload complete" />
+
+## Error status
+
+Specify `status="error"` for the progress bar.
+
+<ProgressBar value={0} status="error" labelText="Upload file" helperText="Invalid file format" />
+
 ## Custom max value

 The default `max` value is `100`.
@ -45,6 +57,10 @@ The inline variant visually hides the `helperText`.

 <ProgressBar kind="indented" value={40} labelText="Upload status" helperText="40 MB of 100 MB" />

+## Indented status variant
+
+<ProgressBar kind="indented" status="finished" value={40} labelText="Upload file" helperText="Upload complete" />
+
 ## UX example

 This example shows how to animate the progress bar from 0 to 100% with start and end states.
--- a/docs/src/pages/components/Slider.svx
+++ b/docs/src/pages/components/Slider.svx
@ -9,17 +9,17 @@ components: ["Slider", "SliderSkeleton"]

 ## Default

-<Slider />
+<Slider labelText="Instances" value={0} />

 ## Full width

 Set `fullWidth` to `true` for the slider to span the full width of its containing element.

-<Slider fullWidth />
+<Slider labelText="Instances" fullWidth value={0} />

 ## Hidden text input

-<Slider hideTextInput />
+<Slider labelText="Instances" hideTextInput value={0} />

 ## Custom minimum, maximum values

--- a/docs/src/pages/components/Tag.svx
+++ b/docs/src/pages/components/Tag.svx
@ -41,7 +41,7 @@

 ## Custom icon

-Note: rendering a custom icon cannnot be used with the filterable variant.
+Note: rendering a custom icon cannot be used with the filterable variant.

 <Tag icon={IbmCloud}>IBM Cloud</Tag>

--- a/docs/src/pages/components/TreeView.svx
+++ b/docs/src/pages/components/TreeView.svx
@ -7,7 +7,7 @@

 The `children` prop accepts an array of child nodes. Each node should contain `id` and `text` properties.

-Optional properties include `disabled`, `expanded`, `icon`, and `children`.
+Optional properties include `disabled`, `icon`, and `children`.

 A parent node contains `children` while a leaf node does not.

--- a/docs/src/pages/framed/ProgressBar/ProgressBarUx.svelte
+++ b/docs/src/pages/framed/ProgressBar/ProgressBarUx.svelte
@ -3,10 +3,14 @@

  let max = 328;
  let value = 0;
+  let status = "active";

  $: helperText =
    value > 0 ? value.toFixed(0) + "MB of " + max + "MB" : "Press start";
-  $: if (value === max) helperText = "Done";
+  $: if (value === max) {
+    helperText = "Done";
+    status = "finished";
+  }
 </script>

 <ProgressBar
@ -14,6 +18,7 @@
  value="{value}"
  max="{max}"
  helperText="{helperText}"
+  status="{status}"
 />

 <ButtonSet style="margin-top: var(--cds-spacing-08)">
@ -37,7 +42,10 @@
  <Button
    kind="tertiary"
    disabled="{value !== max}"
-    on:click="{() => (value = 0)}"
+    on:click="{() => {
+      value = 0;
+      status = 'active';
+    }}"
  >
    Reset
  </Button>
--- a/docs/src/pages/framed/TreeView/TreeViewIcons.svelte
+++ b/docs/src/pages/framed/TreeView/TreeViewIcons.svelte
@ -14,13 +14,11 @@
      id: 1,
      text: "Analytics",
      icon: Analytics,
-      expanded: true,
      children: [
        {
          id: 2,
          text: "IBM Analytics Engine",
          icon: Analytics,
-          expanded: true,
          children: [
            { id: 3, text: "Apache Spark", icon: Analytics },
            { id: 4, text: "Hadoop", icon: Analytics },
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@ -165,7 +165,7 @@ bufferutil@^4.0.1:
    node-gyp-build "~3.7.0"

 carbon-components-svelte@../:
-  version "0.70.1"
+  version "0.76.1"
  dependencies:
    flatpickr "4.6.9"

@ -1080,6 +1080,11 @@ punycode@^2.1.1:
  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
  integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==

+querystringify@^2.1.1:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
+  integrity sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==
+
 read-pkg@^3.0.0:
  version "3.0.0"
  resolved "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz#9cbc686978fee65d16c00e2b19c237fcf6e38389"
@ -1105,6 +1110,11 @@ remark-slug@^6.0.0:
    mdast-util-to-string "^1.0.0"
    unist-util-visit "^2.0.0"

+requires-port@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
+  integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
+
 resolve@^1.10.0:
  version "1.17.0"
  resolved "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz#b25941b54968231cc2d1bb76a79cb7f2c0bf8444"
@ -1148,9 +1158,9 @@ saxes@^5.0.1:
    xmlchars "^2.2.0"

 "semver@2 || 3 || 4 || 5", semver@^5.5.0:
-  version "5.7.1"
-  resolved "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
-  integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
+  version "5.7.2"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.2.tgz#48d55db737c3287cd4835e17fa13feace1c41ef8"
+  integrity sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==

 shebang-command@^1.2.0:
  version "1.2.0"
@ -1280,10 +1290,10 @@ svelte-hmr@^0.14.12:
  resolved "https://registry.yarnpkg.com/svelte-hmr/-/svelte-hmr-0.14.12.tgz#a127aec02f1896500b10148b2d4d21ddde39973f"
  integrity sha512-4QSW/VvXuqVcFZ+RhxiR8/newmwOCTlbYIezvkeN6302YFRE8cXy0naamHcjz8Y9Ce3ITTZtrHrIL0AGfyo61w==

-svelte@^3.49.0:
-  version "3.49.0"
-  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.49.0.tgz#5baee3c672306de1070c3b7888fc2204e36a4029"
-  integrity sha512-+lmjic1pApJWDfPCpUUTc1m8azDqYCG1JN9YEngrx/hUyIcFJo6VZhj0A1Ai0wqoHcEIuQy+e9tk+4uDgdtsFA==
+svelte@^3.58.0:
+  version "3.58.0"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.58.0.tgz#d3e6f103efd6129e51c7d709225ad3b4c052b64e"
+  integrity sha512-brIBNNB76mXFmU/Kerm4wFnkskBbluBDCjx/8TcpYRb298Yh2dztS2kQ6bhtjMcvUhd5ynClfwpz5h2gnzdQ1A==

 symbol-tree@^3.2.4:
  version "3.2.4"
@ -1291,13 +1301,14 @@ symbol-tree@^3.2.4:
  integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==

 tough-cookie@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.0.0.tgz#d822234eeca882f991f0f908824ad2622ddbece4"
-  integrity sha512-tHdtEpQCMrc1YLrMaqXXcj6AxhYi/xgit6mZu1+EDWUn+qhUf8wMQoFIy9NXuq23zAwtcB0t/MjACGR18pcRbg==
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.1.3.tgz#97b9adb0728b42280aa3d814b6b999b2ff0318bf"
+  integrity sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==
  dependencies:
    psl "^1.1.33"
    punycode "^2.1.1"
-    universalify "^0.1.2"
+    universalify "^0.2.0"
+    url-parse "^1.5.3"

 tr46@^2.1.0:
  version "2.1.0"
@ -1342,16 +1353,24 @@ unist-util-visit@^2.0.0:
    unist-util-is "^4.0.0"
    unist-util-visit-parents "^3.0.0"

-universalify@^0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
-  integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==
+universalify@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.2.0.tgz#6451760566fa857534745ab1dde952d1b1761be0"
+  integrity sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==

 universalify@^1.0.0:
  version "1.0.0"
  resolved "https://registry.npmjs.org/universalify/-/universalify-1.0.0.tgz#b61a1da173e8435b2fe3c67d29b9adf8594bd16d"
  integrity sha512-rb6X1W158d7pRQBg5gkR8uPaSfiids68LTJQYOtEUhoJUWBdaQHsuT/EUduxXYxcrt4r5PJ4fuHW1MHT6p0qug==

+url-parse@^1.5.3:
+  version "1.5.10"
+  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.10.tgz#9d3c2f736c1d75dd3bd2be507dcc111f1e2ea9c1"
+  integrity sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==
+  dependencies:
+    querystringify "^2.1.1"
+    requires-port "^1.0.0"
+
 utf-8-validate@^5.0.2:
  version "5.0.2"
  resolved "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.2.tgz#63cfbccd85dc1f2b66cf7a1d0eebc08ed056bfb3"
--- a/examples/webpack/yarn.lock
+++ b/examples/webpack/yarn.lock
@ -2197,9 +2197,9 @@ selfsigned@^2.1.1:
    node-forge "^1"

 semver@^7.3.8:
-  version "7.3.8"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.8.tgz#07a78feafb3f7b32347d725e33de7e2a2df67798"
-  integrity sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==
+  version "7.5.4"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e"
+  integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==
  dependencies:
    lru-cache "^6.0.0"

--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "carbon-components-svelte",
-  "version": "0.71.0",
+  "version": "0.76.1",
  "license": "Apache-2.0",
  "description": "Svelte implementation of the Carbon Design System",
  "svelte": "./src/index.js",
@ -11,13 +11,14 @@
    "css/*.css"
  ],
  "scripts": {
-    "test:types": "svelte-check --workspace tests",
+    "test:types": "svelte-check --workspace tests --no-tsconfig --ignore 'docs,examples'",
+    "lint": "prettier --write \"**/*.{svelte,md,js,json,ts}\"",
    "build:css": "node scripts/build-css",
    "build:docs": "node scripts/build-docs",
    "build:lib": "rollup -c",
-    "prepack": "yarn build:docs & yarn build:lib",
    "format": "prettier --write \"./**/*.{svelte,js,md}\"",
-    "prepare": "husky install"
+    "prepack": "yarn build:docs & yarn build:lib",
+    "release": "standard-version && yarn prepack"
  },
  "dependencies": {
    "flatpickr": "4.6.9"
@ -25,12 +26,10 @@
  "devDependencies": {
    "@rollup/plugin-commonjs": "^21.0.3",
    "@rollup/plugin-node-resolve": "^13.3.0",
-    "@tsconfig/svelte": "^3.0.0",
+    "@tsconfig/svelte": "^4.0.1",
    "autoprefixer": "^10.4.8",
-    "carbon-components": "10.56.0",
+    "carbon-components": "10.57.0",
    "carbon-icons-svelte": "^11.2.0",
-    "husky": "^8.0.1",
-    "lint-staged": "^13.0.3",
    "postcss": "^8.4.16",
    "prettier": "^2.7.1",
    "prettier-plugin-svelte": "^2.7.0",
@ -38,16 +37,17 @@
    "rollup-plugin-svelte": "^7.1.0",
    "rollup-plugin-terser": "^7.0.2",
    "sass": "^1.49.11",
-    "sveld": "^0.18.0",
-    "svelte": "^3.51.0",
-    "svelte-check": "^2.8.1",
+    "standard-version": "^9.5.0",
+    "sveld": "^0.18.1",
+    "svelte": "^3.58.0",
+    "svelte-check": "^3.4.3",
    "typescript": "^4.7.4"
  },
-  "lint-staged": {
-    "*.{svelte,md,js,json}": [
-      "prettier --write"
-    ],
-    "*.{svelte,js,md}": "prettier --write"
+  "standard-version": {
+    "skip": {
+      "commit": true,
+      "tag": true
+    }
  },
  "prettier": {
    "svelteStrictMode": true
@ -72,7 +72,8 @@
    "css"
  ],
  "contributors": [
+    "Josef Aidt (https://github.com/josefaidt)",
    "Eric Liu (https://github.com/metonym)",
-    "Josef Aidt (https://github.com/josefaidt)"
+    "Enrico Sacchetti (https://github.com/theetrain)"
  ]
 }
--- a/src/Checkbox/Checkbox.svelte
+++ b/src/Checkbox/Checkbox.svelte
@ -1,5 +1,6 @@
 <script>
  /**
+   * @restProps {div}
   * @event {boolean} check
   */

--- a/src/ComboBox/ComboBox.svelte
+++ b/src/ComboBox/ComboBox.svelte
@ -218,13 +218,15 @@
 />

 <div class:bx--list-box__wrapper="{true}">
-  {#if titleText}
+  {#if titleText || $$slots.titleText}
    <label
      for="{id}"
      class:bx--label="{true}"
      class:bx--label--disabled="{disabled}"
    >
+    <slot name="titleText">
      {titleText}
+    </slot>
    </label>
  {/if}
  <ListBox
--- a/src/ContentSwitcher/ContentSwitcher.svelte
+++ b/src/ContentSwitcher/ContentSwitcher.svelte
@ -58,6 +58,7 @@
 </script>

 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<!-- svelte-ignore a11y-interactive-supports-focus -->
 <div
  role="tablist"
  class:bx--content-switcher="{true}"
--- a/src/ContextMenu/ContextMenu.svelte
+++ b/src/ContextMenu/ContextMenu.svelte
@ -153,6 +153,7 @@
  }}"
 />

+<!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
 <ul
  bind:this="{ref}"
  role="menu"
--- a/src/DatePicker/DatePickerInput.svelte
+++ b/src/DatePicker/DatePickerInput.svelte
@ -162,7 +162,7 @@
  {#if !invalid && warn}
    <div class:bx--form-requirement="{true}">{warnText}</div>
  {/if}
-  {#if helperText}
+  {#if !invalid && !warn && helperText}
    <div
      class:bx--form__helper-text="{true}"
      class:bx--form__helper-text--disabled="{disabled}"
--- a/src/Dropdown/Dropdown.svelte
+++ b/src/Dropdown/Dropdown.svelte
@ -98,7 +98,7 @@
  /** Obtain a reference to the button HTML element */
  export let ref = null;

-  import { createEventDispatcher } from "svelte";
+  import { createEventDispatcher, onMount } from "svelte";
  import WarningFilled from "../icons/WarningFilled.svelte";
  import WarningAltFilled from "../icons/WarningAltFilled.svelte";
  import {
@ -146,17 +146,32 @@
  }

  const dispatchSelect = () => {
-    dispatch("select", { selectedId, selectedItem });
+    dispatch("select", {
+      selectedId,
+      selectedItem: items.find((item) => item.id === selectedId),
+    });
  };
-</script>

-<svelte:window
-  on:click="{({ target }) => {
+  const pageClickHandler = ({ target }) => {
    if (open && ref && !ref.contains(target)) {
      open = false;
    }
-  }}"
-/>
+  };
+
+  onMount(() => {
+    if (parent) {
+      parent.addEventListener("click", pageClickHandler);
+    }
+
+    return () => {
+      if (parent) {
+        parent.removeEventListener("click", pageClickHandler);
+      }
+    };
+  });
+</script>
+
+<svelte:window on:click="{pageClickHandler}" />

 <div
  class:bx--dropdown__wrapper="{true}"
@ -182,10 +197,11 @@
    size="{size}"
    name="{name}"
    aria-label="{$$props['aria-label']}"
-    class="bx--dropdown {direction === 'top' && 'bx--list-box--up'} {invalid &&
-      'bx--dropdown--invalid'} {!invalid &&
-      warn &&
-      'bx--dropdown--warning'} {open && 'bx--dropdown--open'}
+    class="bx--dropdown 
+      {direction === 'top' && 'bx--list-box--up'} 
+      {invalid && 'bx--dropdown--invalid'} 
+      {!invalid && warn && 'bx--dropdown--warning'} 
+      {open && 'bx--dropdown--open'}
      {size === 'sm' && 'bx--dropdown--sm'}
      {size === 'xl' && 'bx--dropdown--xl'}
      {inline && 'bx--dropdown--inline'}
--- a/src/FileUploader/Filename.svelte
+++ b/src/FileUploader/Filename.svelte
@ -1,4 +1,8 @@
 <script>
+  /**
+   * @restProps {div | button | svg}
+   */
+
  /**
   * Specify the file name status
   * @type {"uploading" | "edit" | "complete"}
--- a/src/FluidForm/FluidForm.svelte
+++ b/src/FluidForm/FluidForm.svelte
@ -1,4 +1,8 @@
 <script>
+  /**
+   * @restProps {form}
+   */
+
  import { setContext } from "svelte";
  import Form from "../Form/Form.svelte";

--- a/src/ListBox/ListBoxMenuItem.svelte
+++ b/src/ListBox/ListBoxMenuItem.svelte
@ -20,6 +20,7 @@

 <div
  role="option"
+  tabindex="-1"
  class:bx--list-box__menu-item="{true}"
  class:bx--list-box__menu-item--active="{active}"
  class:bx--list-box__menu-item--highlighted="{highlighted || active}"
--- a/src/ListBox/ListBoxSelection.svelte
+++ b/src/ListBox/ListBoxSelection.svelte
@ -62,7 +62,7 @@
    <div
      bind:this="{ref}"
      role="button"
-      tabIndex="{disabled ? -1 : 0}"
+      tabindex="{disabled ? -1 : 0}"
      class:bx--tag__close-icon="{true}"
      on:click|preventDefault|stopPropagation="{(e) => {
        if (!disabled) {
--- a/src/MultiSelect/MultiSelect.svelte
+++ b/src/MultiSelect/MultiSelect.svelte
@ -293,14 +293,16 @@
  class:bx--list-box__wrapper--inline="{inline}"
  class:bx--multi-select__wrapper--inline--invalid="{inline && invalid}"
 >
-  {#if titleText}
+  {#if titleText || $$slots.titleText}
    <label
      for="{id}"
      class:bx--label="{true}"
      class:bx--label--disabled="{disabled}"
      class:bx--visually-hidden="{hideLabel}"
    >
+    <slot name="titleText">
      {titleText}
+    </slot>
    </label>
  {/if}
  <ListBox
--- a/src/NumberInput/NumberInput.svelte
+++ b/src/NumberInput/NumberInput.svelte
@ -128,7 +128,7 @@
  $: incrementLabel = translateWithId("increment");
  $: decrementLabel = translateWithId("decrement");
  $: error =
-    invalid ||
+    (invalid && !readonly) ||
    (!allowEmpty && value == null) ||
    value > max ||
    (typeof value === "number" && value < min);
@ -191,8 +191,8 @@
        type="number"
        pattern="[0-9]*"
        aria-describedby="{errorId}"
-        data-invalid="{invalid || undefined}"
-        aria-invalid="{invalid || undefined}"
+        data-invalid="{error || undefined}"
+        aria-invalid="{error || undefined}"
        aria-label="{label ? undefined : ariaLabel}"
        disabled="{disabled}"
        id="{id}"
@ -211,6 +211,9 @@
        on:blur
        on:paste
      />
+      {#if readonly}
+        <EditOff class="bx--text-input__readonly-icon" />
+      {:else}
        {#if invalid}
          <WarningFilled class="bx--number__invalid" />
        {/if}
@ -219,8 +222,6 @@
            class="bx--number__invalid bx--number__invalid--warning"
          />
        {/if}
-      {#if readonly}
-        <EditOff class="bx--text-input__readonly-icon" />
      {/if}
      {#if !hideSteppers}
        <div class:bx--number__controls="{true}">
--- a/src/OverflowMenu/OverflowMenu.svelte
+++ b/src/OverflowMenu/OverflowMenu.svelte
@ -242,6 +242,7 @@
    />
  </slot>
  {#if open}
+    <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
    <ul
      bind:this="{menuRef}"
      role="menu"
--- a/src/PaginationNav/PaginationNav.svelte
+++ b/src/PaginationNav/PaginationNav.svelte
@ -23,6 +23,12 @@
  /** Specify the backward button text */
  export let backwardText = "Previous page";

+  /**
+   * Set the position of the tooltip relative to the pagination buttons.
+   * @type {"top" | "right" | "bottom" | "left" | "outside" | "inside"}
+   */
+  export let tooltipPosition = "bottom";
+
  import { createEventDispatcher } from "svelte";
  import CaretLeft from "../icons/CaretLeft.svelte";
  import CaretRight from "../icons/CaretRight.svelte";
@ -76,7 +82,11 @@
      <Button
        kind="ghost"
        tooltipAlignment="center"
-        tooltipPosition="bottom"
+        tooltipPosition="{tooltipPosition === 'inside'
+          ? 'right'
+          : tooltipPosition === 'outside'
+          ? 'left'
+          : tooltipPosition}"
        iconDescription="{backwardText}"
        disabled="{!loop && page === 1}"
        icon="{CaretLeft}"
@ -147,7 +157,11 @@
      <Button
        kind="ghost"
        tooltipAlignment="center"
-        tooltipPosition="bottom"
+        tooltipPosition="{tooltipPosition === 'inside'
+          ? 'left'
+          : tooltipPosition === 'outside'
+          ? 'right'
+          : tooltipPosition}"
        iconDescription="{forwardText}"
        disabled="{!loop && page === total}"
        icon="{CaretRight}"
--- a/src/ProgressBar/ProgressBar.svelte
+++ b/src/ProgressBar/ProgressBar.svelte
@ -14,6 +14,12 @@
   */
  export let kind = "default";

+  /**
+   * Specify the status
+   * @type {"active" | "finished" | "error"}
+   */
+  export let status = "active";
+
  /**
   * Specify the size
   * @type {"sm" | "md"}
@ -32,10 +38,27 @@
  /** Set an id for the progress bar element */
  export let id = "ccs-" + Math.random().toString(36);

+  import CheckmarkFilled from "../icons/CheckmarkFilled.svelte";
+  import ErrorFilled from "../icons/ErrorFilled.svelte";
+
+  const statusIcons = {
+    error: ErrorFilled,
+    finished: CheckmarkFilled,
+  };
+
  let helperId = "ccs-" + Math.random().toString(36);

-  $: indeterminate = value === undefined;
-  $: capped = value > max ? max : value < 0 ? 0 : value;
+  $: indeterminate = value === undefined && status === "active";
+  let capped;
+  $: {
+    if (status === "error" || value < 0) {
+      capped = 0;
+    } else if (value > max) {
+      capped = max;
+    } else {
+      capped = value;
+    }
+  }
 </script>

 <div
@ -45,6 +68,8 @@
  class:bx--progress-bar--small="{size === 'sm'}"
  class:bx--progress-bar--inline="{kind === 'inline'}"
  class:bx--progress-bar--indented="{kind === 'indented'}"
+  class:bx--progress-bar--error="{status === 'error'}"
+  class:bx--progress-bar--finished="{status === 'finished'}"
  {...$$restProps}
 >
  <label
@ -55,11 +80,18 @@
    <slot name="labelText">
      {labelText}
    </slot>
+    {#if status === "error" || status === "finished"}
+      <svelte:component
+        this="{statusIcons[status]}"
+        class="bx--progress-bar__status-icon"
+      />
+    {/if}
  </label>
  <div
    role="progressbar"
    id="{id}"
    class:bx--progress-bar__track="{true}"
+    aria-busy="{status === 'active'}"
    aria-valuemin="{indeterminate ? undefined : 0}"
    aria-valuemax="{indeterminate ? undefined : max}"
    aria-valuenow="{indeterminate ? undefined : capped}"
@ -67,7 +99,7 @@
  >
    <div
      class:bx--progress-bar__bar="{true}"
-      style="transform: scaleX({capped / max})"
+      style:transform="{status === "active" && `scaleX(${capped / max})`}"
    ></div>
  </div>
  {#if helperText}
--- a/src/ProgressIndicator/ProgressStep.svelte
+++ b/src/ProgressIndicator/ProgressStep.svelte
@ -53,7 +53,6 @@

 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <li
-  aria-disabled="{disabled}"
  id="{id}"
  class:bx--progress-step="{true}"
  class:bx--progress-step--current="{current}"
--- a/src/Select/Select.svelte
+++ b/src/Select/Select.svelte
@ -181,7 +181,7 @@
          </div>
        {/if}
      </div>
-      {#if helperText}
+      {#if !invalid && !warn && helperText}
        <div
          class:bx--form__helper-text="{true}"
          class:bx--form__helper-text--disabled="{disabled}"
--- a/src/Slider/Slider.svelte
+++ b/src/Slider/Slider.svelte
@ -193,21 +193,10 @@
        class:bx--slider__filled-track="{true}"
        style="transform: translate(0, -50%) scaleX({left / 100})"
      ></div>
-      <input
-        type="hidden"
-        class:bx--slider__input="{true}"
-        name="{name}"
-        value="{value}"
-        required="{required}"
-        min="{min}"
-        max="{max}"
-        step="{step}"
-      />
    </div>
    <span class:bx--slider__range-label="{true}">{maxLabel || max}</span>
    <input
      type="{hideTextInput ? 'hidden' : inputType}"
-      style="{hideTextInput ? 'display: none' : undefined}"
      id="input-{id}"
      name="{name}"
      class:bx--text-input="{true}"
--- a/src/StructuredList/StructuredListRow.svelte
+++ b/src/StructuredList/StructuredListRow.svelte
@ -27,6 +27,7 @@
    <slot />
  </label>
 {:else}
+  <!-- svelte-ignore a11y-interactive-supports-focus -->
  <div
    role="row"
    class:bx--structured-list-row="{true}"
--- a/src/Tabs/Tabs.svelte
+++ b/src/Tabs/Tabs.svelte
@ -151,6 +151,7 @@
    </a>
    <ChevronDown aria-hidden="true" title="{iconDescription}" />
  </div>
+  <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
  <ul
    bind:this="{refTabList}"
    role="tablist"
--- a/src/TextInput/PasswordInput.svelte
+++ b/src/TextInput/PasswordInput.svelte
@ -89,6 +89,7 @@
  const ctx = getContext("Form");

  $: isFluid = !!ctx && ctx.isFluid;
+  $: helperId = `helper-${id}`;
  $: errorId = `error-${id}`;
  $: warnId = `warn-${id}`;
 </script>
@ -122,6 +123,7 @@
    </label>
    {#if !isFluid && helperText}
      <div
+        id="{helperId}"
        class:bx--form__helper-text="{true}"
        class:bx--form__helper-text--disabled="{disabled}"
        class:bx--form__helper-text--inline="{inline}"
@ -167,7 +169,13 @@
        bind:this="{ref}"
        data-invalid="{invalid || undefined}"
        aria-invalid="{invalid || undefined}"
-        aria-describedby="{invalid ? errorId : warn ? warnId : undefined}"
+        aria-describedby="{invalid
+          ? errorId
+          : warn
+          ? warnId
+          : helperText
+          ? helperId
+          : undefined}"
        id="{id}"
        name="{name}"
        placeholder="{placeholder}"
@ -240,7 +248,7 @@
        {invalidText}
      </div>
    {/if}
-    {#if !invalid && !warn && !isFluid && !inline}
+    {#if !invalid && !warn && !isFluid && !inline && helperText}
      <div
        class:bx--form__helper-text="{true}"
        class:bx--form__helper-text--disabled="{disabled}"
--- a/src/TextInput/TextInput.svelte
+++ b/src/TextInput/TextInput.svelte
@ -95,6 +95,8 @@
  };

  $: isFluid = !!ctx && ctx.isFluid;
+  $: error = invalid && !readonly;
+  $: helperId = `helper-${id}`;
  $: errorId = `error-${id}`;
  $: warnId = `warn-${id}`;
 </script>
@ -160,11 +162,14 @@
    class:bx--text-input__field-outer-wrapper--inline="{inline}"
  >
    <div
-      data-invalid="{invalid || undefined}"
+      data-invalid="{error || undefined}"
      data-warn="{warn || undefined}"
      class:bx--text-input__field-wrapper="{true}"
      class:bx--text-input__field-wrapper--warning="{!invalid && warn}"
    >
+      {#if readonly}
+        <EditOff class="bx--text-input__readonly-icon" />
+      {:else}
        {#if invalid}
          <WarningFilled class="bx--text-input__invalid-icon" />
        {/if}
@ -174,15 +179,19 @@
            bx--text-input__invalid-icon--warning"
          />
        {/if}
-      {#if readonly}
-        <EditOff class="bx--text-input__readonly-icon" />
      {/if}
      <input
        bind:this="{ref}"
-        data-invalid="{invalid || undefined}"
-        aria-invalid="{invalid || undefined}"
+        data-invalid="{error || undefined}"
+        aria-invalid="{error || undefined}"
        data-warn="{warn || undefined}"
-        aria-describedby="{invalid ? errorId : warn ? warnId : undefined}"
+        aria-describedby="{error
+          ? errorId
+          : warn
+          ? warnId
+          : helperText
+          ? helperId
+          : undefined}"
        disabled="{disabled}"
        id="{id}"
        name="{name}"
@ -192,8 +201,8 @@
        readonly="{readonly}"
        class:bx--text-input="{true}"
        class:bx--text-input--light="{light}"
-        class:bx--text-input--invalid="{invalid}"
-        class:bx--text-input--warn="{warn}"
+        class:bx--text-input--invalid="{error}"
+        class:bx--text-input--warning="{warn}"
        class:bx--text-input--sm="{size === 'sm'}"
        class:bx--text-input--xl="{size === 'xl'}"
        {...$$restProps}
@ -219,6 +228,7 @@
    </div>
    {#if !invalid && !warn && !isFluid && !inline && helperText}
      <div
+        id="{helperId}"
        class:bx--form__helper-text="{true}"
        class:bx--form__helper-text--disabled="{disabled}"
        class:bx--form__helper-text--inline="{inline}"
--- a/src/Tile/ExpandableTile.svelte
+++ b/src/Tile/ExpandableTile.svelte
@ -32,11 +32,23 @@
  /** Obtain a reference to the top-level element */
  export let ref = null;

-  import { afterUpdate } from "svelte";
+  import { afterUpdate, onMount } from "svelte";
  import ChevronDown from "../icons/ChevronDown.svelte";

  let refAbove = null;

+  onMount(() => {
+    const resizeObserver = new ResizeObserver(([elem]) => {
+      tileMaxHeight = elem.contentRect.height;
+    });
+
+    resizeObserver.observe(refAbove);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  });
+
  afterUpdate(() => {
    if (tileMaxHeight === 0) {
      tileMaxHeight = refAbove.getBoundingClientRect().height;
@ -62,10 +74,8 @@
  class:bx--tile--expandable="{true}"
  class:bx--tile--is-expanded="{expanded}"
  class:bx--tile--light="{light}"
+  style:max-height="{expanded ? "none" : `${tileMaxHeight + tilePadding}px`}"
  {...$$restProps}
-  style="{expanded
-    ? $$restProps.style
-    : `${$$restProps.style}; max-height: ${tileMaxHeight + tilePadding}px`}"
  on:click
  on:click="{() => {
    expanded = !expanded;
--- a/src/Tile/SelectableTile.svelte
+++ b/src/Tile/SelectableTile.svelte
@ -1,4 +1,9 @@
 <script>
+  /**
+   * @event {string} "select"
+   * @event {string} "deselect"
+   */
+
  /** Set to `true` to select the tile */
  export let selected = false;

--- a/src/Tooltip/Tooltip.svelte
+++ b/src/Tooltip/Tooltip.svelte
@ -254,7 +254,7 @@
        on:click|stopPropagation
        on:mousedown|stopPropagation
        class:bx--tooltip__content="{true}"
-        tabIndex="-1"
+        tabindex="-1"
        role="dialog"
      >
        <slot />
--- a/src/TreeView/TreeView.svelte
+++ b/src/TreeView/TreeView.svelte
@ -1,7 +1,7 @@
 <script>
  /**
   * @typedef {string | number} TreeNodeId
-   * @typedef {{ id: TreeNodeId; text: any; icon?: typeof import("svelte").SvelteComponent; disabled?: boolean; expanded?: boolean; children?: TreeNode[]; }} TreeNode
+   * @typedef {{ id: TreeNodeId; text: any; icon?: typeof import("svelte").SvelteComponent; disabled?: boolean; children?: TreeNode[]; }} TreeNode
   * @event {TreeNode & { expanded: boolean; leaf: boolean; }} select
   * @event {TreeNode & { expanded: boolean; leaf: boolean; }} toggle
   * @event {TreeNode & { expanded: boolean; leaf: boolean; }} focus
@ -188,6 +188,7 @@
  </label>
 {/if}

+<!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
 <ul
  {...$$restProps}
  role="tree"
--- a/src/TreeView/TreeViewNode.svelte
+++ b/src/TreeView/TreeViewNode.svelte
@ -75,6 +75,7 @@
  }
 </script>

+<!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
 <li
  bind:this="{ref}"
  role="treeitem"
--- a/src/TreeView/TreeViewNodeList.svelte
+++ b/src/TreeView/TreeViewNodeList.svelte
@ -6,7 +6,6 @@

  /** @type {Array<TreeNode & { children?: TreeNode[] }>} */
  export let children = [];
-  export let expanded = false;
  export let root = false;

  /** @type {string | number} */
@ -73,6 +72,7 @@
    {/if}
  {/each}
 {:else}
+  <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
  <li
    bind:this="{ref}"
    role="treeitem"
--- a/src/UIShell/Header.svelte
+++ b/src/UIShell/Header.svelte
@ -94,8 +94,10 @@
    {...$$restProps}
    on:click
  >
-    {#if company}
-      <span class:bx--header__name--prefix="{true}">{company}&nbsp;</span>
+    {#if company || $$slots.company}
+      <span class:bx--header__name--prefix="{true}"
+        ><slot name="company">{company}&nbsp;</slot></span
+      >
    {/if}
    <slot name="platform">{platformName}</slot>
  </a>
--- a/src/UIShell/HeaderNav.svelte
+++ b/src/UIShell/HeaderNav.svelte
@ -6,6 +6,7 @@
 </script>

 <nav {...props} class:bx--header__nav="{true}" {...$$restProps}>
+  <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
  <ul {...props} role="menubar" class:bx--header__menu-bar="{true}">
    <slot />
  </ul>
--- a/src/UIShell/HeaderNavItem.svelte
+++ b/src/UIShell/HeaderNavItem.svelte
@ -61,6 +61,6 @@
      }
    }}"
  >
-    <span class:bx--text-truncate--end="{true}">{text}</span>
+    <span class:bx--text-truncate--end="{true}"><slot>{text}</slot></span>
  </a>
 </li>
--- a/src/UIShell/HeaderNavMenu.svelte
+++ b/src/UIShell/HeaderNavMenu.svelte
@ -94,6 +94,7 @@
    {text}
    <ChevronDown class="bx--header__menu-arrow" />
  </a>
+  <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
  <ul
    bind:this="{menuRef}"
    role="menu"
--- a/src/UIShell/HeaderSearch.svelte
+++ b/src/UIShell/HeaderSearch.svelte
@ -134,6 +134,7 @@
  </div>

  {#if active && results.length > 0}
+    <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
    <ul aria-labelledby="search-label" role="menu" id="search-menu">
      {#each results as result, i}
        <li role="none">
--- a/src/UIShell/SideNavMenu.svelte
+++ b/src/UIShell/SideNavMenu.svelte
@ -48,6 +48,7 @@
      <ChevronDown />
    </div>
  </button>
+  <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
  <ul
    role="menu"
    class:bx--side-nav__menu="{true}"
--- a/tests/Button.test.svelte
+++ b/tests/Button.test.svelte
@ -3,7 +3,7 @@
  import Add from "carbon-icons-svelte/lib/Add.svelte";
 </script>

-<Button>Primary button</Button>
+<Button data-test-id="btn">Primary button</Button>

 <Button kind="secondary">Secondary button</Button>

--- a/tests/Checkbox.test.svelte
+++ b/tests/Checkbox.test.svelte
@ -2,7 +2,7 @@
  import { Checkbox } from "../types";
 </script>

-<Checkbox labelText="Label text" />
+<Checkbox labelText="Label text" style="margin: 1rem" />

 <Checkbox labelText="Label text" checked />

--- a/tests/FluidForm.test.svelte
+++ b/tests/FluidForm.test.svelte
@ -2,7 +2,7 @@
  import { FluidForm, TextInput, PasswordInput } from "../types";
 </script>

-<FluidForm>
+<FluidForm action="" method="get">
  <TextInput labelText="User name" placeholder="Enter user name..." required />
  <PasswordInput
    required
--- a/tests/ProgressBar.test.svelte
+++ b/tests/ProgressBar.test.svelte
@ -12,4 +12,5 @@
  labelText="Upload status"
  hideLabel
  helperText="40 MB of 100 MB"
+  status="finished"
 />
--- a/tests/TreeView.test.svelte
+++ b/tests/TreeView.test.svelte
@ -52,7 +52,7 @@
  $: if (treeview) {
    treeview.expandAll();
    treeview.expandNodes((node) => {
-      return node.id > 0;
+      return +node.id > 0;
    });
    treeview.collapseAll();
    treeview.collapseNodes((node) => {
--- a/types/Accordion/AccordionItem.svelte.d.ts
+++ b/types/Accordion/AccordionItem.svelte.d.ts
@ -27,6 +27,8 @@ export interface AccordionItemProps
   * @default "Expand/Collapse"
   */
  iconDescription?: string;
+
+  [key: `data-${string}`]: any;
 }

 export default class AccordionItem extends SvelteComponentTyped<
--- a/types/Accordion/AccordionSkeleton.svelte.d.ts
+++ b/types/Accordion/AccordionSkeleton.svelte.d.ts
@ -26,6 +26,8 @@ export interface AccordionSkeletonProps
   * @default true
   */
  open?: boolean;
+
+  [key: `data-${string}`]: any;
 }

 export default class AccordionSkeleton extends SvelteComponentTyped<
--- a/types/AspectRatio/AspectRatio.svelte.d.ts
+++ b/types/AspectRatio/AspectRatio.svelte.d.ts
@ -17,6 +17,8 @@ export interface AspectRatioProps
    | "3x2"
    | "9x16"
    | "1x2";
+
+  [key: `data-${string}`]: any;
 }

 export default class AspectRatio extends SvelteComponentTyped<
--- a/types/Breadcrumb/BreadcrumbItem.svelte.d.ts
+++ b/types/Breadcrumb/BreadcrumbItem.svelte.d.ts
@ -14,6 +14,8 @@ export interface BreadcrumbItemProps
   * @default false
   */
  isCurrentPage?: boolean;
+
+  [key: `data-${string}`]: any;
 }

 export default class BreadcrumbItem extends SvelteComponentTyped<
--- a/types/Breadcrumb/BreadcrumbSkeleton.svelte.d.ts
+++ b/types/Breadcrumb/BreadcrumbSkeleton.svelte.d.ts
@ -14,6 +14,8 @@ export interface BreadcrumbSkeletonProps
   * @default 3
   */
  count?: number;
+
+  [key: `data-${string}`]: any;
 }

 export default class BreadcrumbSkeleton extends SvelteComponentTyped<
--- a/types/Button/Button.svelte.d.ts
+++ b/types/Button/Button.svelte.d.ts
@ -105,6 +105,8 @@ export interface ButtonProps
   * @default null
   */
  ref?: null | HTMLAnchorElement | HTMLButtonElement;
+
+  [key: `data-${string}`]: any;
 }

 export default class Button extends SvelteComponentTyped<
--- a/types/Button/ButtonSet.svelte.d.ts
+++ b/types/Button/ButtonSet.svelte.d.ts
@ -8,6 +8,8 @@ export interface ButtonSetProps
   * @default false
   */
  stacked?: boolean;
+
+  [key: `data-${string}`]: any;
 }

 export default class ButtonSet extends SvelteComponentTyped<
--- a/types/Button/ButtonSkeleton.svelte.d.ts
+++ b/types/Button/ButtonSkeleton.svelte.d.ts
@ -14,6 +14,8 @@ export interface ButtonSkeletonProps
   * @default "default"
   */
  size?: "default" | "field" | "small" | "lg" | "xl";
+
+  [key: `data-${string}`]: any;
 }

 export default class ButtonSkeleton extends SvelteComponentTyped<
--- a/types/Checkbox/Checkbox.svelte.d.ts
+++ b/types/Checkbox/Checkbox.svelte.d.ts
@ -1,7 +1,8 @@
 /// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";

-export interface CheckboxProps {
+export interface CheckboxProps
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
  /**
   * Specify the value of the checkbox
   * @default ""
@ -85,6 +86,8 @@ export interface CheckboxProps {
   * @default null
   */
  ref?: null | HTMLInputElement;
+
+  [key: `data-${string}`]: any;
 }

 export default class Checkbox extends SvelteComponentTyped<
--- a/types/Checkbox/CheckboxSkeleton.svelte.d.ts
+++ b/types/Checkbox/CheckboxSkeleton.svelte.d.ts
@ -2,7 +2,9 @@
 import type { SvelteComponentTyped } from "svelte";

 export interface CheckboxSkeletonProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {}
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  [key: `data-${string}`]: any;
+}

 export default class CheckboxSkeleton extends SvelteComponentTyped<
  CheckboxSkeletonProps,
--- a/types/CodeSnippet/CodeSnippetSkeleton.svelte.d.ts
+++ b/types/CodeSnippet/CodeSnippetSkeleton.svelte.d.ts
@ -8,6 +8,8 @@ export interface CodeSnippetSkeletonProps
   * @default "single"
   */
  type?: "single" | "multi";
+
+  [key: `data-${string}`]: any;
 }

 export default class CodeSnippetSkeleton extends SvelteComponentTyped<
--- a/types/ComboBox/ComboBox.svelte.d.ts
+++ b/types/ComboBox/ComboBox.svelte.d.ts
@ -152,6 +152,8 @@ export interface ComboBoxProps
   * @default null
   */
  listRef?: null | HTMLDivElement;
+
+  [key: `data-${string}`]: any;
 }

 export default class ComboBox extends SvelteComponentTyped<
@ -169,7 +171,7 @@ export default class ComboBox extends SvelteComponentTyped<
    clear: WindowEventMap["clear"];
    scroll: WindowEventMap["scroll"];
  },
-  { default: { item: ComboBoxItem; index: number } }
+  { default: { item: ComboBoxItem; index: number }; titleText: {} }
 > {
  /**
   * Clear the combo box programmatically
--- a/types/ComposedModal/ComposedModal.svelte.d.ts
+++ b/types/ComposedModal/ComposedModal.svelte.d.ts
@ -44,6 +44,8 @@ export interface ComposedModalProps
   * @default null
   */
  ref?: null | HTMLDivElement;
+
+  [key: `data-${string}`]: any;
 }

 export default class ComposedModal extends SvelteComponentTyped<
--- a/types/ComposedModal/ModalBody.svelte.d.ts
+++ b/types/ComposedModal/ModalBody.svelte.d.ts
@ -14,6 +14,8 @@ export interface ModalBodyProps
   * @default false
   */
  hasScrollingContent?: boolean;
+
+  [key: `data-${string}`]: any;
 }

 export default class ModalBody extends SvelteComponentTyped<
--- a/types/ComposedModal/ModalFooter.svelte.d.ts
+++ b/types/ComposedModal/ModalFooter.svelte.d.ts
@ -51,6 +51,8 @@ export interface ModalFooterProps
   * @default false
   */
  danger?: boolean;
+
+  [key: `data-${string}`]: any;
 }

 export default class ModalFooter extends SvelteComponentTyped<
--- a/types/ComposedModal/ModalHeader.svelte.d.ts
+++ b/types/ComposedModal/ModalHeader.svelte.d.ts
@ -44,6 +44,8 @@ export interface ModalHeaderProps
   * @default "Close"
   */
  iconDescription?: string;
+
+  [key: `data-${string}`]: any;
 }

 export default class ModalHeader extends SvelteComponentTyped<
--- a/types/ContentSwitcher/ContentSwitcher.svelte.d.ts
+++ b/types/ContentSwitcher/ContentSwitcher.svelte.d.ts
@ -14,6 +14,8 @@ export interface ContentSwitcherProps
   * @default undefined
   */
  size?: "sm" | "xl";
+
+  [key: `data-${string}`]: any;
 }

 export default class ContentSwitcher extends SvelteComponentTyped<
--- a/types/ContentSwitcher/Switch.svelte.d.ts
+++ b/types/ContentSwitcher/Switch.svelte.d.ts
@ -33,6 +33,8 @@ export interface SwitchProps
   * @default null
   */
  ref?: null | HTMLButtonElement;
+
+  [key: `data-${string}`]: any;
 }

 export default class Switch extends SvelteComponentTyped<
--- a/types/ContextMenu/ContextMenu.svelte.d.ts
+++ b/types/ContextMenu/ContextMenu.svelte.d.ts
@ -34,6 +34,8 @@ export interface ContextMenuProps
   * @default null
   */
  ref?: null | HTMLUListElement;
+
+  [key: `data-${string}`]: any;
 }

 export default class ContextMenu extends SvelteComponentTyped<
--- a/types/ContextMenu/ContextMenuOption.svelte.d.ts
+++ b/types/ContextMenu/ContextMenuOption.svelte.d.ts
@ -67,6 +67,8 @@ export interface ContextMenuOptionProps
   * @default null
   */
  ref?: null | HTMLLIElement;
+
+  [key: `data-${string}`]: any;
 }

 export default class ContextMenuOption extends SvelteComponentTyped<
--- a/types/CopyButton/CopyButton.svelte.d.ts
+++ b/types/CopyButton/CopyButton.svelte.d.ts
@ -32,6 +32,8 @@ export interface CopyButtonProps
   * @default async (text) => { try { await navigator.clipboard.writeText(text); } catch (e) { console.log(e); } }
   */
  copy?: (text: string) => void;
+
+  [key: `data-${string}`]: any;
 }

 export default class CopyButton extends SvelteComponentTyped<
--- a/types/DataTable/DataTable.svelte.d.ts
+++ b/types/DataTable/DataTable.svelte.d.ts
@ -176,6 +176,8 @@ export interface DataTableProps
   * @default 0
   */
  page?: number;
+
+  [key: `data-${string}`]: any;
 }

 export default class DataTable extends SvelteComponentTyped<
--- a/types/DataTable/DataTableSkeleton.svelte.d.ts
+++ b/types/DataTable/DataTableSkeleton.svelte.d.ts
@ -48,6 +48,8 @@ export interface DataTableSkeletonProps
   * @default true
   */
  showToolbar?: boolean;
+
+  [key: `data-${string}`]: any;
 }

 export default class DataTableSkeleton extends SvelteComponentTyped<
--- a/types/DataTable/Table.svelte.d.ts
+++ b/types/DataTable/Table.svelte.d.ts
@ -38,6 +38,8 @@ export interface TableProps
   * @default undefined
   */
  tableStyle?: string;
+
+  [key: `data-${string}`]: any;
 }

 export default class Table extends SvelteComponentTyped<
--- a/types/DataTable/TableBody.svelte.d.ts
+++ b/types/DataTable/TableBody.svelte.d.ts
@ -2,7 +2,9 @@
 import type { SvelteComponentTyped } from "svelte";

 export interface TableBodyProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["tbody"]> {}
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["tbody"]> {
+  [key: `data-${string}`]: any;
+}

 export default class TableBody extends SvelteComponentTyped<
  TableBodyProps,
--- a/types/DataTable/TableCell.svelte.d.ts
+++ b/types/DataTable/TableCell.svelte.d.ts
@ -2,7 +2,9 @@
 import type { SvelteComponentTyped } from "svelte";

 export interface TableCellProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["td"]> {}
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["td"]> {
+  [key: `data-${string}`]: any;
+}

 export default class TableCell extends SvelteComponentTyped<
  TableCellProps,
--- a/Show more
+++ b/Show more