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

Align v10.36 (#696)

Browse source 
* chore(deps-dev): upgrade carbon-components to v10.36.0

* feat(structured-list): add condensed, flush props

* fix(structured-list): deprecate the border prop

* fix(code-snippet): set min/max height for multi-line code snippet #656

Fixes #656

* fix(image-loader): make SSR compatible using a window type check guard

* docs(tag): add separate disabled example for filterable/interactive tags

* docs: update number of supported chart types

* feat(side-nav): support rail variant

* feat(ui-shell): add isSelected prop to HeaderNavItem

* fix(ui-shell): default isSelected to false in SideNavMenuItem

* fix(text-area): forward missing keydown event #665

Fixes #665

* feat: forward keyup event to components with inputs

* feat(checkbox): make labelText slottable #563

Closes #563

* feat: make labelText slottable

Related #563

* docs(component-api): account for undefined type

* docs(ui-shell): link to correct rail source

* fix(ui-shell): default isSelected in HeaderNavItem to false
This commit is contained in:
Eric Liu 2021-06-26 14:39:49 -07:00 • committed by GitHub
commit 8ddf2def8b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
57 changed files with 574 additions and 105 deletions
Download patch file Download diff file Expand all files Collapse all files

105
COMPONENT_INDEX.md
View file

@ -440,7 +440,9 @@ None.
### Slots
None.
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :----------------------- |
| labelText | No | -- | <code>{labelText}</code> |
### Events
@ -650,6 +652,7 @@ None.
| :--------- | :--------- | :------------------------------------------------------------------------------------- |
| select | dispatched | <code>{ selectedId: string; selectedIndex: number; selectedItem: ComboBoxItem }</code> |
| keydown | forwarded | -- |
| keyup | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
| clear | forwarded | -- |
@ -1055,7 +1058,9 @@ None.
### Slots
None.
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :----------------------- |
| labelText | No | -- | <code>{labelText}</code> |
### Events
@ -1063,6 +1068,7 @@ None.
| :--------- | :-------- | :----- |
| input | forwarded | -- |
| keydown | forwarded | -- |
| keyup | forwarded | -- |
| blur | forwarded | -- |
## `DatePickerSkeleton`
@ -1250,7 +1256,9 @@ None.
### Slots
None.
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :----------------------- |
| labelText | No | -- | <code>{labelText}</code> |
### Events
@ -1279,7 +1287,9 @@ None.
### Slots
None.
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :----------------------- |
| labelText | No | -- | <code>{labelText}</code> |
### Events
@ -1653,11 +1663,12 @@ 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 |
| 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
@ -2376,6 +2387,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 | -- |
@ -2759,7 +2771,9 @@ None.
### Slots
None.
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :----------------------- |
| labelText | No | -- | <code>{labelText}</code> |
### Events
@ -2772,6 +2786,7 @@ None.
| change | forwarded | -- |
| input | forwarded | -- |
| keydown | forwarded | -- |
| keyup | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
@ -2899,7 +2914,9 @@ None.
### Slots
None.
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :----------------------- |
| labelText | No | -- | <code>{labelText}</code> |
### Events
@ -3039,7 +3056,9 @@ None.
### Slots
None.
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :----------------------- |
| labelText | No | -- | <code>{labelText}</code> |
### Events
@ -3056,6 +3075,7 @@ None.
| focus | forwarded | -- |
| blur | forwarded | -- |
| keydown | forwarded | -- |
| keyup | forwarded | -- |
| clear | dispatched | -- |
## `SearchSkeleton`
@ -3105,9 +3125,10 @@ None.
### Slots
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| -- | Yes | -- | -- |
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :----------------------- |
| -- | Yes | -- | -- |
| labelText | No | -- | <code>{labelText}</code> |
### Events
@ -3216,6 +3237,7 @@ None.
| :-------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------------ |
| 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 |
### Slots
@ -3311,12 +3333,12 @@ 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 |
| href | <code>let</code> | No | <code>string</code> | -- | Specify the `href` attribute |
| text | <code>let</code> | No | <code>string</code> | -- | Specify the item text |
| 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> | <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 |
### Slots
@ -3420,7 +3442,9 @@ None.
### Slots
None.
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :----------------------- |
| labelText | No | -- | <code>{labelText}</code> |
### Events
@ -3461,6 +3485,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
@ -3960,7 +3986,9 @@ None.
### Slots
None.
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :----------------------- |
| labelText | No | -- | <code>{labelText}</code> |
### Events
@ -3972,6 +4000,8 @@ None.
| mouseleave | forwarded | -- |
| change | forwarded | -- |
| input | forwarded | -- |
| keydown | forwarded | -- |
| keyup | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
@ -4023,7 +4053,9 @@ None.
### Slots
None.
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :----------------------- |
| labelText | No | -- | <code>{labelText}</code> |
### Events
@ -4036,6 +4068,7 @@ None.
| change | forwarded | -- |
| input | forwarded | -- |
| keydown | forwarded | -- |
| keyup | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
@ -4129,9 +4162,10 @@ None.
### Slots
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| -- | Yes | -- | -- |
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :----------------------- |
| -- | Yes | -- | -- |
| labelText | No | -- | <code>{labelText}</code> |
### Events
@ -4143,6 +4177,8 @@ None.
| mouseleave | forwarded | -- |
| change | forwarded | -- |
| input | forwarded | -- |
| keydown | forwarded | -- |
| keyup | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
@ -4163,9 +4199,10 @@ None.
### Slots
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| -- | Yes | -- | -- |
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :----------------------- |
| -- | Yes | -- | -- |
| labelText | No | -- | <code>{labelText}</code> |
### Events
@ -4225,7 +4262,9 @@ None.
### Slots
None.
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :----------------------- |
| labelText | No | -- | <code>{labelText}</code> |
### Events
@ -4253,7 +4292,9 @@ None.
### Slots
None.
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :----------------------- |
| labelText | No | -- | <code>{labelText}</code> |
### Events

2
README.md
View file

@ -13,7 +13,7 @@ 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)**: 17 chart types, powered by d3
- **[Carbon Charts Svelte](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte)**: 20 chart types, powered by d3
## [Documentation](http://ibm.biz/carbon-svelte)

