@skra/ui 0.2.0 → 0.3.1

package/fesm2022/skra-ui-field.mjs

@@ -10,10 +10,10 @@ class IdGeneratorService {
     nextId(prefix = 'fg') {
         return `${prefix}-${++this.counter}`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: IdGeneratorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: IdGeneratorService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IdGeneratorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IdGeneratorService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: IdGeneratorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IdGeneratorService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -24,38 +24,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
  * Implements ADR 013: Signal-based Contextual Interaction.
  */
 class SkraFieldContext {
-    fieldId = signal('', ...(ngDevMode ? [{ debugName: "fieldId" }] : /* istanbul ignore next */ []));
-    hasError = signal(false, ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
-    isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
-    isRequired = signal(false, ...(ngDevMode ? [{ debugName: "isRequired" }] : /* istanbul ignore next */ []));
-    isReadonly = signal(false, ...(ngDevMode ? [{ debugName: "isReadonly" }] : /* istanbul ignore next */ []));
+    fieldId = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fieldId" }] : /* istanbul ignore next */ []));
+    hasError = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    isDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    isRequired = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isRequired" }] : /* istanbul ignore next */ []));
+    isReadonly = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isReadonly" }] : /* istanbul ignore next */ []));
     // Derived IDs for aria-describedby linkage
-    hintId = computed(() => `${this.fieldId()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
-    errorId = computed(() => `${this.fieldId()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
+    hintId = computed(() => `${this.fieldId()}-hint`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
+    errorId = computed(() => `${this.fieldId()}-error`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
     // Derived label ID. Labelable controls (input/checkbox/radio) associate via the
     // native `for`/`id` pair, so they never needed a referenceable label id. A
     // `role="radiogroup"` host (<skra-star-rating>) is NOT labelable by `for`, so it
     // must name itself via `aria-labelledby` → the label needs an id. This is the third
     // derived id alongside hintId/errorId — an id, never a value (ADR 013 §3.6; the
     // context carries id + derived state only). Set on `label[skraLabelFor]`.
-    labelId = computed(() => `${this.fieldId()}-label`, ...(ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []));
+    labelId = computed(() => `${this.fieldId()}-label`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []));
     // Combined aria-describedby tokens for the input/textarea host.
     // Both ids are always emitted — when <skra-hint> or <skra-error> is not
     // rendered, the matching DOM node is absent and browsers / screen readers
     // gracefully ignore the dangling reference. Simpler than tracking presence
     // via contentChild queries from the directive (which has no template).
-    describedByIds = computed(() => `${this.hintId()} ${this.errorId()}`, ...(ngDevMode ? [{ debugName: "describedByIds" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SkraFieldContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SkraFieldContext });
+    describedByIds = computed(() => `${this.hintId()} ${this.errorId()}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedByIds" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraFieldContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraFieldContext });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SkraFieldContext, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraFieldContext, decorators: [{
             type: Injectable
         }] });
 
 class SkraField {
     idGen = inject(IdGeneratorService);
     context = inject(SkraFieldContext);
-    fieldId = input(null, ...(ngDevMode ? [{ debugName: "fieldId" }] : /* istanbul ignore next */ []));
+    fieldId = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fieldId" }] : /* istanbul ignore next */ []));
     readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -78,10 +88,10 @@ class SkraField {
     ngOnInit() {
         this.context.fieldId.set(this.fieldId() ?? this.idGen.nextId('fg'));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SkraField, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.7", type: SkraField, isStandalone: true, selector: "skra-field", inputs: { fieldId: { classPropertyName: "fieldId", publicName: "fieldId", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.data-skra-validation": "context.hasError() ? \"invalid\" : null", "attr.data-skra-disabled": "context.isDisabled() ? \"\" : null", "attr.data-skra-required": "context.isRequired() ? \"\" : null", "attr.data-skra-readonly": "context.isReadonly() ? \"\" : null" } }, providers: [SkraFieldContext], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{margin:0;display:flex;flex-direction:column;gap:var(--skra-comp-field-gap)}:host[data-skra-validation=invalid]{--skra-comp-field-border-color: var( --skra-comp-field-border-color-validation-invalid )}:host[data-skra-disabled],:host:has(:disabled){pointer-events:none;cursor:not-allowed}:host[data-skra-readonly]{cursor:default;--skra-comp-field-background: var(--skra-comp-field-background-readonly);--skra-comp-field-border-color: var( --skra-comp-field-border-color-readonly );--skra-comp-field-label-cursor: default;--skra-comp-field-hint-color: var(--skra-comp-field-label-color)}:host:has(input[type=checkbox][skraCheckbox]),:host:has(input[type=checkbox][skraSwitch]),:host:has(input[type=radio][skraRadio]){display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:var(--skra-comp-field-checkbox-gap);row-gap:var(--skra-comp-field-gap)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraField, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: SkraField, isStandalone: true, selector: "skra-field", inputs: { fieldId: { classPropertyName: "fieldId", publicName: "fieldId", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.data-skra-validation": "context.hasError() ? \"invalid\" : null", "attr.data-skra-disabled": "context.isDisabled() ? \"\" : null", "attr.data-skra-required": "context.isRequired() ? \"\" : null", "attr.data-skra-readonly": "context.isReadonly() ? \"\" : null" } }, providers: [SkraFieldContext], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{margin:0;display:flex;flex-direction:column;gap:var(--skra-comp-field-gap)}:host[data-skra-validation=invalid]{--skra-comp-field-border-color: var( --skra-comp-field-border-color-validation-invalid )}:host[data-skra-disabled],:host:has(:disabled){pointer-events:none;cursor:not-allowed}:host[data-skra-readonly]{cursor:default;--skra-comp-field-background: var(--skra-comp-field-background-readonly);--skra-comp-field-border-color: var( --skra-comp-field-border-color-readonly );--skra-comp-field-label-cursor: default;--skra-comp-field-hint-color: var(--skra-comp-field-label-color)}:host:has(input[type=checkbox][skraCheckbox]),:host:has(input[type=checkbox][skraSwitch]),:host:has(input[type=radio][skraRadio]){display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:var(--skra-comp-field-checkbox-gap);row-gap:var(--skra-comp-field-gap)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SkraField, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraField, decorators: [{
             type: Component,
             args: [{ selector: 'skra-field', standalone: true, template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, providers: [SkraFieldContext], host: {
                         // CSP-Safe State Reflection (ADR 021). The layout reset (margin) +
@@ -116,24 +126,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
  * moved here from the slice).
  */
 class SkraLabel {
-    context = inject(SkraFieldContext);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SkraLabel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: SkraLabel, isStandalone: true, selector: "label[skraLabelFor]", host: { properties: { "htmlFor": "context.fieldId()", "id": "context.labelId()", "attr.data-skra-required": "context.isRequired() ? \"\" : null" }, classAttribute: "skra-label" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{color:var(--skra-comp-field-label-color);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);cursor:var(--skra-comp-field-label-cursor, pointer);transition:color var(--skra-comp-field-motion-duration) var(--skra-comp-field-motion-easing)}:host([data-skra-required]):after{content:\"*\"/\"\";margin-inline-start:var(--skra-sys-spacing-1);color:var(--skra-comp-field-required-color)}@media(prefers-reduced-motion:reduce){:host{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    // Optional per ADR 013 §3.7 — outside `<skra-field>` the label still carries the
+    // skin and the consumer owns association (a wrapping `<label>`, or a hand-written
+    // `for`). Mandatory injection would crash the app for a styling-only use.
+    context = inject(SkraFieldContext, { optional: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraLabel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", type: SkraLabel, isStandalone: true, selector: "label[skraLabelFor]", host: { properties: { "attr.for": "context?.fieldId() ?? null", "attr.id": "context?.labelId() ?? null", "attr.data-skra-required": "context?.isRequired() ? \"\" : null" }, classAttribute: "skra-label" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{color:var(--skra-comp-field-label-color);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);cursor:var(--skra-comp-field-label-cursor, pointer);transition:color var(--skra-comp-field-motion-duration) var(--skra-comp-field-motion-easing)}:host([data-skra-required]):after{content:\"*\"/\"\";margin-inline-start:var(--skra-sys-spacing-1);color:var(--skra-comp-field-required-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: SkraLabel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraLabel, decorators: [{
             type: Component,
             args: [{ selector: 'label[skraLabelFor]', standalone: true, template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: {
-                        // The magic: auto-linking label to input via shared Context ID
-                        '[htmlFor]': 'context.fieldId()',
+                        // The magic: auto-linking label to input via shared Context ID. Bound as an
+                        // ATTRIBUTE, not the `htmlFor` property — with no field context the property
+                        // form would stringify `undefined` into `for="undefined"`.
+                        '[attr.for]': 'context?.fieldId() ?? null',
                         // Referenceable id so a non-labelable control (a `role="radiogroup"` host like
                         // <skra-star-rating>, which `for`/`id` can't target) can name itself via
                         // `aria-labelledby`. Harmless for labelable controls (they use `for`). ADR 013.
-                        '[id]': 'context.labelId()',
+                        '[attr.id]': 'context?.labelId() ?? null',
                         // Required marker — reflect the field's required state so the SCSS can paint a
                         // decorative asterisk (::after). The control already carries `aria-required`,
                         // so the marker is purely visual (ADR 021 data-attr reflection; ADR 033 keeps
                         // it out of the accessible name via the empty alt-text in `content`).
-                        '[attr.data-skra-required]': 'context.isRequired() ? "" : null',
+                        '[attr.data-skra-required]': 'context?.isRequired() ? "" : null',
                         // Class hook retained for any consumer-side targeting (ADR 024 pattern).
                         class: 'skra-label',
                     }, styles: [":host{color:var(--skra-comp-field-label-color);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);cursor:var(--skra-comp-field-label-cursor, pointer);transition:color var(--skra-comp-field-motion-duration) var(--skra-comp-field-motion-easing)}:host([data-skra-required]):after{content:\"*\"/\"\";margin-inline-start:var(--skra-sys-spacing-1);color:var(--skra-comp-field-required-color)}@media(prefers-reduced-motion:reduce){:host{transition:none}}\n"] }]
@@ -144,16 +159,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
  * Auto-receives ID from SkraFieldContext so aria-describedby on input works automatically.
  */
 class SkraHint {
-    context = inject(SkraFieldContext);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SkraHint, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: SkraHint, isStandalone: true, selector: "skra-hint", host: { attributes: { "role": "note" }, properties: { "id": "context.hintId()" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{margin:0;display:block;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);color:var(--skra-comp-field-hint-color)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    // Optional per ADR 013 §3.7 — mirrors SkraError. Outside `<skra-field>` it
+    // publishes no id and is plain styled helper text the consumer associates itself.
+    context = inject(SkraFieldContext, { optional: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraHint, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", type: SkraHint, isStandalone: true, selector: "skra-hint", host: { attributes: { "role": "note" }, properties: { "attr.id": "context?.hintId() ?? null" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{margin:0;display:block;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);color:var(--skra-comp-field-hint-color)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SkraHint, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraHint, decorators: [{
             type: Component,
             args: [{ selector: 'skra-hint', standalone: true, template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: {
                         // Zero-margin reset (ADR 022) lives in hint.component.scss `:host`.
                         // ID linked from context — input's aria-describedby points here automatically
-                        '[id]': 'context.hintId()',
+                        '[attr.id]': 'context?.hintId() ?? null',
                         role: 'note',
                     }, styles: [":host{margin:0;display:block;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);color:var(--skra-comp-field-hint-color)}\n"] }]
         }] });
@@ -190,16 +207,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
  * loaded two responsibilities into a single primitive.
  */
 class SkraError {
-    context = inject(SkraFieldContext);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SkraError, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: SkraError, isStandalone: true, selector: "skra-error", host: { attributes: { "role": "alert" }, properties: { "id": "context.errorId()" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{margin:0;display:block;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);color:var(--skra-comp-field-error-color)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    // Optional per ADR 013 §3.7. A GROUP-level error is a first-class pattern:
+    // `<skra-error>` sits as a direct child of `<fieldset skraFieldset>`, outside any
+    // `<skra-field>`, to carry one message for a radio/checkbox group (see the
+    // Fieldset `WithGroupError` story). It then publishes no id — nothing points at
+    // it via `aria-describedby`, and `role="alert"` announces it on its own.
+    context = inject(SkraFieldContext, { optional: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraError, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", type: SkraError, isStandalone: true, selector: "skra-error", host: { attributes: { "role": "alert" }, properties: { "attr.id": "context?.errorId() ?? null" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{margin:0;display:block;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);color:var(--skra-comp-field-error-color)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SkraError, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraError, decorators: [{
             type: Component,
             args: [{ selector: 'skra-error', standalone: true, template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: {
                         // Zero-margin reset (ADR 022) lives in error.component.scss `:host`.
                         // ID linked from context — input's aria-describedby points here automatically
-                        '[id]': 'context.errorId()',
+                        '[attr.id]': 'context?.errorId() ?? null',
                         // role="alert" implies aria-live="assertive" + aria-atomic="true" — do NOT
                         // add an explicit aria-live (contradicts the implicit assertive). Errors are
                         // announced promptly per WAI-ARIA APG.
@@ -243,10 +265,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
  */
 class SkraFieldset {
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SkraFieldset, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.7", type: SkraFieldset, isStandalone: true, selector: "fieldset[skraFieldset]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.disabled": "disabled() ? \"\" : null", "attr.data-skra-disabled": "disabled() ? \"\" : null" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{border:0;padding:0;margin:0;min-inline-size:0;display:flex;flex-direction:column;gap:var(--skra-comp-field-group-gap)}:host(:disabled),:host([data-skra-disabled]){cursor:not-allowed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraFieldset, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: SkraFieldset, isStandalone: true, selector: "fieldset[skraFieldset]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.disabled": "disabled() ? \"\" : null", "attr.data-skra-disabled": "disabled() ? \"\" : null" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{border:0;padding:0;margin:0;min-inline-size:0;display:flex;flex-direction:column;gap:var(--skra-comp-field-group-gap)}:host(:disabled),:host([data-skra-disabled]){cursor:not-allowed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SkraFieldset, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraFieldset, decorators: [{
             type: Component,
             args: [{ selector: 'fieldset[skraFieldset]', standalone: true, template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: {
                         role: 'group',
@@ -275,10 +297,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
  * legends (re-parents to fieldset), but Forge documents the canonical form.
  */
 class SkraLegend {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SkraLegend, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: SkraLegend, isStandalone: true, selector: "legend[skraLegend]", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{padding:0;margin:0;margin-block-end:var(--skra-comp-field-group-legend-spacing-block-end);display:block;inline-size:100%;font-family:var(--skra-sys-typography-role-label-large-font-family);font-size:var(--skra-sys-typography-role-label-large-font-size);font-weight:var(--skra-sys-typography-role-label-large-font-weight);line-height:var(--skra-sys-typography-role-label-large-line-height);letter-spacing:var(--skra-sys-typography-role-label-large-letter-spacing);color:var(--skra-comp-field-group-legend-color)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraLegend, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", type: SkraLegend, isStandalone: true, selector: "legend[skraLegend]", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{padding:0;margin:0;margin-block-end:var(--skra-comp-field-group-legend-spacing-block-end);display:block;inline-size:100%;font-family:var(--skra-sys-typography-role-label-large-font-family);font-size:var(--skra-sys-typography-role-label-large-font-size);font-weight:var(--skra-sys-typography-role-label-large-font-weight);line-height:var(--skra-sys-typography-role-label-large-line-height);letter-spacing:var(--skra-sys-typography-role-label-large-letter-spacing);color:var(--skra-comp-field-group-legend-color)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SkraLegend, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraLegend, decorators: [{
             type: Component,
             args: [{ selector: 'legend[skraLegend]', standalone: true, template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, styles: [":host{padding:0;margin:0;margin-block-end:var(--skra-comp-field-group-legend-spacing-block-end);display:block;inline-size:100%;font-family:var(--skra-sys-typography-role-label-large-font-family);font-size:var(--skra-sys-typography-role-label-large-font-size);font-weight:var(--skra-sys-typography-role-label-large-font-weight);line-height:var(--skra-sys-typography-role-label-large-line-height);letter-spacing:var(--skra-sys-typography-role-label-large-letter-spacing);color:var(--skra-comp-field-group-legend-color)}\n"] }]
         }] });

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

@@ -1 +1 @@
-{"version":3,"file":"skra-ui-field.mjs","sources":["../../../../libs/ui/field/src/lib/id-generator/id-generator.service.ts","../../../../libs/ui/field/src/lib/field-context/field-context.ts","../../../../libs/ui/field/src/lib/field/field.component.ts","../../../../libs/ui/field/src/lib/label/label.ts","../../../../libs/ui/field/src/lib/hint/hint.component.ts","../../../../libs/ui/field/src/lib/error/error.component.ts","../../../../libs/ui/field/src/lib/fieldset/fieldset.ts","../../../../libs/ui/field/src/lib/fieldset/legend.ts","../../../../libs/ui/field/src/index.ts","../../../../libs/ui/field/src/skra-ui-field.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\r\n\r\n/**\r\n * Root-level service generating unique, short IDs for form elements.\r\n * Implements ADR 013 — deterministic IDs without bloaty UUID libraries.\r\n */\r\n@Injectable({ providedIn: 'root' })\r\nexport class IdGeneratorService {\r\n  private counter = 0;\r\n\r\n  nextId(prefix = 'fg'): string {\r\n    return `${prefix}-${++this.counter}`;\r\n  }\r\n}\r\n","import { Injectable, signal, computed } from '@angular/core';\n\n/**\n * DI Context service provided per SkraField instance.\n * Acts as the synchronization bus between Field, Input, Label, Hint, and Error.\n * Implements ADR 013: Signal-based Contextual Interaction.\n */\n@Injectable()\nexport class SkraFieldContext {\n  readonly fieldId = signal<string>('');\n  readonly hasError = signal<boolean>(false);\n  readonly isDisabled = signal<boolean>(false);\n  readonly isRequired = signal<boolean>(false);\n  readonly isReadonly = signal<boolean>(false);\n\n  // Derived IDs for aria-describedby linkage\n  readonly hintId = computed(() => `${this.fieldId()}-hint`);\n  readonly errorId = computed(() => `${this.fieldId()}-error`);\n\n  // Derived label ID. Labelable controls (input/checkbox/radio) associate via the\n  // native `for`/`id` pair, so they never needed a referenceable label id. A\n  // `role=\"radiogroup\"` host (<skra-star-rating>) is NOT labelable by `for`, so it\n  // must name itself via `aria-labelledby` → the label needs an id. This is the third\n  // derived id alongside hintId/errorId — an id, never a value (ADR 013 §3.6; the\n  // context carries id + derived state only). Set on `label[skraLabelFor]`.\n  readonly labelId = computed(() => `${this.fieldId()}-label`);\n\n  // Combined aria-describedby tokens for the input/textarea host.\n  // Both ids are always emitted — when <skra-hint> or <skra-error> is not\n  // rendered, the matching DOM node is absent and browsers / screen readers\n  // gracefully ignore the dangling reference. Simpler than tracking presence\n  // via contentChild queries from the directive (which has no template).\n  readonly describedByIds = computed(\n    () => `${this.hintId()} ${this.errorId()}`,\n  );\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  OnInit,\n  ViewEncapsulation,\n  booleanAttribute,\n  effect,\n  inject,\n  input,\n} from '@angular/core';\nimport { SkraFieldContext } from '../field-context/field-context';\nimport { IdGeneratorService } from '../id-generator/id-generator.service';\n\n@Component({\n  selector: 'skra-field',\n  standalone: true,\n  template: '<ng-content></ng-content>',\n  styleUrl: './field.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.Emulated,\n  // KEY: provides a new SkraFieldContext instance per field — isolation guaranteed\n  providers: [SkraFieldContext],\n  host: {\n    // CSP-Safe State Reflection (ADR 021). The layout reset (margin) +\n    // display:flex live in field.component.scss `:host` (ADR 022) — host-metadata\n    // bare keys (margin, display) render as junk attributes with no styling effect.\n    // Validation state (ADR 027) — canonical `data-skra-validation=\"invalid\"`,\n    // NOT the forbidden `data-skra-has-error` (migrated 2026-05-31 per ADR 027\n    // §3.6 / state-surface-catalog). The control's `aria-invalid` lives on the\n    // inner <input skraInput> (ADR 013), not on this group host.\n    '[attr.data-skra-validation]': 'context.hasError() ? \"invalid\" : null',\n    '[attr.data-skra-disabled]': 'context.isDisabled() ? \"\" : null',\n    '[attr.data-skra-required]': 'context.isRequired() ? \"\" : null',\n    '[attr.data-skra-readonly]': 'context.isReadonly() ? \"\" : null',\n\n    // A11y: role=\"group\" groups label+input+hint semantically for screen readers\n    role: 'group',\n  },\n})\nexport class SkraField implements OnInit {\n  private readonly idGen = inject(IdGeneratorService);\n  readonly context = inject(SkraFieldContext);\n\n  readonly fieldId = input<string | null>(null);\n  readonly readonly = input(false, { transform: booleanAttribute });\n  readonly disabled = input(false, { transform: booleanAttribute });\n  readonly required = input(false, { transform: booleanAttribute });\n  readonly hasError = input(false, { transform: booleanAttribute });\n\n  constructor() {\n    // Reactive sync — state inputs propagate to SkraFieldContext on every\n    // change (not just on init). Replaces the previous ngOnInit-only pattern\n    // which caused late input changes to silently desync from the context\n    // (and from sibling atoms reading the context). Matches Checkbox's\n    // effect() pattern for indeterminate property sync.\n    effect(() => {\n      this.context.isReadonly.set(this.readonly());\n      this.context.isDisabled.set(this.disabled());\n      this.context.isRequired.set(this.required());\n      this.context.hasError.set(this.hasError());\n    });\n  }\n\n  // fieldId is one-shot — assigned once on init, never changes thereafter\n  // (a field's identity attribute should be stable for the field's lifetime).\n  ngOnInit(): void {\n    this.context.fieldId.set(this.fieldId() ?? this.idGen.nextId('fg'));\n  }\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  inject,\n} from '@angular/core';\nimport { SkraFieldContext } from '../field-context/field-context';\n\n/**\n * `label[skraLabelFor]` — form-control label atom. Per ADR 040 this is a\n * Component-on-the-native-host carrying its own `label.scss` (typography + colour\n * + cursor) via Emulated encapsulation, replacing the ADR 038 slice branch.\n *\n * `<label>` is content-bearing (its text is the label), so the template MUST be\n * `<ng-content>` — `template: ''` would discard the label text. See ADR 040 §2.\n *\n * Auto-links to its sibling control via `[htmlFor]` sourced from\n * `SkraFieldContext.fieldId()` — zero manual ID passing (ADR 013). The label's\n * error-state colour is driven by `<skra-field>[data-skra-validation=\"invalid\"]`\n * swapping `--skra-comp-field-label-color` through CSS variable inheritance; this\n * SCSS is what consumes that variable (the swap was a no-op before the binding\n * moved here from the slice).\n */\n@Component({\n  selector: 'label[skraLabelFor]',\n  standalone: true,\n  // Content-bearing host — see ADR 040 §2.\n  template: '<ng-content></ng-content>',\n  styleUrl: './label.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.Emulated,\n  host: {\n    // The magic: auto-linking label to input via shared Context ID\n    '[htmlFor]': 'context.fieldId()',\n    // Referenceable id so a non-labelable control (a `role=\"radiogroup\"` host like\n    // <skra-star-rating>, which `for`/`id` can't target) can name itself via\n    // `aria-labelledby`. Harmless for labelable controls (they use `for`). ADR 013.\n    '[id]': 'context.labelId()',\n    // Required marker — reflect the field's required state so the SCSS can paint a\n    // decorative asterisk (::after). The control already carries `aria-required`,\n    // so the marker is purely visual (ADR 021 data-attr reflection; ADR 033 keeps\n    // it out of the accessible name via the empty alt-text in `content`).\n    '[attr.data-skra-required]': 'context.isRequired() ? \"\" : null',\n    // Class hook retained for any consumer-side targeting (ADR 024 pattern).\n    class: 'skra-label',\n  },\n})\nexport class SkraLabel {\n  readonly context = inject(SkraFieldContext);\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  inject,\n} from '@angular/core';\nimport { SkraFieldContext } from '../field-context/field-context';\n\n/**\n * Hint component for supplementary field information.\n * Auto-receives ID from SkraFieldContext so aria-describedby on input works automatically.\n */\n@Component({\n  selector: 'skra-hint',\n  standalone: true,\n  template: '<ng-content></ng-content>',\n  styleUrl: './hint.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.Emulated,\n  host: {\n    // Zero-margin reset (ADR 022) lives in hint.component.scss `:host`.\n    // ID linked from context — input's aria-describedby points here automatically\n    '[id]': 'context.hintId()',\n    role: 'note',\n  },\n})\nexport class SkraHint {\n  readonly context = inject(SkraFieldContext);\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  inject,\n} from '@angular/core';\nimport { SkraFieldContext } from '../field-context/field-context';\n\n/**\n * Error message atom sibling to `<skra-hint>`. Renders validation feedback\n * inside `<skra-field>` with its own a11y semantics: `role=\"alert\"` (which\n * carries an implicit `aria-live=\"assertive\"` + `aria-atomic=\"true\"`), so screen\n * readers announce a validation error promptly. NO explicit `aria-live` — adding\n * `aria-live=\"polite\"` alongside `role=\"alert\"` is contradictory (alert is\n * assertive by definition) and behaves inconsistently across AT. Assertive is\n * the WAI-ARIA APG pattern for validation errors (decision 2026-05-31, Batch 4\n * cleanroom review).\n *\n * Per ADR 037 (agnostic atom co-existence) — does not infer error state from\n * any binding strategy. Consumer renders or omits `<skra-error>` based on\n * their own validation source (Signal Forms `.invalid && .touched`, Reactive\n * Forms `ctrl.errors`, raw computed signal). The atom itself just supplies\n * a11y wiring + visual treatment.\n *\n *   <skra-field [hasError]=\"emailHasError()\">\n *     <label skraLabelFor>Email</label>\n *     <input skraInput type=\"email\" />\n *     <skra-hint>We'll never share your email.</skra-hint>\n *     @if (emailHasError()) {\n *       <skra-error>Please enter a valid email address.</skra-error>\n *     }\n *   </skra-field>\n *\n * Separate from `<skra-hint>` per SRP: hint is static helper text\n * (role=\"note\", neutral colour); error is dynamic validation feedback\n * (role=\"alert\", live region, error colour). One element per visual\n * responsibility — the rejected alternative (\"hint that swaps text on error\")\n * loaded two responsibilities into a single primitive.\n */\n@Component({\n  selector: 'skra-error',\n  standalone: true,\n  template: '<ng-content></ng-content>',\n  styleUrl: './error.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.Emulated,\n  host: {\n    // Zero-margin reset (ADR 022) lives in error.component.scss `:host`.\n    // ID linked from context — input's aria-describedby points here automatically\n    '[id]': 'context.errorId()',\n    // role=\"alert\" implies aria-live=\"assertive\" + aria-atomic=\"true\" — do NOT\n    // add an explicit aria-live (contradicts the implicit assertive). Errors are\n    // announced promptly per WAI-ARIA APG.\n    role: 'alert',\n  },\n})\nexport class SkraError {\n  readonly context = inject(SkraFieldContext);\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  booleanAttribute,\n  input,\n} from '@angular/core';\n\n/**\n * Forge marker on a native `<fieldset>` used to group related form controls\n * (checkbox group, radio group, or any related field cluster). Per ADR 039,\n * Forge ships no `<skra-radio-group>` / `<skra-checkbox-group>` component\n * wrappers — native `<fieldset>` + `<legend>` IS the WCAG-canonical group\n * idiom, and Forge stops reinventing it.\n *\n * Per ADR 040 this is a Component-on-the-native-host carrying its own\n * `fieldset.scss` (chrome reset + group layout) via Emulated encapsulation,\n * replacing the ADR 038 slice branch. `<fieldset>` is content-bearing (it holds\n * the grouped controls), so the template MUST be `<ng-content>` — `template: ''`\n * would discard the entire group. See ADR 040 §2.\n *\n * The `[disabled]` input cascades to the native `disabled` attribute, and\n * native `<fieldset disabled>` already disables every form control inside\n * (browser-native behaviour). Forge does not iterate children manually.\n *\n * Selector is opt-in (`fieldset[skraFieldset]`) so the chrome-reset rules do\n * not leak onto bare `<fieldset>` elements outside Forge.\n *\n *   <fieldset skraFieldset [disabled]=\"form.disabled()\">\n *     <legend skraLegend>Send notifications via</legend>\n *     <!-- skra-field children with checkboxes -->\n *     <skra-error *ngIf=\"form.channels().length === 0\">Choose at least one</skra-error>\n *   </fieldset>\n *\n * `role=\"group\"` is the explicit ARIA role: while the browser default for\n * `<fieldset>` is already group semantics for most AT, declaring it explicitly\n * is friendlier to assistive tech that may have idiosyncratic handling.\n *\n * Native `disabled` is sufficient — `aria-disabled` is NOT set per\n * native-attr-first doctrine (memory `feedback_native_attr_first.md`). The\n * `data-skra-disabled` reflection drives the visual dimming in `fieldset.scss`.\n */\n@Component({\n  selector: 'fieldset[skraFieldset]',\n  standalone: true,\n  // Content-bearing host — see ADR 040 §2.\n  template: '<ng-content></ng-content>',\n  styleUrl: './fieldset.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.Emulated,\n  host: {\n    role: 'group',\n    '[attr.disabled]': 'disabled() ? \"\" : null',\n    '[attr.data-skra-disabled]': 'disabled() ? \"\" : null',\n  },\n})\nexport class SkraFieldset {\n  readonly disabled = input(false, { transform: booleanAttribute });\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n} from '@angular/core';\n\n/**\n * `legend[skraLegend]` — visible group label for `<fieldset skraFieldset>`.\n * Per ADR 040 this is a Component-on-the-native-host carrying its own\n * `legend.scss` (chrome reset + typography role binding per ADR 036) via Emulated\n * encapsulation, replacing the ADR 038 slice branch.\n *\n * `<legend>` is content-bearing (its text is the group label), so the template\n * MUST be `<ng-content>` — `template: ''` would discard the label. See ADR 040 §2.\n * No host bindings, no inputs, no DI — purely a styled marker.\n *\n *   <fieldset skraFieldset>\n *     <legend skraLegend>Account preferences</legend>\n *     ...\n *   </fieldset>\n *\n * HTML requires `<legend>` to be the FIRST child of `<fieldset>` for native\n * group-label semantics. The browser HTML parser auto-corrects misplaced\n * legends (re-parents to fieldset), but Forge documents the canonical form.\n */\n@Component({\n  selector: 'legend[skraLegend]',\n  standalone: true,\n  // Content-bearing host — see ADR 040 §2.\n  template: '<ng-content></ng-content>',\n  styleUrl: './legend.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.Emulated,\n})\nexport class SkraLegend {}\n","// Public API for @skra/ui/field — the field-family (ADR 013 contextual a11y).\nexport * from './lib/id-generator/id-generator.service';\nexport * from './lib/field-context/field-context';\nexport * from './lib/field/field.component';\nexport * from './lib/label/label';\nexport * from './lib/hint/hint.component';\nexport * from './lib/error/error.component';\nexport * from './lib/fieldset/fieldset';\nexport * from './lib/fieldset/legend';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"skra-ui-field.mjs","sources":["../../../../libs/ui/field/src/lib/id-generator/id-generator.service.ts","../../../../libs/ui/field/src/lib/field-context/field-context.ts","../../../../libs/ui/field/src/lib/field/field.component.ts","../../../../libs/ui/field/src/lib/label/label.ts","../../../../libs/ui/field/src/lib/hint/hint.component.ts","../../../../libs/ui/field/src/lib/error/error.component.ts","../../../../libs/ui/field/src/lib/fieldset/fieldset.ts","../../../../libs/ui/field/src/lib/fieldset/legend.ts","../../../../libs/ui/field/src/index.ts","../../../../libs/ui/field/src/skra-ui-field.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\r\n\r\n/**\r\n * Root-level service generating unique, short IDs for form elements.\r\n * Implements ADR 013 — deterministic IDs without bloaty UUID libraries.\r\n */\r\n@Injectable({ providedIn: 'root' })\r\nexport class IdGeneratorService {\r\n  private counter = 0;\r\n\r\n  nextId(prefix = 'fg'): string {\r\n    return `${prefix}-${++this.counter}`;\r\n  }\r\n}\r\n","import { Injectable, signal, computed } from '@angular/core';\r\n\r\n/**\r\n * DI Context service provided per SkraField instance.\r\n * Acts as the synchronization bus between Field, Input, Label, Hint, and Error.\r\n * Implements ADR 013: Signal-based Contextual Interaction.\r\n */\r\n@Injectable()\r\nexport class SkraFieldContext {\r\n  readonly fieldId = signal<string>('');\r\n  readonly hasError = signal<boolean>(false);\r\n  readonly isDisabled = signal<boolean>(false);\r\n  readonly isRequired = signal<boolean>(false);\r\n  readonly isReadonly = signal<boolean>(false);\r\n\r\n  // Derived IDs for aria-describedby linkage\r\n  readonly hintId = computed(() => `${this.fieldId()}-hint`);\r\n  readonly errorId = computed(() => `${this.fieldId()}-error`);\r\n\r\n  // Derived label ID. Labelable controls (input/checkbox/radio) associate via the\r\n  // native `for`/`id` pair, so they never needed a referenceable label id. A\r\n  // `role=\"radiogroup\"` host (<skra-star-rating>) is NOT labelable by `for`, so it\r\n  // must name itself via `aria-labelledby` → the label needs an id. This is the third\r\n  // derived id alongside hintId/errorId — an id, never a value (ADR 013 §3.6; the\r\n  // context carries id + derived state only). Set on `label[skraLabelFor]`.\r\n  readonly labelId = computed(() => `${this.fieldId()}-label`);\r\n\r\n  // Combined aria-describedby tokens for the input/textarea host.\r\n  // Both ids are always emitted — when <skra-hint> or <skra-error> is not\r\n  // rendered, the matching DOM node is absent and browsers / screen readers\r\n  // gracefully ignore the dangling reference. Simpler than tracking presence\r\n  // via contentChild queries from the directive (which has no template).\r\n  readonly describedByIds = computed(\r\n    () => `${this.hintId()} ${this.errorId()}`,\r\n  );\r\n}\r\n","import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  OnInit,\r\n  ViewEncapsulation,\r\n  booleanAttribute,\r\n  effect,\r\n  inject,\r\n  input,\r\n} from '@angular/core';\r\nimport { SkraFieldContext } from '../field-context/field-context';\r\nimport { IdGeneratorService } from '../id-generator/id-generator.service';\r\n\r\n@Component({\r\n  selector: 'skra-field',\r\n  standalone: true,\r\n  template: '<ng-content></ng-content>',\r\n  styleUrl: './field.component.scss',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.Emulated,\r\n  // KEY: provides a new SkraFieldContext instance per field — isolation guaranteed\r\n  providers: [SkraFieldContext],\r\n  host: {\r\n    // CSP-Safe State Reflection (ADR 021). The layout reset (margin) +\r\n    // display:flex live in field.component.scss `:host` (ADR 022) — host-metadata\r\n    // bare keys (margin, display) render as junk attributes with no styling effect.\r\n    // Validation state (ADR 027) — canonical `data-skra-validation=\"invalid\"`,\r\n    // NOT the forbidden `data-skra-has-error` (migrated 2026-05-31 per ADR 027\r\n    // §3.6 / state-surface-catalog). The control's `aria-invalid` lives on the\r\n    // inner <input skraInput> (ADR 013), not on this group host.\r\n    '[attr.data-skra-validation]': 'context.hasError() ? \"invalid\" : null',\r\n    '[attr.data-skra-disabled]': 'context.isDisabled() ? \"\" : null',\r\n    '[attr.data-skra-required]': 'context.isRequired() ? \"\" : null',\r\n    '[attr.data-skra-readonly]': 'context.isReadonly() ? \"\" : null',\r\n\r\n    // A11y: role=\"group\" groups label+input+hint semantically for screen readers\r\n    role: 'group',\r\n  },\r\n})\r\nexport class SkraField implements OnInit {\r\n  private readonly idGen = inject(IdGeneratorService);\r\n  readonly context = inject(SkraFieldContext);\r\n\r\n  readonly fieldId = input<string | null>(null);\r\n  readonly readonly = input(false, { transform: booleanAttribute });\r\n  readonly disabled = input(false, { transform: booleanAttribute });\r\n  readonly required = input(false, { transform: booleanAttribute });\r\n  readonly hasError = input(false, { transform: booleanAttribute });\r\n\r\n  constructor() {\r\n    // Reactive sync — state inputs propagate to SkraFieldContext on every\r\n    // change (not just on init). Replaces the previous ngOnInit-only pattern\r\n    // which caused late input changes to silently desync from the context\r\n    // (and from sibling atoms reading the context). Matches Checkbox's\r\n    // effect() pattern for indeterminate property sync.\r\n    effect(() => {\r\n      this.context.isReadonly.set(this.readonly());\r\n      this.context.isDisabled.set(this.disabled());\r\n      this.context.isRequired.set(this.required());\r\n      this.context.hasError.set(this.hasError());\r\n    });\r\n  }\r\n\r\n  // fieldId is one-shot — assigned once on init, never changes thereafter\r\n  // (a field's identity attribute should be stable for the field's lifetime).\r\n  ngOnInit(): void {\r\n    this.context.fieldId.set(this.fieldId() ?? this.idGen.nextId('fg'));\r\n  }\r\n}\r\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  inject,\n} from '@angular/core';\nimport { SkraFieldContext } from '../field-context/field-context';\n\n/**\n * `label[skraLabelFor]` — form-control label atom. Per ADR 040 this is a\n * Component-on-the-native-host carrying its own `label.scss` (typography + colour\n * + cursor) via Emulated encapsulation, replacing the ADR 038 slice branch.\n *\n * `<label>` is content-bearing (its text is the label), so the template MUST be\n * `<ng-content>` — `template: ''` would discard the label text. See ADR 040 §2.\n *\n * Auto-links to its sibling control via `[htmlFor]` sourced from\n * `SkraFieldContext.fieldId()` — zero manual ID passing (ADR 013). The label's\n * error-state colour is driven by `<skra-field>[data-skra-validation=\"invalid\"]`\n * swapping `--skra-comp-field-label-color` through CSS variable inheritance; this\n * SCSS is what consumes that variable (the swap was a no-op before the binding\n * moved here from the slice).\n */\n@Component({\n  selector: 'label[skraLabelFor]',\n  standalone: true,\n  // Content-bearing host — see ADR 040 §2.\n  template: '<ng-content></ng-content>',\n  styleUrl: './label.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.Emulated,\n  host: {\n    // The magic: auto-linking label to input via shared Context ID. Bound as an\n    // ATTRIBUTE, not the `htmlFor` property — with no field context the property\n    // form would stringify `undefined` into `for=\"undefined\"`.\n    '[attr.for]': 'context?.fieldId() ?? null',\n    // Referenceable id so a non-labelable control (a `role=\"radiogroup\"` host like\n    // <skra-star-rating>, which `for`/`id` can't target) can name itself via\n    // `aria-labelledby`. Harmless for labelable controls (they use `for`). ADR 013.\n    '[attr.id]': 'context?.labelId() ?? null',\n    // Required marker — reflect the field's required state so the SCSS can paint a\n    // decorative asterisk (::after). The control already carries `aria-required`,\n    // so the marker is purely visual (ADR 021 data-attr reflection; ADR 033 keeps\n    // it out of the accessible name via the empty alt-text in `content`).\n    '[attr.data-skra-required]': 'context?.isRequired() ? \"\" : null',\n    // Class hook retained for any consumer-side targeting (ADR 024 pattern).\n    class: 'skra-label',\n  },\n})\nexport class SkraLabel {\n  // Optional per ADR 013 §3.7 — outside `<skra-field>` the label still carries the\n  // skin and the consumer owns association (a wrapping `<label>`, or a hand-written\n  // `for`). Mandatory injection would crash the app for a styling-only use.\n  readonly context = inject(SkraFieldContext, { optional: true });\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  inject,\n} from '@angular/core';\nimport { SkraFieldContext } from '../field-context/field-context';\n\n/**\n * Hint component for supplementary field information.\n * Auto-receives ID from SkraFieldContext so aria-describedby on input works automatically.\n */\n@Component({\n  selector: 'skra-hint',\n  standalone: true,\n  template: '<ng-content></ng-content>',\n  styleUrl: './hint.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.Emulated,\n  host: {\n    // Zero-margin reset (ADR 022) lives in hint.component.scss `:host`.\n    // ID linked from context — input's aria-describedby points here automatically\n    '[attr.id]': 'context?.hintId() ?? null',\n    role: 'note',\n  },\n})\nexport class SkraHint {\n  // Optional per ADR 013 §3.7 — mirrors SkraError. Outside `<skra-field>` it\n  // publishes no id and is plain styled helper text the consumer associates itself.\n  readonly context = inject(SkraFieldContext, { optional: true });\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  inject,\n} from '@angular/core';\nimport { SkraFieldContext } from '../field-context/field-context';\n\n/**\n * Error message atom sibling to `<skra-hint>`. Renders validation feedback\n * inside `<skra-field>` with its own a11y semantics: `role=\"alert\"` (which\n * carries an implicit `aria-live=\"assertive\"` + `aria-atomic=\"true\"`), so screen\n * readers announce a validation error promptly. NO explicit `aria-live` — adding\n * `aria-live=\"polite\"` alongside `role=\"alert\"` is contradictory (alert is\n * assertive by definition) and behaves inconsistently across AT. Assertive is\n * the WAI-ARIA APG pattern for validation errors (decision 2026-05-31, Batch 4\n * cleanroom review).\n *\n * Per ADR 037 (agnostic atom co-existence) — does not infer error state from\n * any binding strategy. Consumer renders or omits `<skra-error>` based on\n * their own validation source (Signal Forms `.invalid && .touched`, Reactive\n * Forms `ctrl.errors`, raw computed signal). The atom itself just supplies\n * a11y wiring + visual treatment.\n *\n *   <skra-field [hasError]=\"emailHasError()\">\n *     <label skraLabelFor>Email</label>\n *     <input skraInput type=\"email\" />\n *     <skra-hint>We'll never share your email.</skra-hint>\n *     @if (emailHasError()) {\n *       <skra-error>Please enter a valid email address.</skra-error>\n *     }\n *   </skra-field>\n *\n * Separate from `<skra-hint>` per SRP: hint is static helper text\n * (role=\"note\", neutral colour); error is dynamic validation feedback\n * (role=\"alert\", live region, error colour). One element per visual\n * responsibility — the rejected alternative (\"hint that swaps text on error\")\n * loaded two responsibilities into a single primitive.\n */\n@Component({\n  selector: 'skra-error',\n  standalone: true,\n  template: '<ng-content></ng-content>',\n  styleUrl: './error.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.Emulated,\n  host: {\n    // Zero-margin reset (ADR 022) lives in error.component.scss `:host`.\n    // ID linked from context — input's aria-describedby points here automatically\n    '[attr.id]': 'context?.errorId() ?? null',\n    // role=\"alert\" implies aria-live=\"assertive\" + aria-atomic=\"true\" — do NOT\n    // add an explicit aria-live (contradicts the implicit assertive). Errors are\n    // announced promptly per WAI-ARIA APG.\n    role: 'alert',\n  },\n})\nexport class SkraError {\n  // Optional per ADR 013 §3.7. A GROUP-level error is a first-class pattern:\n  // `<skra-error>` sits as a direct child of `<fieldset skraFieldset>`, outside any\n  // `<skra-field>`, to carry one message for a radio/checkbox group (see the\n  // Fieldset `WithGroupError` story). It then publishes no id — nothing points at\n  // it via `aria-describedby`, and `role=\"alert\"` announces it on its own.\n  readonly context = inject(SkraFieldContext, { optional: true });\n}\n","import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  ViewEncapsulation,\r\n  booleanAttribute,\r\n  input,\r\n} from '@angular/core';\r\n\r\n/**\r\n * Forge marker on a native `<fieldset>` used to group related form controls\r\n * (checkbox group, radio group, or any related field cluster). Per ADR 039,\r\n * Forge ships no `<skra-radio-group>` / `<skra-checkbox-group>` component\r\n * wrappers — native `<fieldset>` + `<legend>` IS the WCAG-canonical group\r\n * idiom, and Forge stops reinventing it.\r\n *\r\n * Per ADR 040 this is a Component-on-the-native-host carrying its own\r\n * `fieldset.scss` (chrome reset + group layout) via Emulated encapsulation,\r\n * replacing the ADR 038 slice branch. `<fieldset>` is content-bearing (it holds\r\n * the grouped controls), so the template MUST be `<ng-content>` — `template: ''`\r\n * would discard the entire group. See ADR 040 §2.\r\n *\r\n * The `[disabled]` input cascades to the native `disabled` attribute, and\r\n * native `<fieldset disabled>` already disables every form control inside\r\n * (browser-native behaviour). Forge does not iterate children manually.\r\n *\r\n * Selector is opt-in (`fieldset[skraFieldset]`) so the chrome-reset rules do\r\n * not leak onto bare `<fieldset>` elements outside Forge.\r\n *\r\n *   <fieldset skraFieldset [disabled]=\"form.disabled()\">\r\n *     <legend skraLegend>Send notifications via</legend>\r\n *     <!-- skra-field children with checkboxes -->\r\n *     <skra-error *ngIf=\"form.channels().length === 0\">Choose at least one</skra-error>\r\n *   </fieldset>\r\n *\r\n * `role=\"group\"` is the explicit ARIA role: while the browser default for\r\n * `<fieldset>` is already group semantics for most AT, declaring it explicitly\r\n * is friendlier to assistive tech that may have idiosyncratic handling.\r\n *\r\n * Native `disabled` is sufficient — `aria-disabled` is NOT set per\r\n * native-attr-first doctrine (memory `feedback_native_attr_first.md`). The\r\n * `data-skra-disabled` reflection drives the visual dimming in `fieldset.scss`.\r\n */\r\n@Component({\r\n  selector: 'fieldset[skraFieldset]',\r\n  standalone: true,\r\n  // Content-bearing host — see ADR 040 §2.\r\n  template: '<ng-content></ng-content>',\r\n  styleUrl: './fieldset.scss',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.Emulated,\r\n  host: {\r\n    role: 'group',\r\n    '[attr.disabled]': 'disabled() ? \"\" : null',\r\n    '[attr.data-skra-disabled]': 'disabled() ? \"\" : null',\r\n  },\r\n})\r\nexport class SkraFieldset {\r\n  readonly disabled = input(false, { transform: booleanAttribute });\r\n}\r\n","import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  ViewEncapsulation,\r\n} from '@angular/core';\r\n\r\n/**\r\n * `legend[skraLegend]` — visible group label for `<fieldset skraFieldset>`.\r\n * Per ADR 040 this is a Component-on-the-native-host carrying its own\r\n * `legend.scss` (chrome reset + typography role binding per ADR 036) via Emulated\r\n * encapsulation, replacing the ADR 038 slice branch.\r\n *\r\n * `<legend>` is content-bearing (its text is the group label), so the template\r\n * MUST be `<ng-content>` — `template: ''` would discard the label. See ADR 040 §2.\r\n * No host bindings, no inputs, no DI — purely a styled marker.\r\n *\r\n *   <fieldset skraFieldset>\r\n *     <legend skraLegend>Account preferences</legend>\r\n *     ...\r\n *   </fieldset>\r\n *\r\n * HTML requires `<legend>` to be the FIRST child of `<fieldset>` for native\r\n * group-label semantics. The browser HTML parser auto-corrects misplaced\r\n * legends (re-parents to fieldset), but Forge documents the canonical form.\r\n */\r\n@Component({\r\n  selector: 'legend[skraLegend]',\r\n  standalone: true,\r\n  // Content-bearing host — see ADR 040 §2.\r\n  template: '<ng-content></ng-content>',\r\n  styleUrl: './legend.scss',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.Emulated,\r\n})\r\nexport class SkraLegend {}\r\n","// Public API for @skra/ui/field — the field-family (ADR 013 contextual a11y).\r\nexport * from './lib/id-generator/id-generator.service';\r\nexport * from './lib/field-context/field-context';\r\nexport * from './lib/field/field.component';\r\nexport * from './lib/label/label';\r\nexport * from './lib/hint/hint.component';\r\nexport * from './lib/error/error.component';\r\nexport * from './lib/fieldset/fieldset';\r\nexport * from './lib/fieldset/legend';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/skra-ui-icon.mjs

@@ -28,11 +28,12 @@ class SkraIcon {
      * forbidden by ADR 021); a consumer needing a bespoke size overrides
      * `--skra-comp-icon-size` via the sanctioned token-cascade path (ADR 029).
      */
-    size = input(null, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SkraIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.7", type: SkraIcon, isStandalone: true, selector: "skra-icon", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-skra-size": "size()" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:inline-block;margin:0;vertical-align:middle;color:inherit;--_skra-icon-resolved-size: var( --skra-comp-icon-size, var(--skra-comp-icon-size-default) );width:var(--_skra-icon-resolved-size);height:var(--_skra-icon-resolved-size);font-size:var(--_skra-icon-resolved-size);line-height:1}:host[data-skra-size=sm]{--_skra-icon-resolved-size: var(--skra-comp-icon-size-sm)}:host[data-skra-size=md]{--_skra-icon-resolved-size: var(--skra-comp-icon-size-md)}:host[data-skra-size=lg]{--_skra-icon-resolved-size: var(--skra-comp-icon-size-lg)}:host>svg,:host>img{display:block;width:100%;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    size = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: SkraIcon, isStandalone: true, selector: "skra-icon", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-skra-size": "size()" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:inline-block;margin:0;vertical-align:middle;color:inherit;--_skra-icon-resolved-size: var( --skra-comp-icon-size, var(--skra-comp-icon-size-default) );width:var(--_skra-icon-resolved-size);height:var(--_skra-icon-resolved-size);font-size:var(--_skra-icon-resolved-size);line-height:1}:host[data-skra-size=sm]{--_skra-icon-resolved-size: var(--skra-comp-icon-size-sm)}:host[data-skra-size=md]{--_skra-icon-resolved-size: var(--skra-comp-icon-size-md)}:host[data-skra-size=lg]{--_skra-icon-resolved-size: var(--skra-comp-icon-size-lg)}:host>svg,:host>img{display:block;width:100%;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SkraIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraIcon, decorators: [{
             type: Component,
             args: [{ selector: 'skra-icon', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: {
                         // CSP-Safe State Reflection (ADR 021) — host carries ONLY data-attributes,

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

@@ -1 +1 @@
-{"version":3,"file":"skra-ui-icon.mjs","sources":["../../../../libs/ui/icon/src/lib/icon/icon.ts","../../../../libs/ui/icon/src/lib/icon/icon.html","../../../../libs/ui/icon/src/skra-ui-icon.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  input,\n} from '@angular/core';\n\nexport type IconSize = 'sm' | 'md' | 'lg';\n\n/**\n * SkraIcon — container atom for icon-shaped content (ADR 034).\n *\n * Forge owns geometry, layout isolation, color inheritance hook. The shape\n * itself is supplied by the consumer via `<ng-content>` — inline SVG, `<img>`,\n * a third-party icon library element, or a styled `<span>` are all supported\n * equally. Forge ships no icon catalog and makes no rendering-strategy choice\n * for the consumer.\n *\n * Accessibility: this host has NO default ARIA attributes (ADR 034 §3.4). The\n * consumer MUST declare semantics explicitly:\n *   - decorative icon  → `<skra-icon aria-hidden=\"true\">`\n *   - meaningful icon  → `<skra-icon role=\"img\" aria-label=\"...\">`  (ADR 033 Path 3;\n *     `role=\"img\"` is required — `aria-label` on the roleless host is ARIA-prohibited)\n *\n * @see ADR 034 — SkraIcon as a container atom\n * @see ADR 033 — Accessible Name Contract\n */\n@Component({\n  selector: 'skra-icon',\n  standalone: true,\n  templateUrl: './icon.html',\n  styleUrl: './icon.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.Emulated,\n  host: {\n    // CSP-Safe State Reflection (ADR 021) — host carries ONLY data-attributes,\n    // never an inline `style`. The layout reset (display/margin/vertical-align)\n    // lives in icon.scss `:host` per Visual Purism (no inline styles) and the\n    // ADR 041 cleanup precedent (resets belong in SCSS, not host metadata).\n\n    // Size reflection (ADR 021). `null` keeps the attribute absent so the icon\n    // inherits the cascade-driven --skra-comp-icon-size (e.g. button slot\n    // wrapper per ADR 030).\n    '[attr.data-skra-size]': 'size()',\n  },\n})\nexport class SkraIcon {\n  /**\n   * Preset size token (`'sm' | 'md' | 'lg'`). When `null`, the icon inherits\n   * `--skra-comp-icon-size` from the surrounding context — typical in button\n   * slot wrappers (ADR 030 §3.4) where the parent owns the icon size. Arbitrary\n   * dimensions are not an input (a free value would require an inline style,\n   * forbidden by ADR 021); a consumer needing a bespoke size overrides\n   * `--skra-comp-icon-size` via the sanctioned token-cascade path (ADR 029).\n   */\n  readonly size = input<IconSize | null>(null);\n}\n","<ng-content></ng-content>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AASA;;;;;;;;;;;;;;;;;AAiBG;MAoBU,QAAQ,CAAA;AACnB;;;;;;;AAOG;AACM,IAAA,IAAI,GAAG,KAAK,CAAkB,IAAI,2EAAC;uGATjC,QAAQ,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAR,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,QAAQ,iQC9CrB,6BACA,EAAA,MAAA,EAAA,CAAA,gmBAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FD6Ca,QAAQ,EAAA,UAAA,EAAA,CAAA;kBAnBpB,SAAS;+BACE,WAAW,EAAA,UAAA,EACT,IAAI,EAAA,eAAA,EAGC,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,QAAQ,EAAA,IAAA,EACnC;;;;;;;;AASJ,wBAAA,uBAAuB,EAAE,QAAQ;AAClC,qBAAA,EAAA,QAAA,EAAA,6BAAA,EAAA,MAAA,EAAA,CAAA,gmBAAA,CAAA,EAAA;;;AE5CH;;AAEG;;;;"}
+{"version":3,"file":"skra-ui-icon.mjs","sources":["../../../../libs/ui/icon/src/lib/icon/icon.ts","../../../../libs/ui/icon/src/lib/icon/icon.html","../../../../libs/ui/icon/src/skra-ui-icon.ts"],"sourcesContent":["import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  ViewEncapsulation,\r\n  input,\r\n} from '@angular/core';\r\n\r\nexport type IconSize = 'sm' | 'md' | 'lg';\r\n\r\n/**\r\n * SkraIcon — container atom for icon-shaped content (ADR 034).\r\n *\r\n * Forge owns geometry, layout isolation, color inheritance hook. The shape\r\n * itself is supplied by the consumer via `<ng-content>` — inline SVG, `<img>`,\r\n * a third-party icon library element, or a styled `<span>` are all supported\r\n * equally. Forge ships no icon catalog and makes no rendering-strategy choice\r\n * for the consumer.\r\n *\r\n * Accessibility: this host has NO default ARIA attributes (ADR 034 §3.4). The\r\n * consumer MUST declare semantics explicitly:\r\n *   - decorative icon  → `<skra-icon aria-hidden=\"true\">`\r\n *   - meaningful icon  → `<skra-icon role=\"img\" aria-label=\"...\">`  (ADR 033 Path 3;\r\n *     `role=\"img\"` is required — `aria-label` on the roleless host is ARIA-prohibited)\r\n *\r\n * @see ADR 034 — SkraIcon as a container atom\r\n * @see ADR 033 — Accessible Name Contract\r\n */\r\n@Component({\r\n  selector: 'skra-icon',\r\n  standalone: true,\r\n  templateUrl: './icon.html',\r\n  styleUrl: './icon.scss',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.Emulated,\r\n  host: {\r\n    // CSP-Safe State Reflection (ADR 021) — host carries ONLY data-attributes,\r\n    // never an inline `style`. The layout reset (display/margin/vertical-align)\r\n    // lives in icon.scss `:host` per Visual Purism (no inline styles) and the\r\n    // ADR 041 cleanup precedent (resets belong in SCSS, not host metadata).\r\n\r\n    // Size reflection (ADR 021). `null` keeps the attribute absent so the icon\r\n    // inherits the cascade-driven --skra-comp-icon-size (e.g. button slot\r\n    // wrapper per ADR 030).\r\n    '[attr.data-skra-size]': 'size()',\r\n  },\r\n})\r\nexport class SkraIcon {\r\n  /**\r\n   * Preset size token (`'sm' | 'md' | 'lg'`). When `null`, the icon inherits\r\n   * `--skra-comp-icon-size` from the surrounding context — typical in button\r\n   * slot wrappers (ADR 030 §3.4) where the parent owns the icon size. Arbitrary\r\n   * dimensions are not an input (a free value would require an inline style,\r\n   * forbidden by ADR 021); a consumer needing a bespoke size overrides\r\n   * `--skra-comp-icon-size` via the sanctioned token-cascade path (ADR 029).\r\n   */\r\n  readonly size = input<IconSize | null>(null);\r\n}\r\n","<ng-content></ng-content>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AASA;;;;;;;;;;;;;;;;;AAiBG;MAoBU,QAAQ,CAAA;AACnB;;;;;;;AAOG;IACM,IAAI,GAAG,KAAK,CAAkB,IAAI;6EAAC;uGATjC,QAAQ,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAR,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,QAAQ,iQC9CrB,6BACA,EAAA,MAAA,EAAA,CAAA,gmBAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FD6Ca,QAAQ,EAAA,UAAA,EAAA,CAAA;kBAnBpB,SAAS;+BACE,WAAW,EAAA,UAAA,EACT,IAAI,EAAA,eAAA,EAGC,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,QAAQ,EAAA,IAAA,EACnC;;;;;;;;AASJ,wBAAA,uBAAuB,EAAE,QAAQ;AAClC,qBAAA,EAAA,QAAA,EAAA,6BAAA,EAAA,MAAA,EAAA,CAAA,gmBAAA,CAAA,EAAA;;;AE5CH;;AAEG;;;;"}

package/fesm2022/skra-ui-input.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, ElementRef, effect, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { SkraFieldContext } from '@skra/ui/field';
 
 /**
@@ -12,27 +12,68 @@ import { SkraFieldContext } from '@skra/ui/field';
  * DI wiring (ADR 013), host a11y bindings (ADR 021/027), and the agnostic
  * value posture (ADR 037 — no value channel, no @angular/forms) are unchanged
  * from the prior directive form.
+ *
+ * `SkraFieldContext` is injected `{ optional: true }` (ADR 013 §3.7) — the same
+ * posture as `skraCheckbox` / `skraRadio` / `skraSwitch`. Inside `<skra-field>`
+ * the atom takes the field's id + describedby + availability cascade; standalone
+ * it renders the skin only and the consumer owns every attribute, including the
+ * accessible name:
+ *
+ *   <!-- inside Field — label association via the DI-generated id/for pair -->
+ *   <skra-field>
+ *     <label skraLabelFor>Email</label>
+ *     <input skraInput type="email" />
+ *   </skra-field>
+ *
+ *   <!-- standalone: native implicit label (wrapping) — no id/for needed -->
+ *   <label>Search <input skraInput type="search" /></label>
+ *
+ * Standalone use does NOT relax the ADR 033 accessible-name contract; it moves
+ * the name onto the consumer's own native markup. An input with no name is an
+ * a11y defect wherever it appears — including inside a `<skra-field>` that
+ * carries no `label[skraLabelFor]` — so the check belongs to the a11y gate, not
+ * to this injection site (ADR 013 §3.7).
  */
 class SkraInput {
-    context = inject(SkraFieldContext);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SkraInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: SkraInput, isStandalone: true, selector: "input[skraInput]", host: { properties: { "id": "context.fieldId()", "attr.aria-describedby": "context.describedByIds()", "attr.aria-invalid": "context.hasError() ? \"true\" : null", "attr.aria-required": "context.isRequired() ? \"true\" : null", "attr.disabled": "context.isDisabled() ? \"\" : null", "attr.readonly": "context.isReadonly() ? \"\" : null" } }, ngImport: i0, template: '', isInline: true, styles: [":host{background: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;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(:hover:not(:disabled):not([readonly])){background: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([readonly]){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 });
+    el = inject(ElementRef);
+    context = inject(SkraFieldContext, { optional: true });
+    constructor() {
+        const el = this.el.nativeElement;
+        // Field-cascaded native properties — only bind when context is present so
+        // standalone consumers retain full control of their static attributes
+        // (a host `[attr.disabled]="null"` binding would strip a consumer-authored
+        // `disabled` / `readonly` / `id`). Mirrors SkraCheckbox.
+        if (this.context) {
+            const ctx = this.context;
+            effect(() => {
+                el.id = ctx.fieldId();
+            });
+            effect(() => {
+                el.disabled = ctx.isDisabled();
+            });
+            effect(() => {
+                el.readOnly = ctx.isReadonly();
+            });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", type: SkraInput, isStandalone: true, selector: "input[skraInput]", host: { properties: { "attr.aria-describedby": "context?.describedByIds() ?? null", "attr.aria-invalid": "context?.hasError() ? \"true\" : null", "attr.aria-required": "context?.isRequired() ? \"true\" : null" } }, ngImport: i0, template: '', isInline: true, styles: [":host{background: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;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(:hover:not(:disabled):not([readonly])){background: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([readonly]){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: SkraInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraInput, decorators: [{
             type: Component,
             args: [{ selector: 'input[skraInput]', standalone: true, template: '', 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',
+                        // ARIA relationships — Skra-owned, present only while a field cascades them.
+                        '[attr.aria-describedby]': 'context?.describedByIds() ?? null',
+                        '[attr.aria-invalid]': 'context?.hasError() ? "true" : null',
+                        '[attr.aria-required]': 'context?.isRequired() ? "true" : null',
                         // Availability — native attrs only (native-attr-first, boundary #9). <input>
                         // supports native `readonly`/`disabled`, which AT already exposes; NO
                         // `aria-readonly`/`aria-disabled` here (setting both native + ARIA for one
                         // state is forbidden). Readonly styling keys off `:read-only`/`[readonly]`.
-                        '[attr.disabled]': 'context.isDisabled() ? "" : null',
-                        '[attr.readonly]': 'context.isReadonly() ? "" : null',
+                        // The native props are driven imperatively below, NOT as host bindings —
+                        // see the constructor note on standalone attribute ownership.
                     }, styles: [":host{background: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;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(:hover:not(:disabled):not([readonly])){background: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([readonly]){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: () => [] });
 
 /**
  * Generated bundle index. Do not edit.

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

@@ -1 +1 @@
-{"version":3,"file":"skra-ui-input.mjs","sources":["../../../../libs/ui/input/src/lib/input/input.ts","../../../../libs/ui/input/src/skra-ui-input.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  inject,\n} from '@angular/core';\nimport { SkraFieldContext } from '@skra/ui/field';\n\n/**\n * `input[skraInput]` — text-input atom. Per ADR 040 this is a\n * Component-on-a-native-host (not a directive): `<input>` is a void element, so\n * `template: ''` is correct — there is no consumer content to project. Angular\n * Emulated encapsulation scopes `input.scss` to the host, the same way\n * <skra-button> carries its own CSS. Replaces the ADR 038 global slice branch.\n *\n * DI wiring (ADR 013), host a11y bindings (ADR 021/027), and the agnostic\n * value posture (ADR 037 — no value channel, no @angular/forms) are unchanged\n * from the prior directive form.\n */\n@Component({\n  selector: 'input[skraInput]',\n  standalone: true,\n  // Void host — no <ng-content>. See ADR 040 §2.\n  template: '',\n  styleUrl: './input.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    // Availability — native attrs only (native-attr-first, boundary #9). <input>\n    // supports native `readonly`/`disabled`, which AT already exposes; NO\n    // `aria-readonly`/`aria-disabled` here (setting both native + ARIA for one\n    // state is forbidden). Readonly styling keys off `:read-only`/`[readonly]`.\n    '[attr.disabled]': 'context.isDisabled() ? \"\" : null',\n    '[attr.readonly]': 'context.isReadonly() ? \"\" : null',\n  },\n})\nexport class SkraInput {\n  readonly context = inject(SkraFieldContext);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAQA;;;;;;;;;;AAUG;MAsBU,SAAS,CAAA;AACX,IAAA,OAAO,GAAG,MAAM,CAAC,gBAAgB,CAAC;uGADhC,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,iaAjBV,EAAE,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,i/CAAA,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,kBAAkB,EAAA,UAAA,EAChB,IAAI,EAAA,QAAA,EAEN,EAAE,EAAA,eAAA,EAEK,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;;;;;AAK9D,wBAAA,iBAAiB,EAAE,kCAAkC;AACrD,wBAAA,iBAAiB,EAAE,kCAAkC;AACtD,qBAAA,EAAA,MAAA,EAAA,CAAA,i/CAAA,CAAA,EAAA;;;ACtCH;;AAEG;;;;"}
+{"version":3,"file":"skra-ui-input.mjs","sources":["../../../../libs/ui/input/src/lib/input/input.ts","../../../../libs/ui/input/src/skra-ui-input.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 * `input[skraInput]` — text-input atom. Per ADR 040 this is a\n * Component-on-a-native-host (not a directive): `<input>` is a void element, so\n * `template: ''` is correct — there is no consumer content to project. Angular\n * Emulated encapsulation scopes `input.scss` to the host, the same way\n * <skra-button> carries its own CSS. Replaces the ADR 038 global slice branch.\n *\n * DI wiring (ADR 013), host a11y bindings (ADR 021/027), and the agnostic\n * value posture (ADR 037 — no value channel, no @angular/forms) are unchanged\n * from the prior directive form.\n *\n * `SkraFieldContext` is injected `{ optional: true }` (ADR 013 §3.7) — the same\n * posture as `skraCheckbox` / `skraRadio` / `skraSwitch`. Inside `<skra-field>`\n * the atom takes the field's id + describedby + availability cascade; standalone\n * it renders the skin only and the consumer owns every attribute, including the\n * accessible name:\n *\n *   <!-- inside Field — label association via the DI-generated id/for pair -->\n *   <skra-field>\n *     <label skraLabelFor>Email</label>\n *     <input skraInput type=\"email\" />\n *   </skra-field>\n *\n *   <!-- standalone: native implicit label (wrapping) — no id/for needed -->\n *   <label>Search <input skraInput type=\"search\" /></label>\n *\n * Standalone use does NOT relax the ADR 033 accessible-name contract; it moves\n * the name onto the consumer's own native markup. An input with no name is an\n * a11y defect wherever it appears — including inside a `<skra-field>` that\n * carries no `label[skraLabelFor]` — so the check belongs to the a11y gate, not\n * to this injection site (ADR 013 §3.7).\n */\n@Component({\n  selector: 'input[skraInput]',\n  standalone: true,\n  // Void host — no <ng-content>. See ADR 040 §2.\n  template: '',\n  styleUrl: './input.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.Emulated,\n  host: {\n    // ARIA relationships — Skra-owned, present only while a field cascades them.\n    '[attr.aria-describedby]': 'context?.describedByIds() ?? null',\n    '[attr.aria-invalid]': 'context?.hasError() ? \"true\" : null',\n    '[attr.aria-required]': 'context?.isRequired() ? \"true\" : null',\n    // Availability — native attrs only (native-attr-first, boundary #9). <input>\n    // supports native `readonly`/`disabled`, which AT already exposes; NO\n    // `aria-readonly`/`aria-disabled` here (setting both native + ARIA for one\n    // state is forbidden). Readonly styling keys off `:read-only`/`[readonly]`.\n    // The native props are driven imperatively below, NOT as host bindings —\n    // see the constructor note on standalone attribute ownership.\n  },\n})\nexport class SkraInput {\n  private readonly el = inject<ElementRef<HTMLInputElement>>(ElementRef);\n  readonly context = inject(SkraFieldContext, { optional: true });\n\n  constructor() {\n    const el = this.el.nativeElement;\n\n    // Field-cascaded native properties — only bind when context is present so\n    // standalone consumers retain full control of their static attributes\n    // (a host `[attr.disabled]=\"null\"` binding would strip a consumer-authored\n    // `disabled` / `readonly` / `id`). Mirrors SkraCheckbox.\n    if (this.context) {\n      const ctx = this.context;\n      effect(() => {\n        el.id = ctx.fieldId();\n      });\n      effect(() => {\n        el.disabled = ctx.isDisabled();\n      });\n      effect(() => {\n        el.readOnly = ctx.isReadonly();\n      });\n    }\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAUA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BG;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,MAAM,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa;;;;;AAMhC,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AAChB,YAAA,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO;YACxB,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;YACF,MAAM,CAAC,MAAK;AACV,gBAAA,EAAE,CAAC,QAAQ,GAAG,GAAG,CAAC,UAAU,EAAE;AAChC,YAAA,CAAC,CAAC;QACJ;IACF;uGAvBW,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,mSAjBV,EAAE,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,i/CAAA,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,kBAAkB,EAAA,UAAA,EAChB,IAAI,EAAA,QAAA,EAEN,EAAE,EAAA,eAAA,EAEK,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,QAAQ,EAAA,IAAA,EACnC;;AAEJ,wBAAA,yBAAyB,EAAE,mCAAmC;AAC9D,wBAAA,qBAAqB,EAAE,qCAAqC;AAC5D,wBAAA,sBAAsB,EAAE,uCAAuC;;;;;;;AAOhE,qBAAA,EAAA,MAAA,EAAA,CAAA,i/CAAA,CAAA,EAAA;;;AC7DH;;AAEG;;;;"}

package/fesm2022/skra-ui-kbd.mjs

@@ -26,10 +26,10 @@ import { ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/
  * deliberately **not** `aria-hidden`: the key name is meaningful content AT must announce.
  */
 class SkraKbd {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SkraKbd, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: SkraKbd, isStandalone: true, selector: "kbd[skraKbd]", host: { classAttribute: "skra-kbd" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:inline-flex;align-items:center;justify-content:center;margin:0;white-space:nowrap;vertical-align:baseline;background:var(--skra-comp-kbd-background);color:var(--skra-comp-kbd-foreground);border:var(--skra-comp-kbd-border-width) var(--skra-comp-kbd-border-style) var(--skra-comp-kbd-border-color);border-radius:var(--skra-comp-kbd-radius);padding:var(--skra-comp-kbd-padding-block) var(--skra-comp-kbd-padding-inline);box-shadow:var(--skra-comp-kbd-shadow);font-family:var(--skra-comp-kbd-font-family);font-size:.875em;font-weight:var(--skra-sys-typography-role-label-small-font-weight);line-height:var(--skra-sys-typography-role-label-small-line-height);letter-spacing:var(--skra-sys-typography-role-label-small-letter-spacing);min-inline-size:1em;box-sizing:border-box}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraKbd, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", type: SkraKbd, isStandalone: true, selector: "kbd[skraKbd]", host: { classAttribute: "skra-kbd" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:inline-flex;align-items:center;justify-content:center;margin:0;white-space:nowrap;vertical-align:baseline;background:var(--skra-comp-kbd-background);color:var(--skra-comp-kbd-foreground);border:var(--skra-comp-kbd-border-width) var(--skra-comp-kbd-border-style) var(--skra-comp-kbd-border-color);border-radius:var(--skra-comp-kbd-radius);padding:var(--skra-comp-kbd-padding-block) var(--skra-comp-kbd-padding-inline);box-shadow:var(--skra-comp-kbd-shadow);font-family:var(--skra-comp-kbd-font-family);font-size:.875em;font-weight:var(--skra-sys-typography-role-label-small-font-weight);line-height:var(--skra-sys-typography-role-label-small-line-height);letter-spacing:var(--skra-sys-typography-role-label-small-letter-spacing);min-inline-size:1em;box-sizing:border-box}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SkraKbd, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraKbd, decorators: [{
             type: Component,
             args: [{ selector: 'kbd[skraKbd]', standalone: true, template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: {
                         class: 'skra-kbd',

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

@@ -1 +1 @@
-{"version":3,"file":"skra-ui-kbd.mjs","sources":["../../../../libs/ui/kbd/src/lib/kbd/kbd.ts","../../../../libs/ui/kbd/src/skra-ui-kbd.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n} from '@angular/core';\n\n/**\n * `kbd[skraKbd]` — keyboard-key display atom (first resident of `libs/ui/content`, the\n * text-level inline-semantics family). Renders a single key / key-name as a styled key-cap for\n * docs, shortcut hints and help text (\"press `Esc` to close\"). See\n * `adr/specs/component-kbd-spec.md`.\n *\n * **Component-on-the-native-host (ADR 040), NOT `<skra-kbd>`:** native `<kbd>` already carries\n * the correct HTML semantic (\"user keyboard input\"), so we decorate it (ADR 012). `<kbd>` is\n * content-bearing, so the template MUST be `<ng-content>` — `template: ''` would discard the key\n * text (ADR 040 §2; the `label[skraLabelFor]` precedent).\n *\n * **Zero inputs by design.** A key display is purely presentational:\n * - sizing is em-relative (it harmonises with the surrounding text), so there is no `size` input\n *   — an explicit size enum would be a look-input (skin-philosophy) and low-demand (90%-rule);\n * - no coherent semantic exists for a `type`, and a `type` enum switching appearance is the SRP\n *   smell the Decision Doctrine warns against;\n * - the monospace family is skin-owned (`--skra-comp-kbd-font-family` → `sys.font-family.code`);\n * - key-combos (\"Ctrl+C\") are consumer composition of multiple `<kbd skraKbd>` (agnostic\n *   doctrine), not a `combo` input.\n *\n * So there is no input, no output, no `data-skra-*` state (non-interactive — State Surface\n * all-N/A), and no `ariaLabel` (the visible text IS the accessible content, ADR 033). The host is\n * deliberately **not** `aria-hidden`: the key name is meaningful content AT must announce.\n */\n@Component({\n  selector: 'kbd[skraKbd]',\n  standalone: true,\n  // Content-bearing host — see ADR 040 §2 (label precedent).\n  template: '<ng-content></ng-content>',\n  styleUrl: './kbd.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.Emulated,\n  host: {\n    class: 'skra-kbd',\n  },\n})\nexport class SkraKbd {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAMA;;;;;;;;;;;;;;;;;;;;;;;AAuBG;MAaU,OAAO,CAAA;uGAAP,OAAO,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAP,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,OAAO,8GARR,2BAA2B,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,oxBAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAQ1B,OAAO,EAAA,UAAA,EAAA,CAAA;kBAZnB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,cAAc,EAAA,UAAA,EACZ,IAAI,EAAA,QAAA,EAEN,2BAA2B,EAAA,eAAA,EAEpB,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,QAAQ,EAAA,IAAA,EACnC;AACJ,wBAAA,KAAK,EAAE,UAAU;AAClB,qBAAA,EAAA,MAAA,EAAA,CAAA,oxBAAA,CAAA,EAAA;;;ACxCH;;AAEG;;;;"}
+{"version":3,"file":"skra-ui-kbd.mjs","sources":["../../../../libs/ui/kbd/src/lib/kbd/kbd.ts","../../../../libs/ui/kbd/src/skra-ui-kbd.ts"],"sourcesContent":["import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  ViewEncapsulation,\r\n} from '@angular/core';\r\n\r\n/**\r\n * `kbd[skraKbd]` — keyboard-key display atom (first resident of `libs/ui/content`, the\r\n * text-level inline-semantics family). Renders a single key / key-name as a styled key-cap for\r\n * docs, shortcut hints and help text (\"press `Esc` to close\"). See\r\n * `adr/specs/component-kbd-spec.md`.\r\n *\r\n * **Component-on-the-native-host (ADR 040), NOT `<skra-kbd>`:** native `<kbd>` already carries\r\n * the correct HTML semantic (\"user keyboard input\"), so we decorate it (ADR 012). `<kbd>` is\r\n * content-bearing, so the template MUST be `<ng-content>` — `template: ''` would discard the key\r\n * text (ADR 040 §2; the `label[skraLabelFor]` precedent).\r\n *\r\n * **Zero inputs by design.** A key display is purely presentational:\r\n * - sizing is em-relative (it harmonises with the surrounding text), so there is no `size` input\r\n *   — an explicit size enum would be a look-input (skin-philosophy) and low-demand (90%-rule);\r\n * - no coherent semantic exists for a `type`, and a `type` enum switching appearance is the SRP\r\n *   smell the Decision Doctrine warns against;\r\n * - the monospace family is skin-owned (`--skra-comp-kbd-font-family` → `sys.font-family.code`);\r\n * - key-combos (\"Ctrl+C\") are consumer composition of multiple `<kbd skraKbd>` (agnostic\r\n *   doctrine), not a `combo` input.\r\n *\r\n * So there is no input, no output, no `data-skra-*` state (non-interactive — State Surface\r\n * all-N/A), and no `ariaLabel` (the visible text IS the accessible content, ADR 033). The host is\r\n * deliberately **not** `aria-hidden`: the key name is meaningful content AT must announce.\r\n */\r\n@Component({\r\n  selector: 'kbd[skraKbd]',\r\n  standalone: true,\r\n  // Content-bearing host — see ADR 040 §2 (label precedent).\r\n  template: '<ng-content></ng-content>',\r\n  styleUrl: './kbd.scss',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.Emulated,\r\n  host: {\r\n    class: 'skra-kbd',\r\n  },\r\n})\r\nexport class SkraKbd {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAMA;;;;;;;;;;;;;;;;;;;;;;;AAuBG;MAaU,OAAO,CAAA;uGAAP,OAAO,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAP,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,OAAO,8GARR,2BAA2B,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,oxBAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAQ1B,OAAO,EAAA,UAAA,EAAA,CAAA;kBAZnB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,cAAc,EAAA,UAAA,EACZ,IAAI,EAAA,QAAA,EAEN,2BAA2B,EAAA,eAAA,EAEpB,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,QAAQ,EAAA,IAAA,EACnC;AACJ,wBAAA,KAAK,EAAE,UAAU;AAClB,qBAAA,EAAA,MAAA,EAAA,CAAA,oxBAAA,CAAA,EAAA;;;ACxCH;;AAEG;;;;"}