@lyeve-labs/ui-kit 0.9.1 → 0.10.1

package/dist/components/AccordionItem.svelte

@@ -29,7 +29,7 @@
     onclick={() => ctx?.toggle(id)}
     aria-expanded={open}
     class="flex w-full items-center justify-between px-5 py-4 text-left text-sm font-medium
-      text-fg transition-colors hover:bg-surface-2/50"
+      text-fg transition-colors duration-150 hover:bg-surface-2/50"
   >
     <span>{title}</span>
     <svg

package/dist/components/Alert.svelte

@@ -1,10 +1,14 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
-
-  type Tone = 'info' | 'success' | 'warn' | 'danger';
+  import {
+    TONE_GLYPH,
+    statusTone,
+    type StatusTone,
+    type StatusToneInput,
+  } from '../internal/tone.js';
 
   interface Props {
-    tone?: Tone;
+    tone?: StatusToneInput;
     title?: string;
     dismissible?: boolean;
     ondismiss?: () => void;
@@ -13,7 +17,7 @@
   }
 
   let {
-    tone = 'info',
+    tone = 'brand',
     title = undefined,
     dismissible = false,
     ondismiss = undefined,
@@ -21,25 +25,39 @@
     children,
   }: Props = $props();
 
-  const tones: Record<Tone, { wrap: string; icon: string; mark: string }> = {
-    info: { wrap: 'bg-brand/8 border-brand/25', icon: 'text-brand', mark: 'ℹ' },
-    success: { wrap: 'bg-success/8 border-success/25', icon: 'text-success', mark: '✓' },
-    warn: { wrap: 'bg-warn/8 border-warn/25', icon: 'text-warn', mark: '!' },
-    danger: { wrap: 'bg-danger/8 border-danger/25', icon: 'text-danger', mark: '×' },
+  const tones: Record<StatusTone, { wrap: string; icon: string }> = {
+    neutral: { wrap: 'bg-surface-2 border-line', icon: 'text-muted' },
+    brand: { wrap: 'bg-brand/8 border-brand/25', icon: 'text-brand' },
+    success: { wrap: 'bg-success/8 border-success/25', icon: 'text-success' },
+    warn: { wrap: 'bg-warn/8 border-warn/25', icon: 'text-warn' },
+    danger: { wrap: 'bg-danger/8 border-danger/25', icon: 'text-danger' },
   };
+
+  const t = $derived(statusTone(tone));
 </script>
 
 <div
-  class="flex items-start gap-3 rounded-lg border px-4 py-3 {tones[tone].wrap} {klass}"
+  class="flex items-start gap-3 rounded-lg border px-4 py-3 {tones[t].wrap} {klass}"
   role="alert"
 >
   <span
-    class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-current text-xs font-bold {tones[
-      tone
+    class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-current {tones[
+      t
     ].icon}"
     aria-hidden="true"
   >
-    {tones[tone].mark}
+    <svg
+      width="11"
+      height="11"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d={TONE_GLYPH[t]} />
+    </svg>
   </span>
   <div class="flex-1 min-w-0">
     {#if title}<p class="text-sm font-semibold text-fg">{title}</p>{/if}
@@ -51,10 +69,19 @@
     <button
       type="button"
       onclick={ondismiss}
-      class="text-faint hover:text-fg transition-colors text-lg leading-none -mt-0.5"
+      class="shrink-0 text-faint transition-colors duration-150 hover:text-fg"
       aria-label="Dismiss"
     >
-      ×
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        aria-hidden="true"><path d="M18 6L6 18M6 6l12 12" /></svg
+      >
     </button>
   {/if}
 </div>

package/dist/components/Alert.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
-type Tone = 'info' | 'success' | 'warn' | 'danger';
+import { type StatusToneInput } from '../internal/tone.js';
 interface Props {
-    tone?: Tone;
+    tone?: StatusToneInput;
     title?: string;
     dismissible?: boolean;
     ondismiss?: () => void;

package/dist/components/Autocomplete.svelte

@@ -1,4 +1,13 @@
 <script lang="ts">
+  import {
+    CONTROL_BASE,
+    FIELD_ERROR,
+    FIELD_HINT,
+    FIELD_LABEL,
+    FIELD_WRAP,
+    controlBorder,
+    describedBy,
+  } from '../internal/field.js';
   // Autocomplete (combobox): type to filter a list, navigate with ↑/↓, select with
   // Enter. Binds `value` to the chosen option's value; shows its label in the input.
   interface Option {
@@ -111,10 +120,10 @@
   });
 </script>
 
-<div class="flex flex-col gap-1.5 {cls}" bind:this={containerEl}>
+<div class="{FIELD_WRAP} {cls}" bind:this={containerEl}>
   {#if label}
-    <label for={id} class="text-sm font-medium text-fg">
-      {label}{#if required}<span class="text-danger ml-0.5">*</span>{/if}
+    <label for={id} class={FIELD_LABEL}>
+      {label}{#if required}<span class="text-danger ml-0.5" aria-label="required">*</span>{/if}
     </label>
   {/if}
 
@@ -135,19 +144,30 @@
       onkeydown={onKeydown}
       onfocus={() => (open = true)}
       onblur={() => setTimeout(() => (open = false), 150)}
-      class="w-full rounded-lg bg-surface-2 border px-3 py-2 text-sm text-fg placeholder:text-faint
-        transition-colors outline-none disabled:opacity-50 disabled:cursor-not-allowed
-        {allowClear && value ? 'pr-8' : 'pr-3'}
-        {error ? 'border-danger focus:border-danger' : 'border-line focus:border-brand'}"
+      aria-invalid={error ? 'true' : undefined}
+      aria-describedby={describedBy(id, error, hint)}
+      class="{CONTROL_BASE} {controlBorder(!!error)} {allowClear && value ? 'pr-8' : 'pr-3'}"
     />
     {#if allowClear && value && !disabled}
       <button
         type="button"
         aria-label="Clear"
         onclick={clear}
-        class="absolute right-2.5 top-1/2 -translate-y-1/2 text-faint hover:text-fg leading-none"
-        >×</button
+        class="absolute right-2.5 top-1/2 -translate-y-1/2 text-faint transition-colors duration-150 hover:text-fg"
       >
+        <svg
+          width="12"
+          height="12"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2.5"
+          stroke-linecap="round"
+          aria-hidden="true"
+        >
+          <path d="M18 6L6 18M6 6l12 12" />
+        </svg>
+      </button>
     {/if}
 
     {#if open}
@@ -165,7 +185,7 @@
             disabled={opt.disabled}
             onmouseenter={() => (active = i)}
             onclick={() => choose(opt)}
-            class="w-full flex items-center justify-between px-3 py-2 text-sm text-left transition-colors
+            class="w-full flex items-center justify-between px-3 py-2 text-sm text-left transition-colors duration-150
               disabled:opacity-40 disabled:cursor-not-allowed
               {i === active ? 'bg-surface-2' : ''}
               {opt.value === value ? 'text-brand' : 'text-fg'}"
@@ -191,8 +211,8 @@
   </div>
 
   {#if error}
-    <p class="text-xs text-danger">{error}</p>
+    <p id={id ? `${id}-error` : undefined} class={FIELD_ERROR}>{error}</p>
   {:else if hint}
-    <p class="text-xs text-faint">{hint}</p>
+    <p id={id ? `${id}-hint` : undefined} class={FIELD_HINT}>{hint}</p>
   {/if}
 </div>

package/dist/components/Avatar.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { brokenImage } from '../utils/broken-image.js';
+
   let {
     name,
     src,
@@ -49,16 +51,10 @@
   class="inline-flex items-center justify-center rounded-full font-semibold shrink-0
     {s.wrap} {hue} text-ink {cls}"
   title={name}
+  use:brokenImage={() => (imgError = true)}
 >
   {#if src && !imgError}
-    <img
-      {src}
-      alt={name}
-      class="w-full h-full rounded-full object-cover"
-      onerror={() => {
-        imgError = true;
-      }}
-    />
+    <img {src} alt={name} class="w-full h-full rounded-full object-cover" />
   {:else}
     <span class={s.text}>{initials}</span>
   {/if}

package/dist/components/Badge.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
+  import type { AccentTone } from '../internal/tone.js';
   import type { Snippet } from 'svelte';
 
-  type Tone = 'neutral' | 'brand' | 'violet' | 'success' | 'warn' | 'danger';
   type Size = 'sm' | 'md';
 
   interface Props {
-    tone?: Tone;
+    tone?: AccentTone;
     size?: Size;
     dot?: boolean;
     class?: string;
@@ -14,7 +14,7 @@
 
   let { tone = 'neutral', size = 'sm', dot = false, class: klass = '', children }: Props = $props();
 
-  const tones: Record<Tone, string> = {
+  const tones: Record<AccentTone, string> = {
     neutral: 'bg-surface-2 text-muted border-line',
     brand: 'bg-brand/10 text-brand border-brand/20',
     violet: 'bg-violet/10 text-violet border-violet/20',
@@ -23,7 +23,7 @@
     danger: 'bg-danger/10 text-danger border-danger/20',
   };
 
-  const dotColor: Record<Tone, string> = {
+  const dotColor: Record<AccentTone, string> = {
     neutral: 'bg-muted',
     brand: 'bg-brand',
     violet: 'bg-violet',

package/dist/components/Badge.svelte.d.ts

@@ -1,8 +1,8 @@
+import type { AccentTone } from '../internal/tone.js';
 import type { Snippet } from 'svelte';
-type Tone = 'neutral' | 'brand' | 'violet' | 'success' | 'warn' | 'danger';
 type Size = 'sm' | 'md';
 interface Props {
-    tone?: Tone;
+    tone?: AccentTone;
     size?: Size;
     dot?: boolean;
     class?: string;

package/dist/components/Banner.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
+  import { statusTone, type StatusTone, type StatusToneInput } from '../internal/tone.js';
   import type { Snippet } from 'svelte';
 
-  type Tone = 'info' | 'success' | 'warn' | 'danger' | 'neutral';
-
   interface Props {
-    tone?: Tone;
+    tone?: StatusToneInput;
     dismissible?: boolean;
     ondismiss?: () => void;
     class?: string;
@@ -13,7 +12,7 @@
   }
 
   let {
-    tone = 'info',
+    tone = 'brand',
     dismissible = false,
     ondismiss = undefined,
     class: cls = '',
@@ -28,19 +27,21 @@
     ondismiss?.();
   }
 
-  const tones: Record<Tone, string> = {
-    info: 'bg-brand/10 border-brand/20',
+  const tones: Record<StatusTone, string> = {
+    neutral: 'bg-surface-2 border-line',
+    brand: 'bg-brand/10 border-brand/20',
     success: 'bg-success/10 border-success/20',
     warn: 'bg-warn/10 border-warn/20',
     danger: 'bg-danger/10 border-danger/20',
-    neutral: 'bg-surface-2 border-line',
   };
+
+  const t = $derived(statusTone(tone));
 </script>
 
 {#if visible}
   <div
     role="status"
-    class="relative flex items-center gap-3 border-b px-4 py-3 text-sm {tones[tone]} {cls}"
+    class="relative flex items-center gap-3 border-b px-4 py-3 text-sm {tones[t]} {cls}"
   >
     <div class="flex flex-1 items-center justify-center gap-3 text-fg">
       {@render children()}
@@ -55,7 +56,7 @@
         type="button"
         onclick={dismiss}
         aria-label="Dismiss"
-        class="shrink-0 text-faint transition-colors hover:text-fg"
+        class="shrink-0 text-faint transition-colors duration-150 hover:text-fg"
       >
         <svg
           width="16"

package/dist/components/Banner.svelte.d.ts

@@ -1,7 +1,7 @@
+import { type StatusToneInput } from '../internal/tone.js';
 import type { Snippet } from 'svelte';
-type Tone = 'info' | 'success' | 'warn' | 'danger' | 'neutral';
 interface Props {
-    tone?: Tone;
+    tone?: StatusToneInput;
     dismissible?: boolean;
     ondismiss?: () => void;
     class?: string;

package/dist/components/Breadcrumb.svelte

@@ -32,7 +32,10 @@
     {/if}
 
     {#if item.href && i < items.length - 1}
-      <a href={safeUrl(item.href)} class="text-muted hover:text-fg transition-colors truncate">
+      <a
+        href={safeUrl(item.href)}
+        class="text-muted hover:text-fg transition-colors duration-150 truncate"
+      >
         {item.label}
       </a>
     {:else}

package/dist/components/Button.svelte

@@ -13,6 +13,7 @@
     type?: 'button' | 'submit' | 'reset';
     href?: string;
     full?: boolean;
+    class?: string;
     onclick?: (e: MouseEvent) => void;
     children: Snippet;
     [key: string]: unknown;
@@ -26,6 +27,7 @@
     type = 'button',
     href = undefined,
     full = false,
+    class: klass = '',
     onclick,
     children,
     ...rest
@@ -49,9 +51,9 @@
 
   const spinnerSize = $derived(size === 'lg' ? 18 : 15);
   const cls = $derived(
-    `inline-flex items-center justify-center font-medium transition-all duration-150 ` +
+    `inline-flex items-center justify-center font-medium transition-colors duration-150 ` +
       `disabled:opacity-50 disabled:cursor-not-allowed select-none ` +
-      `${full ? 'w-full' : ''} ${variants[variant]} ${sizes[size]}`,
+      `${full ? 'w-full' : ''} ${variants[variant]} ${sizes[size]} ${klass}`,
   );
 
   // Reject javascript: and data: URIs - only allow standard schemes and relative URLs.

package/dist/components/Button.svelte.d.ts

@@ -9,6 +9,7 @@ interface Props {
     type?: 'button' | 'submit' | 'reset';
     href?: string;
     full?: boolean;
+    class?: string;
     onclick?: (e: MouseEvent) => void;
     children: Snippet;
     [key: string]: unknown;

package/dist/components/Card.svelte

@@ -41,7 +41,7 @@
      so the element is interactive; the compiler can't narrow the dynamic role. -->
 <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 <div
-  class="bg-surface border border-line rounded-xl overflow-hidden transition-colors {hover
+  class="bg-surface border border-line rounded-xl overflow-hidden transition-colors duration-150 {hover
     ? 'hover:border-line/0 hover:ring-1 hover:ring-brand/30'
     : ''} {onclick ? 'cursor-pointer' : ''} {klass}"
   role={onclick ? 'button' : undefined}

package/dist/components/Checkbox.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { FIELD_HINT } from '../internal/field.js';
   let {
     checked = $bindable(false),
     label,
@@ -8,6 +9,7 @@
     id,
     name,
     value,
+    class: cls = '',
     onchange,
   }: {
     checked?: boolean;
@@ -18,6 +20,7 @@
     id?: string;
     name?: string;
     value?: string;
+    class?: string;
     onchange?: (checked: boolean) => void;
   } = $props();
 
@@ -28,9 +31,9 @@
 </script>
 
 <label
-  class="flex items-start gap-2.5 cursor-pointer select-none {disabled
+  class="inline-flex items-start gap-2.5 cursor-pointer select-none {disabled
     ? 'opacity-50 cursor-not-allowed'
-    : ''}"
+    : ''} {cls}"
 >
   <span class="relative flex items-center justify-center mt-0.5 shrink-0">
     <input
@@ -45,7 +48,7 @@
       class="peer sr-only"
     />
     <span
-      class="w-4 h-4 rounded border transition-colors flex items-center justify-center
+      class="w-4 h-4 rounded border transition-colors duration-150 flex items-center justify-center
         {checked
         ? 'bg-brand border-brand'
         : 'bg-surface-2 border-line peer-focus-visible:border-brand'}"
@@ -73,7 +76,7 @@
         </span>
       {/if}
       {#if hint}
-        <span class="text-xs text-faint">{hint}</span>
+        <span class={FIELD_HINT}>{hint}</span>
       {/if}
     </span>
   {/if}

package/dist/components/Checkbox.svelte.d.ts

@@ -7,6 +7,7 @@ type $$ComponentProps = {
     id?: string;
     name?: string;
     value?: string;
+    class?: string;
     onchange?: (checked: boolean) => void;
 };
 declare const Checkbox: import("svelte").Component<$$ComponentProps, {}, "checked">;

package/dist/components/DatePicker.svelte

@@ -1,4 +1,13 @@
 <script lang="ts">
+  import {
+    CONTROL_BASE,
+    FIELD_ERROR,
+    FIELD_HINT,
+    FIELD_LABEL,
+    FIELD_WRAP,
+    controlBorder,
+    describedBy,
+  } from '../internal/field.js';
   // DatePicker: a text trigger + calendar popover. Binds `value` to an ISO date
   // string ("YYYY-MM-DD"). Pure local-date math (no timezone surprises).
   let {
@@ -151,10 +160,10 @@
   });
 </script>
 
-<div class="flex flex-col gap-1.5 {cls}" bind:this={containerEl}>
+<div class="{FIELD_WRAP} {cls}" bind:this={containerEl}>
   {#if label}
-    <label for={id} class="text-sm font-medium text-fg">
-      {label}{#if required}<span class="text-danger ml-0.5">*</span>{/if}
+    <label for={id} class={FIELD_LABEL}>
+      {label}{#if required}<span class="text-danger ml-0.5" aria-label="required">*</span>{/if}
     </label>
   {/if}
 
@@ -164,9 +173,8 @@
       {id}
       {disabled}
       onclick={() => (open ? (open = false) : openCal())}
-      class="w-full flex items-center justify-between rounded-lg border bg-surface-2 px-3 py-2 text-sm
-        transition-colors outline-none disabled:opacity-50 disabled:cursor-not-allowed
-        {error ? 'border-danger focus:border-danger' : 'border-line focus:border-brand'}"
+      aria-describedby={describedBy(id, error, hint)}
+      class="{CONTROL_BASE} {controlBorder(!!error)} flex items-center justify-between text-left"
     >
       <span class={display ? 'text-fg' : 'text-faint'}>{display || placeholder}</span>
       <span class="text-faint shrink-0" aria-hidden="true">
@@ -200,7 +208,7 @@
             type="button"
             aria-label="Previous month"
             onclick={prevMonth}
-            class="p-1.5 rounded-md text-muted hover:bg-surface-2 hover:text-fg transition-colors"
+            class="p-1.5 rounded-md text-muted hover:bg-surface-2 hover:text-fg transition-colors duration-150"
           >
             <svg width="14" height="14" viewBox="0 0 12 12" fill="none"
               ><path
@@ -217,7 +225,7 @@
             type="button"
             aria-label="Next month"
             onclick={nextMonth}
-            class="p-1.5 rounded-md text-muted hover:bg-surface-2 hover:text-fg transition-colors"
+            class="p-1.5 rounded-md text-muted hover:bg-surface-2 hover:text-fg transition-colors duration-150"
           >
             <svg width="14" height="14" viewBox="0 0 12 12" fill="none"
               ><path
@@ -251,7 +259,7 @@
                 onclick={() => pick(d)}
                 aria-current={iso === todayISO ? 'date' : undefined}
                 aria-label={iso}
-                class="h-8 w-8 mx-auto flex items-center justify-center rounded-md text-sm transition-colors
+                class="h-8 w-8 mx-auto flex items-center justify-center rounded-md text-sm transition-colors duration-150
                   disabled:opacity-30 disabled:cursor-not-allowed
                   {iso === value
                   ? 'bg-brand text-ink font-medium'
@@ -267,8 +275,8 @@
   </div>
 
   {#if error}
-    <p class="text-xs text-danger">{error}</p>
+    <p id={id ? `${id}-error` : undefined} class={FIELD_ERROR}>{error}</p>
   {:else if hint}
-    <p class="text-xs text-faint">{hint}</p>
+    <p id={id ? `${id}-hint` : undefined} class={FIELD_HINT}>{hint}</p>
   {/if}
 </div>

package/dist/components/Drawer.svelte

@@ -75,9 +75,20 @@
           <button
             type="button"
             onclick={close}
-            class="-mt-0.5 text-xl leading-none text-faint transition-colors hover:text-fg"
-            aria-label="Close">×</button
+            class="-mt-0.5 text-xl leading-none text-faint transition-colors duration-150 hover:text-fg"
+            aria-label="Close"
           >
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              aria-hidden="true"><path d="M18 6L6 18M6 6l12 12" /></svg
+            >
+          </button>
         </div>
       {/if}
 

package/dist/components/Dropdown.svelte

@@ -70,7 +70,7 @@
           role="menuitem"
           disabled={item.disabled}
           onclick={() => handleItemClick(item)}
-          class="w-full flex items-center gap-2.5 px-3 py-2 text-sm transition-colors
+          class="w-full flex items-center gap-2.5 px-3 py-2 text-sm transition-colors duration-150
             disabled:opacity-40 disabled:cursor-not-allowed
             {item.variant === 'danger'
             ? 'text-danger hover:bg-danger/10'

package/dist/components/FileInput.svelte

@@ -1,4 +1,11 @@
 <script lang="ts">
+  import {
+    FIELD_ERROR,
+    FIELD_HINT,
+    FIELD_LABEL,
+    FIELD_WRAP,
+    describedBy,
+  } from '../internal/field.js';
   interface Props {
     id?: string;
     name?: string;
@@ -39,15 +46,15 @@
   }
 </script>
 
-<div class="flex flex-col gap-1.5 {cls}">
+<div class="{FIELD_WRAP} {cls}">
   {#if label}
-    <label for={id} class="text-sm font-medium text-fg">{label}</label>
+    <label for={id} class={FIELD_LABEL}>{label}</label>
   {/if}
 
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <label
     class="flex w-full cursor-pointer flex-col items-center justify-center gap-2 rounded-xl
-      border-2 border-dashed px-4 py-8 text-center transition-colors
+      border-2 border-dashed px-4 py-8 text-center transition-colors duration-150
       {error
       ? 'border-danger bg-danger/5 hover:bg-danger/8'
       : dragOver
@@ -90,13 +97,15 @@
       {multiple}
       {disabled}
       onchange={handleChange}
+      aria-invalid={error ? 'true' : undefined}
+      aria-describedby={describedBy(id, error, hint)}
       class="sr-only"
     />
   </label>
 
   {#if error}
-    <p class="text-xs text-danger">{error}</p>
+    <p id={id ? `${id}-error` : undefined} class={FIELD_ERROR}>{error}</p>
   {:else if hint}
-    <p class="text-xs text-faint">{hint}</p>
+    <p id={id ? `${id}-hint` : undefined} class={FIELD_HINT}>{hint}</p>
   {/if}
 </div>

package/dist/components/Indicator.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-  type Tone = 'brand' | 'success' | 'warn' | 'danger' | 'neutral' | 'violet';
+  import type { AccentTone } from '../internal/tone.js';
   type Size = 'xs' | 'sm' | 'md' | 'lg';
 
   interface Props {
-    tone?: Tone;
+    tone?: AccentTone;
     pulse?: boolean;
     size?: Size;
     class?: string;
@@ -11,7 +11,7 @@
 
   let { tone = 'success', pulse = false, size = 'sm', class: cls = '' }: Props = $props();
 
-  const tones: Record<Tone, string> = {
+  const tones: Record<AccentTone, string> = {
     brand: 'bg-brand',
     success: 'bg-success',
     warn: 'bg-warn',

package/dist/components/Indicator.svelte.d.ts

@@ -1,7 +1,7 @@
-type Tone = 'brand' | 'success' | 'warn' | 'danger' | 'neutral' | 'violet';
+import type { AccentTone } from '../internal/tone.js';
 type Size = 'xs' | 'sm' | 'md' | 'lg';
 interface Props {
-    tone?: Tone;
+    tone?: AccentTone;
     pulse?: boolean;
     size?: Size;
     class?: string;