@sentropic/design-system-svelte 0.34.69 → 0.34.71

package/dist/AppShell.panelCollapse.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=AppShell.panelCollapse.test.d.ts.map

package/dist/AppShell.panelCollapse.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppShell.panelCollapse.test.d.ts","sourceRoot":"","sources":["../src/lib/AppShell.panelCollapse.test.ts"],"names":[],"mappings":""}

package/dist/AppShell.panelCollapse.test.js

@@ -0,0 +1,129 @@
+import { fireEvent, render } from "@testing-library/svelte";
+import { createRawSnippet } from "svelte";
+import { describe, expect, it } from "vitest";
+import AppShell from "./AppShell.svelte";
+const snippet = (html) => createRawSnippet(() => ({ render: () => `<div>${html}</div>` }));
+const panelProps = {
+    primaryRail: snippet("rail-content"),
+    navigationPanel: snippet("nav-content"),
+    main: snippet("main-content"),
+    contextPanel: snippet("context-content"),
+    utilityPanel: snippet("utility-content"),
+};
+describe("AppShell — panelCollapse default (stack)", () => {
+    it("renders no disclosure buttons and no panel-region wrappers when panelCollapse is omitted", () => {
+        const { container } = render(AppShell, { props: { variant: "workspace", ...panelProps } });
+        expect(container.querySelectorAll(".st-appShell__panelDisclosure").length).toBe(0);
+        expect(container.querySelectorAll(".st-appShell__panelRegion").length).toBe(0);
+    });
+    it("renders no disclosure buttons when panelCollapse is explicitly 'stack'", () => {
+        const { container } = render(AppShell, { props: { variant: "workspace", panelCollapse: "stack", ...panelProps } });
+        expect(container.querySelectorAll(".st-appShell__panelDisclosure").length).toBe(0);
+    });
+    it("still renders every panel's content directly inside its aside (unchanged desktop/stack markup)", () => {
+        const { container } = render(AppShell, { props: { variant: "workspace", ...panelProps } });
+        expect(container.querySelector(".st-appShell__primaryRail")?.textContent).toContain("rail-content");
+        expect(container.querySelector(".st-appShell__navigationPanel")?.textContent).toContain("nav-content");
+        expect(container.querySelector(".st-appShell__main")?.textContent).toContain("main-content");
+        expect(container.querySelector(".st-appShell__contextPanel")?.textContent).toContain("context-content");
+        expect(container.querySelector(".st-appShell__utilityPanel")?.textContent).toContain("utility-content");
+    });
+    it('sets data-panel-collapse="stack" on the root by default', () => {
+        const { container } = render(AppShell, { props: { variant: "workspace", ...panelProps } });
+        expect(container.querySelector(".st-appShell")?.getAttribute("data-panel-collapse")).toBe("stack");
+    });
+});
+describe("AppShell — panelCollapse='accordion'", () => {
+    it("renders a disclosure button for each present panel, all initially collapsed", () => {
+        const { container } = render(AppShell, { props: { variant: "workspace", panelCollapse: "accordion", ...panelProps } });
+        const buttons = container.querySelectorAll(".st-appShell__panelDisclosure");
+        expect(buttons.length).toBe(4);
+        buttons.forEach((btn) => {
+            expect(btn.getAttribute("aria-expanded")).toBe("false");
+        });
+    });
+    it("wires aria-controls on each trigger to the id of its region, and the region is labelled by the trigger", () => {
+        const { container } = render(AppShell, { props: { variant: "workspace", panelCollapse: "accordion", ...panelProps } });
+        const buttons = Array.from(container.querySelectorAll(".st-appShell__panelDisclosure"));
+        expect(buttons.length).toBeGreaterThan(0);
+        for (const button of buttons) {
+            const controlsId = button.getAttribute("aria-controls");
+            expect(controlsId).toBeTruthy();
+            const region = container.querySelector(`#${controlsId}`);
+            expect(region).toBeTruthy();
+            expect(region?.getAttribute("role")).toBe("region");
+            expect(region?.getAttribute("aria-labelledby")).toBe(button.id);
+        }
+    });
+    it("toggles aria-expanded on click and reflects the collapsed state on the region", async () => {
+        const { container } = render(AppShell, { props: { variant: "workspace", panelCollapse: "accordion", ...panelProps } });
+        const trigger = container.querySelector("#st-appShell-navigationPanel-trigger");
+        const region = container.querySelector("#st-appShell-navigationPanel-region");
+        expect(trigger.getAttribute("aria-expanded")).toBe("false");
+        expect(region.classList.contains("st-appShell__panelRegion--collapsed")).toBe(true);
+        await fireEvent.click(trigger);
+        expect(trigger.getAttribute("aria-expanded")).toBe("true");
+        expect(region.classList.contains("st-appShell__panelRegion--collapsed")).toBe(false);
+        await fireEvent.click(trigger);
+        expect(trigger.getAttribute("aria-expanded")).toBe("false");
+        expect(region.classList.contains("st-appShell__panelRegion--collapsed")).toBe(true);
+    });
+    it("toggles via the keyboard (Enter/Space activate a native button)", async () => {
+        const { container } = render(AppShell, { props: { variant: "workspace", panelCollapse: "accordion", ...panelProps } });
+        const trigger = container.querySelector("#st-appShell-contextPanel-trigger");
+        expect(trigger.getAttribute("aria-expanded")).toBe("false");
+        trigger.focus();
+        expect(document.activeElement).toBe(trigger);
+        // Native <button> activates on Enter/Space via its click event; assert the
+        // handler is reachable through a synthesized click (jsdom does not
+        // synthesize the keydown->click default action for us).
+        await fireEvent.click(trigger);
+        expect(trigger.getAttribute("aria-expanded")).toBe("true");
+    });
+    it("renders no disclosure for a panel that is not provided", () => {
+        const { container } = render(AppShell, {
+            props: { variant: "workspace", panelCollapse: "accordion", navigationPanel: snippet("nav-only"), main: panelProps.main },
+        });
+        const buttons = container.querySelectorAll(".st-appShell__panelDisclosure");
+        expect(buttons.length).toBe(1);
+        expect(container.querySelector(".st-appShell__primaryRail")).toBeNull();
+        expect(container.querySelector(".st-appShell__contextPanel")).toBeNull();
+        expect(container.querySelector(".st-appShell__utilityPanel")).toBeNull();
+    });
+    it("keeps the panel content mounted in the DOM even while collapsed (no destroy/remount)", () => {
+        const { container } = render(AppShell, { props: { variant: "workspace", panelCollapse: "accordion", ...panelProps } });
+        // Collapsed by default, yet content is present — collapse is a CSS
+        // concern (sizing/hiding the region), never a conditional {#if}.
+        expect(container.querySelector("#st-appShell-utilityPanel-region")?.textContent).toContain("utility-content");
+    });
+    it("desktop markup still contains the panel content (accordion mode never removes it)", () => {
+        const { container } = render(AppShell, { props: { variant: "workspace", panelCollapse: "accordion", ...panelProps } });
+        // jsdom does not evaluate @media queries for layout, but the component
+        // must not conditionally destroy content based on breakpoint — assert
+        // every panel's content is present regardless.
+        expect(container.querySelector(".st-appShell__primaryRail")?.textContent).toContain("rail-content");
+        expect(container.querySelector(".st-appShell__navigationPanel")?.textContent).toContain("nav-content");
+        expect(container.querySelector(".st-appShell__contextPanel")?.textContent).toContain("context-content");
+        expect(container.querySelector(".st-appShell__utilityPanel")?.textContent).toContain("utility-content");
+    });
+    it("uses custom *Label props as the disclosure text, falling back to the existing aria-label props", async () => {
+        const { container } = render(AppShell, {
+            props: {
+                variant: "workspace",
+                panelCollapse: "accordion",
+                ...panelProps,
+                primaryRailLabel: "Rail perso",
+                contextLabel: "Contexte",
+                utilityPanelLabel: "Outils",
+            },
+        });
+        expect(container.querySelector("#st-appShell-primaryRail-trigger")?.textContent).toContain("Rail perso");
+        // contextPanelLabel not set -> falls back to contextLabel.
+        expect(container.querySelector("#st-appShell-contextPanel-trigger")?.textContent).toContain("Contexte");
+        expect(container.querySelector("#st-appShell-utilityPanel-trigger")?.textContent).toContain("Outils");
+    });
+    it('sets data-panel-collapse="accordion" on the root', () => {
+        const { container } = render(AppShell, { props: { variant: "workspace", panelCollapse: "accordion", ...panelProps } });
+        expect(container.querySelector(".st-appShell")?.getAttribute("data-panel-collapse")).toBe("accordion");
+    });
+});

