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

chore: use bx css prefixes for now

Browse source
This commit is contained in:
Enrico Sacchetti 2024-01-11 13:03:10 -05:00
commit aeb05203c5
235 changed files with 1537 additions and 1563 deletions
Download patch file Download diff file Expand all files Collapse all files

20
COMPONENT_INDEX.md
View file

@ -305,8 +305,8 @@ None.
### Slots ### Slots
| Slot name | Default | Props | Fallback | | Slot name | Default | Props | Fallback |
| :-------- | :------ | :------------------------------------------------------------------------- | :------- | | :-------- | :------ | :------------------------------------------------------------------------ | :------- |
| -- | Yes | <code>{props?: { ["aria-current"]?: string; class: "cds--link"; }} </code> | -- | | -- | Yes | <code>{props?: { ["aria-current"]?: string; class: "bx--link"; }} </code> | -- |
### Events ### Events
@ -2622,9 +2622,9 @@ None.
### Slots ### Slots
| Slot name | Default | Props | Fallback | | Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | :-------- | :------ | :---- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| -- | Yes | -- | -- | | -- | Yes | -- | -- |
| menu | No | -- | <code>&lt;svelte:component<br /> this="{icon}"<br /> aria-label="{iconDescription}"<br /> title="{iconDescription}"<br /> class="cds--overflow-menu\_\_icon {iconClass}"<br /> /&gt;</code> | | menu | No | -- | <code>&lt;svelte:component<br /> this="{icon}"<br /> aria-label="{iconDescription}"<br /> title="{iconDescription}"<br /> class="bx--overflow-menu\_\_icon {iconClass}"<br /> /&gt;</code> |
### Events ### Events
@ -2656,8 +2656,8 @@ None.
### Slots ### Slots
| Slot name | Default | Props | Fallback | | Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------------------------------------------------------------------------------------------------------------------- | | :-------- | :------ | :---- | :------------------------------------------------------------------------------------------------------------------ |
| -- | Yes | -- | <code>&lt;div class:cds--overflow-menu-options\_\_option-content="{true}"&gt;<br /> {text}<br /> &lt;/div&gt;</code> | | -- | Yes | -- | <code>&lt;div class:bx--overflow-menu-options\_\_option-content="{true}"&gt;<br /> {text}<br /> &lt;/div&gt;</code> |
### Events ### Events
@ -2934,8 +2934,8 @@ None.
### Slots ### Slots
| Slot name | Default | Props | Fallback | | Slot name | Default | Props | Fallback |
| :-------- | :------ | :-------------------------------------------------------- | :------------------------------------------------------------------------- | | :-------- | :------ | :------------------------------------------------------- | :------------------------------------------------------------------------ |
| -- | Yes | <code>{ props: { class: 'cds--progress-label' } } </code> | <code>&lt;p class:cds--progress-label="{true}"&gt;{label}&lt;/p&gt;</code> | | -- | Yes | <code>{ props: { class: 'bx--progress-label' } } </code> | <code>&lt;p class:bx--progress-label="{true}"&gt;{label}&lt;/p&gt;</code> |
### Events ### Events
@ -4023,8 +4023,8 @@ None.
### Slots ### Slots
| Slot name | Default | Props | Fallback | | Slot name | Default | Props | Fallback |
| :-------- | :------ | :------------------------------------------------------ | :---------------------------------------------------- | | :-------- | :------ | :----------------------------------------------------- | :---------------------------------------------------- |
| -- | Yes | <code>{ props: { class: 'cds--tag\_\_label' } } </code> | -- | | -- | Yes | <code>{ props: { class: 'bx--tag\_\_label' } } </code> | -- |
| icon | No | -- | <code>&lt;svelte:component this="{icon}" /&gt;</code> | | icon | No | -- | <code>&lt;svelte:component this="{icon}" /&gt;</code> |
### Events ### Events

10
css/all.css
View file

File diff suppressed because one or more lines are too long

7
css/all.scss
View file

@ -1,6 +1,7 @@
// Use all Carbon themes // Use all Carbon themes
@use '@carbon/styles/scss/config' with ( @use '@carbon/styles/scss/config' with (
$use-akamai-cdn: true $use-akamai-cdn: true,
$prefix: 'bx'
); );
@use "@carbon/styles/scss/theme" as *; @use "@carbon/styles/scss/theme" as *;
@use "@carbon/styles/scss/themes" as *; @use "@carbon/styles/scss/themes" as *;
@ -26,9 +27,9 @@
@import "@carbon/styles/scss/reset"; @import "@carbon/styles/scss/reset";
@import "@carbon/styles/scss/components"; @import "@carbon/styles/scss/components";
.cds--text-truncate-end { .bx--text-truncate-end {
@include text-truncate-end; @include text-truncate-end;
} }
.cds--text-truncate-front { .bx--text-truncate-front {
@include text-truncate-front; @include text-truncate-front;
} }

10
css/g10.css
View file

File diff suppressed because one or more lines are too long

7
css/g10.scss
View file

@ -1,6 +1,7 @@
// Use g10 theme // Use g10 theme
@use '@carbon/styles/scss/config' with ( @use '@carbon/styles/scss/config' with (
$use-akamai-cdn: true $use-akamai-cdn: true,
$prefix: 'bx'
); );
@use "@carbon/styles/scss/theme" as *; @use "@carbon/styles/scss/theme" as *;
@use "@carbon/styles/scss/themes" as *; @use "@carbon/styles/scss/themes" as *;
@ -14,9 +15,9 @@
@import "@carbon/styles/scss/reset"; @import "@carbon/styles/scss/reset";
@import "@carbon/styles/scss/components"; @import "@carbon/styles/scss/components";
.cds--text-truncate-end { .bx--text-truncate-end {
@include text-truncate-end; @include text-truncate-end;
} }
.cds--text-truncate-front { .bx--text-truncate-front {
@include text-truncate-front; @include text-truncate-front;
} }

10
css/g100.css
View file

File diff suppressed because one or more lines are too long

7
css/g100.scss
View file

@ -1,6 +1,7 @@
// Use g10 theme // Use g10 theme
@use '@carbon/styles/scss/config' with ( @use '@carbon/styles/scss/config' with (
$use-akamai-cdn: true $use-akamai-cdn: true,
$prefix: 'bx'
); );
@use "@carbon/styles/scss/theme" as *; @use "@carbon/styles/scss/theme" as *;
@use "@carbon/styles/scss/themes" as *; @use "@carbon/styles/scss/themes" as *;
@ -14,9 +15,9 @@
@import "@carbon/styles/scss/reset"; @import "@carbon/styles/scss/reset";
@import "@carbon/styles/scss/components"; @import "@carbon/styles/scss/components";
.cds--text-truncate-end { .bx--text-truncate-end {
@include text-truncate-end; @include text-truncate-end;
} }
.cds--text-truncate-front { .bx--text-truncate-front {
@include text-truncate-front; @include text-truncate-front;
} }

10
css/g90.css
View file

File diff suppressed because one or more lines are too long

7
css/g90.scss
View file

@ -1,6 +1,7 @@
// Use g10 theme // Use g10 theme
@use '@carbon/styles/scss/config' with ( @use '@carbon/styles/scss/config' with (
$use-akamai-cdn: true $use-akamai-cdn: true,
$prefix: 'bx'
); );
@use "@carbon/styles/scss/theme" as *; @use "@carbon/styles/scss/theme" as *;
@use "@carbon/styles/scss/themes" as *; @use "@carbon/styles/scss/themes" as *;
@ -14,9 +15,9 @@
@import "@carbon/styles/scss/reset"; @import "@carbon/styles/scss/reset";
@import "@carbon/styles/scss/components"; @import "@carbon/styles/scss/components";
.cds--text-truncate-end { .bx--text-truncate-end {
@include text-truncate-end; @include text-truncate-end;
} }
.cds--text-truncate-front { .bx--text-truncate-front {
@include text-truncate-front; @include text-truncate-front;
} }

12
docs/src/COMPONENT_API.json
View file

