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

refactor: use icons from carbon-icons-svelte@11 (#1227)

Browse source 
* chore: update ignore rules, remove unused files

* refactor(icons): use icons from carbon-icons-svelte@11

* docs(time-picker): fix default value

* chore: upgrade carbon-icons-svelte to v11

* docs: update examples to use icons from carbon-icons-svelte@11

* docs: update number of icons [ci skip]
This commit is contained in:
metonym 2022-04-03 11:57:28 -07:00 • committed by GitHub
commit ba58ba8f00
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
176 changed files with 1410 additions and 2487 deletions
Download patch file Download diff file Expand all files Collapse all files

8
.gitignore vendored
View file

@ -1,9 +1,5 @@
/coverage lib
/lib node_modules
/node_modules
.DS_Store .DS_Store
yarn-debug.log*
yarn-error.log*
*.tgz
.vscode .vscode
.idea .idea

12
.prettierignore
View file

@ -1,9 +1,9 @@
/coverage
/lib /lib
/css /css
/**/__sapper__ __sapper__
/**/.routify .svelte-kit
/**/dist .routify
/**/client dist
/**/build client
build
*.svx *.svx

0
CODEOWNERS
View file

30
COMPONENT_INDEX.md
View file

@ -1564,8 +1564,8 @@ None.
| 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;) | | 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 | | 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 | | 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("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render for the closed state<br />Defaults to `Menu20` | | iconMenu | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render for the closed state.<br />Defaults to `&lt;Menu size={20} /&gt;` |
| iconClose | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render for the opened state<br />Defaults to `Close20` | | iconClose | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render for the opened state.<br />Defaults to `&lt;Close size={20} /&gt;` |
### Slots ### Slots
@ -1589,18 +1589,18 @@ None.
| :--------- | :--------------- | :------- | :---------------------------------------------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------- | | :--------- | :--------------- | :------- | :---------------------------------------------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element | | ref | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element |
| isOpen | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the panel | | isOpen | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the panel |
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render | | icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render when the action panel is closed.<br />Defaults to `&lt;Switcher size={20} /&gt;` |
| closeIcon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render when the action panel is open | | closeIcon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render when the action panel is open.<br />Defaults to `&lt;Close size={20} /&gt;` |
| text | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the text<br />Alternatively, use the named slot "text" (e.g., &lt;div slot="text"&gt;...&lt;/div&gt;) | | text | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the text<br />Alternatively, use the named slot "text" (e.g., &lt;div slot="text"&gt;...&lt;/div&gt;) |
| transition | <code>let</code> | No | <code>false &#124; import("svelte/transition").SlideParams</code> | <code>{ duration: 200 }</code> | Customize the panel transition (i.e., `transition:slide`).<br />Set to `false` to disable the transition | | transition | <code>let</code> | No | <code>false &#124; import("svelte/transition").SlideParams</code> | <code>{ duration: 200 }</code> | Customize the panel transition (i.e., `transition:slide`).<br />Set to `false` to disable the transition |
### Slots ### Slots
| Slot name | Default | Props | Fallback | | Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :---------------------------------------------------------- | | :-------- | :------ | :---- | :--------------------------------------------------------------------- |
| -- | Yes | -- | -- | | -- | Yes | -- | -- |
| closeIcon | No | -- | <code>&lt;svelte:component this="{closeIcon}" /&gt;</code> | | closeIcon | No | -- | <code>&lt;svelte:component this="{closeIcon}" size="{20}" /&gt;</code> |
| icon | No | -- | <code>&lt;svelte:component this="{icon}" /&gt;</code> | | icon | No | -- | <code>&lt;svelte:component this="{icon}" size="{20}" /&gt;</code> |
| text | No | -- | <code>{#if text}&lt;span&gt;{text}&lt;/span&gt;{/if}</code> | | text | No | -- | <code>{#if text}&lt;span&gt;{text}&lt;/span&gt;{/if}</code> |
### Events ### Events
@ -1624,8 +1624,8 @@ None.
### Slots ### Slots
| Slot name | Default | Props | Fallback | | Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :---------------------------------------------------- | | :-------- | :------ | :---- | :---------------------------------------------------------------- |
| icon | No | -- | <code>&lt;svelte:component this="{icon}" /&gt;</code> | | icon | No | -- | <code>&lt;svelte:component this="{icon}" size="{20}" /&gt;</code> |
### Events ### Events
@ -2569,10 +2569,10 @@ None.
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :--------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------- | | :--------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------- |
| menuRef | <code>let</code> | Yes | <code>null &#124; HTMLUListElement</code> | <code>null</code> | Obtain a reference to the overflow menu element | | menuRef | <code>let</code> | Yes | <code>null &#124; HTMLUListElement</code> | <code>null</code> | Obtain a reference to the overflow menu element |
| buttonRef | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the trigger button element | | buttonRef | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the trigger button element |
| icon | <code>let</code> | Yes | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render | | icon | <code>let</code> | Yes | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render.<br />Defaults to `&lt;OverflowMenuVertical /&gt;` |
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the menu | | open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the menu |
| size | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | <code>undefined</code> | Specify the size of the overflow menu | | size | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | <code>undefined</code> | Specify the size of the overflow menu |
| direction | <code>let</code> | No | <code>"top" &#124; "bottom"</code> | <code>"bottom"</code> | Specify the direction of the overflow menu relative to the button | | direction | <code>let</code> | No | <code>"top" &#124; "bottom"</code> | <code>"bottom"</code> | Specify the direction of the overflow menu relative to the button |
@ -3056,7 +3056,7 @@ None.
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | 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 | | ref | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| expanded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true to expand the search input | | expanded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true to expand the search input |
| value | <code>let</code> | Yes | <code>any</code> | <code>""</code> | Specify the value of the search input | | value | <code>let</code> | Yes | <code>any</code> | <code>""</code> | Specify the value of the search input |
@ -3071,7 +3071,7 @@ None.
| autofocus | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to auto focus the search element | | 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 | | 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 | | labelText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render | | icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render.<br />Defaults to `&lt;Search /&gt;` |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element | | id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
### Slots ### Slots
@ -4491,7 +4491,7 @@ None.
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :-------------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------- | | :-------------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------ |
| refIcon | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the icon HTML element | | refIcon | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the icon HTML element |
| refTooltip | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the tooltip HTML element | | refTooltip | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the tooltip HTML element |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the trigger text HTML element | | ref | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the trigger text HTML element |
@ -4499,7 +4499,7 @@ None.
| 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 | | 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 button | | 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 button |
| hideIcon | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the tooltip icon | | hideIcon | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the tooltip icon |
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render for the tooltip button<br />Icon size must be 16px (e.g., `Add16`, `Task16`) | | icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render for the tooltip button.<br />Default to `&lt;Information /&gt;` |
| iconDescription | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the ARIA label for the tooltip button | | iconDescription | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the ARIA label for the tooltip button |
| iconName | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the icon name attribute | | iconName | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the icon name attribute |
| tabindex | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Set the button tabindex | | tabindex | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Set the button tabindex |

1
MAINTAINERS.md
View file

@ -1 +0,0 @@
# Maintainers

6
README.md
View file

@ -10,7 +10,7 @@ Design systems facilitate design and development through reuse, consistency, and
The Carbon Svelte portfolio also includes: The Carbon Svelte portfolio also includes:
- **[Carbon Icons Svelte](https://github.com/carbon-design-system/carbon-icons-svelte)**: 7000+ Carbon icons as Svelte components - **[Carbon Icons Svelte](https://github.com/carbon-design-system/carbon-icons-svelte)**: 1900+ Carbon icons as Svelte components
- **[Carbon Pictograms Svelte](https://github.com/carbon-design-system/carbon-pictograms-svelte)**: 700+ Carbon pictograms 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 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 - **[Carbon Preprocess Svelte](https://github.com/carbon-design-system/carbon-preprocess-svelte)**: Collection of Svelte preprocessors for Carbon
@ -219,8 +219,8 @@ The preprocessor optimizes imports from the following packages:
- import { Add16 } from "carbon-icons-svelte"; - import { Add16 } from "carbon-icons-svelte";
- import { Airplane } from "carbon-pictograms-svelte"; - import { Airplane } from "carbon-pictograms-svelte";
+ import Button from "carbon-components-svelte/src/Button/Button.svelte"; + import Button from "carbon-components-svelte/src/Button/Button.svelte";
+ import Add16 from "carbon-icons-svelte/lib/Add16/Add16.svelte"; + import Add16 from "carbon-icons-svelte/lib/Add16.svelte";
+ import Airplane from "carbon-pictograms-svelte/lib/Airplane/Airplane.svelte"; + import Airplane from "carbon-pictograms-svelte/lib/Airplane.svelte";
``` ```
#### Usage #### Usage

2
docs/package.json
View file

@ -12,7 +12,7 @@
"@sveltech/routify": "^1.9.10", "@sveltech/routify": "^1.9.10",
"@sveltejs/vite-plugin-svelte": "^1.0.0-next.40", "@sveltejs/vite-plugin-svelte": "^1.0.0-next.40",
"carbon-components-svelte": "../", "carbon-components-svelte": "../",
"carbon-icons-svelte": "^10.45.1", "carbon-icons-svelte": "^11.0.1",
"clipboard-copy": "^4.0.1", "clipboard-copy": "^4.0.1",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"mdsvex": "^0.9.8", "mdsvex": "^0.9.8",

24
docs/src/COMPONENT_API.json
View file

@ -4053,8 +4053,8 @@
"moduleExports": [], "moduleExports": [],
"slots": [], "slots": [],
"events": [ "events": [
{ "type": "forwarded", "name": "click", "element": "Close16" }, { "type": "forwarded", "name": "click", "element": "Close" },
{ "type": "forwarded", "name": "keydown", "element": "Close16" } { "type": "forwarded", "name": "keydown", "element": "Close" }
], ],
"typedefs": [], "typedefs": [],
"rest_props": { "type": "InlineComponent", "name": "Loading" } "rest_props": { "type": "InlineComponent", "name": "Loading" }
@ -4437,7 +4437,7 @@
{ {
"name": "iconMenu", "name": "iconMenu",
"kind": "let", "kind": "let",
"description": "Specify the icon to render for the closed state\nDefaults to `Menu20`", "description": "Specify the icon to render for the closed state.\nDefaults to `<Menu size={20} />`",
"type": "typeof import(\"svelte\").SvelteComponent", "type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -4447,7 +4447,7 @@
{ {
"name": "iconClose", "name": "iconClose",
"kind": "let", "kind": "let",
"description": "Specify the icon to render for the opened state\nDefaults to `Close20`", "description": "Specify the icon to render for the opened state.\nDefaults to `<Close size={20} />`",
"type": "typeof import(\"svelte\").SvelteComponent", "type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -4488,7 +4488,7 @@
{ {
"name": "icon", "name": "icon",
"kind": "let", "kind": "let",
"description": "Specify the icon to render", "description": "Specify the icon to render when the action panel is closed.\nDefaults to `<Switcher size={20} />`",
"type": "typeof import(\"svelte\").SvelteComponent", "type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -4498,7 +4498,7 @@
{ {
"name": "closeIcon", "name": "closeIcon",
"kind": "let", "kind": "let",
"description": "Specify the icon to render when the action panel is open", "description": "Specify the icon to render when the action panel is open.\nDefaults to `<Close size={20} />`",
"type": "typeof import(\"svelte\").SvelteComponent", "type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -4544,13 +4544,13 @@
{ {
"name": "closeIcon", "name": "closeIcon",
"default": false, "default": false,
"fallback": "<svelte:component this=\"{closeIcon}\" />", "fallback": "<svelte:component this=\"{closeIcon}\" size=\"{20}\" />",
"slot_props": "{}" "slot_props": "{}"
}, },
{ {
"name": "icon", "name": "icon",
"default": false, "default": false,
"fallback": "<svelte:component this=\"{icon}\" />", "fallback": "<svelte:component this=\"{icon}\" size=\"{20}\" />",
"slot_props": "{}" "slot_props": "{}"
}, },
{ {
@ -4619,7 +4619,7 @@
{ {
"name": "icon", "name": "icon",
"default": false, "default": false,
"fallback": "<svelte:component this=\"{icon}\" />", "fallback": "<svelte:component this=\"{icon}\" size=\"{20}\" />",
"slot_props": "{}" "slot_props": "{}"
} }
], ],
@ -7371,7 +7371,7 @@
{ {
"name": "icon", "name": "icon",
"kind": "let", "kind": "let",
"description": "Specify the icon to render", "description": "Specify the icon to render.\nDefaults to `<OverflowMenuVertical />`",
"type": "typeof import(\"svelte\").SvelteComponent", "type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -9183,7 +9183,7 @@
{ {
"name": "icon", "name": "icon",
"kind": "let", "kind": "let",
"description": "Specify the icon to render", "description": "Specify the icon to render.\nDefaults to `<Search />`",
"type": "typeof import(\"svelte\").SvelteComponent", "type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -12860,7 +12860,7 @@
{ {
"name": "icon", "name": "icon",
"kind": "let", "kind": "let",
"description": "Specify the icon to render for the tooltip button\nIcon size must be 16px (e.g., `Add16`, `Task16`)", "description": "Specify the icon to render for the tooltip button.\nDefault to `<Information />`",
"type": "typeof import(\"svelte\").SvelteComponent", "type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,

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

@ -6,7 +6,7 @@
import copy from "clipboard-copy"; import copy from "clipboard-copy";
import { CodeSnippet, Button } from "carbon-components-svelte"; import { CodeSnippet, Button } from "carbon-components-svelte";
import Launch16 from "carbon-icons-svelte/lib/Launch16"; import Launch from "carbon-icons-svelte/lib/Launch.svelte";
import { url } from "@sveltech/routify"; import { url } from "@sveltech/routify";
import { theme } from "../store"; import { theme } from "../store";
@ -27,7 +27,7 @@
target="_blank" target="_blank"
size="field" size="field"
href="{themedSrcUrl}" href="{themedSrcUrl}"
icon="{Launch16}" icon="{Launch}"
> >
Open in new tab Open in new tab
</Button> </Button>

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

@ -6,8 +6,8 @@
export let borderBottom = false; export let borderBottom = false;
import { AspectRatio, ClickableTile, Tile } from "carbon-components-svelte"; import { AspectRatio, ClickableTile, Tile } from "carbon-components-svelte";
import LogoGithub32 from "carbon-icons-svelte/lib/LogoGithub32"; import LogoGithub from "carbon-icons-svelte/lib/LogoGithub.svelte";
import Launch20 from "carbon-icons-svelte/lib/Launch20"; import Launch from "carbon-icons-svelte/lib/Launch.svelte";
$: tileComponent = href ? ClickableTile : Tile; $: tileComponent = href ? ClickableTile : Tile;
</script> </script>
@ -29,10 +29,11 @@
</div> </div>
<div class="card-footer"> <div class="card-footer">
<svelte:component <svelte:component
this="{LogoGithub32}" this="{LogoGithub}"
size="{32}"
style="fill: var(--cds-icon-01)" style="fill: var(--cds-icon-01)"
/> />
<Launch20 style="fill: var(--cds-icon-01)" /> <Launch size="{20}" style="fill: var(--cds-icon-01)" />
</div> </div>
</div> </div>
</svelte:component> </svelte:component>

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

@ -13,7 +13,7 @@
Tab, Tab,
TabContent, TabContent,
} from "carbon-components-svelte"; } from "carbon-components-svelte";
import Code16 from "carbon-icons-svelte/lib/Code16"; import Code from "carbon-icons-svelte/lib/Code.svelte";
import { page, metatags } from "@sveltech/routify"; import { page, metatags } from "@sveltech/routify";
import { onMount } from "svelte"; import { onMount } from "svelte";
import { theme } from "../store"; import { theme } from "../store";
@ -71,7 +71,7 @@
target="_blank" target="_blank"
size="field" size="field"
href="{sourceCode}" href="{sourceCode}"
icon="{Code16}" icon="{Code}"
> >
Source code Source code
</Button> </Button>

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

@ -15,7 +15,7 @@
SideNavMenuItem, SideNavMenuItem,
Tag, Tag,
} from "carbon-components-svelte"; } from "carbon-components-svelte";
import LogoGithub20 from "carbon-icons-svelte/lib/LogoGithub20"; import LogoGithub from "carbon-icons-svelte/lib/LogoGithub.svelte";
import Theme from "../components/Theme.svelte"; import Theme from "../components/Theme.svelte";
const deprecated = []; const deprecated = [];
@ -58,7 +58,7 @@
<HeaderUtilities> <HeaderUtilities>
<HeaderActionLink <HeaderActionLink
icon="{LogoGithub20}" icon="{LogoGithub}"
href="https://github.com/carbon-design-system/carbon-components-svelte" href="https://github.com/carbon-design-system/carbon-components-svelte"
target="_blank" target="_blank"
/> />

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

@ -1,11 +1,11 @@
<script> <script>
import { InlineNotification, Button } from "carbon-components-svelte"; import { InlineNotification, Button } from "carbon-components-svelte";
import Add16 from "carbon-icons-svelte/lib/Add16"; import Add from "carbon-icons-svelte/lib/Add.svelte";
import TrashCan16 from "carbon-icons-svelte/lib/TrashCan16"; import TrashCan from "carbon-icons-svelte/lib/TrashCan.svelte";
import TextBold16 from "carbon-icons-svelte/lib/TextBold16"; import TextBold from "carbon-icons-svelte/lib/TextBold.svelte";
import TextItalic16 from "carbon-icons-svelte/lib/TextItalic16"; import TextItalic from "carbon-icons-svelte/lib/TextItalic.svelte";
import TextUnderline16 from "carbon-icons-svelte/lib/TextUnderline16"; import TextUnderline from "carbon-icons-svelte/lib/TextUnderline.svelte";
import Login16 from "carbon-icons-svelte/lib/Login16"; import Login from "carbon-icons-svelte/lib/Login.svelte";
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
let index = 1; let index = 1;
@ -43,7 +43,7 @@
</div> </div>
</InlineNotification> </InlineNotification>
<Button kind="danger-tertiary"iconDescription="Delete" icon={TrashCan16} /> <Button kind="danger-tertiary"iconDescription="Delete" icon={TrashCan} />
### Danger ghost button ### Danger ghost button
@ -51,7 +51,7 @@
### Button with icon ### Button with icon
<Button icon={Add16}>With icon</Button> <Button icon={Add}>With icon</Button>
### Icon-only button ### Icon-only button
@ -61,17 +61,17 @@
</div> </div>
</InlineNotification> </InlineNotification>
<Button iconDescription="Tooltip text" icon={Add16} /> <Button iconDescription="Tooltip text" icon={Add} />
### Icon-only, link button ### Icon-only, link button
<Button iconDescription="Login" icon={Login16} href="#" /> <Button iconDescription="Login" icon={Login} href="#" />
### Icon-only button (custom tooltip position) ### Icon-only button (custom tooltip position)
The tooltip position and alignment can be controlled by `tooltipPosition` and `tooltipAlignment`. The tooltip position and alignment can be controlled by `tooltipPosition` and `tooltipAlignment`.
<Button tooltipPosition="right" tooltipAlignment="end" iconDescription="Tooltip text" icon={Add16} /> <Button tooltipPosition="right" tooltipAlignment="end" iconDescription="Tooltip text" icon={Add} />
### Selected icon-only, ghost button ### Selected icon-only, ghost button

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

@ -4,7 +4,7 @@ source: Button/ButtonSet.svelte
<script> <script>
import { Button, ButtonSet } from "carbon-components-svelte"; import { Button, ButtonSet } from "carbon-components-svelte";
import Login16 from "carbon-icons-svelte/lib/Login16"; import Login from "carbon-icons-svelte/lib/Login.svelte";
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
@ -22,6 +22,6 @@ Buttons in a button set are juxtaposed by default.
Set `stacked` to `true` to use the stacked variant. Set `stacked` to `true` to use the stacked variant.
<ButtonSet stacked> <ButtonSet stacked>
<Button icon={Login16}>Log in</Button> <Button icon={Login}>Log in</Button>
<Button kind="ghost">Sign up</Button> <Button kind="ghost">Sign up</Button>
</ButtonSet> </ButtonSet>

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

@ -4,8 +4,8 @@ components: ["ContentSwitcher", "Switch"]
<script> <script>
import { ContentSwitcher, Switch } from "carbon-components-svelte"; import { ContentSwitcher, Switch } from "carbon-components-svelte";
import Bullhorn16 from "carbon-icons-svelte/lib/Bullhorn16"; import Bullhorn from "carbon-icons-svelte/lib/Bullhorn.svelte";
import Analytics16 from "carbon-icons-svelte/lib/Analytics16"; import Analytics from "carbon-icons-svelte/lib/Analytics.svelte";
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
@ -33,12 +33,12 @@ components: ["ContentSwitcher", "Switch"]
<ContentSwitcher> <ContentSwitcher>
<Switch> <Switch>
<div style="display: flex; align-items: center;"> <div style="display: flex; align-items: center;">
<Bullhorn16 style="margin-right: 0.5rem;" /> Latest news <Bullhorn style="margin-right: 0.5rem;" /> Latest news
</div> </div>
</Switch> </Switch>
<Switch> <Switch>
<div style="display: flex; align-items: center;"> <div style="display: flex; align-items: center;">
<Analytics16 style="margin-right: 0.5rem;" /> Trending <Analytics style="margin-right: 0.5rem;" /> Trending
</div> </div>
</Switch> </Switch>
</ContentSwitcher> </ContentSwitcher>

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

@ -4,7 +4,7 @@ components: ["DataTable", "Pagination","Toolbar", "ToolbarContent", "ToolbarSear
<script> <script>
import { InlineNotification, DataTable, DataTableSkeleton, Pagination, Toolbar, ToolbarContent, ToolbarSearch, ToolbarMenu, ToolbarMenuItem, Button, Link } from "carbon-components-svelte"; import { InlineNotification, DataTable, DataTableSkeleton, Pagination, Toolbar, ToolbarContent, ToolbarSearch, ToolbarMenu, ToolbarMenuItem, Button, Link } from "carbon-components-svelte";
import Launch16 from "carbon-icons-svelte/lib/Launch16"; import Launch from "carbon-icons-svelte/lib/Launch.svelte";
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
const pagination = { pageSize: 5, page: 1} const pagination = { pageSize: 5, page: 1}
@ -146,7 +146,7 @@ The slot name for the table header cells is `"cell-header"`.
</svelte:fragment> </svelte:fragment>
<svelte:fragment slot="cell" let:row let:cell> <svelte:fragment slot="cell" let:row let:cell>
{#if cell.key === 'rule' && cell.value === 'Round robin'} {#if cell.key === 'rule' && cell.value === 'Round robin'}
<Link icon={Launch16} href="https://en.wikipedia.org/wiki/Round-robin_DNS" target="_blank">{cell.value}</Link> <Link icon={Launch} href="https://en.wikipedia.org/wiki/Round-robin_DNS" target="_blank">{cell.value}</Link>
{:else} {:else}
{cell.value} {cell.value}
{/if} {/if}

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

@ -4,7 +4,7 @@ components: ["Link", "OutboundLink"]
<script> <script>
import { Link, OutboundLink } from "carbon-components-svelte"; import { Link, OutboundLink } from "carbon-components-svelte";
import Carbon16 from "carbon-icons-svelte/lib/Carbon16" import Carbon from "carbon-icons-svelte/lib/Carbon.svelte"
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
@ -39,7 +39,7 @@ Note that `inline` must be `false` when rendering a link with an icon.
<div> <div>
Visit the Visit the
<Link href="https://www.carbondesignsystem.com/" icon={Carbon16}>Carbon Design System</Link>. <Link href="https://www.carbondesignsystem.com/" icon={Carbon}>Carbon Design System</Link>.
</div> </div>
### Large size ### Large size

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

@ -4,7 +4,7 @@ components: ["OverflowMenu", "OverflowMenuItem"]
<script> <script>
import { OverflowMenu, OverflowMenuItem } from "carbon-components-svelte"; import { OverflowMenu, OverflowMenuItem } from "carbon-components-svelte";
import Add16 from "carbon-icons-svelte/lib/Add16"; import Add from "carbon-icons-svelte/lib/Add.svelte";
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
@ -68,7 +68,7 @@ By default, the first overflow menu item is focused when opening the dropdown.
### Custom trigger icon ### Custom trigger icon
<OverflowMenu icon={Add16}> <OverflowMenu icon={Add}>
<OverflowMenuItem text="Manage credentials" /> <OverflowMenuItem text="Manage credentials" />
<OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" /> <OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" />
<OverflowMenuItem danger text="Delete service" /> <OverflowMenuItem danger text="Delete service" />

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

@ -1,5 +1,5 @@
<script> <script>
import Query16 from "carbon-icons-svelte/lib/Query16"; import Query from "carbon-icons-svelte/lib/Query.svelte";
import { Search } from "carbon-components-svelte"; import { Search } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>

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

@ -4,7 +4,7 @@ components: ["StructuredList", "StructuredListSkeleton", "StructuredListBody", "
<script> <script>
import { StructuredList, StructuredListSkeleton, StructuredListBody, StructuredListHead, StructuredListCell ,StructuredListRow, StructuredListInput } from "carbon-components-svelte"; import { StructuredList, StructuredListSkeleton, StructuredListBody, StructuredListHead, StructuredListCell ,StructuredListRow, StructuredListInput } from "carbon-components-svelte";
import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16"; import CheckmarkFilled from "carbon-icons-svelte/lib/CheckmarkFilled.svelte";
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>

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

@ -1,6 +1,6 @@
<script> <script>
import { Tag } from "carbon-components-svelte"; import { Tag } from "carbon-components-svelte";
import IbmCloud16 from "carbon-icons-svelte/lib/IbmCloud16"; import IbmCloud from "carbon-icons-svelte/lib/IbmCloud.svelte";
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
@ -43,7 +43,7 @@
Note: rendering a custom icon cannnot be used with the filterable variant. Note: rendering a custom icon cannnot be used with the filterable variant.
<Tag icon={IbmCloud16}>IBM Cloud</Tag> <Tag icon={IbmCloud}>IBM Cloud</Tag>
### Interactive variant ### Interactive variant

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

@ -10,11 +10,11 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
### Default ### Default
<TimePicker labelText="Cron job" placeholder="hh:mm"> <TimePicker labelText="Cron job" placeholder="hh:mm">
<TimePickerSelect value="PM"> <TimePickerSelect value="pm">
<SelectItem value="am" text="AM" /> <SelectItem value="am" text="AM" />
<SelectItem value="pm" text="PM" /> <SelectItem value="pm" text="PM" />
</TimePickerSelect> </TimePickerSelect>
<TimePickerSelect value="PDT"> <TimePickerSelect value="pdt">
<SelectItem value="pdt" text="PDT" /> <SelectItem value="pdt" text="PDT" />
<SelectItem value="gmt" text="GMT" /> <SelectItem value="gmt" text="GMT" />
</TimePickerSelect> </TimePickerSelect>
@ -23,11 +23,11 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
### Light variant ### Light variant
<TimePicker light labelText="Cron job" placeholder="hh:mm"> <TimePicker light labelText="Cron job" placeholder="hh:mm">
<TimePickerSelect value="PM"> <TimePickerSelect value="pm">
<SelectItem value="am" text="AM" /> <SelectItem value="am" text="AM" />
<SelectItem value="pm" text="PM" /> <SelectItem value="pm" text="PM" />
</TimePickerSelect> </TimePickerSelect>
<TimePickerSelect value="PDT"> <TimePickerSelect value="pdt">
<SelectItem value="pdt" text="PDT" /> <SelectItem value="pdt" text="PDT" />
<SelectItem value="gmt" text="GMT" /> <SelectItem value="gmt" text="GMT" />
</TimePickerSelect> </TimePickerSelect>
@ -36,11 +36,11 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
### Extra-large size ### Extra-large size
<TimePicker size="xl" labelText="Cron job" placeholder="hh:mm"> <TimePicker size="xl" labelText="Cron job" placeholder="hh:mm">
<TimePickerSelect value="PM"> <TimePickerSelect value="pm">
<SelectItem value="am" text="AM" /> <SelectItem value="am" text="AM" />
<SelectItem value="pm" text="PM" /> <SelectItem value="pm" text="PM" />
</TimePickerSelect> </TimePickerSelect>
<TimePickerSelect value="PDT"> <TimePickerSelect value="pdt">
<SelectItem value="pdt" text="PDT" /> <SelectItem value="pdt" text="PDT" />
<SelectItem value="gmt" text="GMT" /> <SelectItem value="gmt" text="GMT" />
</TimePickerSelect> </TimePickerSelect>
@ -49,11 +49,11 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
### Small size ### Small size
<TimePicker size="sm" labelText="Cron job" placeholder="hh:mm"> <TimePicker size="sm" labelText="Cron job" placeholder="hh:mm">
<TimePickerSelect value="PM"> <TimePickerSelect value="pm">
<SelectItem value="am" text="AM" /> <SelectItem value="am" text="AM" />
<SelectItem value="pm" text="PM" /> <SelectItem value="pm" text="PM" />
</TimePickerSelect> </TimePickerSelect>
<TimePickerSelect value="PDT"> <TimePickerSelect value="pdt">
<SelectItem value="pdt" text="PDT" /> <SelectItem value="pdt" text="PDT" />
<SelectItem value="gmt" text="GMT" /> <SelectItem value="gmt" text="GMT" />
</TimePickerSelect> </TimePickerSelect>
@ -62,11 +62,11 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
### Invalid state ### Invalid state
<TimePicker invalid invalidText="A valid value is required" labelText="Cron job" placeholder="hh:mm"> <TimePicker invalid invalidText="A valid value is required" labelText="Cron job" placeholder="hh:mm">
<TimePickerSelect value="PM"> <TimePickerSelect value="pm">
<SelectItem value="am" text="AM" /> <SelectItem value="am" text="AM" />
<SelectItem value="pm" text="PM" /> <SelectItem value="pm" text="PM" />
</TimePickerSelect> </TimePickerSelect>
<TimePickerSelect value="PDT"> <TimePickerSelect value="pdt">
<SelectItem value="pdt" text="PDT" /> <SelectItem value="pdt" text="PDT" />
<SelectItem value="gmt" text="GMT" /> <SelectItem value="gmt" text="GMT" />
</TimePickerSelect> </TimePickerSelect>
@ -76,11 +76,11 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
### Disabled state ### Disabled state
<TimePicker labelText="Cron job" placeholder="hh:mm" disabled> <TimePicker labelText="Cron job" placeholder="hh:mm" disabled>
<TimePickerSelect value="PM" disabled> <TimePickerSelect value="pm" disabled>
<SelectItem value="am" text="AM" /> <SelectItem value="am" text="AM" />
<SelectItem value="pm" text="PM" /> <SelectItem value="pm" text="PM" />
</TimePickerSelect> </TimePickerSelect>
<TimePickerSelect value="PDT" disabled> <TimePickerSelect value="pdt" disabled>
<SelectItem value="pdt" text="PDT" /> <SelectItem value="pdt" text="PDT" />
<SelectItem value="gmt" text="GMT" /> <SelectItem value="gmt" text="GMT" />
</TimePickerSelect> </TimePickerSelect>

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

@ -4,7 +4,7 @@ components: ["Tooltip", "TooltipFooter"]
<script> <script>
import { Tooltip, TooltipFooter, Link, Button } from "carbon-components-svelte"; import { Tooltip, TooltipFooter, Link, Button } from "carbon-components-svelte";
import Catalog16 from "carbon-icons-svelte/lib/Catalog16"; import Catalog from "carbon-icons-svelte/lib/Catalog.svelte";
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
@ -57,7 +57,7 @@ By default, the tooltip is triggered by an information icon.
### Custom icon (component) ### Custom icon (component)
<Tooltip triggerText="Resource list" icon={Catalog16}> <Tooltip triggerText="Resource list" icon={Catalog}>
<p> <p>
Resources are provisioned based on your account's organization. Resources are provisioned based on your account's organization.
</p> </p>

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

@ -1,29 +1,29 @@
<script> <script>
import { TooltipIcon } from "carbon-components-svelte"; import { TooltipIcon } from "carbon-components-svelte";
import Carbon24 from "carbon-icons-svelte/lib/Carbon24"; import Carbon from "carbon-icons-svelte/lib/Carbon.svelte";
import Filter20 from "carbon-icons-svelte/lib/Filter20"; import Filter from "carbon-icons-svelte/lib/Filter.svelte";
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
### Default ("bottom" direction, "center" aligned) ### Default ("bottom" direction, "center" aligned)
<TooltipIcon tooltipText="Carbon is an open source design system by IBM." icon={Carbon24} /> <TooltipIcon tooltipText="Carbon is an open source design system by IBM." icon={Carbon} />
### Directions ### Directions
<TooltipIcon tooltipText="Top start" direction="top" align="start" icon={Filter20} /> <TooltipIcon tooltipText="Top start" direction="top" align="start" icon={Filter} />
<TooltipIcon tooltipText="Right end" direction="right" align="end" icon={Filter20} /> <TooltipIcon tooltipText="Right end" direction="right" align="end" icon={Filter} />
<TooltipIcon tooltipText="Bottom start" direction="bottom" align="start" icon={Filter20} /> <TooltipIcon tooltipText="Bottom start" direction="bottom" align="start" icon={Filter} />
<TooltipIcon tooltipText="Left start" direction="left" align="start" icon={Filter20} /> <TooltipIcon tooltipText="Left start" direction="left" align="start" icon={Filter} />
### Custom tooltip text ### Custom tooltip text
Use the "text" slot to customize the tooltip text. Use the "text" slot to customize the tooltip text.
<TooltipIcon icon={Carbon24}> <TooltipIcon icon={Carbon}>
<span slot="tooltipText" style="color: red">Carbon is an open source design system by IBM.</span> <span slot="tooltipText" style="color: red">Carbon is an open source design system by IBM.</span>
</TooltipIcon> </TooltipIcon>
### Disabled ### Disabled
<TooltipIcon disabled tooltipText="Carbon is an open source design system by IBM." icon={Carbon24} /> <TooltipIcon disabled tooltipText="Carbon is an open source design system by IBM." icon={Carbon} />

12
docs/src/pages/framed/Button/SelectedIconOnlyButton.svelte
View file

@ -1,8 +1,8 @@
<script> <script>
import { Button } from "carbon-components-svelte"; import { Button } from "carbon-components-svelte";
import TextBold16 from "carbon-icons-svelte/lib/TextBold16"; import TextBold from "carbon-icons-svelte/lib/TextBold.svelte";
import TextItalic16 from "carbon-icons-svelte/lib/TextItalic16"; import TextItalic from "carbon-icons-svelte/lib/TextItalic.svelte";
import TextUnderline16 from "carbon-icons-svelte/lib/TextUnderline16"; import TextUnderline from "carbon-icons-svelte/lib/TextUnderline.svelte";
let index = 1; let index = 1;
</script> </script>
@ -11,20 +11,20 @@
isSelected="{index === 0}" isSelected="{index === 0}"
kind="ghost" kind="ghost"
iconDescription="Bold" iconDescription="Bold"
icon="{TextBold16}" icon="{TextBold}"
on:click="{() => (index = 0)}" on:click="{() => (index = 0)}"
/> />
<Button <Button
isSelected="{index === 1}" isSelected="{index === 1}"
kind="ghost" kind="ghost"
iconDescription="Italicize" iconDescription="Italicize"
icon="{TextItalic16}" icon="{TextItalic}"
on:click="{() => (index = 1)}" on:click="{() => (index = 1)}"
/> />
<Button <Button
isSelected="{index === 2}" isSelected="{index === 2}"
kind="ghost" kind="ghost"
iconDescription="Underline" iconDescription="Underline"
icon="{TextUnderline16}" icon="{TextUnderline}"
on:click="{() => (index = 2)}" on:click="{() => (index = 2)}"
/> />

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

@ -5,8 +5,8 @@
ContextMenuGroup, ContextMenuGroup,
ContextMenuOption, ContextMenuOption,
} from "carbon-components-svelte"; } from "carbon-components-svelte";
import CopyFile16 from "carbon-icons-svelte/lib/CopyFile16"; import CopyFile from "carbon-icons-svelte/lib/CopyFile.svelte";
import Cut16 from "carbon-icons-svelte/lib/Cut16"; import Cut from "carbon-icons-svelte/lib/Cut.svelte";
let selectedIds = []; let selectedIds = [];
@ -18,14 +18,9 @@
indented indented
labelText="Copy" labelText="Copy"
shortcutText="⌘C" shortcutText="⌘C"
icon="{CopyFile16}" icon="{CopyFile}"
/>
<ContextMenuOption
indented
labelText="Cut"
shortcutText="⌘X"
icon="{Cut16}"
/> />
<ContextMenuOption indented labelText="Cut" shortcutText="⌘X" icon="{Cut}" />
<ContextMenuDivider /> <ContextMenuDivider />
<ContextMenuOption indented labelText="Export as"> <ContextMenuOption indented labelText="Export as">
<ContextMenuGroup labelText="Export options" bind:selectedIds> <ContextMenuGroup labelText="Export options" bind:selectedIds>

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

@ -5,8 +5,8 @@
ContextMenuGroup, ContextMenuGroup,
ContextMenuOption, ContextMenuOption,
} from "carbon-components-svelte"; } from "carbon-components-svelte";
import CopyFile16 from "carbon-icons-svelte/lib/CopyFile16"; import CopyFile from "carbon-icons-svelte/lib/CopyFile.svelte";
import Cut16 from "carbon-icons-svelte/lib/Cut16"; import Cut from "carbon-icons-svelte/lib/Cut.svelte";
let target; let target;
</script> </script>
@ -16,14 +16,9 @@
indented indented
labelText="Copy" labelText="Copy"
shortcutText="⌘C" shortcutText="⌘C"
icon="{CopyFile16}" icon="{CopyFile}"
/>
<ContextMenuOption
indented
labelText="Cut"
shortcutText="⌘X"
icon="{Cut16}"
/> />
<ContextMenuOption indented labelText="Cut" shortcutText="⌘X" icon="{Cut}" />
<ContextMenuDivider /> <ContextMenuDivider />
<ContextMenuOption indented labelText="Export as"> <ContextMenuOption indented labelText="Export as">
<ContextMenuGroup labelText="Export options"> <ContextMenuGroup labelText="Export options">

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

@ -5,8 +5,8 @@
ContextMenuGroup, ContextMenuGroup,
ContextMenuOption, ContextMenuOption,
} from "carbon-components-svelte"; } from "carbon-components-svelte";
import CopyFile16 from "carbon-icons-svelte/lib/CopyFile16"; import CopyFile from "carbon-icons-svelte/lib/CopyFile.svelte";
import Cut16 from "carbon-icons-svelte/lib/Cut16"; import Cut from "carbon-icons-svelte/lib/Cut.svelte";
let target; let target;
let target2; let target2;
@ -20,14 +20,9 @@
indented indented
labelText="Copy" labelText="Copy"
shortcutText="⌘C" shortcutText="⌘C"
icon="{CopyFile16}" icon="{CopyFile}"
/>
<ContextMenuOption
indented
labelText="Cut"
shortcutText="⌘X"
icon="{Cut16}"
/> />
<ContextMenuOption indented labelText="Cut" shortcutText="⌘X" icon="{Cut}" />
<ContextMenuDivider /> <ContextMenuDivider />
<ContextMenuOption indented labelText="Export as"> <ContextMenuOption indented labelText="Export as">
<ContextMenuGroup labelText="Export options"> <ContextMenuGroup labelText="Export options">

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

@ -9,7 +9,7 @@
ToolbarBatchActions, ToolbarBatchActions,
Button, Button,
} from "carbon-components-svelte"; } from "carbon-components-svelte";
import Save16 from "carbon-icons-svelte/lib/Save16"; import Save from "carbon-icons-svelte/lib/Save.svelte";
const headers = [ const headers = [
{ key: "name", value: "Name" }, { key: "name", value: "Name" },
@ -34,7 +34,7 @@
<DataTable batchSelection bind:selectedRowIds headers="{headers}" rows="{rows}"> <DataTable batchSelection bind:selectedRowIds headers="{headers}" rows="{rows}">
<Toolbar> <Toolbar>
<ToolbarBatchActions> <ToolbarBatchActions>
<Button icon="{Save16}">Save</Button> <Button icon="{Save}">Save</Button>
</ToolbarBatchActions> </ToolbarBatchActions>
<ToolbarContent> <ToolbarContent>
<ToolbarSearch /> <ToolbarSearch />

4
docs/src/pages/framed/Modal/ModalButtonWithIcon.svelte
View file

@ -1,13 +1,13 @@
<script> <script>
import { Modal } from "carbon-components-svelte"; import { Modal } from "carbon-components-svelte";
import Send16 from "carbon-icons-svelte/lib/Send16"; import Send from "carbon-icons-svelte/lib/Send.svelte";
</script> </script>
<Modal <Modal
open open
modalHeading="Invite someone" modalHeading="Invite someone"
primaryButtonText="Send invitation" primaryButtonText="Send invitation"
primaryButtonIcon="{Send16}" primaryButtonIcon="{Send}"
secondaryButtonText="Cancel" secondaryButtonText="Cancel"
> >
<p>Do you really want to invite someone?</p> <p>Do you really want to invite someone?</p>

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

@ -1,76 +1,74 @@
<script> <script>
import { TreeView } from "carbon-components-svelte"; import { TreeView } from "carbon-components-svelte";
import WatsonMachineLearning16 from "carbon-icons-svelte/lib/WatsonMachineLearning16"; import WatsonMachineLearning from "carbon-icons-svelte/lib/WatsonMachineLearning.svelte";
import Analytics16 from "carbon-icons-svelte/lib/Analytics16"; import Analytics from "carbon-icons-svelte/lib/Analytics.svelte";
import Blockchain16 from "carbon-icons-svelte/lib/Blockchain16"; import Blockchain from "carbon-icons-svelte/lib/Blockchain.svelte";
import DataBase16 from "carbon-icons-svelte/lib/DataBase16"; import DataBase from "carbon-icons-svelte/lib/DataBase.svelte";
import SignalStrength16 from "carbon-icons-svelte/lib/SignalStrength16"; import SignalStrength from "carbon-icons-svelte/lib/SignalStrength.svelte";
let activeId = 1; let activeId = 1;
let selectedIds = []; let selectedIds = [];
let children = [ let children = [
{ id: 0, text: "AI / Machine learning", icon: WatsonMachineLearning16 }, { id: 0, text: "AI / Machine learning", icon: WatsonMachineLearning },
{ {
id: 1, id: 1,
text: "Analytics", text: "Analytics",
icon: Analytics16, icon: Analytics,
expanded: true, expanded: true,
children: [ children: [
{ {
id: 2, id: 2,
text: "IBM Analytics Engine", text: "IBM Analytics Engine",
icon: Analytics16, icon: Analytics,
expanded: true, expanded: true,
children: [ children: [
{ id: 3, text: "Apache Spark", icon: Analytics16 }, { id: 3, text: "Apache Spark", icon: Analytics },
{ id: 4, text: "Hadoop", icon: Analytics16 }, { id: 4, text: "Hadoop", icon: Analytics },
], ],
}, },
{ id: 5, text: "IBM Cloud SQL Query", icon: Analytics16 }, { id: 5, text: "IBM Cloud SQL Query", icon: Analytics },
{ id: 6, text: "IBM Db2 Warehouse on Cloud", icon: Analytics16 }, { id: 6, text: "IBM Db2 Warehouse on Cloud", icon: Analytics },
], ],
}, },
{ {
id: 7, id: 7,
text: "Blockchain", text: "Blockchain",
icon: Blockchain16, icon: Blockchain,
children: [ children: [{ id: 8, text: "IBM Blockchain Platform", icon: Blockchain }],
{ id: 8, text: "IBM Blockchain Platform", icon: Blockchain16 },
],
}, },
{ {
id: 9, id: 9,
text: "Databases", text: "Databases",
icon: DataBase16, icon: DataBase,
children: [ children: [
{ {
id: 10, id: 10,
text: "IBM Cloud Databases for Elasticsearch", text: "IBM Cloud Databases for Elasticsearch",
icon: DataBase16, icon: DataBase,
}, },
{ {
id: 11, id: 11,
text: "IBM Cloud Databases for Enterprise DB", text: "IBM Cloud Databases for Enterprise DB",
icon: DataBase16, icon: DataBase,
}, },
{ id: 12, text: "IBM Cloud Databases for MongoDB", icon: DataBase16 }, { id: 12, text: "IBM Cloud Databases for MongoDB", icon: DataBase },
{ {
id: 13, id: 13,
text: "IBM Cloud Databases for PostgreSQL", text: "IBM Cloud Databases for PostgreSQL",
icon: DataBase16, icon: DataBase,
}, },
], ],
}, },
{ {
id: 14, id: 14,
text: "Integration", text: "Integration",
icon: SignalStrength16, icon: SignalStrength,
disabled: true, disabled: true,
children: [ children: [
{ {
id: 15, id: 15,
text: "IBM API Connect", text: "IBM API Connect",
icon: SignalStrength16, icon: SignalStrength,
disabled: true, disabled: true,
}, },
], ],

12
docs/src/pages/framed/UIShell/HeaderNavRail.svelte
View file

@ -16,7 +16,7 @@
Row, Row,
Column, Column,
} from "carbon-components-svelte"; } from "carbon-components-svelte";
import Fade16 from "carbon-icons-svelte/lib/Fade16"; import Fade from "carbon-icons-svelte/lib/Fade.svelte";
let isSideNavOpen = false; let isSideNavOpen = false;
</script> </script>
@ -39,16 +39,16 @@
<SideNav bind:isOpen="{isSideNavOpen}" rail> <SideNav bind:isOpen="{isSideNavOpen}" rail>
<SideNavItems> <SideNavItems>
<SideNavLink icon="{Fade16}" text="Link 1" href="/" isSelected /> <SideNavLink icon="{Fade}" text="Link 1" href="/" isSelected />
<SideNavLink icon="{Fade16}" text="Link 2" href="/" /> <SideNavLink icon="{Fade}" text="Link 2" href="/" />
<SideNavLink icon="{Fade16}" text="Link 3" href="/" /> <SideNavLink icon="{Fade}" text="Link 3" href="/" />
<SideNavMenu icon="{Fade16}" text="Menu"> <SideNavMenu icon="{Fade}" text="Menu">
<SideNavMenuItem href="/" text="Link 1" /> <SideNavMenuItem href="/" text="Link 1" />
<SideNavMenuItem href="/" text="Link 2" /> <SideNavMenuItem href="/" text="Link 2" />
<SideNavMenuItem href="/" text="Link 3" /> <SideNavMenuItem href="/" text="Link 3" />
</SideNavMenu> </SideNavMenu>
<SideNavDivider /> <SideNavDivider />
<SideNavLink icon="{Fade16}" text="Link 4" href="/" /> <SideNavLink icon="{Fade}" text="Link 4" href="/" />
</SideNavItems> </SideNavItems>
</SideNav> </SideNav>
</Header> </Header>

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

@ -18,8 +18,8 @@
Row, Row,
Column, Column,
} from "carbon-components-svelte"; } from "carbon-components-svelte";
import SettingsAdjust20 from "carbon-icons-svelte/lib/SettingsAdjust20"; import SettingsAdjust from "carbon-icons-svelte/lib/SettingsAdjust.svelte";
import UserAvatarFilledAlt20 from "carbon-icons-svelte/lib/UserAvatarFilledAlt20"; import UserAvatarFilledAlt from "carbon-icons-svelte/lib/UserAvatarFilledAlt.svelte";
let isSideNavOpen = false; let isSideNavOpen = false;
let isOpen1 = false; let isOpen1 = false;
@ -31,11 +31,11 @@
<SkipToContent /> <SkipToContent />
</svelte:fragment> </svelte:fragment>
<HeaderUtilities> <HeaderUtilities>
<HeaderGlobalAction aria-label="Settings" icon="{SettingsAdjust20}" /> <HeaderGlobalAction aria-label="Settings" icon="{SettingsAdjust}" />
<HeaderAction <HeaderAction
bind:isOpen="{isOpen1}" bind:isOpen="{isOpen1}"
icon="{UserAvatarFilledAlt20}" icon="{UserAvatarFilledAlt}"
closeIcon="{UserAvatarFilledAlt20}" closeIcon="{UserAvatarFilledAlt}"
> >
<HeaderPanelLinks> <HeaderPanelLinks>
<HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider> <HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>

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

@ -22,7 +22,11 @@
padding: var(--cds-spacing-06) var(--cds-spacing-05); padding: var(--cds-spacing-06) var(--cds-spacing-05);
} }
:global(.framed [class^="bx--col"]) { :global(.framed :not(.bx--content) [class^="bx--col"]) {
outline: 1px solid var(--cds-interactive-04); outline: 1px solid var(--cds-interactive-04);
} }
:global(.framed .bx--content [class^="bx--col"]) {
outline: 0;
}
</style> </style>

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

@ -268,7 +268,7 @@
<TileCard <TileCard
borderBottom borderBottom
title="Carbon Icons Svelte" title="Carbon Icons Svelte"
subtitle="7000+ icons" subtitle="1900+ icons"
target="_blank" target="_blank"
href="https://github.com/carbon-design-system/carbon-icons-svelte" href="https://github.com/carbon-design-system/carbon-icons-svelte"
/> />

8
docs/yarn.lock
View file

@ -185,10 +185,10 @@ carbon-components-svelte@../:
dependencies: dependencies:
flatpickr "4.6.9" flatpickr "4.6.9"
carbon-icons-svelte@^10.45.1: carbon-icons-svelte@^11.0.1:
version "10.45.1" version "11.0.1"
resolved "https://registry.yarnpkg.com/carbon-icons-svelte/-/carbon-icons-svelte-10.45.1.tgz#210b8d8906bbdc4611dbc06f1030bca26169c2d9" resolved "https://registry.yarnpkg.com/carbon-icons-svelte/-/carbon-icons-svelte-11.0.1.tgz#65b09832e9e0fa899d631564323e92e6ab878930"
integrity sha512-Uz3byPkSBzjpvLmjt/ZWYJkQG1omfqKh1vzF1FeFYOYqbGOCwc4sHbyF8oet2CseT2cECn1BbEyY4yWvlWYd/w== integrity sha512-0CCJLmHW3yJ8T9DM2HNGQx304b2VLGY13Xeg6T1cJWeU2oTPIvBbTfveChIULBBI9FIFGLB9m8ZZgeYWEjAAew==
caseless@~0.12.0: caseless@~0.12.0:
version "0.12.0" version "0.12.0"

2
package.json
View file

@ -28,7 +28,7 @@
"autoprefixer": "^10.4.4", "autoprefixer": "^10.4.4",
"carbon-components": "10.56.0", "carbon-components": "10.56.0",
"carbon-components-10.47": "npm:carbon-components@10.47", "carbon-components-10.47": "npm:carbon-components@10.47",
"carbon-icons-svelte": "^10.45.1", "carbon-icons-svelte": "^11.0.1",
"husky": "^4.3.8", "husky": "^4.3.8",
"lint-staged": "^10.5.3", "lint-staged": "^10.5.3",
"postcss": "^8.4.12", "postcss": "^8.4.12",

7
src/Accordion/AccordionItem.svelte
View file

@ -15,7 +15,7 @@
export let iconDescription = "Expand/Collapse"; export let iconDescription = "Expand/Collapse";
import { onMount, getContext } from "svelte"; import { onMount, getContext } from "svelte";
import ChevronRight16 from "../icons/ChevronRight16.svelte"; import ChevronRight from "../icons/ChevronRight.svelte";
let initialDisabled = disabled; let initialDisabled = disabled;
@ -68,10 +68,7 @@
} }
}}" }}"
> >
<ChevronRight16 <ChevronRight class="bx--accordion__arrow" aria-label="{iconDescription}" />
class="bx--accordion__arrow"
aria-label="{iconDescription}"
/>
<div class:bx--accordion__title="{true}"> <div class:bx--accordion__title="{true}">
<slot name="title">{title}</slot> <slot name="title">{title}</slot>
</div> </div>

6
src/Accordion/AccordionSkeleton.svelte
View file

@ -17,7 +17,7 @@
/** Set to `false` to close the first accordion item */ /** Set to `false` to close the first accordion item */
export let open = true; export let open = true;
import ChevronRight16 from "../icons/ChevronRight16.svelte"; import ChevronRight from "../icons/ChevronRight.svelte";
import SkeletonText from "../SkeletonText/SkeletonText.svelte"; import SkeletonText from "../SkeletonText/SkeletonText.svelte";
</script> </script>
@ -41,7 +41,7 @@
class:bx--accordion__item--active="{true}" class:bx--accordion__item--active="{true}"
> >
<span class:bx--accordion__heading="{true}"> <span class:bx--accordion__heading="{true}">
<ChevronRight16 class="bx--accordion__arrow" /> <ChevronRight class="bx--accordion__arrow" />
<SkeletonText class="bx--accordion__title" /> <SkeletonText class="bx--accordion__title" />
</span> </span>
<div class="bx--accordion__content"> <div class="bx--accordion__content">
@ -54,7 +54,7 @@
{#each Array.from({ length: open ? count - 1 : count }, (_, i) => i) as item (item)} {#each Array.from({ length: open ? count - 1 : count }, (_, i) => i) as item (item)}
<li class="bx--accordion__item"> <li class="bx--accordion__item">
<span class="bx--accordion__heading"> <span class="bx--accordion__heading">
<ChevronRight16 class="bx--accordion__arrow" /> <ChevronRight class="bx--accordion__arrow" />
<SkeletonText class="bx--accordion__title" /> <SkeletonText class="bx--accordion__title" />
</span> </span>
</li> </li>

4
src/CodeSnippet/CodeSnippet.svelte
View file

@ -89,7 +89,7 @@
export let ref = null; export let ref = null;
import { createEventDispatcher, tick, onMount } from "svelte"; import { createEventDispatcher, tick, onMount } from "svelte";
import ChevronDown16 from "../icons/ChevronDown16.svelte"; import ChevronDown from "../icons/ChevronDown.svelte";
import Button from "../Button/Button.svelte"; import Button from "../Button/Button.svelte";
import CopyButton from "../CopyButton/CopyButton.svelte"; import CopyButton from "../CopyButton/CopyButton.svelte";
import CodeSnippetSkeleton from "./CodeSnippetSkeleton.svelte"; import CodeSnippetSkeleton from "./CodeSnippetSkeleton.svelte";
@ -243,7 +243,7 @@
}}" }}"
> >
<span class:bx--snippet-btn--text="{true}">{expandText}</span> <span class:bx--snippet-btn--text="{true}">{expandText}</span>
<ChevronDown16 <ChevronDown
class="bx--icon-chevron--down bx--snippet__icon" class="bx--icon-chevron--down bx--snippet__icon"
aria-label="{expandText}" aria-label="{expandText}"
/> />

12
src/ComboBox/ComboBox.svelte
View file

@ -100,9 +100,9 @@
export let listRef = null; export let listRef = null;
import { createEventDispatcher, afterUpdate, tick } from "svelte"; import { createEventDispatcher, afterUpdate, tick } from "svelte";
import Checkmark16 from "../icons/Checkmark16.svelte"; import Checkmark from "../icons/Checkmark.svelte";
import WarningFilled16 from "../icons/WarningFilled16.svelte"; import WarningFilled from "../icons/WarningFilled.svelte";
import WarningAltFilled16 from "../icons/WarningAltFilled16.svelte"; import WarningAltFilled from "../icons/WarningAltFilled.svelte";
import ListBox from "../ListBox/ListBox.svelte"; import ListBox from "../ListBox/ListBox.svelte";
import ListBoxField from "../ListBox/ListBoxField.svelte"; import ListBoxField from "../ListBox/ListBoxField.svelte";
import ListBoxMenu from "../ListBox/ListBoxMenu.svelte"; import ListBoxMenu from "../ListBox/ListBoxMenu.svelte";
@ -314,10 +314,10 @@
}}" }}"
/> />
{#if invalid} {#if invalid}
<WarningFilled16 class="bx--list-box__invalid-icon" /> <WarningFilled class="bx--list-box__invalid-icon" />
{/if} {/if}
{#if !invalid && warn} {#if !invalid && warn}
<WarningAltFilled16 <WarningAltFilled
class="bx--list-box__invalid-icon bx--list-box__invalid-icon--warning" class="bx--list-box__invalid-icon bx--list-box__invalid-icon--warning"
/> />
{/if} {/if}
@ -368,7 +368,7 @@
{itemToString(item)} {itemToString(item)}
</slot> </slot>
{#if selectedItem && selectedItem.id === item.id} {#if selectedItem && selectedItem.id === item.id}
<Checkmark16 class="bx--list-box__menu-item__selected-icon" /> <Checkmark class="bx--list-box__menu-item__selected-icon" />
{/if} {/if}
</ListBoxMenuItem> </ListBoxMenuItem>
{/each} {/each}

4
src/ComposedModal/ModalHeader.svelte
View file

@ -21,7 +21,7 @@
export let iconDescription = "Close"; export let iconDescription = "Close";
import { getContext } from "svelte"; import { getContext } from "svelte";
import Close20 from "../icons/Close20.svelte"; import Close from "../icons/Close.svelte";
const { closeModal, updateLabel } = getContext("ComposedModal"); const { closeModal, updateLabel } = getContext("ComposedModal");
@ -57,6 +57,6 @@
on:click on:click
on:click="{closeModal}" on:click="{closeModal}"
> >
<Close20 class="bx--modal-close__icon {closeIconClass}" /> <Close size="{20}" class="bx--modal-close__icon {closeIconClass}" />
</button> </button>
</div> </div>

10
src/ContextMenu/ContextMenuOption.svelte
View file

@ -50,8 +50,8 @@
import { onMount, getContext, createEventDispatcher, tick } from "svelte"; import { onMount, getContext, createEventDispatcher, tick } from "svelte";
import ContextMenu from "./ContextMenu.svelte"; import ContextMenu from "./ContextMenu.svelte";
import Checkmark16 from "../icons/Checkmark16.svelte"; import Checkmark from "../icons/Checkmark.svelte";
import CaretRight16 from "../icons/CaretRight16.svelte"; import CaretRight from "../icons/CaretRight.svelte";
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
const ctx = getContext("ContextMenu"); const ctx = getContext("ContextMenu");
@ -145,7 +145,7 @@
if (selected) { if (selected) {
if (ctxGroup) ctxGroup.addOption({ id }); if (ctxGroup) ctxGroup.addOption({ id });
icon = Checkmark16; icon = Checkmark;
} else { } else {
icon = undefined; icon = undefined;
} }
@ -158,7 +158,7 @@
if (selected) { if (selected) {
if (ctxRadioGroup) ctxRadioGroup.setOption({ id }); if (ctxRadioGroup) ctxRadioGroup.setOption({ id });
icon = Checkmark16; icon = Checkmark;
} else { } else {
icon = undefined; icon = undefined;
} }
@ -253,7 +253,7 @@
<span class:bx--menu-option__label="{true}" title="{labelText}"> <span class:bx--menu-option__label="{true}" title="{labelText}">
<slot name="labelText">{labelText}</slot> <slot name="labelText">{labelText}</slot>
</span> </span>
<div class:bx--menu-option__info="{true}"><CaretRight16 /></div> <div class:bx--menu-option__info="{true}"><CaretRight /></div>
</div> </div>
<ContextMenu <ContextMenu

4
src/CopyButton/CopyButton.svelte
View file

@ -27,7 +27,7 @@
}; };
import { createEventDispatcher, onMount } from "svelte"; import { createEventDispatcher, onMount } from "svelte";
import Copy16 from "../icons/Copy16.svelte"; import Copy from "../icons/Copy.svelte";
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
@ -71,7 +71,7 @@
} }
}}" }}"
> >
<Copy16 class="bx--snippet__icon" /> <Copy class="bx--snippet__icon" />
<span <span
aria-hidden="true" aria-hidden="true"
class:bx--assistive-text="{true}" class:bx--assistive-text="{true}"