package/dist/AppShell.svelte

@@ -5,6 +5,7 @@
   export type AppShellVariant = "site" | "workspace";
   export type AppShellUtilityMode = "reserve" | "overlay" | "floating";
   export type AppShellUtilitySide = "left" | "right" | "bottom";
+  export type AppShellPanelCollapse = "stack" | "accordion";
 
   export type AppShellProps = {
     variant?: AppShellVariant;
@@ -23,6 +24,25 @@
     utilityLabel?: string;
     utilityMode?: AppShellUtilityMode;
     utilitySide?: AppShellUtilitySide;
+    /**
+     * Below the 48rem breakpoint, `"stack"` (default) keeps today's behaviour —
+     * panels stack full-width in document order, always expanded. `"accordion"`
+     * degrades each present panel to a keyboard-accessible disclosure (collapsed
+     * by default) instead of squeezing the main content. Desktop (>48rem)
+     * rendering is IDENTICAL in both modes — side panels stay side-by-side
+     * columns. Panel content is mounted once regardless of mode/breakpoint;
+     * collapsing hides/sizes the region rather than destroying it, so stateful
+     * widgets (maps, live panels…) mounted in a panel never remount.
+     */
+    panelCollapse?: AppShellPanelCollapse;
+    /** Disclosure label for `primaryRail` when `panelCollapse="accordion"`. */
+    primaryRailLabel?: string;
+    /** Disclosure label for `navigationPanel` when `panelCollapse="accordion"`. Defaults to `navigationLabel`. */
+    navigationPanelLabel?: string;
+    /** Disclosure label for `contextPanel` when `panelCollapse="accordion"`. Defaults to `contextLabel`. */
+    contextPanelLabel?: string;
+    /** Disclosure label for `utilityPanel` when `panelCollapse="accordion"`. Defaults to `utilityLabel`. */
+    utilityPanelLabel?: string;
     class?: string;
   };
 </script>