2
docs/package.json
View file

@ -11,7 +11,7 @@
"devDependencies": {
"@sveltech/routify": "^1.9.9",
"autoprefixer": "^10.2.3",
"carbon-components": "10.35.0",
"carbon-components": "10.36.0",
"carbon-components-svelte": "../",
"mdsvex": "^0.8.8",
"npm-run-all": "^4.1.5",

189
docs/src/COMPONENT_API.json
View file

@ -715,7 +715,14 @@
"reactive": true
}
],
"slots": [],
"slots": [
{
"name": "labelText",
"default": false,
"fallback": "{labelText}",
"slot_props": "{}"
}
],
"events": [
{ "type": "dispatched", "name": "check", "detail": "boolean" },
{ "type": "forwarded", "name": "click", "element": "CheckboxSkeleton" },
@ -1410,6 +1417,7 @@
"detail": "{ selectedId: string; selectedIndex: number; selectedItem: ComboBoxItem }"
},
{ "type": "forwarded", "name": "keydown", "element": "input" },
{ "type": "forwarded", "name": "keyup", "element": "input" },
{ "type": "forwarded", "name": "focus", "element": "input" },
{ "type": "forwarded", "name": "blur", "element": "input" },
{ "type": "forwarded", "name": "clear", "element": "ListBoxSelection" },
@ -2522,10 +2530,18 @@
"reactive": true
}
],
"slots": [],
"slots": [
{
"name": "labelText",
"default": false,
"fallback": "{labelText}",
"slot_props": "{}"
}
],
"events": [
{ "type": "forwarded", "name": "input", "element": "input" },
{ "type": "forwarded", "name": "keydown", "element": "input" },
{ "type": "forwarded", "name": "keyup", "element": "input" },
{ "type": "forwarded", "name": "blur", "element": "input" }
],
"typedefs": [],
@ -3216,7 +3232,14 @@
"reactive": true
}
],
"slots": [],
"slots": [
{
"name": "labelText",
"default": false,
"fallback": "{labelText}",
"slot_props": "{}"
}
],
"events": [
{ "type": "forwarded", "name": "keydown", "element": "label" },
{ "type": "forwarded", "name": "change", "element": "input" },
@ -3330,7 +3353,14 @@
"reactive": true
}
],
"slots": [],
"slots": [
{
"name": "labelText",
"default": false,
"fallback": "{labelText}",
"slot_props": "{}"
}
],
"events": [
{ "type": "dispatched", "name": "add", "detail": "FileList" },
{ "type": "forwarded", "name": "dragover", "element": "div" },
@ -4078,6 +4108,16 @@
"constant": false,
"reactive": false
},
{
"name": "isSelected",
"kind": "let",
"description": "Set to `true` to select the item",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "ref",
"kind": "let",
@ -5876,6 +5916,7 @@
},
{ "type": "dispatched", "name": "clear", "detail": "any" },
{ "type": "forwarded", "name": "keydown", "element": "input" },
{ "type": "forwarded", "name": "keyup", "element": "input" },
{ "type": "forwarded", "name": "focus", "element": "input" },
{ "type": "forwarded", "name": "blur", "element": "input" }
],
@ -7158,7 +7199,14 @@
"reactive": true
}
],
"slots": [],
"slots": [
{
"name": "labelText",
"default": false,
"fallback": "{labelText}",
"slot_props": "{}"
}
],
"events": [
{ "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "mouseover", "element": "div" },
@ -7167,6 +7215,7 @@
{ "type": "forwarded", "name": "change", "element": "input" },
{ "type": "forwarded", "name": "input", "element": "input" },
{ "type": "forwarded", "name": "keydown", "element": "input" },
{ "type": "forwarded", "name": "keyup", "element": "input" },
{ "type": "forwarded", "name": "focus", "element": "input" },
{ "type": "forwarded", "name": "blur", "element": "input" }
],
@ -7542,7 +7591,14 @@
"reactive": true
}
],
"slots": [],
"slots": [
{
"name": "labelText",
"default": false,
"fallback": "{labelText}",
"slot_props": "{}"
}
],
"events": [{ "type": "forwarded", "name": "change", "element": "input" }],
"typedefs": [],
"rest_props": { "type": "Element", "name": "div" }
@ -8009,7 +8065,14 @@
"reactive": true
}
],
"slots": [],
"slots": [
{
"name": "labelText",
"default": false,
"fallback": "{labelText}",
"slot_props": "{}"
}
],
"events": [
{ "type": "dispatched", "name": "expand", "detail": "any" },
{ "type": "dispatched", "name": "collapse", "detail": "any" },
@ -8034,6 +8097,7 @@
{ "type": "forwarded", "name": "focus", "element": "input" },
{ "type": "forwarded", "name": "blur", "element": "input" },
{ "type": "forwarded", "name": "keydown", "element": "input" },
{ "type": "forwarded", "name": "keyup", "element": "input" },
{ "type": "dispatched", "name": "clear" }
],
"typedefs": [],
@ -8235,7 +8299,15 @@
"reactive": true
}
],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"slots": [
{ "name": "__default__", "default": true, "slot_props": "{}" },
{
"name": "labelText",
"default": false,
"fallback": "{labelText}",
"slot_props": "{}"
}
],
"events": [
{ "type": "dispatched", "name": "change", "detail": "string" },
{ "type": "forwarded", "name": "blur", "element": "select" }
@ -8477,6 +8549,16 @@
"constant": false,
"reactive": false
},
{
"name": "rail",
"kind": "let",
"description": "Set to `true` to use the rail variant",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "ariaLabel",
"kind": "let",
@ -8637,6 +8719,7 @@
"kind": "let",
"description": "Set to `true` to select the item",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
@ -8963,7 +9046,14 @@
"reactive": true
}
],
"slots": [],
"slots": [
{
"name": "labelText",
"default": false,
"fallback": "{labelText}",
"slot_props": "{}"
}
],
"events": [
{ "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "mouseover", "element": "div" },
@ -9022,6 +9112,26 @@
"constant": false,
"reactive": false
},
{
"name": "condensed",
"kind": "let",
"description": "Set to `true` to use the condensed variant",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "flush",
"kind": "let",
"description": "Set to `true` to flush the list",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "selection",
"kind": "let",
@ -10017,7 +10127,14 @@
"reactive": true
}
],
"slots": [],
"slots": [
{
"name": "labelText",
"default": false,
"fallback": "{labelText}",
"slot_props": "{}"
}
],
"events": [
{ "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "mouseover", "element": "div" },
@ -10025,6 +10142,8 @@
{ "type": "forwarded", "name": "mouseleave", "element": "div" },
{ "type": "forwarded", "name": "change", "element": "textarea" },
{ "type": "forwarded", "name": "input", "element": "textarea" },
{ "type": "forwarded", "name": "keydown", "element": "textarea" },
{ "type": "forwarded", "name": "keyup", "element": "textarea" },
{ "type": "forwarded", "name": "focus", "element": "textarea" },
{ "type": "forwarded", "name": "blur", "element": "textarea" }
],
@ -10239,7 +10358,14 @@
"reactive": false
}
],
"slots": [],
"slots": [
{
"name": "labelText",
"default": false,
"fallback": "{labelText}",
"slot_props": "{}"
}
],
"events": [
{ "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "mouseover", "element": "div" },
@ -10248,6 +10374,7 @@
{ "type": "forwarded", "name": "change", "element": "input" },
{ "type": "forwarded", "name": "input", "element": "input" },
{ "type": "forwarded", "name": "keydown", "element": "input" },
{ "type": "forwarded", "name": "keyup", "element": "input" },
{ "type": "forwarded", "name": "focus", "element": "input" },
{ "type": "forwarded", "name": "blur", "element": "input" }
],
@ -10496,7 +10623,15 @@
"reactive": true
}
],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"slots": [
{ "name": "__default__", "default": true, "slot_props": "{}" },
{
"name": "labelText",
"default": false,
"fallback": "{labelText}",
"slot_props": "{}"
}
],
"events": [
{ "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "mouseover", "element": "div" },
@ -10504,6 +10639,8 @@
{ "type": "forwarded", "name": "mouseleave", "element": "div" },
{ "type": "forwarded", "name": "change", "element": "input" },
{ "type": "forwarded", "name": "input", "element": "input" },
{ "type": "forwarded", "name": "keydown", "element": "input" },
{ "type": "forwarded", "name": "keyup", "element": "input" },
{ "type": "forwarded", "name": "focus", "element": "input" },
{ "type": "forwarded", "name": "blur", "element": "input" }
],
@ -10593,7 +10730,15 @@
"reactive": true
}
],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"slots": [
{ "name": "__default__", "default": true, "slot_props": "{}" },
{
"name": "labelText",
"default": false,
"fallback": "{labelText}",
"slot_props": "{}"
}
],
"events": [
{ "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "mouseover", "element": "div" },
@ -10797,7 +10942,14 @@
"reactive": false
}
],
"slots": [],
"slots": [
{
"name": "labelText",
"default": false,
"fallback": "{labelText}",
"slot_props": "{}"
}
],
"events": [
{
"type": "dispatched",
@ -10851,7 +11003,14 @@
"reactive": false
}
],
"slots": [],
"slots": [
{
"name": "labelText",
"default": false,
"fallback": "{labelText}",
"slot_props": "{}"
}
],
"events": [
{ "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "mouseover", "element": "div" },

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

@ -78,10 +78,10 @@
{/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

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/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.

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>
</Header>
<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>
<Content>
<Grid>
<Row>
<Column>
<h1>Welcome</h1>
</Column>
</Row>
</Grid>
</Content>

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

@ -100,7 +100,7 @@
<Column xlg="{5}" lg="{8}" md="{4}">
<TileCard
title="Carbon Charts Svelte"
subtitle="17 chart types, powered by d3"
subtitle="20 chart types, powered by d3"
target="_blank"
href="https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte"
/>

10
docs/yarn.lock
View file

@ -837,16 +837,16 @@ caniuse-lite@^1.0.30001173, caniuse-lite@^1.0.30001178:
integrity sha512-n8JVqXuZMVSPKiPiypjFtDTXc4jWIdjxull0f92WLo7e1MSi3uJ3NvveakSh/aCl1QKFAvIz3vIj0v+0K+FrXw==
carbon-components-svelte@../:
version "0.34.0"
version "0.35.0"
dependencies:
carbon-icons-svelte "^10.27.0"
clipboard-copy "3.2.0"
flatpickr "4.6.9"
carbon-components@10.35.0:
version "10.35.0"
resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.35.0.tgz#2669d8f6f989a5dc96843c43a5ac12e4a9c3dfa7"
integrity sha512-1njVUjaN/+gVd5WkHPW4EkmweZvpsWOaUP2FgRglxLQNtRXbi902HJYsl9mufV3Op/oGvN4rSdtttxgYCf8YFg==
carbon-components@10.36.0:
version "10.36.0"
resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.36.0.tgz#ce523b19df3a404e379113dafbbe0219bb22b17f"
integrity sha512-k+UR+Whz/qXbev2RT9JjV+QbkSKcHrLNF25bEpr3KZHmpCGhwGz5mVyv0ohZ4B6rKkpuvlgYfLsANL0yQX77zA==
dependencies:
"@carbon/telemetry" "0.0.0-alpha.6"
flatpickr "4.6.1"

2
package.json
View file

@ -32,7 +32,7 @@
"@rollup/plugin-node-resolve": "^11.1.1",
"@tsconfig/svelte": "^1.0.10",
"autoprefixer": "^10.2.4",
"carbon-components": "10.35.0",
"carbon-components": "10.36.0",
"gh-pages": "^3.1.0",
"husky": "^4.3.8",
"lint-staged": "^10.5.3",

4
src/Checkbox/Checkbox.svelte
View file

@ -85,7 +85,9 @@
class:bx--checkbox-label-text="{true}"
class:bx--visually-hidden="{hideLabel}"
>
{labelText}
<slot name="labelText">
{labelText}
</slot>
</span>
</label>
</div>

3
src/CodeSnippet/CodeSnippet.svelte
View file

@ -97,6 +97,8 @@
}
$: expandText = expanded ? showLessText : showMoreText;
$: minHeight = expanded ? 16 * 15 : 48;
$: maxHeight = expanded ? "none" : 16 * 15 + "px";
$: if (type === "multi" && ref) {
if (code === undefined) setShowMoreLess();
if (code) tick().then(setShowMoreLess);
@ -178,6 +180,7 @@
tabindex="{type === 'single' && !disabled ? '0' : undefined}"
aria-label="{$$restProps['aria-label'] || copyLabel || 'code-snippet'}"
class:bx--snippet-container="{true}"
style="width: 100%; min-height: {minHeight}px; max-height: {maxHeight}"
>
<pre
bind:this="{ref}">

1
src/ComboBox/ComboBox.svelte
View file

@ -238,6 +238,7 @@
open = false;
}
}}"
on:keyup
on:focus
on:blur
on:blur="{({ relatedTarget }) => {

