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 cds class prefix in v11 styles

Browse source
This commit is contained in:
Enrico Sacchetti 2024-01-08 16:17:27 -05:00
commit 465f35c0f3
163 changed files with 1283 additions and 1255 deletions
Download patch file Download diff file Expand all files Collapse all files

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:bx--accordion="{true}" class:cds--accordion="{true}"
class:bx--accordion--start="{align === 'start'}" class:cds--accordion--start="{align === 'start'}"
class:bx--accordion--end="{align === 'end'}" class:cds--accordion--end="{align === 'end'}"
class:bx--accordion--sm="{size === 'sm'}" class:cds--accordion--sm="{size === 'sm'}"
class:bx--accordion--lg="{size === 'lg' || size === 'xl'}" class:cds--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:bx--accordion__item="{true}" class:cds--accordion__item="{true}"
class:bx--accordion__item--active="{open}" class:cds--accordion__item--active="{open}"
class:bx--accordion__item--disabled="{disabled}" class:cds--accordion__item--disabled="{disabled}"
class:bx--accordion__item--expanding="{animation === 'expanding'}" class:cds--accordion__item--expanding="{animation === 'expanding'}"
class:bx--accordion__item--collapsing="{animation === 'collapsing'}" class:cds--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:bx--accordion__heading="{true}" class:cds--accordion__heading="{true}"
title="{iconDescription}" title="{iconDescription}"
aria-expanded="{open}" aria-expanded="{open}"
disabled="{disabled}" disabled="{disabled}"
@ -68,12 +68,15 @@
} }
}}" }}"
> >
<ChevronRight class="bx--accordion__arrow" aria-label="{iconDescription}" /> <ChevronRight
<div class:bx--accordion__title="{true}"> class="cds--accordion__arrow"
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:bx--accordion__content="{true}"> <div class:cds--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:bx--skeleton="{true}" class:cds--skeleton="{true}"
class:bx--accordion="{true}" class:cds--accordion="{true}"
class:bx--accordion--start="{align === 'start'}" class:cds--accordion--start="{align === 'start'}"
class:bx--accordion--end="{align === 'end'}" class:cds--accordion--end="{align === 'end'}"
class:bx--accordion--sm="{size === 'sm'}" class:cds--accordion--sm="{size === 'sm'}"
class:bx--accordion--xl="{size === 'xl'}" class:cds--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:bx--accordion__item="{true}" class:cds--accordion__item="{true}"
class:bx--accordion__item--active="{true}" class:cds--accordion__item--active="{true}"
> >
<span class:bx--accordion__heading="{true}"> <span class:cds--accordion__heading="{true}">
<ChevronRight class="bx--accordion__arrow" /> <ChevronRight class="cds--accordion__arrow" />
<SkeletonText class="bx--accordion__title" /> <SkeletonText class="cds--accordion__title" />
</span> </span>
<div class:bx--accordion__content="{true}"> <div class:cds--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:bx--accordion__item="{true}"> <li class:cds--accordion__item="{true}">
<span class:bx--accordion__heading="{true}"> <span class:cds--accordion__heading="{true}">
<ChevronRight class="bx--accordion__arrow" /> <ChevronRight class="cds--accordion__arrow" />
<SkeletonText class="bx--accordion__title" /> <SkeletonText class="cds--accordion__title" />
</span> </span>
</li> </li>
{/each} {/each}

20
src/AspectRatio/AspectRatio.svelte
View file

