mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat!: initial pre-release - Carbon v11 styles (#1881)

Browse source 
**carbon-components-svelte has unstable styles and interactions during this pre-release phase. See #1872 for details.**

Breaking changes

- Overall, this is a major style change the will impact the appearance and features of many components. Use caution when upgrading and test your applications.

Components

- Button has new prop values for size and kind
- Theme follows v11 conventions: g80 theme isn't supported, toggled themes adjust data-carbon-theme attribute in <html> tag (for now, tokens use bx prefix, but that may change)
- Tabs has a contained prop instead of type, and a new mobile appearance (scrolling tabs)
- ContentSwitcher size prop no longer supports size="xl"; md is the new default
- MultiSelect no longer supports xl size
- OverflowMenu no longer supports xl size
- Search no longer supports xl size
- TreeView no longer supports compact size
- UIShell has a new light theme

CSS

- Several class names have been changed due to the v11 overhaul. If you're targeting or overriding component classes, be sure to test your code
- Many tokens and CSS variables have been renamed. Details: https://carbondesignsystem.com/migrating/guide/develop
- Themes are applied to the <html> element as data-carbon-theme="g10" instead of theme="g10"
- The g80 theme no longer exists

General

- Codebase uses npm instead of yarn

--- Commit notes

* chore: depend on @carbon/styles instead of carbon-components

See upgrade guide here: https://carbondesignsystem.com/migrating/guide/develop

* chore: use v11 styles for docs

* chore: stick to `bx` instead of `cds` class prefix

* chore: migrate layout spacing to v11

See [@carbon/layout](https://github.com/carbon-design-system/carbon/blob/main/docs/migration/v11.md#carbonlayout) migration guide:

    $layout-01 	Removed, use $spacing-05 instead
    $layout-02 	Removed, use $spacing-06 instead
    $layout-03 	Removed, use $spacing-07 instead
    $layout-04 	Removed, use $spacing-09 instead
    $layout-05 	Removed, use $spacing-10 instead
    $layout-06 	Removed, use $spacing-12 instead
    $layout-07 	Removed, use $spacing-13 instead

* chore: migrate type tokens to v11

See https://github.com/carbon-design-system/carbon/blob/main/docs/migration/v11.md#type-tokens

* chore: keep flex-grid instead of css grid for the moment

Upgrading to css-grid should be separate.

* chore: v11 Tabs

In v11 [Tabs](https://carbondesignsystem.com/migrating/guide/design/#tabs-breaking) received some additional modifiers. In this commit we only want to make sure that the Svelte v10 tabs still work using v11 styles. This probably needs additional testing.

* chore: use @ibm/plex fonts

* chore: v11 Button

* dependency: @carbon/styles update

* chore: v11 ComboBox

Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.

* chore: v11 ContentSwitcher

For better compatibility with existing code bases size `xl` is still supported.

* chore: remove legacy v10 css files

Note that further work is needed here in order to make theming work again.
Also documentation needs updating.

* chore: v11 DatePicker

For better compatibility with existing codebases size xl is still supported.

* chore: v11 Dropdown

For better compatibility with existing codebases size xl is still supported.

* chore: v11 ExpandableTile

Note that state labels `tileCollapsedLabel` and `tileExpandedLabel` are no longer supported.

* chore: v11 FileUploader

For better compatibility with existing codebases sizes `field` and `small` are still supported. Note that flagship implementation does the same thing.

* chore: v11 Toggle

This removes legacy `ToggleSkeleton`.

* chore: v11 MultiSelect

Size `xl` changed to `lg`.

* chore: v11 NumberInput

For better compatibility with existing codebases size `xl` is still supported.

* chore: v11 OverflowMenu

Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.

* chore: v11 PasswordInput

Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.

* chore: v11 Search

* chore: v11 Select

Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.

* chore: v11 AspectRatio

The `bx--aspect-ratio--object` class is gone and needs to be replaced manually.

* chore: v11 TextArea

`cols` no longer has a defaults to 50 but remains at 100% width by default.

* chore: v11 TextInput

Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.

* chore: v11 TimePicker

Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.

* chore: v11 TreeView

Size `compact` changed to `xs`. For better compatibility with existing codebases size `compact` is still supported.

* chore: remove Truncate since it does not exist in Carbon v11

* chore: v11 UIShell

* chore: v11 Accordion

Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.

* tmp: v11 PopoverContent

* Revert "chore: remove Truncate since it does not exist in Carbon v11"

This reverts commit 5833536199.

* chore: use truncate mixins

* docs: add truncate mixins

* chore: use `cds` class prefix in v11 styles

* build: switch to npm

* chore: set up all component styles, fonts, and themes

- Adapt documentation to new styles

* chore: add individual theme css

* feat: migrate Theme component to v11

- remove g80 theme option everywhere
- utilize new `data-carbon-theme` attribute when applying theme
- use cds instead of bx in places

* chore: use bx css prefixes for now

* chore: resolve peerDependencies

- Leaving out latest prettier for now
- Ignoring Sveld warnings for now

* chore: fix type errors and tests

---------

Co-authored-by: Gregor Wassmann <gregor.wassmann@gmail.com>
This commit is contained in:
Enrico Sacchetti 2024-01-12 11:33:59 -05:00 • committed by Eric Liu
commit 4dabb827ee
186 changed files with 7886 additions and 5628 deletions
Download patch file Download diff file Expand all files Collapse all files

10
.github/workflows/ci.yml vendored
View file

@ -12,14 +12,14 @@ jobs:
id: yarn-cache id: yarn-cache
with: with:
path: "**/node_modules" path: "**/node_modules"
key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }} key: ${{ runner.os }}-modules-${{ hashFiles('**/package-lock.json') }}
- name: Install dependencies, build, test, and lint the codebase - name: Install dependencies, build, test, and lint the codebase
run: | run: |
yarn npm i
yarn build:lib npm run build:lib
yarn test:types npm run test:types
yarn lint npm run lint
- name: Trigger deploy - name: Trigger deploy
if: github.ref == 'refs/heads/master' if: github.ref == 'refs/heads/master'

152
COMPONENT_INDEX.md
View file

@ -1,6 +1,6 @@
# Component Index # Component Index
> 165 components exported from carbon-components-svelte@0.85.0. > 165 components exported from carbon-components-svelte@0.82.8.
## Components ## Components
@ -95,6 +95,7 @@
- [`PaginationSkeleton`](#paginationskeleton) - [`PaginationSkeleton`](#paginationskeleton)
- [`PasswordInput`](#passwordinput) - [`PasswordInput`](#passwordinput)
- [`Popover`](#popover) - [`Popover`](#popover)
- [`PopoverContent`](#popovercontent)
- [`ProgressBar`](#progressbar) - [`ProgressBar`](#progressbar)
- [`ProgressIndicator`](#progressindicator) - [`ProgressIndicator`](#progressindicator)
- [`ProgressIndicatorSkeleton`](#progressindicatorskeleton) - [`ProgressIndicatorSkeleton`](#progressindicatorskeleton)
@ -155,7 +156,6 @@
- [`TimePickerSelect`](#timepickerselect) - [`TimePickerSelect`](#timepickerselect)
- [`ToastNotification`](#toastnotification) - [`ToastNotification`](#toastnotification)
- [`Toggle`](#toggle) - [`Toggle`](#toggle)
- [`ToggleSkeleton`](#toggleskeleton)
- [`Toolbar`](#toolbar) - [`Toolbar`](#toolbar)
- [`ToolbarBatchActions`](#toolbarbatchactions) - [`ToolbarBatchActions`](#toolbarbatchactions)
- [`ToolbarContent`](#toolbarcontent) - [`ToolbarContent`](#toolbarcontent)
@ -179,7 +179,7 @@
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------- | :------- | :--------------- | :------- | --------------------------------- | ---------------------- | ------------------------------------------------ | | :-------- | :------- | :--------------- | :------- | --------------------------------- | ---------------------- | ------------------------------------------------ |
| align | No | <code>let</code> | No | <code>"start" &#124; "end"</code> | <code>"end"</code> | Specify alignment of accordion item chevron icon | | align | No | <code>let</code> | No | <code>"start" &#124; "end"</code> | <code>"end"</code> | Specify alignment of accordion item chevron icon |
| size | No | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | <code>undefined</code> | Specify the size of the accordion | | size | No | <code>let</code> | No | <code>"sm" &#124; "lg"</code> | <code>undefined</code> | Specify the size of the accordion |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the accordion | | disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the accordion |
| skeleton | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state | | skeleton | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
@ -373,13 +373,13 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :--------------- | :------- | :--------------- | :------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | :--------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the HTML element | | ref | No | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the HTML element |
| kind | No | <code>let</code> | No | <code>"primary" &#124; "secondary" &#124; "tertiary" &#124; "ghost" &#124; "danger" &#124; "danger-tertiary" &#124; "danger-ghost"</code> | <code>"primary"</code> | Specify the kind of button | | kind | No | <code>let</code> | No | <code>"primary" &#124; "secondary" &#124; "tertiary" &#124; "ghost" &#124; "danger" &#124; "danger--tertiary" &#124; "danger--ghost"</code> | <code>"primary"</code> | Specify the kind of button |
| size | No | <code>let</code> | No | <code>"default" &#124; "field" &#124; "small" &#124; "lg" &#124; "xl"</code> | <code>"default"</code> | Specify the size of button | | size | No | <code>let</code> | No | <code>"sm" &#124; "md" &#124; "lg" &#124; "xl" &#124; "2xl"</code> | <code>"lg"</code> | Specify the size of button |
| expressive | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use Carbon's expressive typesetting | | expressive | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use Carbon's expressive typesetting |
| isSelected | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the selected state for an icon-only, ghost button | | isSelected | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the selected state for an icon-only, ghost button |
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render<br />Alternatively, use the named slot "icon" (e.g., `&lt;Icon slot="icon" size="{20}" /&gt;`) | | icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render |
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the button icon | | iconDescription | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the button icon |
| tooltipAlignment | No | <code>let</code> | No | <code>"start" &#124; "center" &#124; "end"</code> | <code>"center"</code> | Set the alignment of the tooltip relative to the icon.<br />Only applies to icon-only buttons | | tooltipAlignment | No | <code>let</code> | No | <code>"start" &#124; "center" &#124; "end"</code> | <code>"center"</code> | Set the alignment of the tooltip relative to the icon.<br />Only applies to icon-only buttons |
| tooltipPosition | No | <code>let</code> | No | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code> | <code>"bottom"</code> | Set the position of the tooltip relative to the icon | | tooltipPosition | No | <code>let</code> | No | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code> | <code>"bottom"</code> | Set the position of the tooltip relative to the icon |
@ -395,7 +395,6 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
| Slot name | Default | Props | Fallback | | Slot name | Default | Props | Fallback |
| :-------- | :------ | :---------------------------------------------------------------------------------------------------------------------------------------------- | :------- | | :-------- | :------ | :---------------------------------------------------------------------------------------------------------------------------------------------- | :------- |
| -- | Yes | <code>{ props: { role: "button"; type?: string; tabindex: any; disabled: boolean; href?: string; class: string; [key: string]: any; } } </code> | -- | | -- | Yes | <code>{ props: { role: "button"; type?: string; tabindex: any; disabled: boolean; href?: string; class: string; [key: string]: any; } } </code> | -- |
| icon | No | -- | -- |
### Events ### Events
@ -487,7 +486,6 @@ None.
| mouseenter | forwarded | -- | | mouseenter | forwarded | -- |
| mouseleave | forwarded | -- | | mouseleave | forwarded | -- |
| change | forwarded | -- | | change | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- | | blur | forwarded | -- |
## `CheckboxSkeleton` ## `CheckboxSkeleton`
@ -543,7 +541,7 @@ None.
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------------------- | :------- | :--------------- | :------- | ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | :-------------------- | :------- | :--------------- | :------- | ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLPreElement</code> | <code>null</code> | Obtain a reference to the pre HTML element | | ref | No | <code>let</code> | Yes | <code>null &#124; HTMLPreElement</code> | <code>null</code> | Obtain a reference to the pre HTML element |
| showMoreLess | No | <code>let</code> | Yes | <code>boolean</code> | <code>true</code> | Set to `false` to hide the show more/less button<br /><br />NOTE: this prop only works with the `type="multi"` variant | | showMoreLess | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to enable the show more/less button |
| expanded | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to expand a multi-line code snippet (type="multi") | | expanded | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to expand a multi-line code snippet (type="multi") |
| type | No | <code>let</code> | No | <code>"single" &#124; "inline" &#124; "multi"</code> | <code>"single"</code> | Set the type of code snippet | | type | No | <code>let</code> | No | <code>"single" &#124; "inline" &#124; "multi"</code> | <code>"single"</code> | Set the type of code snippet |
| code | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Set the code snippet text.<br />Alternatively, use the default slot (e.g., `&lt;CodeSnippet&gt;{code}&lt;/CodeSnippet&gt;`).<br /><br />NOTE: you _must_ use the `code` prop for the copy-to-clipboard functionality. | | code | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Set the code snippet text.<br />Alternatively, use the default slot (e.g., `&lt;CodeSnippet&gt;{code}&lt;/CodeSnippet&gt;`).<br /><br />NOTE: you _must_ use the `code` prop for the copy-to-clipboard functionality. |
@ -668,7 +666,7 @@ export interface ComboBoxItem {
| items | No | <code>let</code> | No | <code>ReadonlyArray<ComboBoxItem></code> | <code>[]</code> | Set the combobox items | | items | No | <code>let</code> | No | <code>ReadonlyArray<ComboBoxItem></code> | <code>[]</code> | Set the combobox items |
| itemToString | No | <code>let</code> | No | <code>(item: ComboBoxItem) => string</code> | <code>(item) => item.text &#124;&#124; item.id</code> | Override the display of a combobox item | | itemToString | No | <code>let</code> | No | <code>(item: ComboBoxItem) => string</code> | <code>(item) => item.text &#124;&#124; item.id</code> | Override the display of a combobox item |
| direction | No | <code>let</code> | No | <code>"bottom" &#124; "top"</code> | <code>"bottom"</code> | Specify the direction of the combobox dropdown menu | | direction | No | <code>let</code> | No | <code>"bottom" &#124; "top"</code> | <code>"bottom"</code> | Specify the direction of the combobox dropdown menu |
| size | No | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | <code>undefined</code> | Set the size of the combobox | | size | No | <code>let</code> | No | <code>"sm" &#124; "lg" </code> | <code>undefined</code> | Set the size of the combobox |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the combobox | | disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the combobox |
| titleText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title text of the combobox | | titleText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title text of the combobox |
| placeholder | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder text | | placeholder | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder text |
@ -763,9 +761,9 @@ None.
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :------------ | :------- | :--------------- | :------- | ----------------------------- | ---------------------- | ----------------------------------------- | | :------------ | :------- | :--------------- | :------- | ------------------------------ | ---------------------- | ----------------------------------------- |
| selectedIndex | No | <code>let</code> | Yes | <code>number</code> | <code>0</code> | Set the selected index of the switch item | | selectedIndex | No | <code>let</code> | Yes | <code>number</code> | <code>0</code> | Set the selected index of the switch item |
| size | No | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | <code>undefined</code> | Specify the size of the content switcher | | size | No | <code>let</code> | No | <code>"sm" &#124; "lg" </code> | <code>undefined</code> | Specify the size of the content switcher |
### Slots ### Slots
@ -934,7 +932,7 @@ export interface DataTableEmptyHeader {
key: DataTableKey; key: DataTableKey;
empty: boolean; empty: boolean;
display?: (item: Value, row: DataTableRow) => DataTableValue; display?: (item: Value, row: DataTableRow) => DataTableValue;
sort?: false | ((a: DataTableValue, b: DataTableValue) => number); sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1);
columnMenu?: boolean; columnMenu?: boolean;
width?: string; width?: string;
minWidth?: string; minWidth?: string;
@ -944,7 +942,7 @@ export interface DataTableNonEmptyHeader {
key: DataTableKey; key: DataTableKey;
value: DataTableValue; value: DataTableValue;
display?: (item: Value, row: DataTableRow) => DataTableValue; display?: (item: Value, row: DataTableRow) => DataTableValue;
sort?: false | ((a: DataTableValue, b: DataTableValue) => number); sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1);
columnMenu?: boolean; columnMenu?: boolean;
width?: string; width?: string;
minWidth?: string; minWidth?: string;
@ -1088,7 +1086,7 @@ None.
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------------- | :------- | :--------------- | :------- | ----------------------------------------- | ------------------------------------------------ | -------------------------------------------------- | | :-------------- | :------- | :--------------- | :------- | ----------------------------------------- | ------------------------------------------------ | -------------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element | | ref | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| size | No | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | <code>undefined</code> | Set the size of the input | | size | No | <code>let</code> | No | <code>"sm" &#124; "lg"</code> | <code>undefined</code> | Set the size of the input |
| type | No | <code>let</code> | No | <code>string</code> | <code>"text"</code> | Specify the input type | | type | No | <code>let</code> | No | <code>string</code> | <code>"text"</code> | Specify the input type |
| placeholder | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the input placeholder text | | placeholder | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the input placeholder text |
| pattern | No | <code>let</code> | No | <code>string</code> | <code>"\\d{1,2}\\/\\d{1,2}\\/\\d{4}"</code> | Specify the Regular Expression for the input value | | pattern | No | <code>let</code> | No | <code>string</code> | <code>"\\d{1,2}\\/\\d{1,2}\\/\\d{4}"</code> | Specify the Regular Expression for the input value |
@ -1169,7 +1167,7 @@ export interface DropdownItem {
| itemToString | No | <code>let</code> | No | <code>(item: DropdownItem) => string</code> | <code>(item) => item.text &#124;&#124; item.id</code> | Override the display of a dropdown item | | itemToString | No | <code>let</code> | No | <code>(item: DropdownItem) => string</code> | <code>(item) => item.text &#124;&#124; item.id</code> | Override the display of a dropdown item |
| type | No | <code>let</code> | No | <code>"default" &#124; "inline"</code> | <code>"default"</code> | Specify the type of dropdown | | type | No | <code>let</code> | No | <code>"default" &#124; "inline"</code> | <code>"default"</code> | Specify the type of dropdown |
| direction | No | <code>let</code> | No | <code>"bottom" &#124; "top"</code> | <code>"bottom"</code> | Specify the direction of the dropdown menu | | direction | No | <code>let</code> | No | <code>"bottom" &#124; "top"</code> | <code>"bottom"</code> | Specify the direction of the dropdown menu |
| size | No | <code>let</code> | No | <code>"sm" &#124; "lg" &#124; "xl"</code> | <code>undefined</code> | Specify the size of the dropdown field | | size | No | <code>let</code> | No | <code>"sm" &#124; "lg" </code> | <code>undefined</code> | Specify the size of the dropdown field |
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant | | light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the dropdown | | disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the dropdown |
| titleText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title text | | titleText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title text |
@ -1369,7 +1367,7 @@ None.
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------------- | :------- | :--------------- | :------- | -------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------ | | :-------------- | :------- | :--------------- | :------- | -------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------ |
| status | No | <code>let</code> | No | <code>"uploading" &#124; "edit" &#124; "complete"</code> | <code>"uploading"</code> | Specify the file uploader status | | status | No | <code>let</code> | No | <code>"uploading" &#124; "edit" &#124; "complete"</code> | <code>"uploading"</code> | Specify the file uploader status |
| size | No | <code>let</code> | No | <code>"default" &#124; "field" &#124; "small"</code> | <code>"default"</code> | Specify the size of button skeleton | | size | No | <code>let</code> | No | <code>"sm" &#124; "md" &#124; "lg"</code> | <code>"lg"</code> | Specify the size of button skeleton |
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the ARIA label used for the status icons | | iconDescription | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the ARIA label used for the status icons |
| invalid | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state | | invalid | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
| errorSubject | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the error subject text | | errorSubject | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the error subject text |
@ -1625,11 +1623,11 @@ None.
### Slots ### Slots
| Slot name | Default | Props | Fallback | | Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :--------------------------------------------------------------------------------------------------- | | :-------- | :------ | :---- | :--------------------------------------------------------------------- |
| -- | Yes | -- | -- | | -- | Yes | -- | -- |
| closeIcon | No | -- | <code>&lt;svelte:component this="{closeIcon}" size="{20}" /&gt;</code> | | closeIcon | No | -- | <code>&lt;svelte:component this="{closeIcon}" size="{20}" /&gt;</code> |
| icon | No | -- | <code>&lt;svelte:component this="{icon}" size="{20}" /&gt;</code> | | icon | No | -- | <code>&lt;svelte:component this="{icon}" size="{20}" /&gt;</code> |
| text | No | -- | <code>{#if text}&lt;span class:bx--header\_\_action-text="{true}"&gt;{text}&lt;/span&gt;{/if}</code> | | text | No | -- | <code>{#if text}&lt;span&gt;{text}&lt;/span&gt;{/if}</code> |
### Events ### Events
@ -1668,13 +1666,15 @@ None.
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | --------------------------------------------- | | :-------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | --------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the HTML button element | | ref | No | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the HTML button element |
| isActive | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the active variant | | isActive | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the active variant |
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render | | icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render |
### Slots ### Slots
None. | Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :---------------------------------------------------------------- |
| -- | Yes | -- | <code>&lt;svelte:component this="{icon}" size="{20}" /&gt;</code> |
### Events ### Events
@ -1836,8 +1836,8 @@ export interface HeaderSearchResult {
### Slots ### Slots
| Slot name | Default | Props | Fallback | | Slot name | Default | Props | Fallback |
| :-------- | :------ | :---------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | :-------- | :------ | :---------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------ |
| -- | Yes | <code>{ result: HeaderSearchResult; index: number } </code> | <code>{result.text}<br /> {#if result.description}&lt;span<br /> class:bx--header-search-menu-description="{true}"<br /> &gt;– {result.description}&lt;/span<br /> &gt;{/if}</code> | | -- | Yes | <code>{ result: HeaderSearchResult; index: number } </code> | <code>{result.text}<br /> {#if result.description}&lt;span&gt;– {result.description}&lt;/span&gt;{/if}</code> |
### Events ### Events
@ -1964,8 +1964,8 @@ None.
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | -------------------------------------------------------- | | :-------- | :------- | :--------------- | :------- | ---------------------------------------------------------------------- | ---------------------- | -------------------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the top-level HTML element | | ref | No | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement &#124; HTMLParagraphElement</code> | <code>null</code> | Obtain a reference to the top-level HTML element |
| size | No | <code>let</code> | No | <code>"sm" &#124; "lg"</code> | <code>undefined</code> | Specify the size of the link | | size | No | <code>let</code> | No | <code>"sm" &#124; "lg"</code> | <code>undefined</code> | Specify the size of the link |
| href | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the href value | | href | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the href value |
| inline | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the inline variant | | inline | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the inline variant |
@ -1995,7 +1995,7 @@ None.
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :---------- | :------- | :--------------- | :------- | -------------------------------------- | ---------------------- | ------------------------------------------ | | :---------- | :------- | :--------------- | :------- | -------------------------------------- | ---------------------- | ------------------------------------------ |
| size | No | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | <code>undefined</code> | Set the size of the list box | | size | No | <code>let</code> | No | <code>"sm" &#124; "lg" </code> | <code>undefined</code> | Set the size of the list box |
| type | No | <code>let</code> | No | <code>"default" &#124; "inline"</code> | <code>"default"</code> | Set the type of the list box | | type | No | <code>let</code> | No | <code>"default" &#124; "inline"</code> | <code>"default"</code> | Set the type of the list box |
| open | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to open the list box | | open | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to open the list box |
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant | | light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
@ -2152,8 +2152,8 @@ None.
### Events ### Events
| Event name | Type | Detail | | Event name | Type | Detail |
| :--------- | :--------- | :------------------------------------------- | | :--------- | :--------- | :----- |
| clear | dispatched | <code>KeyboardEvent &#124; MouseEvent</code> | | clear | dispatched | -- |
## `ListItem` ## `ListItem`
@ -2372,7 +2372,7 @@ export interface MultiSelectItem {
| items | No | <code>let</code> | Yes | <code>ReadonlyArray<MultiSelectItem></code> | <code>[]</code> | Set the multiselect items | | items | No | <code>let</code> | Yes | <code>ReadonlyArray<MultiSelectItem></code> | <code>[]</code> | Set the multiselect items |
| itemToString | No | <code>let</code> | No | <code>(item: MultiSelectItem) => any</code> | <code>(item) => item.text &#124;&#124; item.id</code> | Override the display of a multiselect item | | itemToString | No | <code>let</code> | No | <code>(item: MultiSelectItem) => any</code> | <code>(item) => item.text &#124;&#124; item.id</code> | Override the display of a multiselect item |
| itemToInput | No | <code>let</code> | No | <code>(item: MultiSelectItem) => { name?: string; labelText?: any; title?: string; value?: string }</code> | <code>(item) => {}</code> | Override the item name, title, labelText, or value passed to the user-selectable checkbox input as well as the hidden inputs. | | itemToInput | No | <code>let</code> | No | <code>(item: MultiSelectItem) => { name?: string; labelText?: any; title?: string; value?: string }</code> | <code>(item) => {}</code> | Override the item name, title, labelText, or value passed to the user-selectable checkbox input as well as the hidden inputs. |
| size | No | <code>let</code> | No | <code>"sm" &#124; "lg" &#124; "xl"</code> | <code>undefined</code> | Set the size of the combobox | | size | No | <code>let</code> | No | <code>"sm" &#124; "lg"</code> | <code>undefined</code> | Set the size of the combobox |
| type | No | <code>let</code> | No | <code>"default" &#124; "inline"</code> | <code>"default"</code> | Specify the type of multiselect | | type | No | <code>let</code> | No | <code>"default" &#124; "inline"</code> | <code>"default"</code> | Specify the type of multiselect |
| direction | No | <code>let</code> | No | <code>"bottom" &#124; "top"</code> | <code>"bottom"</code> | Specify the direction of the multiselect dropdown menu | | direction | No | <code>let</code> | No | <code>"bottom" &#124; "top"</code> | <code>"bottom"</code> | Specify the direction of the multiselect dropdown menu |
| selectionFeedback | No | <code>let</code> | No | <code>"top" &#124; "fixed" &#124; "top-after-reopen"</code> | <code>"top-after-reopen"</code> | Specify the selection feedback after selecting items | | selectionFeedback | No | <code>let</code> | No | <code>"top" &#124; "fixed" &#124; "top-after-reopen"</code> | <code>"top-after-reopen"</code> | Specify the selection feedback after selecting items |
@ -2493,7 +2493,7 @@ export type NumberInputTranslationId = "increment" | "decrement";
| :-------------- | :------- | :----------------- | :------- | --------------------------------------------------------------- | ---------------------------------------------------------------- | ------------------------------------------------------------- | | :-------------- | :------- | :----------------- | :------- | --------------------------------------------------------------- | ---------------------------------------------------------------- | ------------------------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element | | ref | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| value | No | <code>let</code> | Yes | <code>null &#124; number</code> | <code>null</code> | Specify the input value.<br />Use `null` to denote "no value" | | value | No | <code>let</code> | Yes | <code>null &#124; number</code> | <code>null</code> | Specify the input value.<br />Use `null` to denote "no value" |
| size | No | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | <code>undefined</code> | Set the size of the input | | size | No | <code>let</code> | No | <code>"sm" &#124; "lg"</code> | <code>undefined</code> | Set the size of the input |
| step | No | <code>let</code> | No | <code>number</code> | <code>1</code> | Specify the step increment | | step | No | <code>let</code> | No | <code>number</code> | <code>1</code> | Specify the step increment |
| max | No | <code>let</code> | No | <code>number</code> | <code>undefined</code> | Specify the maximum value | | max | No | <code>let</code> | No | <code>number</code> | <code>undefined</code> | Specify the maximum value |
| min | No | <code>let</code> | No | <code>number</code> | <code>undefined</code> | Specify the minimum value | | min | No | <code>let</code> | No | <code>number</code> | <code>undefined</code> | Specify the minimum value |
@ -2614,7 +2614,7 @@ None.
| buttonRef | No | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the trigger button element | | buttonRef | No | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the trigger button element |
| icon | No | <code>let</code> | Yes | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render.<br />Defaults to `&lt;OverflowMenuVertical /&gt;` | | icon | No | <code>let</code> | Yes | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render.<br />Defaults to `&lt;OverflowMenuVertical /&gt;` |
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the menu | | open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the menu |
| size | No | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | <code>undefined</code> | Specify the size of the overflow menu | | size | No | <code>let</code> | No | <code>"sm" &#124; "lg"</code> | <code>undefined</code> | Specify the size of the overflow menu |
| direction | No | <code>let</code> | No | <code>"top" &#124; "bottom"</code> | <code>"bottom"</code> | Specify the direction of the overflow menu relative to the button | | direction | No | <code>let</code> | No | <code>"top" &#124; "bottom"</code> | <code>"bottom"</code> | Specify the direction of the overflow menu relative to the button |
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant | | light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| flipped | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to flip the menu relative to the button | | flipped | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to flip the menu relative to the button |
@ -2760,7 +2760,7 @@ None.
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element | | ref | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| type | No | <code>let</code> | Yes | <code>"text" &#124; "password"</code> | <code>"password"</code> | Set to `"text"` to toggle the password visibility | | type | No | <code>let</code> | Yes | <code>"text" &#124; "password"</code> | <code>"password"</code> | Set to `"text"` to toggle the password visibility |
| value | No | <code>let</code> | Yes | <code>number &#124; string</code> | <code>""</code> | Specify the input value | | value | No | <code>let</code> | Yes | <code>number &#124; string</code> | <code>""</code> | Specify the input value |
| size | No | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | <code>undefined</code> | Set the size of the input | | size | No | <code>let</code> | No | <code>"sm" &#124; "lg"</code> | <code>undefined</code> | Set the size of the input |
| placeholder | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder text | | placeholder | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder text |
| hidePasswordLabel | No | <code>let</code> | No | <code>string</code> | <code>"Hide password"</code> | Specify the hide password label text | | hidePasswordLabel | No | <code>let</code> | No | <code>string</code> | <code>"Hide password"</code> | Specify the hide password label text |
| showPasswordLabel | No | <code>let</code> | No | <code>string</code> | <code>"Show password"</code> | Specify the show password label text | | showPasswordLabel | No | <code>let</code> | No | <code>string</code> | <code>"Show password"</code> | Specify the show password label text |
@ -2827,6 +2827,24 @@ None.
| :------------ | :--------- | :------------------------------------ | | :------------ | :--------- | :------------------------------------ |
| click:outside | dispatched | <code>{ target: HTMLElement; }</code> | | click:outside | dispatched | <code>{ target: HTMLElement; }</code> |
## `PopoverContent`
### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------- | :------- | :--------------- | :------- | ---- | ----------------- | ----------- |
| className | No | <code>let</code> | No | -- | <code>null</code> | -- |
### Slots
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| -- | Yes | -- | -- |
### Events
None.
## `ProgressBar` ## `ProgressBar`
### Props ### Props
@ -3107,7 +3125,7 @@ None.
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element | | ref | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| expanded | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true to expand the search input | | expanded | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true to expand the search input |
| value | No | <code>let</code> | Yes | <code>any</code> | <code>""</code> | Specify the value of the search input | | value | No | <code>let</code> | Yes | <code>any</code> | <code>""</code> | Specify the value of the search input |
| size | No | <code>let</code> | No | <code>"sm" &#124; "lg" &#124; "xl"</code> | <code>"xl"</code> | Specify the size of the search input | | size | No | <code>let</code> | No | <code>"sm" &#124; "md" &#124; "lg"</code> | <code>"md"</code> | Specify the size of the search input |
| searchClass | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the class name passed to the outer div element | | searchClass | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the class name passed to the outer div element |
| skeleton | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state | | skeleton | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant | | light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
@ -3152,7 +3170,7 @@ None.
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------- | :------- | :--------------- | :------- | ----------------------------------------- | ----------------- | ------------------------------------ | | :-------- | :------- | :--------------- | :------- | ----------------------------------------- | ----------------- | ------------------------------------ |
| size | No | <code>let</code> | No | <code>"sm" &#124; "lg" &#124; "xl"</code> | <code>"xl"</code> | Specify the size of the search input | | size | No | <code>let</code> | No | <code>"sm" &#124; "md" &#124; "lg"</code> | <code>"md"</code> | Specify the size of the search input |
### Slots ### Slots
@ -3175,7 +3193,7 @@ None.
| :---------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ----------------------------------------------- | | :---------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ----------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLSelectElement</code> | <code>null</code> | Obtain a reference to the select HTML element | | ref | No | <code>let</code> | Yes | <code>null &#124; HTMLSelectElement</code> | <code>null</code> | Obtain a reference to the select HTML element |
| selected | No | <code>let</code> | Yes | <code>string &#124; number</code> | <code>undefined</code> | Specify the selected item value | | selected | No | <code>let</code> | Yes | <code>string &#124; number</code> | <code>undefined</code> | Specify the selected item value |
| size | No | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | <code>undefined</code> | Set the size of the select input | | size | No | <code>let</code> | No | <code>"sm" &#124; "lg"</code> | <code>undefined</code> | Set the size of the select input |
| inline | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the inline variant | | inline | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the inline variant |
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant | | light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the select element | | disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the select element |
@ -3531,13 +3549,12 @@ None.
### Events ### Events
| Event name | Type | Detail | | Event name | Type | Detail |
| :--------- | :--------- | :------------------ | | :--------- | :--------- | :----- |
| change | dispatched | <code>number</code> |
| input | dispatched | <code>number</code> |
| click | forwarded | -- | | click | forwarded | -- |
| mouseover | forwarded | -- | | mouseover | forwarded | -- |
| mouseenter | forwarded | -- | | mouseenter | forwarded | -- |
| mouseleave | forwarded | -- | | mouseleave | forwarded | -- |
| change | dispatched | -- |
## `SliderSkeleton` ## `SliderSkeleton`
@ -3580,12 +3597,12 @@ None.
### Events ### Events
| Event name | Type | Detail | | Event name | Type | Detail |
| :--------- | :--------- | :------------------ | | :--------- | :--------- | :----- |
| change | dispatched | <code>string</code> |
| click | forwarded | -- | | click | forwarded | -- |
| mouseover | forwarded | -- | | mouseover | forwarded | -- |
| mouseenter | forwarded | -- | | mouseenter | forwarded | -- |
| mouseleave | forwarded | -- | | mouseleave | forwarded | -- |
| change | dispatched | -- |
## `StructuredListBody` ## `StructuredListBody`
@ -3951,12 +3968,10 @@ None.
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------------- | :------- | :--------------- | :------- | ----------------------------------------- | -------------------------------- | -------------------------------------------- | | :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | -------------------------------------------- |
| selected | No | <code>let</code> | Yes | <code>number</code> | <code>0</code> | Specify the selected tab index | | selected | No | <code>let</code> | Yes | <code>number</code> | <code>0</code> | Specify the selected tab index |
| type | No | <code>let</code> | No | <code>"default" &#124; "container"</code> | <code>"default"</code> | Specify the type of tabs | | contained | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for tabs to be contained |
| autoWidth | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for tabs to have an auto-width | | autoWidth | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for tabs to have an auto-width |
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>"Show menu options"</code> | Specify the ARIA label for the chevron icon |
| triggerHref | No | <code>let</code> | No | <code>string</code> | <code>"#"</code> | Specify the tab trigger href attribute |
### Slots ### Slots
@ -3968,10 +3983,8 @@ None.
### Events ### Events
| Event name | Type | Detail | | Event name | Type | Detail |
| :--------- | :--------- | :------------------ | | :--------- | :--------- | :----- |
| change | dispatched | <code>number</code> | | change | dispatched | -- |
| keypress | forwarded | -- |
| click | forwarded | -- |
## `TabsSkeleton` ## `TabsSkeleton`
@ -4058,7 +4071,7 @@ None.
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLTextAreaElement</code> | <code>null</code> | Obtain a reference to the textarea HTML element | | ref | No | <code>let</code> | Yes | <code>null &#124; HTMLTextAreaElement</code> | <code>null</code> | Obtain a reference to the textarea HTML element |
| value | No | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the textarea value | | value | No | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the textarea value |
| placeholder | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder text | | placeholder | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder text |
| cols | No | <code>let</code> | No | <code>number</code> | <code>50</code> | Specify the number of cols | | cols | No | <code>let</code> | No | <code>number</code> | <code>undefined</code> | Specify the number of cols |
| rows | No | <code>let</code> | No | <code>number</code> | <code>4</code> | Specify the number of rows | | rows | No | <code>let</code> | No | <code>number</code> | <code>4</code> | Specify the number of rows |
| maxCount | No | <code>let</code> | No | <code>number</code> | <code>undefined</code> | Specify the max character count | | maxCount | No | <code>let</code> | No | <code>number</code> | <code>undefined</code> | Specify the max character count |
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant | | light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
@ -4123,7 +4136,7 @@ None.
| :---------- | :------- | :--------------- | :------- | --------------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------- | | :---------- | :------- | :--------------- | :------- | --------------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element | | ref | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| value | No | <code>let</code> | Yes | <code>null &#124; number &#124; string</code> | <code>""</code> | Specify the input value.<br /><br />`value` will be set to `null` if type="number"<br />and the value is empty. | | value | No | <code>let</code> | Yes | <code>null &#124; number &#124; string</code> | <code>""</code> | Specify the input value.<br /><br />`value` will be set to `null` if type="number"<br />and the value is empty. |
| size | No | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | <code>undefined</code> | Set the size of the input | | size | No | <code>let</code> | No | <code>"sm" &#124; "lg"</code> | <code>undefined</code> | Set the size of the input |
| placeholder | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder text | | placeholder | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder text |
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant | | light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the input | | disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the input |
@ -4188,7 +4201,7 @@ None.
### Types ### Types
```ts ```ts
export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100"; export type CarbonTheme = "white" | "g10" | "g90" | "g100";
``` ```
### Props ### Props
@ -4270,7 +4283,7 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
| :---------- | :------- | :--------------- | :------- | ----------------------------------------- | --------------------------------------------------- | ----------------------------------------------------- | | :---------- | :------- | :--------------- | :------- | ----------------------------------------- | --------------------------------------------------- | ----------------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element | | ref | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| value | No | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the input value | | value | No | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the input value |
| size | No | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | <code>undefined</code> | Specify the size of the input | | size | No | <code>let</code> | No | <code>"sm" &#124; "lg"</code> | <code>undefined</code> | Specify the size of the input |
| placeholder | No | <code>let</code> | No | <code>string</code> | <code>"hh:mm"</code> | Specify the input placeholder text | | placeholder | No | <code>let</code> | No | <code>string</code> | <code>"hh:mm"</code> | Specify the input placeholder text |
| pattern | No | <code>let</code> | No | <code>string</code> | <code>"(1[012]&#124;[1-9]):[0-5][0-9](\\s)?"</code> | Specify the `pattern` attribute for the input element | | pattern | No | <code>let</code> | No | <code>string</code> | <code>"(1[012]&#124;[1-9]):[0-5][0-9](\\s)?"</code> | Specify the `pattern` attribute for the input element |
| maxlength | No | <code>let</code> | No | <code>number</code> | <code>5</code> | Specify the `maxlength` input attribute | | maxlength | No | <code>let</code> | No | <code>number</code> | <code>5</code> | Specify the `maxlength` input attribute |
@ -4378,9 +4391,9 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------- | :------- | :--------------- | :------- | ---------------------------------- | ------------------------------------------------ | ----------------------------------------------- | | :-------- | :------- | :--------------- | :------- | ----------------------------- | ------------------------------------------------ | ----------------------------------------------- |
| toggled | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to toggle the checkbox input | | toggled | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to toggle the checkbox input |
| size | No | <code>let</code> | No | <code>"default" &#124; "sm"</code> | <code>"default"</code> | Specify the toggle size | | size | No | <code>let</code> | No | <code>"md" &#124; "sm"</code> | <code>"md"</code> | Specify the toggle size |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable checkbox input | | disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable checkbox input |
| labelA | No | <code>let</code> | No | <code>string</code> | <code>"Off"</code> | Specify the label for the untoggled state | | labelA | No | <code>let</code> | No | <code>string</code> | <code>"Off"</code> | Specify the label for the untoggled state |
| labelB | No | <code>let</code> | No | <code>string</code> | <code>"On"</code> | Specify the label for the toggled state | | labelB | No | <code>let</code> | No | <code>string</code> | <code>"On"</code> | Specify the label for the toggled state |
@ -4393,8 +4406,6 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
| Slot name | Default | Props | Fallback | | Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :----------------------- | | :-------- | :------ | :---- | :----------------------- |
| labelA | No | -- | <code>{labelA}</code> |
| labelB | No | -- | <code>{labelB}</code> |
| labelText | No | -- | <code>{labelText}</code> | | labelText | No | -- | <code>{labelText}</code> |
### Events ### Events
@ -4411,31 +4422,6 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
| focus | forwarded | -- | | focus | forwarded | -- |
| blur | forwarded | -- | | blur | forwarded | -- |
## `ToggleSkeleton`
### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------- | :------- | :--------------- | :------- | ---------------------------------- | ------------------------------------------------ | ------------------------------- |
| size | No | <code>let</code> | No | <code>"default" &#124; "sm"</code> | <code>"default"</code> | Specify the toggle size |
| labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
### Slots
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :----------------------- |
| labelText | No | -- | <code>{labelText}</code> |
### Events
| Event name | Type | Detail |
| :--------- | :-------- | :----- |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
## `Toolbar` ## `Toolbar`
### Props ### Props
@ -4702,7 +4688,7 @@ export interface TreeNode {
| selectedIds | No | <code>let</code> | Yes | <code>ReadonlyArray<TreeNodeId></code> | <code>[]</code> | Set the node ids to be selected | | selectedIds | No | <code>let</code> | Yes | <code>ReadonlyArray<TreeNodeId></code> | <code>[]</code> | Set the node ids to be selected |
| activeId | No | <code>let</code> | Yes | <code>TreeNodeId</code> | <code>""</code> | Set the current active node id<br />Only one node can be active | | activeId | No | <code>let</code> | Yes | <code>TreeNodeId</code> | <code>""</code> | Set the current active node id<br />Only one node can be active |
| children | No | <code>let</code> | No | <code>Array<TreeNode></code> | <code>[]</code> | Provide an array of children nodes to render | | children | No | <code>let</code> | No | <code>Array<TreeNode></code> | <code>[]</code> | Provide an array of children nodes to render |
| size | No | <code>let</code> | No | <code>"default" &#124; "compact"</code> | <code>"default"</code> | Specify the TreeView size | | size | No | <code>let</code> | No | <code>"xs" &#124; "sm"</code> | <code>"sm"</code> | Specify the TreeView size |
| labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text | | labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
| hideLabel | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text | | hideLabel | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
| expandAll | No | <code>function</code> | No | <code>() => void</code> | <code>() => { expandedIds = [...nodeIds]; }</code> | Programmatically expand all nodes | | expandAll | No | <code>function</code> | No | <code>() => void</code> | <code>() => { expandedIds = [...nodeIds]; }</code> | Programmatically expand all nodes |

24
CONTRIBUTING.md
View file

@ -10,15 +10,15 @@ Before submitting a pull request (PR), consider [filing an issue](https://github
- [Component Format](#component-format) - [Component Format](#component-format)
- [Editing a component](#editing-a-component) - [Editing a component](#editing-a-component)
- [Creating a component](#creating-a-component) - [Creating a component](#creating-a-component)
- [Run `yarn build:docs`](#run-yarn-builddocs) - [Run `npm run build:docs`](#run-npm-run-builddocs)
- [Submit a Pull Request](#submit-a-pull-request) - [Submit a Pull Request](#submit-a-pull-request)
- [Sync Your Fork](#sync-your-fork) - [Sync Your Fork](#sync-your-fork)
- [Submit a PR](#submit-a-pr) - [Submit a PR](#submit-a-pr)
## Prerequisites ## Prerequisites
- [Node.js](https://nodejs.org/en/download/package-manager/) (version >=12) - [Node.js](https://nodejs.org/en/download/package-manager/) (version >=18)
- [Yarn](https://classic.yarnpkg.com/en/docs/install) - [npm](https://docs.npmjs.com/cli) (bundled with Node.js)
## Project set-up ## Project set-up
@ -43,7 +43,7 @@ Install the project dependencies:
```sh ```sh
# carbon-components-svelte/ # carbon-components-svelte/
yarn install npm install
``` ```
## Documentation set-up ## Documentation set-up
@ -54,7 +54,7 @@ First, create a symbolic link at the root of the project folder:
```sh ```sh
# carbon-components-svelte/ # carbon-components-svelte/
yarn link npm link
``` ```
Go into the `docs` folder: Go into the `docs` folder:
@ -66,8 +66,8 @@ cd docs
Link `"carbon-components-svelte"`: Link `"carbon-components-svelte"`:
```sh ```sh
yarn link "carbon-components-svelte" npm link "carbon-components-svelte"
yarn install npm install
``` ```
If linked correctly, any change to a component in the `src` folder should be reflected in the `docs` site. If linked correctly, any change to a component in the `src` folder should be reflected in the `docs` site.
@ -87,7 +87,7 @@ Preview changes to components from the `src` folder in the documentation website
In the `docs` folder, run: In the `docs` folder, run:
```sh ```sh
yarn dev npm run dev
``` ```
The site should be served at `http://localhost:3000/` (or the next available port). The site should be served at `http://localhost:3000/` (or the next available port).
@ -134,13 +134,13 @@ export {
} from "./ComposedModal"; } from "./ComposedModal";
``` ```
### Run `yarn build:docs` ### Run `npm run build:docs`
Run the following command to re-generate TypeScript definitions and documentation. Run the following command to re-generate TypeScript definitions and documentation.
```sh ```sh
# carbon-components-svelte/ # carbon-components-svelte/
yarn build:docs npm run build:docs
``` ```
## Submit a Pull Request ## Submit a Pull Request
@ -171,11 +171,11 @@ The workflow is automatically triggered when pushing a tag that begins with `v`
However, maintainers must perform a few things in preparation for a release. However, maintainers must perform a few things in preparation for a release.
Locally, while on `master` and the branch is clean, run `yarn release`. This command will: Locally, while on `master` and the branch is clean, run `npm run release`. This command will:
- Bump the semantic version in `package.json` - Bump the semantic version in `package.json`
- Generate notes in `CHANGELOG.md` - Generate notes in `CHANGELOG.md`
- Run `yarn build:docs` to update the generated documentation - Run `npm run build:docs` to update the generated documentation
This command will not create a commit nor tag. Afterwards, perform the following manually: This command will not create a commit nor tag. Afterwards, perform the following manually:

9
README.md
View file

@ -45,11 +45,10 @@ pnpm i -D carbon-components-svelte
### Styling ### Styling
Before importing components, you will need to first apply Carbon component styles. The Carbon Design System supports five themes (2 light, 3 dark). Before importing components, you will need to first apply Carbon component styles. The Carbon Design System supports four themes (2 light, 2 dark).
- **white.css**: Default Carbon theme (light) - **white.css**: Default Carbon theme (light)
- **g10.css**: Gray 10 theme (light) - **g10.css**: Gray 10 theme (light)
- **g80.css**: Gray 80 theme (dark)
- **g90.css**: Gray 90 theme (dark) - **g90.css**: Gray 90 theme (dark)
- **g100.css**: Gray 100 theme (dark) - **g100.css**: Gray 100 theme (dark)
- **all.css**: All themes (White, Gray 10, Gray 90, Gray 100) using [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) - **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)
@ -60,7 +59,6 @@ The compiled CSS is generated from the following `.scss` files:
- [css/white.scss](css/white.scss) - [css/white.scss](css/white.scss)
- [css/g10.scss](css/g10.scss) - [css/g10.scss](css/g10.scss)
- [css/g80.scss](css/g80.scss)
- [css/g90.scss](css/g90.scss) - [css/g90.scss](css/g90.scss)
- [css/g100.scss](css/g100.scss) - [css/g100.scss](css/g100.scss)
- [css/all.scss](css/all.scss) - [css/all.scss](css/all.scss)
@ -74,9 +72,6 @@ import "carbon-components-svelte/css/white.css";
// Gray 10 theme // Gray 10 theme
import "carbon-components-svelte/css/g10.css"; import "carbon-components-svelte/css/g10.css";
// Gray 80 theme
import "carbon-components-svelte/css/g80.css";
// Gray 90 theme // Gray 90 theme
import "carbon-components-svelte/css/g90.css"; import "carbon-components-svelte/css/g90.css";
@ -147,7 +142,7 @@ Programmatically switch between each of the five Carbon themes by setting the "t
```html ```html
<script> <script>
let theme = "white"; // "white" | "g10" | "g80" | "g90" | "g100" let theme = "white"; // "white" | "g10" | "g90" | "g100"
$: document.documentElement.setAttribute("theme", theme); $: document.documentElement.setAttribute("theme", theme);
</script> </script>

325
css/_popover.scss
View file

@ -1,325 +0,0 @@
// This file is inlined from `carbon-components@10.47` as
// Popover styles were removed since version 10.48.
//
// Copyright IBM Corp. 2016, 2018
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//
@import 'carbon-components/scss/globals/scss/vars';
@import 'carbon-components/scss/globals/scss/helper-mixins';
@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
/// Popover component
/// @access private
/// @group components
@mixin popover {
$popover-text-color: $text-01;
$popover-caret-offset: 1rem;
$popover-offset: 8px;
.#{$prefix}--popover {
// Specify the distance between the popover and the trigger. This value must
// have a unit otherwise the `calc()` expression will not work
// stylelint-disable-next-line length-zero-no-unit
--cds-popover-offset: 0rem;
// Specify the distance that the caret should be offset from the side of the
// popover when not centered
--cds-popover-caret-offset: 1rem;
position: absolute;
z-index: z('floating');
display: none;
}
// We use a pseudo element inside of the popover to create a space between the
// target and the popover. This helps in situations like tooltips where you do
// not want the tooltip to disappear when the user moves from the target to
// the popover.
.#{$prefix}--popover::before {
position: absolute;
display: block;
content: '';
}
.#{$prefix}--popover--open {
display: block;
}
.#{$prefix}--popover-contents {
@include box-shadow;
position: relative;
width: max-content;
max-width: rem(368px);
background-color: $ui-01;
border-radius: 2px;
color: $popover-text-color;
}
.#{$prefix}--popover--light .#{$prefix}--popover-contents {
background-color: $ui-background;
}
.#{$prefix}--popover--high-contrast .#{$prefix}--popover-contents {
background-color: $inverse-02;
color: $inverse-01;
}
.#{$prefix}--popover--caret {
--cds-popover-offset: 0.5rem;
}
.#{$prefix}--popover--caret .#{$prefix}--popover-contents::before,
.#{$prefix}--popover--caret .#{$prefix}--popover-contents::after {
position: absolute;
display: inline-block;
width: rem(8px);
height: rem(8px);
background-color: inherit;
content: '';
}
.#{$prefix}--popover--caret .#{$prefix}--popover-contents::before {
z-index: -1;
box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.2);
}
// The popover's tooltip is created by drawing two 8px x 8px boxes, one for
// rendering the box-shadow that the popover content uses and another for
// layering on top of this box to create an effect of a popover caret with a
// box-shadow. The layer with the box-shadow is rendered behind the popover
// content, while the other is rendered above of the popover content.
//-----------------------------------------------------------------------------
// Bottom
//-----------------------------------------------------------------------------
.#{$prefix}--popover--bottom {
bottom: 0;
left: 50%;
transform: translate(-50%, calc(100% + var(--cds-popover-offset)));
}
@include place-caret(bottom) {
top: 0;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
}
// Bottom left
.#{$prefix}--popover--bottom-left {
bottom: 0;
left: 0;
transform: translateY(calc(100% + var(--cds-popover-offset)));
}
@include place-caret(bottom-left) {
top: 0;
left: 0;
transform: translate(var(--cds-popover-caret-offset), -50%) rotate(45deg);
}
// Bottom right
.#{$prefix}--popover--bottom-right {
right: 0;
bottom: 0;
transform: translateY(calc(100% + var(--cds-popover-offset)));
}
@include place-caret(bottom-right) {
top: 0;
right: 0;
transform: translate(calc(-1 * var(--cds-popover-caret-offset)), -50%)
rotate(45deg);
}
// Hover area
.#{$prefix}--popover--bottom.#{$prefix}--popover::before,
.#{$prefix}--popover--bottom-left.#{$prefix}--popover::before,
.#{$prefix}--popover--bottom-right.#{$prefix}--popover::before {
top: 0;
right: 0;
left: 0;
height: var(--cds-popover-offset);
transform: translateY(-100%);
}
//-----------------------------------------------------------------------------
// TOP
//-----------------------------------------------------------------------------
.#{$prefix}--popover--top {
bottom: 100%;
left: 50%;
transform: translate(-50%, calc(-1 * var(--cds-popover-offset)));
}
@include place-caret(top) {
bottom: 0;
left: 50%;
transform: translate(-50%, 50%) rotate(45deg);
}
// Top left
.#{$prefix}--popover--top-left {
bottom: 100%;
left: 0;
transform: translateY(calc(-1 * var(--cds-popover-offset)));
}
@include place-caret(top-left) {
bottom: 0;
left: 0;
transform: translate(var(--cds-popover-caret-offset), 50%) rotate(45deg);
}
// Top right
.#{$prefix}--popover--top-right {
right: 0;
bottom: 100%;
transform: translateY(calc(-1 * var(--cds-popover-offset)));
}
@include place-caret(top-right) {
right: 0;
bottom: 0;
transform: translate(calc(-1 * var(--cds-popover-caret-offset)), 50%)
rotate(45deg);
}
// Hover area
.#{$prefix}--popover--top.#{$prefix}--popover::before,
.#{$prefix}--popover--top-left.#{$prefix}--popover::before,
.#{$prefix}--popover--top-right.#{$prefix}--popover::before {
right: 0;
bottom: 0;
left: 0;
height: var(--cds-popover-offset);
transform: translateY(100%);
}
//-----------------------------------------------------------------------------
// Right
//-----------------------------------------------------------------------------
.#{$prefix}--popover--right {
top: 50%;
left: 100%;
transform: translate(var(--cds-popover-offset), -50%);
}
@include place-caret(right) {
top: 50%;
left: 0;
transform: translate(-50%, -50%) rotate(45deg);
}
// Right top
.#{$prefix}--popover--right-top {
top: 0;
left: 100%;
transform: translateX($popover-offset);
}
@include place-caret(right-top) {
top: 0;
left: 0;
transform: translate(-50%, var(--cds-popover-caret-offset)) rotate(45deg);
}
// Right bottom
.#{$prefix}--popover--right-bottom {
bottom: 0;
left: 100%;
transform: translateX(var(--cds-popover-offset));
}
@include place-caret(right-bottom) {
bottom: 0;
left: 0;
transform: translate(-50%, calc(-1 * var(--cds-popover-caret-offset)))
rotate(45deg);
}
// Hover area
.#{$prefix}--popover--right.#{$prefix}--popover::before,
.#{$prefix}--popover--right-top.#{$prefix}--popover::before,
.#{$prefix}--popover--right-bottom.#{$prefix}--popover::before {
top: 0;
bottom: 0;
left: 0;
width: var(--cds-popover-offset);
transform: translateX(-100%);
}
//-----------------------------------------------------------------------------
// Left
//-----------------------------------------------------------------------------
.#{$prefix}--popover--left {
top: 50%;
right: 100%;
transform: translate(calc(-1 * var(--cds-popover-offset)), -50%);
}
@include place-caret(left) {
top: 50%;
right: 0;
transform: translate(50%, -50%) rotate(45deg);
}
// Left top
.#{$prefix}--popover--left-top {
top: 0;
right: 100%;
transform: translateX(calc(-1 * var(--cds-popover-offset)));
}
@include place-caret(left-top) {
top: 0;
right: 0;
transform: translate(50%, var(--cds-popover-caret-offset)) rotate(45deg);
}
// Left bottom
.#{$prefix}--popover--left-bottom {
right: 100%;
bottom: 0;
transform: translateX(calc(-1 * var(--cds-popover-offset)));
}
@include place-caret(left-bottom) {
right: 0;
bottom: 0;
transform: translate(50%, calc(-1 * var(--cds-popover-caret-offset)))
rotate(45deg);
}
// Hover area
.#{$prefix}--popover--left.#{$prefix}--popover::before,
.#{$prefix}--popover--left-top.#{$prefix}--popover::before,
.#{$prefix}--popover--left-bottom.#{$prefix}--popover::before {
top: 0;
right: 0;
bottom: 0;
width: var(--cds-popover-offset);
transform: translateX(100%);
}
}
/// Helper for placing the caret inside a popover. The selectors here can get
/// distracting in the main stylesheet, but ultimately they target the ::before
/// and ::after pseudo-elements for the given direction. The @content block
/// passed in should appropriately position the caret for the given direction.
@mixin place-caret($direction) {
.#{$prefix}--popover--caret.#{$prefix}--popover--#{$direction}
.#{$prefix}--popover-contents::before,
.#{$prefix}--popover--caret.#{$prefix}--popover--#{$direction}
.#{$prefix}--popover-contents::after {
@content;
}
}
@include exports('popover') {
@include popover;
}

10
css/all.css
View file

File diff suppressed because one or more lines are too long

92
css/all.scss
View file

@ -1,81 +1,35 @@
// This is a recipe for dynamic, client-side theming
// All Carbon themes are included (White, Gray 10, Gray 90, Gray 100)
$feature-flags: (
// Custom CSS properties must be enabled to dynamically switch themes
enable-css-custom-properties: true,
ui-shell: true,
grid-columns-16: true
);
$css--font-face: true;
$css--helpers: true;
$css--body: true;
$css--use-layer: true;
$css--reset: true;
$css--default-type: true;
$css--plex: true;
// Use all Carbon themes // Use all Carbon themes
@import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss"; @use '@carbon/styles/scss/config' with (
@import "carbon-components/scss/globals/scss/component-tokens"; $use-akamai-cdn: true,
@import "carbon-components/src/components/tag/tag"; $prefix: 'bx'
@import "carbon-components/src/components/notification/inline-notification"; );
@import "carbon-components/src/components/notification/toast-notification"; @use "@carbon/styles/scss/theme" as *;
@import "./popover"; @use "@carbon/styles/scss/themes" as *;
@use "@carbon/styles/scss/fonts";
@use "@carbon/styles/scss/utilities" as *;
// The default theme is "white" (White)
:root { :root {
@include carbon--theme($carbon--theme--white, true) { @include theme($white);
@include emit-component-tokens($tag-colors);
@include emit-component-tokens($notification-colors);
}
} }
// Set the <html> theme attribute to "g10" to use the Gray 10 theme [data-carbon-theme='g10'] {
// <html theme="g10"> @include theme($g10);
:root[theme="g10"] {
@include carbon--theme($carbon--theme--g10, true) {
@include emit-component-tokens($tag-colors);
@include emit-component-tokens($notification-colors);
}
} }
// Set the <html> theme attribute to "g80" to use the Gray 80 theme [data-carbon-theme='g90'] {
// <html theme="g80"> @include theme($g90);
:root[theme="g80"] {
@include carbon--theme($carbon--theme--g80, true) {
@include emit-component-tokens($tag-colors);
@include emit-component-tokens($notification-colors);
}
} }
// Set the <html> theme attribute to "g90" to use the Gray 90 theme [data-carbon-theme='g100'] {
// <html theme="g90"> @include theme($g100);
:root[theme="g90"] {
@include carbon--theme($carbon--theme--g90, true) {
@include emit-component-tokens($tag-colors);
@include emit-component-tokens($notification-colors);
}
} }
// Set the <html> theme attribute to "g100" to use the Gray 100 theme @import "@carbon/styles/scss/reset";
// <html theme="g100"> @import "@carbon/styles/scss/components";
:root[theme="g100"] {
@include carbon--theme($carbon--theme--g100, true) { .bx--text-truncate-end {
@include emit-component-tokens($tag-colors); @include text-truncate-end;
@include emit-component-tokens($notification-colors); }
} .bx--text-truncate-front {
@include text-truncate-front;
} }
// Programmatically update the theme in JavaScript:
// document.documentElement.setAttribute("theme", "g90");
@import "carbon-components/scss/globals/scss/_css--reset";
@import "carbon-components/scss/globals/scss/_css--font-face";
@import "carbon-components/scss/globals/scss/_css--helpers";
@import "carbon-components/scss/globals/scss/_css--body";
@import "carbon-components/scss/globals/grid/grid";
// Import all component styles
@import "carbon-components/scss/globals/scss/styles";

