2025-09-17 19:21:26 +00:00
951 changed files with 24626 additions and 51263 deletions
--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@ -1 +0,0 @@
-github: metonym
--- a/.github/ISSUE_TEMPLATE/config.yml
+++ b/.github/ISSUE_TEMPLATE/config.yml
@ -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.
--- a/.github/workflows/checks.yml
+++ b/.github/workflows/checks.yml
@ -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"
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@ -0,0 +1,24 @@
+name: CI
+
+on:
+  pull_request:
+  push:
+    branches: [master]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+
+      - uses: actions/cache@v2
+        id: yarn-cache
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+
+      - name: Install dependencies and build the library
+        run: |
+          yarn
+          yarn build:lib
+          yarn test:types
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@ -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
--- a/.gitignore
+++ b/.gitignore
@ -1,3 +1,4 @@
+lib
 node_modules
 .DS_Store
 .vscode
--- a/.husky/.gitignore
+++ b/.husky/.gitignore
@ -0,0 +1 @@
+_
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged
--- a/.prettierignore
+++ b/.prettierignore
@ -1,9 +1,9 @@
+/lib
 /css
-/types
+__sapper__
 .svelte-kit
 .routify
 dist
 client
 build
-*.svx
-COMPONENT_API.json
+*.svx
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,713 +1,11 @@
 # 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`
+<!-- ## Unreleased -->

 ## [0.67.2](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.67.2) - 2022-07-23

@ -1519,7 +817,7 @@ Svelte version >=3.48.0 is required.

 **Features**

- add `nonExpandableRowIds` prop to `DataTable` to specify rows that should not be expandable
+- add `nonExpandableRowsIds` 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

@ -1940,9 +1238,9 @@ Svelte version >=3.48.0 is required.

 **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)
