diff --git a/.github/workflows/checks.yml b/.github/workflows/checks.yml index 8c7c5b52..24297747 100644 --- a/.github/workflows/checks.yml +++ b/.github/workflows/checks.yml @@ -1,60 +1,37 @@ 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@v4 - - uses: actions/setup-node@v4 - with: - node-version: "22.x" - cache: "npm" - - run: npm ci - - run: npm run lint - test: - runs-on: macos-15-xlarge + runs-on: macos-latest-xlarge steps: - uses: actions/checkout@v4 - - uses: actions/setup-node@v4 + - uses: actions/cache@v4 + id: npm-cache with: - node-version: "22.x" - cache: "npm" - - run: npm ci - - run: npm run test + path: "**/node_modules" + key: ${{ runner.os }}-modules-${{ hashFiles('**/package-lock.json') }} - types: - runs-on: macos-15-xlarge - steps: - - uses: actions/checkout@v4 - - uses: actions/setup-node@v4 - with: - node-version: "22.x" - cache: "npm" - - run: npm ci - - run: npm run test:src-types - - run: npm run test:types + - name: Install dependencies + run: npm install + + - name: Run lint + run: npm run lint + + - name: Unit tests + run: npm run test + + - name: Test generated source types + run: npm run test:src-types + + - name: Test 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 + if: github.ref == 'refs/heads/master' env: deploy_url: ${{ secrets.RENDER_DEPLOY_HOOK_URL }} - run: curl -f "$deploy_url" + run: | + curl "$deploy_url" diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index e85c95df..3198c4c0 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -13,7 +13,7 @@ jobs: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: - node-version: "22.x" + node-version: "20.x" registry-url: "https://registry.npmjs.org" - name: Install dependencies diff --git a/CHANGELOG.md b/CHANGELOG.md index 6adc2484..594e1c11 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,82 +2,6 @@ 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. -### [0.89.7](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.89.6...v0.89.7) (2025-09-05) - -### 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 diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index b1f4eb48..b2c72de3 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -1,6 +1,6 @@ # Component Index -> 165 components exported from carbon-components-svelte@0.89.7. +> 165 components exported from carbon-components-svelte@0.88.2. ## Components @@ -671,7 +671,6 @@ export interface ComboBoxItem { | size | No | let | No | "sm" | "xl" | undefined | Set the size of the combobox | | disabled | No | let | No | boolean | false | Set to `true` to disable the combobox | | titleText | No | let | No | string | "" | Specify the title text of the combobox | -| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text | | placeholder | No | let | No | string | "" | Specify the placeholder text | | helperText | No | let | No | string | "" | Specify the helper text | | invalidText | No | let | No | string | "" | Specify the invalid state text | @@ -2419,7 +2418,6 @@ export interface MultiSelectItem { | clear | dispatched | null | | blur | dispatched | FocusEvent | CustomEvent | | keydown | forwarded | -- | -| input | forwarded | -- | | keyup | forwarded | -- | | focus | forwarded | -- | | paste | forwarded | -- | @@ -2682,25 +2680,24 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :-------------------- | :------- | :--------------- | :------- | ---------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| pageSize | No | let | Yes | number | 10 | Specify the number of items to display in a page | -| page | No | let | Yes | number | 1 | Specify the current page index | -| totalItems | No | let | No | number | 0 | Specify the total number of items | -| pageWindow | No | let | No | number | 1000 | If `totalItems` is a large number, it can affect the
rendering performance of this component since its value
is used to calculate the number of pages in the native
select dropdown. This value creates a small window of
pages rendered around the current page. By default,
a maximum of 1000 select items are rendered. | -| disabled | No | let | No | boolean | false | Set to `true` to disable the pagination | -| forwardText | No | let | No | string | "Next page" | Specify the forward button text | -| backwardText | No | let | No | string | "Previous page" | Specify the backward button text | -| itemsPerPageText | No | let | No | string | "Items per page:" | Specify the items per page text | -| itemText | No | let | No | (min: number, max: number) => string | (min, max) => \`${min.toLocaleString()}–${max.toLocaleString()} item${max === 1 ? "" : "s"}\` | Override the item text | -| itemRangeText | No | let | No | (min: number, max: number, total: number) => string | (min, max, total) => \`${min.toLocaleString()}–${max.toLocaleString()} of ${total.toLocaleString()} item${max === 1 ? "" : "s"}\` | Override the item range text | -| pageInputDisabled | No | let | No | boolean | false | Set to `true` to disable the page input | -| pageSizeInputDisabled | No | let | No | boolean | false | Set to `true` to disable the page size input | -| pageSizes | No | let | No | ReadonlyArray | [10] | Specify the available page sizes | -| pagesUnknown | No | let | No | boolean | false | Set to `true` if the number of pages is unknown | -| pageText | No | let | No | (page: number) => string | (page) => \`page ${page.toLocaleString()}\` | Override the page text | -| pageRangeText | No | let | No | (current: number, total: number) => string | (current, total) => \`of ${total.toLocaleString()} page${total === 1 ? "" : "s"}\` | Override the page range text | -| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------------------- | :------- | :--------------- | :------- | ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------ | +| pageSize | No | let | Yes | number | 10 | Specify the number of items to display in a page | +| page | No | let | Yes | number | 1 | Specify the current page index | +| totalItems | No | let | No | number | 0 | Specify the total number of items | +| disabled | No | let | No | boolean | false | Set to `true` to disable the pagination | +| forwardText | No | let | No | string | "Next page" | Specify the forward button text | +| backwardText | No | let | No | string | "Previous page" | Specify the backward button text | +| itemsPerPageText | No | let | No | string | "Items per page:" | Specify the items per page text | +| itemText | No | let | No | (min: number, max: number) => string | (min, max) => \`${min}–${max} item${max === 1 ? "" : "s"}\` | Override the item text | +| itemRangeText | No | let | No | (min: number, max: number, total: number) => string | (min, max, total) => \`${min}–${max} of ${total} item${max === 1 ? "" : "s"}\` | Override the item range text | +| pageInputDisabled | No | let | No | boolean | false | Set to `true` to disable the page input | +| pageSizeInputDisabled | No | let | No | boolean | false | Set to `true` to disable the page size input | +| pageSizes | No | let | No | ReadonlyArray | [10] | Specify the available page sizes | +| pagesUnknown | No | let | No | boolean | false | Set to `true` if the number of pages is unknown | +| pageText | No | let | No | (page: number) => string | (page) => \`page ${page}\` | Override the page text | +| pageRangeText | No | let | No | (current: number, total: number) => string | (current, total) => \`of ${total} page${total === 1 ? "" : "s"}\` | Override the page range text | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | ### Slots @@ -2969,8 +2966,6 @@ None. | Event name | Type | Detail | | :--------- | :-------- | :----- | -| focus | forwarded | -- | -| blur | forwarded | -- | | change | forwarded | -- | ## `RadioButtonGroup` @@ -3223,14 +3218,14 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :-------- | :------- | :--------------- | :------- | --------------------------------- | ---------------------- | ---------------------------------------------------------------------------------- | -| value | No | let | No | string | number | "" | Specify the option value | -| text | No | let | No | string | undefined | Specify the option text
If not specified, the value will be used as the text. | -| hidden | No | let | No | boolean | false | Set to `true` to hide the option | -| disabled | No | let | No | boolean | false | Set to `true` to disable the option | -| class | No | let | No | string | undefined | Specify the class of the `option` element | -| style | No | let | No | string | undefined | Specify the style of the `option` element | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | --------------------------------- | ---------------------- | ----------------------------------------- | +| value | No | let | No | string | number | "" | Specify the option value | +| text | No | let | No | string | "" | Specify the option text | +| hidden | No | let | No | boolean | false | Set to `true` to hide the option | +| disabled | No | let | No | boolean | false | Set to `true` to disable the option | +| class | No | let | No | string | undefined | Specify the class of the `option` element | +| style | No | let | No | string | undefined | Specify the style of the `option` element | ### Slots diff --git a/README.md b/README.md index 9433ba03..d79f656e 100644 --- a/README.md +++ b/README.md @@ -13,8 +13,8 @@ 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 Icons Svelte](https://github.com/carbon-design-system/carbon-icons-svelte)**: 2,400+ Carbon icons as Svelte components +- **[Carbon Pictograms Svelte](https://github.com/carbon-design-system/carbon-pictograms-svelte)**: 1,200+ Carbon pictograms as Svelte components - **[Carbon Charts Svelte](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte)**: 25+ charts, powered by d3 - **[Carbon Preprocess Svelte](https://github.com/carbon-design-system/carbon-preprocess-svelte)**: Collection of Svelte preprocessors for Carbon diff --git a/docs/package-lock.json b/docs/package-lock.json index 343f034b..6af63389 100644 --- a/docs/package-lock.json +++ b/docs/package-lock.json @@ -20,12 +20,12 @@ "prismjs": "^1.30.0", "remark-slug": "^6.1.0", "svelte": "^4.2.19", - "vite": "^5.4.19" + "vite": "^5.4.14" } }, "..": { "name": "carbon-components-svelte", - "version": "0.89.4", + "version": "0.88.0", "dev": true, "hasInstallScript": true, "license": "Apache-2.0", @@ -36,25 +36,25 @@ "devDependencies": { "@sveltejs/vite-plugin-svelte": "^3.1.2", "@testing-library/jest-dom": "^6.6.3", - "@testing-library/svelte": "^5.2.8", + "@testing-library/svelte": "^5.2.7", "@testing-library/user-event": "^14.6.1", - "autoprefixer": "^10.4.21", + "autoprefixer": "^10.4.8", "carbon-components": "10.58.12", - "carbon-icons-svelte": "^13.4.0", + "carbon-icons-svelte": "^13.3.0", "carbon-preprocess-svelte": "^0.11.11", "culls": "^0.1.1", - "jsdom": "^26.1.0", - "postcss": "^8.5.5", + "jsdom": "^26.0.0", + "postcss": "^8.5.3", "prettier": "^3.5.3", - "prettier-plugin-svelte": "^3.4.0", + "prettier-plugin-svelte": "^3.3.3", "sass": "^1.49.11", "standard-version": "^9.5.0", "sveld": "^0.22.1", - "svelte": "^4.2.20", - "svelte-check": "^4.2.1", - "tinyglobby": "^0.2.14", - "typescript": "^5.8.3", - "vitest": "^3.2.3" + "svelte": "^4.2.19", + "svelte-check": "^4.1.5", + "tinyglobby": "^0.2.12", + "typescript": "^5.8.2", + "vitest": "^3.0.8" } }, "node_modules/@ampproject/remapping": { @@ -1035,20 +1035,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/call-bind-apply-helpers": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz", - "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==", - "dev": true, - "license": "MIT", - "dependencies": { - "es-errors": "^1.3.0", - "function-bind": "^1.1.2" - }, - "engines": { - "node": ">= 0.4" - } - }, "node_modules/carbon-components-svelte": { "resolved": "..", "link": true @@ -1411,21 +1397,6 @@ "node": ">=10" } }, - "node_modules/dunder-proto": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz", - "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==", - "dev": true, - "license": "MIT", - "dependencies": { - "call-bind-apply-helpers": "^1.0.1", - "es-errors": "^1.3.0", - "gopd": "^1.2.0" - }, - "engines": { - "node": ">= 0.4" - } - }, "node_modules/error-ex": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", @@ -1496,11 +1467,13 @@ } }, "node_modules/es-define-property": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz", - "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==", + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz", + "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==", "dev": true, - "license": "MIT", + "dependencies": { + "get-intrinsic": "^1.2.4" + }, "engines": { "node": ">= 0.4" } @@ -1515,11 +1488,10 @@ } }, "node_modules/es-object-atoms": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz", - "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==", + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.0.0.tgz", + "integrity": "sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==", "dev": true, - "license": "MIT", "dependencies": { "es-errors": "^1.3.0" }, @@ -1528,16 +1500,14 @@ } }, "node_modules/es-set-tostringtag": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz", - "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==", + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.3.tgz", + "integrity": "sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==", "dev": true, - "license": "MIT", "dependencies": { - "es-errors": "^1.3.0", - "get-intrinsic": "^1.2.6", + "get-intrinsic": "^1.2.4", "has-tostringtag": "^1.0.2", - "hasown": "^2.0.2" + "hasown": "^2.0.1" }, "engines": { "node": ">= 0.4" @@ -1684,17 +1654,14 @@ } }, "node_modules/form-data": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.4.tgz", - "integrity": "sha512-f0cRzm6dkyVYV3nPoooP8XlccPQukegwhAnpoLcXy+X+A8KfpGOoXwDr9FLZd3wzgLaBGQBE3lY93Zm/i1JvIQ==", + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.2.tgz", + "integrity": "sha512-sJe+TQb2vIaIyO783qN6BlMYWMw3WBOHA1Ay2qxsnjuafEOQFJ2JakedOQirT6D5XPRxDvS7AHYyem9fTpb4LQ==", "dev": true, - "license": "MIT", "dependencies": { "asynckit": "^0.4.0", "combined-stream": "^1.0.8", - "es-set-tostringtag": "^2.1.0", - "hasown": "^2.0.2", - "mime-types": "^2.1.35" + "mime-types": "^2.1.12" }, "engines": { "node": ">= 6" @@ -1766,22 +1733,16 @@ } }, "node_modules/get-intrinsic": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz", - "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==", + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz", + "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==", "dev": true, - "license": "MIT", "dependencies": { - "call-bind-apply-helpers": "^1.0.2", - "es-define-property": "^1.0.1", "es-errors": "^1.3.0", - "es-object-atoms": "^1.1.1", "function-bind": "^1.1.2", - "get-proto": "^1.0.1", - "gopd": "^1.2.0", - "has-symbols": "^1.1.0", - "hasown": "^2.0.2", - "math-intrinsics": "^1.1.0" + "has-proto": "^1.0.1", + "has-symbols": "^1.0.3", + "hasown": "^2.0.0" }, "engines": { "node": ">= 0.4" @@ -1790,20 +1751,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/get-proto": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz", - "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==", - "dev": true, - "license": "MIT", - "dependencies": { - "dunder-proto": "^1.0.1", - "es-object-atoms": "^1.0.0" - }, - "engines": { - "node": ">= 0.4" - } - }, "node_modules/get-symbol-description": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.2.tgz", @@ -1844,13 +1791,12 @@ } }, "node_modules/gopd": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz", - "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz", + "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==", "dev": true, - "license": "MIT", - "engines": { - "node": ">= 0.4" + "dependencies": { + "get-intrinsic": "^1.1.3" }, "funding": { "url": "https://github.com/sponsors/ljharb" @@ -1905,11 +1851,10 @@ } }, "node_modules/has-symbols": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz", - "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==", + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz", + "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==", "dev": true, - "license": "MIT", "engines": { "node": ">= 0.4" }, @@ -2472,16 +2417,6 @@ "@jridgewell/sourcemap-codec": "^1.5.0" } }, - "node_modules/math-intrinsics": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz", - "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">= 0.4" - } - }, "node_modules/mdast-util-to-string": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-1.1.0.tgz", @@ -3774,9 +3709,9 @@ } }, "node_modules/vite": { - "version": "5.4.19", - "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.19.tgz", - "integrity": "sha512-qO3aKv3HoQC8QKiNSTuUM1l9o/XX3+c+VTgLHbJWHZGeTPVAg2XwazI9UWzoxjIJCGCV2zU60uqMzjeLZuULqA==", + "version": "5.4.14", + "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.14.tgz", + "integrity": "sha512-EK5cY7Q1D8JNhSaPKVK4pwBFvaTmZxEnoKXLG/U9gmdDcihQGNzFlgIvaxezFR4glP1LsuiedwMBqCXH3wZccA==", "dev": true, "license": "MIT", "dependencies": { diff --git a/docs/package.json b/docs/package.json index 4f543e57..a926a1d2 100644 --- a/docs/package.json +++ b/docs/package.json @@ -25,7 +25,7 @@ "prismjs": "^1.30.0", "remark-slug": "^6.1.0", "svelte": "^4.2.19", - "vite": "^5.4.19" + "vite": "^5.4.14" }, "routify": { "routifyDir": ".routify", diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index a31f311f..d1115787 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -1851,18 +1851,6 @@ "constant": false, "reactive": false }, - { - "name": "hideLabel", - "kind": "let", - "description": "Set to `true` to visually hide the label text", - "type": "boolean", - "value": "false", - "isFunction": false, - "isFunctionDeclaration": false, - "isRequired": false, - "constant": false, - "reactive": false - }, { "name": "placeholder", "kind": "let", @@ -8943,11 +8931,6 @@ "name": "keydown", "element": "input" }, - { - "type": "forwarded", - "name": "input", - "element": "input" - }, { "type": "forwarded", "name": "keyup", @@ -10053,18 +10036,6 @@ "constant": false, "reactive": false }, - { - "name": "pageWindow", - "kind": "let", - "description": "If `totalItems` is a large number, it can affect the\nrendering performance of this component since its value\nis used to calculate the number of pages in the native\nselect dropdown. This value creates a small window of\npages rendered around the current page. By default,\na maximum of 1000 select items are rendered.", - "type": "number", - "value": "1000", - "isFunction": false, - "isFunctionDeclaration": false, - "isRequired": false, - "constant": false, - "reactive": false - }, { "name": "disabled", "kind": "let", @@ -10118,7 +10089,7 @@ "kind": "let", "description": "Override the item text", "type": "(min: number, max: number) => string", - "value": "(min, max) =>\n `${min.toLocaleString()}–${max.toLocaleString()} item${max === 1 ? \"\" : \"s\"}`", + "value": "(min, max) =>\n `${min}–${max} item${max === 1 ? \"\" : \"s\"}`", "isFunction": true, "isFunctionDeclaration": false, "isRequired": false, @@ -10130,7 +10101,7 @@ "kind": "let", "description": "Override the item range text", "type": "(min: number, max: number, total: number) => string", - "value": "(\n min,\n max,\n total,\n) =>\n `${min.toLocaleString()}–${max.toLocaleString()} of ${total.toLocaleString()} item${max === 1 ? \"\" : \"s\"}`", + "value": "(\n min,\n max,\n total,\n) =>\n `${min}–${max} of ${total} item${max === 1 ? \"\" : \"s\"}`", "isFunction": true, "isFunctionDeclaration": false, "isRequired": false, @@ -10202,7 +10173,7 @@ "kind": "let", "description": "Override the page text", "type": "(page: number) => string", - "value": "(page) => `page ${page.toLocaleString()}`", + "value": "(page) => `page ${page}`", "isFunction": true, "isFunctionDeclaration": false, "isRequired": false, @@ -10214,7 +10185,7 @@ "kind": "let", "description": "Override the page range text", "type": "(current: number, total: number) => string", - "value": "(\n current,\n total,\n) =>\n `of ${total.toLocaleString()} page${total === 1 ? \"\" : \"s\"}`", + "value": "(\n current,\n total,\n) =>\n `of ${total} page${total === 1 ? \"\" : \"s\"}`", "isFunction": true, "isFunctionDeclaration": false, "isRequired": false, @@ -11418,16 +11389,6 @@ } ], "events": [ - { - "type": "forwarded", - "name": "focus", - "element": "input" - }, - { - "type": "forwarded", - "name": "blur", - "element": "input" - }, { "type": "forwarded", "name": "change", @@ -12548,8 +12509,9 @@ { "name": "text", "kind": "let", - "description": "Specify the option text\nIf not specified, the value will be used as the text.", + "description": "Specify the option text", "type": "string", + "value": "\"\"", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, diff --git a/docs/src/global.css b/docs/src/global.css index 165b2855..889d6229 100644 --- a/docs/src/global.css +++ b/docs/src/global.css @@ -2,19 +2,12 @@ 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 +24,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); diff --git a/docs/src/pages/components/Accordion.svx b/docs/src/pages/components/Accordion.svx index a42735db..183b4cbb 100644 --- a/docs/src/pages/components/Accordion.svx +++ b/docs/src/pages/components/Accordion.svx @@ -10,15 +10,8 @@ components: ["Accordion", "AccordionItem", "AccordionSkeleton"] import Preview from "../../components/Preview.svelte"; -`Accordion` creates a vertically stacked list of expandable sections that show or hide content. It supports custom titles, different sizes, and various states including disabled and skeleton loading. - ## 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. -

Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text. @@ -34,10 +27,6 @@ By default, the chevron icon is on the right side of the accordion item. ## Left-aligned chevron -The chevron icon can be aligned to the left side of the accordion item by setting -the `align` prop to "start". This provides an alternative visual style while -maintaining the same functionality. -

Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text. @@ -53,9 +42,6 @@ maintaining the same functionality. ## Custom title slot -Customize the title content by using the `title` slot instead of the `title` prop. -This allows for more complex title layouts with multiple elements. - @@ -83,9 +69,6 @@ This allows for more complex title layouts with multiple elements. ## First item open -Set the `open` prop on an `AccordionItem` to have it expanded by default when the -accordion is first rendered. -

Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text. @@ -101,18 +84,12 @@ accordion is first rendered. ## Programmatic example -This example demonstrates how to programmatically control the accordion items using -the `bind:open` directive. Expand and collapse items based on user -interactions or application state. +This example demonstrates how a list of items can be programmatically expanded and collapsed. ## 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. -

Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text. @@ -128,10 +105,6 @@ sections. ## Small size -For more compact layouts, set the `size` prop to "sm" to display the accordion in a -smaller size. This is useful when space is limited or when the accordion is used as -a secondary UI element. -

Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text. @@ -147,9 +120,6 @@ a secondary UI element. ## Disabled -Set the `disabled` prop on the `Accordion` component to disable all items at once. -This prevents users from expanding or collapsing any items in the accordion. -

Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text. @@ -165,10 +135,6 @@ This prevents users from expanding or collapsing any items in the accordion. ## Disabled (item) -Individual accordion items can be disabled by setting the `disabled` prop on -specific `AccordionItem` components. This allows for more granular control over -which items are interactive. -

Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text. @@ -184,45 +150,25 @@ which items are interactive. ## Skeleton -The skeleton state provides a loading placeholder for the accordion. It displays a -simplified version of the component while content is being loaded. - ## Skeleton (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 (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 (closed) -By default, the first skeleton item is open. The skeleton state can be displayed -in a collapsed state by setting `open={false}`. - ## Skeleton (extra-large) -The skeleton state supports the extra-large size variant, maintaining visual -consistency with the active component states. - ## Skeleton (small) -The skeleton state also supports the small size variant, providing a compact -loading placeholder for space-constrained layouts. - diff --git a/docs/src/pages/components/AspectRatio.svx b/docs/src/pages/components/AspectRatio.svx index 0793fca9..6de7aafa 100644 --- a/docs/src/pages/components/AspectRatio.svx +++ b/docs/src/pages/components/AspectRatio.svx @@ -3,13 +3,11 @@ import Preview from "../../components/Preview.svelte"; -The `AspectRatio` component maintains consistent proportions for content across different screen sizes. It's particularly useful for images, videos, and other media that need to preserve their aspect ratio when resizing. +The `AspectRatio` component is useful for constraining fluid content within an aspect ratio. To demo this, resize your browser for the examples below. Supported aspect ratios include `"2x1"`, `"2x3"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"3x2"`, `"9x16"` and `"1x2"`. -## Default - -Display a 2:1 aspect ratio container by default. +## Default (2x1) 2x1 diff --git a/docs/src/pages/components/Breadcrumb.svx b/docs/src/pages/components/Breadcrumb.svx index f491e5e0..75a01c5a 100644 --- a/docs/src/pages/components/Breadcrumb.svx +++ b/docs/src/pages/components/Breadcrumb.svx @@ -12,12 +12,8 @@ components: ["Breadcrumb", "BreadcrumbItem"] import Preview from "../../components/Preview.svelte"; -`Breadcrumb` displays a hierarchical navigation trail that shows users their current location within an application. It supports current page indication, trailing slash customization, and overflow handling for long navigation paths. - ## Default -Display a hierarchical navigation trail with slashes between items. Mark the current page with `isCurrentPage`. - Dashboard Annual reports @@ -26,8 +22,6 @@ Display a hierarchical navigation trail with slashes between items. Mark the cur ## No trailing slash -Remove the trailing slash from the last breadcrumb item using `noTrailingSlash`. - Home Profile @@ -35,8 +29,6 @@ Remove the trailing slash from the last breadcrumb item using `noTrailingSlash`. ## Overflow menu -Add an `OverflowMenu` to handle long breadcrumb trails. Use `OverflowMenuItem` components for menu options. - Home API documentation @@ -55,6 +47,4 @@ Add an `OverflowMenu` to handle long breadcrumb trails. Use `OverflowMenuItem` c ## Skeleton -Display a loading state with `skeleton` prop. Use `count` to specify the number of items. - \ No newline at end of file diff --git a/docs/src/pages/components/Breakpoint.svx b/docs/src/pages/components/Breakpoint.svx index c4245ae1..134d7a76 100644 --- a/docs/src/pages/components/Breakpoint.svx +++ b/docs/src/pages/components/Breakpoint.svx @@ -1,12 +1,12 @@ -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: Small: less than 672px @@ -28,8 +28,8 @@ The `"on:change"` event will fire when the size is initially determined and when ## 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`. diff --git a/docs/src/pages/components/Button.svx b/docs/src/pages/components/Button.svx index f0c7de69..953d1e0c 100644 --- a/docs/src/pages/components/Button.svx +++ b/docs/src/pages/components/Button.svx @@ -4,73 +4,57 @@ 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; -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. - ## Secondary button -Set `kind="secondary"` for secondary actions. - ## Tertiary button -Set `kind="tertiary"` for tertiary actions. - ## Ghost button -Set `kind="ghost"` for ghost-style buttons. - ## Danger button -Set `kind="danger"` for destructive actions. - ## Danger tertiary button -Set `kind="danger-tertiary"` for less prominent destructive actions. - ## Danger tertiary, icon-only button

- Provide an iconDescription for accessibility. This text will be used as the button's tooltip and screen reader label. + You must provide an iconDescription for the button tooltip.
- ## Button with icon -Add an icon to the button using the `icon` prop. - ## Icon-only button
- Provide an iconDescription for accessibility. This text will be used as the button's tooltip and screen reader label. + You must provide an iconDescription for the button tooltip.
@@ -78,13 +62,11 @@ Add an icon to the button using the `icon` prop. ## Icon-only, link button -Set `href` to create an icon-only link button. - ## Link button with icon -Similarly, link buttons can have icons. - ## Custom element By default, the `Button` will render either a `button` or `a` element. -To render a different element, set `as` to `true` and spread `let:props` to the element. +If you need to render a different element, set `as` to `true` and spread `let:props` to the element. @@ -130,8 +106,6 @@ Set `size="field"` for field-sized buttons. ## Small size -Set `size="small"` for small buttons. - @@ -140,8 +114,6 @@ Set `size="small"` for small buttons. ## Large size -Set `size="lg"` for large buttons. - @@ -150,8 +122,6 @@ Set `size="lg"` for large buttons. ## Extra-large size -Set `size="xl"` for extra-large buttons. - @@ -160,8 +130,6 @@ Set `size="xl"` for extra-large buttons. ## Disabled state -Set `disabled` to disable the button. - @@ -17,7 +15,7 @@ Place buttons side by side in a horizontal layout. ## Stacked -Set `stacked` to `true` to arrange buttons vertically. +Set `stacked` to `true` to use the stacked variant. diff --git a/docs/src/pages/components/Checkbox.svx b/docs/src/pages/components/Checkbox.svx index 8e66285a..f5e7f684 100644 --- a/docs/src/pages/components/Checkbox.svx +++ b/docs/src/pages/components/Checkbox.svx @@ -3,53 +3,39 @@ import Preview from "../../components/Preview.svelte"; -Checkboxes let users select one or more options from a list. Use them for multiple-choice questions, settings, or to confirm actions. - -## Default - -Create a checkbox with a label using `labelText`. - -By default, the checkbox is unchecked. +## Default (unchecked) ## Checked -Set `checked` to `true` to pre-select the checkbox. - ## Indeterminate -Set `indeterminate` to `true` to show a mixed state, typically used in parent checkboxes with some children selected. - ## Hidden label -Set `hideLabel` to `true` to visually hide the label while keeping it accessible to screen readers. - -## Disabled state - -Set `disabled` to `true` to prevent user interaction. +## Disabled ## Reactive example (bind:checked) -Use two-way binding with `bind:checked` to track the checkbox state. +The `checked` prop supports two-way binding. ## 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).
- When using bind:group, bind:checked only supports one-way binding. + If using bind:group, bind:checked will only support one-way binding.
@@ -57,6 +43,4 @@ Bind an array of values using `group` to manage multiple checkboxes. This API is ## Skeleton -Set `skeleton` to `true` to show a loading state. - diff --git a/docs/src/pages/components/ClickableTile.svx b/docs/src/pages/components/ClickableTile.svx index 58852fdf..e6ec3bf3 100644 --- a/docs/src/pages/components/ClickableTile.svx +++ b/docs/src/pages/components/ClickableTile.svx @@ -3,19 +3,15 @@ import Preview from "../../components/Preview.svelte"; -Clickable tiles create interactive content areas that link to other pages or trigger actions. Use them to group related content and provide clear navigation targets. - ## Default -Create a clickable tile with an `href` to link to another page. - Carbon Design System ## 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. Carbon Design System ## Disabled state -Set `disabled` to `true` to prevent interaction. - Carbon Design System diff --git a/docs/src/pages/components/CodeSnippet.svx b/docs/src/pages/components/CodeSnippet.svx index d1e1dc42..f29d59b1 100644 --- a/docs/src/pages/components/CodeSnippet.svx +++ b/docs/src/pages/components/CodeSnippet.svx @@ -27,21 +27,20 @@ let comment = ` ` -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) ## 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. @@ -49,37 +48,33 @@ In this example, we use the open source module [clipboard-copy](https://github.c ## 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. {}} /> ## Inline -Set `type="inline"` to display code inline with text. - ## Multi-line -Set `type="multi"` to display multiple lines of code with expand/collapse functionality. - ## 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. ## Reactive example -The multi-line code snippet dispatches "expand" and "collapse" events. +The multi-line code snippet also dispatches "expand" and "collapse" events. ## Custom copy feedback text -Set `feedback` to customize the copy button feedback text. +Use the `feedback` prop to override the default copy button feedback text. @@ -91,25 +86,23 @@ Set `hideCopyButton` to `true` to hide the copy button. ## Hidden show more button -Set `showMoreLess` to `false` to hide the expand/collapse button on multi-line snippets. +Only multi-line code snippets have a "Show more" button by default. Set `showMoreLess` to `false` to hide it. ## Hidden copy, show more buttons -Hide both the copy and expand/collapse buttons. - ## Custom show more/less text -Set `showMoreText` and `showLessText` to customize the expand/collapse button text. +Use the `showMoreText` and `showLessText` props to override the default "Show more" and "Show less" button text. ## Disabled -Set `disabled` to `true` to disable interaction. This only applies to `"single"` and `"multi"` types. +The `disabled` prop applies only to the `"single"` and `"multi"` code snippet types.
@@ -117,34 +110,30 @@ Set `disabled` to `true` to disable interaction. This only applies to `"single"` ## Wrapped text -By default, the code snippet preserves text formatting and does not wrap text. - -Set `wrapText` to `true` to wrap long lines in multi-line snippets. +`wrapText` only applies to the `"multi"` type. ## Dynamic multi-line code -Use the `code` prop instead of the default slot for dynamically updated code. +For dynamically updated code, you must use the `code` prop instead of the default slot. ## Hidden multi-line code -The "Show more" button relies on the element's computed height. For hidden content, the button won't appear because the height is `0`. +There may be cases where your code snippet is hidden in the DOM. The logic to render the "Show more" button relies on the element's computed height. For hidden content, the button will not appear because the computed height is `0`. -Re-render the component to fix this issue. +The recommended workaround is to re-render the component. See the example below. ## Skeleton -Set `skeleton` to `true` to show a loading state. Defaults to `"single"` type. +The default skeleton type is `"single"`. ## Skeleton (multi-line) -Set `type="multi"` with `skeleton` to show a multi-line loading state. - \ No newline at end of file diff --git a/docs/src/pages/components/ComboBox.svx b/docs/src/pages/components/ComboBox.svx index 6cce91f4..559b4127 100644 --- a/docs/src/pages/components/ComboBox.svx +++ b/docs/src/pages/components/ComboBox.svx @@ -3,8 +3,6 @@ import Preview from "../../components/Preview.svelte"; -`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. @@ -13,8 +11,6 @@ ## Default -Create a combobox with a title and placeholder text. Each item requires a unique `id` and `text`. - -## Hidden label - -Set `hideLabel` to `true` to visually hide the label while keeping it accessible to screen readers. - - - ## Initial selected id -Set `selectedId` to pre-select an item when the combobox loads. - ## 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. ## Multiple combo boxes -See how to manage multiple comboboxes in a form. - ## Filterable -Enable filtering to let users search through the options. - ## 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). ## 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. -`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. - ## 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`. \ No newline at end of file diff --git a/docs/src/pages/components/ContentSwitcher.svx b/docs/src/pages/components/ContentSwitcher.svx index 73d10640..5c98d9ba 100644 --- a/docs/src/pages/components/ContentSwitcher.svx +++ b/docs/src/pages/components/ContentSwitcher.svx @@ -9,12 +9,8 @@ components: ["ContentSwitcher", "Switch"] import Preview from "../../components/Preview.svelte"; -`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. - @@ -22,8 +18,6 @@ Create a content switcher with `Switch` components. Each switch needs a `text` p ## Initial selected index -Set `selectedIndex` to pre-select a switch when the content switcher loads. - @@ -32,16 +26,10 @@ Set `selectedIndex` to pre-select a switch when the content switcher loads. ## Reactive example -This example demonstrates how to programmatically control the content switcher using -the `bind:selectedIndex` directive. Update the selected index based on user -interactions or application state. - ## Custom switch slot -Override the default slot in `Switch` to customize how each option displays. -
@@ -57,8 +45,6 @@ Override the default slot in `Switch` to customize how each option displays. ## Extra-large size -Set `size` to `"xl"` for an extra-large content switcher. - @@ -66,8 +52,6 @@ Set `size` to `"xl"` for an extra-large content switcher. ## Small size -Set `size` to `"sm"` for a small content switcher. - @@ -75,8 +59,6 @@ Set `size` to `"sm"` for a small content switcher. ## Disabled -Set `disabled` to `true` on individual switches to prevent interaction. - diff --git a/docs/src/pages/components/ContextMenu.svx b/docs/src/pages/components/ContextMenu.svx index 3ef81928..eacc8ac6 100644 --- 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"; -`ContextMenu` displays a menu when users right-click. Use it to provide quick access to contextual actions or options. - In the examples, right click anywhere within the iframe. ## Default -The context menu appears when right-clicking anywhere in the window. Use `ContextMenuOption` for menu items and `ContextMenuDivider` for visual separation. +By default, the context menu will trigger when right clicking anywhere in the `window`. ## 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. ## 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. ## Radio groups - -Use `ContextMenuGroup` and `ContextMenuRadioGroup` to organize related options and create radio button selections. - + \ No newline at end of file diff --git a/docs/src/pages/components/CopyButton.svx b/docs/src/pages/components/CopyButton.svx index 88eaed24..d13e7caa 100644 --- a/docs/src/pages/components/CopyButton.svx +++ b/docs/src/pages/components/CopyButton.svx @@ -3,32 +3,28 @@ import Preview from "../../components/Preview.svelte"; -`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). +You can override the default copy functionality with your own implementation. See [Overriding copy functionality](#overriding-copy-functionality). ## Default -Create a copy button with the `text` prop to specify what to copy. - ## Custom feedback text -Set `feedback` to customize the message shown after copying. - ## Overriding copy functionality -Pass a custom function to the `copy` prop to override the default copy behavior. +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. ## 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. - {}} /> + {}} /> \ No newline at end of file diff --git a/docs/src/pages/components/DataTable.svx b/docs/src/pages/components/DataTable.svx index c3eb1c59..70c758e3 100644 --- a/docs/src/pages/components/DataTable.svx +++ b/docs/src/pages/components/DataTable.svx @@ -8,20 +8,21 @@ components: ["DataTable", "Pagination","Toolbar", "ToolbarContent", "ToolbarSear import Preview from "../../components/Preview.svelte"; -`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. -
- This component is keyed for performance. - - Every headers object must have a unique "key" property. -
Every rows object must have a unique "id" property.
-
+
Every headers object must have a unique "key" property.
+ + + +
Every rows object must have a unique "id" property.
 ## Default -Create a basic table by providing `headers` and `rows` data. Match the `key` in headers with the corresponding property in rows. +The 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`.
Custom column widths do not work with a sticky header.
@@ -337,7 +340,9 @@ Specify `width` or `minWidth` in the `headers` object to set column dimensions. ## 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. ## Filterable (custom) -Pass a function to `shouldFilterRows` to implement custom filtering logic. +`shouldFilterRows` also accepts a function and passes it the current row and search value. It expects the function to return a boolean. ## Zebra stripes -Set `zebra` to `true` to add alternating row colors. - ## Sortable with custom display and sort methods -Use `display` and `sort` functions in header objects to customize cell rendering and sorting. - ## 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. ## Selectable rows (checkbox) -Set `selectable` to `true` for multi-select functionality. Bind to `selectedRowIds` to track selections. Use `inputName` to customize checkbox names. +Set `selectable` to `true` for rows to be multi-selectable. + +Bind to `selectedRowIds` to get the ids of the selected rows. + +To customize the `input` name for the checkbox, use the `inputName` prop. ## 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. +To enable batch selection, set `batchSelection` to `true`. + +This checkbox is used to select all rows. It enters an indeterminate state when some rows are selected. ## Batch selection with initial selected rows -Use `selectedRowIds` to specify initially selected rows. +Use the `selectedRowIds` prop to specify which rows should be selected. ## Batch selection with batch actions toolbar -Add a toolbar for batch actions when rows are selected. - ## Batch selection with controlled toolbar -Control the batch actions toolbar with the `active` prop. Prevent default cancel behavior in the `on:cancel` event. +By default, `ToolbarBatchActions` is activated if one or more rows is selected. Clicking "Cancel" will deactivate it. + +Use the `active` prop to control the toolbar. Note that it will still activate if one or more rows are selected. + +You can prevent the default "Cancel" behavior in the dispatched `on:cancel` event. ## Selectable rows (radio) -Set `radio` to `true` for single-row selection. Bind to `selectedRowIds` to track the selected row. Use `inputName` to customize radio button names. +Set `radio` to `true` for only one row to be selected at a time. + +Bind to `selectedRowIds` to get the ids of the selected rows. Because it's radio selection, `selectedRowIds` will only contain one id. + +To customize the `input` name for the radio button, use the `inputName` prop. ## Non-selectable rows -Use `nonSelectableRowIds` to prevent selection of specific rows. +Use `nonSelectableRowIds` to specify the ids for rows that should not be selectable. ## Expandable rows -Set `expandable` to `true` to make rows expandable. Use the `expanded-row` slot to customize expanded content. +Set `expandable` to `true` for rows to be expandable. ## Expandable (zebra styles) -Combine expandable rows with zebra striping. - ## Expandable (compact size) -Set `size="compact"` for expandable rows with minimal height. - ## Skeleton -Use `DataTableSkeleton` to show a loading state. - ## Skeleton with headers, row count -Specify headers and row count for the skeleton. - ## Skeleton with object headers -Pass header objects to customize the skeleton. +`headers` can also be an array of objects. The type is the same as the `headers` prop type used in `DataTable`. ## Skeleton with empty header -Add an empty header column with `empty: true`. +Pass an object with `"empty"` set to `true` to render an empty table header column. ## Skeleton without header, toolbar -Hide the header and toolbar in the skeleton. - ## Skeleton (tall size) -Set `size="tall"` for a taller skeleton. - ## Skeleton (short size) -Set `size="short"` for a shorter skeleton. - ## Skeleton (compact size) -Set `size="compact"` for a minimal skeleton. - \ No newline at end of file diff --git a/docs/src/pages/components/DatePicker.svx b/docs/src/pages/components/DatePicker.svx index c7cb9f3f..3e4dbdcf 100644 --- 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"; -`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.
@@ -17,27 +21,25 @@ components: ["DatePicker", "DatePickerInput", "DatePickerSkeleton"] ## 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. ## Range -Set `datePickerType` to `"range"` to enable date range selection. +Set `datePickerType` to `"range"` for the range variant. ## DatePicker in a modal -The calendar is positioned inside the wrapper by default (`flatpickrProps.static: true`). This ensures proper positioning within a [Modal](/components/Modal). - -Set `flatpickrProps.static` to `false` to position the calendar outside the wrapper. - ## Simple -Create a simple date picker without a dropdown calendar. +By default, the "simple" date picker does not have a dropdown calendar. @@ -45,70 +47,52 @@ Create a simple date picker without a dropdown calendar. ## With helper text -Add helper text to provide additional context or formatting instructions. - ## Hidden label -Hide the label while maintaining accessibility. - ## Light variant -Use the light variant for light backgrounds. - ## Extra-large size -Use the extra-large size for more prominent date pickers. - ## Small size -Use the small size for compact date pickers. - ## Invalid state -Show an invalid state when the input value is not valid. - ## Warning state -Show a warning state to indicate potential issues with the input. - ## Disabled state -Disable the date picker to prevent user interaction. - ## Skeleton -Show a loading state with the skeleton component. - diff --git a/docs/src/pages/components/Dropdown.svx b/docs/src/pages/components/Dropdown.svx index afd5cee2..477fcce9 100644 --- a/docs/src/pages/components/Dropdown.svx +++ b/docs/src/pages/components/Dropdown.svx @@ -7,9 +7,7 @@ components: ["Dropdown", "DropdownSkeleton"] import Preview from "../../components/Preview.svelte"; -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.
Every items object must have a unique "id" property.
@@ -17,33 +15,25 @@ have a unique `id` property for proper functionality. ## Default -Use the `Dropdown` component to create a select input with a dropdown menu. Each item -must have a unique `id` property. - ## 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. ## Hidden label -Hide the label while maintaining accessibility by setting the `hideLabel` prop to -`true`. The label will still be available to screen readers. - ## Format item display text -Format the display text of items using the `itemToString` prop. This function -receives the item object and returns the formatted string. +Use the `itemToString` prop to format the display of individual items. { return item.text + ' (' + item.id +')' @@ -53,15 +43,11 @@ receives the item object and returns the formatted string. ## Multiple dropdowns -Create multiple dropdowns that work together. This example demonstrates how to -manage the state of multiple dropdowns. - ## 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. ## Inline variant -Display the dropdown inline with other content by setting the `type` prop to -`"inline"`. This variant removes the background and border. - ## Extra-large size -Increase the size of the dropdown by setting the `size` prop to `"xl"`. This -provides more visual emphasis for important selections. - ## Small size -Decrease the size of the dropdown by setting the `size` prop to `"sm"`. This is -useful for compact layouts or secondary selections. - ## Invalid state -Indicate an invalid selection by setting the `invalid` prop to `true`. Provide -feedback to users with the `invalidText` prop. - ## Warning state -Indicate a warning state by setting the `warn` prop to `true`. Provide additional -context with the `warnText` prop. - ## Disabled state -Disable the entire dropdown by setting the `disabled` prop to `true`. This prevents -user interaction with the component. - ## Disabled items -Disable specific items in the dropdown by setting the `disabled` property to -`true` in the item object. This allows for more granular control over available -selections. +Use the `disabled` property in the `items` prop to disable specific items. \ No newline at end of file diff --git a/docs/src/pages/components/ExpandableTile.svx b/docs/src/pages/components/ExpandableTile.svx index 398d64ee..aca659fa 100644 --- a/docs/src/pages/components/ExpandableTile.svx +++ b/docs/src/pages/components/ExpandableTile.svx @@ -3,19 +3,11 @@ import Preview from "../../components/Preview.svelte"; -The `ExpandableTile` component creates a collapsible content container that can -show and hide content with a smooth animation. It's ideal for managing content -overflow and progressive disclosure of information. The component automatically -measures content height using a resize observer. - ## Default -Create an expandable tile that shows and hides content. The component uses a -[resize observer](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) -to determine the height of the above-the-fold content. +This component uses a [resize observer](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to determine the height of the above-the-fold content. -By default, the tile is collapsed. Use the `above` and `below` slots to define the -content that appears before and after expansion. +It's unexpanded by default.
@@ -33,8 +25,7 @@ content that appears before and after expansion. ## 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. +Set a custom height for the tiles on the "above" and "below" slots.
Above the fold content here
@@ -43,9 +34,6 @@ control the exact dimensions of the visible and hidden content. ## Expanded -Display the tile in its expanded state by default by setting the `expanded` prop to -`true`. -
Above the fold content here
Below the fold content here
@@ -53,9 +41,6 @@ Display the tile in its expanded state by default by setting the `expanded` prop ## Light variant -Use the light variant for expandable tiles on dark backgrounds by setting the -`light` prop to `true`. -
Above the fold content here
Below the fold content here
@@ -63,9 +48,6 @@ Use the light variant for expandable tiles on dark backgrounds by setting the ## With icon labels -Customize the expand/collapse button labels using the `tileExpandedLabel` and -`tileCollapsedLabel` props. -
Above the fold content here
Below the fold content here
@@ -73,9 +55,7 @@ Customize the expand/collapse button labels using the `tileExpandedLabel` and ## 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. +For tiles containing interactive content, use `stopPropagation` to prevent the tile from toggling.
diff --git a/docs/src/pages/components/FileUploader.svx b/docs/src/pages/components/FileUploader.svx index 37e30df5..961a481d 100644 --- a/docs/src/pages/components/FileUploader.svx +++ b/docs/src/pages/components/FileUploader.svx @@ -7,28 +7,23 @@ components: ["FileUploaderButton", "FileUploader", "FileUploaderDropContainer", import Preview from "../../components/Preview.svelte"; -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) -Create a simple file upload button using `FileUploaderButton`. By default, it -accepts a single file. Set `multiple` to `true` to allow multiple file selection. +By default, the file uploader only accepts one file. + +Set `multiple` to `true` for multiple files to be accepted. ## Multiple files -Enable multiple file selection by setting the `multiple` prop to `true`. This -allows users to select multiple files at once. - ## Custom button kind, size -Customize the button appearance using the `kind` and `size` props. The default is -a small primary button. +By default, the `primary` small button kind is used. + +Use the `kind` and `size` props to customize the button. @@ -37,17 +32,17 @@ a small primary button. ## File uploader -The `FileUploader` component combines a button trigger with a list of uploaded -files. It supports file type restrictions, multiple file selection, and various -upload states. +The `FileUploader` wraps `FileUploaderButton` and lists out uploaded files. -This example accepts multiple JPEG files and displays them in a completed state. +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"`. + +See the [item examples below](#item-uploading) for different statuses. ## Clear files -Remove uploaded files from the `FileUploader` component in two ways: +There are two ways to clear files in `FileUploader`: programmatically using the clearFiles accessor @@ -58,29 +53,21 @@ Remove uploaded files from the `FileUploader` component in two ways: ## File uploader (disabled state) -Disable the file uploader by setting the `disabled` prop to `true`. This prevents -user interaction with the component. - ## Item (uploading) -Display a file upload in progress using the `uploading` status. This shows a -loading indicator and the file name. - ## Item (complete) -Show a successfully uploaded file using the `complete` status. This displays a -checkmark icon next to the file name. - ## 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`. { console.log(e.detail); // "readme" @@ -88,15 +75,13 @@ dispatches a `delete` event with the item's ID. ## 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. ## 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. @@ -119,11 +103,11 @@ is "default". ## 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. \ No newline at end of file diff --git a/docs/src/pages/components/FluidForm.svx b/docs/src/pages/components/FluidForm.svx index d05f56d8..68dbc604 100644 --- a/docs/src/pages/components/FluidForm.svx +++ b/docs/src/pages/components/FluidForm.svx @@ -7,15 +7,9 @@ import Preview from "../../components/Preview.svelte"; -The `FluidForm` component provides a fluid-width form layout that adapts to its -container. It's designed for full-width form layouts and works with most Carbon -input components. Note that inline input variants cannot be used within a -`FluidForm`. - ## Fluid form -Create a fluid-width form layout using the `FluidForm` component. This example -shows a basic login form with required fields. +Note that the `inline` input variants cannot be used within a `FluidForm`. @@ -29,8 +23,4 @@ shows a basic login form with required fields. ## Invalid state -Handle form validation and display error states using the `invalid` and -`invalidText` props on form inputs. This example demonstrates how to show -validation errors in a fluid form. - \ No newline at end of file diff --git a/docs/src/pages/components/Form.svx b/docs/src/pages/components/Form.svx index a0db291b..4989c5dd 100644 --- a/docs/src/pages/components/Form.svx +++ b/docs/src/pages/components/Form.svx @@ -14,15 +14,8 @@ components: ["Form", "FormGroup"] import Preview from "../../components/Preview.svelte"; -The `Form` component provides a structured way to collect user input. It works with -various form controls like checkboxes, radio buttons, and select menus. The -`FormGroup` component helps organize related form controls with a legend. - ## Form -Create a form with grouped controls using `Form` and `FormGroup`. This example -shows a form with checkboxes, radio buttons, and a select menu. -
@@ -70,9 +63,7 @@ shows a form with checkboxes, radio buttons, and a select menu. ## 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. { e.preventDefault(); diff --git a/docs/src/pages/components/Grid.svx b/docs/src/pages/components/Grid.svx index 741eea4d..0092b662 100644 --- a/docs/src/pages/components/Grid.svx +++ b/docs/src/pages/components/Grid.svx @@ -6,62 +6,34 @@ components: ["Grid", "Row", "Column"] import Preview from "../../components/Preview.svelte"; -The `Grid` system provides a responsive, 12-column layout structure. Use `Row` and -`Column` components to create flexible layouts that adapt to different screen -sizes. The grid supports various spacing options and column configurations. - ## Default -Create a basic grid layout with equal-width columns. This example demonstrates the -default grid behavior. - ## Full width -Use the full-width grid variant for layouts that span the entire viewport width. -This removes the default max-width constraint. - ## Narrow -Create a more compact grid layout using the narrow variant. This reduces the -spacing between columns. - ## Condensed -Use the condensed variant for even tighter spacing between columns. This is ideal -for dense data displays. - ## Responsive -Build responsive layouts by specifying different column widths for different -breakpoints. The grid automatically adjusts based on screen size. - ## Offset columns -Create space between columns using the offset feature. This allows for more -flexible layouts without empty columns. - ## Aspect ratio columns -Maintain consistent column heights using aspect ratio columns. This ensures -content alignment across different column widths. - ## Padded columns -Add padding to columns using the padded variant. This creates more breathing room -between content. - diff --git a/docs/src/pages/components/ImageLoader.svx b/docs/src/pages/components/ImageLoader.svx index 41f79999..f332849c 100644 --- a/docs/src/pages/components/ImageLoader.svx +++ b/docs/src/pages/components/ImageLoader.svx @@ -5,22 +5,15 @@ let key = 0; -The `ImageLoader` component provides a robust way to load images with built-in -loading and error states. It uses the [Image API](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image) -to handle image loading programmatically. The component supports aspect ratios, -fade-in animations, and custom loading/error states. - +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 - -Load an image with the default configuration. The component handles the loading -process automatically. - + ## 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. @@ -33,32 +26,27 @@ to display a loading indicator and error message. ## 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"`. ## Fade in -Enable a smooth fade-in animation when the image loads successfully. This provides -a better user experience for image loading. +Set `fadeIn` to `true` to fade in the image if successfully loaded. {#key key}{/key} ## Programmatic usage -Control image loading programmatically using component references. This example -demonstrates how to trigger image loading manually. +In this example, a component reference is obtained to programmatically trigger the `loadImage` method. ## Dynamic image source -Update the image source dynamically using the same `ImageLoader` instance. This -allows for smooth transitions between different images. +The same `ImageLoader` instance can be used to load different images. diff --git a/docs/src/pages/components/InlineLoading.svx b/docs/src/pages/components/InlineLoading.svx index be82a72c..1677b675 100644 --- a/docs/src/pages/components/InlineLoading.svx +++ b/docs/src/pages/components/InlineLoading.svx @@ -1,37 +1,18 @@ ---- -components: ["InlineLoading"] ---- - -The `InlineLoading` component provides a compact loading indicator that can be embedded within content. It's ideal for showing progress during inline operations like form submissions or data updates. - ## Default -Display a basic loading indicator with the default configuration. - ## With description -Add a descriptive text to provide context about the loading operation. - ## Status states -The component supports different status states to indicate progress: - - - active: Shows an animated loading indicator - inactive: Displays a static state - finished: Shows a success state - error: Displays an error state - - @@ -39,6 +20,4 @@ The component supports different status states to indicate progress: ## UX example -See how to integrate the loading indicator in a real-world scenario. - \ No newline at end of file diff --git a/docs/src/pages/components/InlineNotification.svx b/docs/src/pages/components/InlineNotification.svx index 73cc37f7..33482ced 100644 --- a/docs/src/pages/components/InlineNotification.svx +++ b/docs/src/pages/components/InlineNotification.svx @@ -7,29 +7,26 @@ components: ["InlineNotification", "NotificationActionButton"] import Preview from "../../components/Preview.svelte"; -The `InlineNotification` component displays contextual messages inline with content. It supports various types of notifications (error, warning, success, info) and can include actions. Use it to provide feedback or important information to users. +Notification that appears inline. -See [detailed usage](https://carbondesignsystem.com/components/notification/usage). +See [detailed +usage](https://carbondesignsystem.com/components/notification/usage). See also: [ToastNotification](ToastNotification) -## Default - -Display a basic error notification with title and subtitle by default. +## Default (error) ## Prevent default close behavior -The component is controlled, allowing you to prevent the default close behavior using `e.preventDefault()`. +`InlineNotification` is a controlled component. Prevent the default close behavior using the `e.preventDefault()` method in the dispatched `on:close` event. { e.preventDefault(); // custom close logic (e.g., transitions) }} /> -## Slottable title and subtitle - -Customize the notification content using slots for more flexibility. +## Slottable title, subtitle Error: @@ -38,7 +35,9 @@ Customize the notification content using slots for more flexibility. ## Accessible icon descriptions -Make notifications more accessible by providing custom descriptions for icons. +The status icon and close button icon descriptions appear on cursor hover and are read +by assistive technology. Default descriptions are provided in English and can be +overridden via `statusIconDescription` and `closeButtonDescription`.