@skra/ui 0.2.0

package/fesm2022/skra-ui-menu.mjs

@@ -0,0 +1,334 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, ElementRef, ViewEncapsulation, ChangeDetectionStrategy, Component, input, contentChildren, Renderer2, effect, afterNextRender, DestroyRef } from '@angular/core';
+import { _attachPositioner } from '@skra/ui/core';
+import { FocusKeyManager } from '@angular/cdk/a11y';
+
+/**
+ * SkraMenuKeyboard — the WAI-ARIA APG Menu keyboard model, confined to ONE file.
+ *
+ * This is the **only** module in Forge that imports `@angular/cdk`. It wraps CDK `FocusKeyManager`
+ * (roving REAL focus — the APG-canonical menu model, NOT `aria-activedescendant`) so the engine is an
+ * implementation detail: swapping it (e.g. to a hand-rolled controller) is a one-file change with zero
+ * impact on `SkraMenu` / `SkraMenuItem` — exactly as `SkraPositioner` wraps `@floating-ui/dom`
+ * (ADR 0044 §3 rule 5; recorded in §7, 2026-06-07).
+ *
+ * Owns: Down/Up roving (wrap), Home/End, type-ahead, and Tab→dismiss. Enter/Space (native button
+ * activation) and Escape + light-dismiss (`popover="auto"`) stay platform-owned — the controller never
+ * touches them.
+ */
+class SkraMenuKeyboard {
+    manager;
+    items = [];
+    tabOutHandler;
+    /** Register the APG "Tab dismisses the menu" callback (fired by `FocusKeyManager.tabOut`). */
+    onTabOut(handler) {
+        this.tabOutHandler = handler;
+    }
+    /**
+     * (Re)build the manager from the current projected item set. Called from an `effect` on the menu's
+     * signal `contentChildren` — a passed array is a static snapshot (it does not auto-track like a live
+     * `QueryList`), so the manager is rebuilt whenever the item set changes (the documented signal↔CDK seam).
+     */
+    setItems(items) {
+        this.items = [...items];
+        this.manager?.destroy();
+        this.manager = new FocusKeyManager(this.items)
+            .withWrap()
+            .withTypeAhead()
+            .withHomeAndEnd()
+            // Disabled items stay in the roving order (APG focusable-but-inert — discoverable); activation is
+            // blocked on the item itself. `() => false` also stops `FocusKeyManager` from reading `item.disabled`
+            // (which on our signal-input component would be a truthy function).
+            .skipPredicate(() => false);
+        this.manager.tabOut.subscribe(() => this.tabOutHandler?.());
+    }
+    /** Delegate Up/Down/Home/End/type-ahead. Enter/Space/Escape are intentionally left to the platform. */
+    onKeydown(event) {
+        this.manager?.onKeydown(event);
+    }
+    /** Move roving focus to the first ENABLED item (APG: focus enters the menu on open). */
+    focusFirst() {
+        if (!this.manager || this.items.length === 0)
+            return;
+        const firstEnabled = this.items.findIndex((item) => !item.isDisabled());
+        this.manager.setActiveItem(firstEnabled >= 0 ? firstEnabled : 0);
+    }
+    destroy() {
+        this.manager?.destroy();
+        this.manager = undefined;
+    }
+}
+
+/**
+ * DI token a `skra-menu` provides (`useExisting`) and a `button[skraMenuItem]` injects. A token
+ * (not the `SkraMenu` class) so the item file never imports the menu file — no runtime import cycle.
+ */
+const SKRA_MENU = new InjectionToken('SKRA_MENU');
+
+/**
+ * SkraMenuItem — a single command in a `skra-menu`, a Component on the native command host
+ * `button[skraMenuItem]` (ADR 012/040: a `<button>` is the right semantic — Enter/Space→click +
+ * focusability for free; its implicit role is overridden to `role="menuitem"` per WAI-ARIA APG).
+ *
+ * Roving focus: `tabindex="-1"` (the keyboard controller moves real focus). Implements
+ * `SkraMenuKeyboardItem` (`focus`/`getLabel`/`isDisabled`) so `SkraMenuKeyboard` (CDK `FocusKeyManager`)
+ * can drive it. On activation it asks the menu to close (native `hidePopover()` → focus returns to the
+ * trigger).
+ *
+ * **Disabled is native-attr-first (boundary #9, ADR 039 precedent): the consumer sets
+ * `aria-disabled="true"` directly — Forge OBSERVES it, exposing NO `disabled` input.** This (a) keeps a
+ * disabled item **focusable/discoverable** in the roving order (APG) — native `disabled` would remove it
+ * from focus, and (b) avoids a Forge input shadowing the native `disabled` attribute. Styling keys off
+ * `:host([aria-disabled="true"])`; activation is blocked here.
+ *
+ * Full contract: adr/specs/component-menu-spec.md.
+ */
+class SkraMenuItem {
+    host = inject(ElementRef);
+    menu = inject(SKRA_MENU, { optional: true });
+    constructor() {
+        if (typeof ngDevMode === 'undefined' || ngDevMode) {
+            if (!this.menu) {
+                console.warn('[skraMenuItem] has no <skra-menu> ancestor — it is not registered with any keyboard ' +
+                    'controller and cannot close a menu on activation. Project it inside a <skra-menu>.');
+            }
+        }
+    }
+    // ── SkraMenuKeyboardItem (driven by SkraMenuKeyboard / CDK FocusKeyManager) ──
+    focus() {
+        this.host.nativeElement.focus();
+    }
+    getLabel() {
+        return (this.host.nativeElement.textContent ?? '').trim();
+    }
+    /** Soft-disabled = the consumer's `aria-disabled="true"` (native-attr-first); read live (no input). */
+    isDisabled() {
+        return this.host.nativeElement.getAttribute('aria-disabled') === 'true';
+    }
+    onActivate(event) {
+        if (this.isDisabled()) {
+            // Soft-disabled: block the native default AND the consumer's own (click) on this same host
+            // (the host listener runs first — Material's MatMenuItem precedent).
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            return;
+        }
+        // Activating a command closes the menu (APG). The consumer's (click) handler runs independently.
+        this.menu?.requestClose();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SkraMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: SkraMenuItem, isStandalone: true, selector: "button[skraMenuItem]", host: { attributes: { "role": "menuitem", "type": "button", "tabindex": "-1" }, listeners: { "click": "onActivate($event)" } }, exportAs: ["skraMenuItem"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:var(--skra-comp-menu-item-gap);inline-size:100%;min-block-size:var(--skra-comp-menu-item-min-block-size);margin:0;box-sizing:border-box;padding-block:var(--skra-comp-menu-item-padding-block);padding-inline:var(--skra-comp-menu-item-padding-inline);appearance:none;background:transparent;border:0;color:var(--skra-comp-menu-item-foreground);text-align:start;cursor:pointer;font-family:var(--skra-sys-typography-role-body-medium-font-family);font-size:var(--skra-sys-typography-role-body-medium-font-size);font-weight:var(--skra-sys-typography-role-body-medium-font-weight);line-height:var(--skra-sys-typography-role-body-medium-line-height);letter-spacing:var(--skra-sys-typography-role-body-medium-letter-spacing);transition:background-color var(--skra-comp-menu-motion-duration) var(--skra-comp-menu-motion-easing)}:host(:hover:not([aria-disabled=true])),:host(:focus-visible:not([aria-disabled=true])){background-color:var(--skra-comp-menu-item-background-hover)}:host(:focus-visible){outline:var(--skra-comp-menu-focus-ring-width) solid var(--skra-comp-menu-focus-ring-color);outline-offset:calc(-1 * var(--skra-comp-menu-focus-ring-width))}:host([aria-disabled=true]){color:var(--skra-comp-menu-item-foreground-disabled);cursor:default}@media(prefers-reduced-motion:reduce){:host{transition-duration:0ms}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SkraMenuItem, decorators: [{
+            type: Component,
+            args: [{ selector: 'button[skraMenuItem]', standalone: true, exportAs: 'skraMenuItem', template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: {
+                        role: 'menuitem',
+                        type: 'button', // never an implicit submit if the menu sits inside a <form>
+                        tabindex: '-1', // roving — focus is moved programmatically by SkraMenuKeyboard
+                        '(click)': 'onActivate($event)',
+                    }, styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:var(--skra-comp-menu-item-gap);inline-size:100%;min-block-size:var(--skra-comp-menu-item-min-block-size);margin:0;box-sizing:border-box;padding-block:var(--skra-comp-menu-item-padding-block);padding-inline:var(--skra-comp-menu-item-padding-inline);appearance:none;background:transparent;border:0;color:var(--skra-comp-menu-item-foreground);text-align:start;cursor:pointer;font-family:var(--skra-sys-typography-role-body-medium-font-family);font-size:var(--skra-sys-typography-role-body-medium-font-size);font-weight:var(--skra-sys-typography-role-body-medium-font-weight);line-height:var(--skra-sys-typography-role-body-medium-line-height);letter-spacing:var(--skra-sys-typography-role-body-medium-letter-spacing);transition:background-color var(--skra-comp-menu-motion-duration) var(--skra-comp-menu-motion-easing)}:host(:hover:not([aria-disabled=true])),:host(:focus-visible:not([aria-disabled=true])){background-color:var(--skra-comp-menu-item-background-hover)}:host(:focus-visible){outline:var(--skra-comp-menu-focus-ring-width) solid var(--skra-comp-menu-focus-ring-color);outline-offset:calc(-1 * var(--skra-comp-menu-focus-ring-width))}:host([aria-disabled=true]){color:var(--skra-comp-menu-item-foreground-disabled);cursor:default}@media(prefers-reduced-motion:reduce){:host{transition-duration:0ms}}\n"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * SkraMenu — a WAI-ARIA APG **Menu Button** menu: a homogeneous set of commands anchored to a
+ * trigger, navigated as one composite widget with arrow keys, where activating a command closes it.
+ * Rendered in the browser TOP LAYER via the native Popover API (`popover="auto"`), per ADR 0044.
+ *
+ * SHAPE (scope 2026-06-07): a Component on the PANEL with projected `button[skraMenuItem]` children
+ * (the Popover model, ADR 040) — NOT a directive on the trigger, NOT a data-driven `[items]` array.
+ * The trigger is the consumer's own button linked by the native `popovertarget` attribute; toggle,
+ * light-dismiss and Escape are platform-owned. The consumer MUST give `<skra-menu>` an `id`.
+ *
+ *   <button skraButton popovertarget="actions" aria-haspopup="menu">Actions</button>
+ *   <skra-menu id="actions">
+ *     <button skraMenuItem (click)="edit()">Edit</button>
+ *     <button skraMenuItem disabled (click)="archive()">Archive</button>
+ *     <button skraMenuItem (click)="remove()">Delete</button>
+ *   </skra-menu>
+ *
+ * Forge adds, on top of the Popover substrate: the `role="menu"` keyboard model via `SkraMenuKeyboard`
+ * (CDK `FocusKeyManager` — Down/Up roving + wrap, Home/End, type-ahead, Tab-dismiss), **focus moving
+ * INTO the menu on open** (a composite widget — unlike non-modal Popover; the per-component ADR 0044
+ * §3 rule-8 decision), and the trigger's disclosure ARIA (`aria-haspopup="menu"` / `aria-controls` /
+ * `aria-expanded`). Side effects on open/close: bind the native `(toggle)` — there is no Forge output
+ * (native-first; contrast Dialog, whose `<dialog>` has no open event). Context menus (right-click) are
+ * a recipe with a visible button, never a trigger mode (SRP + WCAG 2.1.1).
+ *
+ * Full contract: adr/specs/component-menu-spec.md.
+ */
+class SkraMenu {
+    /** Placement intent; `flip`/`shift` adjust at runtime. */
+    placement = input('bottom', ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+    menuItems = contentChildren(SkraMenuItem, { ...(ngDevMode ? { debugName: "menuItems" } : /* istanbul ignore next */ {}), descendants: true });
+    host = inject(ElementRef);
+    renderer = inject(Renderer2);
+    keyboard = new SkraMenuKeyboard();
+    /** The consumer's `[popovertarget]` button, resolved once (lazily-idempotent via `resolved`). */
+    trigger = null;
+    resolved = false;
+    positioner;
+    constructor() {
+        // Feed the controller whenever the projected item set changes (signal → array snapshot rebuild).
+        effect(() => this.keyboard.setItems(this.menuItems()));
+        // APG: Tab/Shift+Tab dismisses the menu; native Tab then proceeds from the trigger.
+        this.keyboard.onTabOut(() => this.host.nativeElement.hidePopover?.());
+        // All imperative DOM wiring lives in afterNextRender — a browser-only hook, so the native listeners
+        // and the trigger resolution never run on the server (SSR-safe by construction; O-18). The listeners
+        // attach right after first paint, long before any user interaction can fire them.
+        afterNextRender(() => {
+            const el = this.host.nativeElement;
+            // Gate disabled items at the CAPTURE phase: a component host listener registers AFTER the parent
+            // template's `(click)` on the same button, so a bubble-phase guard cannot stop the consumer's own
+            // handler. A capture listener on the menu host fires before the target's listeners — preventing both
+            // the consumer's `(click)` and the item's `onActivate` for an `aria-disabled` item.
+            el.addEventListener('click', this.onCaptureClick, true);
+            // Imperative (NOT host-metadata) so a consumer `(toggle)` binding does not shadow them — see host {}.
+            el.addEventListener('toggle', this.onToggleNative);
+            el.addEventListener('keydown', this.onKeydownNative);
+            // Resolve + wire the trigger after the view exists (it may be a later sibling), so the disclosure
+            // relationship (aria-haspopup + aria-controls + aria-expanded="false") is present before first open.
+            this.ensureTrigger();
+            if (typeof ngDevMode === 'undefined' || ngDevMode)
+                this.warnIfEmpty();
+        });
+        inject(DestroyRef).onDestroy(() => this.teardown());
+    }
+    /** SKRA_MENU contract — close on item activation (native focus-return to the trigger). */
+    requestClose() {
+        this.host.nativeElement.hidePopover?.();
+    }
+    /** Capture-phase guard: block clicks on an `aria-disabled` item before they reach its listeners. */
+    onCaptureClick = (event) => {
+        const item = event.target?.closest?.('[skraMenuItem]');
+        if (item?.getAttribute('aria-disabled') === 'true') {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    };
+    // ── Toggle / keydown (imperative native listeners — see host {} note) ─────────
+    onToggleNative = (event) => {
+        if (event.newState === 'open')
+            this.onOpen();
+        else
+            this.onClose();
+    };
+    onKeydownNative = (event) => {
+        this.keyboard.onKeydown(event);
+    };
+    onOpen() {
+        const anchor = this.ensureTrigger(); // safety net if afterNextRender has not yet run
+        if (anchor) {
+            this.renderer.setAttribute(anchor, 'aria-expanded', 'true');
+            this.positioner?.destroy();
+            this.positioner = _attachPositioner(anchor, this.host.nativeElement, () => ({
+                placement: this.placement(),
+                offset: this.cssLenPx('--skra-comp-menu-offset'),
+                viewportPadding: this.cssLenPx('--skra-comp-menu-viewport-padding'),
+            }));
+        }
+        // Focus enters the menu (APG Menu Button) regardless of how it opened — unlike non-modal Popover.
+        this.keyboard.focusFirst();
+    }
+    onClose() {
+        if (this.trigger) {
+            this.renderer.setAttribute(this.trigger, 'aria-expanded', 'false');
+        }
+        this.positioner?.destroy();
+        this.positioner = undefined;
+    }
+    /**
+     * Resolve the `[popovertarget]` trigger and establish the menu disclosure ARIA on it (sanctioned a11y
+     * wiring, ADR 013-style — not style mutation). Idempotent. Returns the trigger (or null for an orphan
+     * menu, dev-warned once).
+     */
+    ensureTrigger() {
+        if (this.resolved)
+            return this.trigger;
+        this.resolved = true;
+        const id = this.host.nativeElement.id;
+        if (!id) {
+            if (typeof ngDevMode === 'undefined' || ngDevMode) {
+                console.warn('[skra-menu] has no `id` — it cannot be targeted by a `popovertarget` trigger and the ' +
+                    'disclosure ARIA (aria-haspopup/aria-controls/aria-expanded) cannot be wired. Give the ' +
+                    'menu an id and point a button at it: ' +
+                    '<button popovertarget="my-id" aria-haspopup="menu">…</button> <skra-menu id="my-id">…');
+            }
+            return null;
+        }
+        // Match by attribute value (no escaping; robust to special chars; `CSS.escape` is not universal).
+        this.trigger =
+            Array.from(document.querySelectorAll('[popovertarget]')).find((el) => el.getAttribute('popovertarget') === id) ?? null;
+        if (!this.trigger) {
+            if (typeof ngDevMode === 'undefined' || ngDevMode) {
+                console.warn(`[skra-menu] no trigger found with [popovertarget="${id}"] — the menu is unreachable and ` +
+                    'has no element to carry aria-haspopup/aria-controls/aria-expanded. Add a focusable trigger ' +
+                    'button with the matching popovertarget.');
+            }
+            return null;
+        }
+        // Establish the Menu Button relationship before the first open (APG; aria-haspopup distinguishes a
+        // menu from Popover's generic disclosure).
+        this.renderer.setAttribute(this.trigger, 'aria-haspopup', 'menu');
+        this.renderer.setAttribute(this.trigger, 'aria-controls', id);
+        this.renderer.setAttribute(this.trigger, 'aria-expanded', 'false');
+        return this.trigger;
+    }
+    /** Read a length comp token (px/rem) off the host computed style for the positioner. */
+    cssLenPx(prop) {
+        const raw = getComputedStyle(this.host.nativeElement)
+            .getPropertyValue(prop)
+            .trim();
+        if (raw.endsWith('px'))
+            return parseFloat(raw);
+        if (raw.endsWith('rem')) {
+            const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+            return parseFloat(raw) * rootFontSize;
+        }
+        return parseFloat(raw) || 0;
+    }
+    /** Dev-only nudge: a role="menu" with no menuitems is invalid — a link-list/content panel is a Popover. */
+    warnIfEmpty() {
+        if (this.menuItems().length === 0) {
+            console.warn('[skra-menu] has no `button[skraMenuItem]` children — a `role="menu"` with no menu items is ' +
+                'invalid. If this is a panel of arbitrary content or a list of navigation links, use ' +
+                '<skra-popover> (disclosure) instead — see the Menu-vs-Popover boundary in the spec.');
+        }
+    }
+    teardown() {
+        const el = this.host.nativeElement;
+        el.removeEventListener('click', this.onCaptureClick, true);
+        el.removeEventListener('toggle', this.onToggleNative);
+        el.removeEventListener('keydown', this.onKeydownNative);
+        this.keyboard.destroy();
+        this.positioner?.destroy();
+        if (this.trigger) {
+            this.renderer.removeAttribute(this.trigger, 'aria-haspopup');
+            this.renderer.removeAttribute(this.trigger, 'aria-expanded');
+            this.renderer.removeAttribute(this.trigger, 'aria-controls');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SkraMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.7", type: SkraMenu, isStandalone: true, selector: "skra-menu", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "menu", "popover": "auto" } }, providers: [{ provide: SKRA_MENU, useExisting: SkraMenu }], queries: [{ propertyName: "menuItems", predicate: SkraMenuItem, descendants: true, isSignal: true }], exportAs: ["skraMenu"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["@charset \"UTF-8\";:host{position:fixed;margin:0;inset:auto;box-sizing:border-box;background:var(--skra-comp-menu-background);color:var(--skra-comp-menu-foreground);border-color:var(--skra-comp-menu-border-color);border-width:var(--skra-comp-menu-border-width);border-style:var(--skra-comp-menu-border-style);border-radius:var(--skra-comp-menu-radius);padding-block:var(--skra-comp-menu-padding-block);padding-inline:var(--skra-comp-menu-padding-inline);box-shadow:var(--skra-comp-menu-shadow);inline-size:max-content;max-inline-size:var(--skra-comp-menu-max-inline-size);flex-direction:column;opacity:0;transition:opacity var(--skra-comp-menu-motion-duration) var(--skra-comp-menu-motion-easing),display var(--skra-comp-menu-motion-duration) allow-discrete,overlay var(--skra-comp-menu-motion-duration) allow-discrete}:host(:popover-open){display:flex;opacity:1}@starting-style{:host(:popover-open){opacity:0}}@media(prefers-reduced-motion:reduce){:host{transition-duration:0ms}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SkraMenu, decorators: [{
+            type: Component,
+            args: [{ selector: 'skra-menu', standalone: true, exportAs: 'skraMenu', template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, providers: [{ provide: SKRA_MENU, useExisting: SkraMenu }], host: {
+                        role: 'menu',
+                        // Native top layer + platform-owned toggle / light-dismiss / Escape / stacking (ADR 0044).
+                        popover: 'auto',
+                        // NOTE: `toggle` and `keydown` are wired IMPERATIVELY in the constructor, NOT as host listeners.
+                        // A consumer template binding `(toggle)` on <skra-menu> (the documented side-effect path) SHADOWS a
+                        // host-metadata `(toggle)` listener for the same event — which would silently break positioning +
+                        // aria-expanded. A raw `addEventListener` is independent of Angular's host/template listener slot, so
+                        // it always fires alongside the consumer's binding.
+                    }, styles: ["@charset \"UTF-8\";:host{position:fixed;margin:0;inset:auto;box-sizing:border-box;background:var(--skra-comp-menu-background);color:var(--skra-comp-menu-foreground);border-color:var(--skra-comp-menu-border-color);border-width:var(--skra-comp-menu-border-width);border-style:var(--skra-comp-menu-border-style);border-radius:var(--skra-comp-menu-radius);padding-block:var(--skra-comp-menu-padding-block);padding-inline:var(--skra-comp-menu-padding-inline);box-shadow:var(--skra-comp-menu-shadow);inline-size:max-content;max-inline-size:var(--skra-comp-menu-max-inline-size);flex-direction:column;opacity:0;transition:opacity var(--skra-comp-menu-motion-duration) var(--skra-comp-menu-motion-easing),display var(--skra-comp-menu-motion-duration) allow-discrete,overlay var(--skra-comp-menu-motion-duration) allow-discrete}:host(:popover-open){display:flex;opacity:1}@starting-style{:host(:popover-open){opacity:0}}@media(prefers-reduced-motion:reduce){:host{transition-duration:0ms}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], menuItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SkraMenuItem), { ...{
+                            descendants: true,
+                        }, isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SkraMenu, SkraMenuItem };
+//# sourceMappingURL=skra-ui-menu.mjs.map

package/fesm2022/skra-ui-menu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"skra-ui-menu.mjs","sources":["../../../../libs/ui/menu/src/lib/menu/menu-keyboard.ts","../../../../libs/ui/menu/src/lib/menu/menu-types.ts","../../../../libs/ui/menu/src/lib/menu/menu-item.ts","../../../../libs/ui/menu/src/lib/menu/menu.ts","../../../../libs/ui/menu/src/skra-ui-menu.ts"],"sourcesContent":["import { FocusKeyManager } from '@angular/cdk/a11y';\n\nimport type { SkraMenuKeyboardItem } from './menu-types';\n\n/**\n * SkraMenuKeyboard — the WAI-ARIA APG Menu keyboard model, confined to ONE file.\n *\n * This is the **only** module in Forge that imports `@angular/cdk`. It wraps CDK `FocusKeyManager`\n * (roving REAL focus — the APG-canonical menu model, NOT `aria-activedescendant`) so the engine is an\n * implementation detail: swapping it (e.g. to a hand-rolled controller) is a one-file change with zero\n * impact on `SkraMenu` / `SkraMenuItem` — exactly as `SkraPositioner` wraps `@floating-ui/dom`\n * (ADR 0044 §3 rule 5; recorded in §7, 2026-06-07).\n *\n * Owns: Down/Up roving (wrap), Home/End, type-ahead, and Tab→dismiss. Enter/Space (native button\n * activation) and Escape + light-dismiss (`popover=\"auto\"`) stay platform-owned — the controller never\n * touches them.\n */\nexport class SkraMenuKeyboard {\n  private manager?: FocusKeyManager<SkraMenuKeyboardItem>;\n  private items: SkraMenuKeyboardItem[] = [];\n  private tabOutHandler?: () => void;\n\n  /** Register the APG \"Tab dismisses the menu\" callback (fired by `FocusKeyManager.tabOut`). */\n  onTabOut(handler: () => void): void {\n    this.tabOutHandler = handler;\n  }\n\n  /**\n   * (Re)build the manager from the current projected item set. Called from an `effect` on the menu's\n   * signal `contentChildren` — a passed array is a static snapshot (it does not auto-track like a live\n   * `QueryList`), so the manager is rebuilt whenever the item set changes (the documented signal↔CDK seam).\n   */\n  setItems(items: readonly SkraMenuKeyboardItem[]): void {\n    this.items = [...items];\n    this.manager?.destroy();\n    this.manager = new FocusKeyManager<SkraMenuKeyboardItem>(this.items)\n      .withWrap()\n      .withTypeAhead()\n      .withHomeAndEnd()\n      // Disabled items stay in the roving order (APG focusable-but-inert — discoverable); activation is\n      // blocked on the item itself. `() => false` also stops `FocusKeyManager` from reading `item.disabled`\n      // (which on our signal-input component would be a truthy function).\n      .skipPredicate(() => false);\n    this.manager.tabOut.subscribe(() => this.tabOutHandler?.());\n  }\n\n  /** Delegate Up/Down/Home/End/type-ahead. Enter/Space/Escape are intentionally left to the platform. */\n  onKeydown(event: KeyboardEvent): void {\n    this.manager?.onKeydown(event);\n  }\n\n  /** Move roving focus to the first ENABLED item (APG: focus enters the menu on open). */\n  focusFirst(): void {\n    if (!this.manager || this.items.length === 0) return;\n    const firstEnabled = this.items.findIndex((item) => !item.isDisabled());\n    this.manager.setActiveItem(firstEnabled >= 0 ? firstEnabled : 0);\n  }\n\n  destroy(): void {\n    this.manager?.destroy();\n    this.manager = undefined;\n  }\n}\n","import { InjectionToken } from '@angular/core';\n\n/**\n * The item shape the menu keyboard controller drives. Structurally a CDK `FocusableOption`\n * (`focus()`), plus the menu's own `getLabel()` (type-ahead) and `isDisabled()` (focusable-but-inert\n * roving). Declared HERE — cdk-free — so the only `@angular/cdk` importer stays `menu-keyboard.ts`.\n */\nexport interface SkraMenuKeyboardItem {\n  focus(): void;\n  getLabel(): string;\n  isDisabled(): boolean;\n}\n\n/** What a `skraMenuItem` needs from its `skra-menu` — narrow contract that breaks the menu↔item cycle. */\nexport interface SkraMenuPanel {\n  /** Dismiss the menu after an item activates (native `hidePopover()` → focus returns to the trigger). */\n  requestClose(): void;\n}\n\n/**\n * DI token a `skra-menu` provides (`useExisting`) and a `button[skraMenuItem]` injects. A token\n * (not the `SkraMenu` class) so the item file never imports the menu file — no runtime import cycle.\n */\nexport const SKRA_MENU = new InjectionToken<SkraMenuPanel>('SKRA_MENU');\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  ViewEncapsulation,\n  inject,\n} from '@angular/core';\n\nimport { SKRA_MENU, type SkraMenuKeyboardItem } from './menu-types';\n\ndeclare const ngDevMode: boolean | undefined;\n\n/**\n * SkraMenuItem — a single command in a `skra-menu`, a Component on the native command host\n * `button[skraMenuItem]` (ADR 012/040: a `<button>` is the right semantic — Enter/Space→click +\n * focusability for free; its implicit role is overridden to `role=\"menuitem\"` per WAI-ARIA APG).\n *\n * Roving focus: `tabindex=\"-1\"` (the keyboard controller moves real focus). Implements\n * `SkraMenuKeyboardItem` (`focus`/`getLabel`/`isDisabled`) so `SkraMenuKeyboard` (CDK `FocusKeyManager`)\n * can drive it. On activation it asks the menu to close (native `hidePopover()` → focus returns to the\n * trigger).\n *\n * **Disabled is native-attr-first (boundary #9, ADR 039 precedent): the consumer sets\n * `aria-disabled=\"true\"` directly — Forge OBSERVES it, exposing NO `disabled` input.** This (a) keeps a\n * disabled item **focusable/discoverable** in the roving order (APG) — native `disabled` would remove it\n * from focus, and (b) avoids a Forge input shadowing the native `disabled` attribute. Styling keys off\n * `:host([aria-disabled=\"true\"])`; activation is blocked here.\n *\n * Full contract: adr/specs/component-menu-spec.md.\n */\n@Component({\n  selector: 'button[skraMenuItem]',\n  standalone: true,\n  exportAs: 'skraMenuItem',\n  template: '<ng-content></ng-content>',\n  styleUrl: './menu-item.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.Emulated,\n  host: {\n    role: 'menuitem',\n    type: 'button', // never an implicit submit if the menu sits inside a <form>\n    tabindex: '-1', // roving — focus is moved programmatically by SkraMenuKeyboard\n    '(click)': 'onActivate($event)',\n  },\n})\nexport class SkraMenuItem implements SkraMenuKeyboardItem {\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly menu = inject(SKRA_MENU, { optional: true });\n\n  constructor() {\n    if (typeof ngDevMode === 'undefined' || ngDevMode) {\n      if (!this.menu) {\n        console.warn(\n          '[skraMenuItem] has no <skra-menu> ancestor — it is not registered with any keyboard ' +\n            'controller and cannot close a menu on activation. Project it inside a <skra-menu>.',\n        );\n      }\n    }\n  }\n\n  // ── SkraMenuKeyboardItem (driven by SkraMenuKeyboard / CDK FocusKeyManager) ──\n  focus(): void {\n    this.host.nativeElement.focus();\n  }\n  getLabel(): string {\n    return (this.host.nativeElement.textContent ?? '').trim();\n  }\n  /** Soft-disabled = the consumer's `aria-disabled=\"true\"` (native-attr-first); read live (no input). */\n  isDisabled(): boolean {\n    return this.host.nativeElement.getAttribute('aria-disabled') === 'true';\n  }\n\n  protected onActivate(event: MouseEvent): void {\n    if (this.isDisabled()) {\n      // Soft-disabled: block the native default AND the consumer's own (click) on this same host\n      // (the host listener runs first — Material's MatMenuItem precedent).\n      event.preventDefault();\n      event.stopImmediatePropagation();\n      return;\n    }\n    // Activating a command closes the menu (APG). The consumer's (click) handler runs independently.\n    this.menu?.requestClose();\n  }\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  ElementRef,\n  Renderer2,\n  ViewEncapsulation,\n  afterNextRender,\n  contentChildren,\n  effect,\n  inject,\n  input,\n} from '@angular/core';\n\nimport {\n  _attachPositioner,\n  type SkraPlacement,\n  type _PositionerHandle,\n} from '@skra/ui/core';\nimport { SkraMenuKeyboard } from './menu-keyboard';\nimport { SkraMenuItem } from './menu-item';\nimport { SKRA_MENU, type SkraMenuPanel } from './menu-types';\n\ndeclare const ngDevMode: boolean | undefined;\n\n/**\n * SkraMenu — a WAI-ARIA APG **Menu Button** menu: a homogeneous set of commands anchored to a\n * trigger, navigated as one composite widget with arrow keys, where activating a command closes it.\n * Rendered in the browser TOP LAYER via the native Popover API (`popover=\"auto\"`), per ADR 0044.\n *\n * SHAPE (scope 2026-06-07): a Component on the PANEL with projected `button[skraMenuItem]` children\n * (the Popover model, ADR 040) — NOT a directive on the trigger, NOT a data-driven `[items]` array.\n * The trigger is the consumer's own button linked by the native `popovertarget` attribute; toggle,\n * light-dismiss and Escape are platform-owned. The consumer MUST give `<skra-menu>` an `id`.\n *\n *   <button skraButton popovertarget=\"actions\" aria-haspopup=\"menu\">Actions</button>\n *   <skra-menu id=\"actions\">\n *     <button skraMenuItem (click)=\"edit()\">Edit</button>\n *     <button skraMenuItem disabled (click)=\"archive()\">Archive</button>\n *     <button skraMenuItem (click)=\"remove()\">Delete</button>\n *   </skra-menu>\n *\n * Forge adds, on top of the Popover substrate: the `role=\"menu\"` keyboard model via `SkraMenuKeyboard`\n * (CDK `FocusKeyManager` — Down/Up roving + wrap, Home/End, type-ahead, Tab-dismiss), **focus moving\n * INTO the menu on open** (a composite widget — unlike non-modal Popover; the per-component ADR 0044\n * §3 rule-8 decision), and the trigger's disclosure ARIA (`aria-haspopup=\"menu\"` / `aria-controls` /\n * `aria-expanded`). Side effects on open/close: bind the native `(toggle)` — there is no Forge output\n * (native-first; contrast Dialog, whose `<dialog>` has no open event). Context menus (right-click) are\n * a recipe with a visible button, never a trigger mode (SRP + WCAG 2.1.1).\n *\n * Full contract: adr/specs/component-menu-spec.md.\n */\n@Component({\n  selector: 'skra-menu',\n  standalone: true,\n  exportAs: 'skraMenu',\n  template: '<ng-content></ng-content>',\n  styleUrl: './menu.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.Emulated,\n  providers: [{ provide: SKRA_MENU, useExisting: SkraMenu }],\n  host: {\n    role: 'menu',\n    // Native top layer + platform-owned toggle / light-dismiss / Escape / stacking (ADR 0044).\n    popover: 'auto',\n    // NOTE: `toggle` and `keydown` are wired IMPERATIVELY in the constructor, NOT as host listeners.\n    // A consumer template binding `(toggle)` on <skra-menu> (the documented side-effect path) SHADOWS a\n    // host-metadata `(toggle)` listener for the same event — which would silently break positioning +\n    // aria-expanded. A raw `addEventListener` is independent of Angular's host/template listener slot, so\n    // it always fires alongside the consumer's binding.\n  },\n})\nexport class SkraMenu implements SkraMenuPanel {\n  /** Placement intent; `flip`/`shift` adjust at runtime. */\n  readonly placement = input<SkraPlacement>('bottom');\n\n  private readonly menuItems = contentChildren(SkraMenuItem, {\n    descendants: true,\n  });\n\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly renderer = inject(Renderer2);\n  private readonly keyboard = new SkraMenuKeyboard();\n\n  /** The consumer's `[popovertarget]` button, resolved once (lazily-idempotent via `resolved`). */\n  private trigger: HTMLElement | null = null;\n  private resolved = false;\n  private positioner?: _PositionerHandle;\n\n  constructor() {\n    // Feed the controller whenever the projected item set changes (signal → array snapshot rebuild).\n    effect(() => this.keyboard.setItems(this.menuItems()));\n    // APG: Tab/Shift+Tab dismisses the menu; native Tab then proceeds from the trigger.\n    this.keyboard.onTabOut(() => this.host.nativeElement.hidePopover?.());\n\n    // All imperative DOM wiring lives in afterNextRender — a browser-only hook, so the native listeners\n    // and the trigger resolution never run on the server (SSR-safe by construction; O-18). The listeners\n    // attach right after first paint, long before any user interaction can fire them.\n    afterNextRender(() => {\n      const el = this.host.nativeElement;\n      // Gate disabled items at the CAPTURE phase: a component host listener registers AFTER the parent\n      // template's `(click)` on the same button, so a bubble-phase guard cannot stop the consumer's own\n      // handler. A capture listener on the menu host fires before the target's listeners — preventing both\n      // the consumer's `(click)` and the item's `onActivate` for an `aria-disabled` item.\n      el.addEventListener('click', this.onCaptureClick, true);\n      // Imperative (NOT host-metadata) so a consumer `(toggle)` binding does not shadow them — see host {}.\n      el.addEventListener('toggle', this.onToggleNative);\n      el.addEventListener('keydown', this.onKeydownNative);\n\n      // Resolve + wire the trigger after the view exists (it may be a later sibling), so the disclosure\n      // relationship (aria-haspopup + aria-controls + aria-expanded=\"false\") is present before first open.\n      this.ensureTrigger();\n      if (typeof ngDevMode === 'undefined' || ngDevMode) this.warnIfEmpty();\n    });\n    inject(DestroyRef).onDestroy(() => this.teardown());\n  }\n\n  /** SKRA_MENU contract — close on item activation (native focus-return to the trigger). */\n  requestClose(): void {\n    this.host.nativeElement.hidePopover?.();\n  }\n\n  /** Capture-phase guard: block clicks on an `aria-disabled` item before they reach its listeners. */\n  private readonly onCaptureClick = (event: Event): void => {\n    const item = (event.target as HTMLElement | null)?.closest?.(\n      '[skraMenuItem]',\n    );\n    if (item?.getAttribute('aria-disabled') === 'true') {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  };\n\n  // ── Toggle / keydown (imperative native listeners — see host {} note) ─────────\n  private readonly onToggleNative = (event: Event): void => {\n    if ((event as ToggleEvent).newState === 'open') this.onOpen();\n    else this.onClose();\n  };\n\n  private readonly onKeydownNative = (event: Event): void => {\n    this.keyboard.onKeydown(event as KeyboardEvent);\n  };\n\n  private onOpen(): void {\n    const anchor = this.ensureTrigger(); // safety net if afterNextRender has not yet run\n    if (anchor) {\n      this.renderer.setAttribute(anchor, 'aria-expanded', 'true');\n      this.positioner?.destroy();\n      this.positioner = _attachPositioner(\n        anchor,\n        this.host.nativeElement,\n        () => ({\n          placement: this.placement(),\n          offset: this.cssLenPx('--skra-comp-menu-offset'),\n          viewportPadding: this.cssLenPx('--skra-comp-menu-viewport-padding'),\n        }),\n      );\n    }\n    // Focus enters the menu (APG Menu Button) regardless of how it opened — unlike non-modal Popover.\n    this.keyboard.focusFirst();\n  }\n\n  private onClose(): void {\n    if (this.trigger) {\n      this.renderer.setAttribute(this.trigger, 'aria-expanded', 'false');\n    }\n    this.positioner?.destroy();\n    this.positioner = undefined;\n  }\n\n  /**\n   * Resolve the `[popovertarget]` trigger and establish the menu disclosure ARIA on it (sanctioned a11y\n   * wiring, ADR 013-style — not style mutation). Idempotent. Returns the trigger (or null for an orphan\n   * menu, dev-warned once).\n   */\n  private ensureTrigger(): HTMLElement | null {\n    if (this.resolved) return this.trigger;\n    this.resolved = true;\n\n    const id = this.host.nativeElement.id;\n    if (!id) {\n      if (typeof ngDevMode === 'undefined' || ngDevMode) {\n        console.warn(\n          '[skra-menu] has no `id` — it cannot be targeted by a `popovertarget` trigger and the ' +\n            'disclosure ARIA (aria-haspopup/aria-controls/aria-expanded) cannot be wired. Give the ' +\n            'menu an id and point a button at it: ' +\n            '<button popovertarget=\"my-id\" aria-haspopup=\"menu\">…</button> <skra-menu id=\"my-id\">…',\n        );\n      }\n      return null;\n    }\n\n    // Match by attribute value (no escaping; robust to special chars; `CSS.escape` is not universal).\n    this.trigger =\n      Array.from(\n        document.querySelectorAll<HTMLElement>('[popovertarget]'),\n      ).find((el) => el.getAttribute('popovertarget') === id) ?? null;\n    if (!this.trigger) {\n      if (typeof ngDevMode === 'undefined' || ngDevMode) {\n        console.warn(\n          `[skra-menu] no trigger found with [popovertarget=\"${id}\"] — the menu is unreachable and ` +\n            'has no element to carry aria-haspopup/aria-controls/aria-expanded. Add a focusable trigger ' +\n            'button with the matching popovertarget.',\n        );\n      }\n      return null;\n    }\n\n    // Establish the Menu Button relationship before the first open (APG; aria-haspopup distinguishes a\n    // menu from Popover's generic disclosure).\n    this.renderer.setAttribute(this.trigger, 'aria-haspopup', 'menu');\n    this.renderer.setAttribute(this.trigger, 'aria-controls', id);\n    this.renderer.setAttribute(this.trigger, 'aria-expanded', 'false');\n    return this.trigger;\n  }\n\n  /** Read a length comp token (px/rem) off the host computed style for the positioner. */\n  private cssLenPx(prop: string): number {\n    const raw = getComputedStyle(this.host.nativeElement)\n      .getPropertyValue(prop)\n      .trim();\n    if (raw.endsWith('px')) return parseFloat(raw);\n    if (raw.endsWith('rem')) {\n      const rootFontSize =\n        parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;\n      return parseFloat(raw) * rootFontSize;\n    }\n    return parseFloat(raw) || 0;\n  }\n\n  /** Dev-only nudge: a role=\"menu\" with no menuitems is invalid — a link-list/content panel is a Popover. */\n  private warnIfEmpty(): void {\n    if (this.menuItems().length === 0) {\n      console.warn(\n        '[skra-menu] has no `button[skraMenuItem]` children — a `role=\"menu\"` with no menu items is ' +\n          'invalid. If this is a panel of arbitrary content or a list of navigation links, use ' +\n          '<skra-popover> (disclosure) instead — see the Menu-vs-Popover boundary in the spec.',\n      );\n    }\n  }\n\n  private teardown(): void {\n    const el = this.host.nativeElement;\n    el.removeEventListener('click', this.onCaptureClick, true);\n    el.removeEventListener('toggle', this.onToggleNative);\n    el.removeEventListener('keydown', this.onKeydownNative);\n    this.keyboard.destroy();\n    this.positioner?.destroy();\n    if (this.trigger) {\n      this.renderer.removeAttribute(this.trigger, 'aria-haspopup');\n      this.renderer.removeAttribute(this.trigger, 'aria-expanded');\n      this.renderer.removeAttribute(this.trigger, 'aria-controls');\n    }\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/skra-ui-multi-select.mjs

@@ -0,0 +1,179 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, output, computed, afterRenderEffect, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { _SkraSelectBase, SKRA_LISTBOX_PANEL } from '@skra/ui/core';
+export { SkraOption, SkraOptionDetail, SkraOptionLeading, SkraSelectTrigger } from '@skra/ui/core';
+
+/**
+ * SkraMultiSelect — a custom MULTI-select listbox: the WAI-ARIA APG multi-selectable listbox combobox.
+ * The multi-cardinality sibling of `skra-select` over the shared `_SkraSelectBase` (**ADR 0046** —
+ * cardinality split: a separate component with an HONEST `readonly T[]` value contract, NOT a `multiple`
+ * flag). The trigger (`role="combobox"`) opens a top-layer listbox panel (`popover="auto"`, ADR 0044,
+ * `aria-multiselectable="true"`) of the SAME projected `skra-option` children — reused verbatim; the
+ * option swaps its indicator to a checkbox via the `SkraListboxPanel.multiple` hint.
+ *
+ * - **Value (ADR 037):** `value = input<readonly T[]>([])` + `valueChange = output<readonly T[]>()` —
+ *   consumer-owned, no `@angular/forms`. Selection is membership (`compareWith` per element).
+ * - **Toggle (ADR 0046):** picking an option toggles its membership and KEEPS THE PANEL OPEN (the one
+ *   behavioural divergence from single-select, which closes).
+ * - **Trigger summary (ADR 0045 / 033):** comma-joined `getLabel()` of selected options — the VALUE
+ *   display, never the accessible name. Count-style / chips → the opt-in `[skraSelectTrigger]` recipe.
+ *
+ * Full contract: adr/specs/component-multi-select-spec.md.
+ */
+class SkraMultiSelect extends _SkraSelectBase {
+    /** Consumer-owned ARRAY value channel (ADR 037) — default `[]` (never undefined). */
+    value = input([], ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Fires ONLY on user toggle — emits a NEW array; never on a programmatic `value()` change (ADR 037). */
+    valueChange = output();
+    /** Cardinality hint (ADR 0046) — multi-select (drives the option checkbox indicator + aria-multiselectable). */
+    multiple = true;
+    /** The options whose value is a member of `value()` — feeds the trigger summary + seed. */
+    selectedOptions = computed(() => this.options().filter((o) => this.isSelected(o.value())), ...(ngDevMode ? [{ debugName: "selectedOptions" }] : /* istanbul ignore next */ []));
+    /** Comma-joined identity labels of the selected options (value display, ADR 0045 — language-neutral). */
+    summary = computed(() => this.selectedOptions()
+        .map((o) => o.getLabel())
+        .join(', '), ...(ngDevMode ? [{ debugName: "summary" }] : /* istanbul ignore next */ []));
+    triggerContext = computed(() => ({
+        $implicit: this.value(),
+        options: this.selectedOptions(),
+    }), ...(ngDevMode ? [{ debugName: "triggerContext" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        if (typeof ngDevMode === 'undefined' || ngDevMode) {
+            // Dev-only consumer warning. Uses afterRenderEffect (NOT effect) so the projected
+            // options' required `value` inputs are read only AFTER each render applies their
+            // bindings — an eager read during the initial CD (SSR / first render) OR a runtime
+            // re-projection would throw NG0950. afterRender hooks never run on the server, so
+            // this stays SSR-safe. Covers F-13 (initial render) + F-16 (runtime re-projection).
+            afterRenderEffect(() => {
+                const opts = this.options();
+                const unmatched = this.value().filter((v) => !opts.some((o) => this.compareWith()(o.value(), v)));
+                if (unmatched.length) {
+                    console.warn('[skra-multi-select] value contains entries with no matching <skra-option> — they are ' +
+                        'dropped from the trigger summary (likely a compareWith mismatch for object values).');
+                }
+            });
+        }
+    }
+    // ── SkraListboxPanel seam ──
+    isSelected(value) {
+        return this.value().some((x) => this.compareWith()(x, value));
+    }
+    selectValue(value) {
+        const present = this.isSelected(value);
+        const next = present
+            ? this.value().filter((x) => !this.compareWith()(x, value))
+            : [...this.value(), value];
+        this.valueChange.emit(next);
+        // NO close() — multi-select keeps the panel open for further toggling (ADR 0046).
+    }
+    activeSeedItem() {
+        return this.selectedOptions()[0] ?? null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SkraMultiSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: SkraMultiSelect, isStandalone: true, selector: "skra-multi-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, providers: [{ provide: SKRA_LISTBOX_PANEL, useExisting: SkraMultiSelect }], exportAs: ["skraMultiSelect"], usesInheritance: true, ngImport: i0, template: `
+    <button
+      #trigger
+      class="skra-select-trigger"
+      type="button"
+      role="combobox"
+      aria-haspopup="listbox"
+      [attr.id]="triggerId()"
+      [attr.popovertarget]="panelId"
+      [attr.aria-controls]="panelId"
+      [attr.aria-expanded]="isOpen()"
+      [attr.aria-activedescendant]="activeOptionId()"
+      [attr.aria-describedby]="describedBy()"
+      [attr.aria-invalid]="hasError() ? 'true' : null"
+      [attr.aria-required]="isRequired() ? 'true' : null"
+      [attr.aria-readonly]="isReadonly() ? 'true' : null"
+      [disabled]="isDisabled()"
+      (click)="onTriggerClick($event)"
+      (keydown)="onTriggerKeydown($event)"
+    >
+      <span class="skra-select-trigger-value">
+        @if (triggerTemplate(); as tpl) {
+          <ng-container
+            [ngTemplateOutlet]="tpl"
+            [ngTemplateOutletContext]="triggerContext()"
+          ></ng-container>
+        } @else if (selectedOptions().length) {
+          {{ summary() }}
+        } @else {
+          <span class="skra-select-placeholder">{{ placeholder() }}</span>
+        }
+      </span>
+      <span class="skra-select-arrow" aria-hidden="true"></span>
+    </button>
+
+    <div
+      #panel
+      class="skra-select-listbox"
+      [id]="panelId"
+      role="listbox"
+      aria-multiselectable="true"
+      popover="auto"
+      (toggle)="onPanelToggle($event)"
+    >
+      <ng-content></ng-content>
+    </div>
+  `, isInline: true, styles: ["@charset \"UTF-8\";:host{display:block;box-sizing:border-box;margin:0}.skra-select-trigger{display:flex;align-items:center;gap:var(--skra-comp-select-gap);inline-size:100%;min-block-size:var(--skra-comp-select-min-block-size);box-sizing:border-box;margin:0;padding-block:var(--skra-comp-select-padding-block);padding-inline:var(--skra-comp-select-padding-inline);text-align:start;cursor:pointer;background:var(--skra-comp-select-background);color:var(--skra-comp-select-foreground);border-color:var(--skra-comp-select-border-color);border-width:var(--skra-comp-select-border-width);border-style:var(--skra-comp-select-border-style);border-radius:var(--skra-comp-select-radius);box-shadow:var(--skra-comp-select-shadow);font-family:var(--skra-sys-typography-role-body-medium-font-family);font-size:var(--skra-sys-typography-role-body-medium-font-size);font-weight:var(--skra-sys-typography-role-body-medium-font-weight);line-height:var(--skra-sys-typography-role-body-medium-line-height);letter-spacing:var(--skra-sys-typography-role-body-medium-letter-spacing);transition:background-color var(--skra-comp-select-motion-duration) var(--skra-comp-select-motion-easing),border-color var(--skra-comp-select-motion-duration) var(--skra-comp-select-motion-easing)}.skra-select-trigger:hover:not(:disabled):not([aria-readonly=true]){background:var(--skra-comp-select-background-hover)}.skra-select-trigger:focus-visible{outline:var(--skra-comp-select-focus-ring-width) solid var(--skra-comp-select-focus-ring-color);outline-offset:.125rem}.skra-select-trigger:disabled{background:var(--skra-comp-select-background-disabled);color:var(--skra-comp-select-foreground-disabled);cursor:not-allowed}.skra-select-trigger[aria-readonly=true]{background:var(--skra-comp-select-background-readonly);cursor:default}.skra-select-trigger[aria-invalid=true]{border-color:var(--skra-comp-select-border-color-validation-invalid)}.skra-select-trigger-value{flex:1 1 auto;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--skra-comp-icon-size: var(--skra-comp-select-icon-size)}.skra-select-placeholder{color:var(--skra-comp-select-foreground-disabled)}.skra-select-arrow{flex:none;inline-size:var(--skra-comp-select-arrow-icon-size);block-size:var(--skra-comp-select-arrow-icon-size);background-color:var(--skra-comp-select-arrow-color);mask:url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M6%209l6%206%206-6'%20fill='none'%20stroke='%23000'%20stroke-width='2'/%3E%3C/svg%3E\") no-repeat center/contain;-webkit-mask:url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M6%209l6%206%206-6'%20fill='none'%20stroke='%23000'%20stroke-width='2'/%3E%3C/svg%3E\") no-repeat center/contain;transition:transform var(--skra-comp-select-motion-duration) var(--skra-comp-select-motion-easing)}.skra-select-trigger[aria-expanded=true] .skra-select-arrow{transform:rotate(180deg)}.skra-select-listbox{position:fixed;margin:0;inset:auto;box-sizing:border-box;padding-block:var(--skra-comp-select-panel-padding-block);padding-inline:var(--skra-comp-select-panel-padding-inline);background:var(--skra-comp-select-panel-background);color:var(--skra-comp-select-panel-foreground);border:var(--skra-comp-select-border-width) solid var(--skra-comp-select-panel-border-color);border-radius:var(--skra-comp-select-panel-radius);box-shadow:var(--skra-comp-select-panel-shadow);inline-size:max-content;max-block-size:var(--skra-comp-select-panel-max-block-size);overflow-y:auto;flex-direction:column;opacity:0;transition:opacity var(--skra-comp-select-motion-duration) var(--skra-comp-select-motion-easing),display var(--skra-comp-select-motion-duration) allow-discrete,overlay var(--skra-comp-select-motion-duration) allow-discrete}.skra-select-listbox:popover-open{display:flex;opacity:1}@starting-style{.skra-select-listbox:popover-open{opacity:0}}@media(prefers-reduced-motion:reduce){.skra-select-trigger,.skra-select-arrow,.skra-select-listbox{transition-duration:0ms}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SkraMultiSelect, decorators: [{
+            type: Component,
+            args: [{ selector: 'skra-multi-select', standalone: true, exportAs: 'skraMultiSelect', imports: [NgTemplateOutlet], template: `
+    <button
+      #trigger
+      class="skra-select-trigger"
+      type="button"
+      role="combobox"
+      aria-haspopup="listbox"
+      [attr.id]="triggerId()"
+      [attr.popovertarget]="panelId"
+      [attr.aria-controls]="panelId"
+      [attr.aria-expanded]="isOpen()"
+      [attr.aria-activedescendant]="activeOptionId()"
+      [attr.aria-describedby]="describedBy()"
+      [attr.aria-invalid]="hasError() ? 'true' : null"
+      [attr.aria-required]="isRequired() ? 'true' : null"
+      [attr.aria-readonly]="isReadonly() ? 'true' : null"
+      [disabled]="isDisabled()"
+      (click)="onTriggerClick($event)"
+      (keydown)="onTriggerKeydown($event)"
+    >
+      <span class="skra-select-trigger-value">
+        @if (triggerTemplate(); as tpl) {
+          <ng-container
+            [ngTemplateOutlet]="tpl"
+            [ngTemplateOutletContext]="triggerContext()"
+          ></ng-container>
+        } @else if (selectedOptions().length) {
+          {{ summary() }}
+        } @else {
+          <span class="skra-select-placeholder">{{ placeholder() }}</span>
+        }
+      </span>
+      <span class="skra-select-arrow" aria-hidden="true"></span>
+    </button>
+
+    <div
+      #panel
+      class="skra-select-listbox"
+      [id]="panelId"
+      role="listbox"
+      aria-multiselectable="true"
+      popover="auto"
+      (toggle)="onPanelToggle($event)"
+    >
+      <ng-content></ng-content>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, providers: [{ provide: SKRA_LISTBOX_PANEL, useExisting: SkraMultiSelect }], styles: ["@charset \"UTF-8\";:host{display:block;box-sizing:border-box;margin:0}.skra-select-trigger{display:flex;align-items:center;gap:var(--skra-comp-select-gap);inline-size:100%;min-block-size:var(--skra-comp-select-min-block-size);box-sizing:border-box;margin:0;padding-block:var(--skra-comp-select-padding-block);padding-inline:var(--skra-comp-select-padding-inline);text-align:start;cursor:pointer;background:var(--skra-comp-select-background);color:var(--skra-comp-select-foreground);border-color:var(--skra-comp-select-border-color);border-width:var(--skra-comp-select-border-width);border-style:var(--skra-comp-select-border-style);border-radius:var(--skra-comp-select-radius);box-shadow:var(--skra-comp-select-shadow);font-family:var(--skra-sys-typography-role-body-medium-font-family);font-size:var(--skra-sys-typography-role-body-medium-font-size);font-weight:var(--skra-sys-typography-role-body-medium-font-weight);line-height:var(--skra-sys-typography-role-body-medium-line-height);letter-spacing:var(--skra-sys-typography-role-body-medium-letter-spacing);transition:background-color var(--skra-comp-select-motion-duration) var(--skra-comp-select-motion-easing),border-color var(--skra-comp-select-motion-duration) var(--skra-comp-select-motion-easing)}.skra-select-trigger:hover:not(:disabled):not([aria-readonly=true]){background:var(--skra-comp-select-background-hover)}.skra-select-trigger:focus-visible{outline:var(--skra-comp-select-focus-ring-width) solid var(--skra-comp-select-focus-ring-color);outline-offset:.125rem}.skra-select-trigger:disabled{background:var(--skra-comp-select-background-disabled);color:var(--skra-comp-select-foreground-disabled);cursor:not-allowed}.skra-select-trigger[aria-readonly=true]{background:var(--skra-comp-select-background-readonly);cursor:default}.skra-select-trigger[aria-invalid=true]{border-color:var(--skra-comp-select-border-color-validation-invalid)}.skra-select-trigger-value{flex:1 1 auto;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--skra-comp-icon-size: var(--skra-comp-select-icon-size)}.skra-select-placeholder{color:var(--skra-comp-select-foreground-disabled)}.skra-select-arrow{flex:none;inline-size:var(--skra-comp-select-arrow-icon-size);block-size:var(--skra-comp-select-arrow-icon-size);background-color:var(--skra-comp-select-arrow-color);mask:url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M6%209l6%206%206-6'%20fill='none'%20stroke='%23000'%20stroke-width='2'/%3E%3C/svg%3E\") no-repeat center/contain;-webkit-mask:url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M6%209l6%206%206-6'%20fill='none'%20stroke='%23000'%20stroke-width='2'/%3E%3C/svg%3E\") no-repeat center/contain;transition:transform var(--skra-comp-select-motion-duration) var(--skra-comp-select-motion-easing)}.skra-select-trigger[aria-expanded=true] .skra-select-arrow{transform:rotate(180deg)}.skra-select-listbox{position:fixed;margin:0;inset:auto;box-sizing:border-box;padding-block:var(--skra-comp-select-panel-padding-block);padding-inline:var(--skra-comp-select-panel-padding-inline);background:var(--skra-comp-select-panel-background);color:var(--skra-comp-select-panel-foreground);border:var(--skra-comp-select-border-width) solid var(--skra-comp-select-panel-border-color);border-radius:var(--skra-comp-select-panel-radius);box-shadow:var(--skra-comp-select-panel-shadow);inline-size:max-content;max-block-size:var(--skra-comp-select-panel-max-block-size);overflow-y:auto;flex-direction:column;opacity:0;transition:opacity var(--skra-comp-select-motion-duration) var(--skra-comp-select-motion-easing),display var(--skra-comp-select-motion-duration) allow-discrete,overlay var(--skra-comp-select-motion-duration) allow-discrete}.skra-select-listbox:popover-open{display:flex;opacity:1}@starting-style{.skra-select-listbox:popover-open{opacity:0}}@media(prefers-reduced-motion:reduce){.skra-select-trigger,.skra-select-arrow,.skra-select-listbox{transition-duration:0ms}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SkraMultiSelect };
+//# sourceMappingURL=skra-ui-multi-select.mjs.map

package/fesm2022/skra-ui-multi-select.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"skra-ui-multi-select.mjs","sources":["../../../../libs/ui/multi-select/src/lib/multi-select/multi-select.ts","../../../../libs/ui/multi-select/src/skra-ui-multi-select.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  afterRenderEffect,\n  computed,\n  input,\n  output,\n} from '@angular/core';\n\nimport { _SkraSelectBase } from '@skra/ui/core';\nimport {\n  SKRA_LISTBOX_PANEL,\n  type SkraListboxKeyboardItem,\n} from '@skra/ui/core';\n\ndeclare const ngDevMode: boolean | undefined;\n\n/**\n * SkraMultiSelect — a custom MULTI-select listbox: the WAI-ARIA APG multi-selectable listbox combobox.\n * The multi-cardinality sibling of `skra-select` over the shared `_SkraSelectBase` (**ADR 0046** —\n * cardinality split: a separate component with an HONEST `readonly T[]` value contract, NOT a `multiple`\n * flag). The trigger (`role=\"combobox\"`) opens a top-layer listbox panel (`popover=\"auto\"`, ADR 0044,\n * `aria-multiselectable=\"true\"`) of the SAME projected `skra-option` children — reused verbatim; the\n * option swaps its indicator to a checkbox via the `SkraListboxPanel.multiple` hint.\n *\n * - **Value (ADR 037):** `value = input<readonly T[]>([])` + `valueChange = output<readonly T[]>()` —\n *   consumer-owned, no `@angular/forms`. Selection is membership (`compareWith` per element).\n * - **Toggle (ADR 0046):** picking an option toggles its membership and KEEPS THE PANEL OPEN (the one\n *   behavioural divergence from single-select, which closes).\n * - **Trigger summary (ADR 0045 / 033):** comma-joined `getLabel()` of selected options — the VALUE\n *   display, never the accessible name. Count-style / chips → the opt-in `[skraSelectTrigger]` recipe.\n *\n * Full contract: adr/specs/component-multi-select-spec.md.\n */\n@Component({\n  selector: 'skra-multi-select',\n  standalone: true,\n  exportAs: 'skraMultiSelect',\n  imports: [NgTemplateOutlet],\n  template: `\n    <button\n      #trigger\n      class=\"skra-select-trigger\"\n      type=\"button\"\n      role=\"combobox\"\n      aria-haspopup=\"listbox\"\n      [attr.id]=\"triggerId()\"\n      [attr.popovertarget]=\"panelId\"\n      [attr.aria-controls]=\"panelId\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-activedescendant]=\"activeOptionId()\"\n      [attr.aria-describedby]=\"describedBy()\"\n      [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n      [attr.aria-required]=\"isRequired() ? 'true' : null\"\n      [attr.aria-readonly]=\"isReadonly() ? 'true' : null\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"onTriggerClick($event)\"\n      (keydown)=\"onTriggerKeydown($event)\"\n    >\n      <span class=\"skra-select-trigger-value\">\n        @if (triggerTemplate(); as tpl) {\n          <ng-container\n            [ngTemplateOutlet]=\"tpl\"\n            [ngTemplateOutletContext]=\"triggerContext()\"\n          ></ng-container>\n        } @else if (selectedOptions().length) {\n          {{ summary() }}\n        } @else {\n          <span class=\"skra-select-placeholder\">{{ placeholder() }}</span>\n        }\n      </span>\n      <span class=\"skra-select-arrow\" aria-hidden=\"true\"></span>\n    </button>\n\n    <div\n      #panel\n      class=\"skra-select-listbox\"\n      [id]=\"panelId\"\n      role=\"listbox\"\n      aria-multiselectable=\"true\"\n      popover=\"auto\"\n      (toggle)=\"onPanelToggle($event)\"\n    >\n      <ng-content></ng-content>\n    </div>\n  `,\n  styleUrl: './multi-select.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.Emulated,\n  providers: [{ provide: SKRA_LISTBOX_PANEL, useExisting: SkraMultiSelect }],\n})\nexport class SkraMultiSelect<T = unknown> extends _SkraSelectBase<T> {\n  /** Consumer-owned ARRAY value channel (ADR 037) — default `[]` (never undefined). */\n  readonly value = input<readonly T[]>([]);\n  /** Fires ONLY on user toggle — emits a NEW array; never on a programmatic `value()` change (ADR 037). */\n  readonly valueChange = output<readonly T[]>();\n  /** Cardinality hint (ADR 0046) — multi-select (drives the option checkbox indicator + aria-multiselectable). */\n  readonly multiple = true;\n\n  /** The options whose value is a member of `value()` — feeds the trigger summary + seed. */\n  protected readonly selectedOptions = computed(() =>\n    this.options().filter((o) => this.isSelected(o.value())),\n  );\n\n  /** Comma-joined identity labels of the selected options (value display, ADR 0045 — language-neutral). */\n  protected readonly summary = computed(() =>\n    this.selectedOptions()\n      .map((o) => o.getLabel())\n      .join(', '),\n  );\n\n  protected readonly triggerContext = computed(() => ({\n    $implicit: this.value(),\n    options: this.selectedOptions(),\n  }));\n\n  constructor() {\n    super();\n    if (typeof ngDevMode === 'undefined' || ngDevMode) {\n      // Dev-only consumer warning. Uses afterRenderEffect (NOT effect) so the projected\n      // options' required `value` inputs are read only AFTER each render applies their\n      // bindings — an eager read during the initial CD (SSR / first render) OR a runtime\n      // re-projection would throw NG0950. afterRender hooks never run on the server, so\n      // this stays SSR-safe. Covers F-13 (initial render) + F-16 (runtime re-projection).\n      afterRenderEffect(() => {\n        const opts = this.options();\n        const unmatched = this.value().filter(\n          (v) => !opts.some((o) => this.compareWith()(o.value() as T, v)),\n        );\n        if (unmatched.length) {\n          console.warn(\n            '[skra-multi-select] value contains entries with no matching <skra-option> — they are ' +\n              'dropped from the trigger summary (likely a compareWith mismatch for object values).',\n          );\n        }\n      });\n    }\n  }\n\n  // ── SkraListboxPanel seam ──\n  isSelected(value: unknown): boolean {\n    return this.value().some((x) => this.compareWith()(x, value as T));\n  }\n\n  selectValue(value: unknown): void {\n    const present = this.isSelected(value);\n    const next = present\n      ? this.value().filter((x) => !this.compareWith()(x, value as T))\n      : [...this.value(), value as T];\n    this.valueChange.emit(next);\n    // NO close() — multi-select keeps the panel open for further toggling (ADR 0046).\n  }\n\n  protected activeSeedItem(): SkraListboxKeyboardItem | null {\n    return this.selectedOptions()[0] ?? null;\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}