@@ -58,9 +78,29 @@
     utilityLabel = "Utility panel",
     utilityMode = "reserve",
     utilitySide = "right",
+    panelCollapse = "stack",
+    primaryRailLabel = "Primary rail",
+    navigationPanelLabel,
+    contextPanelLabel,
+    utilityPanelLabel,
     class: className
   }: AppShellProps = $props();
 
+  // Resolved disclosure labels: default to the existing aria-label props so a
+  // consumer who already customized navigationLabel/contextLabel/utilityLabel
+  // doesn't need to duplicate the translation for the accordion trigger text.
+  const navigationPanelLabelResolved = $derived(navigationPanelLabel ?? navigationLabel);
+  const contextPanelLabelResolved = $derived(contextPanelLabel ?? contextLabel);
+  const utilityPanelLabelResolved = $derived(utilityPanelLabel ?? utilityLabel);
+
+  // Uncontrolled per-panel disclosure state (v1) — each accordion panel starts
+  // collapsed. Desktop rendering never reads these (CSS scopes the collapse to
+  // `@media (max-width: 48rem)`), so they have zero effect above the breakpoint.
+  let primaryRailPanelOpen = $state(false);
+  let navigationPanelOpen = $state(false);
+  let contextPanelOpen = $state(false);
+  let utilityPanelOpen = $state(false);
+
   const mode = $derived(variant ?? (config ? "site" : "workspace"));
   const siteConfig = $derived(config ?? ({ brand: { name: "Sentropic" }, nav: [], theming: { themes: [], theme: "" } } as SiteConfig));
   const brand = $derived(siteConfig.brand ?? { name: "Sentropic" });