10
css/g10.css
View file

File diff suppressed because one or more lines are too long

49
css/g10.scss
View file

@ -1,34 +1,23 @@
// Use the "g10" (Gray 10) Carbon theme // Use g10 theme
@import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss"; @use '@carbon/styles/scss/config' with (
$use-akamai-cdn: true,
$carbon--theme: $carbon--theme--g10; $prefix: 'bx'
@include carbon--theme();
$feature-flags: (
ui-shell: true,
grid-columns-16: true
); );
@use "@carbon/styles/scss/theme" as *;
@use "@carbon/styles/scss/themes" as *;
@use "@carbon/styles/scss/fonts";
@use "@carbon/styles/scss/utilities" as *;
$css--font-face: true; :root {
$css--helpers: true; @include theme($g10);
$css--body: true; }
$css--use-layer: true;
$css--reset: true;
$css--default-type: true;
$css--plex: true;
@import "carbon-components/scss/globals/scss/component-tokens"; @import "@carbon/styles/scss/reset";
@import "carbon-components/src/components/tag/tag"; @import "@carbon/styles/scss/components";
@import "carbon-components/src/components/notification/inline-notification";
@import "carbon-components/src/components/notification/toast-notification";
@import "./popover";
@import "carbon-components/scss/globals/scss/_css--reset";
@import "carbon-components/scss/globals/scss/_css--font-face";
@import "carbon-components/scss/globals/scss/_css--helpers";
@import "carbon-components/scss/globals/scss/_css--body";
@import "carbon-components/scss/globals/grid/grid";
// Import all component styles
@import "carbon-components/scss/globals/scss/styles";
.bx--text-truncate-end {
@include text-truncate-end;
}
.bx--text-truncate-front {
@include text-truncate-front;
}