6
src/DataTable/DataTable.svelte
View file

@ -114,7 +114,7 @@
import { createEventDispatcher, setContext } from "svelte"; import { createEventDispatcher, setContext } from "svelte";
import { writable, derived } from "svelte/store"; import { writable, derived } from "svelte/store";
import ChevronRight16 from "../icons/ChevronRight16.svelte"; import ChevronRight from "../icons/ChevronRight.svelte";
import InlineCheckbox from "../Checkbox/InlineCheckbox.svelte"; import InlineCheckbox from "../Checkbox/InlineCheckbox.svelte";
import RadioButton from "../RadioButton/RadioButton.svelte"; import RadioButton from "../RadioButton/RadioButton.svelte";
import Table from "./Table.svelte"; import Table from "./Table.svelte";
@ -286,7 +286,7 @@
dispatch('click:header--expand', { expanded }); dispatch('click:header--expand', { expanded });
}}" }}"
> >
<ChevronRight16 class="bx--table-expand__svg" /> <ChevronRight class="bx--table-expand__svg" />
</button> </button>
{/if} {/if}
</th> </th>
@ -413,7 +413,7 @@
}); });
}}" }}"
> >
<ChevronRight16 class="bx--table-expand__svg" /> <ChevronRight class="bx--table-expand__svg" />
</button> </button>
{/if} {/if}
</TableCell> </TableCell>

