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

Merge branch 'master' into update-thumbnail-svelte

Browse source
This commit is contained in:
Andrea N. Cardona 2022-05-17 22:27:08 -05:00 • committed by GitHub
commit da3cf0afa0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
99 changed files with 2543 additions and 545 deletions
Download patch file Download diff file Expand all files Collapse all files

78
CHANGELOG.md
View file

@ -7,6 +7,84 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
<!-- ## Unreleased -->
## [0.64.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.64.0) - 2022-05-14
**Breaking Changes**
- set `flatpickrProps.static` in `DatePicker` to be true by default
- use data attribute instead of id for `DataTable` headers/rows
**Features**
- support custom column widths in `DataTable`
- dispatch "expand" and "collapse" events in `CodeSnippet`
**Fixes**
- use `@see` tag for flatpickr options link in `DatePicker`
- pressing "Enter" in `DatePicker` should update the value
- dispatched event type without detail should be `null`, not `any`
- type missing "open" event in `HeaderAction`
- use small button in multi-line `CodeSnippet`
**Documentation**
- make calendar variants of `DatePicker` more prominent
- add `DataTable` example "Custom column widths"
- add `CodeSnippet` examples "Expanded by default" and "Reactive example"
## [0.63.8](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.63.8) - 2022-05-07
**Fixes**
- elevate `Toolbar` z-index so overflow menu is not clipped by the table
## [0.63.7](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.63.7) - 2022-05-04
**Fixes**
- strongly type `translateWithId` prop in `Dropdown`
## [0.63.6](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.63.6) - 2022-05-04
**Fixes**
- add `translateWithIdsSelection` prop to `ComboBox`, `MultiSelect` to customize clear selection description
- use default values in `ListBoxMenuIcon` if `translateWithIds` is undefined
- use default values in `ListBoxSelection` if `translateWithIds` is undefined
## [0.63.5](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.63.5) - 2022-05-02
**Fixes**
- dispatch "change" event in `Tabs` only if selected index has changed
## [0.63.4](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.63.4) - 2022-04-30
**Fixes**
- add missing `"2x3"` ratio value to `AspectRatio`
- fix typo in `ToolbarSearch` shouldFilterRows type annotation
**Documentation**
- correctly generate icon, action imports in examples
- remove unnecessary `tooltipBodyId` in `Tooltip` examples
- add `DataTable` "Expandable and selectable" example
- add `DataTable` "Batch selection" example
## [0.63.3](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.63.3) - 2022-04-28
**Fixes**
- fix `FileUploaderItem` regression where `delete` event should be dispatched if status is "edit"
**Documentation**
- add `FileUploader` "Item (edit)" example
- revise `FileUploader` "Item (edit status, invalid state)" example to include `on:delete` usage
- add `FileUploader` "Item (edit status, invalid state with subject, body)" example
## [0.63.2](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.63.2) - 2022-04-23
**Fixes**

322
COMPONENT_INDEX.md
View file