5
src/DatePicker/DatePickerInput.svelte
View file

@ -85,7 +85,9 @@
class:bx--visually-hidden="{hideLabel}"
class:bx--label--disabled="{disabled}"
>
{labelText}
<slot name="labelText">
{labelText}
</slot>
</label>
{/if}
<div
@ -120,6 +122,7 @@
focusCalendar();
}
}}"
on:keyup
on:blur
on:blur="{({ relatedTarget }) => {
blurInput(relatedTarget);

6
src/FileUploader/FileUploaderButton.svelte
View file

@ -54,7 +54,11 @@
}
}}"
>
<span role="{role}">{labelText}</span>
<span role="{role}">
<slot name="labelText">
{labelText}
</slot>
</span>
</label>
<input
bind:this="{ref}"

4
src/FileUploader/FileUploaderDropContainer.svelte
View file

@ -89,7 +89,9 @@
class:bx--file__drop-container="{true}"
class:bx--file__drop-container--drag-over="{over}"
>
{labelText}
<slot name="labelText">
{labelText}
</slot>
<input
bind:this="{ref}"
type="file"

2
src/ImageLoader/ImageLoader.svelte
View file

@ -67,7 +67,7 @@
let image = null;
$: loading = !loaded && !error;
$: if (src) loadImage();
$: if (src && typeof window !== "undefined") loadImage();
$: if (loaded) dispatch("load");
$: if (error) dispatch("error");