10
css/g100.css
View file

File diff suppressed because one or more lines are too long

48
css/g100.scss
View file

@ -1,33 +1,23 @@
// Use the "g100" (Gray 100) Carbon theme // Use g10 theme
@import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss"; @use '@carbon/styles/scss/config' with (
$use-akamai-cdn: true,
$carbon--theme: $carbon--theme--g100; $prefix: 'bx'
@include carbon--theme();
$feature-flags: (
ui-shell: true,
grid-columns-16: true
); );
@use "@carbon/styles/scss/theme" as *;
@use "@carbon/styles/scss/themes" as *;
@use "@carbon/styles/scss/fonts";
@use "@carbon/styles/scss/utilities" as *;
$css--font-face: true; :root {
$css--helpers: true; @include theme($g100);
$css--body: true; }
$css--use-layer: true;
$css--reset: true;
$css--default-type: true;
$css--plex: true;
@import "carbon-components/scss/globals/scss/component-tokens"; @import "@carbon/styles/scss/reset";
@import "carbon-components/src/components/tag/tag"; @import "@carbon/styles/scss/components";
@import "carbon-components/src/components/notification/inline-notification";
@import "carbon-components/src/components/notification/toast-notification";
@import "./popover";
@import "carbon-components/scss/globals/scss/_css--reset"; .bx--text-truncate-end {
@import "carbon-components/scss/globals/scss/_css--font-face"; @include text-truncate-end;
@import "carbon-components/scss/globals/scss/_css--helpers"; }
@import "carbon-components/scss/globals/scss/_css--body"; .bx--text-truncate-front {
@import "carbon-components/scss/globals/grid/grid"; @include text-truncate-front;
}
// Import all component styles
@import "carbon-components/scss/globals/scss/styles";

1
css/g80.css
View file

File diff suppressed because one or more lines are too long

34
css/g80.scss
View file