@ -1,6 +1,6 @@
# Component Index
> 165 components exported from carbon-components-svelte@0.63.2.
> 165 components exported from carbon-components-svelte@0.64.0.
## Components
@ -255,9 +255,9 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :--------------- | :------- | :-------------------------------------------------------------------------------------------------------------- | ------------------ | ------------------------ |
| ratio | <code>let</code> | No | <code>"2x1" &#124; "16x9" &#124; "4x3" &#124; "1x1" &#124; "3x4" &#124; "3x2" &#124; "9x16" &#124; "1x2"</code> | <code>"2x1"</code> | Specify the aspect ratio |
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :--------------- | :------- | :--------------------------------------------------------------------------------------------------------------------------- | ------------------ | ------------------------ |
| ratio | <code>let</code> | No | <code>"2x1" &#124; "2x3" &#124; "16x9" &#124; "4x3" &#124; "1x1" &#124; "3x4" &#124; "3x2" &#124; "9x16" &#124; "1x2"</code> | <code>"2x1"</code> | Specify the aspect ratio |
### Slots
@ -563,14 +563,16 @@ None.
### Events
| Event name | Type | Detail |
| :----------- | :--------- | :----- |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| animationend | forwarded | -- |
| copy | dispatched | -- |
| Event name | Type | Detail |
| :----------- | :--------- | :---------------- |
| expand | dispatched | <code>null</code> |
| collapse | dispatched | <code>null</code> |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| animationend | forwarded | -- |
| copy | dispatched | <code>null</code> |
## `CodeSnippetSkeleton`
@ -649,31 +651,32 @@ export interface ComboBoxItem {
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :--------------- | :-------------------- | :------- | :---------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
| listRef | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the list HTML element |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the combobox menu dropdown |
| value | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the selected combobox value |
| selectedId | <code>let</code> | Yes | <code>ComboBoxItemId</code> | <code>undefined</code> | Set the selected item by value id |
| items | <code>let</code> | No | <code>ComboBoxItem[]</code> | <code>[]</code> | Set the combobox items |
| itemToString | <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 | <code>let</code> | No | <code>"bottom" &#124; "top"</code> | <code>"bottom"</code> | Specify the direction of the combobox dropdown menu |
| size | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | <code>undefined</code> | Set the size of the combobox |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the combobox |
| titleText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title text of the combobox |
| placeholder | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder text |
| helperText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
| invalidText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text |
| invalid | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
| warn | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an warning state |
| warnText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text |
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| shouldFilterItem | <code>let</code> | No | <code>(item: ComboBoxItem, value: string) => boolean</code> | <code>() => true</code> | Determine if an item should be filtered given the current combobox value |
| translateWithId | <code>let</code> | No | <code>(id: any) => string</code> | <code>undefined</code> | Override the default translation ids |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the list box component |
| name | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the input |
| clear | <code>function</code> | No | <code>(options?: { focus?: boolean; }) => void</code> | <code>() => { prevSelectedId = null; highlightedIndex = -1; highlightedId = undefined; selectedId = undefined; selectedItem = undefined; open = false; inputValue = ""; if (options?.focus !== false) ref?.focus(); }</code> | Clear the combo box programmatically |
| Prop name | Kind | Reactive | Type | Default value | Description |
| :----------------------- | :-------------------- | :------- | :---------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
| listRef | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the list HTML element |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the combobox menu dropdown |
| value | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the selected combobox value |
| selectedId | <code>let</code> | Yes | <code>ComboBoxItemId</code> | <code>undefined</code> | Set the selected item by value id |
| items | <code>let</code> | No | <code>ComboBoxItem[]</code> | <code>[]</code> | Set the combobox items |
| itemToString | <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 | <code>let</code> | No | <code>"bottom" &#124; "top"</code> | <code>"bottom"</code> | Specify the direction of the combobox dropdown menu |
| size | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | <code>undefined</code> | Set the size of the combobox |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the combobox |
| titleText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title text of the combobox |
| placeholder | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder text |
| helperText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
| invalidText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text |
| invalid | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
| warn | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an warning state |
| warnText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text |
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| shouldFilterItem | <code>let</code> | No | <code>(item: ComboBoxItem, value: string) => boolean</code> | <code>() => true</code> | Determine if an item should be filtered given the current combobox value |
| translateWithId | <code>let</code> | No | <code>(id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string</code> | <code>undefined</code> | Override the chevron icon label based on the open state.<br />Defaults to "Open menu" when closed and "Close menu" when open |
| translateWithIdSelection | <code>let</code> | No | <code>(id: "clearSelection") => string</code> | <code>undefined</code> | Override the label of the clear button when the input has a selection.<br />Defaults to "Clear selected item" since a combo box can only have on selection. |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the list box component |
| name | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the input |
| clear | <code>function</code> | No | <code>(options?: { focus?: boolean; }) => void</code> | <code>() => { prevSelectedId = null; highlightedIndex = -1; highlightedId = undefined; selectedId = undefined; selectedItem = undefined; open = false; inputValue = ""; if (options?.focus !== false) ref?.focus(); }</code> | Clear the combo box programmatically |
### Slots
@ -723,10 +726,10 @@ export interface ComboBoxItem {
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| submit | dispatched | -- |
| click:button--primary | dispatched | -- |
| close | dispatched | -- |
| open | dispatched | -- |
| submit | dispatched | <code>null</code> |
| click:button--primary | dispatched | <code>null</code> |
| close | dispatched | <code>null</code> |
| open | dispatched | <code>null</code> |
## `Content`
@ -796,7 +799,7 @@ None.
| open | dispatched | <code>HTMLElement</code> |
| click | forwarded | -- |
| keydown | forwarded | -- |
| close | dispatched | -- |
| close | dispatched | <code>null</code> |
## `ContextMenuDivider`
@ -859,12 +862,12 @@ None.
### Events
| Event name | Type | Detail |
| :--------- | :--------- | :----- |
| keydown | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| click | dispatched | -- |
| Event name | Type | Detail |
| :--------- | :--------- | :---------------- |
| keydown | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| click | dispatched | <code>null</code> |
## `ContextMenuRadioGroup`
@ -903,11 +906,11 @@ None.
### Events
| Event name | Type | Detail |
| :----------- | :--------- | :----- |
| click | forwarded | -- |
| animationend | forwarded | -- |
| copy | dispatched | -- |
| Event name | Type | Detail |
| :----------- | :--------- | :---------------- |
| click | forwarded | -- |
| animationend | forwarded | -- |
| copy | dispatched | <code>null</code> |
## `DataTable`
@ -924,6 +927,8 @@ export interface DataTableEmptyHeader {
display?: (item: Value) => DataTableValue;
sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1);
columnMenu?: boolean;
width?: string;
minWidth?: string;
}
export interface DataTableNonEmptyHeader {
@ -932,6 +937,8 @@ export interface DataTableNonEmptyHeader {
display?: (item: Value) => DataTableValue;
sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1);
columnMenu?: boolean;
width?: string;
minWidth?: string;
}
export type DataTableHeader = DataTableNonEmptyHeader | DataTableEmptyHeader;
@ -1043,7 +1050,7 @@ None.
| short | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the short variant |
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the date picker element |
| flatpickrProps | <code>let</code> | No | <code>import("flatpickr/dist/types/options").Options</code> | <code>{}</code> | Override the options passed to the Flatpickr instance<br />https://flatpickr.js.org/options |
| flatpickrProps | <code>let</code> | No | <code>import("flatpickr/dist/types/options").Options</code> | <code>{ static: true }</code> | Override the options passed to the Flatpickr instance.<br />@see https://flatpickr.js.org/options |
### Slots
@ -1138,30 +1145,30 @@ export interface DropdownItem {
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------------- | :--------------- | :------- | :------------------------------------------ | ----------------------------------------------------- | --------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element |
| inline | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to use the inline variant |
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the dropdown |
| selectedId | <code>let</code> | Yes | <code>DropdownItemId</code> | <code>undefined</code> | Specify the selected item id |
| items | <code>let</code> | No | <code>DropdownItem[]</code> | <code>[]</code> | Set the dropdown items |
| itemToString | <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 | <code>let</code> | No | <code>"default" &#124; "inline"</code> | <code>"default"</code> | Specify the type of dropdown |
| direction | <code>let</code> | No | <code>"bottom" &#124; "top"</code> | <code>"bottom"</code> | Specify the direction of the dropdown menu |
| size | <code>let</code> | No | <code>"sm" &#124; "lg" &#124; "xl"</code> | <code>undefined</code> | Specify the size of the dropdown field |
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the dropdown |
| titleText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title text |
| invalid | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
| invalidText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text |
| warn | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an warning state |
| warnText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text |
| helperText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
| label | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the list box label |
| hideLabel | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
| translateWithId | <code>let</code> | No | <code>(id: any) => string</code> | <code>undefined</code> | Override the default translation ids |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the list box component |
| name | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the list box |
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------------- | :--------------- | :------- | :---------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element |
| inline | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to use the inline variant |
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the dropdown |
| selectedId | <code>let</code> | Yes | <code>DropdownItemId</code> | <code>undefined</code> | Specify the selected item id |
| items | <code>let</code> | No | <code>DropdownItem[]</code> | <code>[]</code> | Set the dropdown items |
| itemToString | <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 | <code>let</code> | No | <code>"default" &#124; "inline"</code> | <code>"default"</code> | Specify the type of dropdown |
| direction | <code>let</code> | No | <code>"bottom" &#124; "top"</code> | <code>"bottom"</code> | Specify the direction of the dropdown menu |
| size | <code>let</code> | No | <code>"sm" &#124; "lg" &#124; "xl"</code> | <code>undefined</code> | Specify the size of the dropdown field |
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the dropdown |
| titleText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title text |
| invalid | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
| invalidText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text |
| warn | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an warning state |
| warnText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text |
| helperText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
| label | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the list box label |
| hideLabel | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
| translateWithId | <code>let</code> | No | <code>(id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string</code> | <code>undefined</code> | Override the chevron icon label based on the open state.<br />Defaults to "Open menu" when closed and "Close menu" when open |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the list box component |
| name | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the list box |
### Slots
@ -1605,10 +1612,11 @@ None.
### Events
| Event name | Type | Detail |
| :--------- | :--------- | :----- |
| click | forwarded | -- |
| close | dispatched | -- |
| Event name | Type | Detail |
| :--------- | :--------- | :---------------- |
| open | dispatched | <code>null</code> |
| close | dispatched | <code>null</code> |
| click | forwarded | -- |
## `HeaderActionLink`
@ -1884,13 +1892,13 @@ None.
### Events
| Event name | Type | Detail |
| :--------- | :--------- | :----- |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| success | dispatched | -- |
| Event name | Type | Detail |
| :--------- | :--------- | :---------------- |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| success | dispatched | <code>null</code> |
## `InlineNotification`
@ -2231,10 +2239,10 @@ None.
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| submit | dispatched | -- |
| click:button--primary | dispatched | -- |
| close | dispatched | -- |
| open | dispatched | -- |
| submit | dispatched | <code>null</code> |
| click:button--primary | dispatched | <code>null</code> |
| close | dispatched | <code>null</code> |
| open | dispatched | <code>null</code> |
## `ModalBody`
@ -2325,42 +2333,43 @@ export interface MultiSelectItem {
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :---------------- | :--------------- | :------- | :--------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------- |
| highlightedId | <code>let</code> | Yes | <code>null &#124; MultiSelectItemId</code> | <code>null</code> | Id of the highlighted ListBoxMenuItem |
| selectionRef | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the selection element |
| fieldRef | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the field box element |
| multiSelectRef | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the outer div element |
| inputRef | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the dropdown |
| value | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the multiselect value |
| selectedIds | <code>let</code> | Yes | <code>MultiSelectItemId[]</code> | <code>[]</code> | Set the selected ids |
| items | <code>let</code> | Yes | <code>MultiSelectItem[]</code> | <code>[]</code> | Set the multiselect items |
| itemToString | <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 | <code>let</code> | No | <code>(item: MultiSelectItem) => { name?: string; labelText?: any; title?: string; }</code> | <code>(item) => {}</code> | Override the item name, title, labelText passed to the checkbox input |
| size | <code>let</code> | No | <code>"sm" &#124; "lg" &#124; "xl"</code> | <code>undefined</code> | Set the size of the combobox |
| type | <code>let</code> | No | <code>"default" &#124; "inline"</code> | <code>"default"</code> | Specify the type of multiselect |
| direction | <code>let</code> | No | <code>"bottom" &#124; "top"</code> | <code>"bottom"</code> | Specify the direction of the multiselect dropdown menu |
| selectionFeedback | <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 |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the dropdown |
| filterable | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to filter items |
| filterItem | <code>let</code> | No | <code>(item: MultiSelectItem, value: string) => string</code> | <code>(item, value) => item.text.toLowerCase().includes(value.trim().toLowerCase())</code> | Override the filtering logic<br />The default filtering is an exact string comparison |
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| locale | <code>let</code> | No | <code>string</code> | <code>"en"</code> | Specify the locale |
| placeholder | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder text |
| sortItem | <code>let</code> | No | <code>((a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem) &#124; (() => void)</code> | <code>(a, b) => a.text.localeCompare(b.text, locale, { numeric: true })</code> | Override the sorting logic<br />The default sorting compare the item text value |
| translateWithId | <code>let</code> | No | <code>(id: any) => string</code> | <code>undefined</code> | Override the default translation ids |
| titleText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title text |
| useTitleInItem | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to pass the item to `itemToString` in the checkbox |
| invalid | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
| invalidText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text |
| warn | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an warning state |
| warnText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text |
| helperText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
| label | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the list box label |
| hideLabel | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the list box component |
| name | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the select |
| Prop name | Kind | Reactive | Type | Default value | Description |
| :----------------------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| highlightedId | <code>let</code> | Yes | <code>null &#124; MultiSelectItemId</code> | <code>null</code> | Id of the highlighted ListBoxMenuItem |
| selectionRef | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the selection element |
| fieldRef | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the field box element |
| multiSelectRef | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the outer div element |
| inputRef | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the dropdown |
| value | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the multiselect value |
| selectedIds | <code>let</code> | Yes | <code>MultiSelectItemId[]</code> | <code>[]</code> | Set the selected ids |
| items | <code>let</code> | Yes | <code>MultiSelectItem[]</code> | <code>[]</code> | Set the multiselect items |
| itemToString | <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 | <code>let</code> | No | <code>(item: MultiSelectItem) => { name?: string; labelText?: any; title?: string; }</code> | <code>(item) => {}</code> | Override the item name, title, labelText passed to the checkbox input |
| size | <code>let</code> | No | <code>"sm" &#124; "lg" &#124; "xl"</code> | <code>undefined</code> | Set the size of the combobox |
| type | <code>let</code> | No | <code>"default" &#124; "inline"</code> | <code>"default"</code> | Specify the type of multiselect |
| direction | <code>let</code> | No | <code>"bottom" &#124; "top"</code> | <code>"bottom"</code> | Specify the direction of the multiselect dropdown menu |
| selectionFeedback | <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 |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the dropdown |
| filterable | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to filter items |
| filterItem | <code>let</code> | No | <code>(item: MultiSelectItem, value: string) => string</code> | <code>(item, value) => item.text.toLowerCase().includes(value.trim().toLowerCase())</code> | Override the filtering logic<br />The default filtering is an exact string comparison |
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| locale | <code>let</code> | No | <code>string</code> | <code>"en"</code> | Specify the locale |
| placeholder | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder text |
| sortItem | <code>let</code> | No | <code>((a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem) &#124; (() => void)</code> | <code>(a, b) => a.text.localeCompare(b.text, locale, { numeric: true })</code> | Override the sorting logic<br />The default sorting compare the item text value |
| translateWithId | <code>let</code> | No | <code>(id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string</code> | <code>undefined</code> | Override the chevron icon label based on the open state.<br />Defaults to "Open menu" when closed and "Close menu" when open |
| translateWithIdSelection | <code>let</code> | No | <code>(id: import("../ListBox/ListBoxSelection.svelte").ListBoxSelectionTranslationId) => string</code> | <code>undefined</code> | Override the label of the clear button when the input has a selection.<br />Defaults to "Clear selected item" and "Clear all items" if more than one item is selected |
| titleText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title text |
| useTitleInItem | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to pass the item to `itemToString` in the checkbox |
| invalid | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
| invalidText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text |
| warn | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an warning state |
| warnText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text |
| helperText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
| label | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the list box label |
| hideLabel | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the list box component |
| name | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the select |
### Slots
@ -2780,9 +2789,9 @@ None.
### Events
| Event name | Type | Detail |
| :------------ | :--------- | :----- |
| click:outside | dispatched | -- |
| Event name | Type | Detail |
| :------------ | :--------- | :---------------- |
| click:outside | dispatched | <code>null</code> |
## `ProgressBar`
@ -3096,7 +3105,7 @@ None.
| blur | forwarded | -- |
| keydown | forwarded | -- |
| keyup | forwarded | -- |
| clear | dispatched | -- |
| clear | dispatched | <code>null</code> |
## `SearchSkeleton`
@ -3743,13 +3752,14 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :------------- | :--------------- | :------- | :------------------------------------------------------------------ | ---------------------- | --------------------------------------- |
| size | <code>let</code> | No | <code>"compact" &#124; "short" &#124; "medium" &#124; "tall"</code> | <code>undefined</code> | Set the size of the table |
| zebra | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use zebra styles |
| useStaticWidth | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use static width |
| sortable | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the sortable variant |
| stickyHeader | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable a sticky header |
| Prop name | Kind | Reactive | Type | Default value | Description |
| :------------- | :--------------- | :------- | :------------------------------------------------------------------ | ---------------------- | ---------------------------------------------- |
| size | <code>let</code> | No | <code>"compact" &#124; "short" &#124; "medium" &#124; "tall"</code> | <code>undefined</code> | Set the size of the table |
| zebra | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use zebra styles |
| useStaticWidth | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use static width |
| sortable | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the sortable variant |
| stickyHeader | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable a sticky header |
| tableStyle | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Set the style attribute on the `table` element |
### Slots
@ -3961,13 +3971,13 @@ None.
### Events
| Event name | Type | Detail |
| :--------- | :--------- | :----- |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| close | dispatched | -- |
| Event name | Type | Detail |
| :--------- | :--------- | :---------------- |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| close | dispatched | <code>null</code> |
## `TagSkeleton`
@ -4462,15 +4472,15 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :--------------- | :--------------- | :------- | :---------------------------------------------------------------------------------------------------------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| expanded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to expand the search bar |
| value | <code>let</code> | Yes | <code>number &#124; string</code> | <code>""</code> | Specify the value of the search input |
| persistent | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to keep the search bar expanded |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the search bar |
| shouldFilterRows | <code>let</code> | No | <code>boolean &#124; ((rows: import("./DataTable.svelte").DataTableRow, value: number &#124; string) => boolean)</code> | <code>false</code> | Set to `true` to filter table rows using the search value.<br /><br />If `true`, the default search excludes `id`, `cells` fields and<br />only does a basic comparison on string and number type cell values.<br /><br />To implement your own client-side filtering, pass a function<br />that accepts a row and value and returns a boolean. |
| tabindex | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify the tabindex |
| Prop name | Kind | Reactive | Type | Default value | Description |
| :--------------- | :--------------- | :------- | :--------------------------------------------------------------------------------------------------------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| expanded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to expand the search bar |
| value | <code>let</code> | Yes | <code>number &#124; string</code> | <code>""</code> | Specify the value of the search input |
| persistent | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to keep the search bar expanded |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the search bar |
| shouldFilterRows | <code>let</code> | No | <code>boolean &#124; ((row: import("./DataTable.svelte").DataTableRow, value: number &#124; string) => boolean)</code> | <code>false</code> | Set to `true` to filter table rows using the search value.<br /><br />If `true`, the default search excludes `id`, `cells` fields and<br />only does a basic comparison on string and number type cell values.<br /><br />To implement your own client-side filtering, pass a function<br />that accepts a row and value and returns a boolean. |
| tabindex | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify the tabindex |
### Slots

699
carbon.yml Normal file
View file

@ -0,0 +1,699 @@
# yaml-language-server: $schema=https://unpkg.com/@carbon-platform/schemas@v1/carbon-resources.schema.json
library:
id: carbon-components-svelte
name: Carbon Components Svelte
description: Svelte implementation of Carbon Components.
externalDocsUrl: https://carbon-components-svelte.onrender.com
inherits: carbon-styles
assets:
accordion:
status: stable
externalDocsUrl: https://www.carbondesignsystem.com/components/accordion/usage
framework: svelte
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/Accordion
aspect-ratio:
status: stable
framework: svelte
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/AspectRatio
breadcrumb:
status: stable
externalDocsUrl: https://www.carbondesignsystem.com/components/breadcrumb/usage
framework: svelte
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/Breadcrumb
breakpoint:
name: Breakpoint
status: stable
type: component
platform: web
framework: svelte
thumbnailPath: './thumbnails/breakpoint.svg'
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/Breakpoint
tags:
- shell
button:
status: stable
externalDocsUrl: https://www.carbondesignsystem.com/components/button/usage
framework: svelte
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/Button
button-set:
name: Button set
description: Buttons in a button set are juxtaposed by default.
status: stable
type: component
platform: web
framework: svelte
thumbnailPath: './thumbnails/button-set.svg'
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/ButtonSet
tags:
- input-control
checkbox:
status: stable
externalDocsUrl: https://www.carbondesignsystem.com/components/checkbox/usage
framework: svelte
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/Checkbox
clickable-tile:
name: Clickable tile
status: stable
type: component
platform: web
framework: svelte
thumbnailPath: './thumbnails/clickable-tile.svg'
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/ClickableTile
tags:
- contextual-navigation
code-snippet:
status: stable
externalDocsUrl: https://www.carbondesignsystem.com/components/code-snippet/usage
framework: svelte
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/CodeSnippet
combo-box:
status: stable
framework: svelte
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/ComboBox
composed-modal:
name: Composed modal
status: stable
type: component
platform: web
framework: svelte
thumbnailPath: './thumbnails/composed-modal.svg'
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/ComposedModal
tags:
- input-control
content-switcher:
status: stable
externalDocsUrl: https://www.carbondesignsystem.com/components/content-switcher/usage
framework: svelte
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/ContentSwitcher
context-menu:
name: Context menu
status: stable
type: component
platform: web
framework: svelte
thumbnailPath: './thumbnails/context-menu.svg'
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/ContextMenu
tags:
- input-control
- contextual-navigation
copy-button:
status: stable
framework: svelte
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/CopyButton
data-table:
status: stable
framework: svelte
externalDocsUrl: https://www.carbondesignsystem.com/components/data-table/usage
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/DataTable
date-picker:
status: stable
framework: svelte
externalDocsUrl: https://www.carbondesignsystem.com/components/date-picker/usage
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/DatePicker
dropdown:
status: stable
framework: svelte
externalDocsUrl: https://www.carbondesignsystem.com/components/dropdown/usage
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/Dropdown
expandable-tile:
name: Expandable tile
status: stable
type: component
platform: web
framework: svelte
thumbnailPath: './thumbnails/expandable-tile.svg'
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/ExpandableTile
tags:
- data-display
- content-element
file-uploader:
status: stable
framework: svelte
externalDocsUrl: https://www.carbondesignsystem.com/components/file-uploader/usage
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/FileUploader
fluid-form:
name: Fluid form
status: stable
type: component
platform: web
framework: svelte
thumbnailPath: './thumbnails/fluid-form.svg'
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/FluidForm
tags:
- form
form:
status: stable
framework: svelte
externalDocsUrl: https://www.carbondesignsystem.com/components/form/usage
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/Form
grid:
status: stable
framework: svelte
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/Grid
image-loader:
name: Image loader
status: stable
type: component
platform: web
framework: svelte
thumbnailPath: './thumbnails/image-loader.svg'
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/ImageLoader
tags:
- shell
- media
- media
inline-loading:
status: stable
framework: svelte
externalDocsUrl: https://www.carbondesignsystem.com/components/inline-loading/usage
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/InlineLoading
inline-notification:
name: Inline notification
status: stable
type: component
platform: web
framework: svelte
thumbnailPath: './thumbnails/inline-loading.svg'
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/InlineNotification
tags:
- system-feedback
link:
status: stable
framework: svelte
externalDocsUrl: https://www.carbondesignsystem.com/components/link/usage
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/Link
loading:
status: stable
framework: svelte
externalDocsUrl: https://www.carbondesignsystem.com/components/loading/usage
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/Loading
local-storage:
name: Local storage
status: stable
type: component
platform: web
framework: svelte
thumbnailPath: './thumbnails/local-storage.svg'
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/LocalStorage
tags:
- input-control
modal:
status: stable
framework: svelte
externalDocsUrl: https://www.carbondesignsystem.com/components/modal/usage
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/Modal
multiselect:
status: stable
framework: svelte
externalDocsUrl: https://www.carbondesignsystem.com/components/dropdown/usage/#multiselect
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/MultiSelect
number-input:
status: stable
framework: svelte
externalDocsUrl: https://www.carbondesignsystem.com/components/number-input/usage
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/NumberInput
ordered-list:
name: Ordered list
status: stable
type: component
platform: web
framework: svelte
thumbnailPath: './thumbnails/ordered-list.svg'
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/OrderedList
tags:
- data-display
overflow-menu:
name: Overflow menu
status: stable
type: component
platform: web
framework: svelte
thumbnailPath: ''
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/OverflowMenu
tags:
- input-control
pagination:
status: stable
framework: svelte
externalDocsUrl: https://www.carbondesignsystem.com/components/pagination/usage
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/Pagination
pagination-nav:
status: stable
framework: svelte
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/PaginationNav
password-input:
name: Password input
status: stable
type: component
platform: web
framework: svelte
thumbnailPath: './thumbnails/password-input.svg'
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/PasswordInput
tags:
- form
- contextual-navigation
popover:
status: stable
framework: svelte
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/Popover
progress-bar:
status: stable
framework: svelte
externalDocsUrl: https://www.carbondesignsystem.com/components/progress-bar/usage
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/ProgressBar
progress-indicator:
status: stable
framework: svelte
externalDocsUrl: https://www.carbondesignsystem.com/components/progress-indicator/usage
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/ProgressIndicator
radio-button:
status: stable
framework: svelte
externalDocsUrl: https://www.carbondesignsystem.com/components/radio-button/usage
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/RadioButton
radio-tile:
name: Radio tile
status: stable
type: component
platform: web
framework: svelte
thumbnailPath: './thumbnails/radio-tile.svg'
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/RadioTile
tags:
- input-control
recursive-list:
name: Recursive list
status: stable
type: component
platform: web
framework: svelte
thumbnailPath: './thumbnails/recursive-list.svg'
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/RecursiveList
tags:
- data-display
search:
status: stable
framework: svelte
externalDocsUrl: https://www.carbondesignsystem.com/components/search/usage
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/Search
select:
status: stable
framework: svelte
externalDocsUrl: https://www.carbondesignsystem.com/components/select/usage
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/Select
selectable-tile:
name: Selectable tile
status: stable
type: component
platform: web
framework: svelte
thumbnailPath: './thumbnails/selectable-tile.svg'
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/SelectableTile
tags:
- input-control
skeleton-placeholder:
name: Skeleton placeholder
status: stable
type: component
platform: web
framework: svelte
thumbnailPath: './thumbnails/skeleton-placeholder.svg'
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/SkeletonPlaceholder
tags:
- system-feedback
skeleton-text:
name: Skeleton text
status: stable
type: component
platform: web
framework: svelte
thumbnailPath: './thumbnails/skeleton-text.svg'
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/SkeletonText
tags:
- shell
slider:
status: stable
framework: svelte
externalDocsUrl: https://www.carbondesignsystem.com/components/slider/usage
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/Slider
structured-list:
status: stable
framework: svelte
externalDocsUrl: https://www.carbondesignsystem.com/components/structured-list/usage
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/StructuredList
tabs:
status: stable
framework: svelte
externalDocsUrl: https://www.carbondesignsystem.com/components/tabs/usage
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/Tabs
tag:
status: stable
framework: svelte
externalDocsUrl: https://www.carbondesignsystem.com/components/tag/usage
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/Tag
text-area:
status: stable
framework: svelte
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/TextArea
text-input:
status: stable
framework: svelte
externalDocsUrl: https://www.carbondesignsystem.com/components/text-input/usage
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/TextInput
theme:
status: stable
framework: svelte
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/Theme
tile:
status: stable
framework: svelte
externalDocsUrl: https://www.carbondesignsystem.com/components/tile/usage
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/Tile
time-picker:
status: stable
framework: svelte
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/TimePicker
toast-notification:
name: Toast notification
status: stable
type: component
platform: web
framework: svelte
thumbnailPath: './thumbnails/toast-notification.svg'
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/ToastNotification
tags:
- input-control
toggle:
status: stable
framework: svelte
externalDocsUrl: https://www.carbondesignsystem.com/components/toggle/usage
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/Toggle
tooltip:
status: stable
framework: svelte
externalDocsUrl: https://www.carbondesignsystem.com/components/tooltip/usage
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/Tooltip
tooltip-definition:
status: stable
framework: svelte
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/TooltipDefinition
tooltip-icon:
name: Tootlip icon
status: stable
type: component
platform: web
framework: svelte
thumbnailPath: './thumbnails/tooltip-icon.svg'
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/TooltipIcon
tags:
- content-element
tree-view:
status: stable
framework: svelte
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/TreeView
truncate:
name: Truncate
status: stable
type: component
platform: web
framework: svelte
thumbnailPath: './thumbnails/truncate.svg'
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/Truncate
tags:
- data-display
ui-shell-header:
status: stable
framework: svelte
externalDocsUrl: https://www.carbondesignsystem.com/components/UI-shell-header/usage
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/UIShell
unordered-list:
name: Unordered list
status: stable
type: component
platform: web
framework: svelte
thumbnailPath: './thumbnails/unordered-list.svg'
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/UnorderedList
tags:
- data-display

111
docs/src/COMPONENT_API.json
View file

@ -217,7 +217,7 @@
"name": "ratio",
"kind": "let",
"description": "Specify the aspect ratio",
"type": "\"2x1\" | \"16x9\" | \"4x3\" | \"1x1\" | \"3x4\" | \"3x2\" | \"9x16\" | \"1x2\"",
"type": "\"2x1\" | \"2x3\" | \"16x9\" | \"4x3\" | \"1x1\" | \"3x4\" | \"3x2\" | \"9x16\" | \"1x2\"",
"value": "\"2x1\"",
"isFunction": false,
"isFunctionDeclaration": false,
@ -1158,6 +1158,8 @@
}
],
"events": [
{ "type": "dispatched", "name": "expand", "detail": "null" },
{ "type": "dispatched", "name": "collapse", "detail": "null" },
{
"type": "forwarded",
"name": "click",
@ -1183,7 +1185,7 @@
"name": "animationend",
"element": "CopyButton"
},
{ "type": "dispatched", "name": "copy" }
{ "type": "dispatched", "name": "copy", "detail": "null" }
],
"typedefs": [],
"rest_props": { "type": "InlineComponent", "name": "CodeSnippetSkeleton" }
@ -1555,8 +1557,18 @@
{
"name": "translateWithId",
"kind": "let",
"description": "Override the default translation ids",
"type": "(id: any) => string",
"description": "Override the chevron icon label based on the open state.\nDefaults to \"Open menu\" when closed and \"Close menu\" when open",
"type": "(id: import(\"../ListBox/ListBoxMenuIcon.svelte\").ListBoxMenuIconTranslationId) => string",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
"reactive": false
},
{
"name": "translateWithIdSelection",
"kind": "let",
"description": "Override the label of the clear button when the input has a selection.\nDefaults to \"Clear selected item\" since a combo box can only have on selection.",
"type": "(id: \"clearSelection\") => string",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
@ -1747,10 +1759,14 @@
{ "type": "forwarded", "name": "mouseover", "element": "div" },
{ "type": "forwarded", "name": "mouseenter", "element": "div" },
{ "type": "forwarded", "name": "mouseleave", "element": "div" },
{ "type": "dispatched", "name": "submit" },
{ "type": "dispatched", "name": "click:button--primary" },
{ "type": "dispatched", "name": "close" },
{ "type": "dispatched", "name": "open" }
{ "type": "dispatched", "name": "submit", "detail": "null" },
{
"type": "dispatched",
"name": "click:button--primary",
"detail": "null"
},
{ "type": "dispatched", "name": "close", "detail": "null" },
{ "type": "dispatched", "name": "open", "detail": "null" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "div" }
@ -1881,7 +1897,7 @@
{ "type": "dispatched", "name": "open", "detail": "HTMLElement" },
{ "type": "forwarded", "name": "click", "element": "ul" },
{ "type": "forwarded", "name": "keydown", "element": "ul" },
{ "type": "dispatched", "name": "close" }
{ "type": "dispatched", "name": "close", "detail": "null" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "ul" }
@ -2066,7 +2082,7 @@
{ "type": "forwarded", "name": "keydown", "element": "li" },
{ "type": "forwarded", "name": "mouseenter", "element": "li" },
{ "type": "forwarded", "name": "mouseleave", "element": "li" },
{ "type": "dispatched", "name": "click" }
{ "type": "dispatched", "name": "click", "detail": "null" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "li" }
@ -2167,7 +2183,7 @@
"events": [
{ "type": "forwarded", "name": "click", "element": "button" },
{ "type": "forwarded", "name": "animationend", "element": "button" },
{ "type": "dispatched", "name": "copy" }
{ "type": "dispatched", "name": "copy", "detail": "null" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "button" }
@ -2479,14 +2495,14 @@
"ts": "type DataTableValue = any"
},
{
"type": "{ key: DataTableKey; empty: boolean; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; }",
"type": "{ key: DataTableKey; empty: boolean; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; width?: string; minWidth?: string; }",
"name": "DataTableEmptyHeader",
"ts": "interface DataTableEmptyHeader { key: DataTableKey; empty: boolean; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; }"
"ts": "interface DataTableEmptyHeader { key: DataTableKey; empty: boolean; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; width?: string; minWidth?: string; }"
},
{
"type": "{ key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; }",
"type": "{ key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; width?: string; minWidth?: string; }",
"name": "DataTableNonEmptyHeader",
"ts": "interface DataTableNonEmptyHeader { key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; }"
"ts": "interface DataTableNonEmptyHeader { key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; width?: string; minWidth?: string; }"
},
{
"type": "DataTableNonEmptyHeader | DataTableEmptyHeader",
@ -2735,9 +2751,9 @@
{
"name": "flatpickrProps",
"kind": "let",
"description": "Override the options passed to the Flatpickr instance\nhttps://flatpickr.js.org/options",
"description": "Override the options passed to the Flatpickr instance.\n@see https://flatpickr.js.org/options",
"type": "import(\"flatpickr/dist/types/options\").Options",
"value": "{}",
"value": "{ static: true }",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
@ -3197,8 +3213,8 @@
{
"name": "translateWithId",
"kind": "let",
"description": "Override the default translation ids",
"type": "(id: any) => string",
"description": "Override the chevron icon label based on the open state.\nDefaults to \"Open menu\" when closed and \"Close menu\" when open",
"type": "(id: import(\"../ListBox/ListBoxMenuIcon.svelte\").ListBoxMenuIconTranslationId) => string",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
@ -4053,8 +4069,8 @@
"moduleExports": [],
"slots": [],
"events": [
{ "type": "forwarded", "name": "click", "element": "Close" },
{ "type": "forwarded", "name": "keydown", "element": "Close" }
{ "type": "forwarded", "name": "click", "element": "button" },
{ "type": "forwarded", "name": "keydown", "element": "button" }
],
"typedefs": [],
"rest_props": { "type": "InlineComponent", "name": "Loading" }
@ -4561,8 +4577,9 @@
}
],
"events": [
{ "type": "forwarded", "name": "click", "element": "button" },
{ "type": "dispatched", "name": "close" }
{ "type": "dispatched", "name": "open", "detail": "null" },
{ "type": "dispatched", "name": "close", "detail": "null" },
{ "type": "forwarded", "name": "click", "element": "button" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "button" }
@ -5122,7 +5139,7 @@
{ "type": "forwarded", "name": "mouseover", "element": "div" },
{ "type": "forwarded", "name": "mouseenter", "element": "div" },
{ "type": "forwarded", "name": "mouseleave", "element": "div" },
{ "type": "dispatched", "name": "success" }
{ "type": "dispatched", "name": "success", "detail": "null" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "div" }
@ -6159,10 +6176,14 @@
{ "type": "forwarded", "name": "mouseover", "element": "div" },
{ "type": "forwarded", "name": "mouseenter", "element": "div" },
{ "type": "forwarded", "name": "mouseleave", "element": "div" },
{ "type": "dispatched", "name": "submit" },
{ "type": "dispatched", "name": "click:button--primary" },
{ "type": "dispatched", "name": "close" },
{ "type": "dispatched", "name": "open" }
{ "type": "dispatched", "name": "submit", "detail": "null" },
{
"type": "dispatched",
"name": "click:button--primary",
"detail": "null"
},
{ "type": "dispatched", "name": "close", "detail": "null" },
{ "type": "dispatched", "name": "open", "detail": "null" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "div" }
@ -6583,8 +6604,18 @@
{
"name": "translateWithId",
"kind": "let",
"description": "Override the default translation ids",
"type": "(id: any) => string",
"description": "Override the chevron icon label based on the open state.\nDefaults to \"Open menu\" when closed and \"Close menu\" when open",
"type": "(id: import(\"../ListBox/ListBoxMenuIcon.svelte\").ListBoxMenuIconTranslationId) => string",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
"reactive": false
},
{
"name": "translateWithIdSelection",
"kind": "let",
"description": "Override the label of the clear button when the input has a selection.\nDefaults to \"Clear selected item\" and \"Clear all items\" if more than one item is selected",
"type": "(id: import(\"../ListBox/ListBoxSelection.svelte\").ListBoxSelectionTranslationId) => string",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
@ -8231,7 +8262,9 @@
],
"moduleExports": [],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"events": [{ "type": "dispatched", "name": "click:outside" }],
"events": [
{ "type": "dispatched", "name": "click:outside", "detail": "null" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "div" }
},
@ -9247,7 +9280,7 @@
{ "type": "forwarded", "name": "blur", "element": "input" },
{ "type": "forwarded", "name": "keydown", "element": "input" },
{ "type": "forwarded", "name": "keyup", "element": "input" },
{ "type": "dispatched", "name": "clear" }
{ "type": "dispatched", "name": "clear", "detail": "null" }
],
"typedefs": [],
"rest_props": { "type": "InlineComponent", "name": "SearchSkeleton" }
@ -10895,6 +10928,16 @@
"isFunctionDeclaration": false,
"constant": false,
"reactive": false
},
{
"name": "tableStyle",
"kind": "let",
"description": "Set the style attribute on the `table` element",
"type": "string",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
"reactive": false
}
],
"moduleExports": [],
@ -11304,7 +11347,7 @@
{ "type": "forwarded", "name": "mouseover", "element": "TagSkeleton" },
{ "type": "forwarded", "name": "mouseenter", "element": "TagSkeleton" },
{ "type": "forwarded", "name": "mouseleave", "element": "TagSkeleton" },
{ "type": "dispatched", "name": "close" }
{ "type": "dispatched", "name": "close", "detail": "null" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "div | span" }
@ -12767,7 +12810,7 @@
"name": "shouldFilterRows",
"kind": "let",
"description": "Set to `true` to filter table rows using the search value.\n\nIf `true`, the default search excludes `id`, `cells` fields and\nonly does a basic comparison on string and number type cell values.\n\nTo implement your own client-side filtering, pass a function\nthat accepts a row and value and returns a boolean.",
"type": "boolean | ((rows: import(\"./DataTable.svelte\").DataTableRow, value: number | string) => boolean)",
"type": "boolean | ((row: import(\"./DataTable.svelte\").DataTableRow, value: number | string) => boolean)",
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,

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

@ -5,7 +5,7 @@
The `AspectRatio` component is useful for constraining fluid content within an aspect ratio. To demo this, resize your browser for the examples below.
Supported aspect ratios include `"2x1"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"3x2"`, `"9x16"` and `"1x2"`.
Supported aspect ratios include `"2x1"`, `"2x3"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"3x2"`, `"9x16"` and `"1x2"`.
### Default (2x1)
@ -13,6 +13,12 @@ Supported aspect ratios include `"2x1"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"
2x1
</AspectRatio>
### Ratio 2x3
<AspectRatio ratio="2x3">
2x3
</AspectRatio>
### Ratio 16x9
<AspectRatio ratio="16x9">

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

@ -2,9 +2,6 @@
import { InlineNotification, Button } from "carbon-components-svelte";
import Add from "carbon-icons-svelte/lib/Add.svelte";
import TrashCan from "carbon-icons-svelte/lib/TrashCan.svelte";
import TextBold from "carbon-icons-svelte/lib/TextBold.svelte";
import TextItalic from "carbon-icons-svelte/lib/TextItalic.svelte";
import TextUnderline from "carbon-icons-svelte/lib/TextUnderline.svelte";
import Login from "carbon-icons-svelte/lib/Login.svelte";
import Preview from "../../components/Preview.svelte";

14
docs/src/pages/components/CodeSnippet.svx
View file

@ -60,6 +60,18 @@ To prevent text from being copied entirely, pass a no-op function to the `copy`
<CodeSnippet type="multi" {code} />
### Expanded by default
Use the `expanded` prop to control whether the multi-line code snippet is expanded or not.
<CodeSnippet type="multi" {code} expanded />
### Reactive example
The multi-line code snippet also dispatches "expand" and "collapse" events.
<FileSource src="/framed/CodeSnippet/CodeSnippetReactive" />
### Custom copy feedback text
Use the `feedback` prop to override the default copy button feedback text.
@ -68,6 +80,8 @@ Use the `feedback` prop to override the default copy button feedback text.
### Hidden copy button
Set `hideCopyButton` to `true` to hide the copy button.
<CodeSnippet type="multi" {code} hideCopyButton />
### Disabled

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

@ -328,6 +328,18 @@ title="Load balancers" description="Your organization's active load balancers."
]}"
/>
### Custom column widths
Specify a `width` or `minWidth` property in the `headers` object to customize the width of each column.
A [table-layout: fixed](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout#values) rule will be applied to the `table` element when using custom widths.
<InlineNotification svx-ignore lowContrast kind="warning" title="Note:" hideCloseButton>
<div class="body-short-01">Custom column widths do not work with a <a class="bx--link" href="#sticky-header">sticky header</a>.</div>
</InlineNotification>
<FileSource src="/framed/DataTable/DataTableHeaderWidth" />
### Sticky header
Set `stickyHeader` to `true` for the header to be fixed in place.
@ -1077,10 +1089,16 @@ In the following example, each row in the sortable data table has an overflow me
<FileSource src="/framed/DataTable/SelectableDataTable" />
### Initial selected rows
### Batch selection
<FileSource src="/framed/DataTable/DataTableBatchSelection" />
### Batch selection with initial selected rows
Use the `selectedRowIds` prop to specify which rows should be selected.
<FileSource src="/framed/DataTable/DataTableBatchSelectionInitial" />
### Selectable with batch actions
<FileSource src="/framed/DataTable/DataTableBatchSelectionToolbar" />
@ -1150,9 +1168,7 @@ Use `nonSelectableRowIds` to specify the ids for rows that should not be selecta
]}"
>
<svelte:fragment slot="expanded-row" let:row>
<pre>
{JSON.stringify(row, null, 2)}
</pre>
<pre>{JSON.stringify(row, null, 2)}</pre>
</svelte:fragment>
</DataTable>
@ -1221,9 +1237,7 @@ Use `nonExpandableRowIds` to specify the ids for rows that should not be expanda
]}"
>
<svelte:fragment slot="expanded-row" let:row>
<pre>
{JSON.stringify(row, null, 2)}
</pre>
<pre>{JSON.stringify(row, null, 2)}</pre>
</svelte:fragment>
</DataTable>
@ -1282,9 +1296,7 @@ Use `nonExpandableRowIds` to specify the ids for rows that should not be expanda
]}"
>
<svelte:fragment slot="expanded-row" let:row>
<pre>
{JSON.stringify(row, null, 2)}
</pre>
<pre>{JSON.stringify(row, null, 2)}</pre>
</svelte:fragment>
</DataTable>
@ -1343,9 +1355,7 @@ Use `nonExpandableRowIds` to specify the ids for rows that should not be expanda
]}"
>
<svelte:fragment slot="expanded-row" let:row>
<pre>
{JSON.stringify(row, null, 2)}
</pre>
<pre>{JSON.stringify(row, null, 2)}</pre>
</svelte:fragment>
</DataTable>
@ -1404,12 +1414,14 @@ Use `nonExpandableRowIds` to specify the ids for rows that should not be expanda
]}"
>
<svelte:fragment slot="expanded-row" let:row>
<pre>
{JSON.stringify(row, null, 2)}
</pre>
<pre>{JSON.stringify(row, null, 2)}</pre>
</svelte:fragment>
</DataTable>
### Expandable and selectable
<FileSource src="/framed/DataTable/DataTableExpandableSelectable" />
### Skeleton
<DataTableSkeleton />

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

@ -7,7 +7,39 @@ components: ["DatePicker", "DatePickerInput", "DatePickerSkeleton"]
import Preview from "../../components/Preview.svelte";
</script>
### Default (simple)
Carbon uses the zero dependency [flatpickr](https://github.com/flatpickr/flatpickr) library for its underlying calendar implementation.
Set `datePickerType` to `"single"` or `"range"` for the calendar functionality.
Specify [flatpickr options](https://flatpickr.js.org/options/) through the `flatpickrProps` prop.
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
<div class="body-short-01">
If using Rollup, specify <strong>inlineDynamicImports: true</strong> in your <strong>rollup.config.js</strong>.
</div>
</InlineNotification>
### Single
By default, the `flatpickr` option `static` is set to `true` so that the calendar is positioned inside the wrapper and next to the input element. This is required for the calendar position to work inside a [Modal](/components/Modal).
Set `flatpickrProps.static` to `false` to opt out of this behavior.
<FileSource src="/framed/DatePicker/DatePickerSingle" />
### Range
Set `datePickerType` to `"range"` for the range variant.
<FileSource src="/framed/DatePicker/DatePickerRange" />
### DatePicker in a modal
<FileSource src="/framed/DatePicker/DatePickerModal" />
### Simple
By default, the "simple" date picker does not have a dropdown calendar.
<DatePicker>
<DatePickerInput labelText="Date of birth" placeholder="mm/dd/yyyy" />
@ -61,30 +93,6 @@ components: ["DatePicker", "DatePickerInput", "DatePickerSkeleton"]
<DatePickerInput disabled labelText="Date of birth" placeholder="mm/dd/yyyy" />
</DatePicker>
### Single
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
<div class="body-short-01">
If using Rollup, specify <strong>inlineDynamicImports: true</strong> in your <strong>rollup.config.js</strong>.
</div>
</InlineNotification>
<FileSource src="/framed/DatePicker/DatePickerSingle" />
### Range
<FileSource src="/framed/DatePicker/DatePickerRange" />
### DatePicker in a modal
Use `flatpickrProps` to set `static: true` for the calendar to be positioned relative to the input element.
This is needed when placing a `DatePicker` inside of a `Modal` component.
Refer to [flatpickr options](https://flatpickr.js.org/options/) for a full list of config options.
<FileSource src="/framed/DatePicker/DatePickerModal" />
### Skeleton
<DatePickerSkeleton />

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

@ -48,9 +48,35 @@ There are two ways to clear files in `FileUploader`:
<FileUploaderItem name="README.md" status="complete" />
### Item (invalid)
### Item (edit)
<FileUploaderItem invalid name="README.md" status="edit" />
If the `status` is `"edit"`, clicking the close icon will dispatch a `delete` event.
The event detail contains the item `id`.
<FileUploaderItem id="readme" name="README.md" status="edit" on:delete={(e) => {
console.log(e.detail); // "readme"
}} />
### Item (edit status, invalid state)
An item can also have an edit status with an invalid state.
<FileUploaderItem invalid id="readme" name="README.md" status="edit" on:delete />
### Item (edit status, invalid state with subject, body)
Use the `errorSubject` and `errorBody` props to customize the error message.
<FileUploaderItem
invalid
id="readme"
name="README.md"
errorSubject="File size exceeds 500kb limit"
errorBody="Please select a new file."
status="edit"
on:delete
/>
### Item sizes

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

@ -28,7 +28,7 @@ Use the "loading" and "error" named slots to render an element when the image is
If `ratio` is set, this component uses the [AspectRatio](/components/AspectRatio) to constrain the image.
Supported aspect ratios include `"2x1"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"3x2"`, `"9x16"` and `"1x2"`.
Supported aspect ratios include `"2x1"`, `"2x3"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"3x2"`, `"9x16"` and `"1x2"`.
<ImageLoader ratio="16x9" src="https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg" />

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

@ -30,8 +30,8 @@ Use the named "legendText" slot to customize the legend text.
<RadioButtonGroup selected="standard">
<div slot="legendText" style="display: flex">
Storage tier (disk)
<Tooltip tooltipBodyId="tooltip-body">
<p id="tooltip-body">
<Tooltip>
<p>
Storage tiers may vary based on geolocation.
</p>
</Tooltip>

14
docs/src/pages/components/Theme.svx
View file

@ -1,9 +1,19 @@
<script>
import { Theme } from "carbon-components-svelte";
import { InlineNotification, CodeSnippet } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
let code = `import "carbon-components-svelte/css/all.css";`;
</script>
This utility component dynamically updates the Carbon theme on the client-side using CSS variables.
The `Theme` component can dyanmically update the Carbon theme on the client-side. It can persist the theme locally using [window.localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage).
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
<div class="body-short-01">You must use the "all.css" StyleSheet with the <code>Theme</code> component.</div>
</InlineNotification>
The `all.css` StyleSheet uses [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) for dynamic theming.
<CodeSnippet svx-ignore {code} />
### Default

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

@ -12,8 +12,8 @@ components: ["Tooltip", "TooltipFooter"]
By default, the tooltip is triggered by an information icon.
<Tooltip tooltipBodyId="tooltip-body">
<p id="tooltip-body">
<Tooltip>
<p>
Resources are provisioned based on your account's organization.
</p>
</Tooltip>

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

@ -12,9 +12,7 @@
<h1>{size}</h1>
<h6>on:change</h6>
<pre>
{JSON.stringify(events, null, 2)}
</pre>
<pre>{JSON.stringify(events, null, 2)}</pre>
<style>
p,

19
docs/src/pages/framed/CodeSnippet/CodeSnippetReactive.svelte Normal file
View file

@ -0,0 +1,19 @@
<script>
import { CodeSnippet, Button } from "carbon-components-svelte";
let expanded = false;
</script>
<Button on:click="{() => (expanded = !expanded)}">Toggle expansion</Button>
<CodeSnippet
type="multi"
code="{Array.from({ length: 30 }, (_, i) => i + 1).join('\n')}"
bind:expanded
on:expand="{() => {
console.log('on:expand');
}}"
on:collapse="{() => {
console.log('on:collapse');
}}"
/>

31
docs/src/pages/framed/DataTable/DataTableBatchSelection.svelte
View file

@ -1,22 +1,7 @@
<script>
import { DataTable } from "carbon-components-svelte";
const headers = [
{ key: "name", value: "Name" },
{ key: "port", value: "Port" },
{ key: "rule", value: "Rule" },
];
const rows = [
{ id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },
{ id: "b", name: "Load Balancer 1", port: 443, rule: "Round robin" },
{ id: "c", name: "Load Balancer 2", port: 80, rule: "DNS delegation" },
{ id: "d", name: "Load Balancer 6", port: 3000, rule: "Round robin" },
{ id: "e", name: "Load Balancer 4", port: 443, rule: "Round robin" },
{ id: "f", name: "Load Balancer 5", port: 80, rule: "DNS delegation" },
];
let selectedRowIds = [rows[0].id, rows[1].id];
let selectedRowIds = [];
$: console.log("selectedRowIds", selectedRowIds);
</script>
@ -24,6 +9,16 @@
<DataTable
batchSelection
bind:selectedRowIds
headers="{headers}"
rows="{rows}"
headers="{[
{ key: 'name', value: 'Name' },
{ key: 'port', value: 'Port' },
{ key: 'rule', value: 'Rule' },
]}"
rows="{Array.from({ length: 6 }).map((_, i) => ({
id: i,
name: 'Load Balancer ' + (i + 1),
protocol: 'HTTP',
port: i % 3 ? (i % 2 ? 3000 : 80) : 443,
rule: i % 3 ? 'Round robin' : 'DNS delegation',
}))}"
/>

24
docs/src/pages/framed/DataTable/DataTableBatchSelectionInitial.svelte Normal file
View file

@ -0,0 +1,24 @@
<script>
import { DataTable } from "carbon-components-svelte";
let selectedRowIds = [2, 4];
$: console.log("selectedRowIds", selectedRowIds);
</script>
<DataTable
batchSelection
bind:selectedRowIds
headers="{[
{ key: 'name', value: 'Name' },
{ key: 'port', value: 'Port' },
{ key: 'rule', value: 'Rule' },
]}"
rows="{Array.from({ length: 6 }).map((_, i) => ({
id: i,
name: 'Load Balancer ' + (i + 1),
protocol: 'HTTP',
port: i % 3 ? (i % 2 ? 3000 : 80) : 443,
rule: i % 3 ? 'Round robin' : 'DNS delegation',
}))}"
/>

35
docs/src/pages/framed/DataTable/DataTableExpandableSelectable.svelte Normal file
View file

@ -0,0 +1,35 @@
<script>
import { DataTable } from "carbon-components-svelte";
let expandedRowIds = [];
let selectedRowIds = [];
$: {
console.log("expandedRowIds", expandedRowIds);
console.log("selectedRowIds", selectedRowIds);
}
</script>
<DataTable
batchExpansion
batchSelection
bind:expandedRowIds
bind:selectedRowIds
headers="{[
{ key: 'name', value: 'Name' },
{ key: 'protocol', value: 'Protocol' },
{ key: 'port', value: 'Port' },
{ key: 'rule', value: 'Rule' },
]}"
rows="{Array.from({ length: 6 }).map((_, i) => ({
id: i,
name: 'Load Balancer ' + (i + 1),
protocol: 'HTTP',
port: i % 3 ? (i % 2 ? 3000 : 80) : 443,
rule: i % 3 ? 'Round robin' : 'DNS delegation',
}))}"
>
<svelte:fragment slot="expanded-row" let:row>
<pre> {JSON.stringify(row, null, 2)}</pre>
</svelte:fragment>
</DataTable>

4
docs/src/pages/framed/DataTable/DataTableExpandableZebra.svelte
View file

@ -58,8 +58,6 @@
]}"
>
<svelte:fragment slot="expanded-row" let:row>
<pre>
{JSON.stringify(row, null, 2)}
</pre>
<pre>{JSON.stringify(row, null, 2)}</pre>
</svelte:fragment>
</DataTable>

19
docs/src/pages/framed/DataTable/DataTableHeaderWidth.svelte Normal file
View file

@ -0,0 +1,19 @@
<script>
import { DataTable } from "carbon-components-svelte";
</script>
<DataTable
headers="{[
{ key: 'name', value: 'Name', width: '50%', minWidth: '200px' },
{ key: 'protocol', value: 'Protocol', width: '60px' },
{ key: 'port', value: 'Port', width: '60px' },
{ key: 'rule', value: 'Rule', width: '10rem' },
]}"
rows="{Array.from({ length: 6 }).map((_, i) => ({
id: i,
name: 'Load Balancer ' + (i + 1),
protocol: 'HTTP',
port: i % 3 ? (i % 2 ? 3000 : 80) : 443,
rule: i % 3 ? 'Round robin' : 'DNS delegation',
}))}"
/>

4
docs/src/pages/framed/DataTable/DataTableNonExpandableRows.svelte
View file

@ -61,8 +61,6 @@
rows="{rows}"
>
<svelte:fragment slot="expanded-row" let:row>
<pre>
{JSON.stringify(row, null, 2)}
</pre>
<pre>{JSON.stringify(row, null, 2)}</pre>
</svelte:fragment>
</DataTable>

32
docs/src/pages/framed/DataTable/SelectableDataTable.svelte
View file

@ -1,24 +1,24 @@
<script>
import { DataTable } from "carbon-components-svelte";
const headers = [
{ key: "name", value: "Name" },
{ key: "port", value: "Port" },
{ key: "rule", value: "Rule" },
];
const rows = [
{ id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },
{ id: "b", name: "Load Balancer 1", port: 443, rule: "Round robin" },
{ id: "c", name: "Load Balancer 2", port: 80, rule: "DNS delegation" },
{ id: "d", name: "Load Balancer 6", port: 3000, rule: "Round robin" },
{ id: "e", name: "Load Balancer 4", port: 443, rule: "Round robin" },
{ id: "f", name: "Load Balancer 5", port: 80, rule: "DNS delegation" },
];
let selectedRowIds = [];
$: console.log("selectedRowIds", selectedRowIds);
</script>
<DataTable selectable bind:selectedRowIds headers="{headers}" rows="{rows}" />
<DataTable
selectable
bind:selectedRowIds
headers="{[
{ key: 'name', value: 'Name' },
{ key: 'port', value: 'Port' },
{ key: 'rule', value: 'Rule' },
]}"
rows="{Array.from({ length: 6 }).map((_, i) => ({
id: i,
name: 'Load Balancer ' + (i + 1),
protocol: 'HTTP',
port: i % 3 ? (i % 2 ? 3000 : 80) : 443,
rule: i % 3 ? 'Round robin' : 'DNS delegation',
}))}"
/>

2
docs/src/pages/framed/DatePicker/DatePickerModal.svelte
View file

@ -8,7 +8,7 @@
primaryButtonText="Confirm"
secondaryButtonText="Cancel"
>
<DatePicker datePickerType="single" flatpickrProps="{{ static: true }}">
<DatePicker datePickerType="single" style="min-height: 420px">
<DatePickerInput labelText="Meeting date" placeholder="mm/dd/yyyy" />
</DatePicker>
</Modal>

4
docs/src/pages/framed/LocalStorage/LocalStorage.svelte
View file

@ -22,6 +22,4 @@
<br />
<pre>
{JSON.stringify(events, null, 2)}
</pre>
<pre>{JSON.stringify(events, null, 2)}</pre>

26
docs/svelte.config.js
View file

@ -5,16 +5,26 @@ const slug = require("remark-slug");
const visit = require("unist-util-visit");
const { format } = require("prettier");
const pkg = require("../package.json");
const component_api = require("./src/COMPONENT_API.json");
const fs = require("fs");
const Prism = require("prismjs");
require("prism-svelte");
const component_api_by_name = component_api.components.reduce((a, c) => {
return {
...a,
[c.moduleName]: true,
};
}, {});
function createImports(source) {
const inlineComponents = new Set();
const icons = new Set();
const actions = new Set();
// TODO: [refactor] better determine if component is a Carbon icon
const isIcon = (text) => text.match(/(16|20|24|32)/);
// heuristic to guess if the inline component or expression name is a Carbon icon
const isIcon = (text) =>
/[A-Z][a-z]*/.test(text) && !(text in component_api_by_name);
walk(parse(source), {
enter(node) {
@ -31,15 +41,20 @@ function createImports(source) {
) {
icons.add(node.expression.name);
}
} else if (node.type === "Action") {
actions.add(node.name);
}
},
});
const ccs_imports = Array.from(inlineComponents.keys());
const action_imports = Array.from(actions.keys());
const ccs_imports = [
...Array.from(inlineComponents.keys()),
...action_imports,
];
const icon_imports = Array.from(icons.keys());
if (ccs_imports.length === 0) return "";
// TODO: determine if action is used, and generate import accordingly
return `
<script>
@ -48,7 +63,8 @@ function createImports(source) {
icons.size > 0
? icon_imports
.map(
(icon) => `import ${icon} from "carbon-icons-svelte/lib/${icon}";`
(icon) =>
`import ${icon} from "carbon-icons-svelte/lib/${icon}.svelte";`
)
.join("\n")
: ""

6
examples/rollup/package.json
View file

@ -5,11 +5,11 @@
"build": "rollup -c"
},
"devDependencies": {
"@rollup/plugin-commonjs": "^21.1.0",
"@rollup/plugin-commonjs": "^22.0.0",
"@rollup/plugin-node-resolve": "^13.2.1",
"carbon-components-svelte": "^0.63.0",
"carbon-components-svelte": "^0.63.4",
"carbon-preprocess-svelte": "^0.9.0",
"rollup": "^2.70.2",
"rollup": "^2.71.1",
"rollup-plugin-css-only": "^3.1.0",
"rollup-plugin-svelte": "^7.1.0",
"rollup-plugin-terser": "^7.0.2",

24
examples/rollup/yarn.lock
View file

@ -23,10 +23,10 @@
chalk "^2.0.0"
js-tokens "^4.0.0"
"@rollup/plugin-commonjs@^21.1.0":
version "21.1.0"
resolved "https://registry.yarnpkg.com/@rollup/plugin-commonjs/-/plugin-commonjs-21.1.0.tgz#45576d7b47609af2db87f55a6d4b46e44fc3a553"
integrity sha512-6ZtHx3VHIp2ReNNDxHjuUml6ur+WcQ28N1yHgCQwsbNkQg2suhxGMDQGJOn/KuDxKtd1xuZP5xSTwBA4GQ8hbA==
"@rollup/plugin-commonjs@^22.0.0":
version "22.0.0"
resolved "https://registry.yarnpkg.com/@rollup/plugin-commonjs/-/plugin-commonjs-22.0.0.tgz#f4d87016e2fbf187a593ab9f46626fe05b59e8bd"
integrity sha512-Ktvf2j+bAO+30awhbYoCaXpBcyPmJbaEUYClQns/+6SNCYFURbvBiNbWgHITEsIgDDWCDUclWRKEuf8cwZCFoQ==
dependencies:
"@rollup/pluginutils" "^3.1.0"
commondir "^1.0.1"
@ -134,10 +134,10 @@ builtin-modules@^3.1.0:
resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-3.2.0.tgz#45d5db99e7ee5e6bc4f362e008bf917ab5049887"
integrity sha512-lGzLKcioL90C7wMczpkY0n/oART3MbBa8R9OFGE1rJxoVI86u4WAGfEk8Wjv10eKSyTHVGkSo3bvBylCEtk7LA==
carbon-components-svelte@^0.63.0:
version "0.63.0"
resolved "https://registry.yarnpkg.com/carbon-components-svelte/-/carbon-components-svelte-0.63.0.tgz#ab46b431b66a4e458ff3647c51d6789214c13fad"
integrity sha512-oG5pW1/Tzuc/2MW5ekRLp6oGmIZjvIoY8y/Dg7M8Bj35hB6ofgs5BQPLa/UjsnVOEC3YqNVu18vXnvFqkjAA8A==
carbon-components-svelte@^0.63.4:
version "0.63.4"
resolved "https://registry.yarnpkg.com/carbon-components-svelte/-/carbon-components-svelte-0.63.4.tgz#7f44e9f197a7b99ffb2b381a19c22be94664677e"
integrity sha512-ZDEgPF6XJzHOMt10JDmzvu78gy5TapHXPBg3jA38HD6acfRG5AWYcGAH55/qIxPkBd7VTBixOst2DQ1sMH0kwA==
dependencies:
flatpickr "4.6.9"
@ -497,10 +497,10 @@ rollup-pluginutils@^2.8.2:
dependencies:
estree-walker "^0.6.1"
rollup@^2.70.2:
version "2.70.2"
resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.70.2.tgz#808d206a8851628a065097b7ba2053bd83ba0c0d"
integrity sha512-EitogNZnfku65I1DD5Mxe8JYRUCy0hkK5X84IlDtUs+O6JRMpRciXTzyCUuX11b5L5pvjH+OmFXiQ3XjabcXgg==
rollup@^2.71.1:
version "2.71.1"
resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.71.1.tgz#82b259af7733dfd1224a8171013aaaad02971a22"
integrity sha512-lMZk3XfUBGjrrZQpvPSoXcZSfKcJ2Bgn+Z0L1MoW2V8Wh7BVM+LOBJTPo16yul2MwL59cXedzW1ruq3rCjSRgw==
optionalDependencies:
fsevents "~2.3.2"

10
examples/sapper/package.json
View file

@ -11,19 +11,19 @@
"polka": "next"
},
"devDependencies": {
"@babel/core": "^7.17.9",
"@babel/core": "^7.17.10",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"@babel/plugin-transform-runtime": "^7.17.0",
"@babel/preset-env": "^7.16.11",
"@babel/plugin-transform-runtime": "^7.17.10",
"@babel/preset-env": "^7.17.10",
"@babel/runtime": "^7.17.9",
"@rollup/plugin-babel": "^5.3.1",
"@rollup/plugin-commonjs": "^21.1.0",
"@rollup/plugin-node-resolve": "^13.2.1",
"@rollup/plugin-replace": "^4.0.0",
"@rollup/plugin-url": "^6.1.0",
"carbon-components-svelte": "^0.63.0",
"carbon-components-svelte": "^0.63.4",
"carbon-preprocess-svelte": "^0.9.0",
"rollup": "^2.70.2",
"rollup": "^2.71.1",
"rollup-plugin-svelte": "^7.1.0",
"rollup-plugin-terser": "^7.0.0",
"sapper": "^0.29.3",

224
examples/sapper/yarn.lock
View file

@ -16,32 +16,46 @@
dependencies:
"@babel/highlight" "^7.16.7"
"@babel/compat-data@^7.13.11", "@babel/compat-data@^7.16.8", "@babel/compat-data@^7.17.0", "@babel/compat-data@^7.17.7":
"@babel/compat-data@^7.13.11", "@babel/compat-data@^7.17.0", "@babel/compat-data@^7.17.7":
version "7.17.7"
resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.17.7.tgz#078d8b833fbbcc95286613be8c716cef2b519fa2"
integrity sha512-p8pdE6j0a29TNGebNm7NzYZWB3xVZJBZ7XGs42uAKzQo8VQ3F0By/cQCtUEABwIqw5zo6WA4NbmxsfzADzMKnQ==
"@babel/core@^7.17.9":
version "7.17.9"
resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.17.9.tgz#6bae81a06d95f4d0dec5bb9d74bbc1f58babdcfe"
integrity sha512-5ug+SfZCpDAkVp9SFIZAzlW18rlzsOcJGaetCjkySnrXXDUw9AR8cDUm1iByTmdWM6yxX6/zycaV76w3YTF2gw==
"@babel/compat-data@^7.17.10":
version "7.17.10"
resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.17.10.tgz#711dc726a492dfc8be8220028b1b92482362baab"
integrity sha512-GZt/TCsG70Ms19gfZO1tM4CVnXsPgEPBCpJu+Qz3L0LUDsY5nZqFZglIoPC1kIYOtNBZlrnFT+klg12vFGZXrw==
"@babel/core@^7.17.10":
version "7.17.10"
resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.17.10.tgz#74ef0fbf56b7dfc3f198fc2d927f4f03e12f4b05"
integrity sha512-liKoppandF3ZcBnIYFjfSDHZLKdLHGJRkoWtG8zQyGJBQfIYobpnVGI5+pLBNtS6psFLDzyq8+h5HiVljW9PNA==
dependencies:
"@ampproject/remapping" "^2.1.0"
"@babel/code-frame" "^7.16.7"
"@babel/generator" "^7.17.9"
"@babel/helper-compilation-targets" "^7.17.7"
"@babel/generator" "^7.17.10"
"@babel/helper-compilation-targets" "^7.17.10"
"@babel/helper-module-transforms" "^7.17.7"
"@babel/helpers" "^7.17.9"
"@babel/parser" "^7.17.9"
"@babel/parser" "^7.17.10"
"@babel/template" "^7.16.7"
"@babel/traverse" "^7.17.9"
"@babel/types" "^7.17.0"
"@babel/traverse" "^7.17.10"
"@babel/types" "^7.17.10"
convert-source-map "^1.7.0"
debug "^4.1.0"
gensync "^1.0.0-beta.2"
json5 "^2.2.1"
semver "^6.3.0"
"@babel/generator@^7.17.10":
version "7.17.10"
resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.17.10.tgz#c281fa35b0c349bbe9d02916f4ae08fc85ed7189"
integrity sha512-46MJZZo9y3o4kmhBVc7zW7i8dtR1oIK/sdO5NcfcZRhTGYi+KKJRtHNgsU6c4VUcJmUNV/LQdebD/9Dlv4K+Tg==
dependencies:
"@babel/types" "^7.17.10"
"@jridgewell/gen-mapping" "^0.1.0"
jsesc "^2.5.1"
"@babel/generator@^7.17.3":
version "7.17.7"
resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.17.7.tgz#8da2599beb4a86194a3b24df6c085931d9ee45ad"
@ -75,7 +89,7 @@
"@babel/helper-explode-assignable-expression" "^7.16.7"
"@babel/types" "^7.16.7"
"@babel/helper-compilation-targets@^7.13.0", "@babel/helper-compilation-targets@^7.16.7", "@babel/helper-compilation-targets@^7.17.7":
"@babel/helper-compilation-targets@^7.13.0", "@babel/helper-compilation-targets@^7.16.7":
version "7.17.7"
resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.17.7.tgz#a3c2924f5e5f0379b356d4cfb313d1414dc30e46"
integrity sha512-UFzlz2jjd8kroj0hmCFV5zr+tQPi1dpC2cRsDV/3IEW8bJfCPrPpmcSN6ZS8RqIq4LXcmpipCQFPddyFA5Yc7w==
@ -85,6 +99,16 @@
browserslist "^4.17.5"
semver "^6.3.0"
"@babel/helper-compilation-targets@^7.17.10":
version "7.17.10"
resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.17.10.tgz#09c63106d47af93cf31803db6bc49fef354e2ebe"
integrity sha512-gh3RxjWbauw/dFiU/7whjd0qN9K6nPJMqe6+Er7rOavFh0CQUSwhAE3IcTho2rywPJFxej6TUUHDkWcYI6gGqQ==
dependencies:
"@babel/compat-data" "^7.17.10"
"@babel/helper-validator-option" "^7.16.7"
browserslist "^4.20.2"
semver "^6.3.0"
"@babel/helper-create-class-features-plugin@^7.16.10", "@babel/helper-create-class-features-plugin@^7.16.7", "@babel/helper-create-class-features-plugin@^7.17.6":
version "7.17.6"
resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.17.6.tgz#3778c1ed09a7f3e65e6d6e0f6fbfcc53809d92c9"
@ -98,7 +122,7 @@
"@babel/helper-replace-supers" "^7.16.7"
"@babel/helper-split-export-declaration" "^7.16.7"
"@babel/helper-create-regexp-features-plugin@^7.16.7":
"@babel/helper-create-regexp-features-plugin@^7.16.7", "@babel/helper-create-regexp-features-plugin@^7.17.0":
version "7.17.0"
resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.17.0.tgz#1dcc7d40ba0c6b6b25618997c5dbfd310f186fe1"
integrity sha512-awO2So99wG6KnlE+TPs6rn83gCz5WlEePJDTnLEqbchMVrBeAujURVphRdigsk094VhvZehFoNOihSlcBjwsXA==
@ -289,6 +313,11 @@
resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.17.8.tgz#2817fb9d885dd8132ea0f8eb615a6388cca1c240"
integrity sha512-BoHhDJrJXqcg+ZL16Xv39H9n+AqJ4pcDrQBGZN+wHxIysrLZ3/ECwCBUch/1zUNhnsXULcONU3Ei5Hmkfk6kiQ==
"@babel/parser@^7.17.10":
version "7.17.10"
resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.17.10.tgz#873b16db82a8909e0fbd7f115772f4b739f6ce78"
integrity sha512-n2Q6i+fnJqzOaq2VkdXxy2TCPCWQZHiCo0XqmrCvDWcZQKRyZzYi4Z0yxlBuN0w+r2ZHmre+Q087DSrw3pbJDQ==
"@babel/parser@^7.17.9":
version "7.17.9"
resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.17.9.tgz#9c94189a6062f0291418ca021077983058e171ef"
@ -327,7 +356,7 @@
"@babel/helper-create-class-features-plugin" "^7.16.7"
"@babel/helper-plugin-utils" "^7.16.7"
"@babel/plugin-proposal-class-static-block@^7.16.7":
"@babel/plugin-proposal-class-static-block@^7.17.6":
version "7.17.6"
resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.17.6.tgz#164e8fd25f0d80fa48c5a4d1438a6629325ad83c"
integrity sha512-X/tididvL2zbs7jZCeeRJ8167U/+Ac135AM6jCAx6gYXDUviZV5Ku9UDvWS2NCuWlFjIRXklYhwo6HhAC7ETnA==
@ -384,7 +413,7 @@
"@babel/helper-plugin-utils" "^7.16.7"
"@babel/plugin-syntax-numeric-separator" "^7.10.4"
"@babel/plugin-proposal-object-rest-spread@^7.16.7":
"@babel/plugin-proposal-object-rest-spread@^7.17.3":
version "7.17.3"
resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.17.3.tgz#d9eb649a54628a51701aef7e0ea3d17e2b9dd390"
integrity sha512-yuL5iQA/TbZn+RGAfxQXfi7CNLmKi1f8zInn4IgobuCWcAb7i+zj4TYzQ9l8cEzVyJ89PDGuqxK1xZpUDISesw==
@ -587,7 +616,7 @@
dependencies:
"@babel/helper-plugin-utils" "^7.16.7"
"@babel/plugin-transform-destructuring@^7.16.7":
"@babel/plugin-transform-destructuring@^7.17.7":
version "7.17.7"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.17.7.tgz#49dc2675a7afa9a5e4c6bdee636061136c3408d1"
integrity sha512-XVh0r5yq9sLR4vZ6eVZe8FKfIcSgaTBxVBRSYokRj2qksf6QerYnTxz9/GTuKTH/n/HwLP7t6gtlybHetJ/6hQ==
@ -656,17 +685,17 @@
"@babel/helper-plugin-utils" "^7.16.7"
babel-plugin-dynamic-import-node "^2.3.3"
"@babel/plugin-transform-modules-commonjs@^7.16.8":
version "7.17.7"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.17.7.tgz#d86b217c8e45bb5f2dbc11eefc8eab62cf980d19"
integrity sha512-ITPmR2V7MqioMJyrxUo2onHNC3e+MvfFiFIR0RP21d3PtlVb6sfzoxNKiphSZUOM9hEIdzCcZe83ieX3yoqjUA==
"@babel/plugin-transform-modules-commonjs@^7.17.9":
version "7.17.9"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.17.9.tgz#274be1a2087beec0254d4abd4d86e52442e1e5b6"
integrity sha512-2TBFd/r2I6VlYn0YRTz2JdazS+FoUuQ2rIFHoAxtyP/0G3D82SBLaRq9rnUkpqlLg03Byfl/+M32mpxjO6KaPw==
dependencies:
"@babel/helper-module-transforms" "^7.17.7"
"@babel/helper-plugin-utils" "^7.16.7"
"@babel/helper-simple-access" "^7.17.7"
babel-plugin-dynamic-import-node "^2.3.3"
"@babel/plugin-transform-modules-systemjs@^7.16.7":
"@babel/plugin-transform-modules-systemjs@^7.17.8":
version "7.17.8"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.17.8.tgz#81fd834024fae14ea78fbe34168b042f38703859"
integrity sha512-39reIkMTUVagzgA5x88zDYXPCMT6lcaRKs1+S9K6NKBPErbgO/w/kP8GlNQTC87b412ZTlmNgr3k2JrWgHH+Bw==
@ -685,12 +714,12 @@
"@babel/helper-module-transforms" "^7.16.7"
"@babel/helper-plugin-utils" "^7.16.7"
"@babel/plugin-transform-named-capturing-groups-regex@^7.16.8":
version "7.16.8"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.16.8.tgz#7f860e0e40d844a02c9dcf9d84965e7dfd666252"
integrity sha512-j3Jw+n5PvpmhRR+mrgIh04puSANCk/T/UA3m3P1MjJkhlK906+ApHhDIqBQDdOgL/r1UYpz4GNclTXxyZrYGSw==
"@babel/plugin-transform-named-capturing-groups-regex@^7.17.10":
version "7.17.10"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.17.10.tgz#715dbcfafdb54ce8bccd3d12e8917296a4ba66a4"
integrity sha512-v54O6yLaJySCs6mGzaVOUw9T967GnH38T6CQSAtnzdNPwu84l2qAjssKzo/WSO8Yi7NF+7ekm5cVbF/5qiIgNA==
dependencies:
"@babel/helper-create-regexp-features-plugin" "^7.16.7"
"@babel/helper-create-regexp-features-plugin" "^7.17.0"
"@babel/plugin-transform-new-target@^7.16.7":
version "7.16.7"
@ -721,12 +750,12 @@
dependencies:
"@babel/helper-plugin-utils" "^7.16.7"
"@babel/plugin-transform-regenerator@^7.16.7":
version "7.16.7"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.16.7.tgz#9e7576dc476cb89ccc5096fff7af659243b4adeb"
integrity sha512-mF7jOgGYCkSJagJ6XCujSQg+6xC1M77/03K2oBmVJWoFGNUtnVJO4WHKJk3dnPC8HCcj4xBQP1Egm8DWh3Pb3Q==
"@babel/plugin-transform-regenerator@^7.17.9":
version "7.17.9"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.17.9.tgz#0a33c3a61cf47f45ed3232903683a0afd2d3460c"
integrity sha512-Lc2TfbxR1HOyn/c6b4Y/b6NHoTb67n/IoWLxTu4kC7h4KQnWlhCq2S8Tx0t2SVvv5Uu87Hs+6JEJ5kt2tYGylQ==
dependencies:
regenerator-transform "^0.14.2"
regenerator-transform "^0.15.0"
"@babel/plugin-transform-reserved-words@^7.16.7":
version "7.16.7"
@ -735,10 +764,10 @@
dependencies:
"@babel/helper-plugin-utils" "^7.16.7"
"@babel/plugin-transform-runtime@^7.17.0":
version "7.17.0"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.17.0.tgz#0a2e08b5e2b2d95c4b1d3b3371a2180617455b70"
integrity sha512-fr7zPWnKXNc1xoHfrIU9mN/4XKX4VLZ45Q+oMhfsYIaHvg7mHgmhfOy/ckRWqDK7XF3QDigRpkh5DKq6+clE8A==
"@babel/plugin-transform-runtime@^7.17.10":
version "7.17.10"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.17.10.tgz#b89d821c55d61b5e3d3c3d1d636d8d5a81040ae1"
integrity sha512-6jrMilUAJhktTr56kACL8LnWC5hx3Lf27BS0R0DSyW/OoJfb/iTHeE96V3b1dgKG3FSFdd/0culnYWMkjcKCig==
dependencies:
"@babel/helper-module-imports" "^7.16.7"
"@babel/helper-plugin-utils" "^7.16.7"
@ -798,27 +827,27 @@
"@babel/helper-create-regexp-features-plugin" "^7.16.7"
"@babel/helper-plugin-utils" "^7.16.7"
"@babel/preset-env@^7.16.11":
version "7.16.11"
resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.16.11.tgz#5dd88fd885fae36f88fd7c8342475c9f0abe2982"
integrity sha512-qcmWG8R7ZW6WBRPZK//y+E3Cli151B20W1Rv7ln27vuPaXU/8TKms6jFdiJtF7UDTxcrb7mZd88tAeK9LjdT8g==
"@babel/preset-env@^7.17.10":
version "7.17.10"
resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.17.10.tgz#a81b093669e3eb6541bb81a23173c5963c5de69c"
integrity sha512-YNgyBHZQpeoBSRBg0xixsZzfT58Ze1iZrajvv0lJc70qDDGuGfonEnMGfWeSY0mQ3JTuCWFbMkzFRVafOyJx4g==
dependencies:
"@babel/compat-data" "^7.16.8"
"@babel/helper-compilation-targets" "^7.16.7"
"@babel/compat-data" "^7.17.10"
"@babel/helper-compilation-targets" "^7.17.10"
"@babel/helper-plugin-utils" "^7.16.7"
"@babel/helper-validator-option" "^7.16.7"
"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression" "^7.16.7"
"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.16.7"
"@babel/plugin-proposal-async-generator-functions" "^7.16.8"
"@babel/plugin-proposal-class-properties" "^7.16.7"
"@babel/plugin-proposal-class-static-block" "^7.16.7"
"@babel/plugin-proposal-class-static-block" "^7.17.6"
"@babel/plugin-proposal-dynamic-import" "^7.16.7"
"@babel/plugin-proposal-export-namespace-from" "^7.16.7"
"@babel/plugin-proposal-json-strings" "^7.16.7"
"@babel/plugin-proposal-logical-assignment-operators" "^7.16.7"
"@babel/plugin-proposal-nullish-coalescing-operator" "^7.16.7"
"@babel/plugin-proposal-numeric-separator" "^7.16.7"
"@babel/plugin-proposal-object-rest-spread" "^7.16.7"
"@babel/plugin-proposal-object-rest-spread" "^7.17.3"
"@babel/plugin-proposal-optional-catch-binding" "^7.16.7"
"@babel/plugin-proposal-optional-chaining" "^7.16.7"
"@babel/plugin-proposal-private-methods" "^7.16.11"
@ -844,7 +873,7 @@
"@babel/plugin-transform-block-scoping" "^7.16.7"
"@babel/plugin-transform-classes" "^7.16.7"
"@babel/plugin-transform-computed-properties" "^7.16.7"
"@babel/plugin-transform-destructuring" "^7.16.7"
"@babel/plugin-transform-destructuring" "^7.17.7"
"@babel/plugin-transform-dotall-regex" "^7.16.7"
"@babel/plugin-transform-duplicate-keys" "^7.16.7"
"@babel/plugin-transform-exponentiation-operator" "^7.16.7"
@ -853,15 +882,15 @@
"@babel/plugin-transform-literals" "^7.16.7"
"@babel/plugin-transform-member-expression-literals" "^7.16.7"
"@babel/plugin-transform-modules-amd" "^7.16.7"
"@babel/plugin-transform-modules-commonjs" "^7.16.8"
"@babel/plugin-transform-modules-systemjs" "^7.16.7"
"@babel/plugin-transform-modules-commonjs" "^7.17.9"
"@babel/plugin-transform-modules-systemjs" "^7.17.8"
"@babel/plugin-transform-modules-umd" "^7.16.7"
"@babel/plugin-transform-named-capturing-groups-regex" "^7.16.8"
"@babel/plugin-transform-named-capturing-groups-regex" "^7.17.10"
"@babel/plugin-transform-new-target" "^7.16.7"
"@babel/plugin-transform-object-super" "^7.16.7"
"@babel/plugin-transform-parameters" "^7.16.7"
"@babel/plugin-transform-property-literals" "^7.16.7"
"@babel/plugin-transform-regenerator" "^7.16.7"
"@babel/plugin-transform-regenerator" "^7.17.9"
"@babel/plugin-transform-reserved-words" "^7.16.7"
"@babel/plugin-transform-shorthand-properties" "^7.16.7"
"@babel/plugin-transform-spread" "^7.16.7"
@ -871,11 +900,11 @@
"@babel/plugin-transform-unicode-escapes" "^7.16.7"
"@babel/plugin-transform-unicode-regex" "^7.16.7"
"@babel/preset-modules" "^0.1.5"
"@babel/types" "^7.16.8"
"@babel/types" "^7.17.10"
babel-plugin-polyfill-corejs2 "^0.3.0"
babel-plugin-polyfill-corejs3 "^0.5.0"
babel-plugin-polyfill-regenerator "^0.3.0"
core-js-compat "^3.20.2"
core-js-compat "^3.22.1"
semver "^6.3.0"
"@babel/preset-modules@^0.1.5":
@ -928,6 +957,22 @@
debug "^4.1.0"
globals "^11.1.0"
"@babel/traverse@^7.17.10":
version "7.17.10"
resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.17.10.tgz#1ee1a5ac39f4eac844e6cf855b35520e5eb6f8b5"
integrity sha512-VmbrTHQteIdUUQNTb+zE12SHS/xQVIShmBPhlNP12hD5poF2pbITW1Z4172d03HegaQWhLffdkRJYtAzp0AGcw==
dependencies:
"@babel/code-frame" "^7.16.7"
"@babel/generator" "^7.17.10"
"@babel/helper-environment-visitor" "^7.16.7"
"@babel/helper-function-name" "^7.17.9"
"@babel/helper-hoist-variables" "^7.16.7"
"@babel/helper-split-export-declaration" "^7.16.7"
"@babel/parser" "^7.17.10"
"@babel/types" "^7.17.10"
debug "^4.1.0"
globals "^11.1.0"
"@babel/traverse@^7.17.9":
version "7.17.9"
resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.17.9.tgz#1f9b207435d9ae4a8ed6998b2b82300d83c37a0d"
@ -952,11 +997,32 @@
"@babel/helper-validator-identifier" "^7.16.7"
to-fast-properties "^2.0.0"
"@babel/types@^7.17.10":
version "7.17.10"
resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.17.10.tgz#d35d7b4467e439fcf06d195f8100e0fea7fc82c4"
integrity sha512-9O26jG0mBYfGkUYCYZRnBwbVLd1UZOICEr2Em6InB6jVfsAv1GKgwXHmrSg+WFWDmeKTA6vyTZiN8tCSM5Oo3A==
dependencies:
"@babel/helper-validator-identifier" "^7.16.7"
to-fast-properties "^2.0.0"
"@jridgewell/gen-mapping@^0.1.0":
version "0.1.1"
resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz#e5d2e450306a9491e3bd77e323e38d7aff315996"
integrity sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==
dependencies:
"@jridgewell/set-array" "^1.0.0"
"@jridgewell/sourcemap-codec" "^1.4.10"
"@jridgewell/resolve-uri@^3.0.3":
version "3.0.5"
resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.0.5.tgz#68eb521368db76d040a6315cdb24bf2483037b9c"
integrity sha512-VPeQ7+wH0itvQxnG+lIzWgkysKIr3L9sslimFW55rHMdGu/qCQ5z5h9zq4gI8uBtqkpHhsF4Z/OwExufUCThew==
"@jridgewell/set-array@^1.0.0":
version "1.1.0"
resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.0.tgz#1179863356ac8fbea64a5a4bcde93a4871012c01"
integrity sha512-SfJxIxNVYLTsKwzB3MoOQ1yxf4w/E6MdkvTgrgAt1bfxjSrLUoHMKrDOykwN14q65waezZIdqDneUIPh4/sKxg==
"@jridgewell/sourcemap-codec@^1.4.10":
version "1.4.11"
resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.11.tgz#771a1d8d744eeb71b6adb35808e1a6c7b9b8c8ec"
@ -1135,6 +1201,17 @@ browserslist@^4.17.5, browserslist@^4.19.1:
node-releases "^2.0.2"
picocolors "^1.0.0"
browserslist@^4.20.2, browserslist@^4.20.3:
version "4.20.3"
resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.20.3.tgz#eb7572f49ec430e054f56d52ff0ebe9be915f8bf"
integrity sha512-NBhymBQl1zM0Y5dQT/O+xiLP9/rzOIQdKM/eMJBAq7yBgaB6krIYLGejrwVYnSHZdqjscB1SPuAjHwxjvN6Wdg==
dependencies:
caniuse-lite "^1.0.30001332"
electron-to-chromium "^1.4.118"
escalade "^3.1.1"
node-releases "^2.0.3"
picocolors "^1.0.0"
buffer-crc32@^0.2.5:
version "0.2.13"
resolved "https://registry.yarnpkg.com/buffer-crc32/-/buffer-crc32-0.2.13.tgz#0d333e3f00eac50aa1454abd30ef8c2a5d9a7242"
@ -1171,10 +1248,15 @@ caniuse-lite@^1.0.30001317:
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001319.tgz#eb4da4eb3ecdd409f7ba1907820061d56096e88f"
integrity sha512-xjlIAFHucBRSMUo1kb5D4LYgcN1M45qdKP++lhqowDpwJwGkpIRTt5qQqnhxjj1vHcI7nrJxWhCC1ATrCEBTcw==
carbon-components-svelte@^0.63.0:
version "0.63.0"
resolved "https://registry.yarnpkg.com/carbon-components-svelte/-/carbon-components-svelte-0.63.0.tgz#ab46b431b66a4e458ff3647c51d6789214c13fad"
integrity sha512-oG5pW1/Tzuc/2MW5ekRLp6oGmIZjvIoY8y/Dg7M8Bj35hB6ofgs5BQPLa/UjsnVOEC3YqNVu18vXnvFqkjAA8A==
caniuse-lite@^1.0.30001332:
version "1.0.30001334"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001334.tgz#892e9965b35285033fc2b8a8eff499fe02f13d8b"
integrity sha512-kbaCEBRRVSoeNs74sCuq92MJyGrMtjWVfhltoHUCW4t4pXFvGjUBrfo47weBRViHkiV3eBYyIsfl956NtHGazw==
carbon-components-svelte@^0.63.4:
version "0.63.4"
resolved "https://registry.yarnpkg.com/carbon-components-svelte/-/carbon-components-svelte-0.63.4.tgz#7f44e9f197a7b99ffb2b381a19c22be94664677e"
integrity sha512-ZDEgPF6XJzHOMt10JDmzvu78gy5TapHXPBg3jA38HD6acfRG5AWYcGAH55/qIxPkBd7VTBixOst2DQ1sMH0kwA==
dependencies:
flatpickr "4.6.9"
@ -1242,7 +1324,7 @@ convert-source-map@^1.7.0:
dependencies:
safe-buffer "~5.1.1"
core-js-compat@^3.20.2, core-js-compat@^3.21.0:
core-js-compat@^3.21.0:
version "3.21.1"
resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.21.1.tgz#cac369f67c8d134ff8f9bd1623e3bc2c42068c82"
integrity sha512-gbgX5AUvMb8gwxC7FLVWYT7Kkgu/y7+h/h1X43yJkNqhlK2fuYyQimqvKGNZFAY6CKii/GFKJ2cp/1/42TN36g==
@ -1250,6 +1332,14 @@ core-js-compat@^3.20.2, core-js-compat@^3.21.0:
browserslist "^4.19.1"
semver "7.0.0"
core-js-compat@^3.22.1:
version "3.22.3"
resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.22.3.tgz#9b10d786052d042bc97ee8df9c0d1fb6a49c2005"
integrity sha512-wliMbvPI2idgFWpFe7UEyHMvu6HWgW8WA+HnDRtgzoSDYvXFMpoGX1H3tPDDXrcfUSyXafCLDd7hOeMQHEZxGw==
dependencies:
browserslist "^4.20.3"
semver "7.0.0"
cssesc@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
@ -1279,6 +1369,11 @@ detect-indent@^6.0.0:
resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-6.1.0.tgz#592485ebbbf6b3b1ab2be175c8393d04ca0d57e6"
integrity sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==
electron-to-chromium@^1.4.118:
version "1.4.129"
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.129.tgz#c675793885721beefff99da50f57c6525c2cd238"
integrity sha512-GgtN6bsDtHdtXJtlMYZWGB/uOyjZWjmRDumXTas7dGBaB9zUyCjzHet1DY2KhyHN8R0GLbzZWqm4efeddqqyRQ==
electron-to-chromium@^1.4.84:
version "1.4.91"
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.91.tgz#842bbc97fd639abe7e46e7da530e3af5f6ca2831"
@ -1561,6 +1656,11 @@ node-releases@^2.0.2:
resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.2.tgz#7139fe71e2f4f11b47d4d2986aaf8c48699e0c01"
integrity sha512-XxYDdcQ6eKqp/YjI+tb2C5WM2LgjnZrfYg4vgQt49EK268b6gYCHsBLrK2qvJo4FmCtqmKezb0WZFK4fkrZNsg==
node-releases@^2.0.3:
version "2.0.4"
resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.4.tgz#f38252370c43854dc48aa431c766c6c398f40476"
integrity sha512-gbMzqQtTtDz/00jQzZ21PQzdI9PyLYqUSvD0p3naOhX4odFji0ZxYdnVwPTxmSwkmxhcFImpozceidSG+AgoPQ==
object-keys@^1.0.12, object-keys@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
@ -1669,10 +1769,10 @@ regenerator-runtime@^0.13.4:
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
regenerator-transform@^0.14.2:
version "0.14.5"
resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.5.tgz#c98da154683671c9c4dcb16ece736517e1b7feb4"
integrity sha512-eOf6vka5IO151Jfsw2NO9WpGX58W6wWmefK3I1zEGr0lOD0u8rwPaNqQL1aRxUaxLeKO3ArNh3VYg1KbaD+FFw==
regenerator-transform@^0.15.0:
version "0.15.0"
resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.0.tgz#cbd9ead5d77fae1a48d957cf889ad0586adb6537"
integrity sha512-LsrGtPmbYg19bcPHwdtmXwbW+TqNvtY4riE3P83foeHRroMbH6/2ddFBfab3t7kbzc7v7p4wbkIecHImqt0QNg==
dependencies:
"@babel/runtime" "^7.8.4"
@ -1756,10 +1856,10 @@ rollup-pluginutils@^2.8.2:
dependencies:
estree-walker "^0.6.1"
rollup@^2.70.2:
version "2.70.2"
resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.70.2.tgz#808d206a8851628a065097b7ba2053bd83ba0c0d"
integrity sha512-EitogNZnfku65I1DD5Mxe8JYRUCy0hkK5X84IlDtUs+O6JRMpRciXTzyCUuX11b5L5pvjH+OmFXiQ3XjabcXgg==
rollup@^2.71.1:
version "2.71.1"
resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.71.1.tgz#82b259af7733dfd1224a8171013aaaad02971a22"
integrity sha512-lMZk3XfUBGjrrZQpvPSoXcZSfKcJ2Bgn+Z0L1MoW2V8Wh7BVM+LOBJTPo16yul2MwL59cXedzW1ruq3rCjSRgw==
optionalDependencies:
fsevents "~2.3.2"

2
examples/snowpack/package.json
View file

@ -9,7 +9,7 @@
},
"devDependencies": {
"@snowpack/plugin-svelte": "^3.7.0",
"carbon-components-svelte": "^0.63.0",
"carbon-components-svelte": "^0.63.4",
"carbon-preprocess-svelte": "^0.9.0",
"snowpack": "^3.8.8"
}

8
examples/snowpack/yarn.lock
View file

@ -581,10 +581,10 @@ callsites@^3.0.0:
resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
carbon-components-svelte@^0.63.0:
version "0.63.0"
resolved "https://registry.yarnpkg.com/carbon-components-svelte/-/carbon-components-svelte-0.63.0.tgz#ab46b431b66a4e458ff3647c51d6789214c13fad"
integrity sha512-oG5pW1/Tzuc/2MW5ekRLp6oGmIZjvIoY8y/Dg7M8Bj35hB6ofgs5BQPLa/UjsnVOEC3YqNVu18vXnvFqkjAA8A==
carbon-components-svelte@^0.63.4:
version "0.63.4"
resolved "https://registry.yarnpkg.com/carbon-components-svelte/-/carbon-components-svelte-0.63.4.tgz#7f44e9f197a7b99ffb2b381a19c22be94664677e"
integrity sha512-ZDEgPF6XJzHOMt10JDmzvu78gy5TapHXPBg3jA38HD6acfRG5AWYcGAH55/qIxPkBd7VTBixOst2DQ1sMH0kwA==
dependencies:
flatpickr "4.6.9"

4
examples/sveltekit/package.json
View file

@ -7,8 +7,8 @@
"preview": "svelte-kit preview"
},
"devDependencies": {
"@sveltejs/kit": "1.0.0-next.314",
"carbon-components-svelte": "^0.63.0",
"@sveltejs/kit": "1.0.0-next.324",
"carbon-components-svelte": "^0.63.4",
"carbon-pictograms-svelte": "^12.0.2",
"carbon-preprocess-svelte": "^0.9.0",
"svelte": "^3.47.0"

111
examples/sveltekit/yarn.lock
View file

@ -10,12 +10,13 @@
estree-walker "^2.0.1"
picomatch "^2.2.2"
"@sveltejs/kit@1.0.0-next.314":
version "1.0.0-next.314"
resolved "https://registry.yarnpkg.com/@sveltejs/kit/-/kit-1.0.0-next.314.tgz#3bd995cec8d348ae46430b7dbfa8640caf8618bb"
integrity sha512-EkXjEd30XO8+AydBLARxAtI6Ak8V0KFSEJ07sNsrkGq9J70sWPL7yGenhGaeq6S852XZAqeyWd6uGQZmQLR4Wg==
"@sveltejs/kit@1.0.0-next.324":
version "1.0.0-next.324"
resolved "https://registry.yarnpkg.com/@sveltejs/kit/-/kit-1.0.0-next.324.tgz#e30e746d47462a4de79a4e02f8a39a6310ce7024"
integrity sha512-/CGW9rQpHQLBb2EcMw08yelD/C9hTsypymctUWdhryMTI8n1VWb0gkUcSHsz8n8oAAbKLXqwyHqeLATfcIMg2w==
dependencies:
"@sveltejs/vite-plugin-svelte" "^1.0.0-next.32"
chokidar "^3.5.3"
sade "^1.7.4"
vite "^2.9.0"
@ -47,11 +48,24 @@
dependencies:
"@types/node" "*"
anymatch@~3.1.2:
version "3.1.2"
resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716"
integrity sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==
dependencies:
normalize-path "^3.0.0"
picomatch "^2.0.4"
balanced-match@^1.0.0:
version "1.0.2"
resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
binary-extensions@^2.0.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
brace-expansion@^1.1.7:
version "1.1.11"
resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@ -60,15 +74,22 @@ brace-expansion@^1.1.7:
balanced-match "^1.0.0"
concat-map "0.0.1"
braces@~3.0.2:
version "3.0.2"
resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
dependencies:
fill-range "^7.0.1"
buffer-crc32@^0.2.5:
version "0.2.13"
resolved "https://registry.yarnpkg.com/buffer-crc32/-/buffer-crc32-0.2.13.tgz#0d333e3f00eac50aa1454abd30ef8c2a5d9a7242"
integrity sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=
carbon-components-svelte@^0.63.0:
version "0.63.0"
resolved "https://registry.yarnpkg.com/carbon-components-svelte/-/carbon-components-svelte-0.63.0.tgz#ab46b431b66a4e458ff3647c51d6789214c13fad"
integrity sha512-oG5pW1/Tzuc/2MW5ekRLp6oGmIZjvIoY8y/Dg7M8Bj35hB6ofgs5BQPLa/UjsnVOEC3YqNVu18vXnvFqkjAA8A==
carbon-components-svelte@^0.63.4:
version "0.63.4"
resolved "https://registry.yarnpkg.com/carbon-components-svelte/-/carbon-components-svelte-0.63.4.tgz#7f44e9f197a7b99ffb2b381a19c22be94664677e"
integrity sha512-ZDEgPF6XJzHOMt10JDmzvu78gy5TapHXPBg3jA38HD6acfRG5AWYcGAH55/qIxPkBd7VTBixOst2DQ1sMH0kwA==
dependencies:
flatpickr "4.6.9"
@ -86,6 +107,21 @@ carbon-preprocess-svelte@^0.9.0:
svelte-preprocess "^4.10.5"
typescript "^4.6.3"
chokidar@^3.5.3:
version "3.5.3"
resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
dependencies:
anymatch "~3.1.2"
braces "~3.0.2"
glob-parent "~5.1.2"
is-binary-path "~2.1.0"
is-glob "~4.0.1"
normalize-path "~3.0.0"
readdirp "~3.6.0"
optionalDependencies:
fsevents "~2.3.2"
commander@^8.0.0:
version "8.3.0"
resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66"
@ -249,6 +285,13 @@ estree-walker@^2.0.1:
resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
fill-range@^7.0.1:
version "7.0.1"
resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
dependencies:
to-regex-range "^5.0.1"
flatpickr@4.6.9:
version "4.6.9"
resolved "https://registry.yarnpkg.com/flatpickr/-/flatpickr-4.6.9.tgz#9a13383e8a6814bda5d232eae3fcdccb97dc1499"
@ -269,6 +312,13 @@ function-bind@^1.1.1:
resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
glob-parent@~5.1.2:
version "5.1.2"
resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
dependencies:
is-glob "^4.0.1"
glob@^7.1.3, glob@^7.1.7:
version "7.2.0"
resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.0.tgz#d15535af7732e02e948f4c41628bd910293f6023"
@ -306,6 +356,13 @@ inherits@2:
resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
is-binary-path@~2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
dependencies:
binary-extensions "^2.0.0"
is-core-module@^2.8.1:
version "2.8.1"
resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.8.1.tgz#f59fdfca701d5879d0a6b100a40aa1560ce27211"
@ -313,6 +370,23 @@ is-core-module@^2.8.1:
dependencies:
has "^1.0.3"
is-extglob@^2.1.1:
version "2.1.1"
resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=
is-glob@^4.0.1, is-glob@~4.0.1:
version "4.0.3"
resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
dependencies:
is-extglob "^2.1.1"
is-number@^7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
kleur@^4.1.4:
version "4.1.4"
resolved "https://registry.yarnpkg.com/kleur/-/kleur-4.1.4.tgz#8c202987d7e577766d039a8cd461934c01cda04d"
@ -371,6 +445,11 @@ nanoid@^3.3.1:
resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.1.tgz#6347a18cac88af88f58af0b3594b723d5e99bb35"
integrity sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw==
normalize-path@^3.0.0, normalize-path@~3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
once@^1.3.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
@ -393,7 +472,7 @@ picocolors@^1.0.0:
resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
picomatch@^2.2.2:
picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2:
version "2.3.1"
resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
@ -425,6 +504,13 @@ purgecss@^4.1.3:
postcss "^8.3.5"
postcss-selector-parser "^6.0.6"
readdirp@~3.6.0:
version "3.6.0"
resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
dependencies:
picomatch "^2.2.1"
resolve@^1.22.0:
version "1.22.0"
resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.0.tgz#5e0b8c67c15df57a89bdbabe603a002f21731198"
@ -519,6 +605,13 @@ svelte@^3.47.0:
resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.47.0.tgz#ba46fe4aea99fc650d6939c215cd4694f5325a19"
integrity sha512-4JaJp3HEoTCGARRWZQIZDUanhYv0iyoHikklVHVLH9xFE9db22g4TDv7CPeNA8HD1JgjXI1vlhR1JZvvhaTu2Q==
to-regex-range@^5.0.1:
version "5.0.1"
resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
dependencies:
is-number "^7.0.0"
typescript@^4.6.3:
version "4.6.3"
resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.6.3.tgz#eefeafa6afdd31d725584c67a0eaba80f6fc6c6c"

6
examples/vite/package.json
View file

@ -5,10 +5,10 @@
"build": "vite build"
},
"devDependencies": {
"@sveltejs/vite-plugin-svelte": "1.0.0-next.41",
"carbon-components-svelte": "^0.63.0",
"@sveltejs/vite-plugin-svelte": "1.0.0-next.42",
"carbon-components-svelte": "^0.63.4",
"carbon-preprocess-svelte": "^0.9.0",
"svelte": "^3.47.0",
"vite": "^2.9.5"
"vite": "^2.9.6"
}
}

28
examples/vite/yarn.lock
View file

@ -2,7 +2,7 @@
# yarn lockfile v1
"@rollup/pluginutils@^4.2.0":
"@rollup/pluginutils@^4.2.1":
version "4.2.1"
resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.2.1.tgz#e6c6c3aba0744edce3fb2074922d3776c0af2a6d"
integrity sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==
@ -10,12 +10,12 @@
estree-walker "^2.0.1"
picomatch "^2.2.2"
"@sveltejs/vite-plugin-svelte@1.0.0-next.41":
version "1.0.0-next.41"
resolved "https://registry.yarnpkg.com/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.0-next.41.tgz#4778502af8a23c65ceaa0b5225ed722d3ad6b5e0"
integrity sha512-2kZ49mpi/YW1PIPvKaJNSSwIFgmw9QUf1+yaNa4U8yJD6AsfSHXAU3goscWbi1jfWnSg2PhvwAf+bvLCdp2F9g==
"@sveltejs/vite-plugin-svelte@1.0.0-next.42":
version "1.0.0-next.42"
resolved "https://registry.yarnpkg.com/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.0-next.42.tgz#09e5327eb2cda0c067367864ff33c26080847ae9"
integrity sha512-I8ILzfjVQuOkl6eDHif6/QJhOEBnsA40u6/0RDWK0mujwOr+MfWCWEZEnrTKqa6YIVMO+uktfoknu61chbAIeg==
dependencies:
"@rollup/pluginutils" "^4.2.0"
"@rollup/pluginutils" "^4.2.1"
debug "^4.3.4"
kleur "^4.1.4"
magic-string "^0.26.1"
@ -56,10 +56,10 @@ buffer-crc32@^0.2.5:
resolved "https://registry.yarnpkg.com/buffer-crc32/-/buffer-crc32-0.2.13.tgz#0d333e3f00eac50aa1454abd30ef8c2a5d9a7242"
integrity sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=
carbon-components-svelte@^0.63.0:
version "0.63.0"
resolved "https://registry.yarnpkg.com/carbon-components-svelte/-/carbon-components-svelte-0.63.0.tgz#ab46b431b66a4e458ff3647c51d6789214c13fad"
integrity sha512-oG5pW1/Tzuc/2MW5ekRLp6oGmIZjvIoY8y/Dg7M8Bj35hB6ofgs5BQPLa/UjsnVOEC3YqNVu18vXnvFqkjAA8A==
carbon-components-svelte@^0.63.4:
version "0.63.4"
resolved "https://registry.yarnpkg.com/carbon-components-svelte/-/carbon-components-svelte-0.63.4.tgz#7f44e9f197a7b99ffb2b381a19c22be94664677e"
integrity sha512-ZDEgPF6XJzHOMt10JDmzvu78gy5TapHXPBg3jA38HD6acfRG5AWYcGAH55/qIxPkBd7VTBixOst2DQ1sMH0kwA==
dependencies:
flatpickr "4.6.9"
@ -503,10 +503,10 @@ util-deprecate@^1.0.2:
resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
vite@^2.9.5:
version "2.9.5"
resolved "https://registry.yarnpkg.com/vite/-/vite-2.9.5.tgz#08ef37ac7a6d879c96f328b791732c9a00ea25ea"
integrity sha512-dvMN64X2YEQgSXF1lYabKXw3BbN6e+BL67+P3Vy4MacnY+UzT1AfkHiioFSi9+uiDUiaDy7Ax/LQqivk6orilg==
vite@^2.9.6:
version "2.9.6"
resolved "https://registry.yarnpkg.com/vite/-/vite-2.9.6.tgz#29f1b33193b0de9e155d67ba0dd097501c3c3281"
integrity sha512-3IffdrByHW95Yjv0a13TQOQfJs7L5dVlSPuTt432XLbRMriWbThqJN2k/IS6kXn5WY4xBLhK9XoaWay1B8VzUw==
dependencies:
esbuild "^0.14.27"
postcss "^8.4.12"

2
examples/webpack/package.json
View file

@ -5,7 +5,7 @@
"build": "rm -rf public && NODE_ENV=production webpack"
},
"devDependencies": {
"carbon-components-svelte": "^0.63.0",
"carbon-components-svelte": "^0.63.4",
"carbon-preprocess-svelte": "^0.9.0",
"css-loader": "^6.7.1",
"esbuild-loader": "^2.18.0",

8
examples/webpack/yarn.lock
View file

@ -515,10 +515,10 @@ caniuse-lite@^1.0.30001317:
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001332.tgz#39476d3aa8d83ea76359c70302eafdd4a1d727dd"
integrity sha512-10T30NYOEQtN6C11YGg411yebhvpnC6Z102+B95eAsN0oB6KUs01ivE8u+G6FMIRtIrVlYXhL+LUwQ3/hXwDWw==
carbon-components-svelte@^0.63.0:
version "0.63.0"
resolved "https://registry.yarnpkg.com/carbon-components-svelte/-/carbon-components-svelte-0.63.0.tgz#ab46b431b66a4e458ff3647c51d6789214c13fad"
integrity sha512-oG5pW1/Tzuc/2MW5ekRLp6oGmIZjvIoY8y/Dg7M8Bj35hB6ofgs5BQPLa/UjsnVOEC3YqNVu18vXnvFqkjAA8A==
carbon-components-svelte@^0.63.4:
version "0.63.4"
resolved "https://registry.yarnpkg.com/carbon-components-svelte/-/carbon-components-svelte-0.63.4.tgz#7f44e9f197a7b99ffb2b381a19c22be94664677e"
integrity sha512-ZDEgPF6XJzHOMt10JDmzvu78gy5TapHXPBg3jA38HD6acfRG5AWYcGAH55/qIxPkBd7VTBixOst2DQ1sMH0kwA==
dependencies:
flatpickr "4.6.9"

4
package.json
View file

@ -1,6 +1,6 @@
{
"name": "carbon-components-svelte",
"version": "0.63.2",
"version": "0.64.0",
"license": "Apache-2.0",
"description": "Svelte implementation of the Carbon Design System",
"svelte": "./src/index.js",
@ -38,7 +38,7 @@
"rollup-plugin-svelte": "^7.1.0",
"rollup-plugin-terser": "^7.0.2",
"sass": "^1.49.11",
"sveld": "^0.15.0",
"sveld": "^0.15.3",
"svelte": "^3.46.6",
"svelte-check": "^2.4.6",
"typescript": "^4.6.3"

3
src/AspectRatio/AspectRatio.svelte
View file

@ -1,7 +1,7 @@
<script>
/**
* Specify the aspect ratio
* @type {"2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2"}
* @type {"2x1" | "2x3" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2"}
*/
export let ratio = "2x1";
</script>
@ -9,6 +9,7 @@
<div
class:bx--aspect-ratio="{true}"
class:bx--aspect-ratio--2x1="{ratio === '2x1'}"
class:bx--aspect-ratio--2x3="{ratio === '2x3'}"
class:bx--aspect-ratio--16x9="{ratio === '16x9'}"
class:bx--aspect-ratio--4x3="{ratio === '4x3'}"
class:bx--aspect-ratio--1x1="{ratio === '1x1'}"

8
src/CodeSnippet/CodeSnippet.svelte
View file

@ -1,4 +1,9 @@
<script>
/**
* @event {null} expand
* @event {null} collapse
*/
/**
* Set the type of code snippet
* @type {"single" | "inline" | "multi"}
@ -117,6 +122,7 @@
if (code === undefined) setShowMoreLess();
if (code) tick().then(setShowMoreLess);
}
$: if (type === "multi") dispatch(expanded ? "expand" : "collapse");
onMount(() => {
return () => clearTimeout(timeout);
@ -235,7 +241,7 @@
{#if showMoreLess}
<Button
kind="ghost"
size="field"
size="small"
class="bx--snippet-btn--expand"
disabled="{disabled}"
on:click="{() => {

14
src/ComboBox/ComboBox.svelte
View file

@ -76,11 +76,19 @@
export let shouldFilterItem = () => true;
/**
* Override the default translation ids
* @type {(id: any) => string}
* Override the chevron icon label based on the open state.
* Defaults to "Open menu" when closed and "Close menu" when open
* @type {(id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string}
*/
export let translateWithId = undefined;
/**
* Override the label of the clear button when the input has a selection.
* Defaults to "Clear selected item" since a combo box can only have on selection.
* @type {(id: "clearSelection") => string}
*/
export let translateWithIdSelection = undefined;
/** Set an id for the list box component */
export let id = "ccs-" + Math.random().toString(36);
@ -325,7 +333,7 @@
<ListBoxSelection
on:clear
on:clear="{clear}"
translateWithId="{translateWithId}"
translateWithId="{translateWithIdSelection}"
disabled="{disabled}"
open="{open}"
/>

22
src/DataTable/DataTable.svelte
View file

@ -2,8 +2,8 @@
/**
* @typedef {string} DataTableKey
* @typedef {any} DataTableValue
* @typedef {{ key: DataTableKey; empty: boolean; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; }} DataTableEmptyHeader
* @typedef {{ key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; }} DataTableNonEmptyHeader
* @typedef {{ key: DataTableKey; empty: boolean; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; width?: string; minWidth?: string; }} DataTableEmptyHeader
* @typedef {{ key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; width?: string; minWidth?: string; }} DataTableNonEmptyHeader
* @typedef {DataTableNonEmptyHeader | DataTableEmptyHeader} DataTableHeader
* @typedef {{ id: any; [key: string]: DataTableValue; }} DataTableRow
* @typedef {any} DataTableRowId
@ -240,6 +240,20 @@
: rows;
$: displayedRows = getDisplayedRows($tableRows, page, pageSize);
$: displayedSortedRows = getDisplayedRows(sortedRows, page, pageSize);
$: hasCustomHeaderWidth = headers.some(
(header) => header.width || header.minWidth
);
/** @type {(header: DataTableHeader) => undefined | string} */
const formatHeaderWidth = (header) => {
const styles = [
header.width && `width: ${header.width}`,
header.minWidth && `min-width: ${header.minWidth}`,
].filter(Boolean);
if (styles.length === 0) return undefined;
return styles.join(";");
};
</script>
<TableContainer useStaticWidth="{useStaticWidth}" {...$$restProps}>
@ -264,6 +278,7 @@
stickyHeader="{stickyHeader}"
sortable="{sortable}"
useStaticWidth="{useStaticWidth}"
tableStyle="{hasCustomHeaderWidth && 'table-layout: fixed'}"
>
<TableHead>
<TableRow>
@ -322,6 +337,7 @@
{:else}
<TableHeader
id="{header.key}"
style="{formatHeaderWidth(header)}"
disableSorting="{header.sort === false}"
on:click="{() => {
dispatch('click', { header });
@ -353,7 +369,7 @@
<TableBody>
{#each sorting ? displayedSortedRows : displayedRows as row, i (row.id)}
<TableRow
id="row-{row.id}"
data-row="{row.id}"
data-parent-row="{expandable ? true : undefined}"
class="{selectedRowIds.includes(row.id)
? 'bx--data-table--selected'

8
src/DataTable/Table.svelte
View file

@ -16,6 +16,12 @@
/** Set to `true` to enable a sticky header */
export let stickyHeader = false;
/**
* Set the style attribute on the `table` element
* @type {string}
*/
export let tableStyle = undefined;
</script>
{#if stickyHeader}
@ -30,6 +36,7 @@
class:bx--data-table--zebra="{zebra}"
class:bx--data-table--static="{useStaticWidth}"
class:bx--data-table--sticky-header="{stickyHeader}"
style="{tableStyle}"
>
<slot />
</table>
@ -46,6 +53,7 @@
class:bx--data-table--static="{useStaticWidth}"
class:bx--data-table--sticky-header="{stickyHeader}"
{...$$restProps}
style="{tableStyle}"
>
<slot />
</table>

4
src/DataTable/TableHeader.svelte
View file

@ -30,7 +30,7 @@
<th
aria-sort="{active ? $sortHeader.sortDirection : 'none'}"
scope="{scope}"
id="{id}"
data-header="{id}"
{...$$restProps}
on:mouseover
on:mouseenter
@ -61,7 +61,7 @@
{:else}
<th
scope="{scope}"
id="{id}"
data-header="{id}"
{...$$restProps}
on:click
on:mouseover

1
src/DataTable/Toolbar.svelte
View file

@ -28,6 +28,7 @@
class:bx--table-toolbar--small="{size === 'sm'}"
class:bx--table-toolbar--normal="{size === 'default'}"
{...$$restProps}
style="z-index: 1; {$$restProps.style}"
>
<slot />
</section>

2
src/DataTable/ToolbarSearch.svelte
View file

@ -24,7 +24,7 @@
*
* To implement your own client-side filtering, pass a function
* that accepts a row and value and returns a boolean.
* @type {boolean | ((rows: import("./DataTable.svelte").DataTableRow, value: number | string) => boolean)}
* @type {boolean | ((row: import("./DataTable.svelte").DataTableRow, value: number | string) => boolean)}
*/
export let shouldFilterRows = false;

17
src/DatePicker/DatePicker.svelte
View file

@ -60,11 +60,11 @@
export let id = "ccs-" + Math.random().toString(36);
/**
* Override the options passed to the Flatpickr instance
* https://flatpickr.js.org/options
* Override the options passed to the Flatpickr instance.
* @see https://flatpickr.js.org/options
* @type {import("flatpickr/dist/types/options").Options}
*/
export let flatpickrProps = {};
export let flatpickrProps = { static: true };
import {
createEventDispatcher,
@ -216,6 +216,9 @@
locale,
maxDate,
minDate,
// default to static: true so the
// date picker works inside a modal
static: true,
...flatpickrProps,
});
}
@ -253,14 +256,6 @@
e.stopPropagation();
calendar.close();
}
if (
$hasCalendar &&
/INPUT/.test(document.activeElement?.tagName) &&
e.key === 'Enter'
) {
e.stopPropagation();
}
}}"
>
<slot />

5
src/Dropdown/Dropdown.svelte
View file

@ -83,8 +83,9 @@
export let hideLabel = false;
/**
* Override the default translation ids
* @type {(id: any) => string}
* Override the chevron icon label based on the open state.
* Defaults to "Open menu" when closed and "Close menu" when open
* @type {(id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string}
*/
export let translateWithId = undefined;

2
src/FileUploader/FileUploaderButton.svelte
View file

@ -26,7 +26,7 @@
/**
* Specify the kind of file uploader button
* @type {"primary" | "secondary" | "tertiary" | "ghost" | "danger"}]
* @type {"primary" | "secondary" | "tertiary" | "ghost" | "danger"}
*/
export let kind = "primary";

11
src/FileUploader/Filename.svelte
View file

@ -30,14 +30,17 @@
{#if invalid}
<WarningFilled class="bx--file-invalid" />
{/if}
<Close
<button
aria-label="{iconDescription}"
title="{iconDescription}"
class="bx--file-close"
class:bx--file-close="{true}"
type="button"
tabindex="0"
{...$$restProps}
on:click
on:keydown
/>
>
<Close />
</button>
{/if}
{#if status === "complete"}

4
src/ListBox/ListBoxMenuIcon.svelte
View file

@ -22,7 +22,9 @@
[translationIds.open]: "Open menu",
};
$: description = open ? translateWithId("close") : translateWithId("open");
$: translationId = open ? translationIds.close : translationIds.open;
$: description =
translateWithId?.(translationId) ?? defaultTranslations[translationId];
</script>
<div

9
src/ListBox/ListBoxSelection.svelte
View file

@ -41,9 +41,12 @@
ctx.declareRef({ key: "selection", ref });
}
$: description = selectionCount
? translateWithId("clearAll")
: translateWithId("clearSelection");
$: translationId = selectionCount
? translationIds.clearAll
: translationIds.clearSelection;
$: description =
translateWithId?.(translationId) ?? defaultTranslations[translationId];
</script>
{#if selectionCount !== undefined}

16
src/MultiSelect/MultiSelect.svelte
View file

@ -95,11 +95,19 @@
a.text.localeCompare(b.text, locale, { numeric: true });
/**
* Override the default translation ids
* @type {(id: any) => string}
* Override the chevron icon label based on the open state.
* Defaults to "Open menu" when closed and "Close menu" when open
* @type {(id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string}
*/
export let translateWithId = undefined;
/**
* Override the label of the clear button when the input has a selection.
* Defaults to "Clear selected item" and "Clear all items" if more than one item is selected
* @type {(id: import("../ListBox/ListBoxSelection.svelte").ListBoxSelectionTranslationId) => string}
*/
export let translateWithIdSelection = undefined;
/** Specify the title text */
export let titleText = "";
@ -374,7 +382,7 @@
}));
if (fieldRef) fieldRef.blur();
}}"
translateWithId="{translateWithId}"
translateWithId="{translateWithIdSelection}"
disabled="{disabled}"
/>
{/if}
@ -439,7 +447,7 @@
inputValue = '';
open = false;
}}"
translateWithId="{translateWithId}"
translateWithId="{translateWithIdSelection}"
disabled="{disabled}"
open="{open}"
/>