1
src/MultiSelect/MultiSelect.svelte
View file

@ -382,6 +382,7 @@
change(-1);
}
}}"
on:keyup
on:focus
on:blur
on:blur="{({ relatedTarget }) => {

6
src/RadioButton/RadioButton.svelte
View file

@ -68,7 +68,11 @@
<label class:bx--radio-button__label="{true}" for="{id}">
<span class:bx--radio-button__appearance="{true}"></span>
{#if labelText}
<span class:bx--visually-hidden="{hideLabel}">{labelText}</span>
<span class:bx--visually-hidden="{hideLabel}">
<slot name="labelText">
{labelText}
</slot>
</span>
{/if}
</label>
</div>

9
src/Search/Search.svelte
View file

@ -117,9 +117,11 @@
>
<svelte:component this="{icon}" class="bx--search-magnifier-icon" />
</div>
<label id="{id}-search" for="{id}" class:bx--label="{true}"
>{labelText}</label
>
<label id="{id}-search" for="{id}" class:bx--label="{true}">
<slot name="labelText">
{labelText}
</slot>
</label>
<!-- svelte-ignore a11y-autofocus -->
<input
bind:this="{ref}"
@ -155,6 +157,7 @@
dispatch('clear');
}
}}"
on:keyup
/>
<button
type="button"

