@skra/ui 0.2.0

package/fesm2022/skra-ui-core.mjs

@@ -0,0 +1,529 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, Directive, input, inject, ElementRef, contentChild, computed, signal, ViewEncapsulation, ChangeDetectionStrategy, Component, booleanAttribute, contentChildren, viewChild, effect, DestroyRef, TemplateRef } from '@angular/core';
+import { SkraFieldContext } from '@skra/ui/field';
+import { computePosition, offset, flip, shift, autoUpdate } from '@floating-ui/dom';
+import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
+
+/**
+ * DI token a listbox widget provides (`useExisting`) and a `skra-option` injects. A token (not a concrete
+ * class) so the option file never imports a widget file — no runtime import cycle. Provided by
+ * `skra-select`, `skra-multi-select`, and `skra-combobox`.
+ */
+const SKRA_LISTBOX_PANEL = new InjectionToken('SKRA_LISTBOX_PANEL');
+
+/**
+ * Slot marker: the leading icon/flag of a `skra-option` — part of the option IDENTITY (ADR 0045
+ * Rule 4), so it flows into `getLabel()` (emoji/glyph leading appears in the default trigger for free).
+ */
+class SkraOptionLeading {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SkraOptionLeading, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.7", type: SkraOptionLeading, isStandalone: true, selector: "[skra-option-leading]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SkraOptionLeading, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[skra-option-leading]',
+                    standalone: true,
+                }]
+        }] });
+/**
+ * Slot marker: secondary DETAIL text of a `skra-option` (e.g. a dial code, a description) — list-only
+ * (ADR 0045 Rule 4), EXCLUDED from `getLabel()` and the trigger summary.
+ */
+class SkraOptionDetail {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SkraOptionDetail, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.7", type: SkraOptionDetail, isStandalone: true, selector: "[skra-option-detail]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SkraOptionDetail, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[skra-option-detail]',
+                    standalone: true,
+                }]
+        }] });
+
+let nextOptionId = 0;
+/**
+ * SkraOption — one selectable row in a `skra-select` listbox, a Component on the custom-element host
+ * `skra-option` (ADR 040 content-bearing host; there is no native option element that holds rich content
+ * outside `<select>`). Carries `value` + rich projected content: a leading icon (`[skra-option-leading]`)
+ * and a primary label = the IDENTITY (→ `getLabel()` / the default trigger, ADR 0045), plus an optional
+ * secondary `[skra-option-detail]` that is list-only (excluded from the trigger). The selection
+ * indicator (trailing checkmark) is component-rendered, driven by `aria-selected` — NOT a slot; iteration 2
+ * swaps it for a per-row checkbox with no API change.
+ *
+ * Implements `SkraListboxKeyboardItem` so `_SkraListboxKeyboard` (CDK `ActiveDescendantKeyManager`) can
+ * highlight it (`setActiveStyles`/`setInactiveStyles` → `data-skra-active`) and type-ahead to it
+ * (`getLabel`). Disabled is native-attr-first (Menu precedent): the consumer sets `aria-disabled="true"`
+ * and Forge OBSERVES it — disabled options stay navigable (discoverable) but cannot be selected.
+ *
+ * Full contract: adr/specs/component-select-spec.md.
+ */
+class SkraOption {
+    /** The option's value (ADR 037 — consumer-owned; compared against the select's `value()`). */
+    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Stable id, the target of the trigger's `aria-activedescendant`. Internal — never consumer-facing. */
+    optionId = `skra-option-${nextOptionId++}`;
+    el = inject(ElementRef);
+    select = inject(SKRA_LISTBOX_PANEL, { optional: true });
+    leadingSlot = contentChild(SkraOptionLeading, ...(ngDevMode ? [{ debugName: "leadingSlot" }] : /* istanbul ignore next */ []));
+    detailSlot = contentChild(SkraOptionDetail, ...(ngDevMode ? [{ debugName: "detailSlot" }] : /* istanbul ignore next */ []));
+    hasLeading = computed(() => !!this.leadingSlot(), ...(ngDevMode ? [{ debugName: "hasLeading" }] : /* istanbul ignore next */ []));
+    hasDetail = computed(() => !!this.detailSlot(), ...(ngDevMode ? [{ debugName: "hasDetail" }] : /* istanbul ignore next */ []));
+    /** Keyboard active-descendant highlight (ADR 0044 §7 — Highlightable, NOT roving focus). */
+    active = signal(false, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    /**
+     * Cardinality hint from the parent panel (ADR 0046): `false` under `skra-select` → checkmark
+     * indicator; `true` under `skra-multi-select` → checkbox indicator. The only thing the shared
+     * `skra-option` reads to swap the component-rendered indicator. No public-API change.
+     */
+    multiple = computed(() => this.select?.multiple ?? false, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+    /** Selection is signal-derived (ADR 0045 / ADR 037): re-derives on parent `value()`/`compareWith()` or own `value()`. */
+    selected = computed(() => this.select?.isSelected(this.value()) ?? false, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    constructor() {
+        if (typeof ngDevMode === 'undefined' || ngDevMode) {
+            if (!this.select) {
+                console.warn('[skra-option] has no <skra-select> ancestor — it is not registered with the keyboard ' +
+                    'controller / selection model and cannot be picked. Project it inside a <skra-select>.');
+            }
+        }
+    }
+    // ── SkraListboxKeyboardItem (driven by _SkraListboxKeyboard / CDK ActiveDescendantKeyManager) ──
+    setActiveStyles() {
+        this.active.set(true);
+    }
+    setInactiveStyles() {
+        this.active.set(false);
+    }
+    /**
+     * ADR 0045 Rule 1: the option's IDENTITY text (leading + label), EXCLUDING `[skra-option-detail]` and
+     * the component-rendered indicator. Own-host `textContent` walk (the `skraMenuItem.getLabel()`
+     * precedent) — drives the default trigger text AND type-ahead. Reading own content, NOT
+     * `document.querySelector` (ADR 001-clean).
+     */
+    getLabel() {
+        let text = '';
+        const skip = (el) => el.classList.contains('skra-select-option-detail') ||
+            el.classList.contains('skra-select-option-indicator') ||
+            el.hasAttribute('skra-option-detail');
+        const walk = (node) => {
+            if (node.nodeType === Node.TEXT_NODE) {
+                text += node.textContent ?? '';
+                return;
+            }
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                const el = node;
+                if (skip(el))
+                    return;
+                el.childNodes.forEach(walk);
+            }
+        };
+        this.el.nativeElement.childNodes.forEach(walk);
+        return text.replace(/\s+/g, ' ').trim();
+    }
+    getValue() {
+        return this.value();
+    }
+    /** Soft-disabled = the consumer's `aria-disabled="true"` (native-attr-first, Menu precedent); read live. */
+    get disabled() {
+        return this.el.nativeElement.getAttribute('aria-disabled') === 'true';
+    }
+    onActivate() {
+        if (this.disabled)
+            return; // soft-disabled: not selectable (APG)
+        this.select?.selectValue(this.value());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SkraOption, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: SkraOption, isStandalone: true, selector: "skra-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "option" }, listeners: { "click": "onActivate()" }, properties: { "id": "optionId", "attr.aria-selected": "selected() ? \"true\" : \"false\"", "attr.data-skra-active": "active() ? \"\" : null" } }, queries: [{ propertyName: "leadingSlot", first: true, predicate: SkraOptionLeading, descendants: true, isSignal: true }, { propertyName: "detailSlot", first: true, predicate: SkraOptionDetail, descendants: true, isSignal: true }], exportAs: ["skraOption"], ngImport: i0, template: `
+    @if (hasLeading()) {
+      <span class="skra-select-option-leading"
+        ><ng-content select="[skra-option-leading]"></ng-content
+      ></span>
+    }
+    <span class="skra-select-option-label"><ng-content></ng-content></span>
+    @if (hasDetail()) {
+      <span class="skra-select-option-detail"
+        ><ng-content select="[skra-option-detail]"></ng-content
+      ></span>
+    }
+    <span
+      class="skra-select-option-indicator"
+      [class.skra-select-option-indicator--checkbox]="multiple()"
+      aria-hidden="true"
+    ></span>
+  `, isInline: true, styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:var(--skra-comp-select-option-gap);inline-size:100%;min-block-size:var(--skra-comp-select-option-min-block-size);margin:0;box-sizing:border-box;padding-block:var(--skra-comp-select-option-padding-block);padding-inline:var(--skra-comp-select-option-padding-inline);color:var(--skra-comp-select-option-foreground);cursor:pointer;-webkit-user-select:none;user-select:none;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)}.skra-select-option-leading{display:inline-flex;align-items:center;flex:none;--skra-comp-icon-size: var(--skra-comp-select-icon-size)}.skra-select-option-label{flex:1 1 auto;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.skra-select-option-detail{flex:none;color:var(--skra-comp-select-option-detail-foreground);font-family:var(--skra-sys-typography-role-body-small-font-family);font-size:var(--skra-sys-typography-role-body-small-font-size);font-weight:var(--skra-sys-typography-role-body-small-font-weight);line-height:var(--skra-sys-typography-role-body-small-line-height);letter-spacing:var(--skra-sys-typography-role-body-small-letter-spacing)}.skra-select-option-indicator{flex:none;inline-size:1em;display:inline-flex;align-items:center;justify-content:center}:host([aria-selected=true]) .skra-select-option-indicator:not(.skra-select-option-indicator--checkbox):before{content:\"\\2713\";color:var(--skra-comp-select-indicator-color)}.skra-select-option-indicator--checkbox{inline-size:var(--skra-comp-select-option-checkbox-size);block-size:var(--skra-comp-select-option-checkbox-size);border:var(--skra-comp-select-border-width) solid var(--skra-comp-select-option-checkbox-border-color);border-radius:var(--skra-comp-select-option-checkbox-radius);box-sizing:border-box}:host([aria-selected=true]) .skra-select-option-indicator--checkbox{background-color:var(--skra-comp-select-option-checkbox-background-selected);border-color:var(--skra-comp-select-option-checkbox-background-selected)}:host([aria-selected=true]) .skra-select-option-indicator--checkbox:before{content:\"\\2713\";color:var(--skra-comp-select-option-checkbox-check-color);font-size:.75em;line-height:1}:host(:hover){background-color:var(--skra-comp-select-option-background-hover)}:host([data-skra-active]){background-color:var(--skra-comp-select-option-background-active);outline:var(--skra-comp-select-focus-ring-width) solid var(--skra-comp-select-focus-ring-color);outline-offset:calc(-1 * var(--skra-comp-select-focus-ring-width))}:host([aria-selected=true]){background-color:var(--skra-comp-select-option-background-selected);color:var(--skra-comp-select-option-foreground-selected)}:host([aria-disabled=true]){color:var(--skra-comp-select-option-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: SkraOption, decorators: [{
+            type: Component,
+            args: [{ selector: 'skra-option', standalone: true, exportAs: 'skraOption', template: `
+    @if (hasLeading()) {
+      <span class="skra-select-option-leading"
+        ><ng-content select="[skra-option-leading]"></ng-content
+      ></span>
+    }
+    <span class="skra-select-option-label"><ng-content></ng-content></span>
+    @if (hasDetail()) {
+      <span class="skra-select-option-detail"
+        ><ng-content select="[skra-option-detail]"></ng-content
+      ></span>
+    }
+    <span
+      class="skra-select-option-indicator"
+      [class.skra-select-option-indicator--checkbox]="multiple()"
+      aria-hidden="true"
+    ></span>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: {
+                        role: 'option',
+                        '[id]': 'optionId',
+                        '[attr.aria-selected]': 'selected() ? "true" : "false"',
+                        '[attr.data-skra-active]': 'active() ? "" : null',
+                        '(click)': 'onActivate()',
+                        // Disabled = the consumer's native `aria-disabled="true"` (observed live) — no Forge binding.
+                    }, styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:var(--skra-comp-select-option-gap);inline-size:100%;min-block-size:var(--skra-comp-select-option-min-block-size);margin:0;box-sizing:border-box;padding-block:var(--skra-comp-select-option-padding-block);padding-inline:var(--skra-comp-select-option-padding-inline);color:var(--skra-comp-select-option-foreground);cursor:pointer;-webkit-user-select:none;user-select:none;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)}.skra-select-option-leading{display:inline-flex;align-items:center;flex:none;--skra-comp-icon-size: var(--skra-comp-select-icon-size)}.skra-select-option-label{flex:1 1 auto;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.skra-select-option-detail{flex:none;color:var(--skra-comp-select-option-detail-foreground);font-family:var(--skra-sys-typography-role-body-small-font-family);font-size:var(--skra-sys-typography-role-body-small-font-size);font-weight:var(--skra-sys-typography-role-body-small-font-weight);line-height:var(--skra-sys-typography-role-body-small-line-height);letter-spacing:var(--skra-sys-typography-role-body-small-letter-spacing)}.skra-select-option-indicator{flex:none;inline-size:1em;display:inline-flex;align-items:center;justify-content:center}:host([aria-selected=true]) .skra-select-option-indicator:not(.skra-select-option-indicator--checkbox):before{content:\"\\2713\";color:var(--skra-comp-select-indicator-color)}.skra-select-option-indicator--checkbox{inline-size:var(--skra-comp-select-option-checkbox-size);block-size:var(--skra-comp-select-option-checkbox-size);border:var(--skra-comp-select-border-width) solid var(--skra-comp-select-option-checkbox-border-color);border-radius:var(--skra-comp-select-option-checkbox-radius);box-sizing:border-box}:host([aria-selected=true]) .skra-select-option-indicator--checkbox{background-color:var(--skra-comp-select-option-checkbox-background-selected);border-color:var(--skra-comp-select-option-checkbox-background-selected)}:host([aria-selected=true]) .skra-select-option-indicator--checkbox:before{content:\"\\2713\";color:var(--skra-comp-select-option-checkbox-check-color);font-size:.75em;line-height:1}:host(:hover){background-color:var(--skra-comp-select-option-background-hover)}:host([data-skra-active]){background-color:var(--skra-comp-select-option-background-active);outline:var(--skra-comp-select-focus-ring-width) solid var(--skra-comp-select-focus-ring-color);outline-offset:calc(-1 * var(--skra-comp-select-focus-ring-width))}:host([aria-selected=true]){background-color:var(--skra-comp-select-option-background-selected);color:var(--skra-comp-select-option-foreground-selected)}:host([aria-disabled=true]){color:var(--skra-comp-select-option-foreground-disabled);cursor:default}@media(prefers-reduced-motion:reduce){:host{transition-duration:0ms}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], leadingSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SkraOptionLeading), { isSignal: true }] }], detailSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SkraOptionDetail), { isSignal: true }] }] } });
+
+/**
+ * SkraSelectTrigger — the opt-in rich-trigger marker (ADR 0045 Rule 2). Place on an `<ng-template>`
+ * inside `<skra-select>`; the select reads it as a `TemplateRef` and stamps it in the trigger via
+ * `ngTemplateOutlet` with `{ $implicit: value, option: selectedOption }` context — the ONLY supported
+ * path for non-text (SVG/`<img>`) trigger presentation. With no trigger template the default trigger is
+ * the selected option's `getLabel()` text (emoji/glyph leading content appears for free).
+ *
+ *   <skra-select [value]="country()" (valueChange)="country.set($event)">
+ *     <ng-template skraSelectTrigger let-value>
+ *       <skra-icon [innerSVG]="flagOf(value)"></skra-icon> {{ nameOf(value) }}
+ *     </ng-template>
+ *     <skra-option value="de"><skra-icon [innerSVG]="flagOf('de')"></skra-icon> Germany</skra-option>
+ *   </skra-select>
+ */
+class SkraSelectTrigger {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SkraSelectTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.7", type: SkraSelectTrigger, isStandalone: true, selector: "[skraSelectTrigger]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SkraSelectTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[skraSelectTrigger]',
+                    standalone: true,
+                }]
+        }] });
+
+/**
+ * Anchor `floating` to `reference` and keep it positioned while visible. Returns a handle whose
+ * `destroy()` MUST be called when the overlay hides or the owner is destroyed (no listener leak).
+ *
+ * `options` is a getter so live token values (offset) are re-read on every reposition.
+ */
+function _attachPositioner(reference, floating, options) {
+    const update = () => {
+        const { placement, offset: offset$1 = 0, viewportPadding = 8 } = options();
+        void computePosition(reference, floating, {
+            strategy: 'fixed', // floating element renders in the top layer → viewport-relative
+            placement: placement,
+            middleware: [
+                offset(offset$1),
+                flip(),
+                shift({ padding: viewportPadding }),
+            ],
+        }).then(({ x, y, placement: resolved }) => {
+            // Geometry only (ADR 0044 §3 rule 4). Never theme/state.
+            floating.style.left = `${x}px`;
+            floating.style.top = `${y}px`;
+            // Resolved side (post-flip) for orientation CSS / future arrow — a data-attr, not a style.
+            floating.setAttribute('data-skra-placement', resolved.split('-')[0]);
+        });
+    };
+    // autoUpdate repositions on scroll, resize and element resize; returns its own cleanup.
+    const cleanup = autoUpdate(reference, floating, update);
+    let destroyed = false;
+    return {
+        destroy() {
+            if (destroyed)
+                return;
+            destroyed = true;
+            cleanup();
+        },
+    };
+}
+
+/**
+ * _SkraListboxKeyboard — the WAI-ARIA APG **Select-Only Combobox** listbox keyboard model, confined to
+ * ONE file. Sibling to `menu-keyboard.ts`: per ADR 0044 §7 (2026-06-07), `@angular/cdk/a11y` is confined
+ * to one swappable `*-keyboard.ts` controller PER APG pattern. Menu uses `FocusKeyManager` (roving REAL
+ * focus); the listbox uses **`ActiveDescendantKeyManager`** — focus STAYS on the combobox trigger and the
+ * active option is virtual (`aria-activedescendant`), the APG-canonical select-only model. Swapping the
+ * engine is a one-file change, exactly as `SkraPositioner` wraps `@floating-ui/dom`.
+ *
+ * Owns: Down/Up active-descendant movement, Home/End, and type-ahead. Enter/Space (select), Escape and
+ * light-dismiss (`popover="auto"`) stay with the select / platform — this controller never touches them.
+ */
+class _SkraListboxKeyboard {
+    manager;
+    items = [];
+    changeHandler;
+    /** Notified whenever the active descendant changes — the select mirrors it to `aria-activedescendant`. */
+    onActiveChange(handler) {
+        this.changeHandler = handler;
+    }
+    /**
+     * (Re)build the manager from the current projected option set. Called from an `effect` on the select'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 option set changes (the documented signal↔CDK seam).
+     */
+    setItems(items) {
+        this.items = [...items];
+        this.manager?.destroy();
+        this.manager = new ActiveDescendantKeyManager(this.items)
+            .withTypeAhead()
+            .withHomeAndEnd()
+            // Disabled options stay navigable (APG-discoverable); selection is guarded by the select.
+            // `() => false` also stops the manager from reading `item.disabled` to skip-during-navigation.
+            .skipPredicate(() => false);
+        this.manager.change.subscribe((index) => this.changeHandler?.(this.items[index] ?? null));
+    }
+    /** Delegate Down/Up/Home/End/type-ahead. Enter/Space/Escape are intentionally left to the select/platform. */
+    onKeydown(event) {
+        this.manager?.onKeydown(event);
+    }
+    get activeItem() {
+        return this.manager?.activeItem ?? null;
+    }
+    /** Seed the active descendant on open: the selected option, else the first. */
+    setActive(item) {
+        if (!this.manager)
+            return;
+        if (item)
+            this.manager.setActiveItem(item);
+        else
+            this.manager.setFirstItemActive();
+    }
+    /** Deactivate (close): `setActiveItem(-1)` clears `_activeItem` and the highlight. */
+    clearActive() {
+        this.manager?.setActiveItem(-1);
+    }
+    destroy() {
+        this.manager?.destroy();
+        this.manager = undefined;
+    }
+}
+
+let nextListboxId = 0;
+/**
+ * _SkraListboxWidgetBase — the **trigger-shape-agnostic** core shared by every Forge listbox widget,
+ * per the **ADR 0046 amendment (2026-06-13)**. It owns ONLY the substrate that does not depend on what
+ * the trigger looks like: the `SkraFieldContext` cascade (ADR 013), the panel `(toggle)` →
+ * `SkraPositioner` lifecycle + active-descendant seeding, the `_SkraListboxKeyboard` wiring
+ * (CDK `ActiveDescendantKeyManager`, ADR 0044 §7), imperative `open()`/`close()`, teardown, and the
+ * abstract `SkraListboxPanel` selection seam.
+ *
+ * Trigger BEHAVIOUR lives one level down, in a per-shape base:
+ *   - `_SkraSelectBase` adds the button + native `popovertarget` + type-ahead trigger (Select-Only
+ *     Combobox) and the ADR 0045 `[skraSelectTrigger]` rich-trigger template.
+ *   - `SkraCombobox` (no extra base) adds the editable `<input>` + filter-output trigger (ADR 0049).
+ *
+ * The keydown skeleton is NOT here — each trigger shape routes keys differently (the select selects on
+ * Space and type-aheads; the combobox types into the input and never type-aheads). Forcing one keydown
+ * through both shapes is the wrong abstraction.
+ *
+ * `panelTokenPrefix` makes the panel comp-token namespace overridable so each widget reads its OWN
+ * `--skra-comp-<prefix>-panel-*` tokens (`select` for the select family, `combobox` for the combobox).
+ *
+ * Full contracts: adr/specs/component-{select,multi-select,combobox}-spec.md.
+ */
+class _SkraListboxWidgetBase {
+    /** Equality strategy seam (ADR 037 selection model): default `Object.is`; object values pass a custom comparator. */
+    compareWith = input(Object.is, ...(ngDevMode ? [{ debugName: "compareWith" }] : /* istanbul ignore next */ []));
+    /** Value-empty hint shown in the trigger (NOT the accessible name — ADR 033). */
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Placement intent; flip/shift adjust at runtime. */
+    placement = input('bottom', ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+    /** Standalone availability source (Q-1) — `SkraFieldContext` wins when present. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    options = contentChildren(SkraOption, ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    triggerRef = viewChild('trigger', ...(ngDevMode ? [{ debugName: "triggerRef" }] : /* istanbul ignore next */ []));
+    panelRef = viewChild('panel', ...(ngDevMode ? [{ debugName: "panelRef" }] : /* istanbul ignore next */ []));
+    context = inject(SkraFieldContext, { optional: true });
+    keyboard = new _SkraListboxKeyboard();
+    panelId = `skra-listbox-${nextListboxId++}`;
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    activeOptionId = signal(null, ...(ngDevMode ? [{ debugName: "activeOptionId" }] : /* istanbul ignore next */ []));
+    positioner;
+    // ── Availability / validation (SkraFieldContext, ADR 013, with standalone fallbacks — Q-1) ──
+    isDisabled = computed(() => this.context?.isDisabled() ?? this.disabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    isReadonly = computed(() => this.context?.isReadonly() ?? this.readonly(), ...(ngDevMode ? [{ debugName: "isReadonly" }] : /* istanbul ignore next */ []));
+    hasError = computed(() => this.context?.hasError() ?? false, ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    isRequired = computed(() => this.context?.isRequired() ?? false, ...(ngDevMode ? [{ debugName: "isRequired" }] : /* istanbul ignore next */ []));
+    triggerId = computed(() => this.context?.fieldId() || null, ...(ngDevMode ? [{ debugName: "triggerId" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => this.context?.describedByIds() ?? null, ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Feed the keyboard controller whenever the projected option set changes (signal → array rebuild).
+        effect(() => this.keyboard.setItems(this.options()));
+        // Mirror the active descendant to the trigger's aria-activedescendant.
+        this.keyboard.onActiveChange((item) => this.activeOptionId.set(item?.optionId ?? null));
+        inject(DestroyRef).onDestroy(() => this.teardown());
+    }
+    // ── Panel open / close (native toggle from the Popover API) ──
+    onPanelToggle(event) {
+        const open = event.newState === 'open';
+        this.isOpen.set(open);
+        if (open)
+            this.onOpen();
+        else
+            this.onClose();
+    }
+    /**
+     * The element the panel is positioned against AND matched in width to (Q-5). Defaults to the trigger
+     * — correct for the select family, whose trigger button fills the host. The combobox overrides it to
+     * the host box, because its trigger is the INNER input (narrower than the bordered box + chevron), so
+     * the panel must align to and match the box, not the input — visual parity with select.
+     */
+    positioningAnchor() {
+        return this.triggerRef()?.nativeElement;
+    }
+    onOpen() {
+        const anchor = this.positioningAnchor();
+        const panel = this.panelRef()?.nativeElement;
+        if (anchor && panel) {
+            // Geometry-only (ADR 0044 §3 rule 4): the panel is at least as wide as the anchor (Q-5).
+            panel.style.minInlineSize = `${anchor.offsetWidth}px`;
+            this.positioner?.destroy();
+            this.positioner = _attachPositioner(anchor, panel, () => ({
+                placement: this.placement(),
+                offset: this.cssLenPx(`--skra-comp-${this.panelTokenPrefix}-panel-offset`),
+                viewportPadding: this.cssLenPx(`--skra-comp-${this.panelTokenPrefix}-panel-viewport-padding`),
+            }));
+        }
+        // Seed the active descendant (single → selected; multi → first selected, else first).
+        this.keyboard.setActive(this.activeSeedItem());
+    }
+    onClose() {
+        this.positioner?.destroy();
+        this.positioner = undefined;
+        this.keyboard.clearActive();
+        this.activeOptionId.set(null);
+    }
+    /** Select the keyboard's active option (Enter), unless it is soft-disabled. Shared by every trigger shape. */
+    selectActive() {
+        const active = this.keyboard.activeItem;
+        if (active && !active.disabled)
+            this.selectValue(active.getValue());
+    }
+    open() {
+        this.panelRef()?.nativeElement.showPopover?.();
+    }
+    close() {
+        this.panelRef()?.nativeElement.hidePopover?.();
+    }
+    /** Read a length comp token (px/rem) off the panel computed style for the positioner. */
+    cssLenPx(prop) {
+        const el = this.panelRef()?.nativeElement;
+        if (!el)
+            return 0;
+        const raw = getComputedStyle(el).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;
+    }
+    teardown() {
+        this.keyboard.destroy();
+        this.positioner?.destroy();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: _SkraListboxWidgetBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.7", type: _SkraListboxWidgetBase, isStandalone: true, inputs: { compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-skra-disabled": "isDisabled() ? \"\" : null", "attr.data-skra-readonly": "isReadonly() ? \"\" : null", "attr.data-skra-validation": "hasError() ? \"invalid\" : null" } }, queries: [{ propertyName: "options", predicate: SkraOption, isSignal: true }], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: _SkraListboxWidgetBase, decorators: [{
+            type: Directive,
+            args: [{
+                    host: {
+                        // Shell state reflection for the skin (the trigger control carries the ARIA + native disabled).
+                        '[attr.data-skra-disabled]': 'isDisabled() ? "" : null',
+                        '[attr.data-skra-readonly]': 'isReadonly() ? "" : null',
+                        '[attr.data-skra-validation]': 'hasError() ? "invalid" : null',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SkraOption), { isSignal: true }] }], triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }] } });
+
+/**
+ * _SkraSelectBase — the SELECT-family trigger model over {@link _SkraListboxWidgetBase}: the WAI-ARIA APG
+ * **Select-Only Combobox** trigger. It adds the `<button>` + native `popovertarget` interaction, the
+ * type-ahead keydown skeleton, and the ADR 0045 `[skraSelectTrigger]` rich-trigger template. Shared by
+ * `skra-select` (single) and `skra-multi-select` (multi) — the cardinality split (ADR 0046) lives in
+ * those concretes (the `SkraListboxPanel` seam: single replaces + closes, multi toggles + stays open).
+ *
+ * The trigger-shape-agnostic substrate (field cascade, panel toggle/positioner, keyboard wiring,
+ * open/close, the selection seam) lives in the parent base, shared verbatim with `skra-combobox`
+ * (which has a different — editable input — trigger; ADR 0046 amendment 2026-06-13).
+ *
+ * Full contract: adr/specs/component-select-spec.md + adr/specs/component-multi-select-spec.md.
+ */
+class _SkraSelectBase extends _SkraListboxWidgetBase {
+    /** Select-family panel token namespace — `--skra-comp-select-panel-*` (shared single + multi). */
+    panelTokenPrefix = 'select';
+    /** Opt-in rich trigger template (ADR 0045 Rule 2). Select-family only — a combobox input shows text. */
+    triggerTemplate = contentChild(SkraSelectTrigger, { ...(ngDevMode ? { debugName: "triggerTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    // ── Trigger interaction (button + native popovertarget) ──
+    onTriggerClick(event) {
+        // Block the native popovertarget open when readonly (disabled is unfocusable/inert natively).
+        if (this.isReadonly())
+            event.preventDefault();
+    }
+    onTriggerKeydown(event) {
+        if (this.isDisabled() || this.isReadonly())
+            return; // never opens / never mutates
+        const key = event.key;
+        const isSpace = key === ' ' || key === 'Spacebar';
+        const isNav = key === 'ArrowDown' ||
+            key === 'ArrowUp' ||
+            key === 'Home' ||
+            key === 'End';
+        const isPrintable = key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey;
+        if (!this.isOpen()) {
+            // Single open path: suppress the popovertarget's own toggle (Enter/Space) too and open here.
+            if (isNav || isSpace || key === 'Enter' || isPrintable) {
+                event.preventDefault();
+                this.open();
+            }
+            return;
+        }
+        // Open:
+        if (key === 'Enter' || isSpace) {
+            // Suppress the popovertarget toggle; the concrete `selectValue` decides close (single) vs stay-open (multi).
+            event.preventDefault();
+            this.selectActive();
+            return;
+        }
+        if (key === 'Tab') {
+            this.close(); // APG: Tab closes (keep value); focus proceeds (no preventDefault)
+            return;
+        }
+        if (key === 'Escape')
+            return; // platform (popover="auto") closes; onPanelToggle handles cleanup
+        if (isNav || isPrintable) {
+            event.preventDefault();
+            this.keyboard.onKeydown(event); // move / type-ahead the active descendant
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: _SkraSelectBase, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.7", type: _SkraSelectBase, isStandalone: true, queries: [{ propertyName: "triggerTemplate", first: true, predicate: SkraSelectTrigger, descendants: true, read: TemplateRef, isSignal: true }], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: _SkraSelectBase, decorators: [{
+            type: Directive
+        }], propDecorators: { triggerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SkraSelectTrigger), { ...{
+                            read: TemplateRef,
+                        }, isSignal: true }] }] } });
+
+// @skra/ui/core — shared internal satellites (ADR 0054). Consumed cross-entry by
+// select / multi-select / combobox / datepicker / menu / popover / tooltip.
+// --- Public shared surface ---
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SKRA_LISTBOX_PANEL, SkraOption, SkraOptionDetail, SkraOptionLeading, SkraSelectTrigger, _SkraListboxWidgetBase, _SkraSelectBase, _attachPositioner };
+//# sourceMappingURL=skra-ui-core.mjs.map