mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +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
commit c0d037dfca
188 changed files with 7815 additions and 5523 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -9,17 +9,17 @@ jobs:
steps:
- uses: actions/checkout@v4
- uses: actions/cache@v3
id: yarn-cache
id: npm-cache
with:
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
run: |
yarn
yarn build:lib
yarn test:types
yarn lint
npm i
npm run build:lib
npm run test:types
npm run lint
- name: Trigger deploy
if: github.ref == 'refs/heads/master'

161
COMPONENT_INDEX.md
View file

@ -95,6 +95,7 @@
- [`PaginationSkeleton`](#paginationskeleton)
- [`PasswordInput`](#passwordinput)
- [`Popover`](#popover)
- [`PopoverContent`](#popovercontent)
- [`ProgressBar`](#progressbar)
- [`ProgressIndicator`](#progressindicator)
- [`ProgressIndicatorSkeleton`](#progressindicatorskeleton)
@ -155,7 +156,6 @@
- [`TimePickerSelect`](#timepickerselect)
- [`ToastNotification`](#toastnotification)
- [`Toggle`](#toggle)
- [`ToggleSkeleton`](#toggleskeleton)
- [`Toolbar`](#toolbar)
- [`ToolbarBatchActions`](#toolbarbatchactions)
- [`ToolbarContent`](#toolbarcontent)
@ -179,7 +179,7 @@
| 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 |
| 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 |
| skeleton | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
@ -372,23 +372,23 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
### Props
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| as | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a custom HTML element<br />Props are destructured as `props` in the default slot (e.g., &lt;Button let:props&gt;&lt;div {...props}&gt;...&lt;/div&gt;&lt;/Button&gt;) |
| skeleton | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the button |
| href | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Set the `href` to use an anchor link |
| tabindex | No | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify the tabindex |
| type | No | <code>let</code> | No | <code>string</code> | <code>"button"</code> | Specify the `type` attribute for the button element |
| 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 |
| 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>"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 |
| 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 |
| 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 |
| 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 |
| as | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a custom HTML element<br />Props are destructured as `props` in the default slot (e.g., &lt;Button let:props&gt;&lt;div {...props}&gt;...&lt;/div&gt;&lt;/Button&gt;) |
| skeleton | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the button |
| href | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Set the `href` to use an anchor link |
| tabindex | No | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify the tabindex |
| type | No | <code>let</code> | No | <code>string</code> | <code>"button"</code> | Specify the `type` attribute for the button element |
### Slots
@ -666,7 +666,7 @@ export interface ComboBoxItem {
| 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 |
| 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 |
| 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 |
@ -760,10 +760,10 @@ None.
### Props
| 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 |
| size | No | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | <code>undefined</code> | Specify the size of the content switcher |
| 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 |
| size | No | <code>let</code> | No | <code>"sm" &#124; "lg" </code> | <code>undefined</code> | Specify the size of the content switcher |
### Slots
@ -1086,7 +1086,7 @@ None.
| 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 |
| 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 |
| 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 |
@ -1167,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 |
| 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 |
| 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 |
| 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 |
@ -1367,7 +1367,7 @@ None.
| 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 |
| 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 |
| 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 |
@ -1995,7 +1995,7 @@ None.
| 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 |
| 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 |
@ -2372,7 +2372,7 @@ export interface MultiSelectItem {
| 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 |
| 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 |
| 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 |
@ -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 |
| 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 |
| 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 |
@ -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 |
| 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 |
| 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 |
| 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 |
@ -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 |
| 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 |
| 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 |
| 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 |
@ -2827,6 +2827,24 @@ None.
| :------------ | :--------- | :------------------------------------ |
| 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`
### 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 |
| 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 |
| 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 |
| 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 |
@ -3152,7 +3170,7 @@ None.
| 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
@ -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 |
| 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 |
| 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 |
@ -3949,13 +3967,11 @@ None.
### Props
| 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 |
| type | No | <code>let</code> | No | <code>"default" &#124; "container"</code> | <code>"default"</code> | Specify the type of tabs |
| 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 |
| 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 |
| 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 |
### Slots
@ -3968,8 +3984,6 @@ None.
| Event name | Type | Detail |
| :--------- | :--------- | :----- |
| keypress | forwarded | -- |
| click | forwarded | -- |
| change | dispatched | -- |
## `TabsSkeleton`
@ -4057,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 |
| 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 |
| 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 |
| 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 |
@ -4122,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 |
| 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 |
| 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 |
@ -4187,7 +4201,7 @@ None.
### Types
```ts
export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
export type CarbonTheme = "white" | "g10" | "g90" | "g100";
```
### Props
@ -4269,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 |
| 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 |
| 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 |
@ -4376,24 +4390,22 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
### Props
| 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 |
| size | No | <code>let</code> | No | <code>"default" &#124; "sm"</code> | <code>"default"</code> | Specify the toggle size |
| 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 |
| labelB | No | <code>let</code> | No | <code>string</code> | <code>"On"</code> | Specify the label for the toggled state |
| 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 |
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
| name | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the checkbox input |
| 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 |
| 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 |
| 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 |
| 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 |
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
| name | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the checkbox input |
### Slots
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :----------------------- |
| labelA | No | -- | <code>{labelA}</code> |
| labelB | No | -- | <code>{labelB}</code> |
| labelText | No | -- | <code>{labelText}</code> |
### Events
@ -4410,31 +4422,6 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
| focus | 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`
### Props
@ -4701,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 |
| 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 |
| 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 |
| 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 |

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)
- [Editing a component](#editing-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)
- [Sync Your Fork](#sync-your-fork)
- [Submit a PR](#submit-a-pr)
## Prerequisites
- [Node.js](https://nodejs.org/en/download/package-manager/) (version >=12)
- [Yarn](https://classic.yarnpkg.com/en/docs/install)
- [Node.js](https://nodejs.org/en/download/package-manager/) (version >=18)
- [npm](https://docs.npmjs.com/cli) (bundled with Node.js)
## Project set-up
@ -43,7 +43,7 @@ Install the project dependencies:
```sh
# carbon-components-svelte/
yarn install
npm install
```
## Documentation set-up
@ -54,7 +54,7 @@ First, create a symbolic link at the root of the project folder:
```sh
# carbon-components-svelte/
yarn link
npm link
```
Go into the `docs` folder:
@ -66,8 +66,8 @@ cd docs
Link `"carbon-components-svelte"`:
```sh
yarn link "carbon-components-svelte"
yarn install
npm link "carbon-components-svelte"
npm install
```
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:
```sh
yarn dev
npm run dev
```
The site should be served at `http://localhost:3000/` (or the next available port).
@ -134,13 +134,13 @@ export {
} from "./ComposedModal";
```
### Run `yarn build:docs`
### Run `npm run build:docs`
Run the following command to re-generate TypeScript definitions and documentation.
```sh
# carbon-components-svelte/
yarn build:docs
npm run build:docs
```
## 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.
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`
- 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:

9
README.md
View file

@ -45,11 +45,10 @@ pnpm i -D carbon-components-svelte
### 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)
- **g10.css**: Gray 10 theme (light)
- **g80.css**: Gray 80 theme (dark)
- **g90.css**: Gray 90 theme (dark)
- **g100.css**: Gray 100 theme (dark)
- **all.css**: All themes (White, Gray 10, Gray 90, Gray 100) using [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
@ -60,7 +59,6 @@ The compiled CSS is generated from the following `.scss` files:
- [css/white.scss](css/white.scss)
- [css/g10.scss](css/g10.scss)
- [css/g80.scss](css/g80.scss)
- [css/g90.scss](css/g90.scss)
- [css/g100.scss](css/g100.scss)
- [css/all.scss](css/all.scss)
@ -74,9 +72,6 @@ import "carbon-components-svelte/css/white.css";
// Gray 10 theme
import "carbon-components-svelte/css/g10.css";
// Gray 80 theme
import "carbon-components-svelte/css/g80.css";
// Gray 90 theme
import "carbon-components-svelte/css/g90.css";
@ -147,7 +142,7 @@ Programmatically switch between each of the five Carbon themes by setting the "t
```html
<script>
let theme = "white"; // "white" | "g10" | "g80" | "g90" | "g100"
let theme = "white"; // "white" | "g10" | "g90" | "g100"
$: document.documentElement.setAttribute("theme", theme);
</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
@import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss";
@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";
@use '@carbon/styles/scss/config' with (
$use-akamai-cdn: true,
$prefix: 'bx'
);
@use "@carbon/styles/scss/theme" as *;
@use "@carbon/styles/scss/themes" as *;
@use "@carbon/styles/scss/fonts";
@use "@carbon/styles/scss/utilities" as *;
// The default theme is "white" (White)
:root {
@include carbon--theme($carbon--theme--white, true) {
@include emit-component-tokens($tag-colors);
@include emit-component-tokens($notification-colors);
}
@include theme($white);
}
// Set the <html> theme attribute to "g10" to use the Gray 10 theme
// <html theme="g10">
:root[theme="g10"] {
@include carbon--theme($carbon--theme--g10, true) {
@include emit-component-tokens($tag-colors);
@include emit-component-tokens($notification-colors);
}
[data-carbon-theme='g10'] {
@include theme($g10);
}
// Set the <html> theme attribute to "g80" to use the Gray 80 theme
// <html theme="g80">
:root[theme="g80"] {
@include carbon--theme($carbon--theme--g80, true) {
@include emit-component-tokens($tag-colors);
@include emit-component-tokens($notification-colors);
}
[data-carbon-theme='g90'] {
@include theme($g90);
}
// Set the <html> theme attribute to "g90" to use the Gray 90 theme
// <html theme="g90">
:root[theme="g90"] {
@include carbon--theme($carbon--theme--g90, true) {
@include emit-component-tokens($tag-colors);
@include emit-component-tokens($notification-colors);
}
[data-carbon-theme='g100'] {
@include theme($g100);
}
// Set the <html> theme attribute to "g100" to use the Gray 100 theme
// <html theme="g100">
:root[theme="g100"] {
@include carbon--theme($carbon--theme--g100, true) {
@include emit-component-tokens($tag-colors);
@include emit-component-tokens($notification-colors);
}
@import "@carbon/styles/scss/reset";
@import "@carbon/styles/scss/components";
.bx--text-truncate-end {
@include text-truncate-end;
}
.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
@import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss";
$carbon--theme: $carbon--theme--g10;
@include carbon--theme();
$feature-flags: (
ui-shell: true,
grid-columns-16: true
// Use g10 theme
@use '@carbon/styles/scss/config' with (
$use-akamai-cdn: true,
$prefix: 'bx'
);
@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;
$css--helpers: true;
$css--body: true;
$css--use-layer: true;
$css--reset: true;
$css--default-type: true;
$css--plex: true;
:root {
@include theme($g10);
}
@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";
@import "@carbon/styles/scss/reset";
@import "@carbon/styles/scss/components";
.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
@import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss";
$carbon--theme: $carbon--theme--g100;
@include carbon--theme();
$feature-flags: (
ui-shell: true,
grid-columns-16: true
// Use g10 theme
@use '@carbon/styles/scss/config' with (
$use-akamai-cdn: true,
$prefix: 'bx'
);
@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;
$css--helpers: true;
$css--body: true;
$css--use-layer: true;
$css--reset: true;
$css--default-type: true;
$css--plex: true;
:root {
@include theme($g100);
}
@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/styles/scss/reset";
@import "@carbon/styles/scss/components";
@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;
}

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
@import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss";
$carbon--theme: $carbon--theme--g90;
@include carbon--theme();
$feature-flags: (
ui-shell: true,
grid-columns-16: true
// Use g10 theme
@use '@carbon/styles/scss/config' with (
$use-akamai-cdn: true,
$prefix: 'bx'
);
@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;
$css--helpers: true;
$css--body: true;
$css--use-layer: true;
$css--reset: true;
$css--default-type: true;
$css--plex: true;
:root {
@include theme($g90);
}
@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/styles/scss/reset";
@import "@carbon/styles/scss/components";
@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;
}

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 {
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.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,
"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:svite": "vite dev",
"build": "run-s build:*",
@ -10,13 +10,14 @@
"build:svite": "vite build"
},
"devDependencies": {
"@ibm/plex": "^6.1.1",
"@sveltech/routify": "^1.9.10",
"@sveltejs/vite-plugin-svelte": "^3.0.1",
"carbon-components-svelte": "../",
"carbon-icons-svelte": "^12.4.1",
"clipboard-copy": "^4.0.1",
"cross-env": "^7.0.3",
"mdsvex": "^0.10.6",
"mdsvex": "^0.11.0",
"minisearch": "^6.2.0",
"npm-run-all": "^4.1.5",
"prettier": "^2.7.1",

197
docs/src/COMPONENT_API.json
View file

@ -21,7 +21,7 @@
"name": "size",
"kind": "let",
"description": "Specify the size of the accordion",
"type": "\"sm\" | \"xl\"",
"type": "\"sm\" | \"lg\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -453,7 +453,7 @@
"name": "kind",
"kind": "let",
"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\"",
"isFunction": false,
"isFunctionDeclaration": false,
@ -465,8 +465,8 @@
"name": "size",
"kind": "let",
"description": "Specify the size of button",
"type": "\"default\" | \"field\" | \"small\" | \"lg\" | \"xl\"",
"value": "\"default\"",
"type": "\"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\"",
"value": "\"lg\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -1519,7 +1519,7 @@
"name": "size",
"kind": "let",
"description": "Set the size of the combobox",
"type": "\"sm\" | \"xl\"",
"type": "\"sm\" | \"lg\" ",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -1939,7 +1939,7 @@
"name": "size",
"kind": "let",
"description": "Specify the size of the content switcher",
"type": "\"sm\" | \"xl\"",
"type": "\"sm\" | \"lg\" ",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -3009,7 +3009,7 @@
"name": "size",
"kind": "let",
"description": "Set the size of the input",
"type": "\"sm\" | \"xl\"",
"type": "\"sm\" | \"lg\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -3322,7 +3322,7 @@
"name": "size",
"kind": "let",
"description": "Specify the size of the dropdown field",
"type": "\"sm\" | \"lg\" | \"xl\"",
"type": "\"sm\" | \"lg\" ",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -4291,8 +4291,8 @@
"name": "size",
"kind": "let",
"description": "Specify the size of button skeleton",
"type": "\"default\" | \"field\" | \"small\"",
"value": "\"default\"",
"type": "\"sm\" | \"md\" | \"lg\"",
"value": "\"lg\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -5867,7 +5867,7 @@
"name": "size",
"kind": "let",
"description": "Set the size of the list box",
"type": "\"sm\" | \"xl\"",
"type": "\"sm\" | \"lg\" ",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -7047,7 +7047,7 @@
"name": "size",
"kind": "let",
"description": "Set the size of the combobox",
"type": "\"sm\" | \"lg\" | \"xl\"",
"type": "\"sm\" | \"lg\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -7584,7 +7584,7 @@
"name": "size",
"kind": "let",
"description": "Set the size of the input",
"type": "\"sm\" | \"xl\"",
"type": "\"sm\" | \"lg\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -7988,7 +7988,7 @@
"name": "size",
"kind": "let",
"description": "Specify the size of the overflow menu",
"type": "\"sm\" | \"xl\"",
"type": "\"sm\" | \"lg\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -8639,7 +8639,7 @@
"name": "size",
"kind": "let",
"description": "Set the size of the input",
"type": "\"sm\" | \"xl\"",
"type": "\"sm\" | \"lg\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -9012,6 +9012,27 @@
"typedefs": [],
"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",
"filePath": "src/ProgressBar/ProgressBar.svelte",
@ -9930,8 +9951,8 @@
"name": "size",
"kind": "let",
"description": "Specify the size of the search input",
"type": "\"sm\" | \"lg\" | \"xl\"",
"value": "\"xl\"",
"type": "\"sm\" | \"md\" | \"lg\"",
"value": "\"md\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -10154,8 +10175,8 @@
"name": "size",
"kind": "let",
"description": "Specify the size of the search input",
"type": "\"sm\" | \"lg\" | \"xl\"",
"value": "\"xl\"",
"type": "\"sm\" | \"md\" | \"lg\"",
"value": "\"md\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -10193,7 +10214,7 @@
"name": "size",
"kind": "let",
"description": "Set the size of the select input",
"type": "\"sm\" | \"xl\"",
"type": "\"sm\" | \"lg\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -11860,13 +11881,13 @@
}
],
"events": [
{ "type": "forwarded", "name": "click", "element": "li" },
{ "type": "forwarded", "name": "mouseover", "element": "li" },
{ "type": "forwarded", "name": "mouseenter", "element": "li" },
{ "type": "forwarded", "name": "mouseleave", "element": "li" }
{ "type": "forwarded", "name": "click", "element": "a" },
{ "type": "forwarded", "name": "mouseover", "element": "a" },
{ "type": "forwarded", "name": "mouseenter", "element": "a" },
{ "type": "forwarded", "name": "mouseleave", "element": "a" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "li" }
"rest_props": { "type": "Element", "name": "a" }
},
{
"moduleName": "TabContent",
@ -12191,11 +12212,11 @@
"reactive": true
},
{
"name": "type",
"name": "contained",
"kind": "let",
"description": "Specify the type of tabs",
"type": "\"default\" | \"container\"",
"value": "\"default\"",
"description": "Set to `true` for tabs to be contained",
"type": "boolean",
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -12213,30 +12234,6 @@
"isRequired": false,
"constant": 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": [],
@ -12244,11 +12241,7 @@
{ "name": "__default__", "default": true, "slot_props": "{}" },
{ "name": "content", "default": false, "slot_props": "{}" }
],
"events": [
{ "type": "forwarded", "name": "keypress", "element": "div" },
{ "type": "forwarded", "name": "click", "element": "a" },
{ "type": "dispatched", "name": "change" }
],
"events": [{ "type": "dispatched", "name": "change" }],
"typedefs": [],
"rest_props": { "type": "Element", "name": "div" }
},
@ -12486,7 +12479,6 @@
"kind": "let",
"description": "Specify the number of cols",
"type": "number",
"value": "50",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -12709,7 +12701,7 @@
"name": "size",
"kind": "let",
"description": "Set the size of the input",
"type": "\"sm\" | \"xl\"",
"type": "\"sm\" | \"lg\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -13086,9 +13078,9 @@
],
"typedefs": [
{
"type": "\"white\" | \"g10\" | \"g80\" | \"g90\" | \"g100\"",
"type": "\"white\" | \"g10\" | \"g90\" | \"g100\"",
"name": "CarbonTheme",
"ts": "type CarbonTheme = \"white\" | \"g10\" | \"g80\" | \"g90\" | \"g100\""
"ts": "type CarbonTheme = \"white\" | \"g10\" | \"g90\" | \"g100\""
}
]
},
@ -13198,7 +13190,7 @@
"name": "size",
"kind": "let",
"description": "Specify the size of the input",
"type": "\"sm\" | \"xl\"",
"type": "\"sm\" | \"lg\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -13675,8 +13667,8 @@
"name": "size",
"kind": "let",
"description": "Specify the toggle size",
"type": "\"default\" | \"sm\"",
"value": "\"default\"",
"type": "\"md\" | \"sm\"",
"value": "\"md\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -13781,18 +13773,6 @@
],
"moduleExports": [],
"slots": [
{
"name": "labelA",
"default": false,
"fallback": "{labelA}",
"slot_props": "{}"
},
{
"name": "labelB",
"default": false,
"fallback": "{labelB}",
"slot_props": "{}"
},
{
"name": "labelText",
"default": false,
@ -13818,65 +13798,6 @@
"typedefs": [],
"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",
"filePath": "src/DataTable/Toolbar.svelte",
@ -14589,8 +14510,8 @@
"name": "size",
"kind": "let",
"description": "Specify the TreeView size",
"type": "\"default\" | \"compact\"",
"value": "\"default\"",
"type": "\"xs\" | \"sm\"",
"value": "\"sm\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,

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

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

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

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

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

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

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

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

108
docs/src/global.css
View file

@ -1,5 +1,5 @@
html[theme="g90"] .code-override {
border: 1px solid var(--cds-ui-03);
border: 1px solid var(--bx-border-subtle-01);
}
.code-override .bx--snippet {
@ -23,9 +23,9 @@ html[theme="g90"] .code-override {
}
.code-override .bx--snippet-container pre {
font-size: var(--cds-code-02-font-size);
line-height: var(--cds-code-02-line-height);
letter-spacing: var(--cds-code-02-letter-spacing);
font-size: var(--bx-code-02-font-size);
line-height: var(--bx-code-02-line-height);
letter-spacing: var(--bx-code-02-letter-spacing);
cursor: text;
}
@ -118,7 +118,7 @@ html[theme="g90"] .code-override {
}
.prose .toc {
margin-bottom: var(--cds-layout-01);
margin-bottom: var(--bx-spacing-05);
}
.table {
@ -126,9 +126,9 @@ html[theme="g90"] .code-override {
max-height: calc(100vh - 3rem);
top: 3rem;
margin-top: -3rem;
padding-top: var(--cds-spacing-05);
padding-bottom: var(--cds-spacing-05);
padding-left: var(--cds-spacing-08);
padding-top: var(--bx-spacing-05);
padding-bottom: var(--bx-spacing-05);
padding-left: var(--bx-spacing-08);
overflow-y: auto;
}
@ -149,7 +149,7 @@ html[theme="g90"] .code-override {
.preview-viewer > .bx--aspect-ratio,
.preview-viewer [data-outline] {
outline: 1px solid var(--cds-interactive-04);
outline: 1px solid var(--bx-interactive);
}
[data-outline] {
@ -157,7 +157,7 @@ html[theme="g90"] .code-override {
}
[data-outline] ~ [data-outline] {
margin-top: var(--cds-spacing-08);
margin-top: var(--bx-spacing-08);
}
#select-theme {
@ -169,46 +169,46 @@ html[theme="g90"] .code-override {
}
.prose .toc {
margin-bottom: var(--cds-layout-01);
margin-bottom: var(--bx-spacing-05);
}
.code-01 {
font-size: var(--cds-code-01-font-size);
font-weight: var(--cds-code-01-font-weight);
letter-spacing: var(--cds-code-01-letter-spacing);
line-height: var(--cds-code-01-line-height);
font-size: var(--bx-code-01-font-size);
font-weight: var(--bx-code-01-font-weight);
letter-spacing: var(--bx-code-01-letter-spacing);
line-height: var(--bx-code-01-line-height);
}
.body-short-01 {
font-size: var(--cds-body-short-01-font-size);
font-weight: var(--cds-body-short-01-font-weight);
letter-spacing: var(--cds-body-short-01-letter-spacing);
line-height: var(--cds-body-short-01-line-height);
.body-compact-01 {
font-size: var(--bx-body-compact-01-font-size);
font-weight: var(--bx-body-compact-01-font-weight);
letter-spacing: var(--bx-body-compact-01-letter-spacing);
line-height: var(--bx-body-compact-01-line-height);
}
.bx--col > h1 {
font-size: var(--cds-expressive-heading-05-font-size);
font-weight: var(--cds-expressive-heading-05-font-weight);
letter-spacing: var(--cds-expressive-heading-05-letter-spacing);
line-height: var(--cds-expressive-heading-05-line-height);
margin-bottom: var(--cds-layout-01);
font-size: var(--bx-fluid-heading-05-font-size);
font-weight: var(--bx-fluid-heading-05-font-weight);
letter-spacing: var(--bx-fluid-heading-05-letter-spacing);
line-height: var(--bx-fluid-heading-05-line-height);
margin-bottom: var(--bx-spacing-05);
}
.big-paragraph {
font-size: var(--cds-expressive-heading-03-font-size);
font-weight: var(--cds-expressive-heading-03-font-weight);
letter-spacing: var(--cds-expressive-heading-03-letter-spacing);
line-height: var(--cds-expressive-heading-03-line-height);
margin-top: var(--cds-layout-03);
margin-bottom: var(--cds-layout-06);
font-size: var(--bx-fluid-heading-03-font-size);
font-weight: var(--bx-fluid-heading-03-font-weight);
letter-spacing: var(--bx-fluid-heading-03-letter-spacing);
line-height: var(--bx-fluid-heading-03-line-height);
margin-top: var(--bx-spacing-07);
margin-bottom: var(--bx-spacing-12);
}
.big-link,
.bx--col > .big-paragraph > code {
font-size: var(--cds-expressive-heading-03-font-size);
font-weight: var(--cds-expressive-heading-03-font-weight);
letter-spacing: var(--cds-expressive-heading-03-letter-spacing);
line-height: var(--cds-expressive-heading-03-line-height);
font-size: var(--bx-fluid-heading-03-font-size);
font-weight: var(--bx-fluid-heading-03-font-weight);
letter-spacing: var(--bx-fluid-heading-03-letter-spacing);
line-height: var(--bx-fluid-heading-03-line-height);
}
.bx--col > p {
@ -216,32 +216,32 @@ html[theme="g90"] .code-override {
}
.bx--col > p > code {
font-size: var(--cds-code-02-font-size);
font-weight: var(--cds-code-02-font-weight);
line-height: var(--cds-code-02-line-height);
letter-spacing: var(--cds-code-02-letter-spacing);
background-color: var(--cds-ui-03);
font-size: var(--bx-code-02-font-size);
font-weight: var(--bx-code-02-font-weight);
line-height: var(--bx-code-02-line-height);
letter-spacing: var(--bx-code-02-letter-spacing);
background-color: var(--bx-layer-accent-01);
border-radius: 0.25rem;
padding: 0 var(--cds-spacing-02);
padding: 0 var(--bx-spacing-02);
}
[class*="bx--col"] > h2,
.bx--tab-content > h2 {
font-size: var(--cds-expressive-heading-04-font-size);
font-weight: var(--cds-expressive-heading-04-font-weight);
letter-spacing: var(--cds-expressive-heading-04-letter-spacing);
line-height: var(--cds-expressive-heading-04-line-height);
padding-top: var(--cds-layout-03);
margin-bottom: var(--cds-layout-01);
font-size: var(--bx-fluid-heading-04-font-size);
font-weight: var(--bx-fluid-heading-04-font-weight);
letter-spacing: var(--bx-fluid-heading-04-letter-spacing);
line-height: var(--bx-fluid-heading-04-line-height);
padding-top: var(--bx-spacing-07);
margin-bottom: var(--bx-spacing-05);
}
.bx--col > h4 {
font-size: var(--cds-expressive-heading-02-font-size);
font-weight: var(--cds-expressive-heading-02-font-weight);
letter-spacing: var(--cds-expressive-heading-02-letter-spacing);
line-height: var(--cds-expressive-heading-02-line-height);
padding-top: var(--cds-layout-04);
margin-bottom: var(--cds-layout-01);
font-size: var(--bx-fluid-heading-02-font-size);
font-weight: var(--bx-fluid-heading-02-font-weight);
letter-spacing: var(--bx-fluid-heading-02-letter-spacing);
line-height: var(--bx-fluid-heading-02-line-height);
padding-top: var(--bx-spacing-09);
margin-bottom: var(--bx-spacing-05);
}
.bx--col > h2,
@ -252,5 +252,5 @@ html[theme="g90"] .code-override {
}
.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 "../../css/all.css";
import "carbon-components-svelte/css/all.css";
import "./global.css";
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 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);
}
});
@ -87,7 +87,6 @@
>
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
@ -150,7 +149,7 @@
{#each api_components as component (component.moduleName)}
<Tab label="{component.moduleName}" />
{/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)}
<TabContent>
<ComponentApi component="{component}" />
@ -177,13 +176,13 @@
.bar {
display: flex;
justify-content: space-between;
margin-bottom: var(--cds-layout-02);
border-bottom: 1px solid var(--cds-ui-03);
margin-bottom: var(--bx-spacing-06);
border-bottom: 1px solid var(--bx-ui-03);
}
:global(.toc h5) {
margin-top: var(--cds-spacing-06);
margin-bottom: var(--cds-spacing-03);
margin-top: var(--bx-spacing-06);
margin-bottom: var(--bx-spacing-03);
}
.toc.mobile {
@ -193,7 +192,7 @@
@media (max-width: 1056px) {
.toc.mobile {
display: block;
margin-bottom: var(--cds-spacing-09);
margin-bottom: var(--bx-spacing-09);
}
}
</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" />
## Extra-large size
## Large size
<Accordion size="xl">
<Accordion size="lg">
<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>

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:
<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>Medium</strong>: 672 - 1056px</ListItem>
<ListItem><strong>Large</strong>: 1056 - 1312px</ListItem>

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

@ -30,7 +30,7 @@
## Danger tertiary button
<Button kind="danger-tertiary">Danger tertiary button</Button>
<Button kind="danger--tertiary">Danger tertiary button</Button>
## Danger tertiary, icon-only button
@ -40,11 +40,11 @@
</div>
</InlineNotification>
<Button kind="danger-tertiary"iconDescription="Delete" icon={TrashCan} />
<Button kind="danger--tertiary"iconDescription="Delete" icon={TrashCan} />
## Danger ghost button
<Button kind="danger-ghost">Danger ghost button</Button>
<Button kind="danger--ghost">Danger ghost button</Button>
## Button with icon
@ -90,36 +90,36 @@ If an `href` value is specified, the component will render an [anchor element](h
## Field size
<Button size="field">Primary</Button>
<Button size="field" kind="secondary">Secondary</Button>
<Button size="field" kind="tertiary">Tertiary</Button>
<Button size="field" kind="ghost">Ghost</Button>
<Button size="field" kind="danger">Danger</Button>
<Button size="md">Primary</Button>
<Button size="md" kind="secondary">Secondary</Button>
<Button size="md" kind="tertiary">Tertiary</Button>
<Button size="md" kind="ghost">Ghost</Button>
<Button size="md" kind="danger">Danger</Button>
## Small size
<Button size="small">Primary</Button>
<Button size="small" kind="secondary">Secondary</Button>
<Button size="small" kind="tertiary">Tertiary</Button>
<Button size="small" kind="ghost">Ghost</Button>
<Button size="small" kind="danger">Danger</Button>
<Button size="sm">Primary</Button>
<Button size="sm" kind="secondary">Secondary</Button>
<Button size="sm" kind="tertiary">Tertiary</Button>
<Button size="sm" kind="ghost">Ghost</Button>
<Button size="sm" kind="danger">Danger</Button>
## 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" kind="secondary">Secondary</Button>
<Button size="xl" kind="tertiary">Tertiary</Button>
<Button size="xl" kind="ghost">Ghost</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
<Button disabled>Disabled button</Button>

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

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

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

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

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

@ -1416,4 +1416,4 @@ Pass an object with `"empty"` set to `true` to render an empty table header colu
## Skeleton (compact size)
<DataTableSkeleton showHeader={false} showToolbar={false} size="compact" />
<DataTableSkeleton showHeader={false} showToolbar={false} size="compact" />

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" />
</DatePicker>
## Extra-large size
## Large size
<DatePicker>
<DatePickerInput size="xl" labelText="Date of birth" placeholder="mm/dd/yyyy" />
<DatePickerInput size="lg" labelText="Date of birth" placeholder="mm/dd/yyyy" />
</DatePicker>
## 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: "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: "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.
<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")}>
Native element
</a>

14
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`:
<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>two-way binding by setting <strong>files</strong> to <strong>[]</strong></ListItem>
</UnorderedList>
@ -95,11 +95,11 @@ Use the `errorSubject` and `errorBody` props to customize the error message.
## Item sizes
The default `FileUploaderItem` size is "default".
The default `FileUploaderItem` size is "lg".
<FileUploaderItem size="default" name="README.md" status="uploading" />
<FileUploaderItem size="field" name="README.md" status="uploading" />
<FileUploaderItem size="small" name="README.md" status="uploading" />
<FileUploaderItem size="lg" name="README.md" status="uploading" />
<FileUploaderItem size="md" name="README.md" status="uploading" />
<FileUploaderItem size="sm" name="README.md" status="uploading" />
## Drop container
@ -111,7 +111,7 @@ The following example accepts files smaller than 1 kB.
<FileUploaderDropContainer
multiple
labelText="Drag and drop files here or click to upload"
labelText="Drag and drop files here or click to upload"
validateFiles={files => {
return files.filter(file => file.size < 1_024)
}}
@ -122,4 +122,4 @@ The following example accepts files smaller than 1 kB.
## Skeleton
<FileUploaderSkeleton />
<FileUploaderSkeleton />

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

@ -37,7 +37,7 @@ To prevent alphabetical item ordering, pass an empty function to the `sortItem`
<MultiSelect titleText="Contact" label="Select contact methods..."
items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}"
{id: "2", text: "Fax"}]}"
sortItem="{() => {}}"
/>
@ -58,7 +58,7 @@ To select (or bind) items, pass an array of item ids to `selectedIds`.
<MultiSelect selectedIds="{["0", "1"]}" titleText="Contact" label="Select contact methods..."
items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}"
{id: "2", text: "Fax"}]}"
/>
## Multiple multi-select dropdowns
@ -140,9 +140,9 @@ Set `direction` to `"top"` for the dropdown menu to appear above the input.
{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"},
{id: "1", text: "Email"},
{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} />
## Extra-large size
## Large size
<NumberInput size="xl" label="Clusters" value={0} />
<NumberInput size="lg" label="Clusters" value={0} />
## 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" />
</OverflowMenu>
## Extra-large size
## Large size
<OverflowMenu size="xl">
<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..." />
## Extra-large size
## Large size
<PasswordInput size="xl" labelText="Password" placeholder="Enter password..." />
<PasswordInput size="lg" labelText="Password" placeholder="Enter password..." />
## Small size

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

@ -1,5 +1,9 @@
---
components: ["Popover", "PopoverContent"]
---
<script>
import { Popover } from "carbon-components-svelte";
import { Popover, PopoverContent } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
@ -8,9 +12,9 @@
By default, the position of the popover component is absolute.
<div data-outline>
Parent
<Popover open>
<div style="padding: var(--cds-spacing-05)">Content</div>
Parent
<PopoverContent style="padding: var(--bx-spacing-05)">Content</PopoverContent>
</Popover>
</div>
@ -21,7 +25,7 @@ Set `relative` to `true` to use a relative position.
<div data-outline>
Parent
<Popover relative open>
<div style="padding: var(--cds-spacing-05)">Content</div>
<div style="padding: var(--bx-spacing-05)">Content</div>
</Popover>
</div>
@ -32,7 +36,7 @@ Set `closeOnOutsideClick` to set `open` to `false` when clicking outside of the
<div data-outline>
Parent
<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>
</div>
@ -45,67 +49,67 @@ The default `align` value is `"top"`.
<div data-outline>
Parent
<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>
</div>
<div data-outline>
Parent
<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>
</div>
<div data-outline>
Parent
<Popover open align="bottom">
<div style="padding: var(--cds-spacing-05)">bottom</div>
<div style="padding: var(--bx-spacing-05)">bottom</div>
</Popover>
</div>
<div data-outline>
Parent
<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>
</div>
<div data-outline>
Parent
<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>
</div>
<div data-outline>
Parent
<Popover open align="left">
<div style="padding: var(--cds-spacing-05)">left</div>
<div style="padding: var(--bx-spacing-05)">left</div>
</Popover>
</div>
<div data-outline>
Parent
<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>
</div>
<div data-outline>
Parent
<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>
</div>
<div data-outline>
Parent
<Popover open align="right">
<div style="padding: var(--cds-spacing-05)">right</div>
<div style="padding: var(--bx-spacing-05)">right</div>
</Popover>
</div>
<div data-outline>
Parent
<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>
</div>
<div data-outline>
Parent
<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>
</div>
@ -114,7 +118,7 @@ The default `align` value is `"top"`.
<div data-outline>
Parent
<Popover caret open>
<div style="padding: var(--cds-spacing-05)">Content</div>
<div style="padding: var(--bx-spacing-05)">Content</div>
</Popover>
</div>
@ -127,7 +131,7 @@ Possible `align` values include `"top"`, `"top-left"`, `"top-right"`, `"bottom"`
<div data-outline>
Parent
<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>
</div>
@ -136,7 +140,7 @@ Possible `align` values include `"top"`, `"top-left"`, `"top-right"`, `"bottom"`
<div data-outline>
Parent
<Popover light open>
<div style="padding: var(--cds-spacing-05)">Content</div>
<div style="padding: var(--bx-spacing-05)">Content</div>
</Popover>
</div>
@ -145,7 +149,7 @@ Possible `align` values include `"top"`, `"top-left"`, `"top-right"`, `"bottom"`
<div data-outline>
Parent
<Popover highContrast open>
<div style="padding: var(--cds-spacing-05)">Content</div>
<div style="padding: var(--bx-spacing-05)">Content</div>
</Popover>
</div>
@ -153,4 +157,4 @@ Possible `align` values include `"top"`, `"top-left"`, `"top-right"`, `"bottom"`
Use the `open` prop to manage state with an external element, like a button.
<FileSource src="/framed/Popover/WithButton" />
<FileSource src="/framed/Popover/WithButton" />

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

@ -6,7 +6,7 @@
## 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 />

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)}>
<SelectItem value="white" />
<SelectItem value="g10" />
<SelectItem value="g80" />
<SelectItem value="g90" />
<SelectItem value="g100" />
</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)}>
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
@ -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)}>
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
@ -51,10 +48,9 @@ The `selected` prop is reactive and supports two-way binding.
## 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="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
@ -64,7 +60,6 @@ The `selected` prop is reactive and supports two-way binding.
<Select hideLabel labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
@ -78,7 +73,6 @@ The `selected` prop is reactive and supports two-way binding.
<SelectItem value="g10" text="Gray 10" />
</SelectItemGroup>
<SelectItemGroup label="Dark theme">
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</SelectItemGroup>
@ -89,7 +83,6 @@ The `selected` prop is reactive and supports two-way binding.
<Select light labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
@ -99,17 +92,15 @@ The `selected` prop is reactive and supports two-way binding.
<Select inline labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
## Extra-large size
## 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="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
@ -119,7 +110,6 @@ The `selected` prop is reactive and supports two-way binding.
<Select size="sm" labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
@ -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" >
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
@ -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" >
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
@ -149,7 +137,6 @@ The `selected` prop is reactive and supports two-way binding.
<Select disabled labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>

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

@ -182,4 +182,4 @@ components: ["StructuredList", "StructuredListSkeleton", "StructuredListBody", "
## Skeleton
<StructuredListSkeleton rows={3} />
<StructuredListSkeleton rows={3} />

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>
</Tabs>
## Container type
## Contained
<Tabs type="container">
<Tabs contained>
<Tab label="Tab label 1" />
<Tab label="Tab label 2" />
<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} />
## 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" />
## 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

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

@ -33,9 +33,9 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
</TimePickerSelect>
</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">
<SelectItem value="am" text="AM" />
<SelectItem value="pm" text="PM" />

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

@ -1,9 +1,9 @@
---
components: ["Toggle", "ToggleSkeleton"]
components: ["Toggle"]
---
<script>
import { Toggle, ToggleSkeleton } from "carbon-components-svelte";
import { Toggle } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</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" />
## 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
<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
<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:
<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>text</strong>: the node text</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" />
## 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

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

@ -4,7 +4,7 @@
import Preview from "../../components/Preview.svelte";
</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
@ -31,4 +31,4 @@ The `truncate` action can be used on plain HTML elements.
</h4>
<h4 use:truncate={{ clamp: "front" }}>
Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM.
</h4>
</h4>

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

@ -5,7 +5,10 @@
let events = [];
</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>
<h6>Breakpoint size</h6>
@ -17,10 +20,10 @@
<style>
p,
h1 {
margin-bottom: var(--cds-spacing-08);
margin-bottom: var(--bx-spacing-08);
}
h6 {
margin-bottom: var(--cds-spacing-03);
margin-bottom: var(--bx-spacing-03);
}
</style>

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

@ -4,9 +4,9 @@
let checked = false;
</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>
</div>

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

@ -6,10 +6,10 @@
</script>
{#each values as value}
<Checkbox bind:group labelText="{value}" value="{value}" />
<Checkbox bind:group="{group}" labelText="{value}" value="{value}" />
{/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>
</div>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -4,9 +4,9 @@
let value = null;
</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 = 0)}">Set to 0</Button>
</div>

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

@ -4,9 +4,9 @@
let page = 2;
</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}">
Set page to 1
</Button>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -4,7 +4,7 @@
let selected = 0;
</script>
<Tabs bind:selected>
<Tabs bind:selected="{selected}">
<Tab label="Tab label 1" />
<Tab label="Tab label 2" />
<Tab label="Tab label 3" />
@ -15,7 +15,7 @@
</svelte:fragment>
</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>
</div>

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

@ -11,7 +11,7 @@
<Theme bind: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}" />
{/each}
</RadioButtonGroup>

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

@ -8,10 +8,10 @@
let theme = "g90";
</script>
<Theme bind:theme persist persistKey="__carbon-theme" />
<Theme bind:theme="{theme}" persist persistKey="__carbon-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}" />
{/each}
</RadioButtonGroup>

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

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

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

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

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

@ -4,11 +4,11 @@
let open = true;
</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>
</Tooltip>
<div style="margin-top: var(--cds-spacing-12);">
<div style="margin-top: var(--bx-spacing-12);">
<Button size="small" on:click="{() => (open = !open)}">
{open ? "Close tooltip" : "Open tooltip"}
</Button>
@ -18,6 +18,6 @@
<style>
div {
margin-top: var(--cds-spacing-05);
margin-top: var(--bx-spacing-05);
}
</style>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -71,10 +71,10 @@
</svelte:fragment>
<HeaderUtilities>
<HeaderSearch
bind:ref
bind:active
bind:value
bind:selectedResultIndex
bind:ref="{ref}"
bind:active="{active}"
bind:value="{value}"
bind:selectedResultIndex="{selectedResultIndex}"
placeholder="Search services"
results="{results}"
on:active="{() => {
@ -116,7 +116,7 @@
</p>
<div style="overflow-x: scroll;">
{#each events as { type, ...rest }}
<div style="display: block; margin-bottom: var(--cds-layout-01)">
<div style="display: block; margin-bottom: var(--bx-spacing-05)">
<div><strong>on:{type}</strong></div>
{#if Object.keys(rest).length > 0}
<pre>{JSON.stringify(rest, null, 2)}</pre>

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
// conflict with how the iframe is displayed in the docs.
// 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.style.setProperty(
"color-scheme",
@ -31,11 +31,11 @@
:global(body.framed) {
min-height: 100vh;
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"]) {
outline: 1px solid var(--cds-interactive-04);
outline: 1px solid var(--bx-interactive-04);
}
:global(.framed .bx--content [class^="bx--col"]) {

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

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

10
package.json
View file

@ -32,21 +32,21 @@
"build:docs": "node scripts/build-docs",
"build:lib": "rollup -c",
"format": "prettier --write \"./**/*.{svelte,js,md}\"",
"release": "standard-version && yarn build:docs"
"release": "standard-version && npm run build:docs"
},
"dependencies": {
"flatpickr": "4.6.9"
},
"devDependencies": {
"@carbon/styles": "^1.47.0",
"@rollup/plugin-commonjs": "^21.0.3",
"@rollup/plugin-node-resolve": "^13.3.0",
"@tsconfig/svelte": "^4.0.1",
"autoprefixer": "^10.4.8",
"carbon-components": "10.58.12",
"carbon-icons-svelte": "^12.1.0",
"postcss": "^8.4.16",
"prettier": "^2.7.1",
"prettier-plugin-svelte": "^2.7.0",
"prettier": "^2.8.8",
"prettier-plugin-svelte": "^2.10.1",
"rollup": "^2.78.1",
"rollup-plugin-svelte": "^7.1.0",
"rollup-plugin-terser": "^7.0.2",
@ -55,7 +55,7 @@
"sveld": "^0.19.1",
"svelte": "^4.2.0",
"svelte-check": "^3.4.6",
"typescript": "^4.7.4"
"typescript": "^5.3.3"
},
"standard-version": {
"skip": {

4
src/Accordion/Accordion.svelte
View file

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

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