9
src/Tabs/Tabs.svelte
View file

@ -52,7 +52,6 @@
},
update: (id) => {
currentIndex = $tabsById[id].index;
dispatch("change", currentIndex);
},
change: (direction) => {
let index = currentIndex + direction;
@ -78,16 +77,22 @@
}
currentIndex = index;
dispatch("change", currentIndex);
},
});
afterUpdate(() => {
selected = currentIndex;
if (prevIndex > -1 && prevIndex !== currentIndex) {
dispatch("change", currentIndex);
}
prevIndex = currentIndex;
});
let dropdownHidden = true;
let currentIndex = selected;
let prevIndex = -1;
$: currentIndex = selected;
$: currentTab = $tabs[currentIndex] || undefined;

5
src/UIShell/HeaderAction.svelte
View file

@ -1,4 +1,9 @@
<script>
/**
* @event {null} open
* @event {null} close
*/
/** Set to `true` to open the panel */
export let isOpen = false;

65
tests/CodeSnippet.test.svelte
View file

@ -1,52 +1,21 @@
<script lang="ts">
import { CodeSnippet, InlineNotification } from "../types";
let code = `// helpers.js
export function multiply(a: number, b: number) {
return a * b;
}
export function divide(a: number, b: number) {
return a / b;
}
export function add(a: number, b: number) {
return a + b;
}
export function subtract(a: number, b: number) {
return a - b;
}`;
let comment = `
> \`../types\` is a Svelte component library that implements the [Carbon Design System](https://github.com/carbon-design-system), an open source design system by IBM.
> A design system can facilitate frontend development and prototyping because it is encourages reuse, consistency, and extensibility.
`;
import { CodeSnippet } from "../types";
</script>
<InlineNotification
svx-ignore
lowContrast
title="Note:"
subtitle="By design, the copy button does not copy text to the clipboard. You will need to write your own logic."
kind="info"
hideCloseButton
/>
<CodeSnippet copy="{(text) => text}"
>yarn add -D carbon-components-svelte</CodeSnippet
<CodeSnippet
type="inline"
copy="{(text) => text}"
code=""
hideCopyButton
disabled
skeleton
wrapText
expanded
on:animationend
on:click
on:copy
on:expand
on:collapse
>
<CodeSnippet type="inline">rm -rf node_modules/</CodeSnippet>
<CodeSnippet type="multi" code="{code}" />
<CodeSnippet type="multi" code="{code}" hideCopyButton />
<CodeSnippet wrapText type="multi" code="{comment}" />
<CodeSnippet skeleton />
<CodeSnippet type="multi" disabled skeleton />
yarn add -D carbon-components-svelte
</CodeSnippet>

