@skra/ui 0.2.0

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

@@ -0,0 +1,123 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, isDevMode, effect, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { SkraFieldContext } from '@skra/ui/field';
+
+/**
+ * Wires a native `<select>` inside `<skra-field>` to SkraFieldContext (ADR 013).
+ * Tier 1 Foundations primitive — **single-select only**: a dropdown, or a
+ * single-select scrolling listbox via the native `[size]` attribute.
+ *
+ * Native `[multiple]` is deliberately NOT supported (the directive rejects it,
+ * see below). Native `<select multiple>` UX is not production-grade and cannot
+ * be fixed at the native-`<select>` tier: selection requires modifier keys or
+ * drag, the plain-click-toggle affordance exists only for a bare `<select
+ * multiple>` in some engines (and breaks with an explicit `[size]`), and the
+ * option markers are UA-drawn / unstylable cross-browser. Multi-select — chip
+ * display, search, custom option templates, and a styleable per-row checkbox —
+ * is wholly a Tier 2 `skra-select` (CDK listbox) concern per
+ * `adr/specs/0039-select-directive-spec.md` §1.1 / §4.1.
+ *
+ *   <skra-field>
+ *     <label skraLabelFor>Country</label>
+ *     <select skraSelect [value]="country()" (change)="country.set($any($event.target).value)">
+ *       <option value="pl">Poland</option>
+ *       <option value="de">Germany</option>
+ *     </select>
+ *   </skra-field>
+ *
+ * Native `<select>` is the only web-platform widget whose dropdown renders in
+ * the OS / browser top-layer, above modal `<dialog>`, above Shadow DOM
+ * boundaries, above z-index stacking contexts. By staying native at Tier 1 we
+ * inherit that for free — Tier 2 custom listbox will solve the same problem
+ * via CDK overlay + Top Layer API.
+ *
+ * Value channel stays consumer-owned per ADR 037: bind via native `[value]` +
+ * `(change)`, Reactive Forms `formControlName`, Signal Forms `[formField]`,
+ * or `[(ngModel)]` — all work orthogonally.
+ *
+ * `readonly` is ARIA-only because HTML spec does not apply native `[readonly]`
+ * to `<select>` (same gotcha as `<input type="checkbox|radio">`). Unlike a text
+ * input, though, a native `<select>` is an *uncontrolled* widget: if the listbox
+ * opens and the user picks an option, the displayed value changes regardless of
+ * the consumer's binding — so "consumer prevents change" cannot actually hold a
+ * native select readonly. The directive therefore enforces readonly behaviourally
+ * (blocks the picker from opening / the value from changing — see
+ * `blockWhenReadonly` / `blockKeyWhenReadonly`), mirroring the imperative
+ * `el.disabled` enforcement below. Both states are made non-interactive; only
+ * readonly stays focusable + un-greyed and presents as the bare value. This is
+ * interaction integrity for the control's own state — NOT a value channel, so the
+ * ADR 037 no-`@angular/forms` / no-CVA boundary is untouched.
+ */
+class SkraNativeSelect {
+    el = inject(ElementRef);
+    context = inject(SkraFieldContext);
+    constructor() {
+        const el = this.el.nativeElement;
+        // Reject native multi-select loudly in dev (mirrors the mandatory-context
+        // throw — Forge fails on contract violations rather than degrading
+        // silently). Dev-only: never crashes a production bundle. A `<select
+        // multiple>` that truly wants native UX can drop `skraSelect` and stay raw
+        // HTML; for a real multi-select, use the Tier 2 <skra-select>.
+        if (isDevMode() && el.multiple) {
+            throw new Error('[skraSelect] does not support the native [multiple] attribute at ' +
+                'Tier 1. Native multi-select UX is not production-grade (modifier-key/' +
+                'drag selection, UA-drawn unstylable markers, browser-fragile) and ' +
+                'cannot be fixed at the native <select> tier. Use a single-select ' +
+                '<select skraSelect> (optionally with [size] for a listbox), or the ' +
+                'Tier 2 <skra-select> (CDK listbox) for real multi-select. See ' +
+                'adr/specs/0039-select-directive-spec.md §4.1.');
+        }
+        effect(() => {
+            el.disabled = this.context.isDisabled();
+        });
+    }
+    /**
+     * Readonly: suppress the pointer affordance that opens the native listbox.
+     * `preventDefault` on `mousedown` stops the picker from opening (and, on a
+     * native select, focus-on-click — Tab focus still works, which is the right
+     * trade-off for a value-display control).
+     */
+    blockWhenReadonly(event) {
+        if (this.context.isReadonly())
+            event.preventDefault();
+    }
+    /**
+     * Readonly: suppress every keyboard affordance that opens or mutates the
+     * select, while letting Tab through for focus traversal. Space / Enter /
+     * Alt+ArrowDown open the listbox; bare Arrows + first-letter typeahead change
+     * the value inline without opening it — all are value-changing on a native
+     * select, so all are blocked in readonly.
+     */
+    blockKeyWhenReadonly(event) {
+        if (this.context.isReadonly() && event.key !== 'Tab') {
+            event.preventDefault();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SkraNativeSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: SkraNativeSelect, isStandalone: true, selector: "select[skraSelect]", host: { listeners: { "mousedown": "blockWhenReadonly($event)", "keydown": "blockKeyWhenReadonly($event)" }, properties: { "id": "context.fieldId()", "attr.aria-describedby": "context.describedByIds()", "attr.aria-invalid": "context.hasError() ? \"true\" : null", "attr.aria-required": "context.isRequired() ? \"true\" : null", "attr.aria-readonly": "context.isReadonly() ? \"true\" : null" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{background-color:var(--skra-comp-field-background);color:var(--skra-comp-field-foreground);border-color:var(--skra-comp-field-border-color);border-width:var(--skra-comp-field-border-width);border-style:var(--skra-comp-field-border-style);border-radius:var(--skra-comp-field-radius);padding-block:var(--skra-comp-field-padding-block);padding-inline:var(--skra-comp-field-padding-inline);box-shadow:var(--skra-comp-field-shadow);font:inherit;outline:none;cursor:pointer;transition:background-color var(--skra-comp-field-motion-duration) var(--skra-comp-field-motion-easing),border-color var(--skra-comp-field-motion-duration) var(--skra-comp-field-motion-easing),color var(--skra-comp-field-motion-duration) var(--skra-comp-field-motion-easing),box-shadow var(--skra-comp-field-motion-duration) var(--skra-comp-field-motion-easing)}:host(:not([size])){appearance:none;padding-inline-end:var(--skra-comp-field-select-arrow-padding-inline-end);background-image:var(--skra-comp-field-select-chevron-glyph);background-repeat:no-repeat;background-position:right var(--skra-comp-field-padding-inline) center;background-size:var(--skra-comp-field-select-arrow-icon-size)}:host([size]){background-image:none;cursor:default}:host(:not([size]):hover:not(:disabled):not([aria-readonly=true])){background-color:var(--skra-comp-field-background-hover);border-color:var(--skra-comp-field-border-color-hover)}:host(:focus-visible){border-color:var(--skra-comp-field-focus-ring-color);box-shadow:0 0 0 var(--skra-comp-field-focus-ring-width) var(--skra-comp-field-focus-ring-color)}:host(:disabled){cursor:not-allowed;opacity:var(--skra-sys-opacity-disabled)}:host([aria-readonly=true]){cursor:default}:host([aria-invalid=true]){border-color:var(--skra-comp-field-error-color)}:host([aria-invalid=true]:focus-visible){box-shadow:0 0 0 var(--skra-comp-field-focus-ring-width) var(--skra-comp-field-error-color)}@media(prefers-reduced-motion:reduce){:host{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SkraNativeSelect, decorators: [{
+            type: Component,
+            args: [{ selector: 'select[skraSelect]', standalone: true, template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: {
+                        '[id]': 'context.fieldId()',
+                        '[attr.aria-describedby]': 'context.describedByIds()',
+                        '[attr.aria-invalid]': 'context.hasError() ? "true" : null',
+                        '[attr.aria-required]': 'context.isRequired() ? "true" : null',
+                        '[attr.aria-readonly]': 'context.isReadonly() ? "true" : null',
+                        // No `data-skra-readonly` — slice consumes `[aria-readonly="true"]`
+                        // directly; emitting a parallel data-attr would be dead surface
+                        // (no slice selector reads it). Matches checkbox/radio readonly pattern
+                        // in `_form-controls.scss` (ARIA-only branch, no data-attr companion).
+                        '(mousedown)': 'blockWhenReadonly($event)',
+                        '(keydown)': 'blockKeyWhenReadonly($event)',
+                    }, styles: [":host{background-color:var(--skra-comp-field-background);color:var(--skra-comp-field-foreground);border-color:var(--skra-comp-field-border-color);border-width:var(--skra-comp-field-border-width);border-style:var(--skra-comp-field-border-style);border-radius:var(--skra-comp-field-radius);padding-block:var(--skra-comp-field-padding-block);padding-inline:var(--skra-comp-field-padding-inline);box-shadow:var(--skra-comp-field-shadow);font:inherit;outline:none;cursor:pointer;transition:background-color var(--skra-comp-field-motion-duration) var(--skra-comp-field-motion-easing),border-color var(--skra-comp-field-motion-duration) var(--skra-comp-field-motion-easing),color var(--skra-comp-field-motion-duration) var(--skra-comp-field-motion-easing),box-shadow var(--skra-comp-field-motion-duration) var(--skra-comp-field-motion-easing)}:host(:not([size])){appearance:none;padding-inline-end:var(--skra-comp-field-select-arrow-padding-inline-end);background-image:var(--skra-comp-field-select-chevron-glyph);background-repeat:no-repeat;background-position:right var(--skra-comp-field-padding-inline) center;background-size:var(--skra-comp-field-select-arrow-icon-size)}:host([size]){background-image:none;cursor:default}:host(:not([size]):hover:not(:disabled):not([aria-readonly=true])){background-color:var(--skra-comp-field-background-hover);border-color:var(--skra-comp-field-border-color-hover)}:host(:focus-visible){border-color:var(--skra-comp-field-focus-ring-color);box-shadow:0 0 0 var(--skra-comp-field-focus-ring-width) var(--skra-comp-field-focus-ring-color)}:host(:disabled){cursor:not-allowed;opacity:var(--skra-sys-opacity-disabled)}:host([aria-readonly=true]){cursor:default}:host([aria-invalid=true]){border-color:var(--skra-comp-field-error-color)}:host([aria-invalid=true]:focus-visible){box-shadow:0 0 0 var(--skra-comp-field-focus-ring-width) var(--skra-comp-field-error-color)}@media(prefers-reduced-motion:reduce){:host{transition:none}}\n"] }]
+        }], ctorParameters: () => [] });
+
+// select[skraSelect] native form-control directive (SkraNativeSelect — ADR 0054 §4.3).
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SkraNativeSelect };
+//# sourceMappingURL=skra-ui-native-select.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"skra-ui-native-select.mjs","sources":["../../../../libs/ui/native-select/src/lib/select/select.ts","../../../../libs/ui/native-select/src/index.ts","../../../../libs/ui/native-select/src/skra-ui-native-select.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  ViewEncapsulation,\n  effect,\n  inject,\n  isDevMode,\n} from '@angular/core';\nimport { SkraFieldContext } from '@skra/ui/field';\n\n/**\n * Wires a native `<select>` inside `<skra-field>` to SkraFieldContext (ADR 013).\n * Tier 1 Foundations primitive — **single-select only**: a dropdown, or a\n * single-select scrolling listbox via the native `[size]` attribute.\n *\n * Native `[multiple]` is deliberately NOT supported (the directive rejects it,\n * see below). Native `<select multiple>` UX is not production-grade and cannot\n * be fixed at the native-`<select>` tier: selection requires modifier keys or\n * drag, the plain-click-toggle affordance exists only for a bare `<select\n * multiple>` in some engines (and breaks with an explicit `[size]`), and the\n * option markers are UA-drawn / unstylable cross-browser. Multi-select — chip\n * display, search, custom option templates, and a styleable per-row checkbox —\n * is wholly a Tier 2 `skra-select` (CDK listbox) concern per\n * `adr/specs/0039-select-directive-spec.md` §1.1 / §4.1.\n *\n *   <skra-field>\n *     <label skraLabelFor>Country</label>\n *     <select skraSelect [value]=\"country()\" (change)=\"country.set($any($event.target).value)\">\n *       <option value=\"pl\">Poland</option>\n *       <option value=\"de\">Germany</option>\n *     </select>\n *   </skra-field>\n *\n * Native `<select>` is the only web-platform widget whose dropdown renders in\n * the OS / browser top-layer, above modal `<dialog>`, above Shadow DOM\n * boundaries, above z-index stacking contexts. By staying native at Tier 1 we\n * inherit that for free — Tier 2 custom listbox will solve the same problem\n * via CDK overlay + Top Layer API.\n *\n * Value channel stays consumer-owned per ADR 037: bind via native `[value]` +\n * `(change)`, Reactive Forms `formControlName`, Signal Forms `[formField]`,\n * or `[(ngModel)]` — all work orthogonally.\n *\n * `readonly` is ARIA-only because HTML spec does not apply native `[readonly]`\n * to `<select>` (same gotcha as `<input type=\"checkbox|radio\">`). Unlike a text\n * input, though, a native `<select>` is an *uncontrolled* widget: if the listbox\n * opens and the user picks an option, the displayed value changes regardless of\n * the consumer's binding — so \"consumer prevents change\" cannot actually hold a\n * native select readonly. The directive therefore enforces readonly behaviourally\n * (blocks the picker from opening / the value from changing — see\n * `blockWhenReadonly` / `blockKeyWhenReadonly`), mirroring the imperative\n * `el.disabled` enforcement below. Both states are made non-interactive; only\n * readonly stays focusable + un-greyed and presents as the bare value. This is\n * interaction integrity for the control's own state — NOT a value channel, so the\n * ADR 037 no-`@angular/forms` / no-CVA boundary is untouched.\n */\n@Component({\n  selector: 'select[skraSelect]',\n  standalone: true,\n  // Content-bearing host: <ng-content> projects the consumer's\n  // <option>/<optgroup> children through. `template: ''` (as used for the void\n  // <input> host) would discard them — see ADR 040 §4.\n  template: '<ng-content></ng-content>',\n  styleUrl: './select.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.Emulated,\n  host: {\n    '[id]': 'context.fieldId()',\n    '[attr.aria-describedby]': 'context.describedByIds()',\n    '[attr.aria-invalid]': 'context.hasError() ? \"true\" : null',\n    '[attr.aria-required]': 'context.isRequired() ? \"true\" : null',\n    '[attr.aria-readonly]': 'context.isReadonly() ? \"true\" : null',\n    // No `data-skra-readonly` — slice consumes `[aria-readonly=\"true\"]`\n    // directly; emitting a parallel data-attr would be dead surface\n    // (no slice selector reads it). Matches checkbox/radio readonly pattern\n    // in `_form-controls.scss` (ARIA-only branch, no data-attr companion).\n    '(mousedown)': 'blockWhenReadonly($event)',\n    '(keydown)': 'blockKeyWhenReadonly($event)',\n  },\n})\nexport class SkraNativeSelect {\n  private readonly el = inject<ElementRef<HTMLSelectElement>>(ElementRef);\n  readonly context = inject(SkraFieldContext);\n\n  constructor() {\n    const el = this.el.nativeElement;\n\n    // Reject native multi-select loudly in dev (mirrors the mandatory-context\n    // throw — Forge fails on contract violations rather than degrading\n    // silently). Dev-only: never crashes a production bundle. A `<select\n    // multiple>` that truly wants native UX can drop `skraSelect` and stay raw\n    // HTML; for a real multi-select, use the Tier 2 <skra-select>.\n    if (isDevMode() && el.multiple) {\n      throw new Error(\n        '[skraSelect] does not support the native [multiple] attribute at ' +\n          'Tier 1. Native multi-select UX is not production-grade (modifier-key/' +\n          'drag selection, UA-drawn unstylable markers, browser-fragile) and ' +\n          'cannot be fixed at the native <select> tier. Use a single-select ' +\n          '<select skraSelect> (optionally with [size] for a listbox), or the ' +\n          'Tier 2 <skra-select> (CDK listbox) for real multi-select. See ' +\n          'adr/specs/0039-select-directive-spec.md §4.1.',\n      );\n    }\n\n    effect(() => {\n      el.disabled = this.context.isDisabled();\n    });\n  }\n\n  /**\n   * Readonly: suppress the pointer affordance that opens the native listbox.\n   * `preventDefault` on `mousedown` stops the picker from opening (and, on a\n   * native select, focus-on-click — Tab focus still works, which is the right\n   * trade-off for a value-display control).\n   */\n  protected blockWhenReadonly(event: Event): void {\n    if (this.context.isReadonly()) event.preventDefault();\n  }\n\n  /**\n   * Readonly: suppress every keyboard affordance that opens or mutates the\n   * select, while letting Tab through for focus traversal. Space / Enter /\n   * Alt+ArrowDown open the listbox; bare Arrows + first-letter typeahead change\n   * the value inline without opening it — all are value-changing on a native\n   * select, so all are blocked in readonly.\n   */\n  protected blockKeyWhenReadonly(event: KeyboardEvent): void {\n    if (this.context.isReadonly() && event.key !== 'Tab') {\n      event.preventDefault();\n    }\n  }\n}\n","// select[skraSelect] native form-control directive (SkraNativeSelect — ADR 0054 §4.3).\nexport * from './lib/select/select';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAWA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CG;MAyBU,gBAAgB,CAAA;AACV,IAAA,EAAE,GAAG,MAAM,CAAgC,UAAU,CAAC;AAC9D,IAAA,OAAO,GAAG,MAAM,CAAC,gBAAgB,CAAC;AAE3C,IAAA,WAAA,GAAA;AACE,QAAA,MAAM,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa;;;;;;AAOhC,QAAA,IAAI,SAAS,EAAE,IAAI,EAAE,CAAC,QAAQ,EAAE;YAC9B,MAAM,IAAI,KAAK,CACb,mEAAmE;gBACjE,uEAAuE;gBACvE,oEAAoE;gBACpE,mEAAmE;gBACnE,qEAAqE;gBACrE,gEAAgE;AAChE,gBAAA,+CAA+C,CAClD;QACH;QAEA,MAAM,CAAC,MAAK;YACV,EAAE,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE;AACzC,QAAA,CAAC,CAAC;IACJ;AAEA;;;;;AAKG;AACO,IAAA,iBAAiB,CAAC,KAAY,EAAA;AACtC,QAAA,IAAI,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE;YAAE,KAAK,CAAC,cAAc,EAAE;IACvD;AAEA;;;;;;AAMG;AACO,IAAA,oBAAoB,CAAC,KAAoB,EAAA;AACjD,QAAA,IAAI,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE;YACpD,KAAK,CAAC,cAAc,EAAE;QACxB;IACF;uGAlDW,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAhB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,gBAAgB,ydAlBjB,2BAA2B,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,26DAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAkB1B,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAxB5B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,oBAAoB,EAAA,UAAA,EAClB,IAAI,EAAA,QAAA,EAIN,2BAA2B,EAAA,eAAA,EAEpB,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,QAAQ,EAAA,IAAA,EACnC;AACJ,wBAAA,MAAM,EAAE,mBAAmB;AAC3B,wBAAA,yBAAyB,EAAE,0BAA0B;AACrD,wBAAA,qBAAqB,EAAE,oCAAoC;AAC3D,wBAAA,sBAAsB,EAAE,sCAAsC;AAC9D,wBAAA,sBAAsB,EAAE,sCAAsC;;;;;AAK9D,wBAAA,aAAa,EAAE,2BAA2B;AAC1C,wBAAA,WAAW,EAAE,8BAA8B;AAC5C,qBAAA,EAAA,MAAA,EAAA,CAAA,26DAAA,CAAA,EAAA;;;AC/EH;;ACAA;;AAEG;;;;"}

package/fesm2022/skra-ui-popover.mjs

@@ -0,0 +1,158 @@
+import * as i0 from '@angular/core';
+import { input, inject, ElementRef, Renderer2, afterNextRender, DestroyRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { _attachPositioner } from '@skra/ui/core';
+
+/**
+ * SkraPopover — a NON-MODAL, anchored panel of arbitrary (interactive) content, rendered in the
+ * browser TOP LAYER via the native Popover API (`popover="auto"`), per ADR 0044. It is the middle
+ * ground between Tooltip (supplementary, non-interactive, hover/focus) and the page-blocking modal
+ * Dialog.
+ *
+ * SHAPE (scope 2026-06-06): a Component on the PANEL with projected content — NOT a directive on the
+ * trigger + `TemplateRef`. The trigger is the consumer's own button linked by the native
+ * `popovertarget` attribute (zero Forge trigger API); toggle, light-dismiss (pointer-outside),
+ * Escape and invocation-order stacking are ALL platform-owned (contrast Tooltip's `popover="manual"`,
+ * which hand-wires Escape). The consumer MUST give `<skra-popover>` an `id` so `popovertarget` can
+ * reference it.
+ *
+ *   <button skraButton popovertarget="user-menu">Account</button>
+ *   <skra-popover id="user-menu"> …interactive content… </skra-popover>
+ *
+ * Forge owns only: the token-driven surface (see `popover.scss`), positioning via `SkraPositioner`
+ * (geometry-only inline; ADR 0044 §3 rules 4–5), and the disclosure ARIA on the trigger
+ * (`aria-expanded` / `aria-controls`). Focus is NOT trapped and NOT force-moved (non-modal — ADR 0044
+ * §3 rule 8); reachability + focus-return are native to the Popover API. Panel naming is the
+ * consumer's `aria-labelledby` → projected heading (ADR 033 container carve-out — no `ariaLabel`
+ * input). A right-click context menu is NOT a Popover concern (→ `skra-menu` + recipe; SRP + WCAG).
+ *
+ * Full contract: adr/specs/component-popover-spec.md.
+ */
+class SkraPopover {
+    /** Placement intent; `flip`/`shift` adjust at runtime. */
+    placement = input('bottom', ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+    host = inject(ElementRef);
+    renderer = inject(Renderer2);
+    /** The consumer's `[popovertarget]` button, resolved once (lazily-idempotent via `resolved`). */
+    trigger = null;
+    resolved = false;
+    positioner;
+    constructor() {
+        // All imperative DOM wiring lives in afterNextRender — a browser-only hook, so the native listener
+        // and the trigger resolution never run on the server (SSR-safe by construction; O-18).
+        afterNextRender(() => {
+            // Imperative (NOT host-metadata) so a consumer `(toggle)` binding does not shadow it — see host {}.
+            this.host.nativeElement.addEventListener('toggle', this.onToggleNative);
+            // Resolve + wire the trigger after the view exists (the trigger may be a later sibling), so the
+            // disclosure relationship (aria-expanded="false" + aria-controls) is present before first open.
+            this.ensureTrigger();
+        });
+        inject(DestroyRef).onDestroy(() => this.teardown());
+    }
+    // ── Toggle (imperative native listener — see host {} note) ────────────────────
+    onToggleNative = (event) => {
+        if (event.newState === 'open')
+            this.onOpen();
+        else
+            this.onClose();
+    };
+    onOpen() {
+        const anchor = this.ensureTrigger(); // safety net if afterNextRender has not yet run
+        if (anchor) {
+            this.renderer.setAttribute(anchor, 'aria-expanded', 'true');
+        }
+        else {
+            return; // orphan popover (dev-warned at init); nothing to anchor to.
+        }
+        this.positioner?.destroy();
+        this.positioner = _attachPositioner(anchor, this.host.nativeElement, () => ({
+            placement: this.placement(),
+            offset: this.cssLenPx('--skra-comp-popover-offset'),
+            viewportPadding: this.cssLenPx('--skra-comp-popover-viewport-padding'),
+        }));
+    }
+    onClose() {
+        if (this.trigger) {
+            this.renderer.setAttribute(this.trigger, 'aria-expanded', 'false');
+        }
+        this.positioner?.destroy();
+        this.positioner = undefined;
+    }
+    /**
+     * Resolve the `[popovertarget]` trigger and establish the disclosure ARIA on it (sanctioned a11y
+     * wiring, ADR 013-style — not style mutation). Idempotent: runs at most once. Returns the trigger
+     * (or null for an orphan popover, dev-warned once).
+     */
+    ensureTrigger() {
+        if (this.resolved)
+            return this.trigger;
+        this.resolved = true;
+        const id = this.host.nativeElement.id;
+        if (!id) {
+            if (typeof ngDevMode === 'undefined' || ngDevMode) {
+                console.warn('[skra-popover] has no `id` — it cannot be targeted by a `popovertarget` ' +
+                    'trigger and the disclosure ARIA (aria-expanded/aria-controls) cannot be wired. ' +
+                    'Give the popover an id and point the trigger at it: ' +
+                    '<button popovertarget="my-id">…</button> <skra-popover id="my-id">…');
+            }
+            return null;
+        }
+        // Match by attribute value rather than a built selector — no escaping needed, robust to ids
+        // with special characters (and `CSS.escape` is not universally available).
+        this.trigger =
+            Array.from(document.querySelectorAll('[popovertarget]')).find((el) => el.getAttribute('popovertarget') === id) ?? null;
+        if (!this.trigger) {
+            if (typeof ngDevMode === 'undefined' || ngDevMode) {
+                console.warn(`[skra-popover] no trigger found with [popovertarget="${id}"] — the popover ` +
+                    'is unreachable and has no element to carry aria-expanded/aria-controls. ' +
+                    'Add a focusable trigger button with the matching popovertarget.');
+            }
+            return null;
+        }
+        // Establish the disclosure relationship before the first open (APG Disclosure).
+        this.renderer.setAttribute(this.trigger, 'aria-controls', id);
+        this.renderer.setAttribute(this.trigger, 'aria-expanded', 'false');
+        return this.trigger;
+    }
+    /** Read a length comp token (px/rem) off the host computed style for the positioner. */
+    cssLenPx(prop) {
+        const raw = getComputedStyle(this.host.nativeElement)
+            .getPropertyValue(prop)
+            .trim();
+        if (raw.endsWith('px'))
+            return parseFloat(raw);
+        if (raw.endsWith('rem')) {
+            const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+            return parseFloat(raw) * rootFontSize;
+        }
+        return parseFloat(raw) || 0;
+    }
+    teardown() {
+        this.host.nativeElement.removeEventListener('toggle', this.onToggleNative);
+        this.positioner?.destroy();
+        if (this.trigger) {
+            this.renderer.removeAttribute(this.trigger, 'aria-expanded');
+            this.renderer.removeAttribute(this.trigger, 'aria-controls');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SkraPopover, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.7", type: SkraPopover, isStandalone: true, selector: "skra-popover", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "popover": "auto" } }, exportAs: ["skraPopover"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["@charset \"UTF-8\";:host{position:fixed;margin:0;inset:auto;box-sizing:border-box;background:var(--skra-comp-popover-background);color:var(--skra-comp-popover-foreground);border-color:var(--skra-comp-popover-border-color);border-width:var(--skra-comp-popover-border-width);border-style:var(--skra-comp-popover-border-style);border-radius:var(--skra-comp-popover-radius);padding-block:var(--skra-comp-popover-padding-block);padding-inline:var(--skra-comp-popover-padding-inline);box-shadow:var(--skra-comp-popover-shadow);inline-size:max-content;max-inline-size:var(--skra-comp-popover-max-inline-size);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);opacity:0;transition:opacity var(--skra-comp-popover-motion-duration) var(--skra-comp-popover-motion-easing),display var(--skra-comp-popover-motion-duration) allow-discrete,overlay var(--skra-comp-popover-motion-duration) allow-discrete}:host(:popover-open){display:block;opacity:1}@starting-style{:host(:popover-open){opacity:0}}@media(prefers-reduced-motion:reduce){:host{transition-duration:0ms}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SkraPopover, decorators: [{
+            type: Component,
+            args: [{ selector: 'skra-popover', standalone: true, exportAs: 'skraPopover', template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: {
+                        // Native top layer + platform-owned toggle / light-dismiss / Escape / stacking (ADR 0044).
+                        popover: 'auto',
+                        // NOTE: `toggle` is wired IMPERATIVELY (addEventListener) in the constructor, NOT as a host listener.
+                        // A consumer template binding `(toggle)` on <skra-popover> (a documented side-effect path) SHADOWS a
+                        // host-metadata `(toggle)` listener for the same event — which would silently break positioning +
+                        // aria-expanded. A raw `addEventListener` fires alongside the consumer's binding. (Found via the
+                        // skra-menu browser probe, 2026-06-07; same fix applied there.)
+                    }, styles: ["@charset \"UTF-8\";:host{position:fixed;margin:0;inset:auto;box-sizing:border-box;background:var(--skra-comp-popover-background);color:var(--skra-comp-popover-foreground);border-color:var(--skra-comp-popover-border-color);border-width:var(--skra-comp-popover-border-width);border-style:var(--skra-comp-popover-border-style);border-radius:var(--skra-comp-popover-radius);padding-block:var(--skra-comp-popover-padding-block);padding-inline:var(--skra-comp-popover-padding-inline);box-shadow:var(--skra-comp-popover-shadow);inline-size:max-content;max-inline-size:var(--skra-comp-popover-max-inline-size);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);opacity:0;transition:opacity var(--skra-comp-popover-motion-duration) var(--skra-comp-popover-motion-easing),display var(--skra-comp-popover-motion-duration) allow-discrete,overlay var(--skra-comp-popover-motion-duration) allow-discrete}:host(:popover-open){display:block;opacity:1}@starting-style{:host(:popover-open){opacity:0}}@media(prefers-reduced-motion:reduce){:host{transition-duration:0ms}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SkraPopover };
+//# sourceMappingURL=skra-ui-popover.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"skra-ui-popover.mjs","sources":["../../../../libs/ui/popover/src/lib/popover/popover.ts","../../../../libs/ui/popover/src/skra-ui-popover.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  ElementRef,\n  Renderer2,\n  ViewEncapsulation,\n  afterNextRender,\n  inject,\n  input,\n} from '@angular/core';\n\nimport {\n  _attachPositioner,\n  type SkraPlacement,\n  type _PositionerHandle,\n} from '@skra/ui/core';\n\ndeclare const ngDevMode: boolean | undefined;\n\n/**\n * SkraPopover — a NON-MODAL, anchored panel of arbitrary (interactive) content, rendered in the\n * browser TOP LAYER via the native Popover API (`popover=\"auto\"`), per ADR 0044. It is the middle\n * ground between Tooltip (supplementary, non-interactive, hover/focus) and the page-blocking modal\n * Dialog.\n *\n * SHAPE (scope 2026-06-06): a Component on the PANEL with projected content — NOT a directive on the\n * trigger + `TemplateRef`. The trigger is the consumer's own button linked by the native\n * `popovertarget` attribute (zero Forge trigger API); toggle, light-dismiss (pointer-outside),\n * Escape and invocation-order stacking are ALL platform-owned (contrast Tooltip's `popover=\"manual\"`,\n * which hand-wires Escape). The consumer MUST give `<skra-popover>` an `id` so `popovertarget` can\n * reference it.\n *\n *   <button skraButton popovertarget=\"user-menu\">Account</button>\n *   <skra-popover id=\"user-menu\"> …interactive content… </skra-popover>\n *\n * Forge owns only: the token-driven surface (see `popover.scss`), positioning via `SkraPositioner`\n * (geometry-only inline; ADR 0044 §3 rules 4–5), and the disclosure ARIA on the trigger\n * (`aria-expanded` / `aria-controls`). Focus is NOT trapped and NOT force-moved (non-modal — ADR 0044\n * §3 rule 8); reachability + focus-return are native to the Popover API. Panel naming is the\n * consumer's `aria-labelledby` → projected heading (ADR 033 container carve-out — no `ariaLabel`\n * input). A right-click context menu is NOT a Popover concern (→ `skra-menu` + recipe; SRP + WCAG).\n *\n * Full contract: adr/specs/component-popover-spec.md.\n */\n@Component({\n  selector: 'skra-popover',\n  standalone: true,\n  exportAs: 'skraPopover',\n  template: '<ng-content></ng-content>',\n  styleUrl: './popover.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.Emulated,\n  host: {\n    // Native top layer + platform-owned toggle / light-dismiss / Escape / stacking (ADR 0044).\n    popover: 'auto',\n    // NOTE: `toggle` is wired IMPERATIVELY (addEventListener) in the constructor, NOT as a host listener.\n    // A consumer template binding `(toggle)` on <skra-popover> (a documented side-effect path) SHADOWS a\n    // host-metadata `(toggle)` listener for the same event — which would silently break positioning +\n    // aria-expanded. A raw `addEventListener` fires alongside the consumer's binding. (Found via the\n    // skra-menu browser probe, 2026-06-07; same fix applied there.)\n  },\n})\nexport class SkraPopover {\n  /** Placement intent; `flip`/`shift` adjust at runtime. */\n  readonly placement = input<SkraPlacement>('bottom');\n\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly renderer = inject(Renderer2);\n\n  /** The consumer's `[popovertarget]` button, resolved once (lazily-idempotent via `resolved`). */\n  private trigger: HTMLElement | null = null;\n  private resolved = false;\n  private positioner?: _PositionerHandle;\n\n  constructor() {\n    // All imperative DOM wiring lives in afterNextRender — a browser-only hook, so the native listener\n    // and the trigger resolution never run on the server (SSR-safe by construction; O-18).\n    afterNextRender(() => {\n      // Imperative (NOT host-metadata) so a consumer `(toggle)` binding does not shadow it — see host {}.\n      this.host.nativeElement.addEventListener('toggle', this.onToggleNative);\n      // Resolve + wire the trigger after the view exists (the trigger may be a later sibling), so the\n      // disclosure relationship (aria-expanded=\"false\" + aria-controls) is present before first open.\n      this.ensureTrigger();\n    });\n    inject(DestroyRef).onDestroy(() => this.teardown());\n  }\n\n  // ── Toggle (imperative native listener — see host {} note) ────────────────────\n  private readonly onToggleNative = (event: Event): void => {\n    if ((event as ToggleEvent).newState === 'open') this.onOpen();\n    else this.onClose();\n  };\n\n  private onOpen(): void {\n    const anchor = this.ensureTrigger(); // safety net if afterNextRender has not yet run\n    if (anchor) {\n      this.renderer.setAttribute(anchor, 'aria-expanded', 'true');\n    } else {\n      return; // orphan popover (dev-warned at init); nothing to anchor to.\n    }\n\n    this.positioner?.destroy();\n    this.positioner = _attachPositioner(\n      anchor,\n      this.host.nativeElement,\n      () => ({\n        placement: this.placement(),\n        offset: this.cssLenPx('--skra-comp-popover-offset'),\n        viewportPadding: this.cssLenPx('--skra-comp-popover-viewport-padding'),\n      }),\n    );\n  }\n\n  private onClose(): void {\n    if (this.trigger) {\n      this.renderer.setAttribute(this.trigger, 'aria-expanded', 'false');\n    }\n    this.positioner?.destroy();\n    this.positioner = undefined;\n  }\n\n  /**\n   * Resolve the `[popovertarget]` trigger and establish the disclosure ARIA on it (sanctioned a11y\n   * wiring, ADR 013-style — not style mutation). Idempotent: runs at most once. Returns the trigger\n   * (or null for an orphan popover, dev-warned once).\n   */\n  private ensureTrigger(): HTMLElement | null {\n    if (this.resolved) return this.trigger;\n    this.resolved = true;\n\n    const id = this.host.nativeElement.id;\n    if (!id) {\n      if (typeof ngDevMode === 'undefined' || ngDevMode) {\n        console.warn(\n          '[skra-popover] has no `id` — it cannot be targeted by a `popovertarget` ' +\n            'trigger and the disclosure ARIA (aria-expanded/aria-controls) cannot be wired. ' +\n            'Give the popover an id and point the trigger at it: ' +\n            '<button popovertarget=\"my-id\">…</button> <skra-popover id=\"my-id\">…',\n        );\n      }\n      return null;\n    }\n\n    // Match by attribute value rather than a built selector — no escaping needed, robust to ids\n    // with special characters (and `CSS.escape` is not universally available).\n    this.trigger =\n      Array.from(\n        document.querySelectorAll<HTMLElement>('[popovertarget]'),\n      ).find((el) => el.getAttribute('popovertarget') === id) ?? null;\n    if (!this.trigger) {\n      if (typeof ngDevMode === 'undefined' || ngDevMode) {\n        console.warn(\n          `[skra-popover] no trigger found with [popovertarget=\"${id}\"] — the popover ` +\n            'is unreachable and has no element to carry aria-expanded/aria-controls. ' +\n            'Add a focusable trigger button with the matching popovertarget.',\n        );\n      }\n      return null;\n    }\n\n    // Establish the disclosure relationship before the first open (APG Disclosure).\n    this.renderer.setAttribute(this.trigger, 'aria-controls', id);\n    this.renderer.setAttribute(this.trigger, 'aria-expanded', 'false');\n    return this.trigger;\n  }\n\n  /** Read a length comp token (px/rem) off the host computed style for the positioner. */\n  private cssLenPx(prop: string): number {\n    const raw = getComputedStyle(this.host.nativeElement)\n      .getPropertyValue(prop)\n      .trim();\n    if (raw.endsWith('px')) return parseFloat(raw);\n    if (raw.endsWith('rem')) {\n      const rootFontSize =\n        parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;\n      return parseFloat(raw) * rootFontSize;\n    }\n    return parseFloat(raw) || 0;\n  }\n\n  private teardown(): void {\n    this.host.nativeElement.removeEventListener('toggle', this.onToggleNative);\n    this.positioner?.destroy();\n    if (this.trigger) {\n      this.renderer.removeAttribute(this.trigger, 'aria-expanded');\n      this.renderer.removeAttribute(this.trigger, 'aria-controls');\n    }\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/skra-ui-progress.mjs

@@ -0,0 +1,57 @@
+import * as i0 from '@angular/core';
+import { input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+
+/**
+ * `progress[skraProgress]` — a determinate, horizontal task-completion bar (Wave 2,
+ * `libs/ui/indicators`). Shows the known progress of a finite task (file upload, wizard
+ * "step 3 of 5", import job) as a fill from 0 → `value` / `max`.
+ *
+ * SRP-distinct from `[skraLoadingIndicator]` (ADR 028): that primitive is the
+ * *indeterminate* "host is busy" spinner injected into another component's `loading()`
+ * slot; SkraProgress is the *determinate* "task is N% complete" standalone bar. The two
+ * are complementary — see `adr/specs/component-progress-spec.md` § SRP boundary.
+ *
+ * **Why a Component on the native `<progress>` host** (ADR 040), not a `<div role="progressbar">`:
+ *  1. ADR 021 (CSP): the fill width is a continuous `value/max` length. A custom element would
+ *     force `[style.--progress-value]` (forbidden) or a class/`data-*`-per-percent hack. Native
+ *     `<progress value max>` lets the BROWSER compute the fill width on its
+ *     `::-webkit-progress-value` / `::-moz-progress-bar` pseudo — zero author inline-style.
+ *  2. Free a11y: the native host carries `role="progressbar"` + `aria-valuenow`/`-valuemin`/
+ *     `-valuemax` with no author ARIA (native-attr-first, boundary #9).
+ *
+ * Non-interactive: `<progress>` is non-focusable, so the State Surface is all-N/A (no
+ * `disabled`/`loading`/`severity` in MVP — those are deferred / belong to other atoms).
+ *
+ * Naming (ADR 033): the consumer associates a `<label for>` / `aria-labelledby` (passed through
+ * to the host). No `SkraFieldContext` injection (a progress bar is a read-only display, not a
+ * form field); no `ariaLabel` input.
+ *
+ * `value`/`max` are plain consumer-driven inputs (ADR 037 — agnostic; wire the source from any
+ * signal/form strategy). Native `<progress>` clamps `value` to `[0, max]`, so no author clamp.
+ */
+class SkraProgress {
+    /** Current completion, reflected to the native `value` attribute (native clamps to [0, max]). */
+    value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Upper bound, reflected to the native `max` attribute. Drives native `aria-valuemax`. */
+    max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SkraProgress, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.7", type: SkraProgress, isStandalone: true, selector: "progress[skraProgress]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.value": "value()", "attr.max": "max()" } }, ngImport: i0, template: '', isInline: true, styles: [":host{appearance:none;-webkit-appearance:none;box-sizing:border-box;display:block;inline-size:100%;block-size:var(--skra-comp-progress-block-size);border-width:var(--skra-comp-progress-border-width);border-style:var(--skra-comp-progress-border-style);border-color:var(--skra-comp-progress-border-color);border-radius:var(--skra-comp-progress-radius);box-shadow:var(--skra-comp-progress-shadow);background-color:var(--skra-comp-progress-background);overflow:hidden;margin:0}:host::-webkit-progress-bar{background-color:var(--skra-comp-progress-background);border-radius:var(--skra-comp-progress-radius)}:host::-webkit-progress-value{background-color:var(--skra-comp-progress-fill-color);transition:inline-size var(--skra-comp-progress-motion-duration) var(--skra-comp-progress-motion-easing)}:host::-moz-progress-bar{background-color:var(--skra-comp-progress-fill-color)}@media(prefers-reduced-motion:reduce){:host::-webkit-progress-value{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SkraProgress, decorators: [{
+            type: Component,
+            args: [{ selector: 'progress[skraProgress]', standalone: true, template: '', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: {
+                        // The data contract — reflected to the NATIVE attributes. The browser derives
+                        // role="progressbar" + aria-valuenow/-valuemin/-valuemax + the fill width from these.
+                        // No [style.*] (ADR 021 — the fill is native, never an inline style) and no data-skra-*
+                        // (State Surface all-N/A).
+                        '[attr.value]': 'value()',
+                        '[attr.max]': 'max()',
+                    }, styles: [":host{appearance:none;-webkit-appearance:none;box-sizing:border-box;display:block;inline-size:100%;block-size:var(--skra-comp-progress-block-size);border-width:var(--skra-comp-progress-border-width);border-style:var(--skra-comp-progress-border-style);border-color:var(--skra-comp-progress-border-color);border-radius:var(--skra-comp-progress-radius);box-shadow:var(--skra-comp-progress-shadow);background-color:var(--skra-comp-progress-background);overflow:hidden;margin:0}:host::-webkit-progress-bar{background-color:var(--skra-comp-progress-background);border-radius:var(--skra-comp-progress-radius)}:host::-webkit-progress-value{background-color:var(--skra-comp-progress-fill-color);transition:inline-size var(--skra-comp-progress-motion-duration) var(--skra-comp-progress-motion-easing)}:host::-moz-progress-bar{background-color:var(--skra-comp-progress-fill-color)}@media(prefers-reduced-motion:reduce){:host::-webkit-progress-value{transition:none}}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SkraProgress };
+//# sourceMappingURL=skra-ui-progress.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"skra-ui-progress.mjs","sources":["../../../../libs/ui/progress/src/lib/progress/progress.ts","../../../../libs/ui/progress/src/skra-ui-progress.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  input,\n} from '@angular/core';\n\n/**\n * `progress[skraProgress]` — a determinate, horizontal task-completion bar (Wave 2,\n * `libs/ui/indicators`). Shows the known progress of a finite task (file upload, wizard\n * \"step 3 of 5\", import job) as a fill from 0 → `value` / `max`.\n *\n * SRP-distinct from `[skraLoadingIndicator]` (ADR 028): that primitive is the\n * *indeterminate* \"host is busy\" spinner injected into another component's `loading()`\n * slot; SkraProgress is the *determinate* \"task is N% complete\" standalone bar. The two\n * are complementary — see `adr/specs/component-progress-spec.md` § SRP boundary.\n *\n * **Why a Component on the native `<progress>` host** (ADR 040), not a `<div role=\"progressbar\">`:\n *  1. ADR 021 (CSP): the fill width is a continuous `value/max` length. A custom element would\n *     force `[style.--progress-value]` (forbidden) or a class/`data-*`-per-percent hack. Native\n *     `<progress value max>` lets the BROWSER compute the fill width on its\n *     `::-webkit-progress-value` / `::-moz-progress-bar` pseudo — zero author inline-style.\n *  2. Free a11y: the native host carries `role=\"progressbar\"` + `aria-valuenow`/`-valuemin`/\n *     `-valuemax` with no author ARIA (native-attr-first, boundary #9).\n *\n * Non-interactive: `<progress>` is non-focusable, so the State Surface is all-N/A (no\n * `disabled`/`loading`/`severity` in MVP — those are deferred / belong to other atoms).\n *\n * Naming (ADR 033): the consumer associates a `<label for>` / `aria-labelledby` (passed through\n * to the host). No `SkraFieldContext` injection (a progress bar is a read-only display, not a\n * form field); no `ariaLabel` input.\n *\n * `value`/`max` are plain consumer-driven inputs (ADR 037 — agnostic; wire the source from any\n * signal/form strategy). Native `<progress>` clamps `value` to `[0, max]`, so no author clamp.\n */\n@Component({\n  selector: 'progress[skraProgress]',\n  standalone: true,\n  template: '',\n  styleUrl: './progress.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.Emulated,\n  host: {\n    // The data contract — reflected to the NATIVE attributes. The browser derives\n    // role=\"progressbar\" + aria-valuenow/-valuemin/-valuemax + the fill width from these.\n    // No [style.*] (ADR 021 — the fill is native, never an inline style) and no data-skra-*\n    // (State Surface all-N/A).\n    '[attr.value]': 'value()',\n    '[attr.max]': 'max()',\n  },\n})\nexport class SkraProgress {\n  /** Current completion, reflected to the native `value` attribute (native clamps to [0, max]). */\n  readonly value = input<number>(0);\n\n  /** Upper bound, reflected to the native `max` attribute. Drives native `aria-valuemax`. */\n  readonly max = input<number>(100);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAOA;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BG;MAiBU,YAAY,CAAA;;AAEd,IAAA,KAAK,GAAG,KAAK,CAAS,CAAC,4EAAC;;AAGxB,IAAA,GAAG,GAAG,KAAK,CAAS,GAAG,0EAAC;uGALtB,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAZ,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAY,gZAbb,EAAE,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,+7BAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAaD,YAAY,EAAA,UAAA,EAAA,CAAA;kBAhBxB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,wBAAwB,EAAA,UAAA,EACtB,IAAI,EAAA,QAAA,EACN,EAAE,EAAA,eAAA,EAEK,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,QAAQ,EAAA,IAAA,EACnC;;;;;AAKJ,wBAAA,cAAc,EAAE,SAAS;AACzB,wBAAA,YAAY,EAAE,OAAO;AACtB,qBAAA,EAAA,MAAA,EAAA,CAAA,+7BAAA,CAAA,EAAA;;;ACjDH;;AAEG;;;;"}

package/fesm2022/skra-ui-radio.mjs

@@ -0,0 +1,92 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, effect, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { SkraFieldContext } from '@skra/ui/field';
+
+/**
+ * Wires a native `<input type="radio">` to SkraFieldContext when inside
+ * `<skra-field>`, or stands alone with no cascade. Per ADR 039/040, Forge ships
+ * no `<skra-radio>` / `<skra-radio-group>` wrappers — this is a Component-on-
+ * the-native-host (`<input>` is void → `template: ''`, ADR 040 §2) carrying its
+ * own `radio.scss` via Emulated encapsulation. Radios are
+ * grouped via native `<fieldset skraFieldset>` + `<legend skraLegend>`,
+ * coordination happens through the shared `name` attribute (HTML-native), and
+ * one-of-N value selection is consumer-owned per ADR 037.
+ *
+ *   <fieldset skraFieldset>
+ *     <legend skraLegend>Choose plan</legend>
+ *     <skra-field>
+ *       <input type="radio" skraRadio name="plan" value="free"
+ *              [checked]="plan() === 'free'" (change)="plan.set('free')" />
+ *       <label skraLabelFor>Free</label>
+ *     </skra-field>
+ *     <skra-field>
+ *       <input type="radio" skraRadio name="plan" value="pro"
+ *              [checked]="plan() === 'pro'" (change)="plan.set('pro')" />
+ *       <label skraLabelFor>Pro</label>
+ *     </skra-field>
+ *   </fieldset>
+ *
+ * Toggle state (`checked`) is NOT reflected as `data-skra-*` — slice CSS uses
+ * the native `:checked` pseudo-class. Browser handles `aria-checked` natively.
+ */
+class SkraRadio {
+    el = inject(ElementRef);
+    context = inject(SkraFieldContext, { optional: true });
+    constructor() {
+        if (this.context) {
+            const ctx = this.context;
+            const el = this.el.nativeElement;
+            effect(() => {
+                el.id = ctx.fieldId();
+            });
+            effect(() => {
+                el.disabled = ctx.isDisabled();
+            });
+        }
+    }
+    /**
+     * Readonly enforcement — native radio has no `[readonly]`, so without this the
+     * `aria-readonly` we announce would be a lie (the user could still change the
+     * selection). `preventDefault` on `click` blocks the selection change from both
+     * pointer and Space/Enter (keyboard activation dispatches a click on form
+     * controls). Mirrors the `<select skraSelect>` readonly guard.
+     */
+    blockWhenReadonly(event) {
+        if (this.context?.isReadonly())
+            event.preventDefault();
+    }
+    /**
+     * Arrow keys move selection between radios in a `name` group WITHOUT a click,
+     * so they need a separate guard. Block every key except `Tab` (focus traversal)
+     * when readonly.
+     */
+    blockKeyWhenReadonly(event) {
+        if (this.context?.isReadonly() && event.key !== 'Tab') {
+            event.preventDefault();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SkraRadio, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: SkraRadio, isStandalone: true, selector: "input[type=\"radio\"][skraRadio]", host: { listeners: { "click": "blockWhenReadonly($event)", "keydown": "blockKeyWhenReadonly($event)" }, properties: { "attr.data-skra-disabled": "context?.isDisabled() ? \"\" : null", "attr.aria-invalid": "context?.hasError() ? \"true\" : null", "attr.aria-readonly": "context?.isReadonly() ? \"true\" : null", "attr.aria-describedby": "context?.describedByIds() ?? null" } }, ngImport: i0, template: '', isInline: true, styles: [":host{appearance:none;flex-shrink:0;cursor:pointer;outline:none;background-repeat:no-repeat;background-position:center;inline-size:var(--skra-comp-field-radio-size);block-size:var(--skra-comp-field-radio-size);border-width:var(--skra-comp-field-radio-border-width);border-style:solid;border-color:var(--skra-comp-field-radio-border-color);border-radius:50%;background-color:var(--skra-comp-field-radio-background);transition:background-color var(--skra-comp-field-motion-duration) var(--skra-comp-field-motion-easing),border-color var(--skra-comp-field-motion-duration) var(--skra-comp-field-motion-easing),box-shadow var(--skra-comp-field-motion-duration) var(--skra-comp-field-motion-easing)}:host(:checked){background-color:var(--skra-comp-field-radio-checked-background);border-color:var(--skra-comp-field-radio-checked-background);background-image:radial-gradient(circle,var(--skra-comp-field-radio-dot-color) 0,var(--skra-comp-field-radio-dot-color) calc(var(--skra-comp-field-radio-dot-size) / 2),transparent calc(var(--skra-comp-field-radio-dot-size) / 2 + .5px))}:host(:hover:not(:disabled):not([aria-readonly=true])){border-color:var(--skra-comp-field-radio-border-color-hover)}:host(:checked:hover:not(:disabled):not([aria-readonly=true])){background-color:var(--skra-comp-field-radio-checked-background-hover);border-color:var(--skra-comp-field-radio-checked-background-hover)}:host(:focus-visible){box-shadow:0 0 0 var(--skra-comp-field-focus-ring-width) var(--skra-comp-field-focus-ring-color)}:host(:disabled),:host([data-skra-disabled]){cursor:not-allowed;opacity:var(--skra-sys-opacity-disabled)}:host([aria-readonly=true]){cursor:default;background-color:var(--skra-comp-field-background-readonly);border-color:var(--skra-comp-field-border-color-readonly)}:host(:checked[aria-readonly=true]){background-color:var(--skra-comp-field-radio-checked-background-readonly);border-color:var(--skra-comp-field-radio-checked-background-readonly)}:host([aria-invalid=true]){border-color:var(--skra-comp-field-error-color)}:host([aria-invalid=true]:focus-visible){box-shadow:0 0 0 var(--skra-comp-field-focus-ring-width) var(--skra-comp-field-error-color)}@media(prefers-reduced-motion:reduce){:host{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SkraRadio, decorators: [{
+            type: Component,
+            args: [{ selector: 'input[type="radio"][skraRadio]', standalone: true, template: '', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: {
+                        '[attr.data-skra-disabled]': 'context?.isDisabled() ? "" : null',
+                        '[attr.aria-invalid]': 'context?.hasError() ? "true" : null',
+                        // Readonly is ARIA-only (native `readonly` doesn't apply to radios per HTML
+                        // spec). No `data-skra-readonly` — dead surface (styling keys off
+                        // `[aria-readonly]`), removed 2026-05-31 to match select's Q-3 ARIA-only
+                        // pattern (Batch 5 cleanroom review).
+                        '[attr.aria-readonly]': 'context?.isReadonly() ? "true" : null',
+                        '[attr.aria-describedby]': 'context?.describedByIds() ?? null',
+                        '(click)': 'blockWhenReadonly($event)',
+                        '(keydown)': 'blockKeyWhenReadonly($event)',
+                    }, styles: [":host{appearance:none;flex-shrink:0;cursor:pointer;outline:none;background-repeat:no-repeat;background-position:center;inline-size:var(--skra-comp-field-radio-size);block-size:var(--skra-comp-field-radio-size);border-width:var(--skra-comp-field-radio-border-width);border-style:solid;border-color:var(--skra-comp-field-radio-border-color);border-radius:50%;background-color:var(--skra-comp-field-radio-background);transition:background-color var(--skra-comp-field-motion-duration) var(--skra-comp-field-motion-easing),border-color var(--skra-comp-field-motion-duration) var(--skra-comp-field-motion-easing),box-shadow var(--skra-comp-field-motion-duration) var(--skra-comp-field-motion-easing)}:host(:checked){background-color:var(--skra-comp-field-radio-checked-background);border-color:var(--skra-comp-field-radio-checked-background);background-image:radial-gradient(circle,var(--skra-comp-field-radio-dot-color) 0,var(--skra-comp-field-radio-dot-color) calc(var(--skra-comp-field-radio-dot-size) / 2),transparent calc(var(--skra-comp-field-radio-dot-size) / 2 + .5px))}:host(:hover:not(:disabled):not([aria-readonly=true])){border-color:var(--skra-comp-field-radio-border-color-hover)}:host(:checked:hover:not(:disabled):not([aria-readonly=true])){background-color:var(--skra-comp-field-radio-checked-background-hover);border-color:var(--skra-comp-field-radio-checked-background-hover)}:host(:focus-visible){box-shadow:0 0 0 var(--skra-comp-field-focus-ring-width) var(--skra-comp-field-focus-ring-color)}:host(:disabled),:host([data-skra-disabled]){cursor:not-allowed;opacity:var(--skra-sys-opacity-disabled)}:host([aria-readonly=true]){cursor:default;background-color:var(--skra-comp-field-background-readonly);border-color:var(--skra-comp-field-border-color-readonly)}:host(:checked[aria-readonly=true]){background-color:var(--skra-comp-field-radio-checked-background-readonly);border-color:var(--skra-comp-field-radio-checked-background-readonly)}:host([aria-invalid=true]){border-color:var(--skra-comp-field-error-color)}:host([aria-invalid=true]:focus-visible){box-shadow:0 0 0 var(--skra-comp-field-focus-ring-width) var(--skra-comp-field-error-color)}@media(prefers-reduced-motion:reduce){:host{transition:none}}\n"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SkraRadio };
+//# sourceMappingURL=skra-ui-radio.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"skra-ui-radio.mjs","sources":["../../../../libs/ui/radio/src/lib/radio/radio.ts","../../../../libs/ui/radio/src/skra-ui-radio.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  ViewEncapsulation,\n  effect,\n  inject,\n} from '@angular/core';\nimport { SkraFieldContext } from '@skra/ui/field';\n\n/**\n * Wires a native `<input type=\"radio\">` to SkraFieldContext when inside\n * `<skra-field>`, or stands alone with no cascade. Per ADR 039/040, Forge ships\n * no `<skra-radio>` / `<skra-radio-group>` wrappers — this is a Component-on-\n * the-native-host (`<input>` is void → `template: ''`, ADR 040 §2) carrying its\n * own `radio.scss` via Emulated encapsulation. Radios are\n * grouped via native `<fieldset skraFieldset>` + `<legend skraLegend>`,\n * coordination happens through the shared `name` attribute (HTML-native), and\n * one-of-N value selection is consumer-owned per ADR 037.\n *\n *   <fieldset skraFieldset>\n *     <legend skraLegend>Choose plan</legend>\n *     <skra-field>\n *       <input type=\"radio\" skraRadio name=\"plan\" value=\"free\"\n *              [checked]=\"plan() === 'free'\" (change)=\"plan.set('free')\" />\n *       <label skraLabelFor>Free</label>\n *     </skra-field>\n *     <skra-field>\n *       <input type=\"radio\" skraRadio name=\"plan\" value=\"pro\"\n *              [checked]=\"plan() === 'pro'\" (change)=\"plan.set('pro')\" />\n *       <label skraLabelFor>Pro</label>\n *     </skra-field>\n *   </fieldset>\n *\n * Toggle state (`checked`) is NOT reflected as `data-skra-*` — slice CSS uses\n * the native `:checked` pseudo-class. Browser handles `aria-checked` natively.\n */\n@Component({\n  selector: 'input[type=\"radio\"][skraRadio]',\n  standalone: true,\n  // Void host — no <ng-content>. See ADR 040 §2.\n  template: '',\n  styleUrl: './radio.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.Emulated,\n  host: {\n    '[attr.data-skra-disabled]': 'context?.isDisabled() ? \"\" : null',\n    '[attr.aria-invalid]': 'context?.hasError() ? \"true\" : null',\n    // Readonly is ARIA-only (native `readonly` doesn't apply to radios per HTML\n    // spec). No `data-skra-readonly` — dead surface (styling keys off\n    // `[aria-readonly]`), removed 2026-05-31 to match select's Q-3 ARIA-only\n    // pattern (Batch 5 cleanroom review).\n    '[attr.aria-readonly]': 'context?.isReadonly() ? \"true\" : null',\n    '[attr.aria-describedby]': 'context?.describedByIds() ?? null',\n    '(click)': 'blockWhenReadonly($event)',\n    '(keydown)': 'blockKeyWhenReadonly($event)',\n  },\n})\nexport class SkraRadio {\n  private readonly el = inject<ElementRef<HTMLInputElement>>(ElementRef);\n  readonly context = inject(SkraFieldContext, { optional: true });\n\n  constructor() {\n    if (this.context) {\n      const ctx = this.context;\n      const el = this.el.nativeElement;\n      effect(() => {\n        el.id = ctx.fieldId();\n      });\n      effect(() => {\n        el.disabled = ctx.isDisabled();\n      });\n    }\n  }\n\n  /**\n   * Readonly enforcement — native radio has no `[readonly]`, so without this the\n   * `aria-readonly` we announce would be a lie (the user could still change the\n   * selection). `preventDefault` on `click` blocks the selection change from both\n   * pointer and Space/Enter (keyboard activation dispatches a click on form\n   * controls). Mirrors the `<select skraSelect>` readonly guard.\n   */\n  protected blockWhenReadonly(event: Event): void {\n    if (this.context?.isReadonly()) event.preventDefault();\n  }\n\n  /**\n   * Arrow keys move selection between radios in a `name` group WITHOUT a click,\n   * so they need a separate guard. Block every key except `Tab` (focus traversal)\n   * when readonly.\n   */\n  protected blockKeyWhenReadonly(event: KeyboardEvent): void {\n    if (this.context?.isReadonly() && event.key !== 'Tab') {\n      event.preventDefault();\n    }\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAUA;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BG;MAsBU,SAAS,CAAA;AACH,IAAA,EAAE,GAAG,MAAM,CAA+B,UAAU,CAAC;IAC7D,OAAO,GAAG,MAAM,CAAC,gBAAgB,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AAE/D,IAAA,WAAA,GAAA;AACE,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AAChB,YAAA,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO;AACxB,YAAA,MAAM,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa;YAChC,MAAM,CAAC,MAAK;AACV,gBAAA,EAAE,CAAC,EAAE,GAAG,GAAG,CAAC,OAAO,EAAE;AACvB,YAAA,CAAC,CAAC;YACF,MAAM,CAAC,MAAK;AACV,gBAAA,EAAE,CAAC,QAAQ,GAAG,GAAG,CAAC,UAAU,EAAE;AAChC,YAAA,CAAC,CAAC;QACJ;IACF;AAEA;;;;;;AAMG;AACO,IAAA,iBAAiB,CAAC,KAAY,EAAA;AACtC,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE,UAAU,EAAE;YAAE,KAAK,CAAC,cAAc,EAAE;IACxD;AAEA;;;;AAIG;AACO,IAAA,oBAAoB,CAAC,KAAoB,EAAA;AACjD,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE,UAAU,EAAE,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE;YACrD,KAAK,CAAC,cAAc,EAAE;QACxB;IACF;uGArCW,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAT,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,SAAS,qdAjBV,EAAE,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,mrEAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAiBD,SAAS,EAAA,UAAA,EAAA,CAAA;kBArBrB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gCAAgC,EAAA,UAAA,EAC9B,IAAI,EAAA,QAAA,EAEN,EAAE,EAAA,eAAA,EAEK,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,QAAQ,EAAA,IAAA,EACnC;AACJ,wBAAA,2BAA2B,EAAE,mCAAmC;AAChE,wBAAA,qBAAqB,EAAE,qCAAqC;;;;;AAK5D,wBAAA,sBAAsB,EAAE,uCAAuC;AAC/D,wBAAA,yBAAyB,EAAE,mCAAmC;AAC9D,wBAAA,SAAS,EAAE,2BAA2B;AACtC,wBAAA,WAAW,EAAE,8BAA8B;AAC5C,qBAAA,EAAA,MAAA,EAAA,CAAA,mrEAAA,CAAA,EAAA;;;ACxDH;;AAEG;;;;"}