@skra/ui 0.2.0

package/fesm2022/skra-ui-chip.mjs

@@ -0,0 +1,82 @@
+import * as i0 from '@angular/core';
+import { Directive, input, booleanAttribute, output, contentChild, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+
+/**
+ * Marker directive for the leading icon/dot/avatar slot of `<skra-chip>`.
+ * Detected via `contentChild` (ADR 020 Smart Slots v2.0) to toggle the icon
+ * wrapper without emitting an empty DOM node. Feedback-local (mirrors
+ * `SkraBadgeIcon`/`SkraAlertIcon`) to avoid a cross-lib marker dependency.
+ */
+class SkraChipIcon {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SkraChipIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.7", type: SkraChipIcon, isStandalone: true, selector: "[skra-chip-icon]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SkraChipIcon, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[skra-chip-icon]',
+                    standalone: true,
+                }]
+        }] });
+
+/**
+ * `<skra-chip>` — a small, inline, **removable** labelled pill (Feedback/Status
+ * family, Wave 2): a selected multi-select value, an applied filter, an input tag.
+ * The host is a non-interactive presentational pill (the label is plain text, no
+ * host role/focus); it contains exactly ONE interactive sub-control — the built-in
+ * remove `<button>` (the Alert dismiss precedent).
+ *
+ * SRP-distinct from `<skra-badge>` (a NON-removable status pill): the remove
+ * control is intrinsic to Chip — there is no `removable` flag, because a chip
+ * without it would be a Badge. A SELECTABLE/filter chip (a toggle) is a SEPARATE
+ * deferred atom (ARCHITECTURE_BACKLOG watch-list), NOT a `selectable` variant —
+ * one atom carrying both interaction models is an SRP smell.
+ *
+ * No `live` axis (unlike Badge/Alert): a chip is an input/selection element, not a
+ * status announcer; add/remove announcements are the consumer's own `aria-live`.
+ *
+ * Removal (ADR 037): the remove control fires `(removed)`. Forge does NOT remove
+ * itself from the DOM — the consumer owns removal (splice the bound array / `@if`).
+ * The remove control's accessible name comes from a projected
+ * `[skra-chip-remove-label]` (sr-only; ADR 033 Path 2) — the "×" glyph is `aria-hidden`.
+ */
+class SkraChip {
+    // --- Variant Surface (ADR 035) ---
+    intent = input('neutral', ...(ngDevMode ? [{ debugName: "intent" }] : /* istanbul ignore next */ []));
+    emphasis = input('medium', ...(ngDevMode ? [{ debugName: "emphasis" }] : /* istanbul ignore next */ []));
+    // --- Availability (ADR 027 cat 2) ---
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    // --- Removal (ADR 037 — consumer-owned presence) ---
+    removed = output();
+    // --- Smart Slots v2.0 (ADR 020) ---
+    iconSlot = contentChild(SkraChipIcon, ...(ngDevMode ? [{ debugName: "iconSlot" }] : /* istanbul ignore next */ []));
+    hasIcon = computed(() => !!this.iconSlot(), ...(ngDevMode ? [{ debugName: "hasIcon" }] : /* istanbul ignore next */ []));
+    onRemove() {
+        if (this.disabled())
+            return;
+        this.removed.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SkraChip, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: SkraChip, isStandalone: true, selector: "skra-chip", inputs: { intent: { classPropertyName: "intent", publicName: "intent", isSignal: true, isRequired: false, transformFunction: null }, emphasis: { classPropertyName: "emphasis", publicName: "emphasis", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, host: { properties: { "attr.data-skra-intent": "intent()", "attr.data-skra-emphasis": "emphasis()", "attr.data-skra-disabled": "disabled() ? \"\" : null", "attr.data-skra-has-icon": "hasIcon() ? \"\" : null" } }, queries: [{ propertyName: "iconSlot", first: true, predicate: SkraChipIcon, descendants: true, isSignal: true }], ngImport: i0, template: "@if (hasIcon()) {\n<span class=\"skra-chip-icon\">\n  <ng-content select=\"[skra-chip-icon]\"></ng-content>\n</span>\n}\n\n<span class=\"skra-chip-label\">\n  <ng-content></ng-content>\n</span>\n\n<button\n  type=\"button\"\n  class=\"skra-chip-remove\"\n  [disabled]=\"disabled()\"\n  (click)=\"onRemove()\"\n>\n  <svg\n    class=\"skra-chip-remove-glyph\"\n    aria-hidden=\"true\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2.5\"\n    stroke-linecap=\"round\"\n  >\n    <path d=\"M18 6 6 18\" />\n    <path d=\"m6 6 12 12\" />\n  </svg>\n  <ng-content select=\"[skra-chip-remove-label]\"></ng-content>\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;box-sizing:border-box;margin:0;white-space:nowrap;min-block-size:var(--skra-comp-chip-remove-size);font-family:var(--skra-sys-typography-role-label-medium-font-family);font-size:var(--skra-sys-typography-role-label-medium-font-size);font-weight:var(--skra-sys-typography-role-label-medium-font-weight);line-height:var(--skra-sys-typography-role-label-medium-line-height);letter-spacing:var(--skra-sys-typography-role-label-medium-letter-spacing);background:var(--skra-comp-chip-background);color:var(--skra-comp-chip-foreground);border-color:var(--skra-comp-chip-border-color);border-width:var(--skra-comp-chip-border-width);border-style:var(--skra-comp-chip-border-style);border-radius:var(--skra-comp-chip-radius);padding-block:var(--skra-comp-chip-padding-block);padding-inline:var(--skra-comp-chip-padding-inline);box-shadow:var(--skra-comp-chip-shadow)}:host([data-skra-emphasis=high]){--skra-comp-chip-border-width: 0}:host([data-skra-disabled]){cursor:not-allowed;background:var(--skra-sys-color-neutral-soft);color:var(--skra-sys-color-neutral-strong);border-color:var(--skra-sys-color-neutral-border)}:host([data-skra-disabled]) .skra-chip-icon,:host([data-skra-disabled]) .skra-chip-remove{opacity:var(--skra-sys-opacity-disabled)}:host([data-skra-intent=neutral][data-skra-emphasis=high]){--skra-comp-chip-background: var( --skra-comp-chip-background-neutral-high, var(--skra-sys-color-neutral-base) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-neutral-high, var(--skra-sys-color-neutral-contrast) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-neutral-high, transparent )}:host([data-skra-intent=neutral][data-skra-emphasis=medium]){--skra-comp-chip-background: var( --skra-comp-chip-background-neutral-medium, var(--skra-sys-color-neutral-soft) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-neutral-medium, var(--skra-sys-color-neutral-strong) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-neutral-medium, var(--skra-sys-color-neutral-border) )}:host([data-skra-intent=info][data-skra-emphasis=high]){--skra-comp-chip-background: var( --skra-comp-chip-background-info-high, var(--skra-sys-color-info-base) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-info-high, var(--skra-sys-color-info-contrast) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-info-high, transparent )}:host([data-skra-intent=info][data-skra-emphasis=medium]){--skra-comp-chip-background: var( --skra-comp-chip-background-info-medium, var(--skra-sys-color-info-soft) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-info-medium, var(--skra-sys-color-info-strong) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-info-medium, var(--skra-sys-color-info-border) )}:host([data-skra-intent=success][data-skra-emphasis=high]){--skra-comp-chip-background: var( --skra-comp-chip-background-success-high, var(--skra-sys-color-success-base) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-success-high, var(--skra-sys-color-success-contrast) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-success-high, transparent )}:host([data-skra-intent=success][data-skra-emphasis=medium]){--skra-comp-chip-background: var( --skra-comp-chip-background-success-medium, var(--skra-sys-color-success-soft) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-success-medium, var(--skra-sys-color-success-strong) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-success-medium, var(--skra-sys-color-success-border) )}:host([data-skra-intent=warning][data-skra-emphasis=high]){--skra-comp-chip-background: var( --skra-comp-chip-background-warning-high, var(--skra-sys-color-warning-base) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-warning-high, var(--skra-sys-color-warning-contrast) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-warning-high, transparent )}:host([data-skra-intent=warning][data-skra-emphasis=medium]){--skra-comp-chip-background: var( --skra-comp-chip-background-warning-medium, var(--skra-sys-color-warning-soft) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-warning-medium, var(--skra-sys-color-warning-strong) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-warning-medium, var(--skra-sys-color-warning-border) )}:host([data-skra-intent=danger][data-skra-emphasis=high]){--skra-comp-chip-background: var( --skra-comp-chip-background-danger-high, var(--skra-sys-color-danger-base) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-danger-high, var(--skra-sys-color-danger-contrast) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-danger-high, transparent )}:host([data-skra-intent=danger][data-skra-emphasis=medium]){--skra-comp-chip-background: var( --skra-comp-chip-background-danger-medium, var(--skra-sys-color-danger-soft) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-danger-medium, var(--skra-sys-color-danger-strong) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-danger-medium, var(--skra-sys-color-danger-border) )}.skra-chip-icon{display:inline-flex;flex-shrink:0;align-items:center;block-size:1lh;margin-inline-end:var(--skra-comp-chip-icon-gap);--skra-comp-icon-size: var(--skra-comp-chip-icon-size)}.skra-chip-label{display:inline-flex;align-items:center;min-inline-size:0}.skra-chip-remove{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;inline-size:var(--skra-comp-chip-remove-size);block-size:var(--skra-comp-chip-remove-size);margin:0;margin-inline-start:var(--skra-comp-chip-remove-gap);padding:0;border:0;background:transparent;color:inherit;cursor:pointer;border-radius:var(--skra-comp-chip-radius);transition:opacity var(--skra-comp-chip-motion-duration) var(--skra-comp-chip-motion-easing)}.skra-chip-remove:hover{opacity:.7}.skra-chip-remove:focus-visible{outline-style:solid;outline-color:var(--skra-comp-chip-focus-ring-color);outline-width:var(--skra-comp-chip-focus-ring-width);outline-offset:2px}.skra-chip-remove:disabled{cursor:not-allowed}.skra-chip-remove-glyph{inline-size:.875em;block-size:.875em;display:block}@media(prefers-reduced-motion:reduce){.skra-chip-remove{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SkraChip, decorators: [{
+            type: Component,
+            args: [{ selector: 'skra-chip', standalone: true, imports: [SkraChipIcon], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: {
+                        // Variant Surface reflection (ADR 035 §3.5; ADR 021 — never [style.--var])
+                        '[attr.data-skra-intent]': 'intent()',
+                        '[attr.data-skra-emphasis]': 'emphasis()',
+                        // Availability reflection (ADR 027 cat 2; presence boolean). The host is a custom
+                        // element with no native `disabled`, so its reflection is the Forge-semantic
+                        // data-attr; the remove <button> takes the NATIVE `disabled` (native-attr-first).
+                        '[attr.data-skra-disabled]': 'disabled() ? "" : null',
+                        // Smart Slot layout reflection (ADR 020 v2.0 — slot-presence, State-Surface-exempt §3.6)
+                        '[attr.data-skra-has-icon]': 'hasIcon() ? "" : null',
+                    }, template: "@if (hasIcon()) {\n<span class=\"skra-chip-icon\">\n  <ng-content select=\"[skra-chip-icon]\"></ng-content>\n</span>\n}\n\n<span class=\"skra-chip-label\">\n  <ng-content></ng-content>\n</span>\n\n<button\n  type=\"button\"\n  class=\"skra-chip-remove\"\n  [disabled]=\"disabled()\"\n  (click)=\"onRemove()\"\n>\n  <svg\n    class=\"skra-chip-remove-glyph\"\n    aria-hidden=\"true\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2.5\"\n    stroke-linecap=\"round\"\n  >\n    <path d=\"M18 6 6 18\" />\n    <path d=\"m6 6 12 12\" />\n  </svg>\n  <ng-content select=\"[skra-chip-remove-label]\"></ng-content>\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;box-sizing:border-box;margin:0;white-space:nowrap;min-block-size:var(--skra-comp-chip-remove-size);font-family:var(--skra-sys-typography-role-label-medium-font-family);font-size:var(--skra-sys-typography-role-label-medium-font-size);font-weight:var(--skra-sys-typography-role-label-medium-font-weight);line-height:var(--skra-sys-typography-role-label-medium-line-height);letter-spacing:var(--skra-sys-typography-role-label-medium-letter-spacing);background:var(--skra-comp-chip-background);color:var(--skra-comp-chip-foreground);border-color:var(--skra-comp-chip-border-color);border-width:var(--skra-comp-chip-border-width);border-style:var(--skra-comp-chip-border-style);border-radius:var(--skra-comp-chip-radius);padding-block:var(--skra-comp-chip-padding-block);padding-inline:var(--skra-comp-chip-padding-inline);box-shadow:var(--skra-comp-chip-shadow)}:host([data-skra-emphasis=high]){--skra-comp-chip-border-width: 0}:host([data-skra-disabled]){cursor:not-allowed;background:var(--skra-sys-color-neutral-soft);color:var(--skra-sys-color-neutral-strong);border-color:var(--skra-sys-color-neutral-border)}:host([data-skra-disabled]) .skra-chip-icon,:host([data-skra-disabled]) .skra-chip-remove{opacity:var(--skra-sys-opacity-disabled)}:host([data-skra-intent=neutral][data-skra-emphasis=high]){--skra-comp-chip-background: var( --skra-comp-chip-background-neutral-high, var(--skra-sys-color-neutral-base) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-neutral-high, var(--skra-sys-color-neutral-contrast) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-neutral-high, transparent )}:host([data-skra-intent=neutral][data-skra-emphasis=medium]){--skra-comp-chip-background: var( --skra-comp-chip-background-neutral-medium, var(--skra-sys-color-neutral-soft) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-neutral-medium, var(--skra-sys-color-neutral-strong) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-neutral-medium, var(--skra-sys-color-neutral-border) )}:host([data-skra-intent=info][data-skra-emphasis=high]){--skra-comp-chip-background: var( --skra-comp-chip-background-info-high, var(--skra-sys-color-info-base) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-info-high, var(--skra-sys-color-info-contrast) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-info-high, transparent )}:host([data-skra-intent=info][data-skra-emphasis=medium]){--skra-comp-chip-background: var( --skra-comp-chip-background-info-medium, var(--skra-sys-color-info-soft) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-info-medium, var(--skra-sys-color-info-strong) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-info-medium, var(--skra-sys-color-info-border) )}:host([data-skra-intent=success][data-skra-emphasis=high]){--skra-comp-chip-background: var( --skra-comp-chip-background-success-high, var(--skra-sys-color-success-base) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-success-high, var(--skra-sys-color-success-contrast) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-success-high, transparent )}:host([data-skra-intent=success][data-skra-emphasis=medium]){--skra-comp-chip-background: var( --skra-comp-chip-background-success-medium, var(--skra-sys-color-success-soft) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-success-medium, var(--skra-sys-color-success-strong) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-success-medium, var(--skra-sys-color-success-border) )}:host([data-skra-intent=warning][data-skra-emphasis=high]){--skra-comp-chip-background: var( --skra-comp-chip-background-warning-high, var(--skra-sys-color-warning-base) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-warning-high, var(--skra-sys-color-warning-contrast) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-warning-high, transparent )}:host([data-skra-intent=warning][data-skra-emphasis=medium]){--skra-comp-chip-background: var( --skra-comp-chip-background-warning-medium, var(--skra-sys-color-warning-soft) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-warning-medium, var(--skra-sys-color-warning-strong) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-warning-medium, var(--skra-sys-color-warning-border) )}:host([data-skra-intent=danger][data-skra-emphasis=high]){--skra-comp-chip-background: var( --skra-comp-chip-background-danger-high, var(--skra-sys-color-danger-base) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-danger-high, var(--skra-sys-color-danger-contrast) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-danger-high, transparent )}:host([data-skra-intent=danger][data-skra-emphasis=medium]){--skra-comp-chip-background: var( --skra-comp-chip-background-danger-medium, var(--skra-sys-color-danger-soft) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-danger-medium, var(--skra-sys-color-danger-strong) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-danger-medium, var(--skra-sys-color-danger-border) )}.skra-chip-icon{display:inline-flex;flex-shrink:0;align-items:center;block-size:1lh;margin-inline-end:var(--skra-comp-chip-icon-gap);--skra-comp-icon-size: var(--skra-comp-chip-icon-size)}.skra-chip-label{display:inline-flex;align-items:center;min-inline-size:0}.skra-chip-remove{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;inline-size:var(--skra-comp-chip-remove-size);block-size:var(--skra-comp-chip-remove-size);margin:0;margin-inline-start:var(--skra-comp-chip-remove-gap);padding:0;border:0;background:transparent;color:inherit;cursor:pointer;border-radius:var(--skra-comp-chip-radius);transition:opacity var(--skra-comp-chip-motion-duration) var(--skra-comp-chip-motion-easing)}.skra-chip-remove:hover{opacity:.7}.skra-chip-remove:focus-visible{outline-style:solid;outline-color:var(--skra-comp-chip-focus-ring-color);outline-width:var(--skra-comp-chip-focus-ring-width);outline-offset:2px}.skra-chip-remove:disabled{cursor:not-allowed}.skra-chip-remove-glyph{inline-size:.875em;block-size:.875em;display:block}@media(prefers-reduced-motion:reduce){.skra-chip-remove{transition:none}}\n"] }]
+        }], propDecorators: { intent: [{ type: i0.Input, args: [{ isSignal: true, alias: "intent", required: false }] }], emphasis: [{ type: i0.Input, args: [{ isSignal: true, alias: "emphasis", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }], iconSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SkraChipIcon), { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SkraChip, SkraChipIcon };
+//# sourceMappingURL=skra-ui-chip.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"skra-ui-chip.mjs","sources":["../../../../libs/ui/chip/src/lib/chip.directives.ts","../../../../libs/ui/chip/src/lib/chip/chip.ts","../../../../libs/ui/chip/src/lib/chip/chip.html","../../../../libs/ui/chip/src/skra-ui-chip.ts"],"sourcesContent":["import { Directive } from '@angular/core';\n\n/**\n * Marker directive for the leading icon/dot/avatar slot of `<skra-chip>`.\n * Detected via `contentChild` (ADR 020 Smart Slots v2.0) to toggle the icon\n * wrapper without emitting an empty DOM node. Feedback-local (mirrors\n * `SkraBadgeIcon`/`SkraAlertIcon`) to avoid a cross-lib marker dependency.\n */\n@Directive({\n  selector: '[skra-chip-icon]',\n  standalone: true,\n})\nexport class SkraChipIcon {}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  booleanAttribute,\n  computed,\n  contentChild,\n  input,\n  output,\n} from '@angular/core';\nimport { SkraChipIcon } from '../chip.directives';\n\n/**\n * ChipIntent — semantic meaning (ADR 035 §3.1, downward subset). Excludes the\n * action intents `primary`/`secondary` (meaningless for a status/category pill).\n * Closed enum; extension requires an ADR 035 amendment.\n */\nexport type ChipIntent = 'neutral' | 'info' | 'success' | 'warning' | 'danger';\n\n/**\n * ChipEmphasis — visual loudness within the chosen intent (ADR 035 §3.1, subset).\n * `high` = filled pill, `medium` = soft/tinted. `low` deferred.\n */\nexport type ChipEmphasis = 'high' | 'medium';\n\n/**\n * `<skra-chip>` — a small, inline, **removable** labelled pill (Feedback/Status\n * family, Wave 2): a selected multi-select value, an applied filter, an input tag.\n * The host is a non-interactive presentational pill (the label is plain text, no\n * host role/focus); it contains exactly ONE interactive sub-control — the built-in\n * remove `<button>` (the Alert dismiss precedent).\n *\n * SRP-distinct from `<skra-badge>` (a NON-removable status pill): the remove\n * control is intrinsic to Chip — there is no `removable` flag, because a chip\n * without it would be a Badge. A SELECTABLE/filter chip (a toggle) is a SEPARATE\n * deferred atom (ARCHITECTURE_BACKLOG watch-list), NOT a `selectable` variant —\n * one atom carrying both interaction models is an SRP smell.\n *\n * No `live` axis (unlike Badge/Alert): a chip is an input/selection element, not a\n * status announcer; add/remove announcements are the consumer's own `aria-live`.\n *\n * Removal (ADR 037): the remove control fires `(removed)`. Forge does NOT remove\n * itself from the DOM — the consumer owns removal (splice the bound array / `@if`).\n * The remove control's accessible name comes from a projected\n * `[skra-chip-remove-label]` (sr-only; ADR 033 Path 2) — the \"×\" glyph is `aria-hidden`.\n */\n@Component({\n  selector: 'skra-chip',\n  standalone: true,\n  imports: [SkraChipIcon],\n  templateUrl: './chip.html',\n  styleUrl: './chip.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.Emulated,\n  host: {\n    // Variant Surface reflection (ADR 035 §3.5; ADR 021 — never [style.--var])\n    '[attr.data-skra-intent]': 'intent()',\n    '[attr.data-skra-emphasis]': 'emphasis()',\n\n    // Availability reflection (ADR 027 cat 2; presence boolean). The host is a custom\n    // element with no native `disabled`, so its reflection is the Forge-semantic\n    // data-attr; the remove <button> takes the NATIVE `disabled` (native-attr-first).\n    '[attr.data-skra-disabled]': 'disabled() ? \"\" : null',\n\n    // Smart Slot layout reflection (ADR 020 v2.0 — slot-presence, State-Surface-exempt §3.6)\n    '[attr.data-skra-has-icon]': 'hasIcon() ? \"\" : null',\n  },\n})\nexport class SkraChip {\n  // --- Variant Surface (ADR 035) ---\n  readonly intent = input<ChipIntent>('neutral');\n  readonly emphasis = input<ChipEmphasis>('medium');\n\n  // --- Availability (ADR 027 cat 2) ---\n  readonly disabled = input(false, { transform: booleanAttribute });\n\n  // --- Removal (ADR 037 — consumer-owned presence) ---\n  readonly removed = output<void>();\n\n  // --- Smart Slots v2.0 (ADR 020) ---\n  readonly iconSlot = contentChild(SkraChipIcon);\n  readonly hasIcon = computed(() => !!this.iconSlot());\n\n  protected onRemove(): void {\n    if (this.disabled()) return;\n    this.removed.emit();\n  }\n}\n","@if (hasIcon()) {\n<span class=\"skra-chip-icon\">\n  <ng-content select=\"[skra-chip-icon]\"></ng-content>\n</span>\n}\n\n<span class=\"skra-chip-label\">\n  <ng-content></ng-content>\n</span>\n\n<button\n  type=\"button\"\n  class=\"skra-chip-remove\"\n  [disabled]=\"disabled()\"\n  (click)=\"onRemove()\"\n>\n  <svg\n    class=\"skra-chip-remove-glyph\"\n    aria-hidden=\"true\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2.5\"\n    stroke-linecap=\"round\"\n  >\n    <path d=\"M18 6 6 18\" />\n    <path d=\"m6 6 12 12\" />\n  </svg>\n  <ng-content select=\"[skra-chip-remove-label]\"></ng-content>\n</button>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/skra-ui-combobox.mjs

@@ -0,0 +1,335 @@
+import * as i0 from '@angular/core';
+import { input, output, booleanAttribute, signal, inject, ElementRef, computed, afterRenderEffect, ViewEncapsulation, ChangeDetectionStrategy, Component, Directive } from '@angular/core';
+import { _SkraListboxWidgetBase, SKRA_LISTBOX_PANEL } from '@skra/ui/core';
+export { SkraOption, SkraOptionDetail, SkraOptionLeading } from '@skra/ui/core';
+
+/**
+ * SkraCombobox — the WAI-ARIA APG **Editable Combobox** (list autocomplete, manual selection): an
+ * editable `<input role="combobox" aria-autocomplete="list">` whose top-layer listbox (Popover API,
+ * `popover="auto"`, ADR 0044) of projected `skra-option` children NARROWS as the user types. The first
+ * Tier-3 / higher-order component. Single-cardinality (ADR 0046); the multi sibling is future work.
+ *
+ * - **Filtering + option set are CONSUMER-OWNED (ADR 0049):** Forge emits the typed text via
+ *   `filterChange` (no debounce — timing is the consumer's); the consumer projects the matching
+ *   `skra-option` subset (sync computed OR async fetch). There is NO `[items]` input and NO internal
+ *   matcher — Forge renders exactly what is projected.
+ * - **Value is OPTION-BOUND (ADR 0049):** `value = input<T>()` + `valueChange` (consumer-owned, ADR 037);
+ *   a committed value is always an existing option's `T`. On cancel/blur the input text reverts to the
+ *   selected option's label — typed text that matched nothing NEVER leaks as the value (free-text commit
+ *   is the separate `skra-autocomplete`).
+ * - **Async (ADR 0049/028):** `loading` reflects `aria-busy` + drives a panel loading branch
+ *   (`[skraLoadingIndicator]` slot + fallback); an empty projected set drives the `[skraComboboxEmpty]`
+ *   branch; both are announced via `aria-live`.
+ *
+ * The trigger-shape-agnostic substrate (field cascade, panel toggle/positioner, keyboard wiring,
+ * open/close, the `SkraListboxPanel` selection seam) lives in {@link _SkraListboxWidgetBase}, shared
+ * verbatim with the select family (ADR 0046 amendment). `skra-option` is reused verbatim — combobox
+ * provides the `SKRA_LISTBOX_PANEL` token so the option's selection/keyboard/indicator wiring works
+ * unchanged.
+ *
+ * Full contract: adr/specs/component-combobox-spec.md.
+ */
+class SkraCombobox extends _SkraListboxWidgetBase {
+    /** Combobox panel token namespace — `--skra-comp-combobox-panel-*`. */
+    panelTokenPrefix = 'combobox';
+    /** Consumer-owned value channel (ADR 037) — single, option-bound `T`. */
+    value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Fires ONLY on user selection of an option — never on a programmatic `value()` change (ADR 037). */
+    valueChange = output();
+    /** The typed text, emitted on EVERY input change. Consumer-driven projection; NO Forge debounce (ADR 0049). */
+    filterChange = output();
+    /** Async hint (ADR 0049/028) — reflects `aria-busy` + drives the panel loading branch. */
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Cardinality hint (ADR 0046) — single-select. */
+    multiple = false;
+    /** Internal editable-text state; emitted out via `filterChange`. NOT the value (ADR 0049). */
+    query = signal('', ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+    isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
+    hostEl = inject(ElementRef);
+    /**
+     * Position the panel against — and match its width to — the HOST box, not the inner input. The input
+     * is inset (host padding + chevron), so anchoring to it would make a narrower, misaligned panel; the
+     * host gives full-width parity with `skra-select`.
+     */
+    positioningAnchor() {
+        return this.hostEl.nativeElement;
+    }
+    /** The option whose value matches `value()` (ADR 037 selection model) — feeds the displayed text + active seed. */
+    selectedOption = computed(() => this.options().find((o) => this.isSelected(o.value())) ?? null, ...(ngDevMode ? [{ debugName: "selectedOption" }] : /* istanbul ignore next */ []));
+    /**
+     * The text shown in the input: the live query while editing (focused), otherwise the selected option's
+     * label. This is the controlled-input seam that enforces the option-bound value (ADR 0049) — on blur the
+     * input snaps back to the selected label, so unmatched typed text never persists.
+     */
+    displayValue = computed(() => this.isFocused() ? this.query() : (this.selectedOption()?.getLabel() ?? ''), ...(ngDevMode ? [{ debugName: "displayValue" }] : /* 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 (consumer filtering adds fresh <skra-option>s) would throw NG0950.
+            // afterRender hooks never run on the server, so this stays SSR-safe. Covers both
+            // F-13 (initial render) and F-16 (runtime re-projection, surfaced in dogfood).
+            afterRenderEffect(() => {
+                const v = this.value();
+                if (v === undefined)
+                    return;
+                const matched = this.options().some((o) => this.compareWith()(o.value(), v));
+                if (!matched && this.options().length) {
+                    console.warn('[skra-combobox] value has no matching <skra-option> in the projected set — the input ' +
+                        'shows empty (likely a compareWith mismatch, or the selected option was filtered out).');
+                }
+            });
+        }
+    }
+    // ── SkraListboxPanel seam ──
+    isSelected(value) {
+        const current = this.value();
+        return current !== undefined && this.compareWith()(current, value);
+    }
+    selectValue(value) {
+        const opt = this.options().find((o) => this.compareWith()(o.value(), value)) ?? null;
+        this.valueChange.emit(value);
+        // Optimistic display: show the picked option's label immediately (focus is retained).
+        this.query.set(opt?.getLabel() ?? '');
+        this.close(); // single-select: pick + close
+    }
+    activeSeedItem() {
+        return this.selectedOption();
+    }
+    // ── Editable-input trigger model (the divergence from the select-family button trigger) ──
+    onFocus() {
+        // Start editing from the current value's label (APG: the textbox shows the value, editable).
+        this.query.set(this.selectedOption()?.getLabel() ?? '');
+        this.isFocused.set(true);
+    }
+    onInput(event) {
+        if (this.isReadonly())
+            return;
+        const text = event.target.value;
+        this.query.set(text);
+        this.filterChange.emit(text); // ADR 0049 — consumer owns the matching + projection
+        if (!this.isOpen())
+            this.open();
+    }
+    onBlur() {
+        this.isFocused.set(false); // displayValue() snaps back to the selected label (option-bound, ADR 0049)
+        if (this.isOpen())
+            this.close();
+    }
+    onTriggerKeydown(event) {
+        if (this.isDisabled() || this.isReadonly())
+            return;
+        const key = event.key;
+        if (key === 'ArrowDown' || key === 'ArrowUp') {
+            event.preventDefault(); // do not move the text caret
+            if (event.altKey) {
+                // APG: Alt+Down opens (no active move); Alt+Up closes + reverts (keeps value).
+                if (key === 'ArrowDown') {
+                    if (!this.isOpen())
+                        this.open();
+                }
+                else if (this.isOpen()) {
+                    this.query.set(this.selectedOption()?.getLabel() ?? '');
+                    this.close();
+                }
+                return;
+            }
+            if (!this.isOpen())
+                this.open();
+            else
+                this.keyboard.onKeydown(event); // move the active descendant
+            return;
+        }
+        if (key === 'Enter') {
+            if (this.isOpen()) {
+                event.preventDefault();
+                this.selectActive(); // select the active option (no-op if none / soft-disabled)
+            }
+            return;
+        }
+        if (key === 'Escape') {
+            if (this.isOpen()) {
+                event.preventDefault();
+                this.query.set(this.selectedOption()?.getLabel() ?? ''); // revert (keep value)
+                this.close();
+            }
+            return;
+        }
+        // Home/End/printable/Backspace: native text editing — NOT routed to the listbox (no type-ahead).
+    }
+    toggle() {
+        if (this.isDisabled() || this.isReadonly())
+            return; // pointer parity with the keydown/input guards (M1)
+        const el = this.triggerRef()?.nativeElement;
+        if (this.isOpen()) {
+            this.close();
+        }
+        else {
+            el?.focus(); // fires onFocus → seeds the editable text
+            this.open();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SkraCombobox, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: SkraCombobox, isStandalone: true, selector: "skra-combobox", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", filterChange: "filterChange" }, host: { properties: { "attr.data-skra-loading": "loading() ? \"\" : null", "attr.data-skra-empty": "!loading() && options().length === 0 ? \"\" : null" } }, providers: [{ provide: SKRA_LISTBOX_PANEL, useExisting: SkraCombobox }], exportAs: ["skraCombobox"], usesInheritance: true, ngImport: i0, template: `
+    <input
+      #trigger
+      class="skra-combobox-input"
+      type="text"
+      role="combobox"
+      autocomplete="off"
+      aria-autocomplete="list"
+      aria-haspopup="listbox"
+      [attr.id]="triggerId()"
+      [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-busy]="loading() ? 'true' : null"
+      [attr.placeholder]="placeholder()"
+      [disabled]="isDisabled()"
+      [readOnly]="isReadonly()"
+      [value]="displayValue()"
+      (focus)="onFocus()"
+      (input)="onInput($event)"
+      (keydown)="onTriggerKeydown($event)"
+      (blur)="onBlur()"
+    />
+    <button
+      class="skra-combobox-toggle"
+      type="button"
+      tabindex="-1"
+      aria-hidden="true"
+      [disabled]="isDisabled()"
+      (mousedown)="$event.preventDefault()"
+      (click)="toggle()"
+    >
+      <span class="skra-combobox-arrow" aria-hidden="true"></span>
+    </button>
+
+    <div
+      #panel
+      class="skra-combobox-listbox"
+      [id]="panelId"
+      role="listbox"
+      popover="auto"
+      (mousedown)="$event.preventDefault()"
+      (toggle)="onPanelToggle($event)"
+    >
+      <!-- ONE persistent live region (text swapped via @if) so loading/empty announce reliably —
+           a region injected on demand is unreliably spoken (ADR 0049 rule 4). Hidden when empty via
+           :empty in SCSS. -->
+      <div class="skra-combobox-status" role="status" aria-live="polite">
+        @if (loading()) {
+          <ng-content select="[skraLoadingIndicator]"></ng-content>
+          <span class="skra-combobox-spinner" aria-hidden="true"></span>
+        } @else if (options().length === 0) {
+          <ng-content select="[skraComboboxEmpty]"></ng-content>
+        }
+      </div>
+      <ng-content></ng-content>
+    </div>
+  `, isInline: true, styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:var(--skra-comp-combobox-gap);inline-size:100%;min-block-size:var(--skra-comp-combobox-min-block-size);box-sizing:border-box;margin:0;padding-inline:var(--skra-comp-combobox-padding-inline);background:var(--skra-comp-combobox-background);color:var(--skra-comp-combobox-foreground);border-color:var(--skra-comp-combobox-border-color);border-width:var(--skra-comp-combobox-border-width);border-style:var(--skra-comp-combobox-border-style);border-radius:var(--skra-comp-combobox-radius);box-shadow:var(--skra-comp-combobox-shadow);transition:background-color var(--skra-comp-combobox-motion-duration) var(--skra-comp-combobox-motion-easing),border-color var(--skra-comp-combobox-motion-duration) var(--skra-comp-combobox-motion-easing)}:host:has(.skra-combobox-input:focus-visible){outline:var(--skra-comp-combobox-focus-ring-width) solid var(--skra-comp-combobox-focus-ring-color);outline-offset:.125rem}:host([data-skra-disabled]){background:var(--skra-comp-combobox-background-disabled);color:var(--skra-comp-combobox-foreground-disabled)}:host([data-skra-readonly]){background:var(--skra-comp-combobox-background-readonly)}:host([data-skra-validation=invalid]){border-color:var(--skra-comp-combobox-border-color-validation-invalid)}.skra-combobox-input{flex:1 1 auto;min-inline-size:0;box-sizing:border-box;margin:0;padding-block:var(--skra-comp-combobox-padding-block);padding-inline:0;border:none;background:transparent;color:inherit;appearance:none;outline: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)}.skra-combobox-input::placeholder{color:var(--skra-comp-combobox-foreground-disabled)}.skra-combobox-input:disabled{color:var(--skra-comp-combobox-foreground-disabled);cursor:not-allowed}.skra-combobox-toggle{flex:none;display:inline-flex;align-items:center;justify-content:center;inline-size:var(--skra-comp-combobox-arrow-icon-size);block-size:var(--skra-comp-combobox-arrow-icon-size);margin:0;padding:0;border:none;background:transparent;cursor:pointer}.skra-combobox-toggle:disabled{cursor:not-allowed}.skra-combobox-arrow{inline-size:100%;block-size:100%;background-color:var(--skra-comp-combobox-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-combobox-motion-duration) var(--skra-comp-combobox-motion-easing)}:host:has(.skra-combobox-input[aria-expanded=true]) .skra-combobox-arrow{transform:rotate(180deg)}.skra-combobox-listbox{position:fixed;margin:0;inset:auto;box-sizing:border-box;padding-block:var(--skra-comp-combobox-panel-padding-block);padding-inline:var(--skra-comp-combobox-panel-padding-inline);background:var(--skra-comp-combobox-panel-background);color:var(--skra-comp-combobox-panel-foreground);border:var(--skra-comp-combobox-border-width) solid var(--skra-comp-combobox-panel-border-color);border-radius:var(--skra-comp-combobox-panel-radius);box-shadow:var(--skra-comp-combobox-panel-shadow);inline-size:max-content;max-block-size:var(--skra-comp-combobox-panel-max-block-size);overflow-y:auto;flex-direction:column;opacity:0;transition:opacity var(--skra-comp-combobox-motion-duration) var(--skra-comp-combobox-motion-easing),display var(--skra-comp-combobox-motion-duration) allow-discrete,overlay var(--skra-comp-combobox-motion-duration) allow-discrete}.skra-combobox-listbox:popover-open{display:flex;opacity:1}@starting-style{.skra-combobox-listbox:popover-open{opacity:0}}.skra-combobox-status{display:flex;align-items:center;gap:var(--skra-comp-combobox-gap);padding-block:var(--skra-comp-combobox-status-padding-block);padding-inline:var(--skra-comp-combobox-status-padding-inline);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-combobox-status:empty{display:none}:host([data-skra-empty]) .skra-combobox-status{color:var(--skra-comp-combobox-empty-foreground)}.skra-combobox-status:has([skraLoadingIndicator]) .skra-combobox-spinner{display:none}.skra-combobox-spinner{flex:none;inline-size:1em;block-size:1em;border:.125rem solid var(--skra-comp-combobox-loading-indicator-color);border-block-start-color:transparent;border-radius:50%;animation:skra-combobox-spin .6s linear infinite}@keyframes skra-combobox-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){:host,.skra-combobox-arrow,.skra-combobox-listbox{transition-duration:0ms}.skra-combobox-spinner{animation-duration:0ms}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SkraCombobox, decorators: [{
+            type: Component,
+            args: [{ selector: 'skra-combobox', standalone: true, exportAs: 'skraCombobox', template: `
+    <input
+      #trigger
+      class="skra-combobox-input"
+      type="text"
+      role="combobox"
+      autocomplete="off"
+      aria-autocomplete="list"
+      aria-haspopup="listbox"
+      [attr.id]="triggerId()"
+      [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-busy]="loading() ? 'true' : null"
+      [attr.placeholder]="placeholder()"
+      [disabled]="isDisabled()"
+      [readOnly]="isReadonly()"
+      [value]="displayValue()"
+      (focus)="onFocus()"
+      (input)="onInput($event)"
+      (keydown)="onTriggerKeydown($event)"
+      (blur)="onBlur()"
+    />
+    <button
+      class="skra-combobox-toggle"
+      type="button"
+      tabindex="-1"
+      aria-hidden="true"
+      [disabled]="isDisabled()"
+      (mousedown)="$event.preventDefault()"
+      (click)="toggle()"
+    >
+      <span class="skra-combobox-arrow" aria-hidden="true"></span>
+    </button>
+
+    <div
+      #panel
+      class="skra-combobox-listbox"
+      [id]="panelId"
+      role="listbox"
+      popover="auto"
+      (mousedown)="$event.preventDefault()"
+      (toggle)="onPanelToggle($event)"
+    >
+      <!-- ONE persistent live region (text swapped via @if) so loading/empty announce reliably —
+           a region injected on demand is unreliably spoken (ADR 0049 rule 4). Hidden when empty via
+           :empty in SCSS. -->
+      <div class="skra-combobox-status" role="status" aria-live="polite">
+        @if (loading()) {
+          <ng-content select="[skraLoadingIndicator]"></ng-content>
+          <span class="skra-combobox-spinner" aria-hidden="true"></span>
+        } @else if (options().length === 0) {
+          <ng-content select="[skraComboboxEmpty]"></ng-content>
+        }
+      </div>
+      <ng-content></ng-content>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: {
+                        '[attr.data-skra-loading]': 'loading() ? "" : null',
+                        '[attr.data-skra-empty]': '!loading() && options().length === 0 ? "" : null',
+                    }, providers: [{ provide: SKRA_LISTBOX_PANEL, useExisting: SkraCombobox }], styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:var(--skra-comp-combobox-gap);inline-size:100%;min-block-size:var(--skra-comp-combobox-min-block-size);box-sizing:border-box;margin:0;padding-inline:var(--skra-comp-combobox-padding-inline);background:var(--skra-comp-combobox-background);color:var(--skra-comp-combobox-foreground);border-color:var(--skra-comp-combobox-border-color);border-width:var(--skra-comp-combobox-border-width);border-style:var(--skra-comp-combobox-border-style);border-radius:var(--skra-comp-combobox-radius);box-shadow:var(--skra-comp-combobox-shadow);transition:background-color var(--skra-comp-combobox-motion-duration) var(--skra-comp-combobox-motion-easing),border-color var(--skra-comp-combobox-motion-duration) var(--skra-comp-combobox-motion-easing)}:host:has(.skra-combobox-input:focus-visible){outline:var(--skra-comp-combobox-focus-ring-width) solid var(--skra-comp-combobox-focus-ring-color);outline-offset:.125rem}:host([data-skra-disabled]){background:var(--skra-comp-combobox-background-disabled);color:var(--skra-comp-combobox-foreground-disabled)}:host([data-skra-readonly]){background:var(--skra-comp-combobox-background-readonly)}:host([data-skra-validation=invalid]){border-color:var(--skra-comp-combobox-border-color-validation-invalid)}.skra-combobox-input{flex:1 1 auto;min-inline-size:0;box-sizing:border-box;margin:0;padding-block:var(--skra-comp-combobox-padding-block);padding-inline:0;border:none;background:transparent;color:inherit;appearance:none;outline: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)}.skra-combobox-input::placeholder{color:var(--skra-comp-combobox-foreground-disabled)}.skra-combobox-input:disabled{color:var(--skra-comp-combobox-foreground-disabled);cursor:not-allowed}.skra-combobox-toggle{flex:none;display:inline-flex;align-items:center;justify-content:center;inline-size:var(--skra-comp-combobox-arrow-icon-size);block-size:var(--skra-comp-combobox-arrow-icon-size);margin:0;padding:0;border:none;background:transparent;cursor:pointer}.skra-combobox-toggle:disabled{cursor:not-allowed}.skra-combobox-arrow{inline-size:100%;block-size:100%;background-color:var(--skra-comp-combobox-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-combobox-motion-duration) var(--skra-comp-combobox-motion-easing)}:host:has(.skra-combobox-input[aria-expanded=true]) .skra-combobox-arrow{transform:rotate(180deg)}.skra-combobox-listbox{position:fixed;margin:0;inset:auto;box-sizing:border-box;padding-block:var(--skra-comp-combobox-panel-padding-block);padding-inline:var(--skra-comp-combobox-panel-padding-inline);background:var(--skra-comp-combobox-panel-background);color:var(--skra-comp-combobox-panel-foreground);border:var(--skra-comp-combobox-border-width) solid var(--skra-comp-combobox-panel-border-color);border-radius:var(--skra-comp-combobox-panel-radius);box-shadow:var(--skra-comp-combobox-panel-shadow);inline-size:max-content;max-block-size:var(--skra-comp-combobox-panel-max-block-size);overflow-y:auto;flex-direction:column;opacity:0;transition:opacity var(--skra-comp-combobox-motion-duration) var(--skra-comp-combobox-motion-easing),display var(--skra-comp-combobox-motion-duration) allow-discrete,overlay var(--skra-comp-combobox-motion-duration) allow-discrete}.skra-combobox-listbox:popover-open{display:flex;opacity:1}@starting-style{.skra-combobox-listbox:popover-open{opacity:0}}.skra-combobox-status{display:flex;align-items:center;gap:var(--skra-comp-combobox-gap);padding-block:var(--skra-comp-combobox-status-padding-block);padding-inline:var(--skra-comp-combobox-status-padding-inline);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-combobox-status:empty{display:none}:host([data-skra-empty]) .skra-combobox-status{color:var(--skra-comp-combobox-empty-foreground)}.skra-combobox-status:has([skraLoadingIndicator]) .skra-combobox-spinner{display:none}.skra-combobox-spinner{flex:none;inline-size:1em;block-size:1em;border:.125rem solid var(--skra-comp-combobox-loading-indicator-color);border-block-start-color:transparent;border-radius:50%;animation:skra-combobox-spin .6s linear infinite}@keyframes skra-combobox-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){:host,.skra-combobox-arrow,.skra-combobox-listbox{transition-duration:0ms}.skra-combobox-spinner{animation-duration:0ms}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }] } });
+
+/**
+ * SkraComboboxEmpty — the no-results marker (ADR 0049). Place on the element that should show inside the
+ * combobox listbox when the consumer's filter yields zero `skra-option` children:
+ *
+ *   <skra-combobox (filterChange)="query.set($event)" [value]="city()" (valueChange)="city.set($event)">
+ *     @for (c of visible(); track c.id) { <skra-option [value]="c.id">{{ c.name }}</skra-option> }
+ *     <span skraComboboxEmpty>No matches</span>
+ *   </skra-combobox>
+ *
+ * The text is consumer-supplied (i18n is the consumer's concern — Forge ships no hardcoded string).
+ * Forge toggles its visibility via `@if (!loading() && options().length === 0)`; the marker only carries
+ * the projection selector, so no logic lives here.
+ */
+class SkraComboboxEmpty {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SkraComboboxEmpty, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.7", type: SkraComboboxEmpty, isStandalone: true, selector: "[skraComboboxEmpty]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SkraComboboxEmpty, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[skraComboboxEmpty]',
+                    standalone: true,
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SkraCombobox, SkraComboboxEmpty };
+//# sourceMappingURL=skra-ui-combobox.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"skra-ui-combobox.mjs","sources":["../../../../libs/ui/combobox/src/lib/combobox/combobox.ts","../../../../libs/ui/combobox/src/lib/combobox/combobox-empty.ts","../../../../libs/ui/combobox/src/skra-ui-combobox.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  ViewEncapsulation,\n  afterRenderEffect,\n  booleanAttribute,\n  computed,\n  inject,\n  input,\n  output,\n  signal,\n} from '@angular/core';\n\nimport { _SkraListboxWidgetBase } 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 * SkraCombobox — the WAI-ARIA APG **Editable Combobox** (list autocomplete, manual selection): an\n * editable `<input role=\"combobox\" aria-autocomplete=\"list\">` whose top-layer listbox (Popover API,\n * `popover=\"auto\"`, ADR 0044) of projected `skra-option` children NARROWS as the user types. The first\n * Tier-3 / higher-order component. Single-cardinality (ADR 0046); the multi sibling is future work.\n *\n * - **Filtering + option set are CONSUMER-OWNED (ADR 0049):** Forge emits the typed text via\n *   `filterChange` (no debounce — timing is the consumer's); the consumer projects the matching\n *   `skra-option` subset (sync computed OR async fetch). There is NO `[items]` input and NO internal\n *   matcher — Forge renders exactly what is projected.\n * - **Value is OPTION-BOUND (ADR 0049):** `value = input<T>()` + `valueChange` (consumer-owned, ADR 037);\n *   a committed value is always an existing option's `T`. On cancel/blur the input text reverts to the\n *   selected option's label — typed text that matched nothing NEVER leaks as the value (free-text commit\n *   is the separate `skra-autocomplete`).\n * - **Async (ADR 0049/028):** `loading` reflects `aria-busy` + drives a panel loading branch\n *   (`[skraLoadingIndicator]` slot + fallback); an empty projected set drives the `[skraComboboxEmpty]`\n *   branch; both are announced via `aria-live`.\n *\n * The trigger-shape-agnostic substrate (field cascade, panel toggle/positioner, keyboard wiring,\n * open/close, the `SkraListboxPanel` selection seam) lives in {@link _SkraListboxWidgetBase}, shared\n * verbatim with the select family (ADR 0046 amendment). `skra-option` is reused verbatim — combobox\n * provides the `SKRA_LISTBOX_PANEL` token so the option's selection/keyboard/indicator wiring works\n * unchanged.\n *\n * Full contract: adr/specs/component-combobox-spec.md.\n */\n@Component({\n  selector: 'skra-combobox',\n  standalone: true,\n  exportAs: 'skraCombobox',\n  template: `\n    <input\n      #trigger\n      class=\"skra-combobox-input\"\n      type=\"text\"\n      role=\"combobox\"\n      autocomplete=\"off\"\n      aria-autocomplete=\"list\"\n      aria-haspopup=\"listbox\"\n      [attr.id]=\"triggerId()\"\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-busy]=\"loading() ? 'true' : null\"\n      [attr.placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"isReadonly()\"\n      [value]=\"displayValue()\"\n      (focus)=\"onFocus()\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onTriggerKeydown($event)\"\n      (blur)=\"onBlur()\"\n    />\n    <button\n      class=\"skra-combobox-toggle\"\n      type=\"button\"\n      tabindex=\"-1\"\n      aria-hidden=\"true\"\n      [disabled]=\"isDisabled()\"\n      (mousedown)=\"$event.preventDefault()\"\n      (click)=\"toggle()\"\n    >\n      <span class=\"skra-combobox-arrow\" aria-hidden=\"true\"></span>\n    </button>\n\n    <div\n      #panel\n      class=\"skra-combobox-listbox\"\n      [id]=\"panelId\"\n      role=\"listbox\"\n      popover=\"auto\"\n      (mousedown)=\"$event.preventDefault()\"\n      (toggle)=\"onPanelToggle($event)\"\n    >\n      <!-- ONE persistent live region (text swapped via @if) so loading/empty announce reliably —\n           a region injected on demand is unreliably spoken (ADR 0049 rule 4). Hidden when empty via\n           :empty in SCSS. -->\n      <div class=\"skra-combobox-status\" role=\"status\" aria-live=\"polite\">\n        @if (loading()) {\n          <ng-content select=\"[skraLoadingIndicator]\"></ng-content>\n          <span class=\"skra-combobox-spinner\" aria-hidden=\"true\"></span>\n        } @else if (options().length === 0) {\n          <ng-content select=\"[skraComboboxEmpty]\"></ng-content>\n        }\n      </div>\n      <ng-content></ng-content>\n    </div>\n  `,\n  styleUrl: './combobox.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.Emulated,\n  host: {\n    '[attr.data-skra-loading]': 'loading() ? \"\" : null',\n    '[attr.data-skra-empty]':\n      '!loading() && options().length === 0 ? \"\" : null',\n  },\n  providers: [{ provide: SKRA_LISTBOX_PANEL, useExisting: SkraCombobox }],\n})\nexport class SkraCombobox<T = unknown> extends _SkraListboxWidgetBase<T> {\n  /** Combobox panel token namespace — `--skra-comp-combobox-panel-*`. */\n  protected readonly panelTokenPrefix = 'combobox';\n\n  /** Consumer-owned value channel (ADR 037) — single, option-bound `T`. */\n  readonly value = input<T>();\n  /** Fires ONLY on user selection of an option — never on a programmatic `value()` change (ADR 037). */\n  readonly valueChange = output<T>();\n  /** The typed text, emitted on EVERY input change. Consumer-driven projection; NO Forge debounce (ADR 0049). */\n  readonly filterChange = output<string>();\n  /** Async hint (ADR 0049/028) — reflects `aria-busy` + drives the panel loading branch. */\n  readonly loading = input(false, { transform: booleanAttribute });\n  /** Cardinality hint (ADR 0046) — single-select. */\n  readonly multiple = false;\n\n  /** Internal editable-text state; emitted out via `filterChange`. NOT the value (ADR 0049). */\n  protected readonly query = signal('');\n  private readonly isFocused = signal(false);\n\n  private readonly hostEl = inject<ElementRef<HTMLElement>>(ElementRef);\n\n  /**\n   * Position the panel against — and match its width to — the HOST box, not the inner input. The input\n   * is inset (host padding + chevron), so anchoring to it would make a narrower, misaligned panel; the\n   * host gives full-width parity with `skra-select`.\n   */\n  protected override positioningAnchor(): HTMLElement {\n    return this.hostEl.nativeElement;\n  }\n\n  /** The option whose value matches `value()` (ADR 037 selection model) — feeds the displayed text + active seed. */\n  protected readonly selectedOption = computed(\n    () => this.options().find((o) => this.isSelected(o.value())) ?? null,\n  );\n\n  /**\n   * The text shown in the input: the live query while editing (focused), otherwise the selected option's\n   * label. This is the controlled-input seam that enforces the option-bound value (ADR 0049) — on blur the\n   * input snaps back to the selected label, so unmatched typed text never persists.\n   */\n  protected readonly displayValue = computed(() =>\n    this.isFocused() ? this.query() : (this.selectedOption()?.getLabel() ?? ''),\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 (consumer filtering adds fresh <skra-option>s) would throw NG0950.\n      // afterRender hooks never run on the server, so this stays SSR-safe. Covers both\n      // F-13 (initial render) and F-16 (runtime re-projection, surfaced in dogfood).\n      afterRenderEffect(() => {\n        const v = this.value();\n        if (v === undefined) return;\n        const matched = this.options().some((o) =>\n          this.compareWith()(o.value() as T, v),\n        );\n        if (!matched && this.options().length) {\n          console.warn(\n            '[skra-combobox] value has no matching <skra-option> in the projected set — the input ' +\n              'shows empty (likely a compareWith mismatch, or the selected option was filtered out).',\n          );\n        }\n      });\n    }\n  }\n\n  // ── SkraListboxPanel seam ──\n  isSelected(value: unknown): boolean {\n    const current = this.value();\n    return current !== undefined && this.compareWith()(current, value as T);\n  }\n\n  selectValue(value: unknown): void {\n    const opt =\n      this.options().find((o) =>\n        this.compareWith()(o.value() as T, value as T),\n      ) ?? null;\n    this.valueChange.emit(value as T);\n    // Optimistic display: show the picked option's label immediately (focus is retained).\n    this.query.set(opt?.getLabel() ?? '');\n    this.close(); // single-select: pick + close\n  }\n\n  protected activeSeedItem(): SkraListboxKeyboardItem | null {\n    return this.selectedOption();\n  }\n\n  // ── Editable-input trigger model (the divergence from the select-family button trigger) ──\n  protected onFocus(): void {\n    // Start editing from the current value's label (APG: the textbox shows the value, editable).\n    this.query.set(this.selectedOption()?.getLabel() ?? '');\n    this.isFocused.set(true);\n  }\n\n  protected onInput(event: Event): void {\n    if (this.isReadonly()) return;\n    const text = (event.target as HTMLInputElement).value;\n    this.query.set(text);\n    this.filterChange.emit(text); // ADR 0049 — consumer owns the matching + projection\n    if (!this.isOpen()) this.open();\n  }\n\n  protected onBlur(): void {\n    this.isFocused.set(false); // displayValue() snaps back to the selected label (option-bound, ADR 0049)\n    if (this.isOpen()) this.close();\n  }\n\n  protected onTriggerKeydown(event: KeyboardEvent): void {\n    if (this.isDisabled() || this.isReadonly()) return;\n    const key = event.key;\n\n    if (key === 'ArrowDown' || key === 'ArrowUp') {\n      event.preventDefault(); // do not move the text caret\n      if (event.altKey) {\n        // APG: Alt+Down opens (no active move); Alt+Up closes + reverts (keeps value).\n        if (key === 'ArrowDown') {\n          if (!this.isOpen()) this.open();\n        } else if (this.isOpen()) {\n          this.query.set(this.selectedOption()?.getLabel() ?? '');\n          this.close();\n        }\n        return;\n      }\n      if (!this.isOpen()) this.open();\n      else this.keyboard.onKeydown(event); // move the active descendant\n      return;\n    }\n    if (key === 'Enter') {\n      if (this.isOpen()) {\n        event.preventDefault();\n        this.selectActive(); // select the active option (no-op if none / soft-disabled)\n      }\n      return;\n    }\n    if (key === 'Escape') {\n      if (this.isOpen()) {\n        event.preventDefault();\n        this.query.set(this.selectedOption()?.getLabel() ?? ''); // revert (keep value)\n        this.close();\n      }\n      return;\n    }\n    // Home/End/printable/Backspace: native text editing — NOT routed to the listbox (no type-ahead).\n  }\n\n  protected toggle(): void {\n    if (this.isDisabled() || this.isReadonly()) return; // pointer parity with the keydown/input guards (M1)\n    const el = this.triggerRef()?.nativeElement;\n    if (this.isOpen()) {\n      this.close();\n    } else {\n      el?.focus(); // fires onFocus → seeds the editable text\n      this.open();\n    }\n  }\n}\n","import { Directive } from '@angular/core';\n\n/**\n * SkraComboboxEmpty — the no-results marker (ADR 0049). Place on the element that should show inside the\n * combobox listbox when the consumer's filter yields zero `skra-option` children:\n *\n *   <skra-combobox (filterChange)=\"query.set($event)\" [value]=\"city()\" (valueChange)=\"city.set($event)\">\n *     @for (c of visible(); track c.id) { <skra-option [value]=\"c.id\">{{ c.name }}</skra-option> }\n *     <span skraComboboxEmpty>No matches</span>\n *   </skra-combobox>\n *\n * The text is consumer-supplied (i18n is the consumer's concern — Forge ships no hardcoded string).\n * Forge toggles its visibility via `@if (!loading() && options().length === 0)`; the marker only carries\n * the projection selector, so no logic lives here.\n */\n@Directive({\n  selector: '[skraComboboxEmpty]',\n  standalone: true,\n})\nexport class SkraComboboxEmpty {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}