diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
deleted file mode 100644
index 46253e12..00000000
--- a/.github/FUNDING.yml
+++ /dev/null
@@ -1 +0,0 @@
-github: metonym
diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml
deleted file mode 100644
index 2c0a64f0..00000000
--- a/.github/ISSUE_TEMPLATE/config.yml
+++ /dev/null
@@ -1,8 +0,0 @@
-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.
diff --git a/.github/workflows/checks.yml b/.github/workflows/checks.yml
deleted file mode 100644
index 4bfc879a..00000000
--- a/.github/workflows/checks.yml
+++ /dev/null
@@ -1,60 +0,0 @@
-on:
- pull_request:
- paths-ignore:
- - "**.md"
- - "docs/**"
- - "examples/**"
- push:
- branches: [master]
- paths-ignore:
- - "**.md"
- - "docs/**"
- - "examples/**"
-
-permissions:
- contents: read
-
-jobs:
- lint:
- runs-on: macos-15-xlarge
- steps:
- - uses: actions/checkout@v5
- - uses: actions/setup-node@v5
- with:
- node-version: 22
- cache: "npm"
- - run: npm ci
- - run: npm run lint
-
- test:
- runs-on: macos-15-xlarge
- steps:
- - uses: actions/checkout@v5
- - uses: actions/setup-node@v5
- with:
- node-version: 22
- cache: "npm"
- - run: npm ci
- - run: npm run test
-
- types:
- runs-on: macos-15-xlarge
- steps:
- - uses: actions/checkout@v5
- - uses: actions/setup-node@v5
- with:
- node-version: 22
- cache: "npm"
- - run: npm ci
- - run: npm run test:src-types
- - run: npm run test:types
-
- deploy-docs:
- if: github.ref == 'refs/heads/master'
- needs: [lint, test, types]
- runs-on: macos-15-xlarge
- steps:
- - name: Trigger deploy
- env:
- deploy_url: ${{ secrets.RENDER_DEPLOY_HOOK_URL }}
- run: curl -f "$deploy_url"
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
deleted file mode 100644
index c98236e1..00000000
--- a/.github/workflows/release.yml
+++ /dev/null
@@ -1,40 +0,0 @@
-on:
- push:
- tags:
- - "v*"
-
-jobs:
- release:
- runs-on: macos-latest-xlarge
- permissions:
- contents: read
- id-token: write
- steps:
- - uses: actions/checkout@v5
- - uses: actions/setup-node@v5
- with:
- node-version: 22
- registry-url: "https://registry.npmjs.org"
-
- - name: Install dependencies
- run: npm install
-
- - name: Build docs
- run: npm run build:docs
-
- - name: Prune package.json
- run: npx culls --preserve=svelte
-
- - name: Publish package (stable)
- if: ${{ ! contains(github.ref, '-next') }}
- env:
- NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
- run: |
- npm publish --provenance --access public
-
- - name: Publish package (next)
- if: ${{ contains(github.ref, '-next') }}
- env:
- NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
- run: |
- npm publish --provenance --access public --tag next
diff --git a/.gitignore b/.gitignore
index 5247532c..2fa5e32b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,10 @@
-node_modules
+/coverage
+/lib
+/node_modules
+/css/*.css
.DS_Store
+yarn-debug.log*
+yarn-error.log*
+*.tgz
.vscode
-.idea
\ No newline at end of file
+.idea
diff --git a/.prettierignore b/.prettierignore
index ce337c7f..89e9c684 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,9 +1,9 @@
+/coverage
+/lib
/css
-/types
-.svelte-kit
-.routify
-dist
-client
-build
-*.svx
-COMPONENT_API.json
\ No newline at end of file
+/**/__sapper__
+/**/.routify
+/**/dist
+/**/client
+/**/build
+*.svx
\ No newline at end of file
diff --git a/.travis.yml b/.travis.yml
new file mode 100644
index 00000000..bad68449
--- /dev/null
+++ b/.travis.yml
@@ -0,0 +1,6 @@
+language: node_js
+node_js: 12
+cache: yarn
+script:
+ - yarn prepack
+ - yarn test
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6adc2484..7a6fe9cb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,1972 +1,13 @@
# Changelog
-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.
+All notable changes to this project will be documented in this file.
-### [0.89.7](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.89.6...v0.89.7) (2025-09-05)
+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).
-### Bug Fixes
+
-- **combo-box:** address accessibility issues ([#2186](https://github.com/carbon-design-system/carbon-components-svelte/issues/2186)) ([2fc884c](https://github.com/carbon-design-system/carbon-components-svelte/commit/2fc884cacabfffcf7779d6ef9ba01dece0bf5d86)), closes [#2172](https://github.com/carbon-design-system/carbon-components-svelte/issues/2172)
-- **data-table:** handle dynamic `headers` gracefully ([#2195](https://github.com/carbon-design-system/carbon-components-svelte/issues/2195)) ([6d0d3b1](https://github.com/carbon-design-system/carbon-components-svelte/commit/6d0d3b108bb4595d878fda20736c40b9656d14d7)), closes [#2193](https://github.com/carbon-design-system/carbon-components-svelte/issues/2193)
-- **overflow-menu:** avoid dynamic style injection for performance ([#2198](https://github.com/carbon-design-system/carbon-components-svelte/issues/2198)) ([14edf41](https://github.com/carbon-design-system/carbon-components-svelte/commit/14edf41e57fea1ddbb2cf24c37e79475849bdea1)), closes [#2197](https://github.com/carbon-design-system/carbon-components-svelte/issues/2197)
-- **pagination:** `on:change` dispatches with correct value ([#2194](https://github.com/carbon-design-system/carbon-components-svelte/issues/2194)) ([44a6cc0](https://github.com/carbon-design-system/carbon-components-svelte/commit/44a6cc0dfcbd3cdad1b442a760c9f604e58d56e6))
-
-### [0.89.6](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.89.5...v0.89.6) (2025-08-16)
-
-### Bug Fixes
-
-- **toggle:** avoid dispatching `toggle` event on state change ([#2184](https://github.com/carbon-design-system/carbon-components-svelte/issues/2184)) ([0df727b](https://github.com/carbon-design-system/carbon-components-svelte/commit/0df727b704d6cc577681dc682269a6e224ddbb6e))
-
-### [0.89.5](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.89.4...v0.89.5) (2025-08-05)
-
-### Bug Fixes
-
-- **checkbox:** prevent infinite effect loop when binding to same object ([#2178](https://github.com/carbon-design-system/carbon-components-svelte/issues/2178)) ([c7ad1eb](https://github.com/carbon-design-system/carbon-components-svelte/commit/c7ad1ebdd3764235f460abd95cdb7d1d389983d9)), closes [#2177](https://github.com/carbon-design-system/carbon-components-svelte/issues/2177)
-
-### [0.89.4](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.89.3...v0.89.4) (2025-06-10)
-
-### Bug Fixes
-
-- **multi-select:** forward `on:input` for filterable variant ([#2170](https://github.com/carbon-design-system/carbon-components-svelte/issues/2170)) ([aecc4e8](https://github.com/carbon-design-system/carbon-components-svelte/commit/aecc4e8eec6571515233ec76ca06218814a279a7))
-
-### [0.89.3](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.89.2...v0.89.3) (2025-06-07)
-
-### Bug Fixes
-
-- **combo-box:** "Escape" key clears input value ([#2169](https://github.com/carbon-design-system/carbon-components-svelte/issues/2169)) ([632320a](https://github.com/carbon-design-system/carbon-components-svelte/commit/632320ae3b8d9c602add0f4f7c708fc643cb7ffc)), closes [#2167](https://github.com/carbon-design-system/carbon-components-svelte/issues/2167)
-- **combo-box:** clear button supports "Space" key ([#2168](https://github.com/carbon-design-system/carbon-components-svelte/issues/2168)) ([95c06a8](https://github.com/carbon-design-system/carbon-components-svelte/commit/95c06a83b3afcbb76acfc0a5efe2f178d333ff19)), closes [#2166](https://github.com/carbon-design-system/carbon-components-svelte/issues/2166)
-
-### [0.89.2](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.89.1...v0.89.2) (2025-04-28)
-
-### Bug Fixes
-
-- **composed-modal:** ignore a11y warning in Svelte 5 ([#2159](https://github.com/carbon-design-system/carbon-components-svelte/issues/2159)) ([024d774](https://github.com/carbon-design-system/carbon-components-svelte/commit/024d77493c93e7823e4781a1a60aaf350d289d52))
-- **pagination:** use `toLocaleString` for default text formatting ([#2161](https://github.com/carbon-design-system/carbon-components-svelte/issues/2161)) ([cdf5659](https://github.com/carbon-design-system/carbon-components-svelte/commit/cdf5659fa0177da77dc8ea1ccffdec54b746954b))
-- **pagination:** window `totalItems` for performance ([#2160](https://github.com/carbon-design-system/carbon-components-svelte/issues/2160)) ([ed3928b](https://github.com/carbon-design-system/carbon-components-svelte/commit/ed3928bb01ecca2fa63f551938dbee1c1829a978)), closes [#2156](https://github.com/carbon-design-system/carbon-components-svelte/issues/2156)
-- **to-hierarchy:** revert to previous implementation ([96d37cc](https://github.com/carbon-design-system/carbon-components-svelte/commit/96d37cc490f28830264c35c84447ee4526256314))
-
-### [0.89.1](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.89.0...v0.89.1) (2025-04-21)
-
-### Bug Fixes
-
-- **toolbar-search:** re-filter rows if `DataTable` rows change ([#2154](https://github.com/carbon-design-system/carbon-components-svelte/issues/2154)) ([f09c2e2](https://github.com/carbon-design-system/carbon-components-svelte/commit/f09c2e2c311c15f633db8dc45930d8e58a4b362d)), closes [#2143](https://github.com/carbon-design-system/carbon-components-svelte/issues/2143)
-
-### [0.89.0](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.88.4...v0.89.0) (2025-04-18)
-
-### Features
-
-- **combo-box:** add `hideLabel` prop ([#2153](https://github.com/carbon-design-system/carbon-components-svelte/issues/2153)) ([436dea4](https://github.com/carbon-design-system/carbon-components-svelte/commit/436dea47e8da35753a257c9b2bd6f33338e95ba5))
-
-### Bug Fixes
-
-- **select:** falsy item `text` should fallback to `value` ([#2152](https://github.com/carbon-design-system/carbon-components-svelte/issues/2152)) ([61ea8dd](https://github.com/carbon-design-system/carbon-components-svelte/commit/61ea8dd82c2f9863dfe5f8a882e73624b994d9e5))
-
-### [0.88.4](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.88.3...v0.88.4) (2025-03-24)
-
-### Bug Fixes
-
-- **list-box-selection:** fix `aria-label` for clear button ([#2134](https://github.com/carbon-design-system/carbon-components-svelte/issues/2134)) ([dd1338f](https://github.com/carbon-design-system/carbon-components-svelte/commit/dd1338ffc47926a13e231d4a0f724e923f2219e2))
-- **list-box:** correct button/description translations based on selection count ([#2139](https://github.com/carbon-design-system/carbon-components-svelte/issues/2139)) ([1a5f2d8](https://github.com/carbon-design-system/carbon-components-svelte/commit/1a5f2d8e67734bfda20272ae6a77d13b3837416d))
-- **list-box:** set `aria-disabled` if `disabled` ([#2125](https://github.com/carbon-design-system/carbon-components-svelte/issues/2125)) ([#2138](https://github.com/carbon-design-system/carbon-components-svelte/issues/2138)) ([9b61af0](https://github.com/carbon-design-system/carbon-components-svelte/commit/9b61af0306b422acf1e7cdde278e517740f667c5)), closes [#2130](https://github.com/carbon-design-system/carbon-components-svelte/issues/2130)
-- **radio-button:** forward `focus`, `blur` events ([#2135](https://github.com/carbon-design-system/carbon-components-svelte/issues/2135)) ([1462e30](https://github.com/carbon-design-system/carbon-components-svelte/commit/1462e300d69f0cd7ee5476dfe3a7ea892ac8f4ad)), closes [#2131](https://github.com/carbon-design-system/carbon-components-svelte/issues/2131)
-- **radio-tile:** allow standalone `RadioTile` usage ([#2136](https://github.com/carbon-design-system/carbon-components-svelte/issues/2136)) ([ca9beeb](https://github.com/carbon-design-system/carbon-components-svelte/commit/ca9beebaeac7eaed8079c010a86a78926b00147f))
-- **text-area:** allow visually hidden label ([#2137](https://github.com/carbon-design-system/carbon-components-svelte/issues/2137)) ([43511e0](https://github.com/carbon-design-system/carbon-components-svelte/commit/43511e09ecf312c1b8e9339856b9d7d0785036de))
-
-### [0.88.3](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.88.2...v0.88.3) (2025-03-19)
-
-### Bug Fixes
-
-- Revert **list-box:** use `aria-disabled` instead of invalid `disabled` attribute ([#2125](https://github.com/carbon-design-system/carbon-components-svelte/issues/2125)) ([e1b3ef2](https://github.com/carbon-design-system/carbon-components-svelte/commit/e1b3ef22c9ee09474bacadbb0b22b41326566bab))
-
-### [0.88.2](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.88.1...v0.88.2) (2025-03-19)
-
-### Bug Fixes
-
-- **combo-box:** fix typing when refocusing input ([9e3d830](https://github.com/carbon-design-system/carbon-components-svelte/commit/9e3d83031e69889472c4e84be256ea242854cf81))
-- **list-box:** use `aria-disabled` instead of invalid `disabled` attribute ([#2125](https://github.com/carbon-design-system/carbon-components-svelte/issues/2125)) ([e1b3ef2](https://github.com/carbon-design-system/carbon-components-svelte/commit/e1b3ef22c9ee09474bacadbb0b22b41326566bab))
-- **multi-select:** fix keyboard navigation for disabled items ([#2129](https://github.com/carbon-design-system/carbon-components-svelte/issues/2129)) ([e7939ff](https://github.com/carbon-design-system/carbon-components-svelte/commit/e7939ff0e21c3430c9eea74c503b7c35f6823445)), closes [#2128](https://github.com/carbon-design-system/carbon-components-svelte/issues/2128)
-- **notification:** remove invalid `kind` prop from markup ([#2126](https://github.com/carbon-design-system/carbon-components-svelte/issues/2126)) ([e85d7ef](https://github.com/carbon-design-system/carbon-components-svelte/commit/e85d7efc5ed15f5236d074fd7981ae527d9e5ab5))
-- **theme:** remove invalid `themes` prop from markup ([#2127](https://github.com/carbon-design-system/carbon-components-svelte/issues/2127)) ([5987b61](https://github.com/carbon-design-system/carbon-components-svelte/commit/5987b61a5522fff09468bddd586eed4a537edcc8))
-
-### [0.88.1](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.88.0...v0.88.1) (2025-03-12)
-
-### Bug Fixes
-
-- **select:** falsy item `text` should not override `value` ([#2118](https://github.com/carbon-design-system/carbon-components-svelte/issues/2118)) ([663b79a](https://github.com/carbon-design-system/carbon-components-svelte/commit/663b79ad054d14a91a8bf700feb62dcf50976eb8)), closes [#2117](https://github.com/carbon-design-system/carbon-components-svelte/issues/2117)
-- **ui-shell:** `HeaderAction` uses dark color scheme ([#2119](https://github.com/carbon-design-system/carbon-components-svelte/issues/2119)) ([7ff93ad](https://github.com/carbon-design-system/carbon-components-svelte/commit/7ff93ad2dac489859d5b4a83c1e359a6507718b4))
-
-### [0.88.0](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.87.7...v0.88.0) (2025-03-09)
-
-### Features
-
-- **data-table:** allow custom `inputName` for radio/checkbox ([#2087](https://github.com/carbon-design-system/carbon-components-svelte/issues/2087)) ([7481b9a](https://github.com/carbon-design-system/carbon-components-svelte/commit/7481b9a995dfbc8c2fbaeaae143c8372cf5fce66)), closes [#2085](https://github.com/carbon-design-system/carbon-components-svelte/issues/2085)
-- **ui-shell:** `HeaderAction` supports tooltip ([#2111](https://github.com/carbon-design-system/carbon-components-svelte/issues/2111)) ([24b9cbc](https://github.com/carbon-design-system/carbon-components-svelte/commit/24b9cbc9c343537e5e74799ef8289bd29396cf04)), closes [#2110](https://github.com/carbon-design-system/carbon-components-svelte/issues/2110)
-
-### [0.87.7](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.87.6...v0.87.7) (2025-03-07)
-
-### Bug Fixes
-
-- **select:** avoid infinite update loop in Svelte 5 ([#2108](https://github.com/carbon-design-system/carbon-components-svelte/issues/2108)) ([9b4bfa6](https://github.com/carbon-design-system/carbon-components-svelte/commit/9b4bfa6f86e23155516db156cbe1c980f3c699e8)), closes [#2107](https://github.com/carbon-design-system/carbon-components-svelte/issues/2107)
-
-### [0.87.6](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.87.5...v0.87.6) (2025-02-24)
-
-### Bug Fixes
-
-- **overflow-menu:** add `aria-controls` to trigger button ([#2100](https://github.com/carbon-design-system/carbon-components-svelte/issues/2100)) ([b7297d4](https://github.com/carbon-design-system/carbon-components-svelte/commit/b7297d452a7813c02f3c89280787292b1c46acec))
-
-### [0.87.5](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.87.4...v0.87.5) (2025-02-04)
-
-### Bug Fixes
-
-- **tag:** allow `on:close` to work with Svelte 5 ([#2097](https://github.com/carbon-design-system/carbon-components-svelte/issues/2097)) ([6e65ef3](https://github.com/carbon-design-system/carbon-components-svelte/commit/6e65ef39e7ff9a3c0ee25b7945a62584e9b7441e)), closes [#2096](https://github.com/carbon-design-system/carbon-components-svelte/issues/2096)
-
-### [0.87.4](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.87.3...v0.87.4) (2025-02-02)
-
-### Bug Fixes
-
-- **types:** loosen `icon` prop type to `any` ([#2095](https://github.com/carbon-design-system/carbon-components-svelte/issues/2095)) ([6bf72d4](https://github.com/carbon-design-system/carbon-components-svelte/commit/6bf72d46024ad2ce03651f28fc1a2a95ec03385d))
-
-### [0.87.3](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.87.2...v0.87.3) (2025-01-30)
-
-### Bug Fixes
-
-- **overflow-menu:** support Svelte 5 ([88f4304](https://github.com/carbon-design-system/carbon-components-svelte/commit/88f4304d5a7c9b38b3cabda677233bef48fb9e3a)), closes [#2092](https://github.com/carbon-design-system/carbon-components-svelte/issues/2092)
-
-### [0.87.2](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.87.1...v0.87.2) (2025-01-22)
-
-### Bug Fixes
-
-- **text-area:** counter supports null `value` ([#2089](https://github.com/carbon-design-system/carbon-components-svelte/issues/2089)) ([76eec84](https://github.com/carbon-design-system/carbon-components-svelte/commit/76eec84c5458d07d61d057d9ff06938e244dbb2c))
-
-### [0.87.1](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.87.0...v0.87.1) (2025-01-19)
-
-### Bug Fixes
-
-- **data-table:** improve `expandable` accessibility ([#2086](https://github.com/carbon-design-system/carbon-components-svelte/issues/2086)) ([e874ac1](https://github.com/carbon-design-system/carbon-components-svelte/commit/e874ac19d778a00c0bba9be65d10be7e6c9104dd))
-- **data-table:** prefix internal ID for radio button, checkbox ([#2082](https://github.com/carbon-design-system/carbon-components-svelte/issues/2082)) ([dd6cbac](https://github.com/carbon-design-system/carbon-components-svelte/commit/dd6cbac3ee1728dbcba5cd1d8faa43941e2a198e)), closes [#2081](https://github.com/carbon-design-system/carbon-components-svelte/issues/2081)
-- **dropdown:** avoid manual field `blur` ([c194c80](https://github.com/carbon-design-system/carbon-components-svelte/commit/c194c80e29ab36935af71adb9e166e9a16b70910)), closes [#2083](https://github.com/carbon-design-system/carbon-components-svelte/issues/2083)
-- **multi-select:** avoid manual field `blur` ([fb6719b](https://github.com/carbon-design-system/carbon-components-svelte/commit/fb6719b1aee35aa45004d82e3b923b4ad45dff5d)), closes [#2083](https://github.com/carbon-design-system/carbon-components-svelte/issues/2083)
-
-### [0.87.0](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.86.2...v0.87.0) (2024-12-09)
-
-### Features
-
-- add `toHierarchy` utility to normalize flat data into `nodes` for `TreeView`, `RecursiveList` ([#2072](https://github.com/carbon-design-system/carbon-components-svelte/issues/2072)) ([48afd18](https://github.com/carbon-design-system/carbon-components-svelte/commit/48afd18e5e01c2839024b8ddb31038267bcedeb8))
-
-### Bug Fixes
-
-- **tooltip-icon:** `button` should have explicit `type` ([#2071](https://github.com/carbon-design-system/carbon-components-svelte/issues/2071)) ([18c964e](https://github.com/carbon-design-system/carbon-components-svelte/commit/18c964e579a3762b8022751bf0ed5313b78b22ba))
-
-### [0.86.2](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.86.1...v0.86.2) (2024-11-30)
-
-### Bug Fixes
-
-- **multi-select:** fix sorting behavior ([c3a390f](https://github.com/carbon-design-system/carbon-components-svelte/commit/c3a390f3fef072c6b736e33a85a2ae772df12e52)), closes [#2066](https://github.com/carbon-design-system/carbon-components-svelte/issues/2066)
-
-## [0.86.1](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.86.0...v0.86.1) (2024-11-22)
-
-### Bug Fixes
-
-- **tree-view:** do not flatten original `nodes` ([#2056](https://github.com/carbon-design-system/carbon-components-svelte/issues/2056)) ([e488c88](https://github.com/carbon-design-system/carbon-components-svelte/commit/e488c8837146432330ebbf2f9182a8a69eab6b70))
-
-## [0.86.0](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.85.4...v0.86.0) (2024-11-20)
-
-### ⚠ BREAKING CHANGES
-
-- **package:** set `type="module"` in `package.json`
-- **package:** remove bundled ESM/UMD support
-- **treeview:** rename `children` prop to `nodes` for Svelte 5 compatibility
-- **recursive-list:** rename `children` prop to `nodes` for Svelte 5 compatibility
-- **types:** use type alias instead of interface for exported component props ([6fbd8ae](https://github.com/carbon-design-system/carbon-components-svelte/commit/6fbd8ae6a90eabde74fb5481c980716eba477c31))
-
-### Features
-
-- **data-table:** support TypeScript generics ([#1954](https://github.com/carbon-design-system/carbon-components-svelte/issues/1954)) ([dd43224](https://github.com/carbon-design-system/carbon-components-svelte/commit/dd43224119905c3a26a2369f836338c18fcbafba))
-
-### Bug Fixes
-
-- **data-table:** (Svelte 5 compatibility) handle `ToolbarSearch` filtering in `DataTable` ([#2037](https://github.com/carbon-design-system/carbon-components-svelte/issues/2037)) ([3192824](https://github.com/carbon-design-system/carbon-components-svelte/commit/3192824322faef7c0c012eb246bb6ef9da7f78dc))
-- **multi-select:** (Svelte 5 compatibility) avoid cyclic dependency ([#2034](https://github.com/carbon-design-system/carbon-components-svelte/issues/2034)) ([1acd713](https://github.com/carbon-design-system/carbon-components-svelte/commit/1acd7135372eeabf002dacc80e39162989427140))
-- **toolbar-menu:** (Svelte 5 compatibility) remove redundant menu offset ([#2047](https://github.com/carbon-design-system/carbon-components-svelte/issues/2047)) ([7e17394](https://github.com/carbon-design-system/carbon-components-svelte/commit/7e173943ac783756521c4957a1c24b5288ab45b7)), closes [#2040](https://github.com/carbon-design-system/carbon-components-svelte/issues/2040)
-- **checkbox:** (Svelte 5 compatibility) bind `indeterminate` ([#2044](https://github.com/carbon-design-system/carbon-components-svelte/issues/2044)) ([9d5e7e3](https://github.com/carbon-design-system/carbon-components-svelte/commit/9d5e7e31efb2d439b18ba0bf350b712377e160a7)), closes [#2039](https://github.com/carbon-design-system/carbon-components-svelte/issues/2039)
-
-### [0.85.4](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.85.3...v0.85.4) (2024-11-09)
-
-### Bug Fixes
-
-- **combo-box:** fix types for `on:clear` ([#2020](https://github.com/carbon-design-system/carbon-components-svelte/issues/2020)) ([0831e87](https://github.com/carbon-design-system/carbon-components-svelte/commit/0831e871358fe012e9907699f1423b7e36dba0da))
-- **data-table:** fix `DataTableValue` type reference in `DataTable` ([#2023](https://github.com/carbon-design-system/carbon-components-svelte/issues/2023)) ([44daa77](https://github.com/carbon-design-system/carbon-components-svelte/commit/44daa775d5e4dc9aef66eae0e661f14fb5b41354))
-- **theme:** `Theme` correctly imports `toggle`, `select` props ([#2019](https://github.com/carbon-design-system/carbon-components-svelte/issues/2019)) ([49b5def](https://github.com/carbon-design-system/carbon-components-svelte/commit/49b5def8153f5eec523d56e2a2c6d4cc3a36dcb5)), closes [#2018](https://github.com/carbon-design-system/carbon-components-svelte/issues/2018)
-- **toolbar-search:** fix types for `on:clear` ([#2022](https://github.com/carbon-design-system/carbon-components-svelte/issues/2022)) ([58e6021](https://github.com/carbon-design-system/carbon-components-svelte/commit/58e6021b08f311a5bb3cc7c7f181443cc633c8e4))
-- **types:** delete extraneous `icons/Search.svelte.d.ts` ([#2025](https://github.com/carbon-design-system/carbon-components-svelte/issues/2025)) ([951d686](https://github.com/carbon-design-system/carbon-components-svelte/commit/951d6860423fc05df9f46e29fb19916b89c48466))
-- **types:** fix types for `on:paste` event ([3167e44](https://github.com/carbon-design-system/carbon-components-svelte/commit/3167e449fdaf19abb4cdf1e2bf3f5bec24865f89))
-
-### [0.85.3](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.85.2...v0.85.3) (2024-10-25)
-
-### Bug Fixes
-
-- address Svelte 5 warnings ([#2011](https://github.com/carbon-design-system/carbon-components-svelte/issues/2011)) ([43fccac](https://github.com/carbon-design-system/carbon-components-svelte/commit/43fccac1c6273d9aa83b8c26a5f8cecec667db59))
-
-### [0.85.2](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.85.1...v0.85.2) (2024-08-14)
-
-### Bug Fixes
-
-- **header-action:** allow vertical scroll when expanded ([#1992](https://github.com/carbon-design-system/carbon-components-svelte/issues/1992)) ([61eceb0](https://github.com/carbon-design-system/carbon-components-svelte/commit/61eceb0caac20d92ce58c23d26908530a7e32dbe))
-
-### [0.85.1](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.85.0...v0.85.1) (2024-08-09)
-
-### Bug Fixes
-
-- **multi-select:** fix `filterItem` return type ([#1972](https://github.com/carbon-design-system/carbon-components-svelte/issues/1972)) ([6140c3c](https://github.com/carbon-design-system/carbon-components-svelte/commit/6140c3c5a91a879889be33080e1aa8b9183982d4))
-- **search:** collapse expandable search if value is falsy ([#1987](https://github.com/carbon-design-system/carbon-components-svelte/issues/1987)) ([216d5a3](https://github.com/carbon-design-system/carbon-components-svelte/commit/216d5a39b14ddad600159c1159b6a2d38095cfaf)), closes [#1981](https://github.com/carbon-design-system/carbon-components-svelte/issues/1981)
-- **text-area:** type `value` prop as nullable ([#1933](https://github.com/carbon-design-system/carbon-components-svelte/issues/1933)) ([47860ce](https://github.com/carbon-design-system/carbon-components-svelte/commit/47860ce1d7cc5f3b0363ab619dcfd74b3276eda7))
-
-## [0.85.0](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.84.1...v0.85.0) (2024-03-23)
-
-### ⚠ BREAKING CHANGES
-
-- use `:global()` for custom UI Shell styles ([#1940](https://github.com/carbon-design-system/carbon-components-svelte/issues/1940)) ([d5a1148](https://github.com/carbon-design-system/carbon-components-svelte/commit/d5a11489f8ab9dc05751aa20c420ea4dc6249567))
-
-### [0.84.1](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.84.0...v0.84.1) (2024-03-16)
-
-### Bug Fixes
-
-- **checkbox:** forward `on:focus`, `on:blur` to `Checkbox` and `InlineCheckbox` ([#1937](https://github.com/carbon-design-system/carbon-components-svelte/issues/1937)) ([6364b23](https://github.com/carbon-design-system/carbon-components-svelte/commit/6364b23030cc0761aa6a0561a1673e89dde47868))
-- **data-table:** loosen `sort` return type to be a `number` ([#1935](https://github.com/carbon-design-system/carbon-components-svelte/issues/1935)) ([9132bf8](https://github.com/carbon-design-system/carbon-components-svelte/commit/9132bf8e5a2d6ba70d17a0b4fcdea29d0785492c)), closes [#1934](https://github.com/carbon-design-system/carbon-components-svelte/issues/1934)
-
-### [0.84.0](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.83.0...v0.84.0) (2024-03-08)
-
-### Features
-
-- **ui-shell:** support button tooltip in `HeaderGlobalAction` ([#1894](https://github.com/carbon-design-system/carbon-components-svelte/issues/1894)) ([d8bc651](https://github.com/carbon-design-system/carbon-components-svelte/commit/d8bc65163eabacfee348d6248e90f683ac488aef)), closes [#1893](https://github.com/carbon-design-system/carbon-components-svelte/issues/1893)
-
-### Bug Fixes
-
-- **exports:** resolve imports with explicit \*.js extension ([#1927](https://github.com/carbon-design-system/carbon-components-svelte/issues/1927)) ([0405ede](https://github.com/carbon-design-system/carbon-components-svelte/commit/0405edee7d1696a157acab941488f8d3a750187f)), closes [#1925](https://github.com/carbon-design-system/carbon-components-svelte/issues/1925)
-
-## [0.83.0](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.82.11...v0.83.0) (2024-03-07)
-
-### ⚠ BREAKING CHANGES
-
-- **link:** do not render `p` for disabled link
-
-### Bug Fixes
-
-- avoid using reserved `$` for Svelte 5 compat ([a0d5028](https://github.com/carbon-design-system/carbon-components-svelte/commit/a0d5028540e1bcbb3b37bf488c11ea94f97b5fa7))
-- **link:** do not render `p` for disabled link ([8bffc17](https://github.com/carbon-design-system/carbon-components-svelte/commit/8bffc17d650144ed0d5b778766f79c33334f0275)), closes [#1924](https://github.com/carbon-design-system/carbon-components-svelte/issues/1924)
-- **search:** hoist ignore `a11y autofocus` comment ([6152b78](https://github.com/carbon-design-system/carbon-components-svelte/commit/6152b784c1e6b19ff242524e6b0c8c98b0107788))
-
-### [0.82.11](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.82.10...v0.82.11) (2024-02-26)
-
-### Bug Fixes
-
-- **code-snippet:** `showMoreLess={false}` should hide button ([4085536](https://github.com/carbon-design-system/carbon-components-svelte/commit/40855361891c2388c2b775803bcac937fbd6c1d6)), closes [#1536](https://github.com/carbon-design-system/carbon-components-svelte/issues/1536)
-- **image-loader:** updated `src` should update the image ([0f318aa](https://github.com/carbon-design-system/carbon-components-svelte/commit/0f318aac7732c2b94ec0729d54416611fbd0d493)), closes [#1677](https://github.com/carbon-design-system/carbon-components-svelte/issues/1677)
-- **overflow-menu:** use `offsetWidth`, `offsetHeight` to compute menu dimensions ([#1913](https://github.com/carbon-design-system/carbon-components-svelte/issues/1913)) ([2404244](https://github.com/carbon-design-system/carbon-components-svelte/commit/24042442213ca9daa0cf663aabf37b3544e9c364))
-- **toast-notification:** fire `on:clear` from timeout correctly ([9aabe3c](https://github.com/carbon-design-system/carbon-components-svelte/commit/9aabe3cbbb05712b71f5cad7c571b170c1f3a439)), closes [#1914](https://github.com/carbon-design-system/carbon-components-svelte/issues/1914)
-
-### [0.82.10](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.82.9...v0.82.10) (2024-02-12)
-
-### Bug Fixes
-
-- **slider:** dispatch `on:input` event ([#1906](https://github.com/carbon-design-system/carbon-components-svelte/issues/1906)) ([90dbd15](https://github.com/carbon-design-system/carbon-components-svelte/commit/90dbd1562b04df3cf4de28874b6e790ddca1db81)), closes [#1643](https://github.com/carbon-design-system/carbon-components-svelte/issues/1643)
-
-### [0.82.9](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.82.8...v0.82.9) (2024-02-07)
-
-### Bug Fixes
-
-- **context-menu:** prevent `on:contextmenu` default behavior only when opening menu ([#1911](https://github.com/carbon-design-system/carbon-components-svelte/issues/1911)) ([4ad522c](https://github.com/carbon-design-system/carbon-components-svelte/commit/4ad522c197d4a389a6187a499e9e54d5d8b3994a)), closes [#1909](https://github.com/carbon-design-system/carbon-components-svelte/issues/1909)
-- **types:** improve `e.detail` type for dispatched events ([#1907](https://github.com/carbon-design-system/carbon-components-svelte/issues/1907)) ([6590457](https://github.com/carbon-design-system/carbon-components-svelte/commit/65904575743ba06344fb75e14685e42494c13cde))
-
-### [0.82.8](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.82.7...v0.82.8) (2024-01-10)
-
-### Bug Fixes
-
-- **button:** forward `on:focus` event ([#1878](https://github.com/carbon-design-system/carbon-components-svelte/issues/1878)) ([5901872](https://github.com/carbon-design-system/carbon-components-svelte/commit/59018728df08db18ba85609e6db1c6dd8701d8bb)), closes [#1830](https://github.com/carbon-design-system/carbon-components-svelte/issues/1830)
-
-### [0.82.7](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.82.6...v0.82.7) (2023-12-17)
-
-### Bug Fixes
-
-- **radio-button:** allow `value` type to be a number ([#1868](https://github.com/carbon-design-system/carbon-components-svelte/issues/1868)) ([4792257](https://github.com/carbon-design-system/carbon-components-svelte/commit/479225711a1e304df74f0cfc585e32b5454afd66))
-
-### [0.82.6](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.82.5...v0.82.6) (2023-12-17)
-
-### Bug Fixes
-
-- **package:** include types in exports map ([#1865](https://github.com/carbon-design-system/carbon-components-svelte/issues/1865)) ([053beee](https://github.com/carbon-design-system/carbon-components-svelte/commit/053beeef7cbb1031f09798ffc360f8c87d17e3e1)), closes [#1863](https://github.com/carbon-design-system/carbon-components-svelte/issues/1863)
-
-### [0.82.5](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.82.4...v0.82.5) (2023-12-16)
-
-### Bug Fixes
-
-- **header-search:** blur input when `active` is false ([#1857](https://github.com/carbon-design-system/carbon-components-svelte/issues/1857)) ([6c9cf9e](https://github.com/carbon-design-system/carbon-components-svelte/commit/6c9cf9e043b3c963a257a28fa8dd29c8acd4b2ce))
-- **package.json:** add `exports` field to package.json to address Vite development warnings ([#1864](https://github.com/carbon-design-system/carbon-components-svelte/issues/1864)) ([7bef3fa](https://github.com/carbon-design-system/carbon-components-svelte/commit/7bef3fae6250607337306e95440b8a472638476f))
-
-### [0.82.4](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.82.3...v0.82.4) (2023-11-21)
-
-### Bug Fixes
-
-- **header-search:** blur input when deactivating ([#1855](https://github.com/carbon-design-system/carbon-components-svelte/issues/1855)) ([192f6a7](https://github.com/carbon-design-system/carbon-components-svelte/commit/192f6a775c2a7da25e7fc4893efdc5a80b83928c))
-
-### [0.82.3](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.82.2...v0.82.3) (2023-11-21)
-
-### Bug Fixes
-
-- **header-search:** "Escape" should close empty search bar ([#1853](https://github.com/carbon-design-system/carbon-components-svelte/issues/1853)) ([e667352](https://github.com/carbon-design-system/carbon-components-svelte/commit/e667352329651c25dc2d283eaa6cc8ca872040f6))
-
-### [0.82.2](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.82.1...v0.82.2) (2023-11-20)
-
-### Bug Fixes
-
-- **header-search:** "Escape" should clear search query ([#1851](https://github.com/carbon-design-system/carbon-components-svelte/issues/1851)) ([6da4572](https://github.com/carbon-design-system/carbon-components-svelte/commit/6da4572c2672e02a6463ee8374fd341868512034))
-- **header-search:** vertically center button icons ([#1850](https://github.com/carbon-design-system/carbon-components-svelte/issues/1850)) ([d68dc18](https://github.com/carbon-design-system/carbon-components-svelte/commit/d68dc182668dc0b56481d4646d672591cd7fc3e3))
-
-### [0.82.1](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.82.0...v0.82.1) (2023-11-18)
-
-### Bug Fixes
-
-- **pagination-nav:** set `button type="button"` to prevent form submission ([#1846](https://github.com/carbon-design-system/carbon-components-svelte/issues/1846)) ([bed073c](https://github.com/carbon-design-system/carbon-components-svelte/commit/bed073c2f707392d3fe7d75fbf4550e723b93605))
-
-### [0.82.0](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.81.3...v0.82.0) (2023-11-13)
-
-### Features
-
-- **tree-view:** add `showNode` accessor ([#1844](https://github.com/carbon-design-system/carbon-components-svelte/issues/1844)) ([1ad4e3d](https://github.com/carbon-design-system/carbon-components-svelte/commit/1ad4e3d3856e07fb1808f34b8c48dfc6a8a5e7d8)), closes [#1377](https://github.com/carbon-design-system/carbon-components-svelte/issues/1377)
-- **tree-view:** make `node` slottable ([#1843](https://github.com/carbon-design-system/carbon-components-svelte/issues/1843)) ([6a55fef](https://github.com/carbon-design-system/carbon-components-svelte/commit/6a55fef62e095114a1782d1079501e9e940cca94)), closes [#1660](https://github.com/carbon-design-system/carbon-components-svelte/issues/1660)
-
-### [0.81.3](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.81.2...v0.81.3) (2023-11-08)
-
-### Bug Fixes
-
-- **select-item:** export `class` and `style` props ([#1840](https://github.com/carbon-design-system/carbon-components-svelte/issues/1840)) ([a9460e9](https://github.com/carbon-design-system/carbon-components-svelte/commit/a9460e944de9ae967664a75df842f4bdc909067f)), closes [#1839](https://github.com/carbon-design-system/carbon-components-svelte/issues/1839)
-
-### [0.81.2](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.81.1...v0.81.2) (2023-10-27)
-
-### Bug Fixes
-
-- **multi-select:** render checkboxes for form data ([#1835](https://github.com/carbon-design-system/carbon-components-svelte/issues/1835)) ([7ba52df](https://github.com/carbon-design-system/carbon-components-svelte/commit/7ba52df3a1ee89b06377a0b4888cce27cc89196f)), closes [#1742](https://github.com/carbon-design-system/carbon-components-svelte/issues/1742)
-
-### [0.81.1](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.81.0...v0.81.1) (2023-10-23)
-
-### Bug Fixes
-
-- **multi-select:** reset `selectedIds` when clearing selection ([#1832](https://github.com/carbon-design-system/carbon-components-svelte/issues/1832)) ([e3ab471](https://github.com/carbon-design-system/carbon-components-svelte/commit/e3ab471018b9ac94ff9de2284284dc61ba69c881)), closes [#1831](https://github.com/carbon-design-system/carbon-components-svelte/issues/1831)
-
-### [0.81.0](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.80.0...v0.81.0) (2023-10-13)
-
-### Features
-
-- **data-table:** pass `row` to `display` function ([#1810](https://github.com/carbon-design-system/carbon-components-svelte/issues/1810)) ([9456eaa](https://github.com/carbon-design-system/carbon-components-svelte/commit/9456eaab3ce5259d8f6dcaa7b3db9058d3555aa6))
-- **deps-dev:** upgrade `carbon-components` to 10.58 ([#1828](https://github.com/carbon-design-system/carbon-components-svelte/issues/1828)) ([519bd86](https://github.com/carbon-design-system/carbon-components-svelte/commit/519bd8616a4fe16af4befb6a1159e62f42d9651c))
-
-### Bug Fixes
-
-- **file-uploader-button:** clear value by setting to `""` instead of `null` ([#1812](https://github.com/carbon-design-system/carbon-components-svelte/issues/1812)) ([108eb52](https://github.com/carbon-design-system/carbon-components-svelte/commit/108eb5286c46bd17a54ccbda31ee95f16a16763e))
-- **radio-button-group:** add `name` and `required` props ([#1037](https://github.com/carbon-design-system/carbon-components-svelte/issues/1037)) ([24e2a88](https://github.com/carbon-design-system/carbon-components-svelte/commit/24e2a8874f5d0c39f88761c3f118ba71aab27c1d)), closes [#1036](https://github.com/carbon-design-system/carbon-components-svelte/issues/1036)
-- **radio-button-group:** strongly type dispatched change/select events ([#1819](https://github.com/carbon-design-system/carbon-components-svelte/issues/1819)) ([06d81dd](https://github.com/carbon-design-system/carbon-components-svelte/commit/06d81ddbff8a6170d34ca1e94a41c16d318ec7ca))
-- **tile-group:** add `name` and `required` props ([#1818](https://github.com/carbon-design-system/carbon-components-svelte/issues/1818)) ([836b360](https://github.com/carbon-design-system/carbon-components-svelte/commit/836b360b9b7402cb3cd44489fd5f14b8c901f9f2))
-
-### [0.80.0](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.79.0...v0.80.0) (2023-08-26)
-
-### Features
-
-- **ui-shell:** forward `click` event to `HeaderActionLink` ([#1797](https://github.com/carbon-design-system/carbon-components-svelte/issues/1797)) ([e5675eb](https://github.com/carbon-design-system/carbon-components-svelte/commit/e5675eb203db51de736b24f41694f5b020f9aafc)), closes [#1796](https://github.com/carbon-design-system/carbon-components-svelte/issues/1796)
-
-### Bug Fixes
-
-- **skeleton-text:** fix reactivity in `paragraph` variant ([#1794](https://github.com/carbon-design-system/carbon-components-svelte/issues/1794)) ([bc97ce5](https://github.com/carbon-design-system/carbon-components-svelte/commit/bc97ce5e1b69669d17f3ad13aaeb774b05c09c80)), closes [#1793](https://github.com/carbon-design-system/carbon-components-svelte/issues/1793)
-
-## [0.79.0](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.78.0...v0.79.0) (2023-07-24)
-
-### ⚠ BREAKING CHANGES
-
-- **loading:** remove `id` prop from `Loading` (#1783)
-
-### Features
-
-- **file-uploader-button:** support `danger-tertiary`, `danger-ghost` button variants ([#1784](https://github.com/carbon-design-system/carbon-components-svelte/issues/1784)) ([709322c](https://github.com/carbon-design-system/carbon-components-svelte/commit/709322c2819e3123ade4a13e3fd7d05035154d6b))
-- **file-uploader:** add `size` prop to `FileUploaderButton` ([#1786](https://github.com/carbon-design-system/carbon-components-svelte/issues/1786)) ([51c281d](https://github.com/carbon-design-system/carbon-components-svelte/commit/51c281de4a29b99e61952959a8cbfdba0b49e786))
-- **file-uploader:** make `labelTitle`, `labelDescription` slottable ([#1780](https://github.com/carbon-design-system/carbon-components-svelte/issues/1780)) ([239f1b1](https://github.com/carbon-design-system/carbon-components-svelte/commit/239f1b10e562507f66e3cd318084ed1de30f0c25))
-- **slider:** add `hideLabel` prop ([#1777](https://github.com/carbon-design-system/carbon-components-svelte/issues/1777)) ([baff07e](https://github.com/carbon-design-system/carbon-components-svelte/commit/baff07e012b43e1a24b2e574a57509f711a463f6)), closes [#1682](https://github.com/carbon-design-system/carbon-components-svelte/issues/1682)
-
-### Bug Fixes
-
-- **file-uploader:** do not render empty element if `labelTitle`, `labelDescription` not provided ([#1778](https://github.com/carbon-design-system/carbon-components-svelte/issues/1778)) ([7ef8b73](https://github.com/carbon-design-system/carbon-components-svelte/commit/7ef8b73252709130c8e269b83b2936e1631c96fa)), closes [#1775](https://github.com/carbon-design-system/carbon-components-svelte/issues/1775)
-- **loading:** remove redundant `description` label ([#1783](https://github.com/carbon-design-system/carbon-components-svelte/issues/1783)) ([d6804b4](https://github.com/carbon-design-system/carbon-components-svelte/commit/d6804b44fea0d4fc23574e63e7d4c64fa18e8f42)), closes [#1670](https://github.com/carbon-design-system/carbon-components-svelte/issues/1670)
-- **types:** correctly type `kind` prop in `FileUploader`, `FileUploaderButton` ([#1781](https://github.com/carbon-design-system/carbon-components-svelte/issues/1781)) ([a7443c2](https://github.com/carbon-design-system/carbon-components-svelte/commit/a7443c2dca396f79e06fed695374c0a15bda14ed))
-- **types:** improve formatting of prop comments ([#1779](https://github.com/carbon-design-system/carbon-components-svelte/issues/1779)) ([be76370](https://github.com/carbon-design-system/carbon-components-svelte/commit/be763706ca7ab0182bc0f8171e74043ccbadf461))
-
-## [0.78.0](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.77.0...v0.78.0) (2023-07-19)
-
-### ⚠ BREAKING CHANGES
-
-- **typescript:** minimum Svelte version for TypeScript users is 3.55
-
-### Features
-
-- **typescript:** support svelte 4 ([#1773](https://github.com/carbon-design-system/carbon-components-svelte/issues/1773)) ([2f026f7](https://github.com/carbon-design-system/carbon-components-svelte/commit/2f026f792ad94f468b890a6d5ab36cc2642dacf2)), closes [#1753](https://github.com/carbon-design-system/carbon-components-svelte/issues/1753)
-
-## [0.77.0](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.76.1...v0.77.0) (2023-07-13)
-
-### Features
-
-- **ui-shell:** add `preventCloseOnClickOutside` to `HeaderAction` ([#1625](https://github.com/carbon-design-system/carbon-components-svelte/issues/1625)) ([ea9b261](https://github.com/carbon-design-system/carbon-components-svelte/commit/ea9b261b60698f9314e0aae4d61025bae215cccf)), closes [#1624](https://github.com/carbon-design-system/carbon-components-svelte/issues/1624)
-- **ui-shell:** make `company` in `Header` slottable ([#1764](https://github.com/carbon-design-system/carbon-components-svelte/issues/1764)) ([9b3f014](https://github.com/carbon-design-system/carbon-components-svelte/commit/9b3f014a0ba43abb5a36be4a6156910b5d7644d7))
-
-### [0.76.1](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.76.0...v0.76.1) (2023-07-08)
-
-### 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
-
-**Breaking Changes**
-
-- `Select`: rename dispatched `change` event to `update`
-- `Select`: forward `change` event
-- `PaginationNav`: use 1-indexing to be consistent with `Pagination`
-- `InlineNotification`: remove `iconDescription` prop (replaced with `closeButtonDescription` and `statusIconDescription`)
-
-**Features**
-
-- `Pagination`: dispatch `change` event when user interacts with previous/next buttons, or page/page size dropdowns
-- `InlineNotification`: add `iconDescription` and `closeButtonDescription` props
-
-**Documentation**
-
-- link 'source code' to folder for multiple components
-- `PaginationNav`: add description for `change` event
-
-## [0.70.13](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.70.13) - 2022-12-08
-
-**Fixes**
-
-- support `NumberInput` incrementing/decrementing floating point values
-- allow arrow keys to open and navigate `Dropdown` menu
-- only fire `Dropdown` "select" event on interaction
-- avoid runtime error if `Dropdown` items is an empty array
-- avoid runtime error if `MultiSelect` items is an empty array
-- avoid runtime error if `ComboBox` items is an empty array
-- fire `OverflowMenu` "close" event when clicking outside menu
-- fire `Popover` "click:outside" event when clicking sibling elements
-- forward `Toggle` "change" and "keyup" events after `toggled` updates
-- fix `ProgressStep` label text if `vertical`
-- make `ProgressStep` inherit unclickable styles if `preventChangeOnClick`
-- add explicit `type="button"` to `TableHeader` button
-- add explicit `type="button"` to `ProgressStep` button
-- loosen `TreeView` text prop type from `string` to `any`
-- make `TreeView` children prop type work recursively
-- remove unused `derived` import from `DataTable`
-
-## [0.70.12](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.70.12) - 2022-10-13
-
-**Fixes**
-
-- `Search` prop types should extend `input` attributes
-
-## [0.70.11](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.70.11) - 2022-10-13
-
-**Fixes**
-
-- ignore false positive a11y warnings from Svelte version 3.51
-- `NumberInput` with `allowInput` should not be invalid if `value` is `null`
-
-## [0.70.10](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.70.10) - 2022-10-04
-
-**Fixes**
-
-- avoid element reference error in `ListBoxMenuItem`
-- display warn/invalid icons in `DatePickerInput` with calendar
-- fix layout regression in `HeaderSearch`
-- localize `HeaderAction`, `ImageLoader` transitions
-
-## [0.70.9](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.70.9) - 2022-09-23
-
-**Fixes**
-
-- fix visual regression in next/previous buttons in `Pagination`, `PaginationNav`
-
-## [0.70.8](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.70.8) - 2022-09-21
-
-**Fixes**
-
-- forward keyup, keydown, paste events in `ToolbarSearch` to `Search`
-
-## [0.70.7](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.70.7) - 2022-09-17
-
-**Fixes**
-
-- prevent `submit` event on `Modal` if primary button is disabled
-
-## [0.70.6](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.70.6) - 2022-09-05
-
-**Fixes**
-
-- resolve `Toggle`, `HeaderSearch` accessibility warnings in Svelte >=v3.50
-
-## [0.70.5](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.70.5) - 2022-09-02
-
-**Fixes**
-
-- avoid left margin style if `Button` is icon-only
-
-## [0.70.4](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.70.4) - 2022-08-31
-
-**Fixes**
-
-- correctly scroll item into view when keyboard navigating `Dropdown`, `ComboBox`, `MultiSelect`
-
-## [0.70.3](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.70.3) - 2022-08-31
-
-**Fixes**
-
-- close menu in `Dropdown`, `MultiSelect` when pressing "Escape"
-- prevent default behavior in `ComboBox` when pressing "Enter," "ArrowUp," or "ArrowDown"
-- scroll item into view when keyboard navigating `Dropdown`, `ComboBox`, `MultiSelect`
-
-## [0.70.2](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.70.2) - 2022-08-29
-
-**Fixes**
-
-- allow `$$restProps.style` to be correctly set on `Content`
-
-## [0.70.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.70.1) - 2022-08-23
-
-**Fixes**
-
-- do not unset `Content` left margin for rail `SideNav`
-- set `role`, `aria-label` attributes on `DatePicker` calendar container
-
-## [0.70.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.70.0) - 2022-08-18
-
-**Features**
-
-- add `filteredRowIds` prop to `ToolbarSearch` to support pagination
-
-## [0.69.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.69.0) - 2022-08-17
-
-**Features**
-
-- dispatch `on:click:header--select` event in `DataTable`
-- dispatch `on:click:row--select` event in `DataTable`
-
-## [0.68.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.68.0) - 2022-08-15
-
-**Features**
-
-- add `fullWidth` prop to `ToastNotification`
-- dispatch cancelable `on:cancel` event in `ToolbarBatchActions`
-- add `active` prop to `ToolbarBatchActions`
-
-**Documentation**
-
-- add `ToastNotification` example "Full width"
-- add `DataTable` example "Batch selection with controlled toolbar"
-
-## [0.67.9](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.67.9) - 2022-08-11
-
-**Fixes**
-
-- `NotificationActionButton` types should extend `Button` props
-
-## [0.67.8](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.67.8) - 2022-08-10
-
-**Fixes**
-
-- remove `aria-checked="mixed"` if `InlineCheckbox` is indeterminate
-- add `aria-labelledby` to `Slider` thumb
-- add `role="switch"` to `Toggle` input
-
-## [0.67.7](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.67.7) - 2022-08-07
-
-**Fixes**
-
-- remove UI Shell `Content` left margin if `SideNav` is collapsed
-
-## [0.67.6](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.67.6) - 2022-08-05
-
-**Refactor**
-
-- use class directive in `TextInput`, `DatePickerInput`
-
-**Fixes**
-
-- avoid dynamic class names in `NotificationButton`, `NotificationIcon`
-- forward keydown, keyup events to `NumberInput`
-
-## [0.67.5](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.67.5) - 2022-08-04
-
-**Fixes**
-
-- correctly select a `ComboBox` item when pressing "Enter"
-
-## [0.67.4](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.67.4) - 2022-07-26
-
-**Fixes**
-
-- override `Toggle` margin-top style if `hideLabel` is true
-
-## [0.67.3](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.67.3) - 2022-07-26
-
-**Fixes**
-
-- correctly pluralize `Pagination` items display text
-- prevent label text selection in `Toggle`
-- add missing `hideLabel` prop to `Toggle`
-
-## [0.67.2](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.67.2) - 2022-07-23
-
-**Fixes**
-
-- display correct `ComboBox` value if using `itemToString` and `shouldFilterItem` props
-
-## [0.67.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.67.1) - 2022-07-12
-
-**Fixes**
-
-- set a high `z-index` on the `SideNav` overlay to avoid it being covered by other elements
-
-## [0.67.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.67.0) - 2022-06-29
-
-**Breaking Changes**
-
-Svelte version >=3.48.0 is required.
-
-- re-revert [924b6d35](924b6d352eebf5c82da63f0ead450dc59e80ca30) to allow close event in `ToastNotification`, `InlineNotification` to be cancellable
-
-## [0.66.3](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.66.3) - 2022-06-29
-
-**Fixes**
-
-- revert [924b6d35](924b6d352eebf5c82da63f0ead450dc59e80ca30) and re-publish since v0.66.2 contains breaking changes
-
-## [0.66.2](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.66.2) - 2022-06-29
-
-**Fixes**
-
-- allow close event in `ToastNotification`, `InlineNotification` to be cancellable
-
-**Documentation**
-
-- add `ToastNotification` example "Prevent default close behavior"
-- add `InlineNotification` example "Prevent default close behavior"
-
-## [0.66.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.66.1) - 2022-06-27
-
-**Fixes**
-
-- support `PasswordInput` invalid state when used in a `FluidForm`
-- remove title attribute from `SideNavMenu` icon
-- remove tabindex attribute from `SideNavMenu` icon
-- override max-height in an expanded `SideNavMenu`
-- fix `ComposedModal` type error where the focus node is possibly `null`
-
-**Refactor**
-
-- pass required `text` prop from `CodeSnippet` to `CopyButton` to prevent development warning
-
-**Documentation**
-
-- add `PasswordInput` example "Invalid state"
-- rename `ComboBox` example "Selected id" to "Initial selected id"
-- revise `DatePicker` example "DatePicker in a modal" to prevent iframe from stealing focus
-
-## [0.66.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.66.0) - 2022-06-18
-
-**Features**
-
-- add `fullWidth` prop to `Slider`
-- support number type for `selected` prop in `Select`
-
-**Fixes**
-
-- only dispatch "change" in `Select` if `selected` value has changed
-- use first `SelectItem` value as default `selected` value in `Select` if `undefined`
-
-**Documentation**
-
-- add `Slider` example "Full width"
-- revise `Select` example "Default" to demo usage without `selected` prop
-
-## [0.65.3](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.65.3) - 2022-06-15
-
-**Fixes**
-
-- fix `TreeView` type error when keyboard navigating an expanded node
-
-## [0.65.2](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.65.2) - 2022-06-12
-
-**Fixes**
-
-- `DataTable` header keys should be reactive
-- use native binding for value prop in `TimePicker`
-- use native binding for value prop in `ComboBox`, `MultiSelect`
-
-## [0.65.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.65.1) - 2022-06-09
-
-**Fixes**
-
-- `DataTable` column sort direction order should be independent
-
-## [0.65.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.65.0) - 2022-06-07
-
-**Breaking Changes**
-
-- mark array-type props as read-only
-
-**Features**
-
-- add `sortKey`, `sortDirection` props to `DataTable` for programmatic sorting
-- forward `paste` event to `ComboBox`, `DatePicker`, `MultiSelect`, `NumberInput`, `Search`, `TextArea`, `TextInput`, `PasswordInput`, `TimePicker`, `HeaderSearch`
-- support disabled items in `Dropdown`, `MultiSelect`, `ComboBox`
-
-**Fixes**
-
-- do not overwrite `cells` property in `rows` object in `DataTable`
-- correctly toggle the body class if using nested modals
-- remove useless `inline` prop from `Dropdown`
-- remove redundant `Dropdown` list box role and id
-- add missing `role="option"` and `aria-selected` attributes to `ListBoxMenuItem`
-
-**Refactor**
-
-- set alert `Modal` attributes in markup instead of script
-
-**Documentation**
-
-- add `DataTable` example "Programmatic sorting"
-- add `Modal` example "Has scrolling content"
-- add `Modal` example "Custom focus"
-- add `Dropdown` example "Disabled items"
-- add `MultiSelect` example "Disabled items"
-- add `ComboBox` example "Disabled items"
-
-## [0.64.3](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.64.3) - 2022-05-29
-
-**Fixes**
-
-- active tab in `Tabs` should not steal focus if programmatically selected
-- set title attribute in `CheckBox`, `MultiSelect`, `Dropdown`, `ComboBox` if label is truncated
-
-**Refactor**
-
-- refactor components to use `class:` directive instead of the class attribute
-
-**Documentation**
-
-- add `Tabs` example "Disabled tabs"
-
-## [0.64.2](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.64.2) - 2022-05-25
-
-**Fixes**
-
-- apply custom `DataTable` widths to empty columns
-
-## [0.64.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.64.1) - 2022-05-23
-
-**Fixes**
-
-- mark `CopyButton` text prop as required
-- mark `Dropdown` selectedId prop as required
-- use `@see` tag in `Theme` tokens prop description
-- remove `title` attribute from `Modal`, `ModalHeader` close button
-- remove redundant `aria-label` from `Modal` close button icon
-- add `aria-hidden="true"` to `Modal`, `ModalHeader` close button icon
-
-**Documentation**
-
-- update `Theme` docs to specify that it must be used with `all.css`
-- update `DataTable` docs to note that custom widths do not work with `stickyHeader`
-
-## [0.64.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.64.0) - 2022-05-14
-
-**Breaking Changes**
-
-- set `flatpickrProps.static` in `DatePicker` to be true by default
-- use data attribute instead of id for `DataTable` headers/rows
-
-**Features**
-
-- support custom column widths in `DataTable`
-- dispatch "expand" and "collapse" events in `CodeSnippet`
-
-**Fixes**
-
-- use `@see` tag for flatpickr options link in `DatePicker`
-- pressing "Enter" in `DatePicker` should update the value
-- dispatched event type without detail should be `null`, not `any`
-- type missing "open" event in `HeaderAction`
-- use small button in multi-line `CodeSnippet`
-
-**Documentation**
-
-- make calendar variants of `DatePicker` more prominent
-- add `DataTable` example "Custom column widths"
-- add `CodeSnippet` examples "Expanded by default" and "Reactive example"
-
-## [0.63.8](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.63.8) - 2022-05-07
-
-**Fixes**
-
-- elevate `Toolbar` z-index so overflow menu is not clipped by the table
-
-## [0.63.7](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.63.7) - 2022-05-04
-
-**Fixes**
-
-- strongly type `translateWithId` prop in `Dropdown`
-
-## [0.63.6](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.63.6) - 2022-05-04
-
-**Fixes**
-
-- add `translateWithIdsSelection` prop to `ComboBox`, `MultiSelect` to customize clear selection description
-- use default values in `ListBoxMenuIcon` if `translateWithIds` is undefined
-- use default values in `ListBoxSelection` if `translateWithIds` is undefined
-
-## [0.63.5](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.63.5) - 2022-05-02
-
-**Fixes**
-
-- dispatch "change" event in `Tabs` only if selected index has changed
-
-## [0.63.4](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.63.4) - 2022-04-30
-
-**Fixes**
-
-- add missing `"2x3"` ratio value to `AspectRatio`
-- fix typo in `ToolbarSearch` shouldFilterRows type annotation
-
-**Documentation**
-
-- correctly generate icon, action imports in examples
-- remove unnecessary `tooltipBodyId` in `Tooltip` examples
-- add `DataTable` "Expandable and selectable" example
-- add `DataTable` "Batch selection" example
-
-## [0.63.3](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.63.3) - 2022-04-28
-
-**Fixes**
-
-- fix `FileUploaderItem` regression where `delete` event should be dispatched if status is "edit"
-
-**Documentation**
-
-- add `FileUploader` "Item (edit)" example
-- revise `FileUploader` "Item (edit status, invalid state)" example to include `on:delete` usage
-- add `FileUploader` "Item (edit status, invalid state with subject, body)" example
-
-## [0.63.2](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.63.2) - 2022-04-23
-
-**Fixes**
-
-- set `type="button"` on `Dropdown` to fix usage in a form
-- re-focus search bar when clearing `ToolbarSearch` value
-
-## [0.63.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.63.1) - 2022-04-18
-
-**Fixes**
-
-- `HeaderGlobalAction` icon size should be `20` by default
-- fix `rows` reactivity in `DataTable`
-
-## [0.63.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.63.0) - 2022-04-17
-
-**Breaking Changes**
-
-- remove deprecated components: `Icon`, `IconSkeleton`, `NotificationTextDetails`, `ToggleSmall`, `ToggleSmallSkeleton`, `HeaderActionSearch`
-- remove deprecated component props
-- remove `optimizeCarbonImports` preprocessor
-- remove `GlobalHeader` and `SideNav` subfolders
-- move `truncate` action from `actions` to `src/Truncate`
-
-**Features**
-
-- add `breakpointObserver`, `breakpoints` to base exports
-- add `ProgressBar` `kind` prop to support inline, indented variants
-
-**Fixes**
-
-- add explicit `type="button"` attribute to interactive, filterable tag variants
-- add TypeScript support for `sveltekit:` attributes for anchor elements
-- `Link` types should extend `a` or `p` attributes
-- prevent selectable `DataTable` with sticky header from jumping
-
-**Refactor**
-
-- use icons from `carbon-icons-svelte` v11
-
-**Documentation**
-
-- add `DataTable` "Sticky header" example
-- refactor `Grid` examples
-- add note to `UIShell` that theming is not supported
-- add `ProgressBar` examples "Inline variant" and "Indented variant"
-
-**Housekeeping**
-
-- upgrade `carbon-components` to v10.56.0
-
-## [0.62.3](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.62.3) - 2022-03-26
-
-**Fixes**
-
-- fix `TreeView` filter logic in expandNodes/collapseNodes
-- correctly render slotted label in `NumberInput`
-- only render expandable `DataTable` row content when expanded
-
-## [0.62.2](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.62.2) - 2022-03-23
-
-**Fixes**
-
-- `DataTable` expandable variant should work with zebra styles
-- `DatePicker` `flatpickrProps` should override default `flatpickr` options
-
-**Documentation**
-
-- add `DataTable` "Expandable (zebra styles)" example
-
-## [0.62.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.62.1) - 2022-03-20
-
-**Fixes**
-
-- fix `ToolbarSearch` standalone usage where "DataTable" context can be undefined
-
-## [0.62.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.62.0) - 2022-03-19
-
-**Breaking Changes**
-
-- remove `Copy` component
-- do not prevent default submit behavior in `Form`
-
-**Features**
-
-- add `shouldFilterRows` prop to `ToolbarSearch` to support auto-filterable `DataTable` rows
-- make `SideNavLink` text slottable
-- make `icon` prop slottable in `ContextMenuOption`, `Link`, `Tag`, `HeaderAction`, `HeaderActionLink`, `SideNavLink`, `SideNavMenu`
-- make `MultiSelect` slottable
-- make `Dropdown` slottable
-- make `ComboBox` slottable
-
-**Fixes**
-
-- stop click propagation on `HeaderAction` button
-
-**Refactor**
-
-- inline `Copy` component in `CopyButton`, `CodeSnippet`
-- use native `bind:value` in `Search`
-- use native `bind:value` in `TextArea`
-
-**Documentation**
-
-- add `DataTable` "Filterable" and "Filterable (custom)" examples
-- add `MultiSelect` "Custom slot" example
-- add `Dropdown` "Custom slot" example
-- add `ComboBox` "Custom slot" example
-- add note that `items` object in `ComboBox`, `Dropdown`, `MultiSelect` requires a unique `id`
-- add `ClickableTile` "Prevent default behavior" example
-- add `Form` "Prevent default behavior" example
-- fix broken link in `Checkbox` docs
-
-## [0.61.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.61.1) - 2022-03-13
-
-**Fixes**
-
-- do not generate CSS file from `css/_popover.scss`
-
-## [0.61.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.61.0) - 2022-03-13
-
-**Breaking Changes**
-
-- remove `HeaderActionSlideTransition` interface from `HeaderAction`; type transition prop as `SlideParams`
-- rename `Breakpoint` "on:match" event to "on:change"
-- move `Breakpoint` breakpoints to `carbon-components-svelte/src/Breakpoint/breakpoints`
-
-**Features**
-
-- support `DataTable` non-selectable rows
-- expose `MultiSelect` highlightedId as a prop
-- add `breakpointObserver` store as an alternative to `Breakpoint`
-
-**Fixes**
-
-- audit `HeaderAction` text styles
-- visually align `HeaderActionLink` icon with `HeaderAction` icon
-- fix `MultiSelect` filterable selection error
-- correctly type `FileUploaderDropContainer` validateFiles prop
-- inline `Popover` SCSS from `carbon-components@10.47`
-
-**Refactor**
-
-- remove usage of deprecated `Icon` component
-- use direct component imports where possible
-
-**Documentation**
-
-- add `DataTable` "Non-selectable rows" example
-- add `OverflowMenu` "Disabled items" example
-- add `Breakpoint` "Store and Breakpoint Values" example
-
-## [0.60.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.60.0) - 2022-02-26
-
-**Features**
-
-- add `RadioButtonGroup` `hiddenLegend` prop to visually hide the legend
-- add `ProgressBar` `size` prop to support small size variant
-
-**Fixes**
-
-- update `DatePicker` calendar instance if options change
-
-**Refactor**
-
-- remove `StructuredList` `overflow-y` style monkey patch
-
-**Documentation**
-
-- add `RadioButton` "Hidden legend" example
-- add `ProgressBar` "Small size" example
-
-**Housekeeping**
-
-- upgrade `carbon-components` to v10.54.0
-
-## [0.59.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.59.0) - 2022-02-21
-
-**Features**
-
-- add `maxCount` prop to `TextArea`
-- add `disabled` prop to `FileUploader`
-- add `files` prop to `FileUploaderDropContainer`
-- add `files` prop to `FileUploaderButton`
-
-**Fixes**
-
-- change `add`, `change` events in `FileUploaderDropContainer` to dispatch `File[]` instead of `FileList`
-- update `files` prop description in `FileUploader`
-
-**Documentation**
-
-- add `TextArea` "Maximum character count" example
-- add `FileUploader` disabled state example
-- add `FileUploader` "Clear files" example
-- document `validateFiles` prop for `FileUploaderDropContainer`
-- add descriptions for `FileUploaderButton`, `FileUploader` examples
-
-**Housekeeping**
-
-- upgrade `carbon-components` to v10.53.0
-
-## [0.58.4](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.58.4) - 2022-02-21
-
-**Fixes**
-
-- dispatched events without a `detail` type should be `null` instead of `any`
-- `FileUploader` `clearFiles` description should reflect that it's an accessor, not a prop
-- `FileUploader` should correctly fire `add` and `remove` events
-- `FileUploader` files should not be keyed by file name
-- `FileUploader` change event detail signature should be `File[]`
-- fix `DataTable` regression where sort icon indicators don't update
-
-**Refactor**
-
-- remove unnecessary JSDoc default type notation
-
-## [0.58.3](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.58.3) - 2022-02-20
-
-**Fixes**
-
-- correctly set deprecation comments for deprecated components
-- `TextInput` and `PasswordInput` should render label if "labelText" slot is used
-- `PasswordInput` should not render `label` if no `labelText` is provided
-- `StructuredList` overflow-y should not be "hidden"
-- `MultiSelect` should not prevent default key behavior when open
-- `Switch` should have `type="button"`
-
-## [0.58.2](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.58.2) - 2022-02-12
-
-**Fixes**
-
-- `Tooltip` `aria-label` should use `iconDescription` if `triggerText` is falsy
-- `OverflowMenu` keyboard navigation should skip disabled items
-- UI Shell `HeaderPanelDivider` should use `hr` element to represent divider
-- `Button` should not set `aria-pressed` on icon-only, link buttons
-
-## [0.58.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.58.1) - 2022-02-11
-
-**Fixes**
-
-- remove whitespace from `pre` tag in `CodeSnippet` (Svelte v3.46.4 preserves `pre` whitespace by default)
-
-## [0.58.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.58.0) - 2022-02-11
-
-**Breaking Changes**
-
-- if `TextInput` is `type="number"`, value can be a `number` or `null` to signify "no value"
-- `TextInput` dispatches instead of forwards `input`, `change` events (detail: `null | number | string`)
-
-**Features**
-
-- pass `rowIndex`, `cellIndex` to `DataTable` "cell" slot
-- add `itemToInput` prop to `MultiSelect` to customize name, title, labelText values
-- add `open` prop to `TooltipDefinition`; dispatch `open`, `close` events
-
-**Fixes**
-
-- `DataTable` headers should be reactive
-- `DataTable` batch selection checkbox should be reactive
-- `MultiSelect` should correctly lose focus
-- non-filterable `MultiSelect` should dispatch a `blur` event
-- resolve `MultiSelect` accessibility issues
-- toggle `HeaderNavMenu` when pressing "Enter" or "Space"
-- close `HeaderNavMenu` menu when pressing "Enter" on an item
-- resolve `HeaderNavMenu` accessibility issues
-- fix `TextInput` reactivity by using native `bind:value`
-
-**Documentation**
-
-- remove duplicate "Heading variant" example
-
-**Housekeeping**
-
-- upgrade `carbon-components` to v10.52.0
-
-## [0.57.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.57.1) - 2022-02-01
-
-**Fixes**
-
-- `Tooltip` definition is missing open, close events
-- `TooltipDefinition` button should have `type="button"`
-
-## [0.57.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.57.0) - 2022-01-30
-
-**Breaking Changes**
-
-- make `NumberInput` "input" event type consistent with "change" (`null | number`)
-
-**Features**
-
-- dispatch `NumberInput` input, change events when clicking the steppers
-- add `primaryButtonIcon` prop to `Modal`, `ModalFooter`
-
-**Fixes**
-
-- prevent `NumberInput` from coercing empty string to `0`
-
-## [0.56.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.56.1) - 2022-01-27
-
-**Fixes**
-
-- `NumberInput` with value `0` should not be converted to `null`
-
-## [0.56.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.56.0) - 2022-01-27
-
-**Breaking Changes**
-
-- type `NumberInput` value as `null | number` instead of `string | number` (`null` signifies "no value")
-
-**Fixes**
-
-- export `readonly` as a prop in `TextArea`
-- fix `Checkbox` two-way binding for `checked`, `group` props
-
-**Documentation**
-
-- add `Checkbox` reactive example for `bind:checked`
-- update `Checkbox` reactive example for `bind:group` to demo two-way binding
-- simplify `Tabs` reactive example
-- add `NumberInput` "No value" example
-
-## [0.55.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.55.0) - 2022-01-22
-
-**Features**
-
-- forward `focus`, `blur` events to `NumberInput`
-- update `ProgressStep` icons for current, incomplete steps
-- type `id` as `any` instead of `string` in `ComboBox`, `Dropdown`, `MultiSelect`
-
-**Fixes**
-
-- do not coerce empty value to `0` in `NumberInput` if `allowEmpty` is true
-- label `Slider` input if `aria-label` not explicitly defined
-- add missing `required` prop to `RadioButton`
-- add missing `required` prop to `Checkbox`
-- include `@default undefined` annotations for props that are `undefined` by default
-
-**Refactor**
-
-- remove hotfix in `DatePicker` to prevent disabled icon from being clickable
-
-**Housekeeping**
-
-- upgrade `carbon-components` to v10.51.0
-
-## [0.54.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.54.0) - 2022-01-19
-
-**Features**
-
-- support paginated `DataTable`
-
-## [0.53.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.53.0) - 2022-01-18
-
-**Breaking Changes**
-
-- replace `selectedIndex` with `selectedId` in `Dropdown`
-- replace `selectedIndex` with `selectedId` in `ComboBox`
-
-**Fixes**
-
-- prevent `Dropdown` icon from being clickable when disabled
-
-## [0.52.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.52.0) - 2022-01-17
-
-**Features**
-
-- make `Toggle` labels slottable
-- add option to `ComboBox.clear` to not re-focus input (`clear({ focus: false })`)
-
-**Fixes**
-
-- break out of trap focus in `Tooltip` when pressing "Escape"
-- pass "name" prop in `ComboBox` to input element
-- emit `change` event in `Checkbox` after modifying state
-- restore explicit typing of `null | HTMLElement` for TypeScript strict mode
-- dispatch `click:button--primary` in `Modal` if `shouldSubmitOnEnter` is true
-
-**Documentation**
-
-- simplify reactive `RadioButton` example
-- add reactive `Select` example for `Select`
-- fix grammar in `TreeView` "Expand all nodes" example
-- note that `Search` clear event is also dispatched when pressing "Escape"
-- demo reactivity in expandable `Search` example
-
-## [0.51.3](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.51.3) - 2022-01-12
-
-**Fixes**
-
-- fix `selectedIndex` reactivity in `ComboBox`
-
-**Refactor**
-
-- remove redundant `null` in `null | HTMLElement` prop types
-
-## [0.51.2](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.51.2) - 2022-01-10
-
-**Fixes**
-
-- correctly reset values in `ComboBox` when manually clearing selection
-- fix filterable `ComboBox` keyboard selection
-- remove redundant role attributes from `Dropdown`, `Header` to fix a11y warnings
-- fix `TileGroup` two-way binding on the `selected` prop
-
-**Documentation**
-
-- document `DatePicker` usage with a Rollup set-up
-- add multiple modals example for `Modal`
-- add reactive examples for `RadioTile`
-
-## [0.51.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.51.1) - 2022-01-03
-
-**Fixes**
-
-- add missing `required` prop to `Select`
-- set global theme variable first in SCSS files
-
-## [0.51.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.51.0) - 2021-12-30
-
-**Features**
-
-- enhance `Checkbox` to support `bind:group`
-
-## [0.50.5](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.50.5) - 2021-12-30
-
-**Fixes**
-
-- filterable `MultiSelect` should blur when pressing "Tab"
-- filterable `MultiSelect` menu should close when pressing "Escape"
-- filterable `MultiSelect` menu should open when pressing "Space"
-- `DatePicker` input should not lose focus when pressing "Enter"
-- `ToolbarSearch` should expand if `value` is programmatically set
-
-## [0.50.4](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.50.4) - 2021-12-30
-
-**Fixes**
-
-- pressing "Escape" in a `DatePicker` should not propagate past the open calendar
-- prevent menu icon in filterable `MultiSelect` from triggering twice
-
-## [0.50.3](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.50.3) - 2021-12-28
-
-**Fixes**
-
-- do not dispatch "click", "click:row" `DataTable` events when selecting a checkbox or radio button
-- render "labelText" slot if `labelText` prop or `$$slots.labelText` is truthy
-- prevent default behavior in `Tabs` mobile variant when clicking a menu option
-- coalesce nullish values to `""` for `TextInput`, `PasswordInput`, `TextArea`
-
-## [0.50.2](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.50.2) - 2021-11-27
-
-**Fixes**
-
-- select correct item in filterable `MultiSelect` using keyboard navigation
-- do not mutate `sortedItems` in `MultiSelect`
-
-## [0.50.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.50.1) - 2021-11-19
-
-**Fixes**
-
-- do not dispatch `DataTable` "click", "click:row" events if target is an `OverflowMenu`
-
-## [0.50.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.50.0) - 2021-11-18
-
-**Features**
-
-- add `target` prop to `ContextMenu` to support custom trigger element(s)
-- pass clicked element as `event.detail` in `ContextMenu` "open" event
-
-## [0.49.2](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.49.2) - 2021-11-18
-
-**Fixes**
-
-- `Tabs` should not dispatch an initial "change" event when no change has occurred
-- `Pagination` page value should not exceed total pages
-- fix `Popover` relative prop by inlining style
-- replace `onDestroy` with `onMount` return function to avoid running code server-side
-
-## [0.49.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.49.1) - 2021-11-17
-
-**Fixes**
-
-- include missing `Popover` styles from `carbon-components@10.47`
-
-## [0.49.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.49.0) - 2021-11-12
-
-**Features**
-
-- support `UIShell` HeaderNavMenu with current item
-- make `InlineNotification` title, subtitle props slottable
-- make `ToastNotification` title, subtitle, and caption props slottable
-
-**Refactor**
-
-- remove unnecessary "position: relative" style in `ExpandableTile`
-- remove unused `refContent` in `ExpandableTile`
-
-**Housekeeping**
-
-- upgrade `carbon-components` to v10.48.0
-
-## [0.48.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.48.1) - 2021-11-12
-
-**Fixes**
-
-- type `DatePicker` locale prop as flatpickr `CustomLocale` or `key`
-- update remaining `carbon-icons-svelte` imports to use inlined icons
-
-## [0.48.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.48.0) - 2021-11-11
-
-**Breaking Changes**
-
-- remove `carbon-icons-svelte` from direct dependencies
-
-**Features**
-
-- support auto-width `Tabs`
-- add ref prop to `Form`
-
-**Fixes**
-
-- set calendar instance to `null` when destroying `DatePicker`
-
-## [0.47.6](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.47.6) - 2021-11-10
-
-**Fixes**
-
-- fix `Tooltip` two way binding when icon is in focus
-- coerce `TextInput` value to a number if `type="number"`
-
-## [0.47.5](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.47.5) - 2021-11-07
-
-**Fixes**
-
-- fix `Tooltip` open/close logic to allow two way binding of the `open` prop
-- inline `position: relative` style in `ExpandableTile`
-
-## [0.47.4](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.47.4) - 2021-11-06
-
-**Fixes**
-
-- only dispatch `click:row--expand` when clicking an expandable `DataTable` row chevron
-
-## [0.47.3](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.47.3) - 2021-10-22
-
-**Fixes**
-
-- correctly toggle batch expansion button in `DataTable`
-
-## [0.47.2](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.47.2) - 2021-10-21
-
-**Fixes**
-
-- close the open `Tooltip` when using multiple tooltips
-- collapse batch expansion button in `DataTable` if one or more rows is collapsed
-- omit explicit reference to "carbon-icons-svelte" from `icon` prop descriptions
-
-## [0.47.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.47.1) - 2021-10-20
-
-**Fixes**
-
-- include border style for non-expandable rows in a batch expandable `DataTable`
-
-## [0.47.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.47.0) - 2021-10-19
-
-**Features**
-
-- add `nonExpandableRowIds` prop to `DataTable` to specify rows that should not be expandable
-
-## [0.46.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.46.0) - 2021-10-17
-
-**Breaking Changes**
-
-- use `.svelte.d.ts` extension instead of `.d.ts` for Svelte component TypeScript definitions
-
-**Features**
-
-- support `Tag` outline type
-- add `hideLabel` prop to `MultiSelect`
-- allow any Svelte component to be used for `icon` props, not just `CarbonIcon`
-- add `closeIcon` prop to `HeaderAction` to override the default `Close20` icon
-
-**Fixes**
-
-- avoid opening the calendar if `DatePickerInput` is a disabled `fieldset` descendant
-- remove `stopPropagation` modifier from `HeaderAction` to allow multiple UI Shell app switchers
-
-**Housekeeping**
-
-- upgrade `carbon-components` to v10.46.0
-
-## [0.45.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.45.1) - 2021-10-15
-
-**Fixes**
-
-- prevent space/enter keys from selecting incomplete `ProgressIndicator` steps
-
-## [0.45.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.45.0) - 2021-10-13
-
-**Features**
-
-- add `TreeView` component accessors to programmatically expand/collapse nodes
-
-## [0.44.7](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.44.7) - 2021-10-13
-
-**Fixes**
-
-- add missing `value` prop to `Checkbox`
-
-## [0.44.6](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.44.6) - 2021-10-11
-
-**Fixes**
-
-- fix `DataTable` sorting to tolerate `null`, `undefined` values
-
-## [0.44.5](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.44.5) - 2021-10-04
-
-**Fixes**
-
-- correctly apply `menuOptionsClass` in `OverflowMenu`
-
-## [0.44.4](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.44.4) - 2021-09-28
-
-**Fixes**
-
-- `ClickableTile` TypeScript definition restProps should extend attributes of either `a` or `p` tags
-
-## [0.44.3](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.44.3) - 2021-09-23
-
-**Fixes**
-
-- correctly apply styles when using a static width `DataTable` with a title and description
-
-## [0.44.2](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.44.2) - 2021-09-14
-
-**Fixes**
-
-- prevent redundant `clear` events in `ComboBox`
-
-## [0.44.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.44.1) - 2021-09-11
-
-**Fixes**
-
-- if `ComboBox` is disabled, clicking the chevron icon should not toggle the dropdown
-- `ToolbarBatchActions` cancel button text should be slottable
-
-## [0.44.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.44.0) - 2021-09-07
-
-**Features**
-
-- add ability to override or customize `DatePicker` calendar options using the `flatpickrProps` prop
-
-## [0.43.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.43.0) - 2021-09-06
-
-**Features**
-
-- add ability to programmatically clear a `ComboBox` using the `clear` component accessor
-
-## [0.42.3](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.42.3) - 2021-09-05
-
-**Fixes**
-
-- `RadioButton` "labelText" slot should render even if `labelText` is falsy
-- only render `FormGroup` `legend` element if `legendText` is truthy
-
-## [0.42.2](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.42.2) - 2021-07-29
-
-**Fixes**
-
-- fix reactivity regression in `ComboBox`
-
-**Documentation**
-
-- update example set-ups
-- document styling instructions, `carbon-preprocess-svelte` in README.md
-
-## [0.42.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.42.1) - 2021-07-26
-
-**Fixes**
-
-- disable `a11y-mouse-events-have-key-events` warnings
-- upgrade `carbon-icons-svelte` to v10.36.0 to quell `a11y-mouse...` warnings
-
-**Refactor**
-
-- remove `formatStyle` utility in `OverflowMenu`
-
-**Documentation**
-
-- add `svelte:head` example usage for loading CDN styles
-- add instructions for dynamic theming
-- update number of available Carbon icons
-
-## [0.42.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.42.0) - 2021-07-22
-
-**Features**
-
-- add `helperText` prop to `DatePickerInput`
-
-**Fixes**
-
-- replace `svelte:body` with `svelte:window` when listening for an outside click
-
-**Documentation**
-
-- fix typos in styling instructions
-- update expanded nodes guidance
-- add `DatePicker` example "With helper text"
-
-**Refactor**
-
-- omit explicit `treeview.scss` import in `css/*.scss` files as it is included by default in `carbon-components@10.40`
-
-**Housekeeping**
-
-- upgrade `carbon-components` to v10.40.0
-
-## [0.41.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.41.0) - 2021-07-18
-
-**Features**
-
-- add expandedIds to `TreeView`
-
-**Fixes**
-
-- do not fall back to an empty string for a `DataTable` value if falsy
-- omit disabled attribute in `Button` if value is falsy
-
-**Documentation**
-
-- add styling instructions to the home page
-
-## [0.40.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.40.1) - 2021-07-14
-
-**Fixes**
-
-- focus first, non-disabled `TreeView` node if active id does not match the selected id
-- set `type="button"` on `OverflowMenu` to prevent submit behavior when pressing "Enter"
-- update semantic attributes in `OverflowMenuItem`
-- do not render `OverflowMenuItem` title attribute if using a slot
-- do not dispatch `NumberInput` on:change event on initialization
-- dynamically load ESM `flatpickr` rangePlugin
-- forward input, focus events to `Select`
-- type `DataTableRowId` as `any`, fixes
-
-## [0.40.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.40.0) - 2021-07-11
-
-**Breaking Changes**
-
-- remove `appendTo` prop in `DatePicker` for server-side rendering (SSR) compatibility
-
-**Features**
-
-- add `Breakpoint` component to detect the current Carbon grid size based on browser width
-- add `Theme` component to dynamically update the current theme client-side
-- add `valueFrom`, `valueTo` props for range `DatePicker`
-- export `multiSelectRef`, `fieldRef`, `selectionRef` in `MultiSelect`
-- add clearItem, clearAll instance methods to `LocalStorage`
-- support `NumberInput` readonly variant
-
-**Fixes**
-
-- append `DatePicker` instance to local reference to prevent arrow key locking
-- fix `on:change` type signature in `DatePicker`
-- export id prop in `ProgressBar`
-- add skeleton text for every row and column in `DataTableSkeleton`
-- deprecate `shouldShowBorder` prop in `Table`
-- correctly type exported constant props and function declarations as accessors in `SvelteComponentTyped` interface
-
-**Documentation**
-
-- document Breakpoint component
-- document Theme component
-- add ProgressBar "UX example"
-- add DatePicker example "Range"
-- add NumberInput example "Read-only variant"
-
-**Housekeeping**
-
-- upgrade `carbon-components` to v10.39.0
-
-## [0.39.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.39.0) - 2021-07-05
-
-**Breaking Changes**
-
-- remove `clipboard-copy` direct dependency; use native Clipboard API instead of `clipboard-copy` to copy text in `CopyButton`, `CodeSnippet`
-
-**Features**
-
-- add `TreeView` component
-- add `RecursiveList` component
-- support 3 buttons in `Modal`, `ComposedModal` via `secondaryButtons`
-- make `DataTable` title/description slottable
-- allow custom `expansionBreakpoint` in UI Shell `Header`, `SideNav`
-- dispatch "click:button--primary" as an alias to "submit" in `Modal`, `ComposedModal`
-
-**Fixes**
-
-- export `useStaticWidth` prop in `DataTable`
-- do not render `DataTable` table header if title/description not provided
-
-**Documentation**
-
-- add TreeView documentation
-- add RecursiveList documentation
-- add CopyButton examples "Overriding copy functionality", "Preventing copy functionality"
-- add CodeSnippet examples "Overriding copy functionality", "Preventing copy functionality"
-- add DataTable example "Static width"
-- include typedefs in Component API section
-
-## [0.38.2](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.38.2) - 2021-07-03
-
-**Fixes**
-
-- prevent `` from being read-only
-- only focus `OveflowMenuItem` if not disabled
-- trap tab focus within `Modal`, `ComposedModal`
-
-## [0.38.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.38.1) - 2021-06-29
-
-**Fixes**
-
-- add Gray 80 (g80) theme to `all.scss` and the pre-compiled `all.css`
-
-## [0.38.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.38.0) - 2021-06-27
-
-**Features**
-
-- support read-only `TextInput`
-- render a checkmark icon for the selected `ComboBox` item
-
-**Fixes**
-
-- adjust `FileUploaderDropContainer` markup to avoid accessibility error for nested interactive controls
-- use `ErrorFilled16` icon in `InlineLoading` for the error status
-- render iconDescription as title in error/warning icons in `InlineLoading`
-- update accessibility attributes for `StructuredList`
-- use `span` instead of `div` in `TooltipDefinition` to avoid potential invalid HTML
-- close `MultiSelect` menu when blurring the last filterable option
-- open/focus field when tab focusing a filterable `MultiSelect`
-- unblock tab navigation when blurring `MultiSelect`
-- select correct item using keyboard navigation in a filterable `ComboBox`
-- unblock input after clearing a `ComboBox` selection
-- update `ComboBox` input text if item is selected
-- toggle `SideNav` rail when clicking the hamburger menu
-- update `ContextMenu` class names
-- close `ContextMenu` when left clicking anywhere
-
-**Documentation**
-
-- add TextInput example "Read-only variant"
-- add Popover example "Popover alignment"
-
-**Housekeeping**
-
-- upgrade `carbon-components` to v10.38.0
-
-## [0.37.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.37.0) - 2021-06-26
-
-**Features**
-
-- add ProgressBar component
-
-**Fixes**
-
-- omit size prop in `ToolbarSearch`
-- omit passing iconDescription to `NotificationIcon` in `InlineNotification`, `ToastNotification`
-
-**Refactor**
-
-- use class directive in `TextInput`
-
-**Documentation**
-
-- add ProgressBar component documentation
-
-**Housekeeping**
-
-- upgrade `carbon-components` to version 10.37.0
-
-## [0.36.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.36.0) - 2021-06-26
-
-**Features**
-
-- add condensed, flush props to `StructuredList`
-- support `SideNav` rail
-- add isSelected prop to `HeaderNavItem`
-- make components with `labelText` prop slottable (e.g., ...)
-
-**Fixes**
-
-- set min/max height for multi-line `CodeSnippet`
-- make `ImageLoader` SSR compatible by using a window type check guard
-- default isSelected to false in `SideNavMenuItem`
-- forward keydown event to `TextArea`
-- deprecate border prop in `StructuredList`
-
-**Documentation**
-
-- add separate disabled example for filterable/interactive tags
-- update number of supported chart types from 17 to 20
-
-**Housekeeping**
-
-- upgrade `carbon-components` to version 10.36.0
-
-## [0.35.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.35.0) - 2021-06-26
-
-**Features**
-
-- support expressive styles for `Button`, `UnorderedList`, `OrderedList`
-- support large size for `Button` (`size="lg"`)
-- support large, extra-large `ButtonSkeleton` sizes
-- support field, small sizes for `FileUploaderItem`
-- allow custom `Search` icon
-- allow `NumberInput` input steppers to be hidden (`hideSteppers={true}`)
-- add `icon` prop to `TooltipIcon`
-- support disabled `TooltipIcon`
-
-**Fixes**
-
-- make `Tooltip` screenreader description less verbose
-
-**Documentation**
-
-- add Button examples "Large size", "Expressive styles"
-- add OrderedList example "Expressive styles"
-- add UnorderedList example "Expressive styles"
-- add Search example "Custom search icon"
-- add NumberInput example "Hidden steppers"
-- add TooltipIcon example "Disabled"
-
-**Housekeeping**
-
-- upgrade `carbon-components` to version 10.35.0
-
-## [0.34.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.34.0) - 2021-06-25
-
-**Features**
-
-- add new Gray 80 (g80) theme
-- support expandable `Search` variant
-- dispatch open, close, click:overlay events in `SideNav`
-- allow custom hamburger menu icons (`iconMenu`, `iconClose`)
-- support "xl" `Button` size
-- support "medium" `DataTable` size
-- support warning state, inline variant for `PasswordInput`
-
-**Fixes**
-
-- replace `` with semantic paragraph element for file uploader label
-- wrap `code` element with `pre`
-- add missing restProps annotation to `ToolbarSearch`
-
-**Refactor**
-
-- remove usage of deprecated `Icon` component
-- use button specific tooltip class for icon-only variant
-
-**Documentation**
-
-- update available site theming options to include Gray 80 (g80)
-- add Search example "Expandable variant"
-- add Button example "Extra-large size"
-- add DataTable example "Medium rows"
-- add PasswordInput examples "Inline" and "Warning state"
-
-**Housekeeping**
-
-- upgrade `carbon-components` to version 10.34.0
-
-## [0.33.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.33.0) - 2021-04-30
-
-**Features**
-
-- support nested object values for DataTable sorting
-- pass DataTable header display function to slotted cell
-- add icon prop to `Link` to support rendering links with icons; refactor `OutboundLink` to use `Link.icon` prop
-
-**Fixes**
-
-- prevent DataTable sorting from crashing by defaulting `undefined` to an empty string
-- add extra DataTable cell `colspan` to support expandable, selectable rows
-- support disabled state for `ClickableTile`
-- add missing "3x2" ratio to `AspectRatio`
-
-**Documentation**
-
-- add DataTable example ["Sortable with nested object values"](https://svelte.carbondesignsystem.com/components/DataTable#sortable-with-nested-object-values)
-- add ClickableTile example ["Disabled state"](https://svelte.carbondesignsystem.com/components/ClickableTile#disabled-state)
-- add Link example ["Link with icon"](https://svelte.carbondesignsystem.com/components/Link#link-with-icon)
-
-**Housekeeping**
-
-- upgrade `carbon-components` to version 10.33.0
-
-## [0.32.2](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.32.2) - 2021-04-23
-
-**Fixes**
-
-- prevent multiple Dropdown items from being selected by updating the `selectedId`
-- prevent the default keydown behavior so that pressing "Enter" should open the Dropdown menu
-- resolve Carbon icon imports to Svelte files in `DataTable`, `HamburgerMenu` components
-
-**Housekeeping**
-
-- patch `carbon-components` to version 10.32.1
-
-## [0.32.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.32.1) - 2021-04-02
-
-**Fixes**
-
-- hotfix compiled CSS to correctly render default background color for inputs
-
-## [0.32.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.32.0) - 2021-04-02
+## [0.32.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.32.0) - 2021-04-02
**Breaking Changes**
@@ -2003,7 +44,7 @@ Svelte version >=3.48.0 is required.
- upgrade `carbon-components` to version 10.32.0
- add `clipboard-copy` to direct dependencies
-## [0.31.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.31.1) - 2021-03-28
+## [0.31.1](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.31.1) - 2021-03-28
**Fixes**
@@ -2011,7 +52,7 @@ Svelte version >=3.48.0 is required.
- forward missing "keydown" event to `Form`
- forward click/keydown/mouse events in `FluidForm` to `Form`
-## [0.31.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.31.0) - 2021-03-20
+## [0.31.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.31.0) - 2021-03-20
**Breaking Changes**
@@ -2050,7 +91,7 @@ Svelte version >=3.48.0 is required.
- upgrade `carbon-components` to version 10.31.0
- upgrade `carbon-icons-svelte` to version 10.27.0 (icons are correctly typed using `SvelteComponentTyped`)
-## [0.30.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.30.0) - 2021-03-13
+## [0.30.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.30.0) - 2021-03-13
**Breaking Changes**
@@ -2092,13 +133,13 @@ Svelte version >=3.48.0 is required.
- upgrade `carbon-components` to v10.30.0
-## [0.29.2](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.29.2) - 2021-03-01
+## [0.29.2](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.29.2) - 2021-03-01
**Fixes**
- remove blank line after `slot` to correctly render button with icon in Safari 13
-## [0.29.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.29.1) - 2021-02-26
+## [0.29.1](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.29.1) - 2021-02-26
**Fixes**
@@ -2106,7 +147,7 @@ Svelte version >=3.48.0 is required.
- fix `truncate` action to preserve existing class names on node
- use new component tokens to correctly render CSS for tags, low contrast notifications
-## [0.29.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.29.0) - 2021-02-19
+## [0.29.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.29.0) - 2021-02-19
**Breaking Changes**
@@ -2139,7 +180,7 @@ Svelte version >=3.48.0 is required.
- Upgrade `carbon-components` to version 10.29.0
-## [0.28.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.28.0) - 2021-02-05
+## [0.28.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.28.0) - 2021-02-05
**Breaking Changes**
@@ -2171,7 +212,7 @@ Svelte version >=3.48.0 is required.
- Upgrade `carbon-components` to version 10.28.0
- Remove unused `@carbon/themes` development dependency; themes are pulled from `carbon-components`
-## [0.27.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.27.0) - 2021-01-28
+## [0.27.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.27.0) - 2021-01-28
**Features**
@@ -2232,24 +273,24 @@ Svelte version >=3.48.0 is required.
- Upgrade `@carbon/themes` to version 10.26.0
- Upgrade `autoprefixer`, `postcss`, `prettier-plugin-svelte`
-## [0.26.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.26.0) - 2020-12-11
+## [0.26.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.26.0) - 2020-12-11
**Features**
-- Render the UI Shell hamburger menu only if the `SideNav` component is present ([PR #457](https://github.com/carbon-design-system/carbon-components-svelte/pull/457), [issue #434](https://github.com/carbon-design-system/carbon-components-svelte/issues/434))
-- Clear the `Search` input value if the "Escape" key is pressed ([PR #448](https://github.com/carbon-design-system/carbon-components-svelte/pull/448))
-- Customize the `Tooltip` alignment using the `align` prop ([PR #446](https://github.com/carbon-design-system/carbon-components-svelte/pull/446), [issue #398](https://github.com/carbon-design-system/carbon-components-svelte/issues/398))
+- Render the UI Shell hamburger menu only if the `SideNav` component is present ([PR #457](https://github.com/IBM/carbon-components-svelte/pull/457), [issue #434](https://github.com/IBM/carbon-components-svelte/issues/434))
+- Clear the `Search` input value if the "Escape" key is pressed ([PR #448](https://github.com/IBM/carbon-components-svelte/pull/448))
+- Customize the `Tooltip` alignment using the `align` prop ([PR #446](https://github.com/IBM/carbon-components-svelte/pull/446), [issue #398](https://github.com/IBM/carbon-components-svelte/issues/398))
**Fixes**
-- Fix `files` prop type `FileUploader` to be a list of [Files](https://developer.mozilla.org/en-US/docs/Web/API/File) instead of file names ([PR #437](https://github.com/carbon-design-system/carbon-components-svelte/pull/437))
-- Allow binding decimal values in `NumberInput` ([PR #444](https://github.com/carbon-design-system/carbon-components-svelte/pull/444))
-- Spread `$$restProps` in `DataTableSkeleton` to the top-level element to be consistent with `DataTable` ([PR #441](https://github.com/carbon-design-system/carbon-components-svelte/pull/441), [issue #423](https://github.com/carbon-design-system/carbon-components-svelte/issues/423))
+- Fix `files` prop type `FileUploader` to be a list of [Files](https://developer.mozilla.org/en-US/docs/Web/API/File) instead of file names ([PR #437](https://github.com/IBM/carbon-components-svelte/pull/437))
+- Allow binding decimal values in `NumberInput` ([PR #444](https://github.com/IBM/carbon-components-svelte/pull/444))
+- Spread `$$restProps` in `DataTableSkeleton` to the top-level element to be consistent with `DataTable` ([PR #441](https://github.com/IBM/carbon-components-svelte/pull/441), [issue #423](https://github.com/IBM/carbon-components-svelte/issues/423))
- Close the `Tooltip` on the mousedown event; re-focus the tooltip icon after closing and forward `click`, `mousedown` events
-- Focus the `Dropdown` button correctly for multiple dropdowns ([PR #447](https://github.com/carbon-design-system/carbon-components-svelte/pull/447))
-- Focus the `ComboBox` input correctly for multiple combo boxes ([PR #447](https://github.com/carbon-design-system/carbon-components-svelte/pull/447))
-- Blur an opened `ComboBox` when clicking a search input ([PR #447](https://github.com/carbon-design-system/carbon-components-svelte/pull/447), [issue #436](https://github.com/carbon-design-system/carbon-components-svelte/issues/436))
-- Prevent cursor shift in UI Shell `HeaderSearch` when using the up/down arrow keys to navigate results ([PR #432](https://github.com/carbon-design-system/carbon-components-svelte/pull/432), [issue #431](https://github.com/carbon-design-system/carbon-components-svelte/issues/431))
+- Focus the `Dropdown` button correctly for multiple dropdowns ([PR #447](https://github.com/IBM/carbon-components-svelte/pull/447))
+- Focus the `ComboBox` input correctly for multiple combo boxes ([PR #447](https://github.com/IBM/carbon-components-svelte/pull/447))
+- Blur an opened `ComboBox` when clicking a search input ([PR #447](https://github.com/IBM/carbon-components-svelte/pull/447), [issue #436](https://github.com/IBM/carbon-components-svelte/issues/436))
+- Prevent cursor shift in UI Shell `HeaderSearch` when using the up/down arrow keys to navigate results ([PR #432](https://github.com/IBM/carbon-components-svelte/pull/432), [issue #431](https://github.com/IBM/carbon-components-svelte/issues/431))
- Deprecate `small` prop in `ButtonSkeleton`
- Fix `CodeSnippetSkeleton` type to only be "single" or "multi"
@@ -2268,29 +309,29 @@ Svelte version >=3.48.0 is required.
- Upgrade `carbon-components` to version 10.25 for the pre-compiled CSS StyleSheets
-## [0.25.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.25.1) - 2020-11-28
+## [0.25.1](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.25.1) - 2020-11-28
**Fixes**
-- set `selectedResultIndex` in HeaderSearch when clicking a result ([PR #430](https://github.com/carbon-design-system/carbon-components-svelte/pull/430), [issue #429](https://github.com/carbon-design-system/carbon-components-svelte/issues/429))
+- set `selectedResultIndex` in HeaderSearch when clicking a result ([PR #430](https://github.com/IBM/carbon-components-svelte/pull/430), [issue #429](https://github.com/IBM/carbon-components-svelte/issues/429))
-## [0.25.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.25.0) - 2020-11-27
+## [0.25.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.25.0) - 2020-11-27
**Features**
-- Add `padding` prop to Grid, Row, Column components ([PR #420](https://github.com/carbon-design-system/carbon-components-svelte/pull/420), [issue #410](https://github.com/carbon-design-system/carbon-components-svelte/issues/410))
-- Add `transition` prop to UI Shell `HeaderAction` to customize panel slide transition; by default, the slide duration is `200`ms ([PR #419](https://github.com/carbon-design-system/carbon-components-svelte/pull/419), [issue #384](https://github.com/carbon-design-system/carbon-components-svelte/issues/384))
+- Add `padding` prop to Grid, Row, Column components ([PR #420](https://github.com/IBM/carbon-components-svelte/pull/420), [issue #410](https://github.com/IBM/carbon-components-svelte/issues/410))
+- Add `transition` prop to UI Shell `HeaderAction` to customize panel slide transition; by default, the slide duration is `200`ms ([PR #419](https://github.com/IBM/carbon-components-svelte/pull/419), [issue #384](https://github.com/IBM/carbon-components-svelte/issues/384))
**Fixes**
-- fix `Files` type for FileUploader ([PR #422](https://github.com/carbon-design-system/carbon-components-svelte/pull/422), [issue #421](https://github.com/carbon-design-system/carbon-components-svelte/issues/421))
-- remove the fly transition from HamburgerMenu ([PR #419](https://github.com/carbon-design-system/carbon-components-svelte/pull/419), [issue #384](https://github.com/carbon-design-system/carbon-components-svelte/issues/384))
+- fix `Files` type for FileUploader ([PR #422](https://github.com/IBM/carbon-components-svelte/pull/422), [issue #421](https://github.com/IBM/carbon-components-svelte/issues/421))
+- remove the fly transition from HamburgerMenu ([PR #419](https://github.com/IBM/carbon-components-svelte/pull/419), [issue #384](https://github.com/IBM/carbon-components-svelte/issues/384))
**Documentation**
-- add ["Padded columns"](https://svelte.carbondesignsystem.com/components/Grid#padded-columns) example to Grid docs
-- demo different transitions in ["Header with app switcher"](https://svelte.carbondesignsystem.com/components/UIShell#header-with-app-switcher) example in UI Shell
-- describe use case for [using native styles in OrderedList](https://svelte.carbondesignsystem.com/components/OrderedList#native-list-styles)
+- add ["Padded columns"](https://carbon-svelte.vercel.app/components/Grid#padded-columns) example to Grid docs
+- demo different transitions in ["Header with app switcher"](https://carbon-svelte.vercel.app/components/UIShell#header-with-app-switcher) example in UI Shell
+- describe use case for [using native styles in OrderedList](https://carbon-svelte.vercel.app/components/OrderedList#native-list-styles)
**Housekeeping**
@@ -2303,70 +344,70 @@ Svelte version >=3.48.0 is required.
- [@ispyinternet](https://github.com/ispyinternet)
- [@miedzikd](https://github.com/miedzikd)
-## [0.24.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.24.0) - 2020-11-26
+## [0.24.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.24.0) - 2020-11-26
**Features**
-- Add HeaderSearch component for the UI Shell that can render user-provided search results ([PR #417](https://github.com/carbon-design-system/carbon-components-svelte/pull/417), [issue #395](https://github.com/carbon-design-system/carbon-components-svelte/issues/395)); HeaderActionSearch is deprecated in favor of HeaderSearch
-- Expand `headers` prop type in DataTableSkeleton to be consistent with that of the DataTable ([PR #415](https://github.com/carbon-design-system/carbon-components-svelte/pull/415), [issue #413](https://github.com/carbon-design-system/carbon-components-svelte/issues/413))
+- Add HeaderSearch component for the UI Shell that can render user-provided search results ([PR #417](https://github.com/IBM/carbon-components-svelte/pull/417), [issue #395](https://github.com/IBM/carbon-components-svelte/issues/395)); HeaderActionSearch is deprecated in favor of HeaderSearch
+- Expand `headers` prop type in DataTableSkeleton to be consistent with that of the DataTable ([PR #415](https://github.com/IBM/carbon-components-svelte/pull/415), [issue #413](https://github.com/IBM/carbon-components-svelte/issues/413))
**Fixes**
-- Update `DataTableRow` prop type in DataTable to require an "id" key and value ([PR #415](https://github.com/carbon-design-system/carbon-components-svelte/pull/415), [issue #414](https://github.com/carbon-design-system/carbon-components-svelte/issues/414))
+- Update `DataTableRow` prop type in DataTable to require an "id" key and value ([PR #415](https://github.com/IBM/carbon-components-svelte/pull/415), [issue #414](https://github.com/IBM/carbon-components-svelte/issues/414))
**Documentation**
-- Add example ["Skeleton with object headers"](https://svelte.carbondesignsystem.com/components/DataTable#skeleton-with-object-headers) to the DataTable docs
-- Add example ["Header with global search"](https://svelte.carbondesignsystem.com/components/UIShell#header-with-global-search) to the UI Shell docs
+- Add example ["Skeleton with object headers"](https://carbon-svelte.vercel.app/components/DataTable#skeleton-with-object-headers) to the DataTable docs
+- Add example ["Header with global search"](https://carbon.vercel.app/components/UIShell#header-with-global-search) to the UI Shell docs
- deprecate HeaderActionSearch in favor of HeaderSearch
-## [0.23.2](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.23.2) - 2020-11-25
+## [0.23.2](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.23.2) - 2020-11-25
**Fixes**
-- Fix dispatched "change" event in RadioButtonGroup ([PR #408](https://github.com/carbon-design-system/carbon-components-svelte/pull/408))
-- Export component types and interfaces ([PR #411](https://github.com/carbon-design-system/carbon-components-svelte/pull/411), [issue #409](https://github.com/carbon-design-system/carbon-components-svelte/issues/409))
+- Fix dispatched "change" event in RadioButtonGroup ([PR #408](https://github.com/IBM/carbon-components-svelte/pull/408))
+- Export component types and interfaces ([PR #411](https://github.com/IBM/carbon-components-svelte/pull/411), [issue #409](https://github.com/IBM/carbon-components-svelte/issues/409))
-## [0.23.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.23.1) - 2020-11-22
+## [0.23.1](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.23.1) - 2020-11-22
**Fixes**
-- Fix `selected` prop reactivity in RadioButtonGroup so that it can be programmatically updated ([PR #407](https://github.com/carbon-design-system/carbon-components-svelte/pull/407), [issue #406](https://github.com/carbon-design-system/carbon-components-svelte/issues/406))
-- Allow click propagation in ListBox so that list box menus can close correctly; this fixes behavior in the ComboBox, Dropdown, and MultiSelect components ([PR #405](https://github.com/carbon-design-system/carbon-components-svelte/pull/405), [issue #388](https://github.com/carbon-design-system/carbon-components-svelte/issues/388))
+- Fix `selected` prop reactivity in RadioButtonGroup so that it can be programmatically updated ([PR #407](https://github.com/IBM/carbon-components-svelte/pull/407), [issue #406](https://github.com/IBM/carbon-components-svelte/issues/406))
+- Allow click propagation in ListBox so that list box menus can close correctly; this fixes behavior in the ComboBox, Dropdown, and MultiSelect components ([PR #405](https://github.com/IBM/carbon-components-svelte/pull/405), [issue #388](https://github.com/IBM/carbon-components-svelte/issues/388))
**Documentation**
-- Add [programmatic RadioButton example](https://svelte.carbondesignsystem.com/components/RadioButton#programmatic-usage)
-- Add [multiple ComboBox example](https://svelte.carbondesignsystem.com/components/ComboBox#multiple-combo-boxes)
-- Add [multiple Dropdown example](https://svelte.carbondesignsystem.com/components/Dropdown#multiple-dropdowns)
-- Add [multiple MultiSelect example](https://svelte.carbondesignsystem.com/components/MultiSelect#multiple-multi-select-dropdowns)
-- Add [ExpandableAccordion recipe](https://svelte.carbondesignsystem.com/recipes/ExpandableAccordion#expandable-accordion)
+- Add [programmatic RadioButton example](https://carbon-svelte.vercel.app/components/RadioButton#programmatic-usage)
+- Add [multiple ComboBox example](https://carbon-svelte.vercel.app/components/ComboBox#multiple-combo-boxes)
+- Add [multiple Dropdown example](https://carbon-svelte.vercel.app/components/Dropdown#multiple-dropdowns)
+- Add [multiple MultiSelect example](https://carbon-svelte.vercel.app/components/MultiSelect#multiple-multi-select-dropdowns)
+- Add [ExpandableAccordion recipe](https://carbon-svelte.vercel.app/recipes/ExpandableAccordion#expandable-accordion)
-## [0.23.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.23.0) - 2020-11-20
+## [0.23.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.23.0) - 2020-11-20
**Features**
-- Persist UI Shell Header hamburger menu if `persistentHamburgerMenu` is `true` ([PR #396](https://github.com/carbon-design-system/carbon-components-svelte/pull/396), [issue #374](https://github.com/carbon-design-system/carbon-components-svelte/issues/374), [rendered example](https://svelte.carbondesignsystem.com/framed/UIShell/PersistedHamburgerMenu))
-- Disable auto focus in ComposedModal if `selectorPrimaryFocus` is `null` ([PR #393](https://github.com/carbon-design-system/carbon-components-svelte/pull/393))
-- Use small size Toggle variant if `size` is `"sm"`; deprecate ToggleSmall which will be removed in the next major release ([PR #401](https://github.com/carbon-design-system/carbon-components-svelte/pull/401))
+- Persist UI Shell Header hamburger menu if `persistentHamburgerMenu` is `true` ([PR #396](https://github.com/IBM/carbon-components-svelte/pull/396), [issue #374](https://github.com/IBM/carbon-components-svelte/issues/374), [rendered example](https://carbon-svelte.vercel.app/framed/UIShell/PersistedHamburgerMenu))
+- Disable auto focus in ComposedModal if `selectorPrimaryFocus` is `null` ([PR #393](https://github.com/IBM/carbon-components-svelte/pull/393))
+- Use small size Toggle variant if `size` is `"sm"`; deprecate ToggleSmall which will be removed in the next major release ([PR #401](https://github.com/IBM/carbon-components-svelte/pull/401))
**Fixes**
-- Fix `currentIndex` reactivity in ProgressIndicator so that it can be programmatically updated ([PR #404](https://github.com/carbon-design-system/carbon-components-svelte/pull/404), [issue #399](https://github.com/carbon-design-system/carbon-components-svelte/issues/399))
+- Fix `currentIndex` reactivity in ProgressIndicator so that it can be programmatically updated ([PR #404](https://github.com/IBM/carbon-components-svelte/pull/404), [issue #399](https://github.com/IBM/carbon-components-svelte/issues/399))
**Refactoring**
-- Rewrite TypeScript definitions with better type signatures for slots, dispatched events; fix IntrinsicAttributes errors ([PR #385](https://github.com/carbon-design-system/carbon-components-svelte/pull/385), [issue #304](https://github.com/carbon-design-system/carbon-components-svelte/issues/304))
-- Remove useless if statement that wraps `svelte:component` in Button; by design, `svelte:component` will not render falsy values ([PR #402](https://github.com/carbon-design-system/carbon-components-svelte/pull/402))
+- Rewrite TypeScript definitions with better type signatures for slots, dispatched events; fix IntrinsicAttributes errors ([PR #385](https://github.com/IBM/carbon-components-svelte/pull/385), [issue #304](https://github.com/IBM/carbon-components-svelte/issues/304))
+- Remove useless if statement that wraps `svelte:component` in Button; by design, `svelte:component` will not render falsy values ([PR #402](https://github.com/IBM/carbon-components-svelte/pull/402))
**Documentation**
-- Update auto-generated Component API documentation with output from [sveld](https://github.com/carbon-design-system/sveld)
+- Update auto-generated Component API documentation with output from [sveld](https://github.com/IBM/sveld)
- Label reactive component props and list them first
-- Replace back ticks in Component API prop descriptions with a `code` tag ([PR #392](https://github.com/carbon-design-system/carbon-components-svelte/pull/392), [issue #390](https://github.com/carbon-design-system/carbon-components-svelte/issues/390))
-- Simplify date sort method in ["Sortable with custom display and sort methods"](https://svelte.carbondesignsystem.com/components/DataTable#sortable-with-custom-display-and-sort-methods) DataTable example ([PR #382](https://github.com/carbon-design-system/carbon-components-svelte/pull/382))
-- Add [programmatic ProgressIndicator](https://svelte.carbondesignsystem.com/components/ProgressIndicator#programmatic-usage) example
-- Add [vertical ProgressIndicatorSkeleton](https://svelte.carbondesignsystem.com/components/ProgressIndicator#skeleton-vertical) example
+- Replace back ticks in Component API prop descriptions with a `code` tag ([PR #392](https://github.com/IBM/carbon-components-svelte/pull/392), [issue #390](https://github.com/IBM/carbon-components-svelte/issues/390))
+- Simplify date sort method in ["Sortable with custom display and sort methods"](https://carbon-svelte.vercel.app/components/DataTable#sortable-with-custom-display-and-sort-methods) DataTable example ([PR #382](https://github.com/IBM/carbon-components-svelte/pull/382))
+- Add [programmatic ProgressIndicator](https://carbon-svelte.vercel.app/components/ProgressIndicator#programmatic-usage) example
+- Add [vertical ProgressIndicatorSkeleton](https://carbon-svelte.vercel.app/components/ProgressIndicator#skeleton-vertical) example
- Add deprecation warning to the ToggleSmall component
**Housekeeping**
@@ -2377,7 +418,7 @@ Svelte version >=3.48.0 is required.
- Internal component TypeScript interfaces are no longer exported to avoid polluting library exports
-## [0.22.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.22.0) - 2020-10-30
+## [0.22.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.22.0) - 2020-10-30
**Features**
@@ -2407,14 +448,14 @@ Svelte version >=3.48.0 is required.
- upgrade `carbon-components` to v10.23.1, `@carbon/themes` to v10.22.1
- bump/patch development dependencies
-## [0.21.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.21.0) - 2020-10-26
+## [0.21.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.21.0) - 2020-10-26
**Features**
-- ListBoxMenu: forward "scroll" event ([PR #366](https://github.com/carbon-design-system/carbon-components-svelte/pull/366))
-- ComboBox: export reference to list box menu ([PR #366](https://github.com/carbon-design-system/carbon-components-svelte/pull/366))
-- DataTable: add `ToolbarMenu`, `ToolbarMenuItem` ([PR #369](https://github.com/carbon-design-system/carbon-components-svelte/pull/369))
-- DataTable: support empty table body columns by adding optional `empty` key to `headers` prop ([PR #370](https://github.com/carbon-design-system/carbon-components-svelte/pull/370))
+- ListBoxMenu: forward "scroll" event ([PR #366](https://github.com/IBM/carbon-components-svelte/pull/366))
+- ComboBox: export reference to list box menu ([PR #366](https://github.com/IBM/carbon-components-svelte/pull/366))
+- DataTable: add `ToolbarMenu`, `ToolbarMenuItem` ([PR #369](https://github.com/IBM/carbon-components-svelte/pull/369))
+- DataTable: support empty table body columns by adding optional `empty` key to `headers` prop ([PR #370](https://github.com/IBM/carbon-components-svelte/pull/370))
- Dropdown: support "sm", "xl" field sizes
**Fixes**
@@ -2424,11 +465,11 @@ Svelte version >=3.48.0 is required.
**Documentation**
-- DataTable: add example ["Empty column with overflow menu"](https://svelte.carbondesignsystem.com/components/DataTable#empty-column-with-overflow-menu)
+- DataTable: add example ["Empty column with overflow menu"](https://carbon-svelte.vercel.app/components/DataTable#empty-column-with-overflow-menu)
- hand off current theme for examples opened in a new tab
- add field size examples for `Dropdown`, `MultiSelect`, `Select`
-## [0.20.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.20.0) - 2020-10-24
+## [0.20.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.20.0) - 2020-10-24
**Features**
@@ -2439,7 +480,7 @@ Svelte version >=3.48.0 is required.
**Fixes**
-- DataTable: include sort direction with custom sort method ([PR #356](https://github.com/carbon-design-system/carbon-components-svelte/pull/356))
+- DataTable: include sort direction with custom sort method ([PR #356](https://github.com/IBM/carbon-components-svelte/pull/356))
- fix: allow item ids in ComboBox, Dropdown, MultiSelect to be numbers
- fix(ui-shell): initialize `platformName` as empty string to prevent rendering as "undefined"
@@ -2450,27 +491,27 @@ Svelte version >=3.48.0 is required.
**Documentation**
- new DataTable examples:
- - [With custom display and sort methods](https://svelte.carbondesignsystem.com/components/DataTable#with-custom-display-and-sort-methods)
- - [With toolbar](https://svelte.carbondesignsystem.com/components/DataTable#with-toolbar)
- - [With toolbar (small size)](https://svelte.carbondesignsystem.com/components/DataTable#with-toolbar-small-size)
- - [Selectable](https://svelte.carbondesignsystem.com/components/DataTable#selectable)
- - [Initial selected rows](https://svelte.carbondesignsystem.com/components/DataTable#initial-selected-rows)
- - [Selectable with batch actions](https://svelte.carbondesignsystem.com/components/DataTable#selectable-with-batch-actions)
- - [Selectable (radio)](https://svelte.carbondesignsystem.com/components/DataTable#selectable-radio)
+ - [With custom display and sort methods](https://carbon-svelte.vercel.app/components/DataTable#with-custom-display-and-sort-methods)
+ - [With toolbar](https://carbon-svelte.vercel.app/components/DataTable#with-toolbar)
+ - [With toolbar (small size)](https://carbon-svelte.vercel.app/components/DataTable#with-toolbar-small-size)
+ - [Selectable](https://carbon-svelte.vercel.app/components/DataTable#selectable)
+ - [Initial selected rows](https://carbon-svelte.vercel.app/components/DataTable#initial-selected-rows)
+ - [Selectable with batch actions](https://carbon-svelte.vercel.app/components/DataTable#selectable-with-batch-actions)
+ - [Selectable (radio)](https://carbon-svelte.vercel.app/components/DataTable#selectable-radio)
- fix(docgen): list both default and named slots in `COMPONENT_INDEX.md`
-## [0.19.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.19.0) - 2020-10-23
+## [0.19.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.19.0) - 2020-10-23
**Features**
-- DataTable: add optional display and sort methods in header object ([PR #352](https://github.com/carbon-design-system/carbon-components-svelte/pull/352))
-- ProgressIndicator: add preventChangeOnClick; default value is `false` ([PR #351](https://github.com/carbon-design-system/carbon-components-svelte/pull/351))
+- DataTable: add optional display and sort methods in header object ([PR #352](https://github.com/IBM/carbon-components-svelte/pull/352))
+- ProgressIndicator: add preventChangeOnClick; default value is `false` ([PR #351](https://github.com/IBM/carbon-components-svelte/pull/351))
- TooltipDefinition: make tooltip text slottable through `slot="tooltip"`
**Fixes**
-- ProgressIndicator: make `currentIndex` reactive ([PR #351](https://github.com/carbon-design-system/carbon-components-svelte/pull/351))
-- ComposedModal: use `onDestroy` for destroy logic due to async usage of `onMount`([PR #348](https://github.com/carbon-design-system/carbon-components-svelte/pull/348))
+- ProgressIndicator: make `currentIndex` reactive ([PR #351](https://github.com/IBM/carbon-components-svelte/pull/351))
+- ComposedModal: use `onDestroy` for destroy logic due to async usage of `onMount`([PR #348](https://github.com/IBM/carbon-components-svelte/pull/348))
- Search: forward `size` prop to Search skeleton
**Refactoring**
@@ -2487,54 +528,54 @@ Svelte version >=3.48.0 is required.
- CodeSnippet: add multi-line skeleton example
- InlineLoading: add UX example showcasing various statuses
-## [0.18.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.18.0) - 2020-10-17
+## [0.18.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.18.0) - 2020-10-17
**Features**
-- DataTable: support individual, batch row expansion ([PR 341](https://github.com/carbon-design-system/carbon-components-svelte/pull/341))
-- DataTable: make header, row cells slottable ([PR 342](https://github.com/carbon-design-system/carbon-components-svelte/pull/342))
+- DataTable: support individual, batch row expansion ([PR 341](https://github.com/IBM/carbon-components-svelte/pull/341))
+- DataTable: make header, row cells slottable ([PR 342](https://github.com/IBM/carbon-components-svelte/pull/342))
**Fixes**
-- fix(data-table): fix misaligned tall row table headers ([PR 340](https://github.com/carbon-design-system/carbon-components-svelte/pull/340))
-- Documentation generator: parse `ArrayExpression` in exported props ([PR 341](https://github.com/carbon-design-system/carbon-components-svelte/pull/341))
+- fix(data-table): fix misaligned tall row table headers ([PR 340](https://github.com/IBM/carbon-components-svelte/pull/340))
+- Documentation generator: parse `ArrayExpression` in exported props ([PR 341](https://github.com/IBM/carbon-components-svelte/pull/341))
**Breaking Changes**
-- Remove top-level slot in `DataTable` in favor of named slots ([PR 341](https://github.com/carbon-design-system/carbon-components-svelte/pull/341))
+- Remove top-level slot in `DataTable` in favor of named slots ([PR 341](https://github.com/IBM/carbon-components-svelte/pull/341))
**Documentation**
-- add Component API metadata ([PR 340](https://github.com/carbon-design-system/carbon-components-svelte/pull/340))
-- DataTable: add expandable, batch expandable examples ([PR 341](https://github.com/carbon-design-system/carbon-components-svelte/pull/341))
-- DataTable: add slottable cells example ([PR 342](https://github.com/carbon-design-system/carbon-components-svelte/pull/342))
+- add Component API metadata ([PR 340](https://github.com/IBM/carbon-components-svelte/pull/340))
+- DataTable: add expandable, batch expandable examples ([PR 341](https://github.com/IBM/carbon-components-svelte/pull/341))
+- DataTable: add slottable cells example ([PR 342](https://github.com/IBM/carbon-components-svelte/pull/342))
-## [0.17.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.17.0) - 2020-10-16
+## [0.17.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.17.0) - 2020-10-16
**Features**
-- feat: set `rel="nooopener noreferrer"` if `target="_blank"` on link components ([PR #321](https://github.com/carbon-design-system/carbon-components-svelte/pull/321))
-- feat: support `Search` disabled state ([PR #330](https://github.com/carbon-design-system/carbon-components-svelte/pull/330))
-- feat(button-skeleton): add size prop consistent with Button ([PR #332](https://github.com/carbon-design-system/carbon-components-svelte/pull/332))
-- feat(progress-indicator-skeleton): add count prop ([PR #332](https://github.com/carbon-design-system/carbon-components-svelte/pull/332))
-- feat(accordion): add disabled prop for `Accordion` and `AccordionItem` ([PR #333](https://github.com/carbon-design-system/carbon-components-svelte/pull/333))
-- feat(accordion): add "sm", "xl" size variants to `Accordion` and `AccordionSkeleton` ([PR #333](https://github.com/carbon-design-system/carbon-components-svelte/pull/333))
-- feat(content-switcher): add "sm", "xl" size variants ([PR #334](https://github.com/carbon-design-system/carbon-components-svelte/pull/334))
-- feat(code-snippet): add wrapText prop for "multi" type CodeSnippet ([PR #335](https://github.com/carbon-design-system/carbon-components-svelte/pull/335))
-- feat(aspect-ratio): add AspectRatio component ([PR #336](https://github.com/carbon-design-system/carbon-components-svelte/pull/336))
-- feat(dropdown): dispatch select event, use window instead of body for click events ([PR #339](https://github.com/carbon-design-system/carbon-components-svelte/pull/339))
+- feat: set `rel="nooopener noreferrer"` if `target="_blank"` on link components ([PR #321](https://github.com/IBM/carbon-components-svelte/pull/321))
+- feat: support `Search` disabled state ([PR #330](https://github.com/IBM/carbon-components-svelte/pull/330))
+- feat(button-skeleton): add size prop consistent with Button ([PR #332](https://github.com/IBM/carbon-components-svelte/pull/332))
+- feat(progress-indicator-skeleton): add count prop ([PR #332](https://github.com/IBM/carbon-components-svelte/pull/332))
+- feat(accordion): add disabled prop for `Accordion` and `AccordionItem` ([PR #333](https://github.com/IBM/carbon-components-svelte/pull/333))
+- feat(accordion): add "sm", "xl" size variants to `Accordion` and `AccordionSkeleton` ([PR #333](https://github.com/IBM/carbon-components-svelte/pull/333))
+- feat(content-switcher): add "sm", "xl" size variants ([PR #334](https://github.com/IBM/carbon-components-svelte/pull/334))
+- feat(code-snippet): add wrapText prop for "multi" type CodeSnippet ([PR #335](https://github.com/IBM/carbon-components-svelte/pull/335))
+- feat(aspect-ratio): add AspectRatio component ([PR #336](https://github.com/IBM/carbon-components-svelte/pull/336))
+- feat(dropdown): dispatch select event, use window instead of body for click events ([PR #339](https://github.com/IBM/carbon-components-svelte/pull/339))
**Fixes**
-- fix(combo-box): disabled combobox should not open ([PR #329](https://github.com/carbon-design-system/carbon-components-svelte/pull/329))
-- fix(inline-loading): add wrapper class "bx--inline-loading" ([PR #332](https://github.com/carbon-design-system/carbon-components-svelte/pull/332))
-- fix(breadcrumb): forward noTrailingSlash to skeleton ([PR #332](https://github.com/carbon-design-system/carbon-components-svelte/pull/332))
-- fix(skeleton-text): unkey paragraph rows due to high collision rate ([PR #332](https://github.com/carbon-design-system/carbon-components-svelte/pull/332))
-- fix(accordion-skeleton): forward align prop ([PR #333](https://github.com/carbon-design-system/carbon-components-svelte/pull/333))
+- fix(combo-box): disabled combobox should not open ([PR #329](https://github.com/IBM/carbon-components-svelte/pull/329))
+- fix(inline-loading): add wrapper class "bx--inline-loading" ([PR #332](https://github.com/IBM/carbon-components-svelte/pull/332))
+- fix(breadcrumb): forward noTrailingSlash to skeleton ([PR #332](https://github.com/IBM/carbon-components-svelte/pull/332))
+- fix(skeleton-text): unkey paragraph rows due to high collision rate ([PR #332](https://github.com/IBM/carbon-components-svelte/pull/332))
+- fix(accordion-skeleton): forward align prop ([PR #333](https://github.com/IBM/carbon-components-svelte/pull/333))
**Refactoring**
-- refactor(icon): remove old logic that inferred icon size from function name ([PR #332](https://github.com/carbon-design-system/carbon-components-svelte/pull/332))
+- refactor(icon): remove old logic that inferred icon size from function name ([PR #332](https://github.com/IBM/carbon-components-svelte/pull/332))
**Documentation**
@@ -2555,31 +596,31 @@ Svelte version >=3.48.0 is required.
**Housekeeping**
-- chore(deps-dev): bump carbon-components to ^v10.22 ([PR #337](https://github.com/carbon-design-system/carbon-components-svelte/pull/337))
-- retire Storybook by removing Storybook-related dependencies, set-up and stories ([PR #331](https://github.com/carbon-design-system/carbon-components-svelte/pull/331))
-- use `npm-run-all` to run `build:css` and `build:lib` in parallel ([PR #331](https://github.com/carbon-design-system/carbon-components-svelte/pull/331))
+- chore(deps-dev): bump carbon-components to ^v10.22 ([PR #337](https://github.com/IBM/carbon-components-svelte/pull/337))
+- retire Storybook by removing Storybook-related dependencies, set-up and stories ([PR #331](https://github.com/IBM/carbon-components-svelte/pull/331))
+- use `npm-run-all` to run `build:css` and `build:lib` in parallel ([PR #331](https://github.com/IBM/carbon-components-svelte/pull/331))
-## [0.16.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.16.0) - 2020-10-12
+## [0.16.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.16.0) - 2020-10-12
**Features**
-- Pagination: add `pageSizeInputDisabled` prop to hide page size buttons (default is `false`) ([PR #292](https://github.com/carbon-design-system/carbon-components-svelte/pull/292))
-- ListBoxMenu: add `ref` prop ([PR #303](https://github.com/carbon-design-system/carbon-components-svelte/pull/303))
+- Pagination: add `pageSizeInputDisabled` prop to hide page size buttons (default is `false`) ([PR #292](https://github.com/IBM/carbon-components-svelte/pull/292))
+- ListBoxMenu: add `ref` prop ([PR #303](https://github.com/IBM/carbon-components-svelte/pull/303))
- Pre-compiled CSS: upgrade `carbon-components` to version 10.21
**Fixes**
-- Link: explicitly define `href` prop to fix TypeScript errors ([PR #301](https://github.com/carbon-design-system/carbon-components-svelte/pull/301))
-- RadioButtonGroup: explicitly define `id` prop to fix TypeScript errors ([PR #303](https://github.com/carbon-design-system/carbon-components-svelte/pull/303))
-- ComboBox: `light` prop should use the light variant ([PR #303](https://github.com/carbon-design-system/carbon-components-svelte/pull/303))
-- ComposedModal: class "bx--body--with-modal-open" should be removed when closing the modal ([PR #306](https://github.com/carbon-design-system/carbon-components-svelte/pull/306))
-- Dropdown: remove unused `setContext` import ([PR #308](https://github.com/carbon-design-system/carbon-components-svelte/pull/308))
-- `css/all.css`: default theme should be "white," not "g10" ([PR #322](https://github.com/carbon-design-system/carbon-components-svelte/pull/322))
-- UI Shell: `HeaderAction` menu should close when clicking in the window, not just the document body ([PR #323](https://github.com/carbon-design-system/carbon-components-svelte/pull/323))
+- Link: explicitly define `href` prop to fix TypeScript errors ([PR #301](https://github.com/IBM/carbon-components-svelte/pull/301))
+- RadioButtonGroup: explicitly define `id` prop to fix TypeScript errors ([PR #303](https://github.com/IBM/carbon-components-svelte/pull/303))
+- ComboBox: `light` prop should use the light variant ([PR #303](https://github.com/IBM/carbon-components-svelte/pull/303))
+- ComposedModal: class "bx--body--with-modal-open" should be removed when closing the modal ([PR #306](https://github.com/IBM/carbon-components-svelte/pull/306))
+- Dropdown: remove unused `setContext` import ([PR #308](https://github.com/IBM/carbon-components-svelte/pull/308))
+- `css/all.css`: default theme should be "white," not "g10" ([PR #322](https://github.com/IBM/carbon-components-svelte/pull/322))
+- UI Shell: `HeaderAction` menu should close when clicking in the window, not just the document body ([PR #323](https://github.com/IBM/carbon-components-svelte/pull/323))
**Performance**
-- DatePicker: remove default i10n locales import to reduce bundle size by ~42 kB ([PR #316](https://github.com/carbon-design-system/carbon-components-svelte/pull/316))
+- DatePicker: remove default i10n locales import to reduce bundle size by ~42 kB ([PR #316](https://github.com/IBM/carbon-components-svelte/pull/316))
**Breaking Changes**
@@ -2588,37 +629,37 @@ Svelte version >=3.48.0 is required.
**Documentation**
-- Redesign component [documentation website](https://svelte.carbondesignsystem.com/)
+- Redesign component documentation website (Short link: [ibm.biz/carbon-svelte](http://ibm.biz/carbon-svelte)); deployments sponsored by Vercel
- Update development workflow in `CONTRIBUTING.md`
-- Typo fixes in `README.md` ([PR #324](https://github.com/carbon-design-system/carbon-components-svelte/pull/324), [PR #325](https://github.com/carbon-design-system/carbon-components-svelte/pull/325))
+- Typo fixes in `README.md` ([PR #324](https://github.com/IBM/carbon-components-svelte/pull/324), [PR #325](https://github.com/IBM/carbon-components-svelte/pull/325))
**Housekeeping**
-- Git hooks: only lint staged files in the pre-commit Git hook ([PR #319](https://github.com/carbon-design-system/carbon-components-svelte/pull/319))
+- Git hooks: only lint staged files in the pre-commit Git hook ([PR #319](https://github.com/IBM/carbon-components-svelte/pull/319))
-## [0.15.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.15.0) - 2020-10-01
+## [0.15.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.15.0) - 2020-10-01
**Features**
-- DataTableSkeleton: add `size` prop to support "compact", "small", "tall" row heights ([PR #279](https://github.com/carbon-design-system/carbon-components-svelte/pull/279), thanks [@albertms10](https://github.com/albertms10))
+- DataTableSkeleton: add `size` prop to support "compact", "small", "tall" row heights ([PR #279](https://github.com/IBM/carbon-components-svelte/pull/279), thanks [@albertms10](https://github.com/albertms10))
-- HeaderPanelLink: forward click event ([PR #286](https://github.com/carbon-design-system/carbon-components-svelte/pull/286), thanks [@weaseldotro](https://github.com/weaseldotro))
+- HeaderPanelLink: forward click event ([PR #286](https://github.com/IBM/carbon-components-svelte/pull/286), thanks [@weaseldotro](https://github.com/weaseldotro))
-- FluidForm: add `FluidForm` component and support fluid variants for `TextInput`, `PasswordInput` ([PR #293](https://github.com/carbon-design-system/carbon-components-svelte/pull/293), thanks [@josefaidt](https://github.com/josefaidt))
+- FluidForm: add `FluidForm` component and support fluid variants for `TextInput`, `PasswordInput` ([PR #293](https://github.com/IBM/carbon-components-svelte/pull/293), thanks [@josefaidt](https://github.com/josefaidt))
-- UI Shell: add `ref` prop to interactive (i.e., anchor links, buttons) UI Shell elements ([PR #297](https://github.com/carbon-design-system/carbon-components-svelte/pull/297), thanks [@josefaidt](https://github.com/josefaidt))
+- UI Shell: add `ref` prop to interactive (i.e., anchor links, buttons) UI Shell elements ([PR #297](https://github.com/IBM/carbon-components-svelte/pull/297), thanks [@josefaidt](https://github.com/josefaidt))
**Fixes**
-- Slider: attach mousemove/touch events to document body, not slider input ([issue #288](https://github.com/carbon-design-system/carbon-components-svelte/issues/288))
+- Slider: attach mousemove/touch events to document body, not slider input ([issue #288](https://github.com/IBM/carbon-components-svelte/issues/288))
-- Slider: `value` prop type should be a `number`, not a `string` ([issue #289](https://github.com/carbon-design-system/carbon-components-svelte/issues/289))
+- Slider: `value` prop type should be a `number`, not a `string` ([issue #289](https://github.com/IBM/carbon-components-svelte/issues/289))
- Slider: input value should not update if `disabled` is `true`
- Slider: `change` event should only be dispatched if the value changes
-- UI Shell: correctly bind `ref` prop in `HeaderGlobalAction` ([PR #297](https://github.com/carbon-design-system/carbon-components-svelte/pull/297), thanks [@josefaidt](https://github.com/josefaidt))
+- UI Shell: correctly bind `ref` prop in `HeaderGlobalAction` ([PR #297](https://github.com/IBM/carbon-components-svelte/pull/297), thanks [@josefaidt](https://github.com/josefaidt))
- export `DatePickerSkeleton`, `FileUploaderSkeleton` components
@@ -2632,60 +673,60 @@ Svelte version >=3.48.0 is required.
**Housekeeping**
-- prettier: enable `svelteBracketNewLine` for improved readability ([PR #281](https://github.com/carbon-design-system/carbon-components-svelte/pull/281), thanks [@josefaidt](https://github.com/josefaidt))
+- prettier: enable `svelteBracketNewLine` for improved readability ([PR #281](https://github.com/IBM/carbon-components-svelte/pull/281), thanks [@josefaidt](https://github.com/josefaidt))
-- git: add husky, lint-staged to development workflow ([PR #295](https://github.com/carbon-design-system/carbon-components-svelte/pull/295), thanks [@josefaidt](https://github.com/josefaidt))
+- git: add husky, lint-staged to development workflow ([PR #295](https://github.com/IBM/carbon-components-svelte/pull/295), thanks [@josefaidt](https://github.com/josefaidt))
-## [0.14.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.14.0) - 2020-09-23
+## [0.14.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.14.0) - 2020-09-23
**Features**
- `Modal`, `ComposedModal`: add `preventCloseOnClickOutside` prop
-- `Modal`: add `alert` prop to support alertdialog ARIA role ([PR #273](https://github.com/carbon-design-system/carbon-components-svelte/pull/273), thanks [@josefaidt](https://github.com/josefaidt))
-- `TextInput`: add `warn` prop ([PR #275](https://github.com/carbon-design-system/carbon-components-svelte/pull/275), thanks [@josefaidt](https://github.com/josefaidt))
-- `TextInput`: add `inline` prop ([PR #277](https://github.com/carbon-design-system/carbon-components-svelte/pull/277), thanks [@josefaidt](https://github.com/josefaidt))
+- `Modal`: add `alert` prop to support alertdialog ARIA role ([PR #273](https://github.com/IBM/carbon-components-svelte/pull/273), thanks [@josefaidt](https://github.com/josefaidt))
+- `TextInput`: add `warn` prop ([PR #275](https://github.com/IBM/carbon-components-svelte/pull/275), thanks [@josefaidt](https://github.com/josefaidt))
+- `TextInput`: add `inline` prop ([PR #277](https://github.com/IBM/carbon-components-svelte/pull/277), thanks [@josefaidt](https://github.com/josefaidt))
**Fixes**
- `DataTableSkeleton`: add `showHeader`, `showToolbar` props
- `OverflowMenu`: focus menu button on escape key only
-- `DataTable`: fix `headers` JSDoc type annotation ([PR #271](https://github.com/carbon-design-system/carbon-components-svelte/pull/271), thanks [@albertms10](https://github.com/albertms10))
+- `DataTable`: fix `headers` JSDoc type annotation ([PR #271](https://github.com/IBM/carbon-components-svelte/pull/271), thanks [@albertms10](https://github.com/albertms10))
**Breaking Changes**
- `DataTableSkeleton`: `showHeader` and `showToolbar` are `true` by default
-## [0.13.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.13.0) - 2020-09-18
+## [0.13.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.13.0) - 2020-09-18
**Features**
-- Move helper text below form inputs in `ComboBox`, `Dropdown`, `MultiSelect`, `TextArea`, `NumberInput`, `TextInput`, `Select` ([PR #256](https://github.com/carbon-design-system/carbon-components-svelte/pull/256), [issue #255](https://github.com/carbon-design-system/carbon-components-svelte/issues/255))
+- Move helper text below form inputs in `ComboBox`, `Dropdown`, `MultiSelect`, `TextArea`, `NumberInput`, `TextInput`, `Select` ([PR #256](https://github.com/IBM/carbon-components-svelte/pull/256), [issue #255](https://github.com/IBM/carbon-components-svelte/issues/255))
-- ProgressIndicator: add `spaceEqual` prop and functionality ([PR #263](https://github.com/carbon-design-system/carbon-components-svelte/pull/263), [issue #262](https://github.com/carbon-design-system/carbon-components-svelte/issues/262))
+- ProgressIndicator: add `spaceEqual` prop and functionality ([PR #263](https://github.com/IBM/carbon-components-svelte/pull/263), [issue #262](https://github.com/IBM/carbon-components-svelte/issues/262))
**Fixes**
-- Link: remove visited styles by default ([PR #259](https://github.com/carbon-design-system/carbon-components-svelte/pull/259), [issue #258](https://github.com/carbon-design-system/carbon-components-svelte/issues/258))
+- Link: remove visited styles by default ([PR #259](https://github.com/IBM/carbon-components-svelte/pull/259), [issue #258](https://github.com/IBM/carbon-components-svelte/issues/258))
-- TimePickerSelect: deprecate `hideLabel` prop to match spec and set default value to `true` ([PR #261](https://github.com/carbon-design-system/carbon-components-svelte/pull/261), [issue #260](https://github.com/carbon-design-system/carbon-components-svelte/issues/260))
+- TimePickerSelect: deprecate `hideLabel` prop to match spec and set default value to `true` ([PR #261](https://github.com/IBM/carbon-components-svelte/pull/261), [issue #260](https://github.com/IBM/carbon-components-svelte/issues/260))
**Breaking Changes**
- TimePickerSelect: `hideLabel` prop is `true` by default
-## [0.12.3](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.12.3) - 2020-09-16
+## [0.12.3](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.12.3) - 2020-09-16
**Fixes**
-- ClickableTile: add missing `href` ([PR #254](https://github.com/carbon-design-system/carbon-components-svelte/pull/254), thanks [@josefaidt](https://github.com/josefaidt))
+- ClickableTile: add missing `href` ([PR #254](https://github.com/IBM/carbon-components-svelte/pull/254), thanks [@josefaidt](https://github.com/josefaidt))
-## [0.12.2](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.12.2) - 2020-09-14
+## [0.12.2](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.12.2) - 2020-09-14
**Fixes**
- Dropdown: allow event propagation when clicking the chevron icon (73861e2)
-## [0.12.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.12.1) - 2020-09-14
+## [0.12.1](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.12.1) - 2020-09-14
**Fixes**
@@ -2697,7 +738,7 @@ Svelte version >=3.48.0 is required.
- SideNavMenu, SideNavMenuItem: remove "role", "aria-haspopup" attributes causing a11y warnings
- RadioTile: move `keydown`, `tabindex` to input element (17d97d1)
-## [0.12.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.12.0) - 2020-09-13
+## [0.12.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.12.0) - 2020-09-13
**Features**
@@ -2708,13 +749,13 @@ Svelte version >=3.48.0 is required.
- examples: add example set-ups using popular bundlers/frameworks
- update README guidance on consuming the library
-## [0.11.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.11.0) - 2020-09-05
+## [0.11.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.11.0) - 2020-09-05
**Features**
- UI Shell: add `HeaderGlobalAction` component (7b3c111)
-## [0.10.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.10.0) - 2020-09-05
+## [0.10.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.10.0) - 2020-09-05
**Features**
@@ -2739,21 +780,21 @@ Svelte version >=3.48.0 is required.
- bump rollup, rollup plugins (00b9068)
- require node >=12 for development/CI (bf0f11a)
-## [0.9.7](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.9.7) - 2020-08-23
+## [0.9.7](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.9.7) - 2020-08-23
- Fix `InlineNotification` and `ToastNotification` timeout
- ([PR#235](https://github.com/carbon-design-system/carbon-components-svelte/pull/235), thanks [@Overbryd](https://github.com/Overbryd))
+ ([PR#235](https://github.com/IBM/carbon-components-svelte/pull/235), thanks [@Overbryd](https://github.com/Overbryd))
-## [0.9.6](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.9.6) - 2020-08-15
+## [0.9.6](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.9.6) - 2020-08-15
- use svelte compiler to generate TypeScript definitions, documentation (issue #227, PR #228)
- fix `DatePicker` to use default imports (reverts 6d5f1e5; issue #232)
-## [0.9.5](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.9.5) - 2020-08-12
+## [0.9.5](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.9.5) - 2020-08-12
-- fix `Modal` and `ComposedModal` to prevent modal from closing unexpectedly ([PR #231](https://github.com/carbon-design-system/carbon-components-svelte/pull/231))
+- fix `Modal` and `ComposedModal` to prevent modal from closing unexpectedly ([PR #231](https://github.com/IBM/carbon-components-svelte/pull/231))
-## [0.9.4](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.9.4) - 2020-08-08
+## [0.9.4](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.9.4) - 2020-08-08
- ignore false positive `a11y-label-has-associated-control` warnings added in svelte^v3.24.1
- fix `DatePicker`: use wildcard import to resolve flatpickr "no default" error when using ESM
@@ -2761,13 +802,13 @@ Svelte version >=3.48.0 is required.
- refactor `CodeSnippet`: replace afterUpdate with reactive statement
- fix `CodeSnippet`: forward `feedback`, `feedbackTimeout` props to `Copy` component
-## [0.9.3](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.9.3) - 2020-08-02
+## [0.9.3](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.9.3) - 2020-08-02
- rename UI Shell `Header` slot from "skip-to-main-content" to "skip-to-content"
- support fixed `SideNav`
- add `expandedByDefault` prop to `Header` to prevent `SideNav` from being expanded
-## [0.9.2](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.9.2) - 2020-08-01
+## [0.9.2](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.9.2) - 2020-08-01
- add "skip-to-main-content" slot to `Header`
- make `platformName` prop in UI Shell `Header` slottable (i.e., ...)
@@ -2777,11 +818,11 @@ Svelte version >=3.48.0 is required.
- add `ButtonSet` component
- fix `Accordion` to avoid `$$restProps.class` override
-## [0.9.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.9.1) - 2020-07-30
+## [0.9.1](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.9.1) - 2020-07-30
- fix `TabContent` to remove hidden prop when panel is selected
-## [0.9.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.9.0) - 2020-07-30
+## [0.9.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.9.0) - 2020-07-30
- add TypeScript definitions
- dispatch "select" and "clear" events in `ComboBox`
@@ -2791,18 +832,18 @@ Svelte version >=3.48.0 is required.
- fix forwarded click event in `CodeSnippet`
- fix class name typo in `UnorderedList`
-## [0.8.5](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.8.5) - 2020-07-23
+## [0.8.5](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.8.5) - 2020-07-23
- add `noGutter`, `noGutterLeft`, `noGutterRight` props to `Grid`, `Row`, `Column`
- add `aspectRatio` prop to `Column`
-## [0.8.4](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.8.4) - 2020-07-22
+## [0.8.4](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.8.4) - 2020-07-22
- add Grid components (`Grid`, `Row`, `Column`)
- add `PaginationNav` component
- fix `TooltipIcon` to avoid `$$restProps.class` override
-## [0.8.3](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.8.3) - 2020-07-20
+## [0.8.3](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.8.3) - 2020-07-20
- bump `carbon-icons-svelte` dependency to version >=10.14.0
- support `size` prop (`undefined` or `"sm"` or `"lg`) in `DatePickerInput`, `NumberInput`, `Select`, `PasswordInput`, `TextInput` components
@@ -2811,22 +852,22 @@ Svelte version >=3.48.0 is required.
- fix `ListBox` regression where size class can be overriden by `$$restProps.class`
- fix `Pagination` regression where current page selection value is stuck at `1`
-## [0.8.2](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.8.2) - 2020-07-19
+## [0.8.2](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.8.2) - 2020-07-19
-- fix `ComboBox` to close dropdown menu when pressing the "Escape" key ([Issue #198](https://github.com/carbon-design-system/carbon-components-svelte/issues/198))
+- fix `ComboBox` to close dropdown menu when pressing the "Escape" key ([Issue #198](https://github.com/IBM/carbon-components-svelte/issues/198))
-## [0.8.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.8.1) - 2020-07-19
+## [0.8.1](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.8.1) - 2020-07-19
- fix bug in `Tag` to prevent custom class from overriding tag class
-- fix SSR rendering issue in `Modal` by replacing `onDestroy` with `onMount` ([Issue #200](https://github.com/carbon-design-system/carbon-components-svelte/issues/200))
+- fix SSR rendering issue in `Modal` by replacing `onDestroy` with `onMount` ([Issue #200](https://github.com/IBM/carbon-components-svelte/issues/200))
-## [0.8.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.8.0) - 2020-07-19
+## [0.8.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.8.0) - 2020-07-19
- use \$\$restProps API (requires Svelte version >=3.20)
- upgrade `carbon-icons-svelte` to version >=10.13.0
- use svelte class:{value} API instead of `cx`
-- add ref prop to "interactive" components like text inputs, anchor links... ([Issue #196](https://github.com/carbon-design-system/carbon-components-svelte/issues/196))
-- add slot to Content Switcher `Switch` component ([Issue #183](https://github.com/carbon-design-system/carbon-components-svelte/issues/183))
+- add ref prop to "interactive" components like text inputs, anchor links... ([Issue #196](https://github.com/IBM/carbon-components-svelte/issues/196))
+- add slot to Content Switcher `Switch` component ([Issue #183](https://github.com/IBM/carbon-components-svelte/issues/183))
- fix `ContentSwitcher` bug where bound `selectedIndex` could not be updated
- remove unused lib utilities (cx, css, fillArray)
- refactor component exports and folder structure
@@ -2835,114 +876,114 @@ Svelte version >=3.48.0 is required.
- remove Jest in favor of integration/e2e testing with Cypress
- update contributing guidelines
-## [0.7.6](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.7.6) - 2020-07-19
+## [0.7.6](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.7.6) - 2020-07-19
- Add named slot to UI Shell `HeaderAction` component for text
- ([PR#201](https://github.com/carbon-design-system/carbon-components-svelte/pull/201), thanks [@danielboven](https://github.com/danielboven))
+ ([PR#201](https://github.com/IBM/carbon-components-svelte/pull/201), thanks [@danielboven](https://github.com/danielboven))
-## [0.7.5](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.7.5) - 2020-07-17
+## [0.7.5](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.7.5) - 2020-07-17
- Add `name` prop to form-related components
- ([PR#199](https://github.com/carbon-design-system/carbon-components-svelte/pull/199), thanks [@softartisan](https://github.com/softartisan))
+ ([PR#199](https://github.com/IBM/carbon-components-svelte/pull/199), thanks [@softartisan](https://github.com/softartisan))
- Add `Content`, `SkipToContent` components to the UI Shell
- Forward `on:click` event to UI Shell `Header` component
-## [0.7.4](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.7.4) - 2020-06-17
+## [0.7.4](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.7.4) - 2020-06-17
-- Fix `OverflowMenu` focus behavior to set `didOpen` only if `open` is true ([PR#193](https://github.com/carbon-design-system/carbon-components-svelte/pull/193))
+- Fix `OverflowMenu` focus behavior to set `didOpen` only if `open` is true ([PR#193](https://github.com/IBM/carbon-components-svelte/pull/193))
-## [0.7.3](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.7.3) - 2020-06-16
+## [0.7.3](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.7.3) - 2020-06-16
-- Fix `OverflowMenu` to focus button only after closing the menu ([PR#192](https://github.com/carbon-design-system/carbon-components-svelte/pull/192))
+- Fix `OverflowMenu` to focus button only after closing the menu ([PR#192](https://github.com/IBM/carbon-components-svelte/pull/192))
-## [0.7.2](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.7.2) - 2020-06-04
+## [0.7.2](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.7.2) - 2020-06-04
- Add sort direction to dispatched "click:header" event for a sortable `DataTable`
- ([PR#188](https://github.com/carbon-design-system/carbon-components-svelte/pull/188), thanks [@mabentley85](https://github.com/mabentley85)!)
+ ([PR#188](https://github.com/IBM/carbon-components-svelte/pull/188), thanks [@mabentley85](https://github.com/mabentley85)!)
-## [0.7.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.7.1) - 2020-06-03
+## [0.7.1](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.7.1) - 2020-06-03
- Add missing RadioTile export
-## [0.7.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.7.0) - 2020-05-29
+## [0.7.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.7.0) - 2020-05-29
- Dispatch "update" event in `Pagination` for `pageSize`, `page` variables
- ([PR#185](https://github.com/carbon-design-system/carbon-components-svelte/pull/185), thanks [@mabentley85](https://github.com/mabentley85)!)
+ ([PR#185](https://github.com/IBM/carbon-components-svelte/pull/185), thanks [@mabentley85](https://github.com/mabentley85)!)
- Drop carbon-components as a peer dependency
-## [0.6.3](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.6.3) - 2020-05-26
+## [0.6.3](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.6.3) - 2020-05-26
- Replace `"javascript:void(0)"` with `"/"` in `HeaderNavMenu` href attribute to fix a11y "not a valid attribute" warning; `href` is an exported property that can be overriden by the consumer
- ([Issue #184](https://github.com/carbon-design-system/carbon-components-svelte/issues/184))
+ ([Issue #184](https://github.com/IBM/carbon-components-svelte/issues/184))
- Ignore `a11y-no-onchange` warning in `TimePickerSelect`
- Bump development dependency `svelte` to v3.23.0
-## [0.6.2](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.6.2) - 2020-05-09
+## [0.6.2](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.6.2) - 2020-05-09
- Fix `tileMaxHeight` bug in `ExpandableTile` by setting the value only if the default value is 0
- ([Issue #180](https://github.com/carbon-design-system/carbon-components-svelte/issues/180))
+ ([Issue #180](https://github.com/IBM/carbon-components-svelte/issues/180))
-## [0.6.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.6.1) - 2020-05-08
+## [0.6.1](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.6.1) - 2020-05-08
- Fix `Pagination` bug by binding the correct variable (`selected`) to the `Select` component
- ([PR#179](https://github.com/carbon-design-system/carbon-components-svelte/pull/179), thanks [@ericol](https://github.com/ericol)!)
+ ([PR#179](https://github.com/IBM/carbon-components-svelte/pull/179), thanks [@ericol](https://github.com/ericol)!)
-## [0.6.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.6.0) - 2020-05-07
+## [0.6.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.6.0) - 2020-05-07
- Fix button with icon bug by manually setting `hasIconOnly` in `Button`. This results in a breaking change for icon-only buttons, which now must include `hasIconOnly`
- ([Issue #174](https://github.com/carbon-design-system/carbon-components-svelte/issues/174))
+ ([Issue #174](https://github.com/IBM/carbon-components-svelte/issues/174))
-## [0.5.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.5.1) - 2020-05-03
+## [0.5.1](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.5.1) - 2020-05-03
- Fix focus/dispatch bug in `Modal`, `ComposedModal`
- ([PR#173](https://github.com/carbon-design-system/carbon-components-svelte/pull/173), thanks [@mfeitoza](https://github.com/mfeitoza)!)
+ ([PR#173](https://github.com/IBM/carbon-components-svelte/pull/173), thanks [@mfeitoza](https://github.com/mfeitoza)!)
-## [0.5.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.5.0) - 2020-04-29
+## [0.5.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.5.0) - 2020-04-29
- Ship `DataTable` that supports sorting
- Pin dependencies, remove commitlint, husky, eslint, prettier
-## [0.4.2](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.4.2) - 2020-04-20
+## [0.4.2](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.4.2) - 2020-04-20
- Forward `on:blur` event to Select component
- ([PR#169](https://github.com/carbon-design-system/carbon-components-svelte/pull/169), thanks [@httpsOmkar](https://github.com/httpsOmkar)!)
+ ([PR#169](https://github.com/IBM/carbon-components-svelte/pull/169), thanks [@httpsOmkar](https://github.com/httpsOmkar)!)
-## [0.4.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.4.1) - 2020-04-18
+## [0.4.1](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.4.1) - 2020-04-18
- Refactor UI Shell components to be modular (header, left panel, right panel)
- ([PR#168](https://github.com/carbon-design-system/carbon-components-svelte/pull/168), thanks [@mfeitoza](https://github.com/mfeitoza)!)
+ ([PR#168](https://github.com/IBM/carbon-components-svelte/pull/168), thanks [@mfeitoza](https://github.com/mfeitoza)!)
-## [0.4.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.4.0) - 2020-04-18
+## [0.4.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.4.0) - 2020-04-18
- Refactor UI Shell to be component-based
- ([PR#166](https://github.com/carbon-design-system/carbon-components-svelte/pull/166), thanks [@mfeitoza](https://github.com/mfeitoza)!)
+ ([PR#166](https://github.com/IBM/carbon-components-svelte/pull/166), thanks [@mfeitoza](https://github.com/mfeitoza)!)
-## [0.3.3](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.3.3) - 2020-03-09
+## [0.3.3](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.3.3) - 2020-03-09
- Fix "window is undefined" error when using UIShell with server-side rendering (SSR)
- ([PR#149](https://github.com/carbon-design-system/carbon-components-svelte/pull/149), thanks [@pbxothi](https://github.com/pbxothi)!)
+ ([PR#149](https://github.com/IBM/carbon-components-svelte/pull/149), thanks [@pbxothi](https://github.com/pbxothi)!)
-## [0.3.2](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.3.2) - 2020-02-12
+## [0.3.2](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.3.2) - 2020-02-12
- Fix `SkeletonText` duplicate style attribute to work with `svelte^3.18.2`
- ([#134](https://github.com/carbon-design-system/carbon-components-svelte/issues/134))
+ ([#134](https://github.com/IBM/carbon-components-svelte/issues/134))
-## [0.3.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.3.1) - 2020-02-03
+## [0.3.1](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.3.1) - 2020-02-03
- Fix `DatePicker` locale initialization bug
- Fix `CheckboxSkeleton` styles; bump `carbon-components` version to ^10.9.3
-## [0.3.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.3.0) - 2020-02-03
+## [0.3.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.3.0) - 2020-02-03
- Add `UIShell` component (thanks [@Heydan83](https://github.com/Heydan83)!)
- ([#10](https://github.com/carbon-design-system/carbon-components-svelte/issues/10))
+ ([#10](https://github.com/IBM/carbon-components-svelte/issues/10))
- Add single component skeleton states for `Accordion`, `CodeSnippet`
@@ -2950,17 +991,17 @@ Svelte version >=3.48.0 is required.
- Fix `Tab` to set `selected` prop to `currentIndex` after updating
-## [0.2.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.2.1) - 2020-01-08
+## [0.2.1](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.2.1) - 2020-01-08
- Check if `l10n.en` is defined in `DatePicker` component to resolve Svelte REPL compilation
-## [0.2.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.2.0) - 2020-01-08
+## [0.2.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.2.0) - 2020-01-08
- Include `src` in files published to npm to resolve Svelte module entry
- ([#102](https://github.com/carbon-design-system/carbon-components-svelte/issues/102))
+ ([#102](https://github.com/IBM/carbon-components-svelte/issues/102))
-- Support most Carbon components (See the [GitHub project](https://github.com/carbon-design-system/carbon-components-svelte/projects/1))
+- Support most Carbon components (See the [GitHub project](https://github.com/IBM/carbon-components-svelte/projects/1))
-## [0.1.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.1.0) - 2019-12-15
+## [0.1.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.1.0) - 2019-12-15
- Initial release
diff --git a/CODEOWNERS b/CODEOWNERS
new file mode 100644
index 00000000..e5875885
--- /dev/null
+++ b/CODEOWNERS
@@ -0,0 +1,2 @@
+* @metonym
+* @josefaidt
\ No newline at end of file
diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index b1f4eb48..1218f37b 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -1,6 +1,6 @@
# Component Index
-> 165 components exported from carbon-components-svelte@0.89.7.
+> 167 components exported from carbon-components-svelte@0.32.0.
## Components
@@ -11,7 +11,6 @@
- [`Breadcrumb`](#breadcrumb)
- [`BreadcrumbItem`](#breadcrumbitem)
- [`BreadcrumbSkeleton`](#breadcrumbskeleton)
-- [`Breakpoint`](#breakpoint)
- [`Button`](#button)
- [`ButtonSet`](#buttonset)
- [`ButtonSkeleton`](#buttonskeleton)
@@ -30,6 +29,7 @@
- [`ContextMenuGroup`](#contextmenugroup)
- [`ContextMenuOption`](#contextmenuoption)
- [`ContextMenuRadioGroup`](#contextmenuradiogroup)
+- [`Copy`](#copy)
- [`CopyButton`](#copybutton)
- [`DataTable`](#datatable)
- [`DataTableSkeleton`](#datatableskeleton)
@@ -54,6 +54,7 @@
- [`Header`](#header)
- [`HeaderAction`](#headeraction)
- [`HeaderActionLink`](#headeractionlink)
+- [`HeaderActionSearch`](#headeractionsearch)
- [`HeaderGlobalAction`](#headerglobalaction)
- [`HeaderNav`](#headernav)
- [`HeaderNavItem`](#headernavitem)
@@ -63,6 +64,8 @@
- [`HeaderPanelLinks`](#headerpanellinks)
- [`HeaderSearch`](#headersearch)
- [`HeaderUtilities`](#headerutilities)
+- [`Icon`](#icon)
+- [`IconSkeleton`](#iconskeleton)
- [`ImageLoader`](#imageloader)
- [`InlineLoading`](#inlineloading)
- [`InlineNotification`](#inlinenotification)
@@ -84,6 +87,7 @@
- [`NotificationActionButton`](#notificationactionbutton)
- [`NotificationButton`](#notificationbutton)
- [`NotificationIcon`](#notificationicon)
+- [`NotificationTextDetails`](#notificationtextdetails)
- [`NumberInput`](#numberinput)
- [`NumberInputSkeleton`](#numberinputskeleton)
- [`OrderedList`](#orderedlist)
@@ -95,7 +99,6 @@
- [`PaginationSkeleton`](#paginationskeleton)
- [`PasswordInput`](#passwordinput)
- [`Popover`](#popover)
-- [`ProgressBar`](#progressbar)
- [`ProgressIndicator`](#progressindicator)
- [`ProgressIndicatorSkeleton`](#progressindicatorskeleton)
- [`ProgressStep`](#progressstep)
@@ -103,7 +106,6 @@
- [`RadioButtonGroup`](#radiobuttongroup)
- [`RadioButtonSkeleton`](#radiobuttonskeleton)
- [`RadioTile`](#radiotile)
-- [`RecursiveList`](#recursivelist)
- [`Row`](#row)
- [`Search`](#search)
- [`SearchSkeleton`](#searchskeleton)
@@ -148,7 +150,6 @@
- [`TextAreaSkeleton`](#textareaskeleton)
- [`TextInput`](#textinput)
- [`TextInputSkeleton`](#textinputskeleton)
-- [`Theme`](#theme)
- [`Tile`](#tile)
- [`TileGroup`](#tilegroup)
- [`TimePicker`](#timepicker)
@@ -156,6 +157,8 @@
- [`ToastNotification`](#toastnotification)
- [`Toggle`](#toggle)
- [`ToggleSkeleton`](#toggleskeleton)
+- [`ToggleSmall`](#togglesmall)
+- [`ToggleSmallSkeleton`](#togglesmallskeleton)
- [`Toolbar`](#toolbar)
- [`ToolbarBatchActions`](#toolbarbatchactions)
- [`ToolbarContent`](#toolbarcontent)
@@ -166,7 +169,6 @@
- [`TooltipDefinition`](#tooltipdefinition)
- [`TooltipFooter`](#tooltipfooter)
- [`TooltipIcon`](#tooltipicon)
-- [`TreeView`](#treeview)
- [`Truncate`](#truncate)
- [`UnorderedList`](#unorderedlist)
@@ -176,12 +178,12 @@
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | --------------------------------- | ---------------------- | ------------------------------------------------ |
-| align | No | let | No | "start" | "end" | "end" | Specify alignment of accordion item chevron icon |
-| size | No | let | No | "sm" | "xl" | undefined | Specify the size of the accordion |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the accordion |
-| skeleton | No | let | No | boolean | false | Set to `true` to display the skeleton state |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :-------------------------------- | ------------------ | ------------------------------------------------ |
+| align | let | No | "start" | "end" | "end" | Specify alignment of accordion item chevron icon |
+| size | let | No | "sm" | "xl" | -- | Specify the size of the accordion |
+| disabled | let | No | boolean | false | Set to `true` to disable the accordion |
+| skeleton | let | No | boolean | false | Set to `true` to display the skeleton state |
### Slots
@@ -202,12 +204,12 @@
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------------- | :------- | :--------------- | :------- | -------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- |
-| disabled | No | let | Yes | boolean | false | Set to `true` to disable the accordion item |
-| open | No | let | Yes | boolean | false | Set to `true` to open the first accordion item |
-| title | No | let | No | string | "title" | Specify the title of the accordion item heading. Alternatively, use the "title" slot (e.g., `<div slot="title">...</div>`) |
-| iconDescription | No | let | No | string | "Expand/Collapse" | Specify the ARIA label for the accordion item chevron icon |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------------- | :--------------- | :------- | :------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| disabled | let | Yes | boolean | false | Set to `true` to disable the accordion item |
+| open | let | Yes | boolean | false | Set to `true` to open the first accordion item |
+| title | let | No | string | "title" | Specify the title of the accordion item heading Alternatively, use the "title" slot (e.g., <div slot="title">...</div>) |
+| iconDescription | let | No | string | "Expand/Collapse" | Specify the ARIA label for the accordion item chevron icon |
### Slots
@@ -231,12 +233,12 @@
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | --------------------------------- | ---------------------- | ------------------------------------------------ |
-| count | No | let | No | number | 4 | Specify the number of accordion items to render |
-| align | No | let | No | "start" | "end" | "end" | Specify alignment of accordion item chevron icon |
-| size | No | let | No | "sm" | "xl" | undefined | Specify the size of the accordion |
-| open | No | let | No | boolean | true | Set to `false` to close the first accordion item |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :-------------------------------- | ------------------ | ------------------------------------------------ |
+| count | let | No | number | 4 | Specify the number of accordion items to render |
+| align | let | No | "start" | "end" | "end" | Specify alignment of accordion item chevron icon |
+| size | let | No | "sm" | "xl" | -- | Specify the size of the accordion |
+| open | let | No | boolean | true | Set to `false` to close the first accordion item |
### Slots
@@ -255,9 +257,9 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | ---------------------------------------------------------------------------------------------------------------------------- | ------------------ | ------------------------ |
-| ratio | No | let | No | "2x1" | "2x3" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2" | "2x1" | Specify the aspect ratio |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------- | ------------------ | ------------------------ |
+| ratio | let | No | "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2" | "2x1" | Specify the aspect ratio |
### Slots
@@ -273,10 +275,10 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------------- | :------- | :--------------- | :------- | -------------------- | ------------------ | --------------------------------------------------- |
-| noTrailingSlash | No | let | No | boolean | false | Set to `true` to hide the breadcrumb trailing slash |
-| skeleton | No | let | No | boolean | false | Set to `true` to display skeleton state |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------------------- |
+| noTrailingSlash | let | No | boolean | false | Set to `true` to hide the breadcrumb trailing slash |
+| skeleton | let | No | boolean | false | Set to `true` to display skeleton state |
### Slots
@@ -297,10 +299,10 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :------------ | :------- | :--------------- | :------- | -------------------- | ---------------------- | ---------------------------------------------------------------- |
-| href | No | let | No | string | undefined | Set the `href` to use an anchor link |
-| isCurrentPage | No | let | No | boolean | false | Set to `true` if the breadcrumb item represents the current page |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :------------ | :--------------- | :------- | :------------------- | ------------------ | ---------------------------------------------------------------- |
+| href | let | No | string | -- | Set the `href` to use an anchor link |
+| isCurrentPage | let | No | boolean | false | Set to `true` if the breadcrumb item represents the current page |
### Slots
@@ -321,10 +323,10 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------------- | :------- | :--------------- | :------- | -------------------- | ------------------ | --------------------------------------------------- |
-| noTrailingSlash | No | let | No | boolean | false | Set to `true` to hide the breadcrumb trailing slash |
-| count | No | let | No | number | 3 | Specify the number of breadcrumb items to render |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------------------- |
+| noTrailingSlash | let | No | boolean | false | Set to `true` to hide the breadcrumb trailing slash |
+| count | let | No | number | 3 | Specify the number of breadcrumb items to render |
### Slots
@@ -339,71 +341,39 @@ None.
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
-## `Breakpoint`
-
-### Types
-
-```ts
-export type BreakpointSize = "sm" | "md" | "lg" | "xlg" | "max";
-
-export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
-```
-
-### Props
-
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | -------------------------------------------- | ------------------------------------------------------------------------- | ------------------------------------------------- |
-| sizes | No | let | Yes | Record | { sm: false, md: false, lg: false, xlg: false, max: false, } | Carbon grid sizes as an object |
-| size | No | let | Yes | BreakpointSize | undefined | Determine the current Carbon grid breakpoint size |
-
-### Slots
-
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :------------------------------------------------------------------------------ | :------- |
-| -- | Yes | { size: BreakpointSize; sizes: Record; } | -- |
-
-### Events
-
-| Event name | Type | Detail |
-| :--------- | :--------- | :----------------------------------------------------------------------- |
-| change | dispatched | { size: BreakpointSize; breakpointValue: BreakpointValue; } |
-
## `Button`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :--------------- | :------- | :--------------- | :------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| ref | No | let | Yes | null | HTMLAnchorElement | HTMLButtonElement | null | Obtain a reference to the HTML element |
-| kind | No | let | No | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost" | "primary" | Specify the kind of button |
-| size | No | let | No | "default" | "field" | "small" | "lg" | "xl" | "default" | Specify the size of button |
-| expressive | No | let | No | boolean | false | Set to `true` to use Carbon's expressive typesetting |
-| isSelected | No | let | No | boolean | false | Set to `true` to enable the selected state for an icon-only, ghost button |
-| icon | No | let | No | any | undefined | Specify the icon to render Alternatively, use the named slot "icon" (e.g., `<Icon slot="icon" size="{20}" />`) |
-| iconDescription | No | let | No | string | undefined | Specify the ARIA label for the button icon |
-| tooltipAlignment | No | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon. Only applies to icon-only buttons |
-| tooltipPosition | No | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the position of the tooltip relative to the icon |
-| as | No | let | No | boolean | false | Set to `true` to render a custom HTML element Props are destructured as `props` in the default slot (e.g., <Button let:props><div {...props}>...</div></Button>) |
-| skeleton | No | let | No | boolean | false | Set to `true` to display the skeleton state |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the button |
-| href | No | let | No | string | undefined | Set the `href` to use an anchor link |
-| tabindex | No | let | No | string | "0" | Specify the tabindex |
-| type | No | let | No | string | "button" | Specify the `type` attribute for the button element |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :--------------- | :--------------- | :------- | :---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ref | let | Yes | null | HTMLAnchorElement | HTMLButtonElement | null | Obtain a reference to the HTML element |
+| hasIconOnly | let | Yes | boolean | false | Set to `true` for the icon-only variant |
+| kind | let | No | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost" | "primary" | Specify the kind of button |
+| size | let | No | "default" | "field" | "small" | "default" | Specify the size of button |
+| isSelected | let | No | boolean | false | Set to `true` to enable the selected state for an icon-only, ghost button |
+| icon | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render |
+| iconDescription | let | No | string | -- | Specify the ARIA label for the button icon |
+| tooltipAlignment | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon `hasIconOnly` must be set to `true` |
+| tooltipPosition | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the position of the tooltip relative to the icon |
+| as | let | No | boolean | false | Set to `true` to render a custom HTML element Props are destructured as `props` in the default slot (e.g., <Button let:props><div {...props}>...</div></Button>) |
+| skeleton | let | No | boolean | false | Set to `true` to display the skeleton state |
+| disabled | let | No | boolean | false | Set to `true` to disable the button |
+| href | let | No | string | -- | Set the `href` to use an anchor link |
+| tabindex | let | No | string | "0" | Specify the tabindex |
+| type | let | No | string | "button" | Specify the `type` attribute for the button element |
### Slots
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---------------------------------------------------------------------------------------------------------------------------------------------- | :------- |
| -- | Yes | { props: { role: "button"; type?: string; tabindex: any; disabled: boolean; href?: string; class: string; [key: string]: any; } } | -- |
-| icon | No | -- | -- |
### Events
| Event name | Type | Detail |
| :--------- | :-------- | :----- |
| click | forwarded | -- |
-| focus | forwarded | -- |
-| blur | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
@@ -412,9 +382,9 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | --------------------------------------------- |
-| stacked | No | let | No | boolean | false | Set to `true` to stack the buttons vertically |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------------- |
+| stacked | let | No | boolean | false | Set to `true` to stack the buttons vertically |
### Slots
@@ -430,10 +400,11 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | ---------------------------------------------------------------------------- | ---------------------- | ------------------------------------ |
-| href | No | let | No | string | undefined | Set the `href` to use an anchor link |
-| size | No | let | No | "default" | "field" | "small" | "lg" | "xl" | "default" | Specify the size of button skeleton |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :--------------------------------------------------- | ---------------------- | ------------------------------------ |
+| href | let | No | string | -- | Set the `href` to use an anchor link |
+| size | let | No | "default" | "field" | "small" | "default" | Specify the size of button skeleton |
+| small | let | No | boolean | false | -- |
### Slots
@@ -444,8 +415,6 @@ None.
| Event name | Type | Detail |
| :--------- | :-------- | :----- |
| click | forwarded | -- |
-| focus | forwarded | -- |
-| blur | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
@@ -454,28 +423,23 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :------------ | :------- | :--------------- | :------- | ----------------------------------------- | ------------------------------------------------ | ------------------------------------------------- |
-| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
-| title | No | let | Yes | string | undefined | Specify the title attribute for the label element |
-| indeterminate | No | let | Yes | boolean | false | Specify whether the checkbox is indeterminate |
-| group | No | let | Yes | ReadonlyArray | undefined | Specify the bound group |
-| checked | No | let | Yes | boolean | false | Specify whether the checkbox is checked |
-| value | No | let | No | any | "" | Specify the value of the checkbox |
-| skeleton | No | let | No | boolean | false | Set to `true` to display the skeleton state |
-| required | No | let | No | boolean | false | Set to `true` to mark the field as required |
-| readonly | No | let | No | boolean | false | Set to `true` for the checkbox to be read-only |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the checkbox |
-| labelText | No | let | No | string | "" | Specify the label text |
-| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text |
-| name | No | let | No | string | "" | Set a name for the input element |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input label |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :------------ | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ------------------------------------------------- |
+| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
+| checked | let | Yes | boolean | false | Specify whether the checkbox is checked |
+| indeterminate | let | No | boolean | false | Specify whether the checkbox is indeterminate |
+| skeleton | let | No | boolean | false | Set to `true` to display the skeleton state |
+| readonly | let | No | boolean | false | Set to `true` for the checkbox to be read-only |
+| disabled | let | No | boolean | false | Set to `true` to disable the checkbox |
+| labelText | let | No | string | "" | Specify the label text |
+| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text |
+| name | let | No | string | "" | Set a name for the input element |
+| title | let | No | string | -- | Specify the title attribute for the label element |
+| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input label |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :----------------------- |
-| labelText | No | -- | {labelText} |
+None.
### Events
@@ -487,8 +451,6 @@ None.
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| change | forwarded | -- |
-| focus | forwarded | -- |
-| blur | forwarded | -- |
## `CheckboxSkeleton`
@@ -513,12 +475,11 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | -------------------- | ---------------------- | ----------------------------------------- |
-| clicked | No | let | Yes | boolean | false | Set to `true` to click the tile |
-| light | No | let | No | boolean | false | Set to `true` to enable the light variant |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the tile |
-| href | No | let | No | string | undefined | Set the `href` |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------- |
+| clicked | let | Yes | boolean | false | Set to `true` to click the tile |
+| light | let | No | boolean | false | Set to `true` to enable the light variant |
+| href | let | No | string | -- | Set the `href` |
### Slots
@@ -540,26 +501,25 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------------------- | :------- | :--------------- | :------- | ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| ref | No | let | Yes | null | HTMLPreElement | null | Obtain a reference to the pre HTML element |
-| showMoreLess | No | let | Yes | boolean | true | Set to `false` to hide the show more/less button
NOTE: this prop only works with the `type="multi"` variant |
-| expanded | No | let | Yes | boolean | false | Set to `true` to expand a multi-line code snippet (type="multi") |
-| type | No | let | No | "single" | "inline" | "multi" | "single" | Set the type of code snippet |
-| code | No | let | No | string | undefined | Set the code snippet text. Alternatively, use the default slot (e.g., `<CodeSnippet>{code}</CodeSnippet>`).
NOTE: you _must_ use the `code` prop for the copy-to-clipboard functionality. |
-| copy | No | let | No | (code: string) => void | async (code) => { try { await navigator.clipboard.writeText(code); } catch (e) { console.log(e); } } | By default, this component uses `navigator.clipboard.writeText` API to copy text to the user's clipboard.
Provide a custom function to override this behavior. |
-| hideCopyButton | No | let | No | boolean | false | Set to `true` to hide the copy button |
-| disabled | No | let | No | boolean | false | Set to `true` for the disabled variant. Only applies to the "single", "multi" types |
-| wrapText | No | let | No | boolean | false | Set to `true` to wrap the text.
NOTE: this prop only works with the `type="multi"` variant |
-| light | No | let | No | boolean | false | Set to `true` to enable the light variant |
-| skeleton | No | let | No | boolean | false | Set to `true` to display the skeleton state |
-| copyButtonDescription | No | let | No | string | undefined | Specify the ARIA label for the copy button icon |
-| copyLabel | No | let | No | string | undefined | Specify the ARIA label of the copy button |
-| feedback | No | let | No | string | "Copied!" | Specify the feedback text displayed when clicking the snippet |
-| feedbackTimeout | No | let | No | number | 2000 | Set the timeout duration (ms) to display feedback text |
-| showLessText | No | let | No | string | "Show less" | Specify the show less text.
NOTE: this prop only works with the `type="multi"` variant |
-| showMoreText | No | let | No | string | "Show more" | Specify the show more text
NOTE: this prop only works with the `type="multi"` variant |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the code element |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ref | let | Yes | null | HTMLPreElement | null | Obtain a reference to the pre HTML element |
+| showMoreLess | let | Yes | boolean | false | Set to `true` to enable the show more/less button |
+| expanded | let | Yes | boolean | false | Set to `true` to expand a multi-line code snippet (type="multi") |
+| type | let | No | "single" | "inline" | "multi" | "single" | Set the type of code snippet |
+| code | let | No | string | -- | Set the code snippet text Alternatively, use the default slot (e.g., <CodeSnippet>{`code`}</CodeSnippet>) You must use the `code` prop to copy the code |
+| hideCopyButton | let | No | boolean | false | Set to `true` to hide the copy button |
+| disabled | let | No | boolean | false | Set to `true` for the disabled variant Only applies to the "single", "multi" types |
+| wrapText | let | No | boolean | false | Set to `true` to wrap the text Note that `type` must be "multi" |
+| light | let | No | boolean | false | Set to `true` to enable the light variant |
+| skeleton | let | No | boolean | false | Set to `true` to display the skeleton state |
+| copyButtonDescription | let | No | string | -- | Specify the ARIA label for the copy button icon |
+| copyLabel | let | No | string | -- | Specify the ARIA label of the copy button |
+| feedback | let | No | string | "Copied!" | Specify the feedback text displayed when clicking the snippet |
+| feedbackTimeout | let | No | number | 2000 | Set the timeout duration (ms) to display feedback text |
+| showLessText | let | No | string | "Show less" | Specify the show less text `type` must be "multi" |
+| showMoreText | let | No | string | "Show more" | Specify the show more text `type` must be "multi" |
+| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the code element |
### Slots
@@ -569,24 +529,22 @@ None.
### Events
-| Event name | Type | Detail |
-| :----------- | :--------- | :---------------- |
-| expand | dispatched | null |
-| collapse | dispatched | null |
-| copy | dispatched | null |
-| click | forwarded | -- |
-| mouseover | forwarded | -- |
-| mouseenter | forwarded | -- |
-| mouseleave | forwarded | -- |
-| animationend | forwarded | -- |
+| Event name | Type | Detail |
+| :----------- | :--------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| animationend | forwarded | -- |
+| copy | dispatched | -- |
## `CodeSnippetSkeleton`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | ------------------------------------ | --------------------- | ---------------------------- |
-| type | No | let | No | "single" | "multi" | "single" | Set the type of code snippet |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :----------------------------------- | --------------------- | ---------------------------- |
+| type | let | No | "single" | "multi" | "single" | Set the type of code snippet |
### Slots
@@ -618,19 +576,19 @@ export type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor;
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :------------ | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| as | No | let | No | boolean | false | Set to `true` to render a custom HTML element Props are destructured as `props` in the default slot (e.g., <Column let:props><article {...props}>...</article></Column>) |
-| noGutter | No | let | No | boolean | false | Set to `true` to remove the gutter |
-| noGutterLeft | No | let | No | boolean | false | Set to `true` to remove the left gutter |
-| noGutterRight | No | let | No | boolean | false | Set to `true` to remove the right gutter |
-| padding | No | let | No | boolean | false | Set to `true` to add top and bottom padding to the column |
-| aspectRatio | No | let | No | "2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1" | undefined | Specify the aspect ratio of the column |
-| sm | No | let | No | ColumnBreakpoint | undefined | Set the small breakpoint |
-| md | No | let | No | ColumnBreakpoint | undefined | Set the medium breakpoint |
-| lg | No | let | No | ColumnBreakpoint | undefined | Set the large breakpoint |
-| xlg | No | let | No | ColumnBreakpoint | undefined | Set the extra large breakpoint |
-| max | No | let | No | ColumnBreakpoint | undefined | Set the maximum breakpoint |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :------------ | :--------------- | :------- | :------------------------------------------------------------------------------------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| as | let | No | boolean | false | Set to `true` to render a custom HTML element Props are destructured as `props` in the default slot (e.g., <Column let:props><article {...props}>...</article></Column>) |
+| noGutter | let | No | boolean | false | Set to `true` to remove the gutter |
+| noGutterLeft | let | No | boolean | false | Set to `true` to remove the left gutter |
+| noGutterRight | let | No | boolean | false | Set to `true` to remove the right gutter |
+| padding | let | No | boolean | false | Set to `true` to add top and bottom padding to the column |
+| aspectRatio | let | No | "2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1" | -- | Specify the aspect ratio of the column |
+| sm | let | No | ColumnBreakpoint | -- | Set the small breakpoint |
+| md | let | No | ColumnBreakpoint | -- | Set the medium breakpoint |
+| lg | let | No | ColumnBreakpoint | -- | Set the large breakpoint |
+| xlg | let | No | ColumnBreakpoint | -- | Set the extra large breakpoint |
+| max | let | No | ColumnBreakpoint | -- | Set the maximum breakpoint |
### Slots
@@ -647,78 +605,67 @@ None.
### Types
```ts
-export type ComboBoxItemId = any;
-
export interface ComboBoxItem {
- id: ComboBoxItemId;
+ id: string;
text: string;
- disabled?: boolean;
}
```
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :----------------------- | :------- | :-------------------- | :------- | ----------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| listRef | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the list HTML element |
-| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
-| open | No | let | Yes | boolean | false | Set to `true` to open the combobox menu dropdown |
-| value | No | let | Yes | string | "" | Specify the selected combobox value |
-| selectedId | No | let | Yes | ComboBoxItemId | undefined | Set the selected item by value id |
-| items | No | let | No | ReadonlyArray | [] | Set the combobox items |
-| itemToString | No | let | No | (item: ComboBoxItem) => string | (item) => item.text || item.id | Override the display of a combobox item |
-| direction | No | let | No | "bottom" | "top" | "bottom" | Specify the direction of the combobox dropdown menu |
-| size | No | let | No | "sm" | "xl" | undefined | Set the size of the combobox |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the combobox |
-| titleText | No | let | No | string | "" | Specify the title text of the combobox |
-| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text |
-| placeholder | No | let | No | string | "" | Specify the placeholder text |
-| helperText | No | let | No | string | "" | Specify the helper text |
-| invalidText | No | let | No | string | "" | Specify the invalid state text |
-| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state |
-| warn | No | let | No | boolean | false | Set to `true` to indicate an warning state |
-| warnText | No | let | No | string | "" | Specify the warning state text |
-| light | No | let | No | boolean | false | Set to `true` to enable the light variant |
-| shouldFilterItem | No | let | No | (item: ComboBoxItem, value: string) => boolean | () => true | Determine if an item should be filtered given the current combobox value |
-| translateWithId | No | let | No | (id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string | undefined | Override the chevron icon label based on the open state. Defaults to "Open menu" when closed and "Close menu" when open |
-| translateWithIdSelection | No | let | No | (id: "clearSelection") => string | undefined | Override the label of the clear button when the input has a selection. Defaults to "Clear selected item" since a combo box can only have on selection. |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component |
-| name | No | let | No | string | undefined | Specify a name attribute for the input |
-| clear | No | function | No | (options?: { focus?: boolean; }) => void | () => { prevSelectedId = null; highlightedIndex = -1; highlightedId = undefined; selectedId = undefined; selectedItem = undefined; open = false; value = ""; if (options?.focus !== false) ref?.focus(); } | Clear the combo box programmatically |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :--------------- | :--------------- | :------- | :---------------------------------------------------------- | ----------------------------------------------------- | ------------------------------------------------------------------------ |
+| listRef | let | Yes | null | HTMLDivElement | null | Obtain a reference to the list HTML element |
+| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
+| open | let | Yes | boolean | false | Set to `true` to open the combobox menu dropdown |
+| value | let | Yes | string | "" | Specify the selected combobox value |
+| selectedIndex | let | Yes | number | -1 | Set the selected item by value index |
+| items | let | No | ComboBoxItem[] | [] | Set the combobox items |
+| itemToString | let | No | (item: ComboBoxItem) => string | (item) => item.text || item.id | Override the display of a combobox item |
+| direction | let | No | "bottom" | "top" | "bottom" | Specify the direction of the combobox dropdown menu |
+| size | let | No | "sm" | "xl" | -- | Set the size of the combobox |
+| disabled | let | No | boolean | false | Set to `true` to disable the combobox |
+| titleText | let | No | string | "" | Specify the title text of the combobox |
+| placeholder | let | No | string | "" | Specify the placeholder text |
+| helperText | let | No | string | "" | Specify the helper text |
+| invalidText | let | No | string | "" | Specify the invalid state text |
+| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state |
+| warn | let | No | boolean | false | Set to `true` to indicate an warning state |
+| warnText | let | No | string | "" | Specify the warning state text |
+| light | let | No | boolean | false | Set to `true` to enable the light variant |
+| shouldFilterItem | let | No | (item: ComboBoxItem, value: string) => boolean | () => true | Determine if an item should be filtered given the current combobox value |
+| translateWithId | let | No | (id: any) => string | -- | Override the default translation ids |
+| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component |
+| name | let | No | string | -- | Specify a name attribute for the input |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :-------------------------------------------------- | :-------------------------------- |
-| -- | Yes | { item: ComboBoxItem; index: number } | {itemToString(item)} |
-| titleText | No | -- | {titleText} |
+None.
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :---------------------------------------------------------------------- |
-| select | dispatched | { selectedId: ComboBoxItemId; selectedItem: ComboBoxItem } |
-| clear | dispatched | KeyboardEvent | MouseEvent |
-| keydown | forwarded | -- |
-| keyup | forwarded | -- |
-| focus | forwarded | -- |
-| blur | forwarded | -- |
-| paste | forwarded | -- |
-| scroll | forwarded | -- |
+| Event name | Type | Detail |
+| :--------- | :--------- | :------------------------------------------------------------------------------------- |
+| select | dispatched | { selectedId: string; selectedIndex: number; selectedItem: ComboBoxItem } |
+| keydown | forwarded | -- |
+| focus | forwarded | -- |
+| blur | forwarded | -- |
+| clear | forwarded | -- |
+| scroll | forwarded | -- |
## `ComposedModal`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :------------------------- | :------- | :--------------- | :------- | ----------------------------------------- | ----------------------------------------- | --------------------------------------------------------------------- |
-| ref | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level HTML element |
-| open | No | let | Yes | boolean | false | Set to `true` to open the modal |
-| size | No | let | No | "xs" | "sm" | "lg" | undefined | Set the size of the composed modal |
-| danger | No | let | No | boolean | false | Set to `true` to use the danger variant |
-| preventCloseOnClickOutside | No | let | No | boolean | false | Set to `true` to prevent the modal from closing when clicking outside |
-| containerClass | No | let | No | string | "" | Specify a class for the inner modal |
-| selectorPrimaryFocus | No | let | No | null | string | "[data-modal-primary-focus]" | Specify a selector to be focused when opening the modal |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :------------------------- | :--------------- | :------- | :---------------------------------------- | ----------------------------------------- | --------------------------------------------------------------------- |
+| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level HTML element |
+| open | let | Yes | boolean | false | Set to `true` to open the modal |
+| size | let | No | "xs" | "sm" | "lg" | -- | Set the size of the composed modal |
+| danger | let | No | boolean | false | Set to `true` to use the danger variant |
+| preventCloseOnClickOutside | let | No | boolean | false | Set to `true` to prevent the modal from closing when clicking outside |
+| containerClass | let | No | string | "" | Specify a class for the inner modal |
+| selectorPrimaryFocus | let | No | null | string | "[data-modal-primary-focus]" | Specify a selector to be focused when opening the modal |
### Slots
@@ -728,26 +675,24 @@ export interface ComboBoxItem {
### Events
-| Event name | Type | Detail |
-| :-------------------- | :--------- | :------------------------------ |
-| transitionend | dispatched | { open: boolean; } |
-| keydown | forwarded | -- |
-| click | forwarded | -- |
-| mouseover | forwarded | -- |
-| mouseenter | forwarded | -- |
-| mouseleave | forwarded | -- |
-| submit | dispatched | null |
-| click:button--primary | dispatched | null |
-| close | dispatched | null |
-| open | dispatched | null |
+| Event name | Type | Detail |
+| :------------ | :--------- | :------------------------------ |
+| transitionend | dispatched | { open: boolean; } |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| submit | dispatched | -- |
+| close | dispatched | -- |
+| open | dispatched | -- |
## `Content`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | ------------------- | --------------------------- | ----------------------------------- |
-| id | No | let | No | string | "main-content" | Specify the id for the main element |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :------------------ | --------------------------- | ----------------------------------- |
+| id | let | No | string | "main-content" | Specify the id for the main element |
### Slots
@@ -763,10 +708,11 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :------------ | :------- | :--------------- | :------- | ----------------------------- | ---------------------- | ----------------------------------------- |
-| selectedIndex | No | let | Yes | number | 0 | Set the selected index of the switch item |
-| size | No | let | No | "sm" | "xl" | undefined | Specify the size of the content switcher |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :------------ | :--------------- | :------- | :---------------------------- | ------------------ | ----------------------------------------- |
+| selectedIndex | let | Yes | number | 0 | Set the selected index of the switch item |
+| light | let | No | boolean | false | Set to `true` to enable the light variant |
+| size | let | No | "sm" | "xl" | -- | Specify the size of the content switcher |
### Slots
@@ -788,13 +734,12 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | --------------------------------------------------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- |
-| ref | No | let | Yes | null | HTMLUListElement | null | Obtain a reference to the unordered list HTML element |
-| y | No | let | Yes | number | 0 | Specify the vertical offset of the menu position |
-| x | No | let | Yes | number | 0 | Specify the horizontal offset of the menu position |
-| open | No | let | Yes | boolean | false | Set to `true` to open the menu Either `x` and `y` must be greater than zero |
-| target | No | let | No | null | ReadonlyArray | null | Specify an element or list of elements to trigger the context menu. If no element is specified, the context menu applies to the entire window |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :---------------------------------------- | ------------------ | -------------------------------------------------------------------------------- |
+| ref | let | Yes | null | HTMLUListElement | null | Obtain a reference to the unordered list HTML element |
+| y | let | Yes | number | 0 | Specify the vertical offset of the menu position |
+| x | let | Yes | number | 0 | Specify the horizontal offset of the menu position |
+| open | let | Yes | boolean | false | Set to `true` to open the menu Either `x` and `y` must be greater than zero |
### Slots
@@ -804,12 +749,12 @@ None.
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :----------------------- |
-| open | dispatched | HTMLElement |
-| click | forwarded | -- |
-| keydown | forwarded | -- |
-| close | dispatched | null |
+| Event name | Type | Detail |
+| :--------- | :--------- | :----- |
+| click | forwarded | -- |
+| keydown | forwarded | -- |
+| open | dispatched | -- |
+| close | dispatched | -- |
## `ContextMenuDivider`
@@ -829,10 +774,10 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :---------- | :------- | :--------------- | :------- | ---------------------------------- | --------------- | ---------------------- |
-| selectedIds | No | let | Yes | ReadonlyArray | [] | -- |
-| labelText | No | let | No | string | "" | Specify the label text |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :---------- | :--------------- | :------- | :-------------------- | --------------- | ---------------------- |
+| selectedIds | let | Yes | string[] | [] | -- |
+| labelText | let | No | string | "" | Specify the label text |
### Slots
@@ -848,45 +793,44 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :----------- | :------- | :--------------- | :------- | -------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------- |
-| ref | No | let | Yes | null | HTMLLIElement | null | Obtain a reference to the list item HTML element |
-| selectable | No | let | Yes | boolean | false | Set to `true` to enable the selectable variant Automatically set to `true` if `selected` is `true` |
-| selected | No | let | Yes | boolean | false | Set to `true` to use the selected variant |
-| icon | No | let | Yes | any | undefined | Specify the icon to render Icon is rendered to the left of the label text |
-| indented | No | let | Yes | boolean | false | Set to `true` to indent the label |
-| kind | No | let | No | "default" | "danger" | "default" | Specify the kind of option |
-| disabled | No | let | No | boolean | false | Set to `true` to enable the disabled state |
-| labelText | No | let | No | string | "" | Specify the label text. Alternatively, use the "labelText" slot (e.g., `<span slot="labelText">...</span>`) |
-| shortcutText | No | let | No | string | "" | Specify the shortcut text. Alternatively, use the "shortcutText" slot (e.g., `<span slot="shortcutText">...</span>`) |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Specify the id It's recommended to provide an id as a value to bind to within a selectable/radio menu group |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :----------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- |
+| ref | let | Yes | null | HTMLLIElement | null | Obtain a reference to the list item HTML element |
+| selectable | let | Yes | boolean | false | Set to `true` to enable the selectable variant Automatically set to `true` if `selected` is `true` |
+| selected | let | Yes | boolean | false | Set to `true` to use the selected variant |
+| icon | let | Yes | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render Icon is rendered to the left of the label text |
+| indented | let | Yes | boolean | false | Set to `true` to indent the label |
+| kind | let | No | "default" | "danger" | "default" | Specify the kind of option |
+| disabled | let | No | boolean | false | Set to `true` to enable the disabled state |
+| labelText | let | No | string | "" | Specify the label text Alternatively, use the "labelText" slot (e.g., <span slot="labelText">...</span>) |
+| shortcutText | let | No | string | "" | Specify the shortcut text Alternatively, use the "shortcutText" slot (e.g., <span slot="shortcutText">...</span>) |
+| id | let | No | string | "ccs-" + Math.random().toString(36) | Specify the id It's recommended to provide an id as a value to bind to within a selectable/radio menu group |
### Slots
-| Slot name | Default | Props | Fallback |
-| :----------- | :------ | :---- | :-------------------------------------------------- |
-| -- | Yes | -- | -- |
-| icon | No | -- | <svelte:component this={icon} /> |
-| labelText | No | -- | {labelText} |
-| shortcutText | No | -- | {shortcutText} |
+| Slot name | Default | Props | Fallback |
+| :----------- | :------ | :---- | :-------------------------- |
+| -- | Yes | -- | -- |
+| labelText | No | -- | {labelText} |
+| shortcutText | No | -- | {shortcutText} |
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :---------------- |
-| keydown | forwarded | -- |
-| mouseenter | forwarded | -- |
-| mouseleave | forwarded | -- |
-| click | dispatched | null |
+| Event name | Type | Detail |
+| :--------- | :--------- | :----- |
+| keydown | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| click | dispatched | -- |
## `ContextMenuRadioGroup`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :--------- | :------- | :--------------- | :------- | ------------------- | --------------- | ------------------------------- |
-| selectedId | No | let | Yes | string | "" | Set the selected radio group id |
-| labelText | No | let | No | string | "" | Specify the label text |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :--------- | :--------------- | :------- | :------------------ | --------------- | ------------------------------- |
+| selectedId | let | Yes | string | "" | Set the selected radio group id |
+| labelText | let | No | string | "" | Specify the label text |
### Slots
@@ -898,17 +842,37 @@ None.
None.
+## `Copy`
+
+### Props
+
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------------- | :--------------- | :------- | :----------------------------------------- | ---------------------- | ------------------------------------------------------ |
+| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element |
+| feedback | let | No | string | "Copied!" | Set the feedback text shown after clicking the button |
+| feedbackTimeout | let | No | number | 2000 | Set the timeout duration (ms) to display feedback text |
+
+### Slots
+
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :--------------------------------------------------------------------------------- |
+| -- | Yes | -- | {#if animation}{feedback || $$restProps["aria-label"]}{/if} |
+
+### Events
+
+| Event name | Type | Detail |
+| :----------- | :-------- | :----- |
+| click | forwarded | -- |
+| animationend | forwarded | -- |
+
## `CopyButton`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------------- | :------- | :--------------- | :------- | ----------------------------------- | ----------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
-| feedback | No | let | No | string | "Copied!" | Set the feedback text shown after clicking the button |
-| feedbackTimeout | No | let | No | number | 2000 | Set the timeout duration (ms) to display feedback text |
-| iconDescription | No | let | No | string | "Copy to clipboard" | Set the title and ARIA label for the copy button |
-| text | Yes | let | No | string | undefined | Specify the text to copy |
-| copy | No | let | No | (text: string) => void | async (text) => { try { await navigator.clipboard.writeText(text); } catch (e) { console.log(e); } } | Override the default copy behavior of using the navigator.clipboard.writeText API to copy text |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------------- | :--------------- | :------- | :------------------ | -------------------------------- | ------------------------------------------------ |
+| iconDescription | let | No | string | "Copy to clipboard" | Set the title and ARIA label for the copy button |
+| text | let | No | string | -- | Specify the text to copy |
### Slots
@@ -916,127 +880,107 @@ None.
### Events
-| Event name | Type | Detail |
-| :----------- | :--------- | :---------------- |
-| click | forwarded | -- |
-| animationend | forwarded | -- |
-| copy | dispatched | null |
+| Event name | Type | Detail |
+| :----------- | :--------- | :----- |
+| click | forwarded | -- |
+| animationend | forwarded | -- |
+| copy | dispatched | -- |
## `DataTable`
### Types
```ts
-export type DataTableKey =
- import("./DataTableTypes.d.ts").PropertyPath;
+export type DataTableKey = string;
export type DataTableValue = any;
-export interface DataTableEmptyHeader {
- key: DataTableKey | (string & {});
+export interface DataTableEmptyHeader {
+ key: DataTableKey;
empty: boolean;
- display?: (item: DataTableValue, row: Row) => DataTableValue;
- sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
+ display?: (item: Value) => DataTableValue;
+ sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1);
columnMenu?: boolean;
- width?: string;
- minWidth?: string;
}
-export interface DataTableNonEmptyHeader {
- key: DataTableKey;
+export interface DataTableNonEmptyHeader {
+ key: DataTableKey;
value: DataTableValue;
- display?: (item: DataTableValue, row: Row) => DataTableValue;
- sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
+ display?: (item: Value) => DataTableValue;
+ sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1);
columnMenu?: boolean;
- width?: string;
- minWidth?: string;
}
-export type DataTableHeader =
- | DataTableNonEmptyHeader
- | DataTableEmptyHeader;
+export type DataTableHeader = DataTableNonEmptyHeader | DataTableEmptyHeader;
export interface DataTableRow {
id: any;
[key: string]: DataTableValue;
}
-export type DataTableRowId = any;
+export type DataTableRowId = string;
-export interface DataTableCell {
- key: DataTableKey | (string & {});
+export interface DataTableCell {
+ key: DataTableKey;
value: DataTableValue;
- display?: (item: DataTableValue, row: DataTableRow) => DataTableValue;
}
```
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :------------------ | :------- | :--------------- | :------- | ------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| selectedRowIds | No | let | Yes | ReadonlyArray | [] | Specify the row ids to be selected |
-| selectable | No | let | Yes | boolean | false | Set to `true` for the selectable variant Automatically set to `true` if `radio` or `batchSelection` are `true` |
-| expandedRowIds | No | let | Yes | ReadonlyArray | [] | Specify the row ids to be expanded |
-| expandable | No | let | Yes | boolean | false | Set to `true` for the expandable variant Automatically set to `true` if `batchExpansion` is `true` |
-| sortDirection | No | let | Yes | "none" | "ascending" | "descending" | "none" | Specify the sort direction |
-| sortKey | No | let | Yes | DataTableKey | null | Specify the header key to sort by |
-| headers | No | let | No | ReadonlyArray> | [] | Specify the data table headers |
-| rows | No | let | No | ReadonlyArray | [] | Specify the rows the data table should render keys defined in `headers` are used for the row ids |
-| size | No | let | No | "compact" | "short" | "medium" | "tall" | undefined | Set the size of the data table |
-| title | No | let | No | string | "" | Specify the title of the data table |
-| description | No | let | No | string | "" | Specify the description of the data table |
-| inputName | No | let | No | string | "ccs-" + Math.random().toString(36) | Specify a name attribute for the input elements in a selectable data table (radio or checkbox). When the table is inside a form, this name will be included in the form data on submit. |
-| zebra | No | let | No | boolean | false | Set to `true` to use zebra styles |
-| sortable | No | let | No | boolean | false | Set to `true` for the sortable variant |
-| batchExpansion | No | let | No | boolean | false | Set to `true` to enable batch expansion |
-| nonExpandableRowIds | No | let | No | ReadonlyArray | [] | Specify the ids for rows that should not be expandable |
-| radio | No | let | No | boolean | false | Set to `true` for the radio selection variant |
-| batchSelection | No | let | No | boolean | false | Set to `true` to enable batch selection |
-| nonSelectableRowIds | No | let | No | ReadonlyArray | [] | Specify the ids of rows that should not be selectable |
-| stickyHeader | No | let | No | boolean | false | Set to `true` to enable a sticky header |
-| useStaticWidth | No | let | No | boolean | false | Set to `true` to use static width |
-| pageSize | No | let | No | number | 0 | Specify the number of items to display in a page |
-| page | No | let | No | number | 0 | Set to `number` to set current page |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :------------- | :--------------- | :------- | :-------------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------- |
+| selectedRowIds | let | Yes | DataTableRowId[] | [] | Specify the row ids to be selected |
+| selectable | let | Yes | boolean | false | Set to `true` for the selectable variant Automatically set to `true` if `radio` or `batchSelection` are `true` |
+| expandedRowIds | let | Yes | DataTableRowId[] | [] | Specify the row ids to be expanded |
+| expandable | let | Yes | boolean | false | Set to `true` for the expandable variant Automatically set to `true` if `batchExpansion` is `true` |
+| rows | let | Yes | DataTableRow[] | [] | Specify the rows the data table should render keys defined in `headers` are used for the row ids |
+| headers | let | No | DataTableHeader[] | [] | Specify the data table headers |
+| size | let | No | "compact" | "short" | "tall" | -- | Set the size of the data table |
+| title | let | No | string | "" | Specify the title of the data table |
+| description | let | No | string | "" | Specify the description of the data table |
+| zebra | let | No | boolean | false | Set to `true` to use zebra styles |
+| sortable | let | No | boolean | false | Set to `true` for the sortable variant |
+| batchExpansion | let | No | boolean | false | Set to `true` to enable batch expansion |
+| radio | let | No | boolean | false | Set to `true` for the radio selection variant |
+| batchSelection | let | No | boolean | false | Set to `true` to enable batch selection |
+| stickyHeader | let | No | boolean | false | Set to `true` to enable a sticky header |
### Slots
-| Slot name | Default | Props | Fallback |
-| :----------- | :------ | :----------------------------------------------------------------------------------------- | :----------------------------------------------------------------------- |
-| -- | Yes | -- | -- |
-| cell | No | { row: Row; cell: DataTableCell; rowIndex: number; cellIndex: number; } | {cell.display ? cell.display(cell.value, row) : cell.value} |
-| cell-header | No | { header: DataTableNonEmptyHeader; } | {header.value} |
-| description | No | -- | {description} |
-| expanded-row | No | { row: Row; } | -- |
-| title | No | -- | {title} |
+| Slot name | Default | Props | Fallback |
+| :----------- | :------ | :-------------------------------------------------------- | :------------------------------------------------------------------------------------------ |
+| -- | Yes | -- | -- |
+| cell | No | { row: DataTableRow; cell: DataTableCell; } | {headers[j].display ? headers[j].display(cell.value) : cell.value} |
+| cell-header | No | { header: DataTableNonEmptyHeader; } | {header.value} |
+| expanded-row | No | { row: DataTableRow; } | -- |
### Events
-| Event name | Type | Detail |
-| :------------------- | :--------- | :----------------------------------------------------------------------------------------------------------- |
-| click | dispatched | { header?: DataTableHeader; row?: Row; cell?: DataTableCell; } |
-| click:header--expand | dispatched | { expanded: boolean; } |
-| click:header | dispatched | { header: DataTableHeader; sortDirection?: "ascending" | "descending" | "none" } |
-| click:header--select | dispatched | { indeterminate: boolean; selected: boolean; } |
-| click:row | dispatched | Row |
-| mouseenter:row | dispatched | Row |
-| mouseleave:row | dispatched | Row |
-| click:row--expand | dispatched | { expanded: boolean; row: Row; } |
-| click:row--select | dispatched | { selected: boolean; row: Row; } |
-| click:cell | dispatched | DataTableCell |
+| Event name | Type | Detail |
+| :------------------- | :--------- | :------------------------------------------------------------------------------------------------------ |
+| click | dispatched | { header?: DataTableHeader; row?: DataTableRow; cell?: DataTableCell; } |
+| click:header--expand | dispatched | { expanded: boolean; } |
+| click:header | dispatched | { header: DataTableHeader; sortDirection?: "ascending" | "descending" | "none" } |
+| click:row | dispatched | DataTableRow |
+| mouseenter:row | dispatched | DataTableRow |
+| mouseleave:row | dispatched | DataTableRow |
+| click:row--expand | dispatched | { expanded: boolean; row: DataTableRow; } |
+| click:cell | dispatched | DataTableCell |
## `DataTableSkeleton`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :---------- | :------- | :--------------- | :------- | ------------------------------------------------------------------ | ---------------------- | -------------------------------------------------------------------------------------------- |
-| columns | No | let | No | number | 5 | Specify the number of columns Superseded by `headers` if `headers` is a non-empty array |
-| rows | No | let | No | number | 5 | Specify the number of rows |
-| size | No | let | No | "compact" | "short" | "tall" | undefined | Set the size of the data table |
-| zebra | No | let | No | boolean | false | Set to `true` to apply zebra styles to the datatable rows |
-| showHeader | No | let | No | boolean | true | Set to `false` to hide the header |
-| headers | No | let | No | ReadonlyArray> | [] | Set the column headers Supersedes `columns` if value is a non-empty array |
-| showToolbar | No | let | No | boolean | true | Set to `false` to hide the toolbar |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :---------- | :--------------- | :------- | :------------------------------------------------------ | ------------------ | -------------------------------------------------------------------------------------------- |
+| columns | let | No | number | 5 | Specify the number of columns Superseded by `headers` if `headers` is a non-empty array |
+| rows | let | No | number | 5 | Specify the number of rows |
+| size | let | No | "compact" | "short" | "tall" | -- | Set the size of the data table |
+| zebra | let | No | boolean | false | Set to `true` to apply zebra styles to the datatable rows |
+| showHeader | let | No | boolean | true | Set to `false` to hide the header |
+| headers | let | No | string[] | Partial[] | [] | Set the column headers Supersedes `columns` if value is a non-empty array |
+| showToolbar | let | No | boolean | true | Set to `false` to hide the toolbar |
### Slots
@@ -1055,20 +999,18 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :------------- | :------- | :--------------- | :------- | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------- |
-| valueTo | No | let | Yes | string | "" | Specify the date picker end date value (to) Only works with the "range" date picker type |
-| valueFrom | No | let | Yes | string | "" | Specify the date picker start date value (from) Only works with the "range" date picker type |
-| value | No | let | Yes | number | string | "" | Specify the date picker input value |
-| datePickerType | No | let | No | "simple" | "single" | "range" | "simple" | Specify the date picker type |
-| dateFormat | No | let | No | string | "m/d/Y" | Specify the date format |
-| maxDate | No | let | No | null | string | Date | null | Specify the maximum date |
-| minDate | No | let | No | null | string | Date | null | Specify the minimum date |
-| locale | No | let | No | import("flatpickr/dist/types/locale").CustomLocale | import("flatpickr/dist/types/locale").key | "en" | Specify the locale |
-| short | No | let | No | boolean | false | Set to `true` to use the short variant |
-| light | No | let | No | boolean | false | Set to `true` to enable the light variant |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the date picker element |
-| flatpickrProps | No | let | No | import("flatpickr/dist/types/options").Options | { static: true } | Override the options passed to the Flatpickr instance. @see https://flatpickr.js.org/options |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | --------------------------------------------- |
+| value | let | Yes | number | string | "" | Specify the date picker input value |
+| datePickerType | let | No | "simple" | "single" | "range" | "simple" | Specify the date picker type |
+| appendTo | let | No | HTMLElement | -- | Specify the element to append the calendar to |
+| dateFormat | let | No | string | "m/d/Y" | Specify the date format |
+| maxDate | let | No | null | string | Date | null | Specify the maximum date |
+| minDate | let | No | null | string | Date | null | Specify the minimum date |
+| locale | let | No | string | "en" | Specify the locale |
+| short | let | No | boolean | false | Set to `true` to use the short variant |
+| light | let | No | boolean | false | Set to `true` to enable the light variant |
+| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the date picker element |
### Slots
@@ -1078,42 +1020,39 @@ None.
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :---------------------------------------------------------------------------------------------------------------------------------- |
-| change | dispatched | string | { selectedDates: [dateFrom: Date, dateTo?: Date]; dateStr: string | { from: string; to: string; } } |
-| click | forwarded | -- |
-| mouseover | forwarded | -- |
-| mouseenter | forwarded | -- |
-| mouseleave | forwarded | -- |
+| Event name | Type | Detail |
+| :--------- | :--------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| change | dispatched | -- |
## `DatePickerInput`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------------- | :------- | :--------------- | :------- | ----------------------------------------- | ------------------------------------------------ | -------------------------------------------------- |
-| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
-| size | No | let | No | "sm" | "xl" | undefined | Set the size of the input |
-| type | No | let | No | string | "text" | Specify the input type |
-| placeholder | No | let | No | string | "" | Specify the input placeholder text |
-| pattern | No | let | No | string | "\\d{1,2}\\/\\d{1,2}\\/\\d{4}" | Specify the Regular Expression for the input value |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the input |
-| helperText | No | let | No | string | "" | Specify the helper text |
-| iconDescription | No | let | No | string | "" | Specify the ARIA label for the calendar icon |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
-| labelText | No | let | No | string | "" | Specify the label text |
-| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text |
-| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state |
-| invalidText | No | let | No | string | "" | Specify the invalid state text |
-| warn | No | let | No | boolean | false | Set to `true` to indicate an warning state |
-| warnText | No | let | No | string | "" | Specify the warning state text |
-| name | No | let | No | string | undefined | Set a name for the input element |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | -------------------------------------------------- |
+| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
+| size | let | No | "sm" | "xl" | -- | Set the size of the input |
+| type | let | No | string | "text" | Specify the input type |
+| placeholder | let | No | string | "" | Specify the input placeholder text |
+| pattern | let | No | string | "\\d{1,2}\\/\\d{1,2}\\/\\d{4}" | Specify the Regular Expression for the input value |
+| disabled | let | No | boolean | false | Set to `true` to disable the input |
+| iconDescription | let | No | string | "" | Specify the ARIA label for the calendar icon |
+| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
+| labelText | let | No | string | "" | Specify the label text |
+| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text |
+| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state |
+| invalidText | let | No | string | "" | Specify the invalid state text |
+| warn | let | No | boolean | false | Set to `true` to indicate an warning state |
+| warnText | let | No | string | "" | Specify the warning state text |
+| name | let | No | string | -- | Set a name for the input element |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :----------------------- |
-| labelText | No | -- | {labelText} |
+None.
### Events
@@ -1121,18 +1060,16 @@ None.
| :--------- | :-------- | :----- |
| input | forwarded | -- |
| keydown | forwarded | -- |
-| keyup | forwarded | -- |
| blur | forwarded | -- |
-| paste | forwarded | -- |
## `DatePickerSkeleton`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------------------------------------ | ----------------------------------------- |
-| range | No | let | No | boolean | false | Set to `true` to use the range variant |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id to be used by the label element |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | ----------------------------------------- |
+| range | let | No | boolean | false | Set to `true` to use the range variant |
+| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id to be used by the label element |
### Slots
@@ -1152,62 +1089,60 @@ None.
### Types
```ts
-export type DropdownItemId = any;
+export type DropdownItemId = string;
export type DropdownItemText = string;
export interface DropdownItem {
id: DropdownItemId;
text: DropdownItemText;
- disabled?: boolean;
}
```
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------------- | :------- | :--------------- | :------- | ----------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
-| ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element |
-| open | No | let | Yes | boolean | false | Set to `true` to open the dropdown |
-| selectedId | Yes | let | Yes | DropdownItemId | undefined | Specify the selected item id |
-| items | No | let | No | ReadonlyArray | [] | Set the dropdown items |
-| itemToString | No | let | No | (item: DropdownItem) => string | (item) => item.text || item.id | Override the display of a dropdown item |
-| type | No | let | No | "default" | "inline" | "default" | Specify the type of dropdown |
-| direction | No | let | No | "bottom" | "top" | "bottom" | Specify the direction of the dropdown menu |
-| size | No | let | No | "sm" | "lg" | "xl" | undefined | Specify the size of the dropdown field |
-| light | No | let | No | boolean | false | Set to `true` to enable the light variant |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the dropdown |
-| titleText | No | let | No | string | "" | Specify the title text |
-| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state |
-| invalidText | No | let | No | string | "" | Specify the invalid state text |
-| warn | No | let | No | boolean | false | Set to `true` to indicate an warning state |
-| warnText | No | let | No | string | "" | Specify the warning state text |
-| helperText | No | let | No | string | "" | Specify the helper text |
-| label | No | let | No | string | undefined | Specify the list box label |
-| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text |
-| translateWithId | No | let | No | (id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string | undefined | Override the chevron icon label based on the open state. Defaults to "Open menu" when closed and "Close menu" when open |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component |
-| name | No | let | No | string | undefined | Specify a name attribute for the list box |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------------- | :--------------- | :------- | :------------------------------------------ | ----------------------------------------------------- | --------------------------------------------- |
+| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element |
+| inline | let | Yes | boolean | false | Set to `true` to use the inline variant |
+| open | let | Yes | boolean | false | Set to `true` to open the dropdown |
+| selectedIndex | let | Yes | number | -1 | Specify the selected item index |
+| items | let | No | DropdownItem[] | [] | Set the dropdown items |
+| itemToString | let | No | (item: DropdownItem) => string | (item) => item.text || item.id | Override the display of a dropdown item |
+| type | let | No | "default" | "inline" | "default" | Specify the type of dropdown |
+| direction | let | No | "bottom" | "top" | "bottom" | Specify the direction of the dropdown menu |
+| size | let | No | "sm" | "lg" | "xl" | -- | Specify the size of the dropdown field |
+| light | let | No | boolean | false | Set to `true` to enable the light variant |
+| disabled | let | No | boolean | false | Set to `true` to disable the dropdown |
+| titleText | let | No | string | "" | Specify the title text |
+| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state |
+| invalidText | let | No | string | "" | Specify the invalid state text |
+| warn | let | No | boolean | false | Set to `true` to indicate an warning state |
+| warnText | let | No | string | "" | Specify the warning state text |
+| helperText | let | No | string | "" | Specify the helper text |
+| label | let | No | string | -- | Specify the list box label |
+| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text |
+| translateWithId | let | No | (id: any) => string | -- | Override the default translation ids |
+| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component |
+| name | let | No | string | -- | Specify a name attribute for the list box |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :--------------------------------------------------- | :-------------------------------- |
-| -- | Yes | { item: DropdownItem; index: number; } | {itemToString(item)} |
+None.
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :---------------------------------------------------------------------- |
-| select | dispatched | { selectedId: DropdownItemId, selectedItem: DropdownItem } |
+| Event name | Type | Detail |
+| :--------- | :--------- | :--------------------------------------------------------------------------------------------- |
+| select | dispatched | { selectedId: DropdownItemId, selectedIndex: number, selectedItem: DropdownItem } |
## `DropdownSkeleton`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | --------------------------------------- |
-| inline | No | let | No | boolean | false | Set to `true` to use the inline variant |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------- |
+| inline | let | No | boolean | false | Set to `true` to use the inline variant |
### Slots
@@ -1226,19 +1161,19 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------------------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ----------------------------------------------------- |
-| ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the top-level element |
-| tilePadding | No | let | Yes | number | 0 | Specify the padding of the tile (number of pixels) |
-| tileMaxHeight | No | let | Yes | number | 0 | Specify the max height of the tile (number of pixels) |
-| expanded | No | let | Yes | boolean | false | Set to `true` to expand the tile |
-| light | No | let | No | boolean | false | Set to `true` to enable the light variant |
-| tileCollapsedIconText | No | let | No | string | "Interact to expand Tile" | Specify the icon text of the collapsed tile |
-| tileExpandedIconText | No | let | No | string | "Interact to collapse Tile" | Specify the icon text of the expanded tile |
-| tileExpandedLabel | No | let | No | string | "" | Specify the icon label of the expanded tile |
-| tileCollapsedLabel | No | let | No | string | "" | Specify the icon label of the collapsed tile |
-| tabindex | No | let | No | string | "0" | Specify the tabindex |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level div element |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------------------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ----------------------------------------------------- |
+| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the top-level element |
+| tilePadding | let | Yes | number | 0 | Specify the padding of the tile (number of pixels) |
+| tileMaxHeight | let | Yes | number | 0 | Specify the max height of the tile (number of pixels) |
+| expanded | let | Yes | boolean | false | Set to `true` to expand the tile |
+| light | let | No | boolean | false | Set to `true` to enable the light variant |
+| tileCollapsedIconText | let | No | string | "Interact to expand Tile" | Specify the icon text of the collapsed tile |
+| tileExpandedIconText | let | No | string | "Interact to collapse Tile" | Specify the icon text of the expanded tile |
+| tileExpandedLabel | let | No | string | "" | Specify the icon label of the expanded tile |
+| tileCollapsedLabel | let | No | string | "" | Specify the icon label of the collapsed tile |
+| tabindex | let | No | string | "0" | Specify the tabindex |
+| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level div element |
### Slots
@@ -1261,126 +1196,113 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :--------------- | :------- | :----------------- | :------- | ------------------------------------------------------------------ | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| files | No | let | Yes | ReadonlyArray | [] | Obtain a reference to the uploaded files |
-| status | No | let | No | "uploading" | "edit" | "complete" | "uploading" | Specify the file uploader status |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the file uploader |
-| accept | No | let | No | ReadonlyArray | [] | Specify the accepted file types |
-| multiple | No | let | No | boolean | false | Set to `true` to allow multiple files |
-| clearFiles | No | const | No | () => void | () => { files = []; } | Programmatically clear the uploaded files |
-| labelTitle | No | let | No | string | "" | Specify the label title. Alternatively, use the named slot "labelTitle" (e.g., `<span slot="labelTitle">...</span>`) |
-| labelDescription | No | let | No | string | "" | Specify the label description. Alternatively, use the named slot "labelDescription" (e.g., `<span slot="labelDescription">...</span>`) |
-| kind | No | let | No | import("../Button/Button.svelte").ButtonProps["kind"] | "primary" | Specify the kind of file uploader button |
-| size | No | let | No | import("../Button/Button.svelte").ButtonProps["size"] | "small" | Specify the size of the file uploader button |
-| buttonLabel | No | let | No | string | "" | Specify the button label |
-| iconDescription | No | let | No | string | "Provide icon description" | Specify the ARIA label used for the status icons |
-| name | No | let | No | string | "" | Specify a name attribute for the file button uploader input |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :--------------- | :----------------- | :------- | :----------------------------------------------------------------------------------------- | --------------------------------------- | --------------------------------------------------------------------- |
+| files | let | Yes | File[] | [] | Obtain the uploaded file names |
+| status | let | No | "uploading" | "edit" | "complete" | "uploading" | Specify the file uploader status |
+| accept | let | No | string[] | [] | Specify the accepted file types |
+| multiple | let | No | boolean | false | Set to `true` to allow multiple files |
+| clearFiles | const | No | () => void | () => { files = []; } | Override the default behavior of clearing the array of uploaded files |
+| labelDescription | let | No | string | "" | Specify the label description |
+| labelTitle | let | No | string | "" | Specify the label title |
+| kind | let | No | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "primary" | Specify the kind of file uploader button |
+| buttonLabel | let | No | string | "" | Specify the button label |
+| iconDescription | let | No | string | "Provide icon description" | Specify the ARIA label used for the status icons |
+| name | let | No | string | "" | Specify a name attribute for the file button uploader input |
### Slots
-| Slot name | Default | Props | Fallback |
-| :--------------- | :------ | :---- | :------------------------------ |
-| labelDescription | No | -- | {labelDescription} |
-| labelTitle | No | -- | {labelTitle} |
+None.
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :------------------------------- |
-| add | dispatched | ReadonlyArray |
-| remove | dispatched | ReadonlyArray |
-| change | dispatched | ReadonlyArray |
-| click | forwarded | -- |
-| mouseover | forwarded | -- |
-| mouseenter | forwarded | -- |
-| mouseleave | forwarded | -- |
-| keydown | forwarded | -- |
+| Event name | Type | Detail |
+| :--------- | :--------- | :------------------ |
+| add | dispatched | File[] |
+| remove | dispatched | File[] |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| change | forwarded | -- |
+| keydown | forwarded | -- |
## `FileUploaderButton`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :------------------ | :------- | :--------------- | :------- | ------------------------------------------------------------------ | ------------------------------------------------ | -------------------------------------------- |
-| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
-| labelText | No | let | Yes | string | "Add file" | Specify the label text |
-| files | No | let | Yes | ReadonlyArray | [] | Obtain a reference to the uploaded files |
-| accept | No | let | No | ReadonlyArray | [] | Specify the accepted file types |
-| multiple | No | let | No | boolean | false | Set to `true` to allow multiple files |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the input |
-| disableLabelChanges | No | let | No | boolean | false | Set to `true` to disable label changes |
-| kind | No | let | No | import("../Button/Button.svelte").ButtonProps["kind"] | "primary" | Specify the kind of file uploader button |
-| size | No | let | No | import("../Button/Button.svelte").ButtonProps["size"] | "small" | Specify the size of the file uploader button |
-| role | No | let | No | string | "button" | Specify the label role |
-| tabindex | No | let | No | string | "0" | Specify `tabindex` attribute |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
-| name | No | let | No | string | "" | Specify a name attribute for the input |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :------------------ | :--------------- | :------- | :----------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------------------------------- |
+| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
+| labelText | let | Yes | string | "Add file" | Specify the label text |
+| accept | let | No | string[] | [] | Specify the accepted file types |
+| multiple | let | No | boolean | false | Set to `true` to allow multiple files |
+| disabled | let | No | boolean | false | Set to `true` to disable the input |
+| disableLabelChanges | let | No | boolean | false | Set to `true` to disable label changes |
+| kind | let | No | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "primary" | Specify the kind of file uploader button |
+| role | let | No | string | "button" | Specify the label role |
+| tabindex | let | No | string | "0" | Specify `tabindex` attribute |
+| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
+| name | let | No | string | "" | Specify a name attribute for the input |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :----------------------- |
-| labelText | No | -- | {labelText} |
+None.
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :------------------------------- |
-| change | dispatched | ReadonlyArray |
-| keydown | forwarded | -- |
-| click | forwarded | -- |
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| keydown | forwarded | -- |
+| change | forwarded | -- |
+| click | forwarded | -- |
## `FileUploaderDropContainer`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :------------ | :------- | :--------------- | :------- | ---------------------------------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------- |
-| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
-| files | No | let | Yes | ReadonlyArray | [] | Obtain a reference to the uploaded files |
-| accept | No | let | No | ReadonlyArray | [] | Specify the accepted file types |
-| multiple | No | let | No | boolean | false | Set to `true` to allow multiple files |
-| validateFiles | No | let | No | (files: ReadonlyArray) => ReadonlyArray | (files) => files | Override the default behavior of validating uploaded files. By default, files are not validated |
-| labelText | No | let | No | string | "Add file" | Specify the label text |
-| role | No | let | No | string | "button" | Specify the `role` attribute of the drop container |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the input |
-| tabindex | No | let | No | string | "0" | Specify `tabindex` attribute |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
-| name | No | let | No | string | "" | Specify a name attribute for the input |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :------------ | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------ |
+| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
+| accept | let | No | string[] | [] | Specify the accepted file types |
+| multiple | let | No | boolean | false | Set to `true` to allow multiple files |
+| validateFiles | let | No | (files: FileList) => FileList | (files) => files | Override the default behavior of validating uploaded files The default behavior does not validate files |
+| labelText | let | No | string | "Add file" | Specify the label text |
+| role | let | No | string | "button" | Specify the `role` attribute of the drop container |
+| disabled | let | No | boolean | false | Set to `true` to disable the input |
+| tabindex | let | No | string | "0" | Specify `tabindex` attribute |
+| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
+| name | let | No | string | "" | Specify a name attribute for the input |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :----------------------- |
-| labelText | No | -- | {labelText} |
+None.
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :------------------------------- |
-| add | dispatched | ReadonlyArray |
-| change | dispatched | ReadonlyArray |
-| dragover | forwarded | -- |
-| dragleave | forwarded | -- |
-| drop | forwarded | -- |
-| keydown | forwarded | -- |
-| click | forwarded | -- |
+| Event name | Type | Detail |
+| :--------- | :--------- | :-------------------- |
+| add | dispatched | FileList |
+| dragover | forwarded | -- |
+| dragleave | forwarded | -- |
+| drop | forwarded | -- |
+| keydown | forwarded | -- |
+| change | forwarded | -- |
+| click | forwarded | -- |
## `FileUploaderItem`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------------- | :------- | :--------------- | :------- | -------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------ |
-| status | No | let | No | "uploading" | "edit" | "complete" | "uploading" | Specify the file uploader status |
-| size | No | let | No | "default" | "field" | "small" | "default" | Specify the size of button skeleton |
-| iconDescription | No | let | No | string | "" | Specify the ARIA label used for the status icons |
-| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state |
-| errorSubject | No | let | No | string | "" | Specify the error subject text |
-| errorBody | No | let | No | string | "" | Specify the error body text |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element |
-| name | No | let | No | string | "" | Specify the file uploader name |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------------- | :--------------- | :------- | :------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------ |
+| status | let | No | "uploading" | "edit" | "complete" | "uploading" | Specify the file uploader status |
+| iconDescription | let | No | string | "" | Specify the ARIA label used for the status icons |
+| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state |
+| errorSubject | let | No | string | "" | Specify the error subject text |
+| errorBody | let | No | string | "" | Specify the error body text |
+| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element |
+| name | let | No | string | "" | Specify the file uploader name |
### Slots
@@ -1418,11 +1340,11 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------------- | :------- | :--------------- | :------- | -------------------------------------------------------- | ------------------------ | ------------------------------------------------ |
-| status | No | let | No | "uploading" | "edit" | "complete" | "uploading" | Specify the file name status |
-| iconDescription | No | let | No | string | "" | Specify the ARIA label used for the status icons |
-| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------------- | :--------------- | :------- | :------------------------------------------------------- | ------------------------ | ------------------------------------------------ |
+| status | let | No | "uploading" | "edit" | "complete" | "uploading" | Specify the file name status |
+| iconDescription | let | No | string | "" | Specify the ARIA label used for the status icons |
+| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state |
### Slots
@@ -1462,9 +1384,7 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | ---------------------------------------- | ----------------- | -------------------------------------- |
-| ref | No | let | Yes | null | HTMLFormElement | null | Obtain a reference to the form element |
+None.
### Slots
@@ -1487,14 +1407,13 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :---------- | :------- | :--------------- | :------- | -------------------- | ------------------ | --------------------------------------------- |
-| noMargin | No | let | No | boolean | false | Set to `true` for to remove the bottom margin |
-| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state |
-| message | No | let | No | boolean | false | Set to `true` to render a form requirement |
-| messageText | No | let | No | string | "" | Specify the message text |
-| legendText | No | let | No | string | "" | Specify the legend text |
-| legendId | No | let | No | string | "" | Specify an id for the legend element |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :---------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------------- |
+| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state |
+| message | let | No | boolean | false | Set to `true` to render a form requirement |
+| noMargin | let | No | boolean | false | Set to `true` for to remove the bottom margin |
+| messageText | let | No | string | "" | Specify the message text |
+| legendText | let | No | string | "" | Specify the legend text |
### Slots
@@ -1536,9 +1455,9 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | ------------------- | ------------------------------------------------ | ----------------------------------------- |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id to be used by the label element |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :------------------ | ------------------------------------------------ | ----------------------------------------- |
+| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id to be used by the label element |
### Slots
@@ -1559,16 +1478,16 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :------------ | :------- | :--------------- | :------- | -------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| as | No | let | No | boolean | false | Set to `true` to render a custom HTML element Props are destructured as `props` in the default slot (e.g., <Grid let:props><header {...props}>...</header></Grid>) |
-| condensed | No | let | No | boolean | false | Set to `true` to use the condensed variant |
-| narrow | No | let | No | boolean | false | Set to `true` to use the narrow variant |
-| fullWidth | No | let | No | boolean | false | Set to `true` to use the fullWidth variant |
-| noGutter | No | let | No | boolean | false | Set to `true` to remove the gutter |
-| noGutterLeft | No | let | No | boolean | false | Set to `true` to remove the left gutter |
-| noGutterRight | No | let | No | boolean | false | Set to `true` to remove the right gutter |
-| padding | No | let | No | boolean | false | Set to `true` to add top and bottom padding to all columns |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :------------ | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| as | let | No | boolean | false | Set to `true` to render a custom HTML element Props are destructured as `props` in the default slot (e.g., <Grid let:props><header {...props}>...</header></Grid>) |
+| condensed | let | No | boolean | false | Set to `true` to use the condensed variant |
+| narrow | let | No | boolean | false | Set to `true` to use the narrow variant |
+| fullWidth | let | No | boolean | false | Set to `true` to use the fullWidth variant |
+| noGutter | let | No | boolean | false | Set to `true` to remove the gutter |
+| noGutterLeft | let | No | boolean | false | Set to `true` to remove the left gutter |
+| noGutterRight | let | No | boolean | false | Set to `true` to remove the right gutter |
+| padding | let | No | boolean | false | Set to `true` to add top and bottom padding to all columns |
### Slots
@@ -1584,28 +1503,24 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :---------------------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
-| isSideNavOpen | No | let | Yes | boolean | false | Set to `true` to open the side nav |
-| expandedByDefault | No | let | No | boolean | true | Set to `false` to hide the side nav by default |
-| uiShellAriaLabel | No | let | No | string | undefined | Specify the ARIA label for the header |
-| href | No | let | No | string | undefined | Specify the `href` attribute |
-| company | No | let | No | string | undefined | Specify the company name.
Alternatively, use the named slot "company" (e.g., `<span slot="company">...</span>`) |
-| platformName | No | let | No | string | "" | Specify the platform name. Alternatively, use the named slot "platform" (e.g., `<span slot="platform">...</span>`) |
-| persistentHamburgerMenu | No | let | No | boolean | false | Set to `true` to persist the hamburger menu |
-| expansionBreakpoint | No | let | No | number | 1056 | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden. 1056 represents the "large" breakpoint in pixels from the Carbon Design System: - small: 320 - medium: 672 - large: 1056 - x-large: 1312 - max: 1584 |
-| iconMenu | No | let | No | any | undefined | Specify the icon to render for the closed state. Defaults to `<Menu size={20} />` |
-| iconClose | No | let | No | any | undefined | Specify the icon to render for the opened state. Defaults to `<Close size={20} />` |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :---------------------- | :--------------- | :------- | :----------------------------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------- |
+| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
+| isSideNavOpen | let | Yes | boolean | false | Set to `true` to open the side nav |
+| expandedByDefault | let | No | boolean | true | Set to `false` to hide the side nav by default |
+| uiShellAriaLabel | let | No | string | -- | Specify the ARIA label for the header |
+| href | let | No | string | -- | Specify the `href` attribute |
+| company | let | No | string | -- | Specify the company name |
+| platformName | let | No | string | "" | Specify the platform name Alternatively, use the named slot "platform" (e.g., <span slot="platform">...</span>) |
+| persistentHamburgerMenu | let | No | boolean | false | Set to `true` to persist the hamburger menu |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------------- | :------ | :---- | :--------------------------- |
-| -- | Yes | -- | -- |
-| company | No | -- | {company} |
-| platform | No | -- | {platformName} |
-| skip-to-content | No | -- | -- |
+| Slot name | Default | Props | Fallback |
+| :-------------- | :------ | :---- | :-------------------------- |
+| -- | Yes | -- | -- |
+| platform | No | -- | {platformName} |
+| skip-to-content | No | -- | -- |
### Events
@@ -1615,73 +1530,94 @@ None.
## `HeaderAction`
+### Types
+
+```ts
+export interface HeaderActionSlideTransition {
+ delay?: number;
+ duration?: number;
+ easing?: (t: number) => number;
+}
+```
+
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :------------------------- | :------- | :--------------- | :------- | ----------------------------------------------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- |
-| ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element |
-| isOpen | No | let | Yes | boolean | false | Set to `true` to open the panel |
-| icon | No | let | No | any | undefined | Specify the icon to render when the action panel is closed. Defaults to `<Switcher size={20} />` |
-| closeIcon | No | let | No | any | undefined | Specify the icon to render when the action panel is open. Defaults to `<Close size={20} />` |
-| text | No | let | No | string | undefined | Specify the text displayed next to the icon. Alternatively, use the named slot "text" (e.g., `<div slot="text">...</div>`) |
-| iconDescription | No | let | No | string | undefined | Specify an icon tooltip. The tooltip will not be displayed if either the `text` prop or a named slot="text" is used |
-| tooltipAlignment | No | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon. Only applies when `iconDescription` is provided |
-| transition | No | let | No | false | import("svelte/transition").SlideParams | { duration: 200 } | Customize the panel transition (i.e., `transition:slide`). Set to `false` to disable the transition |
-| preventCloseOnClickOutside | No | let | No | boolean | false | Set to `true` to prevent the panel from closing when clicking outside |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :--------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------- |
+| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element |
+| isOpen | let | Yes | boolean | false | Set to `true` to open the panel |
+| icon | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render |
+| text | let | No | string | -- | Specify the text Alternatively, use the named slot "text" (e.g., <div slot="text">...</div>) |
+| transition | let | No | false | HeaderActionSlideTransition | { duration: 200 } | Customize the panel transition (i.e., `transition:slide`) Set to `false` to disable the transition |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :------------------------------------------------------------------------------------------------- |
-| -- | Yes | -- | -- |
-| closeIcon | No | -- | <svelte:component this={closeIcon} size={20} /> |
-| icon | No | -- | <svelte:component this={icon} size={20} /> |
-| text | No | -- | {#if text}<span class:bx--header\_\_action-text={true}>{text}</span>{/if} |
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :---------------------------------------------------------- |
+| -- | Yes | -- | -- |
+| text | No | -- | {#if text}<span>{text}</span>{/if} |
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :---------------- |
-| open | dispatched | null |
-| close | dispatched | null |
-| click | forwarded | -- |
+| Event name | Type | Detail |
+| :--------- | :--------- | :----- |
+| click | forwarded | -- |
+| close | dispatched | -- |
## `HeaderActionLink`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :----------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | --------------------------------------------- |
-| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
-| linkIsActive | No | let | No | boolean | false | Set to `true` to use the active state |
-| href | No | let | No | string | undefined | Specify the `href` attribute |
-| icon | No | let | No | any | undefined | Specify the icon to render |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :----------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------ | ----------------------------------------------------- |
+| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
+| linkIsActive | let | No | boolean | false | Set to `true` to use the active state |
+| href | let | No | string | -- | Specify the `href` attribute |
+| icon | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :------------------------------------------------------------ |
-| icon | No | -- | <svelte:component this={icon} size={20} /> |
+None.
### Events
-| Event name | Type | Detail |
-| :--------- | :-------- | :----- |
-| click | forwarded | -- |
+None.
+
+## `HeaderActionSearch`
+
+### Props
+
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :------------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------- |
+| searchIsActive | let | Yes | boolean | false | Set to `true` to focus the search |
+
+### Slots
+
+None.
+
+### Events
+
+| Event name | Type | Detail |
+| :------------------ | :--------- | :---------------------------------------------------- |
+| inputSearch | dispatched | { action: "search"; textInput: string; } |
+| focusInputSearch | dispatched | -- |
+| focusOutInputSearch | dispatched | -- |
## `HeaderGlobalAction`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | ------------------------------ | ---------------------- | --------------------------------------------- |
-| ref | No | let | Yes | HTMLButtonElement | null | Obtain a reference to the HTML button element |
-| isActive | No | let | No | boolean | false | Set to `true` to use the active variant |
-| icon | No | let | No | any | undefined | Specify the icon to render |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------ | --------------------------------------------- |
+| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the HTML button element |
+| isActive | let | No | boolean | false | Set to `true` to use the active variant |
+| icon | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon to render |
### Slots
-None.
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :---------------------------------------------------- |
+| -- | Yes | -- | <svelte:component this="{icon}" /> |
### Events
@@ -1693,7 +1629,9 @@ None.
### Props
-None.
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :------------------ | ------------- | ---------------------------------- |
+| ariaLabel | let | No | string | -- | Specify the ARIA label for the nav |
### Slots
@@ -1709,18 +1647,15 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :--------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | --------------------------------------------- |
-| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
-| href | No | let | No | string | undefined | Specify the `href` attribute |
-| text | No | let | No | string | undefined | Specify the text |
-| isSelected | No | let | No | boolean | false | Set to `true` to select the item |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :----------------------------------------- | ----------------- | --------------------------------------------- |
+| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
+| href | let | No | string | -- | Specify the `href` attribute |
+| text | let | No | string | -- | Specify the text |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :------------------ |
-| -- | Yes | -- | {text} |
+None.
### Events
@@ -1739,12 +1674,12 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | --------------------------------------------- |
-| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
-| expanded | No | let | Yes | boolean | false | Set to `true` to toggle the expanded state |
-| href | No | let | No | string | "/" | Specify the `href` attribute |
-| text | No | let | No | string | undefined | Specify the text |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :----------------------------------------- | ------------------ | --------------------------------------------- |
+| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
+| expanded | let | Yes | boolean | false | Set to `true` to toggle the expanded state |
+| href | let | No | string | "/" | Specify the `href` attribute |
+| text | let | No | string | -- | Specify the text |
### Slots
@@ -1785,10 +1720,10 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | --------------------------------------------- |
-| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
-| href | No | let | No | string | undefined | Specify the `href` attribute |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :----------------------------------------- | ----------------- | --------------------------------------------- |
+| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
+| href | let | No | string | -- | Specify the `href` attribute |
### Slots
@@ -1832,34 +1767,33 @@ export interface HeaderSearchResult {
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :------------------ | :------- | :--------------- | :------- | ---------------------------------------------- | ------------------ | -------------------------------------------------- |
-| selectedResultIndex | No | let | Yes | number | 0 | Specify the selected result index |
-| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
-| active | No | let | Yes | boolean | false | Set to `true` to activate and focus the search bar |
-| value | No | let | Yes | string | "" | Specify the search input value |
-| results | No | let | No | ReadonlyArray | [] | Render a list of search results |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :------------------ | :--------------- | :------- | :---------------------------------------- | ------------------ | -------------------------------------------------- |
+| selectedResultIndex | let | Yes | number | 0 | Specify the selected result index |
+| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
+| active | let | Yes | boolean | false | Set to `true` to activate and focus the search bar |
+| value | let | Yes | string | "" | Specify the search input value |
+| results | let | No | HeaderSearchResult[] | [] | Render a list of search results |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| -- | Yes | { result: HeaderSearchResult; index: number } | {result.text} {#if result.description}<span class:bx--header-search-menu-description={true} >– {result.description}</span >{/if} |
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------ |
+| -- | Yes | { result: HeaderSearchResult; index: number } | {result.text} {#if result.description}<span>– {result.description}</span>{/if} |
### Events
| Event name | Type | Detail |
| :--------- | :--------- | :---------------------------------------------------------------------------------------------- |
-| active | dispatched | null |
-| inactive | dispatched | null |
-| clear | dispatched | null |
+| active | dispatched | any |
+| inactive | dispatched | any |
+| clear | dispatched | any |
| select | dispatched | { value: string; selectedResultIndex: number; selectedResult: HeaderSearchResult } |
| change | forwarded | -- |
| input | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
| keydown | forwarded | -- |
-| paste | forwarded | -- |
## `HeaderUtilities`
@@ -1877,20 +1811,63 @@ None.
None.
+## `Icon`
+
+### Props
+
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------ | ----------------------------------------------------- |
+| render | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render |
+| skeleton | let | No | boolean | false | Set to `true` to display the skeleton state |
+
+### Slots
+
+None.
+
+### Events
+
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+
+## `IconSkeleton`
+
+### Props
+
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :------------------ | --------------- | ------------------------ |
+| size | let | No | number | 16 | Set the size of the icon |
+
+### Slots
+
+None.
+
+### Events
+
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+
## `ImageLoader`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :----------------- | :------- | --------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
-| error | No | let | Yes | boolean | false | Set to `true` if an error occurs when loading the image |
-| loaded | No | let | Yes | boolean | false | Set to `true` when the image is loaded |
-| loading | No | let | Yes | boolean | false | Set to `true` when `loaded` is `true` and `error` is false |
-| src | No | let | No | string | "" | Specify the image source |
-| alt | No | let | No | string | "" | Specify the image alt text |
-| ratio | No | let | No | "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2" | undefined | Specify the aspect ratio for the image wrapper |
-| fadeIn | No | let | No | boolean | false | Set to `true` to fade in the image on load The duration uses the `fast-02` value following Carbon guidelines on motion |
-| loadImage | No | const | No | (url?: string) => void | (url) => { if (image != null) image = null; loaded = false; error = false; image = new Image(); image.src = url || src; image.onload = () => (loaded = true); image.onerror = () => (error = true); } | Method invoked to load the image provided a `src` value |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :----------------- | :------- | :------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
+| error | let | Yes | boolean | false | Set to `true` if an error occurs when loading the image |
+| loaded | let | Yes | boolean | false | Set to `true` when the image is loaded |
+| loading | let | Yes | boolean | false | Set to `true` when `loaded` is `true` and `error` is false |
+| src | let | No | string | "" | Specify the image source |
+| alt | let | No | string | "" | Specify the image alt text |
+| ratio | let | No | "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2" | -- | Specify the aspect ratio for the image wrapper |
+| fadeIn | let | No | boolean | false | Set to `true` to fade in the image on load The duration uses the `fast-02` value following Carbon guidelines on motion |
+| loadImage | const | No | (url?: string) => void | (url) => { if (image != null) image = null; loaded = false; error = false; image = new Image(); image.src = url || src; image.onload = () => (loaded = true); image.onerror = () => (error = true); } | Method invoked to load the image provided a `src` value |
### Slots
@@ -1901,21 +1878,21 @@ None.
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :---------------- |
-| load | dispatched | null |
-| error | dispatched | null |
+| Event name | Type | Detail |
+| :--------- | :--------- | :--------------- |
+| load | dispatched | any |
+| error | dispatched | any |
## `InlineLoading`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------ | ---------------------- | -------------------------------------------------------------------------------------------------------------------- |
-| status | No | let | No | "active" | "inactive" | "finished" | "error" | "active" | Set the loading status |
-| description | No | let | No | string | undefined | Set the loading description |
-| iconDescription | No | let | No | string | undefined | Specify a description for the loading icon. Defaults to the `status` prop for the "error" and "finished" states |
-| successDelay | No | let | No | number | 1500 | Specify the timeout delay (ms) after `status` is set to "success" |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------------- | :--------------- | :------- | :----------------------------------------------------------------------- | --------------------- | ----------------------------------------------------------------- |
+| status | let | No | "active" | "inactive" | "finished" | "error" | "active" | Set the loading status |
+| description | let | No | string | -- | Set the loading description |
+| iconDescription | let | No | string | -- | Specify the ARIA label for the loading icon |
+| successDelay | let | No | number | 1500 | Specify the timeout delay (ms) after `status` is set to "success" |
### Slots
@@ -1923,38 +1900,35 @@ None.
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :---------------- |
-| click | forwarded | -- |
-| mouseover | forwarded | -- |
-| mouseenter | forwarded | -- |
-| mouseleave | forwarded | -- |
-| success | dispatched | null |
+| Event name | Type | Detail |
+| :--------- | :--------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| success | dispatched | -- |
## `InlineNotification`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :--------------------- | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------------------------------------------------------------------- |
-| kind | No | let | No | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | Specify the kind of notification |
-| lowContrast | No | let | No | boolean | false | Set to `true` to use the low contrast variant |
-| timeout | No | let | No | number | 0 | Set the timeout duration (ms) to hide the notification after opening it |
-| role | No | let | No | string | "alert" | Set the `role` attribute |
-| title | No | let | No | string | "" | Specify the title text |
-| subtitle | No | let | No | string | "" | Specify the subtitle text |
-| hideCloseButton | No | let | No | boolean | false | Set to `true` to hide the close button |
-| statusIconDescription | No | let | No | string | kind + " icon" | Specify the ARIA label for the status icon |
-| closeButtonDescription | No | let | No | string | "Close notification" | Specify the ARIA label for the close button |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ----------------------------------------------------------------------- |
+| kind | let | No | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | Specify the kind of notification |
+| lowContrast | let | No | boolean | false | Set to `true` to use the low contrast variant |
+| timeout | let | No | number | 0 | Set the timeout duration (ms) to hide the notification after opening it |
+| role | let | No | string | "alert" | Set the `role` attribute |
+| title | let | No | string | "" | Specify the title text |
+| subtitle | let | No | string | "" | Specify the subtitle text |
+| hideCloseButton | let | No | boolean | false | Set to `true` to hide the close button |
+| iconDescription | let | No | string | "Closes notification" | Specify the ARIA label for the icon |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :---------------------- |
-| -- | Yes | -- | -- |
-| actions | No | -- | -- |
-| subtitle | No | -- | {subtitle} |
-| title | No | -- | {title} |
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
+| actions | No | -- | -- |
### Events
@@ -1970,22 +1944,20 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | -------------------------------------------------------- |
-| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the top-level HTML element |
-| size | No | let | No | "sm" | "lg" | undefined | Specify the size of the link |
-| href | No | let | No | string | undefined | Specify the href value |
-| inline | No | let | No | boolean | false | Set to `true` to use the inline variant |
-| icon | No | let | No | any | undefined | Specify the icon to render `inline` must be `false` |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the checkbox |
-| visited | No | let | No | boolean | false | Set to `true` to allow visited styles |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :--------------------------------------------------------------------- | ------------------ | ------------------------------------------------ |
+| ref | let | Yes | null | HTMLAnchorElement | HTMLParagraphElement | null | Obtain a reference to the top-level HTML element |
+| size | let | No | "sm" | "lg" | -- | Specify the size of the link |
+| href | let | No | string | -- | Specify the href value |
+| inline | let | No | boolean | false | Set to `true` to use the inline variant |
+| disabled | let | No | boolean | false | Set to `true` to disable the checkbox |
+| visited | let | No | boolean | false | Set to `true` to allow visited styles |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :-------------------------------------------------- |
-| -- | Yes | -- | -- |
-| icon | No | -- | <svelte:component this={icon} /> |
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
### Events
@@ -2000,17 +1972,17 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :---------- | :------- | :--------------- | :------- | -------------------------------------- | ---------------------- | ------------------------------------------ |
-| size | No | let | No | "sm" | "xl" | undefined | Set the size of the list box |
-| type | No | let | No | "default" | "inline" | "default" | Set the type of the list box |
-| open | No | let | No | boolean | false | Set to `true` to open the list box |
-| light | No | let | No | boolean | false | Set to `true` to enable the light variant |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the list box |
-| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state |
-| invalidText | No | let | No | string | "" | Specify the invalid state text |
-| warn | No | let | No | boolean | false | Set to `true` to indicate an warning state |
-| warnText | No | let | No | string | "" | Specify the warning state text |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :---------- | :--------------- | :------- | :------------------------------------- | ---------------------- | ------------------------------------------ |
+| size | let | No | "sm" | "xl" | -- | Set the size of the list box |
+| type | let | No | "default" | "inline" | "default" | Set the type of the list box |
+| open | let | No | boolean | false | Set to `true` to open the list box |
+| light | let | No | boolean | false | Set to `true` to enable the light variant |
+| disabled | let | No | boolean | false | Set to `true` to disable the list box |
+| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state |
+| invalidText | let | No | string | "" | Specify the invalid state text |
+| warn | let | No | boolean | false | Set to `true` to indicate an warning state |
+| warnText | let | No | string | "" | Specify the warning state text |
### Slots
@@ -2035,15 +2007,15 @@ export type ListBoxFieldTranslationId = "close" | "open";
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------------- | :------- | :----------------- | :------- | ------------------------------------------------------ | ------------------------------------------------ | ------------------------------------------------ |
-| ref | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level HTML element |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the list box field |
-| role | No | let | No | string | "combobox" | Specify the role attribute |
-| tabindex | No | let | No | string | "-1" | Specify the tabindex |
-| translationIds | No | const | No | { close: "close", open: "open" } | { close: "close", open: "open" } | Default translation ids |
-| translateWithId | No | let | No | (id: ListBoxFieldTranslationId) => string | (id) => defaultTranslations[id] | Override the default translation ids |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------------- | :----------------- | :------- | :----------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------ |
+| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level HTML element |
+| disabled | let | No | boolean | false | Set to `true` to disable the list box field |
+| role | let | No | string | "combobox" | Specify the role attribute |
+| tabindex | let | No | string | "-1" | Specify the tabindex |
+| translationIds | const | No | { close: "close", open: "open" } | { close: "close", open: "open" } | Default translation ids |
+| translateWithId | let | No | (id: ListBoxFieldTranslationId) => string | (id) => defaultTranslations[id] | Override the default translation ids |
+| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element |
### Slots
@@ -2060,17 +2032,16 @@ export type ListBoxFieldTranslationId = "close" | "open";
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| keydown | forwarded | -- |
-| focus | forwarded | -- |
| blur | forwarded | -- |
## `ListBoxMenu`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | --------------------------------------- | ------------------------------------------------ | -------------------------------------- |
-| ref | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the HTML element |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :-------------------------------------- | ------------------------------------------------ | -------------------------------------- |
+| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the HTML element |
+| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element |
### Slots
@@ -2094,11 +2065,11 @@ export type ListBoxMenuIconTranslationId = "close" | "open";
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------------- | :------- | :----------------- | :------- | --------------------------------------------------------- | --------------------------------------------- | -------------------------------------------- |
-| open | No | let | No | boolean | false | Set to `true` to open the list box menu icon |
-| translationIds | No | const | No | { close: "close", open: "open" } | { close: "close", open: "open" } | Default translation ids |
-| translateWithId | No | let | No | (id: ListBoxMenuIconTranslationId) => string | (id) => defaultTranslations[id] | Override the default translation ids |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------------- | :----------------- | :------- | :-------------------------------------------------------- | --------------------------------------------- | -------------------------------------------- |
+| open | let | No | boolean | false | Set to `true` to open the list box menu icon |
+| translationIds | const | No | { close: "close", open: "open" } | { close: "close", open: "open" } | Default translation ids |
+| translateWithId | let | No | (id: ListBoxMenuIconTranslationId) => string | (id) => defaultTranslations[id] | Override the default translation ids |
### Slots
@@ -2114,11 +2085,10 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :---------- | :------- | :--------------- | :------- | -------------------- | ------------------ | --------------------------------------------- |
-| active | No | let | No | boolean | false | Set to `true` to enable the active state |
-| highlighted | No | let | No | boolean | false | Set to `true` to enable the highlighted state |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the menu item |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :---------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------------- |
+| active | let | No | boolean | false | Set to `true` to enable the active state |
+| highlighted | let | No | boolean | false | Set to `true` to enable the highlighted state |
### Slots
@@ -2144,13 +2114,13 @@ export type ListBoxSelectionTranslationId = "clearAll" | "clearSelection";
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------------- | :------- | :----------------- | :------- | ------------------------------------------------------------------------ | ------------------------------------------------------------------------ | ------------------------------------------------ |
-| ref | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level HTML element |
-| selectionCount | No | let | No | number | undefined | Specify the number of selected items |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the list box selection |
-| translationIds | No | const | No | { clearAll: "clearAll", clearSelection: "clearSelection", } | { clearAll: "clearAll", clearSelection: "clearSelection", } | Default translation ids |
-| translateWithId | No | let | No | (id: ListBoxSelectionTranslationId) => string | (id) => defaultTranslations[id] | Override the default translation ids |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------------- | :----------------- | :------- | :----------------------------------------------------------------------- | ------------------------------------------------------------------------ | ------------------------------------------------ |
+| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level HTML element |
+| selectionCount | let | No | number | -- | Specify the number of selected items |
+| disabled | let | No | boolean | false | Set to `true` to disable the list box selection |
+| translationIds | const | No | { clearAll: "clearAll", clearSelection: "clearSelection", } | { clearAll: "clearAll", clearSelection: "clearSelection", } | Default translation ids |
+| translateWithId | let | No | (id: ListBoxSelectionTranslationId) => string | (id) => defaultTranslations[id] | Override the default translation ids |
### Slots
@@ -2158,9 +2128,9 @@ None.
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :------------------------------------------- |
-| clear | dispatched | KeyboardEvent | MouseEvent |
+| Event name | Type | Detail |
+| :--------- | :--------- | :----- |
+| clear | dispatched | -- |
## `ListItem`
@@ -2187,12 +2157,13 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :---------- | :------- | :--------------- | :------- | -------------------- | ---------------------- | ----------------------------------------------------- |
-| small | No | let | No | boolean | false | Set to `true` to use the small variant |
-| active | No | let | No | boolean | true | Set to `false` to disable the active state |
-| withOverlay | No | let | No | boolean | true | Set to `false` to disable the overlay |
-| description | No | let | No | string | "loading" | Specify the description to describe the loading state |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :---------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | ------------------------------------------ |
+| small | let | No | boolean | false | Set to `true` to use the small variant |
+| active | let | No | boolean | true | Set to `false` to disable the active state |
+| withOverlay | let | No | boolean | true | Set to `false` to disable the overlay |
+| description | let | No | string | "Active loading indicator" | Specify the label description |
+| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the label element |
### Slots
@@ -2206,12 +2177,10 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :-------------------- | :------- | ----------------------- | ---------------------------------------------------- | --------------------------------------------------------------- |
-| value | No | let | Yes | any | "" | Provide a value to persist |
-| key | No | let | No | string | "local-storage-key" | Specify the local storage key |
-| clearItem | No | function | No | () => void | () => { localStorage.removeItem(key); } | Remove the persisted key value from the browser's local storage |
-| clearAll | No | function | No | () => void | () => { localStorage.clear(); } | Clear all key values from the browser's local storage |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :------------------ | -------------------------------- | ----------------------------- |
+| value | let | Yes | any | "" | Provide a value to persist |
+| key | let | No | string | "local-storage-key" | Specify the local storage key |
### Slots
@@ -2221,36 +2190,34 @@ None.
| Event name | Type | Detail |
| :--------- | :--------- | :------------------------------------------- |
-| save | dispatched | null |
+| save | dispatched | any |
| update | dispatched | { prevValue: any; value: any; } |
## `Modal`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :------------------------- | :------- | :--------------- | :------- | --------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- |
-| ref | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level HTML element |
-| open | No | let | Yes | boolean | false | Set to `true` to open the modal |
-| size | No | let | No | "xs" | "sm" | "lg" | undefined | Set the size of the modal |
-| danger | No | let | No | boolean | false | Set to `true` to use the danger variant |
-| alert | No | let | No | boolean | false | Set to `true` to enable alert mode |
-| passiveModal | No | let | No | boolean | false | Set to `true` to use the passive variant |
-| modalHeading | No | let | No | string | undefined | Specify the modal heading |
-| modalLabel | No | let | No | string | undefined | Specify the modal label |
-| modalAriaLabel | No | let | No | string | undefined | Specify the ARIA label for the modal |
-| iconDescription | No | let | No | string | "Close the modal" | Specify the ARIA label for the close icon |
-| hasForm | No | let | No | boolean | false | Set to `true` if the modal contains form elements |
-| hasScrollingContent | No | let | No | boolean | false | Set to `true` if the modal contains scrolling content |
-| primaryButtonText | No | let | No | string | "" | Specify the primary button text |
-| primaryButtonDisabled | No | let | No | boolean | false | Set to `true` to disable the primary button |
-| primaryButtonIcon | No | let | No | any | undefined | Specify the primary button icon |
-| shouldSubmitOnEnter | No | let | No | boolean | true | Set to `true` for the "submit" and "click:button--primary" events to be dispatched when pressing "Enter" |
-| secondaryButtonText | No | let | No | string | "" | Specify the secondary button text |
-| secondaryButtons | No | let | No | [{ text: string; }, { text: string; }] | [] | 2-tuple prop to render two secondary buttons for a 3 button modal supersedes `secondaryButtonText` |
-| selectorPrimaryFocus | No | let | No | string | "[data-modal-primary-focus]" | Specify a selector to be focused when opening the modal |
-| preventCloseOnClickOutside | No | let | No | boolean | false | Set to `true` to prevent the modal from closing when clicking outside |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :------------------------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | -------------------------------------------------------------------------- |
+| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level HTML element |
+| open | let | Yes | boolean | false | Set to `true` to open the modal |
+| size | let | No | "xs" | "sm" | "lg" | -- | Set the size of the modal |
+| danger | let | No | boolean | false | Set to `true` to use the danger variant |
+| alert | let | No | boolean | false | Set to `true` to enable alert mode |
+| passiveModal | let | No | boolean | false | Set to `true` to use the passive variant |
+| modalHeading | let | No | string | -- | Specify the modal heading |
+| modalLabel | let | No | string | -- | Specify the modal label |
+| modalAriaLabel | let | No | string | -- | Specify the ARIA label for the modal |
+| iconDescription | let | No | string | "Close the modal" | Specify the ARIA label for the close icon |
+| hasForm | let | No | boolean | false | Set to `true` if the modal contains form elements |
+| hasScrollingContent | let | No | boolean | false | Set to `true` if the modal contains scrolling content |
+| primaryButtonText | let | No | string | "" | Specify the primary button text |
+| primaryButtonDisabled | let | No | boolean | false | Set to `true` to disable the primary button |
+| shouldSubmitOnEnter | let | No | boolean | true | Set to `true` for the primary button to be triggered when pressing "Enter" |
+| secondaryButtonText | let | No | string | "" | Specify the secondary button text |
+| selectorPrimaryFocus | let | No | string | "[data-modal-primary-focus]" | Specify a selector to be focused when opening the modal |
+| preventCloseOnClickOutside | let | No | boolean | false | Set to `true` to prevent the modal from closing when clicking outside |
+| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element |
### Slots
@@ -2265,25 +2232,24 @@ None.
| Event name | Type | Detail |
| :---------------------- | :--------- | :------------------------------ |
| transitionend | dispatched | { open: boolean; } |
-| click:button--secondary | dispatched | { text: string; } |
| keydown | forwarded | -- |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
-| submit | dispatched | null |
-| click:button--primary | dispatched | null |
-| close | dispatched | null |
-| open | dispatched | null |
+| submit | dispatched | -- |
+| click:button--secondary | dispatched | -- |
+| close | dispatched | -- |
+| open | dispatched | -- |
## `ModalBody`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :------------------ | :------- | :--------------- | :------- | -------------------- | ------------------ | ----------------------------------------------------- |
-| hasForm | No | let | No | boolean | false | Set to `true` if the modal contains form elements |
-| hasScrollingContent | No | let | No | boolean | false | Set to `true` if the modal contains scrolling content |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :------------------ | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------------------- |
+| hasForm | let | No | boolean | false | Set to `true` if the modal contains form elements |
+| hasScrollingContent | let | No | boolean | false | Set to `true` if the modal contains scrolling content |
### Slots
@@ -2299,16 +2265,14 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------------------- | :------- | :--------------- | :------- | --------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------- |
-| primaryButtonText | No | let | No | string | "" | Specify the primary button text |
-| primaryButtonIcon | No | let | No | any | undefined | Specify the primary button icon |
-| primaryButtonDisabled | No | let | No | boolean | false | Set to `true` to disable the primary button |
-| primaryClass | No | let | No | string | undefined | Specify a class for the primary button |
-| secondaryButtonText | No | let | No | string | "" | Specify the secondary button text |
-| secondaryButtons | No | let | No | [{ text: string; }, { text: string; }] | [] | 2-tuple prop to render two secondary buttons for a 3 button modal supersedes `secondaryButtonText` |
-| secondaryClass | No | let | No | string | undefined | Specify a class for the secondary button |
-| danger | No | let | No | boolean | false | Set to `true` to use the danger variant |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------------------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------------- |
+| primaryButtonText | let | No | string | "" | Specify the primary button text |
+| primaryButtonDisabled | let | No | boolean | false | Set to `true` to disable the primary button |
+| primaryClass | let | No | string | -- | Specify a class for the primary button |
+| secondaryButtonText | let | No | string | "" | Specify the secondary button text |
+| secondaryClass | let | No | string | -- | Specify a class for the secondary button |
+| danger | let | No | boolean | false | Set to `true` to use the danger variant |
### Slots
@@ -2318,23 +2282,21 @@ None.
### Events
-| Event name | Type | Detail |
-| :---------------------- | :--------- | :----------------------------- |
-| click:button--secondary | dispatched | { text: string; } |
+None.
## `ModalHeader`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------------- | :------- | :--------------- | :------- | ------------------- | -------------------- | ----------------------------------------- |
-| title | No | let | No | string | "" | Specify the modal title |
-| label | No | let | No | string | "" | Specify the modal label |
-| labelClass | No | let | No | string | "" | Specify the label class |
-| titleClass | No | let | No | string | "" | Specify the title class |
-| closeClass | No | let | No | string | "" | Specify the close class |
-| closeIconClass | No | let | No | string | "" | Specify the close icon class |
-| iconDescription | No | let | No | string | "Close" | Specify the ARIA label for the close icon |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------------- | :--------------- | :------- | :------------------ | -------------------- | ----------------------------------------- |
+| title | let | No | string | "" | Specify the modal title |
+| label | let | No | string | "" | Specify the modal label |
+| labelClass | let | No | string | "" | Specify the label class |
+| titleClass | let | No | string | "" | Specify the title class |
+| closeClass | let | No | string | "" | Specify the close class |
+| closeIconClass | let | No | string | "" | Specify the close icon class |
+| iconDescription | let | No | string | "Close" | Specify the ARIA label for the close icon |
### Slots
@@ -2353,76 +2315,62 @@ None.
### Types
```ts
-export type MultiSelectItemId = any;
+export type MultiSelectItemId = string;
export type MultiSelectItemText = string;
export interface MultiSelectItem {
id: MultiSelectItemId;
text: MultiSelectItemText;
- disabled?: boolean;
}
```
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :----------------------- | :------- | :--------------- | :------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| highlightedId | No | let | Yes | null | MultiSelectItemId | null | Id of the highlighted ListBoxMenuItem |
-| selectionRef | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the selection element |
-| fieldRef | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the field box element |
-| multiSelectRef | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the outer div element |
-| inputRef | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
-| open | No | let | Yes | boolean | false | Set to `true` to open the dropdown |
-| value | No | let | Yes | string | "" | Specify the multiselect value |
-| selectedIds | No | let | Yes | ReadonlyArray | [] | Set the selected ids |
-| items | No | let | No | ReadonlyArray | [] | Set the multiselect items |
-| itemToString | No | let | No | (item: MultiSelectItem) => any | (item) => item.text || item.id | Override the display of a multiselect item |
-| itemToInput | No | let | No | (item: MultiSelectItem) => { name?: string; labelText?: any; title?: string; value?: string } | (item) => {} | Override the item name, title, labelText, or value passed to the user-selectable checkbox input as well as the hidden inputs. |
-| size | No | let | No | "sm" | "lg" | "xl" | undefined | Set the size of the combobox |
-| type | No | let | No | "default" | "inline" | "default" | Specify the type of multiselect |
-| direction | No | let | No | "bottom" | "top" | "bottom" | Specify the direction of the multiselect dropdown menu |
-| selectionFeedback | No | let | No | "top" | "fixed" | "top-after-reopen" | "top-after-reopen" | Specify the selection feedback after selecting items |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the dropdown |
-| filterable | No | let | No | boolean | false | Set to `true` to filter items |
-| filterItem | No | let | No | (item: MultiSelectItem, value: string) => boolean | (item, value) => item.text.toLowerCase().includes(value.trim().toLowerCase()) | Override the filtering logic The default filtering is an exact string comparison |
-| light | No | let | No | boolean | false | Set to `true` to enable the light variant |
-| locale | No | let | No | string | "en" | Specify the locale |
-| placeholder | No | let | No | string | "" | Specify the placeholder text |
-| sortItem | No | let | No | ((a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem) | (() => void) | (a, b) => a.text.localeCompare(b.text, locale, { numeric: true }) | Override the sorting logic The default sorting compare the item text value |
-| translateWithId | No | let | No | (id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string | undefined | Override the chevron icon label based on the open state. Defaults to "Open menu" when closed and "Close menu" when open |
-| translateWithIdSelection | No | let | No | (id: import("../ListBox/ListBoxSelection.svelte").ListBoxSelectionTranslationId) => string | undefined | Override the label of the clear button when the input has a selection. Defaults to "Clear selected item" and "Clear all items" if more than one item is selected |
-| titleText | No | let | No | string | "" | Specify the title text |
-| useTitleInItem | No | let | No | boolean | false | Set to `true` to pass the item to `itemToString` in the checkbox |
-| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state |
-| invalidText | No | let | No | string | "" | Specify the invalid state text |
-| warn | No | let | No | boolean | false | Set to `true` to indicate an warning state |
-| warnText | No | let | No | string | "" | Specify the warning state text |
-| helperText | No | let | No | string | "" | Specify the helper text |
-| label | No | let | No | string | "" | Specify the list box label |
-| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component |
-| name | No | let | No | string | undefined | Specify a name attribute for the select |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :---------------- | :--------------- | :------- | :--------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
+| inputRef | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
+| open | let | Yes | boolean | false | Set to `true` to open the dropdown |
+| value | let | Yes | string | "" | Specify the multiselect value |
+| selectedIds | let | Yes | MultiSelectItemId[] | [] | Set the selected ids |
+| items | let | Yes | MultiSelectItem[] | [] | Set the multiselect items |
+| itemToString | let | No | (item: MultiSelectItem) => string | (item) => item.text || item.id | Override the display of a multiselect item |
+| size | let | No | "sm" | "lg" | "xl" | -- | Set the size of the combobox |
+| type | let | No | "default" | "inline" | "default" | Specify the type of multiselect |
+| direction | let | No | "bottom" | "top" | "bottom" | Specify the direction of the multiselect dropdown menu |
+| selectionFeedback | let | No | "top" | "fixed" | "top-after-reopen" | "top-after-reopen" | Specify the selection feedback after selecting items |
+| disabled | let | No | boolean | false | Set to `true` to disable the dropdown |
+| filterable | let | No | boolean | false | Set to `true` to filter items |
+| filterItem | let | No | (item: MultiSelectItem, value: string) => string | (item, value) => item.text.toLowerCase().includes(value.toLowerCase()) | Override the filtering logic The default filtering is an exact string comparison |
+| light | let | No | boolean | false | Set to `true` to enable the light variant |
+| locale | let | No | string | "en" | Specify the locale |
+| placeholder | let | No | string | "" | Specify the placeholder text |
+| sortItem | let | No | ((a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem) | (() => void) | (a, b) => a.text.localeCompare(b.text, locale, { numeric: true }) | Override the sorting logic The default sorting compare the item text value |
+| translateWithId | let | No | (id: any) => string | -- | Override the default translation ids |
+| titleText | let | No | string | "" | Specify the title text |
+| useTitleInItem | let | No | boolean | false | Set to `true` to pass the item to `itemToString` in the checkbox |
+| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state |
+| invalidText | let | No | string | "" | Specify the invalid state text |
+| warn | let | No | boolean | false | Set to `true` to indicate an warning state |
+| warnText | let | No | string | "" | Specify the warning state text |
+| helperText | let | No | string | "" | Specify the helper text |
+| label | let | No | string | "" | Specify the list box label |
+| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component |
+| name | let | No | string | -- | Specify a name attribute for the select |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :----------------------------------------------------- | :-------------------------------- |
-| -- | Yes | { item: MultiSelectItem; index: number } | {itemToString(item)} |
-| titleText | No | -- | {titleText} |
+None.
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :------------------------------------------------------------------------------------------------------------- |
-| select | dispatched | { selectedIds: MultiSelectItemId[]; selected: MultiSelectItem[]; unselected: MultiSelectItem[]; } |
-| clear | dispatched | null |
-| blur | dispatched | FocusEvent | CustomEvent |
-| keydown | forwarded | -- |
-| input | forwarded | -- |
-| keyup | forwarded | -- |
-| focus | forwarded | -- |
-| paste | forwarded | -- |
+| Event name | Type | Detail |
+| :--------- | :--------- | :-------------------------------------------------------------------------------------------------- |
+| select | dispatched | { selectedIds: string[]; selected: MultiSelectItem[]; unselected: MultiSelectItem[]; } |
+| clear | dispatched | any |
+| keydown | forwarded | -- |
+| focus | forwarded | -- |
+| blur | forwarded | -- |
## `NotificationActionButton`
@@ -2449,12 +2397,12 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :--------------- | :------- | :--------------- | :------- | ------------------------------------ | ------------------------- | ----------------------------------- |
-| notificationType | No | let | No | "toast" | "inline" | "toast" | Set the type of notification |
-| icon | No | let | No | any | undefined | Specify the icon to render |
-| title | No | let | No | string | undefined | Specify the title of the icon |
-| iconDescription | No | let | No | string | "Close icon" | Specify the ARIA label for the icon |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :--------------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------------- | ----------------------------------------------------- |
+| notificationType | let | No | "toast" | "inline" | "toast" | Set the type of notification |
+| icon | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render |
+| title | let | No | string | -- | Specify the title of the icon |
+| iconDescription | let | No | string | "Close icon" | Specify the ARIA label for the icon |
### Slots
@@ -2473,11 +2421,11 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :--------------- | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------------------- | ---------------------- | ------------------------------------- |
-| kind | No | let | No | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | Specify the kind of notification icon |
-| notificationType | No | let | No | "toast" | "inline" | "toast" | Set the type of notification |
-| iconDescription | Yes | let | No | -- | undefined | Specify the ARIA label for the icon |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :--------------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ------------------------------------- |
+| kind | let | No | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | Specify the kind of notification icon |
+| notificationType | let | No | "toast" | "inline" | "toast" | Set the type of notification |
+| iconDescription | let | No | string | "Closes notification" | Specify the ARIA label for the icon |
### Slots
@@ -2487,6 +2435,27 @@ None.
None.
+## `NotificationTextDetails`
+
+### Props
+
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :--------------- | :--------------- | :------- | :----------------------------------- | ---------------------- | ---------------------------- |
+| notificationType | let | No | "toast" | "inline" | "toast" | Set the type of notification |
+| title | let | No | string | "Title" | Specify the title text |
+| subtitle | let | No | string | "" | Specify the subtitle text |
+| caption | let | No | string | "Caption" | Specify the caption text |
+
+### Slots
+
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
+
+### Events
+
+None.
+
## `NumberInput`
### Types
@@ -2497,31 +2466,31 @@ export type NumberInputTranslationId = "increment" | "decrement";
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------------- | :------- | :----------------- | :------- | --------------------------------------------------------------- | ---------------------------------------------------------------- | ------------------------------------------------------------- |
-| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
-| value | No | let | Yes | null | number | null | Specify the input value. Use `null` to denote "no value" |
-| size | No | let | No | "sm" | "xl" | undefined | Set the size of the input |
-| step | No | let | No | number | 1 | Specify the step increment |
-| max | No | let | No | number | undefined | Specify the maximum value |
-| min | No | let | No | number | undefined | Specify the minimum value |
-| light | No | let | No | boolean | false | Set to `true` to enable the light variant |
-| readonly | No | let | No | boolean | false | Set to `true` for the input to be read-only |
-| allowEmpty | No | let | No | boolean | false | Set to `true` to allow for an empty value |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the input |
-| hideSteppers | No | let | No | boolean | false | Set to `true` to hide the input stepper buttons |
-| iconDescription | No | let | No | string | "" | Specify the ARIA label for the increment icons |
-| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state |
-| invalidText | No | let | No | string | "" | Specify the invalid state text |
-| warn | No | let | No | boolean | false | Set to `true` to indicate an warning state |
-| warnText | No | let | No | string | "" | Specify the warning state text |
-| helperText | No | let | No | string | "" | Specify the helper text |
-| label | No | let | No | string | "" | Specify the label text |
-| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text |
-| translateWithId | No | let | No | (id: NumberInputTranslationId) => string | (id) => defaultTranslations[id] | Override the default translation ids |
-| translationIds | No | const | No | { increment: "increment"; decrement: "decrement" } | { increment: "increment", decrement: "decrement", } | Default translation ids |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
-| name | No | let | No | string | undefined | Specify a name attribute for the input |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------------- | :----------------- | :------- | :-------------------------------------------------------------- | ---------------------------------------------------------------- | ---------------------------------------------- |
+| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
+| value | let | Yes | number | string | "" | Specify the input value |
+| size | let | No | "sm" | "xl" | -- | Set the size of the input |
+| step | let | No | number | 1 | Specify the step increment |
+| max | let | No | number | -- | Specify the maximum value |
+| min | let | No | number | -- | Specify the minimum value |
+| light | let | No | boolean | false | Set to `true` to enable the light variant |
+| readonly | let | No | boolean | false | Set to `true` for the input to be read-only |
+| mobile | let | No | boolean | false | Set to `true` to enable the mobile variant |
+| allowEmpty | let | No | boolean | false | Set to `true` to allow for an empty value |
+| disabled | let | No | boolean | false | Set to `true` to disable the input |
+| iconDescription | let | No | string | "" | Specify the ARIA label for the increment icons |
+| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state |
+| invalidText | let | No | string | "" | Specify the invalid state text |
+| warn | let | No | boolean | false | Set to `true` to indicate an warning state |
+| warnText | let | No | string | "" | Specify the warning state text |
+| helperText | let | No | string | "" | Specify the helper text |
+| label | let | No | string | "" | Specify the label text |
+| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text |
+| translateWithId | let | No | (id: NumberInputTranslationId) => string | (id) => defaultTranslations[id] | Override the default translation ids |
+| translationIds | const | No | { increment: "increment"; decrement: "decrement" } | { increment: "increment", decrement: "decrement", } | Default translation ids |
+| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
+| name | let | No | string | -- | Specify a name attribute for the input |
### Slots
@@ -2531,27 +2500,22 @@ export type NumberInputTranslationId = "increment" | "decrement";
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :------------------------------ |
-| change | dispatched | null | number |
-| input | dispatched | null | number |
-| click | forwarded | -- |
-| mouseover | forwarded | -- |
-| mouseenter | forwarded | -- |
-| mouseleave | forwarded | -- |
-| keydown | forwarded | -- |
-| keyup | forwarded | -- |
-| focus | forwarded | -- |
-| blur | forwarded | -- |
-| paste | forwarded | -- |
+| Event name | Type | Detail |
+| :--------- | :--------- | :------------------ |
+| change | dispatched | number |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| input | forwarded | -- |
## `NumberInputSkeleton`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ------------------------------------ |
-| hideLabel | No | let | No | boolean | false | Set to `true` to hide the label text |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------ |
+| hideLabel | let | No | boolean | false | Set to `true` to hide the label text |
### Slots
@@ -2570,11 +2534,10 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :--------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ---------------------------------------------------- |
-| nested | No | let | No | boolean | false | Set to `true` to use the nested variant |
-| native | No | let | No | boolean | false | Set to `true` to use native list styles |
-| expressive | No | let | No | boolean | false | Set to `true` to use Carbon's expressive typesetting |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------- |
+| nested | let | No | boolean | false | Set to `true` to use the nested variant |
+| native | let | No | boolean | false | Set to `true` to use native list styles |
### Slots
@@ -2616,60 +2579,60 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :--------------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ----------------------------------------------------------------------------- |
-| menuRef | No | let | Yes | null | HTMLUListElement | null | Obtain a reference to the overflow menu element |
-| buttonRef | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the trigger button element |
-| icon | No | let | Yes | any | undefined | Specify the icon to render. Defaults to `<OverflowMenuVertical />` |
-| open | No | let | Yes | boolean | false | Set to `true` to open the menu |
-| size | No | let | No | "sm" | "xl" | undefined | Specify the size of the overflow menu |
-| direction | No | let | No | "top" | "bottom" | "bottom" | Specify the direction of the overflow menu relative to the button |
-| light | No | let | No | boolean | false | Set to `true` to enable the light variant |
-| flipped | No | let | No | boolean | false | Set to `true` to flip the menu relative to the button |
-| menuOptionsClass | No | let | No | string | undefined | Specify the menu options class |
-| iconClass | No | let | No | string | undefined | Specify the icon class |
-| iconDescription | No | let | No | string | "Open and close list of options" | Specify the ARIA label for the icon |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the button element |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :--------------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------- |
+| menuRef | let | Yes | null | HTMLUListElement | null | Obtain a reference to the overflow menu element |
+| buttonRef | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the trigger button element |
+| icon | let | Yes | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render |
+| open | let | Yes | boolean | false | Set to `true` to open the menu |
+| size | let | No | "sm" | "xl" | -- | Specify the size of the overflow menu |
+| direction | let | No | "top" | "bottom" | "bottom" | Specify the direction of the overflow menu relative to the button |
+| light | let | No | boolean | false | Set to `true` to enable the light variant |
+| flipped | let | No | boolean | false | Set to `true` to flip the menu relative to the button |
+| menuOptionsClass | let | No | string | -- | Specify the menu options class |
+| iconClass | let | No | string | -- | Specify the icon class |
+| iconDescription | let | No | string | "Open and close list of options" | Specify the ARIA label for the icon |
+| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the button element |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| -- | Yes | -- | -- |
-| menu | No | -- | <svelte:component this={icon} aria-label={iconDescription} title={iconDescription} class="bx--overflow-menu\_\_icon {iconClass}" /> |
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| -- | Yes | -- | -- |
+| menu | No | -- | <svelte:component this="{icon}" aria-label="{iconDescription}" title="{iconDescription}" class="bx--overflow-menu\_\_icon {iconClass}" /> |
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :-------------------------------------------------------- |
-| close | dispatched | null | { index: number; text: string; } |
-| click | forwarded | -- |
-| mouseover | forwarded | -- |
-| mouseenter | forwarded | -- |
-| mouseleave | forwarded | -- |
-| keydown | forwarded | -- |
+| Event name | Type | Detail |
+| :--------- | :--------- | :-------------------------------------------- |
+| close | dispatched | { index: number; text: string; } |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| keydown | forwarded | -- |
## `OverflowMenuItem`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :----------- | :------- | :--------------- | :------- | ------------------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------- |
-| ref | No | let | Yes | null | HTMLAnchorElement | HTMLButtonElement | null | Obtain a reference to the HTML element |
-| primaryFocus | No | let | Yes | boolean | false | Set to `true` if the item should be focused when opening the menu |
-| text | No | let | No | string | "Provide text" | Specify the item text. Alternatively, use the default slot |
-| href | No | let | No | string | "" | Specify the `href` attribute if the item is a link |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the item |
-| hasDivider | No | let | No | boolean | false | Set to `true` to include a divider |
-| danger | No | let | No | boolean | false | Set to `true` to use the danger variant |
-| requireTitle | No | let | No | boolean | true | Set to `false` to omit the button `title` attribute |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :----------- | :--------------- | :------- | :------------------------------------------------------------------ | ------------------------------------------------ | ----------------------------------------------------------------------------------- |
+| ref | let | Yes | null | HTMLAnchorElement | HTMLButtonElement | null | Obtain a reference to the HTML element |
+| primaryFocus | let | Yes | boolean | false | Set to `true` if the item should be focused when opening the menu |
+| text | let | No | string | "Provide text" | Specify the item text Alternatively, use the default slot for a custom element |
+| href | let | No | string | "" | Specify the `href` attribute if the item is a link |
+| disabled | let | No | boolean | false | Set to `true` to disable the item |
+| hasDivider | let | No | boolean | false | Set to `true` to include a divider |
+| danger | let | No | boolean | false | Set to `true` to use the danger variant |
+| requireTitle | let | No | boolean | true | Set to `false` to omit the button `title` attribute |
+| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :---------------------------------------------------------------------------------------------------------------- |
-| -- | Yes | -- | <div class:bx--overflow-menu-options\_\_option-content={true}> {text} </div> |
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------------------------------------------------------------------------------------------------------------------ |
+| -- | Yes | -- | <div class:bx--overflow-menu-options\_\_option-content="{true}"> {text} </div> |
### Events
@@ -2682,25 +2645,24 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------------------- | :------- | :--------------- | :------- | ---------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| pageSize | No | let | Yes | number | 10 | Specify the number of items to display in a page |
-| page | No | let | Yes | number | 1 | Specify the current page index |
-| totalItems | No | let | No | number | 0 | Specify the total number of items |
-| pageWindow | No | let | No | number | 1000 | If `totalItems` is a large number, it can affect the rendering performance of this component since its value is used to calculate the number of pages in the native select dropdown. This value creates a small window of pages rendered around the current page. By default, a maximum of 1000 select items are rendered. |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the pagination |
-| forwardText | No | let | No | string | "Next page" | Specify the forward button text |
-| backwardText | No | let | No | string | "Previous page" | Specify the backward button text |
-| itemsPerPageText | No | let | No | string | "Items per page:" | Specify the items per page text |
-| itemText | No | let | No | (min: number, max: number) => string | (min, max) => \`${min.toLocaleString()}–${max.toLocaleString()} item${max === 1 ? "" : "s"}\` | Override the item text |
-| itemRangeText | No | let | No | (min: number, max: number, total: number) => string | (min, max, total) => \`${min.toLocaleString()}–${max.toLocaleString()} of ${total.toLocaleString()} item${max === 1 ? "" : "s"}\` | Override the item range text |
-| pageInputDisabled | No | let | No | boolean | false | Set to `true` to disable the page input |
-| pageSizeInputDisabled | No | let | No | boolean | false | Set to `true` to disable the page size input |
-| pageSizes | No | let | No | ReadonlyArray | [10] | Specify the available page sizes |
-| pagesUnknown | No | let | No | boolean | false | Set to `true` if the number of pages is unknown |
-| pageText | No | let | No | (page: number) => string | (page) => \`page ${page.toLocaleString()}\` | Override the page text |
-| pageRangeText | No | let | No | (current: number, total: number) => string | (current, total) => \`of ${total.toLocaleString()} page${total === 1 ? "" : "s"}\` | Override the page range text |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------------------- | :--------------- | :------- | :--------------------------------------------------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------ |
+| pageSize | let | Yes | number | 10 | Specify the number of items to display in a page |
+| page | let | Yes | number | 1 | Specify the current page index |
+| totalItems | let | No | number | 0 | Specify the total number of items |
+| disabled | let | No | boolean | false | Set to `true` to disable the pagination |
+| forwardText | let | No | string | "Next page" | Specify the forward button text |
+| backwardText | let | No | string | "Previous page" | Specify the backward button text |
+| itemsPerPageText | let | No | string | "Items per page:" | Specify the items per page text |
+| itemText | let | No | (min: number, max: number) => string | (min, max) => \`${min}–${max} items\` | Override the item text |
+| itemRangeText | let | No | (min: number, max: number, total: number) => string | (min, max, total) => \`${min}–${max} of ${total} items\` | Override the item range text |
+| pageInputDisabled | let | No | boolean | false | Set to `true` to disable the page input |
+| pageSizeInputDisabled | let | No | boolean | false | Set to `true` to disable the page size input |
+| pageSizes | let | No | number[] | [10] | Specify the available page sizes |
+| pagesUnknown | let | No | boolean | false | Set to `true` if the number of pages is unknown |
+| pageText | let | No | (page: number) => string | (page) => \`page ${page}\` | Override the page text |
+| pageRangeText | let | No | (current: number, total: number) => string | (current, total) => \`of ${total} page${total === 1 ? "" : "s"}\` | Override the page range text |
+| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element |
### Slots
@@ -2708,26 +2670,24 @@ None.
### Events
-| Event name | Type | Detail |
-| :--------------------- | :--------- | :------------------------------------------------ |
-| change | dispatched | { page?: number; pageSize?: number } |
-| click:button--previous | dispatched | { page: number; } |
-| click:button--next | dispatched | { page: number; } |
-| update | dispatched | { pageSize: number; page: number; } |
+| Event name | Type | Detail |
+| :--------------------- | :--------- | :----------------------------------------------- |
+| update | dispatched | { pageSize: number; page: number; } |
+| click:button--previous | dispatched | { page: number; } |
+| click:button--next | dispatched | { page: number; } |
## `PaginationNav`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------------------------------ | ---------------------------- | ------------------------------------------------------------------- |
-| page | No | let | Yes | number | 1 | Specify the current page index |
-| total | No | let | No | number | 10 | Specify the total number of pages |
-| shown | No | let | No | number | 10 | Specify the total number of pages to show |
-| loop | No | let | No | boolean | false | Set to `true` to loop the navigation |
-| forwardText | No | let | No | string | "Next page" | Specify the forward button text |
-| backwardText | No | let | No | string | "Previous page" | Specify the backward button text |
-| tooltipPosition | No | let | No | "top" | "right" | "bottom" | "left" | "outside" | "inside" | "bottom" | Set the position of the tooltip relative to the pagination buttons. |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :----------- | :--------------- | :------- | :------------------- | ---------------------------- | ----------------------------------------- |
+| page | let | Yes | number | 0 | Specify the current page index |
+| total | let | No | number | 10 | Specify the total number of pages |
+| shown | let | No | number | 10 | Specify the total number of pages to show |
+| loop | let | No | boolean | false | Set to `true` to loop the navigation |
+| forwardText | let | No | string | "Next page" | Specify the forward button text |
+| backwardText | let | No | string | "Previous page" | Specify the backward button text |
### Slots
@@ -2764,35 +2724,30 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :---------------- | :------- | :--------------- | :------- | --------------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------- |
-| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
-| type | No | let | Yes | "text" | "password" | "password" | Set to `"text"` to toggle the password visibility |
-| value | No | let | Yes | number | string | "" | Specify the input value |
-| size | No | let | No | "sm" | "xl" | undefined | Set the size of the input |
-| placeholder | No | let | No | string | "" | Specify the placeholder text |
-| hidePasswordLabel | No | let | No | string | "Hide password" | Specify the hide password label text |
-| showPasswordLabel | No | let | No | string | "Show password" | Specify the show password label text |
-| tooltipAlignment | No | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon |
-| tooltipPosition | No | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the position of the tooltip relative to the icon |
-| light | No | let | No | boolean | false | Set to `true` to enable the light variant |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the input |
-| helperText | No | let | No | string | "" | Specify the helper text |
-| labelText | No | let | No | string | "" | Specify the label text |
-| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text |
-| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state |
-| invalidText | No | let | No | string | "" | Specify the text for the invalid state |
-| warn | No | let | No | boolean | false | Set to `true` to indicate an warning state |
-| warnText | No | let | No | string | "" | Specify the warning state text |
-| inline | No | let | No | boolean | false | Set to `true` to use inline version |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
-| name | No | let | No | string | undefined | Specify a name attribute for the input |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :---------------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------- |
+| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
+| type | let | Yes | "text" | "password" | "password" | Set to `"text"` to toggle the password visibility |
+| value | let | Yes | number | string | "" | Specify the input value |
+| size | let | No | "sm" | "xl" | -- | Set the size of the input |
+| placeholder | let | No | string | "" | Specify the placeholder text |
+| hidePasswordLabel | let | No | string | "Hide password" | Specify the hide password label text |
+| showPasswordLabel | let | No | string | "Show password" | Specify the show password label text |
+| tooltipAlignment | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon |
+| tooltipPosition | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the position of the tooltip relative to the icon |
+| light | let | No | boolean | false | Set to `true` to enable the light variant |
+| disabled | let | No | boolean | false | Set to `true` to disable the input |
+| helperText | let | No | string | "" | Specify the helper text |
+| labelText | let | No | string | "" | Specify the label text |
+| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text |
+| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state |
+| invalidText | let | No | string | "" | Specify the text for the invalid state |
+| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
+| name | let | No | string | -- | Specify a name attribute for the input |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :----------------------- |
-| labelText | No | -- | {labelText} |
+None.
### Events
@@ -2805,24 +2760,22 @@ None.
| change | forwarded | -- |
| input | forwarded | -- |
| keydown | forwarded | -- |
-| keyup | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
-| paste | forwarded | -- |
## `Popover`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :------------------ | :------- | :--------------- | :------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | ------------------------------------------------------ |
-| open | No | let | Yes | boolean | false | Set to `true` to display the popover |
-| closeOnOutsideClick | No | let | No | boolean | false | Set to `true` to close the popover on an outside click |
-| caret | No | let | No | boolean | false | Set to `true` render a caret |
-| align | No | let | No | "top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "left" | "left-bottom" | "left-top" | "right" | "right-bottom" | "right-top" | "top" | Specify the alignment of the caret |
-| light | No | let | No | boolean | false | Set to `true` to enable the light variant |
-| highContrast | No | let | No | boolean | false | Set to `true` to enable the high contrast variant |
-| relative | No | let | No | boolean | false | Set to `true` to use a relative position |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :------------------ | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------ | ------------------------------------------------------ |
+| open | let | Yes | boolean | false | Set to `true` to display the popover |
+| closeOnOutsideClick | let | No | boolean | false | Set to `true` to close the popover on an outside click |
+| caret | let | No | boolean | false | Set to `true` render a caret |
+| align | let | No | "top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "left" | "left-bottom" | "left-top" | "right" | "right-bottom" | "right-top" | "top" | Specify the alignment of the caret |
+| light | let | No | boolean | false | Set to `true` to enable the light variant |
+| highContrast | let | No | boolean | false | Set to `true` to enable the high contrast variant |
+| relative | let | No | boolean | false | Set to `true` to use a relative position |
### Slots
@@ -2832,46 +2785,20 @@ None.
### Events
-| Event name | Type | Detail |
-| :------------ | :--------- | :------------------------------------ |
-| click:outside | dispatched | { target: HTMLElement; } |
-
-## `ProgressBar`
-
-### Props
-
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :--------- | :------- | :--------------- | :------- | -------------------------------------------------------- | ------------------------------------------------ | --------------------------------------------- |
-| value | No | let | No | number | undefined | Specify the current value |
-| max | No | let | No | number | 100 | Specify the maximum value |
-| kind | No | let | No | "default" | "inline" | "indented" | "default" | Specify the kind of progress bar |
-| status | No | let | No | "active" | "finished" | "error" | "active" | Specify the status |
-| size | No | let | No | "sm" | "md" | "md" | Specify the size |
-| labelText | No | let | No | string | "" | Specify the label text |
-| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text |
-| helperText | No | let | No | string | "" | Specify the helper text |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the progress bar element |
-
-### Slots
-
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :----------------------- |
-| labelText | No | -- | {labelText} |
-
-### Events
-
-None.
+| Event name | Type | Detail |
+| :------------ | :--------- | :----- |
+| click:outside | dispatched | -- |
## `ProgressIndicator`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :------------------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ---------------------------------------------------------------------------------------------- |
-| currentIndex | No | let | Yes | number | 0 | Specify the current step index |
-| vertical | No | let | No | boolean | false | Set to `true` to use the vertical variant |
-| spaceEqually | No | let | No | boolean | false | Set to `true` to specify whether the progress steps should be split equally in size in the div |
-| preventChangeOnClick | No | let | No | boolean | false | Set to `true` to prevent `currentIndex` from updating |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :------------------- | :--------------- | :------- | :------------------- | ------------------ | ---------------------------------------------------------------------------------------------- |
+| currentIndex | let | Yes | number | 0 | Specify the current step index |
+| vertical | let | No | boolean | false | Set to `true` to use the vertical variant |
+| spaceEqually | let | No | boolean | false | Set to `true` to specify whether the progress steps should be split equally in size in the div |
+| preventChangeOnClick | let | No | boolean | false | Set to `true` to prevent `currentIndex` from updating |
### Slots
@@ -2893,10 +2820,10 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ----------------------------------------- |
-| vertical | No | let | No | boolean | false | Set to `true` to use the vertical variant |
-| count | No | let | No | number | 4 | Specify the number of steps to render |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------- |
+| vertical | let | No | boolean | false | Set to `true` to use the vertical variant |
+| count | let | No | number | 4 | Specify the number of steps to render |
### Slots
@@ -2915,22 +2842,22 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :------------- | :------- | :--------------- | :------- | -------------------- | ------------------------------------------------ | ------------------------------------------ |
-| current | No | let | Yes | boolean | false | Set to `true` to use the current variant |
-| complete | No | let | Yes | boolean | false | Set to `true` for the complete variant |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the progress step |
-| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state |
-| description | No | let | No | string | "" | Specify the step description |
-| label | No | let | No | string | "" | Specify the step label |
-| secondaryLabel | No | let | No | string | "" | Specify the step secondary label |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :------------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | ------------------------------------------ |
+| current | let | Yes | boolean | false | Set to `true` to use the current variant |
+| complete | let | Yes | boolean | false | Set to `true` for the complete variant |
+| disabled | let | No | boolean | false | Set to `true` to disable the progress step |
+| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state |
+| description | let | No | string | "" | Specify the step description |
+| label | let | No | string | "" | Specify the step label |
+| secondaryLabel | let | No | string | "" | Specify the step secondary label |
+| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :------------------------------------------------------- | :---------------------------------------------------------------------- |
-| -- | Yes | { props: { class: "bx--progress-label" } } | <p class:bx--progress-label={true}>{label}</p> |
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :------------------------------------------------------- | :------------------------------------------------------------------------ |
+| -- | Yes | { props: { class: 'bx--progress-label' } } | <p class:bx--progress-label="{true}">{label}</p> |
### Events
@@ -2946,48 +2873,40 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :------------ | :------- | :--------------- | :------- | ----------------------------------------- | ------------------------------------------------ | --------------------------------------------------- |
-| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
-| checked | No | let | Yes | boolean | false | Set to `true` to check the radio button |
-| value | No | let | No | string | number | "" | Specify the value of the radio button |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the radio button |
-| required | No | let | No | boolean | false | Set to `true` to mark the field as required |
-| labelPosition | No | let | No | "right" | "left" | "right" | Specify the label position |
-| labelText | No | let | No | string | "" | Specify the label text |
-| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
-| name | No | let | No | string | undefined | Specify a name attribute for the radio button input |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :------------ | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ----------------------------------------------- |
+| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
+| checked | let | Yes | boolean | false | Set to `true` to check the radio button |
+| value | let | No | string | "" | Specify the value of the radio button |
+| disabled | let | No | boolean | false | et to `true` to disable the radio button |
+| labelPosition | let | No | "right" | "left" | "right" | Specify the label position |
+| labelText | let | No | string | "" | Specify the label text |
+| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text |
+| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
+| name | let | No | string | "" | Specify a name attribute for the checkbox input |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :----------------------- |
-| labelText | No | -- | {labelText} |
+None.
### Events
| Event name | Type | Detail |
| :--------- | :-------- | :----- |
-| focus | forwarded | -- |
-| blur | forwarded | -- |
| change | forwarded | -- |
## `RadioButtonGroup`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :------------ | :------- | :--------------- | :------- | ------------------------------------------- | ------------------------- | -------------------------------------------------------- |
-| selected | No | let | Yes | string | number | undefined | Set the selected radio button value |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the radio buttons |
-| required | No | let | No | boolean | undefined | Set to `true` to require the selection of a radio button |
-| name | No | let | No | string | undefined | Specify a name attribute for the radio button inputs |
-| legendText | No | let | No | string | "" | Specify the legend text |
-| hideLegend | No | let | No | boolean | false | Set to `true` to visually hide the legend |
-| labelPosition | No | let | No | "right" | "left" | "right" | Specify the label position |
-| orientation | No | let | No | "horizontal" | "vertical" | "horizontal" | Specify the orientation of the radio buttons |
-| id | No | let | No | string | undefined | Set an id for the container div element |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :------------ | :--------------- | :------- | :------------------------------------------ | ------------------------- | -------------------------------------------- |
+| selected | let | Yes | string | -- | Set the selected radio button value |
+| disabled | let | No | boolean | false | Set to `true` to disable the radio buttons |
+| legendText | let | No | string | "" | Specify the legend text |
+| labelPosition | let | No | "right" | "left" | "right" | Specify the label position |
+| orientation | let | No | "horizontal" | "vertical" | "horizontal" | Specify the orientation of the radio buttons |
+| id | let | No | string | -- | Set an id for the container div element |
### Slots
@@ -2998,13 +2917,13 @@ None.
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :-------------------------------- |
-| change | dispatched | string | number |
-| click | forwarded | -- |
-| mouseover | forwarded | -- |
-| mouseenter | forwarded | -- |
-| mouseleave | forwarded | -- |
+| Event name | Type | Detail |
+| :--------- | :--------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| change | dispatched | -- |
## `RadioButtonSkeleton`
@@ -3029,17 +2948,16 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------------- | :------- | :--------------- | :------- | -------------------- | ------------------------------------------------ | -------------------------------------------------------- |
-| checked | No | let | Yes | boolean | false | Set to `true` to check the tile |
-| light | No | let | No | boolean | false | Set to `true` to enable the light variant |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the tile |
-| required | No | let | No | boolean | false | Set to `true` to mark the field as required |
-| value | No | let | No | string | "" | Specify the value of the radio input |
-| tabindex | No | let | No | string | "0" | Specify the tabindex |
-| iconDescription | No | let | No | string | "Tile checkmark" | Specify the ARIA label for the radio tile checkmark icon |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
-| name | No | let | No | string | undefined | Specify a name attribute for the radio tile input |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | -------------------------------------------------------- |
+| checked | let | Yes | boolean | false | Set to `true` to check the tile |
+| light | let | No | boolean | false | Set to `true` to enable the light variant |
+| disabled | let | No | boolean | false | Set to `true` to disable the tile |
+| value | let | No | string | "" | Specify the value of the radio input |
+| tabindex | let | No | string | "0" | Specify the tabindex |
+| iconDescription | let | No | string | "Tile checkmark" | Specify the ARIA label for the radio tile checkmark icon |
+| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
+| name | let | No | string | "" | Specify a name attribute for the input |
### Slots
@@ -3058,46 +2976,19 @@ None.
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
-## `RecursiveList`
-
-### Types
-
-```ts
-export interface RecursiveListNode {
- text?: string;
- href?: string;
- html?: string;
-}
-```
-
-### Props
-
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------ | ------------------------ | ---------------------------------- |
-| nodes | No | let | No | Array | [] | Specify the nodes to render |
-| type | No | let | No | "unordered" | "ordered" | "ordered-native" | "unordered" | Specify the type of list to render |
-
-### Slots
-
-None.
-
-### Events
-
-None.
-
## `Row`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :------------ | :------- | :--------------- | :------- | -------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| as | No | let | No | boolean | false | Set to `true` to render a custom HTML element Props are destructured as `props` in the default slot (e.g., <Row let:props><section {...props}>...</section></Row>) |
-| condensed | No | let | No | boolean | false | Set to `true` to use the condensed variant |
-| narrow | No | let | No | boolean | false | Set to `true` to use the narrow variant |
-| noGutter | No | let | No | boolean | false | Set to `true` to remove the gutter |
-| noGutterLeft | No | let | No | boolean | false | Set to `true` to remove the left gutter |
-| noGutterRight | No | let | No | boolean | false | Set to `true` to remove the right gutter |
-| padding | No | let | No | boolean | false | Set to `true` to add top and bottom padding to all columns |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :------------ | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| as | let | No | boolean | false | Set to `true` to render a custom HTML element Props are destructured as `props` in the default slot (e.g., <Row let:props><section {...props}>...</section></Row>) |
+| condensed | let | No | boolean | false | Set to `true` to use the condensed variant |
+| narrow | let | No | boolean | false | Set to `true` to use the narrow variant |
+| noGutter | let | No | boolean | false | Set to `true` to remove the gutter |
+| noGutterLeft | let | No | boolean | false | Set to `true` to remove the left gutter |
+| noGutterRight | let | No | boolean | false | Set to `true` to remove the right gutter |
+| padding | let | No | boolean | false | Set to `true` to add top and bottom padding to all columns |
### Slots
@@ -3113,57 +3004,51 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :------------------- | :------- | :--------------- | :------- | ----------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------- |
-| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
-| expanded | No | let | Yes | boolean | false | Set to `true to expand the search input |
-| value | No | let | Yes | any | "" | Specify the value of the search input |
-| size | No | let | No | "sm" | "lg" | "xl" | "xl" | Specify the size of the search input |
-| searchClass | No | let | No | string | "" | Specify the class name passed to the outer div element |
-| skeleton | No | let | No | boolean | false | Set to `true` to display the skeleton state |
-| light | No | let | No | boolean | false | Set to `true` to enable the light variant |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the search input |
-| expandable | No | let | No | boolean | false | Set to `true` to enable the expandable variant |
-| placeholder | No | let | No | string | "Search..." | Specify the `placeholder` attribute of the search input |
-| autocomplete | No | let | No | "on" | "off" | "off" | Specify the `autocomplete` attribute |
-| autofocus | No | let | No | boolean | false | Set to `true` to auto focus the search element |
-| closeButtonLabelText | No | let | No | string | "Clear search input" | Specify the close button label text |
-| labelText | No | let | No | string | "" | Specify the label text |
-| icon | No | let | No | any | undefined | Specify the icon to render. Defaults to `<Search />` |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :------------------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ------------------------------------------------------- |
+| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
+| value | let | Yes | string | "" | Specify the value of the search input |
+| small | let | No | boolean | false | -- |
+| size | let | No | "sm" | "lg" | "xl" | "xl" | Specify the size of the search input |
+| searchClass | let | No | string | "" | Specify the class name passed to the outer div element |
+| skeleton | let | No | boolean | false | Set to `true` to display the skeleton state |
+| light | let | No | boolean | false | Set to `true` to enable the light variant |
+| disabled | let | No | boolean | false | Set to `true` to disable the search input |
+| type | let | No | string | "text" | Specify the `type` attribute of the search input |
+| placeholder | let | No | string | "Search..." | Specify the `placeholder` attribute of the search input |
+| autocomplete | let | No | "on" | "off" | "off" | Specify the `autocomplete` attribute |
+| autofocus | let | No | boolean | false | Set to `true` to auto focus the search element |
+| closeButtonLabelText | let | No | string | "Clear search input" | Specify the close button label text |
+| labelText | let | No | string | "" | Specify the label text |
+| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :----------------------- |
-| labelText | No | -- | {labelText} |
+None.
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :---------------- |
-| expand | dispatched | null |
-| collapse | dispatched | null |
-| click | forwarded | -- |
-| mouseover | forwarded | -- |
-| mouseenter | forwarded | -- |
-| mouseleave | forwarded | -- |
-| change | forwarded | -- |
-| input | forwarded | -- |
-| focus | forwarded | -- |
-| blur | forwarded | -- |
-| keydown | forwarded | -- |
-| keyup | forwarded | -- |
-| paste | forwarded | -- |
-| clear | dispatched | null |
+| Event name | Type | Detail |
+| :--------- | :--------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| change | forwarded | -- |
+| input | forwarded | -- |
+| focus | forwarded | -- |
+| blur | forwarded | -- |
+| keydown | forwarded | -- |
+| clear | dispatched | -- |
## `SearchSkeleton`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | ----------------------------------------- | ----------------- | ------------------------------------ |
-| size | No | let | No | "sm" | "lg" | "xl" | "xl" | Specify the size of the search input |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :---------------------------------------- | ------------------ | ------------------------------------ |
+| small | let | No | boolean | false | -- |
+| size | let | No | "sm" | "lg" | "xl" | "xl" | Specify the size of the search input |
### Slots
@@ -3182,55 +3067,48 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :---------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ----------------------------------------------- |
-| ref | No | let | Yes | null | HTMLSelectElement | null | Obtain a reference to the select HTML element |
-| selected | No | let | Yes | string | number | undefined | Specify the selected item value |
-| size | No | let | No | "sm" | "xl" | undefined | Set the size of the select input |
-| inline | No | let | No | boolean | false | Set to `true` to use the inline variant |
-| light | No | let | No | boolean | false | Set to `true` to enable the light variant |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the select element |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the select element |
-| name | No | let | No | string | undefined | Specify a name attribute for the select element |
-| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state |
-| invalidText | No | let | No | string | "" | Specify the invalid state text |
-| warn | No | let | No | boolean | false | Set to `true` to indicate an warning state |
-| warnText | No | let | No | string | "" | Specify the warning state text |
-| helperText | No | let | No | string | "" | Specify the helper text |
-| noLabel | No | let | No | boolean | false | Set to `true` to not render a label |
-| labelText | No | let | No | string | "" | Specify the label text |
-| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text |
-| required | No | let | No | boolean | false | Set to `true` to mark the field as required |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :---------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ----------------------------------------------- |
+| ref | let | Yes | null | HTMLSelectElement | null | Obtain a reference to the select HTML element |
+| selected | let | Yes | string | -- | Specify the selected item value |
+| size | let | No | "sm" | "xl" | -- | Set the size of the select input |
+| inline | let | No | boolean | false | Set to `true` to use the inline variant |
+| light | let | No | boolean | false | Set to `true` to enable the light variant |
+| disabled | let | No | boolean | false | Set to `true` to disable the select element |
+| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the select element |
+| name | let | No | string | -- | Specify a name attribute for the select element |
+| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state |
+| invalidText | let | No | string | "" | Specify the invalid state text |
+| warn | let | No | boolean | false | Set to `true` to indicate an warning state |
+| warnText | let | No | string | "" | Specify the warning state text |
+| helperText | let | No | string | "" | Specify the helper text |
+| noLabel | let | No | boolean | false | Set to `true` to not render a label |
+| labelText | let | No | string | "" | Specify the label text |
+| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :----------------------- |
-| -- | Yes | -- | -- |
-| labelText | No | -- | {labelText} |
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :-------------------------------- |
-| update | dispatched | string | number |
-| change | forwarded | -- |
-| input | forwarded | -- |
-| focus | forwarded | -- |
-| blur | forwarded | -- |
+| Event name | Type | Detail |
+| :--------- | :--------- | :------------------ |
+| change | dispatched | string |
+| blur | forwarded | -- |
## `SelectItem`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | --------------------------------- | ---------------------- | ---------------------------------------------------------------------------------- |
-| value | No | let | No | string | number | "" | Specify the option value |
-| text | No | let | No | string | undefined | Specify the option text If not specified, the value will be used as the text. |
-| hidden | No | let | No | boolean | false | Set to `true` to hide the option |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the option |
-| class | No | let | No | string | undefined | Specify the class of the `option` element |
-| style | No | let | No | string | undefined | Specify the style of the `option` element |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------- |
+| value | let | No | string | "" | Specify the option value |
+| text | let | No | string | "" | Specify the option text |
+| hidden | let | No | boolean | false | Set to `true` to hide the option |
+| disabled | let | No | boolean | false | Set to `true` to disable the option |
### Slots
@@ -3244,10 +3122,10 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | -------------------- | ---------------------------- | --------------------------------------------------- |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the optgroup element |
-| label | No | let | No | string | "Provide label" | Specify the label attribute of the optgroup element |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :------------------- | ---------------------------- | --------------------------------------------------- |
+| disabled | let | No | boolean | false | Set to `true` to disable the optgroup element |
+| label | let | No | string | "Provide label" | Specify the label attribute of the optgroup element |
### Slots
@@ -3263,9 +3141,9 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ------------------------------------ |
-| hideLabel | No | let | No | boolean | false | Set to `true` to hide the label text |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------ |
+| hideLabel | let | No | boolean | false | Set to `true` to hide the label text |
### Slots
@@ -3284,18 +3162,18 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------------- | :------- | :--------------- | :------- | ----------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------- |
-| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
-| selected | No | let | Yes | boolean | false | Set to `true` to select the tile |
-| light | No | let | No | boolean | false | Set to `true` to enable the light variant |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the tile |
-| title | No | let | No | string | "title" | Specify the title of the selectable tile |
-| value | No | let | No | string | "value" | Specify the value of the selectable tile |
-| tabindex | No | let | No | string | "0" | Specify the tabindex |
-| iconDescription | No | let | No | string | "Tile checkmark" | Specify the ARIA label for the selectable tile checkmark icon |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
-| name | No | let | No | string | "" | Specify a name attribute for the input |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------- |
+| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
+| selected | let | Yes | boolean | false | Set to `true` to select the tile |
+| light | let | No | boolean | false | Set to `true` to enable the light variant |
+| disabled | let | No | boolean | false | Set to `true` to disable the tile |
+| title | let | No | string | "title" | Specify the title of the selectable tile |
+| value | let | No | string | "value" | Specify the value of the selectable tile |
+| tabindex | let | No | string | "0" | Specify the tabindex |
+| iconDescription | let | No | string | "Tile checkmark" | Specify the ARIA label for the selectable tile checkmark icon |
+| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
+| name | let | No | string | "" | Specify a name attribute for the input |
### Slots
@@ -3305,27 +3183,23 @@ None.
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :------------------ |
-| select | dispatched | string |
-| deselect | dispatched | string |
-| click | forwarded | -- |
-| mouseover | forwarded | -- |
-| mouseenter | forwarded | -- |
-| mouseleave | forwarded | -- |
-| keydown | forwarded | -- |
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| keydown | forwarded | -- |
## `SideNav`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :------------------ | :------- | :--------------- | :------- | -------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| isOpen | No | let | Yes | boolean | false | Set to `true` to toggle the expanded state |
-| fixed | No | let | No | boolean | false | Set to `true` to use the fixed variant |
-| rail | No | let | No | boolean | false | Set to `true` to use the rail variant |
-| ariaLabel | No | let | No | string | undefined | Specify the ARIA label for the nav |
-| expansionBreakpoint | No | let | No | number | 1056 | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden. 1056 represents the "large" breakpoint in pixels from the Carbon Design System: - small: 320 - medium: 672 - large: 1056 - x-large: 1312 - max: 1584 |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------------ |
+| isOpen | let | Yes | boolean | false | Set to `true` to toggle the expanded state |
+| fixed | let | No | boolean | false | Set to `true` to use the fixed variant |
+| ariaLabel | let | No | string | -- | Specify the ARIA label for the nav |
### Slots
@@ -3335,11 +3209,7 @@ None.
### Events
-| Event name | Type | Detail |
-| :------------ | :--------- | :---------------- |
-| open | dispatched | null |
-| close | dispatched | null |
-| click:overlay | dispatched | null |
+None.
## `SideNavDivider`
@@ -3375,20 +3245,17 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :--------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | --------------------------------------------- |
-| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
-| isSelected | No | let | No | boolean | false | Set to `true` to select the current link |
-| href | No | let | No | string | undefined | Specify the `href` attribute |
-| text | No | let | No | string | undefined | Specify the text |
-| icon | No | let | No | any | undefined | Specify the icon to render |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :--------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------ | ----------------------------------------------------- |
+| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
+| isSelected | let | No | boolean | false | Set to `true` to select the current link |
+| href | let | No | string | -- | Specify the `href` attribute |
+| text | let | No | string | -- | Specify the text |
+| icon | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :-------------------------------------------------- |
-| -- | Yes | -- | {text} |
-| icon | No | -- | <svelte:component this={icon} /> |
+None.
### Events
@@ -3400,19 +3267,18 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | --------------------------------------------- |
-| ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the HTML button element |
-| expanded | No | let | Yes | boolean | false | Set to `true` to toggle the expanded state |
-| text | No | let | No | string | undefined | Specify the text |
-| icon | No | let | No | any | undefined | Specify the icon to render |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------ | ----------------------------------------------------- |
+| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the HTML button element |
+| expanded | let | Yes | boolean | false | Set to `true` to toggle the expanded state |
+| text | let | No | string | -- | Specify the text |
+| icon | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :-------------------------------------------------- |
-| -- | Yes | -- | -- |
-| icon | No | -- | <svelte:component this={icon} /> |
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
### Events
@@ -3424,12 +3290,12 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :--------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | --------------------------------------------- |
-| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
-| isSelected | No | let | No | boolean | false | Set to `true` to select the item |
-| href | No | let | No | string | undefined | Specify the `href` attribute |
-| text | No | let | No | string | undefined | Specify the item text |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :--------- | :--------------- | :------- | :----------------------------------------- | ----------------- | --------------------------------------------- |
+| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
+| isSelected | let | No | boolean | -- | Set to `true` to select the item |
+| href | let | No | string | -- | Specify the `href` attribute |
+| text | let | No | string | -- | Specify the item text |
### Slots
@@ -3466,12 +3332,12 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------- | ----------------------------------------------- |
-| lines | No | let | No | number | 3 | Specify the number of lines to render |
-| heading | No | let | No | boolean | false | Set to `true` to use the heading size variant |
-| paragraph | No | let | No | boolean | false | Set to `true` to use the paragraph size variant |
-| width | No | let | No | string | "100%" | Specify the width of the text (% or px) |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :------------------- | ------------------- | ----------------------------------------------- |
+| lines | let | No | number | 3 | Specify the number of lines to render |
+| heading | let | No | boolean | false | Set to `true` to use the heading size variant |
+| paragraph | let | No | boolean | false | Set to `true` to use the paragraph size variant |
+| width | let | No | string | "100%" | Specify the width of the text (% or px) |
### Slots
@@ -3490,10 +3356,10 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | ------------------- | ---------------------------- | ---------------------------- |
-| href | No | let | No | string | "#main-content" | Specify the `href` attribute |
-| tabindex | No | let | No | string | "0" | Specify the tabindex |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :------------------ | ---------------------------- | ---------------------------- |
+| href | let | No | string | "#main-content" | Specify the `href` attribute |
+| tabindex | let | No | string | "0" | Specify the tabindex |
### Slots
@@ -3511,52 +3377,47 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :------------- | :------- | :--------------- | :------- | --------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- |
-| ref | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the HTML element |
-| value | No | let | Yes | number | 0 | Specify the value of the slider |
-| max | No | let | No | number | 100 | Set the maximum slider value |
-| maxLabel | No | let | No | string | "" | Specify the label for the max value |
-| min | No | let | No | number | 0 | Set the minimum slider value |
-| minLabel | No | let | No | string | "" | Specify the label for the min value |
-| step | No | let | No | number | 1 | Set the step value |
-| stepMultiplier | No | let | No | number | 4 | Set the step multiplier value |
-| required | No | let | No | boolean | false | Set to `true` to require a value |
-| inputType | No | let | No | string | "number" | Specify the input type |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the slider |
-| light | No | let | No | boolean | false | Set to `true` to enable the light variant |
-| hideTextInput | No | let | No | boolean | false | Set to `true` to hide the text input |
-| fullWidth | No | let | No | boolean | false | Set to `true` for the slider to span the full width of its containing element. |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the slider div element |
-| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state |
-| labelText | No | let | No | string | "" | Specify the label text. Alternatively, use the "labelText" slot (e.g., `<span slot="labelText">...</span>`) |
-| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text |
-| name | No | let | No | string | "" | Set a name for the slider element |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :------------- | :--------------- | :------- | :-------------------------------------- | ------------------------------------------------ | ------------------------------------------ |
+| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the HTML element |
+| value | let | Yes | number | 0 | Specify the value of the slider |
+| max | let | No | number | 100 | Set the maximum slider value |
+| maxLabel | let | No | string | "" | Specify the label for the max value |
+| min | let | No | number | 0 | Set the minimum slider value |
+| minLabel | let | No | string | "" | Specify the label for the min value |
+| step | let | No | number | 1 | Set the step value |
+| stepMultiplier | let | No | number | 4 | Set the step multiplier value |
+| required | let | No | boolean | false | Set to `true` to require a value |
+| inputType | let | No | string | "number" | Specify the input type |
+| disabled | let | No | boolean | false | Set to `true` to disable the slider |
+| light | let | No | boolean | false | Set to `true` to enable the light variant |
+| hideTextInput | let | No | boolean | false | Set to `true` to hide the text input |
+| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the slider div element |
+| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state |
+| labelText | let | No | string | "" | Specify the label text |
+| name | let | No | string | "" | Set a name for the slider element |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :----------------------- |
-| labelText | No | -- | {labelText} |
+None.
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :------------------ |
-| change | dispatched | number |
-| input | dispatched | number |
-| click | forwarded | -- |
-| mouseover | forwarded | -- |
-| mouseenter | forwarded | -- |
-| mouseleave | forwarded | -- |
+| Event name | Type | Detail |
+| :--------- | :--------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| change | dispatched | -- |
## `SliderSkeleton`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ------------------------------------ |
-| hideLabel | No | let | No | boolean | false | Set to `true` to hide the label text |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------ |
+| hideLabel | let | No | boolean | false | Set to `true` to hide the label text |
### Slots
@@ -3575,12 +3436,11 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | -------------------- | ---------------------- | ---------------------------------------------- |
-| selected | No | let | Yes | string | undefined | Specify the selected structured list row value |
-| condensed | No | let | No | boolean | false | Set to `true` to use the condensed variant |
-| flush | No | let | No | boolean | false | Set to `true` to flush the list |
-| selection | No | let | No | boolean | false | Set to `true` to use the selection variant |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :------------------- | ------------------ | ---------------------------------------------- |
+| selected | let | Yes | string | -- | Specify the selected structured list row value |
+| border | let | No | boolean | false | Set to `true` to use the bordered variant |
+| selection | let | No | boolean | false | Set to `true` to use the selection variant |
### Slots
@@ -3590,13 +3450,13 @@ None.
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :------------------ |
-| change | dispatched | string |
-| click | forwarded | -- |
-| mouseover | forwarded | -- |
-| mouseenter | forwarded | -- |
-| mouseleave | forwarded | -- |
+| Event name | Type | Detail |
+| :--------- | :--------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| change | dispatched | -- |
## `StructuredListBody`
@@ -3623,10 +3483,10 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | --------------------------------- |
-| head | No | let | No | boolean | false | Set to `true` to use as a header |
-| noWrap | No | let | No | boolean | false | Set to `true` to prevent wrapping |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------- |
+| head | let | No | boolean | false | Set to `true` to use as a header |
+| noWrap | let | No | boolean | false | Set to `true` to prevent wrapping |
### Slots
@@ -3668,14 +3528,14 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | ----------------------------------------- | ------------------------------------------------ | -------------------------------------------- |
-| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
-| checked | No | let | Yes | boolean | false | Set to `true` to check the input |
-| title | No | let | No | string | "title" | Specify the title of the input |
-| value | No | let | No | string | "value" | Specify the value of the input |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
-| name | No | let | No | string | "" | Specify a name attribute for the input |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | -------------------------------------------- |
+| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
+| checked | let | Yes | boolean | false | Set to `true` to check the input |
+| title | let | No | string | "title" | Specify the title of the input |
+| value | let | No | string | "value" | Specify the value of the input |
+| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
+| name | let | No | string | "" | Specify a name attribute for the input |
### Slots
@@ -3689,11 +3549,11 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ------------------------------------ |
-| head | No | let | No | boolean | false | Set to `true` to use as a header |
-| label | No | let | No | boolean | false | Set to `true` to render a label slot |
-| tabindex | No | let | No | string | "0" | Specify the tabindex |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------ |
+| head | let | No | boolean | false | Set to `true` to use as a header |
+| label | let | No | boolean | false | Set to `true` to render a label slot |
+| tabindex | let | No | string | "0" | Specify the tabindex |
### Slots
@@ -3715,9 +3575,10 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | ------------------- | -------------- | -------------------------- |
-| rows | No | let | No | number | 5 | Specify the number of rows |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------- |
+| rows | let | No | number | 5 | Specify the number of rows |
+| border | let | No | boolean | false | Set to `true` to use the bordered variant |
### Slots
@@ -3736,13 +3597,13 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------- |
-| ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element |
-| selected | No | let | Yes | boolean | false | Set to `true` for the switch to be selected |
-| text | No | let | No | string | "Provide text" | Specify the switch text. Alternatively, use the "text" slot (e.g., `<span slot="text">...</span>`) |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the switch |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the button element |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------- |
+| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element |
+| selected | let | Yes | boolean | false | Set to `true` for the switch to be selected |
+| text | let | No | string | "Provide text" | Specify the switch text Alternatively, use the "text" slot (e.g., <span slot="text">...</span>) |
+| disabled | let | No | boolean | false | Set to `true` to disable the switch |
+| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the button element |
### Slots
@@ -3764,14 +3625,14 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------- |
-| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the anchor HTML element |
-| label | No | let | No | string | "" | Specify the tab label. Alternatively, use the default slot (e.g., `<Tab><span>Label</span></Tab>`) |
-| href | No | let | No | string | "#" | Specify the href attribute |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the tab |
-| tabindex | No | let | No | string | "0" | Specify the tabindex |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- |
+| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the anchor HTML element |
+| label | let | No | string | "" | Specify the tab label Alternatively, use the default slot (e.g., <Tab><span>Label</span></Tab>) |
+| href | let | No | string | "#" | Specify the href attribute |
+| disabled | let | No | boolean | false | Set to `true` to disable the tab |
+| tabindex | let | No | string | "0" | Specify the tabindex |
+| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element |
### Slots
@@ -3792,9 +3653,9 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | ------------------- | ------------------------------------------------ | ----------------------------------- |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :------------------ | ------------------------------------------------ | ----------------------------------- |
+| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element |
### Slots
@@ -3810,14 +3671,14 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------- | ---------------------- | ---------------------------------------------- |
-| size | No | let | No | "compact" | "short" | "medium" | "tall" | undefined | Set the size of the table |
-| zebra | No | let | No | boolean | false | Set to `true` to use zebra styles |
-| useStaticWidth | No | let | No | boolean | false | Set to `true` to use static width |
-| sortable | No | let | No | boolean | false | Set to `true` for the sortable variant |
-| stickyHeader | No | let | No | boolean | false | Set to `true` to enable a sticky header |
-| tableStyle | No | let | No | string | undefined | Set the style attribute on the `table` element |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :--------------- | :--------------- | :------- | :-------------------------------------------------- | ------------------ | --------------------------------------- |
+| size | let | No | "compact" | "short" | "tall" | -- | Set the size of the table |
+| zebra | let | No | boolean | false | Set to `true` to use zebra styles |
+| useStaticWidth | let | No | boolean | false | Set to `true` to use static width |
+| shouldShowBorder | let | No | boolean | false | Set to `true` for the bordered variant |
+| sortable | let | No | boolean | false | Set to `true` for the sortable variant |
+| stickyHeader | let | No | boolean | false | Set to `true` to enable a sticky header |
### Slots
@@ -3870,12 +3731,11 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :------------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ----------------------------------------- |
-| title | No | let | No | string | "" | Specify the title of the data table |
-| description | No | let | No | string | "" | Specify the description of the data table |
-| stickyHeader | No | let | No | boolean | false | Set to `true` to enable a sticky header |
-| useStaticWidth | No | let | No | boolean | false | Set to `true` to use static width |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :----------- | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------- |
+| title | let | No | string | "" | Specify the title of the data table |
+| description | let | No | string | "" | Specify the description of the data table |
+| stickyHeader | let | No | boolean | false | Set to `true` to enable a sticky header |
### Slots
@@ -3912,14 +3772,12 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------------- | :------- | :--------------- | :------- | ---------------------------------------------------------- | ------------------------------------------------ | -------------------------------------- |
-| sortable | No | let | No | boolean | false | Set to `true` for the sortable variant |
-| sortDirection | No | let | No | "none" | "ascending" | "descending" | "none" | Specify the sort direction |
-| active | No | let | No | boolean | false | Set to `true` if the column sorting |
-| scope | No | let | No | string | "col" | Specify the `scope` attribute |
-| translateWithId | No | let | No | () => string | () => "" | Override the default id translations |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------------- | :--------------- | :------- | :------------------------ | ------------------------------------------------ | ------------------------------------------------------ |
+| disableSorting | let | No | boolean | false | Set to `true` to disable sorting on this specific cell |
+| scope | let | No | string | "col" | Specify the `scope` attribute |
+| translateWithId | let | No | () => string | () => "" | Override the default id translations |
+| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element |
### Slots
@@ -3961,13 +3819,12 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------------- | :------- | :--------------- | :------- | ----------------------------------------- | -------------------------------- | -------------------------------------------- |
-| selected | No | let | Yes | number | 0 | Specify the selected tab index |
-| type | No | let | No | "default" | "container" | "default" | Specify the type of tabs |
-| autoWidth | No | let | No | boolean | false | Set to `true` for tabs to have an auto-width |
-| iconDescription | No | let | No | string | "Show menu options" | Specify the ARIA label for the chevron icon |
-| triggerHref | No | let | No | string | "#" | Specify the tab trigger href attribute |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------------- | :--------------- | :------- | :---------------------------------------- | -------------------------------- | ------------------------------------------- |
+| selected | let | Yes | number | 0 | Specify the selected tab index |
+| type | let | No | "default" | "container" | "default" | Specify the type of tabs |
+| iconDescription | let | No | string | "Show menu options" | Specify the ARIA label for the chevron icon |
+| triggerHref | let | No | string | "#" | Specify the tab trigger href attribute |
### Slots
@@ -3978,20 +3835,20 @@ None.
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :------------------ |
-| change | dispatched | number |
-| keypress | forwarded | -- |
-| click | forwarded | -- |
+| Event name | Type | Detail |
+| :--------- | :--------- | :----- |
+| keypress | forwarded | -- |
+| click | forwarded | -- |
+| change | dispatched | -- |
## `TabsSkeleton`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | ----------------------------------------- | ---------------------- | ------------------------------------ |
-| count | No | let | No | number | 4 | Specify the number of tabs to render |
-| type | No | let | No | "default" | "container" | "default" | Specify the type of tabs |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :---------------------------------------- | ---------------------- | ------------------------------------ |
+| count | let | No | number | 4 | Specify the number of tabs to render |
+| type | let | No | "default" | "container" | "default" | Specify the type of tabs |
### Slots
@@ -4010,42 +3867,41 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :---------- | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------- |
-| type | No | let | No | "red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast" | "outline" | undefined | Specify the type of tag |
-| size | No | let | No | "sm" | "default" | "default" | -- |
-| filter | No | let | No | boolean | false | Set to `true` to use filterable variant |
-| disabled | No | let | No | boolean | false | Set to `true` to disable a filterable tag |
-| interactive | No | let | No | boolean | false | Set to `true` to render a `button` element instead of a `div` |
-| skeleton | No | let | No | boolean | false | Set to `true` to display the skeleton state |
-| title | No | let | No | string | "Clear filter" | Set the title for the close button in a filterable tag |
-| icon | No | let | No | any | undefined | Specify the icon to render |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the filterable tag |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :---------- | :--------------- | :------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------- |
+| type | let | No | "red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast" | -- | Specify the type of tag |
+| size | let | No | "sm" | "default" | "default" | -- |
+| filter | let | No | boolean | false | Set to `true` to use filterable variant |
+| disabled | let | No | boolean | false | Set to `true` to disable a filterable tag |
+| interactive | let | No | boolean | false | Set to `true` to render a `button` element instead of a `div` |
+| skeleton | let | No | boolean | false | Set to `true` to display the skeleton state |
+| title | let | No | string | "Clear filter" | Set the title for the close button in a filterable tag |
+| icon | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render |
+| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the filterable tag |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :----------------------------------------------------- | :-------------------------------------------------- |
-| -- | Yes | { props: { class: "bx--tag\_\_label" } } | -- |
-| icon | No | -- | <svelte:component this={icon} /> |
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :----------------------------------------------------- | :------- |
+| -- | Yes | { props: { class: 'bx--tag\_\_label' } } | -- |
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :---------------- |
-| click | forwarded | -- |
-| mouseover | forwarded | -- |
-| mouseenter | forwarded | -- |
-| mouseleave | forwarded | -- |
-| close | dispatched | null |
+| Event name | Type | Detail |
+| :--------- | :--------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| close | dispatched | -- |
## `TagSkeleton`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | ---------------------------------- | ---------------------- | ----------- |
-| size | No | let | No | "sm" | "default" | "default" | -- |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :--------------------------------- | ---------------------- | ----------- |
+| size | let | No | "sm" | "default" | "default" | -- |
### Slots
@@ -4064,30 +3920,26 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :---------- | :------- | :--------------- | :------- | -------------------------------------------- | ------------------------------------------------ | ----------------------------------------------- |
-| ref | No | let | Yes | null | HTMLTextAreaElement | null | Obtain a reference to the textarea HTML element |
-| value | No | let | Yes | null | string | "" | Specify the textarea value. |
-| placeholder | No | let | No | string | "" | Specify the placeholder text |
-| cols | No | let | No | number | 50 | Specify the number of cols |
-| rows | No | let | No | number | 4 | Specify the number of rows |
-| maxCount | No | let | No | number | undefined | Specify the max character count |
-| light | No | let | No | boolean | false | Set to `true` to enable the light variant |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the input |
-| readonly | No | let | No | boolean | false | Set to `true` to use the read-only variant |
-| helperText | No | let | No | string | "" | Specify the helper text |
-| labelText | No | let | No | string | "" | Specify the label text |
-| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text |
-| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state |
-| invalidText | No | let | No | string | "" | Specify the text for the invalid state |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the textarea element |
-| name | No | let | No | string | undefined | Specify a name attribute for the input |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :---------- | :--------------- | :------- | :------------------------------------------- | ------------------------------------------------ | ----------------------------------------------- |
+| ref | let | Yes | null | HTMLTextAreaElement | null | Obtain a reference to the textarea HTML element |
+| value | let | Yes | string | "" | Specify the textarea value |
+| placeholder | let | No | string | "" | Specify the placeholder text |
+| cols | let | No | number | 50 | Specify the number of cols |
+| rows | let | No | number | 4 | Specify the number of rows |
+| light | let | No | boolean | false | Set to `true` to enable the light variant |
+| disabled | let | No | boolean | false | Set to `true` to disable the input |
+| helperText | let | No | string | "" | Specify the helper text |
+| labelText | let | No | string | "" | Specify the label text |
+| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text |
+| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state |
+| invalidText | let | No | string | "" | Specify the text for the invalid state |
+| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the textarea element |
+| name | let | No | string | -- | Specify a name attribute for the input |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :----------------------- |
-| labelText | No | -- | {labelText} |
+None.
### Events
@@ -4099,19 +3951,16 @@ None.
| mouseleave | forwarded | -- |
| change | forwarded | -- |
| input | forwarded | -- |
-| keydown | forwarded | -- |
-| keyup | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
-| paste | forwarded | -- |
## `TextAreaSkeleton`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | --------------------------------------------- |
-| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------------- |
+| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text |
### Slots
@@ -4130,56 +3979,52 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :---------- | :------- | :--------------- | :------- | --------------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------- |
-| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
-| value | No | let | Yes | null | number | string | "" | Specify the input value.
`value` will be set to `null` if type="number" and the value is empty. |
-| size | No | let | No | "sm" | "xl" | undefined | Set the size of the input |
-| placeholder | No | let | No | string | "" | Specify the placeholder text |
-| light | No | let | No | boolean | false | Set to `true` to enable the light variant |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the input |
-| helperText | No | let | No | string | "" | Specify the helper text |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
-| name | No | let | No | string | undefined | Specify a name attribute for the input |
-| labelText | No | let | No | string | "" | Specify the label text |
-| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text |
-| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state |
-| invalidText | No | let | No | string | "" | Specify the invalid state text |
-| warn | No | let | No | boolean | false | Set to `true` to indicate an warning state |
-| warnText | No | let | No | string | "" | Specify the warning state text |
-| required | No | let | No | boolean | false | Set to `true` to mark the field as required |
-| inline | No | let | No | boolean | false | Set to `true` to use the inline variant |
-| readonly | No | let | No | boolean | false | Set to `true` to use the read-only variant |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :---------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | --------------------------------------------- |
+| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
+| value | let | Yes | number | string | "" | Specify the input value |
+| size | let | No | "sm" | "xl" | -- | Set the size of the input |
+| type | let | No | string | "" | Specify the input type |
+| placeholder | let | No | string | "" | Specify the placeholder text |
+| light | let | No | boolean | false | Set to `true` to enable the light variant |
+| disabled | let | No | boolean | false | Set to `true` to disable the input |
+| helperText | let | No | string | "" | Specify the helper text |
+| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
+| name | let | No | string | -- | Specify a name attribute for the input |
+| labelText | let | No | string | "" | Specify the label text |
+| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text |
+| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state |
+| invalidText | let | No | string | "" | Specify the invalid state text |
+| warn | let | No | boolean | false | Set to `true` to indicate an warning state |
+| warnText | let | No | string | "" | Specify the warning state text |
+| required | let | No | boolean | false | Set to `true` to mark the field as required |
+| inline | let | No | boolean | false | Set to `true` to use inline version |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :----------------------- |
-| labelText | No | -- | {labelText} |
+None.
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :-------------------------------------------- |
-| change | dispatched | null | number | string |
-| input | dispatched | null | number | string |
-| click | forwarded | -- |
-| mouseover | forwarded | -- |
-| mouseenter | forwarded | -- |
-| mouseleave | forwarded | -- |
-| keydown | forwarded | -- |
-| keyup | forwarded | -- |
-| focus | forwarded | -- |
-| blur | forwarded | -- |
-| paste | forwarded | -- |
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| change | forwarded | -- |
+| input | forwarded | -- |
+| keydown | forwarded | -- |
+| focus | forwarded | -- |
+| blur | forwarded | -- |
## `TextInputSkeleton`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ------------------------------------ |
-| hideLabel | No | let | No | boolean | false | Set to `true` to hide the label text |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------ |
+| hideLabel | let | No | boolean | false | Set to `true` to hide the label text |
### Slots
@@ -4194,45 +4039,13 @@ None.
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
-## `Theme`
-
-### Types
-
-```ts
-export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
-```
-
-### Props
-
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :--------- | :------- | :--------------- | :------- | --------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
-| theme | No | let | Yes | CarbonTheme | "white" | Set the current Carbon theme |
-| tokens | No | let | No | { [token: string]: any; } | {} | Customize a theme with your own tokens @see https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme |
-| persist | No | let | No | boolean | false | Set to `true` to persist the theme using window.localStorage |
-| persistKey | No | let | No | string | "theme" | Specify the local storage key |
-| render | No | let | No | "toggle" | "select" | undefined | Render a toggle or select dropdown to control the theme |
-| toggle | No | let | No | import("../Toggle/Toggle.svelte").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; } | { themes: ["white", "g100"], labelA: "", labelB: "", labelText: "Dark mode", hideLabel: false, } | Override the default toggle props |
-| select | No | let | No | import("../Select/Select.svelte").SelectProps & { themes?: CarbonTheme[]; } | { themes: themeKeys, labelText: "Themes", hideLabel: false, } | Override the default select props |
-
-### Slots
-
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :------------------------------------ | :------- |
-| -- | Yes | { theme: CarbonTheme; } | -- |
-
-### Events
-
-| Event name | Type | Detail |
-| :--------- | :--------- | :----------------------------------- |
-| update | dispatched | { theme: CarbonTheme; } |
-
## `Tile`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ----------------------------------------- |
-| light | No | let | No | boolean | false | Set to `true` to enable the light variant |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------- |
+| light | let | No | boolean | false | Set to `true` to enable the light variant |
### Slots
@@ -4253,13 +4066,11 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | -------------------- | ---------------------- | -------------------------------------------------------- |
-| selected | No | let | Yes | string | undefined | Specify the selected tile value |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the tile group |
-| required | No | let | No | boolean | undefined | Set to `true` to require the selection of a radio button |
-| name | No | let | No | string | undefined | Specify a name attribute for the radio button inputs |
-| legend | No | let | No | string | "" | Specify the legend text |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------- |
+| selected | let | Yes | string | -- | Specify the selected tile value |
+| disabled | let | No | boolean | false | Set to `true` to disable the tile group |
+| legend | let | No | string | "" | Specify the legend text |
### Slots
@@ -4269,37 +4080,37 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :------------------ |
-| select | dispatched | string |
+| Event name | Type | Detail |
+| :--------- | :--------- | :----- |
+| select | dispatched | -- |
## `TimePicker`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :---------- | :------- | :--------------- | :------- | ----------------------------------------- | --------------------------------------------------- | ----------------------------------------------------- |
-| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
-| value | No | let | Yes | string | "" | Specify the input value |
-| size | No | let | No | "sm" | "xl" | undefined | Specify the size of the input |
-| placeholder | No | let | No | string | "hh:mm" | Specify the input placeholder text |
-| pattern | No | let | No | string | "(1[012]|[1-9]):[0-5][0-9](\\s)?" | Specify the `pattern` attribute for the input element |
-| maxlength | No | let | No | number | 5 | Specify the `maxlength` input attribute |
-| light | No | let | No | boolean | false | Set to `true` to enable the light variant |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the input |
-| labelText | No | let | No | string | "" | Specify the label text |
-| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text |
-| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state |
-| invalidText | No | let | No | string | "" | Specify the invalid state text |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
-| name | No | let | No | string | undefined | Specify a name attribute for the input |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :---------- | :--------------- | :------- | :---------------------------------------- | --------------------------------------------------- | ----------------------------------------------------- |
+| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
+| value | let | Yes | string | "" | Specify the input value |
+| size | let | No | "sm" | "xl" | -- | Specify the size of the input |
+| type | let | No | string | "text" | Specify the input type |
+| placeholder | let | No | string | "hh:mm" | Specify the input placeholder text |
+| pattern | let | No | string | "(1[012]|[1-9]):[0-5][0-9](\\s)?" | Specify the `pattern` attribute for the input element |
+| maxlength | let | No | number | 5 | Specify the `maxlength` input attribute |
+| light | let | No | boolean | false | Set to `true` to enable the light variant |
+| disabled | let | No | boolean | false | Set to `true` to disable the input |
+| labelText | let | No | string | "" | Specify the label text |
+| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text |
+| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state |
+| invalidText | let | No | string | "" | Specify the invalid state text |
+| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
+| name | let | No | string | -- | Specify a name attribute for the input |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :----------------------- |
-| -- | Yes | -- | -- |
-| labelText | No | -- | {labelText} |
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
### Events
@@ -4311,32 +4122,29 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
| mouseleave | forwarded | -- |
| change | forwarded | -- |
| input | forwarded | -- |
-| keydown | forwarded | -- |
-| keyup | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
-| paste | forwarded | -- |
## `TimePickerSelect`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ----------------------------------------------- |
-| ref | No | let | Yes | null | HTMLSelectElement | null | Obtain a reference to the select HTML element |
-| value | No | let | Yes | number | string | "" | Specify the select value |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the select |
-| iconDescription | No | let | No | string | "Open list of options" | Specify the ARIA label for the chevron icon |
-| labelText | No | let | No | string | "" | Specify the label text |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the select element |
-| name | No | let | No | string | undefined | Specify a name attribute for the select element |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ----------------------------------------------- |
+| ref | let | Yes | null | HTMLSelectElement | null | Obtain a reference to the select HTML element |
+| value | let | Yes | number | string | "" | Specify the select value |
+| disabled | let | No | boolean | false | Set to `true` to disable the select |
+| iconDescription | let | No | string | "Open list of options" | Specify the ARIA label for the chevron icon |
+| labelText | let | No | string | "" | Specify the label text |
+| hideLabel | let | No | boolean | true | -- |
+| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the select element |
+| name | let | No | string | -- | Specify a name attribute for the select element |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :----------------------- |
-| -- | Yes | -- | -- |
-| labelText | No | -- | {labelText} |
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
### Events
@@ -4351,28 +4159,23 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :--------------------- | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------------------------------------------------------------------------------------- |
-| kind | No | let | No | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | Specify the kind of notification |
-| lowContrast | No | let | No | boolean | false | Set to `true` to use the low contrast variant |
-| timeout | No | let | No | number | 0 | Set the timeout duration (ms) to hide the notification after opening it |
-| role | No | let | No | string | "alert" | Set the `role` attribute |
-| title | No | let | No | string | "" | Specify the title text |
-| subtitle | No | let | No | string | "" | Specify the subtitle text |
-| caption | No | let | No | string | "" | Specify the caption text |
-| statusIconDescription | No | let | No | string | kind + " icon" | Specify the ARIA label for the status icon |
-| closeButtonDescription | No | let | No | string | "Close notification" | Specify the ARIA label for the close button |
-| hideCloseButton | No | let | No | boolean | false | Set to `true` to hide the close button |
-| fullWidth | No | let | No | boolean | false | Set to `true` for the notification to span the full width of its containing element. |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ----------------------------------------------------------------------- |
+| kind | let | No | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | Specify the kind of notification |
+| lowContrast | let | No | boolean | false | Set to `true` to use the low contrast variant |
+| timeout | let | No | number | 0 | Set the timeout duration (ms) to hide the notification after opening it |
+| role | let | No | string | "alert" | Set the `role` attribute |
+| title | let | No | string | "" | Specify the title text |
+| subtitle | let | No | string | "" | Specify the subtitle text |
+| caption | let | No | string | "" | Specify the caption text |
+| iconDescription | let | No | string | "Closes notification" | Specify the ARIA label for the icon |
+| hideCloseButton | let | No | boolean | false | Set to `true` to hide the close button |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :---------------------- |
-| -- | Yes | -- | -- |
-| caption | No | -- | {caption} |
-| subtitle | No | -- | {subtitle} |
-| title | No | -- | {title} |
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
### Events
@@ -4388,25 +4191,20 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | ---------------------------------- | ------------------------------------------------ | ----------------------------------------------- |
-| toggled | No | let | Yes | boolean | false | Set to `true` to toggle the checkbox input |
-| size | No | let | No | "default" | "sm" | "default" | Specify the toggle size |
-| disabled | No | let | No | boolean | false | Set to `true` to disable checkbox input |
-| labelA | No | let | No | string | "Off" | Specify the label for the untoggled state |
-| labelB | No | let | No | string | "On" | Specify the label for the toggled state |
-| labelText | No | let | No | string | "" | Specify the label text |
-| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
-| name | No | let | No | string | undefined | Specify a name attribute for the checkbox input |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :--------------------------------- | ------------------------------------------------ | ----------------------------------------------- |
+| toggled | let | Yes | boolean | false | Set to `true` to toggle the checkbox input |
+| size | let | No | "default" | "sm" | "default" | Specify the toggle size |
+| disabled | let | No | boolean | false | Set to `true` to disable checkbox input |
+| labelA | let | No | string | "Off" | Specify the label for the untoggled state |
+| labelB | let | No | string | "On" | Specify the label for the toggled state |
+| labelText | let | No | string | "" | Specify the label text |
+| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
+| name | let | No | string | -- | Specify a name attribute for the checkbox input |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :----------------------- |
-| labelA | No | -- | {labelA} |
-| labelB | No | -- | {labelB} |
-| labelText | No | -- | {labelText} |
+None.
### Events
@@ -4426,17 +4224,68 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | ---------------------------------- | ------------------------------------------------ | ------------------------------- |
-| size | No | let | No | "default" | "sm" | "default" | Specify the toggle size |
-| labelText | No | let | No | string | "" | Specify the label text |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :--------------------------------- | ------------------------------------------------ | ------------------------------- |
+| size | let | No | "default" | "sm" | "default" | Specify the toggle size |
+| labelText | let | No | string | "" | Specify the label text |
+| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :----------------------- |
-| labelText | No | -- | {labelText} |
+None.
+
+### Events
+
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+
+## `ToggleSmall`
+
+### Props
+
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | ----------------------------------------------- |
+| toggled | let | Yes | boolean | false | Set to `true` to toggle the checkbox input |
+| disabled | let | No | boolean | false | Set to `true` to disable checkbox input |
+| labelA | let | No | string | "Off" | Specify the label for the untoggled state |
+| labelB | let | No | string | "On" | Specify the label for the toggled state |
+| labelText | let | No | string | "" | Specify the label text |
+| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
+| name | let | No | string | -- | Specify a name attribute for the checkbox input |
+
+### Slots
+
+None.
+
+### Events
+
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| change | forwarded | -- |
+| keyup | forwarded | -- |
+| focus | forwarded | -- |
+| blur | forwarded | -- |
+
+## `ToggleSmallSkeleton`
+
+### Props
+
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :------------------ | ------------------------------------------------ | ------------------------------- |
+| labelText | let | No | string | "" | Specify the label text |
+| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
+
+### Slots
+
+None.
### Events
@@ -4451,9 +4300,9 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | ---------------------------------- | ---------------------- | ------------------------ |
-| size | No | let | No | "sm" | "default" | "default" | Specify the toolbar size |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :--------------------------------- | ---------------------- | ------------------------ |
+| size | let | No | "sm" | "default" | "default" | Specify the toolbar size |
### Slots
@@ -4469,23 +4318,19 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :------------------ | :------- | :--------------- | :------- | ---------------------------------------------- | --------------------------------------------------------------------------------------------------- | ----------------------------------------- |
-| active | No | let | Yes | undefined | boolean | undefined | Use a boolean to show or hide the toolbar |
-| formatTotalSelected | No | let | No | (totalSelected: number) => string | (totalSelected) => \`${totalSelected} item${totalSelected === 1 ? "" : "s"} selected\` | Override the total items selected text |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :------------------ | :--------------- | :------- | :--------------------------------------------- | --------------------------------------------------------------------------------------------------- | -------------------------------------- |
+| formatTotalSelected | let | No | (totalSelected: number) => string | (totalSelected) => \`${totalSelected} item${totalSelected === 1 ? "" : "s"} selected\` | Override the total items selected text |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :------------------ |
-| -- | Yes | -- | -- |
-| cancel | No | -- | Cancel |
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :---------------- |
-| cancel | dispatched | null |
+None.
## `ToolbarContent`
@@ -4542,16 +4387,14 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :--------------- | :------- | :--------------- | :------- | ---------------------------------------------------------------------------------------------------------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
-| filteredRowIds | No | let | Yes | ReadonlyArray | [] | The filtered row ids |
-| expanded | No | let | Yes | boolean | false | Set to `true` to expand the search bar |
-| value | No | let | Yes | number | string | "" | Specify the value of the search input |
-| persistent | No | let | No | boolean | false | Set to `true` to keep the search bar expanded |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the search bar |
-| shouldFilterRows | No | let | No | boolean | ((row: import("./DataTable.svelte").DataTableRow, value: number | string) => boolean) | false | Set to `true` to filter table rows using the search value.
If `true`, the default search excludes `id`, `cells` fields and only does a basic comparison on string and number type cell values.
To implement your own client-side filtering, pass a function that accepts a row and value and returns a boolean. |
-| tabindex | No | let | No | string | "0" | Specify the tabindex |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :--------- | :--------------- | :------- | :---------------------------------------- | ------------------ | --------------------------------------------- |
+| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
+| expanded | let | Yes | boolean | false | Set to `true` to expand the search bar |
+| value | let | Yes | number | string | "" | Specify the value of the search input |
+| persistent | let | No | boolean | false | Set to `true` to keep the search bar expanded |
+| disabled | let | No | boolean | false | Set to `true` to disable the search bar |
+| tabindex | let | No | string | "0" | Specify the tabindex |
### Slots
@@ -4559,67 +4402,61 @@ None.
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :---------------- |
-| clear | dispatched | null |
-| change | forwarded | -- |
-| input | forwarded | -- |
-| focus | forwarded | -- |
-| blur | forwarded | -- |
-| keyup | forwarded | -- |
-| keydown | forwarded | -- |
-| paste | forwarded | -- |
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| clear | forwarded | -- |
+| change | forwarded | -- |
+| input | forwarded | -- |
+| focus | forwarded | -- |
+| blur | forwarded | -- |
## `Tooltip`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------------- | :------- | :--------------- | :------- | --------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------ |
-| refIcon | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the icon HTML element |
-| refTooltip | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the tooltip HTML element |
-| ref | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the trigger text HTML element |
-| open | No | let | Yes | boolean | false | Set to `true` to open the tooltip |
-| align | No | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon |
-| direction | No | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the direction of the tooltip relative to the button |
-| hideIcon | No | let | No | boolean | false | Set to `true` to hide the tooltip icon |
-| icon | No | let | No | any | undefined | Specify the icon to render for the tooltip button. Default to `<Information />` |
-| iconDescription | No | let | No | string | "" | Specify the ARIA label for the tooltip button |
-| iconName | No | let | No | string | "" | Specify the icon name attribute |
-| tabindex | No | let | No | string | "0" | Set the button tabindex |
-| tooltipId | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the tooltip |
-| triggerId | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the tooltip button |
-| triggerText | No | let | No | string | "" | Set the tooltip button text |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- |
+| refIcon | let | Yes | null | HTMLDivElement | null | Obtain a reference to the icon HTML element |
+| refTooltip | let | Yes | null | HTMLDivElement | null | Obtain a reference to the tooltip HTML element |
+| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the trigger text HTML element |
+| open | let | Yes | boolean | false | Set to `true` to open the tooltip |
+| align | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon |
+| direction | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the direction of the tooltip relative to the button |
+| hideIcon | let | No | boolean | false | Set to `true` to hide the tooltip icon |
+| icon | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render for the tooltip button Icon size must be 16px (e.g., `Add16`, `Task16`) |
+| iconDescription | let | No | string | "" | Specify the ARIA label for the tooltip button |
+| iconName | let | No | string | "" | Specify the icon name attribute |
+| tabindex | let | No | string | "0" | Set the button tabindex |
+| tooltipId | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the tooltip |
+| triggerId | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the tooltip button |
+| triggerText | let | No | string | "" | Set the tooltip button text |
### Slots
-| Slot name | Default | Props | Fallback |
-| :---------- | :------ | :---- | :------------------------------------------------------------------ |
-| -- | Yes | -- | -- |
-| icon | No | -- | <svelte:component this={icon} name={iconName} /> |
-| triggerText | No | -- | {triggerText} |
+| Slot name | Default | Props | Fallback |
+| :---------- | :------ | :---- | :---------------------------------------------------------------------- |
+| -- | Yes | -- | -- |
+| icon | No | -- | <svelte:component this="{icon}" name="{iconName}" /> |
+| triggerText | No | -- | {triggerText} |
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :---------------- |
-| open | dispatched | null |
-| close | dispatched | null |
-| click | forwarded | -- |
-| mousedown | forwarded | -- |
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mousedown | forwarded | -- |
## `TooltipDefinition`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :---------- | :------- | :--------------- | :------- | ------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------- |
-| ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element |
-| open | No | let | Yes | boolean | false | Set to `true` to open the tooltip |
-| tooltipText | No | let | No | string | "" | Specify the tooltip text |
-| align | No | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon |
-| direction | No | let | No | "top" | "bottom" | "bottom" | Set the direction of the tooltip relative to the icon |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the tooltip div element |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :---------- | :--------------- | :------- | :------------------------------------------------ | ------------------------------------------------ | ----------------------------------------------------- |
+| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element |
+| tooltipText | let | No | string | "" | Specify the tooltip text |
+| align | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon |
+| direction | let | No | "top" | "bottom" | "bottom" | Set the direction of the tooltip relative to the icon |
+| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the tooltip div element |
### Slots
@@ -4630,23 +4467,21 @@ None.
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :---------------- |
-| open | dispatched | null |
-| close | dispatched | null |
-| click | forwarded | -- |
-| mouseover | forwarded | -- |
-| mouseenter | forwarded | -- |
-| mouseleave | forwarded | -- |
-| focus | forwarded | -- |
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| focus | forwarded | -- |
## `TooltipFooter`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :------------------- | :------- | :--------------- | :------- | ------------------- | ---------------------------------------------- | --------------------------------------------------------------------------- |
-| selectorPrimaryFocus | No | let | No | string | "a[href], button:not([disabled])" | Specify a selector to be focused inside the footer when opening the tooltip |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :------------------- | :--------------- | :------- | :------------------ | ---------------------------------------------- | --------------------------------------------------------------------------- |
+| selectorPrimaryFocus | let | No | string | "a[href], button:not([disabled])" | Specify a selector to be focused inside the footer when opening the tooltip |
### Slots
@@ -4662,22 +4497,20 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :---------- | :------- | :--------------- | :------- | --------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------ |
-| ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element |
-| tooltipText | No | let | No | string | "" | Specify the tooltip text. Alternatively, use the "tooltipText" slot |
-| icon | No | let | No | any | undefined | Specify the icon to render |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the tooltip icon |
-| align | No | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon |
-| direction | No | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the direction of the tooltip relative to the icon |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the span element |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :---------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------ |
+| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element |
+| tooltipText | let | No | string | "" | Specify the tooltip text. Alternatively, use the "tooltipText" slot |
+| align | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon |
+| direction | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the direction of the tooltip relative to the icon |
+| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the span element |
### Slots
-| Slot name | Default | Props | Fallback |
-| :---------- | :------ | :---- | :-------------------------------------------------- |
-| -- | Yes | -- | <svelte:component this={icon} /> |
-| tooltipText | No | -- | {tooltipText} |
+| Slot name | Default | Props | Fallback |
+| :---------- | :------ | :---- | :------------------------- |
+| -- | Yes | -- | -- |
+| tooltipText | No | -- | {tooltipText} |
### Events
@@ -4689,62 +4522,13 @@ None.
| mouseleave | forwarded | -- |
| focus | forwarded | -- |
-## `TreeView`
-
-### Types
-
-```ts
-export type TreeNodeId = string | number;
-
-export interface TreeNode {
- id: TreeNodeId;
- text: any;
- icon?: any;
- disabled?: boolean;
- nodes?: TreeNode[];
-}
-```
-
-### Props
-
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :------------ | :------- | :-------------------- | :------- | ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
-| expandedIds | No | let | Yes | ReadonlyArray | [] | Set the node ids to be expanded |
-| selectedIds | No | let | Yes | ReadonlyArray | [] | Set the node ids to be selected |
-| activeId | No | let | Yes | TreeNodeId | "" | Set the current active node id Only one node can be active |
-| nodes | No | let | No | Array | [] | Provide an array of nodes to render |
-| size | No | let | No | "default" | "compact" | "default" | Specify the TreeView size |
-| labelText | No | let | No | string | "" | Specify the label text |
-| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text |
-| expandAll | No | function | No | () => void | () => { expandedIds = [...nodeIds]; } | Programmatically expand all nodes |
-| collapseAll | No | function | No | () => void | () => { expandedIds = []; } | Programmatically collapse all nodes |
-| expandNodes | No | function | No | (filterId?: (node: TreeNode) => boolean) => void | () => { expandedIds = flattenedNodes .filter( (node) => filterNode(node) || node.nodes?.some((child) => filterNode(child) && child.nodes), ) .map((node) => node.id); } | Programmatically expand a subset of nodes. Expands all nodes if no argument is provided |
-| collapseNodes | No | function | No | (filterId?: (node: TreeNode) => boolean) => void | () => { expandedIds = flattenedNodes .filter((node) => expandedIds.includes(node.id) && !filterNode(node)) .map((node) => node.id); } | Programmatically collapse a subset of nodes. Collapses all nodes if no argument is provided |
-| showNode | No | function | No | (id: TreeNodeId) => void | () => { for (const child of nodes) { const nodes = findNodeById(child, id); if (nodes) { const ids = nodes.map((node) => node.id); const nodeIds = new Set(ids); expandNodes((node) => nodeIds.has(node.id)); const lastId = ids[ids.length - 1]; activeId = lastId; selectedIds = [lastId]; tick().then(() => { ref?.querySelector(\`[id="${lastId}"]\`)?.focus(); }); break; } } } | Programmatically show a node by `id`. The matching node will be expanded, selected, and focused |
-
-### Slots
-
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------- | :----------------------- |
-| -- | Yes | { node: { id: TreeNodeId; text: string; expanded: boolean, leaf: boolean; disabled: boolean; selected: boolean; } } | {node.text} |
-| labelText | No | -- | {labelText} |
-
-### Events
-
-| Event name | Type | Detail |
-| :--------- | :--------- | :------------------------------------------------------------ |
-| select | dispatched | TreeNode & { expanded: boolean; leaf: boolean; } |
-| toggle | dispatched | TreeNode & { expanded: boolean; leaf: boolean; } |
-| focus | dispatched | TreeNode & { expanded: boolean; leaf: boolean; } |
-| keydown | forwarded | -- |
-
## `Truncate`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | --------------------------------- | ------------------ | ----------- |
-| clamp | No | let | No | "end" | "front" | "end" | -- |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :-------------------------------- | ------------------ | ----------- |
+| clamp | let | No | "end" | "front" | "end" | -- |
### Slots
@@ -4760,10 +4544,9 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :--------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ---------------------------------------------------- |
-| nested | No | let | No | boolean | false | Set to `true` to use the nested variant |
-| expressive | No | let | No | boolean | false | Set to `true` to use Carbon's expressive typesetting |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------- |
+| nested | let | No | boolean | false | Set to `true` to use the nested variant |
### Slots
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 7a4e1cdf..28575db3 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,11 +1,11 @@
# Contributing
-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.
+Before submitting a pull request (PR), consider [filing an issue](https://github.com/IBM/carbon-components-svelte/issues) to gain clarity and direction.
## Prerequisites
-- [Node.js](https://nodejs.org/en/download/package-manager/) (version >=20)
-- [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm#using-a-node-installer-to-install-nodejs-and-npm)
+- [Node.js](https://nodejs.org/en/download/package-manager/) (version >=12)
+- [Yarn](https://classic.yarnpkg.com/en/docs/install)
## Project set-up
@@ -19,35 +19,42 @@ cd carbon-components-svelte
Set the original repository as the upstream:
```sh
-git remote add upstream git@github.com:carbon-design-system/carbon-components-svelte.git
+git remote add upstream git@github.com:IBM/carbon-components-svelte.git
# verify that the upstream is added
git remote -v
```
### Install
-Install the project dependencies.
+Install the project dependencies:
```sh
-npm install
+# carbon-components-svelte/
+yarn install
```
## Documentation set-up
Component documentation is located in the `docs` folder. The website is built using svite, routify, and MDsveX. You will need to create a symbolic project link in order to see live changes reflected when developing locally.
-First, create a symbolic link at the root of the project:
+First, create a symbolic link at the root of the project folder:
```sh
-npm link
+# carbon-components-svelte/
+yarn link
```
-Then, go into `docs` and link the package.
+Go into the `docs` folder:
```sh
cd docs
-npm link "carbon-components-svelte"
-npm install
+```
+
+Link `"carbon-components-svelte"`:
+
+```sh
+yarn link "carbon-components-svelte"
+yarn install
```
If linked correctly, any change to a component in the `src` folder should be reflected in the `docs` site.
@@ -67,10 +74,10 @@ Preview changes to components from the `src` folder in the documentation website
In the `docs` folder, run:
```sh
-npm run dev
+yarn dev
```
-The site should be served at http://localhost:5173/ (or the next available port).
+The site should be served at `http://localhost:3000/` (or the next available port).
### Component Format
@@ -98,7 +105,7 @@ export let size = "default";
### Creating a component
-First, [submit an issue](https://github.com/carbon-design-system/carbon-components-svelte/issues).
+First, [submit an issue](https://github.com/IBM/carbon-components-svelte/issues).
If creating a new component, don't forget it from `src/index.js`:
@@ -114,14 +121,23 @@ export {
} from "./ComposedModal";
```
-### Run `npm run build:docs`
+### Build
-Run the following command to re-generate TypeScript definitions and documentation.
+Verify that you can build the library by running the following command at the project root:
```sh
-npm run build:docs
+# carbon-components-svelte/
+yarn prepack
```
+This does several things:
+
+- uses `node-sass` to pre-compile CSS StyleSheets in the `css` folder
+- uses Rollup to bundle the Svelte components in `src` in ESM/UMD formats; emitted to `lib`
+- uses a Rollup plugin to:
+ - generate component documentation in Markdown format (`COMPONENT_INDEX.md`)
+ - generate TypeScript definitions (`types/index.d.ts`)
+
## Submit a Pull Request
### Sync Your Fork
@@ -137,51 +153,3 @@ git merge upstream/master
### Submit a PR
After you've pushed your changes to remote, submit your PR. Make sure you are comparing `/feature` to `origin/master`.
-
-## Maintainer guide
-
-The following items only apply to project maintainers.
-
-### Release
-
-This library is published to NPM with [provenance](https://docs.npmjs.com/generating-provenance-statements) via a [GitHub workflow](https://github.com/carbon-design-system/carbon-components-svelte/blob/master/.github/workflows/release.yml).
-
-The workflow is automatically triggered when pushing a tag that begins with `v` (e.g., `v0.81.1`).
-
-However, maintainers must perform a few things in preparation for a release.
-
-Locally, while on `master` and the branch is clean, run `npm run release`. This command will:
-
-- Bump the semantic version in `package.json`
-- Generate notes in `CHANGELOG.md`
-- Run `npm run build:docs` to update the generated documentation
-
-This command will not create a commit nor tag. Afterwards, perform the following manually:
-
-```sh
-# 1. Commit the changes using the new version as the commit message.
-git commit -am "v0.81.1"
-
-# 2. Create a tag.
-git tag v0.81.1
-
-# 3. Push the tag to the remote.
-# This will trigger the `release.yml` workflow to publish a new package to NPM (with provenance).
-git push origin v0.81.1
-```
-
-If all goes as expected, the [`release.yml` workflow](https://github.com/carbon-design-system/carbon-components-svelte/actions/workflows/release.yml) should trigger a new run and publish the new version to NPM.
-
-### Post-release checklist
-
-After confirming that the new release is published to NPM, perform the following:
-
-1. Create a [new release](https://github.com/carbon-design-system/carbon-components-svelte/releases/new) on GitHub. Click "Generate release notes" to automatically list changes by commit with the relevant Pull Request and author metadata. You may manually remove notes that are not relevant to the release (e.g., CI changes).
-
-2. Publish the release as the latest release.
-
-3. As good practice, visit the Pull Request and/or issue for each commit and manually confirm that it's been released. This is helpful for future readers to understand what version includes the new feature or fix.
-
-```md
-Released in [v0.81.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.81.1).
-```
diff --git a/LICENSE b/LICENSE
index b4454679..261eeb9e 100644
--- a/LICENSE
+++ b/LICENSE
@@ -186,7 +186,7 @@
same "printed page" as the copyright notice for easier
identification within third-party archives.
- Copyright 2019 IBM
+ Copyright [yyyy] [name of copyright owner]
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
diff --git a/MAINTAINERS.md b/MAINTAINERS.md
new file mode 100644
index 00000000..4388eb8a
--- /dev/null
+++ b/MAINTAINERS.md
@@ -0,0 +1,5 @@
+# Maintainers
+
+[Eric Liu](https://github.com/metonym) - eric.young.liu@ibm.com
+
+[Josef Aidt](https://github.com/josefaidt) - josef.aidt@gmail.com
diff --git a/README.md b/README.md
index 9433ba03..a576e34f 100644
--- a/README.md
+++ b/README.md
@@ -1,11 +1,9 @@
# carbon-components-svelte
[![NPM][npm]][npm-url]
-
+
-
-
-
+[![Build][build]][build-badge]
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.
@@ -13,119 +11,62 @@ Design systems facilitate design and development through reuse, consistency, and
The Carbon Svelte portfolio also includes:
-- **[Carbon Icons Svelte](https://github.com/carbon-design-system/carbon-icons-svelte)**: 2,500+ Carbon icons as Svelte components
-- **[Carbon Pictograms Svelte](https://github.com/carbon-design-system/carbon-pictograms-svelte)**: 1,300+ Carbon pictograms as Svelte components
-- **[Carbon Charts Svelte](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte)**: 25+ charts, powered by d3
-- **[Carbon Preprocess Svelte](https://github.com/carbon-design-system/carbon-preprocess-svelte)**: Collection of Svelte preprocessors for Carbon
+- **[Carbon Icons Svelte](https://github.com/IBM/carbon-icons-svelte)**: 6000+ Carbon icons as Svelte components
+- **[Carbon Pictograms Svelte](https://github.com/IBM/carbon-pictograms-svelte)**: 700+ Carbon pictograms as Svelte components
+- **[Carbon Charts Svelte](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte)**: 16 chart types, powered by d3
-## [Documentation](https://svelte.carbondesignsystem.com)
+## [Documentation](http://ibm.biz/carbon-svelte)
+
+
+
+The [documentation website](http://ibm.biz/carbon-svelte) contains live demos and examples.
Other forms of documentation are auto-generated:
- **[TypeScript definitions](types)**: Component TypeScript definitions
-- **[Component Index](COMPONENT_INDEX.md)**: Component API in Markdown format
-- **[Component API](docs/src/COMPONENT_API.json)**: Component API in JSON format
+- **[Component Index](COMPONENT_INDEX.md)**: Markdown file documenting component props, slots, and events
+- **[Component API](docs/src/COMPONENT_API.json)**: Component API metadata in JSON format
-## Installation
+## Getting started
+
+Install `carbon-components-svelte` as a development dependency.
```sh
-# npm
-npm i carbon-components-svelte
-
-# pnpm
-pnpm i carbon-components-svelte
-
-# Yarn
-yarn add carbon-components-svelte
-
-# Bun
-bun add carbon-components-svelte
+yarn add -D carbon-components-svelte
+# OR
+npm i -D carbon-components-svelte
```
## Usage
-### Styling
+The quickest way to get started is to customize a template from the [examples](examples/) folder.
-Before importing components, you will need to first apply Carbon component styles. The Carbon Design System supports five themes (2 light, 3 dark).
+Example set-ups demonstrate usage with popular application bundlers and frameworks. They include a mix of client-side rendering (CSR) and server-side rendering (SSR) approaches.
-- **white.css**: Default Carbon theme (light)
-- **g10.css**: Gray 10 theme (light)
-- **g80.css**: Gray 80 theme (dark)
-- **g90.css**: Gray 90 theme (dark)
-- **g100.css**: Gray 100 theme (dark)
-- **all.css**: All themes (White, Gray 10, Gray 90, Gray 100) using [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
+- **[examples/rollup](examples/rollup/)**: SPA bundled using [Rollup](https://github.com/rollup/rollup)
+- **[examples/rollup-typescript](examples/rollup-typescript/)**: SPA bundled using [Rollup](https://github.com/rollup/rollup) with TypeScript support
+- **[examples/routify](examples/routify/)**: SPA + static export using [Routify](https://github.com/roxiness/routify)
+- **[examples/sapper](examples/sapper/)**: SSR + static export using [Sapper](https://github.com/sveltejs/sapper)
+- **[examples/svite](examples/svite/)**: SPA developed with Svite, bundled with [Rollup](https://github.com/rollup/rollup)
+- **[examples/webpack](examples/webpack/)**: SPA bundled with [webpack](https://github.com/webpack/webpack)
-Each StyleSheet is [generated](scripts/build-css.js) from the flagship [carbon-components](https://github.com/carbon-design-system/carbon/tree/main/packages/carbon-components) library.
+### Scaffolding
-The compiled CSS is generated from the following `.scss` files:
+Each example is published in a dedicated branch of the same name.
-- [css/white.scss](css/white.scss)
-- [css/g10.scss](css/g10.scss)
-- [css/g80.scss](css/g80.scss)
-- [css/g90.scss](css/g90.scss)
-- [css/g100.scss](css/g100.scss)
-- [css/all.scss](css/all.scss)
+Use [degit](https://github.com/Rich-Harris/degit) to scaffold a new project:
-#### CSS StyleSheet
+For example, to use the `svite` template, run the following commands:
-```js
-// White theme
-import "carbon-components-svelte/css/white.css";
-
-// Gray 10 theme
-import "carbon-components-svelte/css/g10.css";
-
-// Gray 80 theme
-import "carbon-components-svelte/css/g80.css";
-
-// Gray 90 theme
-import "carbon-components-svelte/css/g90.css";
-
-// Gray 100 theme
-import "carbon-components-svelte/css/g100.css";
-
-// All themes
-import "carbon-components-svelte/css/all.css";
-```
-
-### SCSS
-
-The most performant method to load styles is to import SCSS directly from carbon-components. Although it requires more set up, you can reduce the size of the bundle CSS by importing individual component styles instead of a pre-compiled CSS StyleSheet.
-
-Refer to the [official Carbon guide on SASS](https://github.com/carbon-design-system/carbon/blob/v10/docs/guides/sass.md) for documentation.
-
-### Dynamic theming
-
-Use the "all.css" StyleSheet for dynamic, client-side theming.
-
-```js
-import "carbon-components-svelte/css/all.css";
-```
-
-Update the theme by setting the `theme` attribute on the `html` element. The default `theme` is `"white"`.
-
-```html
-
-
-
- ...
-
-
-```
-
-Programmatically switch between each of the five Carbon themes by setting the "theme" attribute on the HTML element.
-
-```html
-
+```sh
+npx degit ibm/carbon-components-svelte#svite svelte-app
+cd svelte-app
+yarn install
```
### Importing components
-Import components from `carbon-components-svelte` in the `script` tag of your Svelte file. Visit the [documentation site](https://svelte.carbondesignsystem.com) for examples.
+Import components from `carbon-components-svelte` in the `script` tag of your Svelte file.
```html
@@ -142,126 +83,163 @@ Import components from `carbon-components-svelte` in the `script` tag of your Sv
**Refer to [COMPONENT_INDEX.md](COMPONENT_INDEX.md) for component API documentation.**
-## Preprocessors & Plugins
+### Pre-compiled CSS StyleSheets
-[carbon-preprocess-svelte](https://github.com/carbon-design-system/carbon-preprocess-svelte) is a collection of Svelte preprocessors for Carbon.
+`carbon-components-svelte` includes pre-compiled CSS StyleSheets for each Carbon theme:
-> [!NOTE]
-> Using `carbon-preprocess-svelte` is optional and not a prerequisite for this library. It should be installed as a development dependency.
+- **white.css**: Default Carbon theme (light)
+- **g10.css**: Gray 10 theme (light)
+- **g90.css**: Gray 90 theme (dark)
+- **g100.css**: Gray 100 theme (dark)
+- **all.css**: All themes (White, Gray 10, Gray 90, Gray 100) using [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
-```sh
-# npm
-npm i -D carbon-preprocess-svelte
+Each StyleSheet is [generated](scripts/build-css.js) from the flagship [carbon-components](https://github.com/carbon-design-system/carbon/tree/master/packages/components) library.
-# pnpm
-pnpm i -D carbon-preprocess-svelte
+The compiled CSS is generated from the following `.scss` files:
-# Yarn
-yarn add -D carbon-preprocess-svelte
-
-# Bun
-bun add -D carbon-preprocess-svelte
-```
-
-### `optimizeImports`
-
-`optimizeImports` is a Svelte preprocessor that rewrites barrel imports from Carbon components/icons/pictograms packages to their source Svelte code paths. This can significantly speed up development and production build compile times while preserving typeahead and autocompletion offered by integrated development environments (IDE) like VS Code.
-
-The preprocessor optimizes imports from the following packages:
-
-- [carbon-components-svelte](https://github.com/carbon-design-system/carbon-components-svelte)
-- [carbon-icons-svelte](https://github.com/carbon-design-system/carbon-icons-svelte)
-- [carbon-pictograms-svelte](https://github.com/carbon-design-system/carbon-pictograms-svelte)
-
-**Before & After**
-
-```diff
-- import { Button } from "carbon-components-svelte";
-+ import Button from "carbon-components-svelte/src/Button/Button.svelte";
-
-- import { Add } from "carbon-icons-svelte";
-+ import Add from "carbon-icons-svelte/lib/Add.svelte";
-
-- import { Airplane } from "carbon-pictograms-svelte";
-+ import Airplane from "carbon-pictograms-svelte/lib/Airplane.svelte";
-```
+- [css/white.scss](css/white.scss)
+- [css/g10.scss](css/g10.scss)
+- [css/g90.scss](css/g90.scss)
+- [css/g100.scss](css/g100.scss)
+- [css/all.scss](css/all.scss)
#### Usage
-See [examples](examples) for full configurations.
+##### `svelte-preprocess`
+
+The easiest way to import a StyleSheet is with [svelte-preprocess](https://github.com/sveltejs/svelte-preprocess).
```js
-// svelte.config.js
-import { optimizeImports } from "carbon-preprocess-svelte";
-
-export default {
- preprocess: [optimizeImports()],
+const svelteOptions = {
+ preprocess: require("svelte-preprocess")(),
};
```
-Any other preprocessors that transpile code in the `script` block should be invoked before `optimizeImports`.
+```html
+
+
+```
-For example, `vitePreprocess` should precede `optimizeImports`.
+##### JavaScript import
-```diff
+Importing a CSS file in a JavaScript file will require the appropriate file loader(s).
+
+```js
+import "carbon-components-svelte/css/all.css";
+import App from "./App.svelte";
+
+const app = new App({ target: document.body });
+
+export default app;
+```
+
+See [webpack.config.js](examples/webpack/webpack.config.js) in [examples/webpack](examples/webpack).
+
+#### Dynamic theming
+
+Use `carbon-components-svelte/css/all.css` for dynamic, client-side styling.
+
+Update the theme by setting the `theme` attribute on the `html` element. The default `theme` is `"white"`.
+
+```html
+
+
+
+ ...
+
+
+```
+
+Using JavaScript:
+
+```svelte
+
+
+
+```
+
+## Preprocessors
+
+### optimizeCarbonImports
+
+`optimizeCarbonImports` is a Svelte preprocessor that optimizes base imports inside the `script` block of a Svelte file from the following libraries:
+
+- carbon-components-svelte
+- carbon-icons-svelte
+- carbon-pictograms-svelte
+
+The preprocessor rewrites base imports to directly import the source Svelte file. This may lead to faster complile times **during development**.
+
+Example:
+
+**Before**
+
+```js
+import { Button, Header } from "carbon-components-svelte";
+import { Notification20 } from "carbon-icons-svelte";
+import { Airplane } from "carbon-pictograms-svelte";
+```
+
+**After**
+
+```js
+import Button from "carbon-components-svelte/Button/Button.svelte";
+import Header from "carbon-components-svelte/UIShell/GlobalHeader/Header.svelte";
+import Notification20 from "carbon-icons-svelte/lib/Notification20/Notification20.svelte";
+import Airplane from "carbon-pictograms-svelte/lib/Airplane/Airplane.svelte";
+```
+
+#### svelte.config.js
+
+```js
// svelte.config.js
-+ import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
-import { optimizeImports } from "carbon-preprocess-svelte";
+const {
+ optimizeCarbonImports,
+} = require("carbon-components-svelte/preprocess");
-export default {
- preprocess: [
-+ vitePreprocess(),
- optimizeImports()
- ],
+module.exports = {
+ preprocess: [optimizeCarbonImports()],
};
```
-### `optimizeCss`
-
-`optimizeCss` is a Vite plugin that removes unused Carbon styles at build time. The plugin is compatible with Rollup ([Vite](https://vitejs.dev/guide/api-plugin) extends the Rollup plugin API).
-
-`carbon-components-svelte@0.85.0` or greater is required.
-
-```diff
-$ vite build
-
-Optimized index-CU4gbKFa.css
-- Before: 606.26 kB
-+ After: 53.22 kB (-91.22%)
-
-dist/index.html 0.34 kB │ gzip: 0.24 kB
-dist/assets/index-CU4gbKFa.css 53.22 kB │ gzip: 6.91 kB
-dist/assets/index-Ceijs3eO.js 53.65 kB │ gzip: 15.88 kB
-```
-
-> [!NOTE]
-> This is a plugin and not a Svelte preprocessor. It should be added to the list of `vite.plugins`. For Vite set-ups, this plugin is only run when building the app. For Rollup and Webpack, you should conditionally apply the plugin to only execute when building for production.
-
-#### Usage
-
-See [examples](examples) for full configurations.
+#### svelte-loader
```js
-// vite.config.js
-import { sveltekit } from "@sveltejs/kit/vite";
-import { optimizeCss } from "carbon-preprocess-svelte";
-import { defineConfig } from "vite";
+// webpack.config.js
+const {
+ optimizeCarbonImports,
+} = require("carbon-components-svelte/preprocess");
-export default defineConfig({
- plugins: [sveltekit(), optimizeCss()],
-});
+module.exports = {
+ // ...
+ module: {
+ rules: [
+ {
+ test: /\.svelte$/,
+ use: {
+ loader: "svelte-loader",
+ options: {
+ hotReload: true,
+ preprocess: [optimizeCarbonImports()],
+ },
+ },
+ },
+ ],
+ },
+};
```
-## Examples
-
-- [examples/rollup](examples/rollup/)
-- [examples/sveltekit](examples/sveltekit/)
-- [examples/vite](examples/vite/)
-- [examples/webpack](examples/webpack/)
-
## TypeScript support
-[TypeScript definitions](types) are generated by [sveld](https://github.com/carbon-design-system/sveld).
+[TypeScript definitions](types) are generated by [sveld](https://github.com/IBM/sveld).
## Contributing
@@ -275,11 +253,5 @@ Refer to the [Contributing guidelines](CONTRIBUTING.md).
[npm]: https://img.shields.io/npm/v/carbon-components-svelte.svg?color=262626&style=for-the-badge
[npm-url]: https://npmjs.com/package/carbon-components-svelte
-
-## IBM Telemetry
-
-This package uses IBM Telemetry to collect de-identified and anonymized metrics data in CI environments. By installing
-this package as a dependency you are agreeing to telemetry collection. To opt out, see
-[Opting out of IBM Telemetry data collection](https://github.com/ibm-telemetry/telemetry-js/tree/main#opting-out-of-ibm-telemetry-data-collection).
-For more information on the data being collected, please see the
-[IBM Telemetry documentation](https://github.com/ibm-telemetry/telemetry-js/tree/main#ibm-telemetry-collection-basics).
+[build]: https://img.shields.io/travis/com/ibm/carbon-components-svelte?color=24a148&style=for-the-badge
+[build-badge]: https://travis-ci.com/ibm/carbon-components-svelte
diff --git a/SECURITY.md b/SECURITY.md
deleted file mode 100644
index 84d28e41..00000000
--- a/SECURITY.md
+++ /dev/null
@@ -1,32 +0,0 @@
-# Security Policy
-
-## Supported Versions
-
-| Version | Supported |
-| ------- | ------------------ |
-| 0.x | :white_check_mark: |
-
-## Reporting a Vulnerability
-
-_Please do not report security vulnerabilities through public GitHub issues._
-
-Instead, report a vulnerability through GitHub's security advisory feature at
-https://github.com/carbon-design-system/carbon-components-svelte/security/advisories/new
-
-Please include a description of the issue, the steps you took to create the
-issue, affected versions, and, if known, mitigations for the issue. Our team
-aims to respond to all new vulnerability reports within 7 business days.
-
-Additional information on reporting vulnerabilities to IBM is available at
-https://www.ibm.com/trust/security-psirt
-
-## Preferred languages
-
-We prefer all communications to be in English.
-
-## Comments on this policy
-
-If you have suggestions on how this process could be improved please
-[submit a pull request](https://github.com/carbon-design-system/carbon-components-svelte/compare)
-or [file an issue](https://github.com/carbon-design-system/carbon-components-svelte/issues/new) to
-discuss.
diff --git a/actions/index.js b/actions/index.js
new file mode 100644
index 00000000..6a270efa
--- /dev/null
+++ b/actions/index.js
@@ -0,0 +1 @@
+export { truncate } from "./truncate";
diff --git a/src/Truncate/truncate.js b/actions/truncate.js
similarity index 56%
rename from src/Truncate/truncate.js
rename to actions/truncate.js
index 42723c09..51fdfb9e 100644
--- a/src/Truncate/truncate.js
+++ b/actions/truncate.js
@@ -1,12 +1,16 @@
/**
* Svelte action that applies single-line text truncation to an element
- * @typedef {{ clamp?: "end" | "front" }} TruncateOptions
- * @type {(node: HTMLElement, options?: TruncateOptions) => { update: (options?: TruncateOptions) => void; }}
+ * @param {HTMLElement} node
+ * @param {{ clamp?: "end" | "front" }} params
* @example
+ *
+ *
*
-
- Carbon Components Svelte v{process.env.VERSION || ""}
+
+ Carbon Components Svelte
+ v{process.env.VERSION || ""}
+
- {
- $goto(e.detail.selectedResult.href);
- }}
- />
-
+ Carbon Svelte portfolio
-
+
Carbon Icons Svelte
Carbon Pictograms Svelte
@@ -181,11 +79,6 @@
>
Carbon Charts Svelte
-
- Carbon Preprocess Svelte
- Resources
Carbon Design System
@@ -198,45 +91,149 @@
-
+
- {#each components.children.filter((child) => !deprecated.includes(child.title)) as child (child.path)}
-
- {child.title}
- {#if deprecated.includes(child.title)}
-
- Deprecated
-
- {/if}
- {#if new_components.includes(child.title)}
-
- New
-
- {/if}
-
- {/each}
+
+ {#each components.children as child, i (child.path)}
+
+ {child.title}
+ {#if deprecated.includes(child.title)}
+
+ Deprecated
+
+ {/if}
+ {#if new_components.includes(child.title)}
+
+ New
+
+ {/if}
+
+ {/each}
+
+
+ {#each recipes.children as child, i (child.path)}
+
+ {child.title}
+
+ {/each}
+
+
-
diff --git a/docs/src/pages/components/Accordion.svx b/docs/src/pages/components/Accordion.svx
index a42735db..078fd257 100644
--- a/docs/src/pages/components/Accordion.svx
+++ b/docs/src/pages/components/Accordion.svx
@@ -10,14 +10,9 @@ components: ["Accordion", "AccordionItem", "AccordionSkeleton"]
import Preview from "../../components/Preview.svelte";
-`Accordion` creates a vertically stacked list of expandable sections that show or hide content. It supports custom titles, different sizes, and various states including disabled and skeleton loading.
+See the [ExpandableAccordion recipe](/recipes/ExpandableAccordion) for a toggleable accordion component.
-## Default
-
-Use the `Accordion` and `AccordionItem` components to compose a collapsible list of
-items.
-
-By default, the chevron icon is on the right side of the accordion item.
+### Default
@@ -32,11 +27,7 @@ By default, the chevron icon is on the right side of the accordion item.
-## Left-aligned chevron
-
-The chevron icon can be aligned to the left side of the accordion item by setting
-the `align` prop to "start". This provides an alternative visual style while
-maintaining the same functionality.
+### Left-aligned chevron
@@ -51,40 +42,34 @@ maintaining the same functionality.
-## Custom title slot
-
-Customize the title content by using the `title` slot instead of the `title` prop.
-This allows for more complex title layouts with multiple elements.
+### Custom title slot
-
+
Natural Language Classifier
AI / Machine Learning
-
+
Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
-
+
Natural Language Understanding
AI / Machine Learning
-
+
Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.
-
+
Language Translator
AI / Machine Learning
-
+
Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.
-## First item open
-
-Set the `open` prop on an `AccordionItem` to have it expanded by default when the
-accordion is first rendered.
+### First item open
@@ -99,19 +84,7 @@ accordion is first rendered.
-## Programmatic example
-
-This example demonstrates how to programmatically control the accordion items using
-the `bind:open` directive. Expand and collapse items based on user
-interactions or application state.
-
-
-
-## Extra-large size
-
-The accordion can be displayed in an extra-large size by setting the `size` prop to
-"xl". This provides more visual emphasis and is suitable for prominent content
-sections.
+### Extra-large size
@@ -126,11 +99,7 @@ sections.
-## Small size
-
-For more compact layouts, set the `size` prop to "sm" to display the accordion in a
-smaller size. This is useful when space is limited or when the accordion is used as
-a secondary UI element.
+### Small size
@@ -145,10 +114,7 @@ a secondary UI element.
-## Disabled
-
-Set the `disabled` prop on the `Accordion` component to disable all items at once.
-This prevents users from expanding or collapsing any items in the accordion.
+### Disabled
@@ -163,11 +129,7 @@ This prevents users from expanding or collapsing any items in the accordion.
-## Disabled (item)
-
-Individual accordion items can be disabled by setting the `disabled` prop on
-specific `AccordionItem` components. This allows for more granular control over
-which items are interactive.
+### Disabled (item)
@@ -182,47 +144,27 @@ which items are interactive.
-## Skeleton
-
-The skeleton state provides a loading placeholder for the accordion. It displays a
-simplified version of the component while content is being loaded.
+### Skeleton
-## Skeleton (left-aligned chevron)
-
-The skeleton state can be combined with the left-aligned chevron style by setting
-both the `skeleton` and `align="start"` props.
+### Skeleton (left-aligned chevron)
-## Skeleton (custom count)
-
-By default, the skeleton state displays 4 items.
-
-Specify the number of skeleton items to display using the `count` prop. This is
-useful when you know the exact number of items that will be loaded.
+### Skeleton (custom count)
-## Skeleton (closed)
-
-By default, the first skeleton item is open. The skeleton state can be displayed
-in a collapsed state by setting `open={false}`.
+### Skeleton (closed)
-## Skeleton (extra-large)
-
-The skeleton state supports the extra-large size variant, maintaining visual
-consistency with the active component states.
+### Skeleton (extra-large)
-## Skeleton (small)
-
-The skeleton state also supports the small size variant, providing a compact
-loading placeholder for space-constrained layouts.
+### Skeleton (small)
diff --git a/docs/src/pages/components/AspectRatio.svx b/docs/src/pages/components/AspectRatio.svx
index 0793fca9..8b920a20 100644
--- a/docs/src/pages/components/AspectRatio.svx
+++ b/docs/src/pages/components/AspectRatio.svx
@@ -3,67 +3,53 @@
import Preview from "../../components/Preview.svelte";
-The `AspectRatio` component maintains consistent proportions for content across different screen sizes. It's particularly useful for images, videos, and other media that need to preserve their aspect ratio when resizing.
+The `AspectRatio` component is useful for constraining fluid content within an aspect ratio. To demo this, resize your browser for the examples below.
-Supported aspect ratios include `"2x1"`, `"2x3"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"3x2"`, `"9x16"` and `"1x2"`.
+Supported aspect ratios include `"2x1"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"9x16"` and `"1x2"`.
-## Default
-
-Display a 2:1 aspect ratio container by default.
+### Default (2x1)
2x1
-## Ratio 2x3
-
-
- 2x3
-
-
-## Ratio 16x9
+### Ratio 16x9
16x9
-## Ratio 4x3
+### Ratio 4x3
4x3
-## Ratio 1x1
+### Ratio 1x1
1x1
-## Ratio 3x4
+### Ratio 3x4
3x4
-## Ratio 3x2
-
-
- 3x2
-
-
-## Ratio 9x16
+### Ratio 9x16
9x16
-## Ratio 1x2
+### Ratio 1x2
1x2
-## Tile (16x9)
+### Tile (16x9)
Content
diff --git a/docs/src/pages/components/Breadcrumb.svx b/docs/src/pages/components/Breadcrumb.svx
index f491e5e0..c236dc61 100644
--- a/docs/src/pages/components/Breadcrumb.svx
+++ b/docs/src/pages/components/Breadcrumb.svx
@@ -12,11 +12,9 @@ components: ["Breadcrumb", "BreadcrumbItem"]
import Preview from "../../components/Preview.svelte";
-`Breadcrumb` displays a hierarchical navigation trail that shows users their current location within an application. It supports current page indication, trailing slash customization, and overflow handling for long navigation paths.
+See the [Breadcrumbs recipe](/recipes/Breadcrumbs) for a reusable breadcrumbs component.
-## Default
-
-Display a hierarchical navigation trail with slashes between items. Mark the current page with `isCurrentPage`.
+### Default
Dashboard
@@ -24,18 +22,14 @@ Display a hierarchical navigation trail with slashes between items. Mark the cur
2019
-## No trailing slash
-
-Remove the trailing slash from the last breadcrumb item using `noTrailingSlash`.
+### No trailing slash
HomeProfile
-## Overflow menu
-
-Add an `OverflowMenu` to handle long breadcrumb trails. Use `OverflowMenuItem` components for menu options.
+### Overflow menu
Home
@@ -49,12 +43,6 @@ Add an `OverflowMenu` to handle long breadcrumb trails. Use `OverflowMenuItem` c
Usage
-## Breadcrumb trail
-
-
-
-## Skeleton
-
-Display a loading state with `skeleton` prop. Use `count` to specify the number of items.
+### Skeleton
\ No newline at end of file
diff --git a/docs/src/pages/components/Breakpoint.svx b/docs/src/pages/components/Breakpoint.svx
deleted file mode 100644
index c4245ae1..00000000
--- a/docs/src/pages/components/Breakpoint.svx
+++ /dev/null
@@ -1,35 +0,0 @@
-
-
-
-The Carbon Design System [grid implementation](https://carbondesignsystem.com/guidelines/2x-grid/implementation#responsive-options) defines five responsive breakpoints:
-
-
- Small: less than 672px
- Medium: 672 - 1056px
- Large: 1056 - 1312px
- X-Large: 1312 - 1584px
- Max: greater than 1584px
-
-
-This utility component uses the [Window.matchMedia API](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) to declaratively determine the current Carbon breakpoint size.
-
-## Default
-
-Bind to the `size` prop to determine the current breakpoint size. Possible values include: `"sm" | "md" | "lg" | "xlg" | "max"`.
-
-The `"on:change"` event will fire when the size is initially determined and when a breakpoint change event occurs (e.g., the browser width is resized).
-
-
-
-## Store and Breakpoint Values
-
-Use `breakpointObserver` as an alternative to the component to get the current size as a Svelte store. The store provides two additional functions that create derived stores returning a `boolean` indicating whether the size is smaller/larger than a certain breakpoint.
-
-Access the `breakpoints` dictionary to map from `BreakpointSize` to `BreakpointValue`.
-
-
diff --git a/docs/src/pages/components/Button.svx b/docs/src/pages/components/Button.svx
index f0c7de69..d464c41c 100644
--- a/docs/src/pages/components/Button.svx
+++ b/docs/src/pages/components/Button.svx
@@ -1,126 +1,84 @@
-Buttons trigger actions in the interface. Use them to submit forms, navigate between pages, or perform specific tasks. Choose from different styles and sizes to match the importance and context of each action.
-
-## Primary button
-
-The default button style is primary. This should be used for primary actions.
+### Primary button
-## Secondary button
-
-Set `kind="secondary"` for secondary actions.
+### Secondary button
-## Tertiary button
-
-Set `kind="tertiary"` for tertiary actions.
+### Tertiary button
-## Ghost button
-
-Set `kind="ghost"` for ghost-style buttons.
+### Ghost button
-## Danger button
-
-Set `kind="danger"` for destructive actions.
+### Danger button
-## Danger tertiary button
-
-Set `kind="danger-tertiary"` for less prominent destructive actions.
+### Danger tertiary button
-## Danger tertiary, icon-only button
+### Danger tertiary, icon-only button
-
-
- Provide an iconDescription for accessibility. This text will be used as the button's tooltip and screen reader label.
-
-
+**Note:** you must provide an `iconDescription` for the button tooltip.
-
+
-## Danger ghost button
-
-Set `kind="danger-ghost"` for ghost-style destructive actions.
+### Danger ghost button
-## Button with icon
+### Button with icon
-Add an icon to the button using the `icon` prop.
+
-
+### Icon-only button
-## Icon-only button
+**Note:** you must provide an `iconDescription` for the button tooltip.
-
-
- Provide an iconDescription for accessibility. This text will be used as the button's tooltip and screen reader label.
-
-
+
-
+### Icon-only button (custom tooltip position)
-## Icon-only, link button
+The tooltip position and alignment can be controlled by `tooltipPosition` and `tooltipAlignment`.
-Set `href` to create an icon-only link button.
+
-
-
-## Icon-only button (custom tooltip position)
-
-Control the tooltip position and alignment with `tooltipPosition` and `tooltipAlignment`.
-
-
-
-## Selected icon-only, ghost button
+### Selected icon-only, ghost button
Set `isSelected` to `true` to enable the selected state for an icon-only, ghost button.
-## Link button
+### Link button
-Set `href` to render an [anchor element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) instead of a `button` element.
+If an `href` value is specified, the component will render an [anchor element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) with a "button" role.
-## Link button with icon
-
-Similarly, link buttons can have icons.
-
-
-
-## Custom element
-
-By default, the `Button` will render either a `button` or `a` element.
-
-To render a different element, set `as` to `true` and spread `let:props` to the element.
+### Custom element
-## Field size
-
-The default size is "default".
-
-Set `size="field"` for field-sized buttons.
+### Field button
@@ -128,9 +86,7 @@ Set `size="field"` for field-sized buttons.
-## Small size
-
-Set `size="small"` for small buttons.
+### Small button
@@ -138,73 +94,12 @@ Set `size="small"` for small buttons.
-## Large size
-
-Set `size="lg"` for large buttons.
-
-
-
-
-
-
-
-## Extra-large size
-
-Set `size="xl"` for extra-large buttons.
-
-
-
-
-
-
-
-## Disabled state
-
-Set `disabled` to disable the button.
+### Disabled button
-
-## Expressive styles
+### Skeleton
-Set `expressive` to `true` to use Carbon's expressive typesetting.
-
-
-
- Use expressive styles with default, "lg", or "xl" button sizes.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-## Skeleton
-
-Set `skeleton` to show a loading state.
-
-
-
-
-
-## Programmatic focus
-
-Bind to the `ref` prop to access the button element for programmatic focus.
-
-
+
\ No newline at end of file
diff --git a/docs/src/pages/components/ButtonSet.svx b/docs/src/pages/components/ButtonSet.svx
index 4c66e526..bf4646a3 100644
--- a/docs/src/pages/components/ButtonSet.svx
+++ b/docs/src/pages/components/ButtonSet.svx
@@ -1,25 +1,27 @@
+---
+source: Button/ButtonSet.svelte
+---
+
-Group related buttons together in a set. Use this component to create consistent spacing and alignment between multiple buttons.
+### Default
-## Default
-
-Place buttons side by side in a horizontal layout.
+Buttons in a button set are juxtaposed by default.
-## Stacked
+### Stacked
-Set `stacked` to `true` to arrange buttons vertically.
+Set `stacked` to `true` to use the stacked variant.
-
+
\ No newline at end of file
diff --git a/docs/src/pages/components/Checkbox.svx b/docs/src/pages/components/Checkbox.svx
index 8e66285a..8bbd26c4 100644
--- a/docs/src/pages/components/Checkbox.svx
+++ b/docs/src/pages/components/Checkbox.svx
@@ -1,62 +1,28 @@
-Checkboxes let users select one or more options from a list. Use them for multiple-choice questions, settings, or to confirm actions.
-
-## Default
-
-Create a checkbox with a label using `labelText`.
-
-By default, the checkbox is unchecked.
+### Default (unchecked)
-## Checked
-
-Set `checked` to `true` to pre-select the checkbox.
+### Checked
-## Indeterminate
-
-Set `indeterminate` to `true` to show a mixed state, typically used in parent checkboxes with some children selected.
+### Indeterminate
-## Hidden label
-
-Set `hideLabel` to `true` to visually hide the label while keeping it accessible to screen readers.
+### Hidden label
-## Disabled state
-
-Set `disabled` to `true` to prevent user interaction.
+### Disabled
-## Reactive example (bind:checked)
+### Skeleton
-Use two-way binding with `bind:checked` to track the checkbox state.
-
-
-
-## Reactive example (bind:group)
-
-Bind an array of values using `group` to manage multiple checkboxes. This API is inspired by Svelte [group inputs](https://svelte.dev/tutorial/group-inputs).
-
-
-
- When using bind:group, bind:checked only supports one-way binding.
-
-
-
-
-
-## Skeleton
-
-Set `skeleton` to `true` to show a loading state.
-
-
+
\ No newline at end of file
diff --git a/docs/src/pages/components/ClickableTile.svx b/docs/src/pages/components/ClickableTile.svx
index 58852fdf..4535df18 100644
--- a/docs/src/pages/components/ClickableTile.svx
+++ b/docs/src/pages/components/ClickableTile.svx
@@ -1,44 +1,16 @@
+---
+source: Tile/ClickableTile.svelte
+---
+
-Clickable tiles create interactive content areas that link to other pages or trigger actions. Use them to group related content and provide clear navigation targets.
+### Default
-## Default
+Carbon Design System
-Create a clickable tile with an `href` to link to another page.
+### Light variant
-
-Carbon Design System
-
-
-## Prevent default behavior
-
-Handle the `click` event to override the default link behavior. Use `e.preventDefault()` to stop navigation.
-
- {
- e.preventDefault();
- // custom behavior
- }}
->
- Carbon Design System
-
-
-## Light variant
-
-Set `light` to `true` to use the light color scheme.
-
-
-Carbon Design System
-
-
-## Disabled state
-
-Set `disabled` to `true` to prevent interaction.
-
-
-Carbon Design System
-
+Carbon Design System
diff --git a/docs/src/pages/components/CodeSnippet.svx b/docs/src/pages/components/CodeSnippet.svx
index d1e1dc42..65daba2e 100644
--- a/docs/src/pages/components/CodeSnippet.svx
+++ b/docs/src/pages/components/CodeSnippet.svx
@@ -1,5 +1,5 @@
-Code snippets display and copy code examples. They support single-line, multi-line, and inline formats with customizable copy and expand functionality.
+
+
As of version 0.32, the CodeSnippet will copy the provided `code` text when clicking the copy button.
+
-This component uses the native, asynchronous [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) to copy text.
+### Default (single-line)
-You can override the default copy functionality with your own implementation. See [Overriding copy functionality](#overriding-copy-functionality).
+
-## Default
-
-Display a single-line code snippet by default.
-
-
-
-## Overriding copy functionality
-
-Pass a custom function to the `copy` prop to override the default copy behavior.
-
-In this example, we use the open source module [clipboard-copy](https://github.com/feross/clipboard-copy) to copy the text instead of the default Clipboard API.
-
-
-
-## Preventing copy functionality
-
-Pass a no-op function to the `copy` prop to disable copying.
-
- {}} />
-
-## Inline
-
-Set `type="inline"` to display code inline with text.
+### Inline
-## Multi-line
-
-Set `type="multi"` to display multiple lines of code with expand/collapse functionality.
+### Multi-line
-## Expanded by default
+### Custom copy feedback text
-Set `expanded` to `true` to show the full multi-line code snippet.
-
-
-
-## Reactive example
-
-The multi-line code snippet dispatches "expand" and "collapse" events.
-
-
-
-## Custom copy feedback text
-
-Set `feedback` to customize the copy button feedback text.
+Use the `feedback` prop to override the default copy button feedback text.
-## Hidden copy button
-
-Set `hideCopyButton` to `true` to hide the copy button.
+### Hidden copy button
-## Hidden show more button
+### Disabled
-Set `showMoreLess` to `false` to hide the expand/collapse button on multi-line snippets.
+The `disabled` prop applies only to the `"single"` and `"multi"` code snippet types.
-
-
-## Hidden copy, show more buttons
-
-Hide both the copy and expand/collapse buttons.
-
-
-
-## Custom show more/less text
-
-Set `showMoreText` and `showLessText` to customize the expand/collapse button text.
-
-
-
-## Disabled
-
-Set `disabled` to `true` to disable interaction. This only applies to `"single"` and `"multi"` types.
-
-
+
-## Wrapped text
+### Wrapped text
-By default, the code snippet preserves text formatting and does not wrap text.
-
-Set `wrapText` to `true` to wrap long lines in multi-line snippets.
+`wrapText` only applies to the `"multi"` type.
-## Dynamic multi-line code
+### Dynamic multi-line code
-Use the `code` prop instead of the default slot for dynamically updated code.
+For dynamically updated code, you must use the `code` prop instead of the default slot.
-## Hidden multi-line code
+### Hidden multi-line code
-The "Show more" button relies on the element's computed height. For hidden content, the button won't appear because the height is `0`.
+There may be cases where your code snippet is hidden in the DOM. The logic to render the "Show more" button relies on the element's computed height. For hidden content, the button will not appear because the computed height is `0`.
-Re-render the component to fix this issue.
+The recommended workaround is to re-render the component. See the example below.
-## Skeleton
+### Skeleton
-Set `skeleton` to `true` to show a loading state. Defaults to `"single"` type.
+The default skeleton type is `"single"`.
-## Skeleton (multi-line)
-
-Set `type="multi"` with `skeleton` to show a multi-line loading state.
+### Skeleton (multi-line)
\ No newline at end of file
diff --git a/docs/src/pages/components/ComboBox.svx b/docs/src/pages/components/ComboBox.svx
index 6cce91f4..014769f0 100644
--- a/docs/src/pages/components/ComboBox.svx
+++ b/docs/src/pages/components/ComboBox.svx
@@ -1,19 +1,9 @@
-`ComboBox` combines a text input with a dropdown menu to let users select from predefined options or enter custom values. It supports filtering, custom item rendering, and various states.
-
-`ComboBox` is keyed for performance reasons.
-
-
-
Every items object must have a unique "id" property.
-
-
-## Default
-
-Create a combobox with a title and placeholder text. Each item requires a unique `id` and `text`.
+### Default
-## Custom slot
-
-Override the default slot to customize how each item displays. Access the item and index through the `let:` directive.
-
-
-
-## Hidden label
-
-Set `hideLabel` to `true` to visually hide the label while keeping it accessible to screen readers.
-
-
-
-## Initial selected id
-
-Set `selectedId` to pre-select an item when the combobox loads.
+### Selected index
-## Reactive example
-
-See how the combobox responds to user input and selection changes.
-
-
-
-## Clear selection
-
-Use `bind:this` to access the component instance and call `ComboBox.clear()` to programmatically clear the selection.
-
-Set `focus: false` in the method options to prevent re-focusing the input.
-
-
-
-## Multiple combo boxes
-
-See how to manage multiple comboboxes in a form.
+### Multiple combo boxes
-## Filterable
-
-Enable filtering to let users search through the options.
+### Filterable
-## Filterable with custom label
+### Top direction
-Set `itemToString` to customize how items display in the filterable combobox.
-
-
-
-## Top direction
-
-Set `direction` to `"top"` to make the dropdown menu appear above the input.
+Set `direction` to `"top"` for the combobox dropdown menu to appear above the input.
-## Light variant
-
-Set `light` to `true` to use the light color scheme.
+### Light variant
-## Extra-large size
-
-Set `size` to `"xl"` for an extra-large combobox.
+### Extra-large size
-## Small size
-
-Set `size` to `"sm"` for a small combobox.
+### Small size
-## Invalid state
-
-Set `invalid` to `true` and provide `invalidText` to show an error message.
+### Invalid state
-## Warning state
-
-Set `warn` to `true` and provide `warnText` to show a warning message.
+### Warning state
-## Disabled state
-
-Set `disabled` to `true` to prevent interaction with the combobox.
+### Disabled
-
-## Disabled items
-
-Set `disabled: true` in an item object to disable specific options.
-
-
\ No newline at end of file
+ ]} />
\ No newline at end of file
diff --git a/docs/src/pages/components/ComposedModal.svx b/docs/src/pages/components/ComposedModal.svx
index 6fe96ac2..65adc6ac 100644
--- a/docs/src/pages/components/ComposedModal.svx
+++ b/docs/src/pages/components/ComposedModal.svx
@@ -6,16 +6,6 @@ components: ["ComposedModal", "ModalHeader", "ModalBody", "ModalFooter"]
import Preview from "../../components/Preview.svelte";
-`ComposedModal` lets you build custom modals by combining `ModalHeader`, `ModalBody`, and `ModalFooter` components. Use it to create focused interactions that require user attention or input.
-
-## Composed modal
-
-Create a modal with a header, body, and footer. Each section can be customized independently.
+### Composed modal
-
-## Multiple secondary buttons
-
-Set `secondaryButtons` in `ModalFooter` to create a 3-button modal. This prop replaces `secondaryButtonText` and takes a tuple of two button configurations.
-
-
\ No newline at end of file
diff --git a/docs/src/pages/components/ContentSwitcher.svx b/docs/src/pages/components/ContentSwitcher.svx
index 73d10640..fbd14f31 100644
--- a/docs/src/pages/components/ContentSwitcher.svx
+++ b/docs/src/pages/components/ContentSwitcher.svx
@@ -4,25 +4,19 @@ components: ["ContentSwitcher", "Switch"]
-`ContentSwitcher` lets users switch between different views or sections of content. Use it to organize related content into distinct categories or states.
-
-## Default
-
-Create a content switcher with `Switch` components. Each switch needs a `text` prop.
+### Default
-## Initial selected index
-
-Set `selectedIndex` to pre-select a switch when the content switcher loads.
+### Initial selected index
@@ -30,52 +24,40 @@ Set `selectedIndex` to pre-select a switch when the content switcher loads.
-## Reactive example
-
-This example demonstrates how to programmatically control the content switcher using
-the `bind:selectedIndex` directive. Update the selected index based on user
-interactions or application state.
+### Reactive example
-## Custom switch slot
-
-Override the default slot in `Switch` to customize how each option displays.
+### Custom switch slot
- Latest news
+ Latest news
- Trending
+ Trending
-## Extra-large size
-
-Set `size` to `"xl"` for an extra-large content switcher.
+### Extra-large size
-## Small size
-
-Set `size` to `"sm"` for a small content switcher.
+### Small size
-## Disabled
-
-Set `disabled` to `true` on individual switches to prevent interaction.
+### Disabled
diff --git a/docs/src/pages/components/ContextMenu.svx b/docs/src/pages/components/ContextMenu.svx
index 3ef81928..d195fd63 100644
--- a/docs/src/pages/components/ContextMenu.svx
+++ b/docs/src/pages/components/ContextMenu.svx
@@ -6,32 +6,12 @@ components: ["ContextMenu", "ContextMenuGroup", "ContextMenuRadioGroup", "Contex
import Preview from "../../components/Preview.svelte";
-`ContextMenu` displays a menu when users right-click. Use it to provide quick access to contextual actions or options.
-
In the examples, right click anywhere within the iframe.
-## Default
-
-The context menu appears when right-clicking anywhere in the window. Use `ContextMenuOption` for menu items and `ContextMenuDivider` for visual separation.
+### Default
-## Custom target
-
-By default, the context menu will trigger when right clicking anywhere in the `window`.
-
-Set `target` to specify which element triggers the context menu.
-
-
-
-## Multiple targets
-
-Set `target` to an array of elements to trigger the context menu from multiple sources.
-
-
-
-## Radio groups
-
-Use `ContextMenuGroup` and `ContextMenuRadioGroup` to organize related options and create radio button selections.
-
+### Radio groups
+
\ No newline at end of file
diff --git a/docs/src/pages/components/CopyButton.svx b/docs/src/pages/components/CopyButton.svx
index 88eaed24..61eea74d 100644
--- a/docs/src/pages/components/CopyButton.svx
+++ b/docs/src/pages/components/CopyButton.svx
@@ -1,34 +1,16 @@
-`CopyButton` lets users copy text to their clipboard with a single click. Use it to provide quick access to code snippets, links, or other text content.
+
+
As of version 0.32, this component will copy the provided `code` text when clicking the button.
+
-This component uses the native [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) to copy text. Override the default copy functionality with your own implementation. See [Overriding copy functionality](#overriding-copy-functionality).
-
-## Default
-
-Create a copy button with the `text` prop to specify what to copy.
+### Default
-## Custom feedback text
+### Custom feedback text
-Set `feedback` to customize the message shown after copying.
-
-
-
-## Overriding copy functionality
-
-Pass a custom function to the `copy` prop to override the default copy behavior.
-
-This example uses the NPM package [clipboard-copy](https://github.com/feross/clipboard-copy) to copy the text instead of the default Clipboard API.
-
-
-
-## Preventing copy functionality
-
-Pass a no-op function to the `copy` prop to disable copying.
-
- {}} />
+
\ No newline at end of file
diff --git a/docs/src/pages/components/DataTable.svx b/docs/src/pages/components/DataTable.svx
index c3eb1c59..7b173627 100644
--- a/docs/src/pages/components/DataTable.svx
+++ b/docs/src/pages/components/DataTable.svx
@@ -1,27 +1,16 @@
---
-components: ["DataTable", "Pagination","Toolbar", "ToolbarContent", "ToolbarSearch", "ToolbarMenu", "ToolbarMenuItem", "ToolbarBatchActions"]
+components: ["DataTable", "Toolbar", "ToolbarContent", "ToolbarSearch", "ToolbarMenu", "ToolbarMenuItem", "ToolbarBatchActions"]
---
-`DataTable` displays structured data in a tabular format. Use it to present large datasets with features like sorting, filtering, pagination, and row selection.
+### Default
-
-
- This component is keyed for performance.
-
- Every headers object must have a unique "key" property.
-
Every rows object must have a unique "id" property.
-
-
-
-## Default
-
-Create a basic table by providing `headers` and `rows` data. Match the `key` in headers with the corresponding property in rows.
+The `DataTable` is keyed for both rendering and sorting. You must define a "key" value per object in the `headers` property and an "id" value in `rows`.
-## Slotted cells
+### Slotted cells
-Use the `"cell"` slot to customize cell content. Access row and cell data through `let:row` and `let:cell` directives. Use `"cell-header"` slot for header cells.
+Use the `"cell"` slot to control the display value per table cell. Individual row and cell data are provided through the `let:row` and `let:cell` directives.
+
+The slot name for the table header cells is `"cell-header"`.
-
+
{#if header.key === 'port'}
{header.value} (network)
{:else}
{header.value}
{/if}
-
-
+
+
{#if cell.key === 'rule' && cell.value === 'Round robin'}
- {cell.value}
+ {cell.value}
{:else}
{cell.value}
{/if}
-
+
-## With title, description
-
-Add a title and description to provide context for the table data.
+### With title, description
-## Slottable title, description
-
-Use slots to customize the title and description content.
-
-
- Load balancers
-
- Your organization's active load balancers.
-
-
-
-## Static width
-
-Set `useStaticWidth` to `true` to render the table with an auto width instead of 100%.
-
-
-
-## Custom column widths
-
-Specify `width` or `minWidth` in the `headers` object to set column dimensions. This applies a fixed table layout.
-
-
-
Custom column widths do not work with a sticky header.
-
-
-
-
-## Sticky header
-
-Set `stickyHeader` to `true` to fix the header in place. This adds a maximum height to force scrolling.
-
- ({
- id: i,
- name: "Load Balancer " + (i + 1),
- protocol: "HTTP",
- port: i % 3 ? (i % 2 ? 3000 : 80) : 443,
- rule: i % 3 ? "Round robin" : "DNS delegation",
- }))}
-/>
-
-## With toolbar
-
-Add a toolbar with search, menu, and actions above the table.
+### With toolbar
- API documentation
-
- Stop all
+ API documentation
+ Stop all
-## With toolbar (small size)
-
-Use `size="short"` to create a more compact table with a small toolbar.
+### With toolbar (small size)
Restart allAPI documentation
- Stop all
+ Stop all
-## Filterable
-
-Set `shouldFilterRows` to `true` to enable client-side filtering. The default filter performs string comparisons on cell values.
-
-For pagination with filtering, bind to `filteredRowIds` and pass its length to `Pagination`'s `totalItems`.
-
-
-
-## Filterable (custom)
-
-Pass a function to `shouldFilterRows` to implement custom filtering logic.
-
-
-
-## Zebra stripes
-
-Set `zebra` to `true` to add alternating row colors.
+### Zebra stripes
-## Tall rows
-
-Set `size="tall"` for increased row height.
+### Tall rows
-## Medium rows
-
-Set `size="medium"` for standard row height.
-
-
-
-## Short rows
-
-Set `size="short"` for compact row height.
+### Short rows
-## Compact rows
-
-Set `size="compact"` for minimal row height.
+### Compact rows
-## Sortable
+### Sortable
-Set `sortable` to `true` to enable column sorting. Disable sorting on specific columns by setting `sort: false` in the header object.
+Set `sortable` to `true` to enable table column sorting.
+
+To disable sorting on a specific column, set `sort` to `false` in the header object passed to the `headers` prop.
+
+In the example below, the "Protocol" column is not sortable.
-## Sortable with pagination
-
-Bind to `pageSize` and `page` props of `Pagination` and pass them to `DataTable`.
-
-
-
-## Sortable with custom display and sort methods
-
-Use `display` and `sort` functions in header objects to customize cell rendering and sorting.
+### Sortable with custom display and sort methods
-## Sortable with nested object values
+### Empty column with overflow menu
-Access nested object properties using dot notation in the header key.
+Some use cases require an empty column in the table body without a corresponding table header.
- cost + " €" },
- {
- key: "expireDate",
- value: "Expire date",
- display: (date) => new Date(date).toLocaleString(),
- sort: (a, b) => new Date(a) - new Date(b),
- },
- ]}"
- rows="{[
- {
- id: "a",
- name: "Load Balancer 3",
- network: {
- protocol: "HTTP",
- port: 3000,
- },
- cost: 100,
- expireDate: "2020-10-21",
- },
- {
- id: "b",
- name: "Load Balancer 1",
- network: {
- protocol: "HTTP",
- port: 443,
- },
- cost: 200,
- expireDate: "2020-09-10",
- },
- {
- id: "c",
- name: "Load Balancer 2",
- network: {
- protocol: "HTTP",
- port: 80,
- },
- cost: 150,
- expireDate: "2020-11-24",
- },
- {
- id: "d",
- name: "Load Balancer 6",
- network: {
- protocol: "HTTP",
- port: 3000,
- },
- cost: 250,
- expireDate: "2020-12-01",
- },
- {
- id: "e",
- name: "Load Balancer 4",
- network: {
- protocol: "HTTP",
- port: 443,
- },
- cost: 550,
- expireDate: "2021-03-21",
- },
- {
- id: "f",
- name: "Load Balancer 5",
- network: {
- protocol: "HTTP",
- port: 80,
- },
- cost: 400,
- expireDate: "2020-11-14",
- },
- ]}"
-/>
+For an object in the `headers` array, set `empty` to `true` to render an empty column.
-## Programmatic sorting
-
-Use `sortKey` and `sortDirection` props to control sorting programmatically. Set `sortKey` to a valid header key and `sortDirection` to "none", "ascending", or "descending".
-
-
-
-## Empty column with overflow menu
-
-Set `empty: true` in a header object to create an empty column. Use this for overflow menus without a header.
+In the following example, each row in the sortable data table has an overflow menu. There isn't a separate, useless table header column for the overflow menu.
-## Selectable rows (checkbox)
-
-Set `selectable` to `true` for multi-select functionality. Bind to `selectedRowIds` to track selections. Use `inputName` to customize checkbox names.
+### Selectable
-## Batch selection
-
-Set `batchSelection` to `true` to add a checkbox for selecting all rows. The checkbox shows an indeterminate state when some rows are selected.
+### Initial selected rows
-## Batch selection with initial selected rows
-
-Use `selectedRowIds` to specify initially selected rows.
-
-
-
-## Batch selection with batch actions toolbar
-
-Add a toolbar for batch actions when rows are selected.
+### Selectable with batch actions
-## Batch selection with controlled toolbar
-
-Control the batch actions toolbar with the `active` prop. Prevent default cancel behavior in the `on:cancel` event.
-
-
-
-## Selectable rows (radio)
-
-Set `radio` to `true` for single-row selection. Bind to `selectedRowIds` to track the selected row. Use `inputName` to customize radio button names.
+### Selectable (radio)
-## Non-selectable rows
-
-Use `nonSelectableRowIds` to prevent selection of specific rows.
-
-
-
-## Expandable rows
-
-Set `expandable` to `true` to make rows expandable. Use the `expanded-row` slot to customize expanded content.
+### Expandable
-
-
{JSON.stringify(row, null, 2)}
-
+
+
+ {JSON.stringify(row, null, 2)}
+
+
-## Non-expandable rows
-
-Use `nonExpandableRowIds` to prevent expansion of specific rows.
-
-
-
-## Expandable (zebra styles)
-
-Combine expandable rows with zebra striping.
-
-
-
-## Expandable (compact size)
-
-Set `size="compact"` for expandable rows with minimal height.
+### Expandable (compact size)
-
-
{JSON.stringify(row, null, 2)}
-
+
+
+ {JSON.stringify(row, null, 2)}
+
+
-## Expandable (short size)
-
-Set `size="short"` for expandable rows with compact height.
+### Expandable (short size)
-
-
{JSON.stringify(row, null, 2)}
-
+
+
+ {JSON.stringify(row, null, 2)}
+
+
-## Expandable (tall size)
-
-Set `size="tall"` for expandable rows with increased height.
+### Expandable (tall size)
-
-
{JSON.stringify(row, null, 2)}
-
+
+
+ {JSON.stringify(row, null, 2)}
+
+
-## Batch expansion
-
-Set `batchExpansion` to `true` to expand and collapse all rows at once.
+### Batch expansion
-
-
{JSON.stringify(row, null, 2)}
-
+
+
+ {JSON.stringify(row, null, 2)}
+
+
-## Expandable and selectable rows
-
-Combine `batchExpansion` and `batchSelection` for tables with both expandable and selectable rows.
-
-
-
-## Skeleton
-
-Use `DataTableSkeleton` to show a loading state.
+### Skeleton
-## Skeleton with headers, row count
-
-Specify headers and row count for the skeleton.
+### Skeleton with headers, row count
-## Skeleton with object headers
+### Skeleton with object headers
-Pass header objects to customize the skeleton.
+`headers` can also be an array of objects. The type is the same as the `headers` prop type used in `DataTable`.
-## Skeleton with empty header
+### Skeleton with empty header
-Add an empty header column with `empty: true`.
+Pass an object with `"empty"` set to `true` to render an empty table header column.
-## Skeleton without header, toolbar
-
-Hide the header and toolbar in the skeleton.
+### Skeleton without header, toolbar
-## Skeleton (tall size)
-
-Set `size="tall"` for a taller skeleton.
+### Skeleton (tall size)
-## Skeleton (short size)
-
-Set `size="short"` for a shorter skeleton.
+### Skeleton (short size)
-## Skeleton (compact size)
+### Skeleton (compact size)
-Set `size="compact"` for a minimal skeleton.
-
-
\ No newline at end of file
+
diff --git a/docs/src/pages/components/DatePicker.svx b/docs/src/pages/components/DatePicker.svx
index c7cb9f3f..3ac83e15 100644
--- a/docs/src/pages/components/DatePicker.svx
+++ b/docs/src/pages/components/DatePicker.svx
@@ -3,112 +3,64 @@ components: ["DatePicker", "DatePickerInput", "DatePickerSkeleton"]
---
-`DatePicker` lets users select a date or date range using a calendar interface. It uses the [flatpickr](https://github.com/flatpickr/flatpickr) library for its calendar implementation.
-
-
-
- If using Rollup, specify inlineDynamicImports: true in your rollup.config.js.
-
-
-
-## Single
-
-Set `datePickerType` to `"single"` for single date selection.
-
-
-
-## Range
-
-Set `datePickerType` to `"range"` to enable date range selection.
-
-
-
-## DatePicker in a modal
-
-The calendar is positioned inside the wrapper by default (`flatpickrProps.static: true`). This ensures proper positioning within a [Modal](/components/Modal).
-
-Set `flatpickrProps.static` to `false` to position the calendar outside the wrapper.
-
-
-
-## Simple
-
-Create a simple date picker without a dropdown calendar.
+### Default (simple)
-## With helper text
-
-Add helper text to provide additional context or formatting instructions.
-
-
-
-
-
-## Hidden label
-
-Hide the label while maintaining accessibility.
+### Hidden label
-## Light variant
-
-Use the light variant for light backgrounds.
+### Light variant
-## Extra-large size
-
-Use the extra-large size for more prominent date pickers.
+### Extra-large size
-## Small size
-
-Use the small size for compact date pickers.
+### Small size
-## Invalid state
-
-Show an invalid state when the input value is not valid.
+### Invalid state
-## Warning state
-
-Show a warning state to indicate potential issues with the input.
+### Warning state
-## Disabled state
-
-Disable the date picker to prevent user interaction.
+### Disabled state
-## Skeleton
+### Single
-Show a loading state with the skeleton component.
+
+
+
-
+### Skeleton
+
+
\ No newline at end of file
diff --git a/docs/src/pages/components/Dropdown.svx b/docs/src/pages/components/Dropdown.svx
index afd5cee2..2cc508d1 100644
--- a/docs/src/pages/components/Dropdown.svx
+++ b/docs/src/pages/components/Dropdown.svx
@@ -3,152 +3,86 @@ components: ["Dropdown", "DropdownSkeleton"]
---
-The `Dropdown` component provides a select input with a dropdown menu. It supports
-various states, sizes, and customization options. Each item in the dropdown must
-have a unique `id` property for proper functionality.
+### Default
-
-
Every items object must have a unique "id" property.
-
-
-## Default
-
-Use the `Dropdown` component to create a select input with a dropdown menu. Each item
-must have a unique `id` property.
-
-
-## Custom slot
+### Hidden label
-Override the default slot to customize the display of each item. Access the item and
-index through the `let:` directive.
-
-
-
-## Hidden label
-
-Hide the label while maintaining accessibility by setting the `hideLabel` prop to
-`true`. The label will still be available to screen readers.
-
-
-## Format item display text
+### Format item display text
-Format the display text of items using the `itemToString` prop. This function
-receives the item object and returns the formatted string.
+Use the `itemToString` prop to format the display of individual items.
{
return item.text + ' (' + item.id +')'
-}} titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
+}} titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}" />
-## Multiple dropdowns
-
-Create multiple dropdowns that work together. This example demonstrates how to
-manage the state of multiple dropdowns.
+### Multiple dropdowns
-## Top direction
+### Top direction
-Display the dropdown menu above the input by setting the `direction` prop to
-`"top"`. This is useful when there's limited space below the input.
+Set `direction` to `"top"` for the dropdown menu to appear above the input.
-
-## Light variant
+### Light variant
-Use the light variant for dropdowns on dark backgrounds by setting the `light` prop
-to `true`.
-
-
-## Inline variant
+### Inline type
-Display the dropdown inline with other content by setting the `type` prop to
-`"inline"`. This variant removes the background and border.
-
-
-## Extra-large size
+### Extra-large size
-Increase the size of the dropdown by setting the `size` prop to `"xl"`. This
-provides more visual emphasis for important selections.
-
-
-## Small size
+### Small size
-Decrease the size of the dropdown by setting the `size` prop to `"sm"`. This is
-useful for compact layouts or secondary selections.
-
-
-## Invalid state
+### Invalid state
-Indicate an invalid selection by setting the `invalid` prop to `true`. Provide
-feedback to users with the `invalidText` prop.
-
-
-## Warning state
+### Warning state
-Indicate a warning state by setting the `warn` prop to `true`. Provide additional
-context with the `warnText` prop.
-
-
-## Disabled state
+### Disabled state
-Disable the entire dropdown by setting the `disabled` prop to `true`. This prevents
-user interaction with the component.
-
-
-## Disabled items
-
-Disable specific items in the dropdown by setting the `disabled` property to
-`true` in the item object. This allows for more granular control over available
-selections.
-
-
-
-## Skeleton
-
-Display a loading state using the `DropdownSkeleton` component. This provides
-visual feedback while the dropdown content is being loaded.
+### Skeleton
\ No newline at end of file
diff --git a/docs/src/pages/components/ExpandableTile.svx b/docs/src/pages/components/ExpandableTile.svx
index 398d64ee..b1c127c3 100644
--- a/docs/src/pages/components/ExpandableTile.svx
+++ b/docs/src/pages/components/ExpandableTile.svx
@@ -1,94 +1,36 @@
+---
+source: Tile/ExpandableTile.svelte
+---
+
-The `ExpandableTile` component creates a collapsible content container that can
-show and hide content with a smooth animation. It's ideal for managing content
-overflow and progressive disclosure of information. The component automatically
-measures content height using a resize observer.
-
-## Default
-
-Create an expandable tile that shows and hides content. The 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.
-
-By default, the tile is collapsed. Use the `above` and `below` slots to define the
-content that appears before and after expansion.
-
-
-
-
- Above the fold content here
-
-
-
-
- More above the fold content
-
-
-
Below the fold content here
-
-
-## Custom tile heights
-
-Set custom heights for the tile content using CSS. This is useful when you need to
-control the exact dimensions of the visible and hidden content.
+### Default (unexpanded)
Above the fold content here
Below the fold content here
-## Expanded
-
-Display the tile in its expanded state by default by setting the `expanded` prop to
-`true`.
+### Expanded
-
Above the fold content here
-
Below the fold content here
+
Above the fold content here
+
Below the fold content here
-## Light variant
-
-Use the light variant for expandable tiles on dark backgrounds by setting the
-`light` prop to `true`.
+### Light variant
-
Above the fold content here
-
Below the fold content here
+
Above the fold content here
+
Below the fold content here
-## With icon labels
-
-Customize the expand/collapse button labels using the `tileExpandedLabel` and
-`tileCollapsedLabel` props.
+### With icon labels
-
Above the fold content here
-
Below the fold content here
-
-
-## With interactive content
-
-Handle interactive content within the tile by preventing event propagation. This
-ensures that clicks on interactive elements don't trigger the tile's expand/collapse
-behavior.
-
-
-
+
\ No newline at end of file
diff --git a/docs/src/pages/components/FileUploader.svx b/docs/src/pages/components/FileUploader.svx
index 37e30df5..32cb1bcf 100644
--- a/docs/src/pages/components/FileUploader.svx
+++ b/docs/src/pages/components/FileUploader.svx
@@ -3,142 +3,34 @@ components: ["FileUploaderButton", "FileUploader", "FileUploaderDropContainer",
---
-The `FileUploader` components provide a complete solution for file uploads, including
-a button trigger, drag-and-drop container, and file list display. The components
-support various states, file validation, and customization options.
+### File uploader (button-only)
-## File uploader (button-only)
+
-Create a simple file upload button using `FileUploaderButton`. By default, it
-accepts a single file. Set `multiple` to `true` to allow multiple file selection.
-
-
-
-## Multiple files
-
-Enable multiple file selection by setting the `multiple` prop to `true`. This
-allows users to select multiple files at once.
-
-
-
-## Custom button kind, size
-
-Customize the button appearance using the `kind` and `size` props. The default is
-a small primary button.
-
-
-
-
-
-
-## File uploader
-
-The `FileUploader` component combines a button trigger with a list of uploaded
-files. It supports file type restrictions, multiple file selection, and various
-upload states.
-
-This example accepts multiple JPEG files and displays them in a completed state.
+### File uploader
-## Clear files
-
-Remove uploaded files from the `FileUploader` component in two ways:
-
-
- programmatically using the clearFiles accessor
- two-way binding by setting files to []
-
-
-
-
-## File uploader (disabled state)
-
-Disable the file uploader by setting the `disabled` prop to `true`. This prevents
-user interaction with the component.
-
-
-
-## Item (uploading)
-
-Display a file upload in progress using the `uploading` status. This shows a
-loading indicator and the file name.
+### Item (uploading)
-## Item (complete)
-
-Show a successfully uploaded file using the `complete` status. This displays a
-checkmark icon next to the file name.
+### Item (complete)
-## Item (edit)
+### Item (invalid)
-Enable file deletion by setting the status to `"edit"`. Clicking the close icon
-dispatches a `delete` event with the item's ID.
+
- {
- console.log(e.detail); // "readme"
-}} />
+### Drop container
-## Item (edit status, invalid state)
+
-Mark a file as invalid while keeping it editable. This shows an error icon and
-allows the user to remove the file.
-
-
-
-## Item (edit status, invalid state with subject, body)
-
-Provide detailed error messages for invalid files using the `errorSubject` and
-`errorBody` props. This helps users understand and resolve upload issues.
-
-
-
-## Item sizes
-
-Customize the size of file uploader items using the `size` prop. The default size
-is "default".
-
-
-
-
-
-## Drop container
-
-Use `FileUploaderDropContainer` for drag-and-drop file uploads. It supports file
-validation and multiple file selection.
-
-This example accepts files smaller than 1 kB and logs the selected files to the
-console.
-
- {
- return files.filter(file => file.size < 1_024)
- }}
- on:change={e=> {
- console.log("files", e.detail)
- }}
-/>
-
-## Skeleton
-
-Display a loading state using the `FileUploaderSkeleton` component. This provides
-visual feedback while the file uploader content is being loaded.
+### Skeleton
\ No newline at end of file
diff --git a/docs/src/pages/components/FluidForm.svx b/docs/src/pages/components/FluidForm.svx
index d05f56d8..80e84bdc 100644
--- a/docs/src/pages/components/FluidForm.svx
+++ b/docs/src/pages/components/FluidForm.svx
@@ -1,36 +1,19 @@
-The `FluidForm` component provides a fluid-width form layout that adapts to its
-container. It's designed for full-width form layouts and works with most Carbon
-input components. Note that inline input variants cannot be used within a
-`FluidForm`.
-
-## Fluid form
-
-Create a fluid-width form layout using the `FluidForm` component. This example
-shows a basic login form with required fields.
+### Fluid form
-
+
-
-
-## Invalid state
-
-Handle form validation and display error states using the `invalid` and
-`invalidText` props on form inputs. This example demonstrates how to show
-validation errors in a fluid form.
-
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/src/pages/components/Form.svx b/docs/src/pages/components/Form.svx
index a0db291b..5d66a2dd 100644
--- a/docs/src/pages/components/Form.svx
+++ b/docs/src/pages/components/Form.svx
@@ -14,14 +14,7 @@ components: ["Form", "FormGroup"]
import Preview from "../../components/Preview.svelte";
-The `Form` component provides a structured way to collect user input. It works with
-various form controls like checkboxes, radio buttons, and select menus. The
-`FormGroup` component helps organize related form controls with a legend.
-
-## Form
-
-Create a form with grouped controls using `Form` and `FormGroup`. This example
-shows a form with checkboxes, radio buttons, and a select menu.
+### Form
-
-## Prevent default behavior
-
-Handle form submission by preventing the default browser behavior. Use
-`e.preventDefault()` to stop the native form submission and handle the event
-programmatically.
-
-
diff --git a/docs/src/pages/components/Grid.svx b/docs/src/pages/components/Grid.svx
index 741eea4d..9375fcda 100644
--- a/docs/src/pages/components/Grid.svx
+++ b/docs/src/pages/components/Grid.svx
@@ -6,62 +6,34 @@ components: ["Grid", "Row", "Column"]
import Preview from "../../components/Preview.svelte";
-The `Grid` system provides a responsive, 12-column layout structure. Use `Row` and
-`Column` components to create flexible layouts that adapt to different screen
-sizes. The grid supports various spacing options and column configurations.
-
-## Default
-
-Create a basic grid layout with equal-width columns. This example demonstrates the
-default grid behavior.
+### Default
-## Full width
-
-Use the full-width grid variant for layouts that span the entire viewport width.
-This removes the default max-width constraint.
+### Full width
-## Narrow
-
-Create a more compact grid layout using the narrow variant. This reduces the
-spacing between columns.
+### Narrow
-## Condensed
-
-Use the condensed variant for even tighter spacing between columns. This is ideal
-for dense data displays.
+### Condensed
-## Responsive
-
-Build responsive layouts by specifying different column widths for different
-breakpoints. The grid automatically adjusts based on screen size.
+### Responsive
-## Offset columns
-
-Create space between columns using the offset feature. This allows for more
-flexible layouts without empty columns.
+### Offset columns
-## Aspect ratio columns
-
-Maintain consistent column heights using aspect ratio columns. This ensures
-content alignment across different column widths.
+### Aspect ratio columns
-## Padded columns
-
-Add padding to columns using the padded variant. This creates more breathing room
-between content.
+### Padded columns
diff --git a/docs/src/pages/components/Icon.svx b/docs/src/pages/components/Icon.svx
new file mode 100644
index 00000000..1f307e55
--- /dev/null
+++ b/docs/src/pages/components/Icon.svx
@@ -0,0 +1,28 @@
+
+
+
+
+ This component will be removed in the next major release. Use icons from carbon-icons-svelte instead.
+
+
+
+### Default
+
+
+
+
+
+
+### Skeleton
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/src/pages/components/ImageLoader.svx b/docs/src/pages/components/ImageLoader.svx
index 41f79999..9a7057f7 100644
--- a/docs/src/pages/components/ImageLoader.svx
+++ b/docs/src/pages/components/ImageLoader.svx
@@ -5,60 +5,42 @@
let key = 0;
-The `ImageLoader` component provides a robust way to load images with built-in
-loading and error states. It uses the [Image API](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image)
-to handle image loading programmatically. The component supports aspect ratios,
-fade-in animations, and custom loading/error states.
-
-## Default
-
-Load an image with the default configuration. The component handles the loading
-process automatically.
-
+This utility component uses the [Image API](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image) to programmatically load an image with slottable loading and error states.
+
+### Default
+
-## Slots
+### Slots
-Customize the loading and error states using named slots. This example shows how
-to display a loading indicator and error message.
+Use the "loading" and "error" named slots to render an element when the image is loading or has an error.
-
+
-
-
+
+
An error occurred.
-
+
-## With aspect ratio
+### With aspect ratio
-Maintain consistent image dimensions using aspect ratios. The component uses
-[AspectRatio](/components/AspectRatio) to constrain the image.
+If `ratio` is set, this component uses the [AspectRatio](/components/AspectRatio) to constrain the image.
-Supported aspect ratios include `"2x1"`, `"2x3"`, `"16x9"`, `"4x3"`, `"1x1"`,
-`"3x4"`, `"3x2"`, `"9x16"` and `"1x2"`.
+Supported aspect ratios include `"2x1"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"9x16"` and `"1x2"`.
-## Fade in
+### Fade in
-Enable a smooth fade-in animation when the image loads successfully. This provides
-a better user experience for image loading.
+Set `fadeIn` to `true` to fade in the image if successfully loaded.
{#key key}{/key}
-## Programmatic usage
+### Programmatic usage
-Control image loading programmatically using component references. This example
-demonstrates how to trigger image loading manually.
+In this example, a component reference is obtained to programmatically trigger the `loadImage` method.
-
-
-## Dynamic image source
-
-Update the image source dynamically using the same `ImageLoader` instance. This
-allows for smooth transitions between different images.
-
-
+
\ No newline at end of file
diff --git a/docs/src/pages/components/InlineLoading.svx b/docs/src/pages/components/InlineLoading.svx
index be82a72c..d4066455 100644
--- a/docs/src/pages/components/InlineLoading.svx
+++ b/docs/src/pages/components/InlineLoading.svx
@@ -1,44 +1,23 @@
----
-components: ["InlineLoading"]
----
-
-The `InlineLoading` component provides a compact loading indicator that can be embedded within content. It's ideal for showing progress during inline operations like form submissions or data updates.
-
-## Default
-
-Display a basic loading indicator with the default configuration.
+### Default
-## With description
-
-Add a descriptive text to provide context about the loading operation.
+### With description
-## Status states
-
-The component supports different status states to indicate progress:
-
-
- active: Shows an animated loading indicator
- inactive: Displays a static state
- finished: Shows a success state
- error: Displays an error state
-
+### Status states
-## UX example
-
-See how to integrate the loading indicator in a real-world scenario.
+### UX example
\ No newline at end of file
diff --git a/docs/src/pages/components/InlineNotification.svx b/docs/src/pages/components/InlineNotification.svx
index 73cc37f7..80ff1f4a 100644
--- a/docs/src/pages/components/InlineNotification.svx
+++ b/docs/src/pages/components/InlineNotification.svx
@@ -1,5 +1,5 @@
---
-components: ["InlineNotification", "NotificationActionButton"]
+source: Notification/InlineNotification.svelte
---
-The `InlineNotification` component displays contextual messages inline with content. It supports various types of notifications (error, warning, success, info) and can include actions. Use it to provide feedback or important information to users.
-
-See [detailed usage](https://carbondesignsystem.com/components/notification/usage).
-See also: [ToastNotification](ToastNotification)
-
-## Default
-
-Display a basic error notification with title and subtitle by default.
+### Default (error)
-## Prevent default close behavior
-
-The component is controlled, allowing you to prevent the default close behavior using `e.preventDefault()`.
-
- {
- e.preventDefault();
- // custom close logic (e.g., transitions)
-}} />
-
-## Slottable title and subtitle
-
-Customize the notification content using slots for more flexibility.
-
-
- Error:
- An internal server error occurred.
-
-
-## Accessible icon descriptions
-
-Make notifications more accessible by providing custom descriptions for icons.
-
-
-
-## Hidden close button
-
-Create a persistent notification by hiding the close button.
+### Hidden close button
-## With actions
-
-Add interactive elements to notifications using the actions slot.
+### With actions
-
+
Learn more
-
+
-## Notification variants
-
-The component supports different notification types:
+### Notification variants
@@ -74,9 +32,7 @@ The component supports different notification types:
-## Low contrast
-
-Use low contrast variants for less prominent notifications.
+### Low contrast
diff --git a/docs/src/pages/components/Link.svx b/docs/src/pages/components/Link.svx
index 78c21956..115ec048 100644
--- a/docs/src/pages/components/Link.svx
+++ b/docs/src/pages/components/Link.svx
@@ -4,86 +4,46 @@ components: ["Link", "OutboundLink"]
-The `Link` component provides styled hyperlinks with various customization options. It supports different sizes, states, and can include icons. The `OutboundLink` variant automatically handles external links with proper security attributes.
+### Default
-## Default
+Carbon Design System
-Create a basic link with the default styling.
+### Target _blank
-
- Carbon Design System
-
+If setting `target` to `"_blank"`, the `Link` component will automatically set `rel="noopener noreferrer"` to guard against [potential cross-origin security exploits](https://web.dev/external-anchors-use-rel-noopener/).
-## Target _blank
+You can override the `rel` attribute with a custom value.
-For external links, the component automatically adds security attributes. You can override the `rel` attribute if needed.
+Carbon Design System
-
- Carbon Design System
-
+### Outbound link
-## Outbound link
+An alternative to manually setting `target` to `"_blank"` is to use the `OutboundLink`.
-Use `OutboundLink` as a convenient alternative for external links.
+Carbon Design System
-
- Carbon Design System
-
-
-## Inline variant
-
-Create links that flow naturally with surrounding text.
+### Inline variant
Visit the
-
- Carbon Design System
- .
+ Carbon Design System.
-## Link with icon
+### Large size
-Add icons to links for better visual context. Note that `inline` must be `false` when using icons.
+Carbon Design System
-
- Visit the
-
- Carbon Design System
- .
-
+### Small size
-## Size variants
+Carbon Design System
-The component supports different sizes to match your design needs:
+### Disabled
-
- Large link
-
-
-
- Default link
-
-
-
- Small link
-
+Carbon Design System
-## Disabled state
+### Visited styles
-Disabled links render as plain text while maintaining accessibility.
-
-
- Disabled link
-
-
-## Visited styles
-
-Show visited state styling for links.
-
-
- Visited link
-
\ No newline at end of file
+Carbon Design System
\ No newline at end of file
diff --git a/docs/src/pages/components/Loading.svx b/docs/src/pages/components/Loading.svx
index c064043f..7a1870b1 100644
--- a/docs/src/pages/components/Loading.svx
+++ b/docs/src/pages/components/Loading.svx
@@ -1,28 +1,16 @@
----
-components: ["Loading"]
----
-
-The `Loading` component provides a full-screen or inline loading indicator. It's ideal for showing progress during page loads or data fetching operations.
-
-## Default
-
-Display a loading indicator with a semi-transparent overlay that covers the entire viewport.
+### Default (with overlay)
-## No overlay
-
-Show a loading indicator without the overlay, allowing interaction with the underlying content.
+### No overlay
-## Small size
-
-Display a more compact loading indicator.
+### Small size
\ No newline at end of file
diff --git a/docs/src/pages/components/LocalStorage.svx b/docs/src/pages/components/LocalStorage.svx
index c8c0077c..b2250719 100644
--- a/docs/src/pages/components/LocalStorage.svx
+++ b/docs/src/pages/components/LocalStorage.svx
@@ -1,26 +1,9 @@
----
-components: ["LocalStorage"]
----
-
-The `LocalStorage` component provides a reactive wrapper around the [Window.localStorage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage). It's useful for persisting user preferences and application state across page reloads.
-
-## Reactive example
-
-See how the component maintains state across page reloads. Toggle the switch and refresh the page to see the persisted state.
-
-
-
-## Clear item, clear all
-
-The component provides methods to manage stored data:
-
-- `clearItem`: Remove a specific key-value pair
-- `clearAll`: Remove all stored data
-
-Use `bind:this` to access these methods. In this example, try toggling the switch, refreshing the page, then clearing the storage.
-
-
\ No newline at end of file
+This utility component wraps the [Window.localStorage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) and is useful for persisting ephemeral data (e.g., color theme) at the browser level.
+
+### Reactive example
+
+
\ No newline at end of file
diff --git a/docs/src/pages/components/Modal.svx b/docs/src/pages/components/Modal.svx
index e11c82ad..6592e74d 100644
--- a/docs/src/pages/components/Modal.svx
+++ b/docs/src/pages/components/Modal.svx
@@ -2,78 +2,33 @@
import Preview from "../../components/Preview.svelte";
-The `Modal` component provides a focused dialog for user interactions, confirmations, or data entry. It supports various sizes, states, and customization options to create accessible and user-friendly modal experiences.
-
-## Default
-
-Display a modal dialog with a header, content area, and footer by default.
-
-Create a basic modal dialog with primary and secondary actions. This variant is ideal for confirming user actions or gathering input.
+### Default (transactional)
-## Custom focus
-
-Control which element receives focus when the modal opens. Use `selectorPrimaryFocus` to specify the target element using CSS selectors.
-
-
-
-## Danger modal
-
-Display critical actions or destructive operations with the danger variant. This style emphasizes the severity of the action.
+### Danger modal
-## Passive modal
-
-Create a non-interactive modal for displaying information. This variant lacks action buttons and focuses on content presentation.
+### Passive modal
-## Has scrolling content
-
-Enable vertical scrolling for modals with lengthy content. This ensures all content remains accessible while maintaining a reasonable modal height.
-
-
-
-## Multiple modals
-
-Stack multiple modals for complex workflows. Each modal maintains its own state and focus management.
-
-
-
-## Multiple secondary buttons
-
-Add up to two secondary actions using the `secondaryButtons` prop. This provides more flexibility than the single `secondaryButtonText` option.
-
-
-
-## Extra-small size
-
-Use the extra-small size for compact notifications by setting `size` to `"xs"`. This is ideal for simple confirmations.
+### Extra-small size
-## Small size
-
-Use the small size for simple confirmations by setting `size` to `"sm"`. This provides a more focused dialog.
+### Small size
-## Large size
-
-Use the large size for complex content by setting `size` to `"lg"`. This provides more space for detailed information.
+### Large size
-## Prevent close on outside click
+### Prevent close on outside click
-Disable closing the modal when clicking outside by setting `preventCloseOnClickOutside` to `true`. This is useful for transactional modals where explicit user action is required.
+`preventCloseOnClickOutside` prevents the modal from being closed when clicking outside of an open modal. This prop is intended to be used for transactional modals.
-## Button with icon
-
-Enhance modal buttons with icons for better visual context and clarity. This example shows how to add icons to modal actions.
-
-
diff --git a/docs/src/pages/components/MultiSelect.svx b/docs/src/pages/components/MultiSelect.svx
index 64769648..018bd30f 100644
--- a/docs/src/pages/components/MultiSelect.svx
+++ b/docs/src/pages/components/MultiSelect.svx
@@ -1,17 +1,11 @@
-The `MultiSelect` component provides a dropdown interface for selecting multiple options using checkboxes. It supports filtering, custom formatting, and various states. Each item must have a unique `id` property for proper functionality.
+### Default
-
-
Every items object must have a unique "id" property.
-
-
-## Default
-
-Create a basic multi-select dropdown with three contact methods. By default, items are ordered alphabetically.
+By default, items will be ordered alphabetically based on the `item.text` value. To prevent this, see [#no-alphabetical-ordering](#no-alphabetical-ordering).
-## Format item display text
+### No alphabetical ordering
-Format the display text of items using the `itemToString` prop. This example appends the item ID in parentheses.
+To prevent alphabetical item ordering, pass an empty function to the `sortItem` prop.
+
+
+
+### Filterable
+
+`$$restProps` are spread to the underlying input element.
+
+
+
+### Initial selected items
+
+To select (or bind) items, pass an array of item ids to `selectedIds`.
+
+
+
+### Multiple multi-select dropdowns
+
+
+
+### Format item display text
+
+Use the `itemToString` prop to format the display of individual items.
{
return item.text + ' (' + item.id +')'
@@ -32,83 +61,9 @@ Format the display text of items using the `itemToString` prop. This example app
sortItem="{() => {}}"
/>
-## Custom slot
+### Top direction
-Override the default slot to customize item rendering. This example shows how to access and use the item and index values.
-
-
-
-## No alphabetical ordering
-
-Prevent automatic alphabetical ordering by passing a no-op function to `sortItem`. This maintains the original order of items.
-
-
-
-## Filterable
-
-Enable filtering by setting `filterable` to `true`. This example includes a placeholder text for the filter input.
-
-
-
-## Initial selected items
-
-Pre-select items by passing an array of item IDs to `selectedIds`. This example pre-selects Slack and Email.
-
-
-
-## Multiple multi-select dropdowns
-
-This example demonstrates how to manage multiple dropdowns in a form with coordinated state.
-
-
-
-## Format checkbox values
-
-Customize checkbox attributes using the `itemToInput` prop. This example sets a consistent name for all checkboxes.
-
-Use the `itemToInput` prop to customize the user-selectable checkbox values.
-This will also override the underlying hidden inputs used for form submission.
-
-```js
-itemToInput={(item) => {
- return {
- name: `Contact_${item.id}`,
- value: item.id
- }
-}}
-```
-
-The above function sets the `name` attribute to
-`Contact_0` (respective to each item's `id`) for every hidden input that
-renders, along with each respective item's `id` set to the `value` attribute.
-
- ({name: 'contact', value: item.id})}
- titleText="Contact"
- label="Select contact methods..."
- items="{[
- {id: "0", text: "Slack"},
- {id: "1", text: "Email"},
- {id: "2", text: "Fax"}
- ]}"
-/>
-
-## Top direction
-
-Display the dropdown menu above the input by setting `direction` to `"top"`. This is useful when space below is limited.
+Set `direction` to `"top"` for the dropdown menu to appear above the input.
-## Hidden label
-
-Hide the label visually while maintaining accessibility by setting `hideLabel` to `true`. The label is still available to screen readers.
-
-
-
-## Light variant
-
-Use the light variant for dark backgrounds by setting `light` to `true`. This provides better contrast in dark themes.
+### Light variant
-## Inline variant
-
-Display the dropdown inline with other content by setting `type` to `"inline"`. This removes the background and border.
+### Inline type
-## Extra-large size
-
-Use the extra-large size for prominent selections by setting `size` to `"xl"`. This provides more visual emphasis.
+### Extra-large size
-## Small size
-
-Use the small size for compact layouts by setting `size` to `"sm"`. This is ideal for secondary selections.
+### Small size
-## Invalid state
-Indicate an invalid selection by setting `invalid` to `true`. This example shows a required field error.
+
+### Invalid state
-## Warning state
-
-Indicate a warning state by setting `warn` to `true`. This example shows a warning about unassociated accounts.
+### Warning state
-## Disabled state
-
-Disable the entire dropdown by setting `disabled` to `true`. This prevents all user interaction.
+### Disabled state
-
-## Disabled items
-
-Disable specific items using the `disabled` property in the `items` prop. This example disables the Email option.
-
-
+ />
\ No newline at end of file
diff --git a/docs/src/pages/components/NumberInput.svx b/docs/src/pages/components/NumberInput.svx
index 93e89ea3..2bc9afbf 100644
--- a/docs/src/pages/components/NumberInput.svx
+++ b/docs/src/pages/components/NumberInput.svx
@@ -7,100 +7,50 @@ components: ["NumberInput", "NumberInputSkeleton"]
import Preview from "../../components/Preview.svelte";
-The `NumberInput` component provides a controlled input for numerical values. It supports validation, step values, and various states to ensure accurate data entry.
+### Default
-## Default
+
-Create a basic number input with increment and decrement controls. The input accepts numerical values and provides visual feedback.
+### With helper text
-
+
-## No value
-
-Allow empty values by setting both `allowEmpty` to `true` and `value` to `null`. The `allowEmpty` prop enables the empty state, while `value={null}` represents no value.
-
-
-
-## Helper text
-
-Add descriptive text below the input using the `helperText` prop. This helps users understand the expected input.
-
-
-
-## Minimum and maximum values
-
-Constrain input values using `min` and `max` props. This example limits values between 4 and 20.
+### Minimum and maximum values
-## Step value
+### Hidden label
-Control the increment/decrement step size using the `step` prop. This example uses a step of 0.1.
+
-
+### Light variant
-## Hidden label
+
-Hide the label visually while maintaining accessibility by setting `hideLabel` to `true`. The label is still available to screen readers.
+### Extra-large size
-
+
-## Extra-large size
+### Small size
-Use the extra-large size for prominent inputs by setting `size` to `"xl"`. This provides more visual emphasis.
+
-
+### Invalid state
-## Small size
+
-Use the small size for compact layouts by setting `size` to `"sm"`. This is ideal for secondary inputs.
+### Warning state
-
+
-## Light variant
+### Disabled state
-Use the light variant for dark backgrounds by setting `light` to `true`. This provides better contrast in dark themes.
+
-
-
-## Invalid state
-
-Indicate an invalid value by setting `invalid` to `true`. This example shows a validation error.
-
-
-
-## Warning state
-
-Indicate a warning state by setting `warn` to `true`. This example shows a warning about the input value.
-
-
-
-## Disabled state
-
-Disable the input by setting `disabled` to `true`. This prevents all user interaction.
-
-
-
-## Read-only state
-
-Make the input read-only by setting `readonly` to `true`. This allows viewing but prevents editing.
-
-
-
-## Hidden steppers
-
-Hide the increment/decrement controls by setting `hideSteppers` to `true`. This provides a simpler input interface.
-
-
-
-## Skeleton
-
-Show a loading state using the `NumberInputSkeleton` component. This is useful while data is being fetched.
+### Skeleton
-## Skeleton without label
-
-Show a loading state without a label by setting `hideLabel` to `true`. This maintains layout consistency.
+### Skeleton without label
\ No newline at end of file
diff --git a/docs/src/pages/components/OrderedList.svx b/docs/src/pages/components/OrderedList.svx
index 784f118d..58b5bfb6 100644
--- a/docs/src/pages/components/OrderedList.svx
+++ b/docs/src/pages/components/OrderedList.svx
@@ -3,21 +3,11 @@ components: ["OrderedList", "ListItem"]
---
-`OrderedList` provides a structured way to display numbered lists of items. It supports nested lists, native browser styles, and expressive typography for enhanced visual hierarchy.
-
-
-
-
+[![Build][build]][build-badge]
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.
@@ -13,119 +11,62 @@ Design systems facilitate design and development through reuse, consistency, and
The Carbon Svelte portfolio also includes:
-- **[Carbon Icons Svelte](https://github.com/carbon-design-system/carbon-icons-svelte)**: 2,500+ Carbon icons as Svelte components
-- **[Carbon Pictograms Svelte](https://github.com/carbon-design-system/carbon-pictograms-svelte)**: 1,300+ Carbon pictograms as Svelte components
-- **[Carbon Charts Svelte](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte)**: 25+ charts, powered by d3
-- **[Carbon Preprocess Svelte](https://github.com/carbon-design-system/carbon-preprocess-svelte)**: Collection of Svelte preprocessors for Carbon
+- **[Carbon Icons Svelte](https://github.com/IBM/carbon-icons-svelte)**: 6000+ Carbon icons as Svelte components
+- **[Carbon Pictograms Svelte](https://github.com/IBM/carbon-pictograms-svelte)**: 700+ Carbon pictograms as Svelte components
+- **[Carbon Charts Svelte](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte)**: 16 chart types, powered by d3
-## [Documentation](https://svelte.carbondesignsystem.com)
+## [Documentation](http://ibm.biz/carbon-svelte)
+
+
+
+The [documentation website](http://ibm.biz/carbon-svelte) contains live demos and examples.
Other forms of documentation are auto-generated:
- **[TypeScript definitions](types)**: Component TypeScript definitions
-- **[Component Index](COMPONENT_INDEX.md)**: Component API in Markdown format
-- **[Component API](docs/src/COMPONENT_API.json)**: Component API in JSON format
+- **[Component Index](COMPONENT_INDEX.md)**: Markdown file documenting component props, slots, and events
+- **[Component API](docs/src/COMPONENT_API.json)**: Component API metadata in JSON format
-## Installation
+## Getting started
+
+Install `carbon-components-svelte` as a development dependency.
```sh
-# npm
-npm i carbon-components-svelte
-
-# pnpm
-pnpm i carbon-components-svelte
-
-# Yarn
-yarn add carbon-components-svelte
-
-# Bun
-bun add carbon-components-svelte
+yarn add -D carbon-components-svelte
+# OR
+npm i -D carbon-components-svelte
```
## Usage
-### Styling
+The quickest way to get started is to customize a template from the [examples](examples/) folder.
-Before importing components, you will need to first apply Carbon component styles. The Carbon Design System supports five themes (2 light, 3 dark).
+Example set-ups demonstrate usage with popular application bundlers and frameworks. They include a mix of client-side rendering (CSR) and server-side rendering (SSR) approaches.
-- **white.css**: Default Carbon theme (light)
-- **g10.css**: Gray 10 theme (light)
-- **g80.css**: Gray 80 theme (dark)
-- **g90.css**: Gray 90 theme (dark)
-- **g100.css**: Gray 100 theme (dark)
-- **all.css**: All themes (White, Gray 10, Gray 90, Gray 100) using [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
+- **[examples/rollup](examples/rollup/)**: SPA bundled using [Rollup](https://github.com/rollup/rollup)
+- **[examples/rollup-typescript](examples/rollup-typescript/)**: SPA bundled using [Rollup](https://github.com/rollup/rollup) with TypeScript support
+- **[examples/routify](examples/routify/)**: SPA + static export using [Routify](https://github.com/roxiness/routify)
+- **[examples/sapper](examples/sapper/)**: SSR + static export using [Sapper](https://github.com/sveltejs/sapper)
+- **[examples/svite](examples/svite/)**: SPA developed with Svite, bundled with [Rollup](https://github.com/rollup/rollup)
+- **[examples/webpack](examples/webpack/)**: SPA bundled with [webpack](https://github.com/webpack/webpack)
-Each StyleSheet is [generated](scripts/build-css.js) from the flagship [carbon-components](https://github.com/carbon-design-system/carbon/tree/main/packages/carbon-components) library.
+### Scaffolding
-The compiled CSS is generated from the following `.scss` files:
+Each example is published in a dedicated branch of the same name.
-- [css/white.scss](css/white.scss)
-- [css/g10.scss](css/g10.scss)
-- [css/g80.scss](css/g80.scss)
-- [css/g90.scss](css/g90.scss)
-- [css/g100.scss](css/g100.scss)
-- [css/all.scss](css/all.scss)
+Use [degit](https://github.com/Rich-Harris/degit) to scaffold a new project:
-#### CSS StyleSheet
+For example, to use the `svite` template, run the following commands:
-```js
-// White theme
-import "carbon-components-svelte/css/white.css";
-
-// Gray 10 theme
-import "carbon-components-svelte/css/g10.css";
-
-// Gray 80 theme
-import "carbon-components-svelte/css/g80.css";
-
-// Gray 90 theme
-import "carbon-components-svelte/css/g90.css";
-
-// Gray 100 theme
-import "carbon-components-svelte/css/g100.css";
-
-// All themes
-import "carbon-components-svelte/css/all.css";
-```
-
-### SCSS
-
-The most performant method to load styles is to import SCSS directly from carbon-components. Although it requires more set up, you can reduce the size of the bundle CSS by importing individual component styles instead of a pre-compiled CSS StyleSheet.
-
-Refer to the [official Carbon guide on SASS](https://github.com/carbon-design-system/carbon/blob/v10/docs/guides/sass.md) for documentation.
-
-### Dynamic theming
-
-Use the "all.css" StyleSheet for dynamic, client-side theming.
-
-```js
-import "carbon-components-svelte/css/all.css";
-```
-
-Update the theme by setting the `theme` attribute on the `html` element. The default `theme` is `"white"`.
-
-```html
-
-
-
- ...
-
-
-```
-
-Programmatically switch between each of the five Carbon themes by setting the "theme" attribute on the HTML element.
-
-```html
-
+```sh
+npx degit ibm/carbon-components-svelte#svite svelte-app
+cd svelte-app
+yarn install
```
### Importing components
-Import components from `carbon-components-svelte` in the `script` tag of your Svelte file. Visit the [documentation site](https://svelte.carbondesignsystem.com) for examples.
+Import components from `carbon-components-svelte` in the `script` tag of your Svelte file.
```html
@@ -142,126 +83,163 @@ Import components from `carbon-components-svelte` in the `script` tag of your Sv
**Refer to [COMPONENT_INDEX.md](COMPONENT_INDEX.md) for component API documentation.**
-## Preprocessors & Plugins
+### Pre-compiled CSS StyleSheets
-[carbon-preprocess-svelte](https://github.com/carbon-design-system/carbon-preprocess-svelte) is a collection of Svelte preprocessors for Carbon.
+`carbon-components-svelte` includes pre-compiled CSS StyleSheets for each Carbon theme:
-> [!NOTE]
-> Using `carbon-preprocess-svelte` is optional and not a prerequisite for this library. It should be installed as a development dependency.
+- **white.css**: Default Carbon theme (light)
+- **g10.css**: Gray 10 theme (light)
+- **g90.css**: Gray 90 theme (dark)
+- **g100.css**: Gray 100 theme (dark)
+- **all.css**: All themes (White, Gray 10, Gray 90, Gray 100) using [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
-```sh
-# npm
-npm i -D carbon-preprocess-svelte
+Each StyleSheet is [generated](scripts/build-css.js) from the flagship [carbon-components](https://github.com/carbon-design-system/carbon/tree/master/packages/components) library.
-# pnpm
-pnpm i -D carbon-preprocess-svelte
+The compiled CSS is generated from the following `.scss` files:
-# Yarn
-yarn add -D carbon-preprocess-svelte
-
-# Bun
-bun add -D carbon-preprocess-svelte
-```
-
-### `optimizeImports`
-
-`optimizeImports` is a Svelte preprocessor that rewrites barrel imports from Carbon components/icons/pictograms packages to their source Svelte code paths. This can significantly speed up development and production build compile times while preserving typeahead and autocompletion offered by integrated development environments (IDE) like VS Code.
-
-The preprocessor optimizes imports from the following packages:
-
-- [carbon-components-svelte](https://github.com/carbon-design-system/carbon-components-svelte)
-- [carbon-icons-svelte](https://github.com/carbon-design-system/carbon-icons-svelte)
-- [carbon-pictograms-svelte](https://github.com/carbon-design-system/carbon-pictograms-svelte)
-
-**Before & After**
-
-```diff
-- import { Button } from "carbon-components-svelte";
-+ import Button from "carbon-components-svelte/src/Button/Button.svelte";
-
-- import { Add } from "carbon-icons-svelte";
-+ import Add from "carbon-icons-svelte/lib/Add.svelte";
-
-- import { Airplane } from "carbon-pictograms-svelte";
-+ import Airplane from "carbon-pictograms-svelte/lib/Airplane.svelte";
-```
+- [css/white.scss](css/white.scss)
+- [css/g10.scss](css/g10.scss)
+- [css/g90.scss](css/g90.scss)
+- [css/g100.scss](css/g100.scss)
+- [css/all.scss](css/all.scss)
#### Usage
-See [examples](examples) for full configurations.
+##### `svelte-preprocess`
+
+The easiest way to import a StyleSheet is with [svelte-preprocess](https://github.com/sveltejs/svelte-preprocess).
```js
-// svelte.config.js
-import { optimizeImports } from "carbon-preprocess-svelte";
-
-export default {
- preprocess: [optimizeImports()],
+const svelteOptions = {
+ preprocess: require("svelte-preprocess")(),
};
```
-Any other preprocessors that transpile code in the `script` block should be invoked before `optimizeImports`.
+```html
+
+
+```
-For example, `vitePreprocess` should precede `optimizeImports`.
+##### JavaScript import
-```diff
+Importing a CSS file in a JavaScript file will require the appropriate file loader(s).
+
+```js
+import "carbon-components-svelte/css/all.css";
+import App from "./App.svelte";
+
+const app = new App({ target: document.body });
+
+export default app;
+```
+
+See [webpack.config.js](examples/webpack/webpack.config.js) in [examples/webpack](examples/webpack).
+
+#### Dynamic theming
+
+Use `carbon-components-svelte/css/all.css` for dynamic, client-side styling.
+
+Update the theme by setting the `theme` attribute on the `html` element. The default `theme` is `"white"`.
+
+```html
+
+
+
+ ...
+
+
+```
+
+Using JavaScript:
+
+```svelte
+
+
+
+```
+
+## Preprocessors
+
+### optimizeCarbonImports
+
+`optimizeCarbonImports` is a Svelte preprocessor that optimizes base imports inside the `script` block of a Svelte file from the following libraries:
+
+- carbon-components-svelte
+- carbon-icons-svelte
+- carbon-pictograms-svelte
+
+The preprocessor rewrites base imports to directly import the source Svelte file. This may lead to faster complile times **during development**.
+
+Example:
+
+**Before**
+
+```js
+import { Button, Header } from "carbon-components-svelte";
+import { Notification20 } from "carbon-icons-svelte";
+import { Airplane } from "carbon-pictograms-svelte";
+```
+
+**After**
+
+```js
+import Button from "carbon-components-svelte/Button/Button.svelte";
+import Header from "carbon-components-svelte/UIShell/GlobalHeader/Header.svelte";
+import Notification20 from "carbon-icons-svelte/lib/Notification20/Notification20.svelte";
+import Airplane from "carbon-pictograms-svelte/lib/Airplane/Airplane.svelte";
+```
+
+#### svelte.config.js
+
+```js
// svelte.config.js
-+ import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
-import { optimizeImports } from "carbon-preprocess-svelte";
+const {
+ optimizeCarbonImports,
+} = require("carbon-components-svelte/preprocess");
-export default {
- preprocess: [
-+ vitePreprocess(),
- optimizeImports()
- ],
+module.exports = {
+ preprocess: [optimizeCarbonImports()],
};
```
-### `optimizeCss`
-
-`optimizeCss` is a Vite plugin that removes unused Carbon styles at build time. The plugin is compatible with Rollup ([Vite](https://vitejs.dev/guide/api-plugin) extends the Rollup plugin API).
-
-`carbon-components-svelte@0.85.0` or greater is required.
-
-```diff
-$ vite build
-
-Optimized index-CU4gbKFa.css
-- Before: 606.26 kB
-+ After: 53.22 kB (-91.22%)
-
-dist/index.html 0.34 kB │ gzip: 0.24 kB
-dist/assets/index-CU4gbKFa.css 53.22 kB │ gzip: 6.91 kB
-dist/assets/index-Ceijs3eO.js 53.65 kB │ gzip: 15.88 kB
-```
-
-> [!NOTE]
-> This is a plugin and not a Svelte preprocessor. It should be added to the list of `vite.plugins`. For Vite set-ups, this plugin is only run when building the app. For Rollup and Webpack, you should conditionally apply the plugin to only execute when building for production.
-
-#### Usage
-
-See [examples](examples) for full configurations.
+#### svelte-loader
```js
-// vite.config.js
-import { sveltekit } from "@sveltejs/kit/vite";
-import { optimizeCss } from "carbon-preprocess-svelte";
-import { defineConfig } from "vite";
+// webpack.config.js
+const {
+ optimizeCarbonImports,
+} = require("carbon-components-svelte/preprocess");
-export default defineConfig({
- plugins: [sveltekit(), optimizeCss()],
-});
+module.exports = {
+ // ...
+ module: {
+ rules: [
+ {
+ test: /\.svelte$/,
+ use: {
+ loader: "svelte-loader",
+ options: {
+ hotReload: true,
+ preprocess: [optimizeCarbonImports()],
+ },
+ },
+ },
+ ],
+ },
+};
```
-## Examples
-
-- [examples/rollup](examples/rollup/)
-- [examples/sveltekit](examples/sveltekit/)
-- [examples/vite](examples/vite/)
-- [examples/webpack](examples/webpack/)
-
## TypeScript support
-[TypeScript definitions](types) are generated by [sveld](https://github.com/carbon-design-system/sveld).
+[TypeScript definitions](types) are generated by [sveld](https://github.com/IBM/sveld).
## Contributing
@@ -275,11 +253,5 @@ Refer to the [Contributing guidelines](CONTRIBUTING.md).
[npm]: https://img.shields.io/npm/v/carbon-components-svelte.svg?color=262626&style=for-the-badge
[npm-url]: https://npmjs.com/package/carbon-components-svelte
-
-## 