@sentropic/design-system-svelte 0.10.3 → 0.10.4

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));
   }

package/dist/ScatterPlot.svelte

@@ -12,6 +12,8 @@
 </script>
 
 <script lang="ts">
+  import ChartDataList from "./ChartDataList.svelte";
+
   type ScatterPlotProps = {
     data: ScatterPlotDatum[];
     width?: number;
@@ -95,51 +97,69 @@
     }));
   });
 
+  const dataValueItems = $derived(
+    data.map((d) => (d.label ? `${d.label}: x ${d.x}, y ${d.y}` : `x ${d.x}, y ${d.y}`))
+  );
+
+  function handleVisualPointerMove(event: PointerEvent) {
+    const target = event.target;
+    if (!(target instanceof Element)) {
+      hoveredIndex = null;
+      return;
+    }
+    const index = Number(target.getAttribute("data-chart-index"));
+    hoveredIndex = Number.isInteger(index) ? index : null;
+  }
+
   const classes = () => ["st-scatterPlot", className].filter(Boolean).join(" ");
 </script>
 
-<div class={classes()} role="img" aria-label={label}>
-  <svg viewBox="0 0 {width} {height}" preserveAspectRatio="xMidYMid meet" width="100%" height="100%" focusable="false" aria-hidden="true">
-    <!-- gridlines + ticks Y -->
-    {#each scales.yTicks as t (t)}
-      {@const y = MARGIN.top + scaleLinear(t, scales.yMin, scales.yMax, scales.plotH, 0)}
-      <line class="st-scatterPlot__grid" x1={MARGIN.left} x2={width - MARGIN.right} y1={y} y2={y} />
-      <text class="st-scatterPlot__tick" x={MARGIN.left - 6} y={y} text-anchor="end" dominant-baseline="middle">{fmt(t)}</text>
-    {/each}
-    <!-- ticks X -->
-    {#each scales.xTicks as t (t)}
-      {@const x = MARGIN.left + scaleLinear(t, scales.xMin, scales.xMax, 0, scales.plotW)}
-      <text class="st-scatterPlot__tick" x={x} y={height - MARGIN.bottom + 16} text-anchor="middle">{fmt(t)}</text>
-    {/each}
-
-    <!-- axes -->
-    <line class="st-scatterPlot__axis" x1={MARGIN.left} x2={MARGIN.left} y1={MARGIN.top} y2={height - MARGIN.bottom} />
-    <line class="st-scatterPlot__axis" x1={MARGIN.left} x2={width - MARGIN.right} y1={height - MARGIN.bottom} y2={height - MARGIN.bottom} />
-
-    {#if xLabel}
-      <text class="st-scatterPlot__axisLabel" x={MARGIN.left + scales.plotW / 2} y={height - 4} text-anchor="middle">{xLabel}</text>
-    {/if}
-    {#if yLabel}
-      <text class="st-scatterPlot__axisLabel" x={12} y={MARGIN.top + scales.plotH / 2} text-anchor="middle" transform="rotate(-90 12 {MARGIN.top + scales.plotH / 2})">{yLabel}</text>
-    {/if}
-
-    <!-- points -->
-    {#each points as p, i (i)}
-      <circle
-        class="st-scatterPlot__point st-scatterPlot__point--{p.tone}"
-        cx={p.cx}
-        cy={p.cy}
-        r={radius}
-        tabindex="0"
-        role="img"
-        aria-label="{p.datum.label ? p.datum.label + ': ' : ''}x {p.datum.x}, y {p.datum.y}"
-        onmouseenter={() => (hoveredIndex = i)}
-        onmouseleave={() => (hoveredIndex = null)}
-        onfocus={() => (hoveredIndex = i)}
-        onblur={() => (hoveredIndex = null)}
-      />
-    {/each}
-  </svg>
+<div class={classes()}>
+  <div
+    class="st-scatterPlot__visual"
+    role="img"
+    aria-label={label}
+    onpointermove={handleVisualPointerMove}
+    onpointerleave={() => (hoveredIndex = null)}
+  >
+    <svg viewBox="0 0 {width} {height}" preserveAspectRatio="xMidYMid meet" width="100%" height="100%" focusable="false" aria-hidden="true">
+      <!-- gridlines + ticks Y -->
+      {#each scales.yTicks as t (t)}
+        {@const y = MARGIN.top + scaleLinear(t, scales.yMin, scales.yMax, scales.plotH, 0)}
+        <line class="st-scatterPlot__grid" x1={MARGIN.left} x2={width - MARGIN.right} y1={y} y2={y} />
+        <text class="st-scatterPlot__tick" x={MARGIN.left - 6} y={y} text-anchor="end" dominant-baseline="middle">{fmt(t)}</text>
+      {/each}
+      <!-- ticks X -->
+      {#each scales.xTicks as t (t)}
+        {@const x = MARGIN.left + scaleLinear(t, scales.xMin, scales.xMax, 0, scales.plotW)}
+        <text class="st-scatterPlot__tick" x={x} y={height - MARGIN.bottom + 16} text-anchor="middle">{fmt(t)}</text>
+      {/each}
+
+      <!-- axes -->
+      <line class="st-scatterPlot__axis" x1={MARGIN.left} x2={MARGIN.left} y1={MARGIN.top} y2={height - MARGIN.bottom} />
+      <line class="st-scatterPlot__axis" x1={MARGIN.left} x2={width - MARGIN.right} y1={height - MARGIN.bottom} y2={height - MARGIN.bottom} />
+
+      {#if xLabel}
+        <text class="st-scatterPlot__axisLabel" x={MARGIN.left + scales.plotW / 2} y={height - 4} text-anchor="middle">{xLabel}</text>
+      {/if}
+      {#if yLabel}
+        <text class="st-scatterPlot__axisLabel" x={12} y={MARGIN.top + scales.plotH / 2} text-anchor="middle" transform="rotate(-90 12 {MARGIN.top + scales.plotH / 2})">{yLabel}</text>
+      {/if}
+
+      <!-- points -->
+      {#each points as p, i (i)}
+        <circle
+          class="st-scatterPlot__point st-scatterPlot__point--{p.tone}"
+          cx={p.cx}
+          cy={p.cy}
+          r={radius}
+          data-chart-index={i}
+        />
+      {/each}
+    </svg>
+  </div>
+
+  <ChartDataList {label} items={dataValueItems} />
 
   {#if hoveredIndex !== null && points[hoveredIndex]}
     {@const p = points[hoveredIndex]}
@@ -152,14 +172,13 @@
 
 <style>
   .st-scatterPlot { color: var(--st-semantic-text-secondary); display: block; font-family: inherit; position: relative; width: 100%; }
-  .st-scatterPlot svg { display: block; overflow: visible; }
+  .st-scatterPlot svg, .st-scatterPlot__visual { display: block; overflow: visible; }
   .st-scatterPlot__grid { stroke: var(--st-semantic-border-subtle); stroke-dasharray: 2 3; stroke-width: 1; opacity: 0.7; }
   .st-scatterPlot__axis { stroke: var(--st-semantic-border-subtle); stroke-width: 1; }
   .st-scatterPlot__tick { fill: var(--st-semantic-text-secondary); font-size: 0.6875rem; }
   .st-scatterPlot__axisLabel { fill: var(--st-semantic-text-secondary); font-size: 0.75rem; font-weight: 600; }
   .st-scatterPlot__point { cursor: pointer; fill-opacity: 0.85; transition: fill-opacity 120ms ease, r 120ms ease; }
-  .st-scatterPlot__point:hover, .st-scatterPlot__point:focus-visible { fill-opacity: 1; }
-  .st-scatterPlot__point:focus-visible { outline: 2px solid var(--st-semantic-border-interactive); outline-offset: 1px; }
+  .st-scatterPlot__point:hover { fill-opacity: 1; }
   .st-scatterPlot__point--category1 { fill: var(--st-semantic-data-category1); }
   .st-scatterPlot__point--category2 { fill: var(--st-semantic-data-category2); }
   .st-scatterPlot__point--category3 { fill: var(--st-semantic-data-category3); }

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

@@ -1 +1 @@
-{"version":3,"file":"ScatterPlot.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ScatterPlot.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,eAAe,GACvB,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,GACrD,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;AAE1D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACtB,IAAI,EAAE,gBAAgB,EAAE,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA6HJ,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ScatterPlot.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ScatterPlot.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,eAAe,GACvB,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,GACrD,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;AAE1D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB,CAAC;AAMF,KAAK,gBAAgB,GAAG;IACtB,IAAI,EAAE,gBAAgB,EAAE,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAgJJ,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/Search.svelte

@@ -121,14 +121,17 @@
        the Input field box); bottom corners keep the field shape radius. */
     border-top-left-radius: var(--st-component-control-anatomy-field-radiusTop, var(--st-component-control-anatomy-shape-radius, 0.375rem));
     border-top-right-radius: var(--st-component-control-anatomy-field-radiusTop, var(--st-component-control-anatomy-shape-radius, 0.375rem));
-    border-bottom-right-radius: var(--st-component-control-anatomy-shape-radius, 0.375rem);
-    border-bottom-left-radius: var(--st-component-control-anatomy-shape-radius, 0.375rem);
+    border-bottom-right-radius: var(--st-component-control-anatomy-field-radiusBottom, var(--st-component-control-anatomy-shape-radius, 0.375rem));
+    border-bottom-left-radius: var(--st-component-control-anatomy-field-radiusBottom, var(--st-component-control-anatomy-shape-radius, 0.375rem));
     color: var(--st-component-control-text, var(--st-semantic-text-primary));
     display: inline-flex;
     /* P-D: field-box padding + input typography per theme. Default = the prior
        render (0 padding on the wrapper, inherited 16px / `normal` typography);
        DSFR pads 8/16px, Carbon 0/40px to match the measured reference input. */
-    padding: var(--st-component-search-paddingBlock, 0) var(--st-component-search-paddingInline, 0);
+    padding: var(--st-component-search-paddingBlock, 0)
+      var(--st-component-search-paddingRight, var(--st-component-search-paddingInline, 0))
+      var(--st-component-search-paddingBlock, 0)
+      var(--st-component-search-paddingLeft, var(--st-component-search-paddingInline, 0));
     font-size: var(--st-component-search-fontSize, 1rem);
     line-height: var(--st-component-search-lineHeight, normal);
     letter-spacing: var(--st-component-search-letterSpacing, normal);