@sentropic/design-system-svelte 0.15.0 → 0.17.0

package/dist/GaugeChart.svelte.d.ts

@@ -0,0 +1,36 @@
+export type GaugeChartTone = "neutral" | "info" | "success" | "warning" | "error" | "category1" | "category2" | "category3" | "category4" | "category5" | "category6" | "category7" | "category8";
+/**
+ * Seuil de coloration. La bande s'étend depuis `value` (ou le minimum)
+ * jusqu'au seuil suivant (ou le maximum). `tone` choisit la couleur.
+ */
+export type GaugeChartThreshold = {
+    value: number;
+    tone: GaugeChartTone;
+};
+export type GaugeChartFormat = "number" | "percent";
+type GaugeChartProps = {
+    value: number;
+    min?: number;
+    max?: number;
+    /** Bandes colorées sur la piste. Triées par `value` croissante. */
+    thresholds?: GaugeChartThreshold[];
+    /** Libellé décrivant la jauge (a11y + texte sous la valeur). */
+    label?: string;
+    /** Format de la valeur centrale. */
+    format?: GaugeChartFormat;
+    /** Suffixe d'unité (ignoré pour `percent`). */
+    unit?: string;
+    /** Diamètre du SVG. */
+    size?: number;
+    /** Épaisseur de l'arc. */
+    thickness?: number;
+    /** Angle de départ en degrés (0 = est, sens horaire). */
+    startAngle?: number;
+    /** Angle de fin en degrés. */
+    endAngle?: number;
+    class?: string;
+};
+declare const GaugeChart: import("svelte").Component<GaugeChartProps, {}, "">;
+type GaugeChart = ReturnType<typeof GaugeChart>;
+export default GaugeChart;
+//# sourceMappingURL=GaugeChart.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GaugeChart.svelte.d.ts","sourceRoot":"","sources":["../src/lib/GaugeChart.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,cAAc,GACtB,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GACpD,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,GACrD,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;AAE1D;;;GAGG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,cAAc,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,SAAS,CAAC;AAMpD,KAAK,eAAe,GAAG;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mEAAmE;IACnE,UAAU,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACnC,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uBAAuB;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA2JJ,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/KpiCard.svelte