@ -337,7 +337,7 @@
{ {
"name": "__default__", "name": "__default__",
"default": true, "default": true,
"slot_props": "{props?: { [\"aria-current\"]?: string; class: \"cds--link\"; }}" "slot_props": "{props?: { [\"aria-current\"]?: string; class: \"bx--link\"; }}"
} }
], ],
"events": [ "events": [
@ -8127,7 +8127,7 @@
{ {
"name": "menu", "name": "menu",
"default": false, "default": false,
"fallback": "<svelte:component\n this=\"{icon}\"\n aria-label=\"{iconDescription}\"\n title=\"{iconDescription}\"\n class=\"cds--overflow-menu__icon {iconClass}\"\n />", "fallback": "<svelte:component\n this=\"{icon}\"\n aria-label=\"{iconDescription}\"\n title=\"{iconDescription}\"\n class=\"bx--overflow-menu__icon {iconClass}\"\n />",
"slot_props": "{}" "slot_props": "{}"
} }
], ],
@ -8264,7 +8264,7 @@
{ {
"name": "__default__", "name": "__default__",
"default": true, "default": true,
"fallback": "<div class:cds--overflow-menu-options__option-content=\"{true}\">\n {text}\n </div>", "fallback": "<div class:bx--overflow-menu-options__option-content=\"{true}\">\n {text}\n </div>",
"slot_props": "{}" "slot_props": "{}"
} }
], ],
@ -9365,8 +9365,8 @@
{ {
"name": "__default__", "name": "__default__",
"default": true, "default": true,
"fallback": "<p class:cds--progress-label=\"{true}\">{label}</p>", "fallback": "<p class:bx--progress-label=\"{true}\">{label}</p>",
"slot_props": "{ props: { class: 'cds--progress-label' } }" "slot_props": "{ props: { class: 'bx--progress-label' } }"
} }
], ],
"events": [ "events": [
@ -12396,7 +12396,7 @@
{ {
"name": "__default__", "name": "__default__",
"default": true, "default": true,
"slot_props": "{ props: { class: 'cds--tag__label' } }" "slot_props": "{ props: { class: 'bx--tag__label' } }"
}, },
{ {
"name": "icon", "name": "icon",

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

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

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

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

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

@ -16,9 +16,7 @@
<div class="preview"> <div class="preview">
{#if framed} {#if framed}
<div class="framed-header"> <div class="framed-header">
<div <div style="margin-left: var(--bx-spacing-05); color: var(--bx-text-02)">
style="margin-left: var(--cds-spacing-05); color: var(--cds-text-02)"
>
Content loaded in an iframe Content loaded in an iframe
</div> </div>
<Button <Button
@ -49,7 +47,7 @@
<style> <style>
.preview { .preview {
margin-bottom: var(--cds-spacing-09); margin-bottom: var(--bx-spacing-09);
margin-left: -1rem; margin-left: -1rem;
margin-right: -1rem; margin-right: -1rem;
max-width: 66rem; max-width: 66rem;
@ -60,14 +58,14 @@
} }
.preview-viewer { .preview-viewer {
border: 1px solid var(--cds-ui-03); border: 1px solid var(--bx-ui-03);
border-bottom: 0; border-bottom: 0;
position: relative; position: relative;
z-index: 9999; z-index: 9999;
} }
.preview-viewer:not(.framed) { .preview-viewer:not(.framed) {
padding: var(--cds-spacing-06) var(--cds-spacing-05); padding: var(--bx-spacing-06) var(--bx-spacing-05);
} }
.preview-viewer.framed { .preview-viewer.framed {

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

@ -35,9 +35,9 @@
<svelte:component <svelte:component
this="{LogoGithub}" this="{LogoGithub}"
size="{32}" size="{32}"
style="fill: var(--cds-icon-01)" style="fill: var(--bx-icon-01)"
/> />
<Launch size="{20}" style="fill: var(--cds-icon-01)" /> <Launch size="{20}" style="fill: var(--bx-icon-01)" />
</div> </div>
</div> </div>
</svelte:component> </svelte:component>
@ -51,11 +51,11 @@
} }
.borderRight { .borderRight {
border-right: 1px solid var(--cds-ui-03); border-right: 1px solid var(--bx-ui-03);
} }
.borderBottom { .borderBottom {
border-bottom: 1px solid var(--cds-ui-03); border-bottom: 1px solid var(--bx-ui-03);
} }
.card { .card {
@ -72,19 +72,19 @@
} }
.title { .title {
margin-top: calc(-1 * var(--cds-spacing-02)); margin-top: calc(-1 * var(--bx-spacing-02));
margin-bottom: var(--cds-spacing-01); margin-bottom: var(--bx-spacing-01);
} }
.subtitle { .subtitle {
color: var(--cds-text-02); color: var(--bx-text-02);
} }
@media (max-width: 671px) { @media (max-width: 671px) {
.card-wrapper, .card-wrapper,
.borderRight { .borderRight {
border-right: 0; border-right: 0;
border-bottom: 1px solid var(--cds-ui-03); border-bottom: 1px solid var(--bx-ui-03);
} }
} }
</style> </style>

162
docs/src/global.css
View file

@ -1,35 +1,35 @@
html[theme="g90"] .code-override { html[theme="g90"] .code-override {
border: 1px solid var(--cds-border-subtle-01); border: 1px solid var(--bx-border-subtle-01);
} }
.code-override .cds--snippet { .code-override .bx--snippet {
max-width: none; max-width: none;
} }
.code-override .cds--copy-btn, .code-override .bx--copy-btn,
.code-override .cds--snippet, .code-override .bx--snippet,
.code-override button.cds--btn.cds--snippet-btn--expand { .code-override button.bx--btn.bx--snippet-btn--expand {
background-color: #262626; background-color: #262626;
color: #f4f4f4; color: #f4f4f4;
} }
.code-override .cds--copy-btn:hover, .code-override .bx--copy-btn:hover,
.code-override button.cds--btn.cds--snippet-btn--expand:hover { .code-override button.bx--btn.bx--snippet-btn--expand:hover {
background-color: #393939; background-color: #393939;
} }
.code-override .cds--snippet__icon { .code-override .bx--snippet__icon {
fill: #f4f4f4; fill: #f4f4f4;
} }
.code-override .cds--snippet-container pre { .code-override .bx--snippet-container pre {
font-size: var(--cds-code-02-font-size); font-size: var(--bx-code-02-font-size);
line-height: var(--cds-code-02-line-height); line-height: var(--bx-code-02-line-height);
letter-spacing: var(--cds-code-02-letter-spacing); letter-spacing: var(--bx-code-02-letter-spacing);
cursor: text; cursor: text;
} }
.code-override .cds--snippet--multi .cds--snippet-container pre { .code-override .bx--snippet--multi .bx--snippet-container pre {
overflow-x: auto; overflow-x: auto;
} }
@ -84,9 +84,9 @@ html[theme="g90"] .code-override {
color: #bebebe; color: #bebebe;
} }
.override-tabs a.cds--tabs__nav-link, .override-tabs a.bx--tabs__nav-link,
.override-tabs a.cds--tabs__nav-link:focus, .override-tabs a.bx--tabs__nav-link:focus,
.override-tabs a.cds--tabs__nav-link:active { .override-tabs a.bx--tabs__nav-link:active {
width: auto !important; width: auto !important;
} }
@ -112,13 +112,13 @@ html[theme="g90"] .code-override {
} }
} }
.prose > p > .cds--link { .prose > p > .bx--link {
font-size: inherit; font-size: inherit;
text-decoration: underline; text-decoration: underline;
} }
.prose .toc { .prose .toc {
margin-bottom: var(--cds-spacing-05); margin-bottom: var(--bx-spacing-05);
} }
.table { .table {
@ -126,9 +126,9 @@ html[theme="g90"] .code-override {
max-height: calc(100vh - 3rem); max-height: calc(100vh - 3rem);
top: 3rem; top: 3rem;
margin-top: -3rem; margin-top: -3rem;
padding-top: var(--cds-spacing-05); padding-top: var(--bx-spacing-05);
padding-bottom: var(--cds-spacing-05); padding-bottom: var(--bx-spacing-05);
padding-left: var(--cds-spacing-08); padding-left: var(--bx-spacing-08);
overflow-y: auto; overflow-y: auto;
} }
@ -137,7 +137,7 @@ html[theme="g90"] .code-override {
display: flex; display: flex;
} }
[data-components] .cds--grid { [data-components] .bx--grid {
width: 100%; width: 100%;
} }
@ -147,9 +147,9 @@ html[theme="g90"] .code-override {
} }
} }
.preview-viewer > .cds--aspect-ratio, .preview-viewer > .bx--aspect-ratio,
.preview-viewer [data-outline] { .preview-viewer [data-outline] {
outline: 1px solid var(--cds-interactive); outline: 1px solid var(--bx-interactive);
} }
[data-outline] { [data-outline] {
@ -157,100 +157,100 @@ html[theme="g90"] .code-override {
} }
[data-outline] ~ [data-outline] { [data-outline] ~ [data-outline] {
margin-top: var(--cds-spacing-08); margin-top: var(--bx-spacing-08);
} }
#select-theme { #select-theme {
width: auto; width: auto;
} }
.prose > p > .cds--link { .prose > p > .bx--link {
font-size: inherit; font-size: inherit;
} }
.prose .toc { .prose .toc {
margin-bottom: var(--cds-spacing-05); margin-bottom: var(--bx-spacing-05);
} }
.code-01 { .code-01 {
font-size: var(--cds-code-01-font-size); font-size: var(--bx-code-01-font-size);
font-weight: var(--cds-code-01-font-weight); font-weight: var(--bx-code-01-font-weight);
letter-spacing: var(--cds-code-01-letter-spacing); letter-spacing: var(--bx-code-01-letter-spacing);
line-height: var(--cds-code-01-line-height); line-height: var(--bx-code-01-line-height);
} }
.body-compact-01 { .body-compact-01 {
font-size: var(--cds-body-compact-01-font-size); font-size: var(--bx-body-compact-01-font-size);
font-weight: var(--cds-body-compact-01-font-weight); font-weight: var(--bx-body-compact-01-font-weight);
letter-spacing: var(--cds-body-compact-01-letter-spacing); letter-spacing: var(--bx-body-compact-01-letter-spacing);
line-height: var(--cds-body-compact-01-line-height); line-height: var(--bx-body-compact-01-line-height);
} }
.cds--col > h1 { .bx--col > h1 {
font-size: var(--cds-fluid-heading-05-font-size); font-size: var(--bx-fluid-heading-05-font-size);
font-weight: var(--cds-fluid-heading-05-font-weight); font-weight: var(--bx-fluid-heading-05-font-weight);
letter-spacing: var(--cds-fluid-heading-05-letter-spacing); letter-spacing: var(--bx-fluid-heading-05-letter-spacing);
line-height: var(--cds-fluid-heading-05-line-height); line-height: var(--bx-fluid-heading-05-line-height);
margin-bottom: var(--cds-spacing-05); margin-bottom: var(--bx-spacing-05);
} }
.big-paragraph { .big-paragraph {
font-size: var(--cds-fluid-heading-03-font-size); font-size: var(--bx-fluid-heading-03-font-size);
font-weight: var(--cds-fluid-heading-03-font-weight); font-weight: var(--bx-fluid-heading-03-font-weight);
letter-spacing: var(--cds-fluid-heading-03-letter-spacing); letter-spacing: var(--bx-fluid-heading-03-letter-spacing);
line-height: var(--cds-fluid-heading-03-line-height); line-height: var(--bx-fluid-heading-03-line-height);
margin-top: var(--cds-spacing-07); margin-top: var(--bx-spacing-07);
margin-bottom: var(--cds-spacing-12); margin-bottom: var(--bx-spacing-12);
} }
.big-link, .big-link,
.cds--col > .big-paragraph > code { .bx--col > .big-paragraph > code {
font-size: var(--cds-fluid-heading-03-font-size); font-size: var(--bx-fluid-heading-03-font-size);
font-weight: var(--cds-fluid-heading-03-font-weight); font-weight: var(--bx-fluid-heading-03-font-weight);
letter-spacing: var(--cds-fluid-heading-03-letter-spacing); letter-spacing: var(--bx-fluid-heading-03-letter-spacing);
line-height: var(--cds-fluid-heading-03-line-height); line-height: var(--bx-fluid-heading-03-line-height);
} }
.cds--col > p { .bx--col > p {
max-width: 44rem; max-width: 44rem;
} }
.cds--col > p > code { .bx--col > p > code {
font-size: var(--cds-code-02-font-size); font-size: var(--bx-code-02-font-size);
font-weight: var(--cds-code-02-font-weight); font-weight: var(--bx-code-02-font-weight);
line-height: var(--cds-code-02-line-height); line-height: var(--bx-code-02-line-height);
letter-spacing: var(--cds-code-02-letter-spacing); letter-spacing: var(--bx-code-02-letter-spacing);
background-color: var(--cds-layer-accent-01); background-color: var(--bx-layer-accent-01);
border-radius: 0.25rem; border-radius: 0.25rem;
padding: 0 var(--cds-spacing-02); padding: 0 var(--bx-spacing-02);
} }
[class*="cds--col"] > h2, [class*="bx--col"] > h2,
.cds--tab-content > h2 { .bx--tab-content > h2 {
font-size: var(--cds-fluid-heading-04-font-size); font-size: var(--bx-fluid-heading-04-font-size);
font-weight: var(--cds-fluid-heading-04-font-weight); font-weight: var(--bx-fluid-heading-04-font-weight);
letter-spacing: var(--cds-fluid-heading-04-letter-spacing); letter-spacing: var(--bx-fluid-heading-04-letter-spacing);
line-height: var(--cds-fluid-heading-04-line-height); line-height: var(--bx-fluid-heading-04-line-height);
padding-top: var(--cds-spacing-07); padding-top: var(--bx-spacing-07);
margin-bottom: var(--cds-spacing-05); margin-bottom: var(--bx-spacing-05);
} }
.cds--col > h4 { .bx--col > h4 {
font-size: var(--cds-fluid-heading-02-font-size); font-size: var(--bx-fluid-heading-02-font-size);
font-weight: var(--cds-fluid-heading-02-font-weight); font-weight: var(--bx-fluid-heading-02-font-weight);
letter-spacing: var(--cds-fluid-heading-02-letter-spacing); letter-spacing: var(--bx-fluid-heading-02-letter-spacing);
line-height: var(--cds-fluid-heading-02-line-height); line-height: var(--bx-fluid-heading-02-line-height);
padding-top: var(--cds-spacing-09); padding-top: var(--bx-spacing-09);
margin-bottom: var(--cds-spacing-05); margin-bottom: var(--bx-spacing-05);
} }
.cds--col > h2, .bx--col > h2,
.cds--tab-content > h2, .bx--tab-content > h2,
.cds--col > h3, .bx--col > h3,
.cds--col > h4 { .bx--col > h4 {
scroll-margin-top: 3rem; scroll-margin-top: 3rem;
} }
.cds--col > p { .bx--col > p {
margin-bottom: var(--cds-spacing-06); margin-bottom: var(--bx-spacing-06);
} }

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

