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

Merge branch 'master' into patch-1

Browse source
This commit is contained in:
Eric Liu 2021-10-08 10:56:27 -07:00 • committed by GitHub
commit fadf9e4ffe
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
396 changed files with 14860 additions and 17167 deletions
Download patch file Download diff file Expand all files Collapse all files

14
.github/workflows/ci.yml vendored Normal file
View file

@ -0,0 +1,14 @@
name: CI
on: [push, pull_request]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Install dependencies and build the library
run: |
yarn
yarn build:api
yarn build:lib
- name: Run unit tests and validate TypeScript definitions
run: yarn test

6
.travis.yml
View file

@ -1,6 +0,0 @@
language: node_js
node_js: 12
cache: yarn
script:
- yarn prepack
- yarn test

809
CHANGELOG.md
View file

File diff suppressed because it is too large Load diff

2
CODEOWNERS
View file

@ -1,2 +0,0 @@
* @metonym
* @josefaidt

378
COMPONENT_INDEX.md
View file

@ -1,6 +1,6 @@
# Component Index
> 167 components exported from carbon-components-svelte@0.32.2.
> 172 components exported from carbon-components-svelte@0.44.5.
## Components
@ -11,6 +11,7 @@
- [`Breadcrumb`](#breadcrumb)
- [`BreadcrumbItem`](#breadcrumbitem)
- [`BreadcrumbSkeleton`](#breadcrumbskeleton)
- [`Breakpoint`](#breakpoint)
- [`Button`](#button)
- [`ButtonSet`](#buttonset)
- [`ButtonSkeleton`](#buttonskeleton)
@ -99,6 +100,7 @@
- [`PaginationSkeleton`](#paginationskeleton)
- [`PasswordInput`](#passwordinput)
- [`Popover`](#popover)
- [`ProgressBar`](#progressbar)
- [`ProgressIndicator`](#progressindicator)
- [`ProgressIndicatorSkeleton`](#progressindicatorskeleton)
- [`ProgressStep`](#progressstep)
@ -106,6 +108,7 @@
- [`RadioButtonGroup`](#radiobuttongroup)
- [`RadioButtonSkeleton`](#radiobuttonskeleton)
- [`RadioTile`](#radiotile)
- [`RecursiveList`](#recursivelist)
- [`Row`](#row)
- [`Search`](#search)
- [`SearchSkeleton`](#searchskeleton)
@ -150,6 +153,7 @@
- [`TextAreaSkeleton`](#textareaskeleton)
- [`TextInput`](#textinput)
- [`TextInputSkeleton`](#textinputskeleton)
- [`Theme`](#theme)
- [`Tile`](#tile)
- [`TileGroup`](#tilegroup)
- [`TimePicker`](#timepicker)
@ -169,6 +173,7 @@
- [`TooltipDefinition`](#tooltipdefinition)
- [`TooltipFooter`](#tooltipfooter)
- [`TooltipIcon`](#tooltipicon)
- [`TreeView`](#treeview)
- [`Truncate`](#truncate)
- [`UnorderedList`](#unorderedlist)
@ -258,8 +263,8 @@ 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; "9x16" &#124; "1x2"</code> | <code>"2x1"</code> | Specify the aspect ratio |
| :-------- | :--------------- | :------- | :-------------------------------------------------------------------------------------------------------------- | ------------------ | ------------------------ |
| 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 |
### Slots
@ -341,6 +346,36 @@ None.
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
## `Breakpoint`
### Types
```ts
export type BreakpointSize = "sm" | "md" | "lg" | "xlg" | "max";
export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
```
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :---------- | :----------------- | :------- | :--------------------------------------------------- | ------------------------------------------------------------------------- | ------------------------------------------------- |
| sizes | <code>let</code> | Yes | <code>Record<BreakpointSize, boolean></code> | <code>{ sm: false, md: false, lg: false, xlg: false, max: false, }</code> | Carbon grid sizes as an object |
| size | <code>let</code> | Yes | <code>BreakpointSize</code> | -- | Determine the current Carbon grid breakpoint size |
| breakpoints | <code>const</code> | No | <code>Record<BreakpointSize, BreakpointValue></code> | <code>{ sm: 320, md: 672, lg: 1056, xlg: 1312, max: 1584, }</code> | Reference the Carbon grid breakpoints |
### Slots
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :------------------------------------------------------------------------------ | :------- |
| -- | Yes | <code>{ size: BreakpointSize; sizes: Record<BreakpointSize, boolean>; } </code> | -- |
### Events
| Event name | Type | Detail |
| :--------- | :--------- | :----------------------------------------------------------------------- |
| match | dispatched | <code>{ size: BreakpointSize; breakpointValue: BreakpointValue; }</code> |
## `Button`
### Props
@ -350,7 +385,8 @@ None.
| ref | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the HTML element |
| hasIconOnly | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` for the icon-only variant |
| kind | <code>let</code> | No | <code>"primary" &#124; "secondary" &#124; "tertiary" &#124; "ghost" &#124; "danger" &#124; "danger-tertiary" &#124; "danger-ghost"</code> | <code>"primary"</code> | Specify the kind of button |
| size | <code>let</code> | No | <code>"default" &#124; "field" &#124; "small"</code> | <code>"default"</code> | Specify the size of button |
| size | <code>let</code> | No | <code>"default" &#124; "field" &#124; "small" &#124; "lg" &#124; "xl"</code> | <code>"default"</code> | Specify the size of button |
| expressive | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use Carbon's expressive typesetting |
| isSelected | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the selected state for an icon-only, ghost button |
| icon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render |
| iconDescription | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label for the button icon |
@ -401,9 +437,9 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :--------------- | :------- | :--------------------------------------------------- | ---------------------- | ------------------------------------ |
| :-------- | :--------------- | :------- | :--------------------------------------------------------------------------- | ---------------------- | ------------------------------------ |
| href | <code>let</code> | No | <code>string</code> | -- | Set the `href` to use an anchor link |
| size | <code>let</code> | No | <code>"default" &#124; "field" &#124; "small"</code> | <code>"default"</code> | Specify the size of button skeleton |
| size | <code>let</code> | No | <code>"default" &#124; "field" &#124; "small" &#124; "lg" &#124; "xl"</code> | <code>"default"</code> | Specify the size of button skeleton |
| small | <code>let</code> | No | <code>boolean</code> | <code>false</code> | -- |
### Slots
@ -439,7 +475,9 @@ None.
### Slots
None.
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :----------------------- |
| labelText | No | -- | <code>{labelText}</code> |
### Events
@ -451,6 +489,7 @@ None.
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| change | forwarded | -- |
| blur | forwarded | -- |
## `CheckboxSkeleton`
@ -479,6 +518,7 @@ None.
| :-------- | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------- |
| clicked | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to click the tile |
| 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 tile |
| href | <code>let</code> | No | <code>string</code> | -- | Set the `href` |
### Slots
@ -502,12 +542,13 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| :-------------------- | :--------------- | :------- | :--------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLPreElement</code> | <code>null</code> | Obtain a reference to the pre HTML element |
| showMoreLess | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to enable the show more/less button |
| expanded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to expand a multi-line code snippet (type="multi") |
| type | <code>let</code> | No | <code>"single" &#124; "inline" &#124; "multi"</code> | <code>"single"</code> | Set the type of code snippet |
| code | <code>let</code> | No | <code>string</code> | -- | Set the code snippet text<br />Alternatively, use the default slot (e.g., &lt;CodeSnippet&gt;{`code`}&lt;/CodeSnippet&gt;)<br />You must use the `code` prop to copy the code |
| copy | <code>let</code> | No | <code>(code: string) => void</code> | <code>async (code) => { try { await navigator.clipboard.writeText(code); } catch (e) { console.log(e); } }</code> | Override the default copy behavior of using the navigator.clipboard.writeText API to copy text |
| hideCopyButton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the copy button |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the disabled variant<br />Only applies to the "single", "multi" types |
| wrapText | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to wrap the text<br />Note that `type` must be "multi" |
@ -614,7 +655,7 @@ 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 |
@ -637,6 +678,7 @@ export interface ComboBoxItem {
| translateWithId | <code>let</code> | No | <code>(id: any) => string</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> | -- | Specify a name attribute for the input |
| clear | <code>function</code> | No | <code>() => void</code> | <code>() => { selectedIndex = -1; highlightedIndex = -1; open = false; inputValue = ""; ref?.focus(); }</code> | Clear the combo box programmatically |
### Slots
@ -648,6 +690,7 @@ None.
| :--------- | :--------- | :------------------------------------------------------------------------------------- |
| select | dispatched | <code>{ selectedId: string; selectedIndex: number; selectedItem: ComboBoxItem }</code> |
| keydown | forwarded | -- |
| keyup | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
| clear | forwarded | -- |
@ -676,13 +719,15 @@ None.
### Events
| Event name | Type | Detail |
| :------------ | :--------- | :------------------------------ |
| :-------------------- | :--------- | :------------------------------ |
| transitionend | dispatched | <code>{ open: boolean; }</code> |
| keydown | forwarded | -- |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| submit | dispatched | -- |
| click:button--primary | dispatched | -- |
| close | dispatched | -- |
| open | dispatched | -- |
@ -870,9 +915,10 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------------- | :--------------- | :------- | :------------------ | -------------------------------- | ------------------------------------------------ |
| :-------------- | :--------------- | :------- | :---------------------------------- | ----------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
| iconDescription | <code>let</code> | No | <code>string</code> | <code>"Copy to clipboard"</code> | Set the title and ARIA label for the copy button |
| text | <code>let</code> | No | <code>string</code> | -- | Specify the text to copy |
| copy | <code>let</code> | No | <code>(text: string) => void</code> | <code>async (text) => { try { await navigator.clipboard.writeText(text); } catch (e) { console.log(e); } }</code> | Override the default copy behavior of using the navigator.clipboard.writeText API to copy text |
### Slots
@ -918,25 +964,26 @@ export interface DataTableRow {
[key: string]: DataTableValue;
}
export type DataTableRowId = string;
export type DataTableRowId = any;
export interface DataTableCell {
key: DataTableKey;
value: DataTableValue;
display?: (item: Value) => DataTableValue;
}
```
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :------------- | :--------------- | :------- | :-------------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------- |
| :------------- | :--------------- | :------- | :------------------------------------------------------------------ | ------------------ | ------------------------------------------------------------------------------------------------------------------- |
| selectedRowIds | <code>let</code> | Yes | <code>DataTableRowId[]</code> | <code>[]</code> | Specify the row ids to be selected |
| selectable | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` for the selectable variant<br />Automatically set to `true` if `radio` or `batchSelection` are `true` |
| expandedRowIds | <code>let</code> | Yes | <code>DataTableRowId[]</code> | <code>[]</code> | Specify the row ids to be expanded |
| expandable | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` for the expandable variant<br />Automatically set to `true` if `batchExpansion` is `true` |
| rows | <code>let</code> | Yes | <code>DataTableRow[]</code> | <code>[]</code> | Specify the rows the data table should render<br />keys defined in `headers` are used for the row ids |
| headers | <code>let</code> | No | <code>DataTableHeader[]</code> | <code>[]</code> | Specify the data table headers |
| size | <code>let</code> | No | <code>"compact" &#124; "short" &#124; "tall"</code> | -- | Set the size of the data table |
| size | <code>let</code> | No | <code>"compact" &#124; "short" &#124; "medium" &#124; "tall"</code> | -- | Set the size of the data table |
| title | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title of the data table |
| description | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the description of the data table |
| zebra | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use zebra styles |
@ -945,15 +992,18 @@ export interface DataTableCell {
| radio | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the radio selection variant |
| batchSelection | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable batch selection |
| stickyHeader | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable a sticky header |
| useStaticWidth | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use static width |
### Slots
| Slot name | Default | Props | Fallback |
| :----------- | :------ | :-------------------------------------------------------- | :------------------------------------------------------------------------------------------ |
| :----------- | :------ | :-------------------------------------------------------- | :------------------------------------------------------------------ |
| -- | Yes | -- | -- |
| cell | No | <code>{ row: DataTableRow; cell: DataTableCell; } </code> | <code>{headers[j].display<br /> ? headers[j].display(cell.value)<br /> : cell.value}</code> |
| cell | No | <code>{ row: DataTableRow; cell: DataTableCell; } </code> | <code>{cell.display ? cell.display(cell.value) : cell.value}</code> |
| cell-header | No | <code>{ header: DataTableNonEmptyHeader; } </code> | <code>{header.value}</code> |
| description | No | -- | <code>{description}</code> |
| expanded-row | No | <code>{ row: DataTableRow; } </code> | -- |
| title | No | -- | <code>{title}</code> |
### Events
@ -1000,10 +1050,11 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | --------------------------------------------- |
| :------------- | :--------------- | :------- | :---------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------- |
| valueTo | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the date picker end date value (to)<br />Only works with the "range" date picker type |
| valueFrom | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the date picker start date value (from)<br />Only works with the "range" date picker type |
| value | <code>let</code> | Yes | <code>number &#124; string</code> | <code>""</code> | Specify the date picker input value |
| datePickerType | <code>let</code> | No | <code>"simple" &#124; "single" &#124; "range"</code> | <code>"simple"</code> | Specify the date picker type |
| appendTo | <code>let</code> | No | <code>HTMLElement</code> | -- | Specify the element to append the calendar to |
| dateFormat | <code>let</code> | No | <code>string</code> | <code>"m/d/Y"</code> | Specify the date format |
| maxDate | <code>let</code> | No | <code>null &#124; string &#124; Date</code> | <code>null</code> | Specify the maximum date |
| minDate | <code>let</code> | No | <code>null &#124; string &#124; Date</code> | <code>null</code> | Specify the minimum date |
@ -1011,6 +1062,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 |
### Slots
@ -1021,12 +1073,12 @@ None.
### Events
| Event name | Type | Detail |
| :--------- | :--------- | :----- |
| :--------- | :--------- | :---------------------------------------------------------------------------------------------------------------------------------- |
| change | dispatched | <code>string &#124; { selectedDates: [dateFrom: Date, dateTo?: Date]; dateStr: string &#124; { from: string; to: string; } }</code> |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| change | dispatched | -- |
## `DatePickerInput`
@ -1040,6 +1092,7 @@ None.
| placeholder | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the input placeholder text |
| pattern | <code>let</code> | No | <code>string</code> | <code>"\\d{1,2}\\/\\d{1,2}\\/\\d{4}"</code> | Specify the Regular Expression for the input value |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the input |
| helperText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
| iconDescription | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the ARIA label for the calendar icon |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
| labelText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
@ -1052,7 +1105,9 @@ None.
### Slots
None.
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :----------------------- |
| labelText | No | -- | <code>{labelText}</code> |
### Events
@ -1060,6 +1115,7 @@ None.
| :--------- | :-------- | :----- |
| input | forwarded | -- |
| keydown | forwarded | -- |
| keyup | forwarded | -- |
| blur | forwarded | -- |
## `DatePickerSkeleton`
@ -1247,7 +1303,9 @@ None.
### Slots
None.
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :----------------------- |
| labelText | No | -- | <code>{labelText}</code> |
### Events
@ -1276,7 +1334,9 @@ None.
### Slots
None.
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :----------------------- |
| labelText | No | -- | <code>{labelText}</code> |
### Events
@ -1297,6 +1357,7 @@ None.
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------------- | :--------------- | :------- | :------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------ |
| status | <code>let</code> | No | <code>"uploading" &#124; "edit" &#124; "complete"</code> | <code>"uploading"</code> | Specify the file uploader status |
| size | <code>let</code> | No | <code>"default" &#124; "field" &#124; "small"</code> | <code>"default"</code> | Specify the size of button skeleton |
| iconDescription | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the ARIA label used for the status icons |
| invalid | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
| errorSubject | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the error subject text |
@ -1409,11 +1470,12 @@ None.
| Prop name | Kind | Reactive | Type | Default value | Description |
| :---------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------------- |
| noMargin | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for to remove the bottom margin |
| invalid | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
| message | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a form requirement |
| noMargin | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for to remove the bottom margin |
| messageText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the message text |
| legendText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the legend text |
| legendId | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify an id for the legend element |
### Slots
@ -1504,7 +1566,7 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :---------------------- | :--------------- | :------- | :----------------------------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------- |
| :---------------------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element |
| isSideNavOpen | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the side nav |
| expandedByDefault | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to hide the side nav by default |
@ -1513,6 +1575,9 @@ None.
| company | <code>let</code> | No | <code>string</code> | -- | Specify the company name |
| platformName | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the platform name<br />Alternatively, use the named slot "platform" (e.g., &lt;span slot="platform"&gt;...&lt;/span&gt;) |
| persistentHamburgerMenu | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to persist the hamburger menu |
| expansionBreakpoint | <code>let</code> | No | <code>number</code> | <code>1056</code> | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden<br />1056 represents the "large" breakpoint in pixels from the Carbon Design System:<br />small: 320<br />medium: 672<br />large: 1056<br />x-large: 1312<br />max: 1584 |
| iconMenu | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render for the closed state<br />Defaults to `Menu20` |
| iconClose | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render for the opened state<br />Defaults to `Close20` |
### Slots
@ -1648,10 +1713,11 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :--------------- | :------- | :----------------------------------------- | ----------------- | --------------------------------------------- |
| :--------- | :--------------- | :------- | :----------------------------------------- | ------------------ | --------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element |
| href | <code>let</code> | No | <code>string</code> | -- | Specify the `href` attribute |
| text | <code>let</code> | No | <code>string</code> | -- | Specify the text |
| isSelected | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to select the item |
### Slots
@ -1859,13 +1925,13 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :----------------- | :------- | :------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
| :-------- | :----------------- | :------- | :-------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
| error | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` if an error occurs when loading the image |
| loaded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` when the image is loaded |
| loading | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` when `loaded` is `true` and `error` is false |
| src | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the image source |
| alt | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the image alt text |
| ratio | <code>let</code> | No | <code>"2x1" &#124; "16x9" &#124; "4x3" &#124; "1x1" &#124; "3x4" &#124; "9x16" &#124; "1x2"</code> | -- | Specify the aspect ratio for the image wrapper |
| ratio | <code>let</code> | No | <code>"2x1" &#124; "16x9" &#124; "4x3" &#124; "1x1" &#124; "3x4" &#124; "3x2" &#124; "9x16" &#124; "1x2"</code> | -- | Specify the aspect ratio for the image wrapper |
| fadeIn | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to fade in the image on load<br />The duration uses the `fast-02` value following Carbon guidelines on motion |
| loadImage | <code>const</code> | No | <code>(url?: string) => void</code> | <code>(url) => { if (image != null) image = null; loaded = false; error = false; image = new Image(); image.src = url &#124;&#124; src; image.onload = () => (loaded = true); image.onerror = () => (error = true); }</code> | Method invoked to load the image provided a `src` value |
@ -1945,11 +2011,12 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :--------------- | :------- | :--------------------------------------------------------------------- | ------------------ | ------------------------------------------------ |
| :-------- | :--------------- | :------- | :--------------------------------------------------------------------- | ------------------ | ----------------------------------------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement &#124; HTMLParagraphElement</code> | <code>null</code> | Obtain a reference to the top-level HTML element |
| size | <code>let</code> | No | <code>"sm" &#124; "lg"</code> | -- | Specify the size of the link |
| href | <code>let</code> | No | <code>string</code> | -- | Specify the href value |
| inline | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the inline variant |
| icon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render<br />`inline` must be `false` |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the checkbox |
| visited | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow visited styles |
@ -2032,6 +2099,7 @@ export type ListBoxFieldTranslationId = "close" | "open";
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| keydown | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
## `ListBoxMenu`
@ -2178,9 +2246,11 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :--------------- | :------- | :------------------ | -------------------------------- | ----------------------------- |
| :-------- | :-------------------- | :------- | :---------------------- | ---------------------------------------------------- | --------------------------------------------------------------- |
| value | <code>let</code> | Yes | <code>any</code> | <code>""</code> | Provide a value to persist |
| key | <code>let</code> | No | <code>string</code> | <code>"local-storage-key"</code> | Specify the local storage key |
| clearItem | <code>function</code> | No | <code>() => void</code> | <code>() => { localStorage.removeItem(key); }</code> | Remove the persisted key value from the browser's local storage |
| clearAll | <code>function</code> | No | <code>() => void</code> | <code>() => { localStorage.clear(); }</code> | Clear all key values from the browser's local storage |
### Slots
@ -2198,7 +2268,7 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :------------------------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | -------------------------------------------------------------------------- |
| :------------------------- | :--------------- | :------- | :-------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the top-level HTML element |
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the modal |
| size | <code>let</code> | No | <code>"xs" &#124; "sm" &#124; "lg"</code> | -- | Set the size of the modal |
@ -2215,6 +2285,7 @@ None.
| primaryButtonDisabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the primary button |
| shouldSubmitOnEnter | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `true` for the primary button to be triggered when pressing "Enter" |
| secondaryButtonText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the secondary button text |
| secondaryButtons | <code>let</code> | No | <code>[{ text: string; }, { text: string; }]</code> | <code>[]</code> | 2-tuple prop to render two secondary buttons for a 3 button modal<br />supersedes `secondaryButtonText` |
| selectorPrimaryFocus | <code>let</code> | No | <code>string</code> | <code>"[data-modal-primary-focus]"</code> | Specify a selector to be focused when opening the modal |
| preventCloseOnClickOutside | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to prevent the modal from closing when clicking outside |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the top-level element |
@ -2232,13 +2303,14 @@ None.
| Event name | Type | Detail |
| :---------------------- | :--------- | :------------------------------ |
| transitionend | dispatched | <code>{ open: boolean; }</code> |
| click:button--secondary | dispatched | <code>{ text: string; }</code> |
| keydown | forwarded | -- |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| submit | dispatched | -- |
| click:button--secondary | dispatched | -- |
| click:button--primary | dispatched | -- |
| close | dispatched | -- |
| open | dispatched | -- |
@ -2266,11 +2338,12 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------------------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------------- |
| :-------------------- | :--------------- | :------- | :-------------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------- |
| primaryButtonText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the primary button text |
| primaryButtonDisabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the primary button |
| primaryClass | <code>let</code> | No | <code>string</code> | -- | Specify a class for the primary button |
| secondaryButtonText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the secondary button text |
| secondaryButtons | <code>let</code> | No | <code>[{ text: string; }, { text: string; }]</code> | <code>[]</code> | 2-tuple prop to render two secondary buttons for a 3 button modal<br />supersedes `secondaryButtonText` |
| secondaryClass | <code>let</code> | No | <code>string</code> | -- | Specify a class for the secondary button |
| danger | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the danger variant |
@ -2282,7 +2355,9 @@ None.
### Events
None.
| Event name | Type | Detail |
| :---------------------- | :--------- | :----------------------------- |
| click:button--secondary | dispatched | <code>{ text: string; }</code> |
## `ModalHeader`
@ -2329,6 +2404,9 @@ export interface MultiSelectItem {
| Prop name | Kind | Reactive | Type | Default value | Description |
| :---------------- | :--------------- | :------- | :--------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
| 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 |
@ -2369,6 +2447,7 @@ None.
| select | dispatched | <code>{ selectedIds: string[]; selected: MultiSelectItem[]; unselected: MultiSelectItem[]; }</code> |
| clear | dispatched | <code>any</code> |
| keydown | forwarded | -- |
| keyup | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
@ -2467,7 +2546,7 @@ export type NumberInputTranslationId = "increment" | "decrement";
### 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 |
| value | <code>let</code> | Yes | <code>number &#124; string</code> | <code>""</code> | Specify the input value |
| size | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | -- | Set the size of the input |
@ -2479,6 +2558,7 @@ export type NumberInputTranslationId = "increment" | "decrement";
| mobile | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the mobile variant |
| allowEmpty | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow for an empty value |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the input |
| hideSteppers | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the input stepper buttons |
| iconDescription | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the ARIA label for the increment icons |
| 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 |
@ -2535,9 +2615,10 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------- |
| :--------- | :--------------- | :------- | :------------------- | ------------------ | ---------------------------------------------------- |
| nested | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the nested variant |
| native | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use native list styles |
| expressive | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use Carbon's expressive typesetting |
### Slots
@ -2742,12 +2823,17 @@ None.
| hideLabel | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label 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 text for the 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 |
| inline | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use inline version |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
| name | <code>let</code> | No | <code>string</code> | -- | Specify a name attribute for the input |
### Slots
None.
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :----------------------- |
| labelText | No | -- | <code>{labelText}</code> |
### Events
@ -2760,6 +2846,7 @@ None.
| change | forwarded | -- |
| input | forwarded | -- |
| keydown | forwarded | -- |
| keyup | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
@ -2789,6 +2876,29 @@ None.
| :------------ | :--------- | :----- |
| click:outside | dispatched | -- |
## `ProgressBar`
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :--------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | --------------------------------------------- |
| value | <code>let</code> | No | <code>number</code> | -- | Specify the current value |
| max | <code>let</code> | No | <code>number</code> | <code>100</code> | Specify the maximum value |
| labelText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
| hideLabel | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
| helperText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the progress bar element |
### Slots
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :----------------------- |
| labelText | No | -- | <code>{labelText}</code> |
### Events
None.
## `ProgressIndicator`
### Props
@ -2887,7 +2997,9 @@ None.
### Slots
None.
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :----------------------- |
| labelText | No | -- | <code>{labelText}</code> |
### Events
@ -2976,6 +3088,33 @@ None.
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
## `RecursiveList`
### Types
```ts
export interface RecursiveListNode {
text?: string;
href?: string;
html?: string;
}
```
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :--------------- | :------- | :-------------------------------------------------------------------------- | ------------------------ | ---------------------------------- |
| children | <code>let</code> | No | <code>Array<RecursiveListNode & { children?: RecursiveListNode[]; }></code> | <code>[]</code> | Specify the children to render |
| type | <code>let</code> | No | <code>"unordered" &#124; "ordered" &#124; "ordered-native"</code> | <code>"unordered"</code> | Specify the type of list to render |
### Slots
None.
### Events
None.
## `Row`
### Props
@ -3005,31 +3144,38 @@ 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 |
| value | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the value of the search input |
| expanded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true to expand the search input |
| small | <code>let</code> | No | <code>boolean</code> | <code>false</code> | -- |
| size | <code>let</code> | No | <code>"sm" &#124; "lg" &#124; "xl"</code> | <code>"xl"</code> | Specify the size of the search input |
| searchClass | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the class name passed to the outer div element |
| skeleton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
| 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 search input |
| expandable | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the expandable variant |
| type | <code>let</code> | No | <code>string</code> | <code>"text"</code> | Specify the `type` attribute of the search input |
| placeholder | <code>let</code> | No | <code>string</code> | <code>"Search..."</code> | Specify the `placeholder` attribute of the search input |
| autocomplete | <code>let</code> | No | <code>"on" &#124; "off"</code> | <code>"off"</code> | Specify the `autocomplete` attribute |
| autofocus | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to auto focus the search element |
| closeButtonLabelText | <code>let</code> | No | <code>string</code> | <code>"Clear search input"</code> | Specify the close button label text |
| labelText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
| icon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
### Slots
None.
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :----------------------- |
| labelText | No | -- | <code>{labelText}</code> |
### Events
| Event name | Type | Detail |
| :--------- | :--------- | :----- |
| :--------- | :--------- | :--------------- |
| expand | dispatched | <code>any</code> |
| collapse | dispatched | <code>any</code> |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
@ -3039,6 +3185,7 @@ None.
| focus | forwarded | -- |
| blur | forwarded | -- |
| keydown | forwarded | -- |
| keyup | forwarded | -- |
| clear | dispatched | -- |
## `SearchSkeleton`
@ -3089,14 +3236,17 @@ None.
### Slots
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| :-------- | :------ | :---- | :----------------------- |
| -- | Yes | -- | -- |
| labelText | No | -- | <code>{labelText}</code> |
### Events
| Event name | Type | Detail |
| :--------- | :--------- | :------------------ |
| change | dispatched | <code>string</code> |
| input | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
## `SelectItem`
@ -3196,10 +3346,12 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------------ |
| :------------------ | :--------------- | :------- | :------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| isOpen | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to toggle the expanded state |
| fixed | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the fixed variant |
| rail | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the rail variant |
| ariaLabel | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label for the nav |
| expansionBreakpoint | <code>let</code> | No | <code>number</code> | <code>1056</code> | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden<br />1056 represents the "large" breakpoint in pixels from the Carbon Design System:<br />small: 320<br />medium: 672<br />large: 1056<br />x-large: 1312<br />max: 1584 |
### Slots
@ -3209,7 +3361,11 @@ None.
### Events
None.
| Event name | Type | Detail |
| :------------ | :--------- | :--------------- |
| open | dispatched | <code>any</code> |
| close | dispatched | <code>any</code> |
| click:overlay | dispatched | <code>any</code> |
## `SideNavDivider`
@ -3291,9 +3447,9 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :--------- | :--------------- | :------- | :----------------------------------------- | ----------------- | --------------------------------------------- |
| :--------- | :--------------- | :------- | :----------------------------------------- | ------------------ | --------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element |
| isSelected | <code>let</code> | No | <code>boolean</code> | -- | Set to `true` to select the item |
| isSelected | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to select the item |
| href | <code>let</code> | No | <code>string</code> | -- | Specify the `href` attribute |
| text | <code>let</code> | No | <code>string</code> | -- | Specify the item text |
@ -3399,7 +3555,9 @@ None.
### Slots
None.
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :----------------------- |
| labelText | No | -- | <code>{labelText}</code> |
### Events
@ -3440,6 +3598,8 @@ None.
| :-------- | :--------------- | :------- | :------------------- | ------------------ | ---------------------------------------------- |
| selected | <code>let</code> | Yes | <code>string</code> | -- | Specify the selected structured list row value |
| border | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the bordered variant |
| condensed | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the condensed variant |
| flush | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to flush the list |
| selection | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the selection variant |
### Slots
@ -3672,8 +3832,8 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :--------------- | :--------------- | :------- | :-------------------------------------------------- | ------------------ | --------------------------------------- |
| size | <code>let</code> | No | <code>"compact" &#124; "short" &#124; "tall"</code> | -- | Set the size of the table |
| :--------------- | :--------------- | :------- | :------------------------------------------------------------------ | ------------------ | --------------------------------------- |
| size | <code>let</code> | No | <code>"compact" &#124; "short" &#124; "medium" &#124; "tall"</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 |
| shouldShowBorder | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the bordered variant |
@ -3732,10 +3892,11 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :----------- | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------- |
| :------------- | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------- |
| title | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title of the data table |
| description | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the description of the data table |
| stickyHeader | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable a sticky header |
| useStaticWidth | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use static width |
### Slots
@ -3939,7 +4100,9 @@ None.
### Slots
None.
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :----------------------- |
| labelText | No | -- | <code>{labelText}</code> |
### Events
@ -3951,6 +4114,8 @@ None.
| mouseleave | forwarded | -- |
| change | forwarded | -- |
| input | forwarded | -- |
| keydown | forwarded | -- |
| keyup | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
@ -3998,11 +4163,14 @@ None.
| 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 |
| required | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to mark the field as required |
| inline | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use inline version |
| inline | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the inline variant |
| readonly | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the read-only variant |
### Slots
None.
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :----------------------- |
| labelText | No | -- | <code>{labelText}</code> |
### Events
@ -4015,6 +4183,7 @@ None.
| change | forwarded | -- |
| input | forwarded | -- |
| keydown | forwarded | -- |
| keyup | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
@ -4039,6 +4208,38 @@ None.
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
## `Theme`
### Types
```ts
export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
```
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :--------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
| theme | <code>let</code> | Yes | <code>CarbonTheme</code> | <code>"white"</code> | Set the current Carbon theme |
| tokens | <code>let</code> | No | <code>{ [token: string]: any; }</code> | <code>{}</code> | Customize a theme with your own tokens<br />https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme |
| persist | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to persist the theme using window.localStorage |
| persistKey | <code>let</code> | No | <code>string</code> | <code>"theme"</code> | Specify the local storage key |
| render | <code>let</code> | No | <code>"toggle" &#124; "select"</code> | -- | Render a toggle or select dropdown to control the theme |
| toggle | <code>let</code> | No | <code>import("../Toggle/Toggle").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; }</code> | <code>{ themes: ["white", "g100"], labelA: "", labelB: "", labelText: "Dark mode", hideLabel: false, }</code> | Override the default toggle props |
| select | <code>let</code> | No | <code>import("../Select/Select").SelectProps & { themes?: CarbonTheme[]; }</code> | <code>{ themes: themeKeys, labelText: "Themes", hideLabel: false, }</code> | Override the default select props |
### Slots
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :------------------------------------ | :------- |
| -- | Yes | <code>{ theme: CarbonTheme; } </code> | -- |
### Events
| Event name | Type | Detail |
| :--------- | :--------- | :----------------------------------- |
| update | dispatched | <code>{ theme: CarbonTheme; }</code> |
## `Tile`
### Props
@ -4109,8 +4310,9 @@ None.
### Slots
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| :-------- | :------ | :---- | :----------------------- |
| -- | Yes | -- | -- |
| labelText | No | -- | <code>{labelText}</code> |
### Events
@ -4122,6 +4324,8 @@ None.
| mouseleave | forwarded | -- |
| change | forwarded | -- |
| input | forwarded | -- |
| keydown | forwarded | -- |
| keyup | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
@ -4143,8 +4347,9 @@ None.
### Slots
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| :-------- | :------ | :---- | :----------------------- |
| -- | Yes | -- | -- |
| labelText | No | -- | <code>{labelText}</code> |
### Events
@ -4204,7 +4409,9 @@ None.
### Slots
None.
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :----------------------- |
| labelText | No | -- | <code>{labelText}</code> |
### Events
@ -4232,7 +4439,9 @@ None.
### Slots
None.
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :----------------------- |
| labelText | No | -- | <code>{labelText}</code> |
### Events
@ -4325,8 +4534,9 @@ None.
### Slots
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| :-------- | :------ | :---- | :------------------ |
| -- | Yes | -- | -- |
| cancel | No | -- | <code>Cancel</code> |
### Events
@ -4501,6 +4711,8 @@ None.
| :---------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------ |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element |
| tooltipText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the tooltip text.<br />Alternatively, use the "tooltipText" slot |
| icon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the tooltip icon |
| align | <code>let</code> | No | <code>"start" &#124; "center" &#124; "end"</code> | <code>"center"</code> | Set the alignment of the tooltip relative to the icon |
| direction | <code>let</code> | No | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code> | <code>"bottom"</code> | Set the direction of the tooltip relative to the icon |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the span element |
@ -4508,8 +4720,8 @@ None.
### Slots
| Slot name | Default | Props | Fallback |
| :---------- | :------ | :---- | :------------------------- |
| -- | Yes | -- | -- |
| :---------- | :------ | :---- | :---------------------------------------------------- |
| -- | Yes | -- | <code>&lt;svelte:component this="{icon}" /&gt;</code> |
| tooltipText | No | -- | <code>{tooltipText}</code> |
### Events
@ -4522,6 +4734,49 @@ None.
| mouseleave | forwarded | -- |
| focus | forwarded | -- |
## `TreeView`
### Types
```ts
export type TreeNodeId = string | number;
export interface TreeNode {
id: TreeNodeId;
text: string;
icon?: typeof import("carbon-icons-svelte").CarbonIcon;
disabled?: boolean;
expanded?: boolean;
}
```
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :---------- | :--------------- | :------- | :------------------------------------------------------- | ---------------------- | --------------------------------------------------------------- |
| expandedIds | <code>let</code> | Yes | <code>TreeNodeId[]</code> | <code>[]</code> | Set the node ids to be expanded |
| selectedIds | <code>let</code> | Yes | <code>TreeNodeId[]</code> | <code>[]</code> | Set the node ids to be selected |
| activeId | <code>let</code> | Yes | <code>TreeNodeId</code> | <code>""</code> | Set the current active node id<br />Only one node can be active |
| children | <code>let</code> | No | <code>Array<TreeNode & { children?: TreeNode[] }></code> | <code>[]</code> | Provide an array of children nodes to render |
| size | <code>let</code> | No | <code>"default" &#124; "compact"</code> | <code>"default"</code> | Specify the TreeView size |
| labelText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
| hideLabel | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
### Slots
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :----------------------- |
| labelText | No | -- | <code>{labelText}</code> |
### Events
| Event name | Type | Detail |
| :--------- | :--------- | :------------------------------------------------------------ |
| select | dispatched | <code>TreeNode & { expanded: boolean; leaf: boolean; }</code> |
| toggle | dispatched | <code>TreeNode & { expanded: boolean; leaf: boolean; }</code> |
| focus | dispatched | <code>TreeNode & { expanded: boolean; leaf: boolean; }</code> |
| keydown | forwarded | -- |
## `Truncate`
### Props
@ -4545,8 +4800,9 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------- |
| :--------- | :--------------- | :------- | :------------------- | ------------------ | ---------------------------------------------------- |
| nested | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the nested variant |
| expressive | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use Carbon's expressive typesetting |
### Slots

4
CONTRIBUTING.md
View file

@ -1,6 +1,6 @@
# Contributing
Before submitting a pull request (PR), consider [filing an issue](https://github.com/IBM/carbon-components-svelte/issues) to gain clarity and direction.
Before submitting a pull request (PR), consider [filing an issue](https://github.com/carbon-design-system/carbon-components-svelte/issues) to gain clarity and direction.
## Prerequisites
@ -105,7 +105,7 @@ export let size = "default";
### Creating a component
First, [submit an issue](https://github.com/IBM/carbon-components-svelte/issues).
First, [submit an issue](https://github.com/carbon-design-system/carbon-components-svelte/issues).
If creating a new component, don't forget it from `src/index.js`:

4
MAINTAINERS.md
View file

@ -1,5 +1 @@
# Maintainers
[Eric Liu](https://github.com/metonym) - eric.young.liu@ibm.com
[Josef Aidt](https://github.com/josefaidt) - josef.aidt@gmail.com

336
README.md
View file

@ -3,7 +3,6 @@
[![NPM][npm]][npm-url]
![GitHub](https://img.shields.io/github/license/ibm/carbon-components-svelte?color=262626&style=for-the-badge)
![npm downloads to date](https://img.shields.io/npm/dt/carbon-components-svelte?color=262626&style=for-the-badge)
[![Build][build]][build-badge]
Carbon Components Svelte is a [Svelte](https://github.com/sveltejs/svelte) component library that implements the [Carbon Design System](https://github.com/carbon-design-system), an open source design system by IBM.
@ -11,64 +10,160 @@ Design systems facilitate design and development through reuse, consistency, and
The Carbon Svelte portfolio also includes:
- **[Carbon Icons Svelte](https://github.com/IBM/carbon-icons-svelte)**: 6000+ Carbon icons as Svelte components
- **[Carbon Pictograms Svelte](https://github.com/IBM/carbon-pictograms-svelte)**: 700+ Carbon pictograms as Svelte components
- **[Carbon Charts Svelte](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte)**: 16 chart types, powered by d3
- **[Carbon Icons Svelte](https://github.com/carbon-design-system/carbon-icons-svelte)**: 7000+ Carbon icons as Svelte components
- **[Carbon Pictograms Svelte](https://github.com/carbon-design-system/carbon-pictograms-svelte)**: 700+ Carbon pictograms as Svelte components
- **[Carbon Charts Svelte](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte)**: 20+ charts, powered by d3
- **[Carbon Preprocess Svelte](https://github.com/carbon-design-system/carbon-preprocess-svelte)**: Collection of Svelte preprocessors for Carbon
## [Documentation](http://ibm.biz/carbon-svelte)
## [Documentation](https://carbon-components-svelte.onrender.com)
<a href="https://www.vercel.com?utm_source=carbon-components-svelte&utm_campaign=oss" target="_blank"><img height="34px" src="./docs/public/powered-by-vercel.svg" alt="Deploys by Vercel" /></a>
The documentation site is deployed to [Render](https://render.com) as a Static Site. See [render.yaml](render.yaml) for details.
The [documentation website](http://ibm.biz/carbon-svelte) contains live demos and examples.
[![Deploy to Render](https://render.com/images/deploy-to-render-button.svg)](https://render.com/deploy?repo=https://github.com/carbon-design-system/carbon-components-svelte)
Other forms of documentation are auto-generated:
- **[TypeScript definitions](types)**: Component TypeScript definitions
- **[Component Index](COMPONENT_INDEX.md)**: Markdown file documenting component props, slots, and events
- **[Component API](docs/src/COMPONENT_API.json)**: Component API metadata in JSON format
- **[Component Index](COMPONENT_INDEX.md)**: Component API in Markdown format
- **[Component API](docs/src/COMPONENT_API.json)**: Component API in JSON format
## Getting started
## Installation
Install `carbon-components-svelte` as a development dependency.
**Yarn**
```sh
yarn add -D carbon-components-svelte
# OR
```
**NPM**
```sh
npm i -D carbon-components-svelte
# OR
```
**pnpm**
```sh
pnpm i -D carbon-components-svelte
```
## Usage
The quickest way to get started is to customize a template from the [examples](examples/) folder.
### Styling
Example set-ups demonstrate usage with popular application bundlers and frameworks. They include a mix of client-side rendering (CSR) and server-side rendering (SSR) approaches.
Before importing components, you will need to first apply Carbon component styles. The Carbon Design System supports five themes (2 light, 3 dark).
- **[examples/rollup](examples/rollup/)**: SPA bundled using [Rollup](https://github.com/rollup/rollup)
- **[examples/rollup-typescript](examples/rollup-typescript/)**: SPA bundled using [Rollup](https://github.com/rollup/rollup) with TypeScript support
- **[examples/routify](examples/routify/)**: SPA + static export using [Routify](https://github.com/roxiness/routify)
- **[examples/sapper](examples/sapper/)**: SSR + static export using [Sapper](https://github.com/sveltejs/sapper)
- **[examples/svite](examples/svite/)**: SPA developed with Svite, bundled with [Rollup](https://github.com/rollup/rollup)
- **[examples/webpack](examples/webpack/)**: SPA bundled with [webpack](https://github.com/webpack/webpack)
- **white.css**: Default Carbon theme (light)
- **g10.css**: Gray 10 theme (light)
- **g80.css**: Gray 80 theme (dark)
- **g90.css**: Gray 90 theme (dark)
- **g100.css**: Gray 100 theme (dark)
- **all.css**: All themes (White, Gray 10, Gray 90, Gray 100) using [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
### Scaffolding
Each StyleSheet is [generated](scripts/build-css.js) from the flagship [carbon-components](https://github.com/carbon-design-system/carbon/tree/master/packages/components) library.
Each example is published in a dedicated branch of the same name.
The compiled CSS is generated from the following `.scss` files:
Use [degit](https://github.com/Rich-Harris/degit) to scaffold a new project:
- [css/white.scss](css/white.scss)
- [css/g10.scss](css/g10.scss)
- [css/g80.scss](css/g80.scss)
- [css/g90.scss](css/g90.scss)
- [css/g100.scss](css/g100.scss)
- [css/all.scss](css/all.scss)
For example, to use the `svite` template, run the following commands:
#### CSS StyleSheet
```sh
npx degit ibm/carbon-components-svelte#svite svelte-app
cd svelte-app
yarn install
```js
// White theme
import "carbon-components-svelte/css/white.css";
// Gray 10 theme
import "carbon-components-svelte/css/g10.css";
// Gray 80 theme
import "carbon-components-svelte/css/g80.css";
// Gray 90 theme
import "carbon-components-svelte/css/g90.css";
// Gray 100 theme
import "carbon-components-svelte/css/g100.css";
// All themes
import "carbon-components-svelte/css/all.css";
```
#### CDN
An alternative to loading styles is to link an external StyleSheet from a Content Delivery Network (CDN) like [unpkg.com](https://unpkg.com/).
This is best suited for rapid prototyping.
##### HTML
```html
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet"
href="https://unpkg.com/carbon-components-svelte/css/white.css"
/>
</head>
</html>
```
##### `svelte:head`
```html
<svelte:head>
<link
rel="stylesheet"
href="https://unpkg.com/carbon-components-svelte/css/white.css"
/>
</svelte:head>
```
### SCSS
The most performant method to load styles is to import SCSS directly from carbon-components. Although it requires more set up, you can reduce the size of the bundle CSS by importing individual component styles instead of a pre-compiled CSS StyleSheet.
Refer to the [official Carbon guide on SASS](https://github.com/carbon-design-system/carbon/blob/main/docs/guides/sass.md) for documentation.
### Dynamic theming
Use the "all.css" StyleSheet for dynamic, client-side theming.
```js
import "carbon-components-svelte/css/all.css";
```
Update the theme by setting the `theme` attribute on the `html` element. The default `theme` is `"white"`.
```html
<!DOCTYPE html>
<html lang="en" theme="g10">
<body>
...
</body>
</html>
```
Programmatically switch between each of the five Carbon themes by setting the "theme" attribute on the HTML element.
```html
<script>
let theme = "white"; // "white" | "g10" | "g80" | "g90" | "g100"
$: document.documentElement.setAttribute("theme", theme);
</script>
```
### Importing components
Import components from `carbon-components-svelte` in the `script` tag of your Svelte file.
Import components from `carbon-components-svelte` in the `script` tag of your Svelte file. Visit the [documentation site](https://carbon-components-svelte.onrender.com) for examples.
```html
<!-- App.svelte -->
@ -85,163 +180,66 @@ Import components from `carbon-components-svelte` in the `script` tag of your Sv
**Refer to [COMPONENT_INDEX.md](COMPONENT_INDEX.md) for component API documentation.**
### Pre-compiled CSS StyleSheets
## Preprocessors
`carbon-components-svelte` includes pre-compiled CSS StyleSheets for each Carbon theme:
[carbon-preprocess-svelte](https://github.com/carbon-design-system/carbon-preprocess-svelte) is a collection of Svelte preprocessors for Carbon.
- **white.css**: Default Carbon theme (light)
- **g10.css**: Gray 10 theme (light)
- **g90.css**: Gray 90 theme (dark)
- **g100.css**: Gray 100 theme (dark)
- **all.css**: All themes (White, Gray 10, Gray 90, Gray 100) using [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
**Yarn**
Each StyleSheet is [generated](scripts/build-css.js) from the flagship [carbon-components](https://github.com/carbon-design-system/carbon/tree/master/packages/components) library.
```sh
yarn add -D carbon-preprocess-svelte
```
The compiled CSS is generated from the following `.scss` files:
**NPM**
- [css/white.scss](css/white.scss)
- [css/g10.scss](css/g10.scss)
- [css/g90.scss](css/g90.scss)
- [css/g100.scss](css/g100.scss)
- [css/all.scss](css/all.scss)
```sh
npm i -D carbon-preprocess-svelte
```
### `optimizeImports`
`optimizeImports` is a script preprocessor that rewrites base imports from Carbon components/icons/pictograms packages to their source Svelte code paths. This can greatly speed up compile times during development while preserving typeahead and autocompletion hinting offered by integrated development environments (IDE) like VSCode.
The preprocessor optimizes imports from the following packages:
- [carbon-components-svelte](https://github.com/carbon-design-system/carbon-components-svelte)
- [carbon-icons-svelte](https://github.com/carbon-design-system/carbon-icons-svelte)
- [carbon-pictograms-svelte](https://github.com/carbon-design-system/carbon-pictograms-svelte)
**Example**
```diff
- import { Button } from "carbon-components-svelte";
- import { Add16 } from "carbon-icons-svelte";
- import { Airplane } from "carbon-pictograms-svelte";
+ import Button from "carbon-components-svelte/Button/Button.svelte";
+ import Add16 from "carbon-icons-svelte/lib/Add16/Add16.svelte";
+ import Airplane from "carbon-pictograms-svelte/lib/Airplane/Airplane.svelte";
```
#### Usage
##### `svelte-preprocess`
The easiest way to import a StyleSheet is with [svelte-preprocess](https://github.com/sveltejs/svelte-preprocess).
```js
const svelteOptions = {
preprocess: require("svelte-preprocess")(),
};
```
```html
<!-- App.svelte -->
<style lang="scss" global>
/** Gray 10 theme **/
@import "carbon-components-svelte/css/g10";
</style>
```
##### JavaScript import
Importing a CSS file in a JavaScript file will require the appropriate file loader(s).
```js
import "carbon-components-svelte/css/all.css";
import App from "./App.svelte";
const app = new App({ target: document.body });
export default app;
```
See [webpack.config.js](examples/webpack/webpack.config.js) in [examples/webpack](examples/webpack).
#### Dynamic theming
Use `carbon-components-svelte/css/all.css` for dynamic, client-side styling.
Update the theme by setting the `theme` attribute on the `html` element. The default `theme` is `"white"`.
```html
<!DOCTYPE html>
<html lang="en" theme="g10">
<body>
...
</body>
</html>
```
Using JavaScript:
```svelte
<script>
/** @type {"white" | "g10" | "g90" | "g100"} */
let theme = "white";
$: document.documentElement.setAttribute("theme", theme);
</script>
<button on:click="{() => (theme = 'g90')}">Update theme</button>
```
## Preprocessors
### optimizeCarbonImports
`optimizeCarbonImports` is a Svelte preprocessor that optimizes base imports inside the `script` block of a Svelte file from the following libraries:
- carbon-components-svelte
- carbon-icons-svelte
- carbon-pictograms-svelte
The preprocessor rewrites base imports to directly import the source Svelte file. This may lead to faster complile times **during development**.
Example:
**Before**
```js
import { Button, Header } from "carbon-components-svelte";
import { Notification20 } from "carbon-icons-svelte";
import { Airplane } from "carbon-pictograms-svelte";
```
**After**
```js
import Button from "carbon-components-svelte/Button/Button.svelte";
import Header from "carbon-components-svelte/UIShell/GlobalHeader/Header.svelte";
import Notification20 from "carbon-icons-svelte/lib/Notification20/Notification20.svelte";
import Airplane from "carbon-pictograms-svelte/lib/Airplane/Airplane.svelte";
```
#### svelte.config.js
```js
// svelte.config.js
const {
optimizeCarbonImports,
} = require("carbon-components-svelte/preprocess");
import { optimizeImports } from "carbon-preprocess-svelte";
module.exports = {
preprocess: [optimizeCarbonImports()],
export default {
preprocess: [optimizeImports()],
};
```
#### svelte-loader
## Examples
```js
// webpack.config.js
const {
optimizeCarbonImports,
} = require("carbon-components-svelte/preprocess");
module.exports = {
// ...
module: {
rules: [
{
test: /\.svelte$/,
use: {
loader: "svelte-loader",
options: {
hotReload: true,
preprocess: [optimizeCarbonImports()],
},
},
},
],
},
};
```
- [examples/rollup](examples/rollup/)
- [examples/sapper](examples/sapper/)
- [examples/snowpack](examples/snowpack/)
- [examples/sveltekit](examples/sveltekit/)
- [examples/vite](examples/vite/)
- [examples/webpack](examples/webpack/)
## TypeScript support
[TypeScript definitions](types) are generated by [sveld](https://github.com/IBM/sveld).
[TypeScript definitions](types) are generated by [sveld](https://github.com/carbon-design-system/sveld).
## Contributing
@ -255,5 +253,3 @@ Refer to the [Contributing guidelines](CONTRIBUTING.md).
[npm]: https://img.shields.io/npm/v/carbon-components-svelte.svg?color=262626&style=for-the-badge
[npm-url]: https://npmjs.com/package/carbon-components-svelte
[build]: https://img.shields.io/travis/com/ibm/carbon-components-svelte?color=24a148&style=for-the-badge
[build-badge]: https://travis-ci.com/ibm/carbon-components-svelte

9
css/all.scss
View file

@ -40,6 +40,15 @@ $css--plex: true;
}
}
// Set the <html> theme attribute to "g80" to use the Gray 80 theme
// <html theme="g80">
:root[theme="g80"] {
@include carbon--theme($carbon--theme--g80, true) {
@include emit-component-tokens($tag-colors);
@include emit-component-tokens($notification-colors);
}
}
// Set the <html> theme attribute to "g90" to use the Gray 90 theme
// <html theme="g90">
:root[theme="g90"] {

32
css/g80.scss Normal file
View file

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

2
docs/index.html
View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" theme="white">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" />

5
docs/package.json
View file

@ -11,8 +11,9 @@
"devDependencies": {
"@sveltech/routify": "^1.9.9",
"autoprefixer": "^10.2.3",
"carbon-components": "10.32.1",
"carbon-components": "10.44.0",
"carbon-components-svelte": "../",
"clipboard-copy": "^4.0.1",
"mdsvex": "^0.8.8",
"npm-run-all": "^4.1.5",
"postcss": "^8.2.4",
@ -21,7 +22,7 @@
"prism-svelte": "^0.4.7",
"prismjs": "^1.21.0",
"remark-slug": "^6.0.0",
"sass": "^1.32.5",
"sass": "^1.42.1",
"svelte": "3.29.0",
"svelte-hmr": "0.11.1",
"svelte-preprocess": "^4.3.2",

1
docs/public/powered-by-vercel.svg
View file

@ -1 +0,0 @@
<svg width="212" height="44" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="212" height="44" rx="8" fill="#000"/><path d="M60.438 15.227V26.5h1.406v-4.023h2.836c2.117 0 3.625-1.493 3.625-3.602 0-2.148-1.477-3.648-3.61-3.648h-4.257zm1.406 1.25h2.484c1.633 0 2.531.851 2.531 2.398 0 1.492-.93 2.352-2.53 2.352h-2.485v-4.75zm11.5 10.171c2.399 0 3.883-1.656 3.883-4.359 0-2.71-1.484-4.36-3.883-4.36-2.398 0-3.883 1.65-3.883 4.36 0 2.703 1.485 4.36 3.883 4.36zm0-1.21c-1.594 0-2.492-1.157-2.492-3.149 0-2 .898-3.148 2.492-3.148 1.594 0 2.492 1.148 2.492 3.148 0 1.992-.898 3.148-2.492 3.148zm15.954-7.36h-1.352l-1.656 6.735h-.125l-1.883-6.735h-1.29l-1.882 6.735h-.125l-1.656-6.735h-1.36l2.36 8.422h1.36l1.874-6.516h.125l1.883 6.516h1.367l2.36-8.422zm4.523 1.04c1.336 0 2.227.984 2.258 2.476h-4.64c.101-1.492 1.039-2.477 2.382-2.477zm2.219 5.202c-.352.742-1.086 1.14-2.172 1.14-1.43 0-2.36-1.054-2.43-2.718v-.062h6.055v-.516c0-2.617-1.383-4.234-3.656-4.234-2.313 0-3.797 1.718-3.797 4.367 0 2.664 1.46 4.351 3.797 4.351 1.844 0 3.156-.89 3.547-2.328H96.04zm3.242 2.18h1.344v-5.219c0-1.187.93-2.047 2.211-2.047.266 0 .75.047.86.078V17.97a5.77 5.77 0 00-.672-.04c-1.117 0-2.086.579-2.336 1.4h-.125v-1.25h-1.281V26.5zm8.899-7.383c1.336 0 2.227.985 2.258 2.477h-4.641c.102-1.492 1.04-2.477 2.383-2.477zm2.219 5.203c-.352.742-1.086 1.14-2.172 1.14-1.43 0-2.359-1.054-2.43-2.718v-.062h6.055v-.516c0-2.617-1.383-4.234-3.656-4.234-2.313 0-3.797 1.718-3.797 4.367 0 2.664 1.461 4.351 3.797 4.351 1.844 0 3.156-.89 3.547-2.328H110.4zm6.36 2.328c1.164 0 2.164-.554 2.695-1.492h.125V26.5h1.281V14.734h-1.343v4.672h-.118c-.476-.922-1.468-1.476-2.64-1.476-2.141 0-3.539 1.718-3.539 4.36 0 2.648 1.382 4.358 3.539 4.358zm.312-7.507c1.524 0 2.477 1.218 2.477 3.148 0 1.945-.946 3.148-2.477 3.148-1.539 0-2.461-1.18-2.461-3.148 0-1.96.93-3.148 2.461-3.148zm14.462 7.507c2.133 0 3.531-1.726 3.531-4.359 0-2.648-1.391-4.36-3.531-4.36-1.156 0-2.18.571-2.641 1.477h-.125v-4.672h-1.344V26.5h1.282v-1.344h.125c.531.938 1.531 1.492 2.703 1.492zm-.313-7.507c1.539 0 2.453 1.18 2.453 3.148 0 1.969-.914 3.148-2.453 3.148-1.531 0-2.484-1.203-2.484-3.148s.953-3.148 2.484-3.148zm6.04 10.406c1.492 0 2.164-.578 2.882-2.531l3.29-8.938h-1.43l-2.305 6.93h-.125l-2.312-6.93h-1.453l3.117 8.43-.157.5c-.351 1.015-.773 1.383-1.546 1.383-.188 0-.399-.008-.563-.04V29.5c.188.031.422.047.602.047zm17.391-3.047l3.898-11.273h-2.148l-2.813 8.921h-.132l-2.836-8.921h-2.227l3.938 11.273h2.32zm8.016-7.18c1.164 0 1.93.813 1.969 2.078h-4.024c.086-1.25.899-2.078 2.055-2.078zm1.984 4.828c-.281.633-.945.985-1.906.985-1.273 0-2.094-.89-2.141-2.313v-.101h5.969v-.625c0-2.696-1.461-4.313-3.898-4.313-2.477 0-4.016 1.727-4.016 4.477s1.516 4.414 4.031 4.414c2.016 0 3.446-.969 3.797-2.524h-1.836zm3.547 2.352h1.938v-4.938c0-1.195.875-1.976 2.133-1.976.328 0 .843.055.992.11v-1.798c-.18-.054-.524-.085-.805-.085-1.101 0-2.023.625-2.258 1.468h-.132v-1.328h-1.868V26.5zm13.501-5.672c-.203-1.797-1.532-3.047-3.727-3.047-2.57 0-4.078 1.649-4.078 4.422 0 2.813 1.516 4.469 4.086 4.469 2.164 0 3.508-1.203 3.719-2.992h-1.844c-.203.89-.875 1.367-1.883 1.367-1.32 0-2.117-1.047-2.117-2.844 0-1.773.789-2.797 2.117-2.797 1.063 0 1.703.594 1.883 1.422h1.844zm5.117-1.508c1.164 0 1.93.813 1.969 2.078h-4.024c.086-1.25.899-2.078 2.055-2.078zm1.985 4.828c-.282.633-.946.985-1.907.985-1.273 0-2.093-.89-2.14-2.313v-.101h5.968v-.625c0-2.696-1.461-4.313-3.898-4.313-2.477 0-4.016 1.727-4.016 4.477s1.516 4.414 4.032 4.414c2.015 0 3.445-.969 3.796-2.524h-1.835zm3.625 2.352h1.937V14.648h-1.937V26.5zM23.325 13l9.325 16H14l9.325-16z" fill="#fff"/><path stroke="#5E5E5E" d="M43.5 0v44"/></svg>
Side by side

Before

Width:  |  Height:  |  Size: 3.5 KiB

11
docs/src/App.svelte
View file

@ -48,6 +48,15 @@
}
}
// Set the <html> theme attribute to "g80" to use the Gray 90 theme
// <html theme="g80">
:root[theme="g80"] {
@include carbon--theme($carbon--theme--g80, true) {
@include emit-component-tokens($tag-colors);
@include emit-component-tokens($notification-colors);
}
}
// Set the <html> theme attribute to "g90" to use the Gray 90 theme
// <html theme="g90">
:root[theme="g90"] {
@ -75,6 +84,8 @@
@import "carbon-components/scss/globals/scss/_css--body";
@import "carbon-components/scss/globals/grid/grid";
@import "carbon-components/src/components/treeview/treeview";
// Import all component styles
@import "carbon-components/scss/globals/scss/styles";
</style>

1991
docs/src/COMPONENT_API.json
View file

File diff suppressed because it is too large Load diff

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

@ -4,10 +4,12 @@
slots: [],
events: [],
rest_props: undefined,
typedefs: [],
};
import {
Link,
OutboundLink,
StructuredList,
StructuredListHead,
StructuredListRow,
@ -17,6 +19,7 @@
UnorderedList,
ListItem,
Tag,
CodeSnippet,
} from "carbon-components-svelte";
import InlineSnippet from "./InlineSnippet.svelte";
import Launch16 from "carbon-icons-svelte/lib/Launch16";
@ -30,7 +33,7 @@
Date: "JavaScript Date",
};
$: source = `https://github.com/IBM/carbon-components-svelte/tree/master/${component.filePath}`;
$: source = `https://github.com/carbon-design-system/carbon-components-svelte/tree/master/${component.filePath}`;
$: forwarded_events = component.events.filter(
(event) => event.type === "forwarded"
);
@ -40,20 +43,17 @@
</script>
<p style="margin-bottom: var(--cds-layout-02)">
Component source code:
<Link inline size="lg" href="{source}" target="_blank">
Source code:
<OutboundLink size="lg" inline href="{source}">
{component.filePath}
<Launch16 />
</Link>
</OutboundLink>
</p>
<h3 id="props">Props</h3>
{#if component.props.length > 0}
<div class="overflow">
<StructuredList
style="margin-left: calc(-1 * var(--cds-spacing-05)); margin-right: calc(-1 * var(--cds-spacing-05))"
>
<StructuredList flush condensed>
<StructuredListHead>
<StructuredListRow head>
<StructuredListCell head>Prop name</StructuredListCell>
@ -71,17 +71,19 @@
<InlineSnippet code="{prop.name}" />
{#if prop.reactive}
<div
style="white-space: nowrap; margin-top: var(--cds-spacing-03)"
style="white-space: nowrap; margin-top: var(--cds-spacing-03); margin-bottom: var(--cds-spacing-03)"
>
<Tag type="cyan">Reactive</Tag>
<Tag style="margin-left: 0" size="sm" type="cyan">
Reactive
</Tag>
</div>
{/if}
</StructuredListCell>
<StructuredListCell>
{#each prop.type.split(" | ") as type, i (type)}
{#each (prop.type || "").split(" | ") as type, i (type)}
<div
class="cell"
style="z-index: {prop.type.split(' | ').length - i}"
style="z-index: {(prop.type || '').split(' | ').length - i}"
>
{#if type.startsWith("typeof")}
<TooltipDefinition
@ -92,14 +94,12 @@
Carbon Svelte icon
</TooltipDefinition>
{:else if type.startsWith("HTML")}
<Link
<OutboundLink
href="{mdn_api}{type}"
target="_blank"
style="white-space: nowrap"
>
{type}
<Launch16 />
</Link>
</OutboundLink>
{:else if type in typeMap}
<code>{typeMap[type]}</code>
{:else if type.startsWith("(")}
@ -133,6 +133,20 @@
{:else}
<p class="my-layout-01-03">No props.</p>
{/if}
<h3 id="typedefs">Typedefs</h3>
{#if component.typedefs.length > 0}
<CodeSnippet
style="margin-top: var(--cds-spacing-08)"
class="my-layout-01-03"
type="multi"
code="{component.typedefs.map((t) => t.ts).join(';\n\n')};"
/>
{:else}
<p class="my-layout-01-03">No typedefs.</p>
{/if}
<h3 id="slots">Slots</h3>
{#if component.slots.length > 0}
<UnorderedList class="my-layout-01-03">
@ -207,4 +221,8 @@
code {
word-break: break-word;
}
:global(.cell .bx--snippet--inline code, .bx--snippet--single pre) {
white-space: pre-wrap !important;
}
</style>

21
docs/src/components/Footer.svelte
View file

@ -1,28 +1,11 @@
<script>
import { Content, Grid, Row, Column, Link } from "carbon-components-svelte";
import { Grid, Row, Column } from "carbon-components-svelte";
</script>
<footer class="bx--content">
<Grid>
<Row>
<Column>
<Link
href="https://www.vercel.com?utm_source=carbon-components-svelte&utm_campaign=oss"
target="_blank"
>
<img
height="36px"
src="/powered-by-vercel.svg"
alt="Deploys by Vercel"
/>
</Link>
</Column>
<Column />
</Row>
</Grid>
</footer>
<style>
footer {
background: var(--cds-ui-01);
}
</style>

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

@ -1,15 +1,16 @@
<script>
export let code = "";
import copy from "clipboard-copy";
import { CodeSnippet } from "carbon-components-svelte";
</script>
<div>
<CodeSnippet code="{code}" type="inline" />
<CodeSnippet code="{code}" type="inline" copy="{(text) => copy(text)}" />
</div>
<style>
div {
margin-bottom: var(--cds-spacing-04);
margin-bottom: var(--cds-spacing-03);
}
</style>

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

@ -4,6 +4,7 @@
export let src = "";
export let framed = false;
import copy from "clipboard-copy";
import { CodeSnippet, Button } from "carbon-components-svelte";
import Launch16 from "carbon-icons-svelte/lib/Launch16";
import { url } from "@sveltech/routify";
@ -40,7 +41,7 @@
{/if}
</div>
<div class="code-override">
<CodeSnippet type="multi" code="{codeRaw}">
<CodeSnippet type="multi" code="{codeRaw}" copy="{(text) => copy(text)}">
{@html code}
</CodeSnippet>
</div>

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

@ -1,7 +1,7 @@
<script>
export let persist = false;
export let persistKey = "carbon-theme";
export const themes = ["white", "g10", "g90", "g100"];
export const themes = ["white", "g10", "g80", "g90", "g100"];
import { onMount, afterUpdate } from "svelte";
import { theme } from "../store";

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

@ -37,13 +37,13 @@
onMount(() => {
const currentTheme = window.location.search.split("?theme=")[1];
if (["white", "g10", "g90", "g100"].includes(currentTheme)) {
if (["white", "g10", "g80", "g90", "g100"].includes(currentTheme)) {
theme.set(currentTheme);
}
});
// TODO: [refactor] read from package.json value
$: sourceCode = `https://github.com/IBM/carbon-components-svelte/tree/master/src/${
$: sourceCode = `https://github.com/carbon-design-system/carbon-components-svelte/tree/master/src/${
source || `${$page.title}/${$page.title}.svelte`
}`;
</script>
@ -62,6 +62,7 @@
>
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
@ -107,7 +108,11 @@
<h2 id="component-api">Component API</h2>
<p>
API documentation is
<Link inline href="https://github.com/IBM/sveld" target="_blank">
<Link
inline
href="https://github.com/carbon-design-system/sveld"
target="_blank"
>
auto-generated by sveld.
</Link>
</p>
@ -157,6 +162,7 @@
.prose > p > .bx--link {
font-size: inherit;
text-decoration: underline;
}
.prose .toc {
@ -216,4 +222,8 @@
[data-outline] {
position: relative;
}
[data-outline] ~ [data-outline] {
margin-top: var(--cds-spacing-08);
}
</style>

17
docs/src/pages/_layout.svelte
View file

@ -20,7 +20,7 @@
import Footer from "../components/Footer.svelte";
const deprecated = ["ToggleSmall", "Icon"];
const new_components = ["Popover", "ContextMenu"];
const new_components = [];
let isOpen = false;
let isSideNavOpen = true;
@ -60,17 +60,19 @@
<HeaderUtilities>
<HeaderActionLink
icon="{LogoGithub20}"
href="https://github.com/IBM/carbon-components-svelte"
href="https://github.com/carbon-design-system/carbon-components-svelte"
target="_blank"
/>
<HeaderAction transition="{false}" bind:isOpen>
<HeaderPanelLinks>
<HeaderPanelDivider>Carbon Svelte portfolio</HeaderPanelDivider>
<HeaderPanelLink href="https://github.com/IBM/carbon-icons-svelte">
<HeaderPanelLink
href="https://github.com/carbon-design-system/carbon-icons-svelte"
>
Carbon Icons Svelte
</HeaderPanelLink>
<HeaderPanelLink
href="https://github.com/IBM/carbon-pictograms-svelte"
href="https://github.com/carbon-design-system/carbon-pictograms-svelte"
>
Carbon Pictograms Svelte
</HeaderPanelLink>
@ -79,6 +81,11 @@
>
Carbon Charts Svelte
</HeaderPanelLink>
<HeaderPanelLink
href="https://github.com/carbon-design-system/carbon-preprocess-svelte"
>
Carbon Preprocess Svelte
</HeaderPanelLink>
<HeaderPanelDivider>Resources</HeaderPanelDivider>
<HeaderPanelLink href="https://www.carbondesignsystem.com/">
Carbon Design System
@ -264,6 +271,6 @@
}
.bx--side-nav__submenu[aria-expanded="true"] + .bx--side-nav__menu {
max-height: 124rem;
max-height: 144rem;
}
</style>

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"`, `"9x16"` and `"1x2"`.
Supported aspect ratios include `"2x1"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"3x2"`, `"9x16"` and `"1x2"`.
### Default (2x1)
@ -37,6 +37,12 @@ Supported aspect ratios include `"2x1"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"
3x4
</AspectRatio>
### Ratio 3x2
<AspectRatio ratio="3x2">
3x2
</AspectRatio>
### Ratio 9x16
<AspectRatio ratio="9x16">

27
docs/src/pages/components/Breakpoint.svx Normal file
View file

@ -0,0 +1,27 @@
<script>
import {
Breakpoint, UnorderedList, ListItem
} from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
The [Carbon Design System grid implementation](https://carbondesignsystem.com/guidelines/2x-grid/implementation#responsive-options) defines five responsive breakpoints:
<UnorderedList svx-ignore style="margin-bottom: var(--cds-spacing-08)">
<ListItem><strong>Small</strong>: less than 672px</ListItem>
<ListItem><strong>Medium</strong>: 672 - 1056px</ListItem>
<ListItem><strong>Large</strong>: 1056 - 1312px</ListItem>
<ListItem><strong>X-Large</strong>: 1312 - 1584px</ListItem>
<ListItem><strong>Max</strong>: greater than 1584px</ListItem>
</UnorderedList>
This utility component uses the [Window.matchMedia API](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) to declaratively determine the current Carbon breakpoint size.
### Default
Bind to the `size` prop to determine the current breakpoint size. Possible values include: `"sm" | "md" | "lg" | "xlg" | "max"`.
The `"on:match"` event will fire only when a breakpoint change event occurs (e.g., the browser width is resized).
<FileSource src="/framed/Breakpoint/Breakpoint" />

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

@ -1,10 +1,11 @@
<script>
import { Button } from "carbon-components-svelte";
import { InlineNotification, Button } from "carbon-components-svelte";
import Add16 from "carbon-icons-svelte/lib/Add16";
import TrashCan16 from "carbon-icons-svelte/lib/TrashCan16";
import TextBold16 from "carbon-icons-svelte/lib/TextBold16";
import TextItalic16 from "carbon-icons-svelte/lib/TextItalic16";
import TextUnderline16 from "carbon-icons-svelte/lib/TextUnderline16";
import Login16 from "carbon-icons-svelte/lib/Login16";
import Preview from "../../components/Preview.svelte";
let index = 1;
@ -36,7 +37,11 @@
### Danger tertiary, icon-only button
**Note:** you must provide an `iconDescription` for the button tooltip.
<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
<div class="body-short-01">
You must provide an `iconDescription` for the button tooltip.
</div>
</InlineNotification>
<Button kind="danger-tertiary"iconDescription="Delete" icon={TrashCan16} />
@ -50,10 +55,18 @@
### Icon-only button
**Note:** you must provide an `iconDescription` for the button tooltip.
<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
<div class="body-short-01">
You must provide an `iconDescription` for the button tooltip.
</div>
</InlineNotification>
<Button iconDescription="Tooltip text" icon={Add16} />
### Icon-only, link button
<Button iconDescription="Login" icon={Login16} href="#" />
### Icon-only button (custom tooltip position)
The tooltip position and alignment can be controlled by `tooltipPosition` and `tooltipAlignment`.
@ -78,7 +91,7 @@ If an `href` value is specified, the component will render an [anchor element](h
<p {...props}>Custom element</p>
</Button>
### Field button
### Field size
<Button size="field">Primary</Button>
<Button size="field" kind="secondary">Secondary</Button>
@ -86,7 +99,7 @@ If an `href` value is specified, the component will render an [anchor element](h
<Button size="field" kind="ghost">Ghost</Button>
<Button size="field" kind="danger">Danger</Button>
### Small button
### Small size
<Button size="small">Primary</Button>
<Button size="small" kind="secondary">Secondary</Button>
@ -94,12 +107,58 @@ If an `href` value is specified, the component will render an [anchor element](h
<Button size="small" kind="ghost">Ghost</Button>
<Button size="small" kind="danger">Danger</Button>
### Large size
<Button size="lg">Primary</Button>
<Button size="lg" kind="secondary">Secondary</Button>
<Button size="lg" kind="tertiary">Tertiary</Button>
<Button size="lg" kind="ghost">Ghost</Button>
<Button size="lg" kind="danger">Danger</Button>
### Extra-large size
<Button size="xl">Primary</Button>
<Button size="xl" kind="secondary">Secondary</Button>
<Button size="xl" kind="tertiary">Tertiary</Button>
<Button size="xl" kind="ghost">Ghost</Button>
<Button size="xl" kind="danger">Danger</Button>
### Disabled button
<Button disabled>Disabled button</Button>
### Expressive styles
Set `expressive` to `true` to use Carbon's expressive typesetting.
<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
<div class="body-short-01">
Expressive styles only work with the default, `"lg"`, and `"xl"` button sizes.
</div>
</InlineNotification>
<Button expressive size="xl">Primary</Button>
<Button expressive size="xl" kind="secondary">Secondary</Button>
<Button expressive size="xl" kind="tertiary">Tertiary</Button>
<Button expressive size="xl" kind="ghost">Ghost</Button>
<Button expressive size="xl" kind="danger">Danger</Button>
<br /><br />
<Button expressive size="lg">Primary</Button>
<Button expressive size="lg" kind="secondary">Secondary</Button>
<Button expressive size="lg" kind="tertiary">Tertiary</Button>
<Button expressive size="lg" kind="ghost">Ghost</Button>
<Button expressive size="lg" kind="danger">Danger</Button>
<br /><br />
<Button expressive>Primary</Button>
<Button expressive kind="secondary">Secondary</Button>
<Button expressive kind="tertiary">Tertiary</Button>
<Button expressive kind="ghost">Ghost</Button>
<Button expressive kind="danger">Danger</Button>
### Skeleton
<Button size="xl" skeleton />
<Button size="lg" skeleton />
<Button skeleton />
<Button skeleton size="field" />
<Button skeleton size="small" />

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

@ -14,3 +14,7 @@ source: Tile/ClickableTile.svelte
### Light variant
<ClickableTile light href="https://www.carbondesignsystem.com/">Carbon Design System</ClickableTile>
### Disabled state
<ClickableTile disabled href="https://www.carbondesignsystem.com/">Carbon Design System</ClickableTile>

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

@ -1,5 +1,5 @@
<script>
import { CodeSnippet, InlineNotification, Link } from "carbon-components-svelte";
import { CodeSnippet } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
let code = `// helpers.js
@ -27,14 +27,31 @@ let comment = `
`
</script>
<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
<div class="body-short-01">As of version 0.32, the CodeSnippet will copy the provided `code` text when clicking the copy button.</div>
</InlineNotification>
This component uses the native, asynchronous [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) to copy text.
Please note that the `clipboard.writeText` API is not supported in [IE 11 nor Safari iOS version 13.3 or lower](https://caniuse.com/mdn-api_clipboard_writetext).
You can override the default copy functionality with your own implementation. See [Overriding copy functionality](#overriding-copy-functionality).
### Default (single-line)
<CodeSnippet code="yarn add -D carbon-components-svelte" />
### Overriding copy functionality
To override the default copy behavior, pass a custom function to the `copy` prop.
In this example, we use the open source module [clipboard-copy](https://github.com/feross/clipboard-copy) to copy the text instead of the default Clipboard API.
<FileSource src="/framed/CodeSnippet/CodeSnippetOverride" />
### Preventing copy functionality
To prevent text from being copied entirely, pass a no-op function to the `copy` prop.
<CodeSnippet code="yarn add -D carbon-components-svelte" copy={() => {}} />
### Inline
<CodeSnippet type="inline" code="rm -rf node_modules/" />

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

@ -1,6 +1,9 @@
<script>
import { ComboBox } from "carbon-components-svelte";
import { Button } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
let comboboxComponent
</script>
### Default
@ -22,6 +25,17 @@ items={[
{id: "2", text: "Fax"}
]} />
### Clear selection
<ComboBox titleText="Contact" placeholder="Select contact method"
bind:this={comboboxComponent}
items={[
{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}
]} />
<br>
<Button on:click={comboboxComponent.clear}>Clear</Button>
### Multiple combo boxes
<FileSource src="/framed/ComboBox/MultipleComboBox" />

6
docs/src/pages/components/ComposedModal.svx
View file

@ -9,3 +9,9 @@ components: ["ComposedModal", "ModalHeader", "ModalBody", "ModalFooter"]
### Composed modal
<FileSource src="/framed/Modal/ComposedModal" />
### Multiple secondary buttons
Use the `secondaryButtons` prop in `ModalFooter` to render two secondary buttons for a "3-button modal". The prop is a 2-tuple type that supersedes `secondaryButtonText`.
<FileSource src="/framed/Modal/3ButtonComposedModal" />

24
docs/src/pages/components/CopyButton.svx
View file

@ -1,11 +1,13 @@
<script>
import { CopyButton, InlineNotification, Link } from "carbon-components-svelte";
import { CopyButton } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
<div class="body-short-01">As of version 0.32, this component will copy the provided `code` text when clicking the button.</div>
</InlineNotification>
This component uses the native, asynchronous [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) to copy text.
Please note that the `clipboard.writeText` API is not supported in [IE 11 nor Safari iOS version 13.3 or lower](https://caniuse.com/mdn-api_clipboard_writetext).
You can override the default copy functionality with your own implementation. See [Overriding copy functionality](#overriding-copy-functionality).
### Default
@ -14,3 +16,17 @@
### Custom feedback text
<CopyButton text="Carbon svelte" feedback="Copied to clipboard" />
### Overriding copy functionality
To override the default copy behavior, pass a custom function to the `copy` prop.
In this example, we use the open source module [clipboard-copy](https://github.com/feross/clipboard-copy) to copy the text instead of the default Clipboard API.
<FileSource src="/framed/CopyButton/CopyButtonOverride" />
### Preventing copy functionality
To prevent text from being copied entirely, pass a no-op function to the `copy` prop.
<CopyButton text="This text should not be copied" copy={() => {}} />

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

@ -3,14 +3,22 @@ components: ["DataTable", "Toolbar", "ToolbarContent", "ToolbarSearch", "Toolbar
---
<script>
import { DataTable, DataTableSkeleton, Toolbar, ToolbarContent, ToolbarSearch, ToolbarMenu, ToolbarMenuItem, Button, Link } from "carbon-components-svelte";
import { InlineNotification, DataTable, DataTableSkeleton, Toolbar, ToolbarContent, ToolbarSearch, ToolbarMenu, ToolbarMenuItem, Button, Link } from "carbon-components-svelte";
import Launch16 from "carbon-icons-svelte/lib/Launch16";
import Preview from "../../components/Preview.svelte";
</script>
### Default
`DataTable` is keyed for both rendering and sorting purposes.
The `DataTable` is keyed for both rendering and sorting. You must define a "key" value per object in the `headers` property and an "id" value in `rows`.
<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
<div class="body-short-01">Every <code>headers</code> object must have a unique "key" property.</div>
</InlineNotification>
<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
<div class="body-short-01">Every <code>rows</code> object must have a unique "id" property.</div>
</InlineNotification>
### Default
<DataTable
headers="{[
@ -132,7 +140,7 @@ The slot name for the table header cells is `"cell-header"`.
</span>
<span slot="cell" let:row let:cell>
{#if cell.key === 'rule' && cell.value === 'Round robin'}
<Link inline href="https://en.wikipedia.org/wiki/Round-robin_DNS" target="_blank">{cell.value} <Launch16 /></Link>
<Link icon={Launch16} href="https://en.wikipedia.org/wiki/Round-robin_DNS" target="_blank">{cell.value}</Link>
{:else}
{cell.value}
{/if}
@ -194,6 +202,126 @@ The slot name for the table header cells is `"cell-header"`.
]}"
/>
### Slottable title, description
The `title` and `description` props are slottable.
<DataTable
headers="{[
{ key: "name", value: "Name" },
{ key: "protocol", value: "Protocol" },
{ key: "port", value: "Port" },
{ key: "rule", value: "Rule" }
]}"
rows="{[
{
id: "a",
name: "Load Balancer 3",
protocol: "HTTP",
port: 3000,
rule: "Round robin"
},
{
id: "b",
name: "Load Balancer 1",
protocol: "HTTP",
port: 443,
rule: "Round robin"
},
{
id: "c",
name: "Load Balancer 2",
protocol: "HTTP",
port: 80,
rule: "DNS delegation"
},
{
id: "d",
name: "Load Balancer 6",
protocol: "HTTP",
port: 3000,
rule: "Round robin"
},
{
id: "e",
name: "Load Balancer 4",
protocol: "HTTP",
port: 443,
rule: "Round robin"
},
{
id: "f",
name: "Load Balancer 5",
protocol: "HTTP",
port: 80,
rule: "DNS delegation"
},
]}"
>
<strong slot="title">Load balancers</strong>
<span slot="description" style="font-size: 1rem">
Your organization's active load balancers.
</span>
</DataTable>
### Static width
Set `useStaticWidth` to `true` to render the table with a width of "auto" instead of "100%".
<DataTable useStaticWidth
title="Load balancers" description="Your organization's active load balancers."
headers="{[
{ key: "name", value: "Name" },
{ key: "protocol", value: "Protocol" },
{ key: "port", value: "Port" },
{ key: "rule", value: "Rule" }
]}"
rows="{[
{
id: "a",
name: "Load Balancer 3",
protocol: "HTTP",
port: 3000,
rule: "Round robin"
},
{
id: "b",
name: "Load Balancer 1",
protocol: "HTTP",
port: 443,
rule: "Round robin"
},
{
id: "c",
name: "Load Balancer 2",
protocol: "HTTP",
port: 80,
rule: "DNS delegation"
},
{
id: "d",
name: "Load Balancer 6",
protocol: "HTTP",
port: 3000,
rule: "Round robin"
},
{
id: "e",
name: "Load Balancer 4",
protocol: "HTTP",
port: 443,
rule: "Round robin"
},
{
id: "f",
name: "Load Balancer 5",
protocol: "HTTP",
port: 80,
rule: "DNS delegation"
},
]}"
/>
### With toolbar
<DataTable title="Load balancers" description="Your organization's active load balancers."
@ -438,6 +566,61 @@ The slot name for the table header cells is `"cell-header"`.
]}"
/>
### Medium rows
<DataTable size="medium"
headers="{[
{ key: "name", value: "Name" },
{ key: "protocol", value: "Protocol" },
{ key: "port", value: "Port" },
{ key: "rule", value: "Rule" }
]}"
rows="{[
{
id: "a",
name: "Load Balancer 3",
protocol: "HTTP",
port: 3000,
rule: "Round robin"
},
{
id: "b",
name: "Load Balancer 1",
protocol: "HTTP",
port: 443,
rule: "Round robin"
},
{
id: "c",
name: "Load Balancer 2",
protocol: "HTTP",
port: 80,
rule: "DNS delegation"
},
{
id: "d",
name: "Load Balancer 6",
protocol: "HTTP",
port: 3000,
rule: "Round robin"
},
{
id: "e",
name: "Load Balancer 4",
protocol: "HTTP",
port: 443,
rule: "Round robin"
},
{
id: "f",
name: "Load Balancer 5",
protocol: "HTTP",
port: 80,
rule: "DNS delegation"
},
]}"
/>
### Short rows
<DataTable size="short"

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

@ -13,6 +13,12 @@ components: ["DatePicker", "DatePickerInput", "DatePickerSkeleton"]
<DatePickerInput labelText="Date of birth" placeholder="mm/dd/yyyy" />
</DatePicker>
### With helper text
<DatePicker>
<DatePickerInput labelText="Date of birth" helperText="Example: 01/12/1990" placeholder="mm/dd/yyyy" />
</DatePicker>
### Hidden label
<DatePicker>
@ -57,9 +63,11 @@ components: ["DatePicker", "DatePickerInput", "DatePickerSkeleton"]
### Single
<DatePicker datePickerType="single">
<DatePickerInput labelText="Schedule a meeting" placeholder="mm/dd/yyyy" />
</DatePicker>
<FileSource src="/framed/DatePicker/DatePickerSingle" />
### Range
<FileSource src="/framed/DatePicker/DatePickerRange" />
### Skeleton

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

@ -47,7 +47,7 @@ Set `direction` to `"top"` for the dropdown menu to appear above the input.
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}" />
### Inline type
### Inline variant
<Dropdown type="inline" titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},

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

@ -27,6 +27,14 @@ components: ["FileUploaderButton", "FileUploader", "FileUploaderDropContainer",
<FileUploaderItem invalid name="README.md" status="edit" />
### Item sizes
The default `FileUploaderItem` size is "default".
<FileUploaderItem size="default" name="README.md" status="uploading" />
<FileUploaderItem size="field" name="README.md" status="uploading" />
<FileUploaderItem size="small" name="README.md" status="uploading" />
### Drop container
<FileUploaderDropContainer labelText="Drag and drop files here or click to upload" multiple />

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

@ -9,7 +9,7 @@
<InlineNotification svx-ignore title="Deprecation warning" kind="warning" hideCloseButton>
<div>
This component will be removed in the next major release. Use icons from <OutboundLink href="https://github.com/IBM/carbon-icons-svelte">carbon-icons-svelte</OutboundLink> instead.
This component will be removed in the next major release. Use icons from <OutboundLink href="https://github.com/carbon-design-system/carbon-icons-svelte">carbon-icons-svelte</OutboundLink> instead.
</div>
</InlineNotification>

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

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

@ -4,6 +4,7 @@ components: ["Link", "OutboundLink"]
<script>
import { Link, OutboundLink } from "carbon-components-svelte";
import Carbon16 from "carbon-icons-svelte/lib/Carbon16"
import Preview from "../../components/Preview.svelte";
</script>
@ -32,6 +33,15 @@ An alternative to manually setting `target` to `"_blank"` is to use the `Outboun
<Link inline href="https://www.carbondesignsystem.com/">Carbon Design System</Link>.
</div>
### Link with icon
Note that `inline` must be `false` when rendering a link with an icon.
<div>
Visit the
<Link href="https://www.carbondesignsystem.com/" icon={Carbon16}>Carbon Design System</Link>.
</div>
### Large size
<Link size="lg" href="https://www.carbondesignsystem.com/">Carbon Design System</Link>

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

@ -6,4 +6,18 @@ This utility component wraps the [Window.localStorage API](https://developer.moz
### Reactive example
In the example below, toggle the switch and reload the page. The updated theme should be persisted locally.
<FileSource src="/framed/LocalStorage/LocalStorage" />
### Clear item, clear all
Use the `bind:this` directive to access the `clearItem` and `clearAll` methods.
Invoking `clearItem` will remove the persisted key value from the browser's local storage.
Invoking `clearAll` will remove all key values.
In the following example, toggle the switch and reload the page. Then, click the "Clear storage" button. Refresh the page; the theme should be reset to the untoggled state.
<FileSource src="/framed/LocalStorage/LocalStorageClear" />

6
docs/src/pages/components/Modal.svx
View file

@ -14,6 +14,12 @@
<FileSource src="/framed/Modal/PassiveModal" />
### Multiple secondary buttons
Use the `secondaryButtons` prop to render two secondary buttons for a "3-button modal". The prop is a 2-tuple type that supersedes `secondaryButtonText`.
<FileSource src="/framed/Modal/3ButtonModal" />
### Extra-small size
<FileSource src="/framed/Modal/ModalExtraSmall" />

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

@ -79,7 +79,7 @@ Set `direction` to `"top"` for the dropdown menu to appear above the input.
{id: "2", text: "Fax"}]}"
/>
### Inline type
### Inline variant
<MultiSelect type="inline" titleText="Contact" label="Select contact methods..."
items="{[{id: "0", text: "Slack"},

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

@ -23,10 +23,18 @@ components: ["NumberInput", "NumberInputSkeleton"]
<NumberInput hideLabel label="Clusters" />
### Hidden steppers
<NumberInput hideSteppers label="Clusters" />
### Light variant
<NumberInput light label="Clusters" />
### Read-only variant
<NumberInput readonly label="Clusters" />
### Extra-large size
<NumberInput size="xl" label="Clusters" />

18
docs/src/pages/components/OrderedList.svx
View file

@ -3,10 +3,16 @@ components: ["OrderedList", "ListItem"]
---
<script>
import { OrderedList, ListItem, Link } from "carbon-components-svelte";
import { InlineNotification, OrderedList, ListItem, Link } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
<InlineNotification svx-ignore title="Tip:" kind="info" hideCloseButton>
<div class="body-short-01">
Consider using the <Link href="/components/RecursiveList#ordered">RecursiveList</Link> component for rendering tree structured data.
</div>
</InlineNotification>
### Default
<OrderedList>
@ -70,3 +76,13 @@ Use the `native` attribute to enable default browser list styles. This is useful
<ListItem>Ordered list level 1</ListItem>
<ListItem>Ordered list level 1</ListItem>
</OrderedList>
### Expressive styles
Set `expressive` to `true` to use Carbon's expressive typesetting.
<OrderedList expressive>
<ListItem><Link size="lg" href="#">Ordered list item</Link></ListItem>
<ListItem>Ordered list item</ListItem>
<ListItem>Ordered list item</ListItem>
</OrderedList>

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

@ -27,6 +27,10 @@ Set prop `type` to `"text"` to toggle password visibility.
<PasswordInput light labelText="Password" placeholder="Enter password..." />
### Inline
<PasswordInput inline labelText="Password" placeholder="Enter password..." />
### Extra-large size
<PasswordInput size="xl" labelText="Password" placeholder="Enter password..." />
@ -39,6 +43,10 @@ Set prop `type` to `"text"` to toggle password visibility.
<PasswordInput invalid invalidText="Incorrect user name or password." labelText="Password" placeholder="Enter password..." />
### Warning state
<PasswordInput warn warnText="Password has been reset." labelText="Password" placeholder="Enter password..." />
### Disabled state
<PasswordInput disabled labelText="Password" placeholder="Enter password..." />

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

@ -36,6 +36,79 @@ Set `closeOnOutsideClick` to set `open` to `false` when clicking outside of the
</Popover>
</div>
### Popover alignment
Customize the popover alignment using the `align` prop. Valid values include: `"top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "left" | "left-bottom" | "left-top" | "right" | "right-bottom" | "right-top"`.
The default `align` value is `"top"`.
<div data-outline>
Parent
<Popover open align="top-left">
<div style="padding: var(--cds-spacing-05)">top-left</div>
</Popover>
</div>
<div data-outline>
Parent
<Popover open align="top-right">
<div style="padding: var(--cds-spacing-05)">top-right</div>
</Popover>
</div>
<div data-outline>
Parent
<Popover open align="bottom">
<div style="padding: var(--cds-spacing-05)">bottom</div>
</Popover>
</div>
<div data-outline>
Parent
<Popover open align="bottom-left">
<div style="padding: var(--cds-spacing-05)">bottom-left</div>
</Popover>
</div>
<div data-outline>
Parent
<Popover open align="bottom-right">
<div style="padding: var(--cds-spacing-05)">bottom-right</div>
</Popover>
</div>
<div data-outline>
Parent
<Popover open align="left">
<div style="padding: var(--cds-spacing-05)">left</div>
</Popover>
</div>
<div data-outline>
Parent
<Popover open align="left-bottom">
<div style="padding: var(--cds-spacing-05)">left-bottom</div>
</Popover>
</div>
<div data-outline>
Parent
<Popover open align="left-right">
<div style="padding: var(--cds-spacing-05)">left-right</div>
</Popover>
</div>
<div data-outline>
Parent
<Popover open align="right">
<div style="padding: var(--cds-spacing-05)">right</div>
</Popover>
</div>
<div data-outline>
Parent
<Popover open align="right-bottom">
<div style="padding: var(--cds-spacing-05)">right-bottom</div>
</Popover>
</div>
<div data-outline>
Parent
<Popover open align="right-top">
<div style="padding: var(--cds-spacing-05)">right-top</div>
</Popover>
</div>
### With caret
<div data-outline>

30
docs/src/pages/components/ProgressBar.svx Normal file
View file

@ -0,0 +1,30 @@
<script>
import { ProgressBar } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
### Default
Without a specified `value` prop, the progress bar is indeterminate.
<ProgressBar helperText="Loading..." />
### Percentage
<ProgressBar value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
### Custom max value
The default `max` value is `100`.
<ProgressBar value={40} max={200} labelText="Upload status" helperText="40 MB of 200 MB" />
### Hidden label
<ProgressBar hideLabel value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
### UX example
This example shows how to animate the progress bar from 0 to 100% with start and end states.
<FileSource src="/framed/ProgressBar/ProgressBarUx" />

34
docs/src/pages/components/RecursiveList.svx Normal file
View file

@ -0,0 +1,34 @@
<script>
import { InlineNotification, RecursiveList } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
This component uses the [svelte:self API](https://svelte.dev/docs#svelte_self) to render the [UnorderedList](/components/UnorderedList) and [OrderedList](/components/OrderedList) components with tree structured data.
A child node can render text, a link, HTML content, and other children.
<InlineNotification svx-ignore title="Warning:" kind="warning" hideCloseButton>
<div class="body-short-01">
HTML content provided via the <code>html</code> prop is not sanitized.
</div>
</InlineNotification>
### Unordered
The `children` prop accepts an array of child nodes.
By default, the list type is unordered.
<FileSource src="/framed/RecursiveList/RecursiveList" />
### Ordered
Set `type` to `"ordered"` to use the ordered list variant.
<FileSource src="/framed/RecursiveList/RecursiveListOrdered" />
### Ordered (native styles)
Set `type` to `"ordered-native"` to use the native styles for an ordered list.
<FileSource src="/framed/RecursiveList/RecursiveListOrderedNative" />

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

@ -1,4 +1,5 @@
<script>
import Query16 from "carbon-icons-svelte/lib/Query16";
import { Search } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
@ -23,6 +24,10 @@ The "clear" event is dispatched when clicking the "X" button in the search input
<Search value="Cloud functions" on:clear={() => console.log('clear')}/>
### Expandable variant
<Search expandable on:expand on:collapse />
### Light variant
<Search light />
@ -35,10 +40,14 @@ The "clear" event is dispatched when clicking the "X" button in the search input
<Search size="sm" />
### Disabled
### Disabled state
<Search disabled />
### Custom search icon
<Search icon={Query16} />
### Skeleton
<Search skeleton />

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

@ -12,15 +12,17 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
<Select labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
### Helper text
<Select helperText="Carbon offers 4 themes (2 light, 2 dark)" labelText="Carbon theme" selected="g10" >
<Select helperText="Carbon offers 4 themes (2 light, 3 dark)" labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
@ -30,6 +32,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
<Select hideLabel labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
@ -43,6 +46,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
<SelectItem value="g10" text="Gray 10" />
</SelectItemGroup>
<SelectItemGroup label="Dark theme">
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</SelectItemGroup>
@ -53,15 +57,17 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
<Select light labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
### Inline type
### Inline variant
<Select inline labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
@ -71,6 +77,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
<Select size="xl" labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
@ -80,6 +87,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
<Select size="sm" labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
@ -89,6 +97,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
<Select invalid invalidText="Theme must be a dark variant" labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
@ -98,6 +107,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
<Select warn warnText="The selected theme will not be persisted" labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
@ -107,6 +117,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
<Select disabled labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>

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

@ -52,6 +52,94 @@ components: ["StructuredList", "StructuredListSkeleton", "StructuredListBody", "
</StructuredListBody>
</StructuredList>
### Condensed variant
<StructuredList condensed>
<StructuredListHead>
<StructuredListRow head>
<StructuredListCell head>Column A</StructuredListCell>
<StructuredListCell head>Column B</StructuredListCell>
<StructuredListCell head>Column C</StructuredListCell>
</StructuredListRow>
</StructuredListHead>
<StructuredListBody>
<StructuredListRow>
<StructuredListCell noWrap>Row 1</StructuredListCell>
<StructuredListCell>Row 1</StructuredListCell>
<StructuredListCell>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
vulputate nisl a porttitor interdum.
</StructuredListCell>
</StructuredListRow>
<StructuredListRow>
<StructuredListCell noWrap>Row 2</StructuredListCell>
<StructuredListCell>Row 2</StructuredListCell>
<StructuredListCell>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
vulputate nisl a porttitor interdum.
</StructuredListCell>
</StructuredListRow>
<StructuredListRow>
<StructuredListCell noWrap>Row 3</StructuredListCell>
<StructuredListCell>Row 3</StructuredListCell>
<StructuredListCell>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
vulputate nisl a porttitor interdum.
</StructuredListCell>
</StructuredListRow>
</StructuredListBody>
</StructuredList>
### Flush
<StructuredList flush>
<StructuredListHead>
<StructuredListRow head>
<StructuredListCell head>Column A</StructuredListCell>
<StructuredListCell head>Column B</StructuredListCell>
<StructuredListCell head>Column C</StructuredListCell>
</StructuredListRow>
</StructuredListHead>
<StructuredListBody>
<StructuredListRow>
<StructuredListCell noWrap>Row 1</StructuredListCell>
<StructuredListCell>Row 1</StructuredListCell>
<StructuredListCell>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
vulputate nisl a porttitor interdum.
</StructuredListCell>
</StructuredListRow>
<StructuredListRow>
<StructuredListCell noWrap>Row 2</StructuredListCell>
<StructuredListCell>Row 2</StructuredListCell>
<StructuredListCell>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
vulputate nisl a porttitor interdum.
</StructuredListCell>
</StructuredListRow>
<StructuredListRow>
<StructuredListCell noWrap>Row 3</StructuredListCell>
<StructuredListCell>Row 3</StructuredListCell>
<StructuredListCell>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
vulputate nisl a porttitor interdum.
</StructuredListCell>
</StructuredListRow>
</StructuredListBody>
</StructuredList>
### Selectable rows
<StructuredList selection selected="row-1-value">

6
docs/src/pages/components/Tag.svx
View file

@ -49,6 +49,12 @@ Note: rendering a custom icon cannnot be used with the filterable variant.
Set `interactive` to `true` to render a `button` element instead of a `div`.
<Tag interactive>Machine learning</Tag>
### Disabled
The filterable and interactive tag variants have a disabled state.
<Tag filter disabled>Machine learning</Tag>
<Tag interactive disabled>Machine learning</Tag>
### Skeleton

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

@ -23,10 +23,14 @@ components: ["TextInput", "TextInputSkeleton"]
<TextInput light labelText="User name" placeholder="Enter user name..." />
### Inline
### Inline variant
<TextInput inline labelText="User name" placeholder="Enter user name..." />
### Read-only variant
<TextInput readonly labelText="User name" value="IBM" />
### Extra-large size
<TextInput size="xl" labelText="User name" placeholder="Enter user name..." />

46
docs/src/pages/components/Theme.svx Normal file
View file

@ -0,0 +1,46 @@
<script>
import { Theme } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
This utility component dynamically updates the Carbon theme on the client-side using CSS variables.
### Default
<FileSource src="/framed/Theme/Theme" />
### Persist locally
Set `persist` to `true` to persist the theme locally using the [Window.localStorage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage).
<FileSource src="/framed/Theme/ThemePersist" />
### Custom theme
Define keys and values in the `tokens` prop that override default Carbon theme tokens. Refer to the [Carbon website](https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme) for guidance on customizing a theme using token values.
<FileSource src="/framed/Theme/ThemeTokens" />
### Theme toggle
Set `render` to `"toggle"` to render a toggle switch to control the theme.
<FileSource src="/framed/Theme/ThemeToggle" />
### Theme toggle (custom)
Customize the toggle using the `toggle` prop.
<FileSource src="/framed/Theme/ThemeToggleCustom" />
### Theme select
Set `render` to `"select"` to render a select dropdown to control the theme.
<FileSource src="/framed/Theme/ThemeSelect" />
### Theme select (custom)
Customize the select using the `select` prop.
<FileSource src="/framed/Theme/ThemeSelectCustom" />

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

@ -7,22 +7,23 @@
### Default ("bottom" direction, "center" aligned)
<TooltipIcon tooltipText="Carbon is an open source design system by IBM.">
<Carbon24 />
</TooltipIcon>
<TooltipIcon tooltipText="Carbon is an open source design system by IBM." icon={Carbon24} />
### Directions
<TooltipIcon tooltipText="Top start" direction="top" align="start"><Filter20 /></TooltipIcon>
<TooltipIcon tooltipText="Right end" direction="right" align="end"><Filter20 /></TooltipIcon>
<TooltipIcon tooltipText="Bottom start" direction="bottom" align="start"><Filter20 /></TooltipIcon>
<TooltipIcon tooltipText="Left start" direction="left" align="start"><Filter20 /></TooltipIcon>
<TooltipIcon tooltipText="Top start" direction="top" align="start" icon={Filter20} />
<TooltipIcon tooltipText="Right end" direction="right" align="end" icon={Filter20} />
<TooltipIcon tooltipText="Bottom start" direction="bottom" align="start" icon={Filter20} />
<TooltipIcon tooltipText="Left start" direction="left" align="start" icon={Filter20} />
### Custom tooltip text
Use the "text" slot to customize the tooltip text.
<TooltipIcon>
<TooltipIcon icon={Carbon24}>
<span slot="tooltipText" style="color: red">Carbon is an open source design system by IBM.</span>
<Carbon24 />
</TooltipIcon>
### Disabled
<TooltipIcon disabled tooltipText="Carbon is an open source design system by IBM." icon={Carbon24} />

48
docs/src/pages/components/TreeView.svx Normal file
View file

@ -0,0 +1,48 @@
<script>
import { InlineNotification } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
### Default
The `children` prop accepts an array of child nodes. Each node should contain `id` and `text` properties.
Optional properties include `disabled`, `expanded`, `icon`, and `children`.
A parent node contains `children` while a leaf node does not.
<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
<div class="body-short-01">Every node must have a unique id.</div>
</InlineNotification>
<FileSource src="/framed/TreeView/TreeView" />
### Initial active node
The active node can be set through `activeId`.
<FileSource src="/framed/TreeView/TreeViewActive" />
### Compact size
Set `size` to `"compact"` to use the compact variant.
<FileSource src="/framed/TreeView/TreeViewCompact" />
### With icons
To render a node with an icon, define an `icon` property with a Carbon Svelte icon as its value.
<FileSource src="/framed/TreeView/TreeViewIcons" />
### Initial expanded nodes
Expanded nodes can be set using `expandedIds`.
<FileSource src="/framed/TreeView/TreeViewExpanded" />
### Initial multiple selected nodes
Initial multiple selected nodes can be set using `selectedIds`.
<FileSource src="/framed/TreeView/TreeViewMultiselect" />

6
docs/src/pages/components/UIShell.svx
View file

@ -36,6 +36,12 @@ The hamburger menu will automatically be rendered if the `SideNav` component is
<FileSource src="/framed/UIShell/HeaderNav" />
### Header with side navigation (rail)
Set `rail` to `true` on `SideNav` to use the rail variant.
<FileSource src="/framed/UIShell/HeaderNavRail" />
### Header with app switcher
The `HeaderAction` component uses the [transition:slide API](https://svelte.dev/docs#slide); you can customize the transition duration, delay, and easing with the `transition` prop.

18
docs/src/pages/components/UnorderedList.svx
View file

@ -3,10 +3,16 @@ components: ["UnorderedList", "ListItem"]
---
<script>
import { UnorderedList, ListItem, Link } from "carbon-components-svelte";
import { InlineNotification, UnorderedList, ListItem, Link } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
<InlineNotification svx-ignore title="Tip:" kind="info" hideCloseButton>
<div class="body-short-01">
Consider using the <Link href="/components/RecursiveList#unordered">RecursiveList</Link> component for rendering tree structured data.
</div>
</InlineNotification>
### Default
<UnorderedList>
@ -48,3 +54,13 @@ components: ["UnorderedList", "ListItem"]
<ListItem>Unordered list level 1</ListItem>
<ListItem>Unordered list level 1</ListItem>
</UnorderedList>
### Expressive styles
Set `expressive` to `true` to use Carbon's expressive typesetting.
<UnorderedList expressive>
<ListItem><Link size="lg" href="#">Unordered list item</Link></ListItem>
<ListItem>Unordered list item</ListItem>
<ListItem>Unordered list item</ListItem>
</UnorderedList>

28
docs/src/pages/framed/Breakpoint/Breakpoint.svelte Normal file
View file

@ -0,0 +1,28 @@
<script>
import { Breakpoint } from "carbon-components-svelte";
let size;
let events = [];
</script>
<Breakpoint bind:size on:match="{(e) => (events = [...events, e.detail])}" />
<p>Resize the width of your browser.</p>
<h6>Breakpoint size</h6>
<h1>{size}</h1>
<h6>on:match</h6>
<pre>
{JSON.stringify(events,null, 2)}
</pre>
<style>
p,
h1 {
margin-bottom: var(--cds-spacing-08);
}
h6 {
margin-bottom: var(--cds-spacing-03);
}
</style>

9
docs/src/pages/framed/CodeSnippet/CodeSnippetOverride.svelte Normal file
View file

@ -0,0 +1,9 @@
<script>
import copy from "clipboard-copy";
import { CodeSnippet } from "carbon-components-svelte";
</script>
<CodeSnippet
code="yarn add -D carbon-components-svelte"
copy="{(text) => copy(text)}"
/>

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

@ -45,3 +45,19 @@
<ContextMenuDivider />
<ContextMenuOption indented kind="danger" labelText="Delete" />
</ContextMenu>
<div>
<p>Right click anywhere on this page</p>
</div>
<style>
div {
position: absolute;
width: calc(100% - var(--cds-spacing-05));
height: calc(100% - var(--cds-spacing-06));
display: flex;
align-items: center;
justify-content: center;
color: var(--cds-text-02);
}
</style>

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

@ -21,3 +21,19 @@
<ContextMenuDivider />
<ContextMenuOption selectable labelText="Lock layer" />
</ContextMenu>
<div>
<p>Right click anywhere on this page</p>
</div>
<style>
div {
position: absolute;
width: calc(100% - var(--cds-spacing-05));
height: calc(100% - var(--cds-spacing-06));
display: flex;
align-items: center;
justify-content: center;
color: var(--cds-text-02);
}
</style>

6
docs/src/pages/framed/CopyButton/CopyButtonOverride.svelte Normal file
View file

@ -0,0 +1,6 @@
<script>
import copy from "clipboard-copy";
import { CopyButton } from "carbon-components-svelte";
</script>
<CopyButton text="Carbon svelte" copy="{(text) => copy(text)}" />

8
docs/src/pages/framed/DatePicker/DatePickerRange.svelte Normal file
View file

@ -0,0 +1,8 @@
<script>
import { DatePicker, DatePickerInput } from "carbon-components-svelte";
</script>
<DatePicker datePickerType="range" on:change>
<DatePickerInput labelText="Start date" placeholder="mm/dd/yyyy" />
<DatePickerInput labelText="End date" placeholder="mm/dd/yyyy" />
</DatePicker>

7
docs/src/pages/framed/DatePicker/DatePickerSingle.svelte Normal file
View file

@ -0,0 +1,7 @@
<script>
import { DatePicker, DatePickerInput } from "carbon-components-svelte";
</script>
<DatePicker datePickerType="single" on:change>
<DatePickerInput labelText="Meeting date" placeholder="mm/dd/yyyy" />
</DatePicker>

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

@ -1,7 +1,6 @@
<script>
import { LocalStorage, Toggle, Button } from "carbon-components-svelte";
import { LocalStorage, Toggle } from "carbon-components-svelte";
let storage;
let toggled = false;
let events = [];
@ -9,7 +8,6 @@
</script>
<LocalStorage
bind:this="{storage}"
key="dark-mode"
bind:value="{toggled}"
on:save="{() => {

17
docs/src/pages/framed/LocalStorage/LocalStorageClear.svelte Normal file
View file

@ -0,0 +1,17 @@
<script>
import { LocalStorage, Toggle, Button } from "carbon-components-svelte";
let storage;
let toggled = false;
$: document.documentElement.setAttribute("theme", toggled ? "g100" : "white");
</script>
<LocalStorage bind:this="{storage}" bind:value="{toggled}" />
<Toggle size="sm" labelText="Dark mode" bind:toggled />
<br />
<br />
<Button size="small" on:click="{storage.clearAll}">Clear storage</Button>

31
docs/src/pages/framed/Modal/3ButtonComposedModal.svelte Normal file
View file

@ -0,0 +1,31 @@
<script>
import {
Button,
ComposedModal,
ModalHeader,
ModalBody,
ModalFooter,
Checkbox,
} from "carbon-components-svelte";
let open = true;
let checked = false;
</script>
<Button on:click="{() => (open = true)}">Review changes</Button>
<ComposedModal bind:open on:submit="{() => (open = false)}">
<ModalHeader label="Changes" title="Confirm changes" />
<ModalBody hasForm>
<Checkbox labelText="I have reviewed the changes" bind:checked />
</ModalBody>
<ModalFooter
primaryButtonText="Proceed"
primaryButtonDisabled="{!checked}"
secondaryButtons="{[{ text: 'Cancel' }, { text: 'Review' }]}"
on:click:button--secondary="{({ detail }) => {
if (detail.text === 'Cancel') open = false;
if (detail.text === 'Review') console.log('Review');
}}"
/>
</ComposedModal>

23
docs/src/pages/framed/Modal/3ButtonModal.svelte Normal file
View file

@ -0,0 +1,23 @@
<script>
import { Button, Modal } from "carbon-components-svelte";
let open = false;
</script>
<Button on:click="{() => (open = true)}">Create database</Button>
<Modal
bind:open
modalHeading="Create database"
primaryButtonText="Confirm"
secondaryButtons="{[{ text: 'Cancel' }, { text: 'Edit' }]}"
on:click:button--secondary="{({ detail }) => {
if (detail.text === 'Cancel') open = false;
if (detail.text === 'Edit') console.log('Edit');
}}"
on:open
on:close
on:submit
>
<p>Create a new Cloudant database in the US South region.</p>
</Modal>

44
docs/src/pages/framed/ProgressBar/ProgressBarUx.svelte Normal file
View file

@ -0,0 +1,44 @@
<script>
import { ProgressBar, ButtonSet, Button } from "carbon-components-svelte";
let max = 328;
let value = 0;
$: helperText =
value > 0 ? value.toFixed(0) + "MB of " + max + "MB" : "Press start";
$: if (value === max) helperText = "Done";
</script>
<ProgressBar
labelText="Upload status"
value="{value}"
max="{max}"
helperText="{helperText}"
/>
<ButtonSet style="margin-top: var(--cds-spacing-08)">
<Button
disabled="{value > 0}"
on:click="{() => {
const interval = setInterval(() => {
const delta = Math.random() * 10;
if (value + delta < max) {
value += delta;
} else {
value = max;
clearInterval(interval);
}
}, 30);
}}"
>
Start
</Button>
<Button
kind="tertiary"
disabled="{value !== max}"
on:click="{() => (value = 0)}"
>
Reset
</Button>
</ButtonSet>

32
docs/src/pages/framed/RecursiveList/RecursiveList.svelte Normal file
View file

@ -0,0 +1,32 @@
<script>
import { RecursiveList } from "carbon-components-svelte";
const children = [
{
text: "Item 1",
children: [
{
text: "Item 1a",
children: [{ html: "<h5>HTML content</h5>" }],
},
],
},
{
text: "Item 2",
children: [
{
href: "https://svelte.dev/",
},
{
href: "https://svelte.dev/",
text: "Link with custom text",
},
],
},
{
text: "Item 3",
},
];
</script>
<RecursiveList children="{children}" />

32
docs/src/pages/framed/RecursiveList/RecursiveListOrdered.svelte Normal file
View file

@ -0,0 +1,32 @@
<script>
import { RecursiveList } from "carbon-components-svelte";
const children = [
{
text: "Item 1",
children: [
{
text: "Item 1a",
children: [{ html: "<h5>HTML content</h5>" }],
},
],
},
{
text: "Item 2",
children: [
{
href: "https://svelte.dev/",
},
{
href: "https://svelte.dev/",
text: "Link with custom text",
},
],
},
{
text: "Item 3",
},
];
</script>
<RecursiveList type="ordered" children="{children}" />

32
docs/src/pages/framed/RecursiveList/RecursiveListOrderedNative.svelte Normal file
View file

@ -0,0 +1,32 @@
<script>
import { RecursiveList } from "carbon-components-svelte";
const children = [
{
text: "Item 1",
children: [
{
text: "Item 1a",
children: [{ html: "<h5>HTML content</h5>" }],
},
],
},
{
text: "Item 2",
children: [
{
href: "https://svelte.dev/",
},
{
href: "https://svelte.dev/",
text: "Link with custom text",
},
],
},
{
text: "Item 3",
},
];
</script>
<RecursiveList type="ordered-native" children="{children}" />

17
docs/src/pages/framed/Theme/Theme.svelte Normal file
View file

@ -0,0 +1,17 @@
<script>
import {
Theme,
RadioButtonGroup,
RadioButton,
} from "carbon-components-svelte";
let theme = "g90";
</script>
<Theme bind:theme />
<RadioButtonGroup legendText="Carbon theme" bind:selected="{theme}">
{#each ["white", "g10", "g80", "g90", "g100"] as value}
<RadioButton labelText="{value}" value="{value}" />
{/each}
</RadioButtonGroup>

17
docs/src/pages/framed/Theme/ThemePersist.svelte Normal file
View file

@ -0,0 +1,17 @@
<script>
import {
Theme,
RadioButtonGroup,
RadioButton,
} from "carbon-components-svelte";
let theme = "g90";
</script>
<Theme bind:theme persist persistKey="__carbon-theme" />
<RadioButtonGroup legendText="Carbon theme" bind:selected="{theme}">
{#each ["white", "g10", "g80", "g90", "g100"] as value}
<RadioButton labelText="{value}" value="{value}" />
{/each}
</RadioButtonGroup>

5
docs/src/pages/framed/Theme/ThemeSelect.svelte Normal file
View file

@ -0,0 +1,5 @@
<script>
import { Theme } from "carbon-components-svelte";
</script>
<Theme render="select" />

12
docs/src/pages/framed/Theme/ThemeSelectCustom.svelte Normal file
View file

@ -0,0 +1,12 @@
<script>
import { Theme } from "carbon-components-svelte";
</script>
<Theme
render="select"
select="{{
themes: ['white', 'g90', 'g100'],
labelText: 'Select a theme',
inline: true,
}}"
/>

5
docs/src/pages/framed/Theme/ThemeToggle.svelte Normal file
View file

@ -0,0 +1,5 @@
<script>
import { Theme } from "carbon-components-svelte";
</script>
<Theme render="toggle" />

14
docs/src/pages/framed/Theme/ThemeToggleCustom.svelte Normal file
View file

@ -0,0 +1,14 @@
<script>
import { Theme } from "carbon-components-svelte";
</script>
<Theme
render="toggle"
toggle="{{
themes: ['g10', 'g80'],
labelA: 'Enable dark mode',
labelB: 'Enable dark mode',
hideLabel: true,
size: 'sm',
}}"
/>

14
docs/src/pages/framed/Theme/ThemeTokens.svelte Normal file
View file

@ -0,0 +1,14 @@
<script>
import { Theme, Button } from "carbon-components-svelte";
</script>
<Theme
theme="g90"
tokens="{{
'interactive-01': '#d02670',
'hover-primary': '#ee5396',
'active-primary': '#9f1853',
}}"
/>
<Button>Primary button</Button>

65
docs/src/pages/framed/TreeView/TreeView.svelte Normal file
View file

@ -0,0 +1,65 @@
<script>
import { TreeView } from "carbon-components-svelte";
let activeId = "";
let selectedIds = [];
let children = [
{ id: 0, text: "AI / Machine learning" },
{
id: 1,
text: "Analytics",
children: [
{
id: 2,
text: "IBM Analytics Engine",
children: [
{ id: 3, text: "Apache Spark" },
{ id: 4, text: "Hadoop" },
],
},
{ id: 5, text: "IBM Cloud SQL Query" },
{ id: 6, text: "IBM Db2 Warehouse on Cloud" },
],
},
{
id: 7,
text: "Blockchain",
children: [{ id: 8, text: "IBM Blockchain Platform" }],
},
{
id: 9,
text: "Databases",
children: [
{ id: 10, text: "IBM Cloud Databases for Elasticsearch" },
{ id: 11, text: "IBM Cloud Databases for Enterprise DB" },
{ id: 12, text: "IBM Cloud Databases for MongoDB" },
{ id: 13, text: "IBM Cloud Databases for PostgreSQL" },
],
},
{
id: 14,
text: "Integration",
disabled: true,
children: [{ id: 15, text: "IBM API Connect", disabled: true }],
},
];
</script>
<TreeView
labelText="Cloud Products"
children="{children}"
bind:activeId
bind:selectedIds
on:select="{({ detail }) => console.log('select', detail)}"
on:toggle="{({ detail }) => console.log('toggle', detail)}"
on:focus="{({ detail }) => console.log('focus', detail)}"
/>
<div>Active node id: {activeId}</div>
<div>Selected ids: {JSON.stringify(selectedIds)}</div>
<style>
div {
margin-top: var(--cds-spacing-05);
}
</style>

65
docs/src/pages/framed/TreeView/TreeViewActive.svelte Normal file
View file

@ -0,0 +1,65 @@
<script>
import { TreeView } from "carbon-components-svelte";
let activeId = 0;
let selectedIds = [];
let children = [
{ id: 0, text: "AI / Machine learning" },
{
id: 1,
text: "Analytics",
children: [
{
id: 2,
text: "IBM Analytics Engine",
children: [
{ id: 3, text: "Apache Spark" },
{ id: 4, text: "Hadoop" },
],
},
{ id: 5, text: "IBM Cloud SQL Query" },
{ id: 6, text: "IBM Db2 Warehouse on Cloud" },
],
},
{
id: 7,
text: "Blockchain",
children: [{ id: 8, text: "IBM Blockchain Platform" }],
},
{
id: 9,
text: "Databases",
children: [
{ id: 10, text: "IBM Cloud Databases for Elasticsearch" },
{ id: 11, text: "IBM Cloud Databases for Enterprise DB" },
{ id: 12, text: "IBM Cloud Databases for MongoDB" },
{ id: 13, text: "IBM Cloud Databases for PostgreSQL" },
],
},
{
id: 14,
text: "Integration",
disabled: true,
children: [{ id: 15, text: "IBM API Connect", disabled: true }],
},
];
</script>
<TreeView
labelText="Cloud Products"
children="{children}"
bind:activeId
bind:selectedIds
on:select="{({ detail }) => console.log('select', detail)}"
on:toggle="{({ detail }) => console.log('toggle', detail)}"
on:focus="{({ detail }) => console.log('focus', detail)}"
/>
<div>Active node id: {activeId}</div>
<div>Selected ids: {JSON.stringify(selectedIds)}</div>
<style>
div {
margin-top: var(--cds-spacing-05);
}
</style>

66
docs/src/pages/framed/TreeView/TreeViewCompact.svelte Normal file
View file

@ -0,0 +1,66 @@
<script>
import { TreeView } from "carbon-components-svelte";
let activeId = 0;
let selectedIds = [];
let children = [
{ id: 0, text: "AI / Machine learning" },
{
id: 1,
text: "Analytics",
children: [
{
id: 2,
text: "IBM Analytics Engine",
children: [
{ id: 3, text: "Apache Spark" },
{ id: 4, text: "Hadoop" },
],
},
{ id: 5, text: "IBM Cloud SQL Query" },
{ id: 6, text: "IBM Db2 Warehouse on Cloud" },
],
},
{
id: 7,
text: "Blockchain",
children: [{ id: 8, text: "IBM Blockchain Platform" }],
},
{
id: 9,
text: "Databases",
children: [
{ id: 10, text: "IBM Cloud Databases for Elasticsearch" },
{ id: 11, text: "IBM Cloud Databases for Enterprise DB" },
{ id: 12, text: "IBM Cloud Databases for MongoDB" },
{ id: 13, text: "IBM Cloud Databases for PostgreSQL" },
],
},
{
id: 14,
text: "Integration",
disabled: true,
children: [{ id: 15, text: "IBM API Connect", disabled: true }],
},
];
</script>
<TreeView
size="compact"
labelText="Cloud Products"
children="{children}"
bind:activeId
bind:selectedIds
on:select="{({ detail }) => console.log('select', detail)}"
on:toggle="{({ detail }) => console.log('toggle', detail)}"
on:focus="{({ detail }) => console.log('focus', detail)}"
/>
<div>Active node id: {activeId}</div>
<div>Selected ids: {JSON.stringify(selectedIds)}</div>
<style>
div {
margin-top: var(--cds-spacing-05);
}
</style>

68
docs/src/pages/framed/TreeView/TreeViewExpanded.svelte Normal file
View file

@ -0,0 +1,68 @@
<script>
import { TreeView } from "carbon-components-svelte";
let activeId = 1;
let selectedIds = [];
let expandedIds = [1, 2, 14];
let children = [
{ id: 0, text: "AI / Machine learning" },
{
id: 1,
text: "Analytics",
children: [
{
id: 2,
text: "IBM Analytics Engine",
children: [
{ id: 3, text: "Apache Spark" },
{ id: 4, text: "Hadoop" },
],
},
{ id: 5, text: "IBM Cloud SQL Query" },
{ id: 6, text: "IBM Db2 Warehouse on Cloud" },
],
},
{
id: 7,
text: "Blockchain",
children: [{ id: 8, text: "IBM Blockchain Platform" }],
},
{
id: 9,
text: "Databases",
children: [
{ id: 10, text: "IBM Cloud Databases for Elasticsearch" },
{ id: 11, text: "IBM Cloud Databases for Enterprise DB" },
{ id: 12, text: "IBM Cloud Databases for MongoDB" },
{ id: 13, text: "IBM Cloud Databases for PostgreSQL" },
],
},
{
id: 14,
text: "Integration",
disabled: true,
children: [{ id: 15, text: "IBM API Connect", disabled: true }],
},
];
</script>
<TreeView
labelText="Cloud Products"
children="{children}"
bind:activeId
bind:selectedIds
bind:expandedIds
on:select="{({ detail }) => console.log('select', detail)}"
on:toggle="{({ detail }) => console.log('toggle', detail)}"
on:focus="{({ detail }) => console.log('focus', detail)}"
/>
<div>Active node id: {activeId}</div>
<div>Selected ids: {JSON.stringify(selectedIds)}</div>
<div>Expanded ids: {JSON.stringify(expandedIds)}</div>
<style>
div {
margin-top: var(--cds-spacing-05);
}
</style>

98
docs/src/pages/framed/TreeView/TreeViewIcons.svelte Normal file
View file

@ -0,0 +1,98 @@
<script>
import { TreeView } from "carbon-components-svelte";
import WatsonMachineLearning16 from "carbon-icons-svelte/lib/WatsonMachineLearning16";
import Analytics16 from "carbon-icons-svelte/lib/Analytics16";
import Blockchain16 from "carbon-icons-svelte/lib/Blockchain16";
import DataBase16 from "carbon-icons-svelte/lib/DataBase16";
import SignalStrength16 from "carbon-icons-svelte/lib/SignalStrength16";
let activeId = 1;
let selectedIds = [];
let children = [
{ id: 0, text: "AI / Machine learning", icon: WatsonMachineLearning16 },
{
id: 1,
text: "Analytics",
icon: Analytics16,
expanded: true,
children: [
{
id: 2,
text: "IBM Analytics Engine",
icon: Analytics16,
expanded: true,
children: [
{ id: 3, text: "Apache Spark", icon: Analytics16 },
{ id: 4, text: "Hadoop", icon: Analytics16 },
],
},
{ id: 5, text: "IBM Cloud SQL Query", icon: Analytics16 },
{ id: 6, text: "IBM Db2 Warehouse on Cloud", icon: Analytics16 },
],
},
{
id: 7,
text: "Blockchain",
icon: Blockchain16,
children: [
{ id: 8, text: "IBM Blockchain Platform", icon: Blockchain16 },
],
},
{
id: 9,
text: "Databases",
icon: DataBase16,
children: [
{
id: 10,
text: "IBM Cloud Databases for Elasticsearch",
icon: DataBase16,
},
{
id: 11,
text: "IBM Cloud Databases for Enterprise DB",
icon: DataBase16,
},
{ id: 12, text: "IBM Cloud Databases for MongoDB", icon: DataBase16 },
{
id: 13,
text: "IBM Cloud Databases for PostgreSQL",
icon: DataBase16,
},
],
},
{
id: 14,
text: "Integration",
icon: SignalStrength16,
disabled: true,
children: [
{
id: 15,
text: "IBM API Connect",
icon: SignalStrength16,
disabled: true,
},
],
},
];
</script>
<TreeView
labelText="Cloud Products"
children="{children}"
bind:activeId
bind:selectedIds
on:select="{({ detail }) => console.log('select', detail)}"
on:toggle="{({ detail }) => console.log('toggle', detail)}"
on:focus="{({ detail }) => console.log('focus', detail)}"
/>
<div>Active node id: {activeId}</div>
<div>Selected ids: {JSON.stringify(selectedIds)}</div>
<style>
div {
margin-top: var(--cds-spacing-05);
}
</style>

65
docs/src/pages/framed/TreeView/TreeViewMultiselect.svelte Normal file
View file

@ -0,0 +1,65 @@
<script>
import { TreeView } from "carbon-components-svelte";
let activeId = 0;
let selectedIds = [0, 7, 9];
let children = [
{ id: 0, text: "AI / Machine learning" },
{
id: 1,
text: "Analytics",
children: [
{
id: 2,
text: "IBM Analytics Engine",
children: [
{ id: 3, text: "Apache Spark" },
{ id: 4, text: "Hadoop" },
],
},
{ id: 5, text: "IBM Cloud SQL Query" },
{ id: 6, text: "IBM Db2 Warehouse on Cloud" },
],
},
{
id: 7,
text: "Blockchain",
children: [{ id: 8, text: "IBM Blockchain Platform" }],
},
{
id: 9,
text: "Databases",
children: [
{ id: 10, text: "IBM Cloud Databases for Elasticsearch" },
{ id: 11, text: "IBM Cloud Databases for Enterprise DB" },
{ id: 12, text: "IBM Cloud Databases for MongoDB" },
{ id: 13, text: "IBM Cloud Databases for PostgreSQL" },
],
},
{
id: 14,
text: "Integration",
disabled: true,
children: [{ id: 15, text: "IBM API Connect", disabled: true }],
},
];
</script>
<TreeView
labelText="Cloud Products"
children="{children}"
bind:activeId
bind:selectedIds
on:select="{({ detail }) => console.log('select', detail)}"
on:toggle="{({ detail }) => console.log('toggle', detail)}"
on:focus="{({ detail }) => console.log('focus', detail)}"
/>
<div>Active node id: {activeId}</div>
<div>Selected ids: {JSON.stringify(selectedIds)}</div>
<style>
div {
margin-top: var(--cds-spacing-05);
}
</style>

65
docs/src/pages/framed/UIShell/HeaderNavRail.svelte Normal file
View file

@ -0,0 +1,65 @@
<script>
import {
Header,
HeaderNav,
HeaderNavItem,
HeaderNavMenu,
SideNav,
SideNavItems,
SideNavMenu,
SideNavMenuItem,
SideNavLink,
SideNavDivider,
SkipToContent,
Content,
Grid,
Row,
Column,
} from "carbon-components-svelte";
import Fade16 from "carbon-icons-svelte/lib/Fade16";
let isSideNavOpen = false;
</script>
<Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>
<div slot="skip-to-content">
<SkipToContent />
</div>
<HeaderNav>
<HeaderNavItem href="/" text="Link 1" />
<HeaderNavItem href="/" text="Link 2" />
<HeaderNavItem href="/" text="Link 3" />
<HeaderNavMenu text="Menu">
<HeaderNavItem href="/" text="Link 1" />
<HeaderNavItem href="/" text="Link 2" />
<HeaderNavItem href="/" text="Link 3" />
</HeaderNavMenu>
<HeaderNavItem href="/" text="Link 4" />
</HeaderNav>
<SideNav bind:isOpen="{isSideNavOpen}" rail>
<SideNavItems>
<SideNavLink icon="{Fade16}" text="Link 1" href="/" isSelected />
<SideNavLink icon="{Fade16}" text="Link 2" href="/" />
<SideNavLink icon="{Fade16}" text="Link 3" href="/" />
<SideNavMenu icon="{Fade16}" text="Menu">
<SideNavMenuItem href="/" text="Link 1" />
<SideNavMenuItem href="/" text="Link 2" />
<SideNavMenuItem href="/" text="Link 3" />
</SideNavMenu>
<SideNavDivider />
<SideNavLink icon="{Fade16}" text="Link 4" href="/" />
</SideNavItems>
</SideNav>
</Header>
<Content>
<Grid>
<Row>
<Column>
<h1>Welcome</h1>
</Column>
</Row>
</Grid>
</Content>

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

@ -6,8 +6,15 @@
Column,
CodeSnippet,
Link,
Tabs,
Tab,
TabContent,
OutboundLink,
RadioButtonGroup,
RadioButton,
} from "carbon-components-svelte";
import TileCard from "../components/TileCard.svelte";
import { theme } from "../store";
import { metatags } from "@sveltech/routify";
metatags.title = "Carbon Components Svelte";
@ -16,6 +23,39 @@
const installYarn = "yarn add -D carbon-components-svelte";
const installNpm = "npm i -D carbon-components-svelte";
const themes = {
white: "White",
g10: "Gray 10",
g80: "Gray 80",
g90: "Gray 90",
g100: "Gray 100",
all: "All",
};
const cssImportAll = `import "carbon-components-svelte/css/all.css";`;
const cssThemeToggle = `<script>
let theme = "${$theme}"; // "white" | "g10" | "g80" | "g90" | "g100"
$: document.documentElement.setAttribute("theme", theme);
<\/script>
`;
$: cssImport = `import "carbon-components-svelte/css/${$theme}.css";`;
$: cssCdn = `<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet"
href="https://unpkg.com/carbon-components-svelte/css/${$theme}.css"
/>
</head>
</html>`;
$: cssCdnSvelteHead = `<svelte:head>
<link
rel="stylesheet"
href="https://unpkg.com/carbon-components-svelte/css/${$theme}.css"
/>
</svelte:head>`;
</script>
<Content>
@ -32,15 +72,14 @@
>
Svelte
</Link>
component library that implements the Carbon Design System, an
component library that implements the
<Link
inline
class="big-link"
href="https://www.carbondesignsystem.com/"
>
open source design system
</Link>
by IBM.
Carbon Design System
</Link>, an open source design system by IBM.
</p>
<p>
Design systems facilitate design and development through reuse,
@ -50,19 +89,154 @@
</Row>
<Row style="margin-bottom: var(--cds-layout-02)">
<Column>
<h3>Install</h3>
<h4>Installing with yarn:</h4>
<h3>Installation</h3>
<h4>Using Yarn:</h4>
<Row noGutter>
<CodeSnippet code="{installYarn}" />
<h4>Using npm:</h4>
</Row>
<h4>Using NPM:</h4>
<Row noGutter>
<CodeSnippet code="{installNpm}" />
</Row>
</Column>
</Row>
<Row style="margin-bottom: var(--cds-layout-04)">
<Column>
<h3>Styling</h3>
<p>
Before importing components, you will need to first apply Carbon
component styles. The Carbon Design System supports five themes (2
light, 3 dark).
</p>
<RadioButtonGroup
style="margin-top: var(--cds-spacing-08)"
legendText="Carbon themes"
bind:selected="{$theme}"
>
{#each ["white", "g10", "g80", "g90", "g100"] as value}
<RadioButton labelText="{themes[value]}" value="{value}" />
{/each}
</RadioButtonGroup>
</Column>
</Row>
<Row>
<Column max="{10}" xlg="{10}" noGutter>
<Tabs>
<Tab label="CSS StyleSheet" />
<Tab label="CDN" />
<Tab label="SCSS" />
<div slot="content">
<TabContent>
<p>
This library ships with six pre-compiled CSS StyleSheets built
from
<OutboundLink
inline
size="lg"
href="https://github.com/carbon-design-system/carbon/tree/main/packages/components"
>
carbon-components
</OutboundLink>.
</p>
<Row padding noGutter>
<Column>
<p>
<CodeSnippet type="single" code="{cssImport}" />
</p>
</Column>
</Row>
</TabContent>
<TabContent>
<p>
An alternative to loading styles is to link an external
StyleSheet from a Content Delivery Network (CDN) like
<OutboundLink inline size="lg" href="https://unpkg.com/">
unpkg.com
</OutboundLink>.
</p>
<p>This is best suited for rapid prototyping.</p>
<h5>HTML</h5>
<Row padding noGutter>
<Column>
<p>
<CodeSnippet type="multi" code="{cssCdn}" />
</p>
</Column>
</Row>
<h5>svelte:head</h5>
<Row padding noGutter>
<Column>
<p>
<CodeSnippet type="multi" code="{cssCdnSvelteHead}" />
</p>
</Column>
</Row>
</TabContent>
<TabContent>
<p>
The most performant method to load styles is to import SCSS
directly from
<code>carbon-components</code>. Although it requires more set
up, you can reduce the size of the bundle CSS by importing
individual component styles instead of a pre-compiled CSS
StyleSheet.
</p>
<p>
Refer to the
<OutboundLink
inline
size="lg"
href="https://github.com/carbon-design-system/carbon/blob/main/docs/guides/sass.md"
>
official Carbon guide on SASS
</OutboundLink>
for documentation.
</p>
</TabContent>
</div>
</Tabs>
</Column>
</Row>
<Row style="margin-bottom: var(--cds-layout-02)">
<Column>
<h3>Dynamic theming</h3>
<p>Use the "all.css" StyleSheet for dynamic, client-side theming.</p>
<Row padding noGutter>
<Column>
<p>
<CodeSnippet type="single" code="{cssImportAll}" />
</p>
</Column>
</Row>
<p>
Programmatically switch between each of the five Carbon themes by
setting the "theme" attribute on the HTML element.
</p>
<Row padding noGutter>
<Column>
<p>
<CodeSnippet type="multi" code="{cssThemeToggle}" />
</p>
</Column>
</Row>
<p>
You can use the
<Link inline size="lg" href="/components/Theme">
Theme utility component
</Link>
to update the theme at runtime.
</p>
</Column>
</Row>
<Row style="margin-bottom: var(--cds-layout-02)">
<Column>
<h3>Portfolio</h3>
<p>
The broader Carbon Svelte effort includes libraries for icons,
pictograms, and data visualization.
The Carbon Svelte portfolio includes packages for icons, pictograms,
and data visualization.
</p>
</Column>
</Row>
@ -74,37 +248,55 @@
title="Carbon Components Svelte"
subtitle="50+ components"
target="_blank"
href="https://github.com/IBM/carbon-components-svelte"
href="https://github.com/carbon-design-system/carbon-components-svelte"
/>
</Column>
<Column xlg="{5}" lg="{8}" md="{4}">
<TileCard
borderBottom
title="Carbon Icons Svelte"
subtitle="6000+ icons"
subtitle="7000+ icons"
target="_blank"
href="https://github.com/IBM/carbon-icons-svelte"
href="https://github.com/carbon-design-system/carbon-icons-svelte"
/>
</Column>
</Row>
<Row noGutter>
<Column xlg="{5}" lg="{8}" md="{4}">
<TileCard
borderBottom
borderRight
title="Carbon Pictograms Svelte"
subtitle="700+ pictograms"
target="_blank"
href="https://github.com/IBM/carbon-pictograms-svelte"
href="https://github.com/carbon-design-system/carbon-pictograms-svelte"
/>
</Column>
<Column xlg="{5}" lg="{8}" md="{4}">
<TileCard
borderBottom
title="Carbon Charts Svelte"
subtitle="16 chart types, powered by d3"
subtitle="20+ charts, powered by d3"
target="_blank"
href="https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte"
/>
</Column>
</Row>
<Row noGutter>
<Column xlg="{5}" lg="{8}" md="{4}">
<TileCard
title="Carbon Preprocess Svelte"
subtitle="Collection of Carbon Svelte preprocessors"
target="_blank"
href="https://github.com/carbon-design-system/carbon-preprocess-svelte"
/>
</Column>
</Row>
</Grid>
</Content>
<style>
p {
margin-bottom: var(--cds-spacing-05);
}
</style>

2
docs/src/store.js
View file

@ -1,3 +1,3 @@
import { writable } from "svelte/store";
export const theme = writable("g100");
export const theme = writable("white");

4
docs/svelte.config.js
View file

@ -68,6 +68,7 @@ function plugin() {
const formattedCode = format(scriptBlock + node.value, {
parser: "svelte",
svelteBracketNewLine: true,
svelteSortOrder: "scripts-markup-styles",
});
const highlightedCode = Prism.highlight(
formattedCode,
@ -238,6 +239,9 @@ module.exports = {
<li class="bx--list__item">
<a class="bx--link" href="#props">Props</a>
</li>
<li class="bx--list__item">
<a class="bx--link" href="#typedefs">Typedefs</a>
</li>
<li class="bx--list__item">
<a class="bx--link" href="#slots">Slots</a>
</li>

7
docs/vercel.json
View file

@ -1,7 +0,0 @@
{
"version": 2,
"routes": [
{ "handle": "filesystem" },
{ "src": "/.*", "dest": "/index.html" }
]
}

2
docs/vite.config.js
View file

@ -1,6 +1,6 @@
module.exports = {
optimizeDeps: {
include: ["clipboard-copy"],
include: ["clipboard-copy", "flatpickr/dist/plugins/rangePlugin"],
exclude: ["@sveltech/routify"],
},
};

86
docs/yarn.lock
View file

@ -602,6 +602,14 @@ anymatch@~3.1.1:
normalize-path "^3.0.0"
picomatch "^2.0.4"
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"
argparse@^1.0.7:
version "1.0.10"
resolved "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
@ -837,26 +845,25 @@ caniuse-lite@^1.0.30001173, caniuse-lite@^1.0.30001178:
integrity sha512-n8JVqXuZMVSPKiPiypjFtDTXc4jWIdjxull0f92WLo7e1MSi3uJ3NvveakSh/aCl1QKFAvIz3vIj0v+0K+FrXw==
carbon-components-svelte@../:
version "0.32.1"
version "0.44.2"
dependencies:
carbon-icons-svelte "^10.27.0"
clipboard-copy "3.2.0"
carbon-icons-svelte "^10.36.0"
flatpickr "4.6.9"
carbon-components@10.32.1:
version "10.32.1"
resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.32.1.tgz#064d4504daafafa379ee2fbc5b2997204fb2e5eb"
integrity sha512-m9Q9y1NSsXcLINSYmRmOOuxwvSNrXqC2FIN3ykg+WO3+WrmozbPsgFSyMs0gd/RUgNXP6edt8k0Op//oks01gA==
carbon-components@10.44.0:
version "10.44.0"
resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.44.0.tgz#80a68e71798c6f1272af41aed0d54da1bef62f9a"
integrity sha512-GUxr8vLWBieQtyTJprCUDMhPLbsZectQUs9JsQCFaBy5UYQqSSEw/9VgzH+5iiCp6wQIZCCg6NnTofGgoBBhYw==
dependencies:
"@carbon/telemetry" "0.0.0-alpha.6"
flatpickr "4.6.1"
lodash.debounce "^4.0.8"
warning "^3.0.0"
carbon-icons-svelte@^10.27.0:
version "10.28.0"
resolved "https://registry.yarnpkg.com/carbon-icons-svelte/-/carbon-icons-svelte-10.28.0.tgz#812a6eae858d0c9e043067c714910fcfb6249cd2"
integrity sha512-C3K+U2PRy63WHFZme1HQNju89rhVIQmUkfgBrZzcezdutkhXbSPOY+o/MI0B2mDcQ7G9gfhEpqsXET8gBTWfJQ==
carbon-icons-svelte@^10.36.0:
version "10.36.0"
resolved "https://registry.yarnpkg.com/carbon-icons-svelte/-/carbon-icons-svelte-10.36.0.tgz#3f269f2c52520d14fcd42161a633afbb7c68b4bf"
integrity sha512-YlrHtjdRqMFiptNVpQ4M+gMvpYDoKQydBY5A82thAXIHk9JrbrVLzq6RgJugTijHT8yzMS1zXaw6YYhqL8Qzqw==
caseless@~0.12.0:
version "0.12.0"
@ -893,20 +900,20 @@ cheap-watch@^1.0.2:
resolved "https://registry.npmjs.org/cheap-watch/-/cheap-watch-1.0.2.tgz#bfa648aea6bcd15e9fe4dce4ac760ab81cd0133c"
integrity sha512-jp82t+kZAW+ZVnuYuHZEGZqDaUg28uAyOhC915BcKBSYL55fpTyuJ56cYYXZG0JkCPQT80MjRD6q2KqebaPwCw==
"chokidar@>=2.0.0 <4.0.0":
version "3.5.1"
resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz#ee9ce7bbebd2b79f49f304799d5468e31e14e68a"
integrity sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==
"chokidar@>=3.0.0 <4.0.0":
version "3.5.2"
resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.2.tgz#dba3976fcadb016f66fd365021d91600d01c1e75"
integrity sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==
dependencies:
anymatch "~3.1.1"
anymatch "~3.1.2"
braces "~3.0.2"
glob-parent "~5.1.0"
glob-parent "~5.1.2"
is-binary-path "~2.1.0"
is-glob "~4.0.1"
normalize-path "~3.0.0"
readdirp "~3.5.0"
readdirp "~3.6.0"
optionalDependencies:
fsevents "~2.3.1"
fsevents "~2.3.2"
chokidar@^3.0.0, chokidar@^3.3.1:
version "3.4.2"
@ -947,10 +954,10 @@ cli-spinners@^2.2.0:
resolved "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.4.0.tgz#c6256db216b878cfba4720e719cec7cf72685d7f"
integrity sha512-sJAofoarcm76ZGpuooaO0eDy8saEy+YoZBLjC4h8srt4jeBnkYeOgqxgsJQTpyt2LjI5PTfLJHSL+41Yu4fEJA==
clipboard-copy@3.2.0:
version "3.2.0"
resolved "https://registry.yarnpkg.com/clipboard-copy/-/clipboard-copy-3.2.0.tgz#3c5b8651d3512dcfad295d77a9eb09e7fac8d5fb"
integrity sha512-vooFaGFL6ulEP1liiaWFBmmfuPm3cY3y7T9eB83ZTnYc/oFeAKsq3NcDrOkBC8XaauEE8zHQwI7k0+JSYiVQSQ==
clipboard-copy@^4.0.1:
version "4.0.1"
resolved "https://registry.yarnpkg.com/clipboard-copy/-/clipboard-copy-4.0.1.tgz#326ef9726d4ffe72d9a82a7bbe19379de692017d"
integrity sha512-wOlqdqziE/NNTUJsfSgXmBMIrYmfd5V0HCGsR8uAKHcg+h9NENWINcfRjtWGU77wDHC8B8ijV4hMTGYbrKovng==
clipboard@^2.0.0:
version "2.0.6"
@ -1835,10 +1842,10 @@ fsevents@~2.1.2:
resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz#fb738703ae8d2f9fe900c33836ddebee8b97f23e"
integrity sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==
fsevents@~2.3.1:
version "2.3.1"
resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.1.tgz#b209ab14c61012636c8863507edf7fb68cc54e9f"
integrity sha512-YR47Eg4hChJGAB1O3yEAOkGO+rlzutoICGqGo9EZ4lKWokzZRSyIW1QmTzqjtw8MJdj9srP869CuWw/hyzSiBw==
fsevents@~2.3.2:
version "2.3.2"
resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
function-bind@^1.1.1:
version "1.1.1"
@ -1885,6 +1892,13 @@ glob-parent@^5.1.0, glob-parent@~5.1.0:
dependencies:
is-glob "^4.0.1"
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.2:
version "7.1.6"
resolved "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
@ -3408,10 +3422,10 @@ readdirp@^3.3.0, readdirp@~3.4.0:
dependencies:
picomatch "^2.2.1"
readdirp@~3.5.0:
version "3.5.0"
resolved "https://registry.npmjs.org/readdirp/-/readdirp-3.5.0.tgz#9ba74c019b15d365278d2e91bb8c48d7b4d42c9e"
integrity sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==
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"
@ -3631,12 +3645,12 @@ safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.2, safe-buffer@~5.2.0:
resolved "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
sass@^1.32.5:
version "1.32.5"
resolved "https://registry.npmjs.org/sass/-/sass-1.32.5.tgz#2882d22ad5748c05fa9bff6c3b0ffbc4f4b9e1dc"
integrity sha512-kU1yJ5zUAmPxr7f3q0YXTAd1oZjSR1g3tYyv+xu0HZSl5JiNOaE987eiz7wCUvbm4I9fGWGU2TgApTtcP4GMNQ==
sass@^1.42.1:
version "1.42.1"
resolved "https://registry.yarnpkg.com/sass/-/sass-1.42.1.tgz#5ab17bebc1cb1881ad2e0c9a932c66ad64e441e2"
integrity sha512-/zvGoN8B7dspKc5mC6HlaygyCBRvnyzzgD5khiaCfglWztY99cYoiTUksVx11NlnemrcfH5CEaCpsUKoW0cQqg==
dependencies:
chokidar ">=2.0.0 <4.0.0"
chokidar ">=3.0.0 <4.0.0"
saxes@^5.0.0:
version "5.0.1"

4
examples/rollup-typescript/.gitignore vendored
View file

@ -1,4 +0,0 @@
/node_modules/
/public/build/
.vscode
.DS_Store

23
examples/rollup-typescript/README.md
View file

@ -1,23 +0,0 @@
# rollup-typescript
> Example Rollup/TypeScript set-up scaffolded from the official [Svelte template](https://github.com/sveltejs/template).
## Getting started
Scaffold a new project using [degit](https://github.com/Rich-Harris/degit):
```sh
npx degit ibm/carbon-components-svelte#rollup-typescript svelte-app
cd svelte-app
yarn install
```
## Available scripts
### `yarn dev`
Starts the app in development mode.
### `yarn build`
Builds the app for production.

29
examples/rollup-typescript/package.json
View file

@ -1,29 +0,0 @@
{
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "rollup -cw",
"build": "rollup -c",
"start": "sirv public",
"validate": "svelte-check"
},
"dependencies": {
"sirv-cli": "^1.0.0"
},
"devDependencies": {
"@rollup/plugin-commonjs": "^14.0.0",
"@rollup/plugin-node-resolve": "^8.0.0",
"@rollup/plugin-typescript": "^6.0.0",
"@tsconfig/svelte": "^1.0.0",
"carbon-components-svelte": "^0.12.0",
"rollup": "^2.3.4",
"rollup-plugin-livereload": "^2.0.0",
"rollup-plugin-svelte": "^6.0.0",
"rollup-plugin-terser": "^7.0.0",
"svelte": "^3.0.0",
"svelte-check": "^1.0.0",
"svelte-preprocess": "^4.3.2",
"tslib": "^2.0.0",
"typescript": "^3.9.3"
}
}

BIN
examples/rollup-typescript/public/favicon.ico
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 5.3 KiB

21
examples/rollup-typescript/public/index.html
View file

@ -1,21 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="/favicon.ico" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>rollup-typescript</title>
<link
rel="stylesheet"
href="https://unpkg.com/carbon-components-svelte@0.14.0/css/all.css"
/>
<link rel="stylesheet" href="/build/bundle.css" />
<script defer src="/build/bundle.js"></script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
</body>
</html>

60
examples/rollup-typescript/rollup.config.js
View file

@ -1,60 +0,0 @@
import svelte from "rollup-plugin-svelte";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import livereload from "rollup-plugin-livereload";
import { terser } from "rollup-plugin-terser";
import sveltePreprocess from "svelte-preprocess";
import typescript from "@rollup/plugin-typescript";
const production = !process.env.ROLLUP_WATCH;
function serve() {
let server;
function toExit() {
if (server) server.kill(0);
}
return {
writeBundle() {
if (server) return;
server = require("child_process").spawn(
"npm",
["run", "start", "--", "--dev"],
{
stdio: ["ignore", "inherit", "inherit"],
shell: true,
}
);
process.on("SIGTERM", toExit);
process.on("exit", toExit);
},
};
}
export default {
input: "src/index.ts",
output: {
sourcemap: true,
format: "iife",
name: "app",
file: "public/build/bundle.js",
},
plugins: [
svelte({
dev: !production,
preprocess: sveltePreprocess(),
css: (css) => {
css.write("bundle.css");
},
}),
resolve({ browser: true, dedupe: ["svelte"] }),
commonjs(),
typescript({ sourceMap: !production, inlineSources: !production }),
!production && serve(),
!production && livereload("public"),
production && terser(),
],
watch: { clearScreen: false },
};

93
examples/rollup-typescript/src/App.svelte
View file

@ -1,93 +0,0 @@
<script lang="ts">
import {
Content,
Breadcrumb,
BreadcrumbItem,
Grid,
Row,
Column,
Tabs,
TabContent,
Tab,
Select,
SelectItem,
} from "carbon-components-svelte";
import Header from "./components/Header.svelte";
import Theme from "./components/Theme.svelte";
let theme: "g10" = "g10";
</script>
<Theme persist bind:theme>
<Header />
<Content style="background: none; padding: 1rem">
<Grid>
<Row>
<Column lg="{16}">
<Breadcrumb noTrailingSlash aria-label="Page navigation">
<BreadcrumbItem href="/">Getting started</BreadcrumbItem>
</Breadcrumb>
<h1 style="margin-bottom: 1.5rem">Design &amp; build with Carbon</h1>
</Column>
</Row>
<Row>
<Column noGutter>
<Tabs aria-label="Tab navigation">
<Tab label="About" />
<Tab label="Design" />
<Tab label="Develop" />
<div slot="content" class="tabbed-content">
<Grid as fullWidth let:props>
<TabContent {...props}>
<Row>
<Column md="{4}" lg="{7}">
<Select
labelText="Carbon theme"
bind:selected="{theme}"
style="margin-bottom: 1rem"
>
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
<p>
Carbon is IBM’s open-source design system for digital
products and experiences. With the IBM Design Language
as its foundation, the system consists of working code,
design tools and resources, human interface guidelines,
and a vibrant community of contributors.
</p>
</Column>
</Row>
</TabContent>
<TabContent {...props}>
<Row>
<Column md="{4}" lg="{7}">
<p>
Rapidly build beautiful and accessible experiences. The
Carbon kit contains all resources you need to get
started.
</p>
</Column>
</Row>
</TabContent>
<TabContent {...props}>
<Row>
<Column md="{4}" lg="{7}">
<p>
Carbon provides styles and components in Vanilla, React,
Angular, Vue and Svelte for anyone building on the web.
</p>
</Column>
</Row>
</TabContent>
</Grid>
</div>
</Tabs>
</Column>
</Row>
</Grid>
</Content>
</Theme>

35
examples/rollup-typescript/src/components/Header.svelte
View file

@ -1,35 +0,0 @@
<script lang="ts">
import {
SkipToContent,
Header,
HeaderUtilities,
HeaderGlobalAction,
} from "carbon-components-svelte";
import Notification20 from "carbon-icons-svelte/lib/Notification20";
import UserAvatar20 from "carbon-icons-svelte/lib/UserAvatar20";
import AppSwitcher20 from "carbon-icons-svelte/lib/AppSwitcher20";
import { getContext } from "svelte";
const ctx: { dark: any; light: any; updateVar: any } = getContext("Theme");
$: if (ctx) {
ctx.dark.subscribe((value) => {
console.log("dark mode?", value);
});
ctx.light.subscribe((value) => {
console.log("light mode?", value);
});
ctx.updateVar("--cds-productive-heading-06-font-size", "4rem");
}
</script>
<Header company="IBM" platformName="Carbon Components Svelte" href="/">
<div slot="skip-to-content">
<SkipToContent />
</div>
<HeaderUtilities>
<HeaderGlobalAction aria-label="Notifications" icon="{Notification20}" />
<HeaderGlobalAction aria-label="User Avatar" icon="{UserAvatar20}" />
<HeaderGlobalAction aria-label="App Switcher" icon="{AppSwitcher20}" />
</HeaderUtilities>
</Header>

57
examples/rollup-typescript/src/components/Theme.svelte
View file

@ -1,57 +0,0 @@
<script lang="ts">
type Theme = "white" | "g10" | "g90" | "g100";
export let persist: boolean = false;
export let persistKey: string = "theme";
export let theme: Theme = "white";
export const themes: Theme[] = ["white", "g10", "g90", "g100"];
import { onMount, afterUpdate, setContext } from "svelte";
import { writable, derived } from "svelte/store";
const isValidTheme = (value) => themes.includes(value);
const isDark = (value) =>
isValidTheme(value) && (value === "g90" || value === "g100");
const dark = writable(isDark(theme));
const light = derived(dark, (_) => !_);
setContext("Theme", {
updateVar: (name: string, value: string) => {
document.documentElement.style.setProperty(name, value);
},
dark,
light,
});
onMount(() => {
try {
const persisted_theme = localStorage.getItem(persistKey);
if (isValidTheme(persisted_theme)) {
theme = persisted_theme as Theme;
}
} catch (error) {
console.error(error);
}
});
afterUpdate(() => {
if (isValidTheme(theme)) {
document.documentElement.setAttribute("theme", theme);
if (persist) {
localStorage.setItem(persistKey, theme);
}
} else {
console.warn(
`"${theme}" is not a valid Carbon theme. Choose from available themes: ${JSON.stringify(
themes
)}`
);
}
});
$: dark.set(isDark(theme));
</script>
<slot />

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