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

.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.

.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"

.husky/.gitignore

@@ -1 +0,0 @@
-_

.husky/pre-commit

@@ -1,4 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-npx lint-staged

.prettierignore

@@ -1,5 +1,6 @@
 /lib
 /css
+/types
 .svelte-kit
 .routify
 dist

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/),
+### [0.76.1](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.76.0...v0.76.1) (2023-07-08)
-and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-<!-- ## 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
 

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
 
@@ -1583,11 +1584,12 @@ None.
 
 ### Slots
 
-| Slot name       | Default | Props | Fallback                    |
+| Slot name       | Default | Props | Fallback                     |
-| :-------------- | :------ | :---- | :-------------------------- |
+| :-------------- | :------ | :---- | :--------------------------- |
-| --              | Yes     | --    | --                          |
+| --              | Yes     | --    | --                           |
-| platform        | No      | --    | <code>{platformName}</code> |
+| company         | No      | --    | <code>{company}&nbsp;</code> |
-| skip-to-content | No      | --    | --                          |
+| platform        | No      | --    | <code>{platformName}</code>  |
+| skip-to-content | No      | --    | --                           |
 
 ### Events
 
@@ -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
 
@@ -2695,14 +2700,15 @@ None.
 
 ### Props
 
-| Prop name    | Required | Kind             | Reactive | Type                 | Default value                | Description                               |
+| 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            |
+| 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         |
+| 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 |
+| 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      |
+| 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           |
+| 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          |
+| 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 |
@@ -3272,13 +3279,15 @@ None.
 
 ### Events
 
-| Event name | Type      | Detail |
+| Event name | Type       | Detail              |
-| :--------- | :-------- | :----- |
+| :--------- | :--------- | :------------------ |
-| click      | forwarded | --     |
+| select     | dispatched | <code>string</code> |
-| mouseover  | forwarded | --     |
+| deselect   | dispatched | <code>string</code> |
-| mouseenter | forwarded | --     |
+| click      | forwarded  | --                  |
-| mouseleave | forwarded | --     |
+| mouseover  | forwarded  | --                  |
-| keydown    | forwarded | --     |
+| mouseenter | forwarded  | --                  |
+| mouseleave | forwarded  | --                  |
+| keydown    | forwarded  | --                  |
 
 ## `SideNav`
 
@@ -4662,7 +4671,6 @@ export interface TreeNode {
   text: any;
   icon?: typeof import("svelte").SvelteComponent;
   disabled?: boolean;
-  expanded?: boolean;
   children?: TreeNode[];
 }
 ```

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
+```

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

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

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": {

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} ",
+          "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" }

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 />

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);

docs/src/layouts/ComponentLayout.svelte

@@ -66,7 +66,7 @@
 </script>
 
 <Content data-components>
-  <Grid>
+  <Grid class="fix-overflow">
     <Row>
       <Column>
         <h1>{component}</h1>

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('/')}"

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
 

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="above">Above the fold content here</div>
-  <div slot="below" style="height: 10rem">Below 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="above">Above the fold content here</div>
-  <div slot="below" style="height: 10rem">Below 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="above">Above the fold content here</div>
-  <div slot="below" style="height: 10rem">Below 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>

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 />

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..." />

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.

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
 

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>
 

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.
 

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>

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 },

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"
+  version "5.7.2"
-  resolved "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.2.tgz#48d55db737c3287cd4835e17fa13feace1c41ef8"
-  integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
+  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:
+svelte@^3.58.0:
-  version "3.49.0"
+  version "3.58.0"
-  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.49.0.tgz#5baee3c672306de1070c3b7888fc2204e36a4029"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.58.0.tgz#d3e6f103efd6129e51c7d709225ad3b4c052b64e"
-  integrity sha512-+lmjic1pApJWDfPCpUUTc1m8azDqYCG1JN9YEngrx/hUyIcFJo6VZhj0A1Ai0wqoHcEIuQy+e9tk+4uDgdtsFA==
+  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"
+  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.0.0.tgz#d822234eeca882f991f0f908824ad2622ddbece4"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.1.3.tgz#97b9adb0728b42280aa3d814b6b999b2ff0318bf"
-  integrity sha512-tHdtEpQCMrc1YLrMaqXXcj6AxhYi/xgit6mZu1+EDWUn+qhUf8wMQoFIy9NXuq23zAwtcB0t/MjACGR18pcRbg==
+  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:
+universalify@^0.2.0:
-  version "0.1.2"
+  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.2.0.tgz#6451760566fa857534745ab1dde952d1b1761be0"
-  integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==
+  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"

examples/webpack/yarn.lock

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

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",
+    "standard-version": "^9.5.0",
-    "svelte": "^3.51.0",
+    "sveld": "^0.18.1",
-    "svelte-check": "^2.8.1",
+    "svelte": "^3.58.0",
+    "svelte-check": "^3.4.3",
     "typescript": "^4.7.4"
   },
-  "lint-staged": {
+  "standard-version": {
-    "*.{svelte,md,js,json}": [
+    "skip": {
-      "prettier --write"
+      "commit": true,
-    ],
+      "tag": true
-    "*.{svelte,js,md}": "prettier --write"
+    }
   },
   "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)"
   ]
 }