8
tests/ComboBox.test.svelte
View file

@ -23,6 +23,14 @@
on:select="{(e) => {
console.log(e.detail.selectedId);
}}"
translateWithId="{(id) => {
console.log(id); // "open" | "close"
return id;
}}"
translateWithIdSelection="{(id) => {
console.log(id); // "clearSelection"
return id;
}}"
let:item
let:index
>

2
tests/DataTable.test.svelte
View file

@ -15,7 +15,7 @@
const headers: DataTableHeader[] = [
{ key: "name", value: "Name" },
{ key: "protocol", value: "Protocol" },
{ key: "protocol", value: "Protocol", width: "400px", minWidth: "40%" },
{ key: "port", value: "Port" },
{ key: "rule", value: "Rule", sort: false },
];

4
tests/Dropdown.test.svelte
View file

@ -14,6 +14,10 @@
on:select="{(e) => {
console.log(e.detail.selectedId);
}}"
translateWithId="{(id) => {
console.log(id); // "open" | "close"
return id;
}}"
let:item
let:index
>

2
tests/HeaderUtilities.test.svelte
View file

@ -33,6 +33,8 @@
<HeaderGlobalAction aria-label="Settings" icon="{SettingsAdjust}" />
<HeaderAction
bind:isOpen
on:open
on:close
transition="{{ duration: 400, easing: quintOut }}"
>
<HeaderPanelLinks>