@ -1,34 +0,0 @@
// Use the "g80" (Gray 80) Carbon theme
@import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss";
$carbon--theme: $carbon--theme--g80;
@include carbon--theme();
$feature-flags: (
ui-shell: true,
grid-columns-16: true
);
$css--font-face: true;
$css--helpers: true;
$css--body: true;
$css--use-layer: true;
$css--reset: true;
$css--default-type: true;
$css--plex: true;
@import "carbon-components/scss/globals/scss/component-tokens";
@import "carbon-components/src/components/tag/tag";
@import "carbon-components/src/components/notification/inline-notification";
@import "carbon-components/src/components/notification/toast-notification";
@import "./popover";
@import "carbon-components/scss/globals/scss/_css--reset";
@import "carbon-components/scss/globals/scss/_css--font-face";
@import "carbon-components/scss/globals/scss/_css--helpers";
@import "carbon-components/scss/globals/scss/_css--body";
@import "carbon-components/scss/globals/grid/grid";
// Import all component styles
@import "carbon-components/scss/globals/scss/styles";

10
css/g90.css
View file

File diff suppressed because one or more lines are too long

48
css/g90.scss
View file

@ -1,33 +1,23 @@
// Use the "g90" (Gray 90) Carbon theme // Use g10 theme
@import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss"; @use '@carbon/styles/scss/config' with (
$use-akamai-cdn: true,
$carbon--theme: $carbon--theme--g90; $prefix: 'bx'
@include carbon--theme();
$feature-flags: (
ui-shell: true,
grid-columns-16: true
); );
@use "@carbon/styles/scss/theme" as *;
@use "@carbon/styles/scss/themes" as *;
@use "@carbon/styles/scss/fonts";
@use "@carbon/styles/scss/utilities" as *;
$css--font-face: true; :root {
$css--helpers: true; @include theme($g90);
$css--body: true; }
$css--use-layer: true;
$css--reset: true;
$css--default-type: true;
$css--plex: true;
@import "carbon-components/scss/globals/scss/component-tokens"; @import "@carbon/styles/scss/reset";
@import "carbon-components/src/components/tag/tag"; @import "@carbon/styles/scss/components";
@import "carbon-components/src/components/notification/inline-notification";
@import "carbon-components/src/components/notification/toast-notification";
@import "./popover";
@import "carbon-components/scss/globals/scss/_css--reset"; .bx--text-truncate-end {
@import "carbon-components/scss/globals/scss/_css--font-face"; @include text-truncate-end;
@import "carbon-components/scss/globals/scss/_css--helpers"; }
@import "carbon-components/scss/globals/scss/_css--body"; .bx--text-truncate-front {
@import "carbon-components/scss/globals/grid/grid"; @include text-truncate-front;
}
// Import all component styles
@import "carbon-components/scss/globals/scss/styles";

1
css/white.css
View file

File diff suppressed because one or more lines are too long

33
css/white.scss
View file

@ -1,33 +0,0 @@
// Use the "white" (White) Carbon theme
@import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss";
$carbon--theme: $carbon--theme--white;
@include carbon--theme();
$feature-flags: (
ui-shell: true,
grid-columns-16: true
);
$css--font-face: true;
$css--helpers: true;
$css--body: true;
$css--use-layer: true;
$css--reset: true;
$css--default-type: true;
$css--plex: true;
@import "carbon-components/scss/globals/scss/component-tokens";
@import "carbon-components/src/components/tag/tag";
@import "carbon-components/src/components/notification/inline-notification";
@import "carbon-components/src/components/notification/toast-notification";
@import "./popover";
@import "carbon-components/scss/globals/scss/_css--reset";
@import "carbon-components/scss/globals/scss/_css--font-face";
@import "carbon-components/scss/globals/scss/_css--helpers";
@import "carbon-components/scss/globals/scss/_css--body";
@import "carbon-components/scss/globals/grid/grid";
// Import all component styles
@import "carbon-components/scss/globals/scss/styles";

2
docs/index.html
View file

