@sentropic/design-system-svelte 0.34.48 → 0.34.50

package/dist/NavItem.svelte

@@ -0,0 +1,266 @@
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  /** Profondeur dans l'arbre de nav → échelle typographique DÉCROISSANTE.
+   * L0 = racine (base/600), chaque palier descend en taille ET en graisse pour
+   * que la hiérarchie se LISE sans indentation seule. */
+  export type NavItemDepth = 0 | 1 | 2 | 3;
+
+  /** Ton sémantique de la rangée. `error` est un VRAI état (un « HTTP 403 »
+   * devient rouge sémantique), pas une teinte décorative. */
+  export type NavItemStatus = "neutral" | "info" | "success" | "warning" | "error";
+
+  export type NavItemSwatch = {
+    /** Couleur arbitraire (hex/rgb/var) → rendue par ColorSwatch. */
+    color?: string;
+    /** Ton sémantique → rendu par StatusDot (un point). Ignoré si `color`. */
+    tone?: "neutral" | "info" | "success" | "warning" | "error";
+    /** Forme de la pastille couleur (ColorSwatch). Défaut « square ». */
+    shape?: "square" | "circle" | "pill";
+  };
+
+  export type NavItemProps = {
+    /** Clé de sélection, passée telle quelle à SelectableRow (data-value). */
+    value?: string;
+    /** Libellé principal (1ʳᵉ ligne). */
+    title: string;
+    /** 2ᵉ ligne MUETTE, ellipsée indépendamment du titre. */
+    caption?: string;
+    /** Profondeur (défaut 0) → échelle typo + indentation de la tête. */
+    depth?: NavItemDepth;
+    /** Pastille de tête : couleur arbitraire (ColorSwatch) ou ton (StatusDot). */
+    swatch?: NavItemSwatch;
+    /** Bulle de compte en queue (Badge circle/sm, tabular-nums). */
+    count?: number;
+    /** Ton sémantique de la rangée. */
+    status?: NavItemStatus;
+    /** Sélection (bindable, honorée en standalone ; la liste prime si encadrée). */
+    selected?: boolean;
+    /** Non-interactif. */
+    disabled?: boolean;
+    /** Rend la rangée comme un lien (ancre) — anatomie identique. */
+    href?: string;
+    /** Tête personnalisée (prime sur `swatch`). MUST NOT être interactif en option. */
+    leading?: Snippet;
+    /** Queue personnalisée (prime sur `count`). MUST NOT être interactif en option. */
+    trailing?: Snippet;
+    /** Séparateur token-only rendu APRÈS la rangée. */
+    divider?: boolean;
+    class?: string;
+  };
+</script>
+
+<script lang="ts">
+  // NavItem — l'ANATOMIE DE RANGÉE CANONIQUE du système de navigation (vague 2).
+  // C'est la brique que tout rail/drawer instancie : tête (pastille/icône) +
+  // titre + caption muette + queue (bulle de compte) + sélection + profondeur
+  // typographique + séparateur optionnel.
+  //
+  // Zéro-entropie : NavItem NE RÉIMPLÉMENTE RIEN. Il COMPOSE SelectableRow (qui
+  // possède déjà leading/trailing, la caption à ellipse indépendante, la
+  // sélection à 2 signaux, l'accentBar opt-in, le rôle ARIA dérivé du conteneur
+  // et la propagation du roving-tabindex) et réutilise les primitives vague 1 :
+  //   • ColorSwatch  → tête quand `swatch.color` (couleur arbitraire inline)
+  //   • StatusDot    → tête quand `swatch.tone` (point sémantique)
+  //   • Badge        → queue (shape="circle" size="sm", tabular-nums) pour `count`
+  // Style PROPRE token-only scopé : chaque --st-component-navItem-* retombe sur
+  // un littéral de base, AUCUN hex en dur. Un thème qui n'émet rien rend
+  // byte-identique.
+  //
+  // a11y : NavItem N'INTRODUIT AUCUN interactif dans la rangée — pastille, badge
+  // et caption sont décoratifs/textuels. Le href passe par l'ancre native de
+  // SelectableRow en standalone ; dans une SelectableList, la liste garde son
+  // rôle option/roving-tabindex. La rangée reste UN seul tab stop.
+  import SelectableRow from "./SelectableRow.svelte";
+  import ColorSwatch from "./ColorSwatch.svelte";
+  import StatusDot from "./StatusDot.svelte";
+  import Badge from "./Badge.svelte";
+
+  let {
+    value,
+    title,
+    caption,
+    depth = 0,
+    swatch,
+    count,
+    status = "neutral",
+    selected = $bindable(false),
+    disabled = false,
+    href,
+    leading,
+    trailing,
+    divider = false,
+    class: className
+  }: NavItemProps = $props();
+
+  // Profondeur bornée [0..3] : une valeur hors-borne ne doit pas casser la classe.
+  const safeDepth = $derived(
+    (Math.min(Math.max(Math.trunc(Number(depth) || 0), 0), 3)) as NavItemDepth
+  );
+
+  // status → tone Badge : Badge ne connaît pas "neutral"+"info"+… exactement de
+  // la même façon, mais ses tons couvrent neutral/info/success/warning/error.
+  const badgeTone = $derived(status);
+
+  // Le count alimente un aria-label explicite « N title » (un compte nu est
+  // ambigu pour un lecteur d'écran — cf. la doc de Badge).
+  const countLabel = $derived(
+    count != null ? `${count} ${title}` : undefined
+  );
+
+  // Classes posées sur le WRAPPER NavItem (la rangée elle-même est SelectableRow).
+  // Le wrapper porte la profondeur (échelle typo + indentation) et le ton de
+  // rangée — ainsi SelectableRow reste inchangé et son rôle ARIA dérivé du
+  // conteneur (option/button) est préservé.
+  const wrapperClasses = $derived(
+    [
+      "st-navItem",
+      `st-navItem--depth${safeDepth}`,
+      status !== "neutral" ? `st-navItem--status-${status}` : null,
+      className
+    ]
+      .filter(Boolean)
+      .join(" ")
+  );
+
+  // Indentation de profondeur : un CSS var additif sur le wrapper, à fallback
+  // littéral par palier (aucun hex). SelectableRow ne forwarde pas `style` ; on
+  // pose donc la var sur le wrapper et la rangée hérite via la cascade.
+  const depthStyle = $derived(
+    `--st-navItem-indent: var(--st-component-navItem-depth${safeDepth}-indent, ${
+      ["0rem", "0.75rem", "1.5rem", "2.25rem"][safeDepth]
+    });`
+  );
+
+</script>
+
+<!-- Snippet de caption déclaré HORS de SelectableRow : il n'est passé en prop
+     `caption` QUE lorsque `caption` est fournie, pour préserver l'invariant
+     byte-identité de SelectableRow (sans caption → rangée single-line). -->
+{#snippet captionSnippet()}
+  <span class="st-navItem__caption">{caption}</span>
+{/snippet}
+
+<div class={wrapperClasses} style={depthStyle}>
+  <SelectableRow
+    bind:selected
+    {value}
+    {href}
+    {disabled}
+    caption={caption ? captionSnippet : undefined}
+  >
+    {#snippet leading()}
+      {#if leading}
+        {@render leading()}
+      {:else if swatch}
+        <!-- Tête : ColorSwatch pour une couleur arbitraire, sinon StatusDot pour
+             un ton sémantique. Décoratif → aria géré par la primitive. -->
+        {#if swatch.color}
+          <ColorSwatch color={swatch.color} shape={swatch.shape ?? "square"} size={14} />
+        {:else}
+          <StatusDot tone={swatch.tone ?? "neutral"} size={8} />
+        {/if}
+      {/if}
+    {/snippet}
+
+    {#snippet children()}
+      <span class="st-navItem__title">{title}</span>
+    {/snippet}
+
+    {#snippet trailing()}
+      {#if trailing}
+        {@render trailing()}
+      {:else if count != null}
+        <!-- Queue : bulle de compte. Badge shape="circle" size="sm" (tabular-nums),
+             ton sémantique aligné sur le `status` de la rangée. aria-label explicite. -->
+        <Badge shape="circle" size="sm" tone={badgeTone} aria-label={countLabel}>
+          {count}
+        </Badge>
+      {/if}
+    {/snippet}
+  </SelectableRow>
+
+  {#if divider}
+    <!-- Séparateur token-only APRÈS la rangée (anatomie de liste de nav). -->
+    <hr class="st-navItem__divider" aria-hidden="true" />
+  {/if}
+</div>
+
+<style>
+  .st-navItem {
+    display: block;
+    inline-size: 100%;
+  }
+
+  /* Indentation de PROFONDEUR : décale la rangée SelectableRow (sa tête comprise)
+     par un padding inline-start ADDITIF à son padding de base (0.75rem). On cible
+     la rangée via :global car c'est le DOM de SelectableRow (composé, pas inline).
+     La var --st-navItem-indent est posée sur le wrapper et héritée par cascade. */
+  .st-navItem :global(.st-selectableRow) {
+    padding-inline-start: calc(0.75rem + var(--st-navItem-indent, 0rem));
+  }
+
+  /* Échelle typographique : la graisse ET la taille DÉCROISSENT avec la
+     profondeur, pour que la hiérarchie se lise sans relief de couleur. Le wrapper
+     et le titre sont tous deux NavItem-authored (scope identique) → pas de
+     :global nécessaire. Chaque token retombe sur un littéral → thème silencieux =
+     byte-identique. */
+  .st-navItem--depth0 .st-navItem__title {
+    font-size: var(--st-component-navItem-depth0-fontSize, 0.875rem);
+    font-weight: var(--st-component-navItem-depth0-fontWeight, 600);
+  }
+  .st-navItem--depth1 .st-navItem__title {
+    font-size: var(--st-component-navItem-depth1-fontSize, 0.8125rem);
+    font-weight: var(--st-component-navItem-depth1-fontWeight, 500);
+  }
+  .st-navItem--depth2 .st-navItem__title {
+    font-size: var(--st-component-navItem-depth2-fontSize, 0.8125rem);
+    font-weight: var(--st-component-navItem-depth2-fontWeight, 400);
+  }
+  /* L3 — muted : même métrique que L2, couleur atténuée. */
+  .st-navItem--depth3 .st-navItem__title {
+    font-size: var(--st-component-navItem-depth3-fontSize, 0.8125rem);
+    font-weight: var(--st-component-navItem-depth3-fontWeight, 400);
+    color: var(--st-component-navItem-depth3-color, var(--st-semantic-text-muted));
+  }
+
+  .st-navItem__title {
+    display: block;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .st-navItem__caption {
+    display: block;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* Ton sémantique de la RANGÉE : teinte le titre par le feedback correspondant.
+     Un « HTTP 403 » error devient rouge sémantique réel. Chaque ton retombe sur
+     son token --st-semantic-feedback-*. */
+  .st-navItem--status-info .st-navItem__title {
+    color: var(--st-component-navItem-status-info, var(--st-semantic-feedback-info));
+  }
+  .st-navItem--status-success .st-navItem__title {
+    color: var(--st-component-navItem-status-success, var(--st-semantic-feedback-success));
+  }
+  .st-navItem--status-warning .st-navItem__title {
+    color: var(--st-component-navItem-status-warning, var(--st-semantic-feedback-warning));
+  }
+  .st-navItem--status-error .st-navItem__title {
+    color: var(--st-component-navItem-status-error, var(--st-semantic-feedback-error));
+  }
+
+  /* Séparateur token-only : une fine règle pleine largeur après la rangée. */
+  .st-navItem__divider {
+    border: 0;
+    border-top: var(--st-border-width-thin, 1px) solid
+      var(--st-component-navItem-dividerColor, var(--st-semantic-border-subtle, rgba(0, 0, 0, 0.08)));
+    margin-block: var(--st-component-navItem-dividerGap, 0.375rem);
+  }
+</style>

package/dist/NavItem.svelte.d.ts

@@ -0,0 +1,49 @@
+import type { Snippet } from "svelte";
+/** Profondeur dans l'arbre de nav → échelle typographique DÉCROISSANTE.
+ * L0 = racine (base/600), chaque palier descend en taille ET en graisse pour
+ * que la hiérarchie se LISE sans indentation seule. */
+export type NavItemDepth = 0 | 1 | 2 | 3;
+/** Ton sémantique de la rangée. `error` est un VRAI état (un « HTTP 403 »
+ * devient rouge sémantique), pas une teinte décorative. */
+export type NavItemStatus = "neutral" | "info" | "success" | "warning" | "error";
+export type NavItemSwatch = {
+    /** Couleur arbitraire (hex/rgb/var) → rendue par ColorSwatch. */
+    color?: string;
+    /** Ton sémantique → rendu par StatusDot (un point). Ignoré si `color`. */
+    tone?: "neutral" | "info" | "success" | "warning" | "error";
+    /** Forme de la pastille couleur (ColorSwatch). Défaut « square ». */
+    shape?: "square" | "circle" | "pill";
+};
+export type NavItemProps = {
+    /** Clé de sélection, passée telle quelle à SelectableRow (data-value). */
+    value?: string;
+    /** Libellé principal (1ʳᵉ ligne). */
+    title: string;
+    /** 2ᵉ ligne MUETTE, ellipsée indépendamment du titre. */
+    caption?: string;
+    /** Profondeur (défaut 0) → échelle typo + indentation de la tête. */
+    depth?: NavItemDepth;
+    /** Pastille de tête : couleur arbitraire (ColorSwatch) ou ton (StatusDot). */
+    swatch?: NavItemSwatch;
+    /** Bulle de compte en queue (Badge circle/sm, tabular-nums). */
+    count?: number;
+    /** Ton sémantique de la rangée. */
+    status?: NavItemStatus;
+    /** Sélection (bindable, honorée en standalone ; la liste prime si encadrée). */
+    selected?: boolean;
+    /** Non-interactif. */
+    disabled?: boolean;
+    /** Rend la rangée comme un lien (ancre) — anatomie identique. */
+    href?: string;
+    /** Tête personnalisée (prime sur `swatch`). MUST NOT être interactif en option. */
+    leading?: Snippet;
+    /** Queue personnalisée (prime sur `count`). MUST NOT être interactif en option. */
+    trailing?: Snippet;
+    /** Séparateur token-only rendu APRÈS la rangée. */
+    divider?: boolean;
+    class?: string;
+};
+declare const NavItem: import("svelte").Component<NavItemProps, {}, "selected">;
+type NavItem = ReturnType<typeof NavItem>;
+export default NavItem;
+//# sourceMappingURL=NavItem.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavItem.svelte.d.ts","sourceRoot":"","sources":["../src/lib/NavItem.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC;;uDAEuD;AACvD,MAAM,MAAM,YAAY,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAEzC;2DAC2D;AAC3D,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEjF,MAAM,MAAM,aAAa,GAAG;IAC1B,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0EAA0E;IAC1E,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAC5D,qEAAqE;IACrE,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,yDAAyD;IACzD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qEAAqE;IACrE,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,8EAA8E;IAC9E,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mCAAmC;IACnC,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,gFAAgF;IAChF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mFAAmF;IACnF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mFAAmF;IACnF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mDAAmD;IACnD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAgKJ,QAAA,MAAM,OAAO,0DAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/NavRail.svelte

@@ -0,0 +1,147 @@
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export interface NavRailItem {
+    id: string;
+    label: string;
+    href?: string;
+    active?: boolean;
+    disabled?: boolean;
+    badge?: string | number;
+    icon?: Snippet;
+  }
+
+  export interface NavRailProps {
+    items?: NavRailItem[];
+    label?: string;
+    activeItemId?: string;
+    onItemSelect?: (id: string) => void;
+    footer?: Snippet;
+    children?: Snippet;
+    class?: string;
+  }
+</script>
+
+<script lang="ts">
+  let {
+    items = [],
+    label = "Primary navigation",
+    activeItemId,
+    onItemSelect,
+    footer,
+    children,
+    class: className
+  }: NavRailProps = $props();
+
+  const classes = $derived(["st-navRail", className].filter(Boolean).join(" "));
+
+  function isActive(item: NavRailItem) {
+    return item.active === true || item.id === activeItemId;
+  }
+
+  function selectItem(item: NavRailItem) {
+    if (!item.disabled) onItemSelect?.(item.id);
+  }
+</script>
+
+<nav class={classes} aria-label={label}>
+  <div class="st-navRail__items">
+    {#each items as item (item.id)}
+      {#if item.href && !item.disabled}
+        <a class="st-navRail__item" class:st-navRail__item--active={isActive(item)} href={item.href} aria-current={isActive(item) ? "page" : undefined} title={item.label} onclick={() => selectItem(item)}>
+          {#if item.icon}<span class="st-navRail__icon">{@render item.icon()}</span>{/if}
+          <span class="st-navRail__label">{item.label}</span>
+          {#if item.badge != null}<span class="st-navRail__badge">{item.badge}</span>{/if}
+        </a>
+      {:else}
+        <button class="st-navRail__item" class:st-navRail__item--active={isActive(item)} type="button" disabled={item.disabled} aria-current={isActive(item) ? "page" : undefined} title={item.label} onclick={() => selectItem(item)}>
+          {#if item.icon}<span class="st-navRail__icon">{@render item.icon()}</span>{/if}
+          <span class="st-navRail__label">{item.label}</span>
+          {#if item.badge != null}<span class="st-navRail__badge">{item.badge}</span>{/if}
+        </button>
+      {/if}
+    {/each}
+    {@render children?.()}
+  </div>
+  {#if footer}
+    <footer class="st-navRail__footer">{@render footer()}</footer>
+  {/if}
+</nav>
+
+<style>
+  .st-navRail {
+    align-items: stretch;
+    background: var(--st-component-navRail-surface, var(--st-semantic-surface-raised));
+    color: var(--st-semantic-text-primary);
+    display: grid;
+    grid-template-rows: 1fr auto;
+    block-size: 100%;
+    inline-size: var(--st-component-navRail-width, 4.5rem);
+    padding: var(--st-spacing-2, 0.5rem);
+  }
+
+  .st-navRail__items,
+  .st-navRail__footer {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    gap: var(--st-spacing-2, 0.5rem);
+  }
+
+  .st-navRail__items {
+    min-block-size: 0;
+    overflow-y: auto;
+  }
+
+  .st-navRail__item {
+    align-items: center;
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: var(--st-radius-md, 0.375rem);
+    color: var(--st-semantic-text-secondary);
+    cursor: pointer;
+    display: inline-flex;
+    flex-direction: column;
+    font: inherit;
+    gap: var(--st-spacing-1, 0.25rem);
+    inline-size: 100%;
+    min-block-size: 3.25rem;
+    padding: var(--st-spacing-2, 0.5rem);
+    position: relative;
+    text-align: center;
+    text-decoration: none;
+  }
+
+  .st-navRail__item:hover,
+  .st-navRail__item--active {
+    background: var(--st-component-navRail-activeBackground, var(--st-semantic-surface-subtle));
+    color: var(--st-semantic-text-primary);
+  }
+
+  .st-navRail__item--active {
+    border-color: var(--st-component-navRail-activeBorder, var(--st-semantic-border-strong));
+  }
+
+  .st-navRail__item:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .st-navRail__label {
+    font-size: 0.6875rem;
+    font-weight: 650;
+    line-height: 1.1;
+  }
+
+  .st-navRail__badge {
+    background: var(--st-component-navRail-badgeBackground, var(--st-semantic-surface-inverse));
+    border-radius: 999px;
+    color: var(--st-semantic-text-inverse);
+    font-size: 0.625rem;
+    line-height: 1;
+    padding: 0.125rem 0.3rem;
+    position: absolute;
+    right: 0.25rem;
+    top: 0.25rem;
+  }
+</style>

package/dist/NavRail.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { Snippet } from "svelte";
+export interface NavRailItem {
+    id: string;
+    label: string;
+    href?: string;
+    active?: boolean;
+    disabled?: boolean;
+    badge?: string | number;
+    icon?: Snippet;
+}
+export interface NavRailProps {
+    items?: NavRailItem[];
+    label?: string;
+    activeItemId?: string;
+    onItemSelect?: (id: string) => void;
+    footer?: Snippet;
+    children?: Snippet;
+    class?: string;
+}
+declare const NavRail: import("svelte").Component<NavRailProps, {}, "">;
+type NavRail = ReturnType<typeof NavRail>;
+export default NavRail;
+//# sourceMappingURL=NavRail.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavRail.svelte.d.ts","sourceRoot":"","sources":["../src/lib/NavRail.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAsDH,QAAA,MAAM,OAAO,kDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/NavSection.svelte

@@ -0,0 +1,152 @@
+<script lang="ts" module>
+  /** Niveau de titre porté par l'Overline d'en-tête de section. `h2`/`h3` quand la
+   * section est une vraie région titrée d'un rail/drawer ; choisis selon la
+   * profondeur du sommaire. */
+  export type NavSectionHeadingLevel = "h2" | "h3";
+</script>
+
+<script lang="ts">
+  // NavSection — EN-TÊTE DE GROUPE d'un rail / drawer (« COMMUNITIES »,
+  // « SIGNAUX », « Pastilles », « Zonage / Potentiel », « DOCUMENTATION »).
+  // Donne la hiérarchie typographique qui manque à une liste plate + un foyer
+  // normé pour l'action locale (au lieu d'un bouton primaire planté dans la
+  // liste). ZÉRO-ENTROPIE : on RÉUTILISE les primitives déjà livrées —
+  //   • Overline  → le libellé small-caps muet (rendu en h2/h3 pour la
+  //     sémantique de titre quand la section n'est PAS repliable) ;
+  //   • Badge shape="circle" → le compteur de section en queue d'en-tête ;
+  //   • Collapsible → le disclosure (trigger aria-expanded + région
+  //     aria-labelledby) quand `collapsible`.
+  // On ne réimplémente NI disclosure NI libellé. Style token-only scopé, aucun hex.
+  import type { Snippet } from "svelte";
+  import Badge from "./Badge.svelte";
+  import Collapsible from "./Collapsible.svelte";
+  import Overline from "./Overline.svelte";
+
+  type NavSectionProps = {
+    /** Libellé de la section, rendu via Overline (small-caps muet). */
+    label: string;
+    /** Compteur optionnel → Badge circle en queue de l'en-tête. */
+    count?: number;
+    /** Si true, l'en-tête devient le trigger d'un Collapsible (aria-expanded)
+     * qui montre/cache le contenu. Sinon : groupe titré statique. */
+    collapsible?: boolean;
+    /** État d'ouverture quand `collapsible` (bindable). */
+    open?: boolean;
+    /** Niveau de titre de l'Overline quand la section n'est pas repliable. */
+    as?: NavSectionHeadingLevel;
+    /** Emplacement normé d'une action de section (ex. Button « + Ajouter »),
+     * aligné à droite de l'en-tête. NON rendu quand `collapsible` (le trigger
+     * occupe l'en-tête en entier — place l'action dans le contenu). */
+    action?: Snippet;
+    /** Contenu de la section (NavItem / NavList) — rendu dans la région. */
+    children: Snippet;
+    class?: string;
+  };
+
+  let {
+    label,
+    count,
+    collapsible = false,
+    open = $bindable(true),
+    as = "h3",
+    action,
+    children,
+    class: className
+  }: NavSectionProps = $props();
+
+  const uid = `st-navSection-${Math.random().toString(36).slice(2, 9)}`;
+
+  const rootClasses = $derived(
+    [
+      "st-navSection",
+      collapsible ? "st-navSection--collapsible" : "st-navSection--static",
+      className
+    ]
+      .filter(Boolean)
+      .join(" ")
+  );
+
+  const hasCount = $derived(typeof count === "number");
+</script>
+
+{#if collapsible}
+  <!-- Repliable : l'en-tête EST le trigger du Collapsible. Le compteur passe par
+       son slot `trailing` (entre le titre et le chevron) ; on annonce le tout aux
+       lecteurs d'écran via aria-label. L'action de section n'a pas sa place dans
+       un trigger (un bouton dans un bouton) : la documenter dans le contenu. -->
+  <Collapsible
+    bind:open
+    title={label}
+    aria-label={hasCount ? `${label}, ${count}` : label}
+    class={rootClasses}
+  >
+    {#snippet trailing()}
+      {#if hasCount}
+        <Badge shape="circle" size="sm" aria-label={`${count} éléments`}>{count}</Badge>
+      {/if}
+    {/snippet}
+    {@render children()}
+  </Collapsible>
+{:else}
+  <!-- Statique : groupe titré par l'Overline (h2/h3). Le contenu est relié au
+       titre via aria-labelledby — la liste devient une vraie région titrée. -->
+  <section {...{ class: rootClasses }} role="group" aria-labelledby={`${uid}-label`}>
+    <div class="st-navSection__header">
+      <Overline {as} id={`${uid}-label`} class="st-navSection__label">
+        {label}
+        {#if hasCount}
+          <Badge
+            shape="circle"
+            size="sm"
+            class="st-navSection__count"
+            aria-label={`${count} éléments`}>{count}</Badge>
+        {/if}
+      </Overline>
+      {#if action}
+        <span class="st-navSection__action">{@render action()}</span>
+      {/if}
+    </div>
+    <div class="st-navSection__body">
+      {@render children()}
+    </div>
+  </section>
+{/if}
+
+<style>
+  /* Token-only scopé. L'en-tête statique aligne le libellé (small-caps via
+     Overline), le compteur en queue, et pousse l'action de section à droite. */
+  .st-navSection {
+    inline-size: 100%;
+  }
+
+  .st-navSection__header {
+    align-items: baseline;
+    display: flex;
+    gap: var(--st-spacing-2, 0.5rem);
+    justify-content: space-between;
+    padding-block: var(--st-component-navSection-headerPaddingBlock, 0.375rem);
+  }
+
+  /* Le libellé et son compteur forment un bloc ; le Badge circle s'aligne au
+     centre vertical du texte small-caps. */
+  .st-navSection :global(.st-navSection__label) {
+    align-items: center;
+    display: inline-flex;
+    gap: var(--st-spacing-2, 0.5rem);
+  }
+
+  .st-navSection :global(.st-navSection__count) {
+    flex: 0 0 auto;
+  }
+
+  /* Foyer de l'action de section : ancré à droite, ne grandit pas. */
+  .st-navSection__action {
+    align-items: center;
+    display: inline-flex;
+    flex: 0 0 auto;
+  }
+
+  .st-navSection__body {
+    display: block;
+  }
+</style>

package/dist/NavSection.svelte.d.ts

@@ -0,0 +1,29 @@
+/** Niveau de titre porté par l'Overline d'en-tête de section. `h2`/`h3` quand la
+ * section est une vraie région titrée d'un rail/drawer ; choisis selon la
+ * profondeur du sommaire. */
+export type NavSectionHeadingLevel = "h2" | "h3";
+import type { Snippet } from "svelte";
+type NavSectionProps = {
+    /** Libellé de la section, rendu via Overline (small-caps muet). */
+    label: string;
+    /** Compteur optionnel → Badge circle en queue de l'en-tête. */
+    count?: number;
+    /** Si true, l'en-tête devient le trigger d'un Collapsible (aria-expanded)
+     * qui montre/cache le contenu. Sinon : groupe titré statique. */
+    collapsible?: boolean;
+    /** État d'ouverture quand `collapsible` (bindable). */
+    open?: boolean;
+    /** Niveau de titre de l'Overline quand la section n'est pas repliable. */
+    as?: NavSectionHeadingLevel;
+    /** Emplacement normé d'une action de section (ex. Button « + Ajouter »),
+     * aligné à droite de l'en-tête. NON rendu quand `collapsible` (le trigger
+     * occupe l'en-tête en entier — place l'action dans le contenu). */
+    action?: Snippet;
+    /** Contenu de la section (NavItem / NavList) — rendu dans la région. */
+    children: Snippet;
+    class?: string;
+};
+declare const NavSection: import("svelte").Component<NavSectionProps, {}, "open">;
+type NavSection = ReturnType<typeof NavSection>;
+export default NavSection;
+//# sourceMappingURL=NavSection.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavSection.svelte.d.ts","sourceRoot":"","sources":["../src/lib/NavSection.svelte.ts"],"names":[],"mappings":"AAGE;;6BAE6B;AAC7B,MAAM,MAAM,sBAAsB,GAAG,IAAI,GAAG,IAAI,CAAC;AAcnD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAMpC,KAAK,eAAe,GAAG;IACrB,mEAAmE;IACnE,KAAK,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;qEACiE;IACjE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uDAAuD;IACvD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,0EAA0E;IAC1E,EAAE,CAAC,EAAE,sBAAsB,CAAC;IAC5B;;uEAEmE;IACnE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,wEAAwE;IACxE,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAiFJ,QAAA,MAAM,UAAU,yDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}