4
src/Select/Select.svelte
View file

@ -96,7 +96,9 @@
class:bx--visually-hidden="{hideLabel}"
class:bx--label--disabled="{disabled}"
>
{labelText}
<slot name="labelText">
{labelText}
</slot>
</label>
{/if}
{#if inline}

4
src/Slider/Slider.svelte
View file

@ -137,7 +137,9 @@
class:bx--label="{true}"
class:bx--label--disabled="{disabled}"
>
{labelText}
<slot name="labelText">
{labelText}
</slot>
</label>
<div class:bx--slider-container="{true}">
<span class:bx--slider__range-label="{true}">{minLabel || min}</span>

13
src/StructuredList/StructuredList.svelte
View file

@ -5,9 +5,18 @@
*/
export let selected = undefined;
/** Set to `true` to use the bordered variant */
/**
* Set to `true` to use the bordered variant
* @deprecated
*/
export let border = false;
/** Set to `true` to use the condensed variant */
export let condensed = false;
/** Set to `true` to flush the list */
export let flush = false;
/** Set to `true` to use the selection variant */
export let selection = false;
@ -33,6 +42,8 @@
class:bx--structured-list="{true}"
class:bx--structured-list--border="{border}"
class:bx--structured-list--selection="{selection}"
class:bx--structured-list--condensed="{condensed}"
class:bx--structured-list--flush="{flush}"
{...$$restProps}
on:click
on:mouseover

6
src/TextArea/TextArea.svelte
View file

@ -63,7 +63,9 @@
class:bx--visually-hidden="{hideLabel}"
class:bx--label--disabled="{disabled}"
>
{labelText}
<slot name="labelText">
{labelText}
</slot>
</label>
{/if}
<div
@ -93,6 +95,8 @@
on:input="{({ target }) => {
value = target.value;
}}"
on:keydown
on:keyup
on:focus
on:blur></textarea>
</div>