@ -9,7 +9,7 @@
try { try {
const theme = localStorage.getItem("theme"); const theme = localStorage.getItem("theme");
if (["white", "g10", "g80", "g90", "g100"].includes(theme)) { if (["white", "g10", "g90", "g100"].includes(theme)) {
document.documentElement.setAttribute("theme", theme); document.documentElement.setAttribute("theme", theme);
document.documentElement.style.setProperty("color-scheme", ["white", "g10"].includes(theme) ? "light" : "dark"); document.documentElement.style.setProperty("color-scheme", ["white", "g10"].includes(theme) ? "light" : "dark");
} }

3144
docs/package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

5
docs/package.json
View file

@ -1,7 +1,7 @@
{ {
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "yarn build:index-docs && run-p dev:*", "dev": "npm run build:index-docs && run-p dev:*",
"dev:routify": "cross-env NODE_ENV=development routify run", "dev:routify": "cross-env NODE_ENV=development routify run",
"dev:svite": "vite dev", "dev:svite": "vite dev",
"build": "run-s build:*", "build": "run-s build:*",
@ -10,13 +10,14 @@
"build:svite": "vite build" "build:svite": "vite build"
}, },
"devDependencies": { "devDependencies": {
"@ibm/plex": "^6.1.1",
"@sveltech/routify": "^1.9.10", "@sveltech/routify": "^1.9.10",
"@sveltejs/vite-plugin-svelte": "^3.0.1", "@sveltejs/vite-plugin-svelte": "^3.0.1",
"carbon-components-svelte": "../", "carbon-components-svelte": "../",
"carbon-icons-svelte": "^12.4.1", "carbon-icons-svelte": "^12.4.1",
"clipboard-copy": "^4.0.1", "clipboard-copy": "^4.0.1",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"mdsvex": "^0.10.6", "mdsvex": "^0.11.0",
"minisearch": "^6.2.0", "minisearch": "^6.2.0",
"npm-run-all": "^4.1.5", "npm-run-all": "^4.1.5",
"prettier": "^2.7.1", "prettier": "^2.7.1",

267
docs/src/COMPONENT_API.json
View file

@ -21,7 +21,7 @@
"name": "size", "name": "size",
"kind": "let", "kind": "let",
"description": "Specify the size of the accordion", "description": "Specify the size of the accordion",
"type": "\"sm\" | \"xl\"", "type": "\"sm\" | \"lg\"",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,
@ -453,7 +453,7 @@
"name": "kind", "name": "kind",
"kind": "let", "kind": "let",
"description": "Specify the kind of button", "description": "Specify the kind of button",
"type": "\"primary\" | \"secondary\" | \"tertiary\" | \"ghost\" | \"danger\" | \"danger-tertiary\" | \"danger-ghost\"", "type": "\"primary\" | \"secondary\" | \"tertiary\" | \"ghost\" | \"danger\" | \"danger--tertiary\" | \"danger--ghost\"",
"value": "\"primary\"", "value": "\"primary\"",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -465,8 +465,8 @@
"name": "size", "name": "size",
"kind": "let", "kind": "let",
"description": "Specify the size of button", "description": "Specify the size of button",
"type": "\"default\" | \"field\" | \"small\" | \"lg\" | \"xl\"", "type": "\"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\"",
"value": "\"default\"", "value": "\"lg\"",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,
@ -500,7 +500,7 @@
{ {
"name": "icon", "name": "icon",
"kind": "let", "kind": "let",
"description": "Specify the icon to render\nAlternatively, use the named slot \"icon\" (e.g., `<Icon slot=\"icon\" size=\"{20}\" />`)", "description": "Specify the icon to render",
"type": "typeof import(\"svelte\").SvelteComponent<any>", "type": "typeof import(\"svelte\").SvelteComponent<any>",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -633,8 +633,7 @@
"name": "__default__", "name": "__default__",
"default": true, "default": true,
"slot_props": "{ props: { role: \"button\"; type?: string; tabindex: any; disabled: boolean; href?: string; class: string; [key: string]: any; } }" "slot_props": "{ props: { role: \"button\"; type?: string; tabindex: any; disabled: boolean; href?: string; class: string; [key: string]: any; } }"
}, }
{ "name": "icon", "default": false, "slot_props": "{}" }
], ],
"events": [ "events": [
{ "type": "forwarded", "name": "click", "element": "ButtonSkeleton" }, { "type": "forwarded", "name": "click", "element": "ButtonSkeleton" },
@ -926,7 +925,6 @@
"element": "CheckboxSkeleton" "element": "CheckboxSkeleton"
}, },
{ "type": "forwarded", "name": "change", "element": "input" }, { "type": "forwarded", "name": "change", "element": "input" },
{ "type": "forwarded", "name": "focus", "element": "input" },
{ "type": "forwarded", "name": "blur", "element": "input" } { "type": "forwarded", "name": "blur", "element": "input" }
], ],
"typedefs": [], "typedefs": [],
@ -1195,9 +1193,9 @@
{ {
"name": "showMoreLess", "name": "showMoreLess",
"kind": "let", "kind": "let",
"description": "Set to `false` to hide the show more/less button\n\nNOTE: this prop only works with the `type=\"multi\"` variant", "description": "Set to `true` to enable the show more/less button",
"type": "boolean", "type": "boolean",
"value": "true", "value": "false",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,
@ -1521,7 +1519,7 @@
"name": "size", "name": "size",
"kind": "let", "kind": "let",
"description": "Set the size of the combobox", "description": "Set the size of the combobox",
"type": "\"sm\" | \"xl\"", "type": "\"sm\" | \"lg\" ",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,
@ -1941,7 +1939,7 @@
"name": "size", "name": "size",
"kind": "let", "kind": "let",
"description": "Specify the size of the content switcher", "description": "Specify the size of the content switcher",
"type": "\"sm\" | \"xl\"", "type": "\"sm\" | \"lg\" ",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,
@ -2703,14 +2701,14 @@
"ts": "type DataTableValue = any" "ts": "type DataTableValue = any"
}, },
{ {
"type": "{ key: DataTableKey; empty: boolean; display?: (item: Value, row: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }", "type": "{ key: DataTableKey; empty: boolean; display?: (item: Value, row: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; width?: string; minWidth?: string; }",
"name": "DataTableEmptyHeader", "name": "DataTableEmptyHeader",
"ts": "interface DataTableEmptyHeader { key: DataTableKey; empty: boolean; display?: (item: Value, row: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }" "ts": "interface DataTableEmptyHeader { key: DataTableKey; empty: boolean; display?: (item: Value, row: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; width?: string; minWidth?: string; }"
}, },
{ {
"type": "{ key: DataTableKey; value: DataTableValue; display?: (item: Value, row: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }", "type": "{ key: DataTableKey; value: DataTableValue; display?: (item: Value, row: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; width?: string; minWidth?: string; }",
"name": "DataTableNonEmptyHeader", "name": "DataTableNonEmptyHeader",
"ts": "interface DataTableNonEmptyHeader { key: DataTableKey; value: DataTableValue; display?: (item: Value, row: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }" "ts": "interface DataTableNonEmptyHeader { key: DataTableKey; value: DataTableValue; display?: (item: Value, row: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; width?: string; minWidth?: string; }"
}, },
{ {
"type": "DataTableNonEmptyHeader | DataTableEmptyHeader", "type": "DataTableNonEmptyHeader | DataTableEmptyHeader",
@ -3011,7 +3009,7 @@
"name": "size", "name": "size",
"kind": "let", "kind": "let",
"description": "Set the size of the input", "description": "Set the size of the input",
"type": "\"sm\" | \"xl\"", "type": "\"sm\" | \"lg\"",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,
@ -3324,7 +3322,7 @@
"name": "size", "name": "size",
"kind": "let", "kind": "let",
"description": "Specify the size of the dropdown field", "description": "Specify the size of the dropdown field",
"type": "\"sm\" | \"lg\" | \"xl\"", "type": "\"sm\" | \"lg\" ",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,
@ -4293,8 +4291,8 @@
"name": "size", "name": "size",
"kind": "let", "kind": "let",
"description": "Specify the size of button skeleton", "description": "Specify the size of button skeleton",
"type": "\"default\" | \"field\" | \"small\"", "type": "\"sm\" | \"md\" | \"lg\"",
"value": "\"default\"", "value": "\"lg\"",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,
@ -4998,7 +4996,7 @@
{ {
"name": "text", "name": "text",
"default": false, "default": false,
"fallback": "{#if text}<span class:bx--header__action-text=\"{true}\">{text}</span>{/if}", "fallback": "{#if text}<span>{text}</span>{/if}",
"slot_props": "{}" "slot_props": "{}"
} }
], ],
@ -5105,7 +5103,7 @@
"name": "ref", "name": "ref",
"kind": "let", "kind": "let",
"description": "Obtain a reference to the HTML button element", "description": "Obtain a reference to the HTML button element",
"type": "HTMLButtonElement", "type": "null | HTMLButtonElement",
"value": "null", "value": "null",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -5115,14 +5113,17 @@
} }
], ],
"moduleExports": [], "moduleExports": [],
"slots": [], "slots": [
"events": [{ "type": "forwarded", "name": "click", "element": "Button" }], {
"typedefs": [], "name": "__default__",
"rest_props": { "type": "InlineComponent", "name": "Button" }, "default": true,
"extends": { "fallback": "<svelte:component this=\"{icon}\" size=\"{20}\" />",
"interface": "ButtonProps", "slot_props": "{}"
"import": "\"../Button/Button.svelte\""
} }
],
"events": [{ "type": "forwarded", "name": "click", "element": "button" }],
"typedefs": [],
"rest_props": { "type": "Element", "name": "button" }
}, },
{ {
"moduleName": "HeaderNav", "moduleName": "HeaderNav",
@ -5396,7 +5397,7 @@
{ {
"name": "__default__", "name": "__default__",
"default": true, "default": true,
"fallback": "{result.text}\n {#if result.description}<span\n class:bx--header-search-menu-description=\"{true}\"\n >– {result.description}</span\n >{/if}", "fallback": "{result.text}\n {#if result.description}<span>– {result.description}</span>{/if}",
"slot_props": "{ result: HeaderSearchResult; index: number }" "slot_props": "{ result: HeaderSearchResult; index: number }"
} }
], ],
@ -5830,7 +5831,7 @@
"name": "ref", "name": "ref",
"kind": "let", "kind": "let",
"description": "Obtain a reference to the top-level HTML element", "description": "Obtain a reference to the top-level HTML element",
"type": "null | HTMLAnchorElement", "type": "null | HTMLAnchorElement | HTMLParagraphElement",
"value": "null", "value": "null",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -5850,13 +5851,13 @@
} }
], ],
"events": [ "events": [
{ "type": "forwarded", "name": "click", "element": "a" }, { "type": "forwarded", "name": "click", "element": "p" },
{ "type": "forwarded", "name": "mouseover", "element": "a" }, { "type": "forwarded", "name": "mouseover", "element": "p" },
{ "type": "forwarded", "name": "mouseenter", "element": "a" }, { "type": "forwarded", "name": "mouseenter", "element": "p" },
{ "type": "forwarded", "name": "mouseleave", "element": "a" } { "type": "forwarded", "name": "mouseleave", "element": "p" }
], ],
"typedefs": [], "typedefs": [],
"rest_props": { "type": "Element", "name": "a" } "rest_props": { "type": "Element", "name": "a | p" }
}, },
{ {
"moduleName": "ListBox", "moduleName": "ListBox",
@ -5866,7 +5867,7 @@
"name": "size", "name": "size",
"kind": "let", "kind": "let",
"description": "Set the size of the list box", "description": "Set the size of the list box",
"type": "\"sm\" | \"xl\"", "type": "\"sm\" | \"lg\" ",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,
@ -6293,13 +6294,7 @@
], ],
"moduleExports": [], "moduleExports": [],
"slots": [], "slots": [],
"events": [ "events": [{ "type": "dispatched", "name": "clear" }],
{
"type": "dispatched",
"name": "clear",
"detail": "KeyboardEvent | MouseEvent"
}
],
"typedefs": [ "typedefs": [
{ {
"type": "\"clearAll\" | \"clearSelection\"", "type": "\"clearAll\" | \"clearSelection\"",
@ -7052,7 +7047,7 @@
"name": "size", "name": "size",
"kind": "let", "kind": "let",
"description": "Set the size of the combobox", "description": "Set the size of the combobox",
"type": "\"sm\" | \"lg\" | \"xl\"", "type": "\"sm\" | \"lg\"",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,
@ -7589,7 +7584,7 @@
"name": "size", "name": "size",
"kind": "let", "kind": "let",
"description": "Set the size of the input", "description": "Set the size of the input",
"type": "\"sm\" | \"xl\"", "type": "\"sm\" | \"lg\"",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,
@ -7993,7 +7988,7 @@
"name": "size", "name": "size",
"kind": "let", "kind": "let",
"description": "Specify the size of the overflow menu", "description": "Specify the size of the overflow menu",
"type": "\"sm\" | \"xl\"", "type": "\"sm\" | \"lg\"",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,
@ -8644,7 +8639,7 @@
"name": "size", "name": "size",
"kind": "let", "kind": "let",
"description": "Set the size of the input", "description": "Set the size of the input",
"type": "\"sm\" | \"xl\"", "type": "\"sm\" | \"lg\"",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,
@ -9017,6 +9012,27 @@
"typedefs": [], "typedefs": [],
"rest_props": { "type": "Element", "name": "div" } "rest_props": { "type": "Element", "name": "div" }
}, },
{
"moduleName": "PopoverContent",
"filePath": "src/Popover/PopoverContent.svelte",
"props": [
{
"name": "className",
"kind": "let",
"value": "null",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
}
],
"moduleExports": [],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"events": [],
"typedefs": [],
"rest_props": { "type": "Element", "name": "span" }
},
{ {
"moduleName": "ProgressBar", "moduleName": "ProgressBar",
"filePath": "src/ProgressBar/ProgressBar.svelte", "filePath": "src/ProgressBar/ProgressBar.svelte",
@ -9935,8 +9951,8 @@
"name": "size", "name": "size",
"kind": "let", "kind": "let",
"description": "Specify the size of the search input", "description": "Specify the size of the search input",
"type": "\"sm\" | \"lg\" | \"xl\"", "type": "\"sm\" | \"md\" | \"lg\"",
"value": "\"xl\"", "value": "\"md\"",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,
@ -10159,8 +10175,8 @@
"name": "size", "name": "size",
"kind": "let", "kind": "let",
"description": "Specify the size of the search input", "description": "Specify the size of the search input",
"type": "\"sm\" | \"lg\" | \"xl\"", "type": "\"sm\" | \"md\" | \"lg\"",
"value": "\"xl\"", "value": "\"md\"",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,
@ -10198,7 +10214,7 @@
"name": "size", "name": "size",
"kind": "let", "kind": "let",
"description": "Set the size of the select input", "description": "Set the size of the select input",
"type": "\"sm\" | \"xl\"", "type": "\"sm\" | \"lg\"",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,
@ -11359,12 +11375,11 @@
} }
], ],
"events": [ "events": [
{ "type": "dispatched", "name": "change", "detail": "number" },
{ "type": "dispatched", "name": "input", "detail": "number" },
{ "type": "forwarded", "name": "click", "element": "div" }, { "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "mouseover", "element": "div" }, { "type": "forwarded", "name": "mouseover", "element": "div" },
{ "type": "forwarded", "name": "mouseenter", "element": "div" }, { "type": "forwarded", "name": "mouseenter", "element": "div" },
{ "type": "forwarded", "name": "mouseleave", "element": "div" } { "type": "forwarded", "name": "mouseleave", "element": "div" },
{ "type": "dispatched", "name": "change" }
], ],
"typedefs": [], "typedefs": [],
"rest_props": { "type": "Element", "name": "div" } "rest_props": { "type": "Element", "name": "div" }
@ -11452,11 +11467,11 @@
"moduleExports": [], "moduleExports": [],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"events": [ "events": [
{ "type": "dispatched", "name": "change", "detail": "string" },
{ "type": "forwarded", "name": "click", "element": "div" }, { "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "mouseover", "element": "div" }, { "type": "forwarded", "name": "mouseover", "element": "div" },
{ "type": "forwarded", "name": "mouseenter", "element": "div" }, { "type": "forwarded", "name": "mouseenter", "element": "div" },
{ "type": "forwarded", "name": "mouseleave", "element": "div" } { "type": "forwarded", "name": "mouseleave", "element": "div" },
{ "type": "dispatched", "name": "change" }
], ],
"typedefs": [], "typedefs": [],
"rest_props": { "type": "Element", "name": "div" } "rest_props": { "type": "Element", "name": "div" }
@ -11866,13 +11881,13 @@
} }
], ],
"events": [ "events": [
{ "type": "forwarded", "name": "click", "element": "li" }, { "type": "forwarded", "name": "click", "element": "a" },
{ "type": "forwarded", "name": "mouseover", "element": "li" }, { "type": "forwarded", "name": "mouseover", "element": "a" },
{ "type": "forwarded", "name": "mouseenter", "element": "li" }, { "type": "forwarded", "name": "mouseenter", "element": "a" },
{ "type": "forwarded", "name": "mouseleave", "element": "li" } { "type": "forwarded", "name": "mouseleave", "element": "a" }
], ],
"typedefs": [], "typedefs": [],
"rest_props": { "type": "Element", "name": "li" } "rest_props": { "type": "Element", "name": "a" }
}, },
{ {
"moduleName": "TabContent", "moduleName": "TabContent",
@ -12197,11 +12212,11 @@
"reactive": true "reactive": true
}, },
{ {
"name": "type", "name": "contained",
"kind": "let", "kind": "let",
"description": "Specify the type of tabs", "description": "Set to `true` for tabs to be contained",
"type": "\"default\" | \"container\"", "type": "boolean",
"value": "\"default\"", "value": "false",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,
@ -12219,30 +12234,6 @@
"isRequired": false, "isRequired": false,
"constant": false, "constant": false,
"reactive": false "reactive": false
},
{
"name": "iconDescription",
"kind": "let",
"description": "Specify the ARIA label for the chevron icon",
"type": "string",
"value": "\"Show menu options\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "triggerHref",
"kind": "let",
"description": "Specify the tab trigger href attribute",
"type": "string",
"value": "\"#\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
} }
], ],
"moduleExports": [], "moduleExports": [],
@ -12250,11 +12241,7 @@
{ "name": "__default__", "default": true, "slot_props": "{}" }, { "name": "__default__", "default": true, "slot_props": "{}" },
{ "name": "content", "default": false, "slot_props": "{}" } { "name": "content", "default": false, "slot_props": "{}" }
], ],
"events": [ "events": [{ "type": "dispatched", "name": "change" }],
{ "type": "dispatched", "name": "change", "detail": "number" },
{ "type": "forwarded", "name": "keypress", "element": "div" },
{ "type": "forwarded", "name": "click", "element": "a" }
],
"typedefs": [], "typedefs": [],
"rest_props": { "type": "Element", "name": "div" } "rest_props": { "type": "Element", "name": "div" }
}, },
@ -12492,7 +12479,6 @@
"kind": "let", "kind": "let",
"description": "Specify the number of cols", "description": "Specify the number of cols",
"type": "number", "type": "number",
"value": "50",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,
@ -12715,7 +12701,7 @@
"name": "size", "name": "size",
"kind": "let", "kind": "let",
"description": "Set the size of the input", "description": "Set the size of the input",
"type": "\"sm\" | \"xl\"", "type": "\"sm\" | \"lg\"",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,
@ -13092,9 +13078,9 @@
], ],
"typedefs": [ "typedefs": [
{ {
"type": "\"white\" | \"g10\" | \"g80\" | \"g90\" | \"g100\"", "type": "\"white\" | \"g10\" | \"g90\" | \"g100\"",
"name": "CarbonTheme", "name": "CarbonTheme",
"ts": "type CarbonTheme = \"white\" | \"g10\" | \"g80\" | \"g90\" | \"g100\"" "ts": "type CarbonTheme = \"white\" | \"g10\" | \"g90\" | \"g100\""
} }
] ]
}, },
@ -13204,7 +13190,7 @@
"name": "size", "name": "size",
"kind": "let", "kind": "let",
"description": "Specify the size of the input", "description": "Specify the size of the input",
"type": "\"sm\" | \"xl\"", "type": "\"sm\" | \"lg\"",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,
@ -13681,8 +13667,8 @@
"name": "size", "name": "size",
"kind": "let", "kind": "let",
"description": "Specify the toggle size", "description": "Specify the toggle size",
"type": "\"default\" | \"sm\"", "type": "\"md\" | \"sm\"",
"value": "\"default\"", "value": "\"md\"",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,
@ -13787,18 +13773,6 @@
], ],
"moduleExports": [], "moduleExports": [],
"slots": [ "slots": [
{
"name": "labelA",
"default": false,
"fallback": "{labelA}",
"slot_props": "{}"
},
{
"name": "labelB",
"default": false,
"fallback": "{labelB}",
"slot_props": "{}"
},
{ {
"name": "labelText", "name": "labelText",
"default": false, "default": false,
@ -13824,65 +13798,6 @@
"typedefs": [], "typedefs": [],
"rest_props": { "type": "Element", "name": "div" } "rest_props": { "type": "Element", "name": "div" }
}, },
{
"moduleName": "ToggleSkeleton",
"filePath": "src/Toggle/ToggleSkeleton.svelte",
"props": [
{
"name": "size",
"kind": "let",
"description": "Specify the toggle size",
"type": "\"default\" | \"sm\"",
"value": "\"default\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "labelText",
"kind": "let",
"description": "Specify the label text",
"type": "string",
"value": "\"\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "id",
"kind": "let",
"description": "Set an id for the input element",
"type": "string",
"value": "\"ccs-\" + Math.random().toString(36)",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
}
],
"moduleExports": [],
"slots": [
{
"name": "labelText",
"default": false,
"fallback": "{labelText}",
"slot_props": "{}"
}
],
"events": [
{ "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "mouseover", "element": "div" },
{ "type": "forwarded", "name": "mouseenter", "element": "div" },
{ "type": "forwarded", "name": "mouseleave", "element": "div" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "div" }
},
{ {
"moduleName": "Toolbar", "moduleName": "Toolbar",
"filePath": "src/DataTable/Toolbar.svelte", "filePath": "src/DataTable/Toolbar.svelte",
@ -14595,8 +14510,8 @@
"name": "size", "name": "size",
"kind": "let", "kind": "let",
"description": "Specify the TreeView size", "description": "Specify the TreeView size",
"type": "\"default\" | \"compact\"", "type": "\"xs\" | \"sm\"",
"value": "\"default\"", "value": "\"sm\"",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,

18
docs/src/components/ComponentApi.svelte
View file

@ -39,7 +39,7 @@
); );
</script> </script>
<p style="margin-bottom: var(--cds-layout-02)"> <p style="margin-bottom: var(--bx-spacing-06)">
Source code: Source code:
<OutboundLink size="lg" inline href="{source}"> <OutboundLink size="lg" inline href="{source}">
{component.filePath} {component.filePath}
@ -68,7 +68,7 @@
<InlineSnippet code="{prop.name}" /> <InlineSnippet code="{prop.name}" />
{#if prop.reactive} {#if prop.reactive}
<div <div
style="white-space: nowrap; margin-top: var(--cds-spacing-03); margin-bottom: var(--cds-spacing-{prop.isRequired style="white-space: nowrap; margin-top: var(--bx-spacing-03); margin-bottom: var(--bx-spacing-{prop.isRequired
? '01' ? '01'
: '03'})" : '03'})"
> >
@ -134,7 +134,7 @@
{#if component.typedefs.length > 0} {#if component.typedefs.length > 0}
<CodeSnippet <CodeSnippet
style="margin-top: var(--cds-spacing-08)" style="margin-top: var(--bx-spacing-08)"
class="my-layout-01-03" class="my-layout-01-03"
type="multi" type="multi"
code="{component.typedefs.map((t) => t.ts).join(';\n\n')};" code="{component.typedefs.map((t) => t.ts).join(';\n\n')};"
@ -216,14 +216,14 @@
<style> <style>
.description { .description {
margin-bottom: var(--cds-spacing-04); margin-bottom: var(--bx-spacing-04);
} }
.cell { .cell {
position: relative; position: relative;
z-index: 9; z-index: 9;
min-height: 1.25rem; min-height: 1.25rem;
margin-bottom: var(--cds-spacing-02); margin-bottom: var(--bx-spacing-02);
} }
.overflow { .overflow {
@ -231,13 +231,13 @@
} }
:global(.my-layout-01-03) { :global(.my-layout-01-03) {
margin-top: var(--cds-layout-01); margin-top: var(--bx-spacing-05);
margin-bottom: var(--cds-layout-03); margin-bottom: var(--bx-spacing-07);
} }
:global(.overflow .bx--structured-list) { :global(.overflow .bx--structured-list) {
margin-top: var(--cds-layout-01); margin-top: var(--bx-spacing-05);
margin-bottom: var(--cds-layout-04); margin-bottom: var(--bx-spacing-09);
} }
code { code {

2
docs/src/components/InlineSnippet.svelte
View file

@ -11,6 +11,6 @@
<style> <style>
div { div {
margin-bottom: var(--cds-spacing-03); margin-bottom: var(--bx-spacing-03);
} }
</style> </style>

12
docs/src/components/Preview.svelte
View file

@ -16,9 +16,7 @@
<div class="preview"> <div class="preview">
{#if framed} {#if framed}
<div class="framed-header"> <div class="framed-header">
<div <div style="margin-left: var(--bx-spacing-05); color: var(--bx-text-02)">
style="margin-left: var(--cds-spacing-05); color: var(--cds-text-02)"
>
Content loaded in an iframe Content loaded in an iframe
</div> </div>
<Button <Button
@ -33,7 +31,7 @@
</Button> </Button>
</div> </div>
{/if} {/if}
<div class="preview-viewer" class:framed> <div class="preview-viewer" class:framed="{framed}">
{#if framed} {#if framed}
<iframe title="{src.split('/').pop()}" src="{themedSrcUrl}"></iframe> <iframe title="{src.split('/').pop()}" src="{themedSrcUrl}"></iframe>
{:else} {:else}
@ -49,7 +47,7 @@
<style> <style>
.preview { .preview {
margin-bottom: var(--cds-layout-04); margin-bottom: var(--bx-spacing-09);
margin-left: -1rem; margin-left: -1rem;
margin-right: -1rem; margin-right: -1rem;
max-width: 66rem; max-width: 66rem;
@ -60,14 +58,14 @@
} }
.preview-viewer { .preview-viewer {
border: 1px solid var(--cds-ui-03); border: 1px solid var(--bx-ui-03);
border-bottom: 0; border-bottom: 0;
position: relative; position: relative;
z-index: 9999; z-index: 9999;
} }
.preview-viewer:not(.framed) { .preview-viewer:not(.framed) {
padding: var(--cds-spacing-06) var(--cds-spacing-05); padding: var(--bx-spacing-06) var(--bx-spacing-05);
} }
.preview-viewer.framed { .preview-viewer.framed {

24
docs/src/components/TileCard.svelte
View file

@ -12,13 +12,17 @@
$: tileComponent = href ? ClickableTile : Tile; $: tileComponent = href ? ClickableTile : Tile;
</script> </script>
<div class="card-wrapper" class:borderRight class:borderBottom> <div
class="card-wrapper"
class:borderRight="{borderRight}"
class:borderBottom="{borderBottom}"
>
<AspectRatio> <AspectRatio>
<svelte:component <svelte:component
this="{tileComponent}" this="{tileComponent}"
href="{href}" href="{href}"
{...$$restProps} {...$$restProps}
style="height: 100%;" style="height: 100%; width: 100%; position: absolute;"
> >
<div class="card"> <div class="card">
<div> <div>
@ -31,9 +35,9 @@
<svelte:component <svelte:component
this="{LogoGithub}" this="{LogoGithub}"
size="{32}" size="{32}"
style="fill: var(--cds-icon-01)" style="fill: var(--bx-icon-01)"
/> />
<Launch size="{20}" style="fill: var(--cds-icon-01)" /> <Launch size="{20}" style="fill: var(--bx-icon-01)" />
</div> </div>
</div> </div>
</svelte:component> </svelte:component>
@ -47,11 +51,11 @@
} }
.borderRight { .borderRight {
border-right: 1px solid var(--cds-ui-03); border-right: 1px solid var(--bx-ui-03);
} }
.borderBottom { .borderBottom {
border-bottom: 1px solid var(--cds-ui-03); border-bottom: 1px solid var(--bx-ui-03);
} }
.card { .card {
@ -68,19 +72,19 @@
} }
.title { .title {
margin-top: calc(-1 * var(--cds-spacing-02)); margin-top: calc(-1 * var(--bx-spacing-02));
margin-bottom: var(--cds-spacing-01); margin-bottom: var(--bx-spacing-01);
} }
.subtitle { .subtitle {
color: var(--cds-text-02); color: var(--bx-text-02);
} }
@media (max-width: 671px) { @media (max-width: 671px) {
.card-wrapper, .card-wrapper,
.borderRight { .borderRight {
border-right: 0; border-right: 0;
border-bottom: 1px solid var(--cds-ui-03); border-bottom: 1px solid var(--bx-ui-03);
} }
} }
</style> </style>

108
docs/src/global.css
View file

@ -1,5 +1,5 @@
html[theme="g90"] .code-override { html[theme="g90"] .code-override {
border: 1px solid var(--cds-ui-03); border: 1px solid var(--bx-border-subtle-01);
} }
.code-override .bx--snippet { .code-override .bx--snippet {
@ -23,9 +23,9 @@ html[theme="g90"] .code-override {
} }
.code-override .bx--snippet-container pre { .code-override .bx--snippet-container pre {
font-size: var(--cds-code-02-font-size); font-size: var(--bx-code-02-font-size);
line-height: var(--cds-code-02-line-height); line-height: var(--bx-code-02-line-height);
letter-spacing: var(--cds-code-02-letter-spacing); letter-spacing: var(--bx-code-02-letter-spacing);
cursor: text; cursor: text;
} }
@ -118,7 +118,7 @@ html[theme="g90"] .code-override {
} }
.prose .toc { .prose .toc {
margin-bottom: var(--cds-layout-01); margin-bottom: var(--bx-spacing-05);
} }
.table { .table {
@ -126,9 +126,9 @@ html[theme="g90"] .code-override {
max-height: calc(100vh - 3rem); max-height: calc(100vh - 3rem);
top: 3rem; top: 3rem;
margin-top: -3rem; margin-top: -3rem;
padding-top: var(--cds-spacing-05); padding-top: var(--bx-spacing-05);
padding-bottom: var(--cds-spacing-05); padding-bottom: var(--bx-spacing-05);
padding-left: var(--cds-spacing-08); padding-left: var(--bx-spacing-08);
overflow-y: auto; overflow-y: auto;
} }
@ -149,7 +149,7 @@ html[theme="g90"] .code-override {
.preview-viewer > .bx--aspect-ratio, .preview-viewer > .bx--aspect-ratio,
.preview-viewer [data-outline] { .preview-viewer [data-outline] {
outline: 1px solid var(--cds-interactive-04); outline: 1px solid var(--bx-interactive);
} }
[data-outline] { [data-outline] {
@ -157,7 +157,7 @@ html[theme="g90"] .code-override {
} }
[data-outline] ~ [data-outline] { [data-outline] ~ [data-outline] {
margin-top: var(--cds-spacing-08); margin-top: var(--bx-spacing-08);
} }
#select-theme { #select-theme {
@ -169,46 +169,46 @@ html[theme="g90"] .code-override {
} }
.prose .toc { .prose .toc {
margin-bottom: var(--cds-layout-01); margin-bottom: var(--bx-spacing-05);
} }
.code-01 { .code-01 {
font-size: var(--cds-code-01-font-size); font-size: var(--bx-code-01-font-size);
font-weight: var(--cds-code-01-font-weight); font-weight: var(--bx-code-01-font-weight);
letter-spacing: var(--cds-code-01-letter-spacing); letter-spacing: var(--bx-code-01-letter-spacing);
line-height: var(--cds-code-01-line-height); line-height: var(--bx-code-01-line-height);
} }
.body-short-01 { .body-compact-01 {
font-size: var(--cds-body-short-01-font-size); font-size: var(--bx-body-compact-01-font-size);
font-weight: var(--cds-body-short-01-font-weight); font-weight: var(--bx-body-compact-01-font-weight);
letter-spacing: var(--cds-body-short-01-letter-spacing); letter-spacing: var(--bx-body-compact-01-letter-spacing);
line-height: var(--cds-body-short-01-line-height); line-height: var(--bx-body-compact-01-line-height);
} }
.bx--col > h1 { .bx--col > h1 {
font-size: var(--cds-expressive-heading-05-font-size); font-size: var(--bx-fluid-heading-05-font-size);
font-weight: var(--cds-expressive-heading-05-font-weight); font-weight: var(--bx-fluid-heading-05-font-weight);
letter-spacing: var(--cds-expressive-heading-05-letter-spacing); letter-spacing: var(--bx-fluid-heading-05-letter-spacing);
line-height: var(--cds-expressive-heading-05-line-height); line-height: var(--bx-fluid-heading-05-line-height);
margin-bottom: var(--cds-layout-01); margin-bottom: var(--bx-spacing-05);
} }
.big-paragraph { .big-paragraph {
font-size: var(--cds-expressive-heading-03-font-size); font-size: var(--bx-fluid-heading-03-font-size);
font-weight: var(--cds-expressive-heading-03-font-weight); font-weight: var(--bx-fluid-heading-03-font-weight);
letter-spacing: var(--cds-expressive-heading-03-letter-spacing); letter-spacing: var(--bx-fluid-heading-03-letter-spacing);
line-height: var(--cds-expressive-heading-03-line-height); line-height: var(--bx-fluid-heading-03-line-height);
margin-top: var(--cds-layout-03); margin-top: var(--bx-spacing-07);
margin-bottom: var(--cds-layout-06); margin-bottom: var(--bx-spacing-12);
} }
.big-link, .big-link,
.bx--col > .big-paragraph > code { .bx--col > .big-paragraph > code {
font-size: var(--cds-expressive-heading-03-font-size); font-size: var(--bx-fluid-heading-03-font-size);
font-weight: var(--cds-expressive-heading-03-font-weight); font-weight: var(--bx-fluid-heading-03-font-weight);
letter-spacing: var(--cds-expressive-heading-03-letter-spacing); letter-spacing: var(--bx-fluid-heading-03-letter-spacing);
line-height: var(--cds-expressive-heading-03-line-height); line-height: var(--bx-fluid-heading-03-line-height);
} }
.bx--col > p { .bx--col > p {
@ -216,32 +216,32 @@ html[theme="g90"] .code-override {
} }
.bx--col > p > code { .bx--col > p > code {
font-size: var(--cds-code-02-font-size); font-size: var(--bx-code-02-font-size);
font-weight: var(--cds-code-02-font-weight); font-weight: var(--bx-code-02-font-weight);
line-height: var(--cds-code-02-line-height); line-height: var(--bx-code-02-line-height);
letter-spacing: var(--cds-code-02-letter-spacing); letter-spacing: var(--bx-code-02-letter-spacing);
background-color: var(--cds-ui-03); background-color: var(--bx-layer-accent-01);
border-radius: 0.25rem; border-radius: 0.25rem;
padding: 0 var(--cds-spacing-02); padding: 0 var(--bx-spacing-02);
} }
[class*="bx--col"] > h2, [class*="bx--col"] > h2,
.bx--tab-content > h2 { .bx--tab-content > h2 {
font-size: var(--cds-expressive-heading-04-font-size); font-size: var(--bx-fluid-heading-04-font-size);
font-weight: var(--cds-expressive-heading-04-font-weight); font-weight: var(--bx-fluid-heading-04-font-weight);
letter-spacing: var(--cds-expressive-heading-04-letter-spacing); letter-spacing: var(--bx-fluid-heading-04-letter-spacing);
line-height: var(--cds-expressive-heading-04-line-height); line-height: var(--bx-fluid-heading-04-line-height);
padding-top: var(--cds-layout-03); padding-top: var(--bx-spacing-07);
margin-bottom: var(--cds-layout-01); margin-bottom: var(--bx-spacing-05);
} }
.bx--col > h4 { .bx--col > h4 {
font-size: var(--cds-expressive-heading-02-font-size); font-size: var(--bx-fluid-heading-02-font-size);
font-weight: var(--cds-expressive-heading-02-font-weight); font-weight: var(--bx-fluid-heading-02-font-weight);
letter-spacing: var(--cds-expressive-heading-02-letter-spacing); letter-spacing: var(--bx-fluid-heading-02-letter-spacing);
line-height: var(--cds-expressive-heading-02-line-height); line-height: var(--bx-fluid-heading-02-line-height);
padding-top: var(--cds-layout-04); padding-top: var(--bx-spacing-09);
margin-bottom: var(--cds-layout-01); margin-bottom: var(--bx-spacing-05);
} }
.bx--col > h2, .bx--col > h2,
@ -252,5 +252,5 @@ html[theme="g90"] .code-override {
} }
.bx--col > p { .bx--col > p {
margin-bottom: var(--cds-layout-02); margin-bottom: var(--bx-spacing-06);
} }

2
docs/src/index.js
View file

@ -1,5 +1,5 @@
import App from "./App.svelte"; import App from "./App.svelte";
import "../../css/all.css"; import "carbon-components-svelte/css/all.css";
import "./global.css"; import "./global.css";
const app = new App({ target: document.body }); const app = new App({ target: document.body });

15
docs/src/layouts/ComponentLayout.svelte
View file

@ -37,7 +37,7 @@
const searchParams = new URLSearchParams(window.location.search); const searchParams = new URLSearchParams(window.location.search);
const current_theme = searchParams.get("theme"); const current_theme = searchParams.get("theme");
if (["white", "g10", "g80", "g90", "g100"].includes(current_theme)) { if (["white", "g10", "g90", "g100"].includes(current_theme)) {
theme.set(current_theme); theme.set(current_theme);
} }
}); });
@ -87,7 +87,6 @@
> >
<SelectItem value="white" text="White" /> <SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" /> <SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" /> <SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" /> <SelectItem value="g100" text="Gray 100" />
</Select> </Select>
@ -150,7 +149,7 @@
{#each api_components as component (component.moduleName)} {#each api_components as component (component.moduleName)}
<Tab label="{component.moduleName}" /> <Tab label="{component.moduleName}" />
{/each} {/each}
<div slot="content" style="padding-top: var(--cds-spacing-06)"> <div slot="content" style="padding-top: var(--bx-spacing-06)">
{#each api_components as component (component.moduleName)} {#each api_components as component (component.moduleName)}
<TabContent> <TabContent>
<ComponentApi component="{component}" /> <ComponentApi component="{component}" />
@ -177,13 +176,13 @@
.bar { .bar {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: var(--cds-layout-02); margin-bottom: var(--bx-spacing-06);
border-bottom: 1px solid var(--cds-ui-03); border-bottom: 1px solid var(--bx-ui-03);
} }
:global(.toc h5) { :global(.toc h5) {
margin-top: var(--cds-spacing-06); margin-top: var(--bx-spacing-06);
margin-bottom: var(--cds-spacing-03); margin-bottom: var(--bx-spacing-03);
} }
.toc.mobile { .toc.mobile {
@ -193,7 +192,7 @@
@media (max-width: 1056px) { @media (max-width: 1056px) {
.toc.mobile { .toc.mobile {
display: block; display: block;
margin-bottom: var(--cds-spacing-09); margin-bottom: var(--bx-spacing-09);
} }
} }
</style> </style>

4
docs/src/pages/components/Accordion.svx
View file

@ -88,9 +88,9 @@ This example demonstrates how a list of items can be programmatically expanded a
<FileSource src="/framed/Accordion/ExpandableAccordion" /> <FileSource src="/framed/Accordion/ExpandableAccordion" />
## Extra-large size ## Large size
<Accordion size="xl"> <Accordion size="lg">
<AccordionItem title="Natural Language Classifier"> <AccordionItem title="Natural Language Classifier">
<p>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. <p>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.
</p> </p>

2
docs/src/pages/components/Breakpoint.svx
View file

@ -8,7 +8,7 @@
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)"> <UnorderedList svx-ignore style="margin-bottom: var(--bx-spacing-08)">
<ListItem><strong>Small</strong>: less than 672px</ListItem> <ListItem><strong>Small</strong>: less than 672px</ListItem>
<ListItem><strong>Medium</strong>: 672 - 1056px</ListItem> <ListItem><strong>Medium</strong>: 672 - 1056px</ListItem>
<ListItem><strong>Large</strong>: 1056 - 1312px</ListItem> <ListItem><strong>Large</strong>: 1056 - 1312px</ListItem>

42
docs/src/pages/components/Button.svx
View file

@ -30,7 +30,7 @@
## Danger tertiary button ## Danger tertiary button
<Button kind="danger-tertiary">Danger tertiary button</Button> <Button kind="danger--tertiary">Danger tertiary button</Button>
## Danger tertiary, icon-only button ## Danger tertiary, icon-only button
@ -40,11 +40,11 @@
</div> </div>
</InlineNotification> </InlineNotification>
<Button kind="danger-tertiary"iconDescription="Delete" icon={TrashCan} /> <Button kind="danger--tertiary"iconDescription="Delete" icon={TrashCan} />
## Danger ghost button ## Danger ghost button
<Button kind="danger-ghost">Danger ghost button</Button> <Button kind="danger--ghost">Danger ghost button</Button>
## Button with icon ## Button with icon
@ -98,36 +98,36 @@ If you need to render a different element, set `as` to `true` and spread `let:pr
## Field size ## Field size
<Button size="field">Primary</Button> <Button size="md">Primary</Button>
<Button size="field" kind="secondary">Secondary</Button> <Button size="md" kind="secondary">Secondary</Button>
<Button size="field" kind="tertiary">Tertiary</Button> <Button size="md" kind="tertiary">Tertiary</Button>
<Button size="field" kind="ghost">Ghost</Button> <Button size="md" kind="ghost">Ghost</Button>
<Button size="field" kind="danger">Danger</Button> <Button size="md" kind="danger">Danger</Button>
## Small size ## Small size
<Button size="small">Primary</Button> <Button size="sm">Primary</Button>
<Button size="small" kind="secondary">Secondary</Button> <Button size="sm" kind="secondary">Secondary</Button>
<Button size="small" kind="tertiary">Tertiary</Button> <Button size="sm" kind="tertiary">Tertiary</Button>
<Button size="small" kind="ghost">Ghost</Button> <Button size="sm" kind="ghost">Ghost</Button>
<Button size="small" kind="danger">Danger</Button> <Button size="sm" kind="danger">Danger</Button>
## Large size ## Large size
<Button size="lg">Primary</Button>
<Button size="lg" kind="secondary">Secondary</Button>
<Button size="lg" kind="tertiary">Tertiary</Button>
<Button size="lg" kind="ghost">Ghost</Button>
<Button size="lg" kind="danger">Danger</Button>
## Extra-large size
<Button size="xl">Primary</Button> <Button size="xl">Primary</Button>
<Button size="xl" kind="secondary">Secondary</Button> <Button size="xl" kind="secondary">Secondary</Button>
<Button size="xl" kind="tertiary">Tertiary</Button> <Button size="xl" kind="tertiary">Tertiary</Button>
<Button size="xl" kind="ghost">Ghost</Button> <Button size="xl" kind="ghost">Ghost</Button>
<Button size="xl" kind="danger">Danger</Button> <Button size="xl" kind="danger">Danger</Button>
## Extra-large size
<Button size="2xl">Primary</Button>
<Button size="2xl" kind="secondary">Secondary</Button>
<Button size="2xl" kind="tertiary">Tertiary</Button>
<Button size="2xl" kind="ghost">Ghost</Button>
<Button size="2xl" kind="danger">Danger</Button>
## Disabled state ## Disabled state
<Button disabled>Disabled button</Button> <Button disabled>Disabled button</Button>

4
docs/src/pages/components/ComboBox.svx
View file

@ -80,10 +80,10 @@ items={[
{id: "2", text: "Fax"} {id: "2", text: "Fax"}
]} /> ]} />
## Extra-large size ## Large size
<ComboBox titleText="Contact" placeholder="Select contact method" <ComboBox titleText="Contact" placeholder="Select contact method"
size="xl" size="lg"
items={[ items={[
{id: "0", text: "Slack"}, {id: "0", text: "Slack"},
{id: "1", text: "Email"}, {id: "1", text: "Email"},

4
docs/src/pages/components/ContentSwitcher.svx
View file

@ -43,9 +43,9 @@ components: ["ContentSwitcher", "Switch"]
</Switch> </Switch>
</ContentSwitcher> </ContentSwitcher>
## Extra-large size ## Large size
<ContentSwitcher size="xl"> <ContentSwitcher size="lg">
<Switch text="All" /> <Switch text="All" />
<Switch text="Archived" /> <Switch text="Archived" />
</ContentSwitcher> </ContentSwitcher>

4
docs/src/pages/components/DatePicker.svx
View file

@ -63,10 +63,10 @@ By default, the "simple" date picker does not have a dropdown calendar.
<DatePickerInput labelText="Date of birth" placeholder="mm/dd/yyyy" /> <DatePickerInput labelText="Date of birth" placeholder="mm/dd/yyyy" />
</DatePicker> </DatePicker>
## Extra-large size ## Large size
<DatePicker> <DatePicker>
<DatePickerInput size="xl" labelText="Date of birth" placeholder="mm/dd/yyyy" /> <DatePickerInput size="lg" labelText="Date of birth" placeholder="mm/dd/yyyy" />
</DatePicker> </DatePicker>
## Small size ## Small size

4
docs/src/pages/components/Dropdown.svx
View file

@ -65,9 +65,9 @@ Set `direction` to `"top"` for the dropdown menu to appear above the input.
{id: "1", text: "Email"}, {id: "1", text: "Email"},
{id: "2", text: "Fax"}]}" /> {id: "2", text: "Fax"}]}" />
## Extra-large size ## Large size
<Dropdown size="xl" titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"}, <Dropdown size="lg" titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"}, {id: "1", text: "Email"},
{id: "2", text: "Fax"}]}" /> {id: "2", text: "Fax"}]}" />

2
docs/src/pages/components/ExpandableTile.svx
View file

@ -58,7 +58,7 @@ Set a custom height for the tiles on the "above" and "below" slots.
For tiles containing interactive content, use `stopPropagation` to prevent the tile from toggling. For tiles containing interactive content, use `stopPropagation` to prevent the tile from toggling.
<ExpandableTile tileExpandedLabel="View less" tileCollapsedLabel="View more"> <ExpandableTile tileExpandedLabel="View less" tileCollapsedLabel="View more">
<div slot="above"> <div slot="above" height="10rem">
<a href="/" on:click|preventDefault|stopPropagation={() => console.log("Hello world")}> <a href="/" on:click|preventDefault|stopPropagation={() => console.log("Hello world")}>
Native element Native element
</a> </a>

10
docs/src/pages/components/FileUploader.svx
View file

@ -44,7 +44,7 @@ See the [item examples below](#item-uploading) for different statuses.
There are two ways to clear files in `FileUploader`: There are two ways to clear files in `FileUploader`:
<UnorderedList svx-ignore style="margin-bottom: var(--cds-spacing-08)"> <UnorderedList svx-ignore style="margin-bottom: var(--bx-spacing-08)">
<ListItem>programmatically using the <strong>clearFiles</strong> accessor</ListItem> <ListItem>programmatically using the <strong>clearFiles</strong> accessor</ListItem>
<ListItem>two-way binding by setting <strong>files</strong> to <strong>[]</strong></ListItem> <ListItem>two-way binding by setting <strong>files</strong> to <strong>[]</strong></ListItem>
</UnorderedList> </UnorderedList>
@ -95,11 +95,11 @@ Use the `errorSubject` and `errorBody` props to customize the error message.
## Item sizes ## Item sizes
The default `FileUploaderItem` size is "default". The default `FileUploaderItem` size is "lg".
<FileUploaderItem size="default" name="README.md" status="uploading" /> <FileUploaderItem size="lg" name="README.md" status="uploading" />
<FileUploaderItem size="field" name="README.md" status="uploading" /> <FileUploaderItem size="md" name="README.md" status="uploading" />
<FileUploaderItem size="small" name="README.md" status="uploading" /> <FileUploaderItem size="sm" name="README.md" status="uploading" />
## Drop container ## Drop container

4
docs/src/pages/components/MultiSelect.svx
View file

@ -140,9 +140,9 @@ Set `direction` to `"top"` for the dropdown menu to appear above the input.
{id: "2", text: "Fax"}]}" {id: "2", text: "Fax"}]}"
/> />
## Extra-large size ## Large size
<MultiSelect size="xl" titleText="Contact" label="Select contact methods..." <MultiSelect size="lg" titleText="Contact" label="Select contact methods..."
items="{[{id: "0", text: "Slack"}, items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"}, {id: "1", text: "Email"},
{id: "2", text: "Fax"}]}" {id: "2", text: "Fax"}]}"

4
docs/src/pages/components/NumberInput.svx
View file

@ -51,9 +51,9 @@ Set `value` to `null` to denote "no value."
<NumberInput readonly label="Clusters" value={0} /> <NumberInput readonly label="Clusters" value={0} />
## Extra-large size ## Large size
<NumberInput size="xl" label="Clusters" value={0} /> <NumberInput size="lg" label="Clusters" value={0} />
## Small size ## Small size

2
docs/src/pages/components/OverflowMenu.svx
View file

@ -42,7 +42,7 @@ Set `flipped` to `true` for the menu to be positioned to the left of the button.
<OverflowMenuItem danger text="Delete service" /> <OverflowMenuItem danger text="Delete service" />
</OverflowMenu> </OverflowMenu>
## Extra-large size ## Large size
<OverflowMenu size="xl"> <OverflowMenu size="xl">
<OverflowMenuItem text="Manage credentials" /> <OverflowMenuItem text="Manage credentials" />

4
docs/src/pages/components/PasswordInput.svx
View file

@ -31,9 +31,9 @@ Set prop `type` to `"text"` to toggle password visibility.
<PasswordInput inline labelText="Password" placeholder="Enter password..." /> <PasswordInput inline labelText="Password" placeholder="Enter password..." />
## Extra-large size ## Large size
<PasswordInput size="xl" labelText="Password" placeholder="Enter password..." /> <PasswordInput size="lg" labelText="Password" placeholder="Enter password..." />
## Small size ## Small size

44
docs/src/pages/components/Popover.svx
View file

@ -1,5 +1,9 @@
---
components: ["Popover", "PopoverContent"]
---
<script> <script>
import { Popover } from "carbon-components-svelte"; import { Popover, PopoverContent } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
@ -8,9 +12,9 @@
By default, the position of the popover component is absolute. By default, the position of the popover component is absolute.
<div data-outline> <div data-outline>
Parent
<Popover open> <Popover open>
<div style="padding: var(--cds-spacing-05)">Content</div> Parent
<PopoverContent style="padding: var(--bx-spacing-05)">Content</PopoverContent>
</Popover> </Popover>
</div> </div>
@ -21,7 +25,7 @@ Set `relative` to `true` to use a relative position.
<div data-outline> <div data-outline>
Parent Parent
<Popover relative open> <Popover relative open>
<div style="padding: var(--cds-spacing-05)">Content</div> <div style="padding: var(--bx-spacing-05)">Content</div>
</Popover> </Popover>
</div> </div>
@ -32,7 +36,7 @@ Set `closeOnOutsideClick` to set `open` to `false` when clicking outside of the
<div data-outline> <div data-outline>
Parent Parent
<Popover open closeOnOutsideClick on:click:outside={() => {console.log('on:click:outside')}}> <Popover open closeOnOutsideClick on:click:outside={() => {console.log('on:click:outside')}}>
<div style="padding: var(--cds-spacing-05)">Content</div> <div style="padding: var(--bx-spacing-05)">Content</div>
</Popover> </Popover>
</div> </div>
@ -45,67 +49,67 @@ The default `align` value is `"top"`.
<div data-outline> <div data-outline>
Parent Parent
<Popover open align="top-left"> <Popover open align="top-left">
<div style="padding: var(--cds-spacing-05)">top-left</div> <div style="padding: var(--bx-spacing-05)">top-left</div>
</Popover> </Popover>
</div> </div>
<div data-outline> <div data-outline>
Parent Parent
<Popover open align="top-right"> <Popover open align="top-right">
<div style="padding: var(--cds-spacing-05)">top-right</div> <div style="padding: var(--bx-spacing-05)">top-right</div>
</Popover> </Popover>
</div> </div>
<div data-outline> <div data-outline>
Parent Parent
<Popover open align="bottom"> <Popover open align="bottom">
<div style="padding: var(--cds-spacing-05)">bottom</div> <div style="padding: var(--bx-spacing-05)">bottom</div>
</Popover> </Popover>
</div> </div>
<div data-outline> <div data-outline>
Parent Parent
<Popover open align="bottom-left"> <Popover open align="bottom-left">
<div style="padding: var(--cds-spacing-05)">bottom-left</div> <div style="padding: var(--bx-spacing-05)">bottom-left</div>
</Popover> </Popover>
</div> </div>
<div data-outline> <div data-outline>
Parent Parent
<Popover open align="bottom-right"> <Popover open align="bottom-right">
<div style="padding: var(--cds-spacing-05)">bottom-right</div> <div style="padding: var(--bx-spacing-05)">bottom-right</div>
</Popover> </Popover>
</div> </div>
<div data-outline> <div data-outline>
Parent Parent
<Popover open align="left"> <Popover open align="left">
<div style="padding: var(--cds-spacing-05)">left</div> <div style="padding: var(--bx-spacing-05)">left</div>
</Popover> </Popover>
</div> </div>
<div data-outline> <div data-outline>
Parent Parent
<Popover open align="left-bottom"> <Popover open align="left-bottom">
<div style="padding: var(--cds-spacing-05)">left-bottom</div> <div style="padding: var(--bx-spacing-05)">left-bottom</div>
</Popover> </Popover>
</div> </div>
<div data-outline> <div data-outline>
Parent Parent
<Popover open align="left-right"> <Popover open align="left-right">
<div style="padding: var(--cds-spacing-05)">left-right</div> <div style="padding: var(--bx-spacing-05)">left-right</div>
</Popover> </Popover>
</div> </div>
<div data-outline> <div data-outline>
Parent Parent
<Popover open align="right"> <Popover open align="right">
<div style="padding: var(--cds-spacing-05)">right</div> <div style="padding: var(--bx-spacing-05)">right</div>
</Popover> </Popover>
</div> </div>
<div data-outline> <div data-outline>
Parent Parent
<Popover open align="right-bottom"> <Popover open align="right-bottom">
<div style="padding: var(--cds-spacing-05)">right-bottom</div> <div style="padding: var(--bx-spacing-05)">right-bottom</div>
</Popover> </Popover>
</div> </div>
<div data-outline> <div data-outline>
Parent Parent
<Popover open align="right-top"> <Popover open align="right-top">
<div style="padding: var(--cds-spacing-05)">right-top</div> <div style="padding: var(--bx-spacing-05)">right-top</div>
</Popover> </Popover>
</div> </div>
@ -114,7 +118,7 @@ The default `align` value is `"top"`.
<div data-outline> <div data-outline>
Parent Parent
<Popover caret open> <Popover caret open>
<div style="padding: var(--cds-spacing-05)">Content</div> <div style="padding: var(--bx-spacing-05)">Content</div>
</Popover> </Popover>
</div> </div>
@ -127,7 +131,7 @@ Possible `align` values include `"top"`, `"top-left"`, `"top-right"`, `"bottom"`
<div data-outline> <div data-outline>
Parent Parent
<Popover caret align="top-left" open> <Popover caret align="top-left" open>
<div style="padding: var(--cds-spacing-05)">Content</div> <div style="padding: var(--bx-spacing-05)">Content</div>
</Popover> </Popover>
</div> </div>
@ -136,7 +140,7 @@ Possible `align` values include `"top"`, `"top-left"`, `"top-right"`, `"bottom"`
<div data-outline> <div data-outline>
Parent Parent
<Popover light open> <Popover light open>
<div style="padding: var(--cds-spacing-05)">Content</div> <div style="padding: var(--bx-spacing-05)">Content</div>
</Popover> </Popover>
</div> </div>
@ -145,7 +149,7 @@ Possible `align` values include `"top"`, `"top-left"`, `"top-right"`, `"bottom"`
<div data-outline> <div data-outline>
Parent Parent
<Popover highContrast open> <Popover highContrast open>
<div style="padding: var(--cds-spacing-05)">Content</div> <div style="padding: var(--bx-spacing-05)">Content</div>
</Popover> </Popover>
</div> </div>

2
docs/src/pages/components/Search.svx
View file

@ -6,7 +6,7 @@
## Default ## Default
The `Search` component size is extra-large by default. There are [large](#large-size) and [small](#small-size) size variants. The `Search` component size is medium by default. There are [large](#large-size) and [small](#small-size) size variants.
<Search /> <Search />

19
docs/src/pages/components/Select.svx
View file

@ -14,7 +14,6 @@ If the `selected` prop is not set, the value of the first `SelectItem` will be u
<Select labelText="Carbon theme" on:change={e => console.log("value", e.target.value)}> <Select labelText="Carbon theme" on:change={e => console.log("value", e.target.value)}>
<SelectItem value="white" /> <SelectItem value="white" />
<SelectItem value="g10" /> <SelectItem value="g10" />
<SelectItem value="g80" />
<SelectItem value="g90" /> <SelectItem value="g90" />
<SelectItem value="g100" /> <SelectItem value="g100" />
</Select> </Select>
@ -26,7 +25,6 @@ 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.target.value)}>
<SelectItem value="white" text="White" /> <SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" /> <SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" /> <SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" /> <SelectItem value="g100" text="Gray 100" />
</Select> </Select>
@ -38,7 +36,6 @@ 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.target.value)}>
<SelectItem value="white" text="White" /> <SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" /> <SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" /> <SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" /> <SelectItem value="g100" text="Gray 100" />
</Select> </Select>
@ -51,10 +48,9 @@ The `selected` prop is reactive and supports two-way binding.
## Helper text ## Helper text
<Select helperText="Carbon offers 4 themes (2 light, 3 dark)" labelText="Carbon theme" selected="g10" > <Select helperText="Carbon offers 4 themes (2 light, 2 dark)" labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" /> <SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" /> <SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" /> <SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" /> <SelectItem value="g100" text="Gray 100" />
</Select> </Select>
@ -64,7 +60,6 @@ The `selected` prop is reactive and supports two-way binding.
<Select hideLabel labelText="Carbon theme" selected="g10" > <Select hideLabel labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" /> <SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" /> <SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" /> <SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" /> <SelectItem value="g100" text="Gray 100" />
</Select> </Select>
@ -78,7 +73,6 @@ The `selected` prop is reactive and supports two-way binding.
<SelectItem value="g10" text="Gray 10" /> <SelectItem value="g10" text="Gray 10" />
</SelectItemGroup> </SelectItemGroup>
<SelectItemGroup label="Dark theme"> <SelectItemGroup label="Dark theme">
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" /> <SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" /> <SelectItem value="g100" text="Gray 100" />
</SelectItemGroup> </SelectItemGroup>
@ -89,7 +83,6 @@ The `selected` prop is reactive and supports two-way binding.
<Select light labelText="Carbon theme" selected="g10" > <Select light labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" /> <SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" /> <SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" /> <SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" /> <SelectItem value="g100" text="Gray 100" />
</Select> </Select>
@ -99,17 +92,15 @@ The `selected` prop is reactive and supports two-way binding.
<Select inline labelText="Carbon theme" selected="g10" > <Select inline labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" /> <SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" /> <SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" /> <SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" /> <SelectItem value="g100" text="Gray 100" />
</Select> </Select>
## Extra-large size ## Large size
<Select size="xl" labelText="Carbon theme" selected="g10" > <Select size="lg" labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" /> <SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" /> <SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" /> <SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" /> <SelectItem value="g100" text="Gray 100" />
</Select> </Select>
@ -119,7 +110,6 @@ The `selected` prop is reactive and supports two-way binding.
<Select size="sm" labelText="Carbon theme" selected="g10" > <Select size="sm" labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" /> <SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" /> <SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" /> <SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" /> <SelectItem value="g100" text="Gray 100" />
</Select> </Select>
@ -129,7 +119,6 @@ The `selected` prop is reactive and supports two-way binding.
<Select invalid invalidText="Theme must be a dark variant" labelText="Carbon theme" selected="g10" > <Select invalid invalidText="Theme must be a dark variant" labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" /> <SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" /> <SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" /> <SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" /> <SelectItem value="g100" text="Gray 100" />
</Select> </Select>
@ -139,7 +128,6 @@ The `selected` prop is reactive and supports two-way binding.
<Select warn warnText="The selected theme will not be persisted" labelText="Carbon theme" selected="g10" > <Select warn warnText="The selected theme will not be persisted" labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" /> <SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" /> <SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" /> <SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" /> <SelectItem value="g100" text="Gray 100" />
</Select> </Select>
@ -149,7 +137,6 @@ The `selected` prop is reactive and supports two-way binding.
<Select disabled labelText="Carbon theme" selected="g10" > <Select disabled labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" /> <SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" /> <SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" /> <SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" /> <SelectItem value="g100" text="Gray 100" />
</Select> </Select>

8
docs/src/pages/components/Tabs.svx
View file

@ -60,9 +60,9 @@ Using keyboard navigation (left and right arrow keys) will skip to the next non-
</svelte:fragment> </svelte:fragment>
</Tabs> </Tabs>
## Container type ## Contained
<Tabs type="container"> <Tabs contained>
<Tab label="Tab label 1" /> <Tab label="Tab label 1" />
<Tab label="Tab label 2" /> <Tab label="Tab label 2" />
<Tab label="Tab label 3" /> <Tab label="Tab label 3" />
@ -77,6 +77,6 @@ Using keyboard navigation (left and right arrow keys) will skip to the next non-
<TabsSkeleton count={3} /> <TabsSkeleton count={3} />
## Skeleton (container) ## Skeleton (contained)
<TabsSkeleton type="container" count={3} /> <TabsSkeleton contained count={3} />

4
docs/src/pages/components/TextInput.svx
View file

@ -31,9 +31,9 @@ components: ["TextInput", "TextInputSkeleton"]
<TextInput readonly labelText="User name" value="IBM" /> <TextInput readonly labelText="User name" value="IBM" />
## Extra-large size ## Large size
<TextInput size="xl" labelText="User name" placeholder="Enter user name..." /> <TextInput size="lg" labelText="User name" placeholder="Enter user name..." />
## Small size ## Small size

4
docs/src/pages/components/TimePicker.svx
View file

@ -33,9 +33,9 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
</TimePickerSelect> </TimePickerSelect>
</TimePicker> </TimePicker>
## Extra-large size ## Large size
<TimePicker size="xl" labelText="Cron job" placeholder="hh:mm"> <TimePicker size="lg" labelText="Cron job" placeholder="hh:mm">
<TimePickerSelect value="pm"> <TimePickerSelect value="pm">
<SelectItem value="am" text="AM" /> <SelectItem value="am" text="AM" />
<SelectItem value="pm" text="PM" /> <SelectItem value="pm" text="PM" />

21
docs/src/pages/components/Toggle.svx
View file

@ -1,9 +1,9 @@
--- ---
components: ["Toggle", "ToggleSkeleton"] components: ["Toggle"]
--- ---
<script> <script>
import { Toggle, ToggleSkeleton } from "carbon-components-svelte"; import { Toggle } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
@ -33,15 +33,6 @@ Set `hideLabel` to `true` to visually hide the label text. It's recommended to s
<Toggle labelText="Push notifications" labelA="No" labelB="Yes" /> <Toggle labelText="Push notifications" labelA="No" labelB="Yes" />
## Slottable labels
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 ## Disabled
<Toggle labelText="Push notifications" disabled /> <Toggle labelText="Push notifications" disabled />
@ -49,11 +40,3 @@ An alternative to the "labelA" and "labelB" props is to use the corresponding na
## Small size ## Small size
<Toggle size="sm" labelText="Push notifications" /> <Toggle size="sm" labelText="Push notifications" />
## Skeleton
<ToggleSkeleton />
## Skeleton (small)
<ToggleSkeleton size="sm" />

8
docs/src/pages/components/TreeView.svx
View file

@ -23,7 +23,7 @@ By default, each item renders the value of `node.text`. Use the data from `let:n
The destructured `let:node` contains the following properties: The destructured `let:node` contains the following properties:
<UnorderedList svx-ignore style="margin-bottom: var(--cds-spacing-08)"> <UnorderedList svx-ignore style="margin-bottom: var(--bx-spacing-08)">
<ListItem><strong>id</strong>: the node id</ListItem> <ListItem><strong>id</strong>: the node id</ListItem>
<ListItem><strong>text</strong>: the node text</ListItem> <ListItem><strong>text</strong>: the node text</ListItem>
<ListItem><strong>expanded</strong>: true if the node is expanded</ListItem> <ListItem><strong>expanded</strong>: true if the node is expanded</ListItem>
@ -40,11 +40,11 @@ The active node can be set through `activeId`.
<FileSource src="/framed/TreeView/TreeViewActive" /> <FileSource src="/framed/TreeView/TreeViewActive" />
## Compact size ## Extra-small size
Set `size` to `"compact"` to use the compact variant. Set `size` to `"xs"` to use the extra-small variant.
<FileSource src="/framed/TreeView/TreeViewCompact" /> <FileSource src="/framed/TreeView/TreeViewXs" />
## With icons ## With icons

2
docs/src/pages/components/Truncate.svx
View file

@ -4,7 +4,7 @@
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
This utility component wraps the `.bx--text-truncate--*` CSS selectors from [carbon-components](https://github.com/carbon-design-system/carbon/blob/master/packages/components/src/globals/scss/_helper-classes.scss#L11) for single-line text truncation. This utility component wraps the `.bx--text-truncate-*` Sass mixins from [@carbon/styles](https://github.com/carbon-design-system/carbon/blob/main/packages/styles/scss/utilities/_text-truncate.scss) for single-line text truncation.
## Default ## Default

9
docs/src/pages/framed/Breakpoint/Breakpoint.svelte
View file

@ -5,7 +5,10 @@
let events = []; let events = [];
</script> </script>
<Breakpoint bind:size on:change="{(e) => (events = [...events, e.detail])}" /> <Breakpoint
bind:size="{size}"
on:change="{(e) => (events = [...events, e.detail])}"
/>
<p>Resize the width of your browser.</p> <p>Resize the width of your browser.</p>
<h6>Breakpoint size</h6> <h6>Breakpoint size</h6>
@ -17,10 +20,10 @@
<style> <style>
p, p,
h1 { h1 {
margin-bottom: var(--cds-spacing-08); margin-bottom: var(--bx-spacing-08);
} }
h6 { h6 {
margin-bottom: var(--cds-spacing-03); margin-bottom: var(--bx-spacing-03);
} }
</style> </style>

4
docs/src/pages/framed/Checkbox/CheckboxReactive.svelte
View file

@ -4,9 +4,9 @@
let checked = false; let checked = false;
</script> </script>
<Checkbox labelText="Label text" bind:checked /> <Checkbox labelText="Label text" bind:checked="{checked}" />
<div style="margin: var(--cds-layout-01) 0"> <div style="margin: var(--bx-spacing-05) 0">
<Button on:click="{() => (checked = !checked)}">Toggle</Button> <Button on:click="{() => (checked = !checked)}">Toggle</Button>
</div> </div>

4
docs/src/pages/framed/Checkbox/MultipleCheckboxes.svelte
View file

@ -6,10 +6,10 @@
</script> </script>
{#each values as value} {#each values as value}
<Checkbox bind:group labelText="{value}" value="{value}" /> <Checkbox bind:group="{group}" labelText="{value}" value="{value}" />
{/each} {/each}
<div style="margin: var(--cds-layout-01) 0"> <div style="margin: var(--bx-spacing-05) 0">
<Button on:click="{() => (group = ['Banana'])}">Set to ["Banana"]</Button> <Button on:click="{() => (group = ['Banana'])}">Set to ["Banana"]</Button>
</div> </div>

4
docs/src/pages/framed/CodeSnippet/DynamicCodeSnippet.svelte
View file

@ -8,9 +8,9 @@
</script> </script>
<Toggle <Toggle
bind:toggled bind:toggled="{toggled}"
size="sm" size="sm"
labelText="Trigger snippet overflow" labelText="Trigger snippet overflow"
style="margin-bottom: var(--cds-spacing-05)" style="margin-bottom: var(--bx-spacing-05)"
/> />
<CodeSnippet type="multi" code="{code}" /> <CodeSnippet type="multi" code="{code}" />

4
docs/src/pages/framed/CodeSnippet/HiddenCodeSnippet.svelte
View file

@ -8,9 +8,9 @@
<Toggle <Toggle
size="sm" size="sm"
style="margin-bottom: var(--cds-spacing-05)" style="margin-bottom: var(--bx-spacing-05)"
labelText="Show code snippets" labelText="Show code snippets"
bind:toggled bind:toggled="{toggled}"
/> />
{#if toggled} {#if toggled}

2
docs/src/pages/framed/ComboBox/MultipleComboBox.svelte
View file

@ -37,6 +37,6 @@
<style> <style>
div { div {
margin: var(--cds-layout-01) 0 var(--cds-layout-03); margin: var(--bx-spacing-05) 0 var(--bx-spacing-07);
} }
</style> </style>

4
docs/src/pages/framed/ContentSwitcher/ContentSwitcherReactive.svelte
View file

@ -4,7 +4,7 @@
let selectedIndex = 1; let selectedIndex = 1;
</script> </script>
<ContentSwitcher bind:selectedIndex> <ContentSwitcher bind:selectedIndex="{selectedIndex}">
<Switch text="Latest news" /> <Switch text="Latest news" />
<Switch text="Trending" /> <Switch text="Trending" />
<Switch text="Recommended" /> <Switch text="Recommended" />
@ -24,6 +24,6 @@
<style> <style>
div { div {
margin-top: var(--cds-spacing-05); margin-top: var(--bx-spacing-05);
} }
</style> </style>

11
docs/src/pages/framed/ContextMenu/ContextMenu.svelte
View file

@ -23,7 +23,10 @@
<ContextMenuOption indented labelText="Cut" shortcutText="⌘X" icon="{Cut}" /> <ContextMenuOption indented labelText="Cut" shortcutText="⌘X" icon="{Cut}" />
<ContextMenuDivider /> <ContextMenuDivider />
<ContextMenuOption indented labelText="Export as"> <ContextMenuOption indented labelText="Export as">
<ContextMenuGroup labelText="Export options" bind:selectedIds> <ContextMenuGroup
labelText="Export options"
bind:selectedIds="{selectedIds}"
>
<ContextMenuOption id="pdf" labelText="PDF" /> <ContextMenuOption id="pdf" labelText="PDF" />
<ContextMenuOption id="txt" labelText="TXT" /> <ContextMenuOption id="txt" labelText="TXT" />
<ContextMenuOption id="mp3" labelText="MP3" /> <ContextMenuOption id="mp3" labelText="MP3" />
@ -48,11 +51,11 @@
<style> <style>
div { div {
position: absolute; position: absolute;
width: calc(100% - var(--cds-spacing-05)); width: calc(100% - var(--bx-spacing-05));
height: calc(100% - var(--cds-spacing-06)); height: calc(100% - var(--bx-spacing-06));
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: var(--cds-text-02); color: var(--bx-text-02);
} }
</style> </style>

8
docs/src/pages/framed/ContextMenu/ContextMenuGroups.svelte
View file

@ -14,7 +14,7 @@
<ContextMenu> <ContextMenu>
<ContextMenuOption indented labelText="Open" /> <ContextMenuOption indented labelText="Open" />
<ContextMenuDivider /> <ContextMenuDivider />
<ContextMenuRadioGroup bind:selectedId labelText="Radio group"> <ContextMenuRadioGroup bind:selectedId="{selectedId}" labelText="Radio group">
<ContextMenuOption id="0" labelText="Set as foreground" /> <ContextMenuOption id="0" labelText="Set as foreground" />
<ContextMenuOption id="1" labelText="Set as background" /> <ContextMenuOption id="1" labelText="Set as background" />
</ContextMenuRadioGroup> </ContextMenuRadioGroup>
@ -29,11 +29,11 @@
<style> <style>
div { div {
position: absolute; position: absolute;
width: calc(100% - var(--cds-spacing-05)); width: calc(100% - var(--bx-spacing-05));
height: calc(100% - var(--cds-spacing-06)); height: calc(100% - var(--bx-spacing-06));
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: var(--cds-text-02); color: var(--bx-text-02);
} }
</style> </style>

8
docs/src/pages/framed/ContextMenu/ContextMenuTarget.svelte
View file

@ -46,15 +46,15 @@
<style> <style>
div { div {
position: absolute; position: absolute;
width: calc(100% - var(--cds-spacing-05)); width: calc(100% - var(--bx-spacing-05));
height: calc(100% - var(--cds-spacing-06)); height: calc(100% - var(--bx-spacing-06));
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: var(--cds-text-02); color: var(--bx-text-02);
} }
p { p {
outline: 1px solid var(--cds-interactive-01); outline: 1px solid var(--bx-interactive-01);
} }
</style> </style>

8
docs/src/pages/framed/ContextMenu/ContextMenuTargets.svelte
View file

@ -51,15 +51,15 @@
<style> <style>
div { div {
position: absolute; position: absolute;
width: calc(100% - var(--cds-spacing-05)); width: calc(100% - var(--bx-spacing-05));
height: calc(100% - var(--cds-spacing-06)); height: calc(100% - var(--bx-spacing-06));
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: var(--cds-text-02); color: var(--bx-text-02);
} }
p { p {
outline: 1px solid var(--cds-interactive-01); outline: 1px solid var(--bx-interactive-01);
} }
</style> </style>

2
docs/src/pages/framed/Dropdown/MultipleDropdown.svelte
View file

@ -37,6 +37,6 @@
<style> <style>
div { div {
margin: var(--cds-layout-01) 0 var(--cds-layout-03); margin: var(--bx-spacing-05) 0 var(--bx-spacing-07);
} }
</style> </style>

4
docs/src/pages/framed/Grid/PaddedGrid.svelte
View file

@ -43,7 +43,7 @@
<style> <style>
div { div {
margin-top: var(--cds-spacing-05); margin-top: var(--bx-spacing-05);
padding: var(--cds-spacing-05); padding: var(--bx-spacing-05);
} }
</style> </style>

2
docs/src/pages/framed/MultiSelect/MultipleMultiSelect.svelte
View file

@ -39,6 +39,6 @@
<style> <style>
div { div {
margin: var(--cds-layout-01) 0 var(--cds-layout-03); margin: var(--bx-spacing-05) 0 var(--bx-spacing-07);
} }
</style> </style>

4
docs/src/pages/framed/NumberInput/NumberInputEmpty.svelte
View file

@ -4,9 +4,9 @@
let value = null; let value = null;
</script> </script>
<NumberInput allowEmpty bind:value /> <NumberInput allowEmpty bind:value="{value}" />
<div style="margin: var(--cds-layout-01) 0"> <div style="margin: var(--bx-spacing-05) 0">
<Button on:click="{() => (value = null)}">Set to null</Button> <Button on:click="{() => (value = null)}">Set to null</Button>
<Button on:click="{() => (value = 0)}">Set to 0</Button> <Button on:click="{() => (value = 0)}">Set to 0</Button>
</div> </div>

4
docs/src/pages/framed/PaginationNav/PaginationNavReactive.svelte
View file

@ -4,9 +4,9 @@
let page = 2; let page = 2;
</script> </script>
<PaginationNav bind:page /> <PaginationNav bind:page="{page}" />
<div style="margin: var(--cds-layout-01) 0"> <div style="margin: var(--bx-spacing-05) 0">
<Button on:click="{() => (page = 1)}" disabled="{page === 0}"> <Button on:click="{() => (page = 1)}" disabled="{page === 0}">
Set page to 1 Set page to 1
</Button> </Button>

4
docs/src/pages/framed/Popover/WithButton.svelte
View file

@ -8,13 +8,13 @@
<div bind:this="{ref}" style:position="relative"> <div bind:this="{ref}" style:position="relative">
<Button on:click="{() => (open = !open)}">Toggle popover</Button> <Button on:click="{() => (open = !open)}">Toggle popover</Button>
<Popover <Popover
bind:open bind:open="{open}"
align="bottom-left" align="bottom-left"
on:click:outside="{({ detail }) => { on:click:outside="{({ detail }) => {
console.log('on:click:outside'); console.log('on:click:outside');
open = ref.contains(detail.target); open = ref.contains(detail.target);
}}" }}"
> >
<div style="padding: var(--cds-spacing-05)">Content</div> <div style="padding: var(--bx-spacing-05)">Content</div>
</Popover> </Popover>
</div> </div>

2
docs/src/pages/framed/ProgressBar/ProgressBarUx.svelte
View file

@ -21,7 +21,7 @@
status="{status}" status="{status}"
/> />
<ButtonSet style="margin-top: var(--cds-spacing-08)"> <ButtonSet style="margin-top: var(--bx-spacing-08)">
<Button <Button
disabled="{value > 0}" disabled="{value > 0}"
on:click="{() => { on:click="{() => {

4
docs/src/pages/framed/ProgressIndicator/ProgrammaticProgressIndicator.svelte
View file

@ -9,7 +9,7 @@
let thirdStepCurrent = false; let thirdStepCurrent = false;
</script> </script>
<ProgressIndicator bind:currentIndex> <ProgressIndicator bind:currentIndex="{currentIndex}">
<ProgressStep <ProgressStep
complete complete
label="Step 1" label="Step 1"
@ -32,7 +32,7 @@
/> />
</ProgressIndicator> </ProgressIndicator>
<div style="margin: var(--cds-layout-02) 0"> <div style="margin: var(--bx-spacing-06) 0">
<Button <Button
kind="{currentIndex === 2 ? 'secondary' : 'primary'}" kind="{currentIndex === 2 ? 'secondary' : 'primary'}"
on:click="{() => { on:click="{() => {

2
docs/src/pages/framed/RadioButton/RadioButtonReactive.svelte
View file

@ -20,7 +20,7 @@
{/each} {/each}
</RadioButtonGroup> </RadioButtonGroup>
<div style="margin: var(--cds-layout-03) 0"> <div style="margin: var(--bx-layout-03) 0">
{#each plans as value (value)} {#each plans as value (value)}
<Button <Button
size="small" size="small"

8
docs/src/pages/framed/RadioTile/RadioTileReactive.svelte
View file

@ -6,7 +6,11 @@
let selected = values[1]; let selected = values[1];
</script> </script>
<TileGroup legend="Service pricing tiers" name="plan" bind:selected> <TileGroup
legend="Service pricing tiers"
name="plan"
bind:selected="{selected}"
>
{#each values as value} {#each values as value}
<RadioTile value="{value}">{value}</RadioTile> <RadioTile value="{value}">{value}</RadioTile>
{/each} {/each}
@ -26,6 +30,6 @@
<style> <style>
div { div {
margin: var(--cds-spacing-05) 0; margin: var(--bx-spacing-05) 0;
} }
</style> </style>

4
docs/src/pages/framed/Search/SearchReactive.svelte
View file

@ -4,7 +4,7 @@
let value = ""; let value = "";
</script> </script>
<Search bind:value /> <Search bind:value="{value}" />
<div> <div>
<ButtonSet> <ButtonSet>
@ -30,6 +30,6 @@
<style> <style>
div { div {
margin-top: var(--cds-spacing-05); margin-top: var(--bx-spacing-05);
} }
</style> </style>

5
docs/src/pages/framed/Select/SelectReactive.svelte
View file

@ -4,15 +4,14 @@
let selected = "g10"; let selected = "g10";
</script> </script>
<Select labelText="Carbon theme" bind:selected> <Select labelText="Carbon theme" bind:selected="{selected}">
<SelectItem value="white" text="White" /> <SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" /> <SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" /> <SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" /> <SelectItem value="g100" text="Gray 100" />
</Select> </Select>
<div style="margin: var(--cds-layout-01) 0"> <div style="margin: var(--bx-spacing-05) 0">
Selected: <strong>{selected}</strong> Selected: <strong>{selected}</strong>
</div> </div>

4
docs/src/pages/framed/Tabs/TabsReactive.svelte
View file

@ -4,7 +4,7 @@
let selected = 0; let selected = 0;
</script> </script>
<Tabs bind:selected> <Tabs bind:selected="{selected}">
<Tab label="Tab label 1" /> <Tab label="Tab label 1" />
<Tab label="Tab label 2" /> <Tab label="Tab label 2" />
<Tab label="Tab label 3" /> <Tab label="Tab label 3" />
@ -15,7 +15,7 @@
</svelte:fragment> </svelte:fragment>
</Tabs> </Tabs>
<div style="margin: var(--cds-layout-01) 0"> <div style="margin: var(--bx-spacing-05) 0">
<Button on:click="{() => (selected = 1)}">Set index to 1</Button> <Button on:click="{() => (selected = 1)}">Set index to 1</Button>
</div> </div>

2
docs/src/pages/framed/Theme/Theme.svelte
View file

@ -11,7 +11,7 @@
<Theme bind:theme /> <Theme bind:theme />
<RadioButtonGroup legendText="Carbon theme" bind:selected="{theme}"> <RadioButtonGroup legendText="Carbon theme" bind:selected="{theme}">
{#each ["white", "g10", "g80", "g90", "g100"] as value} {#each ["white", "g10", "g90", "g100"] as value}
<RadioButton labelText="{value}" value="{value}" /> <RadioButton labelText="{value}" value="{value}" />
{/each} {/each}
</RadioButtonGroup> </RadioButtonGroup>

4
docs/src/pages/framed/Theme/ThemePersist.svelte
View file

@ -8,10 +8,10 @@
let theme = "g90"; let theme = "g90";
</script> </script>
<Theme bind:theme persist persistKey="__carbon-theme" /> <Theme bind:theme="{theme}" persist persistKey="__carbon-theme" />
<RadioButtonGroup legendText="Carbon theme" bind:selected="{theme}"> <RadioButtonGroup legendText="Carbon theme" bind:selected="{theme}">
{#each ["white", "g10", "g80", "g90", "g100"] as value} {#each ["white", "g10", "g90", "g100"] as value}
<RadioButton labelText="{value}" value="{value}" /> <RadioButton labelText="{value}" value="{value}" />
{/each} {/each}
</RadioButtonGroup> </RadioButtonGroup>

2
docs/src/pages/framed/Theme/ThemeToggleCustom.svelte
View file

@ -5,7 +5,7 @@
<Theme <Theme
render="toggle" render="toggle"
toggle="{{ toggle="{{
themes: ['g10', 'g80'], themes: ['g10', 'g90'],
labelA: 'Enable dark mode', labelA: 'Enable dark mode',
labelB: 'Enable dark mode', labelB: 'Enable dark mode',
hideLabel: true, hideLabel: true,

4
docs/src/pages/framed/Toggle/ToggleReactive.svelte
View file

@ -4,7 +4,7 @@
let toggled = true; let toggled = true;
</script> </script>
<Toggle labelText="Push notifications" bind:toggled /> <Toggle labelText="Push notifications" bind:toggled="{toggled}" />
<div> <div>
<Button size="small" on:click="{() => (toggled = !toggled)}"> <Button size="small" on:click="{() => (toggled = !toggled)}">
@ -17,6 +17,6 @@
<style> <style>
div { div {
margin-top: var(--cds-spacing-05); margin-top: var(--bx-spacing-05);
} }
</style> </style>

6
docs/src/pages/framed/Tooltip/TooltipReactive.svelte
View file

@ -4,11 +4,11 @@
let open = true; let open = true;
</script> </script>
<Tooltip bind:open triggerText="Resource list" align="start"> <Tooltip bind:open="{open}" triggerText="Resource list" align="start">
<p>Resources are provisioned based on your account's organization.</p> <p>Resources are provisioned based on your account's organization.</p>
</Tooltip> </Tooltip>
<div style="margin-top: var(--cds-spacing-12);"> <div style="margin-top: var(--bx-spacing-12);">
<Button size="small" on:click="{() => (open = !open)}"> <Button size="small" on:click="{() => (open = !open)}">
{open ? "Close tooltip" : "Open tooltip"} {open ? "Close tooltip" : "Open tooltip"}
</Button> </Button>
@ -18,6 +18,6 @@
<style> <style>
div { div {
margin-top: var(--cds-spacing-05); margin-top: var(--bx-spacing-05);
} }
</style> </style>

6
docs/src/pages/framed/TreeView/TreeView.svelte
View file

@ -48,8 +48,8 @@
<TreeView <TreeView
labelText="Cloud Products" labelText="Cloud Products"
children="{children}" children="{children}"
bind:activeId bind:activeId="{activeId}"
bind:selectedIds bind:selectedIds="{selectedIds}"
on:select="{({ detail }) => console.log('select', detail)}" on:select="{({ detail }) => console.log('select', detail)}"
on:toggle="{({ detail }) => console.log('toggle', detail)}" on:toggle="{({ detail }) => console.log('toggle', detail)}"
on:focus="{({ detail }) => console.log('focus', detail)}" on:focus="{({ detail }) => console.log('focus', detail)}"
@ -60,6 +60,6 @@
<style> <style>
div { div {
margin-top: var(--cds-spacing-05); margin-top: var(--bx-spacing-05);
} }
</style> </style>

6
docs/src/pages/framed/TreeView/TreeViewActive.svelte
View file

@ -48,8 +48,8 @@
<TreeView <TreeView
labelText="Cloud Products" labelText="Cloud Products"
children="{children}" children="{children}"
bind:activeId bind:activeId="{activeId}"
bind:selectedIds bind:selectedIds="{selectedIds}"
on:select="{({ detail }) => console.log('select', detail)}" on:select="{({ detail }) => console.log('select', detail)}"
on:toggle="{({ detail }) => console.log('toggle', detail)}" on:toggle="{({ detail }) => console.log('toggle', detail)}"
on:focus="{({ detail }) => console.log('focus', detail)}" on:focus="{({ detail }) => console.log('focus', detail)}"
@ -60,6 +60,6 @@
<style> <style>
div { div {
margin-top: var(--cds-spacing-05); margin-top: var(--bx-spacing-05);
} }
</style> </style>

4
docs/src/pages/framed/TreeView/TreeViewCollapseAll.svelte
View file

@ -51,13 +51,13 @@
<TreeView <TreeView
bind:this="{treeview}" bind:this="{treeview}"
bind:expandedIds bind:expandedIds="{expandedIds}"
labelText="Cloud Products" labelText="Cloud Products"
children="{children}" children="{children}"
/> />
<style> <style>
div { div {
margin-bottom: var(--cds-spacing-05); margin-bottom: var(--bx-spacing-05);
} }
</style> </style>

4
docs/src/pages/framed/TreeView/TreeViewCollapseNodes.svelte
View file

@ -59,13 +59,13 @@
<TreeView <TreeView
bind:this="{treeview}" bind:this="{treeview}"
bind:expandedIds bind:expandedIds="{expandedIds}"
labelText="Cloud Products" labelText="Cloud Products"
children="{children}" children="{children}"
/> />
<style> <style>
div { div {
margin-bottom: var(--cds-spacing-05); margin-bottom: var(--bx-spacing-05);
} }
</style> </style>

2
docs/src/pages/framed/TreeView/TreeViewExpandAll.svelte
View file

@ -56,6 +56,6 @@
<style> <style>
div { div {
margin-bottom: var(--cds-spacing-05); margin-bottom: var(--bx-spacing-05);
} }
</style> </style>

2
docs/src/pages/framed/TreeView/TreeViewExpandNodes.svelte
View file

@ -62,6 +62,6 @@
<style> <style>
div { div {
margin-bottom: var(--cds-spacing-05); margin-bottom: var(--bx-spacing-05);
} }
</style> </style>

8
docs/src/pages/framed/TreeView/TreeViewExpanded.svelte
View file

@ -49,9 +49,9 @@
<TreeView <TreeView
labelText="Cloud Products" labelText="Cloud Products"
children="{children}" children="{children}"
bind:activeId bind:activeId="{activeId}"
bind:selectedIds bind:selectedIds="{selectedIds}"
bind:expandedIds bind:expandedIds="{expandedIds}"
on:select="{({ detail }) => console.log('select', detail)}" on:select="{({ detail }) => console.log('select', detail)}"
on:toggle="{({ detail }) => console.log('toggle', detail)}" on:toggle="{({ detail }) => console.log('toggle', detail)}"
on:focus="{({ detail }) => console.log('focus', detail)}" on:focus="{({ detail }) => console.log('focus', detail)}"
@ -63,6 +63,6 @@
<style> <style>
div { div {
margin-top: var(--cds-spacing-05); margin-top: var(--bx-spacing-05);
} }
</style> </style>

6
docs/src/pages/framed/TreeView/TreeViewIcons.svelte
View file

@ -77,8 +77,8 @@
<TreeView <TreeView
labelText="Cloud Products" labelText="Cloud Products"
children="{children}" children="{children}"
bind:activeId bind:activeId="{activeId}"
bind:selectedIds bind:selectedIds="{selectedIds}"
on:select="{({ detail }) => console.log('select', detail)}" on:select="{({ detail }) => console.log('select', detail)}"
on:toggle="{({ detail }) => console.log('toggle', detail)}" on:toggle="{({ detail }) => console.log('toggle', detail)}"
on:focus="{({ detail }) => console.log('focus', detail)}" on:focus="{({ detail }) => console.log('focus', detail)}"
@ -89,6 +89,6 @@
<style> <style>
div { div {
margin-top: var(--cds-spacing-05); margin-top: var(--bx-spacing-05);
} }
</style> </style>

6
docs/src/pages/framed/TreeView/TreeViewMultiselect.svelte
View file

@ -48,8 +48,8 @@
<TreeView <TreeView
labelText="Cloud Products" labelText="Cloud Products"
children="{children}" children="{children}"
bind:activeId bind:activeId="{activeId}"
bind:selectedIds bind:selectedIds="{selectedIds}"
on:select="{({ detail }) => console.log('select', detail)}" on:select="{({ detail }) => console.log('select', detail)}"
on:toggle="{({ detail }) => console.log('toggle', detail)}" on:toggle="{({ detail }) => console.log('toggle', detail)}"
on:focus="{({ detail }) => console.log('focus', detail)}" on:focus="{({ detail }) => console.log('focus', detail)}"
@ -60,6 +60,6 @@
<style> <style>
div { div {
margin-top: var(--cds-spacing-05); margin-top: var(--bx-spacing-05);
} }
</style> </style>

2
docs/src/pages/framed/TreeView/TreeViewShowNode.svelte
View file

@ -28,7 +28,7 @@
]; ];
</script> </script>
<ButtonSet style="margin-bottom: var(--cds-spacing-05)"> <ButtonSet style="margin-bottom: var(--bx-spacing-05)">
{#each [nodeSpark, nodeBlockchain] as { id, text }} {#each [nodeSpark, nodeBlockchain] as { id, text }}
<Button <Button
on:click="{() => { on:click="{() => {

2
docs/src/pages/framed/TreeView/TreeViewSlot.svelte
View file

@ -53,7 +53,7 @@
let:node let:node
> >
<span <span
style:color="{node.selected ? "var(--cds-interactive-04)" : "inherit"}" style:color="{node.selected ? "var(--bx-interactive-04)" : "inherit"}"
style:text-decoration="{node.disabled ? "inherit" : "underline"}" style:text-decoration="{node.disabled ? "inherit" : "underline"}"
> >
{node.text} (id: {node.id}) {node.text} (id: {node.id})

8
docs/src/pages/framed/TreeView/TreeViewCompact.svelte → docs/src/pages/framed/TreeView/TreeViewXs.svelte
View file

@ -46,11 +46,11 @@
</script> </script>
<TreeView <TreeView
size="compact" size="xs"
labelText="Cloud Products" labelText="Cloud Products"
children="{children}" children="{children}"
bind:activeId bind:activeId="{activeId}"
bind:selectedIds bind:selectedIds="{selectedIds}"
on:select="{({ detail }) => console.log('select', detail)}" on:select="{({ detail }) => console.log('select', detail)}"
on:toggle="{({ detail }) => console.log('toggle', detail)}" on:toggle="{({ detail }) => console.log('toggle', detail)}"
on:focus="{({ detail }) => console.log('focus', detail)}" on:focus="{({ detail }) => console.log('focus', detail)}"
@ -61,6 +61,6 @@
<style> <style>
div { div {
margin-top: var(--cds-spacing-05); margin-top: var(--bx-spacing-05);
} }
</style> </style>

8
docs/src/pages/framed/UIShell/HeaderSearch.svelte
View file

@ -67,10 +67,10 @@
</svelte:fragment> </svelte:fragment>
<HeaderUtilities> <HeaderUtilities>
<HeaderSearch <HeaderSearch
bind:ref bind:ref="{ref}"
bind:active bind:active="{active}"
bind:value bind:value="{value}"
bind:selectedResultIndex bind:selectedResultIndex="{selectedResultIndex}"
placeholder="Search services" placeholder="Search services"
results="{results}" results="{results}"
on:active="{() => { on:active="{() => {

6
docs/src/pages/framed/_reset.svelte
View file

@ -15,7 +15,7 @@
// NOTE: we *do not* want to persist the theme as this can // NOTE: we *do not* want to persist the theme as this can
// conflict with how the iframe is displayed in the docs. // conflict with how the iframe is displayed in the docs.
// Instead, we want the theme to be overridden in the standalone page. // Instead, we want the theme to be overridden in the standalone page.
if (["white", "g10", "g80", "g90", "g100"].includes(current_theme)) { if (["white", "g10", "g90", "g100"].includes(current_theme)) {
document.documentElement.setAttribute("theme", current_theme); document.documentElement.setAttribute("theme", current_theme);
document.documentElement.style.setProperty( document.documentElement.style.setProperty(
"color-scheme", "color-scheme",
@ -31,11 +31,11 @@
:global(body.framed) { :global(body.framed) {
min-height: 100vh; min-height: 100vh;
width: 100%; width: 100%;
padding: var(--cds-spacing-06) var(--cds-spacing-05); padding: var(--bx-spacing-06) var(--bx-spacing-05);
} }
:global(.framed :not(.bx--content) [class^="bx--col"]) { :global(.framed :not(.bx--content) [class^="bx--col"]) {
outline: 1px solid var(--cds-interactive-04); outline: 1px solid var(--bx-interactive-04);
} }
:global(.framed .bx--content [class^="bx--col"]) { :global(.framed .bx--content [class^="bx--col"]) {

33
docs/src/pages/index.svelte
View file

@ -27,7 +27,6 @@
const themes = { const themes = {
white: "White", white: "White",
g10: "Gray 10", g10: "Gray 10",
g80: "Gray 80",
g90: "Gray 90", g90: "Gray 90",
g100: "Gray 100", g100: "Gray 100",
all: "All", all: "All",
@ -35,7 +34,7 @@
const cssImportAll = `import "carbon-components-svelte/css/all.css";`; const cssImportAll = `import "carbon-components-svelte/css/all.css";`;
const cssThemeToggle = `<script> const cssThemeToggle = `<script>
let theme = "${$theme}"; // "white" | "g10" | "g80" | "g90" | "g100" let theme = "${$theme}"; // "white" | "g10" | "g90" | "g100"
$: document.documentElement.setAttribute("theme", theme); $: document.documentElement.setAttribute("theme", theme);
<\/script> <\/script>
@ -92,45 +91,45 @@
</p> </p>
</Column> </Column>
</Row> </Row>
<Row style="margin-bottom: var(--cds-layout-02)"> <Row style="margin-bottom: var(--bx-spacing-06)">
<Column max="{10}" xlg="{10}"> <Column max="{10}" xlg="{10}">
<h2 style="margin-top: var(--cds-layout-02)">Installation</h2> <h2 style="margin-top: var(--bx-spacing-06)">Installation</h2>
</Column> </Column>
</Row> </Row>
<Row style="margin-bottom: var(--cds-layout-02)"> <Row style="margin-bottom: var(--bx-spacing-06)">
<Column noGutter> <Column noGutter>
<Tabs> <Tabs>
<Tab label="Yarn" />
<Tab label="NPM" /> <Tab label="NPM" />
<Tab label="pnpm" /> <Tab label="pnpm" />
<Tab label="Yarn" />
<div slot="content" style="margin: 1rem -1rem"> <div slot="content" style="margin: 1rem -1rem">
<TabContent>
<CodeSnippet code="{installYarn}" />
</TabContent>
<TabContent> <TabContent>
<CodeSnippet code="{installNpm}" /> <CodeSnippet code="{installNpm}" />
</TabContent> </TabContent>
<TabContent> <TabContent>
<CodeSnippet code="{installPnpm}" /> <CodeSnippet code="{installPnpm}" />
</TabContent> </TabContent>
<TabContent>
<CodeSnippet code="{installYarn}" />
</TabContent>
</div> </div>
</Tabs> </Tabs>
</Column> </Column>
</Row> </Row>
<Row style="margin-bottom: var(--cds-layout-04)"> <Row style="margin-bottom: var(--bx-spacing-09)">
<Column> <Column>
<h2>Styling</h2> <h2>Styling</h2>
<p> <p>
Before importing components, you will need to first apply Carbon Before importing components, you will need to first apply Carbon
component styles. The Carbon Design System supports five themes (2 component styles. The Carbon Design System supports four themes (2
light, 3 dark). light, 2 dark).
</p> </p>
<RadioButtonGroup <RadioButtonGroup
style="margin-top: var(--cds-spacing-08)" style="margin-top: var(--bx-spacing-08)"
legendText="Carbon themes" legendText="Carbon themes"
bind:selected="{$theme}" bind:selected="{$theme}"
> >
{#each ["white", "g10", "g80", "g90", "g100"] as value} {#each ["white", "g10", "g90", "g100"] as value}
<RadioButton labelText="{themes[value]}" value="{value}" /> <RadioButton labelText="{themes[value]}" value="{value}" />
{/each} {/each}
</RadioButtonGroup> </RadioButtonGroup>
@ -216,7 +215,7 @@
</Column> </Column>
</Row> </Row>
<Row style="margin-bottom: var(--cds-layout-02)"> <Row style="margin-bottom: var(--bx-spacing-06)">
<Column> <Column>
<h2>Dynamic theming</h2> <h2>Dynamic theming</h2>
<p>Use the "all.css" StyleSheet for dynamic, client-side theming.</p> <p>Use the "all.css" StyleSheet for dynamic, client-side theming.</p>
@ -248,7 +247,7 @@
</Column> </Column>
</Row> </Row>
<Row style="margin-bottom: var(--cds-layout-02)"> <Row style="margin-bottom: var(--bx-spacing-06)">
<Column> <Column>
<h2>Portfolio</h2> <h2>Portfolio</h2>
<p> <p>
@ -314,6 +313,6 @@
<style> <style>
p { p {
margin-bottom: var(--cds-spacing-05); margin-bottom: var(--bx-spacing-05);
} }
</style> </style>

1683
docs/yarn.lock
View file

File diff suppressed because it is too large Load diff

3815
package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

6
package.json
View file

@ -44,15 +44,15 @@
"flatpickr": "4.6.9" "flatpickr": "4.6.9"
}, },
"devDependencies": { "devDependencies": {
"@carbon/styles": "^1.47.0",
"@rollup/plugin-commonjs": "^21.0.3", "@rollup/plugin-commonjs": "^21.0.3",
"@rollup/plugin-node-resolve": "^13.3.0", "@rollup/plugin-node-resolve": "^13.3.0",
"@tsconfig/svelte": "^4.0.1", "@tsconfig/svelte": "^4.0.1",
"autoprefixer": "^10.4.8", "autoprefixer": "^10.4.8",
"carbon-components": "10.58.12",
"carbon-icons-svelte": "^12.1.0", "carbon-icons-svelte": "^12.1.0",
"postcss": "^8.4.16", "postcss": "^8.4.16",
"prettier": "^2.7.1", "prettier": "^2.8.8",
"prettier-plugin-svelte": "^2.7.0", "prettier-plugin-svelte": "^2.10.1",
"rollup": "^2.78.1", "rollup": "^2.78.1",
"rollup-plugin-svelte": "^7.1.0", "rollup-plugin-svelte": "^7.1.0",
"rollup-plugin-terser": "^7.0.2", "rollup-plugin-terser": "^7.0.2",

4
src/Accordion/Accordion.svelte
View file

@ -9,7 +9,7 @@
/** /**
* Specify the size of the accordion * Specify the size of the accordion
* @type {"sm" | "xl"} * @type {"sm" | "lg"}
*/ */
export let size = undefined; export let size = undefined;
@ -48,7 +48,7 @@
class:bx--accordion--start="{align === 'start'}" class:bx--accordion--start="{align === 'start'}"
class:bx--accordion--end="{align === 'end'}" class:bx--accordion--end="{align === 'end'}"
class:bx--accordion--sm="{size === 'sm'}" class:bx--accordion--sm="{size === 'sm'}"
class:bx--accordion--xl="{size === 'xl'}" class:bx--accordion--lg="{size === 'lg' || size === 'xl'}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover

2
src/AspectRatio/AspectRatio.svelte
View file

@ -19,7 +19,5 @@
class:bx--aspect-ratio--1x2="{ratio === '1x2'}" class:bx--aspect-ratio--1x2="{ratio === '1x2'}"
{...$$restProps} {...$$restProps}
> >
<div class:bx--aspect-ratio--object="{true}">
<slot /> <slot />
</div>
</div> </div>

13
src/Button/Button.svelte
View file

@ -7,15 +7,15 @@
/** /**
* Specify the kind of button * Specify the kind of button
* @type {"primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost"} * @type {"primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger--tertiary" | "danger--ghost"}
*/ */
export let kind = "primary"; export let kind = "primary";
/** /**
* Specify the size of button * Specify the size of button
* @type {"default" | "field" | "small" | "lg" | "xl"} * @type {"sm" | "md" | "lg" | "xl" | "2xl"}
*/ */
export let size = "default"; export let size = "lg";
/** Set to `true` to use Carbon's expressive typesetting */ /** Set to `true` to use Carbon's expressive typesetting */
export let expressive = false; export let expressive = false;
@ -108,12 +108,11 @@
(size === "sm" && !expressive) || (size === "sm" && !expressive) ||
(size === "small" && !expressive)) && (size === "small" && !expressive)) &&
"bx--btn--sm", "bx--btn--sm",
(size === "field" && !expressive) || ((size === "field" && !expressive) || (size === "md" && !expressive)) &&
(size === "md" && !expressive && "bx--btn--md"), "bx--btn--md",
size === "field" && "bx--btn--field",
size === "small" && "bx--btn--sm", size === "small" && "bx--btn--sm",
size === "lg" && "bx--btn--lg",
size === "xl" && "bx--btn--xl", size === "xl" && "bx--btn--xl",
size === "2xl" && "bx--btn--2xl",
kind && `bx--btn--${kind}`, kind && `bx--btn--${kind}`,
disabled && "bx--btn--disabled", disabled && "bx--btn--disabled",
hasIconOnly && "bx--btn--icon-only", hasIconOnly && "bx--btn--icon-only",

Some files were not shown because too many files have changed in this diff Show more