@ -7,16 +7,16 @@
</script> </script>
<div <div
class:bx--aspect-ratio="{true}" class:cds--aspect-ratio="{true}"
class:bx--aspect-ratio--2x1="{ratio === '2x1'}" class:cds--aspect-ratio--2x1="{ratio === '2x1'}"
class:bx--aspect-ratio--2x3="{ratio === '2x3'}" class:cds--aspect-ratio--2x3="{ratio === '2x3'}"
class:bx--aspect-ratio--16x9="{ratio === '16x9'}" class:cds--aspect-ratio--16x9="{ratio === '16x9'}"
class:bx--aspect-ratio--4x3="{ratio === '4x3'}" class:cds--aspect-ratio--4x3="{ratio === '4x3'}"
class:bx--aspect-ratio--1x1="{ratio === '1x1'}" class:cds--aspect-ratio--1x1="{ratio === '1x1'}"
class:bx--aspect-ratio--3x4="{ratio === '3x4'}" class:cds--aspect-ratio--3x4="{ratio === '3x4'}"
class:bx--aspect-ratio--3x2="{ratio === '3x2'}" class:cds--aspect-ratio--3x2="{ratio === '3x2'}"
class:bx--aspect-ratio--9x16="{ratio === '9x16'}" class:cds--aspect-ratio--9x16="{ratio === '9x16'}"
class:bx--aspect-ratio--1x2="{ratio === '1x2'}" class:cds--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:bx--breadcrumb="{true}" class:cds--breadcrumb="{true}"
class:bx--breadcrumb--no-trailing-slash="{noTrailingSlash}" class:cds--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: "bx--link"; }}} * @slot {{props?: { ["aria-current"]?: string; class: "cds--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:bx--breadcrumb-item="{true}" class:cds--breadcrumb-item="{true}"
class:bx--breadcrumb-item--current="{isCurrentPage && class:cds--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: 'bx--link', class: 'cds--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:bx--skeleton="{true}" class:cds--skeleton="{true}"
class:bx--breadcrumb="{true}" class:cds--breadcrumb="{true}"
class:bx--breadcrumb--no-trailing-slash="{noTrailingSlash}" class:cds--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:bx--breadcrumb-item="{true}"> <div class:cds--breadcrumb-item="{true}">
<span class:bx--link="{true}">&nbsp;</span> <span class:cds--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: [
"bx--btn", "cds--btn",
expressive && "bx--btn--expressive", expressive && "cds--btn--expressive",
((size === "small" && !expressive) || ((size === "small" && !expressive) ||
(size === "sm" && !expressive) || (size === "sm" && !expressive) ||
(size === "small" && !expressive)) && (size === "small" && !expressive)) &&
"bx--btn--sm", "cds--btn--sm",
((size === "field" && !expressive) || (size === "md" && !expressive)) && ((size === "field" && !expressive) || (size === "md" && !expressive)) &&
"bx--btn--md", "cds--btn--md",
size === "small" && "bx--btn--sm", size === "small" && "cds--btn--sm",
size === "xl" && "bx--btn--xl", size === "xl" && "cds--btn--xl",
size === "2xl" && "bx--btn--2xl", size === "2xl" && "cds--btn--2xl",
kind && `bx--btn--${kind}`, kind && `cds--btn--${kind}`,
disabled && "bx--btn--disabled", disabled && "cds--btn--disabled",
hasIconOnly && "bx--btn--icon-only", hasIconOnly && "cds--btn--icon-only",
hasIconOnly && "bx--tooltip__trigger", hasIconOnly && "cds--tooltip__trigger",
hasIconOnly && "bx--tooltip--a11y", hasIconOnly && "cds--tooltip--a11y",
hasIconOnly && hasIconOnly &&
tooltipPosition && tooltipPosition &&
`bx--btn--icon-only--${tooltipPosition}`, `cds--btn--icon-only--${tooltipPosition}`,
hasIconOnly && hasIconOnly &&
tooltipAlignment && tooltipAlignment &&
`bx--tooltip--align-${tooltipAlignment}`, `cds--tooltip--align-${tooltipAlignment}`,
hasIconOnly && isSelected && kind === "ghost" && "bx--btn--selected", hasIconOnly && isSelected && kind === "ghost" && "cds--btn--selected",
$$restProps.class, $$restProps.class,
] ]
.filter(Boolean) .filter(Boolean)
@ -151,12 +151,12 @@
on:mouseleave on:mouseleave
> >
{#if hasIconOnly} {#if hasIconOnly}
<span class:bx--assistive-text="{true}">{iconDescription}</span> <span class:cds--assistive-text="{true}">{iconDescription}</span>
{/if} {/if}
<slot /><svelte:component <slot /><svelte:component
this="{icon}" this="{icon}"
aria-hidden="true" aria-hidden="true"
class="bx--btn__icon" class="cds--btn__icon"
aria-label="{iconDescription}" aria-label="{iconDescription}"
/> />
</a> </a>
@ -170,12 +170,12 @@
on:mouseleave on:mouseleave
> >
{#if hasIconOnly} {#if hasIconOnly}
<span class:bx--assistive-text="{true}">{iconDescription}</span> <span class:cds--assistive-text="{true}">{iconDescription}</span>
{/if} {/if}
<slot /><svelte:component <slot /><svelte:component
this="{icon}" this="{icon}"
aria-hidden="true" aria-hidden="true"
class="bx--btn__icon" class="cds--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:bx--btn-set="{true}" class:cds--btn-set="{true}"
class:bx--btn-set--stacked="{stacked}" class:cds--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:bx--skeleton="{true}" class:cds--skeleton="{true}"
class:bx--btn="{true}" class:cds--btn="{true}"
class:bx--btn--field="{size === 'field'}" class:cds--btn--field="{size === 'field'}"
class:bx--btn--sm="{size === 'small'}" class:cds--btn--sm="{size === 'small'}"
class:bx--btn--lg="{size === 'lg'}" class:cds--btn--lg="{size === 'lg'}"
class:bx--btn--xl="{size === 'xl'}" class:cds--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:bx--skeleton="{true}" class:cds--skeleton="{true}"
class:bx--btn="{true}" class:cds--btn="{true}"
class:bx--btn--field="{size === 'field'}" class:cds--btn--field="{size === 'field'}"
class:bx--btn--sm="{size === 'small'}" class:cds--btn--sm="{size === 'small'}"
class:bx--btn--lg="{size === 'lg'}" class:cds--btn--lg="{size === 'lg'}"
class:bx--btn--xl="{size === 'xl'}" class:cds--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:bx--form-item="{true}" class:cds--form-item="{true}"
class:bx--checkbox-wrapper="{true}" class:cds--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:bx--checkbox="{true}" class:cds--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:bx--checkbox-label="{true}"> <label for="{id}" title="{title}" class:cds--checkbox-label="{true}">
<span <span
bind:this="{refLabel}" bind:this="{refLabel}"
class:bx--checkbox-label-text="{true}" class:cds--checkbox-label-text="{true}"
class:bx--visually-hidden="{hideLabel}" class:cds--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:bx--form-item="{true}" class:cds--form-item="{true}"
class:bx--checkbox-wrapper="{true}" class:cds--checkbox-wrapper="{true}"
class:bx--checkbox-label="{true}" class:cds--checkbox-label="{true}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave
> >
<span class:bx--checkbox-label-text="{true}" class:bx--skeleton="{true}" <span class:cds--checkbox-label-text="{true}" class:cds--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:bx--checkbox--inline="{true}"> <div class:cds--checkbox--inline="{true}">
<input <input
bind:this="{ref}" bind:this="{ref}"
type="checkbox" type="checkbox"
class:bx--checkbox="{true}" class:cds--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:bx--checkbox-label="{true}"></label> class:cds--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:bx--snippet="{true}" class:cds--snippet="{true}"
class:bx--snippet--expand="{expanded}" class:cds--snippet--expand="{expanded}"
class:bx--snippet--light="{light}" class:cds--snippet--light="{light}"
class:bx--snippet--no-copy="{hideCopyButton}" class:cds--snippet--no-copy="{hideCopyButton}"
class:bx--snippet--wraptext="{wrapText}" class:cds--snippet--wraptext="{wrapText}"
class:bx--snippet--single="{type === 'single'}" class:cds--snippet--single="{type === 'single'}"
class:bx--snippet--inline="{type === 'inline'}" class:cds--snippet--inline="{type === 'inline'}"
class:bx--snippet--multi="{type === 'multi'}" class:cds--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:bx--copy="{true}" class:cds--copy="{true}"
class:bx--btn--copy="{true}" class:cds--btn--copy="{true}"
class:bx--copy-btn--animating="{animation}" class:cds--copy-btn--animating="{animation}"
class:bx--copy-btn--fade-in="{animation === 'fade-in'}" class:cds--copy-btn--fade-in="{animation === 'fade-in'}"
class:bx--copy-btn--fade-out="{animation === 'fade-out'}" class:cds--copy-btn--fade-out="{animation === 'fade-out'}"
class:bx--snippet="{true}" class:cds--snippet="{true}"
class:bx--snippet--inline="{type === 'inline'}" class:cds--snippet--inline="{type === 'inline'}"
class:bx--snippet--expand="{expanded}" class:cds--snippet--expand="{expanded}"
class:bx--snippet--light="{light}" class:cds--snippet--light="{light}"
class:bx--snippet--wraptext="{wrapText}" class:cds--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:bx--assistive-text="{true}" class:cds--assistive-text="{true}"
class:bx--copy-btn__feedback="{true}" class:cds--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:bx--snippet="{true}" class:cds--snippet="{true}"
class:bx--snippet--expand="{expanded}" class:cds--snippet--expand="{expanded}"
class:bx--snippet--light="{light}" class:cds--snippet--light="{light}"
class:bx--snippet--no-copy="{hideCopyButton}" class:cds--snippet--no-copy="{hideCopyButton}"
class:bx--snippet--wraptext="{wrapText}" class:cds--snippet--wraptext="{wrapText}"
class:bx--snippet--single="{type === 'single'}" class:cds--snippet--single="{type === 'single'}"
class:bx--snippet--inline="{type === 'inline'}" class:cds--snippet--inline="{type === 'inline'}"
class:bx--snippet--multi="{type === 'multi'}" class:cds--snippet--multi="{type === 'multi'}"
class:bx--snippet--disabled="{type !== 'inline' && disabled}" class:cds--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:bx--snippet-container="{true}" class:cds--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="bx--snippet-btn--expand" class="cds--snippet-btn--expand"
disabled="{disabled}" disabled="{disabled}"
on:click="{() => { on:click="{() => {
expanded = !expanded; expanded = !expanded;
}}" }}"
> >
<span class:bx--snippet-btn--text="{true}">{expandText}</span> <span class:cds--snippet-btn--text="{true}">{expandText}</span>
<ChevronDown <ChevronDown
class="bx--icon-chevron--down bx--snippet__icon" class="cds--icon-chevron--down cds--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:bx--skeleton="{true}" class:cds--skeleton="{true}"
class:bx--snippet="{true}" class:cds--snippet="{true}"
class:bx--snippet--single="{type === 'single'}" class:cds--snippet--single="{type === 'single'}"
class:bx--snippet--multi="{type === 'multi'}" class:cds--snippet--multi="{type === 'multi'}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave
> >
<div class:bx--snippet-container="{true}"> <div class:cds--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:bx--list-box__wrapper="{true}"> <div class:cds--list-box__wrapper="{true}">
{#if titleText || $$slots.titleText} {#if titleText || $$slots.titleText}
<label <label
for="{id}" for="{id}"
class:bx--label="{true}" class:cds--label="{true}"
class:bx--label--disabled="{disabled}" class:cds--label--disabled="{disabled}"
> >
<slot name="titleText"> <slot name="titleText">
{titleText} {titleText}
@ -230,8 +230,8 @@
</label> </label>
{/if} {/if}
<ListBox <ListBox
class="bx--combo-box {direction === 'top' && class="cds--combo-box {direction === 'top' &&
'bx--list-box--up'} {!invalid && warn && 'bx--combo-box--warning'}" 'cds--list-box--up'} {!invalid && warn && 'cds--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:bx--text-input="{true}" class:cds--text-input="{true}"
class:bx--text-input--light="{light}" class:cds--text-input--light="{light}"
class:bx--text-input--empty="{value === ''}" class:cds--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="bx--list-box__invalid-icon" /> <WarningFilled class="cds--list-box__invalid-icon" />
{/if} {/if}
{#if !invalid && warn} {#if !invalid && warn}
<WarningAltFilled <WarningAltFilled
class="bx--list-box__invalid-icon bx--list-box__invalid-icon--warning" class="cds--list-box__invalid-icon cds--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="bx--list-box__menu-item__selected-icon" /> <Checkmark class="cds--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:bx--form__helper-text="{true}" class:cds--form__helper-text="{true}"
class:bx--form__helper-text--disabled="{disabled}" class:cds--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:bx--modal="{true}" class:cds--modal="{true}"
class:is-visible="{open}" class:is-visible="{open}"
class:bx--modal--danger="{danger}" class:cds--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:bx--modal-container="{true}" class:cds--modal-container="{true}"
class:bx--modal-container--xs="{size === 'xs'}" class:cds--modal-container--xs="{size === 'xs'}"
class:bx--modal-container--sm="{size === 'sm'}" class:cds--modal-container--sm="{size === 'sm'}"
class:bx--modal-container--lg="{size === 'lg'}" class:cds--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:bx--modal-content="{true}" class:cds--modal-content="{true}"
class:bx--modal-content--with-form="{hasForm}" class:cds--modal-content--with-form="{hasForm}"
class:bx--modal-scroll-content="{hasScrollingContent}" class:cds--modal-scroll-content="{hasScrollingContent}"
{...$$restProps} {...$$restProps}
> >
<slot /> <slot />
</div> </div>
{#if hasScrollingContent} {#if hasScrollingContent}
<div class:bx--modal-content--overflow-indicator="{true}"></div> <div class:cds--modal-content--overflow-indicator="{true}"></div>
{/if} {/if}

4
src/ComposedModal/ModalFooter.svelte
View file

@ -48,8 +48,8 @@
</script> </script>
<div <div
class:bx--modal-footer="{true}" class:cds--modal-footer="{true}"
class:bx--modal-footer--three-button="{secondaryButtons.length === 2}" class:cds--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:bx--modal-header="{true}" {...$$restProps}> <div class:cds--modal-header="{true}" {...$$restProps}>
{#if label} {#if label}
<h2 <h2
class:bx--modal-header__label="{true}" class:cds--modal-header__label="{true}"
class:bx--type-delta="{true}" class:cds--type-delta="{true}"
class="{labelClass}" class="{labelClass}"
> >
{label} {label}
@ -40,8 +40,8 @@
{/if} {/if}
{#if title} {#if title}
<h3 <h3
class:bx--modal-header__heading="{true}" class:cds--modal-header__heading="{true}"
class:bx--type-beta="{true}" class:cds--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:bx--modal-close="{true}" class:cds--modal-close="{true}"
class="{closeClass}" class="{closeClass}"
on:click on:click
on:click="{closeModal}" on:click="{closeModal}"
> >
<Close <Close
size="{20}" size="{20}"
class="bx--modal-close__icon {closeIconClass}" class="cds--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:bx--content-switcher="{true}" class:cds--content-switcher="{true}"
class:bx--content-switcher--sm="{size === 'sm'}" class:cds--content-switcher--sm="{size === 'sm'}"
class:bx--content-switcher--lg="{size === 'lg' || size === 'xl'}" class:cds--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:bx--content-switcher-btn="{true}" class:cds--content-switcher-btn="{true}"
class:bx--content-switcher--selected="{selected}" class:cds--content-switcher--selected="{selected}"
{...$$restProps} {...$$restProps}
on:click on:click
on:click|preventDefault="{() => { on:click|preventDefault="{() => {
@ -66,7 +66,7 @@
} }
}}" }}"
> >
<span class:bx--content-switcher__label="{true}"> <span class:cds--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:bx--menu="{true}" class:cds--menu="{true}"
class:bx--menu--open="{open}" class:cds--menu--open="{open}"
class:bx--menu--invisible="{open && x === 0 && y === 0}" class:cds--menu--invisible="{open && x === 0 && y === 0}"
class:bx--menu--root="{level === 1}" class:cds--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:bx--menu-divider="{true}"></li> <li role="separator" class:cds--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:bx--menu-option="{true}" class:cds--menu-option="{true}"
class:bx--menu-option--disabled="{true}" class:cds--menu-option--disabled="{true}"
class:bx--menu-option--active="{subOptions && submenuOpen}" class:cds--menu-option--active="{subOptions && submenuOpen}"
class:bx--menu-option--danger="{!subOptions && kind === 'danger'}" class:cds--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('.bx--menu').getAttribute('data-level') === '2'}" ref.closest('.cds--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:bx--menu-option__content="{true}" class:cds--menu-option__content="{true}"
class:bx--menu-option__content--disabled="{disabled}" class:cds--menu-option__content--disabled="{disabled}"
> >
{#if indented} {#if indented}
<div class:bx--menu-option__icon="{true}"> <div class:cds--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:bx--menu-option__label="{true}" title="{labelText}"> <span class:cds--menu-option__label="{true}" title="{labelText}">
<slot name="labelText">{labelText}</slot> <slot name="labelText">{labelText}</slot>
</span> </span>
<div class:bx--menu-option__info="{true}"><CaretRight /></div> <div class:cds--menu-option__info="{true}"><CaretRight /></div>
</div> </div>
<ContextMenu <ContextMenu
@ -265,20 +265,20 @@
</ContextMenu> </ContextMenu>
{:else} {:else}
<div <div
class:bx--menu-option__content="{true}" class:cds--menu-option__content="{true}"
class:bx--menu-option__content--disabled="{disabled}" class:cds--menu-option__content--disabled="{disabled}"
> >
{#if indented} {#if indented}
<div class:bx--menu-option__icon="{true}"> <div class:cds--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:bx--menu-option__label="{true}" title="{labelText}"> <span class:cds--menu-option__label="{true}" title="{labelText}">
<slot name="labelText">{labelText}</slot> <slot name="labelText">{labelText}</slot>
</span> </span>
<div class:bx--menu-option__info="{true}"> <div class:cds--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:bx--copy-btn="{true}" class:cds--copy-btn="{true}"
class:bx--copy="{true}" class:cds--copy="{true}"
class:bx--copy-btn--animating="{animation}" class:cds--copy-btn--animating="{animation}"
class:bx--copy-btn--fade-in="{animation === 'fade-in'}" class:cds--copy-btn--fade-in="{animation === 'fade-in'}"
class:bx--copy-btn--fade-out="{animation === 'fade-out'}" class:cds--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="bx--snippet__icon" /> <Copy class="cds--snippet__icon" />
<span <span
aria-hidden="true" aria-hidden="true"
class:bx--assistive-text="{true}" class:cds--assistive-text="{true}"
class:bx--copy-btn__feedback="{true}" class:cds--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:bx--data-table-header="{true}"> <div class:cds--data-table-header="{true}">
{#if title || $$slots.title} {#if title || $$slots.title}
<h4 class:bx--data-table-header__title="{true}"> <h4 class:cds--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:bx--data-table-header__description="{true}"> <p class:cds--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:bx--table-expand="{true}" class:cds--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:bx--table-expand__button="{true}" class:cds--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="bx--table-expand__svg" /> <ChevronRight class="cds--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:bx--table-column-checkbox="{true}"> <th scope="col" class:cds--table-column-checkbox="{true}">
<InlineCheckbox <InlineCheckbox
bind:ref="{refSelectAll}" bind:ref="{refSelectAll}"
aria-label="Select all rows" aria-label="Select all rows"
@ -375,18 +375,19 @@
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)
? 'bx--data-table--selected' ? 'cds--data-table--selected'
: ''} {expandedRows[row.id] ? 'bx--expandable-row' : ''} {expandable : ''} {expandedRows[row.id]
? 'bx--parent-row' ? 'cds--expandable-row'
: ''} {expandable && parentRowId === row.id : ''} {expandable ? 'cds--parent-row' : ''} {expandable &&
? 'bx--expandable-row--hover' parentRowId === row.id
? '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) =>
/^bx--(overflow-menu|checkbox|radio-button)/.test(name) /^cds--(overflow-menu|checkbox|radio-button)/.test(name)
) )
) { ) {
return; return;
@ -403,7 +404,7 @@
> >
{#if expandable} {#if expandable}
<TableCell <TableCell
class="bx--table-expand" class="cds--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]
@ -413,7 +414,7 @@
{#if !nonExpandableRowIds.includes(row.id)} {#if !nonExpandableRowIds.includes(row.id)}
<button <button
type="button" type="button"
class:bx--table-expand__button="{true}" class:cds--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'}"
@ -430,15 +431,15 @@
}); });
}}" }}"
> >
<ChevronRight class="bx--table-expand__svg" /> <ChevronRight class="cds--table-expand__svg" />
</button> </button>
{/if} {/if}
</TableCell> </TableCell>
{/if} {/if}
{#if selectable} {#if selectable}
<td <td
class:bx--table-column-checkbox="{true}" class:cds--table-column-checkbox="{true}"
class:bx--table-column-radio="{radio}" class:cds--table-column-radio="{radio}"
> >
{#if !nonSelectableRowIds.includes(row.id)} {#if !nonSelectableRowIds.includes(row.id)}
{#if radio} {#if radio}
@ -472,7 +473,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:bx--table-column-menu="{headers[j].columnMenu}"> <td class:cds--table-column-menu="{headers[j].columnMenu}">
<slot <slot
name="cell" name="cell"
row="{row}" row="{row}"
@ -507,7 +508,7 @@
{#if expandable} {#if expandable}
<tr <tr
data-child-row data-child-row
class:bx--expandable-row="{true}" class:cds--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;
@ -521,7 +522,7 @@
<TableCell <TableCell
colspan="{selectable ? headers.length + 2 : headers.length + 1}" colspan="{selectable ? headers.length + 2 : headers.length + 1}"
> >
<div class:bx--child-row-inner-container="{true}"> <div class:cds--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:bx--skeleton="{true}" class:cds--skeleton="{true}"
class:bx--data-table-container="{true}" class:cds--data-table-container="{true}"
{...$$restProps} {...$$restProps}
> >
{#if showHeader} {#if showHeader}
<div class:bx--data-table-header="{true}"> <div class:cds--data-table-header="{true}">
<div class:bx--data-table-header__title="{true}"></div> <div class:cds--data-table-header__title="{true}"></div>
<div class:bx--data-table-header__description="{true}"></div> <div class:cds--data-table-header__description="{true}"></div>
</div> </div>
{/if} {/if}
{#if showToolbar} {#if showToolbar}
<section aria-label="data table toolbar" class:bx--table-toolbar="{true}"> <section aria-label="data table toolbar" class:cds--table-toolbar="{true}">
<div class:bx--toolbar-content="{true}"> <div class:cds--toolbar-content="{true}">
<span <span
class:bx--skeleton="{true}" class:cds--skeleton="{true}"
class:bx--btn="{true}" class:cds--btn="{true}"
class:bx--btn--sm="{true}"></span> class:cds--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:bx--skeleton="{true}" class:cds--skeleton="{true}"
class:bx--data-table="{true}" class:cds--data-table="{true}"
class:bx--data-table--compact="{size === 'compact'}" class:cds--data-table--compact="{size === 'compact'}"
class:bx--data-table--short="{size === 'short'}" class:cds--data-table--short="{size === 'short'}"
class:bx--data-table--tall="{size === 'tall'}" class:cds--data-table--tall="{size === 'tall'}"
class:bx--data-table--zebra="{zebra}" class:cds--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:bx--data-table_inner-container="{true}" {...$$restProps}> <section class:cds--data-table_inner-container="{true}" {...$$restProps}>
<table <table
class:bx--data-table="{true}" class:cds--data-table="{true}"
class:bx--data-table--compact="{size === 'compact'}" class:cds--data-table--compact="{size === 'compact'}"
class:bx--data-table--short="{size === 'short'}" class:cds--data-table--short="{size === 'short'}"
class:bx--data-table--tall="{size === 'tall'}" class:cds--data-table--tall="{size === 'tall'}"
class:bx--data-table--md="{size === 'medium'}" class:cds--data-table--md="{size === 'medium'}"
class:bx--data-table--sort="{sortable}" class:cds--data-table--sort="{sortable}"
class:bx--data-table--zebra="{zebra}" class:cds--data-table--zebra="{zebra}"
class:bx--data-table--static="{useStaticWidth}" class:cds--data-table--static="{useStaticWidth}"
class:bx--data-table--sticky-header="{stickyHeader}" class:cds--data-table--sticky-header="{stickyHeader}"
style="{tableStyle}" style="{tableStyle}"
> >
<slot /> <slot />
@ -43,15 +43,15 @@
</section> </section>
{:else} {:else}
<table <table
class:bx--data-table="{true}" class:cds--data-table="{true}"
class:bx--data-table--compact="{size === 'compact'}" class:cds--data-table--compact="{size === 'compact'}"
class:bx--data-table--short="{size === 'short'}" class:cds--data-table--short="{size === 'short'}"
class:bx--data-table--tall="{size === 'tall'}" class:cds--data-table--tall="{size === 'tall'}"
class:bx--data-table--md="{size === 'medium'}" class:cds--data-table--md="{size === 'medium'}"
class:bx--data-table--sort="{sortable}" class:cds--data-table--sort="{sortable}"
class:bx--data-table--zebra="{zebra}" class:cds--data-table--zebra="{zebra}"
class:bx--data-table--static="{useStaticWidth}" class:cds--data-table--static="{useStaticWidth}"
class:bx--data-table--sticky-header="{stickyHeader}" class:cds--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:bx--data-table-container="{true}" class:cds--data-table-container="{true}"
class:bx--data-table-container--static="{useStaticWidth}" class:cds--data-table-container--static="{useStaticWidth}"
class:bx--data-table--max-width="{stickyHeader}" class:cds--data-table--max-width="{stickyHeader}"
{...$$restProps} {...$$restProps}
> >
{#if title} {#if title}
<div class:bx--data-table-header="{true}"> <div class:cds--data-table-header="{true}">
<h4 class:bx--data-table-header__title="{true}">{title}</h4> <h4 class:cds--data-table-header__title="{true}">{title}</h4>
<p class:bx--data-table-header__description="{true}">{description}</p> <p class:cds--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:bx--table-sort="{true}" class:cds--table-sort="{true}"
class:bx--table-sort--active="{active}" class:cds--table-sort--active="{active}"
class:bx--table-sort--ascending="{active && class:cds--table-sort--ascending="{active &&
sortDirection === 'descending'}" sortDirection === 'descending'}"
on:click on:click
> >
<div class:bx--table-header-label="{true}"> <div class:cds--table-header-label="{true}">
<slot /> <slot />
</div> </div>
<ArrowUp <ArrowUp
size="{20}" size="{20}"
aria-label="{ariaLabel}" aria-label="{ariaLabel}"
class="bx--table-sort__icon" class="cds--table-sort__icon"
/> />
<ArrowsVertical <ArrowsVertical
size="{20}" size="{20}"
aria-label="{ariaLabel}" aria-label="{ariaLabel}"
class="bx--table-sort__icon-unsorted" class="cds--table-sort__icon-unsorted"
/> />
</button> </button>
</th> </th>
@ -74,7 +74,7 @@
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave
> >
<div class:bx--table-header-label="{true}"> <div class:cds--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:bx--table-toolbar="{true}" class:cds--table-toolbar="{true}"
class:bx--table-toolbar--small="{size === 'sm'}" class:cds--table-toolbar--small="{size === 'sm'}"
class:bx--table-toolbar--normal="{size === 'default'}" class:cds--table-toolbar--normal="{size === 'default'}"
style:z-index="{1}" style:z-index="{1}"
{...$$restProps} {...$$restProps}
> >

12
src/DataTable/ToolbarBatchActions.svelte
View file

@ -76,19 +76,19 @@
{#if !overflowVisible} {#if !overflowVisible}
<div <div
class:bx--batch-actions="{true}" class:cds--batch-actions="{true}"
class:bx--batch-actions--active="{showActions}" class:cds--batch-actions--active="{showActions}"
{...$$restProps} {...$$restProps}
> >
<div class:bx--batch-summary="{true}"> <div class:cds--batch-summary="{true}">
<p class:bx--batch-summary__para="{true}"> <p class:cds--batch-summary__para="{true}">
<span> {formatTotalSelected(batchSelectedIds.length)} </span> <span> {formatTotalSelected(batchSelectedIds.length)} </span>
</p> </p>
</div> </div>
<div class:bx--action-list="{true}"> <div class:cds--action-list="{true}">
<slot /> <slot />
<Button <Button
class="bx--batch-summary__cancel" class="cds--batch-summary__cancel"
tabindex="{showActions ? '0' : '-1'}" tabindex="{showActions ? '0' : '-1'}"
on:click="{cancel}" on:click="{cancel}"
> >

2
src/DataTable/ToolbarContent.svelte
View file

@ -1,3 +1,3 @@
<div class:bx--toolbar-content="{true}"> <div class:cds--toolbar-content="{true}">
<slot /> <slot />
</div> </div>

2
src/DataTable/ToolbarMenu.svelte
View file

@ -17,7 +17,7 @@
bind:menuRef bind:menuRef
icon="{Settings}" icon="{Settings}"
{...$$restProps} {...$$restProps}
class="bx--toolbar-action bx--overflow-menu {$$restProps.class}" class="cds--toolbar-action cds--overflow-menu {$$restProps.class}"
flipped flipped
> >
<slot /> <slot />

8
src/DataTable/ToolbarSearch.svelte
View file

@ -84,11 +84,11 @@
$: expanded = !!value.length; $: expanded = !!value.length;
$: classes = [ $: classes = [
expanded && "bx--toolbar-search-container-active", expanded && "cds--toolbar-search-container-active",
persistent persistent
? "bx--toolbar-search-container-persistent" ? "cds--toolbar-search-container-persistent"
: "bx--toolbar-search-container-expandable", : "cds--toolbar-search-container-expandable",
disabled && "bx--toolbar-search-container-disabled", disabled && "cds--toolbar-search-container-disabled",
] ]
.filter(Boolean) .filter(Boolean)
.join(" "); .join(" ");

16
src/DatePicker/DatePicker.svelte
View file

@ -240,7 +240,7 @@
<!-- 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:bx--form-item="{true}" class:cds--form-item="{true}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover
@ -251,13 +251,13 @@
<div <div
bind:this="{datePickerRef}" bind:this="{datePickerRef}"
id="{id}" id="{id}"
class:bx--date-picker="{true}" class:cds--date-picker="{true}"
class:bx--date-picker--short="{short}" class:cds--date-picker--short="{short}"
class:bx--date-picker--light="{light}" class:cds--date-picker--light="{light}"
class:bx--date-picker--simple="{datePickerType === 'simple'}" class:cds--date-picker--simple="{datePickerType === 'simple'}"
class:bx--date-picker--single="{datePickerType === 'single'}" class:cds--date-picker--single="{datePickerType === 'single'}"
class:bx--date-picker--range="{datePickerType === 'range'}" class:cds--date-picker--range="{datePickerType === 'range'}"
class:bx--date-picker--nolabel="{datePickerType === 'range' && class:cds--date-picker--nolabel="{datePickerType === 'range' &&
$labelTextEmpty}" $labelTextEmpty}"
on:keydown="{(e) => { on:keydown="{(e) => {
if (calendar?.isOpen && e.key === 'Escape') { if (calendar?.isOpen && e.key === 'Escape') {

38
src/DatePicker/DatePickerInput.svelte
View file

@ -79,15 +79,15 @@
</script> </script>
<div <div
class:bx--date-picker-container="{true}" class:cds--date-picker-container="{true}"
class:bx--date-picker--nolabel="{!labelText}" class:cds--date-picker--nolabel="{!labelText}"
> >
{#if labelText || $$slots.labelText} {#if labelText || $$slots.labelText}
<label <label
for="{id}" for="{id}"
class:bx--label="{true}" class:cds--label="{true}"
class:bx--visually-hidden="{hideLabel}" class:cds--visually-hidden="{hideLabel}"
class:bx--label--disabled="{disabled}" class:cds--label--disabled="{disabled}"
> >
<slot name="labelText"> <slot name="labelText">
{labelText} {labelText}
@ -95,9 +95,9 @@
</label> </label>
{/if} {/if}
<div <div
class:bx--date-picker-input__wrapper="{true}" class:cds--date-picker-input__wrapper="{true}"
class:bx--date-picker-input__wrapper--invalid="{invalid}" class:cds--date-picker-input__wrapper--invalid="{invalid}"
class:bx--date-picker-input__wrapper--warn="{warn}" class:cds--date-picker-input__wrapper--warn="{warn}"
> >
<input <input
bind:this="{ref}" bind:this="{ref}"
@ -114,10 +114,10 @@
? $inputValueFrom ? $inputValueFrom
: $inputValueTo : $inputValueTo
: $inputValue}" : $inputValue}"
class:bx--date-picker__input="{true}" class:cds--date-picker__input="{true}"
class:bx--date-picker__input--invalid="{invalid}" class:cds--date-picker__input--invalid="{invalid}"
class:bx--date-picker__input--sm="{size === 'sm'}" class:cds--date-picker__input--sm="{size === 'sm'}"
class:bx--date-picker__input--lg="{size === 'lg' || size === 'xl'}" class:cds--date-picker__input--lg="{size === 'lg' || size === 'xl'}"
on:input on:input
on:input="{({ target }) => { on:input="{({ target }) => {
updateValue({ type: 'input', value: target.value }); updateValue({ type: 'input', value: target.value });
@ -140,32 +140,32 @@
/> />
{#if invalid} {#if invalid}
<WarningFilled <WarningFilled
class="bx--date-picker__icon bx--date-picker__icon--invalid" class="cds--date-picker__icon cds--date-picker__icon--invalid"
/> />
{/if} {/if}
{#if !invalid && warn} {#if !invalid && warn}
<WarningAltFilled <WarningAltFilled
class="bx--date-picker__icon bx--date-picker__icon--warn" class="cds--date-picker__icon cds--date-picker__icon--warn"
/> />
{/if} {/if}
{#if $hasCalendar && !invalid && !warn} {#if $hasCalendar && !invalid && !warn}
<Calendar <Calendar
class="bx--date-picker__icon" class="cds--date-picker__icon"
aria-label="{iconDescription}" aria-label="{iconDescription}"
on:click="{openCalendar}" on:click="{openCalendar}"
/> />
{/if} {/if}
</div> </div>
{#if invalid} {#if invalid}
<div class:bx--form-requirement="{true}">{invalidText}</div> <div class:cds--form-requirement="{true}">{invalidText}</div>
{/if} {/if}
{#if !invalid && warn} {#if !invalid && warn}
<div class:bx--form-requirement="{true}">{warnText}</div> <div class:cds--form-requirement="{true}">{warnText}</div>
{/if} {/if}
{#if !invalid && !warn && helperText} {#if !invalid && !warn && helperText}
<div <div
class:bx--form__helper-text="{true}" class:cds--form__helper-text="{true}"
class:bx--form__helper-text--disabled="{disabled}" class:cds--form__helper-text--disabled="{disabled}"
> >
{helperText} {helperText}
</div> </div>

20
src/DatePicker/DatePickerSkeleton.svelte
View file

@ -9,7 +9,7 @@
<!-- 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:bx--form-item="{true}" class:cds--form-item="{true}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover
@ -17,18 +17,18 @@
on:mouseleave on:mouseleave
> >
<div <div
class:bx--date-picker="{true}" class:cds--date-picker="{true}"
class:bx--skeleton="{true}" class:cds--skeleton="{true}"
class:bx--date-picker--range="{true}" class:cds--date-picker--range="{true}"
class:bx--date-picker--short="{!range}" class:cds--date-picker--short="{!range}"
class:bx--date-picker--simple="{!range}" class:cds--date-picker--simple="{!range}"
> >
{#each Array.from({ length: range ? 2 : 1 }, (_, i) => i) as input, i (input)} {#each Array.from({ length: range ? 2 : 1 }, (_, i) => i) as input, i (input)}
<div class:bx--date-picker-container="{true}"> <div class:cds--date-picker-container="{true}">
<label for="{id}" class:bx--label="{true}"></label> <label for="{id}" class:cds--label="{true}"></label>
<div <div
class:bx--date-picker__input="{true}" class:cds--date-picker__input="{true}"
class:bx--skeleton="{true}" class:cds--skeleton="{true}"
></div> ></div>
</div> </div>
{/each} {/each}

12
src/DatePicker/createCalendar.js
View file

@ -11,19 +11,19 @@ function updateClasses(instance) {
selectedDates, selectedDates,
} = instance; } = instance;
calendarContainer.classList.add("bx--date-picker__calendar"); calendarContainer.classList.add("cds--date-picker__calendar");
calendarContainer calendarContainer
.querySelector(".flatpickr-month") .querySelector(".flatpickr-month")
.classList.add("bx--date-picker__month"); .classList.add("cds--date-picker__month");
weekdayContainer.classList.add("bx--date-picker__weekdays"); weekdayContainer.classList.add("cds--date-picker__weekdays");
weekdayContainer.querySelectorAll(".flatpickr-weekday").forEach((node) => { weekdayContainer.querySelectorAll(".flatpickr-weekday").forEach((node) => {
node.classList.add("bx--date-picker__weekday"); node.classList.add("cds--date-picker__weekday");
}); });
daysContainer.classList.add("bx--date-picker__days"); daysContainer.classList.add("cds--date-picker__days");
days.querySelectorAll(".flatpickr-day").forEach((node) => { days.querySelectorAll(".flatpickr-day").forEach((node) => {
node.classList.add("bx--date-picker__day"); node.classList.add("cds--date-picker__day");
if (node.classList.contains("today") && selectedDates.length > 0) { if (node.classList.contains("today") && selectedDates.length > 0) {
node.classList.add("no-border"); node.classList.add("no-border");
} else if (node.classList.contains("today") && selectedDates.length === 0) { } else if (node.classList.contains("today") && selectedDates.length === 0) {

48
src/Dropdown/Dropdown.svelte
View file

@ -174,19 +174,19 @@
<svelte:window on:click="{pageClickHandler}" /> <svelte:window on:click="{pageClickHandler}" />
<div <div
class:bx--dropdown__wrapper="{true}" class:cds--dropdown__wrapper="{true}"
class:bx--list-box__wrapper="{true}" class:cds--list-box__wrapper="{true}"
class:bx--dropdown__wrapper--inline="{inline}" class:cds--dropdown__wrapper--inline="{inline}"
class:bx--list-box__wrapper--inline="{inline}" class:cds--list-box__wrapper--inline="{inline}"
class:bx--dropdown__wrapper--inline--invalid="{inline && invalid}" class:cds--dropdown__wrapper--inline--invalid="{inline && invalid}"
{...$$restProps} {...$$restProps}
> >
{#if titleText} {#if titleText}
<label <label
for="{id}" for="{id}"
class:bx--label="{true}" class:cds--label="{true}"
class:bx--label--disabled="{disabled}" class:cds--label--disabled="{disabled}"
class:bx--visually-hidden="{hideLabel}" class:cds--visually-hidden="{hideLabel}"
> >
{titleText} {titleText}
</label> </label>
@ -197,16 +197,16 @@
size="{size}" size="{size}"
name="{name}" name="{name}"
aria-label="{$$props['aria-label']}" aria-label="{$$props['aria-label']}"
class="bx--dropdown class="cds--dropdown
{direction === 'top' && 'bx--list-box--up'} {direction === 'top' && 'cds--list-box--up'}
{invalid && 'bx--dropdown--invalid'} {invalid && 'cds--dropdown--invalid'}
{!invalid && warn && 'bx--dropdown--warning'} {!invalid && warn && 'cds--dropdown--warning'}
{open && 'bx--dropdown--open'} {open && 'cds--dropdown--open'}
{size === 'sm' && 'bx--dropdown--sm'} {size === 'sm' && 'cds--dropdown--sm'}
{(size === 'lg' || size === 'xl') && 'bx--dropdown--lg'} {(size === 'lg' || size === 'xl') && 'cds--dropdown--lg'}
{inline && 'bx--dropdown--inline'} {inline && 'cds--dropdown--inline'}
{disabled && 'bx--dropdown--disabled'} {disabled && 'cds--dropdown--disabled'}
{light && 'bx--dropdown--light'}" {light && 'cds--dropdown--light'}"
on:click="{({ target }) => { on:click="{({ target }) => {
if (disabled) return; if (disabled) return;
open = ref.contains(target) ? !open : false; open = ref.contains(target) ? !open : false;
@ -220,17 +220,17 @@
warnText="{warnText}" warnText="{warnText}"
> >
{#if invalid} {#if invalid}
<WarningFilled class="bx--list-box__invalid-icon" /> <WarningFilled class="cds--list-box__invalid-icon" />
{/if} {/if}
{#if !invalid && warn} {#if !invalid && warn}
<WarningAltFilled <WarningAltFilled
class="bx--list-box__invalid-icon bx--list-box__invalid-icon--warning" class="cds--list-box__invalid-icon cds--list-box__invalid-icon--warning"
/> />
{/if} {/if}
<button <button
bind:this="{ref}" bind:this="{ref}"
type="button" type="button"
class:bx--list-box__field="{true}" class:cds--list-box__field="{true}"
tabindex="0" tabindex="0"
aria-expanded="{open}" aria-expanded="{open}"
on:keydown="{(e) => { on:keydown="{(e) => {
@ -283,7 +283,7 @@
translateWithId="{translateWithId}" translateWithId="{translateWithId}"
id="{id}" id="{id}"
> >
<span class:bx--list-box__label="{true}"> <span class:cds--list-box__label="{true}">
{#if selectedItem}{itemToString(selectedItem)}{:else}{label}{/if} {#if selectedItem}{itemToString(selectedItem)}{:else}{label}{/if}
</span> </span>
<ListBoxMenuIcon <ListBoxMenuIcon
@ -328,8 +328,8 @@
</ListBox> </ListBox>
{#if !inline && !invalid && !warn && helperText} {#if !inline && !invalid && !warn && helperText}
<div <div
class:bx--form__helper-text="{true}" class:cds--form__helper-text="{true}"
class:bx--form__helper-text--disabled="{disabled}" class:cds--form__helper-text--disabled="{disabled}"
> >
{helperText} {helperText}
</div> </div>

14
src/Dropdown/DropdownSkeleton.svelte
View file

@ -6,18 +6,18 @@
<!-- 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:bx--skeleton="{true}" class:cds--skeleton="{true}"
class:bx--dropdown-v2="{true}" class:cds--dropdown-v2="{true}"
class:bx--list-box="{true}" class:cds--list-box="{true}"
class:bx--form-item="{true}" class:cds--form-item="{true}"
class:bx--list-box--inline="{inline}" class:cds--list-box--inline="{inline}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave
> >
<div role="button" class:bx--list-box__field="{true}"> <div role="button" class:cds--list-box__field="{true}">
<span class:bx--list-box__label="{true}"></span> <span class:cds--list-box__label="{true}"></span>
</div> </div>
</div> </div>

18
src/FileUploader/FileUploader.svelte
View file

@ -108,7 +108,7 @@
<!-- 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:bx--form-item="{true}" class:cds--form-item="{true}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover
@ -117,8 +117,8 @@
> >
{#if labelTitle || $$slots.labelTitle} {#if labelTitle || $$slots.labelTitle}
<p <p
class:bx--file--label="{true}" class:cds--file--label="{true}"
class:bx--label-description--disabled="{disabled}" class:cds--label-description--disabled="{disabled}"
> >
<slot name="labelTitle"> <slot name="labelTitle">
{labelTitle} {labelTitle}
@ -127,8 +127,8 @@
{/if} {/if}
{#if labelDescription || $$slots.labelDescription} {#if labelDescription || $$slots.labelDescription}
<p <p
class:bx--label-description="{true}" class:cds--label-description="{true}"
class:bx--label-description--disabled="{disabled}" class:cds--label-description--disabled="{disabled}"
> >
<slot name="labelDescription"> <slot name="labelDescription">
{labelDescription} {labelDescription}
@ -149,11 +149,11 @@
files = e.detail; files = e.detail;
}}" }}"
/> />
<div class:bx--file-container="{true}"> <div class:cds--file-container="{true}">
{#each files as { name }, i} {#each files as { name }, i}
<span class:bx--file__selected-file="{true}"> <span class:cds--file__selected-file="{true}">
<p class:bx--file-filename="{true}">{name}</p> <p class:cds--file-filename="{true}">{name}</p>
<span class:bx--file__state-container="{true}"> <span class:cds--file__state-container="{true}">
<Filename <Filename
iconDescription="{iconDescription}" iconDescription="{iconDescription}"
status="{status}" status="{status}"

28
src/FileUploader/FileUploaderButton.svelte
View file

@ -72,19 +72,19 @@
aria-disabled="{disabled}" aria-disabled="{disabled}"
for="{id}" for="{id}"
tabindex="{disabled ? '-1' : tabindex}" tabindex="{disabled ? '-1' : tabindex}"
class:bx--btn="{true}" class:cds--btn="{true}"
class:bx--btn--disabled="{disabled}" class:cds--btn--disabled="{disabled}"
class:bx--btn--primary="{kind === 'primary'}" class:cds--btn--primary="{kind === 'primary'}"
class:bx--btn--secondary="{kind === 'secondary'}" class:cds--btn--secondary="{kind === 'secondary'}"
class:bx--btn--tertiary="{kind === 'tertiary'}" class:cds--btn--tertiary="{kind === 'tertiary'}"
class:bx--btn--ghost="{kind === 'ghost'}" class:cds--btn--ghost="{kind === 'ghost'}"
class:bx--btn--danger="{kind === 'danger'}" class:cds--btn--danger="{kind === 'danger'}"
class:bx--btn--danger-tertiary="{kind === 'danger-tertiary'}" class:cds--btn--danger-tertiary="{kind === 'danger-tertiary'}"
class:bx--btn--danger-ghost="{kind === 'danger-ghost'}" class:cds--btn--danger-ghost="{kind === 'danger-ghost'}"
class:bx--btn--sm="{size === 'small'}" class:cds--btn--sm="{size === 'small'}"
class:bx--btn--field="{size === 'field'}" class:cds--btn--field="{size === 'field'}"
class:bx--btn--lg="{size === 'lg'}" class:cds--btn--lg="{size === 'lg'}"
class:bx--btn--xl="{size === 'xl'}" class:cds--btn--xl="{size === 'xl'}"
on:keydown on:keydown
on:keydown="{({ key }) => { on:keydown="{({ key }) => {
if (key === ' ' || key === 'Enter') { if (key === ' ' || key === 'Enter') {
@ -107,7 +107,7 @@
id="{id}" id="{id}"
multiple="{multiple}" multiple="{multiple}"
name="{name}" name="{name}"
class:bx--visually-hidden="{true}" class:cds--visually-hidden="{true}"
{...$$restProps} {...$$restProps}
on:change|stopPropagation="{({ target }) => { on:change|stopPropagation="{({ target }) => {
files = [...target.files]; files = [...target.files];

12
src/FileUploader/FileUploaderDropContainer.svelte
View file

@ -56,7 +56,7 @@
<!-- svelte-ignore a11y-no-static-element-interactions --> <!-- svelte-ignore a11y-no-static-element-interactions -->
<div <div
class:bx--file="{true}" class:cds--file="{true}"
{...$$restProps} {...$$restProps}
on:dragover on:dragover
on:dragover|preventDefault|stopPropagation="{({ dataTransfer }) => { on:dragover|preventDefault|stopPropagation="{({ dataTransfer }) => {
@ -87,8 +87,8 @@
<label <label
for="{id}" for="{id}"
tabindex="{tabindex}" tabindex="{tabindex}"
class:bx--file-browse-btn="{true}" class:cds--file-browse-btn="{true}"
class:bx--file-browse-btn--disabled="{disabled}" class:cds--file-browse-btn--disabled="{disabled}"
on:keydown on:keydown
on:keydown="{({ key }) => { on:keydown="{({ key }) => {
if (key === ' ' || key === 'Enter') { if (key === ' ' || key === 'Enter') {
@ -98,8 +98,8 @@
> >
<div <div
role="{role}" role="{role}"
class:bx--file__drop-container="{true}" class:cds--file__drop-container="{true}"
class:bx--file__drop-container--drag-over="{over}" class:cds--file__drop-container--drag-over="{over}"
> >
<slot name="labelText"> <slot name="labelText">
{labelText} {labelText}
@ -115,7 +115,7 @@
accept="{accept}" accept="{accept}"
name="{name}" name="{name}"
multiple="{multiple}" multiple="{multiple}"
class:bx--file-input="{true}" class:cds--file-input="{true}"
on:change="{({ target }) => { on:change="{({ target }) => {
files = validateFiles([...target.files]); files = validateFiles([...target.files]);
dispatch('add', files); dispatch('add', files);

18
src/FileUploader/FileUploaderItem.svelte
View file

@ -43,17 +43,17 @@
<!-- svelte-ignore a11y-no-static-element-interactions --> <!-- svelte-ignore a11y-no-static-element-interactions -->
<span <span
id="{id}" id="{id}"
class:bx--file__selected-file="{true}" class:cds--file__selected-file="{true}"
class:bx--file__selected-file--invalid="{invalid}" class:cds--file__selected-file--invalid="{invalid}"
class:bx--file__selected-file--md="{size === 'md' || size === 'field'}" class:cds--file__selected-file--md="{size === 'md' || size === 'field'}"
class:bx--file__selected-file--sm="{size === 'sm' || size === 'small'}" class:cds--file__selected-file--sm="{size === 'sm' || size === 'small'}"
{...$$restProps} {...$$restProps}
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave
> >
<p class:bx--file-filename="{true}">{name}</p> <p class:cds--file-filename="{true}">{name}</p>
<span class:bx--file__state-container="{true}"> <span class:cds--file__state-container="{true}">
<Filename <Filename
on:keydown="{({ key }) => { on:keydown="{({ key }) => {
if (key === ' ' || key === 'Enter') { if (key === ' ' || key === 'Enter') {
@ -69,10 +69,10 @@
/> />
</span> </span>
{#if invalid && errorSubject} {#if invalid && errorSubject}
<div class:bx--form-requirement="{true}"> <div class:cds--form-requirement="{true}">
<div class:bx--form-requirement__title="{true}">{errorSubject}</div> <div class:cds--form-requirement__title="{true}">{errorSubject}</div>
{#if errorBody} {#if errorBody}
<p class:bx--form-requirement__supplement="{true}">{errorBody}</p> <p class:cds--form-requirement__supplement="{true}">{errorBody}</p>
{/if} {/if}
</div> </div>
{/if} {/if}

4
src/FileUploader/FileUploaderSkeleton.svelte
View file

@ -6,7 +6,7 @@
<!-- 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:bx--form-item="{true}" class:cds--form-item="{true}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover
@ -14,6 +14,6 @@
on:mouseleave on:mouseleave
> >
<SkeletonText heading width="100px" /> <SkeletonText heading width="100px" />
<SkeletonText width="225px" class="bx--label-description" /> <SkeletonText width="225px" class="cds--label-description" />
<ButtonSkeleton /> <ButtonSkeleton />
</div> </div>

6
src/FileUploader/Filename.svelte
View file

@ -32,11 +32,11 @@
{#if status === "edit"} {#if status === "edit"}
{#if invalid} {#if invalid}
<WarningFilled class="bx--file-invalid" /> <WarningFilled class="cds--file-invalid" />
{/if} {/if}
<button <button
aria-label="{iconDescription}" aria-label="{iconDescription}"
class:bx--file-close="{true}" class:cds--file-close="{true}"
type="button" type="button"
tabindex="0" tabindex="0"
{...$$restProps} {...$$restProps}
@ -51,7 +51,7 @@
<CheckmarkFilled <CheckmarkFilled
aria-label="{iconDescription}" aria-label="{iconDescription}"
title="{iconDescription}" title="{iconDescription}"
class="bx--file-complete" class="cds--file-complete"
{...$$restProps} {...$$restProps}
/> />
{/if} {/if}

2
src/FluidForm/FluidForm.svelte
View file

@ -11,7 +11,7 @@
<Form <Form
{...$$restProps} {...$$restProps}
class="bx--form--fluid {$$restProps.class}" class="cds--form--fluid {$$restProps.class}"
on:click on:click
on:keydown on:keydown
on:mouseover on:mouseover

2
src/Form/Form.svelte
View file

@ -6,7 +6,7 @@
<!-- 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 -->
<form <form
class:bx--form="{true}" class:cds--form="{true}"
bind:this="{ref}" bind:this="{ref}"
{...$$restProps} {...$$restProps}
on:click on:click

8
src/FormGroup/FormGroup.svelte
View file

@ -22,8 +22,8 @@
<!-- svelte-ignore a11y-no-noninteractive-element-interactions --> <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<fieldset <fieldset
data-invalid="{invalid || undefined}" data-invalid="{invalid || undefined}"
class:bx--fieldset="{true}" class:cds--fieldset="{true}"
class:bx--fieldset--no-margin="{noMargin}" class:cds--fieldset--no-margin="{noMargin}"
aria-labelledby="{$$restProps['aria-labelledby'] || legendId}" aria-labelledby="{$$restProps['aria-labelledby'] || legendId}"
{...$$restProps} {...$$restProps}
on:click on:click
@ -33,12 +33,12 @@
> >
{#if legendText} {#if legendText}
<legend <legend
class:bx--label="{true}" class:cds--label="{true}"
id="{legendId || $$restProps['aria-labelledby']}">{legendText}</legend id="{legendId || $$restProps['aria-labelledby']}">{legendText}</legend
> >
{/if} {/if}
<slot /> <slot />
{#if message} {#if message}
<div class:bx--form__requirement="{true}">{messageText}</div> <div class:cds--form__requirement="{true}">{messageText}</div>
{/if} {/if}
</fieldset> </fieldset>

2
src/FormItem/FormItem.svelte
View file

@ -1,7 +1,7 @@
<!-- 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:bx--form-item="{true}" class:cds--form-item="{true}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover

2
src/FormLabel/FormLabel.svelte
View file

@ -6,7 +6,7 @@
<!-- 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 -->
<label <label
class:bx--label="{true}" class:cds--label="{true}"
for="{id}" for="{id}"
{...$$restProps} {...$$restProps}
on:click on:click

22
src/Grid/Column.svelte
View file

@ -72,20 +72,20 @@
const name = breakpoints[i]; const name = breakpoints[i];
if (breakpoint === true) { if (breakpoint === true) {
return `bx--col-${name}`; return `cds--col-${name}`;
} else if (typeof breakpoint === "number") { } else if (typeof breakpoint === "number") {
return `bx--col-${name}-${breakpoint}`; return `cds--col-${name}-${breakpoint}`;
} else if (typeof breakpoint === "object") { } else if (typeof breakpoint === "object") {
let bp = []; let bp = [];
if (typeof breakpoint.span === "number") { if (typeof breakpoint.span === "number") {
bp = [...bp, `bx--col-${name}-${breakpoint.span}`]; bp = [...bp, `cds--col-${name}-${breakpoint.span}`];
} else if (breakpoint.span === true) { } else if (breakpoint.span === true) {
bp = [...bp, `bx--col-${name}`]; bp = [...bp, `cds--col-${name}`];
} }
if (typeof breakpoint.offset === "number") { if (typeof breakpoint.offset === "number") {
bp = [...bp, `bx--offset-${name}-${breakpoint.offset}`]; bp = [...bp, `cds--offset-${name}-${breakpoint.offset}`];
} }
return bp.join(" "); return bp.join(" ");
@ -98,12 +98,12 @@
class: [ class: [
$$restProps.class, $$restProps.class,
columnClass, columnClass,
!columnClass && "bx--col", !columnClass && "cds--col",
noGutter && "bx--no-gutter", noGutter && "cds--no-gutter",
noGutterLeft && "bx--no-gutter--left", noGutterLeft && "cds--no-gutter--left",
noGutterRight && "bx--no-gutter--right", noGutterRight && "cds--no-gutter--right",
aspectRatio && `bx--aspect-ratio bx--aspect-ratio--${aspectRatio}`, aspectRatio && `cds--aspect-ratio cds--aspect-ratio--${aspectRatio}`,
padding && "bx--col-padding", padding && "cds--col-padding",
] ]
.filter(Boolean) .filter(Boolean)
.join(" "), .join(" "),

16
src/Grid/Grid.svelte
View file

@ -35,14 +35,14 @@
...$$restProps, ...$$restProps,
class: [ class: [
$$restProps.class, $$restProps.class,
"bx--grid", "cds--grid",
condensed && "bx--grid--condensed", condensed && "cds--grid--condensed",
narrow && "bx--grid--narrow", narrow && "cds--grid--narrow",
fullWidth && "bx--grid--full-width", fullWidth && "cds--grid--full-width",
noGutter && "bx--no-gutter", noGutter && "cds--no-gutter",
noGutterLeft && "bx--no-gutter--left", noGutterLeft && "cds--no-gutter--left",
noGutterRight && "bx--no-gutter--right", noGutterRight && "cds--no-gutter--right",
padding && "bx--row-padding", padding && "cds--row-padding",
] ]
.filter(Boolean) .filter(Boolean)
.join(" "), .join(" "),

14
src/Grid/Row.svelte
View file

@ -32,13 +32,13 @@
...$$restProps, ...$$restProps,
class: [ class: [
$$restProps.class, $$restProps.class,
"bx--row", "cds--row",
condensed && "bx--row--condensed", condensed && "cds--row--condensed",
narrow && "bx--row--narrow", narrow && "cds--row--narrow",
noGutter && "bx--no-gutter", noGutter && "cds--no-gutter",
noGutterLeft && "bx--no-gutter--left", noGutterLeft && "cds--no-gutter--left",
noGutterRight && "bx--no-gutter--right", noGutterRight && "cds--no-gutter--right",
padding && "bx--row-padding", padding && "cds--row-padding",
] ]
.filter(Boolean) .filter(Boolean)
.join(" "), .join(" "),

10
src/InlineLoading/InlineLoading.svelte
View file

@ -48,7 +48,7 @@
<!-- 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:bx--inline-loading="{true}" class:cds--inline-loading="{true}"
aria-live="assertive" aria-live="assertive"
{...$$restProps} {...$$restProps}
on:click on:click
@ -56,15 +56,15 @@
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave
> >
<div class:bx--inline-loading__animation="{true}"> <div class:cds--inline-loading__animation="{true}">
{#if status === "error"} {#if status === "error"}
<ErrorFilled <ErrorFilled
class="bx--inline-loading--error" class="cds--inline-loading--error"
title="{iconDescription || status}" title="{iconDescription || status}"
/> />
{:else if status === "finished"} {:else if status === "finished"}
<CheckmarkFilled <CheckmarkFilled
class="bx--inline-loading__checkmark-container" class="cds--inline-loading__checkmark-container"
title="{iconDescription || status}" title="{iconDescription || status}"
/> />
{:else if status === "inactive" || status === "active"} {:else if status === "inactive" || status === "active"}
@ -77,6 +77,6 @@
{/if} {/if}
</div> </div>
{#if description} {#if description}
<div class:bx--inline-loading__text="{true}">{description}</div> <div class:cds--inline-loading__text="{true}">{description}</div>
{/if} {/if}
</div> </div>

24
src/Link/Link.svelte
View file

@ -38,10 +38,10 @@
<!-- svelte-ignore a11y-no-noninteractive-element-interactions --> <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<p <p
bind:this="{ref}" bind:this="{ref}"
class:bx--link="{true}" class:cds--link="{true}"
class:bx--link--disabled="{disabled}" class:cds--link--disabled="{disabled}"
class:bx--link--inline="{inline}" class:cds--link--inline="{inline}"
class:bx--link--visited="{visited}" class:cds--link--visited="{visited}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover
@ -50,7 +50,7 @@
> >
<slot /> <slot />
{#if !inline && ($$slots.icon || icon)} {#if !inline && ($$slots.icon || icon)}
<div class:bx--link__icon="{true}"> <div class:cds--link__icon="{true}">
<slot name="icon"> <slot name="icon">
<svelte:component this="{icon}" /> <svelte:component this="{icon}" />
</slot> </slot>
@ -60,12 +60,12 @@
{:else} {:else}
<a <a
bind:this="{ref}" bind:this="{ref}"
class:bx--link="{true}" class:cds--link="{true}"
class:bx--link--disabled="{disabled}" class:cds--link--disabled="{disabled}"
class:bx--link--inline="{inline}" class:cds--link--inline="{inline}"
class:bx--link--visited="{visited}" class:cds--link--visited="{visited}"
class:bx--link--sm="{size === 'sm'}" class:cds--link--sm="{size === 'sm'}"
class:bx--link--lg="{size === 'lg'}" class:cds--link--lg="{size === 'lg'}"
rel="{$$restProps.target === '_blank' ? 'noopener noreferrer' : undefined}" rel="{$$restProps.target === '_blank' ? 'noopener noreferrer' : undefined}"
href="{href}" href="{href}"
{...$$restProps} {...$$restProps}
@ -76,7 +76,7 @@
> >
<slot /> <slot />
{#if !inline && ($$slots.icon || icon)} {#if !inline && ($$slots.icon || icon)}
<div class:bx--link__icon="{true}"> <div class:cds--link__icon="{true}">
<slot name="icon"> <slot name="icon">
<svelte:component this="{icon}" /> <svelte:component this="{icon}" />
</slot> </slot>

20
src/ListBox/ListBox.svelte
View file

@ -37,14 +37,14 @@
role="listbox" role="listbox"
tabindex="-1" tabindex="-1"
data-invalid="{invalid || undefined}" data-invalid="{invalid || undefined}"
class:bx--list-box="{true}" class:cds--list-box="{true}"
class:bx--list-box--sm="{size === 'sm'}" class:cds--list-box--sm="{size === 'sm'}"
class:bx--list-box--lg="{size === 'lg' || size === 'xl'}" class:cds--list-box--lg="{size === 'lg' || size === 'xl'}"
class:bx--list-box--inline="{type === 'inline'}" class:cds--list-box--inline="{type === 'inline'}"
class:bx--list-box--disabled="{disabled}" class:cds--list-box--disabled="{disabled}"
class:bx--list-box--expanded="{open}" class:cds--list-box--expanded="{open}"
class:bx--list-box--light="{light}" class:cds--list-box--light="{light}"
class:bx--list-box--warning="{!invalid && warn}" class:cds--list-box--warning="{!invalid && warn}"
{...$$restProps} {...$$restProps}
on:keydown on:keydown
on:keydown="{(e) => { on:keydown="{(e) => {
@ -57,8 +57,8 @@
<slot /> <slot />
</div> </div>
{#if invalid} {#if invalid}
<div class:bx--form-requirement="{true}">{invalidText}</div> <div class:cds--form-requirement="{true}">{invalidText}</div>
{/if} {/if}
{#if !invalid && warn} {#if !invalid && warn}
<div class:bx--form-requirement="{true}">{warnText}</div> <div class:cds--form-requirement="{true}">{warnText}</div>
{/if} {/if}

2
src/ListBox/ListBoxField.svelte
View file

@ -55,7 +55,7 @@
? translateWithId('close') ? translateWithId('close')
: translateWithId('open')}" : translateWithId('open')}"
tabindex="{disabled ? '-1' : tabindex}" tabindex="{disabled ? '-1' : tabindex}"
class:bx--list-box__field="{true}" class:cds--list-box__field="{true}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover

2
src/ListBox/ListBoxMenu.svelte
View file

@ -10,7 +10,7 @@
bind:this="{ref}" bind:this="{ref}"
role="listbox" role="listbox"
id="menu-{id}" id="menu-{id}"
class:bx--list-box__menu="{true}" class:cds--list-box__menu="{true}"
{...$$restProps} {...$$restProps}
on:scroll on:scroll
> >

4
src/ListBox/ListBoxMenuIcon.svelte
View file

@ -29,8 +29,8 @@
<!-- svelte-ignore a11y-no-static-element-interactions --> <!-- svelte-ignore a11y-no-static-element-interactions -->
<div <div
class:bx--list-box__menu-icon="{true}" class:cds--list-box__menu-icon="{true}"
class:bx--list-box__menu-icon--open="{open}" class:cds--list-box__menu-icon--open="{open}"
{...$$restProps} {...$$restProps}
on:click|preventDefault on:click|preventDefault
> >

8
src/ListBox/ListBoxMenuItem.svelte
View file

@ -21,9 +21,9 @@
<div <div
role="option" role="option"
tabindex="-1" tabindex="-1"
class:bx--list-box__menu-item="{true}" class:cds--list-box__menu-item="{true}"
class:bx--list-box__menu-item--active="{active}" class:cds--list-box__menu-item--active="{active}"
class:bx--list-box__menu-item--highlighted="{highlighted || active}" class:cds--list-box__menu-item--highlighted="{highlighted || active}"
aria-selected="{active}" aria-selected="{active}"
disabled="{disabled ? true : undefined}" disabled="{disabled ? true : undefined}"
{...$$restProps} {...$$restProps}
@ -34,7 +34,7 @@
<div <div
bind:this="{ref}" bind:this="{ref}"
title="{title}" title="{title}"
class:bx--list-box__menu-item__option="{true}" class:cds--list-box__menu-item__option="{true}"
> >
<slot /> <slot />
</div> </div>

18
src/ListBox/ListBoxSelection.svelte
View file

@ -51,19 +51,19 @@
{#if selectionCount !== undefined} {#if selectionCount !== undefined}
<div <div
class:bx--tag="{true}" class:cds--tag="{true}"
class:bx--tag--filter="{true}" class:cds--tag--filter="{true}"
class:bx--tag--high-contrast="{true}" class:cds--tag--high-contrast="{true}"
class:bx--tag--disabled="{disabled}" class:cds--tag--disabled="{disabled}"
> >
<span class:bx--tag__label="{true}" title="{selectionCount}"> <span class:cds--tag__label="{true}" title="{selectionCount}">
{selectionCount} {selectionCount}
</span> </span>
<div <div
bind:this="{ref}" bind:this="{ref}"
role="button" role="button"
tabindex="{disabled ? -1 : 0}" tabindex="{disabled ? -1 : 0}"
class:bx--tag__close-icon="{true}" class:cds--tag__close-icon="{true}"
on:click|preventDefault|stopPropagation="{(e) => { on:click|preventDefault|stopPropagation="{(e) => {
if (!disabled) { if (!disabled) {
dispatch('clear', e); dispatch('clear', e);
@ -88,9 +88,9 @@
aria-label="{description}" aria-label="{description}"
title="{description}" title="{description}"
tabindex="{disabled ? '-1' : '0'}" tabindex="{disabled ? '-1' : '0'}"
class:bx--list-box__selection="{true}" class:cds--list-box__selection="{true}"
class:bx--tag--filter="{selectionCount}" class:cds--tag--filter="{selectionCount}"
class:bx--list-box__selection--multi="{selectionCount}" class:cds--list-box__selection--multi="{selectionCount}"
{...$$restProps} {...$$restProps}
on:click|preventDefault|stopPropagation="{(e) => { on:click|preventDefault|stopPropagation="{(e) => {
if (!disabled) { if (!disabled) {

2
src/ListItem/ListItem.svelte
View file

@ -1,7 +1,7 @@
<!-- 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:bx--list__item="{true}" class:cds--list__item="{true}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover

28
src/Loading/Loading.svelte
View file

@ -16,28 +16,28 @@
{#if withOverlay} {#if withOverlay}
<div <div
class:bx--loading-overlay="{true}" class:cds--loading-overlay="{true}"
class:bx--loading-overlay--stop="{!active}" class:cds--loading-overlay--stop="{!active}"
{...$$restProps} {...$$restProps}
> >
<div <div
aria-atomic="true" aria-atomic="true"
aria-live="{active ? 'assertive' : 'off'}" aria-live="{active ? 'assertive' : 'off'}"
class:bx--loading="{true}" class:cds--loading="{true}"
class:bx--loading--small="{small}" class:cds--loading--small="{small}"
class:bx--loading--stop="{!active}" class:cds--loading--stop="{!active}"
> >
<svg class:bx--loading__svg="{true}" viewBox="0 0 100 100"> <svg class:cds--loading__svg="{true}" viewBox="0 0 100 100">
<title>{description}</title> <title>{description}</title>
{#if small} {#if small}
<circle <circle
class:bx--loading__background="{true}" class:cds--loading__background="{true}"
cx="50%" cx="50%"
cy="50%" cy="50%"
r="{spinnerRadius}"></circle> r="{spinnerRadius}"></circle>
{/if} {/if}
<circle <circle
class:bx--loading__stroke="{true}" class:cds--loading__stroke="{true}"
cx="50%" cx="50%"
cy="50%" cy="50%"
r="{spinnerRadius}"></circle> r="{spinnerRadius}"></circle>
@ -48,22 +48,22 @@
<div <div
aria-atomic="true" aria-atomic="true"
aria-live="{active ? 'assertive' : 'off'}" aria-live="{active ? 'assertive' : 'off'}"
class:bx--loading="{true}" class:cds--loading="{true}"
class:bx--loading--small="{small}" class:cds--loading--small="{small}"
class:bx--loading--stop="{!active}" class:cds--loading--stop="{!active}"
{...$$restProps} {...$$restProps}
> >
<svg class:bx--loading__svg="{true}" viewBox="0 0 100 100"> <svg class:cds--loading__svg="{true}" viewBox="0 0 100 100">
<title>{description}</title> <title>{description}</title>
{#if small} {#if small}
<circle <circle
class:bx--loading__background="{true}" class:cds--loading__background="{true}"
cx="50%" cx="50%"
cy="50%" cy="50%"
r="{spinnerRadius}"></circle> r="{spinnerRadius}"></circle>
{/if} {/if}
<circle <circle
class:bx--loading__stroke="{true}" class:cds--loading__stroke="{true}"
cx="50%" cx="50%"
cy="50%" cy="50%"
r="{spinnerRadius}"></circle> r="{spinnerRadius}"></circle>

54
src/Modal/Modal.svelte
View file

@ -125,9 +125,9 @@
} }
}); });
$: modalLabelId = `bx--modal-header__label--modal-${id}`; $: modalLabelId = `cds--modal-header__label--modal-${id}`;
$: modalHeadingId = `bx--modal-header__heading--modal-${id}`; $: modalHeadingId = `cds--modal-header__heading--modal-${id}`;
$: modalBodyId = `bx--modal-body--${id}`; $: modalBodyId = `cds--modal-body--${id}`;
$: ariaLabel = $: ariaLabel =
modalLabel || $$props["aria-label"] || modalAriaLabel || modalHeading; modalLabel || $$props["aria-label"] || modalAriaLabel || modalHeading;
</script> </script>
@ -137,10 +137,10 @@
bind:this="{ref}" bind:this="{ref}"
role="presentation" role="presentation"
id="{id}" id="{id}"
class:bx--modal="{true}" class:cds--modal="{true}"
class:bx--modal-tall="{!passiveModal}" class:cds--modal-tall="{!passiveModal}"
class:is-visible="{open}" class:is-visible="{open}"
class:bx--modal--danger="{danger}" class:cds--modal--danger="{danger}"
{...$$restProps} {...$$restProps}
on:keydown on:keydown
on:keydown="{(e) => { on:keydown="{(e) => {
@ -199,34 +199,38 @@
aria-describedby="{alert && !passiveModal ? modalBodyId : undefined}" aria-describedby="{alert && !passiveModal ? modalBodyId : undefined}"
aria-modal="true" aria-modal="true"
aria-label="{ariaLabel}" aria-label="{ariaLabel}"
class:bx--modal-container="{true}" class:cds--modal-container="{true}"
class:bx--modal-container--xs="{size === 'xs'}" class:cds--modal-container--xs="{size === 'xs'}"
class:bx--modal-container--sm="{size === 'sm'}" class:cds--modal-container--sm="{size === 'sm'}"
class:bx--modal-container--lg="{size === 'lg'}" class:cds--modal-container--lg="{size === 'lg'}"
on:click="{() => { on:click="{() => {
didClickInnerModal = true; didClickInnerModal = true;
}}" }}"
> >
<div class:bx--modal-header="{true}"> <div class:cds--modal-header="{true}">
{#if passiveModal} {#if passiveModal}
<button <button
bind:this="{buttonRef}" bind:this="{buttonRef}"
type="button" type="button"
aria-label="{iconDescription}" aria-label="{iconDescription}"
class:bx--modal-close="{true}" class:cds--modal-close="{true}"
on:click="{() => { on:click="{() => {
open = false; open = false;
}}" }}"
> >
<Close size="{20}" class="bx--modal-close__icon" aria-hidden="true" /> <Close
size="{20}"
class="cds--modal-close__icon"
aria-hidden="true"
/>
</button> </button>
{/if} {/if}
{#if modalLabel} {#if modalLabel}
<h2 id="{modalLabelId}" class:bx--modal-header__label="{true}"> <h2 id="{modalLabelId}" class:cds--modal-header__label="{true}">
<slot name="label">{modalLabel}</slot> <slot name="label">{modalLabel}</slot>
</h2> </h2>
{/if} {/if}
<h3 id="{modalHeadingId}" class:bx--modal-header__heading="{true}"> <h3 id="{modalHeadingId}" class:cds--modal-header__heading="{true}">
<slot name="heading">{modalHeading}</slot> <slot name="heading">{modalHeading}</slot>
</h3> </h3>
{#if !passiveModal} {#if !passiveModal}
@ -234,21 +238,25 @@
bind:this="{buttonRef}" bind:this="{buttonRef}"
type="button" type="button"
aria-label="{iconDescription}" aria-label="{iconDescription}"
class:bx--modal-close="{true}" class:cds--modal-close="{true}"
on:click="{() => { on:click="{() => {
open = false; open = false;
}}" }}"
> >
<Close size="{20}" class="bx--modal-close__icon" aria-hidden="true" /> <Close
size="{20}"
class="cds--modal-close__icon"
aria-hidden="true"
/>
</button> </button>
{/if} {/if}
</div> </div>
<!-- svelte-ignore a11y-no-noninteractive-tabindex --> <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<div <div
id="{modalBodyId}" id="{modalBodyId}"
class:bx--modal-content="{true}" class:cds--modal-content="{true}"
class:bx--modal-content--with-form="{hasForm}" class:cds--modal-content--with-form="{hasForm}"
class:bx--modal-scroll-content="{hasScrollingContent}" class:cds--modal-scroll-content="{hasScrollingContent}"
tabindex="{hasScrollingContent ? '0' : undefined}" tabindex="{hasScrollingContent ? '0' : undefined}"
role="{hasScrollingContent ? 'region' : undefined}" role="{hasScrollingContent ? 'region' : undefined}"
aria-label="{hasScrollingContent ? ariaLabel : undefined}" aria-label="{hasScrollingContent ? ariaLabel : undefined}"
@ -257,12 +265,12 @@
<slot /> <slot />
</div> </div>
{#if hasScrollingContent} {#if hasScrollingContent}
<div class:bx--modal-content--overflow-indicator="{true}"></div> <div class:cds--modal-content--overflow-indicator="{true}"></div>
{/if} {/if}
{#if !passiveModal} {#if !passiveModal}
<div <div
class:bx--modal-footer="{true}" class:cds--modal-footer="{true}"
class:bx--modal-footer--three-button="{secondaryButtons.length === 2}" class:cds--modal-footer--three-button="{secondaryButtons.length === 2}"
> >
{#if secondaryButtons.length > 0} {#if secondaryButtons.length > 0}
{#each secondaryButtons as button} {#each secondaryButtons as button}

2
src/Modal/modalStore.js
View file

@ -32,5 +32,5 @@ export const trackModal = (openStore) =>
modalsOpen.subscribe((openCount) => { modalsOpen.subscribe((openCount) => {
if (typeof document !== "undefined") if (typeof document !== "undefined")
document.body.classList.toggle("bx--body--with-modal-open", openCount > 0); document.body.classList.toggle("cds--body--with-modal-open", openCount > 0);
}); });

46
src/MultiSelect/MultiSelect.svelte
View file

@ -287,18 +287,18 @@
<div <div
bind:this="{multiSelectRef}" bind:this="{multiSelectRef}"
class:bx--multi-select__wrapper="{true}" class:cds--multi-select__wrapper="{true}"
class:bx--list-box__wrapper="{true}" class:cds--list-box__wrapper="{true}"
class:bx--multi-select__wrapper--inline="{inline}" class:cds--multi-select__wrapper--inline="{inline}"
class:bx--list-box__wrapper--inline="{inline}" class:cds--list-box__wrapper--inline="{inline}"
class:bx--multi-select__wrapper--inline--invalid="{inline && invalid}" class:cds--multi-select__wrapper--inline--invalid="{inline && invalid}"
> >
{#if titleText || $$slots.titleText} {#if titleText || $$slots.titleText}
<label <label
for="{id}" for="{id}"
class:bx--label="{true}" class:cds--label="{true}"
class:bx--label--disabled="{disabled}" class:cds--label--disabled="{disabled}"
class:bx--visually-hidden="{hideLabel}" class:cds--visually-hidden="{hideLabel}"
> >
<slot name="titleText"> <slot name="titleText">
{titleText} {titleText}
@ -315,19 +315,19 @@
size="{size}" size="{size}"
warn="{warn}" warn="{warn}"
warnText="{warnText}" warnText="{warnText}"
class="bx--multi-select {direction === 'top' && class="cds--multi-select {direction === 'top' &&
'bx--list-box--up'} {filterable && 'bx--combo-box'} 'cds--list-box--up'} {filterable && 'cds--combo-box'}
{filterable && 'bx--multi-select--filterable'} {filterable && 'cds--multi-select--filterable'}
{invalid && 'bx--multi-select--invalid'} {invalid && 'cds--multi-select--invalid'}
{inline && 'bx--multi-select--inline'} {inline && 'cds--multi-select--inline'}
{checked.length > 0 && 'bx--multi-select--selected'}" {checked.length > 0 && 'cds--multi-select--selected'}"
> >
{#if invalid} {#if invalid}
<WarningFilled class="bx--list-box__invalid-icon" /> <WarningFilled class="cds--list-box__invalid-icon" />
{/if} {/if}
{#if !invalid && warn} {#if !invalid && warn}
<WarningAltFilled <WarningAltFilled
class="bx--list-box__invalid-icon bx--list-box__invalid-icon--warning" class="cds--list-box__invalid-icon cds--list-box__invalid-icon--warning"
/> />
{/if} {/if}
<ListBoxField <ListBoxField
@ -417,9 +417,9 @@
aria-activedescendant="{highlightedId}" aria-activedescendant="{highlightedId}"
aria-disabled="{disabled}" aria-disabled="{disabled}"
aria-controls="{menuId}" aria-controls="{menuId}"
class:bx--text-input="{true}" class:cds--text-input="{true}"
class:bx--text-input--empty="{value === ''}" class:cds--text-input--empty="{value === ''}"
class:bx--text-input--light="{light}" class:cds--text-input--light="{light}"
on:keydown on:keydown
on:keydown|stopPropagation="{({ key }) => { on:keydown|stopPropagation="{({ key }) => {
if (key === 'Enter') { if (key === 'Enter') {
@ -455,7 +455,7 @@
name="{name}" name="{name}"
/> />
{#if invalid} {#if invalid}
<WarningFilled class="bx--list-box__invalid-icon" /> <WarningFilled class="cds--list-box__invalid-icon" />
{/if} {/if}
{#if value} {#if value}
<ListBoxSelection <ListBoxSelection
@ -479,7 +479,7 @@
/> />
{/if} {/if}
{#if !filterable} {#if !filterable}
<span class:bx--list-box__label="{true}">{label}</span> <span class:cds--list-box__label="{true}">{label}</span>
<ListBoxMenuIcon open="{open}" translateWithId="{translateWithId}" /> <ListBoxMenuIcon open="{open}" translateWithId="{translateWithId}" />
{/if} {/if}
</ListBoxField> </ListBoxField>
@ -537,8 +537,8 @@
</ListBox> </ListBox>
{#if !inline && !invalid && !warn && helperText} {#if !inline && !invalid && !warn && helperText}
<div <div
class:bx--form__helper-text="{true}" class:cds--form__helper-text="{true}"
class:bx--form__helper-text--disabled="{disabled}" class:cds--form__helper-text--disabled="{disabled}"
> >
{helperText} {helperText}
</div> </div>

26
src/Notification/InlineNotification.svelte
View file

@ -72,32 +72,32 @@
<div <div
role="{role}" role="{role}"
kind="{kind}" kind="{kind}"
class:bx--inline-notification="{true}" class:cds--inline-notification="{true}"
class:bx--inline-notification--low-contrast="{lowContrast}" class:cds--inline-notification--low-contrast="{lowContrast}"
class:bx--inline-notification--hide-close-button="{hideCloseButton}" class:cds--inline-notification--hide-close-button="{hideCloseButton}"
class:bx--inline-notification--error="{kind === 'error'}" class:cds--inline-notification--error="{kind === 'error'}"
class:bx--inline-notification--info="{kind === 'info'}" class:cds--inline-notification--info="{kind === 'info'}"
class:bx--inline-notification--info-square="{kind === 'info-square'}" class:cds--inline-notification--info-square="{kind === 'info-square'}"
class:bx--inline-notification--success="{kind === 'success'}" class:cds--inline-notification--success="{kind === 'success'}"
class:bx--inline-notification--warning="{kind === 'warning'}" class:cds--inline-notification--warning="{kind === 'warning'}"
class:bx--inline-notification--warning-alt="{kind === 'warning-alt'}" class:cds--inline-notification--warning-alt="{kind === 'warning-alt'}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave
> >
<div class:bx--inline-notification__details="{true}"> <div class:cds--inline-notification__details="{true}">
<NotificationIcon <NotificationIcon
notificationType="inline" notificationType="inline"
kind="{kind}" kind="{kind}"
iconDescription="{statusIconDescription}" iconDescription="{statusIconDescription}"
/> />
<div class:bx--inline-notification__text-wrapper="{true}"> <div class:cds--inline-notification__text-wrapper="{true}">
<p class:bx--inline-notification__title="{true}"> <p class:cds--inline-notification__title="{true}">
<slot name="title">{title}</slot> <slot name="title">{title}</slot>
</p> </p>
<div class:bx--inline-notification__subtitle="{true}"> <div class:cds--inline-notification__subtitle="{true}">
<slot name="subtitle">{subtitle}</slot> <slot name="subtitle">{subtitle}</slot>
</div> </div>
<slot /> <slot />

2
src/Notification/NotificationActionButton.svelte
View file

@ -8,7 +8,7 @@
kind="ghost" kind="ghost"
size="small" size="small"
{...$$restProps} {...$$restProps}
class="bx--inline-notification__action-button {$$restProps.class}" class="cds--inline-notification__action-button {$$restProps.class}"
on:click on:click
on:mouseover on:mouseover
on:mouseenter on:mouseenter

8
src/Notification/NotificationButton.svelte
View file

@ -28,8 +28,8 @@
type="button" type="button"
aria-label="{iconDescription}" aria-label="{iconDescription}"
title="{iconDescription}" title="{iconDescription}"
class:bx--toast-notification__close-button="{notificationType === 'toast'}" class:cds--toast-notification__close-button="{notificationType === 'toast'}"
class:bx--inline-notification__close-button="{notificationType === 'inline'}" class:cds--inline-notification__close-button="{notificationType === 'inline'}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover
@ -41,7 +41,7 @@
size="{20}" size="{20}"
title="{title}" title="{title}"
class="{notificationType === 'toast' && class="{notificationType === 'toast' &&
'bx--toast-notification__close-icon'} {notificationType === 'inline' && 'cds--toast-notification__close-icon'} {notificationType === 'inline' &&
'bx--inline-notification__close-icon'}" 'cds--inline-notification__close-icon'}"
/> />
</button> </button>

4
src/Notification/NotificationIcon.svelte
View file

@ -36,6 +36,6 @@
size="{20}" size="{20}"
title="{iconDescription}" title="{iconDescription}"
class="{notificationType === 'toast' && class="{notificationType === 'toast' &&
'bx--toast-notification__icon'} {notificationType === 'inline' && 'cds--toast-notification__icon'} {notificationType === 'inline' &&
'bx--inline-notification__icon'}" 'cds--inline-notification__icon'}"
/> />

24
src/Notification/ToastNotification.svelte
View file

@ -81,14 +81,14 @@
<div <div
role="{role}" role="{role}"
kind="{kind}" kind="{kind}"
class:bx--toast-notification="{true}" class:cds--toast-notification="{true}"
class:bx--toast-notification--low-contrast="{lowContrast}" class:cds--toast-notification--low-contrast="{lowContrast}"
class:bx--toast-notification--error="{kind === 'error'}" class:cds--toast-notification--error="{kind === 'error'}"
class:bx--toast-notification--info="{kind === 'info'}" class:cds--toast-notification--info="{kind === 'info'}"
class:bx--toast-notification--info-square="{kind === 'info-square'}" class:cds--toast-notification--info-square="{kind === 'info-square'}"
class:bx--toast-notification--success="{kind === 'success'}" class:cds--toast-notification--success="{kind === 'success'}"
class:bx--toast-notification--warning="{kind === 'warning'}" class:cds--toast-notification--warning="{kind === 'warning'}"
class:bx--toast-notification--warning-alt="{kind === 'warning-alt'}" class:cds--toast-notification--warning-alt="{kind === 'warning-alt'}"
style:width="{fullWidth ? "100%" : undefined}" style:width="{fullWidth ? "100%" : undefined}"
{...$$restProps} {...$$restProps}
on:click on:click
@ -97,14 +97,14 @@
on:mouseleave on:mouseleave
> >
<NotificationIcon kind="{kind}" iconDescription="{statusIconDescription}" /> <NotificationIcon kind="{kind}" iconDescription="{statusIconDescription}" />
<div class:bx--toast-notification__details="{true}"> <div class:cds--toast-notification__details="{true}">
<h3 class:bx--toast-notification__title="{true}"> <h3 class:cds--toast-notification__title="{true}">
<slot name="title">{title}</slot> <slot name="title">{title}</slot>
</h3> </h3>
<div class:bx--toast-notification__subtitle="{true}"> <div class:cds--toast-notification__subtitle="{true}">
<slot name="subtitle">{subtitle}</slot> <slot name="subtitle">{subtitle}</slot>
</div> </div>
<div class:bx--toast-notification__caption="{true}"> <div class:cds--toast-notification__caption="{true}">
<slot name="caption">{caption}</slot> <slot name="caption">{caption}</slot>
</div> </div>
<slot /> <slot />

50
src/NumberInput/NumberInput.svelte
View file

@ -156,7 +156,7 @@
<!-- svelte-ignore a11y-click-events-have-key-events --> <!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions --> <!-- svelte-ignore a11y-no-static-element-interactions -->
<div <div
class:bx--form-item="{true}" class:cds--form-item="{true}"
on:click on:click
on:mouseover on:mouseover
on:mouseenter on:mouseenter
@ -164,28 +164,28 @@
> >
<div <div
data-invalid="{error || undefined}" data-invalid="{error || undefined}"
class:bx--number="{true}" class:cds--number="{true}"
class:bx--number--helpertext="{true}" class:cds--number--helpertext="{true}"
class:bx--number--readonly="{readonly}" class:cds--number--readonly="{readonly}"
class:bx--number--light="{light}" class:cds--number--light="{light}"
class:bx--number--nolabel="{hideLabel}" class:cds--number--nolabel="{hideLabel}"
class:bx--number--nosteppers="{hideSteppers}" class:cds--number--nosteppers="{hideSteppers}"
class:bx--number--sm="{size === 'sm'}" class:cds--number--sm="{size === 'sm'}"
class:bx--number--lg="{size === 'lg' || size === 'xl'}" class:cds--number--lg="{size === 'lg' || size === 'xl'}"
> >
{#if $$slots.label || label} {#if $$slots.label || label}
<label <label
for="{id}" for="{id}"
class:bx--label="{true}" class:cds--label="{true}"
class:bx--label--disabled="{disabled}" class:cds--label--disabled="{disabled}"
class:bx--visually-hidden="{hideLabel}" class:cds--visually-hidden="{hideLabel}"
> >
<slot name="label">{label}</slot> <slot name="label">{label}</slot>
</label> </label>
{/if} {/if}
<div <div
class:bx--number__input-wrapper="{true}" class:cds--number__input-wrapper="{true}"
class:bx--number__input-wrapper--warning="{!invalid && warn}" class:cds--number__input-wrapper--warning="{!invalid && warn}"
> >
<input <input
bind:this="{ref}" bind:this="{ref}"
@ -214,22 +214,22 @@
/> />
{#if !readonly} {#if !readonly}
{#if invalid} {#if invalid}
<WarningFilled class="bx--number__invalid" /> <WarningFilled class="cds--number__invalid" />
{/if} {/if}
{#if !invalid && warn} {#if !invalid && warn}
<WarningAltFilled <WarningAltFilled
class="bx--number__invalid bx--number__invalid--warning" class="cds--number__invalid cds--number__invalid--warning"
/> />
{/if} {/if}
{/if} {/if}
{#if !hideSteppers} {#if !hideSteppers}
<div class:bx--number__controls="{true}"> <div class:cds--number__controls="{true}">
<button <button
type="button" type="button"
tabindex="-1" tabindex="-1"
title="{decrementLabel || iconDescription}" title="{decrementLabel || iconDescription}"
aria-label="{decrementLabel || iconDescription}" aria-label="{decrementLabel || iconDescription}"
class:bx--number__control-btn="{true}" class:cds--number__control-btn="{true}"
class:down-icon="{true}" class:down-icon="{true}"
on:click="{() => { on:click="{() => {
updateValue(false); updateValue(false);
@ -238,13 +238,13 @@
> >
<Subtract class="down-icon" /> <Subtract class="down-icon" />
</button> </button>
<div class:bx--number__rule-divider="{true}"></div> <div class:cds--number__rule-divider="{true}"></div>
<button <button
type="button" type="button"
tabindex="-1" tabindex="-1"
title="{incrementLabel || iconDescription}" title="{incrementLabel || iconDescription}"
aria-label="{incrementLabel || iconDescription}" aria-label="{incrementLabel || iconDescription}"
class:bx--number__control-btn="{true}" class:cds--number__control-btn="{true}"
class:up-icon="{true}" class:up-icon="{true}"
on:click="{() => { on:click="{() => {
updateValue(true); updateValue(true);
@ -253,25 +253,25 @@
> >
<Add class="up-icon" /> <Add class="up-icon" />
</button> </button>
<div class:bx--number__rule-divider="{true}"></div> <div class:cds--number__rule-divider="{true}"></div>
</div> </div>
{/if} {/if}
</div> </div>
{#if !error && !warn && helperText} {#if !error && !warn && helperText}
<div <div
class:bx--form__helper-text="{true}" class:cds--form__helper-text="{true}"
class:bx--form__helper-text--disabled="{disabled}" class:cds--form__helper-text--disabled="{disabled}"
> >
{helperText} {helperText}
</div> </div>
{/if} {/if}
{#if error} {#if error}
<div id="{errorId}" class:bx--form-requirement="{true}"> <div id="{errorId}" class:cds--form-requirement="{true}">
{invalidText} {invalidText}
</div> </div>
{/if} {/if}
{#if !error && warn} {#if !error && warn}
<div id="{errorId}" class:bx--form-requirement="{true}">{warnText}</div> <div id="{errorId}" class:cds--form-requirement="{true}">{warnText}</div>
{/if} {/if}
</div> </div>
</div> </div>

6
src/NumberInput/NumberInputSkeleton.svelte
View file

@ -6,7 +6,7 @@
<!-- 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:bx--form-item="{true}" class:cds--form-item="{true}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover
@ -14,7 +14,7 @@
on:mouseleave on:mouseleave
> >
{#if !hideLabel} {#if !hideLabel}
<span class:bx--label="{true}" class:bx--skeleton="{true}"></span> <span class:cds--label="{true}" class:cds--skeleton="{true}"></span>
{/if} {/if}
<div class:bx--number="{true}" class:bx--skeleton="{true}"></div> <div class:cds--number="{true}" class:cds--skeleton="{true}"></div>
</div> </div>

8
src/OrderedList/OrderedList.svelte
View file

@ -12,10 +12,10 @@
<!-- 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 -->
<ol <ol
class:bx--list--ordered="{!native}" class:cds--list--ordered="{!native}"
class:bx--list--ordered--native="{native}" class:cds--list--ordered--native="{native}"
class:bx--list--nested="{nested}" class:cds--list--nested="{nested}"
class:bx--list--expressive="{expressive}" class:cds--list--expressive="{expressive}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover

28
src/OverflowMenu/OverflowMenu.svelte
View file

@ -168,7 +168,7 @@
focusedId.set($items[$currentIndex].id); focusedId.set($items[$currentIndex].id);
} }
$: styles = `<style> $: styles = `<style>
#${id} .bx--overflow-menu-options.bx--overflow-menu-options:after { #${id} .cds--overflow-menu-options.cds--overflow-menu-options:after {
width: ${buttonWidth ? buttonWidth + "px" : "2rem"}; width: ${buttonWidth ? buttonWidth + "px" : "2rem"};
} }
<\/style>`; <\/style>`;
@ -195,11 +195,11 @@
aria-expanded="{open}" aria-expanded="{open}"
aria-label="{ariaLabel}" aria-label="{ariaLabel}"
id="{id}" id="{id}"
class:bx--overflow-menu="{true}" class:cds--overflow-menu="{true}"
class:bx--overflow-menu--open="{open}" class:cds--overflow-menu--open="{open}"
class:bx--overflow-menu--light="{light}" class:cds--overflow-menu--light="{light}"
class:bx--overflow-menu--sm="{size === 'sm'}" class:cds--overflow-menu--sm="{size === 'sm'}"
class:bx--overflow-menu--lg="{size === 'lg'}" class:cds--overflow-menu--lg="{size === 'lg'}"
{...$$restProps} {...$$restProps}
on:click on:click
on:click="{({ target }) => { on:click="{({ target }) => {
@ -238,7 +238,7 @@
this="{icon}" this="{icon}"
aria-label="{iconDescription}" aria-label="{iconDescription}"
title="{iconDescription}" title="{iconDescription}"
class="bx--overflow-menu__icon {iconClass}" class="cds--overflow-menu__icon {iconClass}"
/> />
</slot> </slot>
{#if open} {#if open}
@ -249,13 +249,13 @@
tabindex="-1" tabindex="-1"
aria-label="{ariaLabel}" aria-label="{ariaLabel}"
data-floating-menu-direction="{direction}" data-floating-menu-direction="{direction}"
class:bx--overflow-menu-options="{true}" class:cds--overflow-menu-options="{true}"
class:bx--overflow-menu--flip="{flipped}" class:cds--overflow-menu--flip="{flipped}"
class:bx--overflow-menu-options--open="{open}" class:cds--overflow-menu-options--open="{open}"
class:bx--overflow-menu-options--light="{light}" class:cds--overflow-menu-options--light="{light}"
class:bx--overflow-menu-options--sm="{size === 'sm'}" class:cds--overflow-menu-options--sm="{size === 'sm'}"
class:bx--overflow-menu-options--lg="{size === 'lg'}" class:cds--overflow-menu-options--lg="{size === 'lg'}"
class:bx--breadcrumb-menu-options="{!!ctxBreadcrumbItem}" class:cds--breadcrumb-menu-options="{!!ctxBreadcrumbItem}"
class="{menuOptionsClass}" class="{menuOptionsClass}"
> >
<slot /> <slot />

14
src/OverflowMenu/OverflowMenuItem.svelte
View file

@ -45,7 +45,7 @@
$: buttonProps = { $: buttonProps = {
role: "menuitem", role: "menuitem",
tabindex: "-1", tabindex: "-1",
class: "bx--overflow-menu-options__btn", class: "cds--overflow-menu-options__btn",
disabled: href ? undefined : disabled, disabled: href ? undefined : disabled,
href: href ? href : undefined, href: href ? href : undefined,
title: requireTitle ? ($$slots.default ? undefined : text) : undefined, title: requireTitle ? ($$slots.default ? undefined : text) : undefined,
@ -55,10 +55,10 @@
<li <li
role="none" role="none"
id="{id}" id="{id}"
class:bx--overflow-menu-options__option="{true}" class:cds--overflow-menu-options__option="{true}"
class:bx--overflow-menu--divider="{hasDivider}" class:cds--overflow-menu--divider="{hasDivider}"
class:bx--overflow-menu-options__option--danger="{danger}" class:cds--overflow-menu-options__option--danger="{danger}"
class:bx--overflow-menu-options__option--disabled="{disabled}" class:cds--overflow-menu-options__option--disabled="{disabled}"
{...$$restProps} {...$$restProps}
> >
{#if href} {#if href}
@ -81,7 +81,7 @@
}}" }}"
> >
<slot> <slot>
<div class:bx--overflow-menu-options__option-content="{true}"> <div class:cds--overflow-menu-options__option-content="{true}">
{text} {text}
</div> </div>
</slot> </slot>
@ -104,7 +104,7 @@
}}" }}"
> >
<slot> <slot>
<div class:bx--overflow-menu-options__option-content="{true}"> <div class:cds--overflow-menu-options__option-content="{true}">
{text} {text}
</div> </div>
</slot> </slot>

32
src/Pagination/Pagination.svelte
View file

@ -94,19 +94,19 @@
$: forwardButtonDisabled = disabled || page === totalPages; $: forwardButtonDisabled = disabled || page === totalPages;
</script> </script>
<div id="{id}" class:bx--pagination="{true}" {...$$restProps}> <div id="{id}" class:cds--pagination="{true}" {...$$restProps}>
<div class:bx--pagination__left="{true}"> <div class:cds--pagination__left="{true}">
{#if !pageSizeInputDisabled} {#if !pageSizeInputDisabled}
<label <label
id="bx--pagination-select-{id}-count-label" id="cds--pagination-select-{id}-count-label"
for="bx--pagination-select-{id}" for="cds--pagination-select-{id}"
class:bx--pagination__text="{true}" class:cds--pagination__text="{true}"
> >
{itemsPerPageText} {itemsPerPageText}
</label> </label>
<Select <Select
id="bx--pagination-select-{id}" id="cds--pagination-select-{id}"
class="bx--select__item-count" class="cds--select__item-count"
hideLabel hideLabel
noLabel noLabel
inline inline
@ -120,7 +120,7 @@
{/each} {/each}
</Select> </Select>
{/if} {/if}
<span class:bx--pagination__text="{!pageSizeInputDisabled}"> <span class:cds--pagination__text="{!pageSizeInputDisabled}">
{#if pagesUnknown} {#if pagesUnknown}
{itemText(pageSize * (page - 1) + 1, page * pageSize)} {itemText(pageSize * (page - 1) + 1, page * pageSize)}
{:else} {:else}
@ -132,11 +132,11 @@
{/if} {/if}
</span> </span>
</div> </div>
<div class:bx--pagination__right="{true}"> <div class:cds--pagination__right="{true}">
{#if !pageInputDisabled} {#if !pageInputDisabled}
<Select <Select
id="bx--pagination-select-{id + 2}" id="cds--pagination-select-{id + 2}"
class="bx--select__page-number" class="cds--select__page-number"
labelText="Page number, of {totalPages} pages" labelText="Page number, of {totalPages} pages"
inline inline
hideLabel hideLabel
@ -149,7 +149,7 @@
<SelectItem value="{size + 1}" text="{(size + 1).toString()}" /> <SelectItem value="{size + 1}" text="{(size + 1).toString()}" />
{/each} {/each}
</Select> </Select>
<span class:bx--pagination__text="{true}"> <span class:cds--pagination__text="{true}">
{#if pagesUnknown} {#if pagesUnknown}
{pageText(page)} {pageText(page)}
{:else}{pageRangeText(page, totalPages)}{/if} {:else}{pageRangeText(page, totalPages)}{/if}
@ -162,8 +162,8 @@
icon="{CaretLeft}" icon="{CaretLeft}"
iconDescription="{backwardText}" iconDescription="{backwardText}"
disabled="{backButtonDisabled}" disabled="{backButtonDisabled}"
class="bx--pagination__button bx--pagination__button--backward {backButtonDisabled class="cds--pagination__button cds--pagination__button--backward {backButtonDisabled
? 'bx--pagination__button--no-index' ? 'cds--pagination__button--no-index'
: ''}" : ''}"
on:click="{() => { on:click="{() => {
page--; page--;
@ -178,8 +178,8 @@
icon="{CaretRight}" icon="{CaretRight}"
iconDescription="{forwardText}" iconDescription="{forwardText}"
disabled="{forwardButtonDisabled}" disabled="{forwardButtonDisabled}"
class="bx--pagination__button bx--pagination__button--forward {forwardButtonDisabled class="cds--pagination__button cds--pagination__button--forward {forwardButtonDisabled
? 'bx--pagination__button--no-index' ? 'cds--pagination__button--no-index'
: ''}" : ''}"
on:click="{() => { on:click="{() => {
page++; page++;

10
src/Pagination/PaginationSkeleton.svelte
View file

@ -5,22 +5,22 @@
<!-- 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:bx--pagination="{true}" class:cds--pagination="{true}"
class:bx--skeleton="{true}" class:cds--skeleton="{true}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave
> >
<div class:bx--pagination__left="{true}"> <div class:cds--pagination__left="{true}">
<SkeletonText width="70px" /> <SkeletonText width="70px" />
<SkeletonText width="35px" /> <SkeletonText width="35px" />
<SkeletonText width="105px" /> <SkeletonText width="105px" />
</div> </div>
<div <div
class:bx--pagination__right="{true}" class:cds--pagination__right="{true}"
class:bx--pagination--inline="{true}" class:cds--pagination--inline="{true}"
> >
<SkeletonText width="70px" /> <SkeletonText width="70px" />
</div> </div>

8
src/PaginationNav/PaginationItem.svelte
View file

@ -6,16 +6,16 @@
export let active = false; export let active = false;
</script> </script>
<li class:bx--pagination-nav__list-item="{true}"> <li class:cds--pagination-nav__list-item="{true}">
<button <button
type="button" type="button"
data-page="{page}" data-page="{page}"
aria-current="{active ? 'page' : undefined}" aria-current="{active ? 'page' : undefined}"
class:bx--pagination-nav__page="{true}" class:cds--pagination-nav__page="{true}"
class:bx--pagination-nav__page--active="{active}" class:cds--pagination-nav__page--active="{active}"
on:click on:click
> >
<span class:bx--pagination-nav__accessibility-label="{true}"> <span class:cds--pagination-nav__accessibility-label="{true}">
<slot /> <slot />
</span> </span>
{page} {page}

14
src/PaginationNav/PaginationNav.svelte
View file

@ -76,9 +76,13 @@
.slice(startOffset + front, (back + 1) * -1); .slice(startOffset + front, (back + 1) * -1);
</script> </script>
<nav aria-label="pagination" class:bx--pagination-nav="{true}" {...$$restProps}> <nav
<ul class:bx--pagination-nav__list="{true}"> aria-label="pagination"
<li class:bx--pagination-nav__list-item="{true}"> class:cds--pagination-nav="{true}"
{...$$restProps}
>
<ul class:cds--pagination-nav__list="{true}">
<li class:cds--pagination-nav__list-item="{true}">
<Button <Button
kind="ghost" kind="ghost"
tooltipAlignment="center" tooltipAlignment="center"
@ -153,7 +157,7 @@
{page === total ? "Active, Page" : "Page"} {page === total ? "Active, Page" : "Page"}
</PaginationItem> </PaginationItem>
{/if} {/if}
<li class:bx--pagination-nav__list-item="{true}"> <li class:cds--pagination-nav__list-item="{true}">
<Button <Button
kind="ghost" kind="ghost"
tooltipAlignment="center" tooltipAlignment="center"
@ -180,7 +184,7 @@
<div <div
aria-live="polite" aria-live="polite"
aria-atomic="true" aria-atomic="true"
class:bx--pagination-nav__accessibility-label="{true}" class:cds--pagination-nav__accessibility-label="{true}"
> >
Page Page
{page + 1} {page + 1}

12
src/PaginationNav/PaginationOverflow.svelte
View file

@ -19,14 +19,14 @@
</script> </script>
{#if count > 1} {#if count > 1}
<li class:bx--pagination-nav__list-item="{true}"> <li class:cds--pagination-nav__list-item="{true}">
<div class:bx--pagination-nav__select="{true}"> <div class:cds--pagination-nav__select="{true}">
<!-- svelte-ignore a11y-no-onchange --> <!-- svelte-ignore a11y-no-onchange -->
<select <select
aria-label="Select Page number" aria-label="Select Page number"
value="{value}" value="{value}"
class:bx--pagination-nav__page="{true}" class:cds--pagination-nav__page="{true}"
class:bx--pagination-nav__page--select="{true}" class:cds--pagination-nav__page--select="{true}"
on:change="{({ target }) => { on:change="{({ target }) => {
value = ''; value = '';
dispatch('select', { index: Number(target.value) }); dispatch('select', { index: Number(target.value) });
@ -39,8 +39,8 @@
</option> </option>
{/each} {/each}
</select> </select>
<div class:bx--pagination-nav__select-icon-wrapper="{true}"> <div class:cds--pagination-nav__select-icon-wrapper="{true}">
<OverflowMenuHorizontal class="bx--pagination-nav__select-icon" /> <OverflowMenuHorizontal class="cds--pagination-nav__select-icon" />
</div> </div>
</div> </div>
</li> </li>

36
src/Popover/Popover.svelte
View file

@ -46,24 +46,24 @@
<div <div
bind:this="{ref}" bind:this="{ref}"
class:bx--popover-container="{true}" class:cds--popover-container="{true}"
class:bx--popover--caret="{caret}" class:cds--popover--caret="{caret}"
class:bx--popover--light="{light}" class:cds--popover--light="{light}"
class:bx--popover--high-contrast="{highContrast}" class:cds--popover--high-contrast="{highContrast}"
class:bx--popover--top="{align === 'top'}" class:cds--popover--top="{align === 'top'}"
class:bx--popover--top-left="{align === 'top-left'}" class:cds--popover--top-left="{align === 'top-left'}"
class:bx--popover--top-right="{align === 'top-right'}" class:cds--popover--top-right="{align === 'top-right'}"
class:bx--popover--bottom="{align === 'bottom'}" class:cds--popover--bottom="{align === 'bottom'}"
class:bx--popover--bottom-left="{align === 'bottom-left'}" class:cds--popover--bottom-left="{align === 'bottom-left'}"
class:bx--popover--bottom-right="{align === 'bottom-right'}" class:cds--popover--bottom-right="{align === 'bottom-right'}"
class:bx--popover--left="{align === 'left'}" class:cds--popover--left="{align === 'left'}"
class:bx--popover--left-bottom="{align === 'left-bottom'}" class:cds--popover--left-bottom="{align === 'left-bottom'}"
class:bx--popover--left-top="{align === 'left-top'}" class:cds--popover--left-top="{align === 'left-top'}"
class:bx--popover--right="{align === 'right'}" class:cds--popover--right="{align === 'right'}"
class:bx--popover--right-bottom="{align === 'right-bottom'}" class:cds--popover--right-bottom="{align === 'right-bottom'}"
class:bx--popover--right-top="{align === 'right-top'}" class:cds--popover--right-top="{align === 'right-top'}"
class:bx--popover--open="{open}" class:cds--popover--open="{open}"
class:bx--popover--relative="{relative}" class:cds--popover--relative="{relative}"
style:position="{relative ? "relative" : undefined}" style:position="{relative ? "relative" : undefined}"
{...$$restProps} {...$$restProps}
> >

6
src/Popover/PopoverContent.svelte
View file

@ -2,9 +2,9 @@
export let className = null; export let className = null;
</script> </script>
<span class:bx--popover="{true}" {...$$restProps}> <span class:cds--popover="{true}" {...$$restProps}>
<span class:bx--popover-content="{true}" class="{className}"> <span class:cds--popover-content="{true}" class="{className}">
<slot /> <slot />
</span> </span>
<span class:bx--popover-caret="{true}"></span> <span class:cds--popover-caret="{true}"></span>
</span> </span>

28
src/ProgressBar/ProgressBar.svelte
View file

@ -62,20 +62,20 @@
</script> </script>
<div <div
class:bx--progress-bar="{true}" class:cds--progress-bar="{true}"
class:bx--progress-bar--indeterminate="{indeterminate}" class:cds--progress-bar--indeterminate="{indeterminate}"
class:bx--progress-bar--big="{size === 'md'}" class:cds--progress-bar--big="{size === 'md'}"
class:bx--progress-bar--small="{size === 'sm'}" class:cds--progress-bar--small="{size === 'sm'}"
class:bx--progress-bar--inline="{kind === 'inline'}" class:cds--progress-bar--inline="{kind === 'inline'}"
class:bx--progress-bar--indented="{kind === 'indented'}" class:cds--progress-bar--indented="{kind === 'indented'}"
class:bx--progress-bar--error="{status === 'error'}" class:cds--progress-bar--error="{status === 'error'}"
class:bx--progress-bar--finished="{status === 'finished'}" class:cds--progress-bar--finished="{status === 'finished'}"
{...$$restProps} {...$$restProps}
> >
<label <label
for="{id}" for="{id}"
class:bx--progress-bar__label="{true}" class:cds--progress-bar__label="{true}"
class:bx--visually-hidden="{hideLabel}" class:cds--visually-hidden="{hideLabel}"
> >
<slot name="labelText"> <slot name="labelText">
{labelText} {labelText}
@ -83,14 +83,14 @@
{#if status === "error" || status === "finished"} {#if status === "error" || status === "finished"}
<svelte:component <svelte:component
this="{statusIcons[status]}" this="{statusIcons[status]}"
class="bx--progress-bar__status-icon" class="cds--progress-bar__status-icon"
/> />
{/if} {/if}
</label> </label>
<div <div
role="progressbar" role="progressbar"
id="{id}" id="{id}"
class:bx--progress-bar__track="{true}" class:cds--progress-bar__track="{true}"
aria-busy="{status === 'active'}" aria-busy="{status === 'active'}"
aria-valuemin="{indeterminate ? undefined : 0}" aria-valuemin="{indeterminate ? undefined : 0}"
aria-valuemax="{indeterminate ? undefined : max}" aria-valuemax="{indeterminate ? undefined : max}"
@ -98,12 +98,12 @@
aria-describedby="{helperText ? helperId : null}" aria-describedby="{helperText ? helperId : null}"
> >
<div <div
class:bx--progress-bar__bar="{true}" class:cds--progress-bar__bar="{true}"
style:transform="{status === "active" && `scaleX(${capped / max})`}" style:transform="{status === "active" && `scaleX(${capped / max})`}"
></div> ></div>
</div> </div>
{#if helperText} {#if helperText}
<div id="{helperId}" class:bx--progress-bar__helper-text="{true}"> <div id="{helperId}" class:cds--progress-bar__helper-text="{true}">
{helperText} {helperText}
</div> </div>
{/if} {/if}

6
src/ProgressIndicator/ProgressIndicator.svelte
View file

@ -66,9 +66,9 @@
<!-- 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:bx--progress="{true}" class:cds--progress="{true}"
class:bx--progress--vertical="{vertical}" class:cds--progress--vertical="{vertical}"
class:bx--progress--space-equal="{spaceEqually && !vertical}" class:cds--progress--space-equal="{spaceEqually && !vertical}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover

18
src/ProgressIndicator/ProgressIndicatorSkeleton.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-noninteractive-element-interactions --> <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<ul <ul
class:bx--progress="{true}" class:cds--progress="{true}"
class:bx--progress--vertical="{vertical}" class:cds--progress--vertical="{vertical}"
class:bx--skeleton="{true}" class:cds--skeleton="{true}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover
@ -20,18 +20,18 @@
> >
{#each Array.from({ length: count }, (_, i) => i) as item, i (item)} {#each Array.from({ length: count }, (_, i) => i) as item, i (item)}
<li <li
class:bx--progress-step="{true}" class:cds--progress-step="{true}"
class:bx--progress-step--incomplete="{true}" class:cds--progress-step--incomplete="{true}"
> >
<div <div
class:bx--progress-step-button="{true}" class:cds--progress-step-button="{true}"
class:bx--progress-step-button--unclickable="{true}" class:cds--progress-step-button--unclickable="{true}"
> >
<svg> <svg>
<path d="M 7, 7 m -7, 0 a 7,7 0 1,0 14,0 a 7,7 0 1,0 -14,0"></path> <path d="M 7, 7 m -7, 0 a 7,7 0 1,0 14,0 a 7,7 0 1,0 -14,0"></path>
</svg> </svg>
<p class:bx--progress-label="{true}"></p> <p class:cds--progress-label="{true}"></p>
<span class:bx--progress-line="{true}"></span> <span class:cds--progress-line="{true}"></span>
</div> </div>
</li> </li>
{/each} {/each}

26
src/ProgressIndicator/ProgressStep.svelte
View file

@ -54,11 +54,11 @@
<!-- svelte-ignore a11y-mouse-events-have-key-events --> <!-- svelte-ignore a11y-mouse-events-have-key-events -->
<li <li
id="{id}" id="{id}"
class:bx--progress-step="{true}" class:cds--progress-step="{true}"
class:bx--progress-step--current="{current}" class:cds--progress-step--current="{current}"
class:bx--progress-step--complete="{complete}" class:cds--progress-step--complete="{complete}"
class:bx--progress-step--incomplete="{!complete && !current}" class:cds--progress-step--incomplete="{!complete && !current}"
class:bx--progress-step--disabled="{disabled}" class:cds--progress-step--disabled="{disabled}"
{...$$restProps} {...$$restProps}
> >
<button <button
@ -66,8 +66,8 @@
disabled="{disabled}" disabled="{disabled}"
aria-disabled="{disabled}" aria-disabled="{disabled}"
tabindex="{!current && !disabled ? '0' : '-1'}" tabindex="{!current && !disabled ? '0' : '-1'}"
class:bx--progress-step-button="{true}" class:cds--progress-step-button="{true}"
class:bx--progress-step-button--unclickable="{current || class:cds--progress-step-button--unclickable="{current ||
$preventChangeOnClick}" $preventChangeOnClick}"
on:click on:click
on:click="{() => { on:click="{() => {
@ -86,7 +86,7 @@
}}" }}"
> >
{#if invalid} {#if invalid}
<Warning class="bx--progress__warning" title="{description}" /> <Warning class="cds--progress__warning" title="{description}" />
{:else if current} {:else if current}
<Incomplete title="{description}" /> <Incomplete title="{description}" />
{:else if complete} {:else if complete}
@ -94,14 +94,14 @@
{:else} {:else}
<CircleDash title="{description}" /> <CircleDash title="{description}" />
{/if} {/if}
<div class:bx--progress-text="{true}"> <div class:cds--progress-text="{true}">
<slot props="{{ class: 'bx--progress-label' }}"> <slot props="{{ class: 'cds--progress-label' }}">
<p class:bx--progress-label="{true}">{label}</p> <p class:cds--progress-label="{true}">{label}</p>
</slot> </slot>
{#if secondaryLabel} {#if secondaryLabel}
<p class:bx--progress-optional="{true}">{secondaryLabel}</p> <p class:cds--progress-optional="{true}">{secondaryLabel}</p>
{/if} {/if}
</div> </div>
<span class:bx--progress-line="{true}"></span> <span class:cds--progress-line="{true}"></span>
</button> </button>
</li> </li>

12
src/RadioButton/RadioButton.svelte
View file

@ -57,8 +57,8 @@
</script> </script>
<div <div
class:bx--radio-button-wrapper="{true}" class:cds--radio-button-wrapper="{true}"
class:bx--radio-button-wrapper--label-left="{labelPosition === 'left'}" class:cds--radio-button-wrapper--label-left="{labelPosition === 'left'}"
{...$$restProps} {...$$restProps}
> >
<input <input
@ -70,7 +70,7 @@
disabled="{disabled}" disabled="{disabled}"
required="{$groupRequired ?? required}" required="{$groupRequired ?? required}"
value="{value}" value="{value}"
class:bx--radio-button="{true}" class:cds--radio-button="{true}"
on:change on:change
on:change="{() => { on:change="{() => {
if (update) { if (update) {
@ -78,10 +78,10 @@
} }
}}" }}"
/> />
<label class:bx--radio-button__label="{true}" for="{id}"> <label class:cds--radio-button__label="{true}" for="{id}">
<span class:bx--radio-button__appearance="{true}"></span> <span class:cds--radio-button__appearance="{true}"></span>
{#if labelText || $$slots.labelText} {#if labelText || $$slots.labelText}
<span class:bx--visually-hidden="{hideLabel}"> <span class:cds--visually-hidden="{hideLabel}">
<slot name="labelText"> <slot name="labelText">
{labelText} {labelText}
</slot> </slot>

6
src/RadioButton/RadioButtonSkeleton.svelte
View file

@ -1,14 +1,14 @@
<!-- 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:bx--radio-button-wrapper="{true}" class:cds--radio-button-wrapper="{true}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave
> >
<div class:bx--radio-button="{true}" class:bx--skeleton="{true}"></div> <div class:cds--radio-button="{true}" class:cds--skeleton="{true}"></div>
<span class:bx--radio-button__label="{true}" class:bx--skeleton="{true}" <span class:cds--radio-button__label="{true}" class:cds--skeleton="{true}"
></span> ></span>
</div> </div>

15
src/RadioButtonGroup/RadioButtonGroup.svelte
View file

@ -96,7 +96,7 @@
<!-- svelte-ignore a11y-no-static-element-interactions --> <!-- svelte-ignore a11y-no-static-element-interactions -->
<div <div
id="{id}" id="{id}"
class:bx--form-item="{true}" class:cds--form-item="{true}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover
@ -104,14 +104,17 @@
on:mouseleave on:mouseleave
> >
<fieldset <fieldset
class:bx--radio-button-group="{true}" class:cds--radio-button-group="{true}"
class:bx--radio-button-group--vertical="{orientation === 'vertical'}" class:cds--radio-button-group--vertical="{orientation === 'vertical'}"
class:bx--radio-button-group--label-left="{labelPosition === 'left'}" class:cds--radio-button-group--label-left="{labelPosition === 'left'}"
class:bx--radio-button-group--label-right="{labelPosition === 'right'}" class:cds--radio-button-group--label-right="{labelPosition === 'right'}"
disabled="{disabled}" disabled="{disabled}"
> >
{#if legendText || $$slots.legendText} {#if legendText || $$slots.legendText}
<legend class:bx--label="{true}" class:bx--visually-hidden="{hideLegend}"> <legend
class:cds--label="{true}"
class:cds--visually-hidden="{hideLegend}"
>
<slot name="legendText">{legendText}</slot> <slot name="legendText">{legendText}</slot>
</legend> </legend>
{/if} {/if}

2
src/RecursiveList/RecursiveListItem.svelte
View file

@ -13,7 +13,7 @@
<ListItem> <ListItem>
{#if text && !href}{text}{/if} {#if text && !href}{text}{/if}
{#if href}<a class:bx--link="{true}" href="{href}">{text || href}</a>{/if} {#if href}<a class:cds--link="{true}" href="{href}">{text || href}</a>{/if}
{#if !text && html}{@html html}{/if} {#if !text && html}{@html html}{/if}
<slot /> <slot />
</ListItem> </ListItem>

28
src/Search/Search.svelte
View file

@ -92,28 +92,28 @@
<div <div
role="search" role="search"
aria-labelledby="{id}-search" aria-labelledby="{id}-search"
class:bx--search="{true}" class:cds--search="{true}"
class:bx--search--light="{light}" class:cds--search--light="{light}"
class:bx--search--disabled="{disabled}" class:cds--search--disabled="{disabled}"
class:bx--search--sm="{size === 'sm'}" class:cds--search--sm="{size === 'sm'}"
class:bx--search--md="{size === 'md'}" class:cds--search--md="{size === 'md'}"
class:bx--search--lg="{size === 'lg'}" class:cds--search--lg="{size === 'lg'}"
class:bx--search--expandable="{expandable}" class:cds--search--expandable="{expandable}"
class:bx--search--expanded="{expanded}" class:cds--search--expanded="{expanded}"
class="{searchClass}" class="{searchClass}"
> >
<!-- svelte-ignore a11y-click-events-have-key-events --> <!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions --> <!-- svelte-ignore a11y-no-static-element-interactions -->
<div <div
bind:this="{searchRef}" bind:this="{searchRef}"
class:bx--search-magnifier="{true}" class:cds--search-magnifier="{true}"
on:click="{() => { on:click="{() => {
if (expandable) expanded = true; if (expandable) expanded = true;
}}" }}"
> >
<svelte:component this="{icon}" class="bx--search-magnifier-icon" /> <svelte:component this="{icon}" class="cds--search-magnifier-icon" />
</div> </div>
<label id="{id}-search" for="{id}" class:bx--label="{true}"> <label id="{id}-search" for="{id}" class:cds--label="{true}">
<slot name="labelText"> <slot name="labelText">
{labelText} {labelText}
</slot> </slot>
@ -124,7 +124,7 @@
bind:value bind:value
type="text" type="text"
role="searchbox" role="searchbox"
class:bx--search-input="{true}" class:cds--search-input="{true}"
autofocus="{autofocus === true ? true : undefined}" autofocus="{autofocus === true ? true : undefined}"
autocomplete="{autocomplete}" autocomplete="{autocomplete}"
disabled="{disabled}" disabled="{disabled}"
@ -157,8 +157,8 @@
type="button" type="button"
aria-label="{closeButtonLabelText}" aria-label="{closeButtonLabelText}"
disabled="{disabled}" disabled="{disabled}"
class:bx--search-close="{true}" class:cds--search-close="{true}"
class:bx--search-close--hidden="{value === ''}" class:cds--search-close--hidden="{value === ''}"
on:click on:click
on:click="{() => { on:click="{() => {
value = ''; value = '';

12
src/Search/SearchSkeleton.svelte
View file

@ -9,16 +9,16 @@
<!-- 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:bx--skeleton="{true}" class:cds--skeleton="{true}"
class:bx--search--sm="{size === 'sm'}" class:cds--search--sm="{size === 'sm'}"
class:bx--search--md="{size === 'md'}" class:cds--search--md="{size === 'md'}"
class:bx--search--lg="{size === 'lg'}" class:cds--search--lg="{size === 'lg'}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave
> >
<span class:bx--label="{true}"></span> <span class:cds--label="{true}"></span>
<div class:bx--search-input="{true}"></div> <div class:cds--search-input="{true}"></div>
</div> </div>

62
src/Select/Select.svelte
View file

@ -124,21 +124,21 @@
$: selectedValue.set(selected ?? $defaultValue); $: selectedValue.set(selected ?? $defaultValue);
</script> </script>
<div class:bx--form-item="{true}" {...$$restProps}> <div class:cds--form-item="{true}" {...$$restProps}>
<div <div
class:bx--select="{true}" class:cds--select="{true}"
class:bx--select--inline="{inline}" class:cds--select--inline="{inline}"
class:bx--select--light="{light}" class:cds--select--light="{light}"
class:bx--select--invalid="{invalid}" class:cds--select--invalid="{invalid}"
class:bx--select--disabled="{disabled}" class:cds--select--disabled="{disabled}"
class:bx--select--warning="{warn}" class:cds--select--warning="{warn}"
> >
{#if !noLabel} {#if !noLabel}
<label <label
for="{id}" for="{id}"
class:bx--label="{true}" class:cds--label="{true}"
class:bx--visually-hidden="{hideLabel}" class:cds--visually-hidden="{hideLabel}"
class:bx--label--disabled="{disabled}" class:cds--label--disabled="{disabled}"
> >
<slot name="labelText"> <slot name="labelText">
{labelText} {labelText}
@ -146,9 +146,9 @@
</label> </label>
{/if} {/if}
{#if inline} {#if inline}
<div class:bx--select-input--inline__wrapper="{true}"> <div class:cds--select-input--inline__wrapper="{true}">
<div <div
class:bx--select-input__wrapper="{true}" class:cds--select-input__wrapper="{true}"
data-invalid="{invalid || undefined}" data-invalid="{invalid || undefined}"
> >
<select <select
@ -159,9 +159,9 @@
required="{required || undefined}" required="{required || undefined}"
id="{id}" id="{id}"
name="{name}" name="{name}"
class:bx--select-input="{true}" class:cds--select-input="{true}"
class:bx--select-input--sm="{size === 'sm'}" class:cds--select-input--sm="{size === 'sm'}"
class:bx--select-input--lg="{size === 'lg' || size === 'xl'}" class:cds--select-input--lg="{size === 'lg' || size === 'xl'}"
on:change="{handleChange}" on:change="{handleChange}"
on:change on:change
on:input on:input
@ -170,21 +170,21 @@
> >
<slot /> <slot />
</select> </select>
<ChevronDown class="bx--select__arrow" /> <ChevronDown class="cds--select__arrow" />
{#if invalid} {#if invalid}
<WarningFilled class="bx--select__invalid-icon" /> <WarningFilled class="cds--select__invalid-icon" />
{/if} {/if}
</div> </div>
{#if invalid} {#if invalid}
<div class:bx--form-requirement="{true}" id="{errorId}"> <div class:cds--form-requirement="{true}" id="{errorId}">
{invalidText} {invalidText}
</div> </div>
{/if} {/if}
</div> </div>
{#if !invalid && !warn && helperText} {#if !invalid && !warn && helperText}
<div <div
class:bx--form__helper-text="{true}" class:cds--form__helper-text="{true}"
class:bx--form__helper-text--disabled="{disabled}" class:cds--form__helper-text--disabled="{disabled}"
> >
{helperText} {helperText}
</div> </div>
@ -192,7 +192,7 @@
{/if} {/if}
{#if !inline} {#if !inline}
<div <div
class:bx--select-input__wrapper="{true}" class:cds--select-input__wrapper="{true}"
data-invalid="{invalid || undefined}" data-invalid="{invalid || undefined}"
> >
<select <select
@ -203,9 +203,9 @@
disabled="{disabled || undefined}" disabled="{disabled || undefined}"
required="{required || undefined}" required="{required || undefined}"
aria-invalid="{invalid || undefined}" aria-invalid="{invalid || undefined}"
class:bx--select-input="{true}" class:cds--select-input="{true}"
class:bx--select-input--sm="{size === 'sm'}" class:cds--select-input--sm="{size === 'sm'}"
class:bx--select-input--lg="{size === 'lg' || size === 'xl'}" class:cds--select-input--lg="{size === 'lg' || size === 'xl'}"
on:change="{handleChange}" on:change="{handleChange}"
on:change on:change
on:input on:input
@ -214,31 +214,31 @@
> >
<slot /> <slot />
</select> </select>
<ChevronDown class="bx--select__arrow" /> <ChevronDown class="cds--select__arrow" />
{#if invalid} {#if invalid}
<WarningFilled class="bx--select__invalid-icon" /> <WarningFilled class="cds--select__invalid-icon" />
{/if} {/if}
{#if !invalid && warn} {#if !invalid && warn}
<WarningAltFilled <WarningAltFilled
class="bx--select__invalid-icon bx--select__invalid-icon--warning" class="cds--select__invalid-icon cds--select__invalid-icon--warning"
/> />
{/if} {/if}
</div> </div>
{#if !invalid && helperText} {#if !invalid && helperText}
<div <div
class:bx--form__helper-text="{true}" class:cds--form__helper-text="{true}"
class:bx--form__helper-text--disabled="{disabled}" class:cds--form__helper-text--disabled="{disabled}"
> >
{helperText} {helperText}
</div> </div>
{/if} {/if}
{#if invalid} {#if invalid}
<div id="{errorId}" class:bx--form-requirement="{true}"> <div id="{errorId}" class:cds--form-requirement="{true}">
{invalidText} {invalidText}
</div> </div>
{/if} {/if}
{#if !invalid && warn} {#if !invalid && warn}
<div id="{errorId}" class:bx--form-requirement="{true}"> <div id="{errorId}" class:cds--form-requirement="{true}">
{warnText} {warnText}
</div> </div>
{/if} {/if}

2
src/Select/SelectItem.svelte
View file

@ -51,7 +51,7 @@
disabled="{disabled}" disabled="{disabled}"
hidden="{hidden}" hidden="{hidden}"
selected="{selected}" selected="{selected}"
class:bx--select-option="{true}" class:cds--select-option="{true}"
class="{className}" class="{className}"
style="{style}" style="{style}"
> >

2
src/Select/SelectItemGroup.svelte
View file

@ -9,7 +9,7 @@
<optgroup <optgroup
label="{label}" label="{label}"
disabled="{disabled}" disabled="{disabled}"
class:bx--select-optgroup="{true}" class:cds--select-optgroup="{true}"
{...$$restProps} {...$$restProps}
> >
<slot /> <slot />

8
src/Select/SelectSkeleton.svelte
View file

@ -6,7 +6,7 @@
<!-- 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:bx--form-item="{true}" class:cds--form-item="{true}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover
@ -14,9 +14,9 @@
on:mouseleave on:mouseleave
> >
{#if !hideLabel} {#if !hideLabel}
<span class:bx--label="{true}" class:bx--skeleton="{true}"></span> <span class:cds--label="{true}" class:cds--skeleton="{true}"></span>
{/if} {/if}
<div class:bx--select="{true}" class:bx--skeleton="{true}"> <div class:cds--select="{true}" class:cds--skeleton="{true}">
<div class:bx--select-input="{true}"></div> <div class:cds--select-input="{true}"></div>
</div> </div>
</div> </div>

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