8
tests/MultiSelect.test.svelte
View file

@ -20,6 +20,14 @@
on:blur="{(e) => {
e.detail; // number | FocusEvent
}}"
translateWithId="{(id) => {
console.log(id); // "open" | "close"
return id;
}}"
translateWithIdSelection="{(id) => {
console.log(id); // "clearAll" | "clearSelection"
return id;
}}"
let:item
let:index
>

149
thumbnails/breakpoint.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 30 KiB

15
thumbnails/button-set.svg Normal file
View file

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>button-set</title>
<g id="button-set" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle-Copy-2" fill="#393939" x="56" y="74" width="104" height="32"></rect>
<rect id="Rectangle-Copy-4" fill="#FFFFFF" x="159" y="74" width="1" height="32"></rect>
<rect id="Rectangle-Copy-3" fill="#0E62FE" x="160" y="74" width="104" height="32"></rect>
<text id="Cancel" font-family="IBMPlexSans, IBM Plex Sans" font-size="12" font-weight="normal" fill="#F4F4F4">
<tspan x="68" y="95">Cancel</tspan>
</text>
<text id="Submit" font-family="IBMPlexSans, IBM Plex Sans" font-size="12" font-weight="normal" fill="#FFFFFF">
<tspan x="172" y="95">Submit</tspan>
</text>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 978 B

