@sentropic/design-system-svelte 0.9.0 → 0.10.1

package/dist/Highlight.svelte

@@ -0,0 +1,63 @@
+<script lang="ts" module>
+  export type HighlightTone = "neutral" | "info" | "success" | "warning" | "error";
+</script>
+
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type HighlightProps = Omit<HTMLAttributes<HTMLElement>, "class" | "title"> & {
+    /** Tonalité de l'encart (couleur d'accent). */
+    tone?: HighlightTone;
+    /** Titre optionnel de la mise en avant. */
+    title?: string;
+    class?: string;
+    children?: Snippet;
+  };
+
+  let {
+    tone = "neutral",
+    title,
+    class: className,
+    children,
+    ...rest
+  }: HighlightProps = $props();
+
+  const classes = () => ["st-highlight", `st-highlight--${tone}`, className].filter(Boolean).join(" ");
+</script>
+
+<aside {...rest} class={classes()}>
+  {#if title}<p class="st-highlight__title">{title}</p>{/if}
+  {#if children}<div class="st-highlight__body">{@render children()}</div>{/if}
+</aside>
+
+<style>
+  /* Mise en avant / encart éditorial (DSFR "Mise en avant"). */
+  .st-highlight {
+    --st-highlight-accent: var(--st-semantic-action-primary);
+    background: var(--st-semantic-surface-subtle);
+    border-left: 4px solid var(--st-highlight-accent);
+    border-radius: var(--st-radius-md, 0.375rem);
+    color: var(--st-semantic-text-primary);
+    padding: var(--st-spacing-4, 1rem);
+  }
+
+  .st-highlight--info { --st-highlight-accent: var(--st-semantic-feedback-info); }
+  .st-highlight--success { --st-highlight-accent: var(--st-semantic-feedback-success); }
+  .st-highlight--warning { --st-highlight-accent: var(--st-semantic-feedback-warning); }
+  .st-highlight--error { --st-highlight-accent: var(--st-semantic-feedback-error); }
+
+  .st-highlight__title {
+    font-size: 0.9375rem;
+    font-weight: 650;
+    margin: 0 0 var(--st-spacing-2, 0.5rem);
+  }
+
+  .st-highlight__body {
+    color: var(--st-semantic-text-secondary);
+    font-size: 0.9375rem;
+    line-height: 1.55;
+  }
+
+  .st-highlight__body :global(p) { margin: 0; }
+</style>

package/dist/Highlight.svelte.d.ts

@@ -0,0 +1,15 @@
+export type HighlightTone = "neutral" | "info" | "success" | "warning" | "error";
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type HighlightProps = Omit<HTMLAttributes<HTMLElement>, "class" | "title"> & {
+    /** Tonalité de l'encart (couleur d'accent). */
+    tone?: HighlightTone;
+    /** Titre optionnel de la mise en avant. */
+    title?: string;
+    class?: string;
+    children?: Snippet;
+};
+declare const Highlight: import("svelte").Component<HighlightProps, {}, "">;
+type Highlight = ReturnType<typeof Highlight>;
+export default Highlight;
+//# sourceMappingURL=Highlight.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Highlight.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Highlight.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAGnF,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC,GAAG;IAC3E,+CAA+C;IAC/C,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA4BJ,QAAA,MAAM,SAAS,oDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/Input.svelte

@@ -58,8 +58,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,
@@ -77,13 +81,38 @@
   }
 
   .st-control {
-    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);
+    /* Field style (anatomy v1.2.0): the background fill + per-side borders come
+       from the resolved `field` anatomy. outline (base) = surface.default fill +
+       4 equal borders; filled-underline (DSFR/Carbon) = filled bg + bottom rule
+       only (top/right/left = none). Fallbacks reproduce the prior boxed look. */
+    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)));
+    /* Per-corner radius (anatomy v1.3.0): the TOP corners read the field's
+       `radiusTop` (DSFR « Champ de saisie » = 4px top, square bottom); the
+       BOTTOM corners keep `shape.radius`. Fallback = shape.radius on all four
+       corners → the base Sent Tech field stays a uniform rounded box. */
+    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);
+    /* Bottom rule as a box-shadow inset (anatomy v1.3.0, real DSFR/Carbon
+       technique) instead of a border-bottom — keeps the box height honest.
+       Fallback = none → the base boxed field draws its rule via the 4 borders. */
+    box-shadow: var(--st-component-control-anatomy-field-underline, none);
     color: var(--st-component-control-text, var(--st-semantic-text-primary));