9
src/TextInput/PasswordInput.svelte
View file

@ -114,7 +114,9 @@
class:bx--label--inline--sm="{inline && size === 'sm'}"
class:bx--label--inline--xl="{inline && size === 'xl'}"
>
{labelText}
<slot name="labelText">
{labelText}
</slot>
</label>
{#if !isFluid && helperText}
<div
@ -135,7 +137,9 @@
class:bx--label--inline--sm="{inline && size === 'sm'}"
class:bx--label--inline--xl="{inline && size === 'xl'}"
>
{labelText}
<slot name="labelText">
{labelText}
</slot>
</label>
{/if}
<div
@ -180,6 +184,7 @@
value = target.value;
}}"
on:keydown
on:keyup
on:focus
on:blur
/>

9
src/TextInput/TextInput.svelte
View file

@ -93,7 +93,9 @@
class:bx--label--inline="{inline}"
class="{inline && !!size && `bx--label--inline--${size}`}"
>
{labelText}
<slot name="labelText">
{labelText}
</slot>
</label>
{/if}
{#if !isFluid && helperText}
@ -116,7 +118,9 @@
class:bx--label--inline="{inline}"
class="{inline && !!size && `bx--label--inline--${size}`}"
>
{labelText}
<slot name="labelText">
{labelText}
</slot>
</label>
{/if}
<div
@ -163,6 +167,7 @@
value = target.value;
}}"
on:keydown
on:keyup
on:focus
on:blur
/>

6
src/TimePicker/TimePicker.svelte
View file

@ -80,7 +80,9 @@
class:bx--visually-hidden="{hideLabel}"
class:bx--label--disabled="{disabled}"
>
{labelText}
<slot name="labelText">
{labelText}
</slot>
</label>
{/if}
<input
@ -104,6 +106,8 @@
on:input="{({ target }) => {
value = target.value;
}}"
on:keydown
on:keyup
on:focus
on:blur
/>

4
src/TimePicker/TimePickerSelect.svelte
View file

@ -60,7 +60,9 @@
class:bx--visually-hidden="{hideLabel}"
>
<!-- TODO: set to always be `true` after `hideLabel` is deprecated -->
{labelText}
<slot name="labelText">
{labelText}
</slot>
</label>
{/if}
<!-- svelte-ignore a11y-no-onchange -->

4
src/Toggle/Toggle.svelte
View file

@ -75,7 +75,9 @@
for="{id}"
class:bx--toggle-input__label="{true}"
>
{labelText}
<slot name="labelText">
{labelText}
</slot>
<span class:bx--toggle__switch="{true}">
<span aria-hidden="true" class:bx--toggle__text--off="{true}">
{labelA}

6
src/Toggle/ToggleSkeleton.svelte
View file