33
thumbnails/clickable-tile.svg Normal file
View file

@ -0,0 +1,33 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>clickable-tile</title>
<defs>
<polygon id="path-1" points="17.9403457 21.1863925 13.5219224 23.061902 10.9929768 17.1040795 7.2 20.8970563 7.2 1.90294373 20.8970563 15.6 15.5690628 15.6"></polygon>
<filter x="-25.6%" y="-15.2%" width="156.3%" height="137.2%" filterUnits="objectBoundingBox" id="filter-2">
<feMorphology radius="0.25" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
<feOffset dx="0" dy="1" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="0.75" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
<polygon id="path-3" points="17.9403457 21.1863925 13.5219224 23.061902 10.9929768 17.1040795 7.2 20.8970563 7.2 1.90294373 20.8970563 15.6 15.5690628 15.6"></polygon>
<filter x="-13.7%" y="-5.3%" width="127.4%" height="117.7%" filterUnits="objectBoundingBox" id="filter-4">
<feOffset dx="0" dy="0.75" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
</defs>
<g id="clickable-tile" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle" stroke="#0F62FE" stroke-width="1.5" fill="#E0E0E0" x="72" y="41" width="176" height="98"></rect>
<rect id="Rectangle-Copy-4" fill="#A8A8A8" x="85" y="54" width="90" height="8"></rect>
<g id="Group" transform="translate(212.000000, 97.000000)">
<g id="Soft-Shadow" fill="black" fill-opacity="1">
<use filter="url(#filter-2)" xlink:href="#path-1"></use>
</g>
<g id="Hard-Shadow" fill="black" fill-opacity="1">
<use filter="url(#filter-4)" xlink:href="#path-3"></use>
</g>
<polygon id="Ouline" fill="#FFFFFF" points="17.9403457 21.1863925 13.5219224 23.061902 10.9929768 17.1040795 7.2 20.8970563 7.2 1.90294373 20.8970563 15.6 15.5690628 15.6"></polygon>
<polygon id="Arrow" fill="#000000" points="13.7560605 14.4 18 14.4 8.4 4.8 8.4 18 11.4024434 14.9975566 14.1576509 21.4884188 16.3668625 20.5506641"></polygon>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.7 KiB

33
thumbnails/composed-modal.svg Normal file
View file

@ -0,0 +1,33 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>composed-modal</title>
<defs>
<rect id="path-1" x="60" y="44" width="200" height="90"></rect>
<filter x="-5.0%" y="-8.9%" width="110.0%" height="122.2%" filterUnits="objectBoundingBox" id="filter-2">
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="3" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.862745106 0 0 0 0 0.862745106 0 0 0 0 0.862745106 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
<polygon id="path-3" points="6.53025 6 9 3.53025 8.46975 3 6 5.46975 3.53025 3 3 3.53025 5.46975 6 3 8.46975 3.53025 9 6 6.53025 8.46975 9 9 8.46975"></polygon>
</defs>
<g id="composed-modal" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Rectangle-Copy" fill="black" fill-opacity="1">
<use filter="url(#filter-2)" xlink:href="#path-1"></use>
</g>
<g id="color/gray/10-copy-11" transform="translate(60.000000, 44.000000)" fill="#F3F3F3">
<rect id="Rectangle" x="0" y="0" width="200" height="90"></rect>
</g>
<g id="checkbox" transform="translate(69.000000, 76.000000)" fill="#161616">
<path d="M9.75,1.5 L2.25,1.5 C1.83578644,1.5 1.5,1.83578644 1.5,2.25 L1.5,9.75 C1.5,10.1642136 1.83578644,10.5 2.25,10.5 L9.75,10.5 C10.1642136,10.5 10.5,10.1642136 10.5,9.75 L10.5,2.25 C10.5,1.83578644 10.1642136,1.5 9.75,1.5 Z M2.25,9.75 L2.25,2.25 L9.75,2.25 L9.75,9.75 L2.25,9.75 Z" id="Fill"></path>
</g>
<g id="icon/navigation/close/16-copy-3" transform="translate(239.000000, 53.000000)">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<use id="icon-color" fill="#000000" xlink:href="#path-3"></use>
</g>
<rect id="Rectangle-Copy-5" fill="#8D8D8D" x="70" y="57" width="58" height="7"></rect>
<rect id="Rectangle-Copy-20" fill="#C6C6C6" x="160" y="108" width="101" height="26"></rect>
<rect id="Rectangle-Copy-21" fill="#A8A8A8" x="88" y="79" width="96" height="5"></rect>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.4 KiB

73
thumbnails/context-menu.svg Normal file
View file

