@sentropic/design-system-svelte 0.34.46 → 0.34.48

package/dist/AppShell.svelte

@@ -0,0 +1,167 @@
+<script lang="ts">
+  // App-shell SVELTE : COMPOSE les vrais composants du design system — zéro contrôle
+  // bricolé. Triggers = DS Button / IconButton ; menus = DS MenuPopover + Menu ;
+  // identité = DS IdentityMenu ; barre = DS Header. Le look vient donc des tokens DS
+  // (--st-component-control-*) → pixel-cohérent avec le header de référence, et les
+  // menus sont ceux du DS (fonctionnels). Piloté par `siteConfig`.
+  import Header from "./Header.svelte";
+  import Button from "./Button.svelte";
+  import IconButton from "./IconButton.svelte";
+  import MenuPopover from "./MenuPopover.svelte";
+  import Menu from "./Menu.svelte";
+  import { Boxes, ChevronDown, Globe, Moon, Palette, Search as SearchIcon, Sun } from "@lucide/svelte";
+  import IdentityButton from "./IdentityButton.svelte";
+  import type { SiteConfig } from "./site-config";
+
+  let { config }: { config: SiteConfig } = $props();
+
+  const brand = $derived(config.brand ?? { name: "Sentropic" });
+  const nav = $derived(Array.isArray(config.nav) ? config.nav : []);
+  const t = $derived(config.theming ?? { themes: [], theme: "" });
+
+  const isActive = (item: { href: string; active?: boolean }) =>
+    item.active != null
+      ? item.active
+      : config.activePath != null &&
+        (item.href === config.activePath || (item.href !== "/" && (config.activePath ?? "").startsWith(item.href)));
+
+  const themeItems = $derived((t.themes ?? []).map((o) => ({ label: o.label, value: o.id })));
+  const fwItems = $derived((config.frameworkSwitcher?.available ?? []).map((o) => ({ label: o.label, value: o.id })));
+  const localeItems = $derived((config.locale?.available ?? []).map((o) => ({ label: o.label, value: o.code })));
+  const fwLabel = $derived((config.frameworkSwitcher?.available ?? []).find((o) => o.id === config.frameworkSwitcher?.current)?.label ?? "");
+  const themeLabel = $derived((t.themes ?? []).find((o) => o.id === t.theme)?.label ?? "");
+
+  // Ancrage des menus (MenuPopover veut un HTMLElement) : on bind un span tight.
+  let themeEl = $state<HTMLElement | null>(null);
+  let fwEl = $state<HTMLElement | null>(null);
+  let localeEl = $state<HTMLElement | null>(null);
+  let themeOpen = $state(false);
+  let fwOpen = $state(false);
+  let localeOpen = $state(false);
+
+  function cycleColorMode() {
+    const cur = t.colorMode;
+    t.onColorModeChange?.(cur === "light" ? "dark" : cur === "dark" ? "auto" : "light");
+  }
+</script>
+
+{#snippet logo()}
+  <a class="st-shell__brand" href={brand.href ?? "/"} aria-label={brand.label ?? [brand.name, brand.productName].filter(Boolean).join(" ")}>
+    {#if brand.logoSrc}<img class="st-shell__brandMark" src={brand.logoSrc} alt="" aria-hidden="true" />{/if}
+    <span class="st-shell__brandCopy">
+      {#if brand.name}<span class="st-shell__brandName">{brand.name}</span>{/if}
+      {#if brand.productName}<span class="st-shell__brandProduct">{brand.productName}</span>{/if}
+    </span>
+  </a>
+{/snippet}
+
+{#snippet navigation()}
+  <nav class="st-shell__nav" aria-label={config.navLabel ?? "Navigation"}>
+    {#each nav as item (item.href)}
+      <a class="st-shell__navLink" href={item.href} aria-current={isActive(item) ? "page" : undefined}>{item.label}</a>
+    {/each}
+  </nav>
+{/snippet}
+
+{#snippet actions()}
+  <div class="st-shell__actions">
+    {#if config.search?.enabled}
+      <Button variant="secondary" size="sm" class="st-shell__search" onclick={() => config.search?.onSearch?.("")}>
+        <SearchIcon size={16} strokeWidth={2.1} aria-hidden="true" />
+        <span>{config.search.placeholder ?? "Rechercher…"}</span>
+        <kbd class="st-shell__kbd">/</kbd>
+      </Button>
+    {/if}
+
+    {#if config.frameworkSwitcher?.enabled}
+      <span class="st-shell__menuWrap" bind:this={fwEl}>
+        <Button variant="secondary" size="sm" class="st-shell__switch" onclick={() => (fwOpen = !fwOpen)} aria-haspopup="menu" aria-expanded={fwOpen}>
+          <Boxes size={14} aria-hidden="true" /><span>{fwLabel}</span><ChevronDown size={14} aria-hidden="true" />
+        </Button>
+      </span>
+      <MenuPopover bind:open={fwOpen} trigger={fwEl} placement="bottom-end" label="Framework">
+        <Menu label="Framework" items={fwItems} onselect={(v) => { config.frameworkSwitcher?.onChange?.(v); fwOpen = false; }} />
+      </MenuPopover>
+    {/if}
+
+    {#if (t.themes ?? []).length}
+      <span class="st-shell__menuWrap" bind:this={themeEl}>
+        <Button variant="secondary" size="sm" class="st-shell__switch" onclick={() => (themeOpen = !themeOpen)} aria-haspopup="menu" aria-expanded={themeOpen}>
+          <Palette size={14} aria-hidden="true" /><span>{themeLabel}</span><ChevronDown size={14} aria-hidden="true" />
+        </Button>
+      </span>
+      <MenuPopover bind:open={themeOpen} trigger={themeEl} placement="bottom-end" label={t.themeLabel ?? "Thème"}>
+        <Menu label={t.themeLabel ?? "Thème"} items={themeItems} onselect={(v) => { t.onThemeChange?.(v); themeOpen = false; }} />
+      </MenuPopover>
+    {/if}
+
+    {#if t.colorMode}
+      <IconButton size="sm" variant="ghost" aria-label="Mode couleur" onclick={cycleColorMode}>
+        {#if t.colorMode === "dark"}<Moon size={16} aria-hidden="true" />{:else}<Sun size={16} aria-hidden="true" />{/if}
+      </IconButton>
+    {/if}
+
+    {#if config.locale}
+      <span class="st-shell__menuWrap" bind:this={localeEl}>
+        <Button variant="secondary" size="sm" class="st-shell__switch" onclick={() => (localeOpen = !localeOpen)} aria-haspopup="menu" aria-expanded={localeOpen}>
+          <Globe size={14} aria-hidden="true" /><span>{(config.locale.current ?? "").toUpperCase()}</span><ChevronDown size={14} aria-hidden="true" />
+        </Button>
+      </span>
+      <MenuPopover bind:open={localeOpen} trigger={localeEl} placement="bottom-end" label={config.locale.label ?? "Langue"}>
+        <Menu label={config.locale.label ?? "Langue"} items={localeItems} onselect={(v) => { config.locale?.onChange?.(v); localeOpen = false; }} />
+      </MenuPopover>
+    {/if}
+
+    {#if config.identity}
+      <IdentityButton
+        mode="icon"
+        authState={config.identity.state}
+        user={config.identity.user ?? null}
+        signInLabel={config.identity.label ?? "Se connecter"}
+        onSignIn={() => config.identity?.onSignIn?.()}
+        onSignOut={() => config.identity?.onSignOut?.()}
+        menu={config.identity.menu ?? []}
+      />
+    {/if}
+  </div>
+{/snippet}
+
+<Header class="st-shell" label={config.brand?.label ?? "Navigation"} logo={logo} navigation={navigation} actions={actions} />
+
+<style>
+  /* Hauteur de barre alignée sur la référence docs (80px) : le Header DS lit
+     `--st-component-header-height` (défaut 3.5rem) ; on le porte à 5rem + padding 1.5rem. */
+  :global(.st-shell.st-header) { --st-component-header-height: 5rem; padding-inline: var(--st-spacing-6, 1.5rem); }
+  /* Style UNIQUE « bouton de contrôle » token-driven, applique a TOUS les controles
+     du header (search, switchers, mode couleur, login) — fini les 3 styles divergents
+     (gris secondary / ghost transparent / foncé). Fond blanc (control-background),
+     bordure subtle, texte secondaire, 12px/650, 36px ; hover = control-hoverBackground. */
+  :global(.st-shell .st-button),
+  :global(.st-shell .st-iconButton) {
+    background: var(--st-component-control-background, var(--st-semantic-surface-default, #ffffff));
+    border: 1px solid var(--st-component-control-border, var(--st-semantic-border-subtle, #e2e8f0));
+    color: var(--st-semantic-text-secondary);
+    font-weight: 650;
+    font-size: 12px;
+    height: 2.25rem;
+    border-radius: var(--st-radius-md, 0.375rem);
+  }
+  :global(.st-shell .st-iconButton) { width: 2.25rem; padding: 0; }
+  :global(.st-shell .st-button:hover),
+  :global(.st-shell .st-iconButton:hover) {
+    background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle, #f1f5f9));
+  }
+  :global(.st-shell .st-button svg),
+  :global(.st-shell .st-iconButton svg) { flex-shrink: 0; }
+  .st-shell__brand { align-items: center; color: var(--st-semantic-text-primary); display: inline-flex; flex: 0 0 auto; gap: var(--st-spacing-3, 0.75rem); text-decoration: none; }
+  .st-shell__brandMark { width: 2rem; height: 2rem; }
+  .st-shell__brandCopy { display: flex; flex-direction: column; gap: 0.08rem; line-height: 1; }
+  .st-shell__brandName { font-weight: 760; font-size: 1rem; }
+  .st-shell__brandProduct { font-weight: 650; font-size: 0.75rem; color: var(--st-semantic-text-secondary); }
+  .st-shell__nav { display: flex; align-items: center; gap: var(--st-spacing-1, 0.25rem); }
+  .st-shell__navLink { color: var(--st-semantic-text-secondary); text-decoration: none; font-size: 0.875rem; line-height: 1; padding: 0.38rem 0.75rem; border-radius: var(--st-radius-md, 0.375rem); }
+  .st-shell__navLink[aria-current="page"] { color: var(--st-semantic-text-primary); font-weight: 650; }
+  .st-shell__actions { display: flex; align-items: center; gap: var(--st-spacing-2, 0.5rem); }
+  .st-shell__menuWrap { display: inline-flex; }
+  .st-shell__kbd { border: 1px solid var(--st-semantic-border-subtle); border-radius: 0.25rem; font-size: 0.6875rem; padding: 0 0.3rem; color: var(--st-semantic-text-secondary); }
+</style>

package/dist/AppShell.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { SiteConfig } from "./site-config";
+type $$ComponentProps = {
+    config: SiteConfig;
+};
+declare const AppShell: import("svelte").Component<$$ComponentProps, {}, "">;
+type AppShell = ReturnType<typeof AppShell>;
+export default AppShell;
+//# sourceMappingURL=AppShell.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppShell.svelte.d.ts","sourceRoot":"","sources":["../src/lib/AppShell.svelte.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE/C,KAAK,gBAAgB,GAAI;IAAE,MAAM,EAAE,UAAU,CAAA;CAAE,CAAC;AA+HjD,QAAA,MAAM,QAAQ,sDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/Checkbox.svelte

@@ -1,23 +1,56 @@
 <script lang="ts">
+  import type { Snippet } from "svelte";
   import type { HTMLInputAttributes } from "svelte/elements";
 
   type CheckboxProps = Omit<HTMLInputAttributes, "class" | "type"> & {
     label: string;
     helperText?: string;
+    /** Secondary muted description line under the label (e.g. a filter hint). */
+    description?: string;
+    /** Trailing slot pushed to the row end (e.g. a count Badge). */
+    trailing?: Snippet;
     invalid?: boolean;
     class?: string;
   };
 
-  let { label, helperText, invalid = false, class: className, ...rest }: CheckboxProps = $props();
-  const classes = () => ["st-choice", "st-choice--checkbox", className].filter(Boolean).join(" ");
+  let {
+    label,
+    helperText,
+    description,
+    trailing,
+    invalid = false,
+    class: className,
+    ...rest
+  }: CheckboxProps = $props();
+
+  const uid = $props.id();
+  const descriptionId = `${uid}-description`;
+  // Merge our description id with any consumer-provided aria-describedby so we
+  // never clobber an existing one.
+  const describedBy = () => {
+    if (!description) return rest["aria-describedby"];
+    return [rest["aria-describedby"], descriptionId].filter(Boolean).join(" ");
+  };
+  const classes = () =>
+    ["st-choice", "st-choice--checkbox", description ? "st-choice--described" : null, className]
+      .filter(Boolean)
+      .join(" ");
 </script>
 
 <label class={classes()}>
-  <input {...rest} class="st-choice__input" type="checkbox" aria-invalid={invalid ? "true" : undefined} />
+  <input
+    {...rest}
+    class="st-choice__input"
+    type="checkbox"
+    aria-invalid={invalid ? "true" : undefined}
+    aria-describedby={describedBy()}
+  />
   <span class="st-choice__content">
     <span class="st-choice__label">{label}</span>
+    {#if description}<span class="st-choice__description" id={descriptionId}>{description}</span>{/if}
     {#if helperText}<span class="st-choice__help">{helperText}</span>{/if}
   </span>
+  {#if trailing}<span class="st-choice__trailing">{@render trailing()}</span>{/if}
 </label>
 
 <style>
@@ -30,6 +63,24 @@
     grid-template-columns: auto 1fr;
   }
 
+  /* SIGNAL filter row: input + content + trailing count, content fills, trailing
+     pushed to the row end. Top-aligned so the box rides the first text line when a
+     secondary description wraps below the label. */
+  .st-choice:has(.st-choice__trailing) {
+    align-items: start;
+    grid-template-columns: auto 1fr auto;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  .st-choice__trailing {
+    align-items: center;
+    align-self: start;
+    display: inline-flex;
+    flex: 0 0 auto;
+    justify-content: flex-end;
+  }
+
   .st-choice__input {
     /* Natif stylé : couleur de coche thémée + taille + focus par stratégie
        d'anatomie + états. Aucun widget custom, a11y native préservée. */
@@ -85,4 +136,11 @@
     color: var(--st-component-field-helpText, var(--st-semantic-text-secondary));
     font-size: 0.8125rem;
   }
+
+  /* Secondary muted description under the label (SIGNAL filter hint). */
+  .st-choice__description {
+    color: var(--st-semantic-text-secondary);
+    font-size: 0.8125rem;
+    line-height: 1.4;
+  }
 </style>

package/dist/Checkbox.svelte.d.ts

@@ -1,7 +1,12 @@
+import type { Snippet } from "svelte";
 import type { HTMLInputAttributes } from "svelte/elements";
 type CheckboxProps = Omit<HTMLInputAttributes, "class" | "type"> & {
     label: string;
     helperText?: string;
+    /** Secondary muted description line under the label (e.g. a filter hint). */
+    description?: string;
+    /** Trailing slot pushed to the row end (e.g. a count Badge). */
+    trailing?: Snippet;
     invalid?: boolean;
     class?: string;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Checkbox.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAGzD,KAAK,aAAa,GAAG,IAAI,CAAC,mBAAmB,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG;IACjE,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAqBJ,QAAA,MAAM,QAAQ,mDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Checkbox.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAGzD,KAAK,aAAa,GAAG,IAAI,CAAC,mBAAmB,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG;IACjE,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,6EAA6E;IAC7E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA4CJ,QAAA,MAAM,QAAQ,mDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/IdentityButton.svelte

@@ -0,0 +1,128 @@
+<script module lang="ts">
+  // Types exportes — en Svelte 5 les exports de module vont dans <script module>
+  // (le <script> d'instance ne sert qu'aux props/runes).
+  export type IdentityState = "anonymous" | "authenticated";
+  export type IdentityMode = "icon" | "button" | "menu";
+  export type IdentityTone = "default" | "onColor";
+  export interface IdentityUser {
+    name: string;
+    avatarSrc?: string;
+  }
+  export interface IdentityMenuEntry {
+    label: string;
+    href?: string;
+    onClick?: () => void;
+  }
+</script>
+
+<script lang="ts">
+  // IdentityButton — composant d'identite DS multi-modes (incubation app-shell).
+  // Dedup l'ancien split (IconButton+user pour l'anonyme / IdentityMenu pour
+  // l'authentifie) en UN composant a modes. Compose les composants DS
+  // (IconButton / Button / MenuPopover / Menu) — zero primitive nouvelle.
+  import IconButton from "./IconButton.svelte";
+  import Button from "./Button.svelte";
+  import MenuPopover from "./MenuPopover.svelte";
+  import Menu from "./Menu.svelte";
+  import { User } from "@lucide/svelte";
+
+  let {
+    authState = "anonymous",
+    user = null,
+    mode = "icon",
+    tone = "default",
+    signInLabel = "Se connecter",
+    accountLabel = "Compte",
+    onSignIn,
+    onSignOut,
+    menu = [],
+  }: {
+    authState?: IdentityState;
+    user?: IdentityUser | null;
+    mode?: IdentityMode;
+    tone?: IdentityTone;
+    signInLabel?: string;
+    accountLabel?: string;
+    onSignIn?: () => void;
+    onSignOut?: () => void;
+    menu?: IdentityMenuEntry[];
+  } = $props();
+
+  let triggerEl = $state<HTMLElement | null>(null);
+  let open = $state(false);
+
+  const initials = $derived(
+    user?.name
+      ? user.name.trim().split(/\s+/).map((w) => w[0]).slice(0, 2).join("").toUpperCase()
+      : "",
+  );
+  const authed = $derived(authState === "authenticated");
+  // Items du menu compte (mode "menu" ou clic sur l'avatar authentifie).
+  const menuItems = $derived([
+    ...menu.map((e) => ({ label: e.label, value: e.href ?? e.label })),
+    ...(onSignOut ? [{ label: "Se déconnecter", value: "__signout" }] : []),
+  ]);
+  function onMenuSelect(value: string) {
+    open = false;
+    if (value === "__signout") return onSignOut?.();
+    const entry = menu.find((e) => (e.href ?? e.label) === value);
+    if (entry?.onClick) entry.onClick();
+    else if (entry?.href) location.href = entry.href;
+  }
+</script>
+
+{#snippet face()}
+  {#if authed && user?.avatarSrc}
+    <img class="st-identityBtn__avatar" src={user.avatarSrc} alt="" aria-hidden="true" />
+  {:else if authed && initials}
+    <span class="st-identityBtn__initials" aria-hidden="true">{initials}</span>
+  {:else}
+    <User size={16} strokeWidth={2.1} aria-hidden="true" />
+  {/if}
+{/snippet}
+
+<span class="st-identityBtn" class:st-identityBtn--onColor={tone === "onColor"}>
+  {#if mode === "button"}
+    <Button variant={authed ? "ghost" : "secondary"} size="sm" onclick={() => (authed ? (open = !open) : onSignIn?.())}>
+      {@render face()}
+      <span>{authed ? (user?.name ?? accountLabel) : signInLabel}</span>
+    </Button>
+  {:else if mode === "menu"}
+    <span class="st-identityBtn__wrap" bind:this={triggerEl}>
+      <IconButton size="sm" variant="ghost" aria-label={authed ? accountLabel : signInLabel} onclick={() => (open = !open)}>
+        {@render face()}
+      </IconButton>
+    </span>
+    {#if menuItems.length}
+      <MenuPopover bind:open trigger={triggerEl} placement="bottom-end" label={accountLabel}>
+        <Menu label={accountLabel} items={menuItems} onselect={onMenuSelect} />
+      </MenuPopover>
+    {/if}
+  {:else}
+    <!-- mode "icon" (defaut) : icone/avatar seul. -->
+    <IconButton
+      size="sm"
+      variant="ghost"
+      aria-label={authed ? accountLabel : signInLabel}
+      onclick={() => (authed ? (menuItems.length ? (open = !open) : undefined) : onSignIn?.())}
+    >
+      {@render face()}
+    </IconButton>
+  {/if}
+</span>
+
+<style>
+  .st-identityBtn { display: inline-flex; }
+  .st-identityBtn__wrap { display: inline-flex; }
+  .st-identityBtn__avatar { width: 1.5rem; height: 1.5rem; border-radius: 50%; object-fit: cover; }
+  .st-identityBtn__initials {
+    width: 1.5rem; height: 1.5rem; border-radius: 50%;
+    display: inline-flex; align-items: center; justify-content: center;
+    font-size: 0.6875rem; font-weight: 650;
+    background: var(--st-semantic-surface-subtle, #f1f5f9);
+    color: var(--st-semantic-text-primary, #0f172a);
+  }
+  /* tone onColor : icone blanche pour chromes colores (Airbus/DSFR/sombres). */
+  .st-identityBtn--onColor :global(.st-iconButton),
+  .st-identityBtn--onColor :global(.st-button) { color: #ffffff; }
+</style>

package/dist/IdentityButton.svelte.d.ts

@@ -0,0 +1,27 @@
+export type IdentityState = "anonymous" | "authenticated";
+export type IdentityMode = "icon" | "button" | "menu";
+export type IdentityTone = "default" | "onColor";
+export interface IdentityUser {
+    name: string;
+    avatarSrc?: string;
+}
+export interface IdentityMenuEntry {
+    label: string;
+    href?: string;
+    onClick?: () => void;
+}
+type $$ComponentProps = {
+    authState?: IdentityState;
+    user?: IdentityUser | null;
+    mode?: IdentityMode;
+    tone?: IdentityTone;
+    signInLabel?: string;
+    accountLabel?: string;
+    onSignIn?: () => void;
+    onSignOut?: () => void;
+    menu?: IdentityMenuEntry[];
+};
+declare const IdentityButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type IdentityButton = ReturnType<typeof IdentityButton>;
+export default IdentityButton;
+//# sourceMappingURL=IdentityButton.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IdentityButton.svelte.d.ts","sourceRoot":"","sources":["../src/lib/IdentityButton.svelte.ts"],"names":[],"mappings":"AAKE,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG,eAAe,CAAC;AAC1D,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AACtD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,CAAC;AACjD,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AACD,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAaF,KAAK,gBAAgB,GAAI;IACtB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,IAAI,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IAC3B,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,IAAI,CAAC,EAAE,iBAAiB,EAAE,CAAC;CAC5B,CAAC;AAwFJ,QAAA,MAAM,cAAc,sDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/NavActionStack.svelte

@@ -0,0 +1,203 @@
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  /** Hiérarchie ENCODÉE DANS LE TYPE : une seule action `primary` est légitime
+   * dans une pile. `secondary` = action secondaire ; `ghost` = action discrète.
+   * La couleur sémantique (danger) n'est PAS un `kind` — elle vit dans
+   * `dangerZone`, rendue à part. Le mauvais chemin (4 « primaires » arc-en-ciel)
+   * devient ainsi impossible à exprimer proprement. */
+  export type NavActionKind = "primary" | "secondary" | "ghost";
+
+  export type NavAction = {
+    label: string;
+    icon?: Snippet;
+    onClick?: () => void;
+    href?: string;
+    kind?: NavActionKind;
+    disabled?: boolean;
+  };
+
+  /** Action destructrice, isolée sous un séparateur + un overline « Zone
+   * sensible ». Toujours en ton danger, jamais alignée avec les actions
+   * normales. Pas de `kind` : c'est une zone, pas une catégorie de couleur. */
+  export type NavActionDangerZone = {
+    label: string;
+    icon?: Snippet;
+    onClick?: () => void;
+    href?: string;
+  };
+
+  export type NavActionStackOrientation = "vertical" | "horizontal";
+</script>
+
+<script lang="ts">
+  // NavActionStack — empile des actions en ENCODANT la hiérarchie dans le type.
+  // Au plus UN `kind:"primary"` (les suivants sont dégradés en secondary +
+  // console.warn). La couleur sémantique « danger » n'est pas détournée en
+  // catégorie : la `dangerZone` est rendue séparément, sous un Divider + un
+  // overline, en ton danger pleine largeur. Réutilise le Button du DS — aucun
+  // bouton n'est réimplémenté. Style token-only scopé, aucun hex en dur.
+  import Button from "./Button.svelte";
+  import Divider from "./Divider.svelte";
+
+  type NavActionStackProps = {
+    actions?: NavAction[];
+    dangerZone?: NavActionDangerZone;
+    /** Libellé de l'overline de la zone sensible. Défaut « Zone sensible ». */
+    dangerLabel?: string;
+    orientation?: NavActionStackOrientation;
+    /** Étiquette a11y du groupe d'actions. */
+    label?: string;
+    class?: string;
+  };
+
+  let {
+    actions = [],
+    dangerZone,
+    dangerLabel = "Zone sensible",
+    orientation = "vertical",
+    label = "Actions",
+    class: className
+  }: NavActionStackProps = $props();
+
+  // La règle (un seul primary) appliquée AU RUNTIME en miroir du type : on garde
+  // le premier `primary`, on dégrade les suivants en `secondary` et on prévient.
+  const normalizedActions = $derived.by(() => {
+    let primarySeen = false;
+    return actions.map((action) => {
+      const kind: NavActionKind = action.kind ?? "secondary";
+      if (kind === "primary") {
+        if (primarySeen) {
+          console.warn(
+            `[NavActionStack] Plusieurs actions « primary » fournies — « ${action.label} » dégradée en « secondary ». Une pile n'a qu'une action primaire.`
+          );
+          return { ...action, kind: "secondary" as NavActionKind };
+        }
+        primarySeen = true;
+      }
+      return { ...action, kind };
+    });
+  });
+
+  // kind → variant Button : primary→primary, secondary→secondary, ghost→ghost.
+  const variantFor = (kind: NavActionKind): "primary" | "secondary" | "ghost" =>
+    kind;
+
+  const rootClasses = $derived(
+    ["st-navActionStack", `st-navActionStack--${orientation}`, className]
+      .filter(Boolean)
+      .join(" ")
+  );
+</script>
+
+<div class={rootClasses} role="group" aria-label={label}>
+  <div class="st-navActionStack__actions">
+    {#each normalizedActions as action (action.label)}
+      {#if action.href && !action.disabled}
+        <!-- Action-lien : porte les classes Button (réutilisation du style, pas
+             de réimplémentation de la logique bouton). -->
+        <a
+          class="st-button st-button--{variantFor(action.kind)} st-button--md st-navActionStack__item"
+          href={action.href}
+          onclick={action.onClick}
+        >
+          {@render action.icon?.()}
+          {action.label}
+        </a>
+      {:else}
+        <Button
+          variant={variantFor(action.kind)}
+          disabled={action.disabled}
+          onclick={action.onClick}
+          class="st-navActionStack__item"
+        >
+          {@render action.icon?.()}
+          {action.label}
+        </Button>
+      {/if}
+    {/each}
+  </div>
+
+  {#if dangerZone}
+    <!-- Zone sensible : SÉPARÉE des actions normales par un Divider, coiffée d'un
+         overline token-only, rendue en ton danger pleine largeur. Jamais alignée
+         avec la pile au-dessus. -->
+    <div class="st-navActionStack__danger" role="group" aria-label={dangerLabel}>
+      <Divider />
+      <span class="st-navActionStack__dangerLabel">{dangerLabel}</span>
+      {#if dangerZone.href}
+        <a
+          class="st-button st-button--danger st-button--md st-navActionStack__item st-navActionStack__dangerAction"
+          href={dangerZone.href}
+          onclick={dangerZone.onClick}
+        >
+          {@render dangerZone.icon?.()}
+          {dangerZone.label}
+        </a>
+      {:else}
+        <Button
+          variant="danger"
+          onclick={dangerZone.onClick}
+          class="st-navActionStack__item st-navActionStack__dangerAction"
+        >
+          {@render dangerZone.icon?.()}
+          {dangerZone.label}
+        </Button>
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style>
+  /* Token-only scopé. Vertical = pile pleine largeur (chaque action prend toute
+     la largeur) ; horizontal = rangée (boutons à leur largeur naturelle). */
+  .st-navActionStack {
+    display: flex;
+    flex-direction: column;
+    gap: var(--st-spacing-4, 1rem);
+    inline-size: 100%;
+  }
+
+  .st-navActionStack__actions {
+    display: flex;
+    gap: var(--st-spacing-2, 0.5rem);
+  }
+
+  .st-navActionStack--vertical .st-navActionStack__actions {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .st-navActionStack--horizontal .st-navActionStack__actions {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+
+  /* Pleine largeur en pile verticale ; largeur naturelle en rangée. */
+  .st-navActionStack--vertical :global(.st-navActionStack__item) {
+    inline-size: 100%;
+  }
+
+  .st-navActionStack__danger {
+    display: flex;
+    flex-direction: column;
+    gap: var(--st-spacing-2, 0.5rem);
+  }
+
+  .st-navActionStack__dangerLabel {
+    color: var(--st-component-overline-color, var(--st-semantic-text-secondary, inherit));
+    display: inline-block;
+    font-size: var(--st-component-overline-fontSize, 0.6875rem);
+    font-weight: var(--st-component-overline-fontWeight, 600);
+    letter-spacing: var(--st-component-overline-letterSpacing, 0.04em);
+    line-height: var(--st-component-overline-lineHeight, 1.3);
+    text-transform: var(--st-component-overline-textTransform, uppercase);
+  }
+
+  /* La zone sensible est pleine largeur quelle que soit l'orientation : c'est une
+     zone à part, pas un item de la rangée. */
+  .st-navActionStack :global(.st-navActionStack__dangerAction) {
+    inline-size: 100%;
+  }
+</style>