@@ -182,6 +222,7 @@
     data-st-app-shell-variant="workspace"
     data-utility-mode={utilityMode}
     data-utility-side={utilitySide}
+    data-panel-collapse={panelCollapse}
   >
     {#if topChrome}
       <div class="st-appShell__topChrome">
@@ -191,12 +232,62 @@
     <div class="st-appShell__body">
       {#if primaryRail}
         <aside class="st-appShell__primaryRail" aria-label="Primary rail">
-          {@render primaryRail()}
+          {#if panelCollapse === "accordion"}
+            <button
+              type="button"
+              class="st-appShell__panelDisclosure"
+              aria-expanded={primaryRailPanelOpen}
+              aria-controls="st-appShell-primaryRail-region"
+              id="st-appShell-primaryRail-trigger"
+              onclick={() => (primaryRailPanelOpen = !primaryRailPanelOpen)}
+            >
+              <span class="st-appShell__panelDisclosureLabel">{primaryRailLabel}</span>
+              <span class="st-appShell__panelDisclosureIcon" class:st-appShell__panelDisclosureIcon--expanded={primaryRailPanelOpen}>
+                <ChevronDown size={16} aria-hidden="true" />
+              </span>
+            </button>
+            <div
+              class="st-appShell__panelRegion"
+              class:st-appShell__panelRegion--collapsed={!primaryRailPanelOpen}
+              id="st-appShell-primaryRail-region"
+              role="region"
+              aria-labelledby="st-appShell-primaryRail-trigger"
+            >
+              {@render primaryRail()}
+            </div>
+          {:else}
+            {@render primaryRail()}
+          {/if}
         </aside>
       {/if}
       {#if navigationPanel}
         <aside class="st-appShell__navigationPanel" aria-label={navigationLabel}>
-          {@render navigationPanel()}
+          {#if panelCollapse === "accordion"}
+            <button
+              type="button"
+              class="st-appShell__panelDisclosure"
+              aria-expanded={navigationPanelOpen}
+              aria-controls="st-appShell-navigationPanel-region"
+              id="st-appShell-navigationPanel-trigger"
+              onclick={() => (navigationPanelOpen = !navigationPanelOpen)}
+            >
+              <span class="st-appShell__panelDisclosureLabel">{navigationPanelLabelResolved}</span>
+              <span class="st-appShell__panelDisclosureIcon" class:st-appShell__panelDisclosureIcon--expanded={navigationPanelOpen}>
+                <ChevronDown size={16} aria-hidden="true" />
+              </span>
+            </button>
+            <div
+              class="st-appShell__panelRegion"
+              class:st-appShell__panelRegion--collapsed={!navigationPanelOpen}
+              id="st-appShell-navigationPanel-region"
+              role="region"
+              aria-labelledby="st-appShell-navigationPanel-trigger"
+            >
+              {@render navigationPanel()}
+            </div>
+          {:else}
+            {@render navigationPanel()}
+          {/if}
         </aside>
       {/if}
       <main class="st-appShell__main" id={mainId}>
@@ -208,12 +299,62 @@
       </main>
       {#if contextPanel}
         <aside class="st-appShell__contextPanel" aria-label={contextLabel}>
-          {@render contextPanel()}
+          {#if panelCollapse === "accordion"}
+            <button
+              type="button"
+              class="st-appShell__panelDisclosure"
+              aria-expanded={contextPanelOpen}
+              aria-controls="st-appShell-contextPanel-region"
+              id="st-appShell-contextPanel-trigger"
+              onclick={() => (contextPanelOpen = !contextPanelOpen)}
+            >
+              <span class="st-appShell__panelDisclosureLabel">{contextPanelLabelResolved}</span>
+              <span class="st-appShell__panelDisclosureIcon" class:st-appShell__panelDisclosureIcon--expanded={contextPanelOpen}>
+                <ChevronDown size={16} aria-hidden="true" />
+              </span>
+            </button>
+            <div
+              class="st-appShell__panelRegion"
+              class:st-appShell__panelRegion--collapsed={!contextPanelOpen}
+              id="st-appShell-contextPanel-region"
+              role="region"
+              aria-labelledby="st-appShell-contextPanel-trigger"
+            >
+              {@render contextPanel()}
+            </div>
+          {:else}
+            {@render contextPanel()}
+          {/if}
         </aside>
       {/if}
       {#if utilityPanel}
         <aside class="st-appShell__utilityPanel" aria-label={utilityLabel}>
-          {@render utilityPanel()}
+          {#if panelCollapse === "accordion"}
+            <button
+              type="button"
+              class="st-appShell__panelDisclosure"
+              aria-expanded={utilityPanelOpen}
+              aria-controls="st-appShell-utilityPanel-region"
+              id="st-appShell-utilityPanel-trigger"
+              onclick={() => (utilityPanelOpen = !utilityPanelOpen)}
+            >
+              <span class="st-appShell__panelDisclosureLabel">{utilityPanelLabelResolved}</span>
+              <span class="st-appShell__panelDisclosureIcon" class:st-appShell__panelDisclosureIcon--expanded={utilityPanelOpen}>
+                <ChevronDown size={16} aria-hidden="true" />
+              </span>
+            </button>
+            <div
+              class="st-appShell__panelRegion"
+              class:st-appShell__panelRegion--collapsed={!utilityPanelOpen}
+              id="st-appShell-utilityPanel-region"
+              role="region"
+              aria-labelledby="st-appShell-utilityPanel-trigger"
+            >
+              {@render utilityPanel()}
+            </div>
+          {:else}
+            {@render utilityPanel()}
+          {/if}
         </aside>
       {/if}
     </div>
@@ -419,6 +560,50 @@
     margin: var(--st-spacing-4, 1rem);
   }
 
+  /* Disclosure trigger for panelCollapse="accordion". Hidden by default (this
+     rule has no `@media` guard, so it also hides the button on desktop where
+     accordion mode is not active) — only shown by the max-width:48rem rule
+     below, and only when `data-panel-collapse="accordion"`. This keeps desktop
+     rendering byte-identical in both modes. */
+  .st-appShell__panelDisclosure {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    color: inherit;
+    cursor: pointer;
+    display: none;
+    font: inherit;
+    font-weight: 650;
+    gap: var(--st-spacing-2, 0.5rem);
+    justify-content: space-between;
+    padding: var(--st-spacing-3, 0.75rem) var(--st-spacing-4, 1rem);
+    text-align: start;
+    width: 100%;
+  }
+
+  .st-appShell__panelDisclosure:focus-visible {
+    outline: 2px solid var(--st-semantic-border-focus, var(--st-semantic-brand-default, #2563eb));
+    outline-offset: -2px;
+  }
+
+  .st-appShell__panelDisclosureIcon {
+    display: inline-flex;
+    flex-shrink: 0;
+    transition: transform var(--st-motion-duration-fast, 0.15s) ease;
+  }
+
+  .st-appShell__panelDisclosureIcon--expanded {
+    transform: rotate(180deg);
+  }
+
+  /* The region stays mounted at all times — it is only ever resized/hidden via
+     CSS below, never removed from the DOM, so panel content (maps, live
+     widgets…) never remounts when a panel collapses or expands. */
+  .st-appShell__panelRegion {
+    min-block-size: 0;
+    min-inline-size: 0;
+  }
+
   @media (max-width: 48rem) {
     .st-appShell__body {
       flex-flow: column nowrap;
@@ -433,5 +618,32 @@
       inline-size: auto;
       max-block-size: min(60vh, 28rem);
     }
+
+    /* Accordion mode: the panel's own max-block-size cap is superseded by the
+       region's (below) so a collapsed panel can shrink to 0 and an expanded
+       one keeps the same 60vh/28rem ceiling the stack mode always had. */
+    .st-appShell[data-panel-collapse="accordion"] .st-appShell__primaryRail,
+    .st-appShell[data-panel-collapse="accordion"] .st-appShell__navigationPanel,
+    .st-appShell[data-panel-collapse="accordion"] .st-appShell__contextPanel,
+    .st-appShell[data-panel-collapse="accordion"] .st-appShell__utilityPanel {
+      max-block-size: none;
+    }
+
+    .st-appShell[data-panel-collapse="accordion"] .st-appShell__panelDisclosure {
+      display: flex;
+    }
+
+    .st-appShell[data-panel-collapse="accordion"] .st-appShell__panelRegion {
+      max-block-size: min(60vh, 28rem);
+      overflow: auto;
+    }
+
+    .st-appShell[data-panel-collapse="accordion"] .st-appShell__panelRegion--collapsed {
+      block-size: 0;
+      max-block-size: 0;
+      overflow: hidden;
+      padding-block: 0;
+      visibility: hidden;
+    }
   }
 </style>

package/dist/AppShell.svelte.d.ts

@@ -3,6 +3,7 @@ import type { SiteConfig } from "./site-config";
 export type AppShellVariant = "site" | "workspace";
 export type AppShellUtilityMode = "reserve" | "overlay" | "floating";
 export type AppShellUtilitySide = "left" | "right" | "bottom";
+export type AppShellPanelCollapse = "stack" | "accordion";
 export type AppShellProps = {
     variant?: AppShellVariant;
     config?: SiteConfig;
@@ -20,6 +21,25 @@ export type AppShellProps = {
     utilityLabel?: string;
     utilityMode?: AppShellUtilityMode;
     utilitySide?: AppShellUtilitySide;
+    /**
+     * Below the 48rem breakpoint, `"stack"` (default) keeps today's behaviour —
+     * panels stack full-width in document order, always expanded. `"accordion"`
+     * degrades each present panel to a keyboard-accessible disclosure (collapsed
+     * by default) instead of squeezing the main content. Desktop (>48rem)
+     * rendering is IDENTICAL in both modes — side panels stay side-by-side
+     * columns. Panel content is mounted once regardless of mode/breakpoint;
+     * collapsing hides/sizes the region rather than destroying it, so stateful
+     * widgets (maps, live panels…) mounted in a panel never remount.
+     */
+    panelCollapse?: AppShellPanelCollapse;
+    /** Disclosure label for `primaryRail` when `panelCollapse="accordion"`. */
+    primaryRailLabel?: string;
+    /** Disclosure label for `navigationPanel` when `panelCollapse="accordion"`. Defaults to `navigationLabel`. */
+    navigationPanelLabel?: string;
+    /** Disclosure label for `contextPanel` when `panelCollapse="accordion"`. Defaults to `contextLabel`. */
+    contextPanelLabel?: string;
+    /** Disclosure label for `utilityPanel` when `panelCollapse="accordion"`. Defaults to `utilityLabel`. */
+    utilityPanelLabel?: string;
     class?: string;
 };
 declare const AppShell: import("svelte").Component<AppShellProps, {}, "">;

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

@@ -1 +1 @@
-{"version":3,"file":"AppShell.svelte.d.ts","sourceRoot":"","sources":["../src/lib/AppShell.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,WAAW,CAAC;AACnD,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AACrE,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE9D,MAAM,MAAM,aAAa,GAAG;IAC1B,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAClC,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAiNJ,QAAA,MAAM,QAAQ,mDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"AppShell.svelte.d.ts","sourceRoot":"","sources":["../src/lib/AppShell.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,WAAW,CAAC;AACnD,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AACrE,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAC9D,MAAM,MAAM,qBAAqB,GAAG,OAAO,GAAG,WAAW,CAAC;AAE1D,MAAM,MAAM,aAAa,GAAG;IAC1B,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAClC,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAClC;;;;;;;;;OASG;IACH,aAAa,CAAC,EAAE,qBAAqB,CAAC;IACtC,2EAA2E;IAC3E,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,8GAA8G;IAC9G,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,wGAAwG;IACxG,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,wGAAwG;IACxG,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAqRJ,QAAA,MAAM,QAAQ,mDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/Icon.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import type { SVGAttributes } from "svelte/elements";
+  import { ICONS, type IconName } from "./icons.js";
+
+  type IconProps = Omit<SVGAttributes<SVGElement>, "class"> & {
+    /** Canonical DS icon name (see {@link IconName}). */
+    name: IconName;
+    /** Square size in px. Default 18 — the DS-standard inline glyph size. */
+    size?: number;
+    /** Stroke width. Default 2.25 — matches the DS's existing lucide usage. */
+    strokeWidth?: number;
+    /**
+     * Accessible name. When set, the icon is exposed as an image with this
+     * label; when omitted, the icon is decorative (`aria-hidden`).
+     */
+    title?: string;
+    class?: string;
+  };
+
+  let {
+    name,
+    size = 18,
+    strokeWidth = 2.25,
+    title,
+    class: className,
+    ...rest
+  }: IconProps = $props();
+
+  const Glyph = $derived(ICONS[name]);
+  const classes = $derived(["st-icon", className].filter(Boolean).join(" "));
+</script>
+
+{#if Glyph}
+  <Glyph
+    {size}
+    {strokeWidth}
+    class={classes}
+    role={title ? "img" : undefined}
+    aria-label={title}
+    aria-hidden={title ? undefined : "true"}
+    focusable="false"
+    {...rest}
+  />
+{/if}

package/dist/Icon.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { SVGAttributes } from "svelte/elements";
+import { type IconName } from "./icons.js";
+type IconProps = Omit<SVGAttributes<SVGElement>, "class"> & {
+    /** Canonical DS icon name (see {@link IconName}). */
+    name: IconName;
+    /** Square size in px. Default 18 — the DS-standard inline glyph size. */
+    size?: number;
+    /** Stroke width. Default 2.25 — matches the DS's existing lucide usage. */
+    strokeWidth?: number;
+    /**
+     * Accessible name. When set, the icon is exposed as an image with this
+     * label; when omitted, the icon is decorative (`aria-hidden`).
+     */
+    title?: string;
+    class?: string;
+};
+declare const Icon: import("svelte").Component<IconProps, {}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;
+//# sourceMappingURL=Icon.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Icon.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAS,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGhD,KAAK,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC,GAAG;IAC1D,qDAAqD;IACrD,IAAI,EAAE,QAAQ,CAAC;IACf,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAyBJ,QAAA,MAAM,IAAI,+CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/Icon.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Icon.test.d.ts.map

package/dist/Icon.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.test.d.ts","sourceRoot":"","sources":["../src/lib/Icon.test.ts"],"names":[],"mappings":""}

package/dist/Icon.test.js

@@ -0,0 +1,38 @@
+import { render } from "@testing-library/svelte";
+import { describe, expect, it } from "vitest";
+import Icon from "./Icon.svelte";
+import { ICON_NAMES } from "./icons.js";
+describe("Icon — canonical DS icon set", () => {
+    it("renders an svg for every canonical name", () => {
+        for (const name of ICON_NAMES) {
+            const { container, unmount } = render(Icon, { props: { name } });
+            const svg = container.querySelector("svg");
+            expect(svg, `expected an <svg> for icon "${name}"`).toBeTruthy();
+            unmount();
+        }
+    });
+    it("defaults to size 18 and stroke-width 2.25 (DS-standard)", () => {
+        const { container } = render(Icon, { props: { name: "settings" } });
+        const svg = container.querySelector("svg");
+        expect(svg.getAttribute("width")).toBe("18");
+        expect(svg.getAttribute("height")).toBe("18");
+        expect(svg.getAttribute("stroke-width")).toBe("2.25");
+    });
+    it("is decorative (aria-hidden) with no title", () => {
+        const { container } = render(Icon, { props: { name: "close" } });
+        const svg = container.querySelector("svg");
+        expect(svg.getAttribute("aria-hidden")).toBe("true");
+    });
+    it("exposes an accessible name when title is set", () => {
+        const { container } = render(Icon, { props: { name: "eye", title: "Afficher" } });
+        const svg = container.querySelector("svg");
+        expect(svg.getAttribute("aria-hidden")).toBeNull();
+        expect(svg.getAttribute("role")).toBe("img");
+        expect(svg.getAttribute("aria-label")).toBe("Afficher");
+    });
+    it("honours a custom size", () => {
+        const { container } = render(Icon, { props: { name: "layers", size: 24 } });
+        const svg = container.querySelector("svg");
+        expect(svg.getAttribute("width")).toBe("24");
+    });
+});