@ -0,0 +1,73 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>context-menu</title>
<defs>
<polygon id="path-1" points="56 32 142.96332 32 162 32 162 147 56 147"></polygon>
<filter x="-9.4%" y="-7.0%" width="118.9%" height="117.4%" filterUnits="objectBoundingBox" id="filter-2">
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="3" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
<polygon id="path-3" points="0 4.88498131e-14 83.681685 -1.70974346e-13 102 -1.70974346e-13 102 55 0 55"></polygon>
<filter x="-9.8%" y="-14.5%" width="119.6%" height="136.4%" filterUnits="objectBoundingBox" id="filter-4">
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="3" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
<polygon id="path-5" points="4.875 3.375 7.875 6 4.875 8.625"></polygon>
<polygon id="path-7" points="8.22265846 9.71042991 6.19754778 10.5700384 5.03844771 7.83936975 3.3 9.57781746 3.3 0.872182541 9.57781746 7.15 7.13582044 7.15"></polygon>
<filter x="-55.8%" y="-33.1%" width="222.8%" height="181.1%" filterUnits="objectBoundingBox" id="filter-8">
<feMorphology radius="0.25" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
<feOffset dx="0" dy="1" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="0.75" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
<polygon id="path-9" points="8.22265846 9.71042991 6.19754778 10.5700384 5.03844771 7.83936975 3.3 9.57781746 3.3 0.872182541 9.57781746 7.15 7.13582044 7.15"></polygon>
<filter x="-29.9%" y="-11.6%" width="159.7%" height="138.7%" filterUnits="objectBoundingBox" id="filter-10">
<feOffset dx="0" dy="0.75" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
</defs>
<g id="context-menu" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle-Copy-4" x="56" y="111" width="13.65" height="17"></rect>
<g id="Rectangle-2-Copy-17">
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use fill="#F3F3F3" fill-rule="evenodd" xlink:href="#path-1"></use>
</g>
<rect id="Rectangle-2-Copy-28" fill="#DCDCDC" opacity="0.6" x="56" y="35" width="105" height="16"></rect>
<rect id="Rectangle-2-Copy-29" fill="#C6C6C6" opacity="0.6" x="56" y="54" width="106" height="1"></rect>
<rect id="Rectangle-2-Copy-30" fill="#C6C6C6" opacity="0.6" x="56" y="109" width="106" height="1"></rect>
<rect id="Rectangle-3-Copy-9" fill="#8D8D8D" x="65.45" y="41" width="43.05" height="4"></rect>
<rect id="Rectangle-3-Copy-14" fill="#BEBEBE" x="65.45" y="118" width="43.05" height="4"></rect>
<rect id="Rectangle-3-Copy-15" fill="#BEBEBE" x="65.45" y="134" width="52" height="4"></rect>
<rect id="Rectangle-3-Copy-10" fill="#BEBEBE" x="65.45" y="64" width="52" height="4"></rect>
<rect id="Rectangle-3-Copy-11" fill="#BEBEBE" x="65.45" y="80" width="43.05" height="4"></rect>
<rect id="Rectangle-3-Copy-12" fill="#BEBEBE" x="65.45" y="96" width="52" height="4"></rect>
<g id="Rectangle-2-Copy-17" transform="translate(162.000000, 32.000000)">
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
<use fill="#F3F3F3" fill-rule="evenodd" xlink:href="#path-3"></use>
</g>
<rect id="Rectangle-3-Copy-13" fill="#BEBEBE" x="183.45" y="41" width="51" height="4"></rect>
<rect id="Rectangle-3-Copy-16" fill="#BEBEBE" x="183.45" y="57" width="43.05" height="4"></rect>
<rect id="Rectangle-2-Copy-33" fill="#DCDCDC" opacity="0.6" x="162" y="67" width="103" height="16"></rect>
<rect id="Rectangle-3-Copy-17" fill="#8D8D8D" x="183.45" y="73" width="51" height="4"></rect>
<g id="icon/navigation/caret/right/16" transform="translate(140.000000, 37.000000)">
<mask id="mask-6" fill="white">
<use xlink:href="#path-5"></use>
</mask>
<use id="icon-color" fill="#000000" xlink:href="#path-5"></use>
</g>
<g id="icon/hover-states/arrow-cursor" transform="translate(241.000000, 70.000000)">
<g id="Soft-Shadow" fill="black" fill-opacity="1">
<use filter="url(#filter-8)" xlink:href="#path-7"></use>
</g>
<g id="Hard-Shadow" fill="black" fill-opacity="1">
<use filter="url(#filter-10)" xlink:href="#path-9"></use>
</g>
<polygon id="Ouline" fill="#FFFFFF" points="8.22265846 9.71042991 6.19754778 10.5700384 5.03844771 7.83936975 3.3 9.57781746 3.3 0.872182541 9.57781746 7.15 7.13582044 7.15"></polygon>
<polygon id="Arrow" fill="#000000" points="6.30486108 6.6 8.25 6.6 3.85 2.2 3.85 8.25 5.22611988 6.87388012 6.48892333 9.8488586 7.50147867 9.41905436"></polygon>
</g>
<polygon id="Path" fill="#000000" points="172.642857 45 170.5 42.8742857 171.181429 42.2142857 172.642857 43.65 175.818571 40.5 176.5 41.1771429"></polygon>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 6.1 KiB

46
thumbnails/expandable-tile.svg Normal file
View file

@ -0,0 +1,46 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>expandable-tile</title>
<defs>
<filter x="-54.7%" y="-48.6%" width="209.4%" height="197.2%" filterUnits="objectBoundingBox" id="filter-1">
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<polygon id="path-2" points="5 0 10 5 9.293 5.707 5 1.414 0.707 5.707 0 5"></polygon>
</defs>
<g id="expandable-tile" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group" transform="translate(72.000000, 33.000000)">
<rect id="Rectangle" stroke="#0F62FE" stroke-width="1.5" fill="#E0E0E0" x="0" y="8" width="176" height="98"></rect>
<rect id="Rectangle-Copy-4" fill="#A8A8A8" x="13" y="21" width="90" height="8"></rect>
<rect id="Rectangle-Copy-5" x="13" y="0" width="90" height="8"></rect>
<g transform="translate(153.000000, 90.000000)" fill="#FFFFFF" id="hand-cursor">
<g filter="url(#filter-1)" transform="translate(4.000000, 2.000000)">
<polygon id="Rectangle" points="7 4 10 4 10 8 7 8"></polygon>
<polygon id="Rectangle-Copy" points="10 7 13 7 13 11 10 11"></polygon>
<path d="M13.2815687,10.7869723 C13.2793405,10.8536671 13.2719207,10.9325894 13.2592869,11.023739 C13.2280924,11.2519911 13.1705384,11.4609684 13.0866028,11.6506708 C12.819221,12.2583277 12.3420114,12.5621673 11.6549961,12.5621673 C11.2561516,12.5621673 10.9546118,12.5695705 10.7503544,12.5843989 L10.5631872,12.5843989 L10.5631872,11.6506708 L10.5631872,9.9832991 M10.5631872,11.6506708 C10.560959,11.7173657 10.5535391,11.7962879 10.5409053,11.8874376 C10.5097108,12.1156896 10.4521569,12.3246669 10.3682213,12.5143693 C10.1008395,13.1220485 9.62362982,13.4258659 8.93661459,13.4258659 C8.53777008,13.4258659 8.23623026,13.4332912 8.03197286,13.4480975 L7.8448056,13.4480975 L7.8448056,10.8469976 M7.8448056,13.4480975 L7.8448056,16.2292735 C7.84331272,16.2959684 7.83662817,16.3748906 7.82475197,16.466018 C7.79578561,16.6942701 7.74266576,16.9032474 7.66543698,17.0929498 C7.43444139,17.6605898 7.0337475,17.9629621 6.463333,18 C5.89365381,17.9629621 5.49333871,17.6605898 5.26234312,17.0929498 C5.18509206,16.9032474 5.1319945,16.6942479 5.10302813,16.466018 C5.09112964,16.3748684 5.08408859,16.2959684 5.08186041,16.2292735 L5.08186041,7.93576665 C3.06312787,10.4279316 0.851739859,10.1112215 4.4408921e-15,8.1137102 C2.40124447,5.97131542 4.45574138,3.84533708 5.26234312,0 L14.1505595,0.0222316227 C14.4558204,0.863320603 14.8049096,1.37327819 15.1978049,2.81166418 C15.5914577,4.25005017 15.8569679,5.81524778 15.9943798,8.51490042 L15.9999503,9.64871318 C16.0006856,9.72430069 15.9932657,9.81916303 15.9776685,9.93327795 C15.9464739,10.16153 15.88892,10.3705073 15.8049844,10.5602097 C15.5376026,11.1678666 15.0603929,11.4717062 14.3733777,11.4717062 C13.9745332,11.4717062 13.6729934,11.4791094 13.468736,11.4939379 L13.2815687,11.5161695 L13.2815687,10.7869723 C13.2815687,10.7780796 13.2782264,9.23853974 13.2782264,9.23853974 L13.2815687,8.89283801 M13.2715419,8.69386498 L13.3043009,9.23853974" id="Shape" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" transform="translate(8.000000, 9.000000) scale(1, -1) translate(-8.000000, -9.000000) "></path>
</g>
</g>
<g transform="translate(144.000000, 79.000000)" id="icon/navigation/chevron/up/16-copy-46">
<g transform="translate(8.000000, 8.000000) scale(1, -1) translate(-8.000000, -8.000000) " id="Group">
<g id="chevron--up" transform="translate(3.000000, 5.000000)">
<mask id="mask-3" fill="white">
<use xlink:href="#path-2"></use>
</mask>
<use id="Mask" fill="#000000" fill-rule="nonzero" xlink:href="#path-2"></use>
<g id="Group" mask="url(#mask-3)">
<g transform="translate(-3.000000, -5.000000)" id="icon-color">
<rect id="Rectangle" fill="#000000" x="0" y="0" width="40" height="40"></rect>
</g>
</g>
</g>
<polygon id="transparent-rectangle" transform="translate(8.000000, 8.000000) rotate(-90.000000) translate(-8.000000, -8.000000) " points="1.77635684e-15 -7.90206676e-15 16 -7.90206676e-15 16 16 1.77635684e-15 16"></polygon>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 5.1 KiB

77
thumbnails/fluid-form.svg Normal file
View file

@ -0,0 +1,77 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>form</title>
<defs>
<polygon id="path-1" points="2.5 0 5 2.5 4.6465 2.8535 2.5 0.707 0.3535 2.8535 0 2.5"></polygon>
<polygon id="path-3" points="2.5 0 5 2.5 4.6465 2.8535 2.5 0.707 0.3535 2.8535 0 2.5"></polygon>
<polygon id="path-5" points="2.5 0 5 2.5 4.6465 2.8535 2.5 0.707 0.3535 2.8535 0 2.5"></polygon>
</defs>
<g id="form" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="color/gray/10-copy-12" transform="translate(90.000000, 32.000000)" fill="#F3F3F3">
<rect id="Rectangle" x="0" y="0" width="152" height="116"></rect>
</g>
<rect id="Rectangle-Copy-6" fill="#A8A8A8" x="99" y="41" width="48.59854" height="5"></rect>
<rect id="Rectangle-Copy-14" fill="#C6C6C6" x="99" y="52" width="89" height="3"></rect>
<rect id="Rectangle-Copy-26" fill="#C6C6C6" x="99" y="58" width="72.7591241" height="3"></rect>
<rect id="Rectangle-25-Copy-22" stroke="#006AFF" stroke-width="1.14" fill="#FFFFFF" x="90.57" y="72.57" width="150.86" height="14.86"></rect>
<rect id="Rectangle-Copy-27" fill="#C6C6C6" x="99" y="78" width="62.9489051" height="3"></rect>
<rect id="Rectangle-Copy-28" fill="#C6C6C6" x="99" y="95" width="33.948905" height="3"></rect>
<rect id="Rectangle-Copy-30" fill="#C6C6C6" x="111" y="112" width="38.948905" height="3"></rect>
<rect id="Rectangle-Copy-29" fill="#C6C6C6" x="172" y="95" width="33.948905" height="3"></rect>
<rect id="Rectangle-Copy-56" fill="#C6C6C6" x="91" y="104" width="151" height="1"></rect>
<rect id="Rectangle-Copy-57" fill="#C6C6C6" x="163" y="88" width="1" height="16"></rect>
<g id="Group" transform="translate(228.000000, 76.000000)">
<g id="Group" transform="translate(4.000000, 4.000000) scale(1, -1) translate(-4.000000, -4.000000) ">
<g id="chevron--up" transform="translate(1.500000, 2.500000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="Mask" fill="#000000" fill-rule="nonzero" xlink:href="#path-1"></use>
<g id="Group" mask="url(#mask-2)">
<g transform="translate(-1.500000, -2.500000)" id="icon-color">
<rect id="Rectangle" fill="#000000" x="0" y="0" width="20" height="20"></rect>
</g>
</g>
</g>
<polygon id="transparent-rectangle" transform="translate(4.000000, 4.000000) rotate(-90.000000) translate(-4.000000, -4.000000) " points="-8.8817842e-16 -5.72739022e-15 8 -5.72739022e-15 8 8 -8.8817842e-16 8"></polygon>
</g>
</g>
<g id="Group" transform="translate(228.000000, 92.000000)">
<g id="Group" transform="translate(4.000000, 4.000000) scale(1, -1) translate(-4.000000, -4.000000) ">
<g id="chevron--up" transform="translate(1.500000, 2.500000)">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<use id="Mask" fill="#000000" fill-rule="nonzero" xlink:href="#path-3"></use>
<g id="Group" mask="url(#mask-4)">
<g transform="translate(-1.500000, -2.500000)" id="icon-color">
<rect id="Rectangle" fill="#000000" x="0" y="0" width="20" height="20"></rect>
</g>
</g>
</g>
<polygon id="transparent-rectangle" transform="translate(4.000000, 4.000000) rotate(-90.000000) translate(-4.000000, -4.000000) " points="-8.8817842e-16 -5.72739022e-15 8 -5.72739022e-15 8 8 -8.8817842e-16 8"></polygon>
</g>
</g>
<g id="Group" transform="translate(149.000000, 92.000000)">
<g id="Group" transform="translate(4.000000, 4.000000) scale(1, -1) translate(-4.000000, -4.000000) ">
<g id="chevron--up" transform="translate(1.500000, 2.500000)">
<mask id="mask-6" fill="white">
<use xlink:href="#path-5"></use>
</mask>
<use id="Mask" fill="#000000" fill-rule="nonzero" xlink:href="#path-5"></use>
<g id="Group" mask="url(#mask-6)">
<g transform="translate(-1.500000, -2.500000)" id="icon-color">
<rect id="Rectangle" fill="#000000" x="0" y="0" width="20" height="20"></rect>
</g>
</g>
</g>
<polygon id="transparent-rectangle" transform="translate(4.000000, 4.000000) rotate(-90.000000) translate(-4.000000, -4.000000) " points="-8.8817842e-16 -5.72739022e-15 8 -5.72739022e-15 8 8 -8.8817842e-16 8"></polygon>
</g>
</g>
<rect id="Rectangle-Copy-24" fill="#0F6DFF" x="166" y="130" width="76" height="18"></rect>
<rect id="Rectangle-Copy-25" fill="#3D3D3D" x="90" y="130" width="75" height="18"></rect>
<g id="checkbox" transform="translate(97.000000, 109.000000)" fill="#161616">
<path d="M7.3125,1.125 L1.6875,1.125 C1.37683983,1.125 1.125,1.37683983 1.125,1.6875 L1.125,7.3125 C1.125,7.62316017 1.37683983,7.875 1.6875,7.875 L7.3125,7.875 C7.62316017,7.875 7.875,7.62316017 7.875,7.3125 L7.875,1.6875 C7.875,1.37683983 7.62316017,1.125 7.3125,1.125 Z M1.6875,7.3125 L1.6875,1.6875 L7.3125,1.6875 L7.3125,7.3125 L1.6875,7.3125 Z" id="Fill"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 5.7 KiB

16
thumbnails/image-loader.svg Normal file
View file

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>image-loader</title>
<defs>
<path d="M14.25,10.5 C13.0073593,10.5 12,9.49264069 12,8.25 C12,7.00735931 13.0073593,6 14.25,6 C15.4926407,6 16.5,7.00735931 16.5,8.25 C16.5,8.8467371 16.2629471,9.41903341 15.8409903,9.84099026 C15.4190334,10.2629471 14.8467371,10.5 14.25,10.5 L14.25,10.5 Z M14.25,7.5 C13.8357864,7.5 13.5,7.83578644 13.5,8.25 C13.5,8.66421356 13.8357864,9 14.25,9 C14.6642136,9 15,8.66421356 15,8.25 C15,7.83578644 14.6642136,7.5 14.25,7.5 Z M19.6125,3 L4.3875,3 C3.62120491,3 3,3.62120491 3,4.3875 L3,19.6125 C3,19.9804879 3.14618262,20.3334039 3.40638934,20.5936107 C3.66659607,20.8538174 4.01951212,21 4.3875,21 L19.6125,21 C19.9804879,21 20.3334039,20.8538174 20.5936107,20.5936107 C20.8538174,20.3334039 21,19.9804879 21,19.6125 L21,4.3875 C21,3.62120491 20.3787951,3 19.6125,3 Z M19.5,4.5 L19.5,15.9975 L16.695,13.1925 C16.4136476,12.9108344 16.0318639,12.75257 15.63375,12.75257 C15.2356361,12.75257 14.8538524,12.9108344 14.5725,13.1925 L13.5,14.2875 L9.375,10.1925 C9.09364761,9.91083444 8.71186387,9.75257002 8.31375,9.75257002 C7.91563613,9.75257002 7.53385239,9.91083444 7.2525,10.1925 L4.5,12.945 L4.5,4.5 L19.5,4.5 Z M4.5,19.5 L4.5,15.06 L8.31,11.25 L8.31,11.25 L12.4125,15.3525 C12.6938524,15.6341656 13.0756361,15.79243 13.47375,15.79243 C13.8718639,15.79243 14.2536476,15.6341656 14.535,15.3525 L15.63,14.25 L15.63,14.25 L19.5,18.12 L19.5,19.5 L4.5,19.5 Z" id="path-1"></path>
</defs>
<g id="image-loader" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle-Copy-29" fill="#BEBEBE" x="60" y="36" width="200" height="109"></rect>
<g id="icon/formatting/image/16-copy" transform="translate(148.000000, 79.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="icon-color" fill="#8E8E93" xlink:href="#path-1"></use>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.1 KiB

23
thumbnails/inline-notification.svg Normal file
View file

@ -0,0 +1,23 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>inline-notification</title>
<defs>
<circle id="path-1" cx="5" cy="5" r="4.375"></circle>
<polygon id="path-3" points="4.375 6.71875 2.8125 5.15625 3.309375 4.6875 4.375 5.734375 6.690625 3.4375 7.1875 3.93125"></polygon>
</defs>
<g id="inline-notification" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle-2-Copy-27" fill="#393939" x="60" y="77" width="200" height="26"></rect>
<g id="icon/status/checkmark-filled/16" transform="translate(69.000000, 85.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="icon-color" fill="#24A148" xlink:href="#path-1"></use>
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<use id="icon-color" fill="#FFFFFF" xlink:href="#path-3"></use>
</g>
<rect id="Path-Copy-2" fill="#24A148" x="60" y="77" width="2" height="26"></rect>
<rect id="Rectangle-Copy-14" fill="#F4F4F4" x="85" y="88" width="100.088235" height="4"></rect>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

27
thumbnails/password-input.svg Normal file
View file

@ -0,0 +1,27 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>password-input</title>
<defs>
<path d="M15.47,7.83 C14.266932,4.72169147 11.330606,2.626562 8,2.5 C4.66939395,2.626562 1.73306803,4.72169147 0.53,7.83 C0.490283624,7.9398538 0.490283624,8.0601462 0.53,8.17 C1.73306803,11.2783085 4.66939395,13.373438 8,13.5 C11.330606,13.373438 14.266932,11.2783085 15.47,8.17 C15.5097164,8.0601462 15.5097164,7.9398538 15.47,7.83 Z M8,12.5 C5.35,12.5 2.55,10.535 1.535,8 C2.55,5.465 5.35,3.5 8,3.5 C10.65,3.5 13.45,5.465 14.465,8 C13.45,10.535 10.65,12.5 8,12.5 Z M8,5 C6.34314575,5 5,6.34314575 5,8 C5,9.65685425 6.34314575,11 8,11 C9.65685425,11 11,9.65685425 11,8 C11,6.34314575 9.65685425,5 8,5 Z M8,10 C6.8954305,10 6,9.1045695 6,8 C6,6.8954305 6.8954305,6 8,6 C9.1045695,6 10,6.8954305 10,8 C10,8.53043298 9.78928632,9.03914081 9.41421356,9.41421356 C9.03914081,9.78928632 8.53043298,10 8,10 Z" id="path-1"></path>
</defs>
<g id="password-input" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group-21" transform="translate(56.000000, 75.000000)">
<rect id="Rectangle-11-Copy" fill="#F3F3F3" x="0" y="0" width="208" height="32"></rect>
<line x1="0" y1="31.5" x2="208" y2="31.5" id="Path-3-Copy-8" stroke="#8C8C8C"></line>
</g>
<g id="Group" transform="translate(234.000000, 83.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="icon-color" fill="#000000" xlink:href="#path-1"></use>
</g>
<circle id="Oval" fill="#161616" cx="71.5" cy="91.5" r="2.5"></circle>
<circle id="Oval-Copy" fill="#161616" cx="80.5" cy="91.5" r="2.5"></circle>
<circle id="Oval-Copy-2" fill="#161616" cx="89.5" cy="91.5" r="2.5"></circle>
<circle id="Oval-Copy-3" fill="#161616" cx="98.5" cy="91.5" r="2.5"></circle>
<circle id="Oval-Copy-4" fill="#161616" cx="107.5" cy="91.5" r="2.5"></circle>
<circle id="Oval-Copy-5" fill="#161616" cx="116.5" cy="91.5" r="2.5"></circle>
<circle id="Oval-Copy-6" fill="#161616" cx="125.5" cy="91.5" r="2.5"></circle>
<circle id="Oval-Copy-7" fill="#161616" cx="134.5" cy="91.5" r="2.5"></circle>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.4 KiB

35
thumbnails/radio-tile.svg Normal file
View file

@ -0,0 +1,35 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>radio-tile</title>
<defs>
<circle id="path-1" cx="6.5" cy="6.5" r="5.6875"></circle>
<polygon id="path-3" points="5.6875 8.734375 3.65625 6.703125 4.3021875 6.09375 5.6875 7.4546875 8.6978125 4.46875 9.34375 5.110625"></polygon>
</defs>
<g id="radio-tile" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group-Copy-2" transform="translate(56.000000, 109.000000)" fill="#F3F3F3">
<rect id="Rectangle" x="0" y="0" width="141" height="38"></rect>
<rect id="Rectangle" x="0" y="0" width="208" height="38"></rect>
</g>
<g id="Group" transform="translate(56.000000, 33.000000)" fill="#F3F3F3">
<rect id="Rectangle" x="0" y="0" width="141" height="38"></rect>
<rect id="Rectangle" x="0" y="0" width="208" height="38"></rect>
</g>
<g id="Group-Copy" transform="translate(56.000000, 71.000000)" fill="#F3F3F3">
<rect id="Rectangle" x="0" y="0" width="141" height="38"></rect>
<rect id="Rectangle" stroke="#161616" stroke-width="0.8" x="0" y="0" width="208" height="38"></rect>
</g>
<rect id="Rectangle-Copy-4" fill="#C6C6C6" x="67" y="44" width="72" height="6"></rect>
<rect id="Rectangle-Copy-5" fill="#C6C6C6" x="67" y="82" width="72" height="6"></rect>
<g id="icon/status/checkmark-filled/16" transform="translate(243.000000, 79.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="icon-color" fill="#000000" xlink:href="#path-1"></use>
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<use id="icon-color" fill="#FFFFFF" xlink:href="#path-3"></use>
</g>
<rect id="Rectangle-Copy-6" fill="#C6C6C6" x="67" y="120" width="72" height="6"></rect>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.1 KiB

47
thumbnails/selectable-tile.svg Normal file
View file

