@sentropic/design-system-svelte 0.10.2 → 0.10.4

package/dist/Menu.svelte

@@ -62,6 +62,26 @@
   }: MenuProps = $props();
 
   let host: HTMLDivElement | undefined = $state();
+  function getFocusableItems(): HTMLButtonElement[] {
+    return Array.from(
+      host?.querySelectorAll<HTMLButtonElement>('[role="menuitem"]:not(:disabled)') ?? []
+    );
+  }
+
+  function moveIndex(index: number, size: number, step: number) {
+    if (size <= 0) return 0;
+    return ((index + step) % size + size) % size;
+  }
+
+  function focusAt(index: number) {
+    const focusable = getFocusableItems();
+    if (!focusable.length) return;
+    const target = moveIndex(index, focusable.length, 0);
+    focusable.forEach((button, idx) => {
+      button.tabIndex = idx === target ? 0 : -1;
+    });
+    focusable[target]?.focus();
+  }
 
   const classes = () =>
     ["st-menu", dense ? "st-menu--dense" : null, className].filter(Boolean).join(" ");
@@ -76,6 +96,35 @@
     return item.kind === undefined || item.kind === "item";
   }
 
+  function onItemKeyDown(event: KeyboardEvent, item: MenuActionItem) {
+    const focusable = getFocusableItems();
+    const current = focusable.indexOf(event.currentTarget as HTMLButtonElement);
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      focusAt(current + 1);
+      return;
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      focusAt(current - 1);
+      return;
+    }
+    if (event.key === "Home") {
+      event.preventDefault();
+      focusAt(0);
+      return;
+    }
+    if (event.key === "End") {
+      event.preventDefault();
+      focusAt(focusable.length - 1);
+      return;
+    }
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      if (!item.disabled) selectItem(item);
+    }
+  }
+
   function onWindowKeydown(event: KeyboardEvent) {
     if (event.key === "Escape" && open && dismissOnSelect) {
       event.preventDefault();
@@ -105,6 +154,7 @@
           aria-disabled={item.disabled ? "true" : undefined}
           disabled={item.disabled}
           onclick={() => selectItem(item)}
+          onkeydown={(event) => onItemKeyDown(event, item)}
         >
           {#if Icon}
             <span class="st-menu__itemIcon" aria-hidden="true">
@@ -163,7 +213,7 @@
 
   .st-menu__item:hover:not(:disabled),
   .st-menu__item:focus-visible {
-    background: var(--st-component-menu-itemHoverBackground, var(--st-semantic-surface-subtle));
+    background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
     outline: none;
   }
 
@@ -173,12 +223,15 @@
   }
 
   .st-menu__item--danger {
-    color: var(--st-component-menu-dangerText, var(--st-semantic-feedback-error, #b91c1c));
+    color: var(--st-component-menu-dangerText, var(--st-semantic-feedback-error));
   }
 
   .st-menu__item--danger:hover:not(:disabled),
   .st-menu__item--danger:focus-visible {
-    background: var(--st-component-menu-dangerHoverBackground, rgba(185, 28, 28, 0.08));
+    background: var(
+      --st-component-menu-dangerHoverBackground,
+      var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle))
+    );
   }
 
   .st-menu__itemIcon {

package/dist/Menu.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Menu.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAExC,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,MAAM,CAAC,QAAQ,MAAM,EAAE,EAAE,OAAO,CAAC,CAAC;AAEtC,MAAM,MAAM,QAAQ,GAAG,SAAS,CAAC,aAAa,CAAC,CAAC;AAEhD,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB;AAED,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,SAAS,CAAC;CACjB;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,MAAM,QAAQ,GAAG,cAAc,GAAG,eAAe,GAAG,aAAa,CAAC;AAS1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IAC5E,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AA8EJ,QAAA,MAAM,IAAI,kCAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Menu.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Menu.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAExC,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,MAAM,CAAC,QAAQ,MAAM,EAAE,EAAE,OAAO,CAAC,CAAC;AAEtC,MAAM,MAAM,QAAQ,GAAG,SAAS,CAAC,aAAa,CAAC,CAAC;AAEhD,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB;AAED,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,SAAS,CAAC;CACjB;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,MAAM,QAAQ,GAAG,cAAc,GAAG,eAAe,GAAG,aAAa,CAAC;AAS1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IAC5E,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AA+HJ,QAAA,MAAM,IAAI,kCAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/MessageStatusBadge.svelte

@@ -41,7 +41,7 @@
 </Tag>
 
 <style>
-  .st-messageStatusBadge {
+  :global(.st-messageStatusBadge) {
     align-items: center;
     text-transform: none;
   }

package/dist/MultiSelect.svelte

@@ -346,7 +346,7 @@
   }
 
   .st-multiSelect__tagRemove:hover:not(:disabled) {
-    background: color-mix(in srgb, currentColor 18%, transparent);
+    background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
   }
 
   .st-multiSelect__tagRemove:focus-visible {
@@ -426,7 +426,7 @@
   .st-multiSelect__option:hover:not(:disabled),
   .st-multiSelect__option:focus-visible {
     background: var(
-      --st-component-dropdown-optionHoverBackground,
+      --st-component-control-hoverBackground,
       var(--st-semantic-surface-subtle)
     );
     outline: none;

package/dist/Notification.svelte

@@ -0,0 +1,150 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type NotificationProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    tone?: "info" | "success" | "warning" | "error";
+    title: string;
+    message?: string;
+    dismissible?: boolean;
+    dismissLabel?: string;
+    onDismiss?: () => void;
+    class?: string;
+    actions?: Snippet;
+    children?: Snippet;
+  };
+
+  let {
+    tone = "info",
+    title,
+    message,
+    dismissible = false,
+    dismissLabel = "Dismiss",
+    onDismiss,
+    class: className,
+    actions,
+    children,
+    ...rest
+  }: NotificationProps = $props();
+
+  const classes = () =>
+    ["st-notification", `st-notification--${tone}`, className].filter(Boolean).join(" ");
+
+  const canDismiss = () => dismissible && typeof onDismiss === "function";
+  const role = () => (tone === "error" ? "alert" : "status");
+
+  const onDismissClick = () => onDismiss?.();
+</script>
+
+<section {...rest} class={classes()} role={role()}>
+  <div class="st-notification__content">
+    <h2 class="st-notification__title">{title}</h2>
+    {#if message}
+      <p class="st-notification__message">{message}</p>
+    {/if}
+    {@render children?.()}
+  </div>
+  <div class="st-notification__meta">
+    {#if actions}
+      <div class="st-notification__actions">
+        {@render actions()}
+      </div>
+    {/if}
+    {#if canDismiss()}
+      <button
+        type="button"
+        class="st-notification__close"
+        aria-label={dismissLabel}
+        title={dismissLabel}
+        onclick={onDismissClick}
+      >
+        ×
+      </button>
+    {/if}
+  </div>
+</section>
+
+<style>
+  .st-notification {
+    background: var(--st-component-notification-background, var(--st-semantic-surface-raised));
+    border: 1px solid var(--st-component-notification-border, var(--st-semantic-border-subtle));
+    border-left-width: var(--st-component-notification-accentWidth, 0.25rem);
+    border-left-style: solid;
+    border-left-color: var(--st-component-notification-accent, var(--st-semantic-feedback-info));
+    border-radius: 0;
+    color: var(--st-component-notification-text, var(--st-semantic-text-primary));
+    display: flex;
+    gap: var(--st-spacing-4, 1rem);
+    justify-content: space-between;
+    padding: var(--st-spacing-4, 1rem);
+    width: min(100%, 32rem);
+  }
+
+  .st-notification--info {
+    --st-component-notification-accent: var(--st-component-notification-infoAccent, var(--st-semantic-feedback-info));
+  }
+
+  .st-notification--success {
+    --st-component-notification-accent: var(--st-component-notification-successAccent, var(--st-semantic-feedback-success));
+  }
+
+  .st-notification--warning {
+    --st-component-notification-accent: var(--st-component-notification-warningAccent, var(--st-semantic-feedback-warning));
+  }
+
+  .st-notification--error {
+    --st-component-notification-accent: var(--st-component-notification-errorAccent, var(--st-semantic-feedback-error));
+  }
+
+  .st-notification__content {
+    display: grid;
+    gap: 0.25rem;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .st-notification__title {
+    font-size: 0.9375rem;
+    margin: 0;
+  }
+
+  .st-notification__message {
+    color: var(--st-semantic-text-secondary);
+    font-size: 0.875rem;
+    line-height: 1.5;
+    margin: 0;
+  }
+
+  .st-notification__meta {
+    align-items: start;
+    display: flex;
+    flex-shrink: 0;
+    gap: 0.5rem;
+  }
+
+  .st-notification__actions {
+    align-items: start;
+    display: flex;
+    gap: var(--st-spacing-2, 0.5rem);
+  }
+
+  .st-notification__close {
+    align-items: center;
+    background: transparent;
+    border: 1px solid var(--st-semantic-border-subtle);
+    border-radius: var(--st-border-radius-full, 999px);
+    color: var(--st-semantic-text-secondary);
+    cursor: var(--st-cursor-interactive, pointer);
+    display: inline-flex;
+    font-size: 0.875rem;
+    height: 1.75rem;
+    justify-content: center;
+    min-width: 1.75rem;
+    padding: 0;
+    width: 1.75rem;
+  }
+
+  .st-notification__close:hover {
+    background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
+  }
+</style>

package/dist/Notification.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type NotificationProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    tone?: "info" | "success" | "warning" | "error";
+    title: string;
+    message?: string;
+    dismissible?: boolean;
+    dismissLabel?: string;
+    onDismiss?: () => void;
+    class?: string;
+    actions?: Snippet;
+    children?: Snippet;
+};
+declare const Notification: import("svelte").Component<NotificationProps, {}, "">;
+type Notification = ReturnType<typeof Notification>;
+export default Notification;
+//# sourceMappingURL=Notification.svelte.d.ts.map

package/dist/Notification.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Notification.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Notification.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,iBAAiB,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG;IACpE,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAsDJ,QAAA,MAAM,YAAY,uDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/NumberInput.svelte

@@ -217,6 +217,7 @@
   }
 
   .st-numberInput__control[type="number"] {
+    appearance: textfield;
     -moz-appearance: textfield;
   }
 

package/dist/OverflowMenu.svelte

@@ -38,6 +38,7 @@
 <script lang="ts">
   import { Ellipsis } from "@lucide/svelte";
   import type { HTMLAttributes } from "svelte/elements";
+  import { tick } from "svelte";
 
   type OverflowMenuProps = Omit<HTMLAttributes<HTMLDivElement>, "class" | "onselect"> & {
     items: OverflowMenuItem[];
@@ -63,6 +64,35 @@
   }: OverflowMenuProps = $props();
 
   let host: HTMLDivElement | undefined = $state();
+  let list: HTMLUListElement | undefined = $state();
+
+  function getFocusableItems(): HTMLButtonElement[] {
+    return Array.from(
+      list?.querySelectorAll<HTMLButtonElement>('[role="menuitem"]:not(:disabled)') ?? []
+    );
+  }
+
+  function moveIndex(index: number, size: number, step: number) {
+    if (size <= 0) return 0;
+    return ((index + step) % size + size) % size;
+  }
+
+  function focusAt(index: number) {
+    const focusable = getFocusableItems();
+    if (!focusable.length) return;
+    const target = moveIndex(index, focusable.length, 0);
+    focusable.forEach((button, idx) => {
+      button.tabIndex = idx === target ? 0 : -1;
+    });
+    focusable[target]?.focus();
+  }
+
+  function openAndFocus() {
+    open = true;
+    tick().then(() => {
+      focusAt(0);
+    });
+  }
 
   const classes = () =>
     [
@@ -71,11 +101,15 @@
       dense ? "st-overflowMenu--dense" : null,
       className
     ]
-      .filter(Boolean)
-      .join(" ");
+    .filter(Boolean)
+    .join(" ");
 
   function toggle() {
-    open = !open;
+    if (open) {
+      close();
+    } else {
+      openAndFocus();
+    }
   }
 
   function close() {
@@ -105,6 +139,46 @@
     const target = event.target as Node | null;
     if (host && target && !host.contains(target)) close();
   }
+
+  function onTriggerKeyDown(event: KeyboardEvent) {
+    if (!["ArrowDown", "Enter", " "].includes(event.key)) return;
+    event.preventDefault();
+    if (open) {
+      focusAt(0);
+    } else {
+      openAndFocus();
+    }
+  }
+
+  function onItemKeyDown(event: KeyboardEvent, item: OverflowMenuActionItem) {
+    const focusable = getFocusableItems();
+    const current = focusable.indexOf(event.currentTarget as HTMLButtonElement);
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      focusAt(current + 1);
+      return;
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      focusAt(current - 1);
+      return;
+    }
+    if (event.key === "Home") {
+      event.preventDefault();
+      focusAt(0);
+      return;
+    }
+    if (event.key === "End") {
+      event.preventDefault();
+      focusAt(focusable.length - 1);
+      return;
+    }
+    if (item.disabled) return;
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      selectItem(item);
+    }
+  }
 </script>
 
 <svelte:window onkeydown={onWindowKeydown} onpointerdown={onWindowPointerDown} />
@@ -117,11 +191,12 @@
     aria-expanded={open ? "true" : "false"}
     aria-label={triggerLabel}
     onclick={toggle}
+    onkeydown={onTriggerKeyDown}
   >
     <Ellipsis size={18} strokeWidth={2.25} aria-hidden="true" />
   </button>
   {#if open}
-    <ul class="st-overflowMenu__list" role="menu" aria-label={label}>
+    <ul bind:this={list} class="st-overflowMenu__list" role="menu" aria-label={label}>
       {#each items as item, index (index)}
         {#if isAction(item)}
           {@const Icon = item.icon}
@@ -133,7 +208,9 @@
               role="menuitem"
               aria-disabled={item.disabled ? "true" : undefined}
               disabled={item.disabled}
+              tabindex={-1}
               onclick={() => selectItem(item)}
+              onkeydown={(event) => onItemKeyDown(event, item)}
             >
               {#if Icon}
                 <span class="st-overflowMenu__itemIcon" aria-hidden="true">
@@ -174,10 +251,7 @@
   }
 
   .st-overflowMenu__trigger:hover {
-    background: var(
-      --st-component-overflowMenu-triggerHoverBackground,
-      var(--st-semantic-surface-subtle)
-    );
+    background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
   }
 
   /* Focus = stratégie d'anatomie partagée (outline DSFR / inset Carbon / ring base). */
@@ -190,10 +264,7 @@
   }
 
   .st-overflowMenu__trigger[aria-expanded="true"] {
-    background: var(
-      --st-component-overflowMenu-triggerHoverBackground,
-      var(--st-semantic-surface-subtle)
-    );
+    background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
   }
 
   .st-overflowMenu__list {
@@ -257,7 +328,7 @@
 
   .st-overflowMenu__item:hover:not(:disabled),
   .st-overflowMenu__item:focus-visible {
-    background: var(--st-component-menu-itemHoverBackground, var(--st-semantic-surface-subtle));
+    background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
     outline: none;
   }
 

package/dist/OverflowMenu.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OverflowMenu.svelte.d.ts","sourceRoot":"","sources":["../src/lib/OverflowMenu.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAExC,MAAM,MAAM,qBAAqB,GAAG;IAClC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,MAAM,CAAC,QAAQ,MAAM,EAAE,EAAE,OAAO,CAAC,CAAC;AAEtC,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC,qBAAqB,CAAC,CAAC;AAEhE,MAAM,WAAW,sBAAsB;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,uBAAuB;IACtC,IAAI,EAAE,SAAS,CAAC;CACjB;AAED,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,MAAM,gBAAgB,GACxB,sBAAsB,GACtB,uBAAuB,GACvB,qBAAqB,CAAC;AAI5B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,iBAAiB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IACpF,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,cAAc,GAAG,YAAY,GAAG,WAAW,GAAG,SAAS,CAAC;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AAoGJ,QAAA,MAAM,YAAY,0CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"OverflowMenu.svelte.d.ts","sourceRoot":"","sources":["../src/lib/OverflowMenu.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAExC,MAAM,MAAM,qBAAqB,GAAG;IAClC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,MAAM,CAAC,QAAQ,MAAM,EAAE,EAAE,OAAO,CAAC,CAAC;AAEtC,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC,qBAAqB,CAAC,CAAC;AAEhE,MAAM,WAAW,sBAAsB;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,uBAAuB;IACtC,IAAI,EAAE,SAAS,CAAC;CACjB;AAED,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,MAAM,gBAAgB,GACxB,sBAAsB,GACtB,uBAAuB,GACvB,qBAAqB,CAAC;AAI5B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAIpD,KAAK,iBAAiB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IACpF,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,cAAc,GAAG,YAAY,GAAG,WAAW,GAAG,SAAS,CAAC;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AA8KJ,QAAA,MAAM,YAAY,0CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/Pagination.svelte

@@ -85,6 +85,13 @@
     font-weight: var(--st-component-pagination-activeWeight, inherit);
   }
 
+  .st-pagination button:hover:not(:disabled) {
+    background: var(
+      --st-component-control-hoverBackground,
+      var(--st-component-pagination-hoverBackground, var(--st-semantic-surface-subtle))
+    );
+  }
+
   .st-pagination button:disabled {
     color: var(--st-component-pagination-disabledText, var(--st-semantic-text-muted));
     cursor: not-allowed;

package/dist/PaginationNav.svelte

@@ -163,8 +163,8 @@
   .st-paginationNav__page:hover:not(:disabled),
   .st-paginationNav__nav:hover:not(:disabled) {
     background: var(
-      --st-component-paginationNav-hoverBackground,
-      var(--st-semantic-surface-subtle)
+      --st-component-control-hoverBackground,
+      var(--st-component-paginationNav-hoverBackground, var(--st-semantic-surface-subtle))
     );
   }
 

package/dist/ProgressIndicator.svelte

@@ -22,13 +22,23 @@
     items: ProgressIndicatorItem[];
     vertical?: boolean;
     label?: string;
+    statusLabels?: Partial<Record<ProgressIndicatorStatus, string>>;
     class?: string;
   };
 
+  const DEFAULT_STATUS_LABELS: Record<ProgressIndicatorStatus, string> = {
+    complete: "Complete",
+    current: "Current",
+    upcoming: "Upcoming",
+    invalid: "Invalid",
+    disabled: "Disabled"
+  };
+
   let {
     items,
     vertical = false,
     label = "Progress",
+    statusLabels,
     class: className,
     ...rest
   }: ProgressIndicatorProps = $props();
@@ -44,6 +54,8 @@
 
   const resolvedStatus = (item: ProgressIndicatorItem): ProgressIndicatorStatus =>
     item.status ?? "upcoming";
+  const indicatorLabel = (item: ProgressIndicatorItem, status: ProgressIndicatorStatus) =>
+    `${statusLabels?.[status] ?? DEFAULT_STATUS_LABELS[status]}: ${item.label}`;
 </script>
 
 <ol {...rest} class={classes()} aria-label={label}>
@@ -54,7 +66,7 @@
       class={["st-progressIndicator__step", `st-progressIndicator__step--${status}`].join(" ")}
       aria-current={status === "current" ? "step" : undefined}
     >
-      <span class="st-progressIndicator__indicator" aria-hidden="true">
+      <span class="st-progressIndicator__indicator" role="img" aria-label={indicatorLabel(item, status)}>
         <span class="st-progressIndicator__circle">
           {#if status === "complete"}
             <Check size={14} strokeWidth={2} aria-hidden="true" />

package/dist/ProgressIndicator.svelte.d.ts

@@ -10,6 +10,7 @@ type ProgressIndicatorProps = Omit<HTMLAttributes<HTMLOListElement>, "class"> &
     items: ProgressIndicatorItem[];
     vertical?: boolean;
     label?: string;
+    statusLabels?: Partial<Record<ProgressIndicatorStatus, string>>;
     class?: string;
 };
 declare const ProgressIndicator: import("svelte").Component<ProgressIndicatorProps, {}, "">;

package/dist/ProgressIndicator.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressIndicator.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ProgressIndicator.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,uBAAuB,GAC/B,UAAU,GACV,SAAS,GACT,UAAU,GACV,SAAS,GACT,UAAU,CAAC;AAEf,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,uBAAuB,CAAC;CAClC;AAGH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAIpD,KAAK,sBAAsB,GAAG,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC,GAAG;IAC9E,KAAK,EAAE,qBAAqB,EAAE,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAgEJ,QAAA,MAAM,iBAAiB,4DAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"ProgressIndicator.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ProgressIndicator.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,uBAAuB,GAC/B,UAAU,GACV,SAAS,GACT,UAAU,GACV,SAAS,GACT,UAAU,CAAC;AAEf,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,uBAAuB,CAAC;CAClC;AAGH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAIpD,KAAK,sBAAsB,GAAG,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC,GAAG;IAC9E,KAAK,EAAE,qBAAqB,EAAE,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,uBAAuB,EAAE,MAAM,CAAC,CAAC,CAAC;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA2EJ,QAAA,MAAM,iBAAiB,4DAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/Radio.svelte

@@ -12,8 +12,8 @@
   const classes = () => ["st-choice", "st-choice--radio", className].filter(Boolean).join(" ");
 </script>
 
-<label class={classes()}>
-  <input {...rest} class="st-choice__input" type="radio" aria-invalid={invalid ? "true" : undefined} />
+<label class={classes()} data-invalid={invalid ? "true" : undefined}>
+  <input {...rest} class="st-choice__input" type="radio" />
   <span class="st-choice__content">
     <span class="st-choice__label">{label}</span>
     {#if helperText}<span class="st-choice__help">{helperText}</span>{/if}
@@ -48,7 +48,11 @@
       0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive)));
   }
 
-  .st-choice__input[aria-invalid="true"] {
+  .st-choice:hover .st-choice__input {
+    background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
+  }
+
+  .st-choice[data-invalid="true"] .st-choice__input {
     accent-color: var(--st-component-control-invalidBorder, var(--st-semantic-feedback-error));
     outline-color: var(--st-component-control-invalidBorder, var(--st-semantic-feedback-error));
   }