-    font: inherit;
+    font-family: var(--st-component-control-anatomy-typography-family, inherit);
+    font-size: var(--st-component-control-anatomy-typography-size, inherit);
+    font-weight: var(--st-component-control-anatomy-typography-weight, 400);
+    line-height: var(--st-component-control-anatomy-typography-lineHeight, 1.5);
+    letter-spacing: var(--st-component-control-anatomy-typography-letterSpacing, normal);
     min-width: 0;
-    padding: 0 0.75rem;
+    /* Inputs use the SM inline padding (denser than buttons) — base = 0.75rem. */
+    padding: var(--st-component-control-anatomy-density-md-paddingBlock, 0)
+      var(--st-component-control-anatomy-density-sm-paddingInline, 0.75rem);
+    cursor: var(--st-cursor-text, text);
     transition:
       border-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
       box-shadow var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
@@ -91,15 +120,15 @@
   }
 
   .st-control--sm {
-    min-height: var(--st-component-control-smHeight, 2rem);
+    min-height: var(--st-component-control-anatomy-density-sm-controlHeight, var(--st-component-control-smHeight, 2rem));
   }
 
   .st-control--md {
-    min-height: var(--st-component-control-mdHeight, 2.5rem);
+    min-height: var(--st-component-control-anatomy-density-md-controlHeight, var(--st-component-control-mdHeight, 2.5rem));
   }
 
   .st-control--lg {
-    min-height: var(--st-component-control-lgHeight, 3rem);
+    min-height: var(--st-component-control-anatomy-density-lg-controlHeight, var(--st-component-control-lgHeight, 3rem));
   }
 
   .st-control::placeholder {
@@ -110,10 +139,18 @@
     border-color: var(--st-component-control-hoverBorder, var(--st-semantic-border-strong));
   }
 
+  /* Focus = shared mixin. Base/DSFR use outline; Carbon uses inset box-shadow.
+     The border-color change is the field's own affordance and stays. The field
+     focus box-shadow (anatomy v1.3.0) is COMPOSED so the resting underline is
+     not dropped: DSFR (outline) keeps the underline, Carbon stacks ring +
+     underline. Fallback = the plain focus ring (base boxed field). */
   .st-control: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-field-focusShadow,
