@sentropic/design-system-svelte 0.9.0 → 0.10.1

package/dist/OrderedList.svelte

@@ -0,0 +1,103 @@
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type OrderedListInput = string | OrderedListItem;
+
+  export interface OrderedListItem {
+    content: string | Snippet;
+    /** Sous-items : chaînes ou objets (normalisés au rendu). */
+    children?: OrderedListInput[];
+  }
+</script>
+
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type OrderedListProps = Omit<HTMLAttributes<HTMLOListElement>, "class"> & {
+    items: OrderedListInput[];
+    nested?: boolean;
+    class?: string;
+  };
+
+  let {
+    items,
+    nested = false,
+    class: className,
+    ...rest
+  }: OrderedListProps = $props();
+
+  const classes = () =>
+    ["st-orderedList", nested ? "st-orderedList--nested" : null, className]
+      .filter(Boolean)
+      .join(" ");
+
+  function normalize(item: OrderedListInput): OrderedListItem {
+    if (typeof item === "string") return { content: item };
+    return item;
+  }
+
+  function isSnippet(value: string | Snippet): value is Snippet {
+    return typeof value === "function";
+  }
+</script>
+
+<ol {...rest} class={classes()}>
+  {#each items as raw, index (index)}
+    {@const item = normalize(raw)}
+    <li class="st-orderedList__item">
+      {#if isSnippet(item.content)}
+        {@render item.content()}
+      {:else}
+        {item.content}
+      {/if}
+      {#if item.children && item.children.length > 0}
+        <ol class="st-orderedList st-orderedList--nested">
+          {#each item.children as childRaw, childIndex (childIndex)}
+            {@const child = normalize(childRaw)}
+            <li class="st-orderedList__item">
+              {#if isSnippet(child.content)}
+                {@render child.content()}
+              {:else}
+                {child.content}
+              {/if}
+            </li>
+          {/each}
+        </ol>
+      {/if}
+    </li>
+  {/each}
+</ol>
+
+<style>
+  .st-orderedList {
+    color: var(--st-semantic-text-primary);
+    counter-reset: st-ol;
+    display: grid;
+    gap: var(--st-spacing-1, 0.25rem);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .st-orderedList--nested {
+    margin-block-start: var(--st-spacing-1, 0.25rem);
+    margin-inline-start: var(--st-spacing-4, 1rem);
+  }
+
+  .st-orderedList__item {
+    counter-increment: st-ol;
+    line-height: 1.5;
+    padding-inline-start: var(--st-spacing-8, 2rem);
+    position: relative;
+  }
+
+  .st-orderedList__item::before {
+    color: var(--st-semantic-text-secondary);
+    content: counter(st-ol) ".";
+    font-variant-numeric: tabular-nums;
+    inset-inline-start: 0;
+    position: absolute;
+    text-align: end;
+    width: var(--st-spacing-6, 1.5rem);
+  }
+</style>

package/dist/OrderedList.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from "svelte";
+export type OrderedListInput = string | OrderedListItem;
+export interface OrderedListItem {
+    content: string | Snippet;
+    /** Sous-items : chaînes ou objets (normalisés au rendu). */
+    children?: OrderedListInput[];
+}
+import type { HTMLAttributes } from "svelte/elements";
+type OrderedListProps = Omit<HTMLAttributes<HTMLOListElement>, "class"> & {
+    items: OrderedListInput[];
+    nested?: boolean;
+    class?: string;
+};
+declare const OrderedList: import("svelte").Component<OrderedListProps, {}, "">;
+type OrderedList = ReturnType<typeof OrderedList>;
+export default OrderedList;
+//# sourceMappingURL=OrderedList.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OrderedList.svelte.d.ts","sourceRoot":"","sources":["../src/lib/OrderedList.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,eAAe,CAAC;AAExD,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAC;CAC/B;AAGH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC,GAAG;IACxE,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA4DJ,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/OverflowMenu.svelte

@@ -180,10 +180,13 @@
     );
   }
 
+  /* Focus = stratégie d'anatomie partagée (outline DSFR / inset Carbon / ring base). */
   .st-overflowMenu__trigger:focus-visible {
     border-color: var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
-    box-shadow: 0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
-    outline: none;
+    outline: var(--st-component-control-anatomy-focus-outline, none);
+    outline-offset: var(--st-component-control-anatomy-focus-offset, 0);
+    box-shadow: var(--st-component-control-anatomy-focus-boxShadow,
+      0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive)));
   }
 
   .st-overflowMenu__trigger[aria-expanded="true"] {

package/dist/PaginationNav.svelte

@@ -168,11 +168,14 @@
     );
   }
 
+  /* Focus = stratégie d'anatomie partagée (outline DSFR / inset Carbon / ring base). */
   .st-paginationNav__page:focus-visible,
   .st-paginationNav__nav:focus-visible {
     border-color: var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
-    box-shadow: 0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
-    outline: none;
+    outline: var(--st-component-control-anatomy-focus-outline, none);
+    outline-offset: var(--st-component-control-anatomy-focus-offset, 0);
+    box-shadow: var(--st-component-control-anatomy-focus-boxShadow,
+      0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive)));
   }
 
   .st-paginationNav__page--active {

package/dist/PasswordInput.svelte

@@ -89,8 +89,12 @@
   }
 
   .st-field__label {
-    font-size: 0.875rem;
-    font-weight: 600;
+    font-family: var(--st-component-field-labelTypography-family, inherit);
+    font-size: var(--st-component-field-labelTypography-size, 0.875rem);
+    font-weight: var(--st-component-field-labelTypography-weight, 600);
+    line-height: var(--st-component-field-labelTypography-lineHeight, 1.4);
+    letter-spacing: var(--st-component-field-labelTypography-letterSpacing, 0);
+    text-transform: var(--st-component-field-labelTypography-textTransform, none);
   }
 
   .st-field__help,