@@ -0,0 +1,318 @@
+<script lang="ts" module>
+  export type KpiCardSize = "sm" | "md" | "lg";
+  export type KpiCardTrend = "up" | "down" | "flat";
+  export type KpiCardFormat = "number" | "currency" | "percent";
+  export type KpiCardDeltaFormat = "percent" | "absolute";
+  export type KpiCardTone =
+    | "category1"
+    | "category2"
+    | "category3"
+    | "category4"
+    | "category5"
+    | "category6"
+    | "category7"
+    | "category8";
+</script>
+
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+  import Sparkline from "./Sparkline.svelte";
+
+  type KpiCardProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    /** Valeur principale affichée en grand. */
+    value: number | string;
+    /** Étiquette de l'indicateur (ex. « Revenu mensuel »). */
+    label: string;
+    /** Variation par rapport à la période précédente. */
+    delta?: number;
+    /** Comment exprimer le delta : en pourcentage ou en valeur absolue. */
+    deltaFormat?: KpiCardDeltaFormat;
+    /** Tendance ; déduite du signe du delta si absente. */
+    trend?: KpiCardTrend;
+    /** Formatage de la valeur principale via Intl.NumberFormat. */
+    format?: KpiCardFormat;
+    /** Unité suffixée à la valeur (ex. « ms », « €/mois »). */
+    unit?: string;
+    /** Code devise ISO 4217 pour format="currency" (défaut EUR). */
+    currency?: string;
+    /** Locale BCP 47 pour le formatage des nombres (défaut undefined = locale du runtime). */
+    locale?: string;
+    /** Mini-graphique de tendance optionnel. */
+    sparkline?: number[];
+    size?: KpiCardSize;
+    /** Couleur catégorielle pour l'accent (bordure de gauche). */
+    tone?: KpiCardTone;
+    class?: string;
+  };
+
+  let {
+    value,
+    label,
+    delta,
+    deltaFormat = "percent",
+    trend,
+    format = "number",
+    unit,
+    currency = "EUR",
+    locale,
+    sparkline,
+    size = "md",
+    tone,
+    class: className,
+    ...rest
+  }: KpiCardProps = $props();
+
+  const resolvedTrend = $derived<KpiCardTrend | undefined>(
+    trend ?? (delta == null ? undefined : delta > 0 ? "up" : delta < 0 ? "down" : "flat")
+  );
+
+  const formattedValue = $derived.by(() => {
+    if (typeof value === "string") {
+      return value;
+    }
+    if (format === "currency") {
+      return new Intl.NumberFormat(locale, { style: "currency", currency }).format(value);
+    }
+    if (format === "percent") {
+      return new Intl.NumberFormat(locale, { style: "percent", maximumFractionDigits: 2 }).format(
+        value
+      );
+    }
+    return new Intl.NumberFormat(locale).format(value);
+  });
+
+  const formattedDelta = $derived.by(() => {
+    if (delta == null) {
+      return undefined;
+    }
+    const sign = delta > 0 ? "+" : "";
+    if (deltaFormat === "percent") {
+      const pct = new Intl.NumberFormat(locale, {
+        style: "percent",
+        maximumFractionDigits: 1
+      }).format(delta);
+      return `${sign}${pct}`;
+    }
+    return `${sign}${new Intl.NumberFormat(locale).format(delta)}`;
+  });
+
+  /** Le sparkline emprunte la couleur sémantique de la tendance. */
+  const sparklineTone = $derived(
+    resolvedTrend === "up" ? "success" : resolvedTrend === "down" ? "error" : "neutral"
+  );
+
+  const arrow = $derived(
+    resolvedTrend === "up" ? "M3 8.5 7 4l4 4.5" : resolvedTrend === "down" ? "M3 5.5 7 10l4-4.5" : "M3 7h8"
+  );
+
+  const trendLabel = $derived(
+    resolvedTrend === "up"
+      ? "en hausse"
+      : resolvedTrend === "down"
+        ? "en baisse"
+        : resolvedTrend === "flat"
+          ? "stable"
+          : undefined
+  );
+
+  const ariaLabel = $derived(
+    [label, formattedValue, unit, formattedDelta && `${formattedDelta} ${trendLabel ?? ""}`.trim()]
+      .filter(Boolean)
+      .join(", ")
+  );
+
+  const classes = $derived(
+    [
+      "st-kpiCard",
+      `st-kpiCard--${size}`,
+      tone && `st-kpiCard--${tone}`,
+      tone && "st-kpiCard--toned",
+      className
+    ]
+      .filter(Boolean)
+      .join(" ")
+  );
+</script>
+
+<article {...rest} class={classes} role="group" aria-label={ariaLabel}>
+  <p class="st-kpiCard__label">{label}</p>
+
+  <p class="st-kpiCard__value">
+    <span class="st-kpiCard__number">{formattedValue}</span>
+    {#if unit}
+      <span class="st-kpiCard__unit">{unit}</span>
+    {/if}
+  </p>
+
+  {#if formattedDelta || sparkline}
+    <div class="st-kpiCard__footer">
+      {#if formattedDelta}
+        <span
+          class="st-kpiCard__delta st-kpiCard__delta--{resolvedTrend ?? 'flat'}"
+          aria-hidden="true"
+        >
+          <svg
+            class="st-kpiCard__arrow"
+            width="14"
+            height="14"
+            viewBox="0 0 14 14"
+            aria-hidden="true"
+            focusable="false"
+          >
+            <path
+              d={arrow}
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.75"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+          <span class="st-kpiCard__deltaValue">{formattedDelta}</span>
+        </span>
+      {/if}
+
+      {#if sparkline && sparkline.length > 0}
+        <Sparkline
+          class="st-kpiCard__sparkline"
+          data={sparkline}
+          tone={sparklineTone}
+          area
+        />
+      {/if}
+    </div>
+  {/if}
+</article>
+
+<style>
+  .st-kpiCard {
+    background: var(--st-component-card-background, var(--st-semantic-surface-raised));
+    border-width: var(--st-component-card-anatomy-shape-borderWidth, 1px);
+    border-style: var(--st-component-card-anatomy-shape-borderStyle, solid);
+    border-color: var(--st-component-card-border, var(--st-semantic-border-subtle));
+    border-radius: var(--st-component-card-anatomy-shape-radius, 0.5rem);
+    box-shadow: var(--st-component-card-shadow, 0 1px 2px rgb(15 23 42 / 0.08));
+    color: var(--st-semantic-text-primary);
+    display: flex;
+    flex-direction: column;
+    gap: var(--st-spacing-2, 0.5rem);
+    padding: var(--st-spacing-4, 1rem);
+  }
+
+  .st-kpiCard--sm {
+    gap: var(--st-spacing-1, 0.25rem);
+    padding: var(--st-spacing-3, 0.75rem);
+  }
+
+  .st-kpiCard--lg {
+    gap: var(--st-spacing-3, 0.75rem);
+    padding: var(--st-spacing-6, 1.5rem);
+  }
+
+  /* Accent catégoriel : liseré coloré à gauche. */
+  .st-kpiCard--toned {
+    border-inline-start-width: var(--st-spacing-1, 0.25rem);
+  }
+
+  .st-kpiCard__label {
+    color: var(--st-semantic-text-secondary);
+    font-size: 0.8125rem;
+    font-weight: 500;
+    line-height: 1.25;
+    margin: 0;
+  }
+
+  .st-kpiCard--lg .st-kpiCard__label {
+    font-size: 0.875rem;
+  }
+
+  .st-kpiCard__value {
+    align-items: baseline;
+    color: var(--st-semantic-text-primary);
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--st-spacing-1, 0.25rem);
+    margin: 0;
+  }
+
+  .st-kpiCard__number {
+    font-size: 1.5rem;
+    font-weight: 700;
+    letter-spacing: -0.01em;
+    line-height: 1.1;
+  }
+
+  .st-kpiCard--sm .st-kpiCard__number {
+    font-size: 1.25rem;
+  }
+
+  .st-kpiCard--lg .st-kpiCard__number {
+    font-size: 2.25rem;
+  }
+
+  .st-kpiCard__unit {
+    color: var(--st-semantic-text-secondary);
+    font-size: 0.875rem;
+    font-weight: 500;
+  }
+
+  .st-kpiCard__footer {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--st-spacing-3, 0.75rem);
+    justify-content: space-between;
+  }
+
+  .st-kpiCard__delta {
+    align-items: center;
+    display: inline-flex;
+    font-size: 0.8125rem;
+    font-weight: 600;
+    gap: var(--st-spacing-1, 0.25rem);
+    line-height: 1;
+  }
+
+  .st-kpiCard__arrow {
+    display: block;
+    flex: 0 0 auto;
+  }
+
+  .st-kpiCard__delta--up {
+    color: var(--st-semantic-feedback-success);
+  }
+
+  .st-kpiCard__delta--down {
+    color: var(--st-semantic-feedback-error);
+  }
+
+  .st-kpiCard__delta--flat {
+    color: var(--st-semantic-text-secondary);
+  }
+
+  /* Liserés catégoriels — alignés sur la palette data des autres composants. */
+  .st-kpiCard--category1 {
+    border-inline-start-color: var(--st-semantic-data-category1);
+  }
+  .st-kpiCard--category2 {
+    border-inline-start-color: var(--st-semantic-data-category2);
+  }
+  .st-kpiCard--category3 {
+    border-inline-start-color: var(--st-semantic-data-category3);
+  }
+  .st-kpiCard--category4 {
+    border-inline-start-color: var(--st-semantic-data-category4);
+  }
+  .st-kpiCard--category5 {
+    border-inline-start-color: var(--st-semantic-data-category5);
+  }
+  .st-kpiCard--category6 {
+    border-inline-start-color: var(--st-semantic-data-category6);
+  }
+  .st-kpiCard--category7 {
+    border-inline-start-color: var(--st-semantic-data-category7);
+  }
+  .st-kpiCard--category8 {
+    border-inline-start-color: var(--st-semantic-data-category8);
+  }
+</style>

package/dist/KpiCard.svelte.d.ts

@@ -0,0 +1,36 @@
+export type KpiCardSize = "sm" | "md" | "lg";
+export type KpiCardTrend = "up" | "down" | "flat";
+export type KpiCardFormat = "number" | "currency" | "percent";
+export type KpiCardDeltaFormat = "percent" | "absolute";
+export type KpiCardTone = "category1" | "category2" | "category3" | "category4" | "category5" | "category6" | "category7" | "category8";
+import type { HTMLAttributes } from "svelte/elements";
+type KpiCardProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    /** Valeur principale affichée en grand. */
+    value: number | string;
+    /** Étiquette de l'indicateur (ex. « Revenu mensuel »). */
+    label: string;
+    /** Variation par rapport à la période précédente. */
+    delta?: number;
+    /** Comment exprimer le delta : en pourcentage ou en valeur absolue. */
+    deltaFormat?: KpiCardDeltaFormat;
+    /** Tendance ; déduite du signe du delta si absente. */
+    trend?: KpiCardTrend;
+    /** Formatage de la valeur principale via Intl.NumberFormat. */
+    format?: KpiCardFormat;
+    /** Unité suffixée à la valeur (ex. « ms », « €/mois »). */
+    unit?: string;
+    /** Code devise ISO 4217 pour format="currency" (défaut EUR). */
+    currency?: string;
+    /** Locale BCP 47 pour le formatage des nombres (défaut undefined = locale du runtime). */
+    locale?: string;
+    /** Mini-graphique de tendance optionnel. */
+    sparkline?: number[];
+    size?: KpiCardSize;
+    /** Couleur catégorielle pour l'accent (bordure de gauche). */
+    tone?: KpiCardTone;
+    class?: string;
+};
+declare const KpiCard: import("svelte").Component<KpiCardProps, {}, "">;
+type KpiCard = ReturnType<typeof KpiCard>;
+export default KpiCard;
+//# sourceMappingURL=KpiCard.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"KpiCard.svelte.d.ts","sourceRoot":"","sources":["../src/lib/KpiCard.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC7C,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;AAClD,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAC;AAC9D,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,UAAU,CAAC;AACxD,MAAM,MAAM,WAAW,GACnB,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAGlB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAIpD,KAAK,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG;IAC/D,2CAA2C;IAC3C,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,uDAAuD;IACvD,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,+DAA+D;IAC/D,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gEAAgE;IAChE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0FAA0F;IAC1F,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAiIJ,QAAA,MAAM,OAAO,kDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/SelectableList.svelte

@@ -0,0 +1,186 @@
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type SelectableListProps = {
+    /** Accessible name for the listbox (required for SR users). */
+    label?: string;
+    /** References the id of an external visible label (alternative to `label`). */
+    labelledby?: string;
+    /**
+     * Allow more than one selected row. Adds aria-multiselectable and toggles
+     * each row independently. Defaults to false (single-select).
+     */
+    multiple?: boolean;
+    /**
+     * Selected value(s). Controlled when provided. For single-select pass a
+     * string (or null); for multiple pass a string[]. When omitted the list is
+     * uncontrolled and keeps its own internal selection.
+     */
+    value?: string | string[] | null;
+    /**
+     * Fired with the new selection on every change. Receives a string|null for
+     * single-select and a string[] for multiple. Required for the controlled
+     * pattern; also fires for uncontrolled lists.
+     */
+    onchange?: (value: string | string[] | null) => void;
+    class?: string;
+    children?: Snippet;
+  };
+</script>
+
+<script lang="ts">
+  import { setContext, untrack } from "svelte";
+  import {
+    SELECTABLE_LIST_KEY,
+    type SelectableListContext
+  } from "./SelectableRow.svelte";
+
+  let {
+    label,
+    labelledby,
+    multiple = false,
+    value,
+    onchange,
+    class: className,
+    children
+  }: SelectableListProps = $props();
+
+  // Controlled when the consumer passes `value` (including null). Otherwise the
+  // list owns an internal selection set.
+  const controlled = $derived(value !== undefined);
+
+  function toSet(v: string | string[] | null | undefined): Set<string> {
+    if (v == null) return new Set();
+    return new Set(Array.isArray(v) ? v : [v]);
+  }
+
+  // Internal selection for the uncontrolled case.
+  let internal = $state<Set<string>>(new Set());
+  const selectedValues = $derived(controlled ? toSet(value) : internal);
+
+  // --- Row registry: ordered by DOM position so arrow nav matches the visual
+  //     order regardless of registration timing. -------------------------------
+  type Entry = { el: HTMLElement; value: string | undefined };
+  let entries = $state<Entry[]>([]);
+
+  // The element that currently holds the roving tab stop (tabindex 0). Null until
+  // a row is focused; until then the FIRST enabled row is the default stop.
+  let tabStopEl = $state<HTMLElement | null>(null);
+
+  function sortByDom(list: Entry[]): Entry[] {
+    return [...list].sort((a, b) => {
+      const pos = a.el.compareDocumentPosition(b.el);
+      if (pos & Node.DOCUMENT_POSITION_FOLLOWING) return -1;
+      if (pos & Node.DOCUMENT_POSITION_PRECEDING) return 1;
+      return 0;
+    });
+  }
+
+  // register/unregister are called from each row's $effect. They read AND write
+  // `entries`, so the read must be untracked — otherwise the calling effect would
+  // subscribe to `entries`, and writing it would re-run the effect forever.
+  function register(el: HTMLElement, rowValue: string | undefined): () => void {
+    untrack(() => {
+      entries = sortByDom([...entries.filter((e) => e.el !== el), { el, value: rowValue }]);
+    });
+    return () => {
+      untrack(() => {
+        entries = entries.filter((e) => e.el !== el);
+        if (tabStopEl === el) tabStopEl = null;
+      });
+    };
+  }
+
+  // Default roving stop = first registered (DOM-ordered) row when none focused.
+  const effectiveTabStop = $derived(tabStopEl ?? entries[0]?.el ?? null);
+
+  function valueOf(el: HTMLElement): string | undefined {
+    return entries.find((e) => e.el === el)?.value;
+  }
+
+  function isSelected(el: HTMLElement): boolean {
+    const v = valueOf(el);
+    return v !== undefined && selectedValues.has(v);
+  }
+
+  function isTabStop(el: HTMLElement): boolean {
+    return el === effectiveTabStop;
+  }
+
+  function emit(next: Set<string>) {
+    if (!controlled) internal = next;
+    if (multiple) onchange?.([...next]);
+    else onchange?.(next.size ? [...next][0] : null);
+  }
+
+  function activate(el: HTMLElement) {
+    const v = valueOf(el);
+    if (v === undefined) return;
+    const current = selectedValues;
+    let next: Set<string>;
+    if (multiple) {
+      next = new Set(current);
+      if (next.has(v)) next.delete(v);
+      else next.add(v);
+    } else {
+      // Single-select toggles off when re-activating the selected row.
+      next = current.has(v) && current.size === 1 ? new Set() : new Set([v]);
+    }
+    emit(next);
+  }
+
+  function focusRow(el: HTMLElement) {
+    tabStopEl = el;
+  }
+
+  function navigate(el: HTMLElement, key: string) {
+    if (entries.length === 0) return;
+    const idx = entries.findIndex((e) => e.el === el);
+    if (idx === -1) return;
+    let targetIdx = idx;
+    if (key === "ArrowDown" || key === "ArrowRight") targetIdx = idx + 1;
+    else if (key === "ArrowUp" || key === "ArrowLeft") targetIdx = idx - 1;
+    else if (key === "Home") targetIdx = 0;
+    else if (key === "End") targetIdx = entries.length - 1;
+    // Clamp (no wrap) so Home/End and arrows stay within bounds.
+    targetIdx = Math.max(0, Math.min(entries.length - 1, targetIdx));
+    const target = entries[targetIdx]?.el;
+    if (target) {
+      tabStopEl = target;
+      target.focus();
+    }
+  }
+
+  const context: SelectableListContext = {
+    managed: true,
+    itemRole: "option",
+    register,
+    isSelected,
+    isTabStop,
+    activate,
+    focusRow,
+    navigate
+  };
+  setContext(SELECTABLE_LIST_KEY, context);
+
+  const classes = $derived(["st-selectableList", className].filter(Boolean).join(" "));
+</script>
+
+<div
+  class={classes}
+  role="listbox"
+  aria-label={labelledby ? undefined : label}
+  aria-labelledby={labelledby}
+  aria-multiselectable={multiple ? "true" : undefined}
+>
+  {@render children?.()}
+</div>
+
+<style>
+  .st-selectableList {
+    display: flex;
+    flex-direction: column;
+    gap: var(--st-spacing-1, 0.25rem);
+    width: 100%;
+  }
+</style>

package/dist/SelectableList.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { Snippet } from "svelte";
+export type SelectableListProps = {
+    /** Accessible name for the listbox (required for SR users). */
+    label?: string;
+    /** References the id of an external visible label (alternative to `label`). */
+    labelledby?: string;
+    /**
+     * Allow more than one selected row. Adds aria-multiselectable and toggles
+     * each row independently. Defaults to false (single-select).
+     */
+    multiple?: boolean;
+    /**
+     * Selected value(s). Controlled when provided. For single-select pass a
+     * string (or null); for multiple pass a string[]. When omitted the list is
+     * uncontrolled and keeps its own internal selection.
+     */
+    value?: string | string[] | null;
+    /**
+     * Fired with the new selection on every change. Receives a string|null for
+     * single-select and a string[] for multiple. Required for the controlled
+     * pattern; also fires for uncontrolled lists.
+     */
+    onchange?: (value: string | string[] | null) => void;
+    class?: string;
+    children?: Snippet;
+};
+declare const SelectableList: import("svelte").Component<SelectableListProps, {}, "">;
+type SelectableList = ReturnType<typeof SelectableList>;
+export default SelectableList;
+//# sourceMappingURL=SelectableList.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectableList.svelte.d.ts","sourceRoot":"","sources":["../src/lib/SelectableList.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,MAAM,MAAM,mBAAmB,GAAG;IAChC,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+EAA+E;IAC/E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,CAAC;IACjC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA0JJ,QAAA,MAAM,cAAc,yDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}