src/Checkbox/Checkbox.svelte

@@ -1,5 +1,6 @@
 <script>
   /**
+   * @restProps {div}
    * @event {boolean} check
    */
 

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

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}"

src/ContextMenu/ContextMenu.svelte

@@ -153,6 +153,7 @@
   }}"
 />
 
+<!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
 <ul
   bind:this="{ref}"
   role="menu"

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}"

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
+  const pageClickHandler = ({ target }) => {
-  on:click="{({ 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 &&
+    class="bx--dropdown 
-      'bx--dropdown--invalid'} {!invalid &&
+      {direction === 'top' && 'bx--list-box--up'} 
-      warn &&
+      {invalid && 'bx--dropdown--invalid'} 
-      'bx--dropdown--warning'} {open && 'bx--dropdown--open'}
+      {!invalid && warn && 'bx--dropdown--warning'} 
+      {open && 'bx--dropdown--open'}
       {size === 'sm' && 'bx--dropdown--sm'}
       {size === 'xl' && 'bx--dropdown--xl'}
       {inline && 'bx--dropdown--inline'}

src/FileUploader/Filename.svelte

@@ -1,4 +1,8 @@
 <script>
+  /**
+   * @restProps {div | button | svg}
+   */
+
   /**
    * Specify the file name status
    * @type {"uploading" | "edit" | "complete"}

src/FluidForm/FluidForm.svelte

@@ -1,4 +1,8 @@
 <script>
+  /**
+   * @restProps {form}
+   */
+
   import { setContext } from "svelte";
   import Form from "../Form/Form.svelte";
 

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}"

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) {

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

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}"
+        data-invalid="{error || undefined}"
-        aria-invalid="{invalid || undefined}"
+        aria-invalid="{error || undefined}"
         aria-label="{label ? undefined : ariaLabel}"
         disabled="{disabled}"
         id="{id}"
@@ -211,16 +211,17 @@
         on:blur
         on:paste
       />
-      {#if invalid}
-        <WarningFilled class="bx--number__invalid" />
-      {/if}
-      {#if !invalid && warn}
-        <WarningAltFilled
-          class="bx--number__invalid bx--number__invalid--warning"
-        />
-      {/if}
       {#if readonly}
         <EditOff class="bx--text-input__readonly-icon" />
+      {:else}
+        {#if invalid}
+          <WarningFilled class="bx--number__invalid" />
+        {/if}
+        {#if !invalid && warn}
+          <WarningAltFilled
+            class="bx--number__invalid bx--number__invalid--warning"
+          />
+        {/if}
       {/if}
       {#if !hideSteppers}
         <div class:bx--number__controls="{true}">

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"

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}"

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;
+  $: indeterminate = value === undefined && status === "active";
-  $: capped = value > max ? max : value < 0 ? 0 : value;
+  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}

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}"

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}"

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}"

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}"

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"

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}"

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,29 +162,36 @@
     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 invalid}
-        <WarningFilled class="bx--text-input__invalid-icon" />
-      {/if}
-      {#if !invalid && warn}
-        <WarningAltFilled
-          class="bx--text-input__invalid-icon
-            bx--text-input__invalid-icon--warning"
-        />
-      {/if}
       {#if readonly}
         <EditOff class="bx--text-input__readonly-icon" />
+      {:else}
+        {#if invalid}
+          <WarningFilled class="bx--text-input__invalid-icon" />
+        {/if}
+        {#if !invalid && warn}
+          <WarningAltFilled
+            class="bx--text-input__invalid-icon
+            bx--text-input__invalid-icon--warning"
+          />
+        {/if}
       {/if}
       <input
         bind:this="{ref}"
-        data-invalid="{invalid || undefined}"
+        data-invalid="{error || undefined}"
-        aria-invalid="{invalid || 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--invalid="{error}"
-        class:bx--text-input--warn="{warn}"
+        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}"

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;

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;
 

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 />

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"

src/TreeView/TreeViewNode.svelte

@@ -75,6 +75,7 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
 <li
   bind:this="{ref}"
   role="treeitem"

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"

src/UIShell/Header.svelte

@@ -94,8 +94,10 @@
     {...$$restProps}
     on:click
   >
-    {#if company}
+    {#if company || $$slots.company}
-      <span class:bx--header__name--prefix="{true}">{company}&nbsp;</span>
+      <span class:bx--header__name--prefix="{true}"
+        ><slot name="company">{company}&nbsp;</slot></span
+      >
     {/if}
     <slot name="platform">{platformName}</slot>
   </a>

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>

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>

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"

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">

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}"

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>
 

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 />
 

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

tests/ProgressBar.test.svelte

@@ -12,4 +12,5 @@
   labelText="Upload status"
   hideLabel
   helperText="40 MB of 100 MB"
+  status="finished"
 />

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) => {

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<

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<

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<

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<

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<

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<

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<

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<

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<

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,

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<

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

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<

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<

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<

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<

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<

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<

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<

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<

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<

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<

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<

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<

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,

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,