+      var(--st-component-control-anatomy-focus-boxShadow,
+        0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive))));
   }
 
   .st-control[aria-invalid="true"] {
@@ -123,6 +160,6 @@
   .st-control:disabled {
     background: var(--st-component-control-disabledBackground, var(--st-semantic-surface-subtle));
     color: var(--st-component-control-disabledText, var(--st-semantic-text-muted));
-    cursor: not-allowed;
+    cursor: var(--st-cursor-disabled, not-allowed);
   }
 </style>

package/dist/LanguageSelector.svelte

@@ -0,0 +1,181 @@
+<script lang="ts" module>
+  export interface LanguageOption {
+    value: string;
+    label: string;
+  }
+</script>
+
+<script lang="ts">
+  type LanguageSelectorProps = {
+    /** Code de langue courant (bindable). */
+    value?: string;
+    options: LanguageOption[];
+    /** aria-label du déclencheur. */
+    label?: string;
+    disabled?: boolean;
+    class?: string;
+    onchange?: (value: string) => void;
+  };
+
+  let {
+    value = $bindable<string>(""),
+    options,
+    label = "Choisir la langue",
+    disabled = false,
+    class: className,
+    onchange
+  }: LanguageSelectorProps = $props();
+
+  let open = $state(false);
+  let root: HTMLDivElement | undefined = $state();
+
+  const current = $derived(options.find((o) => o.value === value) ?? options[0]);
+  const classes = () => ["st-languageSelector", className].filter(Boolean).join(" ");
+
+  function choose(next: string) {
+    value = next;
+    open = false;
+    onchange?.(next);
+  }
+</script>
+
+<svelte:window
+  onclick={(e) => {
+    if (open && root && e.target instanceof Node && !root.contains(e.target)) open = false;
+  }}
+  onkeydown={(e) => {
+    if (e.key === "Escape") open = false;
+  }}
+/>
+
+<div class={classes()} bind:this={root}>
+  <button
+    type="button"
+    class="st-languageSelector__trigger"
+    aria-haspopup="listbox"
+    aria-expanded={open}
+    aria-label={label}
+    {disabled}
+    onclick={() => (open = !open)}
+  >
+    <span class="st-languageSelector__current">{current?.label ?? value}</span>
+    <span class="st-languageSelector__caret" class:st-languageSelector__caret--open={open} aria-hidden="true"></span>
+  </button>
+
+  {#if open}
+    <ul class="st-languageSelector__menu" role="listbox" aria-label={label}>
+      {#each options as option (option.value)}
+        <li>
+          <button
+            type="button"
+            class="st-languageSelector__option"
+            class:st-languageSelector__option--active={option.value === value}
+            role="option"
+            aria-selected={option.value === value}
+            onclick={() => choose(option.value)}
+          >
+            <span class="st-languageSelector__check" aria-hidden="true">{option.value === value ? "✓" : ""}</span>
+            {option.label}
+          </button>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</div>
+
+<style>
+  .st-languageSelector {
+    display: inline-block;
+    position: relative;
+  }
+
+  .st-languageSelector__trigger {
+    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-radius-md, 0.375rem);
+    color: var(--st-semantic-text-primary);
+    cursor: pointer;
+    display: inline-flex;
+    font: inherit;
+    font-size: 0.85rem;
+    gap: var(--st-spacing-2, 0.5rem);
+    padding: 0.35rem 0.6rem;
+  }
+
+  .st-languageSelector__trigger:hover:not(:disabled) {
+    border-color: var(--st-component-control-hoverBorder, var(--st-semantic-border-strong));
+  }
+
+  .st-languageSelector__trigger:focus-visible {
+    border-color: var(--st-semantic-border-interactive);
+    box-shadow: 0 0 0 2px var(--st-semantic-border-interactive);
+    outline: none;
+  }
+
+  .st-languageSelector__trigger:disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+
+  .st-languageSelector__caret {
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+    border-top: 5px solid currentColor;
+    display: inline-block;
+    transition: transform var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
+  }
+
+  .st-languageSelector__caret--open {
+    transform: rotate(180deg);
+  }
+
+  .st-languageSelector__menu {
+    background: var(--st-component-menu-background, var(--st-semantic-surface-raised));
+    border: 1px solid var(--st-component-menu-border, var(--st-semantic-border-subtle));
+    border-radius: var(--st-radius-md, 0.375rem);
+    box-shadow: var(--st-shadow-medium, 0 8px 24px rgb(15 23 42 / 0.12));
+    display: flex;
+    flex-direction: column;
+    gap: 0.1rem;
+    list-style: none;
+    margin: 0.25rem 0 0;
+    min-width: 9rem;
+    padding: 0.25rem;
+    position: absolute;
+    right: 0;
+    z-index: var(--st-zindex-overlay, 80);
+  }
+
+  .st-languageSelector__option {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    border-radius: var(--st-radius-sm, 0.25rem);
+    color: var(--st-semantic-text-secondary);
+    cursor: pointer;
+    display: flex;
+    font: inherit;
+    font-size: 0.85rem;
+    gap: 0.4rem;
+    padding: 0.35rem 0.5rem;
+    text-align: left;
+    width: 100%;
+  }
+
+  .st-languageSelector__option:hover {
+    background: var(--st-semantic-surface-subtle);
+    color: var(--st-semantic-text-primary);
+  }
+
+  .st-languageSelector__option--active {
+    color: var(--st-semantic-action-primary);
+    font-weight: 600;
+  }
+
+  .st-languageSelector__check {
+    display: inline-flex;
+    justify-content: center;
+    width: 0.75rem;
+  }
+</style>

package/dist/LanguageSelector.svelte.d.ts

@@ -0,0 +1,18 @@
+export interface LanguageOption {
+    value: string;
+    label: string;
+}
+type LanguageSelectorProps = {
+    /** Code de langue courant (bindable). */
+    value?: string;
+    options: LanguageOption[];
+    /** aria-label du déclencheur. */
+    label?: string;
+    disabled?: boolean;
+    class?: string;
+    onchange?: (value: string) => void;
+};
+declare const LanguageSelector: import("svelte").Component<LanguageSelectorProps, {}, "value">;
+type LanguageSelector = ReturnType<typeof LanguageSelector>;
+export default LanguageSelector;
+//# sourceMappingURL=LanguageSelector.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LanguageSelector.svelte.d.ts","sourceRoot":"","sources":["../src/lib/LanguageSelector.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,KAAK,qBAAqB,GAAG;IAC3B,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AA0DJ,QAAA,MAAM,gBAAgB,gEAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/Link.svelte

@@ -57,9 +57,16 @@
 <style>
   .st-link {
     color: var(--st-component-link-text, var(--st-semantic-text-link));
-    cursor: pointer;
-    text-decoration: underline;
-    text-underline-offset: 0.18em;
+    cursor: var(--st-cursor-interactive, pointer);
+    /* Anatomy typography (additive): size/line-height/letter-spacing follow the
+       link role per theme. Base/DSFR use `inherit`/`normal` fallbacks → no visible
+       change; Carbon poses 14px / 18px / 0.16px to match the real .bx--link. */
+    font-size: var(--st-component-link-anatomy-typography-size, inherit);
+    line-height: var(--st-component-link-anatomy-typography-lineHeight, normal);
+    letter-spacing: var(--st-component-link-anatomy-typography-letterSpacing, normal);
+    text-decoration: var(--st-component-link-anatomy-typography-textDecoration, underline);
+    text-decoration-thickness: var(--st-component-link-anatomy-typography-decorationThickness, auto);
+    text-underline-offset: var(--st-component-link-anatomy-typography-decorationOffset, 0.18em);
   }
 
   .st-link--standalone {
@@ -73,18 +80,25 @@
   }
 
   .st-link:hover {
-    color: var(--st-component-link-hoverText, var(--st-semantic-action-primary));
+    color: var(--st-component-link-anatomy-states-hover-text, var(--st-component-link-hoverText, var(--st-semantic-action-primary)));
+    /* Anatomy v1.1.0: hover decoration sourced from states.hover.decoration
+       (= link typography textDecorationHover). Carbon: none → underline; DSFR/base:
+       underline → underline (no-op). The DSFR animated underline stays an escape. */
+    text-decoration-line: var(--st-component-link-anatomy-states-hover-decoration, underline);
   }
 
+  /* Focus = shared mixin. --st-radius-* fixed to the valid `sm` token (was the
+     phantom --st-radius-small). */
   .st-link:focus-visible {
-    border-radius: var(--st-radius-small, 0.375rem);
-    outline: 2px solid var(--st-component-link-focusRing, var(--st-semantic-border-interactive));
-    outline-offset: 2px;
+    border-radius: var(--st-component-link-anatomy-shape-radius, var(--st-radius-sm, 0.25rem));
+    outline: var(--st-component-link-anatomy-focus-outline, 2px solid var(--st-semantic-border-interactive));
+    outline-offset: var(--st-component-link-anatomy-focus-offset, 2px);
+    box-shadow: var(--st-component-link-anatomy-focus-boxShadow, none);
   }
 
   .st-link--disabled {
-    color: var(--st-component-link-disabledText, var(--st-semantic-text-muted));
-    cursor: not-allowed;
-    text-decoration: none;
+    color: var(--st-component-link-anatomy-states-disabled-text, var(--st-component-link-disabledText, var(--st-semantic-text-muted)));
+    cursor: var(--st-cursor-disabled, not-allowed);
+    text-decoration: var(--st-component-link-anatomy-states-disabled-decoration, none);
   }
 </style>

package/dist/MessageStatusBadge.svelte

@@ -8,10 +8,19 @@
   type MessageStatusBadgeProps = Omit<HTMLAttributes<HTMLSpanElement>, "children"> & {
     status: ChatMessageStatus;
     tone?: StatusTone;
+    /** Surcharge i18n des libellés par statut (défaut : libellés FR). */
+    labels?: Partial<Record<ChatMessageStatus, string>>;
     class?: string;
   };
 
-  let { status, tone, class: className, ...rest }: MessageStatusBadgeProps = $props();
+  let { status, tone, labels, class: className, ...rest }: MessageStatusBadgeProps = $props();
+
+  const DEFAULT_LABELS: Record<ChatMessageStatus, string> = {
+    pending: "En attente",
+    processing: "En cours",
+    completed: "Terminé",
+    failed: "Échec"
+  };
 
   const mappedTone = () => {
     if (tone) return tone;
@@ -21,12 +30,7 @@
     return "warning";
   };
 
-  const label = () => {
-    if (status === "pending") return "En attente";
-    if (status === "processing") return "En cours";
-    if (status === "completed") return "Terminé";
-    return "Échec";
-  };
+  const label = () => labels?.[status] ?? DEFAULT_LABELS[status];
 
   const classes = () => ["st-messageStatusBadge", className].filter(Boolean).join(" ");
 </script>

package/dist/MessageStatusBadge.svelte.d.ts

@@ -4,6 +4,8 @@ type StatusTone = "neutral" | "success" | "warning" | "error" | "info";
 type MessageStatusBadgeProps = Omit<HTMLAttributes<HTMLSpanElement>, "children"> & {
     status: ChatMessageStatus;
     tone?: StatusTone;
+    /** Surcharge i18n des libellés par statut (défaut : libellés FR). */
+    labels?: Partial<Record<ChatMessageStatus, string>>;
     class?: string;
 };
 declare const MessageStatusBadge: import("svelte").Component<MessageStatusBadgeProps, {}, "">;

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

@@ -1 +1 @@
-{"version":3,"file":"MessageStatusBadge.svelte.d.ts","sourceRoot":"","sources":["../src/lib/MessageStatusBadge.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAEvE,KAAK,uBAAuB,GAAG,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC,GAAG;IACjF,MAAM,EAAE,iBAAiB,CAAC;IAC1B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAqCJ,QAAA,MAAM,kBAAkB,6DAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"MessageStatusBadge.svelte.d.ts","sourceRoot":"","sources":["../src/lib/MessageStatusBadge.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAEvE,KAAK,uBAAuB,GAAG,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC,GAAG;IACjF,MAAM,EAAE,iBAAiB,CAAC;IAC1B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,qEAAqE;IACrE,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAC,CAAC;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAuCJ,QAAA,MAAM,kBAAkB,6DAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/MultiSelect.svelte

@@ -197,8 +197,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,
@@ -244,11 +248,15 @@
     min-height: var(--st-component-control-lgHeight, 3rem);
   }
 
+  /* Field box = resolved field anatomy (v1.2.0), same as Input. */
   .st-multiSelect__trigger {
     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));
     cursor: pointer;
     display: flex;
@@ -268,8 +276,10 @@
 
   .st-multiSelect__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-multiSelect[data-invalid="true"] .st-multiSelect__trigger {

package/dist/NumberInput.svelte

@@ -126,8 +126,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,
@@ -144,11 +148,15 @@
     color: var(--st-component-field-errorText, var(--st-semantic-feedback-error));
   }
 
+  /* Field box = resolved field anatomy (v1.2.0), same as Input. */
   .st-numberInput {
     align-items: stretch;
-    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;
     overflow: hidden;
@@ -176,7 +184,10 @@
 
   .st-numberInput: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-numberInput:has([aria-invalid="true"]) {