@ -149,7 +149,7 @@
{#each api_components as component (component.moduleName)} {#each api_components as component (component.moduleName)}
<Tab label="{component.moduleName}" /> <Tab label="{component.moduleName}" />
{/each} {/each}
<div slot="content" style="padding-top: var(--cds-spacing-06)"> <div slot="content" style="padding-top: var(--bx-spacing-06)">
{#each api_components as component (component.moduleName)} {#each api_components as component (component.moduleName)}
<TabContent> <TabContent>
<ComponentApi component="{component}" /> <ComponentApi component="{component}" />
@ -176,13 +176,13 @@
.bar { .bar {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: var(--cds-spacing-06); margin-bottom: var(--bx-spacing-06);
border-bottom: 1px solid var(--cds-ui-03); border-bottom: 1px solid var(--bx-ui-03);
} }
:global(.toc h5) { :global(.toc h5) {
margin-top: var(--cds-spacing-06); margin-top: var(--bx-spacing-06);
margin-bottom: var(--cds-spacing-03); margin-bottom: var(--bx-spacing-03);
} }
.toc.mobile { .toc.mobile {
@ -192,7 +192,7 @@
@media (max-width: 1056px) { @media (max-width: 1056px) {
.toc.mobile { .toc.mobile {
display: block; display: block;
margin-bottom: var(--cds-spacing-09); margin-bottom: var(--bx-spacing-09);
} }
} }
</style> </style>

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

@ -8,7 +8,7 @@
The [Carbon Design System grid implementation](https://carbondesignsystem.com/guidelines/2x-grid/implementation#responsive-options) defines five responsive breakpoints: The [Carbon Design System grid implementation](https://carbondesignsystem.com/guidelines/2x-grid/implementation#responsive-options) defines five responsive breakpoints:
<UnorderedList svx-ignore style="margin-bottom: var(--cds-spacing-08)"> <UnorderedList svx-ignore style="margin-bottom: var(--bx-spacing-08)">
<ListItem><strong>Small</strong>: less than 672px</ListItem> <ListItem><strong>Small</strong>: less than 672px</ListItem>
<ListItem><strong>Medium</strong>: 672 - 1056px</ListItem> <ListItem><strong>Medium</strong>: 672 - 1056px</ListItem>
<ListItem><strong>Large</strong>: 1056 - 1312px</ListItem> <ListItem><strong>Large</strong>: 1056 - 1312px</ListItem>

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

@ -333,7 +333,7 @@ Specify a `width` or `minWidth` property in the `headers` object to customize th
A [table-layout: fixed](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout#values) rule will be applied to the `table` element when using custom widths. A [table-layout: fixed](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout#values) rule will be applied to the `table` element when using custom widths.
<InlineNotification svx-ignore lowContrast kind="warning" title="Note:" hideCloseButton> <InlineNotification svx-ignore lowContrast kind="warning" title="Note:" hideCloseButton>
<div class="body-short-01">Custom column widths do not work with a <a class="cds--link" href="#sticky-header">sticky header</a>.</div> <div class="body-short-01">Custom column widths do not work with a <a class="bx--link" href="#sticky-header">sticky header</a>.</div>
</InlineNotification> </InlineNotification>
<FileSource src="/framed/DataTable/DataTableHeaderWidth" /> <FileSource src="/framed/DataTable/DataTableHeaderWidth" />

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

@ -44,7 +44,7 @@ See the [item examples below](#item-uploading) for different statuses.
There are two ways to clear files in `FileUploader`: There are two ways to clear files in `FileUploader`:
<UnorderedList svx-ignore style="margin-bottom: var(--cds-spacing-08)"> <UnorderedList svx-ignore style="margin-bottom: var(--bx-spacing-08)">
<ListItem>programmatically using the <strong>clearFiles</strong> accessor</ListItem> <ListItem>programmatically using the <strong>clearFiles</strong> accessor</ListItem>
<ListItem>two-way binding by setting <strong>files</strong> to <strong>[]</strong></ListItem> <ListItem>two-way binding by setting <strong>files</strong> to <strong>[]</strong></ListItem>
</UnorderedList> </UnorderedList>

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

@ -14,7 +14,7 @@ By default, the position of the popover component is absolute.
<div data-outline> <div data-outline>
<Popover open> <Popover open>
Parent Parent
<PopoverContent style="padding: var(--cds-spacing-05)">Content</PopoverContent> <PopoverContent style="padding: var(--bx-spacing-05)">Content</PopoverContent>
</Popover> </Popover>
</div> </div>
@ -25,7 +25,7 @@ Set `relative` to `true` to use a relative position.
<div data-outline> <div data-outline>
Parent Parent
<Popover relative open> <Popover relative open>
<div style="padding: var(--cds-spacing-05)">Content</div> <div style="padding: var(--bx-spacing-05)">Content</div>
</Popover> </Popover>
</div> </div>
@ -36,7 +36,7 @@ Set `closeOnOutsideClick` to set `open` to `false` when clicking outside of the
<div data-outline> <div data-outline>
Parent Parent
<Popover open closeOnOutsideClick on:click:outside={() => {console.log('on:click:outside')}}> <Popover open closeOnOutsideClick on:click:outside={() => {console.log('on:click:outside')}}>
<div style="padding: var(--cds-spacing-05)">Content</div> <div style="padding: var(--bx-spacing-05)">Content</div>
</Popover> </Popover>
</div> </div>
@ -49,67 +49,67 @@ The default `align` value is `"top"`.
<div data-outline> <div data-outline>
Parent Parent
<Popover open align="top-left"> <Popover open align="top-left">
<div style="padding: var(--cds-spacing-05)">top-left</div> <div style="padding: var(--bx-spacing-05)">top-left</div>
</Popover> </Popover>
</div> </div>
<div data-outline> <div data-outline>
Parent Parent
<Popover open align="top-right"> <Popover open align="top-right">
<div style="padding: var(--cds-spacing-05)">top-right</div> <div style="padding: var(--bx-spacing-05)">top-right</div>
</Popover> </Popover>
</div> </div>
<div data-outline> <div data-outline>
Parent Parent
<Popover open align="bottom"> <Popover open align="bottom">
<div style="padding: var(--cds-spacing-05)">bottom</div> <div style="padding: var(--bx-spacing-05)">bottom</div>
</Popover> </Popover>
</div> </div>
<div data-outline> <div data-outline>
Parent Parent
<Popover open align="bottom-left"> <Popover open align="bottom-left">
<div style="padding: var(--cds-spacing-05)">bottom-left</div> <div style="padding: var(--bx-spacing-05)">bottom-left</div>
</Popover> </Popover>
</div> </div>
<div data-outline> <div data-outline>
Parent Parent
<Popover open align="bottom-right"> <Popover open align="bottom-right">
<div style="padding: var(--cds-spacing-05)">bottom-right</div> <div style="padding: var(--bx-spacing-05)">bottom-right</div>
</Popover> </Popover>
</div> </div>
<div data-outline> <div data-outline>
Parent Parent
<Popover open align="left"> <Popover open align="left">
<div style="padding: var(--cds-spacing-05)">left</div> <div style="padding: var(--bx-spacing-05)">left</div>
</Popover> </Popover>
</div> </div>
<div data-outline> <div data-outline>
Parent Parent
<Popover open align="left-bottom"> <Popover open align="left-bottom">
<div style="padding: var(--cds-spacing-05)">left-bottom</div> <div style="padding: var(--bx-spacing-05)">left-bottom</div>
</Popover> </Popover>
</div> </div>
<div data-outline> <div data-outline>
Parent Parent
<Popover open align="left-right"> <Popover open align="left-right">
<div style="padding: var(--cds-spacing-05)">left-right</div> <div style="padding: var(--bx-spacing-05)">left-right</div>
</Popover> </Popover>
</div> </div>
<div data-outline> <div data-outline>
Parent Parent
<Popover open align="right"> <Popover open align="right">
<div style="padding: var(--cds-spacing-05)">right</div> <div style="padding: var(--bx-spacing-05)">right</div>
</Popover> </Popover>
</div> </div>
<div data-outline> <div data-outline>
Parent Parent
<Popover open align="right-bottom"> <Popover open align="right-bottom">
<div style="padding: var(--cds-spacing-05)">right-bottom</div> <div style="padding: var(--bx-spacing-05)">right-bottom</div>
</Popover> </Popover>
</div> </div>
<div data-outline> <div data-outline>
Parent Parent
<Popover open align="right-top"> <Popover open align="right-top">
<div style="padding: var(--cds-spacing-05)">right-top</div> <div style="padding: var(--bx-spacing-05)">right-top</div>
</Popover> </Popover>
</div> </div>
@ -118,7 +118,7 @@ The default `align` value is `"top"`.
<div data-outline> <div data-outline>
Parent Parent
<Popover caret open> <Popover caret open>
<div style="padding: var(--cds-spacing-05)">Content</div> <div style="padding: var(--bx-spacing-05)">Content</div>
</Popover> </Popover>
</div> </div>
@ -131,7 +131,7 @@ Possible `align` values include `"top"`, `"top-left"`, `"top-right"`, `"bottom"`
<div data-outline> <div data-outline>
Parent Parent
<Popover caret align="top-left" open> <Popover caret align="top-left" open>
<div style="padding: var(--cds-spacing-05)">Content</div> <div style="padding: var(--bx-spacing-05)">Content</div>
</Popover> </Popover>
</div> </div>
@ -140,7 +140,7 @@ Possible `align` values include `"top"`, `"top-left"`, `"top-right"`, `"bottom"`
<div data-outline> <div data-outline>
Parent Parent
<Popover light open> <Popover light open>
<div style="padding: var(--cds-spacing-05)">Content</div> <div style="padding: var(--bx-spacing-05)">Content</div>
</Popover> </Popover>
</div> </div>
@ -149,7 +149,7 @@ Possible `align` values include `"top"`, `"top-left"`, `"top-right"`, `"bottom"`
<div data-outline> <div data-outline>
Parent Parent
<Popover highContrast open> <Popover highContrast open>
<div style="padding: var(--cds-spacing-05)">Content</div> <div style="padding: var(--bx-spacing-05)">Content</div>
</Popover> </Popover>
</div> </div>

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

@ -170,7 +170,7 @@ components: ["StructuredList", "StructuredListSkeleton", "StructuredListBody", "
/> />
<StructuredListCell> <StructuredListCell>
<CheckmarkFilled <CheckmarkFilled
class="cds--structured-list-svg" class="bx--structured-list-svg"
aria-label="select an option" aria-label="select an option"
title="select an option" title="select an option"
/> />

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

@ -23,7 +23,7 @@ By default, each item renders the value of `node.text`. Use the data from `let:n
The destructured `let:node` contains the following properties: The destructured `let:node` contains the following properties:
<UnorderedList svx-ignore style="margin-bottom: var(--cds-spacing-08)"> <UnorderedList svx-ignore style="margin-bottom: var(--bx-spacing-08)">
<ListItem><strong>id</strong>: the node id</ListItem> <ListItem><strong>id</strong>: the node id</ListItem>
<ListItem><strong>text</strong>: the node text</ListItem> <ListItem><strong>text</strong>: the node text</ListItem>
<ListItem><strong>expanded</strong>: true if the node is expanded</ListItem> <ListItem><strong>expanded</strong>: true if the node is expanded</ListItem>

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

@ -4,7 +4,7 @@
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
This utility component wraps the `.cds--text-truncate-*` Sass mixins from [@carbon/styles](https://github.com/carbon-design-system/carbon/blob/main/packages/styles/scss/utilities/_text-truncate.scss) for single-line text truncation. This utility component wraps the `.bx--text-truncate-*` Sass mixins from [@carbon/styles](https://github.com/carbon-design-system/carbon/blob/main/packages/styles/scss/utilities/_text-truncate.scss) for single-line text truncation.
## Default ## Default

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

@ -20,10 +20,10 @@
<style> <style>
p, p,
h1 { h1 {
margin-bottom: var(--cds-spacing-08); margin-bottom: var(--bx-spacing-08);
} }
h6 { h6 {
margin-bottom: var(--cds-spacing-03); margin-bottom: var(--bx-spacing-03);
} }
</style> </style>

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

@ -6,7 +6,7 @@
<Checkbox labelText="Label text" bind:checked="{checked}" /> <Checkbox labelText="Label text" bind:checked="{checked}" />
<div style="margin: var(--cds-spacing-05) 0"> <div style="margin: var(--bx-spacing-05) 0">
<Button on:click="{() => (checked = !checked)}">Toggle</Button> <Button on:click="{() => (checked = !checked)}">Toggle</Button>
</div> </div>

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

@ -9,7 +9,7 @@
<Checkbox bind:group="{group}" labelText="{value}" value="{value}" /> <Checkbox bind:group="{group}" labelText="{value}" value="{value}" />
{/each} {/each}
<div style="margin: var(--cds-spacing-05) 0"> <div style="margin: var(--bx-spacing-05) 0">
<Button on:click="{() => (group = ['Banana'])}">Set to ["Banana"]</Button> <Button on:click="{() => (group = ['Banana'])}">Set to ["Banana"]</Button>
</div> </div>

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

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

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

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

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

@ -23,7 +23,7 @@
</ComboBox> </ComboBox>
<style> <style>
:global(.cds--list-box__menu-item, .cds--list-box__menu-item__option) { :global(.bx--list-box__menu-item, .bx--list-box__menu-item__option) {
height: auto; height: auto;
} }
</style> </style>

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

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

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

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

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

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

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

@ -29,11 +29,11 @@
<style> <style>
div { div {
position: absolute; position: absolute;
width: calc(100% - var(--cds-spacing-05)); width: calc(100% - var(--bx-spacing-05));
height: calc(100% - var(--cds-spacing-06)); height: calc(100% - var(--bx-spacing-06));
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: var(--cds-text-02); color: var(--bx-text-02);
} }
</style> </style>

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

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

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

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

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

@ -23,7 +23,7 @@
</Dropdown> </Dropdown>
<style> <style>
:global(.cds--list-box__menu-item, .cds--list-box__menu-item__option) { :global(.bx--list-box__menu-item, .bx--list-box__menu-item__option) {
height: auto; height: auto;
} }
</style> </style>

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

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

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

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

4
docs/src/pages/framed/MultiSelect/MultiSelectSlot.svelte
View file

@ -23,11 +23,11 @@
</MultiSelect> </MultiSelect>
<style> <style>
:global(.cds--list-box__menu-item, .cds--list-box__menu-item__option) { :global(.bx--list-box__menu-item, .bx--list-box__menu-item__option) {
height: auto; height: auto;
} }
:global(.cds--checkbox-label-text) { :global(.bx--checkbox-label-text) {
display: block; display: block;
} }
</style> </style>

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

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

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

@ -6,7 +6,7 @@
<NumberInput allowEmpty bind:value="{value}" /> <NumberInput allowEmpty bind:value="{value}" />
<div style="margin: var(--cds-spacing-05) 0"> <div style="margin: var(--bx-spacing-05) 0">
<Button on:click="{() => (value = null)}">Set to null</Button> <Button on:click="{() => (value = null)}">Set to null</Button>
<Button on:click="{() => (value = 0)}">Set to 0</Button> <Button on:click="{() => (value = 0)}">Set to 0</Button>
</div> </div>

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

@ -6,7 +6,7 @@
<PaginationNav bind:page="{page}" /> <PaginationNav bind:page="{page}" />
<div style="margin: var(--cds-spacing-05) 0"> <div style="margin: var(--bx-spacing-05) 0">
<Button on:click="{() => (page = 1)}" disabled="{page === 0}"> <Button on:click="{() => (page = 1)}" disabled="{page === 0}">
Set page to 1 Set page to 1
</Button> </Button>

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

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

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

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

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

@ -32,7 +32,7 @@
/> />
</ProgressIndicator> </ProgressIndicator>
<div style="margin: var(--cds-spacing-06) 0"> <div style="margin: var(--bx-spacing-06) 0">
<Button <Button
kind="{currentIndex === 2 ? 'secondary' : 'primary'}" kind="{currentIndex === 2 ? 'secondary' : 'primary'}"
on:click="{() => { on:click="{() => {

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

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

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

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

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

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

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

@ -11,7 +11,7 @@
<SelectItem value="g100" text="Gray 100" /> <SelectItem value="g100" text="Gray 100" />
</Select> </Select>
<div style="margin: var(--cds-spacing-05) 0"> <div style="margin: var(--bx-spacing-05) 0">
Selected: <strong>{selected}</strong> Selected: <strong>{selected}</strong>
</div> </div>

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

@ -15,7 +15,7 @@
</svelte:fragment> </svelte:fragment>
</Tabs> </Tabs>
<div style="margin: var(--cds-spacing-05) 0"> <div style="margin: var(--bx-spacing-05) 0">
<Button on:click="{() => (selected = 1)}">Set index to 1</Button> <Button on:click="{() => (selected = 1)}">Set index to 1</Button>
</div> </div>

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

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

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

@ -8,7 +8,7 @@
<p>Resources are provisioned based on your account's organization.</p> <p>Resources are provisioned based on your account's organization.</p>
</Tooltip> </Tooltip>
<div style="margin-top: var(--cds-spacing-12);"> <div style="margin-top: var(--bx-spacing-12);">
<Button size="small" on:click="{() => (open = !open)}"> <Button size="small" on:click="{() => (open = !open)}">
{open ? "Close tooltip" : "Open tooltip"} {open ? "Close tooltip" : "Open tooltip"}
</Button> </Button>
@ -18,6 +18,6 @@
<style> <style>
div { div {
margin-top: var(--cds-spacing-05); margin-top: var(--bx-spacing-05);
} }
</style> </style>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -53,7 +53,7 @@
let:node let:node
> >
<span <span
style:color="{node.selected ? "var(--cds-interactive-04)" : "inherit"}" style:color="{node.selected ? "var(--bx-interactive-04)" : "inherit"}"
style:text-decoration="{node.disabled ? "inherit" : "underline"}" style:text-decoration="{node.disabled ? "inherit" : "underline"}"
> >
{node.text} (id: {node.id}) {node.text} (id: {node.id})

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

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

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

@ -116,7 +116,7 @@
</p> </p>
<div style="overflow-x: scroll;"> <div style="overflow-x: scroll;">
{#each events as { type, ...rest }} {#each events as { type, ...rest }}
<div style="display: block; margin-bottom: var(--cds-spacing-05)"> <div style="display: block; margin-bottom: var(--bx-spacing-05)">
<div><strong>on:{type}</strong></div> <div><strong>on:{type}</strong></div>
{#if Object.keys(rest).length > 0} {#if Object.keys(rest).length > 0}
<pre>{JSON.stringify(rest, null, 2)}</pre> <pre>{JSON.stringify(rest, null, 2)}</pre>

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

@ -31,14 +31,14 @@
:global(body.framed) { :global(body.framed) {
min-height: 100vh; min-height: 100vh;
width: 100%; width: 100%;
padding: var(--cds-spacing-06) var(--cds-spacing-05); padding: var(--bx-spacing-06) var(--bx-spacing-05);
} }
:global(.framed :not(.cds--content) [class^="cds--col"]) { :global(.framed :not(.bx--content) [class^="bx--col"]) {
outline: 1px solid var(--cds-interactive-04); outline: 1px solid var(--bx-interactive-04);
} }
:global(.framed .cds--content [class^="cds--col"]) { :global(.framed .bx--content [class^="bx--col"]) {
outline: 0; outline: 0;
} }
</style> </style>

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

@ -91,12 +91,12 @@
</p> </p>
</Column> </Column>
</Row> </Row>
<Row style="margin-bottom: var(--cds-spacing-06)"> <Row style="margin-bottom: var(--bx-spacing-06)">
<Column max="{10}" xlg="{10}"> <Column max="{10}" xlg="{10}">
<h2 style="margin-top: var(--cds-spacing-06)">Installation</h2> <h2 style="margin-top: var(--bx-spacing-06)">Installation</h2>
</Column> </Column>
</Row> </Row>
<Row style="margin-bottom: var(--cds-spacing-06)"> <Row style="margin-bottom: var(--bx-spacing-06)">
<Column noGutter> <Column noGutter>
<Tabs> <Tabs>
<Tab label="NPM" /> <Tab label="NPM" />
@ -116,7 +116,7 @@
</Tabs> </Tabs>
</Column> </Column>
</Row> </Row>
<Row style="margin-bottom: var(--cds-spacing-09)"> <Row style="margin-bottom: var(--bx-spacing-09)">
<Column> <Column>
<h2>Styling</h2> <h2>Styling</h2>
<p> <p>
@ -125,7 +125,7 @@
light, 2 dark). light, 2 dark).
</p> </p>
<RadioButtonGroup <RadioButtonGroup
style="margin-top: var(--cds-spacing-08)" style="margin-top: var(--bx-spacing-08)"
legendText="Carbon themes" legendText="Carbon themes"
bind:selected="{$theme}" bind:selected="{$theme}"
> >
@ -215,7 +215,7 @@
</Column> </Column>
</Row> </Row>
<Row style="margin-bottom: var(--cds-spacing-06)"> <Row style="margin-bottom: var(--bx-spacing-06)">
<Column> <Column>
<h2>Dynamic theming</h2> <h2>Dynamic theming</h2>
<p>Use the "all.css" StyleSheet for dynamic, client-side theming.</p> <p>Use the "all.css" StyleSheet for dynamic, client-side theming.</p>
@ -247,7 +247,7 @@
</Column> </Column>
</Row> </Row>
<Row style="margin-bottom: var(--cds-spacing-06)"> <Row style="margin-bottom: var(--bx-spacing-06)">
<Column> <Column>
<h2>Portfolio</h2> <h2>Portfolio</h2>
<p> <p>
@ -313,6 +313,6 @@
<style> <style>
p { p {
margin-bottom: var(--cds-spacing-05); margin-bottom: var(--bx-spacing-05);
} }
</style> </style>

30
docs/svelte.config.js
View file

@ -134,7 +134,7 @@ function plugin() {
function carbonify() { function carbonify() {
return (tree) => { return (tree) => {
visit(tree, "link", (node) => { visit(tree, "link", (node) => {
node.data = { hProperties: { class: "cds--link" } }; node.data = { hProperties: { class: "bx--link" } };
}); });
}; };
} }
@ -188,31 +188,31 @@ export default {
code: content.replace( code: content.replace(
"</Layout_MDSVEX_DEFAULT>", "</Layout_MDSVEX_DEFAULT>",
`<div slot="aside"> `<div slot="aside">
<ul class="cds--list--unordered"> <ul class="bx--list--unordered">
${toc ${toc
.map( .map(
(item) => (item) =>
`<li class="cds--list__item"><a class="cds--link" href="\#${item.id}">${item.text}</a></li>` `<li class="bx--list__item"><a class="bx--link" href="\#${item.id}">${item.text}</a></li>`
) )
.join("")} .join("")}
<h5>Component API</h5> <h5>Component API</h5>
<li class="cds--list__item"> <li class="bx--list__item">
<a class="cds--link" href="#props">Props</a> <a class="bx--link" href="#props">Props</a>
</li> </li>
<li class="cds--list__item"> <li class="bx--list__item">
<a class="cds--link" href="#typedefs">Typedefs</a> <a class="bx--link" href="#typedefs">Typedefs</a>
</li> </li>
<li class="cds--list__item"> <li class="bx--list__item">
<a class="cds--link" href="#slots">Slots</a> <a class="bx--link" href="#slots">Slots</a>
</li> </li>
<li class="cds--list__item"> <li class="bx--list__item">
<a class="cds--link" href="#forwarded-events">Forwarded events</a> <a class="bx--link" href="#forwarded-events">Forwarded events</a>
</li> </li>
<li class="cds--list__item"> <li class="bx--list__item">
<a class="cds--link" href="#dispatched-events">Dispatched events</a> <a class="bx--link" href="#dispatched-events">Dispatched events</a>
</li> </li>
<li class="cds--list__item"> <li class="bx--list__item">
<a class="cds--link" href="#rest-props">restProps</a> <a class="bx--link" href="#rest-props">restProps</a>
</li> </li>
</ul> </ul>
</div> </div>

10
src/Accordion/Accordion.svelte
View file

@ -44,11 +44,11 @@
{:else} {:else}
<!-- svelte-ignore a11y-no-noninteractive-element-interactions --> <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<ul <ul
class:cds--accordion="{true}" class:bx--accordion="{true}"
class:cds--accordion--start="{align === 'start'}" class:bx--accordion--start="{align === 'start'}"
class:cds--accordion--end="{align === 'end'}" class:bx--accordion--end="{align === 'end'}"
class:cds--accordion--sm="{size === 'sm'}" class:bx--accordion--sm="{size === 'sm'}"
class:cds--accordion--lg="{size === 'lg' || size === 'xl'}" class:bx--accordion--lg="{size === 'lg' || size === 'xl'}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover

21
src/Accordion/AccordionItem.svelte
View file

@ -36,11 +36,11 @@
<!-- svelte-ignore a11y-mouse-events-have-key-events --> <!-- svelte-ignore a11y-mouse-events-have-key-events -->
<li <li
class:cds--accordion__item="{true}" class:bx--accordion__item="{true}"
class:cds--accordion__item--active="{open}" class:bx--accordion__item--active="{open}"
class:cds--accordion__item--disabled="{disabled}" class:bx--accordion__item--disabled="{disabled}"
class:cds--accordion__item--expanding="{animation === 'expanding'}" class:bx--accordion__item--expanding="{animation === 'expanding'}"
class:cds--accordion__item--collapsing="{animation === 'collapsing'}" class:bx--accordion__item--collapsing="{animation === 'collapsing'}"
{...$$restProps} {...$$restProps}
on:animationend on:animationend
on:animationend="{() => { on:animationend="{() => {
@ -49,7 +49,7 @@
> >
<button <button
type="button" type="button"
class:cds--accordion__heading="{true}" class:bx--accordion__heading="{true}"
title="{iconDescription}" title="{iconDescription}"
aria-expanded="{open}" aria-expanded="{open}"
disabled="{disabled}" disabled="{disabled}"
@ -68,15 +68,12 @@
} }
}}" }}"
> >
<ChevronRight <ChevronRight class="bx--accordion__arrow" aria-label="{iconDescription}" />
class="cds--accordion__arrow" <div class:bx--accordion__title="{true}">
aria-label="{iconDescription}"
/>
<div class:cds--accordion__title="{true}">
<slot name="title">{title}</slot> <slot name="title">{title}</slot>
</div> </div>
</button> </button>
<div class:cds--accordion__content="{true}"> <div class:bx--accordion__content="{true}">
<slot /> <slot />
</div> </div>
</li> </li>

32
src/Accordion/AccordionSkeleton.svelte
View file

@ -24,12 +24,12 @@
<!-- svelte-ignore a11y-mouse-events-have-key-events --> <!-- svelte-ignore a11y-mouse-events-have-key-events -->
<!-- svelte-ignore a11y-no-noninteractive-element-interactions --> <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<ul <ul
class:cds--skeleton="{true}" class:bx--skeleton="{true}"
class:cds--accordion="{true}" class:bx--accordion="{true}"
class:cds--accordion--start="{align === 'start'}" class:bx--accordion--start="{align === 'start'}"
class:cds--accordion--end="{align === 'end'}" class:bx--accordion--end="{align === 'end'}"
class:cds--accordion--sm="{size === 'sm'}" class:bx--accordion--sm="{size === 'sm'}"
class:cds--accordion--xl="{size === 'xl'}" class:bx--accordion--xl="{size === 'xl'}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover
@ -38,14 +38,14 @@
> >
{#if open} {#if open}
<li <li
class:cds--accordion__item="{true}" class:bx--accordion__item="{true}"
class:cds--accordion__item--active="{true}" class:bx--accordion__item--active="{true}"
> >
<span class:cds--accordion__heading="{true}"> <span class:bx--accordion__heading="{true}">
<ChevronRight class="cds--accordion__arrow" /> <ChevronRight class="bx--accordion__arrow" />
<SkeletonText class="cds--accordion__title" /> <SkeletonText class="bx--accordion__title" />
</span> </span>
<div class:cds--accordion__content="{true}"> <div class:bx--accordion__content="{true}">
<SkeletonText width="90%" /> <SkeletonText width="90%" />
<SkeletonText width="80%" /> <SkeletonText width="80%" />
<SkeletonText width="95%" /> <SkeletonText width="95%" />
@ -53,10 +53,10 @@
</li> </li>
{/if} {/if}
{#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:cds--accordion__item="{true}"> <li class:bx--accordion__item="{true}">
<span class:cds--accordion__heading="{true}"> <span class:bx--accordion__heading="{true}">
<ChevronRight class="cds--accordion__arrow" /> <ChevronRight class="bx--accordion__arrow" />
<SkeletonText class="cds--accordion__title" /> <SkeletonText class="bx--accordion__title" />
</span> </span>
</li> </li>
{/each} {/each}

20
src/AspectRatio/AspectRatio.svelte
View file

@ -7,16 +7,16 @@
</script> </script>
<div <div
class:cds--aspect-ratio="{true}" class:bx--aspect-ratio="{true}"
class:cds--aspect-ratio--2x1="{ratio === '2x1'}" class:bx--aspect-ratio--2x1="{ratio === '2x1'}"
class:cds--aspect-ratio--2x3="{ratio === '2x3'}" class:bx--aspect-ratio--2x3="{ratio === '2x3'}"
class:cds--aspect-ratio--16x9="{ratio === '16x9'}" class:bx--aspect-ratio--16x9="{ratio === '16x9'}"
class:cds--aspect-ratio--4x3="{ratio === '4x3'}" class:bx--aspect-ratio--4x3="{ratio === '4x3'}"
class:cds--aspect-ratio--1x1="{ratio === '1x1'}" class:bx--aspect-ratio--1x1="{ratio === '1x1'}"
class:cds--aspect-ratio--3x4="{ratio === '3x4'}" class:bx--aspect-ratio--3x4="{ratio === '3x4'}"
class:cds--aspect-ratio--3x2="{ratio === '3x2'}" class:bx--aspect-ratio--3x2="{ratio === '3x2'}"
class:cds--aspect-ratio--9x16="{ratio === '9x16'}" class:bx--aspect-ratio--9x16="{ratio === '9x16'}"
class:cds--aspect-ratio--1x2="{ratio === '1x2'}" class:bx--aspect-ratio--1x2="{ratio === '1x2'}"
{...$$restProps} {...$$restProps}
> >
<slot /> <slot />

4
src/Breadcrumb/Breadcrumb.svelte
View file

@ -31,8 +31,8 @@
on:mouseleave on:mouseleave
> >
<ol <ol
class:cds--breadcrumb="{true}" class:bx--breadcrumb="{true}"
class:cds--breadcrumb--no-trailing-slash="{noTrailingSlash}" class:bx--breadcrumb--no-trailing-slash="{noTrailingSlash}"
> >
<slot /> <slot />
</ol> </ol>

8
src/Breadcrumb/BreadcrumbItem.svelte
View file

@ -1,6 +1,6 @@
<script> <script>
/** /**
* @slot {{props?: { ["aria-current"]?: string; class: "cds--link"; }}} * @slot {{props?: { ["aria-current"]?: string; class: "bx--link"; }}}
*/ */
/** /**
@ -22,8 +22,8 @@
<!-- svelte-ignore a11y-mouse-events-have-key-events --> <!-- svelte-ignore a11y-mouse-events-have-key-events -->
<!-- svelte-ignore a11y-no-noninteractive-element-interactions --> <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<li <li
class:cds--breadcrumb-item="{true}" class:bx--breadcrumb-item="{true}"
class:cds--breadcrumb-item--current="{isCurrentPage && class:bx--breadcrumb-item--current="{isCurrentPage &&
$$restProps['aria-current'] !== 'page'}" $$restProps['aria-current'] !== 'page'}"
{...$$restProps} {...$$restProps}
on:click on:click
@ -39,7 +39,7 @@
<slot <slot
props="{{ props="{{
'aria-current': $$restProps['aria-current'], 'aria-current': $$restProps['aria-current'],
class: 'cds--link', class: 'bx--link',
}}" }}"
/> />
{/if} {/if}

10
src/Breadcrumb/BreadcrumbSkeleton.svelte
View file

@ -9,9 +9,9 @@
<!-- svelte-ignore a11y-mouse-events-have-key-events --> <!-- svelte-ignore a11y-mouse-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions --> <!-- svelte-ignore a11y-no-static-element-interactions -->
<div <div
class:cds--skeleton="{true}" class:bx--skeleton="{true}"
class:cds--breadcrumb="{true}" class:bx--breadcrumb="{true}"
class:cds--breadcrumb--no-trailing-slash="{noTrailingSlash}" class:bx--breadcrumb--no-trailing-slash="{noTrailingSlash}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover
@ -19,8 +19,8 @@
on:mouseleave on:mouseleave
> >
{#each Array.from({ length: count }, (_, i) => i) as item (item)} {#each Array.from({ length: count }, (_, i) => i) as item (item)}
<div class:cds--breadcrumb-item="{true}"> <div class:bx--breadcrumb-item="{true}">
<span class:cds--link="{true}">&nbsp;</span> <span class:bx--link="{true}">&nbsp;</span>
</div> </div>
{/each} {/each}
</div> </div>

38
src/Button/Button.svelte
View file

@ -95,29 +95,29 @@
hasIconOnly && kind === "ghost" && !href ? isSelected : undefined, hasIconOnly && kind === "ghost" && !href ? isSelected : undefined,
...$$restProps, ...$$restProps,
class: [ class: [
"cds--btn", "bx--btn",
expressive && "cds--btn--expressive", expressive && "bx--btn--expressive",
((size === "small" && !expressive) || ((size === "small" && !expressive) ||
(size === "sm" && !expressive) || (size === "sm" && !expressive) ||
(size === "small" && !expressive)) && (size === "small" && !expressive)) &&
"cds--btn--sm", "bx--btn--sm",
((size === "field" && !expressive) || (size === "md" && !expressive)) && ((size === "field" && !expressive) || (size === "md" && !expressive)) &&
"cds--btn--md", "bx--btn--md",
size === "small" && "cds--btn--sm", size === "small" && "bx--btn--sm",
size === "xl" && "cds--btn--xl", size === "xl" && "bx--btn--xl",
size === "2xl" && "cds--btn--2xl", size === "2xl" && "bx--btn--2xl",
kind && `cds--btn--${kind}`, kind && `bx--btn--${kind}`,
disabled && "cds--btn--disabled", disabled && "bx--btn--disabled",
hasIconOnly && "cds--btn--icon-only", hasIconOnly && "bx--btn--icon-only",
hasIconOnly && "cds--tooltip__trigger", hasIconOnly && "bx--tooltip__trigger",
hasIconOnly && "cds--tooltip--a11y", hasIconOnly && "bx--tooltip--a11y",
hasIconOnly && hasIconOnly &&
tooltipPosition && tooltipPosition &&
`cds--btn--icon-only--${tooltipPosition}`, `bx--btn--icon-only--${tooltipPosition}`,
hasIconOnly && hasIconOnly &&
tooltipAlignment && tooltipAlignment &&
`cds--tooltip--align-${tooltipAlignment}`, `bx--tooltip--align-${tooltipAlignment}`,
hasIconOnly && isSelected && kind === "ghost" && "cds--btn--selected", hasIconOnly && isSelected && kind === "ghost" && "bx--btn--selected",
$$restProps.class, $$restProps.class,
] ]
.filter(Boolean) .filter(Boolean)
@ -151,12 +151,12 @@
on:mouseleave on:mouseleave
> >
{#if hasIconOnly} {#if hasIconOnly}
<span class:cds--assistive-text="{true}">{iconDescription}</span> <span class:bx--assistive-text="{true}">{iconDescription}</span>
{/if} {/if}
<slot /><svelte:component <slot /><svelte:component
this="{icon}" this="{icon}"
aria-hidden="true" aria-hidden="true"
class="cds--btn__icon" class="bx--btn__icon"
aria-label="{iconDescription}" aria-label="{iconDescription}"
/> />
</a> </a>
@ -170,12 +170,12 @@
on:mouseleave on:mouseleave
> >
{#if hasIconOnly} {#if hasIconOnly}
<span class:cds--assistive-text="{true}">{iconDescription}</span> <span class:bx--assistive-text="{true}">{iconDescription}</span>
{/if} {/if}
<slot /><svelte:component <slot /><svelte:component
this="{icon}" this="{icon}"
aria-hidden="true" aria-hidden="true"
class="cds--btn__icon" class="bx--btn__icon"
style="{hasIconOnly ? 'margin-left: 0' : undefined}" style="{hasIconOnly ? 'margin-left: 0' : undefined}"
aria-label="{iconDescription}" aria-label="{iconDescription}"
/> />

4
src/Button/ButtonSet.svelte
View file

@ -4,8 +4,8 @@
</script> </script>
<div <div
class:cds--btn-set="{true}" class:bx--btn-set="{true}"
class:cds--btn-set--stacked="{stacked}" class:bx--btn-set--stacked="{stacked}"
{...$$restProps} {...$$restProps}
> >
<slot /> <slot />

24
src/Button/ButtonSkeleton.svelte
View file

@ -18,12 +18,12 @@
href="{href}" href="{href}"
rel="{$$restProps.target === '_blank' ? 'noopener noreferrer' : undefined}" rel="{$$restProps.target === '_blank' ? 'noopener noreferrer' : undefined}"
role="button" role="button"
class:cds--skeleton="{true}" class:bx--skeleton="{true}"
class:cds--btn="{true}" class:bx--btn="{true}"
class:cds--btn--field="{size === 'field'}" class:bx--btn--field="{size === 'field'}"
class:cds--btn--sm="{size === 'small'}" class:bx--btn--sm="{size === 'small'}"
class:cds--btn--lg="{size === 'lg'}" class:bx--btn--lg="{size === 'lg'}"
class:cds--btn--xl="{size === 'xl'}" class:bx--btn--xl="{size === 'xl'}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover
@ -35,12 +35,12 @@
{:else} {:else}
<!-- svelte-ignore a11y-no-static-element-interactions --> <!-- svelte-ignore a11y-no-static-element-interactions -->
<div <div
class:cds--skeleton="{true}" class:bx--skeleton="{true}"
class:cds--btn="{true}" class:bx--btn="{true}"
class:cds--btn--field="{size === 'field'}" class:bx--btn--field="{size === 'field'}"
class:cds--btn--sm="{size === 'small'}" class:bx--btn--sm="{size === 'small'}"
class:cds--btn--lg="{size === 'lg'}" class:bx--btn--lg="{size === 'lg'}"
class:cds--btn--xl="{size === 'xl'}" class:bx--btn--xl="{size === 'xl'}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover

12
src/Checkbox/Checkbox.svelte
View file

@ -82,8 +82,8 @@
{:else} {:else}
<!-- svelte-ignore a11y-no-static-element-interactions --> <!-- svelte-ignore a11y-no-static-element-interactions -->
<div <div
class:cds--form-item="{true}" class:bx--form-item="{true}"
class:cds--checkbox-wrapper="{true}" class:bx--checkbox-wrapper="{true}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover
@ -101,7 +101,7 @@
name="{name}" name="{name}"
required="{required}" required="{required}"
readonly="{readonly}" readonly="{readonly}"
class:cds--checkbox="{true}" class:bx--checkbox="{true}"
on:change="{() => { on:change="{() => {
if (useGroup) { if (useGroup) {
group = group.includes(value) group = group.includes(value)
@ -114,11 +114,11 @@
on:change on:change
on:blur on:blur
/> />
<label for="{id}" title="{title}" class:cds--checkbox-label="{true}"> <label for="{id}" title="{title}" class:bx--checkbox-label="{true}">
<span <span
bind:this="{refLabel}" bind:this="{refLabel}"
class:cds--checkbox-label-text="{true}" class:bx--checkbox-label-text="{true}"
class:cds--visually-hidden="{hideLabel}" class:bx--visually-hidden="{hideLabel}"
> >
<slot name="labelText"> <slot name="labelText">
{labelText} {labelText}

8
src/Checkbox/CheckboxSkeleton.svelte
View file

@ -1,15 +1,15 @@
<!-- svelte-ignore a11y-mouse-events-have-key-events --> <!-- svelte-ignore a11y-mouse-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions --> <!-- svelte-ignore a11y-no-static-element-interactions -->
<div <div
class:cds--form-item="{true}" class:bx--form-item="{true}"
class:cds--checkbox-wrapper="{true}" class:bx--checkbox-wrapper="{true}"
class:cds--checkbox-label="{true}" class:bx--checkbox-label="{true}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave
> >
<span class:cds--checkbox-label-text="{true}" class:cds--skeleton="{true}" <span class:bx--checkbox-label-text="{true}" class:bx--skeleton="{true}"
></span> ></span>
</div> </div>

6
src/Checkbox/InlineCheckbox.svelte
View file

@ -18,11 +18,11 @@
export let ref = null; export let ref = null;
</script> </script>
<div class:cds--checkbox--inline="{true}"> <div class:bx--checkbox--inline="{true}">
<input <input
bind:this="{ref}" bind:this="{ref}"
type="checkbox" type="checkbox"
class:cds--checkbox="{true}" class:bx--checkbox="{true}"
checked="{indeterminate ? false : checked}" checked="{indeterminate ? false : checked}"
indeterminate="{indeterminate}" indeterminate="{indeterminate}"
id="{id}" id="{id}"
@ -34,5 +34,5 @@
for="{id}" for="{id}"
title="{title}" title="{title}"
aria-label="{$$props['aria-label']}" aria-label="{$$props['aria-label']}"
class:cds--checkbox-label="{true}"></label> class:bx--checkbox-label="{true}"></label>
</div> </div>

66
src/CodeSnippet/CodeSnippet.svelte
View file

@ -144,14 +144,14 @@
{:else if type === "inline"} {:else if type === "inline"}
{#if hideCopyButton} {#if hideCopyButton}
<span <span
class:cds--snippet="{true}" class:bx--snippet="{true}"
class:cds--snippet--expand="{expanded}" class:bx--snippet--expand="{expanded}"
class:cds--snippet--light="{light}" class:bx--snippet--light="{light}"
class:cds--snippet--no-copy="{hideCopyButton}" class:bx--snippet--no-copy="{hideCopyButton}"
class:cds--snippet--wraptext="{wrapText}" class:bx--snippet--wraptext="{wrapText}"
class:cds--snippet--single="{type === 'single'}" class:bx--snippet--single="{type === 'single'}"
class:cds--snippet--inline="{type === 'inline'}" class:bx--snippet--inline="{type === 'inline'}"
class:cds--snippet--multi="{type === 'multi'}" class:bx--snippet--multi="{type === 'multi'}"
{...$$restProps} {...$$restProps}
> >
<code id="{id}"> <code id="{id}">
@ -162,16 +162,16 @@
<button <button
type="button" type="button"
aria-live="polite" aria-live="polite"
class:cds--copy="{true}" class:bx--copy="{true}"
class:cds--btn--copy="{true}" class:bx--btn--copy="{true}"
class:cds--copy-btn--animating="{animation}" class:bx--copy-btn--animating="{animation}"
class:cds--copy-btn--fade-in="{animation === 'fade-in'}" class:bx--copy-btn--fade-in="{animation === 'fade-in'}"
class:cds--copy-btn--fade-out="{animation === 'fade-out'}" class:bx--copy-btn--fade-out="{animation === 'fade-out'}"
class:cds--snippet="{true}" class:bx--snippet="{true}"
class:cds--snippet--inline="{type === 'inline'}" class:bx--snippet--inline="{type === 'inline'}"
class:cds--snippet--expand="{expanded}" class:bx--snippet--expand="{expanded}"
class:cds--snippet--light="{light}" class:bx--snippet--light="{light}"
class:cds--snippet--wraptext="{wrapText}" class:bx--snippet--wraptext="{wrapText}"
aria-label="{copyLabel}" aria-label="{copyLabel}"
{...$$restProps} {...$$restProps}
on:click on:click
@ -198,8 +198,8 @@
</code> </code>
<span <span
aria-hidden="true" aria-hidden="true"
class:cds--assistive-text="{true}" class:bx--assistive-text="{true}"
class:cds--copy-btn__feedback="{true}" class:bx--copy-btn__feedback="{true}"
> >
{feedback} {feedback}
</span> </span>
@ -208,15 +208,15 @@
{:else} {:else}
<!-- svelte-ignore a11y-no-static-element-interactions --> <!-- svelte-ignore a11y-no-static-element-interactions -->
<div <div
class:cds--snippet="{true}" class:bx--snippet="{true}"
class:cds--snippet--expand="{expanded}" class:bx--snippet--expand="{expanded}"
class:cds--snippet--light="{light}" class:bx--snippet--light="{light}"
class:cds--snippet--no-copy="{hideCopyButton}" class:bx--snippet--no-copy="{hideCopyButton}"
class:cds--snippet--wraptext="{wrapText}" class:bx--snippet--wraptext="{wrapText}"
class:cds--snippet--single="{type === 'single'}" class:bx--snippet--single="{type === 'single'}"
class:cds--snippet--inline="{type === 'inline'}" class:bx--snippet--inline="{type === 'inline'}"
class:cds--snippet--multi="{type === 'multi'}" class:bx--snippet--multi="{type === 'multi'}"
class:cds--snippet--disabled="{type !== 'inline' && disabled}" class:bx--snippet--disabled="{type !== 'inline' && disabled}"
{...$$restProps} {...$$restProps}
on:mouseover on:mouseover
on:mouseenter on:mouseenter
@ -227,7 +227,7 @@
role="{type === 'single' ? 'textbox' : undefined}" role="{type === 'single' ? 'textbox' : undefined}"
tabindex="{type === 'single' && !disabled ? '0' : undefined}" tabindex="{type === 'single' && !disabled ? '0' : undefined}"
aria-label="{$$restProps['aria-label'] || copyLabel || 'code-snippet'}" aria-label="{$$restProps['aria-label'] || copyLabel || 'code-snippet'}"
class:cds--snippet-container="{true}" class:bx--snippet-container="{true}"
style:width="100%" style:width="100%"
style:min-height="{minHeight}px" style:min-height="{minHeight}px"
style:max-height="{maxHeight}" style:max-height="{maxHeight}"
@ -251,15 +251,15 @@
<Button <Button
kind="ghost" kind="ghost"
size="small" size="small"
class="cds--snippet-btn--expand" class="bx--snippet-btn--expand"
disabled="{disabled}" disabled="{disabled}"
on:click="{() => { on:click="{() => {
expanded = !expanded; expanded = !expanded;
}}" }}"
> >
<span class:cds--snippet-btn--text="{true}">{expandText}</span> <span class:bx--snippet-btn--text="{true}">{expandText}</span>
<ChevronDown <ChevronDown
class="cds--icon-chevron--down cds--snippet__icon" class="bx--icon-chevron--down bx--snippet__icon"
aria-label="{expandText}" aria-label="{expandText}"
/> />
</Button> </Button>

10
src/CodeSnippet/CodeSnippetSkeleton.svelte
View file

@ -9,17 +9,17 @@
<!-- svelte-ignore a11y-mouse-events-have-key-events --> <!-- svelte-ignore a11y-mouse-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions --> <!-- svelte-ignore a11y-no-static-element-interactions -->
<div <div
class:cds--skeleton="{true}" class:bx--skeleton="{true}"
class:cds--snippet="{true}" class:bx--snippet="{true}"
class:cds--snippet--single="{type === 'single'}" class:bx--snippet--single="{type === 'single'}"
class:cds--snippet--multi="{type === 'multi'}" class:bx--snippet--multi="{type === 'multi'}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave
> >
<div class:cds--snippet-container="{true}"> <div class:bx--snippet-container="{true}">
{#if type === "single"} {#if type === "single"}
<span></span> <span></span>
{:else if type === "multi"}<span></span> <span></span> <span></span>{/if} {:else if type === "multi"}<span></span> <span></span> <span></span>{/if}

26
src/ComboBox/ComboBox.svelte
View file

@ -217,12 +217,12 @@
}}" }}"
/> />
<div class:cds--list-box__wrapper="{true}"> <div class:bx--list-box__wrapper="{true}">
{#if titleText || $$slots.titleText} {#if titleText || $$slots.titleText}
<label <label
for="{id}" for="{id}"
class:cds--label="{true}" class:bx--label="{true}"
class:cds--label--disabled="{disabled}" class:bx--label--disabled="{disabled}"
> >
<slot name="titleText"> <slot name="titleText">
{titleText} {titleText}
@ -230,8 +230,8 @@
</label> </label>
{/if} {/if}
<ListBox <ListBox
class="cds--combo-box {direction === 'top' && class="bx--combo-box {direction === 'top' &&
'cds--list-box--up'} {!invalid && warn && 'cds--combo-box--warning'}" 'bx--list-box--up'} {!invalid && warn && 'bx--combo-box--warning'}"
id="{comboId}" id="{comboId}"
aria-label="{ariaLabel}" aria-label="{ariaLabel}"
disabled="{disabled}" disabled="{disabled}"
@ -273,9 +273,9 @@
id="{id}" id="{id}"
name="{name}" name="{name}"
{...$$restProps} {...$$restProps}
class:cds--text-input="{true}" class:bx--text-input="{true}"
class:cds--text-input--light="{light}" class:bx--text-input--light="{light}"
class:cds--text-input--empty="{value === ''}" class:bx--text-input--empty="{value === ''}"
on:input="{({ target }) => { on:input="{({ target }) => {
if (!open && target.value.length > 0) { if (!open && target.value.length > 0) {
open = true; open = true;
@ -347,11 +347,11 @@
on:paste on:paste
/> />
{#if invalid} {#if invalid}
<WarningFilled class="cds--list-box__invalid-icon" /> <WarningFilled class="bx--list-box__invalid-icon" />
{/if} {/if}
{#if !invalid && warn} {#if !invalid && warn}
<WarningAltFilled <WarningAltFilled
class="cds--list-box__invalid-icon cds--list-box__invalid-icon--warning" class="bx--list-box__invalid-icon bx--list-box__invalid-icon--warning"
/> />
{/if} {/if}
{#if value} {#if value}
@ -407,7 +407,7 @@
{itemToString(item)} {itemToString(item)}
</slot> </slot>
{#if selectedItem && selectedItem.id === item.id} {#if selectedItem && selectedItem.id === item.id}
<Checkmark class="cds--list-box__menu-item__selected-icon" /> <Checkmark class="bx--list-box__menu-item__selected-icon" />
{/if} {/if}
</ListBoxMenuItem> </ListBoxMenuItem>
{/each} {/each}
@ -416,8 +416,8 @@
</ListBox> </ListBox>
{#if !invalid && helperText && !warn} {#if !invalid && helperText && !warn}
<div <div
class:cds--form__helper-text="{true}" class:bx--form__helper-text="{true}"
class:cds--form__helper-text--disabled="{disabled}" class:bx--form__helper-text--disabled="{disabled}"
> >
{helperText} {helperText}
</div> </div>

12
src/ComposedModal/ComposedModal.svelte
View file

@ -100,9 +100,9 @@
<div <div
bind:this="{ref}" bind:this="{ref}"
role="presentation" role="presentation"
class:cds--modal="{true}" class:bx--modal="{true}"
class:is-visible="{open}" class:is-visible="{open}"
class:cds--modal--danger="{danger}" class:bx--modal--danger="{danger}"
{...$$restProps} {...$$restProps}
on:keydown on:keydown
on:keydown="{(e) => { on:keydown="{(e) => {
@ -157,10 +157,10 @@
role="dialog" role="dialog"
aria-modal="true" aria-modal="true"
aria-label="{$$props['aria-label'] || $label || undefined}" aria-label="{$$props['aria-label'] || $label || undefined}"
class:cds--modal-container="{true}" class:bx--modal-container="{true}"
class:cds--modal-container--xs="{size === 'xs'}" class:bx--modal-container--xs="{size === 'xs'}"
class:cds--modal-container--sm="{size === 'sm'}" class:bx--modal-container--sm="{size === 'sm'}"
class:cds--modal-container--lg="{size === 'lg'}" class:bx--modal-container--lg="{size === 'lg'}"
class="{containerClass}" class="{containerClass}"
on:click="{() => { on:click="{() => {
didClickInnerModal = true; didClickInnerModal = true;

8
src/ComposedModal/ModalBody.svelte
View file

@ -10,13 +10,13 @@
<div <div
tabindex="{hasScrollingContent ? '0' : undefined}" tabindex="{hasScrollingContent ? '0' : undefined}"
role="{hasScrollingContent ? 'region' : undefined}" role="{hasScrollingContent ? 'region' : undefined}"
class:cds--modal-content="{true}" class:bx--modal-content="{true}"
class:cds--modal-content--with-form="{hasForm}" class:bx--modal-content--with-form="{hasForm}"
class:cds--modal-scroll-content="{hasScrollingContent}" class:bx--modal-scroll-content="{hasScrollingContent}"
{...$$restProps} {...$$restProps}
> >
<slot /> <slot />
</div> </div>
{#if hasScrollingContent} {#if hasScrollingContent}
<div class:cds--modal-content--overflow-indicator="{true}"></div> <div class:bx--modal-content--overflow-indicator="{true}"></div>
{/if} {/if}

4
src/ComposedModal/ModalFooter.svelte
View file

@ -48,8 +48,8 @@
</script> </script>
<div <div
class:cds--modal-footer="{true}" class:bx--modal-footer="{true}"
class:cds--modal-footer--three-button="{secondaryButtons.length === 2}" class:bx--modal-footer--three-button="{secondaryButtons.length === 2}"
{...$$restProps} {...$$restProps}
> >
{#if secondaryButtons.length > 0} {#if secondaryButtons.length > 0}

14
src/ComposedModal/ModalHeader.svelte
View file

@ -28,11 +28,11 @@
$: updateLabel(label); $: updateLabel(label);
</script> </script>
<div class:cds--modal-header="{true}" {...$$restProps}> <div class:bx--modal-header="{true}" {...$$restProps}>
{#if label} {#if label}
<h2 <h2
class:cds--modal-header__label="{true}" class:bx--modal-header__label="{true}"
class:cds--type-delta="{true}" class:bx--type-delta="{true}"
class="{labelClass}" class="{labelClass}"
> >
{label} {label}
@ -40,8 +40,8 @@
{/if} {/if}
{#if title} {#if title}
<h3 <h3
class:cds--modal-header__heading="{true}" class:bx--modal-header__heading="{true}"
class:cds--type-beta="{true}" class:bx--type-beta="{true}"
class="{titleClass}" class="{titleClass}"
> >
{title} {title}
@ -51,14 +51,14 @@
<button <button
type="button" type="button"
aria-label="{iconDescription}" aria-label="{iconDescription}"
class:cds--modal-close="{true}" class:bx--modal-close="{true}"
class="{closeClass}" class="{closeClass}"
on:click on:click
on:click="{closeModal}" on:click="{closeModal}"
> >
<Close <Close
size="{20}" size="{20}"
class="cds--modal-close__icon {closeIconClass}" class="bx--modal-close__icon {closeIconClass}"
aria-hidden="true" aria-hidden="true"
/> />
</button> </button>

6
src/ContentSwitcher/ContentSwitcher.svelte
View file

@ -61,9 +61,9 @@
<!-- svelte-ignore a11y-interactive-supports-focus --> <!-- svelte-ignore a11y-interactive-supports-focus -->
<div <div
role="tablist" role="tablist"
class:cds--content-switcher="{true}" class:bx--content-switcher="{true}"
class:cds--content-switcher--sm="{size === 'sm'}" class:bx--content-switcher--sm="{size === 'sm'}"
class:cds--content-switcher--lg="{size === 'lg' || size === 'xl'}" class:bx--content-switcher--lg="{size === 'lg' || size === 'xl'}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover

6
src/ContentSwitcher/Switch.svelte
View file

@ -47,8 +47,8 @@
aria-selected="{selected}" aria-selected="{selected}"
disabled="{disabled}" disabled="{disabled}"
id="{id}" id="{id}"
class:cds--content-switcher-btn="{true}" class:bx--content-switcher-btn="{true}"
class:cds--content-switcher--selected="{selected}" class:bx--content-switcher--selected="{selected}"
{...$$restProps} {...$$restProps}
on:click on:click
on:click|preventDefault="{() => { on:click|preventDefault="{() => {
@ -66,7 +66,7 @@
} }
}}" }}"
> >
<span class:cds--content-switcher__label="{true}"> <span class:bx--content-switcher__label="{true}">
<slot>{text}</slot> <slot>{text}</slot>
</span> </span>
</button> </button>

8
src/ContextMenu/ContextMenu.svelte
View file

@ -160,10 +160,10 @@
tabindex="-1" tabindex="-1"
data-direction="{direction}" data-direction="{direction}"
data-level="{level}" data-level="{level}"
class:cds--menu="{true}" class:bx--menu="{true}"
class:cds--menu--open="{open}" class:bx--menu--open="{open}"
class:cds--menu--invisible="{open && x === 0 && y === 0}" class:bx--menu--invisible="{open && x === 0 && y === 0}"
class:cds--menu--root="{level === 1}" class:bx--menu--root="{level === 1}"
style:left="{x}px" style:left="{x}px"
style:top="{y}px" style:top="{y}px"
{...$$restProps} {...$$restProps}

2
src/ContextMenu/ContextMenuDivider.svelte
View file

@ -1 +1 @@
<li role="separator" class:cds--menu-divider="{true}"></li> <li role="separator" class:bx--menu-divider="{true}"></li>

30
src/ContextMenu/ContextMenuOption.svelte
View file

@ -173,14 +173,14 @@
aria-disabled="{!subOptions && disabled}" aria-disabled="{!subOptions && disabled}"
aria-haspopup="{subOptions ? true : undefined}" aria-haspopup="{subOptions ? true : undefined}"
aria-expanded="{subOptions ? submenuOpen : undefined}" aria-expanded="{subOptions ? submenuOpen : undefined}"
class:cds--menu-option="{true}" class:bx--menu-option="{true}"
class:cds--menu-option--disabled="{true}" class:bx--menu-option--disabled="{true}"
class:cds--menu-option--active="{subOptions && submenuOpen}" class:bx--menu-option--active="{subOptions && submenuOpen}"
class:cds--menu-option--danger="{!subOptions && kind === 'danger'}" class:bx--menu-option--danger="{!subOptions && kind === 'danger'}"
indented="{indented}" indented="{indented}"
aria-checked="{isSelectable || isRadio ? selected : undefined}" aria-checked="{isSelectable || isRadio ? selected : undefined}"
data-nested="{ref && data-nested="{ref &&
ref.closest('.cds--menu').getAttribute('data-level') === '2'}" ref.closest('.bx--menu').getAttribute('data-level') === '2'}"
data-sub="{subOptions}" data-sub="{subOptions}"
data-id="{id}" data-id="{id}"
{...$$restProps} {...$$restProps}
@ -240,20 +240,20 @@
> >
{#if subOptions} {#if subOptions}
<div <div
class:cds--menu-option__content="{true}" class:bx--menu-option__content="{true}"
class:cds--menu-option__content--disabled="{disabled}" class:bx--menu-option__content--disabled="{disabled}"
> >
{#if indented} {#if indented}
<div class:cds--menu-option__icon="{true}"> <div class:bx--menu-option__icon="{true}">
<slot name="icon"> <slot name="icon">
<svelte:component this="{icon}" /> <svelte:component this="{icon}" />
</slot> </slot>
</div> </div>
{/if} {/if}
<span class:cds--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:cds--menu-option__info="{true}"><CaretRight /></div> <div class:bx--menu-option__info="{true}"><CaretRight /></div>
</div> </div>
<ContextMenu <ContextMenu
@ -265,20 +265,20 @@
</ContextMenu> </ContextMenu>
{:else} {:else}
<div <div
class:cds--menu-option__content="{true}" class:bx--menu-option__content="{true}"
class:cds--menu-option__content--disabled="{disabled}" class:bx--menu-option__content--disabled="{disabled}"
> >
{#if indented} {#if indented}
<div class:cds--menu-option__icon="{true}"> <div class:bx--menu-option__icon="{true}">
<slot name="icon"> <slot name="icon">
<svelte:component this="{icon}" /> <svelte:component this="{icon}" />
</slot> </slot>
</div> </div>
{/if} {/if}
<span class:cds--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:cds--menu-option__info="{true}"> <div class:bx--menu-option__info="{true}">
<slot name="shortcutText">{shortcutText}</slot> <slot name="shortcutText">{shortcutText}</slot>
</div> </div>
</div> </div>

16
src/CopyButton/CopyButton.svelte
View file

@ -43,11 +43,11 @@
<button <button
type="button" type="button"
aria-live="polite" aria-live="polite"
class:cds--copy-btn="{true}" class:bx--copy-btn="{true}"
class:cds--copy="{true}" class:bx--copy="{true}"
class:cds--copy-btn--animating="{animation}" class:bx--copy-btn--animating="{animation}"
class:cds--copy-btn--fade-in="{animation === 'fade-in'}" class:bx--copy-btn--fade-in="{animation === 'fade-in'}"
class:cds--copy-btn--fade-out="{animation === 'fade-out'}" class:bx--copy-btn--fade-out="{animation === 'fade-out'}"
aria-label="{iconDescription}" aria-label="{iconDescription}"
title="{iconDescription}" title="{iconDescription}"
{...$$restProps} {...$$restProps}
@ -71,11 +71,11 @@
} }
}}" }}"
> >
<Copy class="cds--snippet__icon" /> <Copy class="bx--snippet__icon" />
<span <span
aria-hidden="true" aria-hidden="true"
class:cds--assistive-text="{true}" class:bx--assistive-text="{true}"
class:cds--copy-btn__feedback="{true}" class:bx--copy-btn__feedback="{true}"
> >
{feedback} {feedback}
</span> </span>

43
src/DataTable/DataTable.svelte
View file

@ -260,14 +260,14 @@
<TableContainer useStaticWidth="{useStaticWidth}" {...$$restProps}> <TableContainer useStaticWidth="{useStaticWidth}" {...$$restProps}>
{#if title || $$slots.title || description || $$slots.description} {#if title || $$slots.title || description || $$slots.description}
<div class:cds--data-table-header="{true}"> <div class:bx--data-table-header="{true}">
{#if title || $$slots.title} {#if title || $$slots.title}
<h4 class:cds--data-table-header__title="{true}"> <h4 class:bx--data-table-header__title="{true}">
<slot name="title">{title}</slot> <slot name="title">{title}</slot>
</h4> </h4>
{/if} {/if}
{#if description || $$slots.description} {#if description || $$slots.description}
<p class:cds--data-table-header__description="{true}"> <p class:bx--data-table-header__description="{true}">
<slot name="description">{description}</slot> <slot name="description">{description}</slot>
</p> </p>
{/if} {/if}
@ -287,13 +287,13 @@
{#if expandable} {#if expandable}
<th <th
scope="col" scope="col"
class:cds--table-expand="{true}" class:bx--table-expand="{true}"
data-previous-value="{expanded ? 'collapsed' : undefined}" data-previous-value="{expanded ? 'collapsed' : undefined}"
> >
{#if batchExpansion} {#if batchExpansion}
<button <button
type="button" type="button"
class:cds--table-expand__button="{true}" class:bx--table-expand__button="{true}"
on:click="{() => { on:click="{() => {
expanded = !expanded; expanded = !expanded;
expandedRowIds = expanded ? expandableRowIds : []; expandedRowIds = expanded ? expandableRowIds : [];
@ -301,7 +301,7 @@
dispatch('click:header--expand', { expanded }); dispatch('click:header--expand', { expanded });
}}" }}"
> >
<ChevronRight class="cds--table-expand__svg" /> <ChevronRight class="bx--table-expand__svg" />
</button> </button>
{/if} {/if}
</th> </th>
@ -310,7 +310,7 @@
<th scope="col"></th> <th scope="col"></th>
{/if} {/if}
{#if batchSelection && !radio} {#if batchSelection && !radio}
<th scope="col" class:cds--table-column-checkbox="{true}"> <th scope="col" class:bx--table-column-checkbox="{true}">
<InlineCheckbox <InlineCheckbox
bind:ref="{refSelectAll}" bind:ref="{refSelectAll}"
aria-label="Select all rows" aria-label="Select all rows"
@ -375,19 +375,18 @@
data-row="{row.id}" data-row="{row.id}"
data-parent-row="{expandable ? true : undefined}" data-parent-row="{expandable ? true : undefined}"
class="{selectedRowIds.includes(row.id) class="{selectedRowIds.includes(row.id)
? 'cds--data-table--selected' ? 'bx--data-table--selected'
: ''} {expandedRows[row.id] : ''} {expandedRows[row.id] ? 'bx--expandable-row' : ''} {expandable
? 'cds--expandable-row' ? 'bx--parent-row'
: ''} {expandable ? 'cds--parent-row' : ''} {expandable && : ''} {expandable && parentRowId === row.id
parentRowId === row.id ? 'bx--expandable-row--hover'
? 'cds--expandable-row--hover'
: ''}" : ''}"
on:click="{({ target }) => { on:click="{({ target }) => {
// forgo "click", "click:row" events if target // forgo "click", "click:row" events if target
// resembles an overflow menu, a checkbox, or radio button // resembles an overflow menu, a checkbox, or radio button
if ( if (
[...target.classList].some((name) => [...target.classList].some((name) =>
/^cds--(overflow-menu|checkbox|radio-button)/.test(name) /^bx--(overflow-menu|checkbox|radio-button)/.test(name)
) )
) { ) {
return; return;
@ -404,7 +403,7 @@
> >
{#if expandable} {#if expandable}
<TableCell <TableCell
class="cds--table-expand" class="bx--table-expand"
headers="expand" headers="expand"
data-previous-value="{!nonExpandableRowIds.includes(row.id) && data-previous-value="{!nonExpandableRowIds.includes(row.id) &&
expandedRows[row.id] expandedRows[row.id]
@ -414,7 +413,7 @@
{#if !nonExpandableRowIds.includes(row.id)} {#if !nonExpandableRowIds.includes(row.id)}
<button <button
type="button" type="button"
class:cds--table-expand__button="{true}" class:bx--table-expand__button="{true}"
aria-label="{expandedRows[row.id] aria-label="{expandedRows[row.id]
? 'Collapse current row' ? 'Collapse current row'
: 'Expand current row'}" : 'Expand current row'}"
@ -431,15 +430,15 @@
}); });
}}" }}"
> >
<ChevronRight class="cds--table-expand__svg" /> <ChevronRight class="bx--table-expand__svg" />
</button> </button>
{/if} {/if}
</TableCell> </TableCell>
{/if} {/if}
{#if selectable} {#if selectable}
<td <td
class:cds--table-column-checkbox="{true}" class:bx--table-column-checkbox="{true}"
class:cds--table-column-radio="{radio}" class:bx--table-column-radio="{radio}"
> >
{#if !nonSelectableRowIds.includes(row.id)} {#if !nonSelectableRowIds.includes(row.id)}
{#if radio} {#if radio}
@ -473,7 +472,7 @@
{/if} {/if}
{#each tableCellsByRowId[row.id] as cell, j (cell.key)} {#each tableCellsByRowId[row.id] as cell, j (cell.key)}
{#if headers[j].empty} {#if headers[j].empty}
<td class:cds--table-column-menu="{headers[j].columnMenu}"> <td class:bx--table-column-menu="{headers[j].columnMenu}">
<slot <slot
name="cell" name="cell"
row="{row}" row="{row}"
@ -508,7 +507,7 @@
{#if expandable} {#if expandable}
<tr <tr
data-child-row data-child-row
class:cds--expandable-row="{true}" class:bx--expandable-row="{true}"
on:mouseenter="{() => { on:mouseenter="{() => {
if (nonExpandableRowIds.includes(row.id)) return; if (nonExpandableRowIds.includes(row.id)) return;
parentRowId = row.id; parentRowId = row.id;
@ -522,7 +521,7 @@
<TableCell <TableCell
colspan="{selectable ? headers.length + 2 : headers.length + 1}" colspan="{selectable ? headers.length + 2 : headers.length + 1}"
> >
<div class:cds--child-row-inner-container="{true}"> <div class:bx--child-row-inner-container="{true}">
<slot name="expanded-row" row="{row}" /> <slot name="expanded-row" row="{row}" />
</div> </div>
</TableCell> </TableCell>

32
src/DataTable/DataTableSkeleton.svelte
View file

@ -43,35 +43,35 @@
<!-- svelte-ignore a11y-mouse-events-have-key-events --> <!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div <div
class:cds--skeleton="{true}" class:bx--skeleton="{true}"
class:cds--data-table-container="{true}" class:bx--data-table-container="{true}"
{...$$restProps} {...$$restProps}
> >
{#if showHeader} {#if showHeader}
<div class:cds--data-table-header="{true}"> <div class:bx--data-table-header="{true}">
<div class:cds--data-table-header__title="{true}"></div> <div class:bx--data-table-header__title="{true}"></div>
<div class:cds--data-table-header__description="{true}"></div> <div class:bx--data-table-header__description="{true}"></div>
</div> </div>
{/if} {/if}
{#if showToolbar} {#if showToolbar}
<section aria-label="data table toolbar" class:cds--table-toolbar="{true}"> <section aria-label="data table toolbar" class:bx--table-toolbar="{true}">
<div class:cds--toolbar-content="{true}"> <div class:bx--toolbar-content="{true}">
<span <span
class:cds--skeleton="{true}" class:bx--skeleton="{true}"
class:cds--btn="{true}" class:bx--btn="{true}"
class:cds--btn--sm="{true}"></span> class:bx--btn--sm="{true}"></span>
</div> </div>
</section> </section>
{/if} {/if}
<!-- svelte-ignore a11y-click-events-have-key-events --> <!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-noninteractive-element-interactions --> <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<table <table
class:cds--skeleton="{true}" class:bx--skeleton="{true}"
class:cds--data-table="{true}" class:bx--data-table="{true}"
class:cds--data-table--compact="{size === 'compact'}" class:bx--data-table--compact="{size === 'compact'}"
class:cds--data-table--short="{size === 'short'}" class:bx--data-table--short="{size === 'short'}"
class:cds--data-table--tall="{size === 'tall'}" class:bx--data-table--tall="{size === 'tall'}"
class:cds--data-table--zebra="{zebra}" class:bx--data-table--zebra="{zebra}"
on:click on:click
on:mouseover on:mouseover
on:mouseenter on:mouseenter

38
src/DataTable/Table.svelte
View file

@ -25,17 +25,17 @@
</script> </script>
{#if stickyHeader} {#if stickyHeader}
<section class:cds--data-table_inner-container="{true}" {...$$restProps}> <section class:bx--data-table_inner-container="{true}" {...$$restProps}>
<table <table
class:cds--data-table="{true}" class:bx--data-table="{true}"
class:cds--data-table--compact="{size === 'compact'}" class:bx--data-table--compact="{size === 'compact'}"
class:cds--data-table--short="{size === 'short'}" class:bx--data-table--short="{size === 'short'}"
class:cds--data-table--tall="{size === 'tall'}" class:bx--data-table--tall="{size === 'tall'}"
class:cds--data-table--md="{size === 'medium'}" class:bx--data-table--md="{size === 'medium'}"
class:cds--data-table--sort="{sortable}" class:bx--data-table--sort="{sortable}"
class:cds--data-table--zebra="{zebra}" class:bx--data-table--zebra="{zebra}"
class:cds--data-table--static="{useStaticWidth}" class:bx--data-table--static="{useStaticWidth}"
class:cds--data-table--sticky-header="{stickyHeader}" class:bx--data-table--sticky-header="{stickyHeader}"
style="{tableStyle}" style="{tableStyle}"
> >
<slot /> <slot />
@ -43,15 +43,15 @@
</section> </section>
{:else} {:else}
<table <table
class:cds--data-table="{true}" class:bx--data-table="{true}"
class:cds--data-table--compact="{size === 'compact'}" class:bx--data-table--compact="{size === 'compact'}"
class:cds--data-table--short="{size === 'short'}" class:bx--data-table--short="{size === 'short'}"
class:cds--data-table--tall="{size === 'tall'}" class:bx--data-table--tall="{size === 'tall'}"
class:cds--data-table--md="{size === 'medium'}" class:bx--data-table--md="{size === 'medium'}"
class:cds--data-table--sort="{sortable}" class:bx--data-table--sort="{sortable}"
class:cds--data-table--zebra="{zebra}" class:bx--data-table--zebra="{zebra}"
class:cds--data-table--static="{useStaticWidth}" class:bx--data-table--static="{useStaticWidth}"
class:cds--data-table--sticky-header="{stickyHeader}" class:bx--data-table--sticky-header="{stickyHeader}"
{...$$restProps} {...$$restProps}
style="{tableStyle}" style="{tableStyle}"
> >

12
src/DataTable/TableContainer.svelte
View file

@ -13,15 +13,15 @@
</script> </script>
<div <div
class:cds--data-table-container="{true}" class:bx--data-table-container="{true}"
class:cds--data-table-container--static="{useStaticWidth}" class:bx--data-table-container--static="{useStaticWidth}"
class:cds--data-table--max-width="{stickyHeader}" class:bx--data-table--max-width="{stickyHeader}"
{...$$restProps} {...$$restProps}
> >
{#if title} {#if title}
<div class:cds--data-table-header="{true}"> <div class:bx--data-table-header="{true}">
<h4 class:cds--data-table-header__title="{true}">{title}</h4> <h4 class:bx--data-table-header__title="{true}">{title}</h4>
<p class:cds--data-table-header__description="{true}">{description}</p> <p class:bx--data-table-header__description="{true}">{description}</p>
</div> </div>
{/if} {/if}
<slot /> <slot />

14
src/DataTable/TableHeader.svelte
View file

@ -43,24 +43,24 @@
> >
<button <button
type="button" type="button"
class:cds--table-sort="{true}" class:bx--table-sort="{true}"
class:cds--table-sort--active="{active}" class:bx--table-sort--active="{active}"
class:cds--table-sort--ascending="{active && class:bx--table-sort--ascending="{active &&
sortDirection === 'descending'}" sortDirection === 'descending'}"
on:click on:click
> >
<div class:cds--table-header-label="{true}"> <div class:bx--table-header-label="{true}">
<slot /> <slot />
</div> </div>
<ArrowUp <ArrowUp
size="{20}" size="{20}"
aria-label="{ariaLabel}" aria-label="{ariaLabel}"
class="cds--table-sort__icon" class="bx--table-sort__icon"
/> />
<ArrowsVertical <ArrowsVertical
size="{20}" size="{20}"
aria-label="{ariaLabel}" aria-label="{ariaLabel}"
class="cds--table-sort__icon-unsorted" class="bx--table-sort__icon-unsorted"
/> />
</button> </button>
</th> </th>
@ -74,7 +74,7 @@
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave
> >
<div class:cds--table-header-label="{true}"> <div class:bx--table-header-label="{true}">
<slot /> <slot />
</div> </div>
</th> </th>

6
src/DataTable/Toolbar.svelte
View file

@ -24,9 +24,9 @@
<section <section
bind:this="{ref}" bind:this="{ref}"
aria-label="data table toolbar" aria-label="data table toolbar"
class:cds--table-toolbar="{true}" class:bx--table-toolbar="{true}"
class:cds--table-toolbar--small="{size === 'sm'}" class:bx--table-toolbar--small="{size === 'sm'}"
class:cds--table-toolbar--normal="{size === 'default'}" class:bx--table-toolbar--normal="{size === 'default'}"
style:z-index="{1}" style:z-index="{1}"
{...$$restProps} {...$$restProps}
> >

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