mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 03:26: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}
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<ul
class:bx--accordion="{true}"
class:bx--accordion--start="{align === 'start'}"
class:bx--accordion--end="{align === 'end'}"
class:bx--accordion--sm="{size === 'sm'}"
class:bx--accordion--lg="{size === 'lg' || size === 'xl'}"
class:cds--accordion="{true}"
class:cds--accordion--start="{align === 'start'}"
class:cds--accordion--end="{align === 'end'}"
class:cds--accordion--sm="{size === 'sm'}"
class:cds--accordion--lg="{size === 'lg' || size === 'xl'}"
{...$$restProps}
on:click
on:mouseover

21
src/Accordion/AccordionItem.svelte
View file

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

32
src/Accordion/AccordionSkeleton.svelte
View file

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

20
src/AspectRatio/AspectRatio.svelte
View file

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

4
src/Breadcrumb/Breadcrumb.svelte
View file

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

8
src/Breadcrumb/BreadcrumbItem.svelte
View file

@ -1,6 +1,6 @@
<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-no-noninteractive-element-interactions -->
<li
class:bx--breadcrumb-item="{true}"
class:bx--breadcrumb-item--current="{isCurrentPage &&
class:cds--breadcrumb-item="{true}"
class:cds--breadcrumb-item--current="{isCurrentPage &&
$$restProps['aria-current'] !== 'page'}"
{...$$restProps}
on:click
@ -39,7 +39,7 @@
<slot
props="{{
'aria-current': $$restProps['aria-current'],
class: 'bx--link',
class: 'cds--link',
}}"
/>
{/if}

10
src/Breadcrumb/BreadcrumbSkeleton.svelte
View file

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

38
src/Button/Button.svelte
View file

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

4
src/Button/ButtonSet.svelte
View file

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

24
src/Button/ButtonSkeleton.svelte
View file

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

12
src/Checkbox/Checkbox.svelte
View file

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

8
src/Checkbox/CheckboxSkeleton.svelte
View file

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

6
src/Checkbox/InlineCheckbox.svelte
View file

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

66
src/CodeSnippet/CodeSnippet.svelte
View file

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

10
src/CodeSnippet/CodeSnippetSkeleton.svelte
View file