@ -0,0 +1,47 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>selectable-tile</title>
<defs>
<circle id="path-1" cx="6.5" cy="6.5" r="5.6875"></circle>
<polygon id="path-3" points="5.6875 8.734375 3.65625 6.703125 4.3021875 6.09375 5.6875 7.4546875 8.6978125 4.46875 9.34375 5.110625"></polygon>
<circle id="path-5" cx="6.5" cy="6.5" r="5.6875"></circle>
<polygon id="path-7" points="5.6875 8.734375 3.65625 6.703125 4.3021875 6.09375 5.6875 7.4546875 8.6978125 4.46875 9.34375 5.110625"></polygon>
</defs>
<g id="selectable-tile" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group-Copy-2" transform="translate(56.000000, 109.000000)" fill="#F3F3F3">
<rect id="Rectangle" x="0" y="0" width="141" height="38"></rect>
<rect id="Rectangle" x="0" y="0" width="208" height="38"></rect>
</g>
<g id="Group" transform="translate(56.000000, 33.000000)" fill="#F3F3F3">
<rect id="Rectangle" x="0" y="0" width="141" height="38"></rect>
<rect id="Rectangle" stroke="#161616" stroke-width="0.8" x="0" y="0" width="208" height="38"></rect>
</g>
<g id="Group-Copy" transform="translate(56.000000, 71.000000)" fill="#F3F3F3">
<rect id="Rectangle" x="0" y="0" width="141" height="38"></rect>
<rect id="Rectangle" stroke="#161616" stroke-width="0.8" x="0" y="0" width="208" height="38"></rect>
</g>
<rect id="Rectangle-Copy-4" fill="#C6C6C6" x="67" y="44" width="72" height="6"></rect>
<rect id="Rectangle-Copy-5" fill="#C6C6C6" x="67" y="82" width="72" height="6"></rect>
<g id="icon/status/checkmark-filled/16" transform="translate(243.000000, 41.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="icon-color" fill="#000000" xlink:href="#path-1"></use>
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<use id="icon-color" fill="#FFFFFF" xlink:href="#path-3"></use>
</g>
<g id="icon/status/checkmark-filled/16" transform="translate(243.000000, 79.000000)">
<mask id="mask-6" fill="white">
<use xlink:href="#path-5"></use>
</mask>
<use id="icon-color" fill="#000000" xlink:href="#path-5"></use>
<mask id="mask-8" fill="white">
<use xlink:href="#path-7"></use>
</mask>
<use id="icon-color" fill="#FFFFFF" xlink:href="#path-7"></use>
</g>
<rect id="Rectangle-Copy-6" fill="#C6C6C6" x="67" y="120" width="72" height="6"></rect>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.8 KiB

15
thumbnails/skeleton-placeholder.svg Normal file
View file

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>skeleton-placeholder</title>
<defs>
<linearGradient x1="-21.9775656%" y1="50%" x2="113.47099%" y2="50%" id="linearGradient-1">
<stop stop-color="#C6C6C6" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#C6C6C6" offset="100%"></stop>
</linearGradient>
</defs>
<g id="skeleton-placeholder" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle" fill="#E0E0E0" x="118" y="48" width="85" height="85"></rect>
<rect id="Rectangle" fill="#C6C6C6" x="117" y="48" width="56.4662577" height="85"></rect>
<rect id="Rectangle" fill="url(#linearGradient-1)" transform="translate(177.733129, 90.500000) scale(-1, 1) translate(-177.733129, -90.500000) " x="173.466258" y="48" width="8.533742" height="85"></rect>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

15
thumbnails/skeleton-text.svg Normal file
View file

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>skeleton-text</title>
<defs>
<linearGradient x1="-21.9775656%" y1="50%" x2="113.47099%" y2="50%" id="linearGradient-1">
<stop stop-color="#C6C6C6" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#C6C6C6" offset="100%"></stop>
</linearGradient>
</defs>
<g id="skeleton-text" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle" fill="#E0E0E0" x="56" y="82" width="208" height="16"></rect>
<rect id="Rectangle" fill="#C6C6C6" x="56" y="82" width="156" height="16"></rect>
<rect id="Rectangle" fill="url(#linearGradient-1)" transform="translate(215.500000, 90.000000) scale(-1, 1) translate(-215.500000, -90.000000) " x="212" y="82" width="7" height="16"></rect>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 989 B

15
thumbnails/skeleton.svg Normal file
View file

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>skeleton</title>
<defs>
<linearGradient x1="-21.9775656%" y1="50%" x2="113.47099%" y2="50%" id="linearGradient-1">
<stop stop-color="#C6C6C6" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#C6C6C6" offset="100%"></stop>
</linearGradient>
</defs>
<g id="skeleton" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle" fill="#E0E0E0" x="56" y="82" width="208" height="16"></rect>
<rect id="Rectangle" fill="#C6C6C6" x="56" y="82" width="156" height="16"></rect>
<rect id="Rectangle" fill="url(#linearGradient-1)" transform="translate(215.500000, 90.000000) scale(-1, 1) translate(-215.500000, -90.000000) " x="212" y="82" width="7" height="16"></rect>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 979 B

34
thumbnails/toast-notification.svg Normal file
View file

@ -0,0 +1,34 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>toast-notification</title>
<defs>
<circle id="path-1" cx="6.125" cy="6.125" r="6.125"></circle>
<polygon id="path-3" points="3.00668244 -0.342156092 3.99105744 -0.342156092 3.99105744 7.33596891 3.00668244 7.33596891"></polygon>
</defs>
<g id="toast-notification" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle-2-Copy-27" fill="#393939" x="60" y="56" width="200" height="68"></rect>
<rect id="Path-Copy-2" fill="#DA1E28" x="60" y="56" width="3" height="68"></rect>
<g id="Group" transform="translate(73.000000, 68.000000)">
<g id="Group" transform="translate(7.000000, 7.000000) scale(-1, 1) translate(-7.000000, -7.000000) ">
<g id="error--filled" transform="translate(0.875000, 0.875000)">
<g id="icon-2">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="icon-color" fill="#DA1E28" xlink:href="#path-1"></use>
</g>
<g id="icon-1" transform="translate(2.625000, 2.625000)">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<use id="icon-color" fill="#000000" transform="translate(3.498870, 3.496906) rotate(-45.000000) translate(-3.498870, -3.496906) " xlink:href="#path-3"></use>
</g>
</g>
<rect id="transparent-rectangle" x="0" y="0" width="14" height="14"></rect>
</g>
</g>
<rect id="Rectangle-Copy-14" fill="#F4F4F4" x="95" y="72" width="71.1191279" height="5"></rect>
<rect id="Rectangle-Copy-23" fill="#E0E0E0" x="95" y="105" width="93.8444444" height="5"></rect>
<rect id="Rectangle-Copy-24" fill="#E0E0E0" x="95" y="82" width="123" height="5"></rect>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.2 KiB

27
thumbnails/tooltip-icon.svg Normal file
View file

@ -0,0 +1,27 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>tooltip-icon</title>
<defs>
<path d="M7.03125,8.90625 L7.03125,4.6875 L5.15625,4.6875 L5.15625,5.625 L6.09375,5.625 L6.09375,8.90625 L4.6875,8.90625 L4.6875,9.84375 L8.4375,9.84375 L8.4375,8.90625 L7.03125,8.90625 L7.03125,8.90625 Z M6.5625,2.34375 C6.17417479,2.34375 5.859375,2.65854979 5.859375,3.046875 C5.859375,3.43520021 6.17417479,3.75 6.5625,3.75 C6.95082521,3.75 7.265625,3.43520021 7.265625,3.046875 C7.265625,2.65854979 6.95082521,2.34375 6.5625,2.34375 L6.5625,2.34375 Z M6.5625,13.125 C2.93813133,13.125 0,10.1868687 0,6.5625 C0,2.93813133 2.93813133,0 6.5625,0 C10.1868687,0 13.125,2.93813133 13.125,6.5625 C13.1209442,10.1851874 10.1851874,13.1209442 6.5625,13.125 Z M6.5625,0.9375 C3.45589828,0.9375 0.9375,3.45589828 0.9375,6.5625 C0.9375,9.66910172 3.45589828,12.1875 6.5625,12.1875 C9.66910172,12.1875 12.1875,9.66910172 12.1875,6.5625 C12.1840384,3.45733327 9.66766673,0.940961641 6.5625,0.9375 Z" id="path-1"></path>
</defs>
<g id="tooltip-icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group-56-Copy" transform="translate(100.000000, 78.700000)">
<path d="M80.3,-38.1 C81.1284271,-38.1 81.8,-37.4284271 81.8,-36.6 L81.8,54.4 C81.8,55.2284271 81.1284271,55.9 80.3,55.9 L75.161,55.9 L70.4045455,61.1 L65.647,55.9 L60.3,55.9 C59.4715729,55.9 58.8,55.2284271 58.8,54.4 L58.8,-36.6 C58.8,-37.4284271 59.4715729,-38.1 60.3,-38.1 L80.3,-38.1 Z" id="Rectangle-24" fill="#3D3D3D" transform="translate(70.300000, 11.500000) rotate(90.000000) translate(-70.300000, -11.500000) "></path>
<g id="Group" transform="translate(0.000000, 4.300000)">
<g id="information" transform="translate(0.937500, 0.937500)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="Mask" fill="#000000" fill-rule="nonzero" xlink:href="#path-1"></use>
<g id="Group" mask="url(#mask-2)">
<g transform="translate(-0.937500, -0.937500)" id="icon-color">
<rect id="Rectangle-3-Copy" fill="#161616" x="0" y="0" width="37.5" height="37.5"></rect>
</g>
</g>
</g>
<rect id="transparent-rectangle" x="0" y="0" width="15" height="15"></rect>
</g>
<rect id="Rectangle-Copy" fill="#BEBEBE" x="35" y="9.3" width="59" height="5"></rect>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.7 KiB

11
types/AspectRatio/AspectRatio.svelte.d.ts vendored
View file

@ -7,7 +7,16 @@ export interface AspectRatioProps
* Specify the aspect ratio
* @default "2x1"
*/
ratio?: "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2";
ratio?:
| "2x1"
| "2x3"
| "16x9"
| "4x3"
| "1x1"
| "3x4"
| "3x2"
| "9x16"
| "1x2";
}
export default class AspectRatio extends SvelteComponentTyped<

4
types/CodeSnippet/CodeSnippet.svelte.d.ts vendored
View file

@ -120,12 +120,14 @@ export interface CodeSnippetProps {
export default class CodeSnippet extends SvelteComponentTyped<
CodeSnippetProps,
{
expand: CustomEvent<null>;
collapse: CustomEvent<null>;
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
animationend: WindowEventMap["animationend"];
copy: CustomEvent<any>;
copy: CustomEvent<null>;
},
{ default: {} }
> {}

14
types/ComboBox/ComboBox.svelte.d.ts vendored
View file

@ -113,10 +113,20 @@ export interface ComboBoxProps
shouldFilterItem?: (item: ComboBoxItem, value: string) => boolean;
/**
* Override the default translation ids
* Override the chevron icon label based on the open state.
* Defaults to "Open menu" when closed and "Close menu" when open
* @default undefined
*/
translateWithId?: (id: any) => string;
translateWithId?: (
id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId
) => string;
/**
* Override the label of the clear button when the input has a selection.
* Defaults to "Clear selected item" since a combo box can only have on selection.
* @default undefined
*/
translateWithIdSelection?: (id: "clearSelection") => string;
/**
* Set an id for the list box component

8
types/ComposedModal/ComposedModal.svelte.d.ts vendored
View file

@ -55,10 +55,10 @@ export default class ComposedModal extends SvelteComponentTyped<
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
submit: CustomEvent<any>;
["click:button--primary"]: CustomEvent<any>;
close: CustomEvent<any>;
open: CustomEvent<any>;
submit: CustomEvent<null>;
["click:button--primary"]: CustomEvent<null>;
close: CustomEvent<null>;
open: CustomEvent<null>;
},
{ default: {} }
> {}

2
types/ContextMenu/ContextMenu.svelte.d.ts vendored
View file

@ -42,7 +42,7 @@ export default class ContextMenu extends SvelteComponentTyped<
open: CustomEvent<HTMLElement>;
click: WindowEventMap["click"];
keydown: WindowEventMap["keydown"];
close: CustomEvent<any>;
close: CustomEvent<null>;
},
{ default: {} }
> {}

2
types/ContextMenu/ContextMenuOption.svelte.d.ts vendored
View file

@ -75,7 +75,7 @@ export default class ContextMenuOption extends SvelteComponentTyped<
keydown: WindowEventMap["keydown"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
click: CustomEvent<any>;
click: CustomEvent<null>;
},
{ default: {}; icon: {}; labelText: {}; shortcutText: {} }
> {}

2
types/CopyButton/CopyButton.svelte.d.ts vendored
View file

@ -39,7 +39,7 @@ export default class CopyButton extends SvelteComponentTyped<
{
click: WindowEventMap["click"];
animationend: WindowEventMap["animationend"];
copy: CustomEvent<any>;
copy: CustomEvent<null>;
},
{}
> {}

4
types/DataTable/DataTable.svelte.d.ts vendored
View file

@ -11,6 +11,8 @@ export interface DataTableEmptyHeader {
display?: (item: Value) => DataTableValue;
sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1);
columnMenu?: boolean;
width?: string;
minWidth?: string;
}
export interface DataTableNonEmptyHeader {
@ -19,6 +21,8 @@ export interface DataTableNonEmptyHeader {
display?: (item: Value) => DataTableValue;
sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1);
columnMenu?: boolean;
width?: string;
minWidth?: string;
}
export type DataTableHeader = DataTableNonEmptyHeader | DataTableEmptyHeader;

6
types/DataTable/Table.svelte.d.ts vendored
View file

@ -32,6 +32,12 @@ export interface TableProps
* @default false
*/
stickyHeader?: boolean;
/**
* Set the style attribute on the `table` element
* @default undefined
*/
tableStyle?: string;
}
export default class Table extends SvelteComponentTyped<

2
types/DataTable/ToolbarSearch.svelte.d.ts vendored
View file

@ -40,7 +40,7 @@ export interface ToolbarSearchProps
shouldFilterRows?:
| boolean
| ((
rows: import("./DataTable.svelte").DataTableRow,
row: import("./DataTable.svelte").DataTableRow,
value: number | string
) => boolean);

6
types/DatePicker/DatePicker.svelte.d.ts vendored
View file

@ -74,9 +74,9 @@ export interface DatePickerProps
id?: string;
/**
* Override the options passed to the Flatpickr instance
* https://flatpickr.js.org/options
* @default {}
* Override the options passed to the Flatpickr instance.
* @see https://flatpickr.js.org/options
* @default { static: true }
*/
flatpickrProps?: import("flatpickr/dist/types/options").Options;
}

7
types/Dropdown/Dropdown.svelte.d.ts vendored
View file

@ -121,10 +121,13 @@ export interface DropdownProps
hideLabel?: boolean;
/**
* Override the default translation ids
* Override the chevron icon label based on the open state.
* Defaults to "Open menu" when closed and "Close menu" when open
* @default undefined
*/
translateWithId?: (id: any) => string;
translateWithId?: (
id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId
) => string;
/**
* Set an id for the list box component

2
types/InlineLoading/InlineLoading.svelte.d.ts vendored
View file

@ -35,7 +35,7 @@ export default class InlineLoading extends SvelteComponentTyped<
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
success: CustomEvent<any>;
success: CustomEvent<null>;
},
{}
> {}

8
types/Modal/Modal.svelte.d.ts vendored
View file

@ -142,10 +142,10 @@ export default class Modal extends SvelteComponentTyped<
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
submit: CustomEvent<any>;
["click:button--primary"]: CustomEvent<any>;
close: CustomEvent<any>;
open: CustomEvent<any>;
submit: CustomEvent<null>;
["click:button--primary"]: CustomEvent<null>;
close: CustomEvent<null>;
open: CustomEvent<null>;
},
{ default: {}; heading: {}; label: {} }
> {}

16
types/MultiSelect/MultiSelect.svelte.d.ts vendored
View file

@ -123,10 +123,22 @@ export interface MultiSelectProps
| (() => void);
/**
* Override the default translation ids
* Override the chevron icon label based on the open state.
* Defaults to "Open menu" when closed and "Close menu" when open
* @default undefined
*/
translateWithId?: (id: any) => string;
translateWithId?: (
id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId
) => string;
/**
* Override the label of the clear button when the input has a selection.
* Defaults to "Clear selected item" and "Clear all items" if more than one item is selected
* @default undefined
*/
translateWithIdSelection?: (
id: import("../ListBox/ListBoxSelection.svelte").ListBoxSelectionTranslationId
) => string;
/**
* Specify the title text

2
types/Popover/Popover.svelte.d.ts vendored
View file

@ -60,6 +60,6 @@ export interface PopoverProps
export default class Popover extends SvelteComponentTyped<
PopoverProps,
{ ["click:outside"]: CustomEvent<any> },
{ ["click:outside"]: CustomEvent<null> },
{ default: {} }
> {}

2
types/Search/Search.svelte.d.ts vendored
View file

@ -115,7 +115,7 @@ export default class Search extends SvelteComponentTyped<
blur: WindowEventMap["blur"];
keydown: WindowEventMap["keydown"];
keyup: WindowEventMap["keyup"];
clear: CustomEvent<any>;
clear: CustomEvent<null>;
},
{ labelText: {} }
> {}

2
types/Tag/Tag.svelte.d.ts vendored
View file

@ -77,7 +77,7 @@ export default class Tag extends SvelteComponentTyped<
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
close: CustomEvent<any>;
close: CustomEvent<null>;
},
{ default: { props: { class: "bx--tag__label" } }; icon: {} }
> {}

6
types/UIShell/HeaderAction.svelte.d.ts vendored
View file

@ -46,6 +46,10 @@ export interface HeaderActionProps
export default class HeaderAction extends SvelteComponentTyped<
HeaderActionProps,
{ click: WindowEventMap["click"]; close: CustomEvent<any> },
{
open: CustomEvent<null>;
close: CustomEvent<null>;
click: WindowEventMap["click"];
},
{ default: {}; closeIcon: {}; icon: {}; text: {} }
> {}

41
yarn.lock
View file

@ -74,15 +74,15 @@
is-module "^1.0.0"
resolve "^1.19.0"
"@rollup/plugin-node-resolve@^13.2.0":
version "13.2.0"
resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-13.2.0.tgz#ac516c4649b7133273a944778df439d3081dc3d1"
integrity sha512-GuUIUyIKq7EjQxB51XSn6zPHYo+cILQQBYOGYvFFNxws2OVOqCBShAoof2hFrV8bAZzZGDBDQ8m2iUt8SLOUkg==
"@rollup/plugin-node-resolve@^13.2.1":
version "13.3.0"
resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-13.3.0.tgz#da1c5c5ce8316cef96a2f823d111c1e4e498801c"
integrity sha512-Lus8rbUo1eEcnS4yTFKLZrVumLPY+YayBdWXgFSHYhTT2iJbMhoaaBL3xl5NCdeRytErGr8tZ0L71BMRmnlwSw==
dependencies:
"@rollup/pluginutils" "^3.1.0"
"@types/resolve" "1.17.1"
builtin-modules "^3.1.0"
deepmerge "^4.2.2"
is-builtin-module "^3.1.0"
is-module "^1.0.0"
resolve "^1.19.0"
@ -268,6 +268,11 @@ buffer-from@^1.0.0:
resolved "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
integrity sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==
builtin-modules@^3.0.0:
version "3.3.0"
resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-3.3.0.tgz#cae62812b89801e9656336e46223e030386be7b6"
integrity sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==
builtin-modules@^3.1.0:
version "3.1.0"
resolved "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.1.0.tgz#aad97c15131eb76b65b50ef208e7584cd76a7484"
@ -683,6 +688,13 @@ is-binary-path@~2.1.0:
dependencies:
binary-extensions "^2.0.0"
is-builtin-module@^3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/is-builtin-module/-/is-builtin-module-3.1.0.tgz#6fdb24313b1c03b75f8b9711c0feb8c30b903b00"
integrity sha512-OV7JjAgOTfAFJmHZLvpSTb4qi0nIILDV1gWPYDnDJUTNFM5aGlRAhk4QcT8i7TuAleeEV5Fdkqn3t4mS+Q11fg==
dependencies:
builtin-modules "^3.0.0"
is-core-module@^2.1.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.2.0.tgz#97037ef3d52224d85163f5597b2b63d9afed981a"
@ -1107,6 +1119,13 @@ rollup@^2.70.1:
optionalDependencies:
fsevents "~2.3.2"
rollup@^2.70.2:
version "2.73.0"
resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.73.0.tgz#128fef4b333fd92d02d6929afbb6ee38d7feb32d"
integrity sha512-h/UngC3S4Zt28mB3g0+2YCMegT5yoftnQplwzPqGZcKvlld5e+kT/QRmJiL+qxGyZKOYpgirWGdLyEO1b0dpLQ==
optionalDependencies:
fsevents "~2.3.2"
run-parallel@^1.1.9:
version "1.1.10"
resolved "https://registry.npmjs.org/run-parallel/-/run-parallel-1.1.10.tgz#60a51b2ae836636c81377df16cb107351bcd13ef"
@ -1311,17 +1330,17 @@ supports-color@^9.2.1:
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-9.2.2.tgz#502acaf82f2b7ee78eb7c83dcac0f89694e5a7bb"
integrity sha512-XC6g/Kgux+rJXmwokjm9ECpD6k/smUoS5LKlUCcsYr4IY3rW0XyAympon2RmxGrlnZURMpg5T18gWDP9CsHXFA==
sveld@^0.15.0:
version "0.15.0"
resolved "https://registry.yarnpkg.com/sveld/-/sveld-0.15.0.tgz#826a1064f67f234bd415582b400b4d80b164ac8e"
integrity sha512-qBo/6q2QAsAkEAIvz4uTX2mSAhJ5MNtOB+ntpLVoVnKJlNGpqKQgjsMGB8mfa1vF+BDZemtf+tLDq+sPNpxxUA==
sveld@^0.15.3:
version "0.15.3"
resolved "https://registry.yarnpkg.com/sveld/-/sveld-0.15.3.tgz#75fe72f472b9cfbe863f6f0b074612d4132dc960"
integrity sha512-3TYhrLpm8z8elnZ6ffQeq1SeoxzC2zsFY/9QeNHu1UcQxAZ6LqfyUufnOkNkelYJMq9uBn4bGUAYJpbpTMjnOA==
dependencies:
"@rollup/plugin-node-resolve" "^13.2.0"
"@rollup/plugin-node-resolve" "^13.2.1"
acorn "^8.7.0"
comment-parser "^1.3.1"
fast-glob "^3.2.11"
prettier "^2.6.2"
rollup "^2.70.1"
rollup "^2.70.2"
rollup-plugin-svelte "^7.1.0"
svelte "^3.47.0"
svelte-preprocess "^4.10.6"