@sentropic/design-system-angular 0.36.54

package/dist/Select.js

@@ -0,0 +1,134 @@
+import { Component, EventEmitter, Input as NgInput, Output } from "@angular/core";
+import { classNames } from "./classNames.js";
+import * as i0 from "@angular/core";
+let _counter = 0;
+export class Select {
+    static stComponentName = "Select";
+    componentName = "Select";
+    selectId;
+    constructor() {
+        _counter++;
+        this.selectId = "st-select-" + _counter;
+    }
+    label;
+    helperText;
+    errorText;
+    invalid;
+    size;
+    options;
+    modelValue;
+    value;
+    placeholder;
+    disabled;
+    classInput;
+    modelValueChange = new EventEmitter();
+    get currentValue() {
+        return this.modelValue ?? this.value ?? "";
+    }
+    get isInvalid() {
+        return Boolean(this.invalid) || Boolean(this.errorText);
+    }
+    get hostClass() {
+        return classNames("st-field", this.classInput);
+    }
+    get controlClass() {
+        return classNames("st-select", `st-select--${this.size ?? "md"}`);
+    }
+    onChange(e) {
+        this.modelValueChange.emit(e.target.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: Select, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: Select, isStandalone: true, selector: "st-select", inputs: { label: "label", helperText: "helperText", errorText: "errorText", invalid: "invalid", size: "size", options: "options", modelValue: "modelValue", value: "value", placeholder: "placeholder", disabled: "disabled", classInput: ["class", "classInput"] }, outputs: { modelValueChange: "modelValueChange" }, ngImport: i0, template: `
+    <div [attr.data-st-component]="componentName" [class]="hostClass">
+      <label class="st-field__control">
+        @if (label) {
+          <span class="st-field__label">{{ label }}</span>
+        }
+        <select
+          [class]="controlClass"
+          [id]="selectId"
+          [value]="currentValue"
+          [disabled]="disabled ?? false"
+          [attr.aria-invalid]="isInvalid ? 'true' : null"
+          (change)="onChange($event)"
+        >
+          @if (placeholder) {
+            <option value="" disabled selected>{{ placeholder }}</option>
+          }
+          @for (opt of options ?? []; track opt.value) {
+            <option [value]="opt.value" [disabled]="opt.disabled ?? false">{{ opt.label }}</option>
+          }
+          <ng-content></ng-content>
+        </select>
+      </label>
+      @if (errorText) {
+        <span class="st-field__error">{{ errorText }}</span>
+      } @else if (helperText) {
+        <span class="st-field__help">{{ helperText }}</span>
+      }
+    </div>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: Select, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "st-select",
+                    standalone: true,
+                    template: `
+    <div [attr.data-st-component]="componentName" [class]="hostClass">
+      <label class="st-field__control">
+        @if (label) {
+          <span class="st-field__label">{{ label }}</span>
+        }
+        <select
+          [class]="controlClass"
+          [id]="selectId"
+          [value]="currentValue"
+          [disabled]="disabled ?? false"
+          [attr.aria-invalid]="isInvalid ? 'true' : null"
+          (change)="onChange($event)"
+        >
+          @if (placeholder) {
+            <option value="" disabled selected>{{ placeholder }}</option>
+          }
+          @for (opt of options ?? []; track opt.value) {
+            <option [value]="opt.value" [disabled]="opt.disabled ?? false">{{ opt.label }}</option>
+          }
+          <ng-content></ng-content>
+        </select>
+      </label>
+      @if (errorText) {
+        <span class="st-field__error">{{ errorText }}</span>
+      } @else if (helperText) {
+        <span class="st-field__help">{{ helperText }}</span>
+      }
+    </div>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { label: [{
+                type: NgInput
+            }], helperText: [{
+                type: NgInput
+            }], errorText: [{
+                type: NgInput
+            }], invalid: [{
+                type: NgInput
+            }], size: [{
+                type: NgInput
+            }], options: [{
+                type: NgInput
+            }], modelValue: [{
+                type: NgInput
+            }], value: [{
+                type: NgInput
+            }], placeholder: [{
+                type: NgInput
+            }], disabled: [{
+                type: NgInput
+            }], classInput: [{
+                type: NgInput,
+                args: ["class"]
+            }], modelValueChange: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=Select.js.map

package/dist/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../src/Select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,IAAI,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAElF,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;;AAwB7C,IAAI,QAAQ,GAAG,CAAC,CAAC;AAoCjB,MAAM,OAAO,MAAM;IACjB,MAAM,CAAU,eAAe,GAAG,QAAQ,CAAC;IAClC,aAAa,GAAG,QAAQ,CAAC;IACzB,QAAQ,CAAS;IAE1B;QACE,QAAQ,EAAE,CAAC;QACX,IAAI,CAAC,QAAQ,GAAG,YAAY,GAAG,QAAQ,CAAC;IAC1C,CAAC;IAEU,KAAK,CAAW;IAChB,UAAU,CAAW;IACrB,SAAS,CAAW;IACpB,OAAO,CAAW;IAClB,IAAI,CAAc;IAClB,OAAO,CAAkB;IACzB,UAAU,CAAU;IACpB,KAAK,CAAU;IACf,WAAW,CAAU;IACrB,QAAQ,CAAW;IACZ,UAAU,CAAU;IAEnB,gBAAgB,GAAG,IAAI,YAAY,EAAU,CAAC;IAEjE,IAAI,YAAY;QACd,OAAO,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC;IAC7C,CAAC;IAED,IAAI,SAAS;QACX,OAAO,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAC1D,CAAC;IAED,IAAI,SAAS;QACX,OAAO,UAAU,CAAC,UAAU,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;IACjD,CAAC;IAED,IAAI,YAAY;QACd,OAAO,UAAU,CAAC,WAAW,EAAE,cAAc,IAAI,CAAC,IAAI,IAAI,IAAI,EAAE,CAAC,CAAC;IACpE,CAAC;IAED,QAAQ,CAAC,CAAQ;QACf,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAE,CAAC,CAAC,MAA4B,CAAC,KAAK,CAAC,CAAC;IACpE,CAAC;wGA1CU,MAAM;4FAAN,MAAM,6XA/BP;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BT;;4FAEU,MAAM;kBAlClB,SAAS;mBAAC;oBACT,QAAQ,EAAE,WAAW;oBACrB,UAAU,EAAE,IAAI;oBAChB,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BT;iBACF;;sBAWE,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;uBAAC,OAAO;;sBAEf,MAAM"}

package/dist/SelectableList.d.ts

@@ -0,0 +1,54 @@
+import { type AfterViewInit, ElementRef, type OnChanges } from "@angular/core";
+import * as i0 from "@angular/core";
+export type SelectableListProps = {
+    /** Accessible name for the listbox (required for SR users). */
+    label?: string;
+    /** References the id of an external visible label (alternative to `label`). */
+    labelledby?: string;
+    /**
+     * Allow more than one selected row. Adds aria-multiselectable and toggles
+     * each row independently. Defaults to false (single-select).
+     */
+    multiple?: boolean;
+    /**
+     * Selected value(s). Controlled when provided. For single-select pass a
+     * string (or null); for multiple pass a string[]. When omitted the list is
+     * uncontrolled and keeps its own internal selection.
+     */
+    value?: string | string[] | null;
+    /**
+     * Fired with the new selection on every change. Receives a string|null for
+     * single-select and a string[] for multiple. Required for the controlled
+     * pattern; also fires for uncontrolled lists.
+     */
+    onChange?: (value: string | string[] | null) => void;
+    class?: string;
+};
+export declare class SelectableList implements AfterViewInit, OnChanges {
+    private readonly host;
+    static readonly stComponentName = "SelectableList";
+    readonly componentName = "SelectableList";
+    label?: string;
+    labelledby?: string;
+    multiple?: boolean;
+    value?: string | string[] | null;
+    onChange?: (value: string | string[] | null) => void;
+    classInput?: string;
+    constructor(host: ElementRef<HTMLElement>);
+    ngAfterViewInit(): void;
+    ngOnChanges(): void;
+    /**
+     * The list OWNS selection: it drives the `--selected` styling of its
+     * {@link SelectableRow} children from its own `value`, mirroring the
+     * provide/inject contract of the React/Svelte/Vue references. Angular projects
+     * pre-instantiated rows as plain DOM (no shared injector), so the list reads
+     * each row's `data-value` and toggles the modifier directly. The rows' own
+     * `[class]` binding only manages the tokens it emits (never `--selected` for a
+     * managed row), so the patch is not clobbered on re-render.
+     */
+    private syncSelection;
+    get hostClass(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SelectableList, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SelectableList, "st-selectable-list", never, { "label": { "alias": "label"; "required": false; }; "labelledby": { "alias": "labelledby"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "value": { "alias": "value"; "required": false; }; "onChange": { "alias": "onChange"; "required": false; }; "classInput": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+//# sourceMappingURL=SelectableList.d.ts.map

package/dist/SelectableList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectableList.d.ts","sourceRoot":"","sources":["../src/SelectableList.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,aAAa,EAElB,UAAU,EAEV,KAAK,SAAS,EACf,MAAM,eAAe,CAAC;;AASvB,MAAM,MAAM,mBAAmB,GAAG;IAChC,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+EAA+E;IAC/E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,CAAC;IACjC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,qBAaa,cAAe,YAAW,aAAa,EAAE,SAAS;IAUjD,OAAO,CAAC,QAAQ,CAAC,IAAI;IATjC,MAAM,CAAC,QAAQ,CAAC,eAAe,oBAAoB;IACnD,QAAQ,CAAC,aAAa,oBAAoB;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAC;gBAET,IAAI,EAAE,UAAU,CAAC,WAAW,CAAC;IAE1D,eAAe,IAAI,IAAI;IAQvB,WAAW,IAAI,IAAI;IAInB;;;;;;;;OAQG;IACH,OAAO,CAAC,aAAa;IAmBrB,IAAI,SAAS,IAAI,MAAM,CAEtB;yCAtDU,cAAc;2CAAd,cAAc;CAuD1B"}

package/dist/SelectableList.js

@@ -0,0 +1,102 @@
+import { Component, ElementRef, Input as NgInput, } from "@angular/core";
+import { classNames } from "./classNames.js";
+import { SELECTABLE_LIST_KEY, } from "./SelectableRow.js";
+import * as i0 from "@angular/core";
+export class SelectableList {
+    host;
+    static stComponentName = "SelectableList";
+    componentName = "SelectableList";
+    label;
+    labelledby;
+    multiple;
+    value;
+    onChange;
+    classInput;
+    constructor(host) {
+        this.host = host;
+    }
+    ngAfterViewInit() {
+        this.syncSelection();
+        // Safety re-apply after the current render flush settles (projected rows may
+        // finish rendering their inner element just after this hook in the zoneless
+        // island). Idempotent.
+        queueMicrotask(() => this.syncSelection());
+    }
+    ngOnChanges() {
+        this.syncSelection();
+    }
+    /**
+     * The list OWNS selection: it drives the `--selected` styling of its
+     * {@link SelectableRow} children from its own `value`, mirroring the
+     * provide/inject contract of the React/Svelte/Vue references. Angular projects
+     * pre-instantiated rows as plain DOM (no shared injector), so the list reads
+     * each row's `data-value` and toggles the modifier directly. The rows' own
+     * `[class]` binding only manages the tokens it emits (never `--selected` for a
+     * managed row), so the patch is not clobbered on re-render.
+     */
+    syncSelection() {
+        const root = this.host?.nativeElement;
+        if (!root)
+            return;
+        const selected = new Set();
+        const value = this.value;
+        if (Array.isArray(value)) {
+            for (const entry of value)
+                if (entry != null)
+                    selected.add(String(entry));
+        }
+        else if (value != null) {
+            selected.add(String(value));
+        }
+        const rows = root.querySelectorAll(".st-selectableRow[data-value]");
+        rows.forEach((row) => {
+            const rowValue = row.getAttribute("data-value");
+            const isSelected = rowValue != null && selected.has(rowValue);
+            row.classList.toggle("st-selectableRow--selected", isSelected);
+            row.setAttribute("aria-selected", isSelected ? "true" : "false");
+        });
+    }
+    get hostClass() {
+        return classNames("st-selectableList", this.classInput);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SelectableList, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: SelectableList, isStandalone: true, selector: "st-selectable-list", inputs: { label: "label", labelledby: "labelledby", multiple: "multiple", value: "value", onChange: "onChange", classInput: ["class", "classInput"] }, usesOnChanges: true, ngImport: i0, template: `
+    <div [attr.data-st-component]="componentName" [class]="hostClass"
+      role="listbox"
+      [attr.aria-label]="labelledby ? null : label"
+      [attr.aria-labelledby]="labelledby"
+      [attr.aria-multiselectable]="multiple ? 'true' : null">
+      <ng-content></ng-content>
+    </div>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SelectableList, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "st-selectable-list",
+                    standalone: true,
+                    template: `
+    <div [attr.data-st-component]="componentName" [class]="hostClass"
+      role="listbox"
+      [attr.aria-label]="labelledby ? null : label"
+      [attr.aria-labelledby]="labelledby"
+      [attr.aria-multiselectable]="multiple ? 'true' : null">
+      <ng-content></ng-content>
+    </div>
+  `,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { label: [{
+                type: NgInput
+            }], labelledby: [{
+                type: NgInput
+            }], multiple: [{
+                type: NgInput
+            }], value: [{
+                type: NgInput
+            }], onChange: [{
+                type: NgInput
+            }], classInput: [{
+                type: NgInput,
+                args: ["class"]
+            }] } });
+//# sourceMappingURL=SelectableList.js.map

package/dist/SelectableList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectableList.js","sourceRoot":"","sources":["../src/SelectableList.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,SAAS,EACT,UAAU,EACV,KAAK,IAAI,OAAO,GAEjB,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,EACL,mBAAmB,GAEpB,MAAM,oBAAoB,CAAC;;AAwC5B,MAAM,OAAO,cAAc;IAUI;IAT7B,MAAM,CAAU,eAAe,GAAG,gBAAgB,CAAC;IAC1C,aAAa,GAAG,gBAAgB,CAAC;IAC/B,KAAK,CAAU;IACf,UAAU,CAAU;IACpB,QAAQ,CAAW;IACnB,KAAK,CAA4B;IACjC,QAAQ,CAA6C;IAC9C,UAAU,CAAU;IAEtC,YAA6B,IAA6B;QAA7B,SAAI,GAAJ,IAAI,CAAyB;IAAG,CAAC;IAE9D,eAAe;QACb,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,6EAA6E;QAC7E,4EAA4E;QAC5E,uBAAuB;QACvB,cAAc,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;IAC7C,CAAC;IAED,WAAW;QACT,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED;;;;;;;;OAQG;IACK,aAAa;QACnB,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,aAAa,CAAC;QACtC,IAAI,CAAC,IAAI;YAAE,OAAO;QAClB,MAAM,QAAQ,GAAG,IAAI,GAAG,EAAU,CAAC;QACnC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QACzB,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;YACzB,KAAK,MAAM,KAAK,IAAI,KAAK;gBAAE,IAAI,KAAK,IAAI,IAAI;oBAAE,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;QAC5E,CAAC;aAAM,IAAI,KAAK,IAAI,IAAI,EAAE,CAAC;YACzB,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;QAC9B,CAAC;QACD,MAAM,IAAI,GAAG,IAAI,CAAC,gBAAgB,CAAc,+BAA+B,CAAC,CAAC;QACjF,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;YACnB,MAAM,QAAQ,GAAG,GAAG,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;YAChD,MAAM,UAAU,GAAG,QAAQ,IAAI,IAAI,IAAI,QAAQ,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;YAC9D,GAAG,CAAC,SAAS,CAAC,MAAM,CAAC,4BAA4B,EAAE,UAAU,CAAC,CAAC;YAC/D,GAAG,CAAC,YAAY,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;QACnE,CAAC,CAAC,CAAC;IACL,CAAC;IAED,IAAI,SAAS;QACX,OAAO,UAAU,CAAC,mBAAmB,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;IAC1D,CAAC;wGAtDU,cAAc;4FAAd,cAAc,0PAVf;;;;;;;;GAQT;;4FAEU,cAAc;kBAb1B,SAAS;mBAAC;oBACT,QAAQ,EAAE,oBAAoB;oBAC9B,UAAU,EAAE,IAAI;oBAChB,QAAQ,EAAE;;;;;;;;GAQT;iBACF;;sBAIE,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;uBAAC,OAAO"}

package/dist/SelectableRow.d.ts

@@ -0,0 +1,94 @@
+import * as i0 from "@angular/core";
+/**
+ * Shared context contract between {@link SelectableList} and its slotted
+ * {@link SelectableRow} children. The list owns selection + the roving tabindex
+ * and exposes the getters/callbacks the rows read to derive their own `role` /
+ * `tabindex` / `aria-selected`. When a row is used STANDALONE (no provider)
+ * `inject` returns undefined and the row falls back to its own state.
+ */
+export type SelectableListContext = {
+    /** Reactive bump incremented on every selection / focus / registry change. */
+    version: {
+        value: number;
+    };
+    /** True when the list manages selection/roving for its rows. */
+    readonly managed: true;
+    /** listbox role for the wrapper → rows are "option". */
+    readonly itemRole: "option";
+    /** Register a row element; returns an unregister callback. disabled is forwarded so the list can skip it during keyboard navigation. */
+    register: (el: HTMLElement, value: string | undefined, disabled?: boolean) => () => void;
+    /** Is the row with this element currently selected? */
+    isSelected: (el: HTMLElement) => boolean;
+    /** Should the row with this element be the roving-tabindex stop (tabindex 0)? */
+    isTabStop: (el: HTMLElement) => boolean;
+    /** Row was activated (click / Space / Enter). The list toggles selection. */
+    activate: (el: HTMLElement) => void;
+    /** Row received focus → becomes the roving tab stop. */
+    focusRow: (el: HTMLElement) => void;
+    /** Arrow / Home / End navigation from a row. */
+    navigate: (el: HTMLElement, key: string) => void;
+};
+/** Context key for list→row communication (Angular DI / lookup). Mirrors the
+ *  Vue InjectionKey symbol so SelectableList can share its managed context. */
+export declare const SELECTABLE_LIST_KEY: unique symbol;
+export type SelectableRowProps = {
+    /**
+     * Selected state. Honoured when the row is used STANDALONE; inside a
+     * {@link SelectableList} the list is the source of truth, so this prop is
+     * ignored for managed rows.
+     */
+    selected?: boolean;
+    /** Notified on every toggle with the new selected state (standalone rows). */
+    onSelect?: (selected: boolean) => void;
+    /** Non-interactive when true. */
+    disabled?: boolean;
+    /** Stable value, surfaced as `data-value` and used by the list for `value`. */
+    value?: string;
+    /** Native link target. When set on a standalone row, the row renders as an anchor. */
+    href?: string;
+    /**
+     * ARIA role for the standalone row. Defaults to "button" for standalone use —
+     * "option" is only valid inside a listbox. Inside a list the role is forced to
+     * "option".
+     */
+    role?: string;
+    /**
+     * Opt-in left accent bar on the selected state. Off by default so the
+     * selected item is a calm tinted surface + accented text (two signals only).
+     */
+    accentBar?: boolean;
+    /**
+     * When true, the row stacks the primary label over a muted caption line
+     * (projected via `[slot='caption']`) and gains the `--hasCaption` modifier.
+     */
+    caption?: boolean;
+    /** When true, renders the leading slot wrapper (projected via `[slot='leading']`). */
+    leading?: boolean;
+    /** When true, renders the trailing slot wrapper (projected via `[slot='trailing']`). */
+    trailing?: boolean;
+    class?: string;
+};
+export declare class SelectableRow {
+    static readonly stComponentName = "SelectableRow";
+    readonly componentName = "SelectableRow";
+    selected?: boolean;
+    onSelect?: (selected: boolean) => void;
+    disabled?: boolean;
+    value?: string;
+    href?: string;
+    role?: string;
+    accentBar?: boolean;
+    caption?: boolean;
+    leading?: boolean;
+    trailing?: boolean;
+    classInput?: string;
+    get effectiveRole(): string | null;
+    get contentClass(): string;
+    get selectedAttr(): "true" | "false";
+    get tabindex(): number;
+    handleClick(event: MouseEvent): void;
+    get hostClass(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SelectableRow, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SelectableRow, "st-selectable-row", never, { "selected": { "alias": "selected"; "required": false; }; "onSelect": { "alias": "onSelect"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "value": { "alias": "value"; "required": false; }; "href": { "alias": "href"; "required": false; }; "role": { "alias": "role"; "required": false; }; "accentBar": { "alias": "accentBar"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; "leading": { "alias": "leading"; "required": false; }; "trailing": { "alias": "trailing"; "required": false; }; "classInput": { "alias": "class"; "required": false; }; }, {}, never, ["[slot='leading']", "*", "[slot='caption']", "[slot='trailing']"], true, never>;
+}
+//# sourceMappingURL=SelectableRow.d.ts.map

package/dist/SelectableRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectableRow.d.ts","sourceRoot":"","sources":["../src/SelectableRow.ts"],"names":[],"mappings":";AAIA;;;;;;GAMG;AACH,MAAM,MAAM,qBAAqB,GAAG;IAClC,8EAA8E;IAC9E,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3B,gEAAgE;IAChE,QAAQ,CAAC,OAAO,EAAE,IAAI,CAAC;IACvB,wDAAwD;IACxD,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC5B,wIAAwI;IACxI,QAAQ,EAAE,CAAC,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,MAAM,IAAI,CAAC;IACzF,uDAAuD;IACvD,UAAU,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,OAAO,CAAC;IACzC,iFAAiF;IACjF,SAAS,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,OAAO,CAAC;IACxC,6EAA6E;IAC7E,QAAQ,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,IAAI,CAAC;IACpC,wDAAwD;IACxD,QAAQ,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,IAAI,CAAC;IACpC,gDAAgD;IAChD,QAAQ,EAAE,CAAC,EAAE,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAClD,CAAC;AAEF;+EAC+E;AAC/E,eAAO,MAAM,mBAAmB,eAAgC,CAAC;AAEjE,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sFAAsF;IACtF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sFAAsF;IACtF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,wFAAwF;IACxF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,qBAyBa,aAAa;IACxB,MAAM,CAAC,QAAQ,CAAC,eAAe,mBAAmB;IAClD,QAAQ,CAAC,aAAa,mBAAmB;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACZ,UAAU,CAAC,EAAE,MAAM,CAAC;IAEtC,IAAI,aAAa,IAAI,MAAM,GAAG,IAAI,CAKjC;IAED,IAAI,YAAY,IAAI,MAAM,CAKzB;IAED,IAAI,YAAY,IAAI,MAAM,GAAG,OAAO,CAEnC;IAED,IAAI,QAAQ,IAAI,MAAM,CAErB;IAED,WAAW,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAapC,IAAI,SAAS,IAAI,MAAM,CAStB;yCA3DU,aAAa;2CAAb,aAAa;CA4DzB"}

package/dist/SelectableRow.js

@@ -0,0 +1,127 @@
+import { Component, Input as NgInput } from "@angular/core";
+import { classNames } from "./classNames.js";
+import * as i0 from "@angular/core";
+/** Context key for list→row communication (Angular DI / lookup). Mirrors the
+ *  Vue InjectionKey symbol so SelectableList can share its managed context. */
+export const SELECTABLE_LIST_KEY = Symbol("SELECTABLE_LIST_KEY");
+export class SelectableRow {
+    static stComponentName = "SelectableRow";
+    componentName = "SelectableRow";
+    selected;
+    onSelect;
+    disabled;
+    value;
+    href;
+    role;
+    accentBar;
+    caption;
+    leading;
+    trailing;
+    classInput;
+    get effectiveRole() {
+        // Standalone row: a link row is announced as "link", otherwise the declared
+        // role (default "button"). Inside a list the role is forced to "option".
+        if (this.href)
+            return this.role || "link";
+        return this.role || "button";
+    }
+    get contentClass() {
+        return classNames("st-selectableRow__content", this.caption && "st-selectableRow__content--stacked");
+    }
+    get selectedAttr() {
+        return this.selected ? "true" : "false";
+    }
+    get tabindex() {
+        return this.disabled ? -1 : 0;
+    }
+    handleClick(event) {
+        if (this.disabled) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        if (this.href) {
+            if (typeof window !== "undefined")
+                window.location.assign(this.href);
+            return;
+        }
+        this.onSelect?.(!this.selected);
+    }
+    get hostClass() {
+        return classNames("st-selectableRow", this.selected && "st-selectableRow--selected", this.disabled && "st-selectableRow--disabled", this.accentBar && "st-selectableRow--accentBar", this.caption && "st-selectableRow--hasCaption", this.classInput);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SelectableRow, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SelectableRow, isStandalone: true, selector: "st-selectable-row", inputs: { selected: "selected", onSelect: "onSelect", disabled: "disabled", value: "value", href: "href", role: "role", accentBar: "accentBar", caption: "caption", leading: "leading", trailing: "trailing", classInput: ["class", "classInput"] }, ngImport: i0, template: `
+    <div
+      [attr.data-st-component]="componentName"
+      [class]="hostClass"
+      [attr.role]="effectiveRole"
+      [attr.aria-selected]="effectiveRole === 'option' ? selectedAttr : null"
+      [attr.aria-pressed]="effectiveRole === 'button' ? selectedAttr : null"
+      [attr.aria-disabled]="disabled ? 'true' : null"
+      [attr.data-value]="value"
+      [attr.tabindex]="tabindex"
+      (click)="handleClick($event)"
+    >
+      @if (leading) {
+        <span class="st-selectableRow__leading"><ng-content select="[slot='leading']"></ng-content></span>
+      }
+      <span [class]="contentClass"><ng-content></ng-content><ng-content select="[slot='caption']"></ng-content></span>
+      @if (trailing) {
+        <span class="st-selectableRow__trailing"><ng-content select="[slot='trailing']"></ng-content></span>
+      }
+    </div>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SelectableRow, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "st-selectable-row",
+                    standalone: true,
+                    template: `
+    <div
+      [attr.data-st-component]="componentName"
+      [class]="hostClass"
+      [attr.role]="effectiveRole"
+      [attr.aria-selected]="effectiveRole === 'option' ? selectedAttr : null"
+      [attr.aria-pressed]="effectiveRole === 'button' ? selectedAttr : null"
+      [attr.aria-disabled]="disabled ? 'true' : null"
+      [attr.data-value]="value"
+      [attr.tabindex]="tabindex"
+      (click)="handleClick($event)"
+    >
+      @if (leading) {
+        <span class="st-selectableRow__leading"><ng-content select="[slot='leading']"></ng-content></span>
+      }
+      <span [class]="contentClass"><ng-content></ng-content><ng-content select="[slot='caption']"></ng-content></span>
+      @if (trailing) {
+        <span class="st-selectableRow__trailing"><ng-content select="[slot='trailing']"></ng-content></span>
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { selected: [{
+                type: NgInput
+            }], onSelect: [{
+                type: NgInput
+            }], disabled: [{
+                type: NgInput
+            }], value: [{
+                type: NgInput
+            }], href: [{
+                type: NgInput
+            }], role: [{
+                type: NgInput
+            }], accentBar: [{
+                type: NgInput
+            }], caption: [{
+                type: NgInput
+            }], leading: [{
+                type: NgInput
+            }], trailing: [{
+                type: NgInput
+            }], classInput: [{
+                type: NgInput,
+                args: ["class"]
+            }] } });
+//# sourceMappingURL=SelectableRow.js.map

package/dist/SelectableRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectableRow.js","sourceRoot":"","sources":["../src/SelectableRow.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,IAAI,OAAO,EAAE,MAAM,eAAe,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;;AA8B7C;+EAC+E;AAC/E,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,qBAAqB,CAAC,CAAC;AAiEjE,MAAM,OAAO,aAAa;IACxB,MAAM,CAAU,eAAe,GAAG,eAAe,CAAC;IACzC,aAAa,GAAG,eAAe,CAAC;IAC9B,QAAQ,CAAW;IACnB,QAAQ,CAA+B;IACvC,QAAQ,CAAW;IACnB,KAAK,CAAU;IACf,IAAI,CAAU;IACd,IAAI,CAAU;IACd,SAAS,CAAW;IACpB,OAAO,CAAW;IAClB,OAAO,CAAW;IAClB,QAAQ,CAAW;IACZ,UAAU,CAAU;IAEtC,IAAI,aAAa;QACf,4EAA4E;QAC5E,yEAAyE;QACzE,IAAI,IAAI,CAAC,IAAI;YAAE,OAAO,IAAI,CAAC,IAAI,IAAI,MAAM,CAAC;QAC1C,OAAO,IAAI,CAAC,IAAI,IAAI,QAAQ,CAAC;IAC/B,CAAC;IAED,IAAI,YAAY;QACd,OAAO,UAAU,CACf,2BAA2B,EAC3B,IAAI,CAAC,OAAO,IAAI,oCAAoC,CACrD,CAAC;IACJ,CAAC;IAED,IAAI,YAAY;QACd,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;IAC1C,CAAC;IAED,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAChC,CAAC;IAED,WAAW,CAAC,KAAiB;QAC3B,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,OAAO;QACT,CAAC;QACD,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,IAAI,OAAO,MAAM,KAAK,WAAW;gBAAE,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YACrE,OAAO;QACT,CAAC;QACD,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAClC,CAAC;IAED,IAAI,SAAS;QACX,OAAO,UAAU,CACf,kBAAkB,EAClB,IAAI,CAAC,QAAQ,IAAI,4BAA4B,EAC7C,IAAI,CAAC,QAAQ,IAAI,4BAA4B,EAC7C,IAAI,CAAC,SAAS,IAAI,6BAA6B,EAC/C,IAAI,CAAC,OAAO,IAAI,8BAA8B,EAC9C,IAAI,CAAC,UAAU,CAChB,CAAC;IACJ,CAAC;wGA3DU,aAAa;4FAAb,aAAa,kUAtBd;;;;;;;;;;;;;;;;;;;;GAoBT;;4FAEU,aAAa;kBAzBzB,SAAS;mBAAC;oBACT,QAAQ,EAAE,mBAAmB;oBAC7B,UAAU,EAAE,IAAI;oBAChB,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;GAoBT;iBACF;;sBAIE,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/SelectionChip.d.ts

@@ -0,0 +1,32 @@
+import { EventEmitter } from "@angular/core";
+import * as i0 from "@angular/core";
+export type SelectionChipTone = "neutral" | "success" | "warning" | "error" | "info";
+export type SelectionChipProps = {
+    /** Libellé de la dimension sélectionnée. */
+    label: string;
+    /** Nombre d'éléments sélectionnés — affiché "(N)" si fourni et Number.isFinite. */
+    count?: number;
+    tone?: SelectionChipTone;
+    /** Callback effacement — affiche le bouton ✕ si fourni. */
+    onClear?: () => void;
+    disabled?: boolean;
+    class?: string;
+};
+export declare class SelectionChip {
+    static readonly stComponentName = "SelectionChip";
+    readonly componentName = "SelectionChip";
+    label: string;
+    count?: number;
+    tone?: SelectionChipTone;
+    onClear?: () => void;
+    disabled?: boolean;
+    classInput?: string;
+    readonly clear: EventEmitter<void>;
+    get showCount(): boolean;
+    get hasClear(): boolean;
+    get hostClass(): string;
+    handleClear(event: MouseEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SelectionChip, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SelectionChip, "st-selection-chip", never, { "label": { "alias": "label"; "required": false; }; "count": { "alias": "count"; "required": false; }; "tone": { "alias": "tone"; "required": false; }; "onClear": { "alias": "onClear"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "classInput": { "alias": "class"; "required": false; }; }, { "clear": "clear"; }, never, never, true, never>;
+}
+//# sourceMappingURL=SelectionChip.d.ts.map

package/dist/SelectionChip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionChip.d.ts","sourceRoot":"","sources":["../src/SelectionChip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,YAAY,EAA4B,MAAM,eAAe,CAAC;;AAIlF,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAErF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,mFAAmF;IACnF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,qBA8Ca,aAAa;IACxB,MAAM,CAAC,QAAQ,CAAC,eAAe,mBAAmB;IAClD,QAAQ,CAAC,aAAa,mBAAmB;IAE9B,KAAK,EAAG,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACZ,UAAU,CAAC,EAAE,MAAM,CAAC;IAE5B,QAAQ,CAAC,KAAK,qBAA4B;IAEpD,IAAI,SAAS,IAAI,OAAO,CAEvB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,SAAS,IAAI,MAAM,CAOtB;IAED,WAAW,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;yCA9BzB,aAAa;2CAAb,aAAa;CAoCzB"}