13
src/DataTable/TableHeader.svelte
View file

@ -15,8 +15,8 @@
export let id = "ccs-" + Math.random().toString(36); export let id = "ccs-" + Math.random().toString(36);
import { getContext } from "svelte"; import { getContext } from "svelte";
import ArrowUp20 from "../icons/ArrowUp20.svelte"; import ArrowUp from "../icons/ArrowUp.svelte";
import ArrowsVertical20 from "../icons/ArrowsVertical20.svelte"; import ArrowsVertical from "../icons/ArrowsVertical.svelte";
const { sortHeader, tableSortable } = getContext("DataTable"); const { sortHeader, tableSortable } = getContext("DataTable");
@ -46,8 +46,13 @@
<div class:bx--table-header-label="{true}"> <div class:bx--table-header-label="{true}">
<slot /> <slot />
</div> </div>
<ArrowUp20 aria-label="{ariaLabel}" class="bx--table-sort__icon" /> <ArrowUp
<ArrowsVertical20 size="{20}"
aria-label="{ariaLabel}"
class="bx--table-sort__icon"
/>
<ArrowsVertical
size="{20}"
aria-label="{ariaLabel}" aria-label="{ariaLabel}"
class="bx--table-sort__icon-unsorted" class="bx--table-sort__icon-unsorted"
/> />

