@sentropic/design-system-angular 0.36.54

package/dist/NavDrawer.js

@@ -0,0 +1,148 @@
+import { Component, EventEmitter, Input as NgInput, Output } from "@angular/core";
+import { NavItem } from "./NavItem.js";
+import { classNames } from "./classNames.js";
+import * as i0 from "@angular/core";
+export class NavDrawer {
+    static stComponentName = "NavDrawer";
+    componentName = "NavDrawer";
+    title;
+    label;
+    open = false;
+    side = "left";
+    navItems;
+    classInput;
+    closeEvent = new EventEmitter();
+    get hostClass() {
+        return classNames(
+        // Base `st-drawer` est LOAD-BEARING : positionnement absolu, surface,
+        // largeur, grille du panneau. Sans elle le tiroir rend cassé (bloc nu).
+        "st-drawer", `st-drawer--${this.side ?? "left"}`, 
+        // Le drawer de nav compose NavShell (cf. source Svelte) + le marqueur
+        // `st-navDrawer` (sans CSS propre, intentionnel).
+        "st-navShell", "st-navShell--drawer", "st-navDrawer", this.classInput);
+    }
+    onBackdropClick(event) {
+        if (event.target === event.currentTarget) {
+            this.closeEvent.emit();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NavDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: NavDrawer, isStandalone: true, selector: "st-nav-drawer", inputs: { title: "title", label: "label", open: "open", side: "side", navItems: "navItems", classInput: ["class", "classInput"] }, outputs: { closeEvent: "closeEvent" }, ngImport: i0, template: `
+    @if (open) {
+      <div
+        class="st-drawer__backdrop"
+        role="presentation"
+        (click)="onBackdropClick($event)"
+      >
+        <aside
+          [attr.data-st-component]="componentName"
+          [class]="hostClass"
+          role="dialog"
+          aria-modal="true"
+          [attr.aria-label]="title || label || 'Navigation'"
+        >
+          <header class="st-drawer__header">
+            <div>
+              @if (title || label) {
+                <h2 class="st-drawer__title">{{ title || label }}</h2>
+              }
+            </div>
+            <button
+              type="button"
+              class="st-drawer__close"
+              aria-label="Close"
+              (click)="closeEvent.emit()"
+            ><span aria-hidden="true">&#x2715;</span></button>
+          </header>
+          <div class="st-drawer__body">
+            <div class="st-navShell__body">
+              @if (navItems && navItems.length > 0) {
+                <nav [attr.aria-label]="label || title || 'Navigation'">
+                  @for (item of navItems; track item.label) {
+                    <st-nav-item
+                      [title]="item.label"
+                      [href]="item.href"
+                      [active]="item.active"
+                    ></st-nav-item>
+                  }
+                </nav>
+              }
+              <ng-content></ng-content>
+            </div>
+          </div>
+        </aside>
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: NavItem, selector: "st-nav-item", inputs: ["value", "title", "caption", "depth", "swatch", "count", "status", "selected", "active", "disabled", "href", "divider", "class"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NavDrawer, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "st-nav-drawer",
+                    standalone: true,
+                    imports: [NavItem],
+                    template: `
+    @if (open) {
+      <div
+        class="st-drawer__backdrop"
+        role="presentation"
+        (click)="onBackdropClick($event)"
+      >
+        <aside
+          [attr.data-st-component]="componentName"
+          [class]="hostClass"
+          role="dialog"
+          aria-modal="true"
+          [attr.aria-label]="title || label || 'Navigation'"
+        >
+          <header class="st-drawer__header">
+            <div>
+              @if (title || label) {
+                <h2 class="st-drawer__title">{{ title || label }}</h2>
+              }
+            </div>
+            <button
+              type="button"
+              class="st-drawer__close"
+              aria-label="Close"
+              (click)="closeEvent.emit()"
+            ><span aria-hidden="true">&#x2715;</span></button>
+          </header>
+          <div class="st-drawer__body">
+            <div class="st-navShell__body">
+              @if (navItems && navItems.length > 0) {
+                <nav [attr.aria-label]="label || title || 'Navigation'">
+                  @for (item of navItems; track item.label) {
+                    <st-nav-item
+                      [title]="item.label"
+                      [href]="item.href"
+                      [active]="item.active"
+                    ></st-nav-item>
+                  }
+                </nav>
+              }
+              <ng-content></ng-content>
+            </div>
+          </div>
+        </aside>
+      </div>
+    }
+  `,
+                }]
+        }], propDecorators: { title: [{
+                type: NgInput
+            }], label: [{
+                type: NgInput
+            }], open: [{
+                type: NgInput
+            }], side: [{
+                type: NgInput
+            }], navItems: [{
+                type: NgInput
+            }], classInput: [{
+                type: NgInput,
+                args: ["class"]
+            }], closeEvent: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=NavDrawer.js.map

package/dist/NavDrawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavDrawer.js","sourceRoot":"","sources":["../src/NavDrawer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,IAAI,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAElF,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;;AA+D7C,MAAM,OAAO,SAAS;IACpB,MAAM,CAAU,eAAe,GAAG,WAAW,CAAC;IACrC,aAAa,GAAG,WAAW,CAAC;IAE1B,KAAK,CAAU;IACf,KAAK,CAAU;IACf,IAAI,GAAG,KAAK,CAAC;IACb,IAAI,GAAiB,MAAM,CAAC;IAC5B,QAAQ,CAA6D;IAC9D,UAAU,CAAU;IAEnB,UAAU,GAAG,IAAI,YAAY,EAAQ,CAAC;IAEzD,IAAI,SAAS;QACX,OAAO,UAAU;QACf,sEAAsE;QACtE,wEAAwE;QACxE,WAAW,EACX,cAAc,IAAI,CAAC,IAAI,IAAI,MAAM,EAAE;QACnC,sEAAsE;QACtE,kDAAkD;QAClD,aAAa,EACb,qBAAqB,EACrB,cAAc,EACd,IAAI,CAAC,UAAU,CAChB,CAAC;IACJ,CAAC;IAED,eAAe,CAAC,KAAiB;QAC/B,IAAI,KAAK,CAAC,MAAM,KAAK,KAAK,CAAC,aAAa,EAAE,CAAC;YACzC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;QACzB,CAAC;IACH,CAAC;wGAhCU,SAAS;4FAAT,SAAS,mPAhDV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CT,4DA/CS,OAAO;;4FAiDN,SAAS;kBApDrB,SAAS;mBAAC;oBACT,QAAQ,EAAE,eAAe;oBACzB,UAAU,EAAE,IAAI;oBAChB,OAAO,EAAE,CAAC,OAAO,CAAC;oBAClB,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CT;iBACF;;sBAKE,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;uBAAC,OAAO;;sBAEf,MAAM"}

package/dist/NavItem.d.ts

@@ -0,0 +1,73 @@
+import * as i0 from "@angular/core";
+/** 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 (honorée en standalone ; la liste prime si encadrée). */
+    selected?: boolean;
+    /** État actif (alias de selected pour compatibilité). */
+    active?: boolean;
+    /** Non-interactif. */
+    disabled?: boolean;
+    /** Rend la rangée comme un lien (ancre) — anatomie identique. */
+    href?: string;
+    /** Séparateur token-only rendu APRÈS la rangée. */
+    divider?: boolean;
+    class?: string;
+};
+export declare class NavItem {
+    static readonly stComponentName = "NavItem";
+    readonly componentName = "NavItem";
+    value?: string;
+    title: string;
+    caption?: string;
+    depth?: NavItemDepth;
+    swatch?: NavItemSwatch;
+    count?: number;
+    status?: NavItemStatus;
+    selected?: boolean;
+    active?: boolean;
+    disabled?: boolean;
+    href?: string;
+    divider?: boolean;
+    classInput?: string;
+    get hasCount(): boolean;
+    get rowClass(): string;
+    /** Explicit accessible name for the trailing count bubble (« N title »): a bare
+     * number is ambiguous for a screen reader (cf. Badge). */
+    get countAriaLabel(): string;
+    private get safeDepth();
+    get hostClass(): string;
+    /** Indentation de profondeur : var additive sur le wrapper, héritée par la
+     * rangée (.st-selectableRow) via la cascade — miroir du Svelte. */
+    get depthStyle(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NavItem, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NavItem, "st-nav-item", never, { "value": { "alias": "value"; "required": false; }; "title": { "alias": "title"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; "depth": { "alias": "depth"; "required": false; }; "swatch": { "alias": "swatch"; "required": false; }; "count": { "alias": "count"; "required": false; }; "status": { "alias": "status"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "active": { "alias": "active"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "href": { "alias": "href"; "required": false; }; "divider": { "alias": "divider"; "required": false; }; "classInput": { "alias": "class"; "required": false; }; }, {}, never, never, true, never>;
+}
+//# sourceMappingURL=NavItem.d.ts.map

package/dist/NavItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavItem.d.ts","sourceRoot":"","sources":["../src/NavItem.ts"],"names":[],"mappings":";AAOA;;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,sEAAsE;IACtE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yDAAyD;IACzD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mDAAmD;IACnD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,qBA2Ca,OAAO;IAClB,MAAM,CAAC,QAAQ,CAAC,eAAe,aAAa;IAC5C,QAAQ,CAAC,aAAa,aAAa;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAG,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IACX,UAAU,CAAC,EAAE,MAAM,CAAC;IAEtC,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,QAAQ,IAAI,MAAM,CAOrB;IAED;8DAC0D;IAC1D,IAAI,cAAc,IAAI,MAAM,CAE3B;IAED,OAAO,KAAK,SAAS,GAEpB;IAED,IAAI,SAAS,IAAI,MAAM,CAQtB;IAED;uEACmE;IACnE,IAAI,UAAU,IAAI,MAAM,CAIvB;yCAxDU,OAAO;2CAAP,OAAO;CAyDnB"}

package/dist/NavItem.js

@@ -0,0 +1,161 @@
+import { Component, Input as NgInput } from "@angular/core";
+import { Badge } from "./Badge.js";
+import { ColorSwatch } from "./ColorSwatch.js";
+import { StatusDot } from "./StatusDot.js";
+import { classNames } from "./classNames.js";
+import * as i0 from "@angular/core";
+export class NavItem {
+    static stComponentName = "NavItem";
+    componentName = "NavItem";
+    value;
+    title;
+    caption;
+    depth;
+    swatch;
+    count;
+    status;
+    selected;
+    active;
+    disabled;
+    href;
+    divider;
+    classInput;
+    get hasCount() {
+        return this.count !== undefined && this.count !== null;
+    }
+    get rowClass() {
+        return classNames("st-selectableRow", (this.active || this.selected) && "st-selectableRow--selected", this.disabled && "st-selectableRow--disabled", this.caption && "st-selectableRow--hasCaption");
+    }
+    /** Explicit accessible name for the trailing count bubble (« N title »): a bare
+     * number is ambiguous for a screen reader (cf. Badge). */
+    get countAriaLabel() {
+        return `${this.count} ${this.title}`;
+    }
+    get safeDepth() {
+        return Math.min(Math.max(Math.trunc(Number(this.depth) || 0), 0), 3);
+    }
+    get hostClass() {
+        const status = this.status ?? "neutral";
+        return classNames("st-navItem", `st-navItem--depth${this.safeDepth}`, status !== "neutral" ? `st-navItem--status-${status}` : null, this.classInput);
+    }
+    /** Indentation de profondeur : var additive sur le wrapper, héritée par la
+     * rangée (.st-selectableRow) via la cascade — miroir du Svelte. */
+    get depthStyle() {
+        const depth = this.safeDepth;
+        const fallback = ["0rem", "0.75rem", "1.5rem", "2.25rem"][depth];
+        return `--st-navItem-indent: var(--st-component-navItem-depth${depth}-indent, ${fallback});`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NavItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: NavItem, isStandalone: true, selector: "st-nav-item", inputs: { value: "value", title: "title", caption: "caption", depth: "depth", swatch: "swatch", count: "count", status: "status", selected: "selected", active: "active", disabled: "disabled", href: "href", divider: "divider", classInput: ["class", "classInput"] }, ngImport: i0, template: `
+    <div [attr.data-st-component]="componentName" [class]="hostClass" [style]="depthStyle">
+      <div
+        [class]="rowClass"
+        [attr.role]="'button'"
+        [attr.aria-pressed]="(active || selected) ? 'true' : 'false'"
+        [attr.aria-disabled]="disabled ? 'true' : null"
+        [attr.data-value]="value"
+        [attr.tabindex]="disabled ? -1 : 0"
+      >
+        @if (swatch) {
+          <span class="st-selectableRow__leading">
+            @if (swatch.color) {
+              <st-color-swatch [color]="swatch.color" [shape]="swatch.shape ?? 'square'" [size]="14"></st-color-swatch>
+            } @else {
+              <st-status-dot [tone]="swatch.tone ?? 'neutral'" [size]="8"></st-status-dot>
+            }
+          </span>
+        }
+        @if (caption) {
+          <span class="st-selectableRow__content st-selectableRow__content--stacked">
+            <span class="st-selectableRow__label"><span class="st-navItem__title">{{ title }}</span></span>
+            <span class="st-selectableRow__caption"><span class="st-navItem__caption">{{ caption }}</span></span>
+          </span>
+        } @else {
+          <span class="st-selectableRow__content"><span class="st-navItem__title">{{ title }}</span></span>
+        }
+        @if (hasCount) {
+          <span class="st-selectableRow__trailing">
+            <st-badge shape="circle" size="sm" [tone]="status ?? 'neutral'" [attr.aria-label]="countAriaLabel">{{ count }}</st-badge>
+          </span>
+        }
+      </div>
+      @if (divider) {
+        <hr class="st-navItem__divider" aria-hidden="true" />
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: Badge, selector: "st-badge", inputs: ["tone", "shape", "size", "label", "class"] }, { kind: "component", type: ColorSwatch, selector: "st-color-swatch", inputs: ["color", "size", "shape", "label", "class"] }, { kind: "component", type: StatusDot, selector: "st-status-dot", inputs: ["tone", "color", "size", "pulse", "label", "class"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NavItem, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "st-nav-item",
+                    standalone: true,
+                    imports: [Badge, ColorSwatch, StatusDot],
+                    template: `
+    <div [attr.data-st-component]="componentName" [class]="hostClass" [style]="depthStyle">
+      <div
+        [class]="rowClass"
+        [attr.role]="'button'"
+        [attr.aria-pressed]="(active || selected) ? 'true' : 'false'"
+        [attr.aria-disabled]="disabled ? 'true' : null"
+        [attr.data-value]="value"
+        [attr.tabindex]="disabled ? -1 : 0"
+      >
+        @if (swatch) {
+          <span class="st-selectableRow__leading">
+            @if (swatch.color) {
+              <st-color-swatch [color]="swatch.color" [shape]="swatch.shape ?? 'square'" [size]="14"></st-color-swatch>
+            } @else {
+              <st-status-dot [tone]="swatch.tone ?? 'neutral'" [size]="8"></st-status-dot>
+            }
+          </span>
+        }
+        @if (caption) {
+          <span class="st-selectableRow__content st-selectableRow__content--stacked">
+            <span class="st-selectableRow__label"><span class="st-navItem__title">{{ title }}</span></span>
+            <span class="st-selectableRow__caption"><span class="st-navItem__caption">{{ caption }}</span></span>
+          </span>
+        } @else {
+          <span class="st-selectableRow__content"><span class="st-navItem__title">{{ title }}</span></span>
+        }
+        @if (hasCount) {
+          <span class="st-selectableRow__trailing">
+            <st-badge shape="circle" size="sm" [tone]="status ?? 'neutral'" [attr.aria-label]="countAriaLabel">{{ count }}</st-badge>
+          </span>
+        }
+      </div>
+      @if (divider) {
+        <hr class="st-navItem__divider" aria-hidden="true" />
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { value: [{
+                type: NgInput
+            }], title: [{
+                type: NgInput
+            }], caption: [{
+                type: NgInput
+            }], depth: [{
+                type: NgInput
+            }], swatch: [{
+                type: NgInput
+            }], count: [{
+                type: NgInput
+            }], status: [{
+                type: NgInput
+            }], selected: [{
+                type: NgInput
+            }], active: [{
+                type: NgInput
+            }], disabled: [{
+                type: NgInput
+            }], href: [{
+                type: NgInput
+            }], divider: [{
+                type: NgInput
+            }], classInput: [{
+                type: NgInput,
+                args: ["class"]
+            }] } });
+//# sourceMappingURL=NavItem.js.map

package/dist/NavItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavItem.js","sourceRoot":"","sources":["../src/NavItem.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,IAAI,OAAO,EAAE,MAAM,eAAe,CAAC;AAE5D,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;;AA2F7C,MAAM,OAAO,OAAO;IAClB,MAAM,CAAU,eAAe,GAAG,SAAS,CAAC;IACnC,aAAa,GAAG,SAAS,CAAC;IACxB,KAAK,CAAU;IACf,KAAK,CAAU;IACf,OAAO,CAAU;IACjB,KAAK,CAAgB;IACrB,MAAM,CAAiB;IACvB,KAAK,CAAU;IACf,MAAM,CAAiB;IACvB,QAAQ,CAAW;IACnB,MAAM,CAAW;IACjB,QAAQ,CAAW;IACnB,IAAI,CAAU;IACd,OAAO,CAAW;IACX,UAAU,CAAU;IAEtC,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC;IACzD,CAAC;IAED,IAAI,QAAQ;QACV,OAAO,UAAU,CACf,kBAAkB,EAClB,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,4BAA4B,EAC9D,IAAI,CAAC,QAAQ,IAAI,4BAA4B,EAC7C,IAAI,CAAC,OAAO,IAAI,8BAA8B,CAC/C,CAAC;IACJ,CAAC;IAED;8DAC0D;IAC1D,IAAI,cAAc;QAChB,OAAO,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;IACvC,CAAC;IAED,IAAY,SAAS;QACnB,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACvE,CAAC;IAED,IAAI,SAAS;QACX,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,IAAI,SAAS,CAAC;QACxC,OAAO,UAAU,CACf,YAAY,EACZ,oBAAoB,IAAI,CAAC,SAAS,EAAE,EACpC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,sBAAsB,MAAM,EAAE,CAAC,CAAC,CAAC,IAAI,EAC5D,IAAI,CAAC,UAAU,CAChB,CAAC;IACJ,CAAC;IAED;uEACmE;IACnE,IAAI,UAAU;QACZ,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC;QAC7B,MAAM,QAAQ,GAAG,CAAC,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC,KAAK,CAAC,CAAC;QACjE,OAAO,wDAAwD,KAAK,YAAY,QAAQ,IAAI,CAAC;IAC/F,CAAC;wGAxDU,OAAO;4FAAP,OAAO,gVAvCR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCT,4DAtCS,KAAK,0GAAE,WAAW,kHAAE,SAAS;;4FAwC5B,OAAO;kBA3CnB,SAAS;mBAAC;oBACT,QAAQ,EAAE,aAAa;oBACvB,UAAU,EAAE,IAAI;oBAChB,OAAO,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,SAAS,CAAC;oBACxC,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCT;iBACF;;sBAIE,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;uBAAC,OAAO"}

package/dist/NavRail.d.ts

@@ -0,0 +1,31 @@
+import { EventEmitter } from "@angular/core";
+import * as i0 from "@angular/core";
+export interface NavRailItem {
+    id: string;
+    label: unknown;
+    href?: string;
+    active?: boolean;
+    disabled?: boolean;
+    badge?: unknown;
+}
+export type NavRailProps = {
+    items?: NavRailItem[];
+    label?: string;
+    activeItemId?: string;
+    class?: string;
+};
+export declare class NavRail {
+    static readonly stComponentName = "NavRail";
+    readonly componentName = "NavRail";
+    items: NavRailItem[];
+    label: string;
+    activeItemId?: string;
+    classInput?: string;
+    readonly itemSelect: EventEmitter<string>;
+    get hostClass(): string;
+    isActive(item: NavRailItem): boolean;
+    selectItem(item: NavRailItem): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NavRail, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NavRail, "st-nav-rail", never, { "items": { "alias": "items"; "required": false; }; "label": { "alias": "label"; "required": false; }; "activeItemId": { "alias": "activeItemId"; "required": false; }; "classInput": { "alias": "class"; "required": false; }; }, { "itemSelect": "itemSelect"; }, never, ["*"], true, never>;
+}
+//# sourceMappingURL=NavRail.d.ts.map

package/dist/NavRail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavRail.d.ts","sourceRoot":"","sources":["../src/NavRail.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,YAAY,EAA4B,MAAM,eAAe,CAAC;;AAElF,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,qBAmCa,OAAO;IAClB,MAAM,CAAC,QAAQ,CAAC,eAAe,aAAa;IAC5C,QAAQ,CAAC,aAAa,aAAa;IACxB,KAAK,EAAE,WAAW,EAAE,CAAM;IAC1B,KAAK,SAAwB;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IAE5B,QAAQ,CAAC,UAAU,uBAA8B;IAE3D,IAAI,SAAS,IAAI,MAAM,CAEtB;IAED,QAAQ,CAAC,IAAI,EAAE,WAAW,GAAG,OAAO;IAIpC,UAAU,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI;yCAlBxB,OAAO;2CAAP,OAAO;CAqBnB"}

package/dist/NavRail.js

@@ -0,0 +1,103 @@
+import { Component, EventEmitter, Input as NgInput, Output } from "@angular/core";
+import * as i0 from "@angular/core";
+export class NavRail {
+    static stComponentName = "NavRail";
+    componentName = "NavRail";
+    items = [];
+    label = "Primary navigation";
+    activeItemId;
+    classInput;
+    itemSelect = new EventEmitter();
+    get hostClass() {
+        return ["st-navRail", this.classInput].filter(Boolean).join(" ");
+    }
+    isActive(item) {
+        return item.active === true || item.id === this.activeItemId;
+    }
+    selectItem(item) {
+        if (!item.disabled)
+            this.itemSelect.emit(item.id);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NavRail, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: NavRail, isStandalone: true, selector: "st-nav-rail", inputs: { items: "items", label: "label", activeItemId: "activeItemId", classInput: ["class", "classInput"] }, outputs: { itemSelect: "itemSelect" }, ngImport: i0, template: `
+    <nav [attr.data-st-component]="componentName" [attr.aria-label]="label" [class]="hostClass">
+      <div class="st-navRail__items">
+        @for (item of items; track item.id) {
+          @if (item.href && !item.disabled) {
+            <a [href]="item.href"
+              class="st-navRail__item"
+              [class.st-navRail__item--active]="isActive(item)"
+              [attr.aria-current]="isActive(item) ? 'page' : null"
+              [attr.title]="item.label"
+              (click)="selectItem(item)">
+              <span class="st-navRail__label">{{ item.label }}</span>
+              @if (item.badge != null) { <span class="st-navRail__badge">{{ item.badge }}</span> }
+            </a>
+          } @else {
+            <button type="button"
+              class="st-navRail__item"
+              [class.st-navRail__item--active]="isActive(item)"
+              [disabled]="item.disabled || null"
+              [attr.aria-current]="isActive(item) ? 'page' : null"
+              [attr.title]="item.label"
+              (click)="selectItem(item)">
+              <span class="st-navRail__label">{{ item.label }}</span>
+              @if (item.badge != null) { <span class="st-navRail__badge">{{ item.badge }}</span> }
+            </button>
+          }
+        }
+        <ng-content></ng-content>
+      </div>
+    </nav>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NavRail, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "st-nav-rail",
+                    standalone: true,
+                    template: `
+    <nav [attr.data-st-component]="componentName" [attr.aria-label]="label" [class]="hostClass">
+      <div class="st-navRail__items">
+        @for (item of items; track item.id) {
+          @if (item.href && !item.disabled) {
+            <a [href]="item.href"
+              class="st-navRail__item"
+              [class.st-navRail__item--active]="isActive(item)"
+              [attr.aria-current]="isActive(item) ? 'page' : null"
+              [attr.title]="item.label"
+              (click)="selectItem(item)">
+              <span class="st-navRail__label">{{ item.label }}</span>
+              @if (item.badge != null) { <span class="st-navRail__badge">{{ item.badge }}</span> }
+            </a>
+          } @else {
+            <button type="button"
+              class="st-navRail__item"
+              [class.st-navRail__item--active]="isActive(item)"
+              [disabled]="item.disabled || null"
+              [attr.aria-current]="isActive(item) ? 'page' : null"
+              [attr.title]="item.label"
+              (click)="selectItem(item)">
+              <span class="st-navRail__label">{{ item.label }}</span>
+              @if (item.badge != null) { <span class="st-navRail__badge">{{ item.badge }}</span> }
+            </button>
+          }
+        }
+        <ng-content></ng-content>
+      </div>
+    </nav>
+  `,
+                }]
+        }], propDecorators: { items: [{
+                type: NgInput
+            }], label: [{
+                type: NgInput
+            }], activeItemId: [{
+                type: NgInput
+            }], classInput: [{
+                type: NgInput,
+                args: ["class"]
+            }], itemSelect: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=NavRail.js.map

package/dist/NavRail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavRail.js","sourceRoot":"","sources":["../src/NavRail.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,IAAI,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;;AAqDlF,MAAM,OAAO,OAAO;IAClB,MAAM,CAAU,eAAe,GAAG,SAAS,CAAC;IACnC,aAAa,GAAG,SAAS,CAAC;IACxB,KAAK,GAAkB,EAAE,CAAC;IAC1B,KAAK,GAAG,oBAAoB,CAAC;IAC7B,YAAY,CAAU;IACf,UAAU,CAAU;IAEnB,UAAU,GAAG,IAAI,YAAY,EAAU,CAAC;IAE3D,IAAI,SAAS;QACX,OAAO,CAAC,YAAY,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACnE,CAAC;IAED,QAAQ,CAAC,IAAiB;QACxB,OAAO,IAAI,CAAC,MAAM,KAAK,IAAI,IAAI,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,YAAY,CAAC;IAC/D,CAAC;IAED,UAAU,CAAC,IAAiB;QAC1B,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACpD,CAAC;wGApBU,OAAO;4FAAP,OAAO,6NAhCR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BT;;4FAEU,OAAO;kBAnCnB,SAAS;mBAAC;oBACT,QAAQ,EAAE,aAAa;oBACvB,UAAU,EAAE,IAAI;oBAChB,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BT;iBACF;;sBAIE,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;uBAAC,OAAO;;sBAEf,MAAM"}

package/dist/NavSection.d.ts

@@ -0,0 +1,48 @@
+import * as i0 from "@angular/core";
+/** 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";
+export 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`. */
+    open?: boolean;
+    /** Niveau de titre de l'Overline quand la section n'est pas repliable. */
+    as?: NavSectionHeadingLevel;
+    class?: string;
+};
+export declare class NavSection {
+    static readonly stComponentName = "NavSection";
+    readonly componentName = "NavSection";
+    readonly uid: string;
+    private localOpen?;
+    label: string;
+    count?: number;
+    collapsible?: boolean;
+    open?: boolean;
+    as?: NavSectionHeadingLevel;
+    classInput?: string;
+    get hasCount(): boolean;
+    /** Count bubble accessible name (« N éléments »). */
+    get countAriaLabel(): string;
+    /** Trigger accessible name : announces the count alongside the label. */
+    get triggerAriaLabel(): string;
+    /** `open` is the INITIAL value (mirror of the Vue/Svelte `bind:open`): the
+     * section owns its disclosure state once mounted. Defaults to open. */
+    get currentOpen(): boolean;
+    toggle(): void;
+    private get rootClasses();
+    /** Collapsible variant reuses the Collapsible anatomy (no size modifier, like
+     * the Vue/React reference) merged with the NavSection root classes. */
+    get collapsibleClass(): string;
+    get staticClass(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NavSection, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NavSection, "st-nav-section", never, { "label": { "alias": "label"; "required": false; }; "count": { "alias": "count"; "required": false; }; "collapsible": { "alias": "collapsible"; "required": false; }; "open": { "alias": "open"; "required": false; }; "as": { "alias": "as"; "required": false; }; "classInput": { "alias": "class"; "required": false; }; }, {}, never, ["*", "*"], true, never>;
+}
+//# sourceMappingURL=NavSection.d.ts.map

package/dist/NavSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavSection.d.ts","sourceRoot":"","sources":["../src/NavSection.ts"],"names":[],"mappings":";AAOA;;6BAE6B;AAC7B,MAAM,MAAM,sBAAsB,GAAG,IAAI,GAAG,IAAI,CAAC;AAEjD,MAAM,MAAM,eAAe,GAAG;IAC5B,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,4CAA4C;IAC5C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,0EAA0E;IAC1E,EAAE,CAAC,EAAE,sBAAsB,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,qBAwDa,UAAU;IACrB,MAAM,CAAC,QAAQ,CAAC,eAAe,gBAAgB;IAC/C,QAAQ,CAAC,aAAa,gBAAgB;IACtC,QAAQ,CAAC,GAAG,SAA2C;IACvD,OAAO,CAAC,SAAS,CAAC,CAAU;IAEjB,KAAK,EAAG,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,EAAE,CAAC,EAAE,sBAAsB,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IAEtC,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,qDAAqD;IACrD,IAAI,cAAc,IAAI,MAAM,CAE3B;IAED,yEAAyE;IACzE,IAAI,gBAAgB,IAAI,MAAM,CAE7B;IAED;2EACuE;IACvE,IAAI,WAAW,IAAI,OAAO,CAEzB;IAED,MAAM,IAAI,IAAI;IAId,OAAO,KAAK,WAAW,GAMtB;IAED;2EACuE;IACvE,IAAI,gBAAgB,IAAI,MAAM,CAM7B;IAED,IAAI,WAAW,IAAI,MAAM,CAExB;yCAzDU,UAAU;2CAAV,UAAU;CA0DtB"}