@ -36,7 +36,11 @@
class:bx--skeleton="{true}"
>
{#if labelText}
<span class:bx--toggle__label-text="{true}">{labelText}</span>
<span class:bx--toggle__label-text="{true}">
<slot name="labelText">
{labelText}
</slot>
</span>
{/if}
<span class:bx--toggle__text--left="{true}"></span>
<span class:bx--toggle__appearance="{true}"></span>

4
src/UIShell/GlobalHeader/HeaderNavItem.svelte
View file

@ -11,6 +11,9 @@
*/
export let text = undefined;
/** Set to `true` to select the item */
export let isSelected = false;
/** Obtain a reference to the HTML anchor element */
export let ref = null;
</script>
@ -23,6 +26,7 @@
href="{href}"
rel="{$$restProps.target === '_blank' ? 'noopener noreferrer' : undefined}"
class:bx--header__menu-item="{true}"
aria-current="{isSelected ? 'page' : undefined}"
{...$$restProps}
on:click
on:mouseover

8
src/UIShell/SideNav/SideNav.svelte
View file

@ -8,6 +8,9 @@
/** Set to `true` to use the fixed variant */
export let fixed = false;
/** Set to `true` to use the rail variant */
export let rail = false;
/**
* Specify the ARIA label for the nav
* @type {string}
@ -46,8 +49,9 @@
class:bx--side-nav__navigation="{true}"
class:bx--side-nav="{true}"
class:bx--side-nav--ux="{true}"
class:bx--side-nav--expanded="{isOpen}"
class:bx--side-nav--collapsed="{!isOpen}"
class:bx--side-nav--expanded="{isOpen && !rail}"
class:bx--side-nav--collapsed="{!isOpen && !rail}"
class:bx--side-nav--rail="{rail}"
{...$$restProps}
>
<slot />

7
src/UIShell/SideNav/SideNavMenuItem.svelte
View file

@ -1,9 +1,6 @@
<script>
/**
* Set to `true` to select the item
* @type {boolean}
*/
export let isSelected = undefined;
/** Set to `true` to select the item */
export let isSelected = false;
/**
* Specify the `href` attribute

2
types/Checkbox/Checkbox.d.ts vendored
View file

@ -78,5 +78,5 @@ export default class Checkbox extends SvelteComponentTyped<
mouseleave: WindowEventMap["mouseleave"];
change: WindowEventMap["change"];
},
{}
{ labelText: {} }
> {}

1
types/ComboBox/ComboBox.d.ts vendored
View file

@ -147,6 +147,7 @@ export default class ComboBox extends SvelteComponentTyped<
selectedItem: ComboBoxItem;
}>;
keydown: WindowEventMap["keydown"];
keyup: WindowEventMap["keyup"];
focus: WindowEventMap["focus"];
blur: WindowEventMap["blur"];
clear: WindowEventMap["clear"];

3
types/DatePicker/DatePickerInput.d.ts vendored
View file

@ -97,7 +97,8 @@ export default class DatePickerInput extends SvelteComponentTyped<
{
input: WindowEventMap["input"];
keydown: WindowEventMap["keydown"];
keyup: WindowEventMap["keyup"];
blur: WindowEventMap["blur"];
},
{}
{ labelText: {} }
> {}

2
types/FileUploader/FileUploaderButton.d.ts vendored
View file

@ -77,5 +77,5 @@ export default class FileUploaderButton extends SvelteComponentTyped<
change: WindowEventMap["change"];
click: WindowEventMap["click"];
},
{}
{ labelText: {} }
> {}

2
types/FileUploader/FileUploaderDropContainer.d.ts vendored
View file

@ -76,5 +76,5 @@ export default class FileUploaderDropContainer extends SvelteComponentTyped<
change: WindowEventMap["change"];
click: WindowEventMap["click"];
},
{}
{ labelText: {} }
> {}

1
types/MultiSelect/MultiSelect.d.ts vendored
View file

@ -192,6 +192,7 @@ export default class MultiSelect extends SvelteComponentTyped<
}>;
clear: CustomEvent<any>;
keydown: WindowEventMap["keydown"];
keyup: WindowEventMap["keyup"];
focus: WindowEventMap["focus"];
blur: WindowEventMap["blur"];
},

2
types/RadioButton/RadioButton.d.ts vendored
View file

@ -61,5 +61,5 @@ export interface RadioButtonProps
export default class RadioButton extends SvelteComponentTyped<
RadioButtonProps,
{ change: WindowEventMap["change"] },
{}
{ labelText: {} }
> {}

3
types/Search/Search.d.ts vendored
View file

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

2
types/Select/Select.d.ts vendored
View file

@ -100,5 +100,5 @@ export interface SelectProps
export default class Select extends SvelteComponentTyped<
SelectProps,
{ change: CustomEvent<string>; blur: WindowEventMap["blur"] },
{ default: {} }
{ default: {}; labelText: {} }
> {}

2
types/Slider/Slider.d.ts vendored
View file

@ -115,5 +115,5 @@ export default class Slider extends SvelteComponentTyped<
mouseleave: WindowEventMap["mouseleave"];
change: CustomEvent<any>;
},
{}
{ labelText: {} }
> {}

12
types/StructuredList/StructuredList.d.ts vendored
View file

@ -14,6 +14,18 @@ export interface StructuredListProps
*/
border?: boolean;
/**
* Set to `true` to use the condensed variant
* @default false
*/
condensed?: boolean;
/**
* Set to `true` to flush the list
* @default false
*/
flush?: boolean;
/**
* Set to `true` to use the selection variant
* @default false

4
types/TextArea/TextArea.d.ts vendored
View file

@ -96,8 +96,10 @@ export default class TextArea extends SvelteComponentTyped<
mouseleave: WindowEventMap["mouseleave"];
change: WindowEventMap["change"];
input: WindowEventMap["input"];
keydown: WindowEventMap["keydown"];
keyup: WindowEventMap["keyup"];
focus: WindowEventMap["focus"];
blur: WindowEventMap["blur"];
},
{}
{ labelText: {} }
> {}

3
types/TextInput/PasswordInput.d.ts vendored
View file

@ -138,8 +138,9 @@ export default class PasswordInput extends SvelteComponentTyped<
change: WindowEventMap["change"];
input: WindowEventMap["input"];
keydown: WindowEventMap["keydown"];
keyup: WindowEventMap["keyup"];
focus: WindowEventMap["focus"];
blur: WindowEventMap["blur"];
},
{}
{ labelText: {} }
> {}

3
types/TextInput/TextInput.d.ts vendored
View file

@ -120,8 +120,9 @@ export default class TextInput extends SvelteComponentTyped<
change: WindowEventMap["change"];
input: WindowEventMap["input"];
keydown: WindowEventMap["keydown"];
keyup: WindowEventMap["keyup"];
focus: WindowEventMap["focus"];
blur: WindowEventMap["blur"];
},
{}
{ labelText: {} }
> {}

4
types/TimePicker/TimePicker.d.ts vendored
View file

@ -101,8 +101,10 @@ export default class TimePicker extends SvelteComponentTyped<
mouseleave: WindowEventMap["mouseleave"];
change: WindowEventMap["change"];
input: WindowEventMap["input"];
keydown: WindowEventMap["keydown"];
keyup: WindowEventMap["keyup"];
focus: WindowEventMap["focus"];
blur: WindowEventMap["blur"];
},
{ default: {} }
{ default: {}; labelText: {} }
> {}

2
types/TimePicker/TimePickerSelect.d.ts vendored
View file

@ -58,5 +58,5 @@ export default class TimePickerSelect extends SvelteComponentTyped<
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
},
{ default: {} }
{ default: {}; labelText: {} }
> {}

2
types/Toggle/Toggle.d.ts vendored
View file

@ -64,5 +64,5 @@ export default class Toggle extends SvelteComponentTyped<
focus: WindowEventMap["focus"];
blur: WindowEventMap["blur"];
},
{}
{ labelText: {} }
> {}

2
types/Toggle/ToggleSkeleton.d.ts vendored
View file

@ -30,5 +30,5 @@ export default class ToggleSkeleton extends SvelteComponentTyped<
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
},
{}
{ labelText: {} }
> {}

6
types/UIShell/GlobalHeader/HeaderNavItem.d.ts vendored
View file

@ -13,6 +13,12 @@ export interface HeaderNavItemProps
*/
text?: string;
/**
* Set to `true` to select the item
* @default false
*/
isSelected?: boolean;
/**
* Obtain a reference to the HTML anchor element
* @default null

6
types/UIShell/SideNav/SideNav.d.ts vendored
View file

@ -9,6 +9,12 @@ export interface SideNavProps
*/
fixed?: boolean;
/**
* Set to `true` to use the rail variant
* @default false
*/
rail?: boolean;
/**
* Specify the ARIA label for the nav
*/

1
types/UIShell/SideNav/SideNavMenuItem.d.ts vendored
View file

@ -5,6 +5,7 @@ export interface SideNavMenuItemProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["a"]> {
/**
* Set to `true` to select the item
* @default false
*/
isSelected?: boolean;

8
yarn.lock
View file

@ -453,10 +453,10 @@ caniuse-lite@^1.0.30001181:
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001183.tgz#7a57ba9d6584119bb5f2bc76d3cc47ba9356b3e2"
integrity sha512-7JkwTEE1hlRKETbCFd8HDZeLiQIUcl8rC6JgNjvHCNaxOeNmQ9V4LvQXRUsKIV2CC73qKxljwVhToaA3kLRqTw==
carbon-components@10.35.0:
version "10.35.0"
resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.35.0.tgz#2669d8f6f989a5dc96843c43a5ac12e4a9c3dfa7"
integrity sha512-1njVUjaN/+gVd5WkHPW4EkmweZvpsWOaUP2FgRglxLQNtRXbi902HJYsl9mufV3Op/oGvN4rSdtttxgYCf8YFg==
carbon-components@10.36.0:
version "10.36.0"
resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.36.0.tgz#ce523b19df3a404e379113dafbbe0219bb22b17f"
integrity sha512-k+UR+Whz/qXbev2RT9JjV+QbkSKcHrLNF25bEpr3KZHmpCGhwGz5mVyv0ohZ4B6rKkpuvlgYfLsANL0yQX77zA==
dependencies:
"@carbon/telemetry" "0.0.0-alpha.6"
flatpickr "4.6.1"