4
src/DataTable/ToolbarMenu.svelte
View file

@ -2,7 +2,7 @@
/** @extends {"../OverflowMenu/OverflowMenu.svelte"} OverflowMenuProps */ /** @extends {"../OverflowMenu/OverflowMenu.svelte"} OverflowMenuProps */
import { getContext } from "svelte"; import { getContext } from "svelte";
import Settings16 from "../icons/Settings16.svelte"; import Settings from "../icons/Settings.svelte";
import OverflowMenu from "../OverflowMenu/OverflowMenu.svelte"; import OverflowMenu from "../OverflowMenu/OverflowMenu.svelte";
const ctx = getContext("Toolbar"); const ctx = getContext("Toolbar");
@ -15,7 +15,7 @@
<OverflowMenu <OverflowMenu
bind:menuRef bind:menuRef
icon="{Settings16}" icon="{Settings}"
{...$$restProps} {...$$restProps}
class="bx--toolbar-action bx--overflow-menu {$$restProps.class}" class="bx--toolbar-action bx--overflow-menu {$$restProps.class}"
flipped flipped

14
src/DatePicker/DatePickerInput.svelte
View file

@ -54,9 +54,9 @@
export let ref = null; export let ref = null;
import { getContext } from "svelte"; import { getContext } from "svelte";
import Calendar16 from "../icons/Calendar16.svelte"; import Calendar from "../icons/Calendar.svelte";
import WarningFilled16 from "../icons/WarningFilled16.svelte"; import WarningFilled from "../icons/WarningFilled.svelte";
import WarningAltFilled16 from "../icons/WarningAltFilled16.svelte"; import WarningAltFilled from "../icons/WarningAltFilled.svelte";
const { const {
range, range,
@ -138,22 +138,20 @@
/> />
{#if !$hasCalendar} {#if !$hasCalendar}
{#if invalid} {#if invalid}
<WarningFilled16 <WarningFilled
class="bx--date-picker__icon bx--date-picker__icon--invalid" class="bx--date-picker__icon bx--date-picker__icon--invalid"
/> />
{/if} {/if}
{#if !invalid && warn} {#if !invalid && warn}
<WarningAltFilled16 <WarningAltFilled
class="bx--date-picker__icon bx--date-picker__icon--warn" class="bx--date-picker__icon bx--date-picker__icon--warn"
/> />
{/if} {/if}
{/if} {/if}
{#if $hasCalendar} {#if $hasCalendar}
<Calendar16 <Calendar
role="img"
class="bx--date-picker__icon" class="bx--date-picker__icon"
aria-label="{iconDescription}" aria-label="{iconDescription}"
title="{iconDescription}"
on:click="{openCalendar}" on:click="{openCalendar}"
/> />
{/if} {/if}

8
src/Dropdown/Dropdown.svelte
View file

@ -101,8 +101,8 @@
export let ref = null; export let ref = null;
import { createEventDispatcher } from "svelte"; import { createEventDispatcher } from "svelte";
import WarningFilled16 from "../icons/WarningFilled16.svelte"; import WarningFilled from "../icons/WarningFilled.svelte";
import WarningAltFilled16 from "../icons/WarningAltFilled16.svelte"; import WarningAltFilled from "../icons/WarningAltFilled.svelte";
import { import {
ListBox, ListBox,
ListBoxMenu, ListBoxMenu,
@ -190,10 +190,10 @@
warnText="{warnText}" warnText="{warnText}"
> >
{#if invalid} {#if invalid}
<WarningFilled16 class="bx--list-box__invalid-icon" /> <WarningFilled class="bx--list-box__invalid-icon" />
{/if} {/if}
{#if !invalid && warn} {#if !invalid && warn}
<WarningAltFilled16 <WarningAltFilled
class="bx--list-box__invalid-icon bx--list-box__invalid-icon--warning" class="bx--list-box__invalid-icon bx--list-box__invalid-icon--warning"
/> />
{/if} {/if}

12
src/FileUploader/Filename.svelte
View file

@ -11,9 +11,9 @@
/** Set to `true` to indicate an invalid state */ /** Set to `true` to indicate an invalid state */
export let invalid = false; export let invalid = false;
import Close16 from "../icons/Close16.svelte"; import Close from "../icons/Close.svelte";
import CheckmarkFilled16 from "../icons/CheckmarkFilled16.svelte"; import CheckmarkFilled from "../icons/CheckmarkFilled.svelte";
import WarningFilled16 from "../icons/WarningFilled16.svelte"; import WarningFilled from "../icons/WarningFilled.svelte";
import Loading from "../Loading/Loading.svelte"; import Loading from "../Loading/Loading.svelte";
</script> </script>
@ -28,9 +28,9 @@
{#if status === "edit"} {#if status === "edit"}
{#if invalid} {#if invalid}
<WarningFilled16 class="bx--file-invalid" /> <WarningFilled class="bx--file-invalid" />
{/if} {/if}
<Close16 <Close
aria-label="{iconDescription}" aria-label="{iconDescription}"
title="{iconDescription}" title="{iconDescription}"
class="bx--file-close" class="bx--file-close"
@ -41,7 +41,7 @@
{/if} {/if}
{#if status === "complete"} {#if status === "complete"}
<CheckmarkFilled16 <CheckmarkFilled
aria-label="{iconDescription}" aria-label="{iconDescription}"
title="{iconDescription}" title="{iconDescription}"
class="bx--file-complete" class="bx--file-complete"

8
src/InlineLoading/InlineLoading.svelte
View file

@ -21,8 +21,8 @@
export let successDelay = 1500; export let successDelay = 1500;
import { createEventDispatcher, afterUpdate, onMount } from "svelte"; import { createEventDispatcher, afterUpdate, onMount } from "svelte";
import CheckmarkFilled16 from "../icons/CheckmarkFilled16.svelte"; import CheckmarkFilled from "../icons/CheckmarkFilled.svelte";
import ErrorFilled16 from "../icons/ErrorFilled16.svelte"; import ErrorFilled from "../icons/ErrorFilled.svelte";
import Loading from "../Loading/Loading.svelte"; import Loading from "../Loading/Loading.svelte";
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
@ -56,12 +56,12 @@
> >
<div class:bx--inline-loading__animation="{true}"> <div class:bx--inline-loading__animation="{true}">
{#if status === "error"} {#if status === "error"}
<ErrorFilled16 <ErrorFilled
class="bx--inline-loading--error" class="bx--inline-loading--error"
title="{iconDescription}" title="{iconDescription}"
/> />
{:else if status === "finished"} {:else if status === "finished"}
<CheckmarkFilled16 <CheckmarkFilled
class="bx--inline-loading__checkmark-container" class="bx--inline-loading__checkmark-container"
title="{iconDescription}" title="{iconDescription}"
/> />

4
src/Link/OutboundLink.svelte
View file

@ -2,7 +2,7 @@
/** @extends {"./Link.svelte"} LinkProps */ /** @extends {"./Link.svelte"} LinkProps */
import Link from "./Link.svelte"; import Link from "./Link.svelte";
import Launch16 from "../icons/Launch16.svelte"; import Launch from "../icons/Launch.svelte";
</script> </script>
<Link <Link
@ -12,7 +12,7 @@
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave
target="_blank" target="_blank"
icon="{Launch16}" icon="{Launch}"
> >
<slot /> <slot />
</Link> </Link>

4
src/ListBox/ListBoxMenuIcon.svelte
View file

@ -15,7 +15,7 @@
*/ */
export let translateWithId = (id) => defaultTranslations[id]; export let translateWithId = (id) => defaultTranslations[id];
import ChevronDown16 from "../icons/ChevronDown16.svelte"; import ChevronDown from "../icons/ChevronDown.svelte";
const defaultTranslations = { const defaultTranslations = {
[translationIds.close]: "Close menu", [translationIds.close]: "Close menu",
@ -31,5 +31,5 @@
{...$$restProps} {...$$restProps}
on:click|preventDefault on:click|preventDefault
> >
<ChevronDown16 aria-label="{description}" title="{description}" /> <ChevronDown aria-label="{description}" title="{description}" />
</div> </div>

6
src/ListBox/ListBoxSelection.svelte
View file

@ -28,7 +28,7 @@
export let ref = null; export let ref = null;
import { createEventDispatcher, getContext } from "svelte"; import { createEventDispatcher, getContext } from "svelte";
import Close16 from "../icons/Close16.svelte"; import Close from "../icons/Close.svelte";
const defaultTranslations = { const defaultTranslations = {
[translationIds.clearAll]: "Clear all selected items", [translationIds.clearAll]: "Clear all selected items",
@ -75,7 +75,7 @@
aria-label="{translationIds.clearAll}" aria-label="{translationIds.clearAll}"
title="{description}" title="{description}"
> >
<Close16 /> <Close />
</div> </div>
</div> </div>
{:else} {:else}
@ -101,6 +101,6 @@
}}" }}"
> >
{#if selectionCount !== undefined}{selectionCount}{/if} {#if selectionCount !== undefined}{selectionCount}{/if}
<Close16 /> <Close />
</div> </div>
{/if} {/if}

8
src/Modal/Modal.svelte
View file

@ -90,7 +90,7 @@
export let ref = null; export let ref = null;
import { createEventDispatcher, onMount, afterUpdate } from "svelte"; import { createEventDispatcher, onMount, afterUpdate } from "svelte";
import Close20 from "../icons/Close20.svelte"; import Close from "../icons/Close.svelte";
import Button from "../Button/Button.svelte"; import Button from "../Button/Button.svelte";
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
@ -228,7 +228,8 @@
open = false; open = false;
}}" }}"
> >
<Close20 <Close
size="{20}"
aria-label="{iconDescription}" aria-label="{iconDescription}"
class="bx--modal-close__icon" class="bx--modal-close__icon"
/> />
@ -253,7 +254,8 @@
open = false; open = false;
}}" }}"
> >
<Close20 <Close
size="{20}"
aria-label="{iconDescription}" aria-label="{iconDescription}"
class="bx--modal-close__icon" class="bx--modal-close__icon"
/> />

10
src/MultiSelect/MultiSelect.svelte
View file

@ -161,8 +161,8 @@
export let highlightedId = null; export let highlightedId = null;
import { afterUpdate, createEventDispatcher, setContext } from "svelte"; import { afterUpdate, createEventDispatcher, setContext } from "svelte";
import WarningFilled16 from "../icons/WarningFilled16.svelte"; import WarningFilled from "../icons/WarningFilled.svelte";
import WarningAltFilled16 from "../icons/WarningAltFilled16.svelte"; import WarningAltFilled from "../icons/WarningAltFilled.svelte";
import Checkbox from "../Checkbox/Checkbox.svelte"; import Checkbox from "../Checkbox/Checkbox.svelte";
import { import {
ListBox, ListBox,
@ -300,10 +300,10 @@
{checked.length > 0 && 'bx--multi-select--selected'}" {checked.length > 0 && 'bx--multi-select--selected'}"
> >
{#if invalid} {#if invalid}
<WarningFilled16 class="bx--list-box__invalid-icon" /> <WarningFilled class="bx--list-box__invalid-icon" />
{/if} {/if}
{#if !invalid && warn} {#if !invalid && warn}
<WarningAltFilled16 <WarningAltFilled
class="bx--list-box__invalid-icon bx--list-box__invalid-icon--warning" class="bx--list-box__invalid-icon bx--list-box__invalid-icon--warning"
/> />
{/if} {/if}
@ -431,7 +431,7 @@
value="{inputValue}" value="{inputValue}"
/> />
{#if invalid} {#if invalid}
<WarningFilled16 class="bx--list-box__invalid-icon" /> <WarningFilled class="bx--list-box__invalid-icon" />
{/if} {/if}
{#if inputValue} {#if inputValue}
<ListBoxSelection <ListBoxSelection

5
src/Notification/NotificationButton.svelte
View file

@ -9,7 +9,7 @@
* Specify the icon to render * Specify the icon to render
* @type {typeof import("svelte").SvelteComponent} * @type {typeof import("svelte").SvelteComponent}
*/ */
export let icon = Close20; export let icon = Close;
/** /**
* Specify the title of the icon * Specify the title of the icon
@ -20,7 +20,7 @@
/** Specify the ARIA label for the icon */ /** Specify the ARIA label for the icon */
export let iconDescription = "Close icon"; export let iconDescription = "Close icon";
import Close20 from "../icons/Close20.svelte"; import Close from "../icons/Close.svelte";
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events --> <!-- svelte-ignore a11y-mouse-events-have-key-events -->
@ -38,6 +38,7 @@
> >
<svelte:component <svelte:component
this="{icon}" this="{icon}"
size="{20}"
title="{title}" title="{title}"
class="bx--{notificationType}-notification__close-icon" class="bx--{notificationType}-notification__close-icon"
/> />

25
src/Notification/NotificationIcon.svelte
View file

@ -14,25 +14,26 @@
/** Specify the ARIA label for the icon */ /** Specify the ARIA label for the icon */
export let iconDescription = "Closes notification"; export let iconDescription = "Closes notification";
import CheckmarkFilled20 from "../icons/CheckmarkFilled20.svelte"; import CheckmarkFilled from "../icons/CheckmarkFilled.svelte";
import ErrorFilled20 from "../icons/ErrorFilled20.svelte"; import ErrorFilled from "../icons/ErrorFilled.svelte";
import InformationFilled20 from "../icons/InformationFilled20.svelte"; import InformationFilled from "../icons/InformationFilled.svelte";
import InformationSquareFilled20 from "../icons/InformationSquareFilled20.svelte"; import InformationSquareFilled from "../icons/InformationSquareFilled.svelte";
import WarningFilled20 from "../icons/WarningFilled20.svelte"; import WarningFilled from "../icons/WarningFilled.svelte";
import WarningAltFilled20 from "../icons/WarningAltFilled20.svelte"; import WarningAltFilled from "../icons/WarningAltFilled.svelte";
const icons = { const icons = {
error: ErrorFilled20, error: ErrorFilled,
"info-square": InformationSquareFilled20, "info-square": InformationSquareFilled,
info: InformationFilled20, info: InformationFilled,
success: CheckmarkFilled20, success: CheckmarkFilled,
warning: WarningFilled20, warning: WarningFilled,
"warning-alt": WarningAltFilled20, "warning-alt": WarningAltFilled,
}; };
</script> </script>
<svelte:component <svelte:component
this="{icons[kind]}" this="{icons[kind]}"
size="{20}"
title="{iconDescription}" title="{iconDescription}"
class="bx--{notificationType}-notification__icon" class="bx--{notificationType}-notification__icon"
/> />

20
src/NumberInput/NumberInput.svelte
View file

@ -100,11 +100,11 @@
export let ref = null; export let ref = null;
import { createEventDispatcher } from "svelte"; import { createEventDispatcher } from "svelte";
import Add16 from "../icons/Add16.svelte"; import Add from "../icons/Add.svelte";
import Subtract16 from "../icons/Subtract16.svelte"; import Subtract from "../icons/Subtract.svelte";
import WarningFilled16 from "../icons/WarningFilled16.svelte"; import WarningFilled from "../icons/WarningFilled.svelte";
import WarningAltFilled16 from "../icons/WarningAltFilled16.svelte"; import WarningAltFilled from "../icons/WarningAltFilled.svelte";
import EditOff16 from "../icons/EditOff16.svelte"; import EditOff from "../icons/EditOff.svelte";
const defaultTranslations = { const defaultTranslations = {
[translationIds.increment]: "Increment number", [translationIds.increment]: "Increment number",
@ -207,15 +207,15 @@
on:blur on:blur
/> />
{#if invalid} {#if invalid}
<WarningFilled16 class="bx--number__invalid" /> <WarningFilled class="bx--number__invalid" />
{/if} {/if}
{#if !invalid && warn} {#if !invalid && warn}
<WarningAltFilled16 <WarningAltFilled
class="bx--number__invalid bx--number__invalid--warning" class="bx--number__invalid bx--number__invalid--warning"
/> />
{/if} {/if}
{#if readonly} {#if readonly}
<EditOff16 class="bx--text-input__readonly-icon" /> <EditOff class="bx--text-input__readonly-icon" />
{/if} {/if}
{#if !hideSteppers} {#if !hideSteppers}
<div class:bx--number__controls="{true}"> <div class:bx--number__controls="{true}">
@ -231,7 +231,7 @@
}}" }}"
disabled="{disabled}" disabled="{disabled}"
> >
<Subtract16 class="down-icon" /> <Subtract class="down-icon" />
</button> </button>
<div class:bx--number__rule-divider="{true}"></div> <div class:bx--number__rule-divider="{true}"></div>
<button <button
@ -246,7 +246,7 @@
}}" }}"
disabled="{disabled}" disabled="{disabled}"
> >
<Add16 class="up-icon" /> <Add class="up-icon" />
</button> </button>
<div class:bx--number__rule-divider="{true}"></div> <div class:bx--number__rule-divider="{true}"></div>
</div> </div>

11
src/OverflowMenu/OverflowMenu.svelte
View file

@ -31,10 +31,11 @@
export let menuOptionsClass = undefined; export let menuOptionsClass = undefined;
/** /**
* Specify the icon to render * Specify the icon to render.
* Defaults to `<OverflowMenuVertical />`
* @type {typeof import("svelte").SvelteComponent} * @type {typeof import("svelte").SvelteComponent}
*/ */
export let icon = OverflowMenuVertical16; export let icon = OverflowMenuVertical;
/** /**
* Specify the icon class * Specify the icon class
@ -61,8 +62,8 @@
afterUpdate, afterUpdate,
} from "svelte"; } from "svelte";
import { writable } from "svelte/store"; import { writable } from "svelte/store";
import OverflowMenuVertical16 from "../icons/OverflowMenuVertical16.svelte"; import OverflowMenuVertical from "../icons/OverflowMenuVertical.svelte";
import OverflowMenuHorizontal16 from "../icons/OverflowMenuHorizontal16.svelte"; import OverflowMenuHorizontal from "../icons/OverflowMenuHorizontal.svelte";
const ctxBreadcrumbItem = getContext("BreadcrumbItem"); const ctxBreadcrumbItem = getContext("BreadcrumbItem");
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
@ -75,7 +76,7 @@
let onMountAfterUpdate = true; let onMountAfterUpdate = true;
$: if (ctxBreadcrumbItem) { $: if (ctxBreadcrumbItem) {
icon = OverflowMenuHorizontal16; icon = OverflowMenuHorizontal;
} }
setContext("OverflowMenu", { setContext("OverflowMenu", {

8
src/Pagination/Pagination.svelte
View file

@ -71,8 +71,8 @@
export let id = "ccs-" + Math.random().toString(36); export let id = "ccs-" + Math.random().toString(36);
import { afterUpdate, createEventDispatcher } from "svelte"; import { afterUpdate, createEventDispatcher } from "svelte";
import CaretLeft16 from "../icons/CaretLeft16.svelte"; import CaretLeft from "../icons/CaretLeft.svelte";
import CaretRight16 from "../icons/CaretRight16.svelte"; import CaretRight from "../icons/CaretRight.svelte";
import Button from "../Button/Button.svelte"; import Button from "../Button/Button.svelte";
import Select from "../Select/Select.svelte"; import Select from "../Select/Select.svelte";
import SelectItem from "../Select/SelectItem.svelte"; import SelectItem from "../Select/SelectItem.svelte";
@ -161,7 +161,7 @@
kind="ghost" kind="ghost"
tooltipAlignment="center" tooltipAlignment="center"
tooltipPosition="top" tooltipPosition="top"
icon="{CaretLeft16}" icon="{CaretLeft}"
iconDescription="{backwardText}" iconDescription="{backwardText}"
disabled="{backButtonDisabled}" disabled="{backButtonDisabled}"
class="bx--pagination__button bx--pagination__button--backward {backButtonDisabled class="bx--pagination__button bx--pagination__button--backward {backButtonDisabled
@ -176,7 +176,7 @@
kind="ghost" kind="ghost"
tooltipAlignment="end" tooltipAlignment="end"
tooltipPosition="top" tooltipPosition="top"
icon="{CaretRight16}" icon="{CaretRight}"
iconDescription="{forwardText}" iconDescription="{forwardText}"
disabled="{forwardButtonDisabled}" disabled="{forwardButtonDisabled}"
class="bx--pagination__button bx--pagination__button--forward {forwardButtonDisabled class="bx--pagination__button bx--pagination__button--forward {forwardButtonDisabled

8
src/PaginationNav/PaginationNav.svelte
View file

@ -24,8 +24,8 @@
export let backwardText = "Previous page"; export let backwardText = "Previous page";
import { afterUpdate, createEventDispatcher } from "svelte"; import { afterUpdate, createEventDispatcher } from "svelte";
import CaretLeft16 from "../icons/CaretLeft16.svelte"; import CaretLeft from "../icons/CaretLeft.svelte";
import CaretRight16 from "../icons/CaretRight16.svelte"; import CaretRight from "../icons/CaretRight.svelte";
import PaginationItem from "./PaginationItem.svelte"; import PaginationItem from "./PaginationItem.svelte";
import PaginationOverflow from "./PaginationOverflow.svelte"; import PaginationOverflow from "./PaginationOverflow.svelte";
import Button from "../Button/Button.svelte"; import Button from "../Button/Button.svelte";
@ -76,7 +76,7 @@
tooltipPosition="bottom" tooltipPosition="bottom"
iconDescription="{backwardText}" iconDescription="{backwardText}"
disabled="{!loop && page === 0}" disabled="{!loop && page === 0}"
icon="{CaretLeft16}" icon="{CaretLeft}"
on:click="{() => { on:click="{() => {
if (page - 1 < 0) { if (page - 1 < 0) {
if (loop) page = total - 1; if (loop) page = total - 1;
@ -133,7 +133,7 @@
tooltipPosition="bottom" tooltipPosition="bottom"
iconDescription="{forwardText}" iconDescription="{forwardText}"
disabled="{!loop && page === total - 1}" disabled="{!loop && page === total - 1}"
icon="{CaretRight16}" icon="{CaretRight}"
on:click="{() => { on:click="{() => {
if (page + 1 >= total) { if (page + 1 >= total) {
if (loop) page = 0; if (loop) page = 0;

4
src/PaginationNav/PaginationOverflow.svelte
View file

@ -10,7 +10,7 @@
export let count = 0; export let count = 0;
import { createEventDispatcher } from "svelte"; import { createEventDispatcher } from "svelte";
import OverflowMenuHorizontal16 from "../icons/OverflowMenuHorizontal16.svelte"; import OverflowMenuHorizontal from "../icons/OverflowMenuHorizontal.svelte";
import PaginationItem from "./PaginationItem.svelte"; import PaginationItem from "./PaginationItem.svelte";
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
@ -40,7 +40,7 @@
{/each} {/each}
</select> </select>
<div class:bx--pagination-nav__select-icon-wrapper="{true}"> <div class:bx--pagination-nav__select-icon-wrapper="{true}">
<OverflowMenuHorizontal16 class="bx--pagination-nav__select-icon" /> <OverflowMenuHorizontal class="bx--pagination-nav__select-icon" />
</div> </div>
</div> </div>
</li> </li>

16
src/ProgressIndicator/ProgressStep.svelte
View file

@ -24,10 +24,10 @@
export let id = "ccs-" + Math.random().toString(36); export let id = "ccs-" + Math.random().toString(36);
import { onMount, getContext } from "svelte"; import { onMount, getContext } from "svelte";
import CheckmarkOutline16 from "../icons/CheckmarkOutline16.svelte"; import CheckmarkOutline from "../icons/CheckmarkOutline.svelte";
import Warning16 from "../icons/Warning16.svelte"; import Warning from "../icons/Warning.svelte";
import CircleDash16 from "../icons/CircleDash16.svelte"; import CircleDash from "../icons/CircleDash.svelte";
import Incomplete16 from "../icons/Incomplete16.svelte"; import Incomplete from "../icons/Incomplete.svelte";
let step = {}; let step = {};
@ -84,13 +84,13 @@
}}" }}"
> >
{#if invalid} {#if invalid}
<Warning16 class="bx--progress__warning" title="{description}" /> <Warning class="bx--progress__warning" title="{description}" />
{:else if current} {:else if current}
<Incomplete16 title="{description}" /> <Incomplete title="{description}" />
{:else if complete} {:else if complete}
<CheckmarkOutline16 title="{description}" /> <CheckmarkOutline title="{description}" />
{:else} {:else}
<CircleDash16 title="{description}" /> <CircleDash title="{description}" />
{/if} {/if}
<slot props="{{ class: 'bx--progress-label' }}"> <slot props="{{ class: 'bx--progress-label' }}">
<p class:bx--progress-label="{true}">{label}</p> <p class:bx--progress-label="{true}">{label}</p>

12
src/Search/Search.svelte
View file

@ -53,10 +53,11 @@
export let labelText = ""; export let labelText = "";
/** /**
* Specify the icon to render * Specify the icon to render.
* Defaults to `<Search />`
* @type {typeof import("svelte").SvelteComponent} * @type {typeof import("svelte").SvelteComponent}
*/ */
export let icon = Search16; export let icon = IconSearch;
/** Set an id for the input element */ /** Set an id for the input element */
export let id = "ccs-" + Math.random().toString(36); export let id = "ccs-" + Math.random().toString(36);
@ -65,9 +66,8 @@
export let ref = null; export let ref = null;
import { createEventDispatcher } from "svelte"; import { createEventDispatcher } from "svelte";
import Close16 from "../icons/Close16.svelte"; import Close from "../icons/Close.svelte";
import Close20 from "../icons/Close20.svelte"; import IconSearch from "../icons/IconSearch.svelte";
import Search16 from "../icons/Search16.svelte";
import SearchSkeleton from "./SearchSkeleton.svelte"; import SearchSkeleton from "./SearchSkeleton.svelte";
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
@ -162,7 +162,7 @@
dispatch('clear'); dispatch('clear');
}}" }}"
> >
<svelte:component this="{size === 'xl' ? Close20 : Close16}" /> <svelte:component this="{Close}" size="{size === 'xl' ? 20 : 16}" />
</button> </button>
</div> </div>
{/if} {/if}

16
src/Select/Select.svelte
View file

@ -65,9 +65,9 @@
import { createEventDispatcher, setContext, afterUpdate } from "svelte"; import { createEventDispatcher, setContext, afterUpdate } from "svelte";
import { writable } from "svelte/store"; import { writable } from "svelte/store";
import ChevronDown16 from "../icons/ChevronDown16.svelte"; import ChevronDown from "../icons/ChevronDown.svelte";
import WarningFilled16 from "../icons/WarningFilled16.svelte"; import WarningFilled from "../icons/WarningFilled.svelte";
import WarningAltFilled16 from "../icons/WarningAltFilled16.svelte"; import WarningAltFilled from "../icons/WarningAltFilled.svelte";
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
const selectedValue = writable(selected); const selectedValue = writable(selected);
@ -129,9 +129,9 @@
> >
<slot /> <slot />
</select> </select>
<ChevronDown16 class="bx--select__arrow" /> <ChevronDown class="bx--select__arrow" />
{#if invalid} {#if invalid}
<WarningFilled16 class="bx--select__invalid-icon" /> <WarningFilled class="bx--select__invalid-icon" />
{/if} {/if}
</div> </div>
{#if invalid} {#if invalid}
@ -173,12 +173,12 @@
> >
<slot /> <slot />
</select> </select>
<ChevronDown16 class="bx--select__arrow" /> <ChevronDown class="bx--select__arrow" />
{#if invalid} {#if invalid}
<WarningFilled16 class="bx--select__invalid-icon" /> <WarningFilled class="bx--select__invalid-icon" />
{/if} {/if}
{#if !invalid && warn} {#if !invalid && warn}
<WarningAltFilled16 <WarningAltFilled
class="bx--select__invalid-icon bx--select__invalid-icon--warning" class="bx--select__invalid-icon bx--select__invalid-icon--warning"
/> />
{/if} {/if}

4
src/Tabs/Tabs.svelte
View file

@ -22,7 +22,7 @@
import { createEventDispatcher, afterUpdate, setContext } from "svelte"; import { createEventDispatcher, afterUpdate, setContext } from "svelte";
import { writable, derived } from "svelte/store"; import { writable, derived } from "svelte/store";
import ChevronDownGlyph from "../icons/ChevronDownGlyph.svelte"; import ChevronDown from "../icons/ChevronDown.svelte";
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
@ -137,7 +137,7 @@
> >
{#if currentTab}{currentTab.label}{/if} {#if currentTab}{currentTab.label}{/if}
</a> </a>
<ChevronDownGlyph aria-hidden="true" title="{iconDescription}" /> <ChevronDown aria-hidden="true" title="{iconDescription}" />
</div> </div>
<ul <ul
role="tablist" role="tablist"

4
src/Tag/Tag.svelte
View file

@ -35,7 +35,7 @@
export let id = "ccs-" + Math.random().toString(36); export let id = "ccs-" + Math.random().toString(36);
import { createEventDispatcher } from "svelte"; import { createEventDispatcher } from "svelte";
import Close16 from "../icons/Close16.svelte"; import Close from "../icons/Close.svelte";
import TagSkeleton from "./TagSkeleton.svelte"; import TagSkeleton from "./TagSkeleton.svelte";
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
@ -89,7 +89,7 @@
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave
> >
<Close16 /> <Close />
</button> </button>
</div> </div>
{:else if interactive} {:else if interactive}

4
src/TextArea/TextArea.svelte
View file

@ -53,7 +53,7 @@
/** Obtain a reference to the textarea HTML element */ /** Obtain a reference to the textarea HTML element */
export let ref = null; export let ref = null;
import WarningFilled16 from "../icons/WarningFilled16.svelte"; import WarningFilled from "../icons/WarningFilled.svelte";
$: errorId = `error-${id}`; $: errorId = `error-${id}`;
</script> </script>
@ -90,7 +90,7 @@
data-invalid="{invalid || undefined}" data-invalid="{invalid || undefined}"
> >
{#if invalid} {#if invalid}
<WarningFilled16 class="bx--text-area__invalid-icon" /> <WarningFilled class="bx--text-area__invalid-icon" />
{/if} {/if}
<textarea <textarea
bind:this="{ref}" bind:this="{ref}"

16
src/TextInput/PasswordInput.svelte
View file

@ -81,10 +81,10 @@
export let ref = null; export let ref = null;
import { getContext } from "svelte"; import { getContext } from "svelte";
import WarningFilled16 from "../icons/WarningFilled16.svelte"; import WarningFilled from "../icons/WarningFilled.svelte";
import WarningAltFilled16 from "../icons/WarningAltFilled16.svelte"; import WarningAltFilled from "../icons/WarningAltFilled.svelte";
import View16 from "../icons/View16.svelte"; import View from "../icons/View.svelte";
import ViewOff16 from "../icons/ViewOff16.svelte"; import ViewOff from "../icons/ViewOff.svelte";
const ctx = getContext("Form"); const ctx = getContext("Form");
@ -154,10 +154,10 @@
data-invalid="{invalid || undefined}" data-invalid="{invalid || undefined}"
> >
{#if invalid} {#if invalid}
<WarningFilled16 class="bx--text-input__invalid-icon" /> <WarningFilled class="bx--text-input__invalid-icon" />
{/if} {/if}
{#if !invalid && warn} {#if !invalid && warn}
<WarningAltFilled16 <WarningAltFilled
class="bx--text-input__invalid-icon class="bx--text-input__invalid-icon
bx--text-input__invalid-icon--warning" bx--text-input__invalid-icon--warning"
/> />
@ -213,9 +213,9 @@
</span> </span>
{/if} {/if}
{#if type === "text"} {#if type === "text"}
<ViewOff16 class="bx--icon-visibility-off" /> <ViewOff class="bx--icon-visibility-off" />
{:else} {:else}
<View16 class="bx--icon-visibility-on" /> <View class="bx--icon-visibility-on" />
{/if} {/if}
</button> </button>
</div> </div>

12
src/TextInput/TextInput.svelte
View file

@ -71,9 +71,9 @@
export let readonly = false; export let readonly = false;
import { createEventDispatcher, getContext } from "svelte"; import { createEventDispatcher, getContext } from "svelte";
import WarningFilled16 from "../icons/WarningFilled16.svelte"; import WarningFilled from "../icons/WarningFilled.svelte";
import WarningAltFilled16 from "../icons/WarningAltFilled16.svelte"; import WarningAltFilled from "../icons/WarningAltFilled.svelte";
import EditOff16 from "../icons/EditOff16.svelte"; import EditOff from "../icons/EditOff.svelte";
const ctx = getContext("Form"); const ctx = getContext("Form");
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
@ -163,16 +163,16 @@
class:bx--text-input__field-wrapper--warning="{!invalid && warn}" class:bx--text-input__field-wrapper--warning="{!invalid && warn}"
> >
{#if invalid} {#if invalid}
<WarningFilled16 class="bx--text-input__invalid-icon" /> <WarningFilled class="bx--text-input__invalid-icon" />
{/if} {/if}
{#if !invalid && warn} {#if !invalid && warn}
<WarningAltFilled16 <WarningAltFilled
class="bx--text-input__invalid-icon class="bx--text-input__invalid-icon
bx--text-input__invalid-icon--warning" bx--text-input__invalid-icon--warning"
/> />
{/if} {/if}
{#if readonly} {#if readonly}
<EditOff16 class="bx--text-input__readonly-icon" /> <EditOff class="bx--text-input__readonly-icon" />
{/if} {/if}
<input <input
bind:this="{ref}" bind:this="{ref}"

4
src/Tile/ExpandableTile.svelte
View file

@ -33,7 +33,7 @@
export let ref = null; export let ref = null;
import { afterUpdate } from "svelte"; import { afterUpdate } from "svelte";
import ChevronDown16 from "../icons/ChevronDown16.svelte"; import ChevronDown from "../icons/ChevronDown.svelte";
let refAbove = null; let refAbove = null;
@ -83,7 +83,7 @@
</div> </div>
<div class:bx--tile__chevron="{true}"> <div class:bx--tile__chevron="{true}">
<span>{expanded ? tileExpandedLabel : tileCollapsedLabel}</span> <span>{expanded ? tileExpandedLabel : tileCollapsedLabel}</span>
<ChevronDown16 /> <ChevronDown />
</div> </div>
<div class:bx--tile-content="{true}"> <div class:bx--tile-content="{true}">
<span class:bx--tile-content__below-the-fold="{true}"> <span class:bx--tile-content__below-the-fold="{true}">

7
src/Tile/RadioTile.svelte
View file

@ -24,7 +24,7 @@
export let name = ""; export let name = "";
import { getContext } from "svelte"; import { getContext } from "svelte";
import CheckmarkFilled16 from "../icons/CheckmarkFilled16.svelte"; import CheckmarkFilled from "../icons/CheckmarkFilled.svelte";
const { add, update, selectedValue } = getContext("TileGroup"); const { add, update, selectedValue } = getContext("TileGroup");
@ -71,10 +71,7 @@
on:mouseleave on:mouseleave
> >
<span class:bx--tile__checkmark="{true}"> <span class:bx--tile__checkmark="{true}">
<CheckmarkFilled16 <CheckmarkFilled aria-label="{iconDescription}" title="{iconDescription}" />
aria-label="{iconDescription}"
title="{iconDescription}"
/>
</span> </span>
<span class:bx--tile-content="{true}"> <span class:bx--tile-content="{true}">
<slot /> <slot />

7
src/Tile/SelectableTile.svelte
View file

@ -33,7 +33,7 @@
export let ref = null; export let ref = null;
import { createEventDispatcher } from "svelte"; import { createEventDispatcher } from "svelte";
import CheckmarkFilled16 from "../icons/CheckmarkFilled16.svelte"; import CheckmarkFilled from "../icons/CheckmarkFilled.svelte";
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
@ -80,10 +80,7 @@
}}" }}"
> >
<span class:bx--tile__checkmark="{true}"> <span class:bx--tile__checkmark="{true}">
<CheckmarkFilled16 <CheckmarkFilled aria-label="{iconDescription}" title="{iconDescription}" />
aria-label="{iconDescription}"
title="{iconDescription}"
/>
</span> </span>
<span class:bx--tile-content="{true}"> <span class:bx--tile-content="{true}">
<slot /> <slot />

4
src/TimePicker/TimePickerSelect.svelte
View file

@ -28,7 +28,7 @@
import { setContext } from "svelte"; import { setContext } from "svelte";
import { writable } from "svelte/store"; import { writable } from "svelte/store";
import ChevronDownGlyph from "../icons/ChevronDownGlyph.svelte"; import ChevronDown from "../icons/ChevronDown.svelte";
const selectedValue = writable(value); const selectedValue = writable(value);
@ -73,7 +73,7 @@
> >
<slot /> <slot />
</select> </select>
<ChevronDownGlyph <ChevronDown
aria-label="{iconDescription}" aria-label="{iconDescription}"
title="{iconDescription}" title="{iconDescription}"
class="bx--select__arrow" class="bx--select__arrow"

8
src/Tooltip/Tooltip.svelte
View file

@ -29,11 +29,11 @@
export let hideIcon = false; export let hideIcon = false;
/** /**
* Specify the icon to render for the tooltip button * Specify the icon to render for the tooltip button.
* Icon size must be 16px (e.g., `Add16`, `Task16`) * Default to `<Information />`
* @type {typeof import("svelte").SvelteComponent} * @type {typeof import("svelte").SvelteComponent}
*/ */
export let icon = Information16; export let icon = Information;
/** Specify the ARIA label for the tooltip button */ /** Specify the ARIA label for the tooltip button */
export let iconDescription = ""; export let iconDescription = "";
@ -70,7 +70,7 @@
import { createEventDispatcher, afterUpdate, setContext } from "svelte"; import { createEventDispatcher, afterUpdate, setContext } from "svelte";
import { writable } from "svelte/store"; import { writable } from "svelte/store";
import Information16 from "../icons/Information16.svelte"; import Information from "../icons/Information.svelte";
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
const tooltipOpen = writable(open); const tooltipOpen = writable(open);

4
src/TreeView/TreeViewNodeList.svelte
View file

@ -21,7 +21,7 @@
export let icon = undefined; export let icon = undefined;
import { afterUpdate, getContext } from "svelte"; import { afterUpdate, getContext } from "svelte";
import CaretDown16 from "../icons/CaretDown16.svelte"; import CaretDown from "../icons/CaretDown.svelte";
import TreeViewNode, { computeTreeLeafDepth } from "./TreeViewNode.svelte"; import TreeViewNode, { computeTreeLeafDepth } from "./TreeViewNode.svelte";
let ref = null; let ref = null;
@ -142,7 +142,7 @@
toggleNode(node); toggleNode(node);
}}" }}"
> >
<CaretDown16 <CaretDown
class="bx--tree-parent-node__toggle-icon {expanded && class="bx--tree-parent-node__toggle-icon {expanded &&
'bx--tree-parent-node__toggle-icon--expanded'}" 'bx--tree-parent-node__toggle-icon--expanded'}"
/> />

18
src/UIShell/HamburgerMenu.svelte
View file

@ -9,24 +9,24 @@
export let isOpen = false; export let isOpen = false;
/** /**
* Specify the icon to render for the closed state * Specify the icon to render for the closed state.
* Defaults to `Menu20` * Defaults to `<Menu size={20} />`
* @type {typeof import("svelte").SvelteComponent} * @type {typeof import("svelte").SvelteComponent}
*/ */
export let iconMenu = Menu20; export let iconMenu = Menu;
/** /**
* Specify the icon to render for the opened state * Specify the icon to render for the opened state.
* Defaults to `Close20` * Defaults to `<Close size={20} />`
* @type {typeof import("svelte").SvelteComponent} * @type {typeof import("svelte").SvelteComponent}
*/ */
export let iconClose = Close20; export let iconClose = Close;
/** Obtain a reference to the HTML button element */ /** Obtain a reference to the HTML button element */
export let ref = null; export let ref = null;
import Close20 from "../icons/Close20.svelte"; import Close from "../icons/Close.svelte";
import Menu20 from "../icons/Menu20.svelte"; import Menu from "../icons/Menu.svelte";
</script> </script>
<button <button
@ -41,5 +41,5 @@
on:click on:click
on:click="{() => (isOpen = !isOpen)}" on:click="{() => (isOpen = !isOpen)}"
> >
<svelte:component this="{isOpen ? iconClose : iconMenu}" /> <svelte:component this="{isOpen ? iconClose : iconMenu}" size="{20}" />
</button> </button>

16
src/UIShell/Header.svelte
View file

@ -47,21 +47,21 @@
export let ref = null; export let ref = null;
/** /**
* Specify the icon to render for the closed state * Specify the icon to render for the closed state.
* Defaults to `Menu20` * Defaults to `<Menu size={20} />`
* @type {typeof import("svelte").SvelteComponent} * @type {typeof import("svelte").SvelteComponent}
*/ */
export let iconMenu = Menu20; export let iconMenu = Menu;
/** /**
* Specify the icon to render for the opened state * Specify the icon to render for the opened state.
* Defaults to `Close20` * Defaults to `<Close size={20} />`
* @type {typeof import("svelte").SvelteComponent} * @type {typeof import("svelte").SvelteComponent}
*/ */
export let iconClose = Close20; export let iconClose = Close;
import Close20 from "../icons/Close20.svelte"; import Close from "../icons/Close.svelte";
import Menu20 from "../icons/Menu20.svelte"; import Menu from "../icons/Menu.svelte";
import { shouldRenderHamburgerMenu } from "./navStore"; import { shouldRenderHamburgerMenu } from "./navStore";
import HamburgerMenu from "./HamburgerMenu.svelte"; import HamburgerMenu from "./HamburgerMenu.svelte";

18
src/UIShell/HeaderAction.svelte
View file

@ -3,16 +3,18 @@
export let isOpen = false; export let isOpen = false;
/** /**
* Specify the icon to render * Specify the icon to render when the action panel is closed.
* Defaults to `<Switcher size={20} />`
* @type {typeof import("svelte").SvelteComponent} * @type {typeof import("svelte").SvelteComponent}
*/ */
export let icon = AppSwitcher20; export let icon = Switcher;
/** /**
* Specify the icon to render when the action panel is open * Specify the icon to render when the action panel is open.
* Defaults to `<Close size={20} />`
* @type {typeof import("svelte").SvelteComponent} * @type {typeof import("svelte").SvelteComponent}
*/ */
export let closeIcon = Close20; export let closeIcon = Close;
/** /**
* Specify the text * Specify the text
@ -33,8 +35,8 @@
import { createEventDispatcher } from "svelte"; import { createEventDispatcher } from "svelte";
import { slide } from "svelte/transition"; import { slide } from "svelte/transition";
import Close20 from "../icons/Close20.svelte"; import Close from "../icons/Close.svelte";
import AppSwitcher20 from "../icons/AppSwitcher20.svelte"; import Switcher from "../icons/Switcher.svelte";
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
@ -65,11 +67,11 @@
> >
{#if isOpen} {#if isOpen}
<slot name="closeIcon"> <slot name="closeIcon">
<svelte:component this="{closeIcon}" /> <svelte:component this="{closeIcon}" size="{20}" />
</slot> </slot>
{:else} {:else}
<slot name="icon"> <slot name="icon">
<svelte:component this="{icon}" /> <svelte:component this="{icon}" size="{20}" />
</slot> </slot>
{/if} {/if}
<slot name="text"> <slot name="text">

2
src/UIShell/HeaderActionLink.svelte
View file

@ -27,7 +27,7 @@
{...$$restProps} {...$$restProps}
> >
<slot name="icon"> <slot name="icon">
<svelte:component this="{icon}" /> <svelte:component this="{icon}" size="{20}" />
</slot> </slot>
</a> </a>

4
src/UIShell/HeaderNavMenu.svelte
View file

@ -16,7 +16,7 @@
import { setContext } from "svelte"; import { setContext } from "svelte";
import { writable } from "svelte/store"; import { writable } from "svelte/store";
import ChevronDown16 from "../icons/ChevronDown16.svelte"; import ChevronDown from "../icons/ChevronDown.svelte";
const selectedItems = writable({}); const selectedItems = writable({});
@ -92,7 +92,7 @@
on:blur on:blur
> >
{text} {text}
<ChevronDown16 class="bx--header__menu-arrow" /> <ChevronDown class="bx--header__menu-arrow" />
</a> </a>
<ul <ul
bind:this="{menuRef}" bind:this="{menuRef}"

8
src/UIShell/HeaderSearch.svelte
View file

@ -27,8 +27,8 @@
export let selectedResultIndex = 0; export let selectedResultIndex = 0;
import { createEventDispatcher, tick } from "svelte"; import { createEventDispatcher, tick } from "svelte";
import Close20 from "../icons/Close20.svelte"; import Close from "../icons/Close.svelte";
import Search20 from "../icons/Search20.svelte"; import IconSearch from "../icons/IconSearch.svelte";
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
@ -72,7 +72,7 @@
active = true; active = true;
}}" }}"
> >
<Search20 title="Search" /> <IconSearch size="{20}" title="Search" />
</button> </button>
<input <input
bind:this="{ref}" bind:this="{ref}"
@ -125,7 +125,7 @@
dispatch('clear'); dispatch('clear');
}}" }}"
> >
<Close20 title="Close" /> <Close size="{20}" title="Close" />
</button> </button>
</div> </div>

4
src/UIShell/SideNavMenu.svelte
View file

@ -17,7 +17,7 @@
/** Obtain a reference to the HTML button element */ /** Obtain a reference to the HTML button element */
export let ref = null; export let ref = null;
import ChevronDown16 from "../icons/ChevronDown16.svelte"; import ChevronDown from "../icons/ChevronDown.svelte";
</script> </script>
<li class:bx--side-nav__item="{true}" class:bx--side-nav__item--icon="{icon}"> <li class:bx--side-nav__item="{true}" class:bx--side-nav__item--icon="{icon}">
@ -45,7 +45,7 @@
class:bx--side-nav__icon--small="{true}" class:bx--side-nav__icon--small="{true}"
class:bx--side-nav__submenu-chevron="{true}" class:bx--side-nav__submenu-chevron="{true}"
> >
<svelte:component this="{ChevronDown16}" title="Open Menu" tabindex="0" /> <svelte:component this="{ChevronDown}" title="Open Menu" tabindex="0" />
</div> </div>
</button> </button>
<ul role="menu" class:bx--side-nav__menu="{true}"> <ul role="menu" class:bx--side-nav__menu="{true}">

28
src/icons/Add.svelte Normal file
View file

@ -0,0 +1,28 @@
<script>
export let size = 16;
export let title = undefined;
$: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
$: attributes = {
"aria-hidden": labelled ? undefined : true,
role: labelled ? "img" : undefined,
focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
};
</script>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
fill="currentColor"
preserveAspectRatio="xMidYMid meet"
width="{size}"
height="{size}"
{...attributes}
{...$$restProps}
>
{#if title}<title>{title}</title>{/if}
<path
d="M17 15L17 8 15 8 15 15 8 15 8 17 15 17 15 24 17 24 17 17 24 17 24 15z"
></path>
</svg>

51
src/icons/Add16.svelte
View file

@ -1,51 +0,0 @@
<script>
let className = undefined;
export { className as class };
export let id = undefined;
export let tabindex = undefined;
export let focusable = false;
export let title = undefined;
export let style = undefined;
$: ariaLabel = $$props["aria-label"];
$: ariaLabelledBy = $$props["aria-labelledby"];
$: labelled = ariaLabel || ariaLabelledBy || title;
$: attributes = {
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledBy,
"aria-hidden": labelled ? undefined : true,
role: labelled ? "img" : undefined,
focusable: tabindex === "0" ? true : focusable,
tabindex,
};
</script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<svg
data-carbon-icon="Add16"
on:click
on:mouseover
on:mouseenter
on:mouseleave
on:keyup
on:keydown
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
fill="currentColor"
width="16"
height="16"
class="{className}"
preserveAspectRatio="xMidYMid meet"
style="{style}"
id="{id}"
{...attributes}
>
<path
d="M17 15L17 8 15 8 15 15 8 15 8 17 15 17 15 24 17 24 17 17 24 17 24 15z"
></path>
<slot>
{#if title}
<title>{title}</title>
{/if}
</slot>
</svg>

51
src/icons/AppSwitcher20.svelte
View file

@ -1,51 +0,0 @@
<script>
let className = undefined;
export { className as class };
export let id = undefined;
export let tabindex = undefined;
export let focusable = false;
export let title = undefined;
export let style = undefined;
$: ariaLabel = $$props["aria-label"];
$: ariaLabelledBy = $$props["aria-labelledby"];
$: labelled = ariaLabel || ariaLabelledBy || title;
$: attributes = {
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledBy,
"aria-hidden": labelled ? undefined : true,
role: labelled ? "img" : undefined,
focusable: tabindex === "0" ? true : focusable,
tabindex,
};
</script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<svg
data-carbon-icon="AppSwitcher20"
on:click
on:mouseover
on:mouseenter
on:mouseleave
on:keyup
on:keydown
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
fill="currentColor"
width="20"
height="20"
class="{className}"
preserveAspectRatio="xMidYMid meet"
style="{style}"
id="{id}"
{...attributes}
>
<path
d="M14 4H18V8H14zM4 4H8V8H4zM24 4H28V8H24zM14 14H18V18H14zM4 14H8V18H4zM24 14H28V18H24zM14 24H18V28H14zM4 24H8V28H4zM24 24H28V28H24z"
></path>
<slot>
{#if title}
<title>{title}</title>
{/if}
</slot>
</svg>

28
src/icons/ArrowUp.svelte Normal file
View file

@ -0,0 +1,28 @@
<script>
export let size = 16;
export let title = undefined;
$: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
$: attributes = {
"aria-hidden": labelled ? undefined : true,
role: labelled ? "img" : undefined,
focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
};
</script>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
fill="currentColor"
preserveAspectRatio="xMidYMid meet"
width="{size}"
height="{size}"
{...attributes}
{...$$restProps}
>
{#if title}<title>{title}</title>{/if}
<path
d="M16 4L6 14 7.41 15.41 15 7.83 15 28 17 28 17 7.83 24.59 15.41 26 14 16 4z"
></path>
</svg>

51
src/icons/ArrowUp20.svelte
View file

@ -1,51 +0,0 @@
<script>
let className = undefined;
export { className as class };
export let id = undefined;
export let tabindex = undefined;
export let focusable = false;
export let title = undefined;
export let style = undefined;
$: ariaLabel = $$props["aria-label"];
$: ariaLabelledBy = $$props["aria-labelledby"];
$: labelled = ariaLabel || ariaLabelledBy || title;
$: attributes = {
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledBy,
"aria-hidden": labelled ? undefined : true,
role: labelled ? "img" : undefined,
focusable: tabindex === "0" ? true : focusable,
tabindex,
};
</script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<svg
data-carbon-icon="ArrowUp20"
on:click
on:mouseover
on:mouseenter
on:mouseleave
on:keyup
on:keydown
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
fill="currentColor"
width="20"
height="20"
class="{className}"
preserveAspectRatio="xMidYMid meet"
style="{style}"
id="{id}"
{...attributes}
>
<path
d="M16 4L6 14 7.41 15.41 15 7.83 15 28 17 28 17 7.83 24.59 15.41 26 14 16 4z"
></path>
<slot>
{#if title}
<title>{title}</title>
{/if}
</slot>
</svg>

28
src/icons/ArrowsVertical.svelte Normal file
View file

@ -0,0 +1,28 @@
<script>
export let size = 16;
export let title = undefined;
$: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
$: attributes = {
"aria-hidden": labelled ? undefined : true,
role: labelled ? "img" : undefined,
focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
};
</script>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
fill="currentColor"
preserveAspectRatio="xMidYMid meet"
width="{size}"
height="{size}"
{...attributes}
{...$$restProps}
>
{#if title}<title>{title}</title>{/if}
<path
d="M27.6 20.6L24 24.2 24 4 22 4 22 24.2 18.4 20.6 17 22 23 28 29 22zM9 4L3 10 4.4 11.4 8 7.8 8 28 10 28 10 7.8 13.6 11.4 15 10z"
></path>
</svg>

51
src/icons/ArrowsVertical20.svelte
View file

@ -1,51 +0,0 @@
<script>
let className = undefined;
export { className as class };
export let id = undefined;
export let tabindex = undefined;
export let focusable = false;
export let title = undefined;
export let style = undefined;
$: ariaLabel = $$props["aria-label"];
$: ariaLabelledBy = $$props["aria-labelledby"];
$: labelled = ariaLabel || ariaLabelledBy || title;
$: attributes = {
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledBy,
"aria-hidden": labelled ? undefined : true,
role: labelled ? "img" : undefined,
focusable: tabindex === "0" ? true : focusable,
tabindex,
};
</script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<svg
data-carbon-icon="ArrowsVertical20"
on:click
on:mouseover
on:mouseenter
on:mouseleave
on:keyup
on:keydown
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
fill="currentColor"
width="20"
height="20"
class="{className}"
preserveAspectRatio="xMidYMid meet"
style="{style}"
id="{id}"
{...attributes}
>
<path
d="M27.6 20.6L24 24.2 24 4 22 4 22 24.2 18.4 20.6 17 22 23 28 29 22zM9 4L3 10 4.4 11.4 8 7.8 8 28 10 28 10 7.8 13.6 11.4 15 10z"
></path>
<slot>
{#if title}
<title>{title}</title>
{/if}
</slot>
</svg>

28
src/icons/Calendar.svelte Normal file
View file

@ -0,0 +1,28 @@
<script>
export let size = 16;
export let title = undefined;
$: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
$: attributes = {
"aria-hidden": labelled ? undefined : true,
role: labelled ? "img" : undefined,
focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
};
</script>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
fill="currentColor"
preserveAspectRatio="xMidYMid meet"
width="{size}"
height="{size}"
{...attributes}
{...$$restProps}
>
{#if title}<title>{title}</title>{/if}
<path
d="M26,4h-4V2h-2v2h-8V2h-2v2H6C4.9,4,4,4.9,4,6v20c0,1.1,0.9,2,2,2h20c1.1,0,2-0.9,2-2V6C28,4.9,27.1,4,26,4z M26,26H6V12h20 V26z M26,10H6V6h4v2h2V6h8v2h2V6h4V10z"
></path>
</svg>

51
src/icons/Calendar16.svelte
View file

@ -1,51 +0,0 @@
<script>
let className = undefined;
export { className as class };
export let id = undefined;
export let tabindex = undefined;
export let focusable = false;
export let title = undefined;
export let style = undefined;
$: ariaLabel = $$props["aria-label"];
$: ariaLabelledBy = $$props["aria-labelledby"];
$: labelled = ariaLabel || ariaLabelledBy || title;
$: attributes = {
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledBy,
"aria-hidden": labelled ? undefined : true,
role: labelled ? "img" : undefined,
focusable: tabindex === "0" ? true : focusable,
tabindex,
};
</script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<svg
data-carbon-icon="Calendar16"
on:click
on:mouseover
on:mouseenter
on:mouseleave
on:keyup
on:keydown
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
fill="currentColor"
width="16"
height="16"
class="{className}"
preserveAspectRatio="xMidYMid meet"
style="{style}"
id="{id}"
{...attributes}
>
<path
d="M26,4h-4V2h-2v2h-8V2h-2v2H6C4.9,4,4,4.9,4,6v20c0,1.1,0.9,2,2,2h20c1.1,0,2-0.9,2-2V6C28,4.9,27.1,4,26,4z M26,26H6V12h20 V26z M26,10H6V6h4v2h2V6h8v2h2V6h4V10z"
></path>
<slot>
{#if title}
<title>{title}</title>
{/if}
</slot>
</svg>

26
src/icons/CaretDown.svelte Normal file
View file

@ -0,0 +1,26 @@
<script>
export let size = 16;
export let title = undefined;
$: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
$: attributes = {
"aria-hidden": labelled ? undefined : true,
role: labelled ? "img" : undefined,
focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
};
</script>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
fill="currentColor"
preserveAspectRatio="xMidYMid meet"
width="{size}"
height="{size}"
{...attributes}
{...$$restProps}
>
{#if title}<title>{title}</title>{/if}
<path d="M24 12L16 22 8 12z"></path>
</svg>

49
src/icons/CaretDown16.svelte
View file

@ -1,49 +0,0 @@
<script>
let className = undefined;
export { className as class };
export let id = undefined;
export let tabindex = undefined;
export let focusable = false;
export let title = undefined;
export let style = undefined;
$: ariaLabel = $$props["aria-label"];
$: ariaLabelledBy = $$props["aria-labelledby"];
$: labelled = ariaLabel || ariaLabelledBy || title;
$: attributes = {
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledBy,
"aria-hidden": labelled ? undefined : true,
role: labelled ? "img" : undefined,
focusable: tabindex === "0" ? true : focusable,
tabindex,
};
</script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<svg
data-carbon-icon="CaretDown16"
on:click
on:mouseover
on:mouseenter
on:mouseleave
on:keyup
on:keydown
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
fill="currentColor"
width="16"
height="16"
class="{className}"
preserveAspectRatio="xMidYMid meet"
style="{style}"
id="{id}"
{...attributes}
>
<path d="M24 12L16 22 8 12z"></path>
<slot>
{#if title}
<title>{title}</title>
{/if}
</slot>
</svg>

26
src/icons/CaretLeft.svelte Normal file
View file

@ -0,0 +1,26 @@
<script>
export let size = 16;
export let title = undefined;
$: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
$: attributes = {
"aria-hidden": labelled ? undefined : true,
role: labelled ? "img" : undefined,
focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
};
</script>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
fill="currentColor"
preserveAspectRatio="xMidYMid meet"
width="{size}"
height="{size}"
{...attributes}
{...$$restProps}
>
{#if title}<title>{title}</title>{/if}
<path d="M20 24L10 16 20 8z"></path>
</svg>

49
src/icons/CaretLeft16.svelte
View file

@ -1,49 +0,0 @@
<script>
let className = undefined;
export { className as class };
export let id = undefined;
export let tabindex = undefined;
export let focusable = false;
export let title = undefined;
export let style = undefined;
$: ariaLabel = $$props["aria-label"];
$: ariaLabelledBy = $$props["aria-labelledby"];
$: labelled = ariaLabel || ariaLabelledBy || title;
$: attributes = {
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledBy,
"aria-hidden": labelled ? undefined : true,
role: labelled ? "img" : undefined,
focusable: tabindex === "0" ? true : focusable,
tabindex,
};
</script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<svg
data-carbon-icon="CaretLeft16"
on:click
on:mouseover
on:mouseenter
on:mouseleave
on:keyup
on:keydown
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
fill="currentColor"
width="16"
height="16"
class="{className}"
preserveAspectRatio="xMidYMid meet"
style="{style}"
id="{id}"
{...attributes}
>
<path d="M20 24L10 16 20 8z"></path>
<slot>
{#if title}
<title>{title}</title>
{/if}
</slot>
</svg>

26
src/icons/CaretRight.svelte Normal file
View file

@ -0,0 +1,26 @@
<script>
export let size = 16;
export let title = undefined;
$: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
$: attributes = {
"aria-hidden": labelled ? undefined : true,
role: labelled ? "img" : undefined,
focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
};
</script>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
fill="currentColor"
preserveAspectRatio="xMidYMid meet"
width="{size}"
height="{size}"
{...attributes}
{...$$restProps}
>
{#if title}<title>{title}</title>{/if}
<path d="M12 8L22 16 12 24z"></path>
</svg>

49
src/icons/CaretRight16.svelte
View file

@ -1,49 +0,0 @@
<script>
let className = undefined;
export { className as class };
export let id = undefined;
export let tabindex = undefined;
export let focusable = false;
export let title = undefined;
export let style = undefined;
$: ariaLabel = $$props["aria-label"];
$: ariaLabelledBy = $$props["aria-labelledby"];
$: labelled = ariaLabel || ariaLabelledBy || title;
$: attributes = {
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledBy,
"aria-hidden": labelled ? undefined : true,
role: labelled ? "img" : undefined,
focusable: tabindex === "0" ? true : focusable,
tabindex,
};
</script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<svg
data-carbon-icon="CaretRight16"
on:click
on:mouseover
on:mouseenter
on:mouseleave
on:keyup
on:keydown
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
fill="currentColor"
width="16"
height="16"
class="{className}"
preserveAspectRatio="xMidYMid meet"
style="{style}"
id="{id}"
{...attributes}
>
<path d="M12 8L22 16 12 24z"></path>
<slot>
{#if title}
<title>{title}</title>
{/if}
</slot>
</svg>

26
src/icons/Checkmark.svelte Normal file
View file

@ -0,0 +1,26 @@
<script>
export let size = 16;
export let title = undefined;
$: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
$: attributes = {
"aria-hidden": labelled ? undefined : true,
role: labelled ? "img" : undefined,
focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
};
</script>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
fill="currentColor"
preserveAspectRatio="xMidYMid meet"
width="{size}"
height="{size}"
{...attributes}
{...$$restProps}
>
{#if title}<title>{title}</title>{/if}
<path d="M13 24L4 15 5.414 13.586 13 21.171 26.586 7.586 28 9 13 24z"></path>
</svg>

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