@ -9,17 +9,17 @@
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
class:bx--skeleton="{true}"
class:bx--snippet="{true}"
class:bx--snippet--single="{type === 'single'}"
class:bx--snippet--multi="{type === 'multi'}"
class:cds--skeleton="{true}"
class:cds--snippet="{true}"
class:cds--snippet--single="{type === 'single'}"
class:cds--snippet--multi="{type === 'multi'}"
{...$$restProps}
on:click
on:mouseover
on:mouseenter
on:mouseleave
>
<div class:bx--snippet-container="{true}">
<div class:cds--snippet-container="{true}">
{#if type === "single"}
<span></span>
{: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}
<label
for="{id}"
class:bx--label="{true}"
class:bx--label--disabled="{disabled}"
class:cds--label="{true}"
class:cds--label--disabled="{disabled}"
>
<slot name="titleText">
{titleText}
@ -230,8 +230,8 @@
</label>
{/if}
<ListBox
class="bx--combo-box {direction === 'top' &&
'bx--list-box--up'} {!invalid && warn && 'bx--combo-box--warning'}"
class="cds--combo-box {direction === 'top' &&
'cds--list-box--up'} {!invalid && warn && 'cds--combo-box--warning'}"
id="{comboId}"
aria-label="{ariaLabel}"
disabled="{disabled}"
@ -273,9 +273,9 @@
id="{id}"
name="{name}"
{...$$restProps}
class:bx--text-input="{true}"
class:bx--text-input--light="{light}"
class:bx--text-input--empty="{value === ''}"
class:cds--text-input="{true}"
class:cds--text-input--light="{light}"
class:cds--text-input--empty="{value === ''}"
on:input="{({ target }) => {
if (!open && target.value.length > 0) {
open = true;
@ -347,11 +347,11 @@
on:paste
/>
{#if invalid}
<WarningFilled class="bx--list-box__invalid-icon" />
<WarningFilled class="cds--list-box__invalid-icon" />
{/if}
{#if !invalid && warn}
<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 value}
@ -407,7 +407,7 @@
{itemToString(item)}
</slot>
{#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}
</ListBoxMenuItem>
{/each}
@ -416,8 +416,8 @@
</ListBox>
{#if !invalid && helperText && !warn}
<div
class:bx--form__helper-text="{true}"
class:bx--form__helper-text--disabled="{disabled}"
class:cds--form__helper-text="{true}"
class:cds--form__helper-text--disabled="{disabled}"
>
{helperText}
</div>

12
src/ComposedModal/ComposedModal.svelte
View file

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

8
src/ComposedModal/ModalBody.svelte
View file

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

4
src/ComposedModal/ModalFooter.svelte
View file

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

14
src/ComposedModal/ModalHeader.svelte
View file

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

6
src/ContentSwitcher/ContentSwitcher.svelte
View file

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

6
src/ContentSwitcher/Switch.svelte
View file

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

8
src/ContextMenu/ContextMenu.svelte
View file

@ -160,10 +160,10 @@
tabindex="-1"
data-direction="{direction}"
data-level="{level}"
class:bx--menu="{true}"
class:bx--menu--open="{open}"
class:bx--menu--invisible="{open && x === 0 && y === 0}"
class:bx--menu--root="{level === 1}"
class:cds--menu="{true}"
class:cds--menu--open="{open}"
class:cds--menu--invisible="{open && x === 0 && y === 0}"
class:cds--menu--root="{level === 1}"
style:left="{x}px"
style:top="{y}px"
{...$$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-haspopup="{subOptions ? true : undefined}"
aria-expanded="{subOptions ? submenuOpen : undefined}"
class:bx--menu-option="{true}"
class:bx--menu-option--disabled="{true}"
class:bx--menu-option--active="{subOptions && submenuOpen}"
class:bx--menu-option--danger="{!subOptions && kind === 'danger'}"
class:cds--menu-option="{true}"
class:cds--menu-option--disabled="{true}"
class:cds--menu-option--active="{subOptions && submenuOpen}"
class:cds--menu-option--danger="{!subOptions && kind === 'danger'}"
indented="{indented}"
aria-checked="{isSelectable || isRadio ? selected : undefined}"
data-nested="{ref &&
ref.closest('.bx--menu').getAttribute('data-level') === '2'}"
ref.closest('.cds--menu').getAttribute('data-level') === '2'}"
data-sub="{subOptions}"
data-id="{id}"
{...$$restProps}
@ -240,20 +240,20 @@
>
{#if subOptions}
<div
class:bx--menu-option__content="{true}"
class:bx--menu-option__content--disabled="{disabled}"
class:cds--menu-option__content="{true}"
class:cds--menu-option__content--disabled="{disabled}"
>
{#if indented}
<div class:bx--menu-option__icon="{true}">
<div class:cds--menu-option__icon="{true}">
<slot name="icon">
<svelte:component this="{icon}" />
</slot>
</div>
{/if}
<span class:bx--menu-option__label="{true}" title="{labelText}">
<span class:cds--menu-option__label="{true}" title="{labelText}">
<slot name="labelText">{labelText}</slot>
</span>
<div class:bx--menu-option__info="{true}"><CaretRight /></div>
<div class:cds--menu-option__info="{true}"><CaretRight /></div>
</div>
<ContextMenu
@ -265,20 +265,20 @@
</ContextMenu>
{:else}
<div
class:bx--menu-option__content="{true}"
class:bx--menu-option__content--disabled="{disabled}"
class:cds--menu-option__content="{true}"
class:cds--menu-option__content--disabled="{disabled}"
>
{#if indented}
<div class:bx--menu-option__icon="{true}">
<div class:cds--menu-option__icon="{true}">
<slot name="icon">
<svelte:component this="{icon}" />
</slot>
</div>
{/if}
<span class:bx--menu-option__label="{true}" title="{labelText}">
<span class:cds--menu-option__label="{true}" title="{labelText}">
<slot name="labelText">{labelText}</slot>
</span>
<div class:bx--menu-option__info="{true}">
<div class:cds--menu-option__info="{true}">
<slot name="shortcutText">{shortcutText}</slot>
</div>
</div>

16
src/CopyButton/CopyButton.svelte
View file

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

43
src/DataTable/DataTable.svelte
View file

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

32
src/DataTable/DataTableSkeleton.svelte
View file

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

38
src/DataTable/Table.svelte
View file

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

12
src/DataTable/TableContainer.svelte
View file

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

14
src/DataTable/TableHeader.svelte
View file

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

6
src/DataTable/Toolbar.svelte
View file

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

12
src/DataTable/ToolbarBatchActions.svelte
View file

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

2
src/DataTable/ToolbarMenu.svelte
View file

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

8
src/DataTable/ToolbarSearch.svelte
View file

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

16
src/DatePicker/DatePicker.svelte
View file

@ -240,7 +240,7 @@
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
class:bx--form-item="{true}"
class:cds--form-item="{true}"
{...$$restProps}
on:click
on:mouseover
@ -251,13 +251,13 @@
<div
bind:this="{datePickerRef}"
id="{id}"
class:bx--date-picker="{true}"
class:bx--date-picker--short="{short}"
class:bx--date-picker--light="{light}"
class:bx--date-picker--simple="{datePickerType === 'simple'}"
class:bx--date-picker--single="{datePickerType === 'single'}"
class:bx--date-picker--range="{datePickerType === 'range'}"
class:bx--date-picker--nolabel="{datePickerType === 'range' &&
class:cds--date-picker="{true}"
class:cds--date-picker--short="{short}"
class:cds--date-picker--light="{light}"
class:cds--date-picker--simple="{datePickerType === 'simple'}"
class:cds--date-picker--single="{datePickerType === 'single'}"
class:cds--date-picker--range="{datePickerType === 'range'}"
class:cds--date-picker--nolabel="{datePickerType === 'range' &&
$labelTextEmpty}"
on:keydown="{(e) => {
if (calendar?.isOpen && e.key === 'Escape') {

38
src/DatePicker/DatePickerInput.svelte
View file

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

20
src/DatePicker/DatePickerSkeleton.svelte
View file

@ -9,7 +9,7 @@
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
class:bx--form-item="{true}"
class:cds--form-item="{true}"
{...$$restProps}
on:click
on:mouseover
@ -17,18 +17,18 @@
on:mouseleave
>
<div
class:bx--date-picker="{true}"
class:bx--skeleton="{true}"
class:bx--date-picker--range="{true}"
class:bx--date-picker--short="{!range}"
class:bx--date-picker--simple="{!range}"
class:cds--date-picker="{true}"
class:cds--skeleton="{true}"
class:cds--date-picker--range="{true}"
class:cds--date-picker--short="{!range}"
class:cds--date-picker--simple="{!range}"
>
{#each Array.from({ length: range ? 2 : 1 }, (_, i) => i) as input, i (input)}
<div class:bx--date-picker-container="{true}">
<label for="{id}" class:bx--label="{true}"></label>
<div class:cds--date-picker-container="{true}">
<label for="{id}" class:cds--label="{true}"></label>
<div
class:bx--date-picker__input="{true}"
class:bx--skeleton="{true}"
class:cds--date-picker__input="{true}"
class:cds--skeleton="{true}"
></div>
</div>
{/each}

12
src/DatePicker/createCalendar.js
View file

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

14
src/Dropdown/DropdownSkeleton.svelte
View file

@ -6,18 +6,18 @@
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
class:bx--skeleton="{true}"
class:bx--dropdown-v2="{true}"
class:bx--list-box="{true}"
class:bx--form-item="{true}"
class:bx--list-box--inline="{inline}"
class:cds--skeleton="{true}"
class:cds--dropdown-v2="{true}"
class:cds--list-box="{true}"
class:cds--form-item="{true}"
class:cds--list-box--inline="{inline}"
{...$$restProps}
on:click
on:mouseover
on:mouseenter
on:mouseleave
>
<div role="button" class:bx--list-box__field="{true}">
<span class:bx--list-box__label="{true}"></span>
<div role="button" class:cds--list-box__field="{true}">
<span class:cds--list-box__label="{true}"></span>
</div>
</div>

18
src/FileUploader/FileUploader.svelte
View file

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

28
src/FileUploader/FileUploaderButton.svelte
View file

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

12
src/FileUploader/FileUploaderDropContainer.svelte
View file

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

18
src/FileUploader/FileUploaderItem.svelte
View file

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

4
src/FileUploader/FileUploaderSkeleton.svelte
View file

@ -6,7 +6,7 @@
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
class:bx--form-item="{true}"
class:cds--form-item="{true}"
{...$$restProps}
on:click
on:mouseover
@ -14,6 +14,6 @@
on:mouseleave
>
<SkeletonText heading width="100px" />
<SkeletonText width="225px" class="bx--label-description" />
<SkeletonText width="225px" class="cds--label-description" />
<ButtonSkeleton />
</div>

6
src/FileUploader/Filename.svelte
View file

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

2
src/FluidForm/FluidForm.svelte
View file

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

2
src/Form/Form.svelte
View file

@ -6,7 +6,7 @@
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<form
class:bx--form="{true}"
class:cds--form="{true}"
bind:this="{ref}"
{...$$restProps}
on:click

8
src/FormGroup/FormGroup.svelte
View file

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

2
src/FormItem/FormItem.svelte
View file

@ -1,7 +1,7 @@
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
class:bx--form-item="{true}"
class:cds--form-item="{true}"
{...$$restProps}
on:click
on:mouseover

2
src/FormLabel/FormLabel.svelte
View file

@ -6,7 +6,7 @@
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<label
class:bx--label="{true}"
class:cds--label="{true}"
for="{id}"
{...$$restProps}
on:click

22
src/Grid/Column.svelte
View file

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

16
src/Grid/Grid.svelte
View file

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

14
src/Grid/Row.svelte
View file

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

10
src/InlineLoading/InlineLoading.svelte
View file

@ -48,7 +48,7 @@
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
class:bx--inline-loading="{true}"
class:cds--inline-loading="{true}"
aria-live="assertive"
{...$$restProps}
on:click
@ -56,15 +56,15 @@
on:mouseenter
on:mouseleave
>
<div class:bx--inline-loading__animation="{true}">
<div class:cds--inline-loading__animation="{true}">
{#if status === "error"}
<ErrorFilled
class="bx--inline-loading--error"
class="cds--inline-loading--error"
title="{iconDescription || status}"
/>
{:else if status === "finished"}
<CheckmarkFilled
class="bx--inline-loading__checkmark-container"
class="cds--inline-loading__checkmark-container"
title="{iconDescription || status}"
/>
{:else if status === "inactive" || status === "active"}
@ -77,6 +77,6 @@
{/if}
</div>
{#if description}
<div class:bx--inline-loading__text="{true}">{description}</div>
<div class:cds--inline-loading__text="{true}">{description}</div>
{/if}
</div>

24
src/Link/Link.svelte
View file

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

20
src/ListBox/ListBox.svelte
View file

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

2
src/ListBox/ListBoxField.svelte
View file

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

2
src/ListBox/ListBoxMenu.svelte
View file

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

4
src/ListBox/ListBoxMenuIcon.svelte
View file

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

8
src/ListBox/ListBoxMenuItem.svelte
View file

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

18
src/ListBox/ListBoxSelection.svelte
View file

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

2
src/ListItem/ListItem.svelte
View file

@ -1,7 +1,7 @@
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<li
class:bx--list__item="{true}"
class:cds--list__item="{true}"
{...$$restProps}
on:click
on:mouseover

28
src/Loading/Loading.svelte
View file

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

54
src/Modal/Modal.svelte
View file

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

2
src/Modal/modalStore.js
View file

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

26
src/Notification/InlineNotification.svelte
View file

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

2
src/Notification/NotificationActionButton.svelte
View file

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

8
src/Notification/NotificationButton.svelte
View file

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

4
src/Notification/NotificationIcon.svelte
View file

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

24
src/Notification/ToastNotification.svelte
View file

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

50
src/NumberInput/NumberInput.svelte
View file

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

6
src/NumberInput/NumberInputSkeleton.svelte
View file

@ -6,7 +6,7 @@
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
class:bx--form-item="{true}"
class:cds--form-item="{true}"
{...$$restProps}
on:click
on:mouseover
@ -14,7 +14,7 @@
on:mouseleave
>
{#if !hideLabel}
<span class:bx--label="{true}" class:bx--skeleton="{true}"></span>
<span class:cds--label="{true}" class:cds--skeleton="{true}"></span>
{/if}
<div class:bx--number="{true}" class:bx--skeleton="{true}"></div>
<div class:cds--number="{true}" class:cds--skeleton="{true}"></div>
</div>

8
src/OrderedList/OrderedList.svelte
View file

@ -12,10 +12,10 @@
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<ol
class:bx--list--ordered="{!native}"
class:bx--list--ordered--native="{native}"
class:bx--list--nested="{nested}"
class:bx--list--expressive="{expressive}"
class:cds--list--ordered="{!native}"
class:cds--list--ordered--native="{native}"
class:cds--list--nested="{nested}"
class:cds--list--expressive="{expressive}"
{...$$restProps}
on:click
on:mouseover

28
src/OverflowMenu/OverflowMenu.svelte
View file

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

14
src/OverflowMenu/OverflowMenuItem.svelte
View file

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

32
src/Pagination/Pagination.svelte
View file

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

10
src/Pagination/PaginationSkeleton.svelte
View file

@ -5,22 +5,22 @@
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
class:bx--pagination="{true}"
class:bx--skeleton="{true}"
class:cds--pagination="{true}"
class:cds--skeleton="{true}"
{...$$restProps}
on:click
on:mouseover
on:mouseenter
on:mouseleave
>
<div class:bx--pagination__left="{true}">
<div class:cds--pagination__left="{true}">
<SkeletonText width="70px" />
<SkeletonText width="35px" />
<SkeletonText width="105px" />
</div>
<div
class:bx--pagination__right="{true}"
class:bx--pagination--inline="{true}"
class:cds--pagination__right="{true}"
class:cds--pagination--inline="{true}"
>
<SkeletonText width="70px" />
</div>

8
src/PaginationNav/PaginationItem.svelte
View file

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

14
src/PaginationNav/PaginationNav.svelte
View file

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

12
src/PaginationNav/PaginationOverflow.svelte
View file

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

36
src/Popover/Popover.svelte
View file

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

6
src/Popover/PopoverContent.svelte
View file

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

28
src/ProgressBar/ProgressBar.svelte
View file

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

6
src/ProgressIndicator/ProgressIndicator.svelte
View file

@ -66,9 +66,9 @@
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<ul
class:bx--progress="{true}"
class:bx--progress--vertical="{vertical}"
class:bx--progress--space-equal="{spaceEqually && !vertical}"
class:cds--progress="{true}"
class:cds--progress--vertical="{vertical}"
class:cds--progress--space-equal="{spaceEqually && !vertical}"
{...$$restProps}
on:click
on:mouseover

18
src/ProgressIndicator/ProgressIndicatorSkeleton.svelte
View file

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

26
src/ProgressIndicator/ProgressStep.svelte
View file

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

12
src/RadioButton/RadioButton.svelte
View file

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

6
src/RadioButton/RadioButtonSkeleton.svelte
View file

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

15
src/RadioButtonGroup/RadioButtonGroup.svelte
View file

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

2
src/RecursiveList/RecursiveListItem.svelte
View file

@ -13,7 +13,7 @@
<ListItem>
{#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}
<slot />
</ListItem>

28
src/Search/Search.svelte
View file

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

12
src/Search/SearchSkeleton.svelte
View file

@ -9,16 +9,16 @@
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
class:bx--skeleton="{true}"
class:bx--search--sm="{size === 'sm'}"
class:bx--search--md="{size === 'md'}"
class:bx--search--lg="{size === 'lg'}"
class:cds--skeleton="{true}"
class:cds--search--sm="{size === 'sm'}"
class:cds--search--md="{size === 'md'}"
class:cds--search--lg="{size === 'lg'}"
{...$$restProps}
on:click
on:mouseover
on:mouseenter
on:mouseleave
>
<span class:bx--label="{true}"></span>
<div class:bx--search-input="{true}"></div>
<span class:cds--label="{true}"></span>
<div class:cds--search-input="{true}"></div>
</div>

62
src/Select/Select.svelte
View file

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

2
src/Select/SelectItem.svelte
View file

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

2
src/Select/SelectItemGroup.svelte
View file

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

8
src/Select/SelectSkeleton.svelte
View file

@ -6,7 +6,7 @@
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
class:bx--form-item="{true}"
class:cds--form-item="{true}"
{...$$restProps}
on:click
on:mouseover
@ -14,9 +14,9 @@
on:mouseleave
>
{#if !hideLabel}
<span class:bx--label="{true}" class:bx--skeleton="{true}"></span>
<span class:cds--label="{true}" class:cds--skeleton="{true}"></span>
{/if}
<div class:bx--select="{true}" class:bx--skeleton="{true}">
<div class:bx--select-input="{true}"></div>
<div class:cds--select="{true}" class:cds--skeleton="{true}">
<div class:cds--select-input="{true}"></div>
</div>
</div>

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