+- add DataTable example ["Sortable with nested object values"](https://carbon-components-svelte.onrender.com/components/DataTable#sortable-with-nested-object-values)
+- add ClickableTile example ["Disabled state"](https://carbon-components-svelte.onrender.com/components/ClickableTile#disabled-state)
+- add Link example ["Link with icon"](https://carbon-components-svelte.onrender.com/components/Link#link-with-icon)

 **Housekeeping**

@ -2288,9 +1586,9 @@ Svelte version >=3.48.0 is required.

 **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-components-svelte.onrender.com/components/Grid#padded-columns) example to Grid docs
+- demo different transitions in ["Header with app switcher"](https://carbon-components-svelte.onrender.com/components/UIShell#header-with-app-switcher) example in UI Shell
+- describe use case for [using native styles in OrderedList](https://carbon-components-svelte.onrender.com/components/OrderedList#native-list-styles)

 **Housekeeping**

@ -2316,8 +1614,8 @@ Svelte version >=3.48.0 is required.

 **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-components-svelte.onrender.com/components/DataTable#skeleton-with-object-headers) to the DataTable docs
+- Add example ["Header with global search"](https://carbon-components-svelte.onrender.com/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
@ -2336,17 +1634,17 @@ Svelte version >=3.48.0 is required.

 **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-components-svelte.onrender.com/components/RadioButton#programmatic-usage)
+- Add [multiple ComboBox example](https://carbon-components-svelte.onrender.com/components/ComboBox#multiple-combo-boxes)
+- Add [multiple Dropdown example](https://carbon-components-svelte.onrender.com/components/Dropdown#multiple-dropdowns)
+- Add [multiple MultiSelect example](https://carbon-components-svelte.onrender.com/components/MultiSelect#multiple-multi-select-dropdowns)
+- Add [ExpandableAccordion recipe](https://carbon-components-svelte.onrender.com/recipes/ExpandableAccordion#expandable-accordion)

 ## [0.23.0](https://github.com/carbon-design-system/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))
+- 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://carbon-components-svelte.onrender.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))

@ -2364,9 +1662,9 @@ Svelte version >=3.48.0 is required.
 - Update auto-generated Component API documentation with output from [sveld](https://github.com/carbon-design-system/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
+- Simplify date sort method in ["Sortable with custom display and sort methods"](https://carbon-components-svelte.onrender.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://carbon-components-svelte.onrender.com/components/ProgressIndicator#programmatic-usage) example
+- Add [vertical ProgressIndicatorSkeleton](https://carbon-components-svelte.onrender.com/components/ProgressIndicator#skeleton-vertical) example
 - Add deprecation warning to the ToggleSmall component

 **Housekeeping**
@ -2424,7 +1722,7 @@ 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-components-svelte.onrender.com/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`

@ -2450,13 +1748,13 @@ 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-components-svelte.onrender.com/components/DataTable#with-custom-display-and-sort-methods)
+  - [With toolbar](https://carbon-components-svelte.onrender.com/components/DataTable#with-toolbar)
+  - [With toolbar (small size)](https://carbon-components-svelte.onrender.com/components/DataTable#with-toolbar-small-size)
+  - [Selectable](https://carbon-components-svelte.onrender.com/components/DataTable#selectable)
+  - [Initial selected rows](https://carbon-components-svelte.onrender.com/components/DataTable#initial-selected-rows)
+  - [Selectable with batch actions](https://carbon-components-svelte.onrender.com/components/DataTable#selectable-with-batch-actions)
+  - [Selectable (radio)](https://carbon-components-svelte.onrender.com/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
@ -2588,7 +1886,7 @@ Svelte version >=3.48.0 is required.

 **Documentation**

- Redesign component [documentation website](https://svelte.carbondesignsystem.com/)
+- Redesign component [documentation website](https://carbon-components-svelte.onrender.com/)
 - 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))

--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -4,8 +4,8 @@ Before submitting a pull request (PR), consider [filing an issue](https://github

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

@ -114,12 +121,13 @@ export {
 } from "./ComposedModal";
 ```

-### Run `npm run build:docs`
+### Run `yarn build:docs`

 Run the following command to re-generate TypeScript definitions and documentation.

 ```sh
-npm run build:docs
+# carbon-components-svelte/
+yarn build:docs
 ```

 ## Submit a Pull Request
@ -137,51 +145,3 @@ git merge upstream/master
 ### Submit a PR

 After you've pushed your changes to remote, submit your PR. Make sure you are comparing `<YOUR_USER_ID>/feature` to `origin/master`.
-
-## Maintainer guide
-
-The following items only apply to project maintainers.
-
-### Release
-
-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).
-```
--- a/README.md
+++ b/README.md
@ -1,11 +1,8 @@
 # carbon-components-svelte

 [![NPM][npm]][npm-url]
-![GitHub](https://img.shields.io/github/license/carbon-design-system/carbon-components-svelte?color=262626&style=for-the-badge)
+![GitHub](https://img.shields.io/github/license/ibm/carbon-components-svelte?color=262626&style=for-the-badge)
 ![npm downloads to date](https://img.shields.io/npm/dt/carbon-components-svelte?color=262626&style=for-the-badge)
-<a href="https://discord.gg/J7JEUEkTRX">
-<img src="https://img.shields.io/discord/689212587170201628?color=5865F2&style=for-the-badge" alt="Chat with us on Discord">
-</a>

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

@ -13,12 +10,16 @@ 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 Icons Svelte](https://github.com/carbon-design-system/carbon-icons-svelte)**: 1900+ Carbon icons as Svelte components
+- **[Carbon Pictograms Svelte](https://github.com/carbon-design-system/carbon-pictograms-svelte)**: 700+ Carbon pictograms as Svelte components
+- **[Carbon Charts Svelte](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte)**: 20+ charts, powered by d3
 - **[Carbon Preprocess Svelte](https://github.com/carbon-design-system/carbon-preprocess-svelte)**: Collection of Svelte preprocessors for Carbon

-## [Documentation](https://svelte.carbondesignsystem.com)
+## [Documentation](https://carbon-components-svelte.onrender.com)
+
+The documentation site is deployed to [Render](https://render.com) as a Static Site. See [render.yaml](render.yaml) for details.
+
+[![Deploy to Render](https://render.com/images/deploy-to-render-button.svg)](https://render.com/deploy?repo=https://github.com/carbon-design-system/carbon-components-svelte)

 Other forms of documentation are auto-generated:

@ -28,18 +29,19 @@ Other forms of documentation are auto-generated:

 ## Installation

+Install `carbon-components-svelte` as a development dependency.
+
+A minimum Svelte version of 3.48.0 is required to use this library.
+
 ```sh
+# Yarn
+yarn add -D carbon-components-svelte
+
 # npm
-npm i carbon-components-svelte
+npm i -D carbon-components-svelte

 # pnpm
-pnpm i carbon-components-svelte
-
-# Yarn
-yarn add carbon-components-svelte
-
-# Bun
-bun add carbon-components-svelte
+pnpm i -D carbon-components-svelte
 ```

 ## Usage
@ -55,7 +57,7 @@ Before importing components, you will need to first apply Carbon component style
 - **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)

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

 The compiled CSS is generated from the following `.scss` files:

@ -88,11 +90,42 @@ import "carbon-components-svelte/css/g100.css";
 import "carbon-components-svelte/css/all.css";
 ```

+#### CDN
+
+An alternative to loading styles is to link an external StyleSheet from a Content Delivery Network (CDN) like [unpkg.com](https://unpkg.com/).
+
+This is best suited for rapid prototyping.
+
+##### HTML
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/carbon-components-svelte/css/white.css"
+    />
+  </head>
+</html>
+```
+
+##### `svelte:head`
+
+```html
+<svelte:head>
+  <link
+    rel="stylesheet"
+    href="https://unpkg.com/carbon-components-svelte/css/white.css"
+  />
+</svelte:head>
+```
+
 ### 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.
+Refer to the [official Carbon guide on SASS](https://github.com/carbon-design-system/carbon/blob/main/docs/guides/sass.md) for documentation.

 ### Dynamic theming

@ -105,7 +138,7 @@ 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
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en" theme="g10">
  <body>
    ...
@ -125,7 +158,7 @@ Programmatically switch between each of the five Carbon themes by setting the "t

 ### 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. Visit the [documentation site](https://carbon-components-svelte.onrender.com) for examples.

 ```html
 <!-- App.svelte -->
@ -142,30 +175,24 @@ 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
+## Preprocessors

 [carbon-preprocess-svelte](https://github.com/carbon-design-system/carbon-preprocess-svelte) is a collection of Svelte preprocessors for Carbon.

-> [!NOTE]
-> Using `carbon-preprocess-svelte` is optional and not a prerequisite for this library. It should be installed as a development dependency.
-
 ```sh
+# Yarn
+yarn add -D carbon-preprocess-svelte
+
 # npm
 npm i -D carbon-preprocess-svelte

 # pnpm
 pnpm i -D carbon-preprocess-svelte
-
-# 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.
+`optimizeImports` is a script preprocessor that rewrites base imports from Carbon components/icons/pictograms packages to their source Svelte code paths. This can greatly speed up compile times during development while preserving typeahead and autocompletion hinting offered by integrated development environments (IDE) like VSCode.

 The preprocessor optimizes imports from the following packages:

@ -173,23 +200,19 @@ The preprocessor optimizes imports from the following packages:
 - [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**
+**Example**

 ```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 { Add16 } from "carbon-icons-svelte";
 - import { Airplane } from "carbon-pictograms-svelte";
+ import Button from "carbon-components-svelte/src/Button/Button.svelte";
+ import Add16 from "carbon-icons-svelte/lib/Add16.svelte";
 + import Airplane from "carbon-pictograms-svelte/lib/Airplane.svelte";
 ```

 #### Usage

-See [examples](examples) for full configurations.
-
 ```js
 // svelte.config.js
 import { optimizeImports } from "carbon-preprocess-svelte";
@ -199,62 +222,11 @@ export default {
 };
 ```

-Any other preprocessors that transpile code in the `script` block should be invoked before `optimizeImports`.
-
-For example, `vitePreprocess` should precede `optimizeImports`.
-
-```diff
-// svelte.config.js
-+ import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
-import { optimizeImports } from "carbon-preprocess-svelte";
-
-export default {
-  preprocess: [
-+   vitePreprocess(),
-    optimizeImports()
-  ],
-};
-```
-
-### `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.
-
-```js
-// vite.config.js
-import { sveltekit } from "@sveltejs/kit/vite";
-import { optimizeCss } from "carbon-preprocess-svelte";
-import { defineConfig } from "vite";
-
-export default defineConfig({
-  plugins: [sveltekit(), optimizeCss()],
-});
-```
-
 ## Examples

 - [examples/rollup](examples/rollup/)
+- [examples/sapper](examples/sapper/)
+- [examples/snowpack](examples/snowpack/)
 - [examples/sveltekit](examples/sveltekit/)
 - [examples/vite](examples/vite/)
 - [examples/webpack](examples/webpack/)
@ -275,11 +247,3 @@ 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
-
-## <picture><source height="20" width="20" media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-dark.svg"><source height="20" width="20" media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg"><img height="20" width="20" alt="IBM Telemetry" src="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg"></picture> 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).
--- a/SECURITY.md
+++ b/SECURITY.md
@ -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.
--- a/carbon.yml
+++ b/carbon.yml
@ -2,47 +2,9 @@
 library:
  id: carbon-components-svelte
  name: Carbon Svelte
-  description: Build user interfaces with Carbon's core components.
-  externalDocsUrl: https://svelte.carbondesignsystem.com
+  description: Svelte implementation of Carbon Components.
+  externalDocsUrl: https://carbon-components-svelte.onrender.com
  inherits: carbon-styles
-  navData:
-  - title: Get started
-    path: "https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/developing/frameworks/svelte.mdx"
-  designKits:
-    carbon-white-sketch:
-      $ref: https://unpkg.com/@carbon-platform/resources/carbon.yml#/designKits/carbon-white-sketch
-    carbon-g10-sketch:
-      $ref: https://unpkg.com/@carbon-platform/resources/carbon.yml#/designKits/carbon-g10-sketch
-    carbon-g90-sketch:
-      $ref: https://unpkg.com/@carbon-platform/resources/carbon.yml#/designKits/carbon-g90-sketch
-    carbon-g100-sketch:
-      $ref: https://unpkg.com/@carbon-platform/resources/carbon.yml#/designKits/carbon-g100-sketch
-    carbon-shell-sketch:
-      $ref: https://unpkg.com/@carbon-platform/resources/carbon.yml#/designKits/carbon-shell-sketch
-    carbon-white-adobe-xd:
-      $ref: https://unpkg.com/@carbon-platform/resources/carbon.yml#/designKits/carbon-white-adobe-xd
-    carbon-g10-adobe-xd:
-      $ref: https://unpkg.com/@carbon-platform/resources/carbon.yml#/designKits/carbon-g10-adobe-xd
-    carbon-g90-adobe-xd:
-      $ref: https://unpkg.com/@carbon-platform/resources/carbon.yml#/designKits/carbon-g90-adobe-xd
-    carbon-g100-adobe-xd:
-      $ref: https://unpkg.com/@carbon-platform/resources/carbon.yml#/designKits/carbon-g100-adobe-xd
-    axure-widget-library:
-      $ref: https://unpkg.com/@carbon-platform/resources/carbon.yml#/designKits/axure-widget-library
-    text-toolbar-sketch:
-      $ref: https://unpkg.com/@carbon-platform/resources/carbon.yml#/designKits/text-toolbar-sketch
-    carbon-mid-fi-sketch:
-      $ref: https://unpkg.com/@carbon-platform/resources/carbon.yml#/designKits/carbon-mid-fi-sketch
-    carbon-wireframe-invision-freehand:
-      $ref: https://unpkg.com/@carbon-platform/resources/carbon.yml#/designKits/carbon-wireframe-invision-freehand
-    carbon-white-figma:
-      $ref: https://unpkg.com/@carbon-platform/resources/carbon.yml#/designKits/carbon-white-figma
-    carbon-g10-figma:
-      $ref: https://unpkg.com/@carbon-platform/resources/carbon.yml#/designKits/carbon-g10-figma
-    carbon-g90-figma:
-      $ref: https://unpkg.com/@carbon-platform/resources/carbon.yml#/designKits/carbon-g90-figma
-    carbon-g100-figma:
-      $ref: https://unpkg.com/@carbon-platform/resources/carbon.yml#/designKits/carbon-g100-figma
 assets:
  accordion:
    status: stable
@ -52,7 +14,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/Accordion
+        url: https://carbon-components-svelte.onrender.com/components/Accordion
  aspect-ratio:
    status: stable
    framework: svelte
@ -60,7 +22,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/AspectRatio
+        url: https://carbon-components-svelte.onrender.com/components/AspectRatio
  breadcrumb:
    status: stable
    externalDocsUrl: https://www.carbondesignsystem.com/components/breadcrumb/usage
@ -69,7 +31,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/Breadcrumb
+        url: https://carbon-components-svelte.onrender.com/components/Breadcrumb
  breakpoint:
    name: Breakpoint
    status: stable
@ -81,7 +43,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/Breakpoint
+        url: https://carbon-components-svelte.onrender.com/components/Breakpoint
    tags:
      - shell
  button:
@ -92,7 +54,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/Button
+        url: https://carbon-components-svelte.onrender.com/components/Button
  button-set:
    name: Button set
    description: Buttons in a button set are juxtaposed by default.
@ -105,7 +67,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/ButtonSet
+        url: https://carbon-components-svelte.onrender.com/components/ButtonSet
    tags:
      - input-control
  checkbox:
@ -116,7 +78,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/Checkbox
+        url: https://carbon-components-svelte.onrender.com/components/Checkbox
  clickable-tile:
    name: Clickable tile
    status: stable
@ -128,7 +90,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/ClickableTile
+        url: https://carbon-components-svelte.onrender.com/components/ClickableTile
    tags:
      - contextual-navigation
  code-snippet:
@ -139,7 +101,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/CodeSnippet
+        url: https://carbon-components-svelte.onrender.com/components/CodeSnippet
  combo-box:
    status: stable
    framework: svelte
@ -147,7 +109,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/ComboBox
+        url: https://carbon-components-svelte.onrender.com/components/ComboBox
  composed-modal:
    name: Composed modal
    status: stable
@ -159,7 +121,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/ComposedModal
+        url: https://carbon-components-svelte.onrender.com/components/ComposedModal
    tags:
      - input-control
  content-switcher:
@ -170,7 +132,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/ContentSwitcher
+        url: https://carbon-components-svelte.onrender.com/components/ContentSwitcher
  context-menu:
    name: Context menu
    status: stable
@ -182,7 +144,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/ContextMenu
+        url: https://carbon-components-svelte.onrender.com/components/ContextMenu
    tags:
      - input-control
      - contextual-navigation
@ -193,7 +155,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/CopyButton
+        url: https://carbon-components-svelte.onrender.com/components/CopyButton
  data-table:
    status: stable
    framework: svelte
@ -202,7 +164,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/DataTable
+        url: https://carbon-components-svelte.onrender.com/components/DataTable
  date-picker:
    status: stable
    framework: svelte
@ -211,15 +173,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/DatePicker
-  definition-tooltip:
-    status: stable
-    framework: svelte
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://svelte.carbondesignsystem.com/components/TooltipDefinition
+        url: https://carbon-components-svelte.onrender.com/components/DatePicker
  dropdown:
    status: stable
    framework: svelte
@ -228,7 +182,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/Dropdown
+        url: https://carbon-components-svelte.onrender.com/components/Dropdown
  expandable-tile:
    name: Expandable tile
    status: stable
@ -240,7 +194,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/ExpandableTile
+        url: https://carbon-components-svelte.onrender.com/components/ExpandableTile
    tags:
      - data-display
      - content-element
@ -252,7 +206,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/FileUploader
+        url: https://carbon-components-svelte.onrender.com/components/FileUploader
  fluid-form:
    name: Fluid form
    status: stable
@ -264,7 +218,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/FluidForm
+        url: https://carbon-components-svelte.onrender.com/components/FluidForm
    tags:
      - form
  form:
@ -275,7 +229,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/Form
+        url: https://carbon-components-svelte.onrender.com/components/Form
  grid:
    status: stable
    framework: svelte
@ -283,7 +237,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/Grid
+        url: https://carbon-components-svelte.onrender.com/components/Grid
  image-loader:
    name: Image loader
    status: stable
@ -295,7 +249,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/ImageLoader
+        url: https://carbon-components-svelte.onrender.com/components/ImageLoader
    tags:
      - shell
      - media
@ -308,19 +262,19 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/InlineLoading
+        url: https://carbon-components-svelte.onrender.com/components/InlineLoading
  inline-notification:
    name: Inline notification
    status: stable
    type: component
    platform: web
    framework: svelte
-    thumbnailPath: './thumbnails/inline-notification.svg'
+    thumbnailPath: './thumbnails/inline-loading.svg'
    demoLinks:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/InlineNotification
+        url: https://carbon-components-svelte.onrender.com/components/InlineNotification
    tags:
      - system-feedback
  link:
@ -331,7 +285,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/Link
+        url: https://carbon-components-svelte.onrender.com/components/Link
  loading:
    status: stable
    framework: svelte
@ -340,7 +294,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/Loading
+        url: https://carbon-components-svelte.onrender.com/components/Loading
  local-storage:
    name: Local storage
    status: stable
@ -352,7 +306,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/LocalStorage
+        url: https://carbon-components-svelte.onrender.com/components/LocalStorage
    tags:
      - input-control
  modal:
@ -363,7 +317,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/Modal
+        url: https://carbon-components-svelte.onrender.com/components/Modal
  multiselect:
    status: stable
    framework: svelte
@ -372,7 +326,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/MultiSelect
+        url: https://carbon-components-svelte.onrender.com/components/MultiSelect
  number-input:
    status: stable
    framework: svelte
@ -381,7 +335,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/NumberInput
+        url: https://carbon-components-svelte.onrender.com/components/NumberInput
  ordered-list:
    name: Ordered list
    status: stable
@ -393,7 +347,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/OrderedList
+        url: https://carbon-components-svelte.onrender.com/components/OrderedList
    tags:
      - data-display
  overflow-menu:
@ -407,7 +361,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/OverflowMenu
+        url: https://carbon-components-svelte.onrender.com/components/OverflowMenu
    tags:
      - input-control
  pagination:
@ -418,7 +372,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/Pagination
+        url: https://carbon-components-svelte.onrender.com/components/Pagination
  pagination-nav:
    status: stable
    framework: svelte
@ -426,7 +380,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/PaginationNav
+        url: https://carbon-components-svelte.onrender.com/components/PaginationNav
  password-input:
    name: Password input
    status: stable
@ -438,7 +392,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/PasswordInput
+        url: https://carbon-components-svelte.onrender.com/components/PasswordInput
    tags:
      - form
      - contextual-navigation
@ -449,7 +403,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/Popover
+        url: https://carbon-components-svelte.onrender.com/components/Popover
  progress-bar:
    status: stable
    framework: svelte
@ -458,7 +412,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/ProgressBar
+        url: https://carbon-components-svelte.onrender.com/components/ProgressBar
  progress-indicator:
    status: stable
    framework: svelte
@ -467,7 +421,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/ProgressIndicator
+        url: https://carbon-components-svelte.onrender.com/components/ProgressIndicator
  radio-button:
    status: stable
    framework: svelte
@ -476,7 +430,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/RadioButton
+        url: https://carbon-components-svelte.onrender.com/components/RadioButton
  radio-tile:
    name: Radio tile
    status: stable
@ -488,7 +442,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/RadioTile
+        url: https://carbon-components-svelte.onrender.com/components/RadioTile
    tags:
      - input-control
  recursive-list:
@ -502,7 +456,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/RecursiveList
+        url: https://carbon-components-svelte.onrender.com/components/RecursiveList
    tags:
      - data-display
  search:
@ -513,7 +467,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/Search
+        url: https://carbon-components-svelte.onrender.com/components/Search
  select:
    status: stable
    framework: svelte
@ -522,7 +476,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/Select
+        url: https://carbon-components-svelte.onrender.com/components/Select
  selectable-tile:
    name: Selectable tile
    status: stable
@ -534,7 +488,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/SelectableTile
+        url: https://carbon-components-svelte.onrender.com/components/SelectableTile
    tags:
      - input-control
  skeleton-placeholder:
@ -548,7 +502,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/SkeletonPlaceholder
+        url: https://carbon-components-svelte.onrender.com/components/SkeletonPlaceholder
    tags:
      - system-feedback
  skeleton-text:
@ -562,7 +516,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/SkeletonText
+        url: https://carbon-components-svelte.onrender.com/components/SkeletonText
    tags:
      - shell
  slider:
@ -573,7 +527,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/Slider
+        url: https://carbon-components-svelte.onrender.com/components/Slider
  structured-list:
    status: stable
    framework: svelte
@ -582,7 +536,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/StructuredList
+        url: https://carbon-components-svelte.onrender.com/components/StructuredList
  tabs:
    status: stable
    framework: svelte
@ -591,7 +545,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/Tabs
+        url: https://carbon-components-svelte.onrender.com/components/Tabs
  tag:
    status: stable
    framework: svelte
@ -600,7 +554,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/Tag
+        url: https://carbon-components-svelte.onrender.com/components/Tag
  text-area:
    status: stable
    framework: svelte
@ -608,7 +562,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/TextArea
+        url: https://carbon-components-svelte.onrender.com/components/TextArea
  text-input:
    status: stable
    framework: svelte
@ -617,7 +571,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/TextInput
+        url: https://carbon-components-svelte.onrender.com/components/TextInput
  theme:
    status: stable
    framework: svelte
@ -625,7 +579,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/Theme
+        url: https://carbon-components-svelte.onrender.com/components/Theme
  tile:
    status: stable
    framework: svelte
@ -634,7 +588,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/Tile
+        url: https://carbon-components-svelte.onrender.com/components/Tile
  time-picker:
    status: stable
    framework: svelte
@ -642,7 +596,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/TimePicker
+        url: https://carbon-components-svelte.onrender.com/components/TimePicker
  toast-notification:
    name: Toast notification
    status: stable
@ -654,7 +608,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/ToastNotification
+        url: https://carbon-components-svelte.onrender.com/components/ToastNotification
    tags:
      - input-control
  toggle:
@ -665,7 +619,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/Toggle
+        url: https://carbon-components-svelte.onrender.com/components/Toggle
  tooltip:
    status: stable
    framework: svelte
@ -674,7 +628,15 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/Tooltip
+        url: https://carbon-components-svelte.onrender.com/components/Tooltip
+  tooltip-definition:
+    status: stable
+    framework: svelte
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://carbon-components-svelte.onrender.com/components/TooltipDefinition
  tooltip-icon:
    name: Tootlip icon
    status: stable
@ -686,7 +648,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/TooltipIcon
+        url: https://carbon-components-svelte.onrender.com/components/TooltipIcon
    tags:
      - content-element
  tree-view:
@ -696,7 +658,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/TreeView
+        url: https://carbon-components-svelte.onrender.com/components/TreeView
  truncate:
    name: Truncate
    status: stable
@ -708,7 +670,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/Truncate
+        url: https://carbon-components-svelte.onrender.com/components/Truncate
    tags:
      - data-display
  ui-shell-header:
@ -719,7 +681,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/UIShell
+        url: https://carbon-components-svelte.onrender.com/components/UIShell
  unordered-list:
    name: Unordered list
    status: stable
@ -731,7 +693,7 @@ assets:
      - type: storybook
        name: Storybook
        action: link
-        url: https://svelte.carbondesignsystem.com/components/UnorderedList
+        url: https://carbon-components-svelte.onrender.com/components/UnorderedList
    tags:
      - data-display
      
--- a/css/all.css
+++ b/css/all.css
--- a/css/g10.css
+++ b/css/g10.css
--- a/css/g100.css
+++ b/css/g100.css
--- a/css/g80.css
+++ b/css/g80.css
--- a/css/g90.css
+++ b/css/g90.css
--- a/css/white.css
+++ b/css/white.css
--- a/docs/.gitignore
+++ b/docs/.gitignore
@ -1,4 +1,3 @@
 /node_modules
 /dist
 /.routify
-src/SEARCH_INDEX.json
--- a/docs/index.html
+++ b/docs/index.html
@ -3,23 +3,8 @@
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="/favicon.ico" />
-    <link rel="canonical" href="https://svelte.carbondesignsystem.com/" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Svelte implementation of the Carbon Design System" />
    <title>Carbon Components Svelte</title>
-    <script>
-      try {
-        const theme = localStorage.getItem("theme");
-
-        if (["white", "g10", "g80", "g90", "g100"].includes(theme)) {
-          document.documentElement.setAttribute("theme", theme);
-          document.documentElement.style.setProperty(
-            "color-scheme",
-            ["white", "g10"].includes(theme) ? "light" : "dark"
-          );
-        }
-      } catch (e) {}
-    </script>
  </head>
  <body>
    <script type="module" src="/src/index.js"></script>
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
--- a/docs/package.json
+++ b/docs/package.json
@ -1,31 +1,29 @@
 {
  "private": true,
  "scripts": {
-    "dev": "npm run build:index-docs && run-p dev:*",
+    "dev": "run-p dev:*",
    "dev:routify": "cross-env NODE_ENV=development routify run",
    "dev:svite": "vite dev",
    "build": "run-s build:*",
-    "build:index-docs": "node scripts/index-docs.js",
    "build:routify": "routify run -b",
    "build:svite": "vite build"
  },
  "devDependencies": {
    "@sveltech/routify": "^1.9.10",
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
-    "carbon-components-svelte": "file:..",
-    "carbon-icons-svelte": "^13.3.0",
+    "@sveltejs/vite-plugin-svelte": "^1.0.0-next.49",
+    "carbon-components-svelte": "../",
+    "carbon-icons-svelte": "^11.1.0",
    "clipboard-copy": "^4.0.1",
    "cross-env": "^7.0.3",
-    "mdsvex": "^0.12.3",
-    "minisearch": "^7.1.0",
+    "mdsvex": "^0.10.6",
    "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.8",
-    "prettier-plugin-svelte": "^2.10.1",
-    "prism-svelte": "^0.5.0",
-    "prismjs": "^1.30.0",
-    "remark-slug": "^6.1.0",
-    "svelte": "^4.2.19",
-    "vite": "^5.4.20"
+    "prettier": "^2.7.1",
+    "prettier-plugin-svelte": "^2.7.0",
+    "prism-svelte": "^0.4.7",
+    "prismjs": "^1.28.0",
+    "remark-slug": "^6.0.0",
+    "svelte": "^3.48.0",
+    "vite": "^2.9.12"
  },
  "routify": {
    "routifyDir": ".routify",
@ -34,6 +32,5 @@
      "svelte",
      "svx"
    ]
-  },
-  "type": "module"
+  }
 }
--- a/docs/scripts/index-docs.js
+++ b/docs/scripts/index-docs.js
@ -1,45 +0,0 @@
-// @ts-check
-import fs from "node:fs";
-import path from "node:path";
-import githubSlugger from "github-slugger";
-
-const { slug } = githubSlugger;
-
-const COMPONENTS_PATH = "./src/pages/components";
-const SEARCH_INDEX_PATH = "./src/SEARCH_INDEX.json";
-const H2_DELMIMITER = "## ";
-
-const files = fs.readdirSync(COMPONENTS_PATH);
-
-/**
- * @typedef {Object} Document
- * @property {string} id
- * @property {string} text
- * @property {string} description
- * @property {string} href
- */
-
-/** @type {Document[]} */
-const documents = [];
-
-for (const file of files) {
-  const [component_name] = file.split(".");
-  const file_path = path.join(COMPONENTS_PATH, file);
-  const file_content = fs.readFileSync(file_path, "utf8");
-
-  file_content.split("\n").forEach((line) => {
-    if (line.startsWith(H2_DELMIMITER)) {
-      const [, h2] = line.split(H2_DELMIMITER);
-      const hash = slug(h2);
-
-      documents.push({
-        id: component_name + hash,
-        text: component_name,
-        description: h2,
-        href: `/components/${component_name}#${hash}`,
-      });
-    }
-  });
-}
-
-fs.writeFileSync(SEARCH_INDEX_PATH, JSON.stringify(documents, null, 2));
--- a/docs/src/App.svelte
+++ b/docs/src/App.svelte
@ -3,4 +3,4 @@
  import { routes } from "../.routify/routes";
 </script>

-<Router {routes} />
+<Router routes="{routes}" />
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
--- a/docs/src/components/ComponentApi.svelte
+++ b/docs/src/components/ComponentApi.svelte
@ -7,7 +7,6 @@
    typedefs: [],
  };

-  import { onMount } from "svelte";
  import {
    OutboundLink,
    StructuredList,
@ -18,16 +17,10 @@
    UnorderedList,
    ListItem,
    Tag,
+    CodeSnippet,
  } from "carbon-components-svelte";
  import InlineSnippet from "./InlineSnippet.svelte";

-  let AsyncPreviewTypeScript;
-
-  onMount(async () => {
-    AsyncPreviewTypeScript = (await import("./PreviewTypeScript.svelte"))
-      .default;
-  });
-
  const mdn_api = "https://developer.mozilla.org/en-US/docs/Web/API/";
  const typeMap = {
    string: "string",
@ -39,21 +32,21 @@

  $: source = `https://github.com/carbon-design-system/carbon-components-svelte/tree/master/${component.filePath}`;
  $: forwarded_events = component.events.filter(
-    (event) => event.type === "forwarded",
+    (event) => event.type === "forwarded"
  );
  $: dispatched_events = component.events.filter(
-    (event) => event.type === "dispatched",
+    (event) => event.type === "dispatched"
  );
 </script>

 <p style="margin-bottom: var(--cds-layout-02)">
  Source code:
-  <OutboundLink size="lg" inline href={source}>
+  <OutboundLink size="lg" inline href="{source}">
    {component.filePath}
  </OutboundLink>
 </p>

-<h2 id="props">Props</h2>
+<h3 id="props">Props</h3>

 {#if component.props.length > 0}
  <div class="overflow">
@ -62,26 +55,17 @@
        <StructuredListRow head>
          <StructuredListCell head>Prop name</StructuredListCell>
          <StructuredListCell head>Type</StructuredListCell>
+          <StructuredListCell head noWrap>Default value</StructuredListCell>
          <StructuredListCell head>Description</StructuredListCell>
        </StructuredListRow>
      </StructuredListHead>
      <StructuredListBody>
        {#each component.props.sort((a, b) => {
-          // Sort props so required props are listed first, then reactive props.
-
-          if (a.isRequired !== b.isRequired) {
-            return b.isRequired ? 1 : -1;
-          }
-
-          if (a.reactive !== b.reactive) {
-            return b.reactive ? 1 : -1;
-          }
-
-          return 0;
+          if (a.reactive > b.reactive) return -1;
        }) as prop (prop.name)}
          <StructuredListRow>
            <StructuredListCell noWrap>
-              <InlineSnippet code={prop.name} />
+              <InlineSnippet code="{prop.name}" />
              {#if prop.reactive}
                <div
                  style="white-space: nowrap; margin-top: var(--cds-spacing-03); margin-bottom: var(--cds-spacing-{prop.isRequired
@ -111,29 +95,16 @@
                      {type}
                    </OutboundLink>
                  {:else if type in typeMap}
-                    <div
-                      style="display: inline-flex; max-width: 220px; word-break: break-word;"
-                    >
-                      <svelte:component
-                        this={AsyncPreviewTypeScript}
-                        type="inline"
-                        code={typeMap[type]}
-                      />
-                    </div>
+                    <code>{typeMap[type]}</code>
+                  {:else if type.startsWith("(")}
+                    <code>{type}</code>
                  {:else}
-                    <div
-                      style="display: inline-flex; max-width: 220px; word-break: break-word;"
-                    >
-                      <svelte:component
-                        this={AsyncPreviewTypeScript}
-                        type="inline"
-                        code={type}
-                      />
-                    </div>
+                    <InlineSnippet code="{type}" />
                  {/if}
                </div>
              {/each}
            </StructuredListCell>
+            <StructuredListCell><code>{prop.value}</code></StructuredListCell>
            <StructuredListCell>
              {#if prop.description}
                {#each prop.description.split("\n") as line}
@ -144,27 +115,9 @@
                      .replace(/`(.*?)`/g, "<code>$1</code>")}.
                  </div>
                {/each}
+              {:else}
+                <div class="description">No description available.</div>
              {/if}
-              <div
-                style:margin-top="var(--cds-layout-02)"
-                style:margin-bottom="var(--cds-spacing-03)"
-              >
-                <strong>Default value</strong>
-              </div>
-              <div
-                style:margin-bottom="var(--cds-layout-01)"
-                style:max-width="85%"
-              >
-                {#if prop.value === undefined}
-                  <em>undefined</em>
-                {:else}
-                  <svelte:component
-                    this={AsyncPreviewTypeScript}
-                    type={/\n/.test(prop.value) ? "multi" : "inline"}
-                    code={prop.value}
-                  />
-                {/if}
-              </div>
            </StructuredListCell>
          </StructuredListRow>
        {/each}
@ -175,50 +128,31 @@
  <p class="my-layout-01-03">No props.</p>
 {/if}

-<h2 id="typedefs">Typedefs</h2>
+<h3 id="typedefs">Typedefs</h3>

 {#if component.typedefs.length > 0}
-  <div class="my-layout-01-03">
-    <svelte:component
-      this={AsyncPreviewTypeScript}
-      code={component.typedefs.map((t) => t.ts).join("\n")}
-    />
-  </div>
+  <CodeSnippet
+    style="margin-top: var(--cds-spacing-08)"
+    class="my-layout-01-03"
+    type="multi"
+    code="{component.typedefs.map((t) => t.ts).join(';\n\n')};"
+  />
 {:else}
  <p class="my-layout-01-03">No typedefs.</p>
 {/if}

-<h2 id="slots">Slots</h2>
+<h3 id="slots">Slots</h3>
 {#if component.slots.length > 0}
-  <StructuredList class="my-layout-01-03">
-    <StructuredListHead>
-      <StructuredListRow>
-        <StructuredListCell>Slot name</StructuredListCell>
-        <StructuredListCell>Slot detail</StructuredListCell>
-      </StructuredListRow>
-    </StructuredListHead>
-    <StructuredListBody>
-      {#each component.slots as slot (slot.name)}
-        <StructuredListRow>
-          <StructuredListCell>
-            <strong>{slot.default ? "default" : slot.name}</strong>
-          </StructuredListCell>
-          <StructuredListCell>
-            <svelte:component
-              this={AsyncPreviewTypeScript}
-              type={/\n/.test(slot.slot_props) ? "multi" : "inline"}
-              code={slot.slot_props}
-            />
-          </StructuredListCell>
-        </StructuredListRow>
-      {/each}
-    </StructuredListBody>
-  </StructuredList>
+  <UnorderedList class="my-layout-01-03">
+    {#each component.slots as slot (slot.name)}
+      <ListItem>{slot.default ? "default" : slot.name}</ListItem>
+    {/each}
+  </UnorderedList>
 {:else}
  <p class="my-layout-01-03">No slots.</p>
 {/if}

-<h2 id="forwarded-events">Forwarded events</h2>
+<h3 id="forwarded-events">Forwarded events</h3>
 {#if forwarded_events.length > 0}
  <UnorderedList class="my-layout-01-03">
    {#each forwarded_events as event (event.name)}
@ -229,45 +163,19 @@
  <p class="my-layout-01-03">No forwarded events.</p>
 {/if}

-<h2 id="dispatched-events">Dispatched events</h2>
+<h3 id="dispatched-events">Dispatched events</h3>

 {#if dispatched_events.length > 0}
-  {@const hasDescription = dispatched_events.find((el) => el.description)}
-  <StructuredList flush>
-    <StructuredListHead>
-      <StructuredListRow>
-        <StructuredListCell>Event name</StructuredListCell>
-        <StructuredListCell>Event detail</StructuredListCell>
-        {#if hasDescription}
-          <StructuredListCell>Description</StructuredListCell>
-        {/if}
-      </StructuredListRow>
-    </StructuredListHead>
-    <StructuredListBody>
-      {#each dispatched_events as event (event.name)}
-        <StructuredListRow>
-          <StructuredListCell>
-            <strong>on:{event.name}</strong>
-          </StructuredListCell>
-          <StructuredListCell>
-            <svelte:component
-              this={AsyncPreviewTypeScript}
-              type={/\n/.test(event.detail) ? "multi" : "inline"}
-              code={event.detail}
-            />
-          </StructuredListCell>
-          <StructuredListCell>
-            {event.description ?? ""}
-          </StructuredListCell>
-        </StructuredListRow>
-      {/each}
-    </StructuredListBody>
-  </StructuredList>
+  <UnorderedList class="my-layout-01-03">
+    {#each dispatched_events as event (event.name)}
+      <ListItem>on:{event.name}</ListItem>
+    {/each}
+  </UnorderedList>
 {:else}
  <p class="my-layout-01-03">No dispatched events.</p>
 {/if}

-<h2 id="rest-props">$$restProps</h2>
+<h3 id="rest-props">$$restProps</h3>

 <div class="my-layout-01-03">
  {#if component.rest_props}
@ -285,7 +193,6 @@
 <style>
  .description {
    margin-bottom: var(--cds-spacing-04);
-    width: 80%;
  }

  .cell {
@ -299,11 +206,7 @@
    overflow-x: auto;
  }

-  :global(.my-layout-01-03) {
-    margin-top: var(--cds-layout-01);
-    margin-bottom: var(--cds-layout-03);
-  }
-
+  :global(.my-layout-01-03),
  :global(.overflow .bx--structured-list) {
    margin-top: var(--cds-layout-01);
    margin-bottom: var(--cds-layout-04);
@ -313,11 +216,7 @@
    word-break: break-word;
  }

-  :global(
-    .cell .bx--snippet--inline code,
-    .cell .bx--snippet--single pre,
-    .bx--snippet--inline code
-  ) {
+  :global(.cell .bx--snippet--inline code, .bx--snippet--single pre) {
    white-space: pre-wrap !important;
  }
 </style>
--- a/docs/src/components/InlineSnippet.svelte
+++ b/docs/src/components/InlineSnippet.svelte
@ -6,7 +6,7 @@
 </script>

 <div>
-  <CodeSnippet {code} type="inline" copy={(text) => copy(text)} />
+  <CodeSnippet code="{code}" type="inline" copy="{(text) => copy(text)}" />
 </div>

 <style>
--- a/docs/src/components/Preview.svelte
+++ b/docs/src/components/Preview.svelte
@ -26,8 +26,8 @@
        kind="ghost"
        target="_blank"
        size="field"
-        href={themedSrcUrl}
-        icon={Launch}
+        href="{themedSrcUrl}"
+        icon="{Launch}"
      >
        Open in new tab
      </Button>
@ -35,14 +35,13 @@
  {/if}
  <div class="preview-viewer" class:framed>
    {#if framed}
-      <iframe loading="lazy" title={src.split("/").pop()} src={themedSrcUrl}
-      ></iframe>
+      <iframe title="{src.split('/').pop()}" src="{themedSrcUrl}"></iframe>
    {:else}
      <slot />
    {/if}
  </div>
  <div class="code-override">
-    <CodeSnippet type="multi" code={codeRaw} copy={(text) => copy(text)}>
+    <CodeSnippet type="multi" code="{codeRaw}" copy="{(text) => copy(text)}">
      {@html code}
    </CodeSnippet>
  </div>
@ -53,7 +52,7 @@
    margin-bottom: var(--cds-layout-04);
    margin-left: -1rem;
    margin-right: -1rem;
-    max-width: 80rem;
+    max-width: 56rem;
  }

  .code-override {
@ -75,12 +74,6 @@
    min-height: 20rem;
  }

-  @media (min-width: 1920px) {
-    .preview-viewer.framed {
-      min-height: 32rem;
-    }
-  }
-
  .framed-header {
    display: flex;
    align-items: center;
--- a/docs/src/components/PreviewTypeScript.svelte
+++ b/docs/src/components/PreviewTypeScript.svelte
@ -1,29 +0,0 @@
-<script>
-  export let code = "";
-  export let type = "multi";
-
-  import { CodeSnippet } from "carbon-components-svelte";
-  import { highlight } from "prismjs";
-  import "prismjs/components/prism-typescript";
-  import copy from "clipboard-copy";
-
-  $: highlightedCode = highlight(
-    code,
-    Prism.languages.typescript,
-    "typescript",
-  );
-</script>
-
-{#if type === "multi"}
-  <div class="code-override">
-    <CodeSnippet type="multi" {code} {copy}>
-      {@html highlightedCode}
-    </CodeSnippet>
-  </div>
-{/if}
-
-{#if type === "inline"}
-  <CodeSnippet type="inline" class="code-override-inline" {code} {copy}>
-    {@html highlightedCode}
-  </CodeSnippet>
-{/if}
--- a/docs/src/components/Theme.svelte
+++ b/docs/src/components/Theme.svelte
@ -0,0 +1,30 @@
+<script>
+  export let persist = false;
+  export let persistKey = "carbon-theme";
+  export const themes = ["white", "g10", "g80", "g90", "g100"];
+
+  import { onMount, afterUpdate } from "svelte";
+  import { theme } from "../store";
+
+  const isValidTheme = (value) => themes.includes(value);
+
+  onMount(() => {
+    try {
+      const persisted_theme = localStorage.getItem(persistKey);
+      if (isValidTheme(persisted_theme)) theme.set(persisted_theme);
+    } catch (e) {}
+  });
+
+  afterUpdate(() => {
+    if (isValidTheme($theme)) {
+      document.documentElement.setAttribute("theme", $theme);
+      if (persist) {
+        try {
+          localStorage.setItem(persistKey, $theme);
+        } catch (e) {}
+      }
+    }
+  });
+</script>
+
+<slot />
--- a/docs/src/components/TileCard.svelte
+++ b/docs/src/components/TileCard.svelte
@ -15,8 +15,8 @@
 <div class="card-wrapper" class:borderRight class:borderBottom>
  <AspectRatio>
    <svelte:component
-      this={tileComponent}
-      {href}
+      this="{tileComponent}"
+      href="{href}"
      {...$$restProps}
      style="height: 100%;"
    >
@ -29,11 +29,11 @@
        </div>
        <div class="card-footer">
          <svelte:component
-            this={LogoGithub}
-            size={32}
+            this="{LogoGithub}"
+            size="{32}"
            style="fill: var(--cds-icon-01)"
          />
-          <Launch size={20} style="fill: var(--cds-icon-01)" />
+          <Launch size="{20}" style="fill: var(--cds-icon-01)" />
        </div>
      </div>
    </svelte:component>
--- a/docs/src/global.css
+++ b/docs/src/global.css
@ -2,19 +2,10 @@ html[theme="g90"] .code-override {
  border: 1px solid var(--cds-ui-03);
 }

-.prose > pre,
 .code-override .bx--snippet {
-  /** Docs code snippet is always dark mode */
-  color-scheme: dark;
  max-width: none;
 }

-.prose > pre {
-  padding: 1rem;
-  margin-bottom: 1rem;
-}
-
-.prose > pre,
 .code-override .bx--copy-btn,
 .code-override .bx--snippet,
 .code-override button.bx--btn.bx--snippet-btn--expand {
@ -31,7 +22,6 @@ html[theme="g90"] .code-override {
  fill: #f4f4f4;
 }

-.prose > pre,
 .code-override .bx--snippet-container pre {
  font-size: var(--cds-code-02-font-size);
  line-height: var(--cds-code-02-line-height);
@ -43,28 +33,11 @@ html[theme="g90"] .code-override {
  overflow-x: auto;
 }

-/* Addig this to the layout grid fixes overstretching. */
-.fix-overflow {
-  min-width: 0;
-}
-
 .token.tag,
 .token.operator {
  color: #6ea6ff;
 }

-/* Override syntax highlighting for light theme inline code .*/
-[theme="white"] .code-override-inline .token,
-[theme="g10"] .code-override-inline .token {
-  color: var(--cds-text-01, #161616);
-}
-
-/** Gray 80 is the "lighted" dark theme. Ensure the background is dark. */
-[theme="g80"] .code-override-inline {
-  background-color: #262626;
-}
-
-.token.builtin,
 .token.attr-name {
  color: #3ddbd9; /* teal 30 */
 }
@ -116,24 +89,6 @@ html[theme="g90"] .code-override {
  width: auto;
 }

-/*
- * Main content needs to supersede z-index of SideNav but not that of the Header.
- * UI Shell Header shares the same z-index.
- */
-[aria-label="Navigation"] {
-  z-index: calc(8000 + 2);
-}
-
-[aria-label="Navigation"] ~ [data-components] {
-  z-index: calc(8000 + 1);
-}
-
-@media (max-width: 65.98rem) {
-  [aria-label="Navigation"] ~ [data-components] {
-    z-index: 1;
-  }
-}
-
 .prose > p > .bx--link {
  font-size: inherit;
  text-decoration: underline;
@ -147,7 +102,6 @@ html[theme="g90"] .code-override {
  position: sticky;
  max-height: calc(100vh - 3rem);
  top: 3rem;
-  margin-top: -3rem;
  padding-top: var(--cds-spacing-05);
  padding-bottom: var(--cds-spacing-05);
  padding-left: var(--cds-spacing-08);
@ -155,6 +109,7 @@ html[theme="g90"] .code-override {
 }

 [data-components] {
+  z-index: 2;
  position: relative;
  display: flex;
 }
@ -194,11 +149,18 @@ html[theme="g90"] .code-override {
  margin-bottom: var(--cds-layout-01);
 }

-.code-01 {
-  font-size: var(--cds-code-01-font-size);
-  font-weight: var(--cds-code-01-font-weight);
-  letter-spacing: var(--cds-code-01-letter-spacing);
-  line-height: var(--cds-code-01-line-height);
+.table {
+  position: sticky;
+  max-height: calc(100vh - 3rem);
+  top: 3rem;
+  padding-top: var(--cds-spacing-05);
+  padding-bottom: var(--cds-spacing-05);
+  padding-left: var(--cds-spacing-08);
+  overflow-y: auto;
+}
+
+.bx--side-nav__overlay-active {
+  z-index: calc(10 + 1); /** supersede the z-index of code snippets */
 }

 .body-short-01 {
@ -209,10 +171,10 @@ html[theme="g90"] .code-override {
 }

 .bx--col > h1 {
-  font-size: var(--cds-expressive-heading-05-font-size);
-  font-weight: var(--cds-expressive-heading-05-font-weight);
-  letter-spacing: var(--cds-expressive-heading-05-letter-spacing);
-  line-height: var(--cds-expressive-heading-05-line-height);
+  font-size: var(--cds-display-01-font-size);
+  font-weight: var(--cds-display-01-font-weight);
+  letter-spacing: var(--cds-display-01-letter-spacing);
+  line-height: var(--cds-display-01-line-height);
  margin-bottom: var(--cds-layout-01);
 }

@ -247,13 +209,21 @@ html[theme="g90"] .code-override {
  padding: 0 var(--cds-spacing-02);
 }

-[class*="bx--col"] > h2,
-.bx--tab-content > h2 {
+.bx--col > h2 {
+  font-size: var(--cds-expressive-heading-05-font-size);
+  font-weight: var(--cds-expressive-heading-05-font-weight);
+  letter-spacing: var(--cds-expressive-heading-05-letter-spacing);
+  line-height: var(--cds-expressive-heading-05-line-height);
+  padding-top: var(--cds-layout-04);
+  margin-bottom: var(--cds-layout-01);
+}
+
+.bx--col > h3 {
  font-size: var(--cds-expressive-heading-04-font-size);
  font-weight: var(--cds-expressive-heading-04-font-weight);
  letter-spacing: var(--cds-expressive-heading-04-letter-spacing);
  line-height: var(--cds-expressive-heading-04-line-height);
-  padding-top: var(--cds-layout-03);
+  padding-top: var(--cds-layout-04);
  margin-bottom: var(--cds-layout-01);
 }

@ -266,13 +236,29 @@ html[theme="g90"] .code-override {
  margin-bottom: var(--cds-layout-01);
 }

-.bx--col > h2,
-.bx--tab-content > h2,
-.bx--col > h3,
-.bx--col > h4 {
-  scroll-margin-top: 3rem;
-}
-
 .bx--col > p {
  margin-bottom: var(--cds-layout-02);
 }
+
+main.bx--content {
+  min-height: calc(100vh - 3rem - 3rem);
+}
+
+@media (max-width: 1056px) {
+  .bx--side-nav ~ .bx--content {
+    margin-left: 0;
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  .bx--side-nav--expanded ~ .bx--content {
+    white-space: nowrap;
+    min-width: 28rem;
+  }
+}
+
+@media (min-width: 1057px) {
+  .bx--side-nav__navigation {
+    z-index: 1;
+  }
+}
--- a/docs/src/layouts/ComponentLayout.svelte
+++ b/docs/src/layouts/ComponentLayout.svelte
@ -22,6 +22,7 @@

  export let component = $page.title;
  export let components = [component];
+  export let source = "";
  export let unreleased = false;
  export let unstable = false;

@ -29,52 +30,26 @@

  // TODO: `find` is not supported in IE
  $: api_components = components.map((i) =>
-    COMPONENT_API.components.find((_) => _.moduleName === i),
+    COMPONENT_API.components.find((_) => _.moduleName === i)
  );
  $: multiple = api_components.length > 1;

  onMount(() => {
-    const searchParams = new URLSearchParams(window.location.search);
-    const current_theme = searchParams.get("theme");
+    const currentTheme = window.location.search.split("?theme=")[1];

-    if (["white", "g10", "g80", "g90", "g100"].includes(current_theme)) {
-      theme.set(current_theme);
+    if (["white", "g10", "g80", "g90", "g100"].includes(currentTheme)) {
+      theme.set(currentTheme);
    }
  });

-  function formatSourceURL(multiple) {
-    const filePath = api_components[0]?.filePath ?? "";
-
-    if (multiple) {
-      /**
-       * Link to folder for doc with multiple components.
-       * @example "src/Breadcrumb"
-       */
-      return filePath.split("/").slice(0, -1).join("/");
-    }
-
-    /**
-     * Else, link to the component source.
-     * @example "src/Tile/ClickableTile.svelte"
-     */
-    return filePath;
-  }
-
  // TODO: [refactor] read from package.json value
-  $: sourceCode = `https://github.com/carbon-design-system/carbon-components-svelte/tree/master/${formatSourceURL(
-    multiple,
-  )}`;
+  $: sourceCode = `https://github.com/carbon-design-system/carbon-components-svelte/tree/master/src/${
+    source || `${$page.title}/${$page.title}.svelte`
+  }`;
 </script>

-<svelte:head>
-  <link
-    rel="canonical"
-    href="https://svelte.carbondesignsystem.com/components/{component}"
-  />
-</svelte:head>
-
 <Content data-components>
-  <Grid class="fix-overflow">
+  <Grid>
    <Row>
      <Column>
        <h1>{component}</h1>
@ -83,7 +58,7 @@
            id="select-theme"
            inline
            labelText="Theme"
-            bind:selected={$theme}
+            bind:selected="{$theme}"
          >
            <SelectItem value="white" text="White" />
            <SelectItem value="g10" text="Gray 10" />
@ -95,8 +70,8 @@
            kind="ghost"
            target="_blank"
            size="field"
-            href={sourceCode}
-            icon={Code}
+            href="{sourceCode}"
+            icon="{Code}"
          >
            Source code
          </Button>
@ -125,9 +100,10 @@
    <Row>
      <Column class="prose">
        <div class="toc mobile">
-          <h5>Examples</h5>
+          <h5>Table of Contents</h5>
          <slot name="aside" />
        </div>
+        <h2 id="usage">Usage</h2>
        <slot />
        <h2 id="component-api">Component API</h2>
        <p>
@ -144,30 +120,30 @@
    </Row>

    <Row>
-      <Column class="prose" noGutter={multiple}>
+      <Column class="prose" noGutter="{multiple}">
        {#if multiple}
          <Tabs class="override-tabs">
            {#each api_components as component (component.moduleName)}
-              <Tab label={component.moduleName} />
+              <Tab label="{component.moduleName}" />
            {/each}
            <div slot="content" style="padding-top: var(--cds-spacing-06)">
              {#each api_components as component (component.moduleName)}
                <TabContent>
-                  <ComponentApi {component} />
+                  <ComponentApi component="{component}" />
                </TabContent>
              {/each}
            </div>
          </Tabs>
        {:else}
-          <ComponentApi component={api_components[0]} />
+          <ComponentApi component="{api_components[0]}" />
        {/if}
      </Column>
    </Row>
  </Grid>

-  <Column class="table" xlg={4} lg={5}>
+  <Column class="table" xlg="{4}" lg="{5}">
    <div class="toc">
-      <h5>Examples</h5>
+      <h5>Table of Contents</h5>
      <slot name="aside" />
    </div>
  </Column>
@ -181,8 +157,7 @@
    border-bottom: 1px solid var(--cds-ui-03);
  }

-  :global(.toc h5) {
-    margin-top: var(--cds-spacing-06);
+  .toc h5 {
    margin-bottom: var(--cds-spacing-03);
  }

@ -193,7 +168,6 @@
  @media (max-width: 1056px) {
    .toc.mobile {
      display: block;
-      margin-bottom: var(--cds-spacing-09);
    }
  }
 </style>
--- a/docs/src/layouts/Recipe.svelte
+++ b/docs/src/layouts/Recipe.svelte
@ -0,0 +1,88 @@
+<script>
+  import {
+    Grid,
+    Row,
+    Column,
+    Content,
+    Select,
+    SelectItem,
+  } from "carbon-components-svelte";
+  import { page, metatags } from "@sveltech/routify";
+  import { onMount } from "svelte";
+  import { theme } from "../store";
+
+  export let component = $page.title;
+
+  metatags.title = $page.title;
+
+  onMount(() => {
+    const currentTheme = window.location.search.split("?theme=")[1];
+
+    if (["white", "g10", "g90", "g100"].includes(currentTheme)) {
+      theme.set(currentTheme);
+    }
+  });
+</script>
+
+<Content data-components>
+  <Grid>
+    <Row>
+      <Column>
+        <h1>{component}</h1>
+        <div class="bar">
+          <Select
+            id="select-theme"
+            inline
+            labelText="Theme"
+            bind:selected="{$theme}"
+          >
+            <SelectItem value="white" text="White" />
+            <SelectItem value="g10" text="Gray 10" />
+            <SelectItem value="g90" text="Gray 90" />
+            <SelectItem value="g100" text="Gray 100" />
+          </Select>
+        </div>
+      </Column>
+    </Row>
+
+    <Row>
+      <Column class="prose">
+        <div class="toc mobile">
+          <h5>Table of Contents</h5>
+          <slot name="aside" />
+        </div>
+        <slot />
+      </Column>
+    </Row>
+  </Grid>
+
+  <Column class="table" xlg="{4}" lg="{5}">
+    <div class="toc">
+      <h5>Table of Contents</h5>
+      <slot name="aside" />
+    </div>
+  </Column>
+</Content>
+
+<style>
+  .bar {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: var(--cds-layout-02);
+    border-bottom: 1px solid var(--cds-ui-03);
+  }
+
+  .toc h5 {
+    margin-bottom: var(--cds-spacing-03);
+  }
+
+  .toc.mobile {
+    display: none;
+  }
+
+  @media (max-width: 1056px) {
+    .toc.mobile {
+      display: block;
+    }
+  }
+</style>
--- a/docs/src/pages/_fallback.svelte
+++ b/docs/src/pages/_fallback.svelte
@ -12,7 +12,7 @@
        <h1>404</h1>
        <div>
          Page not found.
-          <Link href={$url("/")}>Return home</Link>
+          <Link href="{$url('/')}">Return home</Link>
        </div>
      </Column>
    </Row>
--- a/docs/src/pages/_layout.svelte
+++ b/docs/src/pages/_layout.svelte
@ -1,11 +1,5 @@
 <script>
-  import {
-    isActive,
-    url,
-    layout,
-    beforeUrlChange,
-    goto,
-  } from "@sveltech/routify";
+  import { isActive, url, layout, beforeUrlChange } from "@sveltech/routify";
  import {
    Header,
    HeaderUtilities,
@ -14,46 +8,28 @@
    HeaderPanelLinks,
    HeaderPanelLink,
    HeaderPanelDivider,
-    HeaderSearch,
    SkipToContent,
    SideNav,
    SideNavItems,
+    SideNavMenu,
    SideNavMenuItem,
-    Theme,
    Tag,
  } from "carbon-components-svelte";
-  import MiniSearch from "minisearch";
  import LogoGithub from "carbon-icons-svelte/lib/LogoGithub.svelte";
-  import { theme } from "../store";
-  import SEARCH_INDEX from "../SEARCH_INDEX.json";
-
-  const miniSearch = new MiniSearch({
-    fields: ["text", "description"],
-    storeFields: ["text", "description", "href"],
-    searchOptions: {
-      prefix: true,
-      boost: { description: 2 },
-      fuzzy: 0.1,
-    },
-  });
-
-  miniSearch.addAll(SEARCH_INDEX);
+  import Theme from "../components/Theme.svelte";

  const deprecated = [];
  const new_components = [];

-  let value = "";
-  let active = false;
-  $: results = miniSearch.search(value).slice(0, 10);
-
  let isOpen = false;
  let isSideNavOpen = true;
  let innerWidth = 2048;

  $: isMobile = innerWidth < 1056;
  $: components = $layout.children.filter(
-    (child) => child.title === "components",
+    (child) => child.title === "components"
  )[0];
+  $: recipes = $layout.children.filter((child) => child.title === "recipes")[0];

  $beforeUrlChange(() => {
    if (isMobile) isSideNavOpen = false;
@ -64,106 +40,29 @@
 <!-- routify:options bundle=true -->
 <svelte:window bind:innerWidth />

-<svelte:body
-  on:keydown={(e) => {
-    if (active) return;
-    if (
-      document.activeElement instanceof HTMLInputElement ||
-      document.activeElement instanceof HTMLTextAreaElement
-    ) {
-      // Exit early if an inputtable element is already focused.
-      return;
-    }
-
-    const isCommandOrControl = e.metaKey || e.ctrlKey;
-    const isCmdK = isCommandOrControl && e.key.toLowerCase() === "k";
-    const isSlash = e.key === "/";
-
-    if (isCmdK || isSlash) {
-      e.preventDefault();
-      active = true;
-    }
-  }}
-/>
-
-<svelte:head>
-  <!-- Tealium/GA Set up -->
-  <script type="text/javascript">
-    window._ibmAnalytics = {
-      settings: {
-        name: "CarbonSvelte",
-        isSpa: true,
-        tealiumProfileName: "ibm-web-app",
-      },
-      onLoad: [["ibmStats.pageview", []]],
-    };
-    digitalData = {
-      page: {
-        pageInfo: {
-          ibm: {
-            siteId: "IBM_" + _ibmAnalytics.settings.name,
-          },
-        },
-        category: {
-          primaryCategory: "PC100",
-        },
-      },
-    };
-  </script>
-  <script
-    type="module"
-    defer
-    src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/footer.min.js"
-  ></script>
-  <script
-    src="//1.www.s81c.com/common/stats/ibm-common.js"
-    type="text/javascript"
-    defer
-  ></script>
-</svelte:head>
-
-<Theme
-  persist
-  bind:theme={$theme}
-  on:update={(e) => {
-    const theme = e.detail.theme;
-    document.documentElement.style.setProperty(
-      "color-scheme",
-      ["white", "g10"].includes(theme) ? "light" : "dark",
-    );
-  }}
->
+<Theme persist>
  <Header
    aria-label="Navigation"
-    href={$url("/")}
-    expandedByDefault={true}
+    href="{$url('/')}"
+    expandedByDefault="{true}"
    bind:isSideNavOpen
  >
    <svelte:fragment slot="skip-to-content">
      <SkipToContent />
    </svelte:fragment>

-    <span slot="platform" class="platform-name" class:hidden={active}>
-      Carbon Components Svelte &nbsp;<code class="code-01"
-        >v{process.env.VERSION || ""}</code
-      >
+    <span slot="platform" class="platform-name">
+      Carbon Components Svelte
+      <code>v{process.env.VERSION || ""}</code>
    </span>
+
    <HeaderUtilities>
-      <HeaderSearch
-        bind:value
-        bind:active
-        placeholder="Search"
-        {results}
-        on:select={(e) => {
-          $goto(e.detail.selectedResult.href);
-        }}
-      />
      <HeaderActionLink
-        icon={LogoGithub}
+        icon="{LogoGithub}"
        href="https://github.com/carbon-design-system/carbon-components-svelte"
        target="_blank"
      />
-      <HeaderAction transition={false} bind:isOpen>
+      <HeaderAction transition="{false}" bind:isOpen>
        <HeaderPanelLinks>
          <HeaderPanelDivider>Carbon Svelte portfolio</HeaderPanelDivider>
          <HeaderPanelLink
@ -198,53 +97,70 @@
    </HeaderUtilities>
  </Header>

-  <SideNav bind:isOpen={isSideNavOpen}>
+  <SideNav bind:isOpen="{isSideNavOpen}">
    <SideNavItems>
-      {#each components.children.filter((child) => !deprecated.includes(child.title)) as child (child.path)}
-        <SideNavMenuItem
-          text={child.title}
-          href={$url(child.path)}
-          isSelected={$isActive($url(child.path))}
-        >
-          {child.title}
-          {#if deprecated.includes(child.title)}
-            <Tag
-              size="sm"
-              type="red"
-              style="margin-top: 0; margin-bottom: 0; cursor: inherit"
-            >
-              Deprecated
-            </Tag>
-          {/if}
-          {#if new_components.includes(child.title)}
-            <Tag
-              size="sm"
-              type="green"
-              style="margin-top: 0; margin-bottom: 0; cursor: inherit"
-            >
-              New
-            </Tag>
-          {/if}
-        </SideNavMenuItem>
-      {/each}
+      <SideNavMenu
+        expanded="{$isActive($url('')) || $isActive($url('/components'))}"
+        text="Components"
+      >
+        {#each components.children.filter((child) => !deprecated.includes(child.title)) as child, i (child.path)}
+          <SideNavMenuItem
+            text="{child.title}"
+            href="{$url(child.path)}"
+            isSelected="{$isActive($url(child.path))}"
+          >
+            {child.title}
+            {#if deprecated.includes(child.title)}
+              <Tag
+                size="sm"
+                type="red"
+                style="margin-top: 0; margin-bottom: 0; cursor: inherit"
+              >
+                Deprecated
+              </Tag>
+            {/if}
+            {#if new_components.includes(child.title)}
+              <Tag
+                size="sm"
+                type="green"
+                style="margin-top: 0; margin-bottom: 0; cursor: inherit"
+              >
+                New
+              </Tag>
+            {/if}
+          </SideNavMenuItem>
+        {/each}
+      </SideNavMenu>
+      <SideNavMenu expanded="{$isActive($url('/recipes'))}" text="Recipes">
+        {#each recipes.children as child, i (child.path)}
+          <SideNavMenuItem
+            href="{$url(child.path)}"
+            isSelected="{$isActive($url(child.path))}"
+          >
+            {child.title}
+          </SideNavMenuItem>
+        {/each}
+      </SideNavMenu>
    </SideNavItems>
  </SideNav>
  <slot />
 </Theme>

 <style>
-  /** Hide logo to make space for search bar on narrower screens. */
-  @media (max-width: 1056px) {
-    .platform-name.hidden {
-      display: none;
-    }
-  }
-
  .platform-name {
    display: flex;
    align-items: baseline;
  }

+  .platform-name code {
+    margin-left: var(--cds-spacing-02);
+    font-size: var(--cds-code-01-font-size);
+    font-weight: var(--cds-code-01-font-weight);
+    letter-spacing: var(--cds-code-01-letter-spacing);
+    line-height: var(--cds-code-01-line-height);
+    color: #c6c6c6;
+  }
+
  @media (max-width: 580px) {
    .platform-name code {
      display: none;
--- 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";
 </script>

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

 <Accordion>
  <AccordionItem title="Natural Language Classifier">
@ -32,11 +27,7 @@ By default, the chevron icon is on the right side of the accordion item.
  </AccordionItem>
 </Accordion>

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

 <Accordion align="start">
  <AccordionItem title="Natural Language Classifier">
@ -51,10 +42,7 @@ maintaining the same functionality.
  </AccordionItem>
 </Accordion>

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

 <Accordion>
  <AccordionItem>
@ -81,10 +69,7 @@ This allows for more complex title layouts with multiple elements.
  </AccordionItem>
 </Accordion>

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

 <Accordion>
  <AccordionItem open title="Natural Language Classifier">
@ -99,19 +84,7 @@ accordion is first rendered.
  </AccordionItem>
 </Accordion>

-## 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.
-
-<FileSource src="/framed/Accordion/ExpandableAccordion" />
-
-## 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

 <Accordion size="xl">
  <AccordionItem title="Natural Language Classifier">
@ -126,11 +99,7 @@ sections.
  </AccordionItem>
 </Accordion>

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

 <Accordion size="sm">
  <AccordionItem title="Natural Language Classifier">
@ -145,10 +114,7 @@ a secondary UI element.
  </AccordionItem>
 </Accordion>

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

 <Accordion disabled>
  <AccordionItem title="Natural Language Classifier">
@ -163,11 +129,7 @@ This prevents users from expanding or collapsing any items in the accordion.
  </AccordionItem>
 </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)

 <Accordion>
  <AccordionItem disabled title="Natural Language Classifier">
@ -182,47 +144,27 @@ which items are interactive.
  </AccordionItem>
 </Accordion>

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

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

 <Accordion skeleton align="start" />

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

 <Accordion skeleton count={3} />

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

 <Accordion skeleton open={false} />

-## Skeleton (extra-large)
-
-The skeleton state supports the extra-large size variant, maintaining visual
-consistency with the active component states.
+### Skeleton (extra-large)

 <Accordion skeleton size="xl" />

-## Skeleton (small)
-
-The skeleton state also supports the small size variant, providing a compact
-loading placeholder for space-constrained layouts.
+### Skeleton (small)

 <Accordion skeleton size="sm" />

--- a/docs/src/pages/components/AspectRatio.svx
+++ b/docs/src/pages/components/AspectRatio.svx
@ -3,67 +3,65 @@
  import Preview from "../../components/Preview.svelte";
 </script>

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

-## Default
-
-Display a 2:1 aspect ratio container by default.
+### Default (2x1)

 <AspectRatio>
  2x1
 </AspectRatio>

-## Ratio 2x3
+### Ratio 2x3

 <AspectRatio ratio="2x3">
  2x3
 </AspectRatio>

-## Ratio 16x9
+### Ratio 16x9

 <AspectRatio ratio="16x9">
  16x9
 </AspectRatio>

-## Ratio 4x3
+### Ratio 4x3

 <AspectRatio ratio="4x3">
  4x3
 </AspectRatio>

-## Ratio 1x1
+### Ratio 1x1

 <AspectRatio ratio="1x1">
  1x1
 </AspectRatio>

-## Ratio 3x4
+### Ratio 3x4

 <AspectRatio ratio="3x4">
  3x4
 </AspectRatio>

-## Ratio 3x2
+### Ratio 3x2

 <AspectRatio ratio="3x2">
  3x2
 </AspectRatio>

-## Ratio 9x16
+### Ratio 9x16

 <AspectRatio ratio="9x16">
  9x16
 </AspectRatio>

-## Ratio 1x2
+### Ratio 1x2

 <AspectRatio ratio="1x2">
  1x2
 </AspectRatio>

-## Tile (16x9)
+### Tile (16x9)

 <AspectRatio ratio="16x9">
  <Tile style="height: 100%">Content</Tile>
--- 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";
 </script>

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

 <Breadcrumb>
  <BreadcrumbItem href="/">Dashboard</BreadcrumbItem>
@ -24,18 +22,14 @@ Display a hierarchical navigation trail with slashes between items. Mark the cur
  <BreadcrumbItem href="/reports/2019" isCurrentPage>2019</BreadcrumbItem>
 </Breadcrumb>

-## No trailing slash
-
-Remove the trailing slash from the last breadcrumb item using `noTrailingSlash`.
+### No trailing slash

 <Breadcrumb noTrailingSlash>
  <BreadcrumbItem href="/">Home</BreadcrumbItem>
  <BreadcrumbItem href="/profile" isCurrentPage>Profile</BreadcrumbItem>
 </Breadcrumb>

-## Overflow menu
-
-Add an `OverflowMenu` to handle long breadcrumb trails. Use `OverflowMenuItem` components for menu options.
+### Overflow menu

 <Breadcrumb>
  <BreadcrumbItem href="/">Home</BreadcrumbItem>
@ -49,12 +43,6 @@ Add an `OverflowMenu` to handle long breadcrumb trails. Use `OverflowMenuItem` c
  <BreadcrumbItem href="/api/data/latest/usage" isCurrentPage>Usage</BreadcrumbItem>
 </Breadcrumb>

-## Breadcrumb trail
-
-<FileSource src="/framed/Breadcrumbs/Breadcrumbs" />
-
-## Skeleton
-
-Display a loading state with `skeleton` prop. Use `count` to specify the number of items.
+### Skeleton

 <Breadcrumb noTrailingSlash skeleton count={3} />
--- a/docs/src/pages/components/Breakpoint.svx
+++ b/docs/src/pages/components/Breakpoint.svx
@ -1,12 +1,12 @@

 <script>
  import {
-    UnorderedList, ListItem
+    Breakpoint, UnorderedList, ListItem
  } from "carbon-components-svelte";
  import Preview from "../../components/Preview.svelte";
 </script>

-The Carbon Design System [grid implementation](https://carbondesignsystem.com/guidelines/2x-grid/implementation#responsive-options) defines five responsive breakpoints:
+The [Carbon Design System grid implementation](https://carbondesignsystem.com/guidelines/2x-grid/implementation#responsive-options) defines five responsive breakpoints:

 <UnorderedList svx-ignore style="margin-bottom: var(--cds-spacing-08)">
  <ListItem><strong>Small</strong>: less than 672px</ListItem>
@ -18,7 +18,7 @@ The Carbon Design System [grid implementation](https://carbondesignsystem.com/gu

 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
+### Default

 Bind to the `size` prop to determine the current breakpoint size. Possible values include: `"sm" | "md" | "lg" | "xlg" | "max"`.

@ -26,10 +26,10 @@ The `"on:change"` event will fire when the size is initially determined and when

 <FileSource src="/framed/Breakpoint/Breakpoint" />

-## Store and Breakpoint Values
+### 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.
+As an alternative to the component, `breakpointObserver` can be used to get the current size as a Svelte store. The store has two additional functions which create derived stores that return a `boolean` indicating whether the size is smaller/larger than a certain breakpoint.

-Access the `breakpoints` dictionary to map from `BreakpointSize` to `BreakpointValue`.
+There also exists a `breakpoints` dictionary mapping from `BreakpointSize` to `BreakpointValue`.

 <FileSource src="/framed/Breakpoint/BreakpointObserver" />
--- a/docs/src/pages/components/Button.svx
+++ b/docs/src/pages/components/Button.svx
@ -4,123 +4,91 @@
  import TrashCan from "carbon-icons-svelte/lib/TrashCan.svelte";
  import Login from "carbon-icons-svelte/lib/Login.svelte";
  import Preview from "../../components/Preview.svelte";
+
+  let index = 1;
 </script>

-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

 <Button>Primary button</Button>

-## Secondary button
-
-Set `kind="secondary"` for secondary actions.
+### Secondary button

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

-## Tertiary button
-
-Set `kind="tertiary"` for tertiary actions.
+### Tertiary button

 <Button kind="tertiary">Tertiary button</Button>

-## Ghost button
-
-Set `kind="ghost"` for ghost-style buttons.
+### Ghost button

 <Button kind="ghost">Ghost button</Button>

-## Danger button
-
-Set `kind="danger"` for destructive actions.
+### Danger button

 <Button kind="danger">Danger button</Button>

-## Danger tertiary button
-
-Set `kind="danger-tertiary"` for less prominent destructive actions.
+### Danger tertiary button

 <Button kind="danger-tertiary">Danger tertiary button</Button>

-## Danger tertiary, icon-only button
+### Danger tertiary, icon-only button

 <InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
  <div class="body-short-01">
-    Provide an <strong>iconDescription</strong> for accessibility. This text will be used as the button's tooltip and screen reader label.
+    You must provide an <strong>iconDescription</strong> for the button tooltip.
  </div>
 </InlineNotification>

-<Button kind="danger-tertiary" iconDescription="Delete" icon={TrashCan} />
+<Button kind="danger-tertiary"iconDescription="Delete" icon={TrashCan} />

-## Danger ghost button
-
-Set `kind="danger-ghost"` for ghost-style destructive actions.
+### Danger ghost button

 <Button kind="danger-ghost">Danger ghost button</Button>

-## Button with icon
-
-Add an icon to the button using the `icon` prop.
+### Button with icon

 <Button icon={Add}>With icon</Button>

-## Icon-only button
+### Icon-only button

 <InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
  <div class="body-short-01">
-    Provide an <strong>iconDescription</strong> for accessibility. This text will be used as the button's tooltip and screen reader label.
+    You must provide an <strong>iconDescription</strong> for the button tooltip.
  </div>
 </InlineNotification>

 <Button iconDescription="Tooltip text" icon={Add} />

-## Icon-only, link button
-
-Set `href` to create an icon-only link button.
+### Icon-only, link button

 <Button iconDescription="Login" icon={Login} href="#" />

-## Icon-only button (custom tooltip position)
+### Icon-only button (custom tooltip position)

-Control the tooltip position and alignment with `tooltipPosition` and `tooltipAlignment`.
+The tooltip position and alignment can be controlled by `tooltipPosition` and `tooltipAlignment`.

 <Button tooltipPosition="right" tooltipAlignment="end" iconDescription="Tooltip text" icon={Add} />

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

 <FileSource src="/framed/Button/SelectedIconOnlyButton" />

-## 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) instead of a `button` element.

 <Button href="#">Link button</Button>

-## Link button with icon
-
-Similarly, link buttons can have icons.
-
-<Button href="#" icon={Add}>Link button with icon</Button>
-
-## 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

 <Button as let:props>
  <p {...props}>Custom element</p>
 </Button>

-## Field size
-
-The default size is "default".
-
-Set `size="field"` for field-sized buttons.
+### Field size

 <Button size="field">Primary</Button>
 <Button size="field" kind="secondary">Secondary</Button>
@ -128,9 +96,7 @@ Set `size="field"` for field-sized buttons.
 <Button size="field" kind="ghost">Ghost</Button>
 <Button size="field" kind="danger">Danger</Button>

-## Small size
-
-Set `size="small"` for small buttons.
+### Small size

 <Button size="small">Primary</Button>
 <Button size="small" kind="secondary">Secondary</Button>
@ -138,9 +104,7 @@ Set `size="small"` for small buttons.
 <Button size="small" kind="ghost">Ghost</Button>
 <Button size="small" kind="danger">Danger</Button>

-## Large size
-
-Set `size="lg"` for large buttons.
+### Large size

 <Button size="lg">Primary</Button>
 <Button size="lg" kind="secondary">Secondary</Button>
@ -148,9 +112,7 @@ Set `size="lg"` for large buttons.
 <Button size="lg" kind="ghost">Ghost</Button>
 <Button size="lg" kind="danger">Danger</Button>

-## Extra-large size
-
-Set `size="xl"` for extra-large buttons.
+### Extra-large size

 <Button size="xl">Primary</Button>
 <Button size="xl" kind="secondary">Secondary</Button>
@ -158,20 +120,17 @@ Set `size="xl"` for extra-large buttons.
 <Button size="xl" kind="ghost">Ghost</Button>
 <Button size="xl" kind="danger">Danger</Button>

-## Disabled state
-
-Set `disabled` to disable the button.
+### Disabled button

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

-## Expressive styles
+### Expressive styles

 Set `expressive` to `true` to use Carbon's expressive typesetting.

 <InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
  <div class="body-short-01">
-    Use expressive styles with default, "lg", or "xl" button sizes.
+    Expressive styles only work with the default, "lg", and "xl" button sizes.
  </div>
 </InlineNotification>

@ -193,18 +152,10 @@ Set `expressive` to `true` to use Carbon's expressive typesetting.
 <Button expressive kind="ghost">Ghost</Button>
 <Button expressive kind="danger">Danger</Button>

-## Skeleton
-
-Set `skeleton` to show a loading state.
+### Skeleton

 <Button size="xl" skeleton />
 <Button size="lg" skeleton />
 <Button skeleton />
 <Button skeleton size="field" />
-<Button skeleton size="small" />
-
-## Programmatic focus
-
-Bind to the `ref` prop to access the button element for programmatic focus.
-
-<FileSource src="/framed/Button/ProgrammaticFocus" />
+<Button skeleton size="small" />
--- a/docs/src/pages/components/ButtonSet.svx
+++ b/docs/src/pages/components/ButtonSet.svx
@ -1,23 +1,25 @@
+---
+source: Button/ButtonSet.svelte
+---
+
 <script>
  import { Button, ButtonSet } from "carbon-components-svelte";
  import Login from "carbon-icons-svelte/lib/Login.svelte";
  import Preview from "../../components/Preview.svelte";
 </script>

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

 <ButtonSet>
  <Button kind="secondary">Cancel</Button>
  <Button>Submit</Button>
 </ButtonSet>

-## Stacked
+### Stacked

-Set `stacked` to `true` to arrange buttons vertically.
+Set `stacked` to `true` to use the stacked variant.

 <ButtonSet stacked>
  <Button icon={Login}>Log in</Button>
--- a/docs/src/pages/components/Checkbox.svx
+++ b/docs/src/pages/components/Checkbox.svx
@ -3,60 +3,44 @@
  import Preview from "../../components/Preview.svelte";
 </script>

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

 <Checkbox labelText="Label text" />

-## Checked
-
-Set `checked` to `true` to pre-select the checkbox.
+### Checked

 <Checkbox labelText="Label text" checked />

-## Indeterminate
-
-Set `indeterminate` to `true` to show a mixed state, typically used in parent checkboxes with some children selected.
+### Indeterminate

 <Checkbox labelText="Label text" indeterminate />

-## Hidden label
-
-Set `hideLabel` to `true` to visually hide the label while keeping it accessible to screen readers.
+### Hidden label

 <Checkbox labelText="Label text" hideLabel />

-## Disabled state
-
-Set `disabled` to `true` to prevent user interaction.
+### Disabled

 <Checkbox labelText="Label text" disabled />

-## Reactive example (bind:checked)
+### Reactive example (bind:checked)

-Use two-way binding with `bind:checked` to track the checkbox state.
+The `checked` prop supports two-way binding.

 <FileSource src="/framed/Checkbox/CheckboxReactive" />

-## Reactive example (bind:group)
+### 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).
+An alternative to `checked` is binding an array of values using `group`. This API in inspired by Svelte [group inputs](https://svelte.dev/tutorial/group-inputs).

 <InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
  <div class="body-short-01">
-    When using <strong>bind:group</strong>, <strong>bind:checked</strong> only supports one-way binding.
+    If using <strong>bind:group</strong>, <strong>bind:checked</strong> will only support one-way binding.
  </div>
 </InlineNotification>

 <FileSource src="/framed/Checkbox/MultipleCheckboxes" />

-## Skeleton
-
-Set `skeleton` to `true` to show a loading state.
+### Skeleton

 <Checkbox skeleton />
--- a/docs/src/pages/components/ClickableTile.svx
+++ b/docs/src/pages/components/ClickableTile.svx
@ -1,21 +1,21 @@
+---
+source: Tile/ClickableTile.svelte
+---
+
 <script>
  import { ClickableTile } from "carbon-components-svelte";
  import Preview from "../../components/Preview.svelte";
 </script>

-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
-
-Create a clickable tile with an `href` to link to another page.
+### Default

 <ClickableTile href="https://www.carbondesignsystem.com/">
 Carbon Design System
 </ClickableTile>

-## Prevent default behavior
+### Prevent default behavior

-Handle the `click` event to override the default link behavior. Use `e.preventDefault()` to stop navigation.
+Use the forwarded `click` event and invoke `e.preventDefault()` to prevent the native link behavior.

 <ClickableTile
  href="/"
@ -27,17 +27,13 @@ Handle the `click` event to override the default link behavior. Use `e.preventDe
  Carbon Design System
 </ClickableTile>

-## Light variant
-
-Set `light` to `true` to use the light color scheme.
+### Light variant

 <ClickableTile light href="https://www.carbondesignsystem.com/">
 Carbon Design System
 </ClickableTile>

-## Disabled state
-
-Set `disabled` to `true` to prevent interaction.
+### Disabled state

 <ClickableTile disabled href="https://www.carbondesignsystem.com/">
 Carbon Design System
--- a/docs/src/pages/components/CodeSnippet.svx
+++ b/docs/src/pages/components/CodeSnippet.svx
@ -27,124 +27,97 @@ let comment = `
 `
 </script>

-Code snippets display and copy code examples. They support single-line, multi-line, and inline formats with customizable copy and expand functionality.
-
 This component uses the native, asynchronous [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) to copy text.

+Please note that the `clipboard.writeText` API is not supported in [IE 11 nor Safari iOS version 13.3  or lower](https://caniuse.com/mdn-api_clipboard_writetext).
+
 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.
+### Default (single-line)

-<CodeSnippet code="npm i carbon-components-svelte" />
+<CodeSnippet code="yarn add -D carbon-components-svelte" />

-## Overriding copy functionality
+### Overriding copy functionality

-Pass a custom function to the `copy` prop to override the default copy behavior.
+To override the default copy behavior, pass a custom function to the `copy` prop.

 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.

 <FileSource src="/framed/CodeSnippet/CodeSnippetOverride" />

-## Preventing copy functionality
+### Preventing copy functionality

-Pass a no-op function to the `copy` prop to disable copying.
+To prevent text from being copied entirely, pass a no-op function to the `copy` prop.

-<CodeSnippet code="npm i carbon-components-svelte" copy={() => {}} />
+<CodeSnippet code="yarn add -D carbon-components-svelte" copy={() => {}} />

-## Inline
-
-Set `type="inline"` to display code inline with text.
+### Inline

 <CodeSnippet type="inline" code="rm -rf node_modules/" />

-## Multi-line
-
-Set `type="multi"` to display multiple lines of code with expand/collapse functionality.
+### Multi-line

 <CodeSnippet type="multi" {code} />

-## Expanded by default
+### Expanded by default

-Set `expanded` to `true` to show the full multi-line code snippet.
+Use the `expanded` prop to control whether the multi-line code snippet is expanded or not.

 <CodeSnippet type="multi" {code} expanded />

-## Reactive example
+### Reactive example

-The multi-line code snippet dispatches "expand" and "collapse" events.
+The multi-line code snippet also dispatches "expand" and "collapse" events.

 <FileSource src="/framed/CodeSnippet/CodeSnippetReactive" />

-## Custom copy feedback text
+### 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.

 <CodeSnippet type="multi" {code} feedback="Copied to clipboard" />

-## Hidden copy button
+### Hidden copy button

 Set `hideCopyButton` to `true` to hide the copy button.

 <CodeSnippet type="multi" {code} hideCopyButton />

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

-<CodeSnippet type="multi" {code} showMoreLess={false} />
-
-## Hidden copy, show more buttons
-
-Hide both the copy and expand/collapse buttons.
-
-<CodeSnippet type="multi" {code} hideCopyButton showMoreLess={false} />
-
-## Custom show more/less text
-
-Set `showMoreText` and `showLessText` to customize the expand/collapse button text.
-
-<CodeSnippet type="multi" {code} showMoreText="Expand" showLessText="Collapse" />
-
-## Disabled
-
-Set `disabled` to `true` to disable interaction. This only applies to `"single"` and `"multi"` types.
-
-<CodeSnippet disabled code="npm i carbon-components-svelte" />
+<CodeSnippet disabled code="yarn add -D carbon-components-svelte" />
 <br />
 <CodeSnippet disabled type="multi" code="{comment}" />

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

 <CodeSnippet wrapText type="multi" code="{comment}" />

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

 <FileSource src="/framed/CodeSnippet/DynamicCodeSnippet" />

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

 <FileSource src="/framed/CodeSnippet/HiddenCodeSnippet" />

-## Skeleton
+### Skeleton

-Set `skeleton` to `true` to show a loading state. Defaults to `"single"` type.
+The default skeleton type is `"single"`.

 <CodeSnippet skeleton />

-## Skeleton (multi-line)
-
-Set `type="multi"` with `skeleton` to show a multi-line loading state.
+### Skeleton (multi-line)

 <CodeSnippet type="multi" skeleton />
--- a/docs/src/pages/components/ComboBox.svx
+++ b/docs/src/pages/components/ComboBox.svx
@ -3,17 +3,13 @@
  import Preview from "../../components/Preview.svelte";
 </script>

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

 <InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
  <div class="body-short-01">Every <code>items</code> object must have a unique "id" property.</div>
 </InlineNotification>

-## Default
-
-Create a combobox with a title and placeholder text. Each item requires a unique `id` and `text`.
+### Default

 <ComboBox titleText="Contact" placeholder="Select contact method"
 items={[
@ -22,26 +18,13 @@ items={[
  {id: "2", text: "Fax"}
  ]}  />

-## Custom slot
+### Custom slot

-Override the default slot to customize how each item displays. Access the item and index through the `let:` directive.
+Override the default slot to customize the display of each item. Access the item and index through the `let:` directive.

 <FileSource src="/framed/ComboBox/ComboBoxSlot" />

-## Hidden label
-
-Set `hideLabel` to `true` to visually hide the label while keeping it accessible to screen readers.
-
-<ComboBox hideLabel titleText="Hidden Label" placeholder="Select contact method"
-items={[
-  {id: "0", text: "Slack"},
-  {id: "1", text: "Email"},
-  {id: "2", text: "Fax"}
-  ]}  />
-
-## Initial selected id
-
-Set `selectedId` to pre-select an item when the combobox loads.
+### Initial selected id

 <ComboBox titleText="Contact" placeholder="Select contact method"
 selectedId="1"
@ -51,41 +34,35 @@ items={[
  {id: "2", text: "Fax"}
  ]}  />

-## Reactive example
-
-See how the combobox responds to user input and selection changes.
+### Reactive example

 <FileSource src="/framed/ComboBox/ReactiveComboBox" />

-## Clear selection
+### Clear selection

-Use `bind:this` to access the component instance and call `ComboBox.clear()` to programmatically clear the selection.
+To programmatically clear the selection, access the component instance using the [bind:this](https://svelte.dev/docs#bind_element) directive and invoke the `ComboBox.clear()` accessor.

-Set `focus: false` in the method options to prevent re-focusing the input.
+Specify `focus: false` in the method options to avoid re-focusing the input.

 <FileSource src="/framed/ComboBox/ComboBoxClear" />

-## Multiple combo boxes
-
-See how to manage multiple comboboxes in a form.
+### Multiple combo boxes

 <FileSource src="/framed/ComboBox/MultipleComboBox" />

-## Filterable
-
-Enable filtering to let users search through the options.
+### Filterable

 <FileSource src="/framed/ComboBox/FilterableComboBox" />

-## Filterable with custom label
+### Filterable with custom label

-Set `itemToString` to customize how items display in the filterable combobox.
+Combine a custom label `itemToString` with the filterable option (e.g., internationalization).

 <FileSource src="/framed/ComboBox/FilterableComboBoxCustomLabel" />

-## Top direction
+### 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.

 <ComboBox direction="top" titleText="Contact" placeholder="Select contact method"
 items={[
@ -94,9 +71,7 @@ items={[
  {id: "2", text: "Fax"}
  ]}  />

-## Light variant
-
-Set `light` to `true` to use the light color scheme.
+### Light variant

 <ComboBox light titleText="Contact" placeholder="Select contact method"
 items={[
@ -105,9 +80,7 @@ items={[
  {id: "2", text: "Fax"}
  ]}  />

-## Extra-large size
-
-Set `size` to `"xl"` for an extra-large combobox.
+### Extra-large size

 <ComboBox titleText="Contact" placeholder="Select contact method"
 size="xl"
@ -117,9 +90,7 @@ items={[
  {id: "2", text: "Fax"}
  ]}  />

-## Small size
-
-Set `size` to `"sm"` for a small combobox.
+### Small size

 <ComboBox titleText="Contact" placeholder="Select contact method"
 size="sm"
@ -129,9 +100,7 @@ items={[
  {id: "2", text: "Fax"}
  ]}  />

-## Invalid state
-
-Set `invalid` to `true` and provide `invalidText` to show an error message.
+### Invalid state

 <ComboBox invalid invalidText="Secondary contact method must be different from the primary contact" titleText="Contact" placeholder="Select contact method"
 items={[
@ -140,9 +109,7 @@ items={[
  {id: "2", text: "Fax"}
  ]}  />

-## Warning state
-
-Set `warn` to `true` and provide `warnText` to show a warning message.
+### Warning state

 <ComboBox warn warnText="This contact method is not associated with your account" titleText="Contact" placeholder="Select contact method"
 items={[
@ -151,9 +118,7 @@ items={[
  {id: "2", text: "Fax"}
  ]}  />

-## Disabled state
-
-Set `disabled` to `true` to prevent interaction with the combobox.
+### Disabled state

 <ComboBox disabled titleText="Contact" placeholder="Select contact method"
 items={[
@ -162,9 +127,9 @@ items={[
  {id: "2", text: "Fax"}
  ]}  />

-## Disabled items
+### Disabled items

-Set `disabled: true` in an item object to disable specific options.
+Use the `disabled` property in the `items` prop to disable specific items.

 <ComboBox
  titleText="Contact"
--- a/docs/src/pages/components/ComposedModal.svx
+++ b/docs/src/pages/components/ComposedModal.svx
@ -6,16 +6,12 @@ components: ["ComposedModal", "ModalHeader", "ModalBody", "ModalFooter"]
  import Preview from "../../components/Preview.svelte";
 </script>

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

 <FileSource src="/framed/Modal/ComposedModal" />

-## Multiple secondary buttons
+### 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.
+Use the `secondaryButtons` prop in `ModalFooter` to render two secondary buttons for a "3-button modal". The prop is a 2-tuple type that supersedes `secondaryButtonText`.

 <FileSource src="/framed/Modal/3ButtonComposedModal" />
--- a/docs/src/pages/components/ContentSwitcher.svx
+++ b/docs/src/pages/components/ContentSwitcher.svx
@ -9,20 +9,14 @@ components: ["ContentSwitcher", "Switch"]
  import Preview from "../../components/Preview.svelte";
 </script>

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

 <ContentSwitcher>
  <Switch text="Latest news" />
  <Switch text="Trending" />
 </ContentSwitcher>

-## Initial selected index
-
-Set `selectedIndex` to pre-select a switch when the content switcher loads.
+### Initial selected index

 <ContentSwitcher selectedIndex={1}>
  <Switch text="Latest news" />
@ -30,17 +24,11 @@ Set `selectedIndex` to pre-select a switch when the content switcher loads.
  <Switch text="Recommended" />
 </ContentSwitcher>

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

 <FileSource src="/framed/ContentSwitcher/ContentSwitcherReactive" />

-## Custom switch slot
-
-Override the default slot in `Switch` to customize how each option displays.
+### Custom switch slot

 <ContentSwitcher>
  <Switch>
@ -55,27 +43,21 @@ Override the default slot in `Switch` to customize how each option displays.
  </Switch>
 </ContentSwitcher>

-## Extra-large size
-
-Set `size` to `"xl"` for an extra-large content switcher.
+### Extra-large size

 <ContentSwitcher size="xl">
  <Switch text="All" />
  <Switch text="Archived" />
 </ContentSwitcher>

-## Small size
-
-Set `size` to `"sm"` for a small content switcher.
+### Small size

 <ContentSwitcher size="sm">
  <Switch text="All" />
  <Switch text="Archived" />
 </ContentSwitcher>

-## Disabled
-
-Set `disabled` to `true` on individual switches to prevent interaction.
+### Disabled

 <ContentSwitcher>
  <Switch disabled text="All" />
--- a/docs/src/pages/components/ContextMenu.svx
+++ b/docs/src/pages/components/ContextMenu.svx
@ -6,32 +6,26 @@ components: ["ContextMenu", "ContextMenuGroup", "ContextMenuRadioGroup", "Contex
    import Preview from "../../components/Preview.svelte";
 </script>

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

-The context menu appears when right-clicking anywhere in the window. Use `ContextMenuOption` for menu items and `ContextMenuDivider` for visual separation.
+By default, the context menu will trigger when right clicking anywhere in the `window`.
  
 <FileSource src="/framed/ContextMenu/ContextMenu" />

-## Custom target
+### 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.
+Specify a custom `HTMLElement` using the `target` prop.

 <FileSource src="/framed/ContextMenu/ContextMenuTarget" />

-## Multiple targets
+### Multiple targets

-Set `target` to an array of elements to trigger the context menu from multiple sources.
+The `target` prop also accepts an array of elements.

 <FileSource src="/framed/ContextMenu/ContextMenuTargets" />

-## Radio groups
-
-Use `ContextMenuGroup` and `ContextMenuRadioGroup` to organize related options and create radio button selections.
-
+### Radio groups
+  
 <FileSource src="/framed/ContextMenu/ContextMenuGroups" />
--- a/docs/src/pages/components/CopyButton.svx
+++ b/docs/src/pages/components/CopyButton.svx
@ -3,32 +3,30 @@
  import Preview from "../../components/Preview.svelte";
 </script>

-`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.
+This component uses the native, asynchronous [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) to copy text.

-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).
+Please note that the `clipboard.writeText` API is not supported in [IE 11 nor Safari iOS version 13.3  or lower](https://caniuse.com/mdn-api_clipboard_writetext).

-## Default
+You can override the default copy functionality with your own implementation. See [Overriding copy functionality](#overriding-copy-functionality).

-Create a copy button with the `text` prop to specify what to copy.
+### Default

 <CopyButton text="Carbon svelte" />

-## Custom feedback text
-
-Set `feedback` to customize the message shown after copying.
+### Custom feedback text

 <CopyButton text="Carbon svelte" feedback="Copied to clipboard" />

-## Overriding copy functionality
+### Overriding copy functionality

-Pass a custom function to the `copy` prop to override the default copy behavior.
+To override the default copy behavior, pass a custom function to the `copy` prop.

-This example uses the NPM package [clipboard-copy](https://github.com/feross/clipboard-copy) to copy the text instead of the default Clipboard API.
+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.

 <FileSource src="/framed/CopyButton/CopyButtonOverride" />

-## Preventing copy functionality
+### Preventing copy functionality

-Pass a no-op function to the `copy` prop to disable copying.
+To prevent text from being copied entirely, pass a no-op function to the `copy` prop.

-<CopyButton text="This text should not be copied" copy={() => {}} />
+<CopyButton text="This text should not be copied" copy={() => {}} />
--- a/docs/src/pages/components/DataTable.svx
+++ b/docs/src/pages/components/DataTable.svx
@ -6,22 +6,25 @@ components: ["DataTable", "Pagination","Toolbar", "ToolbarContent", "ToolbarSear
  import { InlineNotification, DataTable, DataTableSkeleton, Pagination, Toolbar, ToolbarContent, ToolbarSearch, ToolbarMenu, ToolbarMenuItem, Button, Link } from "carbon-components-svelte";
  import Launch from "carbon-icons-svelte/lib/Launch.svelte";
  import Preview from "../../components/Preview.svelte";
+
+  const pagination = { pageSize: 5, page: 1}
 </script>

-`DataTable` displays structured data in a tabular format. Use it to present large datasets with features like sorting, filtering, pagination, and row selection.
+`DataTable` is keyed for performance reasons.

 <InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
-  <div class="body-short-01">
-    This component is keyed for performance.
-    
-    Every <strong>headers</strong> object must have a unique "key" property.
-    <div class="body-short-01">Every <strong>rows</strong> object must have a unique "id" property.</div>
-  </div>
+  <div class="body-short-01">Every <code>headers</code> object must have a unique "key" property.</div>
 </InlineNotification>

-## Default
+<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
+  <div class="body-short-01">Every <code>rows</code> object must have a unique "id" property.</div>
+</InlineNotification>

-Create a basic table by providing `headers` and `rows` data. Match the `key` in headers with the corresponding property in rows.
+### Default
+
+The key value in `headers` corresponds to the key value defined in `rows`.
+
+For example, the header key `"name"` will use the value of `rows[index].name`.

 <DataTable
  headers="{[
@ -76,9 +79,11 @@ Create a basic table by providing `headers` and `rows` data. Match the `key` in
  ]}"
 />

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

 <DataTable
  headers="{[
@ -148,9 +153,7 @@ Use the `"cell"` slot to customize cell content. Access row and cell data throug
  </svelte:fragment>
 </DataTable>

-## With title, description
-
-Add a title and description to provide context for the table data.
+### With title, description

 <DataTable title="Load balancers" description="Your organization's active load balancers."
  headers="{[
@ -205,9 +208,9 @@ Add a title and description to provide context for the table data.
  ]}"
 />

-## Slottable title, description
+### Slottable title, description

-Use slots to customize the title and description content.
+The `title` and `description` props are slottable.

 <DataTable
  headers="{[
@ -267,9 +270,9 @@ Use slots to customize the title and description content.
    </span>
 </DataTable>

-## Static width
+### Static width

-Set `useStaticWidth` to `true` to render the table with an auto width instead of 100%.
+Set `useStaticWidth` to `true` to render the table with a width of "auto" instead of "100%".

 <DataTable useStaticWidth
 title="Load balancers" description="Your organization's active load balancers."
@ -325,9 +328,11 @@ title="Load balancers" description="Your organization's active load balancers."
  ]}"
 />

-## Custom column widths
+### Custom column widths

-Specify `width` or `minWidth` in the `headers` object to set column dimensions. This applies a fixed table layout.
+Specify a `width` or `minWidth` property in the `headers` object to customize the width of each column.
+
+A [table-layout: fixed](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout#values) rule will be applied to the `table` element when using custom widths.

 <InlineNotification svx-ignore lowContrast kind="warning" title="Note:" hideCloseButton>
  <div class="body-short-01">Custom column widths do not work with a <a class="bx--link" href="#sticky-header">sticky header</a>.</div>
@ -335,9 +340,11 @@ Specify `width` or `minWidth` in the `headers` object to set column dimensions.

 <FileSource src="/framed/DataTable/DataTableHeaderWidth" />

-## Sticky header
+### Sticky header

-Set `stickyHeader` to `true` to fix the header in place. This adds a maximum height to force scrolling.
+Set `stickyHeader` to `true` for the header to be fixed in place.
+
+A maximum height will applied to the datatable to force a scrollbar.

 <DataTable
  stickyHeader
@ -356,9 +363,7 @@ Set `stickyHeader` to `true` to fix the header in place. This adds a maximum hei
  }))}
 />

-## With toolbar
-
-Add a toolbar with search, menu, and actions above the table.
+### With toolbar

 <DataTable title="Load balancers" description="Your organization's active load balancers."
  headers="{[
@ -427,9 +432,7 @@ Add a toolbar with search, menu, and actions above the table.
  </Toolbar>
 </DataTable>

-## With toolbar (small size)
-
-Use `size="short"` to create a more compact table with a small toolbar.
+### With toolbar (small size)

 <DataTable size="short" title="Load balancers" description="Your organization's active load balancers."
  headers="{[
@ -496,23 +499,23 @@ Use `size="short"` to create a more compact table with a small toolbar.
  </Toolbar>
 </DataTable>

-## Filterable
+### Filterable

-Set `shouldFilterRows` to `true` to enable client-side filtering. The default filter performs string comparisons on cell values.
+By default, `ToolbarSearch` will not filter `DataTable` rows.

-For pagination with filtering, bind to `filteredRowIds` and pass its length to `Pagination`'s `totalItems`.
+Set `shouldFilterRows` to `true` to enable client-side filtering. The default filtering performs a basic string comparison on cell values that are of a string or a number type.
+
+Note that in-memory filtering is not optimal for large data sets, where you might consider using server-side search.

 <FileSource src="/framed/DataTable/DataTableFilterable" />

-## Filterable (custom)
+### Filterable (custom)

-Pass a function to `shouldFilterRows` to implement custom filtering logic.
+`shouldFilterRows` also accepts a function and passes it the current row and value. It expects the function to return a boolean.

 <FileSource src="/framed/DataTable/DataTableFilterCustom" />

-## Zebra stripes
-
-Set `zebra` to `true` to add alternating row colors.
+### Zebra stripes

 <DataTable zebra
  headers="{[
@ -567,9 +570,7 @@ Set `zebra` to `true` to add alternating row colors.
  ]}"
 />

-## Tall rows
-
-Set `size="tall"` for increased row height.
+### Tall rows

 <DataTable size="tall"
  headers="{[
@ -624,9 +625,7 @@ Set `size="tall"` for increased row height.
  ]}"
 />

-## Medium rows
-
-Set `size="medium"` for standard row height.
+### Medium rows

 <DataTable size="medium"
  headers="{[
@ -681,9 +680,7 @@ Set `size="medium"` for standard row height.
  ]}"
 />

-## Short rows
-
-Set `size="short"` for compact row height.
+### Short rows

 <DataTable size="short"
  headers="{[
@ -738,9 +735,7 @@ Set `size="short"` for compact row height.
  ]}"
 />

-## Compact rows
-
-Set `size="compact"` for minimal row height.
+### Compact rows

 <DataTable size="compact"
  headers="{[
@ -795,9 +790,13 @@ Set `size="compact"` for minimal row height.
  ]}"
 />

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

 <DataTable sortable
  headers="{[
@ -852,15 +851,85 @@ Set `sortable` to `true` to enable column sorting. Disable sorting on specific c
  ]}"
 />

-## Sortable with pagination
+### Sortable with pagination

-Bind to `pageSize` and `page` props of `Pagination` and pass them to `DataTable`.
+If you want `DataTable` to sort the whole dataset but still display paginated content, you need to pass the whole dataset in the `rows` prop, 
+and then limit displayed content by using `pageSize` and `page` props, which are corresponding to the same props in the `Pagination` component.

-<FileSource src="/framed/DataTable/DataTablePagination" />
+<DataTable sortable title="Load balancers" description="Your organization's active load balancers."
+  headers="{[
+    { key: "name", value: "Name" },
+    { key: "protocol", value: "Protocol" },
+    { key: "port", value: "Port" },
+    { key: "cost", value: "Cost", display: (cost) => cost + " €" },
+    {
+      key: "expireDate",
+      value: "Expire date",
+      display: (date) => new Date(date).toLocaleString(),
+      sort: (a, b) => new Date(a) - new Date(b),
+    },
+  ]}"
+  pageSize={pagination.pageSize}
+  page={pagination.page}
+  rows="{[
+    {
+      id: "a",
+      name: "Load Balancer 3",
+      protocol: "HTTP",
+      port: 3000,
+      cost: 100,
+      expireDate: "2020-10-21",
+    },
+    {
+      id: "b",
+      name: "Load Balancer 1",
+      protocol: "HTTP",
+      port: 443,
+      cost: 200,
+      expireDate: "2020-09-10",
+    },
+    {
+      id: "c",
+      name: "Load Balancer 2",
+      protocol: "HTTP",
+      port: 80,
+      cost: 150,
+      expireDate: "2020-11-24",
+    },
+    {
+      id: "d",
+      name: "Load Balancer 6",
+      protocol: "HTTP",
+      port: 3000,
+      cost: 250,
+      expireDate: "2020-12-01",
+    },
+    {
+      id: "e",
+      name: "Load Balancer 4",
+      protocol: "HTTP",
+      port: 443,
+      cost: 550,
+      expireDate: "2021-03-21",
+    },
+    {
+      id: "f",
+      name: "Load Balancer 5",
+      protocol: "HTTP",
+      port: 80,
+      cost: 400,
+      expireDate: "2020-11-14",
+    },
+  ]}"
+/>
+<Pagination 
+  bind:pageSize={pagination.pageSize}
+  bind:page={pagination.page}
+  totalItems={6}
+  pageSizeInputDisabled
+/>

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

 <DataTable sortable title="Load balancers" description="Your organization's active load balancers."
  headers="{[
@ -927,9 +996,7 @@ Use `display` and `sort` functions in header objects to customize cell rendering
  ]}"
 />

-## Sortable with nested object values
-
-Access nested object properties using dot notation in the header key.
+### Sortable with nested object values

 <DataTable sortable title="Load balancers" description="Your organization's active load balancers."
           headers="{[
@ -1008,63 +1075,57 @@ Access nested object properties using dot notation in the header key.
  ]}"
 />

-## Programmatic sorting
+### 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".
+Use the reactive `sortKey` and `sortDirection` props for programmatic sorting.
+
+By default, the table is not sorted by a specific key. The `sortKey` value must be a valid `key` specified in the `headers` object.
+
+Possible values for `sortDirection` include `"none"` or `"ascending"` or `"descending"`.
+
+Setting `sortKey` to `null` and `sortDirection` to `"none"` should reset the table rows to their initial order.

 <FileSource src="/framed/DataTable/DataTableProgrammaticSorting" />

-## Empty column with overflow menu
+### 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.
+Some use cases require an empty column in the table body without a corresponding table header.
+
+For an object in the `headers` array, set `empty` to `true` to render an empty column.
+
+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.

 <FileSource src="/framed/DataTable/DataTableAppendColumns" />

-## Selectable rows (checkbox)
-
-Set `selectable` to `true` for multi-select functionality. Bind to `selectedRowIds` to track selections. Use `inputName` to customize checkbox names.
+### Selectable

 <FileSource src="/framed/DataTable/SelectableDataTable" />

-## 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.
+### Batch selection

 <FileSource src="/framed/DataTable/DataTableBatchSelection" />

-## Batch selection with initial selected rows
+### Batch selection with initial selected rows

-Use `selectedRowIds` to specify initially selected rows.
+Use the `selectedRowIds` prop to specify which rows should be selected.

 <FileSource src="/framed/DataTable/DataTableBatchSelectionInitial" />

-## Batch selection with batch actions toolbar
-
-Add a toolbar for batch actions when rows are selected.
+### Selectable with batch actions

 <FileSource src="/framed/DataTable/DataTableBatchSelectionToolbar" />

-## Batch selection with controlled toolbar
-
-Control the batch actions toolbar with the `active` prop. Prevent default cancel behavior in the `on:cancel` event.
-
-<FileSource src="/framed/DataTable/DataTableBatchSelectionToolbarControlled" />
-
-## 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)

 <FileSource src="/framed/DataTable/RadioSelectableDataTable" />

-## Non-selectable rows
+### Non-selectable rows

-Use `nonSelectableRowIds` to prevent selection of specific rows.
+Use `nonSelectableRowIds` to specify the ids for rows that should not be selectable.

 <FileSource src="/framed/DataTable/DataTableNonSelectableRows" />

-## Expandable rows
-
-Set `expandable` to `true` to make rows expandable. Use the `expanded-row` slot to customize expanded content.
+### Expandable

 <DataTable expandable
  headers="{[
@ -1123,21 +1184,17 @@ Set `expandable` to `true` to make rows expandable. Use the `expanded-row` slot
  </svelte:fragment>
 </DataTable>

-## Non-expandable rows
+### Non-expandable rows

-Use `nonExpandableRowIds` to prevent expansion of specific rows.
+Use `nonExpandableRowIds` to specify the ids for rows that should not be expandable.

 <FileSource src="/framed/DataTable/DataTableNonExpandableRows" />

-## Expandable (zebra styles)
-
-Combine expandable rows with zebra striping.
+### Expandable (zebra styles)

 <FileSource src="/framed/DataTable/DataTableExpandableZebra" />

-## Expandable (compact size)
-
-Set `size="compact"` for expandable rows with minimal height.
+### Expandable (compact size)

 <DataTable size="compact" expandable
  headers="{[
@ -1196,9 +1253,7 @@ Set `size="compact"` for expandable rows with minimal height.
  </svelte:fragment>
 </DataTable>

-## Expandable (short size)
-
-Set `size="short"` for expandable rows with compact height.
+### Expandable (short size)

 <DataTable size="short" expandable
  headers="{[
@ -1257,9 +1312,7 @@ Set `size="short"` for expandable rows with compact height.
  </svelte:fragment>
 </DataTable>

-## Expandable (tall size)
-
-Set `size="tall"` for expandable rows with increased height.
+### Expandable (tall size)

 <DataTable size="tall" expandable
  headers="{[
@ -1318,9 +1371,7 @@ Set `size="tall"` for expandable rows with increased height.
  </svelte:fragment>
 </DataTable>

-## Batch expansion
-
-Set `batchExpansion` to `true` to expand and collapse all rows at once.
+### Batch expansion

 <DataTable batchExpansion
  headers="{[
@ -1379,56 +1430,42 @@ Set `batchExpansion` to `true` to expand and collapse all rows at once.
  </svelte:fragment>
 </DataTable>

-## Expandable and selectable rows
-
-Combine `batchExpansion` and `batchSelection` for tables with both expandable and selectable rows.
+### Expandable and selectable

 <FileSource src="/framed/DataTable/DataTableExpandableSelectable" />

-## Skeleton
-
-Use `DataTableSkeleton` to show a loading state.
+### Skeleton

 <DataTableSkeleton />

-## Skeleton with headers, row count
-
-Specify headers and row count for the skeleton.
+### Skeleton with headers, row count

 <DataTableSkeleton headers={["Name", "Protocol", "Port", "Rule"]} rows={10} />

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

 <DataTableSkeleton headers={[{ value: "Name" }, {value: "Protocol"}, {value:"Port"}, { value: "Rule"}]} rows={10} />

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

 <DataTableSkeleton headers={[{ value: "Name" }, {value: "Protocol"}, {value:"Port"}, { value: "Rule"}, { empty: true }]} rows={10} />

-## Skeleton without header, toolbar
-
-Hide the header and toolbar in the skeleton.
+### Skeleton without header, toolbar

 <DataTableSkeleton showHeader={false} showToolbar={false} />

-## Skeleton (tall size)
-
-Set `size="tall"` for a taller skeleton.
+### Skeleton (tall size)

 <DataTableSkeleton showHeader={false} showToolbar={false} size="tall" />

-## Skeleton (short size)
-
-Set `size="short"` for a shorter skeleton.
+### Skeleton (short size)

 <DataTableSkeleton showHeader={false} showToolbar={false} size="short" />

-## Skeleton (compact size)
+### Skeleton (compact size)

-Set `size="compact"` for a minimal skeleton.
-
-<DataTableSkeleton showHeader={false} showToolbar={false} size="compact" />
+<DataTableSkeleton showHeader={false} showToolbar={false} size="compact" />
--- a/docs/src/pages/components/DatePicker.svx
+++ b/docs/src/pages/components/DatePicker.svx
@ -7,7 +7,11 @@ components: ["DatePicker", "DatePickerInput", "DatePickerSkeleton"]
  import Preview from "../../components/Preview.svelte";
 </script>

-`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.
+Carbon uses the zero dependency [flatpickr](https://github.com/flatpickr/flatpickr) library for its underlying calendar implementation.
+
+Set `datePickerType` to `"single"` or `"range"` for the calendar functionality.
+
+Specify [flatpickr options](https://flatpickr.js.org/options/) through the `flatpickrProps` prop.

 <InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
  <div class="body-short-01">
@ -15,100 +19,80 @@ components: ["DatePicker", "DatePickerInput", "DatePickerSkeleton"]
  </div>
 </InlineNotification>

-## Single
+### Single

-Set `datePickerType` to `"single"` for single date selection.
+By default, the `flatpickr` option `static` is set to `true` so that the calendar is positioned inside the wrapper and next to the input element. This is required for the calendar position to work inside a [Modal](/components/Modal).
+
+Set `flatpickrProps.static` to `false` to opt out of this behavior.

 <FileSource src="/framed/DatePicker/DatePickerSingle" />

-## Range
+### Range

-Set `datePickerType` to `"range"` to enable date range selection.
+Set `datePickerType` to `"range"` for the range variant.

 <FileSource src="/framed/DatePicker/DatePickerRange" />

-## 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.
+### DatePicker in a modal

 <FileSource src="/framed/DatePicker/DatePickerModal" />

-## Simple
+### Simple

-Create a simple date picker without a dropdown calendar.
+By default, the "simple" date picker does not have a dropdown calendar.

 <DatePicker>
  <DatePickerInput labelText="Date of birth" placeholder="mm/dd/yyyy" />
 </DatePicker>

-## With helper text
-
-Add helper text to provide additional context or formatting instructions.
+### With helper text

 <DatePicker>
  <DatePickerInput labelText="Date of birth" helperText="Example: 01/12/1990" placeholder="mm/dd/yyyy" />
 </DatePicker>

-## Hidden label
-
-Hide the label while maintaining accessibility.
+### Hidden label

 <DatePicker>
  <DatePickerInput hideLabel labelText="Date of birth" placeholder="mm/dd/yyyy" />
 </DatePicker>

-## Light variant
-
-Use the light variant for light backgrounds.
+### Light variant

 <DatePicker light>
  <DatePickerInput labelText="Date of birth" placeholder="mm/dd/yyyy" />
 </DatePicker>

-## Extra-large size
-
-Use the extra-large size for more prominent date pickers.
+### Extra-large size

 <DatePicker>
  <DatePickerInput size="xl" labelText="Date of birth" placeholder="mm/dd/yyyy" />
 </DatePicker>

-## Small size
-
-Use the small size for compact date pickers.
+### Small size

 <DatePicker>
  <DatePickerInput size="sm" labelText="Date of birth" placeholder="mm/dd/yyyy" />
 </DatePicker>

-## Invalid state
-
-Show an invalid state when the input value is not valid.
+### Invalid state

 <DatePicker>
  <DatePickerInput invalid invalidText="Invalid date" labelText="Date of birth" placeholder="mm/dd/yyyy" />
 </DatePicker>

-## Warning state
-
-Show a warning state to indicate potential issues with the input.
+### Warning state

 <DatePicker>
  <DatePickerInput warn warnText="This info will not be stored" labelText="Date of birth" placeholder="mm/dd/yyyy" />
 </DatePicker>

-## Disabled state
-
-Disable the date picker to prevent user interaction.
+### Disabled state

 <DatePicker>
  <DatePickerInput disabled labelText="Date of birth" placeholder="mm/dd/yyyy" />
 </DatePicker>

-## Skeleton
-
-Show a loading state with the skeleton component.
+### Skeleton

 <DatePickerSkeleton />
--- a/docs/src/pages/components/Dropdown.svx
+++ b/docs/src/pages/components/Dropdown.svx
@ -7,43 +7,33 @@ components: ["Dropdown", "DropdownSkeleton"]
  import Preview from "../../components/Preview.svelte";
 </script>

-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.
+`Dropdown` is keyed for performance reasons.

 <InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
  <div class="body-short-01">Every <code>items</code> object must have a unique "id" property.</div>
 </InlineNotification>

-## Default
-
-Use the `Dropdown` component to create a select input with a dropdown menu. Each item
-must have a unique `id` property.
+### Default

 <Dropdown titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
  {id: "1", text: "Email"},
  {id: "2", text: "Fax"}]}" />

-## Custom slot
+### Custom slot

-Override the default slot to customize the display of each item. Access the item and
-index through the `let:` directive.
+Override the default slot to customize the display of each item. Access the item and index through the `let:` directive.

 <FileSource src="/framed/Dropdown/DropdownSlot" />

-## Hidden label
-
-Hide the label while maintaining accessibility by setting the `hideLabel` prop to
-`true`. The label will still be available to screen readers.
+### Hidden label

 <Dropdown hideLabel titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
  {id: "1", text: "Email"},
  {id: "2", text: "Fax"}]}" />

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

 <Dropdown itemToString={item => {
  return item.text + ' (' + item.id +')'
@ -51,90 +41,63 @@ receives the item object and returns the formatted string.
  {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

 <FileSource src="/framed/Dropdown/MultipleDropdown" />

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

 <Dropdown direction="top" titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
  {id: "1", text: "Email"},
  {id: "2", text: "Fax"}]}" />

-## Light variant
-
-Use the light variant for dropdowns on dark backgrounds by setting the `light` prop
-to `true`.
+### Light variant

 <Dropdown light titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
  {id: "1", text: "Email"},
  {id: "2", text: "Fax"}]}" />

-## Inline variant
-
-Display the dropdown inline with other content by setting the `type` prop to
-`"inline"`. This variant removes the background and border.
+### Inline variant

 <Dropdown type="inline" titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
  {id: "1", text: "Email"},
  {id: "2", text: "Fax"}]}" />

-## Extra-large size
-
-Increase the size of the dropdown by setting the `size` prop to `"xl"`. This
-provides more visual emphasis for important selections.
+### Extra-large size

 <Dropdown size="xl" titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
  {id: "1", text: "Email"},
  {id: "2", text: "Fax"}]}" />

-## Small size
-
-Decrease the size of the dropdown by setting the `size` prop to `"sm"`. This is
-useful for compact layouts or secondary selections.
+### Small size

 <Dropdown size="sm" titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
  {id: "1", text: "Email"},
  {id: "2", text: "Fax"}]}" />

-## Invalid state
-
-Indicate an invalid selection by setting the `invalid` prop to `true`. Provide
-feedback to users with the `invalidText` prop.
+### Invalid state

 <Dropdown invalid invalidText="Secondary contact method must be different from the primary contact" titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
  {id: "1", text: "Email"},
  {id: "2", text: "Fax"}]}" />

-## Warning state
-
-Indicate a warning state by setting the `warn` prop to `true`. Provide additional
-context with the `warnText` prop.
+### Warning state

 <Dropdown warn warnText="This contact method is not associated with your account" titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
  {id: "1", text: "Email"},
  {id: "2", text: "Fax"}]}" />

-## Disabled state
-
-Disable the entire dropdown by setting the `disabled` prop to `true`. This prevents
-user interaction with the component.
+### Disabled state

 <Dropdown disabled titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
  {id: "1", text: "Email"},
  {id: "2", text: "Fax"}]}" />

-## Disabled items
+### 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.
+Use the `disabled` property in the `items` prop to disable specific items.

 <Dropdown
  selectedId="0"
@ -146,9 +109,6 @@ selections.
  ]}
 />

-## Skeleton
-
-Display a loading state using the `DropdownSkeleton` component. This provides
-visual feedback while the dropdown content is being loaded.
+### Skeleton

 <DropdownSkeleton />
--- a/docs/src/pages/components/ExpandableTile.svx
+++ b/docs/src/pages/components/ExpandableTile.svx
@ -1,94 +1,36 @@
+---
+source: Tile/ExpandableTile.svelte
+---
+
 <script>
-  import { ExpandableTile, Button } from "carbon-components-svelte";
+  import { ExpandableTile } from "carbon-components-svelte";
  import Preview from "../../components/Preview.svelte";
 </script>

-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.
-
-<ExpandableTile>
-  <div slot="above">
-    <div>
-      Above the fold content here
-    </div>
-    <br />
-    <br />
-    <div>
-      More above the fold content
-    </div>
-  </div>
-  <div slot="below">Below the fold content here</div>
-</ExpandableTile>
-
-## Custom tile heights
-
-Set 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)

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

-## Expanded
-
-Display the tile in its expanded state by default by setting the `expanded` prop to
-`true`.
+### Expanded

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

-## Light variant
-
-Use the light variant for expandable tiles on dark backgrounds by setting the
-`light` prop to `true`.
+### Light variant

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

-## With icon labels
-
-Customize the expand/collapse button labels using the `tileExpandedLabel` and
-`tileCollapsedLabel` props.
+### With icon labels

 <ExpandableTile tileExpandedLabel="View less" tileCollapsedLabel="View more">
-  <div slot="above">Above the fold content here</div>
-  <div slot="below">Below the fold content here</div>
-</ExpandableTile>
-
-## 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.
-
-<ExpandableTile tileExpandedLabel="View less" tileCollapsedLabel="View more">
-  <div slot="above">
-    <a href="/" on:click|preventDefault|stopPropagation={() => console.log("Hello world")}>
-      Native element
-    </a>
-    <br /><br />
-    <Button on:click={e => {
-      e.stopPropagation();
-      console.log("Hello world");
-    }}>
-      Svelte component
-    </Button>
-  </div>
-  <div slot="below">Below the fold content here</div>
-</ExpandableTile>
+  <div slot="above" style="height: 10rem">Above the fold content here</div>
+  <div slot="below" style="height: 10rem">Below the fold content here</div>
+</ExpandableTile>
--- a/docs/src/pages/components/FileUploader.svx
+++ b/docs/src/pages/components/FileUploader.svx
@ -7,47 +7,27 @@ components: ["FileUploaderButton", "FileUploader", "FileUploaderDropContainer",
  import Preview from "../../components/Preview.svelte";
 </script>

-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)
+By default, the file uploader only accepts one file.

-Create a simple file upload button using `FileUploaderButton`. By default, it
-accepts a single file. Set `multiple` to `true` to allow multiple file selection.
+Set `multiple` to `true` for multiple files to be uploaded.

-<FileUploaderButton labelText="Add file" />
+<FileUploaderButton labelText="Add files" />

-## Multiple files
+### File uploader

-Enable multiple file selection by setting the `multiple` prop to `true`. This
-allows users to select multiple files at once.
+The `FileUploader` wraps `FileUploaderButton` and lists out uploaded files.

-<FileUploaderButton multiple labelText="Add files" />
+The example below accepts multiple files with an extension of `.jpg` or `.jpeg`. It sets the status to `"complete"`; by default, the status is `"loading"`.

-## Custom button kind, size
-
-Customize the button appearance using the `kind` and `size` props. The default is
-a small primary button.
-
-<FileUploaderButton kind="secondary" size="field" />
-<FileUploaderButton kind="tertiary" size="default" />
-<FileUploaderButton kind="danger" size="lg" />
-<FileUploaderButton kind="danger-tertiary" size="xl" />
-
-## 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.
+See the [item examples below](#item-uploading) for different statuses.

 <FileUploader multiple labelTitle="Upload files" buttonLabel="Add files" labelDescription="Only JPEG files are accepted." accept="{['.jpg', '.jpeg']}" status="complete" />

-## Clear files
+### Clear files

-Remove uploaded files from the `FileUploader` component in two ways:
+There are two ways to clear files in `FileUploader`:

 <UnorderedList svx-ignore style="margin-bottom: var(--cds-spacing-08)">
  <ListItem>programmatically using the <strong>clearFiles</strong> accessor</ListItem>
@ -56,47 +36,37 @@ Remove uploaded files from the `FileUploader` component in two ways:

 <FileSource src="/framed/FileUploader/FileUploaderClearFiles" />

-## File uploader (disabled state)
-
-Disable the file uploader by setting the `disabled` prop to `true`. This prevents
-user interaction with the component.
+### File uploader (disabled state)

 <FileUploader disabled multiple labelTitle="Upload files" buttonLabel="Add files" labelDescription="Only JPEG files are accepted." accept="{['.jpg', '.jpeg']}" status="complete" />

-## Item (uploading)
-
-Display a file upload in progress using the `uploading` status. This shows a
-loading indicator and the file name.
+### Item (uploading)

 <FileUploaderItem name="README.md" status="uploading" />

-## Item (complete)
-
-Show a successfully uploaded file using the `complete` status. This displays a
-checkmark icon next to the file name.
+### Item (complete)

 <FileUploaderItem name="README.md" status="complete" />

-## Item (edit)
+### Item (edit)

-Enable file deletion by setting the status to `"edit"`. Clicking the close icon
-dispatches a `delete` event with the item's ID.
+If the `status` is `"edit"`, clicking the close icon will dispatch a `delete` event.
+
+The event detail contains the item `id`.

 <FileUploaderItem id="readme" name="README.md" status="edit" on:delete={(e) => {
  console.log(e.detail); // "readme"
 }} />

-## Item (edit status, invalid state)
+### 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.
+An item can also have an edit status with an invalid state.

 <FileUploaderItem invalid id="readme" name="README.md" status="edit" on:delete />

-## Item (edit status, invalid state with subject, body)
+### 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.
+Use the `errorSubject` and `errorBody` props to customize the error message.

 <FileUploaderItem
  invalid
@ -108,22 +78,21 @@ Provide detailed error messages for invalid files using the `errorSubject` and
  on:delete
 />

-## Item sizes
+### Item sizes

-Customize the size of file uploader items using the `size` prop. The default size
-is "default".
+The default `FileUploaderItem` size is "default".

 <FileUploaderItem size="default" name="README.md" status="uploading" />
 <FileUploaderItem size="field" name="README.md" status="uploading" />
 <FileUploaderItem size="small" name="README.md" status="uploading" />

-## Drop container
+### Drop container

-Use `FileUploaderDropContainer` for drag-and-drop file uploads. It supports file
-validation and multiple file selection.
+The `FileUploaderDropContainer` accepts files through click and drop events.

-This example accepts files smaller than 1 kB and logs the selected files to the
-console.
+Use the `validateFiles` prop to filter out files before they are set.
+
+The following example accepts files smaller than 1 kB.

 <FileUploaderDropContainer
  multiple
@ -136,9 +105,6 @@ console.
  }}
 />

-## Skeleton
-
-Display a loading state using the `FileUploaderSkeleton` component. This provides
-visual feedback while the file uploader content is being loaded.
+### Skeleton

 <FileUploaderSkeleton />
--- a/docs/src/pages/components/FluidForm.svx
+++ b/docs/src/pages/components/FluidForm.svx
@ -7,15 +7,9 @@
  import Preview from "../../components/Preview.svelte";
 </script>

-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

-## Fluid form
-
-Create a fluid-width form layout using the `FluidForm` component. This example
-shows a basic login form with required fields.
+Note that the `inline` input variants cannot be used within a `FluidForm`.

 <FluidForm>
  <TextInput labelText="User name" placeholder="Enter user name..." required />
@ -27,10 +21,6 @@ shows a basic login form with required fields.
  />
 </FluidForm>

-## 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.
+### Invalid state

 <FileSource src="/framed/FluidForm/FluidFormInvalid" />
--- 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";
 </script>

-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

 <Form on:submit>
  <FormGroup legendText="Checkboxes">
@ -53,7 +46,7 @@ shows a form with checkboxes, radio buttons, and a select menu.
    </RadioButtonGroup>
  </FormGroup>
  <FormGroup>
-  <Select id="select-1" labelText="Select menu">
+  <Select id="select-1" labelText="Select menu" value="placeholder-item">
    <SelectItem
      disabled
      hidden
@ -68,11 +61,9 @@ shows a form with checkboxes, radio buttons, and a select menu.
  <Button type="submit">Submit</Button>
 </Form>

-## Prevent default behavior
+### 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.
+The forwarded `submit` event is not modified. Use `e.preventDefault()` to prevent the native form submission behavior.

 <Form on:submit={e => {
  e.preventDefault();
--- 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";
 </script>

-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

 <FileSource src="/framed/Grid/Grid" />

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

 <FileSource src="/framed/Grid/FullWidthGrid" />

-## Narrow
-
-Create a more compact grid layout using the narrow variant. This reduces the
-spacing between columns.
+### Narrow

 <FileSource src="/framed/Grid/NarrowGrid" />

-## Condensed
-
-Use the condensed variant for even tighter spacing between columns. This is ideal
-for dense data displays.
+### Condensed

 <FileSource src="/framed/Grid/CondensedGrid" />

-## Responsive
-
-Build responsive layouts by specifying different column widths for different
-breakpoints. The grid automatically adjusts based on screen size.
+### Responsive

 <FileSource src="/framed/Grid/ResponsiveGrid" />

-## Offset columns
-
-Create space between columns using the offset feature. This allows for more
-flexible layouts without empty columns.
+### Offset columns

 <FileSource src="/framed/Grid/OffsetColumns" />

-## Aspect ratio columns
-
-Maintain consistent column heights using aspect ratio columns. This ensures
-content alignment across different column widths.
+### Aspect ratio columns

 <FileSource src="/framed/Grid/AspectRatioColumns" />

-## Padded columns
-
-Add padding to columns using the padded variant. This creates more breathing room
-between content.
+### Padded columns

 <FileSource src="/framed/Grid/PaddedGrid" />
--- a/docs/src/pages/components/ImageLoader.svx
+++ b/docs/src/pages/components/ImageLoader.svx
@ -5,22 +5,15 @@
    let key = 0;
 </script>

-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
+  
 <ImageLoader src="https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg" />

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

 <ImageLoader src="https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg">
    <svelte:fragment slot="loading">
@ -31,34 +24,23 @@ to display a loading indicator and error message.
    </svelte:fragment>
 </ImageLoader>

-## 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"`, `"2x3"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"3x2"`, `"9x16"` and `"1x2"`.
  
 <ImageLoader ratio="16x9" src="https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg" />

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

 <Button kind="ghost" on:click="{() => { key++;}}">Reload image</Button>
 {#key key}<ImageLoader fadeIn ratio="16x9" src="https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg" />{/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.

-<FileSource src="/framed/ImageLoader/ProgrammaticImageLoader" />
-
-## Dynamic image source
-
-Update the image source dynamically using the same `ImageLoader` instance. This
-allows for smooth transitions between different images.
-
-<FileSource src="/framed/ImageLoader/DynamicImageLoader" />
+<FileSource src="/framed/ImageLoader/ProgrammaticImageLoader" />
--- a/docs/src/pages/components/InlineLoading.svx
+++ b/docs/src/pages/components/InlineLoading.svx
@ -1,44 +1,23 @@
---
-components: ["InlineLoading"]
---
-
 <script>
-  import { InlineLoading, UnorderedList, ListItem } from "carbon-components-svelte";
+  import { InlineLoading } from "carbon-components-svelte";
  import Preview from "../../components/Preview.svelte";
 </script>

-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

 <InlineLoading />

-## With description
-
-Add a descriptive text to provide context about the loading operation.
+### With description

 <InlineLoading description="Loading metrics..." />

-## Status states
-
-The component supports different status states to indicate progress:
-
-<UnorderedList svx-ignore style="margin-bottom: var(--cds-spacing-08)">
-  <ListItem><strong>active</strong>: Shows an animated loading indicator</ListItem>
-  <ListItem><strong>inactive</strong>: Displays a static state</ListItem>
-  <ListItem><strong>finished</strong>: Shows a success state</ListItem>
-  <ListItem><strong>error</strong>: Displays an error state</ListItem>
-</UnorderedList>
+### Status states

 <InlineLoading status="active" description="Submitting..." />
 <InlineLoading status="inactive" description="Cancelling..." />
 <InlineLoading status="finished" description="Success" />
 <InlineLoading status="error" description="An error occurred" />

-## UX example
-
-See how to integrate the loading indicator in a real-world scenario.
+### UX example

 <FileSource src="/framed/InlineLoading/InlineLoadingUx" />
--- 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
 ---

 <script>
@ -7,55 +7,37 @@ components: ["InlineNotification", "NotificationActionButton"]
  import Preview from "../../components/Preview.svelte";
 </script>

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

 <InlineNotification title="Error:" subtitle="An internal server error occurred." />

-## Prevent default close behavior
+### Prevent default close behavior

-The component is controlled, allowing you to prevent the default close behavior using `e.preventDefault()`.
+`InlineNotification` is a controlled component. Prevent the default close behavior using the `e.preventDefault()` method in the dispatched `on:close` event.
+
+<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
+  <div class="body-short-01">
+    Svelte version 3.48.0 or greater is required.
+  </div>
+</InlineNotification>

 <InlineNotification title="Error" subtitle="An internal server error occurred." on:close={(e) => {
  e.preventDefault();
  // custom close logic (e.g., transitions)
 }} />

-## Slottable title and subtitle
-
-Customize the notification content using slots for more flexibility.
+### Slottable title, subtitle

 <InlineNotification>
  <strong slot="title">Error: </strong>
  <strong slot="subtitle">An internal server error occurred.</strong>
 </InlineNotification>

-## Accessible icon descriptions
-
-Make notifications more accessible by providing custom descriptions for icons.
-
-<InlineNotification 
-  title="错误"
-  subtitle="发生内部服务器错误"
-  statusIconDescription="错误图标"
-  closeButtonDescription="关闭通知"
-/>
-
-## Hidden close button
-
-Create a persistent notification by hiding the close button.
+### Hidden close button

 <InlineNotification hideCloseButton kind="warning" title="Scheduled maintenance:" subtitle="Maintenance will last 2-4 hours." />

-## With actions
-
-Add interactive elements to notifications using the actions slot.
+### With actions

 <InlineNotification kind="warning" title="Scheduled maintenance:" subtitle="Maintenance will last 2-4 hours.">
  <svelte:fragment slot="actions">
@ -63,9 +45,7 @@ Add interactive elements to notifications using the actions slot.
  </svelte:fragment>
 </InlineNotification>

-## Notification variants
-
-The component supports different notification types:
+### Notification variants

 <InlineNotification kind="error" title="Error:" subtitle="An internal server error occurred." />
 <InlineNotification kind="info" title="New updates:" subtitle="Restart to get the latest updates." />
@ -74,9 +54,7 @@ The component supports different notification types:
 <InlineNotification kind="warning" title="Scheduled maintenance:" subtitle="Maintenance will last 2-4 hours." />
 <InlineNotification kind="warning-alt" title="Scheduled maintenance:" subtitle="Maintenance will last 2-4 hours." />

-## Low contrast
-
-Use low contrast variants for less prominent notifications.
+### Low contrast

 <InlineNotification lowContrast kind="error" title="Error:" subtitle="An internal server error occurred." />
 <InlineNotification lowContrast kind="info" title="New updates:" subtitle="Restart to get the latest updates." />
--- a/docs/src/pages/components/Link.svx
+++ b/docs/src/pages/components/Link.svx
@ -8,35 +8,31 @@ components: ["Link", "OutboundLink"]
  import Preview from "../../components/Preview.svelte";
 </script>

-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
-
-Create a basic link with the default styling.
+### Default

 <Link href="https://www.carbondesignsystem.com/">
  Carbon Design System
 </Link>

-## Target _blank
+### Target _blank

-For external links, the component automatically adds security attributes. You can override the `rel` attribute if needed.
+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/).
+
+You can override the `rel` attribute with a custom value.

 <Link href="https://www.carbondesignsystem.com/" target="_blank">
  Carbon Design System
 </Link>

-## Outbound link
+### Outbound link

-Use `OutboundLink` as a convenient alternative for external links.
+An alternative to manually setting `target` to `"_blank"` is to use the `OutboundLink`.

 <OutboundLink href="https://www.carbondesignsystem.com/">
  Carbon Design System
 </OutboundLink>

-## Inline variant
-
-Create links that flow naturally with surrounding text.
+### Inline variant

 <div>
  Visit the
@ -45,9 +41,9 @@ Create links that flow naturally with surrounding text.
  </Link>.
 </div>

-## Link with icon
+### Link with icon

-Add icons to links for better visual context. Note that `inline` must be `false` when using icons.
+Note that `inline` must be `false` when rendering a link with an icon.

 <div>
  Visit the
@ -56,34 +52,28 @@ Add icons to links for better visual context. Note that `inline` must be `false`
  </Link>.
 </div>

-## Size variants
-
-The component supports different sizes to match your design needs:
+### Large size

 <Link size="lg" href="https://www.carbondesignsystem.com/">
-  Large link
+  Carbon Design System
 </Link>
-<br />
-<Link href="https://www.carbondesignsystem.com/">
-  Default link
-</Link>
-<br />
+
+### Small size
+
 <Link size="sm" href="https://www.carbondesignsystem.com/">
-  Small link
+  Carbon Design System
 </Link>

-## Disabled state
+### Disabled

-Disabled links render as plain text while maintaining accessibility.
+A `disabled` link will render a `p` tag instead of an anchor element.

 <Link disabled href="https://www.carbondesignsystem.com/">
-  Disabled link
+  Carbon Design System
 </Link>

-## Visited styles
-
-Show visited state styling for links.
+### Visited styles

 <Link visited href="https://www.carbondesignsystem.com/">
-  Visited link
+  Carbon Design System
 </Link>
--- a/docs/src/pages/components/Loading.svx
+++ b/docs/src/pages/components/Loading.svx
@ -1,28 +1,16 @@
---
-components: ["Loading"]
---
-
 <script>
  import { Loading } from "carbon-components-svelte";
  import Preview from "../../components/Preview.svelte";
 </script>

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

 <FileSource src="/framed/Loading/Loading" />

-## No overlay
-
-Show a loading indicator without the overlay, allowing interaction with the underlying content.
+### No overlay

 <Loading withOverlay={false} />

-## Small size
-
-Display a more compact loading indicator.
+### Small size

 <Loading withOverlay={false} small />
--- a/docs/src/pages/components/LocalStorage.svx
+++ b/docs/src/pages/components/LocalStorage.svx
@ -1,26 +1,23 @@
---
-components: ["LocalStorage"]
---
-
 <script>
  import Preview from "../../components/Preview.svelte";
 </script>

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

+In the example below, toggle the switch and reload the page. The updated theme should be persisted locally.
+  
 <FileSource src="/framed/LocalStorage/LocalStorage" />

-## Clear item, clear all
+### Clear item, clear all

-The component provides methods to manage stored data:
+Use the `bind:this` directive to access the `clearItem` and `clearAll` methods.

- `clearItem`: Remove a specific key-value pair
- `clearAll`: Remove all stored data
+Invoking `clearItem` will remove the persisted key value from the browser's local storage.

-Use `bind:this` to access these methods. In this example, try toggling the switch, refreshing the page, then clearing the storage.
+Invoking `clearAll` will remove all key values.
+
+In the following example, toggle the switch and reload the page. Then, click the "Clear storage" button. Refresh the page; the theme should be reset to the untoggled state.

 <FileSource src="/framed/LocalStorage/LocalStorageClear" />
--- a/docs/src/pages/components/Modal.svx
+++ b/docs/src/pages/components/Modal.svx
@ -2,78 +2,60 @@
  import Preview from "../../components/Preview.svelte";
 </script>

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

 <FileSource src="/framed/Modal/Modal" />

-## Custom focus
+### Custom focus

-Control which element receives focus when the modal opens. Use `selectorPrimaryFocus` to specify the target element using CSS selectors.
+By default, the modal close button will be focused when opened.
+
+Use the `selectorPrimaryFocus` to specify the element that should be focused when the modal is opened (e.g., `#id`, `.class`, `[data-attribute]`).

 <FileSource src="/framed/Modal/ModalCustomFocus" />

-## Danger modal
-
-Display critical actions or destructive operations with the danger variant. This style emphasizes the severity of the action.
+### Danger modal

 <FileSource src="/framed/Modal/DangerModal" />

-## Passive modal
-
-Create a non-interactive modal for displaying information. This variant lacks action buttons and focuses on content presentation.
+### Passive modal

 <FileSource src="/framed/Modal/PassiveModal" />

-## Has scrolling content
+### Has scrolling content

-Enable vertical scrolling for modals with lengthy content. This ensures all content remains accessible while maintaining a reasonable modal height.
+Setting `hasScrollingContent` to `true` increases the vertical space within the modal.

 <FileSource src="/framed/Modal/ModalScrollingContent" />

-## Multiple modals
-
-Stack multiple modals for complex workflows. Each modal maintains its own state and focus management.
+### Multiple modals

 <FileSource src="/framed/Modal/ModalMultiple" />

-## Multiple secondary buttons
+### Multiple secondary buttons

-Add up to two secondary actions using the `secondaryButtons` prop. This provides more flexibility than the single `secondaryButtonText` option.
+Use the `secondaryButtons` prop to render two secondary buttons. The prop is a 2-tuple type that supersedes `secondaryButtonText`.

 <FileSource src="/framed/Modal/3ButtonModal" />

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

 <FileSource src="/framed/Modal/ModalExtraSmall" />

-## Small size
-
-Use the small size for simple confirmations by setting `size` to `"sm"`. This provides a more focused dialog.
+### Small size

 <FileSource src="/framed/Modal/ModalSmall" />

-## Large size
-
-Use the large size for complex content by setting `size` to `"lg"`. This provides more space for detailed information.
+### Large size

 <FileSource src="/framed/Modal/ModalLarge" />

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

 <FileSource src="/framed/Modal/ModalPreventOutsideClick" />

-## Button with icon
-
-Enhance modal buttons with icons for better visual context and clarity. This example shows how to add icons to modal actions.
+### Button with icon

 <FileSource src="/framed/Modal/ModalButtonWithIcon" />
--- a/docs/src/pages/components/MultiSelect.svx
+++ b/docs/src/pages/components/MultiSelect.svx
@ -3,15 +3,15 @@
  import Preview from "../../components/Preview.svelte";
 </script>

-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.
+`MultiSelect` is keyed for performance reasons.

 <InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
  <div class="body-short-01">Every <code>items</code> object must have a unique "id" property.</div>
 </InlineNotification>

-## Default
+### 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).

 <MultiSelect titleText="Contact" label="Select contact methods..."
    items="{[{id: "0", text: "Slack"},
@ -19,9 +19,50 @@ Create a basic multi-select dropdown with three contact methods. By default, ite
    {id: "2", text: "Fax"}]}"
  />

-## Format item display text
+### Custom slot

-Format the display text of items using the `itemToString` prop. This example appends the item ID in parentheses.
+Override the default slot to customize the display of each item. Access the item and index through the `let:` directive.
+
+<FileSource src="/framed/MultiSelect/MultiSelectSlot" />
+
+### No alphabetical ordering
+
+To prevent alphabetical item ordering, pass an empty function to the `sortItem` prop.
+
+<MultiSelect titleText="Contact" label="Select contact methods..."
+    items="{[{id: "0", text: "Slack"},
+    {id: "1", text: "Email"},
+    {id: "2", text: "Fax"}]}" 
+    sortItem="{() => {}}"
+  />
+
+### Filterable
+
+`$$restProps` are spread to the underlying input element.
+
+<MultiSelect spellcheck="false" filterable titleText="Contact" placeholder="Filter contact methods..."
+    items="{[{id: "0", text: "Slack"},
+    {id: "1", text: "Email"},
+    {id: "2", text: "Fax"}]}"
+  />
+
+### Initial selected items
+
+To select (or bind) items, pass an array of item ids to `selectedIds`.
+
+<MultiSelect selectedIds="{["0", "1"]}" titleText="Contact" label="Select contact methods..."
+    items="{[{id: "0", text: "Slack"},
+    {id: "1", text: "Email"},
+    {id: "2", text: "Fax"}]}" 
+  />
+
+### Multiple multi-select dropdowns
+
+<FileSource src="/framed/MultiSelect/MultipleMultiSelect" />
+
+### Format item display text
+
+Use the `itemToString` prop to format the display of individual items.

 <MultiSelect itemToString={item => {
  return item.text + ' (' + item.id +')'
@ -32,83 +73,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.
-
-<FileSource src="/framed/MultiSelect/MultiSelectSlot" />
-
-## No alphabetical ordering
-
-Prevent automatic alphabetical ordering by passing a no-op function to `sortItem`. This maintains the original order of items.
-
-<MultiSelect titleText="Contact" label="Select contact methods..."
-    items="{[{id: "0", text: "Slack"},
-    {id: "1", text: "Email"},
-    {id: "2", text: "Fax"}]}" 
-    sortItem="{() => {}}"
-  />
-
-## Filterable
-
-Enable filtering by setting `filterable` to `true`. This example includes a placeholder text for the filter input.
-
-<MultiSelect spellcheck="false" filterable titleText="Contact" placeholder="Filter contact methods..."
-    items="{[{id: "0", text: "Slack"},
-    {id: "1", text: "Email"},
-    {id: "2", text: "Fax"}]}"
-  />
-
-## Initial selected items
-
-Pre-select items by passing an array of item IDs to `selectedIds`. This example pre-selects Slack and Email.
-
-<MultiSelect selectedIds="{["0", "1"]}" titleText="Contact" label="Select contact methods..."
-    items="{[{id: "0", text: "Slack"},
-    {id: "1", text: "Email"},
-    {id: "2", text: "Fax"}]}" 
-  />
-
-## Multiple multi-select dropdowns
-
-This example demonstrates how to manage multiple dropdowns in a form with coordinated state.
-
-<FileSource src="/framed/MultiSelect/MultipleMultiSelect" />
-
-## 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.
-
-<MultiSelect
-  itemToInput={(item) => ({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.

 <MultiSelect direction="top" titleText="Contact" label="Select contact methods..."
    items="{[{id: "0", text: "Slack"},
@ -116,9 +83,7 @@ Display the dropdown menu above the input by setting `direction` to `"top"`. Thi
    {id: "2", text: "Fax"}]}"
  />

-## Hidden label
-
-Hide the label visually while maintaining accessibility by setting `hideLabel` to `true`. The label is still available to screen readers.
+### Hidden label

 <MultiSelect titleText="Contact" label="Select contact methods..." hideLabel
    items="{[{id: "0", text: "Slack"},
@ -126,9 +91,7 @@ Hide the label visually while maintaining accessibility by setting `hideLabel` t
    {id: "2", text: "Fax"}]}"
  />

-## Light variant
-
-Use the light variant for dark backgrounds by setting `light` to `true`. This provides better contrast in dark themes.
+### Light variant

 <MultiSelect light titleText="Contact" label="Select contact methods..."
    items="{[{id: "0", text: "Slack"},
@ -136,9 +99,7 @@ Use the light variant for dark backgrounds by setting `light` to `true`. This pr
    {id: "2", text: "Fax"}]}"
  />

-## Inline variant
-
-Display the dropdown inline with other content by setting `type` to `"inline"`. This removes the background and border.
+### Inline variant

 <MultiSelect type="inline" titleText="Contact" label="Select contact methods..."
    items="{[{id: "0", text: "Slack"},
@ -146,9 +107,7 @@ Display the dropdown inline with other content by setting `type` to `"inline"`.
    {id: "2", text: "Fax"}]}"
  />

-## Extra-large size
-
-Use the extra-large size for prominent selections by setting `size` to `"xl"`. This provides more visual emphasis.
+### Extra-large size

 <MultiSelect size="xl" titleText="Contact" label="Select contact methods..."
    items="{[{id: "0", text: "Slack"},
@ -156,9 +115,7 @@ Use the extra-large size for prominent selections by setting `size` to `"xl"`. T
    {id: "2", text: "Fax"}]}"
  />

-## Small size
-
-Use the small size for compact layouts by setting `size` to `"sm"`. This is ideal for secondary selections.
+### Small size

 <MultiSelect size="sm" titleText="Contact" label="Select contact methods..."
    items="{[{id: "0", text: "Slack"},
@ -166,9 +123,7 @@ Use the small size for compact layouts by setting `size` to `"sm"`. This is idea
    {id: "2", text: "Fax"}]}"
  />

-## Invalid state
-
-Indicate an invalid selection by setting `invalid` to `true`. This example shows a required field error.
+### Invalid state

 <MultiSelect invalid invalidText="A contact method is required" titleText="Contact" label="Select contact methods..."
    items="{[{id: "0", text: "Slack"},
@ -176,9 +131,7 @@ Indicate an invalid selection by setting `invalid` to `true`. This example shows
    {id: "2", text: "Fax"}]}"
  />

-## Warning state
-
-Indicate a warning state by setting `warn` to `true`. This example shows a warning about unassociated accounts.
+### Warning state

 <MultiSelect warn warnText="One or more contact methods are not associated with your account" titleText="Contact" label="Select contact methods..."
    items="{[{id: "0", text: "Slack"},
@ -186,9 +139,7 @@ Indicate a warning state by setting `warn` to `true`. This example shows a warni
    {id: "2", text: "Fax"}]}"
  />

-## Disabled state
-
-Disable the entire dropdown by setting `disabled` to `true`. This prevents all user interaction.
+### Disabled state

 <MultiSelect disabled titleText="Contact" label="Select contact methods..."
    items="{[{id: "0", text: "Slack"},
@ -196,9 +147,9 @@ Disable the entire dropdown by setting `disabled` to `true`. This prevents all u
    {id: "2", text: "Fax"}]}"
  />

-## Disabled items
+### Disabled items

-Disable specific items using the `disabled` property in the `items` prop. This example disables the Email option.
+Use the `disabled` property in the `items` prop to disable specific items.

 <MultiSelect
  titleText="Contact"
@ -208,4 +159,4 @@ Disable specific items using the `disabled` property in the `items` prop. This e
    { id: "1", text: "Email", disabled: true },
    { id: "2", text: "Fax" },
  ]}
-/>
+/>
--- a/docs/src/pages/components/NumberInput.svx
+++ b/docs/src/pages/components/NumberInput.svx
@ -7,100 +7,70 @@ components: ["NumberInput", "NumberInputSkeleton"]
  import Preview from "../../components/Preview.svelte";
 </script>

-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
+This component requires a numerical value for `value`.

-Create a basic number input with increment and decrement controls. The input accepts numerical values and provides visual feedback.
+See [#no-value](#no-value) to allow for an empty value.

 <NumberInput label="Clusters" value={0} />

-## 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.
-
-<FileSource src="/framed/NumberInput/NumberInputEmpty" />
-
-## Helper text
-
-Add descriptive text below the input using the `helperText` prop. This helps users understand the expected input.
+### With helper text

 <NumberInput label="Clusters" value={0} helperText="Clusters provisioned in your region" />

-## Minimum and maximum values
-
-Constrain input values using `min` and `max` props. This example limits values between 4 and 20.
+### Minimum and maximum values

 <NumberInput min="{4}" max="{20}" value="{4}" invalidText="Number must be between 4 and 20." helperText="Clusters provisioned in your region" label="Clusters (4 min, 20 max)" />

-## Step value
+### No value

-Control the increment/decrement step size using the `step` prop. This example uses a step of 0.1.
+Set `allowEmpty` to `true` to allow for no value.

-<NumberInput value="{1}" helperText="Step of 0.1" step={0.1} label="Clusters" />
+Set `value` to `null` to denote "no value."

-## Hidden label
+<FileSource src="/framed/NumberInput/NumberInputEmpty" />

-Hide the label visually while maintaining accessibility by setting `hideLabel` to `true`. The label is still available to screen readers.
+### Hidden label

 <NumberInput hideLabel label="Clusters" value={0} />

-## Extra-large size
-
-Use the extra-large size for prominent inputs by setting `size` to `"xl"`. This provides more visual emphasis.
-
-<NumberInput size="xl" label="Clusters" value={0} />
-
-## Small size
-
-Use the small size for compact layouts by setting `size` to `"sm"`. This is ideal for secondary inputs.
-
-<NumberInput size="sm" label="Clusters" value={0} />
-
-## Light variant
-
-Use the light variant for dark backgrounds by setting `light` to `true`. This provides better contrast in dark themes.
-
-<NumberInput light label="Clusters" value={0} />
-
-## Invalid state
-
-Indicate an invalid value by setting `invalid` to `true`. This example shows a validation error.
-
-<NumberInput invalid invalidText="Invalid value" label="Clusters" value={0} />
-
-## Warning state
-
-Indicate a warning state by setting `warn` to `true`. This example shows a warning about the input value.
-
-<NumberInput warn warnText="A high number may impact initial rollout" label="Clusters" value={25} />
-
-## Disabled state
-
-Disable the input by setting `disabled` to `true`. This prevents all user interaction.
-
-<NumberInput disabled label="Clusters" value={0} />
-
-## Read-only state
-
-Make the input read-only by setting `readonly` to `true`. This allows viewing but prevents editing.
-
-<NumberInput readonly label="Clusters" value={0} />
-
-## Hidden steppers
-
-Hide the increment/decrement controls by setting `hideSteppers` to `true`. This provides a simpler input interface.
+### Hidden steppers

 <NumberInput hideSteppers label="Clusters" value={0} />

-## Skeleton
+### Light variant

-Show a loading state using the `NumberInputSkeleton` component. This is useful while data is being fetched.
+<NumberInput light label="Clusters" value={0} />
+
+### Read-only variant
+
+<NumberInput readonly label="Clusters" value={0} />
+
+### Extra-large size
+
+<NumberInput size="xl" label="Clusters" value={0} />
+
+### Small size
+
+<NumberInput size="sm" label="Clusters" value={0} />
+
+### Invalid state
+
+<NumberInput invalid invalidText="Invalid value" label="Clusters" value={0} />
+
+### Warning state
+
+<NumberInput warn warnText="A high number may impact initial rollout" label="Clusters" value={25} />
+
+### Disabled state
+
+<NumberInput disabled label="Clusters" value={0} />
+
+### Skeleton

 <NumberInputSkeleton />

-## Skeleton without label
-
-Show a loading state without a label by setting `hideLabel` to `true`. This maintains layout consistency.
+### Skeleton without label

 <NumberInputSkeleton hideLabel />
--- a/docs/src/pages/components/OrderedList.svx
+++ b/docs/src/pages/components/OrderedList.svx
@ -7,17 +7,13 @@ components: ["OrderedList", "ListItem"]
  import Preview from "../../components/Preview.svelte";
 </script>

-`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.
-
 <InlineNotification svx-ignore lowContrast title="Tip:" kind="info" hideCloseButton>
  <div class="body-short-01">
    Consider using the <Link href="/components/RecursiveList#ordered">RecursiveList</Link> component for rendering tree structured data.
-  </div>
+   </div>
 </InlineNotification>

-## Default
-
-Create a basic ordered list by wrapping `ListItem` components within `OrderedList`.
+### Default

 <OrderedList>
  <ListItem>Ordered list item</ListItem>
@ -25,9 +21,7 @@ Create a basic ordered list by wrapping `ListItem` components within `OrderedLis
  <ListItem>Ordered list item</ListItem>
 </OrderedList>

-## With links
-
-Add interactive elements like `Link` components within list items.
+### With links

 <OrderedList>
  <ListItem>
@ -41,9 +35,7 @@ Add interactive elements like `Link` components within list items.
  </ListItem>
 </OrderedList>

-## Nested
-
-Set the `nested` prop to `true` to create hierarchical lists with proper indentation and numbering.
+### Nested

 <OrderedList>
  <ListItem>
@ -63,9 +55,9 @@ Set the `nested` prop to `true` to create hierarchical lists with proper indenta
  <ListItem>Ordered list level 1</ListItem>
 </OrderedList>

-## Native list styles
+### Native list styles

-Enable native browser list styles by setting the `native` prop to `true`. This is useful for large lists where the list number may overlap with the list item text.
+Use the `native` attribute to enable default browser list styles. This is useful for large lists (i.e., 1000 or more items) where the list number may overlap with the list item text.

 <OrderedList native>
  <ListItem>
@ -85,9 +77,9 @@ Enable native browser list styles by setting the `native` prop to `true`. This i
  <ListItem>Ordered list level 1</ListItem>
 </OrderedList>

-## Expressive styles
+### Expressive styles

-Use Carbon's expressive typesetting by setting the `expressive` prop to `true`.
+Set `expressive` to `true` to use Carbon's expressive typesetting.

 <OrderedList expressive>
  <ListItem><Link size="lg" href="#">Ordered list item</Link></ListItem>
--- a/docs/src/pages/components/OverflowMenu.svx
+++ b/docs/src/pages/components/OverflowMenu.svx
@ -8,11 +8,7 @@ components: ["OverflowMenu", "OverflowMenuItem"]
  import Preview from "../../components/Preview.svelte";
 </script>

-`OverflowMenu` provides a compact way to display a list of actions or options. It renders as a button that opens a dropdown menu when clicked, making it ideal for secondary actions or overflow content.
-
-## Default
-
-Create a basic overflow menu by wrapping `OverflowMenuItem` components within `OverflowMenu`.
+### Default

 <OverflowMenu>
  <OverflowMenuItem text="Manage credentials" />
@ -20,19 +16,15 @@ Create a basic overflow menu by wrapping `OverflowMenuItem` components within `O
  <OverflowMenuItem danger text="Delete service" />
 </OverflowMenu>

-## Flipped
+### Flipped

-Set `flipped` to `true` to position the menu to the left of the button.
-
-<OverflowMenu flipped>
+<OverflowMenu open flipped>
  <OverflowMenuItem text="Manage credentials" />
  <OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" />
  <OverflowMenuItem danger text="Delete service" />
 </OverflowMenu>

-## Menu direction
-
-Set `direction` to `"top"` to position the menu above the button.
+### Menu direction top

 <OverflowMenu flipped direction="top">
  <OverflowMenuItem text="Manage credentials" />
@ -40,9 +32,7 @@ Set `direction` to `"top"` to position the menu above the button.
  <OverflowMenuItem danger text="Delete service" />
 </OverflowMenu>

-## Light variant
-
-Enable the light variant by setting `light` to `true`.
+### Light variant

 <OverflowMenu light>
  <OverflowMenuItem text="Manage credentials" />
@ -50,9 +40,7 @@ Enable the light variant by setting `light` to `true`.
  <OverflowMenuItem danger text="Delete service" />
 </OverflowMenu>

-## Extra-large size
-
-Set `size` to `"xl"` for an extra-large overflow menu.
+### Extra-large size

 <OverflowMenu size="xl">
  <OverflowMenuItem text="Manage credentials" />
@ -60,9 +48,7 @@ Set `size` to `"xl"` for an extra-large overflow menu.
  <OverflowMenuItem danger text="Delete service" />
 </OverflowMenu>

-## Small size
-
-Set `size` to `"sm"` for a small overflow menu.
+### Small size

 <OverflowMenu size="sm">
  <OverflowMenuItem text="Manage credentials" />
@ -70,9 +56,9 @@ Set `size` to `"sm"` for a small overflow menu.
  <OverflowMenuItem danger text="Delete service" />
 </OverflowMenu>

-## Custom primary focus
+### Custom primary focus

-Set `primaryFocus` to `true` on a menu item to focus it when opening the dropdown.
+By default, the first overflow menu item is focused when opening the dropdown.

 <OverflowMenu>
  <OverflowMenuItem text="Manage credentials" />
@ -80,9 +66,7 @@ Set `primaryFocus` to `true` on a menu item to focus it when opening the dropdow
  <OverflowMenuItem primaryFocus danger text="Delete service" />
 </OverflowMenu>

-## Custom trigger icon
-
-Replace the default vertical overflow menu icon with a custom icon.
+### Custom trigger icon

 <OverflowMenu icon={Add}>
  <OverflowMenuItem text="Manage credentials" />
@ -90,9 +74,7 @@ Replace the default vertical overflow menu icon with a custom icon.
  <OverflowMenuItem danger text="Delete service" />
 </OverflowMenu>

-## Custom trigger slot
-
-Use the `menu` slot to customize the trigger button content.
+### Custom trigger slot

 <OverflowMenu style="width: auto;">
  <div slot="menu" style="padding: 1rem; color: red;">Custom trigger</div>
@ -101,9 +83,9 @@ Use the `menu` slot to customize the trigger button content.
  <OverflowMenuItem danger text="Delete service" />
 </OverflowMenu>

-## Disabled items
+### Disabled items

-Set `disabled` to `true` to disable menu items. Use `hasDivider` to add visual separation between items.
+Disable menu items by setting `disabled` to `true`.

 <OverflowMenu>
  <OverflowMenuItem text="Create key" />
--- a/docs/src/pages/components/Pagination.svx
+++ b/docs/src/pages/components/Pagination.svx
@ -7,52 +7,26 @@ components: ["Pagination", "PaginationSkeleton"]
  import Preview from "../../components/Preview.svelte";
 </script>

-`Pagination` provides navigation controls for large data sets. It displays the current page, total items, and allows users to change page size and navigate between pages.
+### Default

-## Default
+<Pagination totalItems={102} pageSizes="{[10, 15, 20]}" />

-Create a basic pagination component with default page size options.
-
-<Pagination totalItems={102} pageSizes={[10, 15, 20]} />
-
-## Current page
-
-Set the current page using the `page` prop.
+### Current page

 <Pagination totalItems={102} page={4} />

-## Custom page sizes
+### Custom page sizes

-Specify custom page sizes and set a default page size.
+<Pagination totalItems={102} pageSizes="{[16, 36, 99]}" pageSize="{36}" />

-<Pagination totalItems={102} pageSizes={[16, 36, 99]} pageSize={36} />
-
-## Unknown pages
-
-Set `pagesUnknown` to `true` when the total number of pages is unknown. This renders the item range text without factoring in the total number of pages.
-
-<Pagination pagesUnknown />
-
-## Page window
-
-The number of native select items rendered is derived from `totalItems`. For large datasets, this can impact performance. Use `pageWindow` to control the number of rendered items.
-
-<Pagination totalItems={100_000} pageSizes={[10, 15, 20]} />
-
-## Hidden page input
-
-Disable the page input by setting `pageInputDisabled` to `true`.
+### Hidden page input

 <Pagination totalItems={102} pageInputDisabled />

-## Hidden page size
-
-Disable the page size selector by setting `pageSizeInputDisabled` to `true`.
+### Hidden page size

 <Pagination totalItems={102} pageSizeInputDisabled />

-## Skeleton
-
-Use `PaginationSkeleton` to show a loading state.
+### Skeleton

 <PaginationSkeleton />
--- a/docs/src/pages/components/PaginationNav.svx
+++ b/docs/src/pages/components/PaginationNav.svx
@ -3,49 +3,10 @@
  import Preview from "../../components/Preview.svelte";
 </script>

-`PaginationNav` provides a compact navigation interface for paginated content. It displays page numbers and navigation buttons, with support for overflow menus when there are many pages.
-
-## Default
-
-Create a basic pagination navigation with default settings.
+### Default

 <PaginationNav />

-## Reactive example
-
-Use the `page` prop to bind to the current page number.
-
-<FileSource src="/framed/PaginationNav/PaginationNavReactive" />
-
-## Total pages
-
-Specify the total number of pages using the `total` prop.
-
-<PaginationNav total={3} />
-
-## Loop navigation
-
-Set `loop` to `true` to enable circular navigation between pages.
+### Loopable

 <PaginationNav total={3} loop />
-
-## Visible pages
-
-Control the number of visible page numbers with the `shown` prop.
-
-<PaginationNav total={100} shown={5} />
-
-## Custom button text
-
-Customize the navigation button text using `forwardText` and `backwardText`.
-
-<PaginationNav
-  forwardText="Next"
-  backwardText="Previous"
-/>
-
-## Tooltip position
-
-Set the tooltip position relative to the navigation buttons using `tooltipPosition`.
-
-<PaginationNav tooltipPosition="outside" total={3} loop />
--- a/docs/src/pages/components/PasswordInput.svx
+++ b/docs/src/pages/components/PasswordInput.svx
@ -1,78 +1,56 @@
+---
+source: TextInput/PasswordInput.svelte
+---
+
 <script>
  import { PasswordInput } from "carbon-components-svelte";
  import Preview from "../../components/Preview.svelte";
 </script>

-`PasswordInput` provides a secure text input field with a visibility toggle for password entry. It includes features for validation, warnings, and accessibility.
-
-## Default
-
-Create a basic password input with a label and placeholder.
+### Default

 <PasswordInput labelText="Password" placeholder="Enter password..." />

-## Custom tooltip alignment
+### Custom tooltip alignment

 Customize the tooltip alignment and position of the visibility toggle through the `tooltipAlignment` and `tooltipPosition` props.

 <PasswordInput tooltipAlignment="start" tooltipPosition="left" labelText="Password" placeholder="Enter password..." />

-## Password is visible
+### Password is visible

 Set prop `type` to `"text"` to toggle password visibility.

 <PasswordInput labelText="Password" type="text" placeholder="Enter password..." value="as_lta0890sdfpo__!9901" />

-## Hidden label
-
-Visually hide the label while maintaining accessibility.
+### Hidden label

 <PasswordInput hideLabel labelText="Password" placeholder="Enter password..." />

-## Light variant
-
-Enable the light variant for use on dark backgrounds.
+### Light variant

 <PasswordInput light labelText="Password" placeholder="Enter password..." />

-## Inline
-
-Display the input with an inline label layout.
+### Inline

 <PasswordInput inline labelText="Password" placeholder="Enter password..." />

-## Extra-large size
-
-Use the extra-large size variant for increased visibility.
+### Extra-large size

 <PasswordInput size="xl" labelText="Password" placeholder="Enter password..." />

-## Small size
-
-Use the small size variant for compact layouts.
+### Small size

 <PasswordInput size="sm" labelText="Password" placeholder="Enter password..." />

-## Invalid state
-
-Display an error message when the input is invalid.
+### Invalid state

 <PasswordInput invalid invalidText="Incorrect user name or password." labelText="Password" placeholder="Enter password..." />

-## Warning state
-
-Show a warning message for non-critical issues.
+### Warning state

 <PasswordInput warn warnText="Password has been reset." labelText="Password" placeholder="Enter password..." />

-## Disabled state
-
-Disable the input to prevent user interaction.
+### Disabled state

 <PasswordInput disabled labelText="Password" placeholder="Enter password..." />
-
-## With helper text
-
-Add helper text to provide additional context or instructions.
-
-<PasswordInput helperText="Your password should be hard to guess" labelText="Password" placeholder="Enter password..." />
--- a/docs/src/pages/components/Popover.svx
+++ b/docs/src/pages/components/Popover.svx
@ -3,11 +3,9 @@
  import Preview from "../../components/Preview.svelte";
 </script>

-`Popover` provides a floating container that displays content relative to a trigger element. It supports various alignments, caret indicators, and visual variants.
+### Default

-## Default
-
-Create a basic popover with absolute positioning.
+By default, the position of the popover component is absolute.

 <div data-outline>
    Parent
@ -16,9 +14,9 @@ Create a basic popover with absolute positioning.
    </Popover>
 </div>

-## Relative position
+### Relative position

-Set `relative` to `true` to position the popover relative to its parent element.
+Set `relative` to `true` to use a relative position.

 <div data-outline>
    Parent
@ -27,9 +25,9 @@ Set `relative` to `true` to position the popover relative to its parent element.
    </Popover>
 </div>

-## Close on outside click
+### Close on outside click

-Enable automatic closing when clicking outside the popover using `closeOnOutsideClick`.
+Set `closeOnOutsideClick` to set `open` to `false` when clicking outside of the popover.

 <div data-outline>
    Parent
@ -38,7 +36,7 @@ Enable automatic closing when clicking outside the popover using `closeOnOutside
    </Popover>
 </div>

-## Popover alignment
+### Popover alignment

 Customize the popover alignment using the `align` prop. Valid values include: `"top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "left" | "left-bottom" | "left-top" | "right" | "right-bottom" | "right-top"`.

@ -111,9 +109,7 @@ The default `align` value is `"top"`.
    </Popover>
 </div>

-## With caret
-
-Add a caret indicator to the popover using the `caret` prop.
+### With caret

 <div data-outline>
    Parent
@ -122,9 +118,11 @@ Add a caret indicator to the popover using the `caret` prop.
    </Popover>
 </div>

-## Custom caret alignment
+### Custom caret alignment

-By default, the caret is aligned "top". Possible `align` values include `"top"`, `"top-left"`, `"top-right"`, `"bottom"`, `"bottom-left"`, `"bottom-right"`, `"left"`, `"left-bottom"`, `"left-top"`, `"right"`, `"right-bottom"` or `"right-top"`.
+By default, the caret is aligned "top".
+
+Possible `align` values include `"top"`, `"top-left"`, `"top-right"`, `"bottom"`, `"bottom-left"`, `"bottom-right"`, `"left"`, `"left-bottom"`, `"left-top"`, `"right"`, `"right-bottom"` or `"right-top"`.

 <div data-outline>
    Parent
@ -133,9 +131,7 @@ By default, the caret is aligned "top". Possible `align` values include `"top"`,
    </Popover>
 </div>

-## Light variant
-
-Enable the light variant for use on dark backgrounds.
+### Light variant

 <div data-outline>
    Parent
@ -144,19 +140,11 @@ Enable the light variant for use on dark backgrounds.
    </Popover>
 </div>

-## High contrast variant
-
-Enable the high contrast variant for improved visibility.
+### High contrast variant

 <div data-outline>
    Parent
    <Popover highContrast open>
        <div style="padding: var(--cds-spacing-05)">Content</div>
    </Popover>
-</div>
-
-## External element
-
-Use the `open` prop to manage state with an external element, like a button.
-
-<FileSource src="/framed/Popover/WithButton" />
+</div>
--- a/docs/src/pages/components/ProgressBar.svx
+++ b/docs/src/pages/components/ProgressBar.svx
@ -3,70 +3,50 @@
  import Preview from "../../components/Preview.svelte";
 </script>

-`ProgressBar` provides a visual indicator of progress for operations such as file uploads or data processing. It supports determinate and indeterminate states, various sizes, and status indicators.
+### Default

-## Default
-
-Create an indeterminate progress bar that continuously animates.
+Without a specified `value` prop, the progress bar is indeterminate.

 <ProgressBar helperText="Loading..." />

-## Small size
+### Small size

-Use the small size variant for compact layouts.
+Specify `size="sm"` to use the small variant.

 <ProgressBar size="sm" helperText="Loading..." />

-## Percentage
+### Percentage

-Display progress as a percentage using the `value` prop.
+Specify a `value` for the progress bar to be determinate.

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

-## Finished status
+### Custom max value

-Show completion status with a checkmark icon.
-
-<ProgressBar value={100} status="finished" labelText="Upload file" helperText="Upload complete" />
-
-## Error status
-
-Indicate errors with an error icon and red styling.
-
-<ProgressBar value={0} status="error" labelText="Upload file" helperText="Invalid file format" />
-
-## Custom max value
-
-Set a custom maximum value for the progress bar.
+The default `max` value is `100`.

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

-## Hidden label
+### Hidden label

-Visually hide the label while maintaining accessibility.
+It's recommended that you provide a `labelText` for accessibility.
+
+Use `hideLabel` to visually hide the label text.

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

-## Inline variant
+### Inline variant

-Use the inline variant to display progress without helper text.
+The inline variant visually hides the `helperText`.

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

-## Indented variant
-
-Use the indented variant for a more compact layout.
+### Indented variant

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

-## Indented status variant
+### UX example

-Combine the indented variant with status indicators.
-
-<ProgressBar kind="indented" status="finished" value={40} labelText="Upload file" helperText="Upload complete" />
-
-## UX example
-
-Demonstrate a complete upload flow with start and end states.
+This example shows how to animate the progress bar from 0 to 100% with start and end states.

 <FileSource src="/framed/ProgressBar/ProgressBarUx" />
--- a/docs/src/pages/components/ProgressIndicator.svx
+++ b/docs/src/pages/components/ProgressIndicator.svx
@ -7,11 +7,7 @@ components: ["ProgressIndicator", "ProgressStep", "ProgressIndicatorSkeleton"]
  import Preview from "../../components/Preview.svelte";
 </script>

-`ProgressIndicator` provides a visual representation of progress through a sequence of steps. It supports horizontal and vertical layouts, step completion states, and interactive navigation.
-
-## Default
-
-Create a horizontal progress indicator with four steps.
+### Default (horizontal)

 <ProgressIndicator currentIndex={2}>
  <ProgressStep complete
@ -32,9 +28,11 @@ Create a horizontal progress indicator with four steps.
  />
 </ProgressIndicator>

-## Prevent change on click
+### Prevent change on click

-Disable automatic step selection when clicking completed steps.
+By default, clicking any step that is complete will update the current step index.
+
+Set `preventChangeOnClick` to `true` to prevent this behavior.

 <ProgressIndicator preventChangeOnClick currentIndex={2}>
  <ProgressStep complete
@ -55,15 +53,13 @@ Disable automatic step selection when clicking completed steps.
  />
 </ProgressIndicator>

-## Programmatic usage
+### Programmatic usage

-Update the current step programmatically while maintaining step completion rules.
+When programmatically updating the `currentIndex`, keep in mind that only completed steps should be selectable.

 <FileSource src="/framed/ProgressIndicator/ProgrammaticProgressIndicator" />

-## Invalid step
-
-Mark a step as invalid to indicate an error state.
+### Invalid step

 <ProgressIndicator>
  <ProgressStep complete
@ -80,9 +76,7 @@ Mark a step as invalid to indicate an error state.
  />
 </ProgressIndicator>

-## Disabled steps
-
-Disable specific steps to prevent user interaction.
+### Disabled steps

 <ProgressIndicator>
  <ProgressStep complete
@ -99,9 +93,7 @@ Disable specific steps to prevent user interaction.
  />
 </ProgressIndicator>

-## Spaced-equally
-
-Distribute steps evenly across the available space.
+### Spaced-equally

 <ProgressIndicator spaceEqually>
  <ProgressStep
@ -118,9 +110,7 @@ Distribute steps evenly across the available space.
  />
 </ProgressIndicator>

-## Vertical
-
-Display steps in a vertical layout.
+### Vertical

 <ProgressIndicator vertical>
  <ProgressStep
@ -137,14 +127,12 @@ Display steps in a vertical layout.
  />
 </ProgressIndicator>

-## Skeleton
+### Skeleton

-Show a loading state with the specified number of steps.
+Use the `count` prop to specify the number of progress steps to render.

 <ProgressIndicatorSkeleton />

-## Skeleton (vertical)
-
-Show a vertical loading state with the specified number of steps.
+### Skeleton (vertical)

 <ProgressIndicatorSkeleton vertical />
--- a/docs/src/pages/components/RadioButton.svx
+++ b/docs/src/pages/components/RadioButton.svx
@ -7,34 +7,28 @@ components: ["RadioButtonGroup", "RadioButton", "RadioButtonSkeleton"]
  import Preview from "../../components/Preview.svelte";
 </script>

-`RadioButton` provides a selection control that allows users to choose a single option from a set. It supports both individual and grouped usage, with options for horizontal and vertical layouts.
+### Default

-## Default
-
-Create a group of radio buttons with a shared name and legend.
-
-<RadioButtonGroup legendText="Storage tier (disk)" name="plan" selected="standard">
+<RadioButtonGroup selected="standard">
  <RadioButton labelText="Free (1 GB)" value="free" />
  <RadioButton labelText="Standard (10 GB)" value="standard" />
  <RadioButton labelText="Pro (128 GB)" value="pro" />
 </RadioButtonGroup>

-## Hidden legend
+### With legend text

-Visually hide the legend while maintaining accessibility.
-
-<RadioButtonGroup hideLegend legendText="Storage tier (disk)" name="plan-legend" selected="standard">
+<RadioButtonGroup legendText="Storage tier (disk)" selected="standard">
  <RadioButton labelText="Free (1 GB)" value="free" />
  <RadioButton labelText="Standard (10 GB)" value="standard" />
  <RadioButton labelText="Pro (128 GB)" value="pro" />
 </RadioButtonGroup>

-## Legend text slot
+### Legend text slot

-Customize the legend text with additional content.
+Use the named "legendText" slot to customize the legend text.

-<RadioButtonGroup name="plan-legend-slot" selected="standard">
-  <div slot="legendText" style:display="flex">
+<RadioButtonGroup selected="standard">
+  <div slot="legendText" style="display: flex">
    Storage tier (disk)
    <Tooltip>
      <p>
@ -47,45 +41,49 @@ Customize the legend text with additional content.
  <RadioButton labelText="Pro (128 GB)" value="pro" />
 </RadioButtonGroup>

-## Reactive example
+### Hidden legend

-Bind and update the selected value programmatically.
+It's recommended that you provide a legend for accessibility.

-<FileSource src="/framed/RadioButton/RadioButtonReactive" />
+Use `hideLegend` to visually hide the legend text.

-## Left-aligned label text
-
-Position labels to the left of the radio buttons.
-
-<RadioButtonGroup labelPosition="left" legendText="Storage tier (disk)" name="plan-left-aligned" selected="standard">
+<RadioButtonGroup hideLegend legendText="Storage tier (disk)" selected="standard">
  <RadioButton labelText="Free (1 GB)" value="free" />
  <RadioButton labelText="Standard (10 GB)" value="standard" />
  <RadioButton labelText="Pro (128 GB)" value="pro" />
 </RadioButtonGroup>

-## Disabled buttons
+### Reactive example

-Disable specific radio buttons to prevent selection.
+Use the `selected` prop to bind and update the selected value.

-<RadioButtonGroup labelPosition="left" legendText="Storage tier (disk)" name="plan-disabled" selected="standard">
+<FileSource src="/framed/RadioButton/RadioButtonReactive" />
+
+### Left-aligned label text
+
+<RadioButtonGroup labelPosition="left" legendText="Storage tier (disk)" selected="standard">
+  <RadioButton labelText="Free (1 GB)" value="free" />
+  <RadioButton labelText="Standard (10 GB)" value="standard" />
+  <RadioButton labelText="Pro (128 GB)" value="pro" />
+</RadioButtonGroup>
+
+### Disabled buttons
+
+<RadioButtonGroup labelPosition="left" legendText="Storage tier (disk)" selected="standard">
  <RadioButton disabled labelText="Free (1 GB)" value="free" />
  <RadioButton labelText="Standard (10 GB)" value="standard" />
  <RadioButton disabled labelText="Pro (128 GB)" value="pro" />
 </RadioButtonGroup>

-## Vertical orientation
+### Vertical orientation

-Display radio buttons in a vertical layout.
-
-<RadioButtonGroup orientation="vertical" legendText="Storage tier (disk)" name="plan-vertical" selected="standard">
+<RadioButtonGroup orientation="vertical" legendText="Storage tier (disk)" selected="standard">
  <RadioButton labelText="Free (1 GB)" value="free" />
  <RadioButton labelText="Standard (10 GB)" value="standard" />
  <RadioButton labelText="Pro (128 GB)" value="pro" />
 </RadioButtonGroup>

-## Skeleton
-
-Show a loading state for horizontal radio buttons.
+### Skeleton

 <RadioButtonGroup legendText="Storage tier (disk)">
  <RadioButtonSkeleton />
@ -93,9 +91,7 @@ Show a loading state for horizontal radio buttons.
  <RadioButtonSkeleton />
 </RadioButtonGroup>

-## Skeleton (vertical)
-
-Show a loading state for vertical radio buttons.
+### Skeleton (vertical)

 <RadioButtonGroup orientation="vertical" legendText="Storage tier (disk)">
  <RadioButtonSkeleton />
--- a/docs/src/pages/components/RadioTile.svx
+++ b/docs/src/pages/components/RadioTile.svx
@ -1,5 +1,6 @@
 ---
 components: ["TileGroup", "RadioTile"]
+source: Tile/RadioTile.svelte
 ---

 <script>
@ -7,64 +8,54 @@ components: ["TileGroup", "RadioTile"]
  import Preview from "../../components/Preview.svelte";
 </script>

-`RadioTile` provides a selectable tile interface for choosing a single option from a set. It supports both individual and grouped usage, with options for light and disabled states.
+### Default

-## Default
-
-Create a group of radio tiles with a shared name and legend.
-
-<TileGroup legend="Service pricing tiers" name="plan" selected="standard">
-  <RadioTile value="lite">
+<TileGroup legend="Service pricing tiers">
+  <RadioTile value="0" checked>
    Lite plan
  </RadioTile>
-  <RadioTile value="standard">
+  <RadioTile value="1">
    Standard plan
  </RadioTile>
-  <RadioTile value="plus">
+  <RadioTile value="2">
    Plus plan
  </RadioTile>
 </TileGroup>

-## Reactive (one-way binding)
-
-Update the selected value using the `select` event.
+### Reactive (one-way binding)

 <FileSource src="/framed/RadioTile/RadioTileReactiveOneWay" />

-## Reactive (two-way binding)
+### Reactive (two-way binding)

-Bind to the `selected` prop for simpler state management.
+Binding to the `selected` prop is a more concise approach to managing state.

 <FileSource src="/framed/RadioTile/RadioTileReactive" />

-## Light variant
+### Light variant

-Use the light variant for light backgrounds.
-
-<TileGroup legend="Service pricing tiers" name="plan-light" selected="standard">
-  <RadioTile light value="lite">
+<TileGroup legend="Service pricing tiers">
+  <RadioTile light value="0" checked>
    Lite plan
  </RadioTile>
-  <RadioTile light value="standard">
+  <RadioTile light value="1">
    Standard plan
  </RadioTile>
-  <RadioTile light value="plus">
+  <RadioTile light value="2">
    Plus plan
  </RadioTile>
 </TileGroup>

-## Disabled state
+### Disabled state

-Disable specific tiles to prevent selection.
-
-<TileGroup legend="Service pricing tiers" name="plan-disabled" selected="standard">
-  <RadioTile value="lite" disabled>
+<TileGroup legend="Service pricing tiers">
+  <RadioTile value="0" checked>
    Lite plan
  </RadioTile>
-  <RadioTile value="standard">
+  <RadioTile value="1" disabled>
    Standard plan
  </RadioTile>
-  <RadioTile value="plus" disabled>
+  <RadioTile value="2" disabled>
    Plus plan
  </RadioTile>
 </TileGroup>
--- a/docs/src/pages/components/RecursiveList.svx
+++ b/docs/src/pages/components/RecursiveList.svx
@ -1,15 +1,11 @@
 <script>
-  import { InlineNotification, RecursiveList, Link } from "carbon-components-svelte";
+  import { InlineNotification, RecursiveList } from "carbon-components-svelte";
  import Preview from "../../components/Preview.svelte";
 </script>

-`RecursiveList` provides a flexible way to render hierarchical data structures using either unordered or ordered lists. It supports nested nodes, links, and HTML content, making it ideal for displaying complex data hierarchies.
+This component uses the [svelte:self API](https://svelte.dev/docs#svelte_self) to render the [UnorderedList](/components/UnorderedList) and [OrderedList](/components/OrderedList) components with tree structured data.

-<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
-  <div class="body-short-01">
-    In version 0.86.0, the <strong>children</strong> prop was renamed to <strong>nodes</strong> for <Link target="_blank" href="https://svelte.dev/docs/svelte/v5-migration-guide#The-children-prop-is-reserved">Svelte 5 compatibility</Link>.
-  </div>
-</InlineNotification>
+A child node can render text, a link, HTML content, and other children.

 <InlineNotification svx-ignore lowContrast title="Warning:" kind="warning" hideCloseButton>
  <div class="body-short-01">
@ -17,26 +13,22 @@
  </div>
 </InlineNotification>

-## Default
+### Unordered

-Create a hierarchical list using the `nodes` prop. Each node can contain text, links, HTML content, and nested nodes.
+The `children` prop accepts an array of child nodes.
+
+By default, the list type is unordered.

 <FileSource src="/framed/RecursiveList/RecursiveList" />

-## Ordered
+### Ordered

-Set `type` to `"ordered"` to use numbered lists with proper indentation.
+Set `type` to `"ordered"` to use the ordered list variant.

 <FileSource src="/framed/RecursiveList/RecursiveListOrdered" />

-## Ordered (native styles)
+### Ordered (native styles)

-Set `type` to `"ordered-native"` to use browser-native numbering styles.
+Set `type` to `"ordered-native"` to use the native styles for an ordered list.

-<FileSource src="/framed/RecursiveList/RecursiveListOrderedNative" />
-
-## Flat data structure
-
-Convert flat data structures to hierarchical arrays using the `toHierarchy` utility function.
-
-<FileSource src="/framed/RecursiveList/RecursiveListFlatArray" />
+<FileSource src="/framed/RecursiveList/RecursiveListOrderedNative" />
--- a/docs/src/pages/components/Search.svx
+++ b/docs/src/pages/components/Search.svx
@ -4,78 +4,60 @@
  import Preview from "../../components/Preview.svelte";
 </script>

-`Search` provides a flexible search input component with support for expandable variants, different sizes, and custom icons. It includes built-in functionality for clearing input and handling keyboard events.
+### Default

-## Default
-
-The search component is extra-large by default. Use the `size` prop to choose between [large](#large-size) and [small](#small-size) variants.
+The `Search` component size is extra-large by default. There are [large](#large-size) and [small](#small-size) size variants.

 <Search />

-## Default value
-
-Set an initial value using the `value` prop.
+### Default value

 <Search placeholder="Search catalog..." value="Cloud functions" />

-## Reactive example
-
-Bind to the `value` prop for reactive updates.
+### Reactive example

 <FileSource src="/framed/Search/SearchReactive" />

-## Clear event
+### on:clear

-The `clear` event is dispatched when clicking the clear button or pressing the Escape key.
+The "clear" event is dispatched when clicking the "X" button or when pressing the "Escape" key.

 <Search value="Cloud functions" on:clear={() => console.log('clear')}/>

-## Expandable variant
+### Expandable variant

-Enable the expandable variant to show a compact search icon that expands on focus.
+Set `expandable` to `true` to use the expandable variant.

 <FileSource src="/framed/Search/SearchExpandableReactive" />

-## Light variant
-
-Use the light variant for light backgrounds.
+### Light variant

 <Search light />

-## Large size
-
-Set `size` to `"lg"` for a large search input.
+### Large size

 <Search size="lg" />

-## Small size
-
-Set `size` to `"sm"` for a small search input.
+### Small size

 <Search size="sm" />

-## Disabled state
-
-Disable the search input using the `disabled` prop.
+### Disabled state

 <Search disabled />

-## Custom icon
-
-Replace the default search icon with a custom one.
+### Custom search icon

 <Search icon={Query} />

-## Skeleton
-
-Display a loading state using the skeleton variant.
+### Skeleton

 <Search skeleton />

-## Skeleton (large)
+### Skeleton (large)

 <Search size="lg" skeleton />

-## Skeleton (small)
+### Skeleton (small)

 <Search size="sm" skeleton />
--- a/docs/src/pages/components/Select.svx
+++ b/docs/src/pages/components/Select.svx
@ -7,13 +7,11 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
  import Preview from "../../components/Preview.svelte";
 </script>

-`Select` provides a dropdown menu for selecting a single option from a list. It supports various states, sizes, and includes built-in validation and helper text.
+### Default

-## Default
+If the `selected` prop is not set, the value of the first `SelectItem` will be used as the default value.

-Create a basic select menu with `SelectItem` components. The first item's value is used as the default if `selected` is not set.
-
-<Select labelText="Carbon theme" on:change={e => console.log("value", e.target.value)}>
+<Select labelText="Carbon theme" on:change={e => console.log("value", e.detail)}>
  <SelectItem value="white" />
  <SelectItem value="g10" />
  <SelectItem value="g80" />
@ -21,11 +19,11 @@ Create a basic select menu with `SelectItem` components. The first item's value
  <SelectItem value="g100" />
 </Select>

-## Custom item text
+### Custom item text

-Use the `text` prop to customize the display text of each option.
+Use the `text` prop on `SelectItem` to customize the display value.

-<Select labelText="Carbon theme" on:change={e => console.log("value", e.target.value)}>
+<Select labelText="Carbon theme" on:change={e => console.log("value", e.detail)}>
  <SelectItem value="white" text="White" />
  <SelectItem value="g10" text="Gray 10" />
  <SelectItem value="g80" text="Gray 80" />
@ -33,11 +31,11 @@ Use the `text` prop to customize the display text of each option.
  <SelectItem value="g100" text="Gray 100" />
 </Select>

-## Initial selected value
+### Initial selected value

-Set the initial selection using the `selected` prop.
+Use the `selected` prop to specify an initial value.

-<Select labelText="Carbon theme" selected="g10" on:change={e => console.log("value", e.target.value)}>
+<Select labelText="Carbon theme" selected="g10" on:change={e => console.log("value", e.detail)}>
  <SelectItem value="white" text="White" />
  <SelectItem value="g10" text="Gray 10" />
  <SelectItem value="g80" text="Gray 80" />
@ -45,15 +43,13 @@ Set the initial selection using the `selected` prop.
  <SelectItem value="g100" text="Gray 100" />
 </Select>

-## Reactive example
+### Reactive example

-The `selected` prop supports two-way binding for reactive updates.
+The `selected` prop is reactive and supports two-way binding.

 <FileSource src="/framed/Select/SelectReactive" />

-## Helper text
-
-Add descriptive text below the select menu.
+### Helper text

 <Select helperText="Carbon offers 4 themes (2 light, 3 dark)" labelText="Carbon theme" selected="g10" >
  <SelectItem value="white" text="White" />
@ -63,9 +59,7 @@ Add descriptive text below the select menu.
  <SelectItem value="g100" text="Gray 100" />
 </Select>

-## Hidden label
-
-Visually hide the label while maintaining accessibility.
+### Hidden label

 <Select hideLabel labelText="Carbon theme" selected="g10" >
  <SelectItem value="white" text="White" />
@ -75,9 +69,7 @@ Visually hide the label while maintaining accessibility.
  <SelectItem value="g100" text="Gray 100" />
 </Select>

-## Item groups
-
-Group related options using `SelectItemGroup` components.
+### Item groups

 <Select labelText="Carbon theme" selected="0">
  <SelectItem value="0" text="Select a theme" disabled hidden />
@ -92,45 +84,7 @@ Group related options using `SelectItemGroup` components.
  </SelectItemGroup>
 </Select>

-## Small size
-
-Use the small size variant for compact layouts.
-
-<Select size="sm" labelText="Carbon theme" selected="g10" >
-  <SelectItem value="white" text="White" />
-  <SelectItem value="g10" text="Gray 10" />
-  <SelectItem value="g80" text="Gray 80" />
-  <SelectItem value="g90" text="Gray 90" />
-  <SelectItem value="g100" text="Gray 100" />
-</Select>
-
-## Extra-large size
-
-Use the extra-large size variant for prominent selections.
-
-<Select size="xl" labelText="Carbon theme" selected="g10" >
-  <SelectItem value="white" text="White" />
-  <SelectItem value="g10" text="Gray 10" />
-  <SelectItem value="g80" text="Gray 80" />
-  <SelectItem value="g90" text="Gray 90" />
-  <SelectItem value="g100" text="Gray 100" />
-</Select>
-
-## Inline variant
-
-Use the inline variant for horizontal layouts.
-
-<Select inline labelText="Carbon theme" selected="g10" >
-  <SelectItem value="white" text="White" />
-  <SelectItem value="g10" text="Gray 10" />
-  <SelectItem value="g80" text="Gray 80" />
-  <SelectItem value="g90" text="Gray 90" />
-  <SelectItem value="g100" text="Gray 100" />
-</Select>
-
-## Light variant
-
-Use the light variant for light backgrounds.
+### Light variant

 <Select light labelText="Carbon theme" selected="g10" >
  <SelectItem value="white" text="White" />
@ -140,9 +94,37 @@ Use the light variant for light backgrounds.
  <SelectItem value="g100" text="Gray 100" />
 </Select>

-## Invalid state
+### Inline variant

-Show validation errors using the invalid state.
+<Select inline labelText="Carbon theme" selected="g10" >
+  <SelectItem value="white" text="White" />
+  <SelectItem value="g10" text="Gray 10" />
+  <SelectItem value="g80" text="Gray 80" />
+  <SelectItem value="g90" text="Gray 90" />
+  <SelectItem value="g100" text="Gray 100" />
+</Select>
+
+### Extra-large size
+
+<Select size="xl" labelText="Carbon theme" selected="g10" >
+  <SelectItem value="white" text="White" />
+  <SelectItem value="g10" text="Gray 10" />
+  <SelectItem value="g80" text="Gray 80" />
+  <SelectItem value="g90" text="Gray 90" />
+  <SelectItem value="g100" text="Gray 100" />
+</Select>
+
+### Small size
+
+<Select size="sm" labelText="Carbon theme" selected="g10" >
+  <SelectItem value="white" text="White" />
+  <SelectItem value="g10" text="Gray 10" />
+  <SelectItem value="g80" text="Gray 80" />
+  <SelectItem value="g90" text="Gray 90" />
+  <SelectItem value="g100" text="Gray 100" />
+</Select>
+
+### Invalid state

 <Select invalid invalidText="Theme must be a dark variant" labelText="Carbon theme" selected="g10" >
  <SelectItem value="white" text="White" />
@ -152,9 +134,7 @@ Show validation errors using the invalid state.
  <SelectItem value="g100" text="Gray 100" />
 </Select>

-## Warning state
-
-Show warnings using the warning state.
+### Warning state

 <Select warn warnText="The selected theme will not be persisted" labelText="Carbon theme" selected="g10" >
  <SelectItem value="white" text="White" />
@ -164,9 +144,7 @@ Show warnings using the warning state.
  <SelectItem value="g100" text="Gray 100" />
 </Select>

-## Disabled state
-
-Disable the select menu to prevent interaction.
+### Disabled state

 <Select disabled labelText="Carbon theme" selected="g10" >
  <SelectItem value="white" text="White" />
@ -176,12 +154,10 @@ Disable the select menu to prevent interaction.
  <SelectItem value="g100" text="Gray 100" />
 </Select>

-## Skeleton
-
-Display a loading state using the skeleton variant.
+### Skeleton

 <SelectSkeleton />

-## Skeleton (hidden label)
+### Skeleton (hidden label)

-<SelectSkeleton hideLabel />
+<SelectSkeleton hideLabel />
--- a/docs/src/pages/components/SelectableTile.svx
+++ b/docs/src/pages/components/SelectableTile.svx
@ -1,5 +1,6 @@
 ---
 components: ["SelectableTile"]
+source: Tile/SelectableTile.svelte
 ---

 <script>
@ -7,11 +8,7 @@ components: ["SelectableTile"]
  import Preview from "../../components/Preview.svelte";
 </script>

-`SelectableTile` provides a tile-based selection interface that allows users to select multiple options. It supports various states and includes built-in keyboard navigation and accessibility features.
-
-## Multi-selectable tiles
-
-Group multiple selectable tiles together for multi-selection scenarios.
+### Multi-selectable tiles

 <div role="group" aria-label="selectable tiles">
  <SelectableTile selected>
@ -25,9 +22,7 @@ Group multiple selectable tiles together for multi-selection scenarios.
  </SelectableTile>
 </div>

-## Light variant
-
-Use the light variant for light backgrounds.
+### Light variant

 <div role="group" aria-label="selectable tiles">
  <SelectableTile light selected>
@ -41,9 +36,7 @@ Use the light variant for light backgrounds.
  </SelectableTile>
 </div>

-## Disabled state
-
-Disable tiles to prevent interaction.
+### Disabled state

 <div role="group" aria-label="selectable tiles">
  <SelectableTile selected>
--- a/docs/src/pages/components/SkeletonPlaceholder.svx
+++ b/docs/src/pages/components/SkeletonPlaceholder.svx
@ -3,16 +3,10 @@
  import Preview from "../../components/Preview.svelte";
 </script>

-`SkeletonPlaceholder` provides a loading state placeholder that can be used to indicate content is being loaded. It supports custom sizing and forwards mouse events for interactive loading states.
-
-## Default
-
-Create a basic skeleton placeholder with default styling.
+### Default

 <SkeletonPlaceholder />

-## Custom size
-
-Specify custom dimensions using the `style` prop.
+### Custom size

 <SkeletonPlaceholder style="height: 12rem; width: 12rem;" />
--- a/docs/src/pages/components/SkeletonText.svx
+++ b/docs/src/pages/components/SkeletonText.svx
@ -3,34 +3,22 @@
  import Preview from "../../components/Preview.svelte";
 </script>

-`SkeletonText` provides a loading state for text content with support for different sizes and line counts. It's commonly used to indicate that text content is being loaded.
-
-## Default
-
-Create a basic skeleton text with default styling.
+### Default

 <SkeletonText />

-## Heading variant
-
-Use the heading variant for larger text placeholders.
+### Heading variant

 <SkeletonText heading />

-## Paragraph variant
-
-Use the paragraph variant for multi-line text placeholders.
+### Paragraph variant

 <SkeletonText paragraph />

-## Paragraph with custom line count
-
-Specify the number of lines to render using the `lines` prop.
+### Paragraph with custom line count

 <SkeletonText paragraph lines={8} />

-## Paragraph with max width
-
-Set a custom width for the text placeholder using the `width` prop.
+### Paragraph with max width

 <SkeletonText paragraph width="50%" />
--- a/docs/src/pages/components/Slider.svx
+++ b/docs/src/pages/components/Slider.svx
@ -7,70 +7,44 @@ components: ["Slider", "SliderSkeleton"]
  import Preview from "../../components/Preview.svelte";
 </script>

-`Slider` provides a visual way to select a value from a range. It supports keyboard navigation, custom ranges, step values, and various states.
+### Default

-## Default
+<Slider />

-Create a basic slider with a label and default range (0-100).
-
-<Slider labelText="Instances" value={0} />
-
-## Full width
+### Full width

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

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

-## Hidden label
+### Hidden text input

-Visually hide the label while maintaining accessibility.
+<Slider hideTextInput />

-<Slider labelText="Instances" hideLabel value={0} />
-
-## Hidden text input
-
-Hide the text input while keeping the slider functionality.
-
-<Slider labelText="Instances" hideTextInput value={0} />
-
-## Custom minimum, maximum values
-
-Set custom range values and labels.
+### Custom minimum, maximum values

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

-## Custom step value
-
-Specify the step value for more precise control.
+### Custom step value

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

-## Light variant
+### Light variant

-Use the light variant for light backgrounds.
+<Slider light labelText="Runtime memory (MB)" min={10} max={990} maxLabel="990 MB" value={100}  step={10} />

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

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

-Indicate an invalid state with the `invalid` prop.
+### Disabled state

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

-## Disabled state
-
-Disable the slider to prevent interaction.
-
-<Slider disabled labelText="Runtime memory (MB)" min={10} max={990} maxLabel="990 MB" value={100} step={10} />
-
-## Skeleton
-
-Show a loading state with the skeleton variant.
+### Skeleton

 <SliderSkeleton />

-## Skeleton (hidden label)
-
-Show a loading state without a label.
+### Skeleton (hidden label)

 <SliderSkeleton hideLabel />
--- a/docs/src/pages/components/StructuredList.svx
+++ b/docs/src/pages/components/StructuredList.svx
@ -3,16 +3,12 @@ components: ["StructuredList", "StructuredListSkeleton", "StructuredListBody", "
 ---

 <script>
-  import { StructuredList, StructuredListSkeleton, StructuredListBody, StructuredListHead, StructuredListCell, StructuredListRow, StructuredListInput } from "carbon-components-svelte";
+  import { StructuredList, StructuredListSkeleton, StructuredListBody, StructuredListHead, StructuredListCell ,StructuredListRow, StructuredListInput } from "carbon-components-svelte";
  import CheckmarkFilled from "carbon-icons-svelte/lib/CheckmarkFilled.svelte";
  import Preview from "../../components/Preview.svelte";
 </script>

-`StructuredList` provides a semantic way to display tabular data with support for selection, keyboard navigation, and various layout options.
-
-## Default
-
-Display a basic structured list with headers and rows by default.
+### Default (read-only)

 <StructuredList>
  <StructuredListHead>
@ -24,26 +20,39 @@ Display a basic structured list with headers and rows by default.
  </StructuredListHead>
  <StructuredListBody>
    <StructuredListRow>
+      <StructuredListCell noWrap>Row 1</StructuredListCell>
      <StructuredListCell>Row 1</StructuredListCell>
-      <StructuredListCell>Row 1</StructuredListCell>
-      <StructuredListCell>Row 1</StructuredListCell>
+      <StructuredListCell>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
+        magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
+        sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
+        vulputate nisl a porttitor interdum.
+      </StructuredListCell>
    </StructuredListRow>
    <StructuredListRow>
+      <StructuredListCell noWrap>Row 2</StructuredListCell>
      <StructuredListCell>Row 2</StructuredListCell>
-      <StructuredListCell>Row 2</StructuredListCell>
-      <StructuredListCell>Row 2</StructuredListCell>
+      <StructuredListCell>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
+        magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
+        sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
+        vulputate nisl a porttitor interdum.
+      </StructuredListCell>
    </StructuredListRow>
    <StructuredListRow>
+      <StructuredListCell noWrap>Row 3</StructuredListCell>
      <StructuredListCell>Row 3</StructuredListCell>
-      <StructuredListCell>Row 3</StructuredListCell>
-      <StructuredListCell>Row 3</StructuredListCell>
+      <StructuredListCell>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
+        magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
+        sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
+        vulputate nisl a porttitor interdum.
+      </StructuredListCell>
    </StructuredListRow>
  </StructuredListBody>
 </StructuredList>

-## Condensed variant
-
-Use the condensed variant for more compact rows.
+### Condensed variant

 <StructuredList condensed>
  <StructuredListHead>
@ -55,26 +64,39 @@ Use the condensed variant for more compact rows.
  </StructuredListHead>
  <StructuredListBody>
    <StructuredListRow>
+      <StructuredListCell noWrap>Row 1</StructuredListCell>
      <StructuredListCell>Row 1</StructuredListCell>
-      <StructuredListCell>Row 1</StructuredListCell>
-      <StructuredListCell>Row 1</StructuredListCell>
+      <StructuredListCell>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
+        magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
+        sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
+        vulputate nisl a porttitor interdum.
+      </StructuredListCell>
    </StructuredListRow>
    <StructuredListRow>
+      <StructuredListCell noWrap>Row 2</StructuredListCell>
      <StructuredListCell>Row 2</StructuredListCell>
-      <StructuredListCell>Row 2</StructuredListCell>
-      <StructuredListCell>Row 2</StructuredListCell>
+      <StructuredListCell>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
+        magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
+        sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
+        vulputate nisl a porttitor interdum.
+      </StructuredListCell>
    </StructuredListRow>
    <StructuredListRow>
+      <StructuredListCell noWrap>Row 3</StructuredListCell>
      <StructuredListCell>Row 3</StructuredListCell>
-      <StructuredListCell>Row 3</StructuredListCell>
-      <StructuredListCell>Row 3</StructuredListCell>
+      <StructuredListCell>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
+        magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
+        sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
+        vulputate nisl a porttitor interdum.
+      </StructuredListCell>
    </StructuredListRow>
  </StructuredListBody>
 </StructuredList>

-## Flush variant
-
-Use the flush variant to remove padding from the list.
+### Flush

 <StructuredList flush>
  <StructuredListHead>
@ -118,9 +140,7 @@ Use the flush variant to remove padding from the list.
  </StructuredListBody>
 </StructuredList>

-## Selectable rows
-
-Enable row selection with the `selection` prop and `StructuredListInput` components.
+### Selectable rows

 <StructuredList selection selected="row-1-value">
  <StructuredListHead>
@ -160,8 +180,6 @@ Enable row selection with the `selection` prop and `StructuredListInput` compone
  </StructuredListBody>
 </StructuredList>

-## Skeleton
-
-Show a loading state with the skeleton variant.
+### Skeleton

 <StructuredListSkeleton rows={3} />
--- a/docs/src/pages/components/Tabs.svx
+++ b/docs/src/pages/components/Tabs.svx
@ -7,11 +7,7 @@ components: ["Tabs", "Tab", "TabContent", "TabsSkeleton"]
  import Preview from "../../components/Preview.svelte";
 </script>

-`Tabs` provides a way to organize content into separate views that can be switched between. It supports keyboard navigation, disabled states, and various layout options.
-
-## Default
-
-Create a basic tab interface with labels and content.
+### Default

 <Tabs>
  <Tab label="Tab label 1" />
@ -24,9 +20,11 @@ Create a basic tab interface with labels and content.
  </svelte:fragment>
 </Tabs>

-## Auto width
+### Auto width

-By default, each tab has a fixed width of `10rem`. Set `autoWidth` to `true` for tabs to automatically adjust their width based on content.
+By default, the width of each tab is set to `10rem`.
+
+Set `autoWidth` to `true` for tabs to have an automatically set width.

 <Tabs autoWidth>
  <Tab label="Tab label 1" />
@ -39,15 +37,15 @@ By default, each tab has a fixed width of `10rem`. Set `autoWidth` to `true` for
  </svelte:fragment>
 </Tabs>

-## Reactive example
-
-Use `bind:selected` to create a two-way binding with the selected tab index. This allows you to programmatically control the selected tab and react to tab changes.
+### Reactive example

 <FileSource src="/framed/Tabs/TabsReactive" />

-## Disabled tabs
+### Disabled tabs

-Set `disabled` to `true` on a `Tab` component to prevent interaction. Keyboard navigation will skip disabled tabs.
+Setting `disabled` to `true` on the `Tab` component will prevent it from being clickable.
+
+Using keyboard navigation (left and right arrow keys) will skip to the next non-disabled tab.

 <Tabs>
  <Tab label="Tab label 1" />
@ -62,9 +60,7 @@ Set `disabled` to `true` on a `Tab` component to prevent interaction. Keyboard n
  </svelte:fragment>
 </Tabs>

-## Container type
-
-Use the container type for a more prominent tab interface.
+### Container type

 <Tabs type="container">
  <Tab label="Tab label 1" />
@ -77,14 +73,10 @@ Use the container type for a more prominent tab interface.
  </svelte:fragment>
 </Tabs>

-## Skeleton (default)
-
-Show a loading state with the default skeleton variant.
+### Skeleton (default)

 <TabsSkeleton count={3} />

-## Skeleton (container)
-
-Show a loading state with the container skeleton variant.
+### Skeleton (container)

 <TabsSkeleton type="container" count={3} />
--- a/docs/src/pages/components/Tag.svx
+++ b/docs/src/pages/components/Tag.svx
@ -1,30 +1,18 @@
---
-components: ["Tag", "TagSkeleton"]
---
-
 <script>
-  import { Tag, TooltipDefinition } from "carbon-components-svelte";
+  import { Tag } from "carbon-components-svelte";
  import IbmCloud from "carbon-icons-svelte/lib/IbmCloud.svelte";
  import Preview from "../../components/Preview.svelte";
 </script>

-`Tag` provides a way to categorize content with a keyword or label. It supports various styles, sizes, and interactive states, including filterable and interactive variants.
-
-## Default
-
-Create a basic tag with text content.
+### Default

 <Tag>IBM Cloud</Tag>

-## Small size
-
-Use the small size variant for more compact layouts.
+### Small size

 <Tag size="sm">IBM Cloud</Tag>

-## Tag types
-
-Choose from a variety of color types to match your design system.
+### Tag types

 <Tag type="red">red</Tag>
 <Tag type="magenta">magenta</Tag>
@ -39,61 +27,41 @@ Choose from a variety of color types to match your design system.
 <Tag type="high-contrast">high-contrast</Tag>
 <Tag type="outline">outline</Tag>

-## Filterable
-
-Create a filterable tag with a close button that dispatches a `close` event when clicked.
+### Filterable

 <Tag filter on:close>carbon-components</Tag>

-## Filterable (disabled)
-
-Disable a filterable tag to prevent interaction.
+### Filterable (disabled)

 <Tag filter disabled on:close>carbon-components</Tag>

-## Filterable (small)
-
-Combine the filterable variant with the small size.
+### Filterable (small)

 <Tag size="sm" filter on:close>carbon-components</Tag>

-## Custom icon
+### Custom icon

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

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

-## Interactive variant
+### Interactive variant

-Set `interactive` to `true` to render a `button` element instead of a `div`. This is useful for clickable tags.
+Set `interactive` to `true` to render a `button` element instead of a `div`.

 <Tag interactive>Machine learning</Tag>

-## Disabled
+### Disabled

-Both filterable and interactive tag variants support a disabled state.
+The filterable and interactive tag variants have a disabled state.

 <Tag filter disabled>Machine learning</Tag>
 <Tag interactive disabled>Machine learning</Tag>

-## Tooltip in a tag
-
-Embed a tooltip within a tag to provide additional context.
-
-<Tag>
-  <TooltipDefinition tooltipText="IBM Corporate Headquarters is based in Armonk, New York.">
-    Armonk
-  </TooltipDefinition>
-</Tag>
-
-## Skeleton
-
-Show a loading state with the default skeleton variant.
+### Skeleton

 <Tag skeleton />

-## Skeleton (small)
-
-Show a loading state with the small skeleton variant.
+### Skeleton (small)

 <Tag size="sm" skeleton />
--- a/docs/src/pages/components/TextArea.svx
+++ b/docs/src/pages/components/TextArea.svx
@ -7,64 +7,46 @@ components: ["TextArea", "TextAreaSkeleton"]
  import Preview from "../../components/Preview.svelte";
 </script>

-`TextArea` provides a multi-line text input field with support for various states, character counting, and accessibility features. It's ideal for longer text input like descriptions, comments, or messages.
-
-## Default
-
-Create a basic textarea with a label and placeholder text.
+### Default

 <TextArea labelText="App description" placeholder="Enter a description..." />

-## Maximum character count
+### Maximum character count

-Specify the max character count using the `maxCount` prop. A character counter will be displayed to the right of the label. You can also use the native `maxlength` attribute if you prefer not to show a counter.
+Specify the max character count using the `maxCount` prop. A character counter will be displayed to the right of the label.
+
+You can always use the native `maxlength` attribute if you'd prefer that a counter not be shown.

 <TextArea labelText="App description" placeholder="Enter a description..." maxCount={100} />

-## With helper text
-
-Add helper text below the textarea to provide additional context or instructions.
+### With helper text

 <TextArea labelText="App description" helperText="A rich description helps us better recommend related products and services" placeholder="Enter a description..." />

-## Hidden label
-
-Visually hide the label while maintaining accessibility by setting `hideLabel` to `true`.
+### Hidden label

 <TextArea hideLabel labelText="App description" placeholder="Enter a description..." />

-## Light variant
-
-Use the light variant for light-themed backgrounds by setting `light` to `true`.
+### Light variant

 <TextArea light labelText="App description" placeholder="Enter a description..." />

-## Custom rows
-
-Adjust the number of visible rows using the `rows` prop. The default is 4 rows.
+### Custom rows

 <TextArea rows={10} labelText="App description" placeholder="Enter a description..." />

-## Invalid state
-
-Indicate an invalid state with an error message by setting `invalid` to `true` and providing `invalidText`.
+### Invalid state

 <TextArea invalid invalidText="Only plain text characters are allowed" labelText="App description" placeholder="Enter a description..." />

-## Disabled state
-
-Disable the textarea to prevent user interaction by setting `disabled` to `true`.
+### Disabled state

 <TextArea disabled labelText="App description" placeholder="Enter a description..." />

-## Skeleton
-
-Show a loading state with the default skeleton variant.
+### Skeleton

 <TextAreaSkeleton />

-## Skeleton without label
-
-Show a loading state without a label by setting `hideLabel` to `true`.
+### Skeleton without label

 <TextAreaSkeleton hideLabel />
--- a/docs/src/pages/components/TextInput.svx
+++ b/docs/src/pages/components/TextInput.svx
@ -7,82 +7,54 @@ components: ["TextInput", "TextInputSkeleton"]
  import Preview from "../../components/Preview.svelte";
 </script>

-`TextInput` provides a single-line text input field with support for various states, sizes, and accessibility features. It's ideal for short text input like usernames, search terms, or form fields.
-
-## Default
-
-Create a basic text input with a label and placeholder text.
+### Default

 <TextInput labelText="User name" placeholder="Enter user name..." />

-## With helper text
-
-Add helper text below the input to provide additional context or instructions.
+### With helper text

 <TextInput labelText="User name" helperText="Your user name is associated with your email" placeholder="Enter user name..." />

-## Hidden label
-
-Visually hide the label while maintaining accessibility by setting `hideLabel` to `true`.
+### Hidden label

 <TextInput hideLabel labelText="User name" placeholder="Enter user name..." />

-## Light variant
-
-Use the light variant for light-themed backgrounds by setting `light` to `true`.
+### Light variant

 <TextInput light labelText="User name" placeholder="Enter user name..." />

-## Inline variant
-
-Use the inline variant to display the label and input on the same line by setting `inline` to `true`.
+### Inline variant

 <TextInput inline labelText="User name" placeholder="Enter user name..." />

-## Read-only variant
-
-Display a non-editable value by setting `readonly` to `true`.
+### Read-only variant

 <TextInput readonly labelText="User name" value="IBM" />

-## Extra-large size
-
-Use the extra-large size for more prominent inputs by setting `size` to `"xl"`.
+### Extra-large size

 <TextInput size="xl" labelText="User name" placeholder="Enter user name..." />

-## Small size
-
-Use the small size for more compact inputs by setting `size` to `"sm"`.
+### Small size

 <TextInput size="sm" labelText="User name" placeholder="Enter user name..." />

-## Invalid state
-
-Indicate an invalid state with an error message by setting `invalid` to `true` and providing `invalidText`.
+### Invalid state

 <TextInput invalid invalidText="User name is already taken. Please try another." labelText="User name" placeholder="Enter user name..." />

-## Warning state
-
-Indicate a warning state with a message by setting `warn` to `true` and providing `warnText`.
+### Warning state

 <TextInput warn warnText="Your user name is different from your log in ID." labelText="User name" placeholder="Enter user name..." />

-## Disabled state
-
-Disable the input to prevent user interaction by setting `disabled` to `true`.
+### Disabled state

 <TextInput disabled labelText="User name" placeholder="Enter user name..." />

-## Skeleton
-
-Show a loading state with the default skeleton variant.
+### Skeleton

 <TextInputSkeleton />

-## Skeleton without label
-
-Show a loading state without a label by setting `hideLabel` to `true`.
+### Skeleton without label

 <TextInputSkeleton hideLabel />
--- a/docs/src/pages/components/Theme.svx
+++ b/docs/src/pages/components/Theme.svx
@ -1,7 +1,3 @@
---
-components: ["Theme"]
---
-
 <script>
  import { InlineNotification, CodeSnippet } from "carbon-components-svelte";
  import Preview from "../../components/Preview.svelte";
@ -9,54 +5,52 @@ components: ["Theme"]
  let code = `import "carbon-components-svelte/css/all.css";`;
 </script>

-The `Theme` component provides dynamic client-side theming using CSS variables. It supports five Carbon themes: white, g10, g80, g90, and g100, and allows for custom theme token overrides. The component can persist theme preferences using [window.localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) and provides built-in toggle and select controls for theme switching.
+The `Theme` component can dyanmically update the Carbon theme on the client-side. It can persist the theme locally using [window.localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage).

 <InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
  <div class="body-short-01">You must use the "all.css" StyleSheet with the <code>Theme</code> component.</div>
 </InlineNotification>

 The `all.css` StyleSheet uses [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) for dynamic theming.
-
+  
 <CodeSnippet svx-ignore {code} />

-## Default
-
-Create a basic theme component that can be controlled programmatically.
+### Default

 <FileSource src="/framed/Theme/Theme" />

-## Persist locally
+### Persist locally

-Set `persist` to `true` to save the theme preference in [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage). Use `persistKey` to specify a custom storage key.
+Set `persist` to `true` to persist the theme locally using the [Window.localStorage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage).

 <FileSource src="/framed/Theme/ThemePersist" />

-## Custom theme
+### Custom theme

-Override default Carbon theme tokens by providing custom key-value pairs in the `tokens` prop. Refer to the [Carbon website](https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme) for guidance on customizing themes.
+Define keys and values in the `tokens` prop that override default Carbon theme tokens. Refer to the [Carbon website](https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme) for guidance on customizing a theme using token values.

 <FileSource src="/framed/Theme/ThemeTokens" />

-## Theme toggle
+### Theme toggle

-Set `render` to `"toggle"` to display a toggle switch for switching between two themes. By default, it toggles between "white" and "g100" themes.
+Set `render` to `"toggle"` to render a toggle switch to control the theme.

 <FileSource src="/framed/Theme/ThemeToggle" />

-## Theme toggle (custom)
+### Theme toggle (custom)

-Customize the toggle appearance and behavior using the `toggle` prop. You can specify custom themes, labels, and other toggle properties.
+Customize the toggle using the `toggle` prop.

 <FileSource src="/framed/Theme/ThemeToggleCustom" />

-## Theme select
+### Theme select

-Set `render` to `"select"` to display a dropdown menu for selecting from all available themes.
+Set `render` to `"select"` to render a select dropdown to control the theme.

 <FileSource src="/framed/Theme/ThemeSelect" />

-## Theme select (custom)
+### Theme select (custom)

-Customize the select dropdown using the `select` prop. You can specify which themes to include, customize labels, and adjust other select properties.
+Customize the select using the `select` prop.

 <FileSource src="/framed/Theme/ThemeSelectCustom" />
--- a/docs/src/pages/components/Tile.svx
+++ b/docs/src/pages/components/Tile.svx
@ -1,18 +1,16 @@
+---
+source: Tile/Tile.svelte
+---
+
 <script>
  import { Tile } from "carbon-components-svelte";
  import Preview from "../../components/Preview.svelte";
 </script>

-`Tile` provides a container for displaying content in a structured, card-like format. It supports light and dark variants and can be used to create consistent, visually distinct content sections.
-
-## Default
-
-Create a basic tile container for your content.
+### Default

 <Tile>Content</Tile>

-## Light variant
-
-Use the light variant for light-themed backgrounds by setting `light` to `true`.
+### Light variant

 <Tile light>Content</Tile>
--- a/docs/src/pages/components/TimePicker.svx
+++ b/docs/src/pages/components/TimePicker.svx
@ -7,9 +7,7 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
  import Preview from "../../components/Preview.svelte";
 </script>

-`TimePicker` provides a time input field with optional period (AM/PM) and timezone selectors. It supports various sizes, states, and themes to match your application's design system.
-
-## Default
+### Default

 <TimePicker labelText="Cron job" placeholder="hh:mm">
  <TimePickerSelect value="pm">
@ -22,9 +20,7 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
  </TimePickerSelect>
 </TimePicker>

-## Light variant
-
-Use the light variant for light-themed backgrounds by setting `light` to `true`.
+### Light variant

 <TimePicker light labelText="Cron job" placeholder="hh:mm">
  <TimePickerSelect value="pm">
@ -37,9 +33,7 @@ Use the light variant for light-themed backgrounds by setting `light` to `true`.
  </TimePickerSelect>
 </TimePicker>

-## Extra-large size
-
-Use the extra-large size for more prominent time pickers by setting `size` to `"xl"`.
+### Extra-large size

 <TimePicker size="xl" labelText="Cron job" placeholder="hh:mm">
  <TimePickerSelect value="pm">
@ -52,9 +46,7 @@ Use the extra-large size for more prominent time pickers by setting `size` to `"
  </TimePickerSelect>
 </TimePicker>

-## Small size
-
-Use the small size for more compact time pickers by setting `size` to `"sm"`.
+### Small size

 <TimePicker size="sm" labelText="Cron job" placeholder="hh:mm">
  <TimePickerSelect value="pm">
@ -67,9 +59,7 @@ Use the small size for more compact time pickers by setting `size` to `"sm"`.
  </TimePickerSelect>
 </TimePicker>

-## Invalid state
-
-Indicate an invalid state with an error message by setting `invalid` to `true` and providing `invalidText`.
+### Invalid state

 <TimePicker invalid invalidText="A valid value is required" labelText="Cron job" placeholder="hh:mm">
  <TimePickerSelect value="pm">
@ -82,9 +72,8 @@ Indicate an invalid state with an error message by setting `invalid` to `true` a
  </TimePickerSelect>
 </TimePicker>

-## Disabled state

-Disable the time picker to prevent user interaction by setting `disabled` to `true`.
+### Disabled state

 <TimePicker labelText="Cron job" placeholder="hh:mm" disabled>
  <TimePickerSelect value="pm" disabled>
--- a/docs/src/pages/components/ToastNotification.svx
+++ b/docs/src/pages/components/ToastNotification.svx
@ -1,47 +1,32 @@
 ---
-components: ["ToastNotification"]
+source: Notification/ToastNotification.svelte
 ---

 <script>
-  import { ToastNotification } from "carbon-components-svelte";
+  import { ToastNotification, InlineNotification } from "carbon-components-svelte";
  import Preview from "../../components/Preview.svelte";
 </script>

-`ToastNotification` displays non-modal, time-based messages that appear at the top of the screen and automatically disappear. It supports various notification types, custom content, and accessibility features.
-
-See [detailed usage](https://carbondesignsystem.com/components/notification/usage).  
-See also: [InlineNotification](InlineNotification)
-
-## Default
-
-Display a basic error notification with title, subtitle, and timestamp by default.
+### Default (error)

 <ToastNotification title="Error" subtitle="An internal server error occurred." caption="{new Date().toLocaleString()}" />

-## Autoclose
+### Prevent default close behavior

-Specify the `timeout` prop to automatically close the notification after a specified duration (in milliseconds).
+`ToastNotification` is a controlled component. Prevent the default close behavior using the `e.preventDefault()` method in the dispatched `on:close` event.

-<FileSource src="/framed/ToastNotification/ToastNotificationTimeout" />
-
-## Prevent default close behavior
-
-Prevent the default close behavior using `e.preventDefault()` in the `on:close` event handler.
+<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
+  <div class="body-short-01">
+    Svelte version 3.48.0 or greater is required.
+  </div>
+</InlineNotification>

 <ToastNotification title="Error" subtitle="An internal server error occurred." caption="{new Date().toLocaleString()}" on:close={(e) => {
  e.preventDefault();
  // custom close logic (e.g., transitions)
 }} />

-## Full width
-
-Set `fullWidth` to `true` for the notification to span the full width of its container.
-
-<ToastNotification fullWidth title="Error" subtitle="An internal server error occurred." caption="{new Date().toLocaleString()}" />
-
-## Slottable title, subtitle, caption
-
-Customize the notification content using slots for more flexibility.
+### Slottable title, subtitle, caption

 <ToastNotification>
  <strong slot="title">Error: </strong>
@ -49,26 +34,11 @@ Customize the notification content using slots for more flexibility.
  <strong slot="caption">{new Date().toLocaleString()}</strong>
 </ToastNotification>

-## Accessible icon descriptions
-
-Provide custom descriptions for icons to improve accessibility.
-
-<ToastNotification 
-  title="错误"
-  subtitle="发生内部服务器错误"
-  statusIconDescription="错误图标"
-  closeButtonDescription="关闭通知"
-/>
-
-## Hidden close button
-
-Create a persistent notification by hiding the close button.
+### Hidden close button

 <ToastNotification hideCloseButton kind="warning" title="Scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="{new Date().toLocaleString()}" />

-## Notification variants
-
-The component supports different notification types:
+### Notification variants

 <ToastNotification kind="error" title="Error" subtitle="An internal server error occurred." caption="{new Date().toLocaleString()}" />
 <ToastNotification kind="info" title="New updates" subtitle="Restart to get the latest updates." caption="{new Date().toLocaleString()}"  />
@ -77,9 +47,7 @@ The component supports different notification types:
 <ToastNotification kind="warning" title="Scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="{new Date().toLocaleString()}" />
 <ToastNotification kind="warning-alt" title="Scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="{new Date().toLocaleString()}" />

-## Low contrast
-
-Use low contrast variants for less prominent notifications.
+### Low contrast

 <ToastNotification lowContrast kind="error" title="Error" subtitle="An internal server error occurred." caption="{new Date().toLocaleString()}" />
 <ToastNotification lowContrast kind="info" title="New updates" subtitle="Restart to get the latest updates." caption="{new Date().toLocaleString()}" />
--- a/docs/src/pages/components/Toggle.svx
+++ b/docs/src/pages/components/Toggle.svx
@ -7,73 +7,47 @@ components: ["Toggle", "ToggleSkeleton"]
  import Preview from "../../components/Preview.svelte";
 </script>

-`Toggle` provides a switch-like control that allows users to turn options on or off. It supports custom labels, different sizes, and various states to match your application's needs.
-
-## Default
-
-Display a basic toggle in its untoggled state by default.
+### Default (untoggled)

 <Toggle labelText="Push notifications" />

-## Toggled
-
-Set `toggled` to `true` to display the toggle in its on state.
+### Toggled

 <Toggle labelText="Push notifications" toggled />

-## Reactive example
-
-Use two-way binding to control the toggle state programmatically.
+### Reactive example

 <FileSource src="/framed/Toggle/ToggleReactive" />

-## on:toggle event
-
-Listen for toggle state changes using the `on:toggle` event.
+### on:toggle event

 <Toggle labelText="Push notifications" on:toggle={e => console.log(e.detail)} />

-## Hidden label text
-
-Set `hideLabel` to `true` to visually hide the label while maintaining accessibility.
-
-<Toggle labelText="Push notifications" hideLabel />
-
-## Custom labels
-
-Customize the toggle labels using `labelA` and `labelB` props.
+### Custom labels

 <Toggle labelText="Push notifications" labelA="No" labelB="Yes" />

-## Slottable labels
+### Slottable labels

-Use slots to customize the toggle labels with additional styling or content.
+An alternative to the "labelA" and "labelB" props is to use the corresponding named slots.

 <Toggle labelText="Push notifications">
  <span slot="labelA" style="color: red">No</span>
  <span slot="labelB" style="color: green">Yes</span>
 </Toggle>

-## Disabled state
-
-Set `disabled` to `true` to prevent user interaction.
+### Disabled

 <Toggle labelText="Push notifications" disabled />

-## Small size
-
-Use the small size variant by setting `size` to `"sm"`.
+### Small size

 <Toggle size="sm" labelText="Push notifications" />

-## Skeleton
-
-Display a loading state using the skeleton component.
+### Skeleton

 <ToggleSkeleton />

-## Skeleton (small)
-
-Use the small size variant for the skeleton component.
+### Skeleton (small)

 <ToggleSkeleton size="sm" />
--- a/docs/src/pages/components/Tooltip.svx
+++ b/docs/src/pages/components/Tooltip.svx
@ -8,11 +8,9 @@ components: ["Tooltip", "TooltipFooter"]
  import Preview from "../../components/Preview.svelte";
 </script>

-`Tooltip` displays contextual information when users hover over or focus on an element. It supports various directions, alignments, and interactive content to provide additional context or guidance.
+### Default

-## Default
-
-Display a tooltip triggered by the default information icon.
+By default, the tooltip is triggered by an information icon.

 <Tooltip>
  <p>
@ -20,9 +18,7 @@ Display a tooltip triggered by the default information icon.
  </p>
 </Tooltip>

-## With trigger text
-
-Use custom trigger text instead of the default icon.
+### With trigger text

 <Tooltip triggerText="Resource list">
  <p>
@ -30,32 +26,24 @@ Use custom trigger text instead of the default icon.
  </p>
 </Tooltip>

-## Reactive example
-
-Control the tooltip state programmatically.
+### Reactive example

 <FileSource src="/framed/Tooltip/TooltipReactive" />

-## Directions
-
-Position the tooltip in different directions using the `direction` prop.
+### Directions

 <Tooltip triggerText="Top" direction="top"><p>Top</p></Tooltip>
 <Tooltip triggerText="Right" direction="right"><p>Right</p></Tooltip>
 <Tooltip triggerText="Bottom" direction="bottom"><p>Bottom</p></Tooltip>
 <Tooltip triggerText="Left" direction="left"><p>Left</p></Tooltip>

-## Alignment
-
-Align the tooltip content using the `align` prop.
+### Alignment

 <Tooltip triggerText="Start" align="start"><p>Start</p></Tooltip>
 <Tooltip triggerText="End" align="end"><p>End</p></Tooltip>
 <Tooltip triggerText="Center" align="center"><p>Center</p></Tooltip>

-## Interactive
-
-Add interactive elements like links and buttons using `TooltipFooter`.
+### Interactive

 <Tooltip triggerText="Resource list">
  <p>
@ -64,12 +52,10 @@ Add interactive elements like links and buttons using `TooltipFooter`.
  <TooltipFooter selectorPrimaryFocus="#d">
    <Link href="/">Learn more</Link>
    <Button id="d" size="small">Manage</Button>
-  </TooltipFooter>
+</TooltipFooter>
 </Tooltip>

-## Custom icon (component)
-
-Use a custom icon component with the `icon` prop.
+### Custom icon (component)

 <Tooltip triggerText="Resource list" icon={Catalog}>
  <p>
@ -77,9 +63,7 @@ Use a custom icon component with the `icon` prop.
  </p>
 </Tooltip>

-## Custom icon (slot)
-
-Customize the icon using the `icon` slot for more flexibility.
+### Custom icon (slot)

 <Tooltip triggerText="Resource list">
  <div slot="icon" style="width: 1rem; height: 1rem; outline: 1px solid red;"></div>
@ -88,9 +72,7 @@ Customize the icon using the `icon` slot for more flexibility.
  </p>
 </Tooltip>

-## Hidden icon
-
-Hide the icon while keeping the tooltip functionality using `hideIcon`.
+### Hidden icon

 <Tooltip hideIcon triggerText="Resource list">
  <p>
--- a/docs/src/pages/components/TooltipDefinition.svx
+++ b/docs/src/pages/components/TooltipDefinition.svx
@ -3,27 +3,23 @@
  import Preview from "../../components/Preview.svelte";
 </script>

-`TooltipDefinition` provides inline definitions for terms or concepts. It displays a tooltip when users hover over or focus on the defined term, making it ideal for providing additional context without cluttering the interface.
-
-## Default
-
-Display a basic definition tooltip with the default bottom-center alignment.
+### Default

 <TooltipDefinition tooltipText="IBM Corporate Headquarters is based in Armonk, New York.">
  Armonk
 </TooltipDefinition>

-## Custom tooltip direction and alignment
+### Custom tooltip direction and alignment

-Customize the tooltip position using the `direction` and `align` props. The default direction is `"bottom"` and alignment is `"center"`.
+Customize the tooltip menu direction and alignment through the `direction` and `align` props.
+
+By default, `direction` is `"bottom"` and `align` is `"center"`.

 <TooltipDefinition direction="top" align="start" tooltipText="IBM Corporate Headquarters is based in Armonk, New York.">
  Armonk
 </TooltipDefinition>

-## Custom tooltip slot
-
-Use the `tooltip` slot to customize the tooltip content with additional styling or structure.
+### Custom tooltip slot

 <TooltipDefinition>
  Armonk
--- a/docs/src/pages/components/TooltipIcon.svx
+++ b/docs/src/pages/components/TooltipIcon.svx
@ -5,33 +5,25 @@
  import Preview from "../../components/Preview.svelte";
 </script>

-`TooltipIcon` displays contextual information when users hover over or focus on an icon. It's ideal for providing additional context about icons or actions in your interface.
-
-## Default
-
-Display a tooltip with the default bottom-center alignment.
+### Default ("bottom" direction, "center" aligned)

 <TooltipIcon tooltipText="Carbon is an open source design system by IBM." icon={Carbon} />

-## Directions
-
-Position the tooltip in different directions and alignments using the `direction` and `align` props.
+### Directions

 <TooltipIcon tooltipText="Top start" direction="top" align="start" icon={Filter} />
 <TooltipIcon tooltipText="Right end" direction="right" align="end" icon={Filter} />
 <TooltipIcon tooltipText="Bottom start" direction="bottom" align="start" icon={Filter} />
 <TooltipIcon tooltipText="Left start" direction="left" align="start" icon={Filter} />

-## Custom tooltip text
+### Custom tooltip text

-Use the `tooltipText` slot to customize the tooltip content with additional styling.
+Use the "text" slot to customize the tooltip text.

 <TooltipIcon icon={Carbon}>
  <span slot="tooltipText" style="color: red">Carbon is an open source design system by IBM.</span>
 </TooltipIcon>

-## Disabled state
-
-Set `disabled` to `true` to prevent user interaction with the tooltip.
+### Disabled

 <TooltipIcon disabled tooltipText="Carbon is an open source design system by IBM." icon={Carbon} />
--- a/Show more
+++ b/Show more