@@ -107,11 +111,15 @@
     color: var(--st-component-field-errorText, var(--st-semantic-feedback-error));
   }
 
+  /* Field box = resolved field anatomy (v1.2.0), same as Input. */
   .st-passwordInput {
     align-items: center;
-    background: var(--st-component-control-background, var(--st-semantic-surface-default));
-    border: 1px solid var(--st-component-control-border, var(--st-semantic-border-subtle));
-    border-radius: var(--st-component-control-radius, 0.375rem);
+    background: var(--st-component-control-anatomy-field-fillBg, var(--st-component-control-background, var(--st-semantic-surface-default)));
+    border-top: var(--st-component-control-anatomy-field-borderTop, var(--st-component-control-anatomy-shape-borderWidth, 1px) var(--st-component-control-anatomy-shape-borderStyle, solid) var(--st-component-control-border, var(--st-semantic-border-subtle)));
+    border-right: var(--st-component-control-anatomy-field-borderRight, var(--st-component-control-anatomy-shape-borderWidth, 1px) var(--st-component-control-anatomy-shape-borderStyle, solid) var(--st-component-control-border, var(--st-semantic-border-subtle)));
+    border-bottom: var(--st-component-control-anatomy-field-borderBottom, var(--st-component-control-anatomy-shape-borderWidth, 1px) var(--st-component-control-anatomy-shape-borderStyle, solid) var(--st-component-control-border, var(--st-semantic-border-subtle)));
+    border-left: var(--st-component-control-anatomy-field-borderLeft, var(--st-component-control-anatomy-shape-borderWidth, 1px) var(--st-component-control-anatomy-shape-borderStyle, solid) var(--st-component-control-border, var(--st-semantic-border-subtle)));
+    border-radius: var(--st-component-control-anatomy-shape-radius, 0.375rem);
     color: var(--st-component-control-text, var(--st-semantic-text-primary));
     display: inline-flex;
     transition:
@@ -138,7 +146,10 @@
 
   .st-passwordInput:focus-within {
     border-color: var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
-    box-shadow: 0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
+    outline: var(--st-component-control-anatomy-focus-outline, none);
+    outline-offset: var(--st-component-control-anatomy-focus-offset, 0);
+    box-shadow: var(--st-component-control-anatomy-focus-boxShadow,
+      0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive)));
   }
 
   .st-passwordInput:has([aria-invalid="true"]) {

package/dist/Quote.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type QuoteProps = Omit<HTMLAttributes<HTMLElement>, "class" | "cite"> & {
+    /** Auteur de la citation. */
+    author?: string;
+    /** Source / référence (affichée après l'auteur). */
+    source?: string;
+    /** URL source (attribut cite du blockquote). */
+    cite?: string;
+    class?: string;
+    children?: Snippet;
+  };
+
+  let {
+    author,
+    source,
+    cite,
+    class: className,
+    children,
+    ...rest
+  }: QuoteProps = $props();
+
+  const classes = () => ["st-quote", className].filter(Boolean).join(" ");
+  const hasAttribution = () => Boolean(author || source);
+</script>
+
+<figure {...rest} class={classes()}>
+  <blockquote class="st-quote__text" {cite}>
+    {#if children}{@render children()}{/if}
+  </blockquote>
+  {#if hasAttribution()}
+    <figcaption class="st-quote__attribution">
+      {#if author}<span class="st-quote__author">{author}</span>{/if}
+      {#if source}<cite class="st-quote__source">{source}</cite>{/if}
+    </figcaption>
+  {/if}
+</figure>
+
+<style>
+  .st-quote {
+    border-left: 4px solid var(--st-semantic-action-primary);
+    margin: 0;
+    padding: var(--st-spacing-2, 0.5rem) 0 var(--st-spacing-2, 0.5rem) var(--st-spacing-4, 1rem);
+  }
+
+  .st-quote__text {
+    color: var(--st-semantic-text-primary);
+    font-size: 1.125rem;
+    line-height: 1.6;
+    margin: 0;
+  }
+
+  .st-quote__attribution {
+    color: var(--st-semantic-text-secondary);
+    font-size: 0.875rem;
+    margin-top: var(--st-spacing-2, 0.5rem);
+  }
+
+  .st-quote__author {
+    font-weight: 600;
+  }
+
+  .st-quote__author + .st-quote__source::before {
+    content: ", ";
+  }
+
+  .st-quote__source {
+    font-style: italic;
+  }
+</style>

package/dist/Quote.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type QuoteProps = Omit<HTMLAttributes<HTMLElement>, "class" | "cite"> & {
+    /** Auteur de la citation. */
+    author?: string;
+    /** Source / référence (affichée après l'auteur). */
+    source?: string;
+    /** URL source (attribut cite du blockquote). */
+    cite?: string;
+    class?: string;
+    children?: Snippet;
+};
+declare const Quote: import("svelte").Component<QuoteProps, {}, "">;
+type Quote = ReturnType<typeof Quote>;
+export default Quote;
+//# sourceMappingURL=Quote.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Quote.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Quote.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG;IACtE,6BAA6B;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAmCJ,QAAA,MAAM,KAAK,gDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/Radio.svelte

@@ -13,7 +13,7 @@
 </script>
 
 <label class={classes()}>
-  <input {...rest} class="st-choice__input" type="radio" data-invalid={invalid ? "true" : undefined} />
+  <input {...rest} class="st-choice__input" type="radio" aria-invalid={invalid ? "true" : undefined} />
   <span class="st-choice__content">
     <span class="st-choice__label">{label}</span>
     {#if helperText}<span class="st-choice__help">{helperText}</span>{/if}
@@ -24,17 +24,45 @@
   .st-choice {
     align-items: start;
     color: var(--st-component-field-labelText, var(--st-semantic-text-primary));
+    cursor: var(--st-cursor-interactive, pointer);
     display: inline-grid;
     gap: 0.625rem;
     grid-template-columns: auto 1fr;
   }
 
   .st-choice__input {
+    /* Natif stylé : couleur de sélection thémée + taille + focus par stratégie
+       d'anatomie + états. Aucun widget custom, a11y native préservée. */
+    accent-color: var(--st-component-selection-checkedBackground, var(--st-semantic-action-primary));
+    cursor: inherit;
     height: 1rem;
     margin: 0.125rem 0 0;
     width: 1rem;
   }
 
+  /* Focus = stratégie d'anatomie partagée (outline DSFR / inset Carbon / ring base). */
+  .st-choice__input:focus-visible {
+    outline: var(--st-component-control-anatomy-focus-outline, none);
+    outline-offset: var(--st-component-control-anatomy-focus-offset, 0);
+    box-shadow: var(--st-component-control-anatomy-focus-boxShadow,
+      0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive)));
+  }
+
+  .st-choice__input[aria-invalid="true"] {
+    accent-color: var(--st-component-control-invalidBorder, var(--st-semantic-feedback-error));
+    outline-color: var(--st-component-control-invalidBorder, var(--st-semantic-feedback-error));
+  }
+
+  .st-choice__input:disabled {
+    cursor: var(--st-cursor-disabled, not-allowed);
+    opacity: 0.55;
+  }
+
+  .st-choice:has(.st-choice__input:disabled) {
+    color: var(--st-component-control-disabledText, var(--st-semantic-text-muted));
+    cursor: var(--st-cursor-disabled, not-allowed);
+  }
+
   .st-choice__content {
     display: grid;
     gap: 0.25rem;

package/dist/ScatterPlot.svelte

@@ -0,0 +1,179 @@
+<script lang="ts" module>
+  export type ScatterPlotTone =
+    | "category1" | "category2" | "category3" | "category4"
+    | "category5" | "category6" | "category7" | "category8";
+
+  export type ScatterPlotDatum = {
+    x: number;
+    y: number;
+    label?: string;
+    tone?: ScatterPlotTone;
+  };
+</script>
+
+<script lang="ts">
+  type ScatterPlotProps = {
+    data: ScatterPlotDatum[];
+    width?: number;
+    height?: number;
+    xLabel?: string;
+    yLabel?: string;
+    radius?: number;
+    label: string;
+    class?: string;
+  };
+
+  let {
+    data,
+    width = 480,
+    height = 280,
+    xLabel,
+    yLabel,
+    radius = 5,
+    label,
+    class: className
+  }: ScatterPlotProps = $props();
+
+  const MARGIN = { top: 14, right: 18, bottom: 36, left: 48 };
+
+  function niceTicks(min: number, max: number, target = 5): number[] {
+    if (!Number.isFinite(min) || !Number.isFinite(max) || min === max) {
+      return [Number.isFinite(max) ? max : 0];
+    }
+    const range = max - min;
+    const rough = range / Math.max(target - 1, 1);
+    const pow = Math.pow(10, Math.floor(Math.log10(rough)));
+    const norm = rough / pow;
+    let step: number;
+    if (norm < 1.5) step = pow;
+    else if (norm < 3) step = 2 * pow;
+    else if (norm < 7) step = 5 * pow;
+    else step = 10 * pow;
+    const start = Math.floor(min / step) * step;
+    const end = Math.ceil(max / step) * step;
+    const ticks: number[] = [];
+    for (let v = start; v <= end + step / 2; v += step) ticks.push(Number(v.toFixed(10)));
+    return ticks;
+  }
+
+  function scaleLinear(v: number, d0: number, d1: number, r0: number, r1: number) {
+    if (d1 === d0) return r0;
+    return r0 + ((v - d0) * (r1 - r0)) / (d1 - d0);
+  }
+
+  function fmt(v: number): string {
+    if (Math.abs(v) >= 1000) return `${(v / 1000).toFixed(v % 1000 === 0 ? 0 : 1)}k`;
+    return Number.isInteger(v) ? String(v) : v.toFixed(1);
+  }
+
+  let hoveredIndex: number | null = $state(null);
+
+  const TONES = ["category1","category2","category3","category4","category5","category6","category7","category8"] as const;
+
+  const scales = $derived.by(() => {
+    const xs = data.map((d) => d.x);
+    const ys = data.map((d) => d.y);
+    const xTicks = niceTicks(Math.min(...xs), Math.max(...xs));
+    const yTicks = niceTicks(Math.min(...ys), Math.max(...ys));
+    const plotW = Math.max(width - MARGIN.left - MARGIN.right, 1);
+    const plotH = Math.max(height - MARGIN.top - MARGIN.bottom, 1);
+    return {
+      xTicks, yTicks,
+      xMin: xTicks[0], xMax: xTicks[xTicks.length - 1],
+      yMin: yTicks[0], yMax: yTicks[yTicks.length - 1],
+      plotW, plotH
+    };
+  });
+
+  const points = $derived.by(() => {
+    const { xMin, xMax, yMin, yMax, plotW, plotH } = scales;
+    return data.map((d, i) => ({
+      cx: MARGIN.left + scaleLinear(d.x, xMin, xMax, 0, plotW),
+      cy: MARGIN.top + scaleLinear(d.y, yMin, yMax, plotH, 0),
+      datum: d,
+      tone: d.tone ?? TONES[i % TONES.length]
+    }));
+  });
+
+  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>
+
+  {#if hoveredIndex !== null && points[hoveredIndex]}
+    {@const p = points[hoveredIndex]}
+    <div class="st-scatterPlot__tooltip" role="presentation" style="left: {(p.cx / width) * 100}%; top: {(p.cy / height) * 100}%">
+      {#if p.datum.label}<span class="st-scatterPlot__tooltipLabel">{p.datum.label}</span>{/if}
+      <span class="st-scatterPlot__tooltipValue">x {p.datum.x} · y {p.datum.y}</span>
+    </div>
+  {/if}
+</div>
+
+<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__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--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); }
+  .st-scatterPlot__point--category4 { fill: var(--st-semantic-data-category4); }
+  .st-scatterPlot__point--category5 { fill: var(--st-semantic-data-category5); }
+  .st-scatterPlot__point--category6 { fill: var(--st-semantic-data-category6); }
+  .st-scatterPlot__point--category7 { fill: var(--st-semantic-data-category7); }
+  .st-scatterPlot__point--category8 { fill: var(--st-semantic-data-category8); }
+  .st-scatterPlot__tooltip {
+    background: var(--st-semantic-surface-inverse); border-radius: var(--st-radius-sm, 0.25rem);
+    color: var(--st-semantic-text-inverse); display: inline-flex; flex-direction: column;
+    font-size: 0.75rem; gap: 0.125rem; line-height: 1.2; padding: 0.375rem 0.5rem;
+    pointer-events: none; position: absolute; transform: translate(-50%, calc(-100% - 8px)); white-space: nowrap; z-index: 1;
+  }
+  .st-scatterPlot__tooltipLabel { font-weight: 600; }
+  .st-scatterPlot__tooltipValue { opacity: 0.85; }
+</style>

package/dist/ScatterPlot.svelte.d.ts

@@ -0,0 +1,21 @@
+export type ScatterPlotTone = "category1" | "category2" | "category3" | "category4" | "category5" | "category6" | "category7" | "category8";
+export type ScatterPlotDatum = {
+    x: number;
+    y: number;
+    label?: string;
+    tone?: ScatterPlotTone;
+};
+type ScatterPlotProps = {
+    data: ScatterPlotDatum[];
+    width?: number;
+    height?: number;
+    xLabel?: string;
+    yLabel?: string;
+    radius?: number;
+    label: string;
+    class?: string;
+};
+declare const ScatterPlot: import("svelte").Component<ScatterPlotProps, {}, "">;
+type ScatterPlot = ReturnType<typeof ScatterPlot>;
+export default ScatterPlot;
+//# sourceMappingURL=ScatterPlot.svelte.d.ts.map

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

@@ -0,0 +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"}

package/dist/Search.svelte

@@ -87,8 +87,12 @@
   }
 
   .st-field__label {
-    font-size: 0.875rem;
-    font-weight: 600;
+    font-family: var(--st-component-field-labelTypography-family, inherit);
+    font-size: var(--st-component-field-labelTypography-size, 0.875rem);
+    font-weight: var(--st-component-field-labelTypography-weight, 600);
+    line-height: var(--st-component-field-labelTypography-lineHeight, 1.4);
+    letter-spacing: var(--st-component-field-labelTypography-letterSpacing, 0);
+    text-transform: var(--st-component-field-labelTypography-textTransform, none);
   }
 
   .st-field__help,
@@ -105,11 +109,15 @@
     color: var(--st-component-field-errorText, var(--st-semantic-feedback-error));
   }
 
+  /* Field box = resolved field anatomy (v1.2.0), same as Input. */
   .st-search {
     align-items: center;
-    background: var(--st-component-control-background, var(--st-semantic-surface-default));
-    border: 1px solid var(--st-component-control-border, var(--st-semantic-border-subtle));
-    border-radius: var(--st-component-control-radius, 0.375rem);
+    background: var(--st-component-control-anatomy-field-fillBg, var(--st-component-control-background, var(--st-semantic-surface-default)));
+    border-top: var(--st-component-control-anatomy-field-borderTop, var(--st-component-control-anatomy-shape-borderWidth, 1px) var(--st-component-control-anatomy-shape-borderStyle, solid) var(--st-component-control-border, var(--st-semantic-border-subtle)));
+    border-right: var(--st-component-control-anatomy-field-borderRight, var(--st-component-control-anatomy-shape-borderWidth, 1px) var(--st-component-control-anatomy-shape-borderStyle, solid) var(--st-component-control-border, var(--st-semantic-border-subtle)));
+    border-bottom: var(--st-component-control-anatomy-field-borderBottom, var(--st-component-control-anatomy-shape-borderWidth, 1px) var(--st-component-control-anatomy-shape-borderStyle, solid) var(--st-component-control-border, var(--st-semantic-border-subtle)));
+    border-left: var(--st-component-control-anatomy-field-borderLeft, var(--st-component-control-anatomy-shape-borderWidth, 1px) var(--st-component-control-anatomy-shape-borderStyle, solid) var(--st-component-control-border, var(--st-semantic-border-subtle)));
+    border-radius: var(--st-component-control-anatomy-shape-radius, 0.375rem);
     color: var(--st-component-control-text, var(--st-semantic-text-primary));
     display: inline-flex;
     transition:
@@ -136,7 +144,10 @@
 
   .st-search:focus-within {
     border-color: var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
-    box-shadow: 0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
+    outline: var(--st-component-control-anatomy-focus-outline, none);
+    outline-offset: var(--st-component-control-anatomy-focus-offset, 0);
+    box-shadow: var(--st-component-control-anatomy-focus-boxShadow,
+      0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive)));
   }
 
   .st-search:has([aria-invalid="true"]) {