@skra/ui 0.4.0 → 0.6.0

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

@@ -1 +1 @@
-{"version":3,"file":"skra-ui-button.mjs","sources":["../../../../libs/ui/button/src/lib/button.directives.ts","../../../../libs/ui/button/src/lib/button/button.ts","../../../../libs/ui/button/src/lib/button/button.html","../../../../libs/ui/button/src/skra-ui-button.ts"],"sourcesContent":["import { Directive } from '@angular/core';\r\n\r\n@Directive({\r\n  selector: '[skra-start]',\r\n  standalone: true,\r\n})\r\nexport class SkraButtonStart {}\r\n\r\n@Directive({\r\n  selector: '[skra-end]',\r\n  standalone: true,\r\n})\r\nexport class SkraButtonEnd {}\r\n","import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  ViewEncapsulation,\r\n  booleanAttribute,\r\n  input,\r\n  computed,\r\n  contentChild,\r\n} from '@angular/core';\r\nimport { SkraButtonStart, SkraButtonEnd } from '../button.directives';\r\nimport { SkraLoadingIndicator } from '@skra/ui/loading-indicator';\r\n\r\n/**\r\n * ButtonIntent — semantic role of the action (ADR 035 §3.1).\r\n * Closed enum; extension requires amendment to ADR 035.\r\n */\r\nexport type ButtonIntent =\r\n  | 'neutral'\r\n  | 'primary'\r\n  | 'secondary'\r\n  | 'info'\r\n  | 'success'\r\n  | 'warning'\r\n  | 'danger';\r\n\r\n/**\r\n * ButtonEmphasis — visual loudness within the chosen intent (ADR 035 §3.1).\r\n * Skin maps each level to its own treatment (filled / outlined / ghost / other).\r\n */\r\nexport type ButtonEmphasis = 'high' | 'medium' | 'low';\r\n\r\n/**\r\n * ButtonSize — per-instance scale relative to typography and spacing (ADR 035 §3.1).\r\n * Distinct from Density (ADR 016 §3.5), which is subtree-runtime.\r\n */\r\nexport type ButtonSize = 'sm' | 'md' | 'lg';\r\n\r\n@Component({\r\n  selector: 'button[skraButton]',\r\n  standalone: true,\r\n  templateUrl: './button.html',\r\n  styleUrl: './button.scss',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.Emulated,\r\n  host: {\r\n    // Variant Surface reflection (ADR 035 §3.5)\r\n    '[attr.data-skra-intent]': 'intent()',\r\n    '[attr.data-skra-emphasis]': 'emphasis()',\r\n    '[attr.data-skra-size]': 'size()',\r\n\r\n    // State Surface reflection — Transient category (ADR 027 §3.1 cat 4)\r\n    '[attr.data-skra-loading]': 'loading() ? \"\" : null',\r\n    '[attr.aria-busy]': 'loading() ? \"true\" : null',\r\n\r\n    // Smart Slots layout reflection (ADR 020 v2.0 §3.2 — slot-presence, exempt from State Surface per ADR 027 §3.6)\r\n    '[attr.data-skra-has-start]': 'hasStart() ? \"\" : null',\r\n    '[attr.data-skra-has-end]': 'hasEnd() ? \"\" : null',\r\n  },\r\n})\r\nexport class SkraButton {\r\n  // --- Variant Surface (ADR 035) ---\r\n  readonly intent = input<ButtonIntent>('neutral');\r\n  readonly emphasis = input<ButtonEmphasis>('high');\r\n  readonly size = input<ButtonSize>('md');\r\n\r\n  // --- State Surface — Transient (ADR 027 cat 4 + ADR 028) ---\r\n  readonly loading = input(false, { transform: booleanAttribute });\r\n\r\n  // --- Smart Slots v2.0 (ADR 020) ---\r\n  readonly startSlot = contentChild(SkraButtonStart);\r\n  readonly endSlot = contentChild(SkraButtonEnd);\r\n\r\n  readonly hasStart = computed(() => !!this.startSlot());\r\n  readonly hasEnd = computed(() => !!this.endSlot());\r\n\r\n  // --- Loading Indicator Slot (ADR 028) ---\r\n  readonly loadingIndicatorSlot = contentChild(SkraLoadingIndicator);\r\n  readonly hasLoadingIndicator = computed(() => !!this.loadingIndicatorSlot());\r\n}\r\n","@if (hasStart()) {\r\n<span class=\"skra-button-slot-wrapper\">\r\n  <ng-content select=\"[skra-start]\"></ng-content>\r\n</span>\r\n}\r\n\r\n<span class=\"skra-button-label-wrapper\">\r\n  <ng-content></ng-content>\r\n</span>\r\n\r\n@if (hasEnd()) {\r\n<span class=\"skra-button-slot-wrapper\">\r\n  <ng-content select=\"[skra-end]\"></ng-content>\r\n</span>\r\n} @if (loading()) {\r\n<span class=\"skra-button-loading-indicator\" data-skra-loading-indicator>\r\n  @if (hasLoadingIndicator()) {\r\n  <ng-content select=\"[skraLoadingIndicator]\"></ng-content>\r\n  } @else {\r\n  <span data-skra-loading-indicator-fallback aria-hidden=\"true\"></span>\r\n  }\r\n</span>\r\n}\r\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-button.mjs","sources":["../../../../libs/ui/button/src/lib/button.directives.ts","../../../../libs/ui/button/src/lib/button/button.ts","../../../../libs/ui/button/src/lib/button/button.html","../../../../libs/ui/button/src/skra-ui-button.ts"],"sourcesContent":["import { Directive } from '@angular/core';\n\n@Directive({\n  selector: '[skra-start]',\n  standalone: true,\n})\nexport class SkraButtonStart {}\n\n@Directive({\n  selector: '[skra-end]',\n  standalone: true,\n})\nexport class SkraButtonEnd {}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  booleanAttribute,\n  input,\n  computed,\n  contentChild,\n} from '@angular/core';\nimport { SkraButtonStart, SkraButtonEnd } from '../button.directives';\nimport { SkraLoadingIndicator } from '@skra/ui/loading-indicator';\n\n/**\n * ButtonIntent — semantic role of the action (ADR 035 §3.1).\n * Closed enum; extension requires amendment to ADR 035.\n */\nexport type ButtonIntent =\n  | 'neutral'\n  | 'primary'\n  | 'secondary'\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'danger';\n\n/**\n * ButtonEmphasis — visual loudness within the chosen intent (ADR 035 §3.1).\n * Skin maps each level to its own treatment (filled / outlined / ghost / other).\n */\nexport type ButtonEmphasis = 'high' | 'medium' | 'low';\n\n/**\n * ButtonSize — per-instance scale relative to typography and spacing (ADR 035 §3.1).\n * Distinct from Density (ADR 016 §3.5), which is subtree-runtime.\n */\nexport type ButtonSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  selector: 'button[skraButton]',\n  standalone: true,\n  templateUrl: './button.html',\n  styleUrl: './button.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.Emulated,\n  host: {\n    // Variant Surface reflection (ADR 035 §3.5)\n    '[attr.data-skra-intent]': 'intent()',\n    '[attr.data-skra-emphasis]': 'emphasis()',\n    '[attr.data-skra-size]': 'size()',\n\n    // State Surface reflection — Transient category (ADR 027 §3.1 cat 4)\n    '[attr.data-skra-loading]': 'loading() ? \"\" : null',\n    '[attr.aria-busy]': 'loading() ? \"true\" : null',\n\n    // Smart Slots layout reflection (ADR 020 v2.0 §3.2 — slot-presence, exempt from State Surface per ADR 027 §3.6)\n    '[attr.data-skra-has-start]': 'hasStart() ? \"\" : null',\n    '[attr.data-skra-has-end]': 'hasEnd() ? \"\" : null',\n  },\n})\nexport class SkraButton {\n  // --- Variant Surface (ADR 035) ---\n  readonly intent = input<ButtonIntent>('neutral');\n  readonly emphasis = input<ButtonEmphasis>('high');\n  readonly size = input<ButtonSize>('md');\n\n  // --- State Surface — Transient (ADR 027 cat 4 + ADR 028) ---\n  readonly loading = input(false, { transform: booleanAttribute });\n\n  // --- Smart Slots v2.0 (ADR 020) ---\n  readonly startSlot = contentChild(SkraButtonStart);\n  readonly endSlot = contentChild(SkraButtonEnd);\n\n  readonly hasStart = computed(() => !!this.startSlot());\n  readonly hasEnd = computed(() => !!this.endSlot());\n\n  // --- Loading Indicator Slot (ADR 028) ---\n  readonly loadingIndicatorSlot = contentChild(SkraLoadingIndicator);\n  readonly hasLoadingIndicator = computed(() => !!this.loadingIndicatorSlot());\n}\n","@if (hasStart()) {\r\n<span class=\"skra-button-slot-wrapper\">\r\n  <ng-content select=\"[skra-start]\"></ng-content>\r\n</span>\r\n}\r\n\r\n<span class=\"skra-button-label-wrapper\">\r\n  <ng-content></ng-content>\r\n</span>\r\n\r\n@if (hasEnd()) {\r\n<span class=\"skra-button-slot-wrapper\">\r\n  <ng-content select=\"[skra-end]\"></ng-content>\r\n</span>\r\n} @if (loading()) {\r\n<span class=\"skra-button-loading-indicator\" data-skra-loading-indicator>\r\n  @if (hasLoadingIndicator()) {\r\n  <ng-content select=\"[skraLoadingIndicator]\"></ng-content>\r\n  } @else {\r\n  <span data-skra-loading-indicator-fallback aria-hidden=\"true\"></span>\r\n  }\r\n</span>\r\n}\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-checkbox.mjs

@@ -72,7 +72,7 @@ class SkraCheckbox {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: SkraCheckbox, isStandalone: true, selector: "input[type=\"checkbox\"][skraCheckbox]", inputs: { indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "blockWhenReadonly($event)", "keydown": "blockKeyWhenReadonly($event)" }, properties: { "attr.data-skra-disabled": "context?.isDisabled() ? \"\" : null", "attr.aria-invalid": "context?.hasError() ? \"true\" : null", "attr.aria-readonly": "context?.isReadonly() ? \"true\" : null", "attr.aria-describedby": "context?.describedByIds() ?? null" } }, ngImport: i0, template: '', isInline: true, styles: [":host{appearance:none;flex-shrink:0;cursor:pointer;outline:none;background-repeat:no-repeat;background-position:center;inline-size:var(--skra-comp-field-checkbox-size);block-size:var(--skra-comp-field-checkbox-size);border-width:var(--skra-comp-field-checkbox-border-width);border-style:solid;border-color:var(--skra-comp-field-checkbox-border-color);border-radius:var(--skra-comp-field-checkbox-border-radius);background-color:var(--skra-comp-field-checkbox-background);background-size:70% 70%;transition:background-color var(--skra-comp-field-motion-duration) var(--skra-comp-field-motion-easing),border-color var(--skra-comp-field-motion-duration) var(--skra-comp-field-motion-easing),box-shadow var(--skra-comp-field-motion-duration) var(--skra-comp-field-motion-easing)}:host(:checked){background-color:var(--skra-comp-field-checkbox-checked-background);border-color:var(--skra-comp-field-checkbox-checked-background);background-image:var(--skra-comp-field-checkbox-check-glyph)}:host(:indeterminate){background-color:var(--skra-comp-field-checkbox-checked-background);border-color:var(--skra-comp-field-checkbox-checked-background);background-image:linear-gradient(to bottom,transparent 42%,var(--skra-comp-field-checkbox-check-color) 42%,var(--skra-comp-field-checkbox-check-color) 58%,transparent 58%)}:host(:hover:not(:disabled):not([aria-readonly=true])){border-color:var(--skra-comp-field-checkbox-border-color-hover)}:host(:checked:hover:not(:disabled):not([aria-readonly=true])),:host(:indeterminate:hover:not(:disabled):not([aria-readonly=true])){background-color:var(--skra-comp-field-checkbox-checked-background-hover);border-color:var(--skra-comp-field-checkbox-checked-background-hover)}:host(:focus-visible){box-shadow:0 0 0 var(--skra-comp-field-focus-ring-width) var(--skra-comp-field-focus-ring-color)}:host(:disabled),:host([data-skra-disabled]){cursor:not-allowed;opacity:var(--skra-sys-opacity-disabled)}:host([aria-readonly=true]){cursor:default;background-color:var(--skra-comp-field-background-readonly);border-color:var(--skra-comp-field-border-color-readonly)}:host(:checked[aria-readonly=true]),:host(:indeterminate[aria-readonly=true]){background-color:var(--skra-comp-field-checkbox-checked-background-readonly);border-color:var(--skra-comp-field-checkbox-checked-background-readonly)}:host([aria-invalid=true]){border-color:var(--skra-comp-field-error-color)}:host([aria-invalid=true]:focus-visible){box-shadow:0 0 0 var(--skra-comp-field-focus-ring-width) var(--skra-comp-field-error-color)}@media(prefers-reduced-motion:reduce){:host{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: SkraCheckbox, isStandalone: true, selector: "input[type=\"checkbox\"][skraCheckbox]", inputs: { indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "blockWhenReadonly($event)", "keydown": "blockKeyWhenReadonly($event)" }, properties: { "attr.data-skra-disabled": "context?.isDisabled() ? \"\" : null", "attr.aria-invalid": "context?.hasError() ? \"true\" : null", "attr.aria-readonly": "context?.isReadonly() ? \"true\" : null", "attr.aria-describedby": "context?.describedByIds() ?? null" } }, ngImport: i0, template: '', isInline: true, styles: [":host{appearance:none;flex-shrink:0;cursor:pointer;outline:none;background-repeat:no-repeat;background-position:center;inline-size:var(--skra-comp-field-checkbox-size);block-size:var(--skra-comp-field-checkbox-size);border-width:var(--skra-comp-field-checkbox-border-width);border-style:solid;border-color:var(--skra-comp-field-checkbox-border-color);border-radius:var(--skra-comp-field-checkbox-border-radius);background-color:var(--skra-comp-field-checkbox-background);background-size:70% 70%;transition:background-color var(--skra-comp-field-motion-duration) var(--skra-comp-field-motion-easing),border-color var(--skra-comp-field-motion-duration) var(--skra-comp-field-motion-easing),box-shadow var(--skra-comp-field-motion-duration) var(--skra-comp-field-motion-easing)}:host(:checked){background-color:var(--skra-comp-field-checkbox-checked-background);border-color:var(--skra-comp-field-checkbox-checked-background);background-image:var(--skra-comp-field-checkbox-check-glyph)}:host(:indeterminate){background-color:var(--skra-comp-field-checkbox-checked-background);border-color:var(--skra-comp-field-checkbox-checked-background);background-image:linear-gradient(to bottom,transparent 42%,var(--skra-comp-field-checkbox-check-color) 42%,var(--skra-comp-field-checkbox-check-color) 58%,transparent 58%)}@media(hover:hover)and (pointer:fine){:host(:hover:not(:disabled):not([aria-readonly=true])){border-color:var(--skra-comp-field-checkbox-border-color-hover)}:host(:checked:hover:not(:disabled):not([aria-readonly=true])),:host(:indeterminate:hover:not(:disabled):not([aria-readonly=true])){background-color:var(--skra-comp-field-checkbox-checked-background-hover);border-color:var(--skra-comp-field-checkbox-checked-background-hover)}}:host(:focus-visible){box-shadow:0 0 0 var(--skra-comp-field-focus-ring-width) var(--skra-comp-field-focus-ring-color)}:host(:disabled),:host([data-skra-disabled]){cursor:not-allowed;opacity:var(--skra-sys-opacity-disabled)}:host([aria-readonly=true]){cursor:default;background-color:var(--skra-comp-field-background-readonly);border-color:var(--skra-comp-field-border-color-readonly)}:host(:checked[aria-readonly=true]),:host(:indeterminate[aria-readonly=true]){background-color:var(--skra-comp-field-checkbox-checked-background-readonly);border-color:var(--skra-comp-field-checkbox-checked-background-readonly);--skra-comp-field-checkbox-check-color: var( --skra-comp-field-checkbox-check-color-readonly )}:host(:checked[aria-readonly=true]){background-image:var(--skra-comp-field-checkbox-check-glyph-readonly)}:host([aria-invalid=true]){border-color:var(--skra-comp-field-error-color)}:host([aria-invalid=true]:focus-visible){box-shadow:0 0 0 var(--skra-comp-field-focus-ring-width) var(--skra-comp-field-error-color)}@media(prefers-reduced-motion:reduce){:host{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraCheckbox, decorators: [{
             type: Component,
@@ -87,7 +87,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         '[attr.aria-describedby]': 'context?.describedByIds() ?? null',
                         '(click)': 'blockWhenReadonly($event)',
                         '(keydown)': 'blockKeyWhenReadonly($event)',
-                    }, styles: [":host{appearance:none;flex-shrink:0;cursor:pointer;outline:none;background-repeat:no-repeat;background-position:center;inline-size:var(--skra-comp-field-checkbox-size);block-size:var(--skra-comp-field-checkbox-size);border-width:var(--skra-comp-field-checkbox-border-width);border-style:solid;border-color:var(--skra-comp-field-checkbox-border-color);border-radius:var(--skra-comp-field-checkbox-border-radius);background-color:var(--skra-comp-field-checkbox-background);background-size:70% 70%;transition:background-color var(--skra-comp-field-motion-duration) var(--skra-comp-field-motion-easing),border-color var(--skra-comp-field-motion-duration) var(--skra-comp-field-motion-easing),box-shadow var(--skra-comp-field-motion-duration) var(--skra-comp-field-motion-easing)}:host(:checked){background-color:var(--skra-comp-field-checkbox-checked-background);border-color:var(--skra-comp-field-checkbox-checked-background);background-image:var(--skra-comp-field-checkbox-check-glyph)}:host(:indeterminate){background-color:var(--skra-comp-field-checkbox-checked-background);border-color:var(--skra-comp-field-checkbox-checked-background);background-image:linear-gradient(to bottom,transparent 42%,var(--skra-comp-field-checkbox-check-color) 42%,var(--skra-comp-field-checkbox-check-color) 58%,transparent 58%)}:host(:hover:not(:disabled):not([aria-readonly=true])){border-color:var(--skra-comp-field-checkbox-border-color-hover)}:host(:checked:hover:not(:disabled):not([aria-readonly=true])),:host(:indeterminate:hover:not(:disabled):not([aria-readonly=true])){background-color:var(--skra-comp-field-checkbox-checked-background-hover);border-color:var(--skra-comp-field-checkbox-checked-background-hover)}:host(:focus-visible){box-shadow:0 0 0 var(--skra-comp-field-focus-ring-width) var(--skra-comp-field-focus-ring-color)}:host(:disabled),:host([data-skra-disabled]){cursor:not-allowed;opacity:var(--skra-sys-opacity-disabled)}:host([aria-readonly=true]){cursor:default;background-color:var(--skra-comp-field-background-readonly);border-color:var(--skra-comp-field-border-color-readonly)}:host(:checked[aria-readonly=true]),:host(:indeterminate[aria-readonly=true]){background-color:var(--skra-comp-field-checkbox-checked-background-readonly);border-color:var(--skra-comp-field-checkbox-checked-background-readonly)}:host([aria-invalid=true]){border-color:var(--skra-comp-field-error-color)}:host([aria-invalid=true]:focus-visible){box-shadow:0 0 0 var(--skra-comp-field-focus-ring-width) var(--skra-comp-field-error-color)}@media(prefers-reduced-motion:reduce){:host{transition:none}}\n"] }]
+                    }, styles: [":host{appearance:none;flex-shrink:0;cursor:pointer;outline:none;background-repeat:no-repeat;background-position:center;inline-size:var(--skra-comp-field-checkbox-size);block-size:var(--skra-comp-field-checkbox-size);border-width:var(--skra-comp-field-checkbox-border-width);border-style:solid;border-color:var(--skra-comp-field-checkbox-border-color);border-radius:var(--skra-comp-field-checkbox-border-radius);background-color:var(--skra-comp-field-checkbox-background);background-size:70% 70%;transition:background-color var(--skra-comp-field-motion-duration) var(--skra-comp-field-motion-easing),border-color var(--skra-comp-field-motion-duration) var(--skra-comp-field-motion-easing),box-shadow var(--skra-comp-field-motion-duration) var(--skra-comp-field-motion-easing)}:host(:checked){background-color:var(--skra-comp-field-checkbox-checked-background);border-color:var(--skra-comp-field-checkbox-checked-background);background-image:var(--skra-comp-field-checkbox-check-glyph)}:host(:indeterminate){background-color:var(--skra-comp-field-checkbox-checked-background);border-color:var(--skra-comp-field-checkbox-checked-background);background-image:linear-gradient(to bottom,transparent 42%,var(--skra-comp-field-checkbox-check-color) 42%,var(--skra-comp-field-checkbox-check-color) 58%,transparent 58%)}@media(hover:hover)and (pointer:fine){:host(:hover:not(:disabled):not([aria-readonly=true])){border-color:var(--skra-comp-field-checkbox-border-color-hover)}:host(:checked:hover:not(:disabled):not([aria-readonly=true])),:host(:indeterminate:hover:not(:disabled):not([aria-readonly=true])){background-color:var(--skra-comp-field-checkbox-checked-background-hover);border-color:var(--skra-comp-field-checkbox-checked-background-hover)}}:host(:focus-visible){box-shadow:0 0 0 var(--skra-comp-field-focus-ring-width) var(--skra-comp-field-focus-ring-color)}:host(:disabled),:host([data-skra-disabled]){cursor:not-allowed;opacity:var(--skra-sys-opacity-disabled)}:host([aria-readonly=true]){cursor:default;background-color:var(--skra-comp-field-background-readonly);border-color:var(--skra-comp-field-border-color-readonly)}:host(:checked[aria-readonly=true]),:host(:indeterminate[aria-readonly=true]){background-color:var(--skra-comp-field-checkbox-checked-background-readonly);border-color:var(--skra-comp-field-checkbox-checked-background-readonly);--skra-comp-field-checkbox-check-color: var( --skra-comp-field-checkbox-check-color-readonly )}:host(:checked[aria-readonly=true]){background-image:var(--skra-comp-field-checkbox-check-glyph-readonly)}:host([aria-invalid=true]){border-color:var(--skra-comp-field-error-color)}:host([aria-invalid=true]:focus-visible){box-shadow:0 0 0 var(--skra-comp-field-focus-ring-width) var(--skra-comp-field-error-color)}@media(prefers-reduced-motion:reduce){:host{transition:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }] } });
 
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"skra-ui-checkbox.mjs","sources":["../../../../libs/ui/checkbox/src/lib/checkbox/checkbox.ts","../../../../libs/ui/checkbox/src/skra-ui-checkbox.ts"],"sourcesContent":["import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  ElementRef,\r\n  ViewEncapsulation,\r\n  booleanAttribute,\r\n  effect,\r\n  inject,\r\n  input,\r\n} from '@angular/core';\r\nimport { SkraFieldContext } from '@skra/ui/field';\r\n\r\n/**\r\n * Wires a native `<input type=\"checkbox\">` to SkraFieldContext when inside\r\n * `<skra-field>` (ADR 013), or stands alone with no cascade. Per ADR 039/040,\r\n * Forge ships no `<skra-checkbox>` wrapper — this is a Component-on-the-native-\r\n * host (`<input>` is void → `template: ''`, ADR 040 §2) carrying its own\r\n * `checkbox.scss` via Emulated encapsulation. Value channel stays consumer-owned\r\n * per ADR 037: bind\r\n * via native `[checked]` + `(change)`, Reactive Forms `formControlName`,\r\n * Signal Forms `[formField]`, or `[(ngModel)]` — all work orthogonally with\r\n * this directive (which only handles a11y + skin context).\r\n *\r\n *   <!-- inside Field -->\r\n *   <skra-field>\r\n *     <input type=\"checkbox\" skraCheckbox [checked]=\"x()\" (change)=\"x.set($any($event.target).checked)\" />\r\n *     <label skraLabelFor>Accept ToS</label>\r\n *   </skra-field>\r\n *\r\n *   <!-- standalone (label wraps input — no id/for needed) -->\r\n *   <label>\r\n *     <input type=\"checkbox\" skraCheckbox [checked]=\"x()\" (change)=\"x.set($any($event.target).checked)\" />\r\n *     Accept ToS\r\n *   </label>\r\n *\r\n * Toggle state (`checked`, `indeterminate`) is NOT reflected as `data-skra-*`\r\n * — that would require Forge to observe native state, violating ADR 037. Slice\r\n * CSS targets native `:checked` and `:indeterminate` pseudo-classes directly;\r\n * browsers handle `aria-checked` natively (including `\"mixed\"` for indeterminate).\r\n */\r\n@Component({\r\n  selector: 'input[type=\"checkbox\"][skraCheckbox]',\r\n  standalone: true,\r\n  // Void host — no <ng-content>. See ADR 040 §2.\r\n  template: '',\r\n  styleUrl: './checkbox.scss',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.Emulated,\r\n  host: {\r\n    '[attr.data-skra-disabled]': 'context?.isDisabled() ? \"\" : null',\r\n    '[attr.aria-invalid]': 'context?.hasError() ? \"true\" : null',\r\n    // Readonly is ARIA-only (native `readonly` doesn't apply to checkboxes per\r\n    // HTML spec). No `data-skra-readonly` — it was dead surface (no SCSS\r\n    // consumer; styling keys off `[aria-readonly]`), removed 2026-05-31 to match\r\n    // the select atom's Q-3 ARIA-only pattern (Batch 5 cleanroom review).\r\n    '[attr.aria-readonly]': 'context?.isReadonly() ? \"true\" : null',\r\n    '[attr.aria-describedby]': 'context?.describedByIds() ?? null',\r\n    '(click)': 'blockWhenReadonly($event)',\r\n    '(keydown)': 'blockKeyWhenReadonly($event)',\r\n  },\r\n})\r\nexport class SkraCheckbox {\r\n  private readonly el = inject<ElementRef<HTMLInputElement>>(ElementRef);\r\n  readonly context = inject(SkraFieldContext, { optional: true });\r\n\r\n  // `indeterminate` is the ONE state Forge writes back to the native input,\r\n  // because HTML does not expose it as an attribute — only the JS property.\r\n  // Consumer is expected to drive it (e.g. tristate parent-of-children checkbox).\r\n  readonly indeterminate = input(false, { transform: booleanAttribute });\r\n\r\n  constructor() {\r\n    const el = this.el.nativeElement;\r\n\r\n    effect(() => {\r\n      el.indeterminate = this.indeterminate();\r\n    });\r\n\r\n    // Field-cascaded native properties — only bind when context is present so\r\n    // standalone consumers retain full control of their static attributes.\r\n    if (this.context) {\r\n      const ctx = this.context;\r\n      effect(() => {\r\n        el.id = ctx.fieldId();\r\n      });\r\n      effect(() => {\r\n        el.disabled = ctx.isDisabled();\r\n      });\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Readonly enforcement — native checkbox has no `[readonly]`, so without this\r\n   * the `aria-readonly` we announce would be a lie (the user could still toggle\r\n   * it). `preventDefault` on `click` blocks the toggle from both pointer and\r\n   * Space/Enter (keyboard activation dispatches a click on form controls).\r\n   * Mirrors the `<select skraSelect>` / `skraRadio` readonly guards.\r\n   */\r\n  protected blockWhenReadonly(event: Event): void {\r\n    if (this.context?.isReadonly()) event.preventDefault();\r\n  }\r\n\r\n  /** Block keyboard activation (Space) when readonly; let `Tab` through. */\r\n  protected blockKeyWhenReadonly(event: KeyboardEvent): void {\r\n    if (this.context?.isReadonly() && event.key !== 'Tab') {\r\n      event.preventDefault();\r\n    }\r\n  }\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAYA;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BG;MAsBU,YAAY,CAAA;AACN,IAAA,EAAE,GAAG,MAAM,CAA+B,UAAU,CAAC;IAC7D,OAAO,GAAG,MAAM,CAAC,gBAAgB,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;;;;IAKtD,aAAa,GAAG,KAAK,CAAC,KAAK,qFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAEtE,IAAA,WAAA,GAAA;AACE,QAAA,MAAM,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa;QAEhC,MAAM,CAAC,MAAK;AACV,YAAA,EAAE,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE;AACzC,QAAA,CAAC,CAAC;;;AAIF,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;QACJ;IACF;AAEA;;;;;;AAMG;AACO,IAAA,iBAAiB,CAAC,KAAY,EAAA;AACtC,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE,UAAU,EAAE;YAAE,KAAK,CAAC,cAAc,EAAE;IACxD;;AAGU,IAAA,oBAAoB,CAAC,KAAoB,EAAA;AACjD,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE,UAAU,EAAE,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE;YACrD,KAAK,CAAC,cAAc,EAAE;QACxB;IACF;uGA7CW,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAZ,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAY,unBAjBb,EAAE,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,+hFAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAiBD,YAAY,EAAA,UAAA,EAAA,CAAA;kBArBxB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,sCAAsC,EAAA,UAAA,EACpC,IAAI,EAAA,QAAA,EAEN,EAAE,EAAA,eAAA,EAEK,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,QAAQ,EAAA,IAAA,EACnC;AACJ,wBAAA,2BAA2B,EAAE,mCAAmC;AAChE,wBAAA,qBAAqB,EAAE,qCAAqC;;;;;AAK5D,wBAAA,sBAAsB,EAAE,uCAAuC;AAC/D,wBAAA,yBAAyB,EAAE,mCAAmC;AAC9D,wBAAA,SAAS,EAAE,2BAA2B;AACtC,wBAAA,WAAW,EAAE,8BAA8B;AAC5C,qBAAA,EAAA,MAAA,EAAA,CAAA,+hFAAA,CAAA,EAAA;;;AC3DH;;AAEG;;;;"}
+{"version":3,"file":"skra-ui-checkbox.mjs","sources":["../../../../libs/ui/checkbox/src/lib/checkbox/checkbox.ts","../../../../libs/ui/checkbox/src/skra-ui-checkbox.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  ViewEncapsulation,\n  booleanAttribute,\n  effect,\n  inject,\n  input,\n} from '@angular/core';\nimport { SkraFieldContext } from '@skra/ui/field';\n\n/**\n * Wires a native `<input type=\"checkbox\">` to SkraFieldContext when inside\n * `<skra-field>` (ADR 013), or stands alone with no cascade. Per ADR 039/040,\n * Forge ships no `<skra-checkbox>` wrapper — this is a Component-on-the-native-\n * host (`<input>` is void → `template: ''`, ADR 040 §2) carrying its own\n * `checkbox.scss` via Emulated encapsulation. Value channel stays consumer-owned\n * per ADR 037: bind\n * via native `[checked]` + `(change)`, Reactive Forms `formControlName`,\n * Signal Forms `[formField]`, or `[(ngModel)]` — all work orthogonally with\n * this directive (which only handles a11y + skin context).\n *\n *   <!-- inside Field -->\n *   <skra-field>\n *     <input type=\"checkbox\" skraCheckbox [checked]=\"x()\" (change)=\"x.set($any($event.target).checked)\" />\n *     <label skraLabelFor>Accept ToS</label>\n *   </skra-field>\n *\n *   <!-- standalone (label wraps input — no id/for needed) -->\n *   <label>\n *     <input type=\"checkbox\" skraCheckbox [checked]=\"x()\" (change)=\"x.set($any($event.target).checked)\" />\n *     Accept ToS\n *   </label>\n *\n * Toggle state (`checked`, `indeterminate`) is NOT reflected as `data-skra-*`\n * — that would require Forge to observe native state, violating ADR 037. Slice\n * CSS targets native `:checked` and `:indeterminate` pseudo-classes directly;\n * browsers handle `aria-checked` natively (including `\"mixed\"` for indeterminate).\n */\n@Component({\n  selector: 'input[type=\"checkbox\"][skraCheckbox]',\n  standalone: true,\n  // Void host — no <ng-content>. See ADR 040 §2.\n  template: '',\n  styleUrl: './checkbox.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.Emulated,\n  host: {\n    '[attr.data-skra-disabled]': 'context?.isDisabled() ? \"\" : null',\n    '[attr.aria-invalid]': 'context?.hasError() ? \"true\" : null',\n    // Readonly is ARIA-only (native `readonly` doesn't apply to checkboxes per\n    // HTML spec). No `data-skra-readonly` — it was dead surface (no SCSS\n    // consumer; styling keys off `[aria-readonly]`), removed 2026-05-31 to match\n    // the select atom's Q-3 ARIA-only pattern (Batch 5 cleanroom review).\n    '[attr.aria-readonly]': 'context?.isReadonly() ? \"true\" : null',\n    '[attr.aria-describedby]': 'context?.describedByIds() ?? null',\n    '(click)': 'blockWhenReadonly($event)',\n    '(keydown)': 'blockKeyWhenReadonly($event)',\n  },\n})\nexport class SkraCheckbox {\n  private readonly el = inject<ElementRef<HTMLInputElement>>(ElementRef);\n  readonly context = inject(SkraFieldContext, { optional: true });\n\n  // `indeterminate` is the ONE state Forge writes back to the native input,\n  // because HTML does not expose it as an attribute — only the JS property.\n  // Consumer is expected to drive it (e.g. tristate parent-of-children checkbox).\n  readonly indeterminate = input(false, { transform: booleanAttribute });\n\n  constructor() {\n    const el = this.el.nativeElement;\n\n    effect(() => {\n      el.indeterminate = this.indeterminate();\n    });\n\n    // Field-cascaded native properties — only bind when context is present so\n    // standalone consumers retain full control of their static attributes.\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    }\n  }\n\n  /**\n   * Readonly enforcement — native checkbox has no `[readonly]`, so without this\n   * the `aria-readonly` we announce would be a lie (the user could still toggle\n   * it). `preventDefault` on `click` blocks the toggle from both pointer and\n   * Space/Enter (keyboard activation dispatches a click on form controls).\n   * Mirrors the `<select skraSelect>` / `skraRadio` readonly guards.\n   */\n  protected blockWhenReadonly(event: Event): void {\n    if (this.context?.isReadonly()) event.preventDefault();\n  }\n\n  /** Block keyboard activation (Space) when readonly; let `Tab` through. */\n  protected blockKeyWhenReadonly(event: KeyboardEvent): void {\n    if (this.context?.isReadonly() && event.key !== 'Tab') {\n      event.preventDefault();\n    }\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAYA;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BG;MAsBU,YAAY,CAAA;AACN,IAAA,EAAE,GAAG,MAAM,CAA+B,UAAU,CAAC;IAC7D,OAAO,GAAG,MAAM,CAAC,gBAAgB,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;;;;IAKtD,aAAa,GAAG,KAAK,CAAC,KAAK,qFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAEtE,IAAA,WAAA,GAAA;AACE,QAAA,MAAM,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa;QAEhC,MAAM,CAAC,MAAK;AACV,YAAA,EAAE,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE;AACzC,QAAA,CAAC,CAAC;;;AAIF,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;QACJ;IACF;AAEA;;;;;;AAMG;AACO,IAAA,iBAAiB,CAAC,KAAY,EAAA;AACtC,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE,UAAU,EAAE;YAAE,KAAK,CAAC,cAAc,EAAE;IACxD;;AAGU,IAAA,oBAAoB,CAAC,KAAoB,EAAA;AACjD,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE,UAAU,EAAE,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE;YACrD,KAAK,CAAC,cAAc,EAAE;QACxB;IACF;uGA7CW,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAZ,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAY,unBAjBb,EAAE,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,+wFAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAiBD,YAAY,EAAA,UAAA,EAAA,CAAA;kBArBxB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,sCAAsC,EAAA,UAAA,EACpC,IAAI,EAAA,QAAA,EAEN,EAAE,EAAA,eAAA,EAEK,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,QAAQ,EAAA,IAAA,EACnC;AACJ,wBAAA,2BAA2B,EAAE,mCAAmC;AAChE,wBAAA,qBAAqB,EAAE,qCAAqC;;;;;AAK5D,wBAAA,sBAAsB,EAAE,uCAAuC;AAC/D,wBAAA,yBAAyB,EAAE,mCAAmC;AAC9D,wBAAA,SAAS,EAAE,2BAA2B;AACtC,wBAAA,WAAW,EAAE,8BAA8B;AAC5C,qBAAA,EAAA,MAAA,EAAA,CAAA,+wFAAA,CAAA,EAAA;;;AC3DH;;AAEG;;;;"}

package/fesm2022/skra-ui-chip.mjs

@@ -61,7 +61,7 @@ class SkraChip {
         this.removed.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraChip, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SkraChip, isStandalone: true, selector: "skra-chip", inputs: { intent: { classPropertyName: "intent", publicName: "intent", isSignal: true, isRequired: false, transformFunction: null }, emphasis: { classPropertyName: "emphasis", publicName: "emphasis", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, host: { properties: { "attr.data-skra-intent": "intent()", "attr.data-skra-emphasis": "emphasis()", "attr.data-skra-disabled": "disabled() ? \"\" : null", "attr.data-skra-has-icon": "hasIcon() ? \"\" : null" } }, queries: [{ propertyName: "iconSlot", first: true, predicate: SkraChipIcon, descendants: true, isSignal: true }], ngImport: i0, template: "@if (hasIcon()) {\r\n<span class=\"skra-chip-icon\">\r\n  <ng-content select=\"[skra-chip-icon]\"></ng-content>\r\n</span>\r\n}\r\n\r\n<span class=\"skra-chip-label\">\r\n  <ng-content></ng-content>\r\n</span>\r\n\r\n<button\r\n  type=\"button\"\r\n  class=\"skra-chip-remove\"\r\n  [disabled]=\"disabled()\"\r\n  (click)=\"onRemove()\"\r\n>\r\n  <svg\r\n    class=\"skra-chip-remove-glyph\"\r\n    aria-hidden=\"true\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"none\"\r\n    stroke=\"currentColor\"\r\n    stroke-width=\"2.5\"\r\n    stroke-linecap=\"round\"\r\n  >\r\n    <path d=\"M18 6 6 18\" />\r\n    <path d=\"m6 6 12 12\" />\r\n  </svg>\r\n  <ng-content select=\"[skra-chip-remove-label]\"></ng-content>\r\n</button>\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;box-sizing:border-box;margin:0;white-space:nowrap;min-block-size:var(--skra-comp-chip-remove-size);font-family:var(--skra-sys-typography-role-label-medium-font-family);font-size:var(--skra-sys-typography-role-label-medium-font-size);font-weight:var(--skra-sys-typography-role-label-medium-font-weight);line-height:var(--skra-sys-typography-role-label-medium-line-height);letter-spacing:var(--skra-sys-typography-role-label-medium-letter-spacing);background:var(--skra-comp-chip-background);color:var(--skra-comp-chip-foreground);border-color:var(--skra-comp-chip-border-color);border-width:var(--skra-comp-chip-border-width);border-style:var(--skra-comp-chip-border-style);border-radius:var(--skra-comp-chip-radius);padding-block:var(--skra-comp-chip-padding-block);padding-inline:var(--skra-comp-chip-padding-inline);box-shadow:var(--skra-comp-chip-shadow)}:host([data-skra-emphasis=high]){--skra-comp-chip-border-width: 0}:host([data-skra-disabled]){cursor:not-allowed;background:var(--skra-sys-color-neutral-soft);color:var(--skra-sys-color-neutral-strong);border-color:var(--skra-sys-color-neutral-border)}:host([data-skra-disabled]) .skra-chip-icon,:host([data-skra-disabled]) .skra-chip-remove{opacity:var(--skra-sys-opacity-disabled)}:host([data-skra-intent=neutral][data-skra-emphasis=high]){--skra-comp-chip-background: var( --skra-comp-chip-background-neutral-high, var(--skra-sys-color-neutral-base) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-neutral-high, var(--skra-sys-color-neutral-contrast) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-neutral-high, transparent )}:host([data-skra-intent=neutral][data-skra-emphasis=medium]){--skra-comp-chip-background: var( --skra-comp-chip-background-neutral-medium, var(--skra-sys-color-neutral-soft) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-neutral-medium, var(--skra-sys-color-neutral-strong) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-neutral-medium, var(--skra-sys-color-neutral-border) )}:host([data-skra-intent=info][data-skra-emphasis=high]){--skra-comp-chip-background: var( --skra-comp-chip-background-info-high, var(--skra-sys-color-info-base) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-info-high, var(--skra-sys-color-info-contrast) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-info-high, transparent )}:host([data-skra-intent=info][data-skra-emphasis=medium]){--skra-comp-chip-background: var( --skra-comp-chip-background-info-medium, var(--skra-sys-color-info-soft) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-info-medium, var(--skra-sys-color-info-strong) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-info-medium, var(--skra-sys-color-info-border) )}:host([data-skra-intent=success][data-skra-emphasis=high]){--skra-comp-chip-background: var( --skra-comp-chip-background-success-high, var(--skra-sys-color-success-base) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-success-high, var(--skra-sys-color-success-contrast) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-success-high, transparent )}:host([data-skra-intent=success][data-skra-emphasis=medium]){--skra-comp-chip-background: var( --skra-comp-chip-background-success-medium, var(--skra-sys-color-success-soft) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-success-medium, var(--skra-sys-color-success-strong) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-success-medium, var(--skra-sys-color-success-border) )}:host([data-skra-intent=warning][data-skra-emphasis=high]){--skra-comp-chip-background: var( --skra-comp-chip-background-warning-high, var(--skra-sys-color-warning-base) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-warning-high, var(--skra-sys-color-warning-contrast) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-warning-high, transparent )}:host([data-skra-intent=warning][data-skra-emphasis=medium]){--skra-comp-chip-background: var( --skra-comp-chip-background-warning-medium, var(--skra-sys-color-warning-soft) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-warning-medium, var(--skra-sys-color-warning-strong) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-warning-medium, var(--skra-sys-color-warning-border) )}:host([data-skra-intent=danger][data-skra-emphasis=high]){--skra-comp-chip-background: var( --skra-comp-chip-background-danger-high, var(--skra-sys-color-danger-base) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-danger-high, var(--skra-sys-color-danger-contrast) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-danger-high, transparent )}:host([data-skra-intent=danger][data-skra-emphasis=medium]){--skra-comp-chip-background: var( --skra-comp-chip-background-danger-medium, var(--skra-sys-color-danger-soft) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-danger-medium, var(--skra-sys-color-danger-strong) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-danger-medium, var(--skra-sys-color-danger-border) )}.skra-chip-icon{display:inline-flex;flex-shrink:0;align-items:center;block-size:1lh;margin-inline-end:var(--skra-comp-chip-icon-gap);--skra-comp-icon-size: var(--skra-comp-chip-icon-size)}.skra-chip-label{display:inline-flex;align-items:center;min-inline-size:0}.skra-chip-remove{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;inline-size:var(--skra-comp-chip-remove-size);block-size:var(--skra-comp-chip-remove-size);margin:0;margin-inline-start:var(--skra-comp-chip-remove-gap);padding:0;border:0;background:transparent;color:inherit;cursor:pointer;border-radius:var(--skra-comp-chip-radius);transition:opacity var(--skra-comp-chip-motion-duration) var(--skra-comp-chip-motion-easing)}.skra-chip-remove:hover{opacity:.7}.skra-chip-remove:focus-visible{outline-style:solid;outline-color:var(--skra-comp-chip-focus-ring-color);outline-width:var(--skra-comp-chip-focus-ring-width);outline-offset:2px}.skra-chip-remove:disabled{cursor:not-allowed}.skra-chip-remove-glyph{inline-size:.875em;block-size:.875em;display:block}@media(prefers-reduced-motion:reduce){.skra-chip-remove{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SkraChip, isStandalone: true, selector: "skra-chip", inputs: { intent: { classPropertyName: "intent", publicName: "intent", isSignal: true, isRequired: false, transformFunction: null }, emphasis: { classPropertyName: "emphasis", publicName: "emphasis", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, host: { properties: { "attr.data-skra-intent": "intent()", "attr.data-skra-emphasis": "emphasis()", "attr.data-skra-disabled": "disabled() ? \"\" : null", "attr.data-skra-has-icon": "hasIcon() ? \"\" : null" } }, queries: [{ propertyName: "iconSlot", first: true, predicate: SkraChipIcon, descendants: true, isSignal: true }], ngImport: i0, template: "@if (hasIcon()) {\r\n<span class=\"skra-chip-icon\">\r\n  <ng-content select=\"[skra-chip-icon]\"></ng-content>\r\n</span>\r\n}\r\n\r\n<span class=\"skra-chip-label\">\r\n  <ng-content></ng-content>\r\n</span>\r\n\r\n<button\r\n  type=\"button\"\r\n  class=\"skra-chip-remove\"\r\n  [disabled]=\"disabled()\"\r\n  (click)=\"onRemove()\"\r\n>\r\n  <svg\r\n    class=\"skra-chip-remove-glyph\"\r\n    aria-hidden=\"true\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"none\"\r\n    stroke=\"currentColor\"\r\n    stroke-width=\"2.5\"\r\n    stroke-linecap=\"round\"\r\n  >\r\n    <path d=\"M18 6 6 18\" />\r\n    <path d=\"m6 6 12 12\" />\r\n  </svg>\r\n  <ng-content select=\"[skra-chip-remove-label]\"></ng-content>\r\n</button>\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;box-sizing:border-box;margin:0;white-space:nowrap;min-block-size:var(--skra-comp-chip-remove-size);font-family:var(--skra-sys-typography-role-label-medium-font-family);font-size:var(--skra-sys-typography-role-label-medium-font-size);font-weight:var(--skra-sys-typography-role-label-medium-font-weight);line-height:var(--skra-sys-typography-role-label-medium-line-height);letter-spacing:var(--skra-sys-typography-role-label-medium-letter-spacing);background:var(--skra-comp-chip-background);color:var(--skra-comp-chip-foreground);border-color:var(--skra-comp-chip-border-color);border-width:var(--skra-comp-chip-border-width);border-style:var(--skra-comp-chip-border-style);border-radius:var(--skra-comp-chip-radius);padding-block:var(--skra-comp-chip-padding-block);padding-inline:var(--skra-comp-chip-padding-inline);box-shadow:var(--skra-comp-chip-shadow)}:host([data-skra-emphasis=high]){--skra-comp-chip-border-width: 0}:host([data-skra-disabled]){cursor:not-allowed;background:var(--skra-sys-color-neutral-soft);color:var(--skra-sys-color-neutral-strong);border-color:var(--skra-sys-color-neutral-border)}:host([data-skra-disabled]) .skra-chip-icon,:host([data-skra-disabled]) .skra-chip-remove{opacity:var(--skra-sys-opacity-disabled)}:host([data-skra-intent=neutral][data-skra-emphasis=high]){--skra-comp-chip-background: var( --skra-comp-chip-background-neutral-high, var(--skra-sys-color-neutral-base) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-neutral-high, var(--skra-sys-color-neutral-contrast) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-neutral-high, transparent )}:host([data-skra-intent=neutral][data-skra-emphasis=medium]){--skra-comp-chip-background: var( --skra-comp-chip-background-neutral-medium, var(--skra-sys-color-neutral-soft) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-neutral-medium, var(--skra-sys-color-neutral-strong) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-neutral-medium, var(--skra-sys-color-neutral-border) )}:host([data-skra-intent=info][data-skra-emphasis=high]){--skra-comp-chip-background: var( --skra-comp-chip-background-info-high, var(--skra-sys-color-info-base) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-info-high, var(--skra-sys-color-info-contrast) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-info-high, transparent )}:host([data-skra-intent=info][data-skra-emphasis=medium]){--skra-comp-chip-background: var( --skra-comp-chip-background-info-medium, var(--skra-sys-color-info-soft) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-info-medium, var(--skra-sys-color-info-strong) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-info-medium, var(--skra-sys-color-info-border) )}:host([data-skra-intent=success][data-skra-emphasis=high]){--skra-comp-chip-background: var( --skra-comp-chip-background-success-high, var(--skra-sys-color-success-base) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-success-high, var(--skra-sys-color-success-contrast) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-success-high, transparent )}:host([data-skra-intent=success][data-skra-emphasis=medium]){--skra-comp-chip-background: var( --skra-comp-chip-background-success-medium, var(--skra-sys-color-success-soft) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-success-medium, var(--skra-sys-color-success-strong) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-success-medium, var(--skra-sys-color-success-border) )}:host([data-skra-intent=warning][data-skra-emphasis=high]){--skra-comp-chip-background: var( --skra-comp-chip-background-warning-high, var(--skra-sys-color-warning-base) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-warning-high, var(--skra-sys-color-warning-contrast) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-warning-high, transparent )}:host([data-skra-intent=warning][data-skra-emphasis=medium]){--skra-comp-chip-background: var( --skra-comp-chip-background-warning-medium, var(--skra-sys-color-warning-soft) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-warning-medium, var(--skra-sys-color-warning-strong) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-warning-medium, var(--skra-sys-color-warning-border) )}:host([data-skra-intent=danger][data-skra-emphasis=high]){--skra-comp-chip-background: var( --skra-comp-chip-background-danger-high, var(--skra-sys-color-danger-base) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-danger-high, var(--skra-sys-color-danger-contrast) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-danger-high, transparent )}:host([data-skra-intent=danger][data-skra-emphasis=medium]){--skra-comp-chip-background: var( --skra-comp-chip-background-danger-medium, var(--skra-sys-color-danger-soft) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-danger-medium, var(--skra-sys-color-danger-strong) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-danger-medium, var(--skra-sys-color-danger-border) )}.skra-chip-icon{display:inline-flex;flex-shrink:0;align-items:center;block-size:1lh;margin-inline-end:var(--skra-comp-chip-icon-gap);--skra-comp-icon-size: var(--skra-comp-chip-icon-size)}.skra-chip-label{display:inline-flex;align-items:center;min-inline-size:0}.skra-chip-remove{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;inline-size:var(--skra-comp-chip-remove-size);block-size:var(--skra-comp-chip-remove-size);margin:0;margin-inline-start:var(--skra-comp-chip-remove-gap);padding:0;border:0;background:transparent;color:inherit;cursor:pointer;border-radius:var(--skra-comp-chip-radius);transition:opacity var(--skra-comp-chip-motion-duration) var(--skra-comp-chip-motion-easing)}@media(hover:hover)and (pointer:fine){.skra-chip-remove:hover{opacity:.7}}.skra-chip-remove:focus-visible{outline-style:solid;outline-color:var(--skra-comp-chip-focus-ring-color);outline-width:var(--skra-comp-chip-focus-ring-width);outline-offset:2px}.skra-chip-remove:disabled{cursor:not-allowed}.skra-chip-remove-glyph{inline-size:.875em;block-size:.875em;display:block}@media(prefers-reduced-motion:reduce){.skra-chip-remove{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraChip, decorators: [{
             type: Component,
@@ -75,7 +75,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         '[attr.data-skra-disabled]': 'disabled() ? "" : null',
                         // Smart Slot layout reflection (ADR 020 v2.0 — slot-presence, State-Surface-exempt §3.6)
                         '[attr.data-skra-has-icon]': 'hasIcon() ? "" : null',
-                    }, template: "@if (hasIcon()) {\r\n<span class=\"skra-chip-icon\">\r\n  <ng-content select=\"[skra-chip-icon]\"></ng-content>\r\n</span>\r\n}\r\n\r\n<span class=\"skra-chip-label\">\r\n  <ng-content></ng-content>\r\n</span>\r\n\r\n<button\r\n  type=\"button\"\r\n  class=\"skra-chip-remove\"\r\n  [disabled]=\"disabled()\"\r\n  (click)=\"onRemove()\"\r\n>\r\n  <svg\r\n    class=\"skra-chip-remove-glyph\"\r\n    aria-hidden=\"true\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"none\"\r\n    stroke=\"currentColor\"\r\n    stroke-width=\"2.5\"\r\n    stroke-linecap=\"round\"\r\n  >\r\n    <path d=\"M18 6 6 18\" />\r\n    <path d=\"m6 6 12 12\" />\r\n  </svg>\r\n  <ng-content select=\"[skra-chip-remove-label]\"></ng-content>\r\n</button>\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;box-sizing:border-box;margin:0;white-space:nowrap;min-block-size:var(--skra-comp-chip-remove-size);font-family:var(--skra-sys-typography-role-label-medium-font-family);font-size:var(--skra-sys-typography-role-label-medium-font-size);font-weight:var(--skra-sys-typography-role-label-medium-font-weight);line-height:var(--skra-sys-typography-role-label-medium-line-height);letter-spacing:var(--skra-sys-typography-role-label-medium-letter-spacing);background:var(--skra-comp-chip-background);color:var(--skra-comp-chip-foreground);border-color:var(--skra-comp-chip-border-color);border-width:var(--skra-comp-chip-border-width);border-style:var(--skra-comp-chip-border-style);border-radius:var(--skra-comp-chip-radius);padding-block:var(--skra-comp-chip-padding-block);padding-inline:var(--skra-comp-chip-padding-inline);box-shadow:var(--skra-comp-chip-shadow)}:host([data-skra-emphasis=high]){--skra-comp-chip-border-width: 0}:host([data-skra-disabled]){cursor:not-allowed;background:var(--skra-sys-color-neutral-soft);color:var(--skra-sys-color-neutral-strong);border-color:var(--skra-sys-color-neutral-border)}:host([data-skra-disabled]) .skra-chip-icon,:host([data-skra-disabled]) .skra-chip-remove{opacity:var(--skra-sys-opacity-disabled)}:host([data-skra-intent=neutral][data-skra-emphasis=high]){--skra-comp-chip-background: var( --skra-comp-chip-background-neutral-high, var(--skra-sys-color-neutral-base) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-neutral-high, var(--skra-sys-color-neutral-contrast) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-neutral-high, transparent )}:host([data-skra-intent=neutral][data-skra-emphasis=medium]){--skra-comp-chip-background: var( --skra-comp-chip-background-neutral-medium, var(--skra-sys-color-neutral-soft) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-neutral-medium, var(--skra-sys-color-neutral-strong) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-neutral-medium, var(--skra-sys-color-neutral-border) )}:host([data-skra-intent=info][data-skra-emphasis=high]){--skra-comp-chip-background: var( --skra-comp-chip-background-info-high, var(--skra-sys-color-info-base) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-info-high, var(--skra-sys-color-info-contrast) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-info-high, transparent )}:host([data-skra-intent=info][data-skra-emphasis=medium]){--skra-comp-chip-background: var( --skra-comp-chip-background-info-medium, var(--skra-sys-color-info-soft) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-info-medium, var(--skra-sys-color-info-strong) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-info-medium, var(--skra-sys-color-info-border) )}:host([data-skra-intent=success][data-skra-emphasis=high]){--skra-comp-chip-background: var( --skra-comp-chip-background-success-high, var(--skra-sys-color-success-base) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-success-high, var(--skra-sys-color-success-contrast) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-success-high, transparent )}:host([data-skra-intent=success][data-skra-emphasis=medium]){--skra-comp-chip-background: var( --skra-comp-chip-background-success-medium, var(--skra-sys-color-success-soft) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-success-medium, var(--skra-sys-color-success-strong) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-success-medium, var(--skra-sys-color-success-border) )}:host([data-skra-intent=warning][data-skra-emphasis=high]){--skra-comp-chip-background: var( --skra-comp-chip-background-warning-high, var(--skra-sys-color-warning-base) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-warning-high, var(--skra-sys-color-warning-contrast) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-warning-high, transparent )}:host([data-skra-intent=warning][data-skra-emphasis=medium]){--skra-comp-chip-background: var( --skra-comp-chip-background-warning-medium, var(--skra-sys-color-warning-soft) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-warning-medium, var(--skra-sys-color-warning-strong) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-warning-medium, var(--skra-sys-color-warning-border) )}:host([data-skra-intent=danger][data-skra-emphasis=high]){--skra-comp-chip-background: var( --skra-comp-chip-background-danger-high, var(--skra-sys-color-danger-base) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-danger-high, var(--skra-sys-color-danger-contrast) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-danger-high, transparent )}:host([data-skra-intent=danger][data-skra-emphasis=medium]){--skra-comp-chip-background: var( --skra-comp-chip-background-danger-medium, var(--skra-sys-color-danger-soft) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-danger-medium, var(--skra-sys-color-danger-strong) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-danger-medium, var(--skra-sys-color-danger-border) )}.skra-chip-icon{display:inline-flex;flex-shrink:0;align-items:center;block-size:1lh;margin-inline-end:var(--skra-comp-chip-icon-gap);--skra-comp-icon-size: var(--skra-comp-chip-icon-size)}.skra-chip-label{display:inline-flex;align-items:center;min-inline-size:0}.skra-chip-remove{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;inline-size:var(--skra-comp-chip-remove-size);block-size:var(--skra-comp-chip-remove-size);margin:0;margin-inline-start:var(--skra-comp-chip-remove-gap);padding:0;border:0;background:transparent;color:inherit;cursor:pointer;border-radius:var(--skra-comp-chip-radius);transition:opacity var(--skra-comp-chip-motion-duration) var(--skra-comp-chip-motion-easing)}.skra-chip-remove:hover{opacity:.7}.skra-chip-remove:focus-visible{outline-style:solid;outline-color:var(--skra-comp-chip-focus-ring-color);outline-width:var(--skra-comp-chip-focus-ring-width);outline-offset:2px}.skra-chip-remove:disabled{cursor:not-allowed}.skra-chip-remove-glyph{inline-size:.875em;block-size:.875em;display:block}@media(prefers-reduced-motion:reduce){.skra-chip-remove{transition:none}}\n"] }]
+                    }, template: "@if (hasIcon()) {\r\n<span class=\"skra-chip-icon\">\r\n  <ng-content select=\"[skra-chip-icon]\"></ng-content>\r\n</span>\r\n}\r\n\r\n<span class=\"skra-chip-label\">\r\n  <ng-content></ng-content>\r\n</span>\r\n\r\n<button\r\n  type=\"button\"\r\n  class=\"skra-chip-remove\"\r\n  [disabled]=\"disabled()\"\r\n  (click)=\"onRemove()\"\r\n>\r\n  <svg\r\n    class=\"skra-chip-remove-glyph\"\r\n    aria-hidden=\"true\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"none\"\r\n    stroke=\"currentColor\"\r\n    stroke-width=\"2.5\"\r\n    stroke-linecap=\"round\"\r\n  >\r\n    <path d=\"M18 6 6 18\" />\r\n    <path d=\"m6 6 12 12\" />\r\n  </svg>\r\n  <ng-content select=\"[skra-chip-remove-label]\"></ng-content>\r\n</button>\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;box-sizing:border-box;margin:0;white-space:nowrap;min-block-size:var(--skra-comp-chip-remove-size);font-family:var(--skra-sys-typography-role-label-medium-font-family);font-size:var(--skra-sys-typography-role-label-medium-font-size);font-weight:var(--skra-sys-typography-role-label-medium-font-weight);line-height:var(--skra-sys-typography-role-label-medium-line-height);letter-spacing:var(--skra-sys-typography-role-label-medium-letter-spacing);background:var(--skra-comp-chip-background);color:var(--skra-comp-chip-foreground);border-color:var(--skra-comp-chip-border-color);border-width:var(--skra-comp-chip-border-width);border-style:var(--skra-comp-chip-border-style);border-radius:var(--skra-comp-chip-radius);padding-block:var(--skra-comp-chip-padding-block);padding-inline:var(--skra-comp-chip-padding-inline);box-shadow:var(--skra-comp-chip-shadow)}:host([data-skra-emphasis=high]){--skra-comp-chip-border-width: 0}:host([data-skra-disabled]){cursor:not-allowed;background:var(--skra-sys-color-neutral-soft);color:var(--skra-sys-color-neutral-strong);border-color:var(--skra-sys-color-neutral-border)}:host([data-skra-disabled]) .skra-chip-icon,:host([data-skra-disabled]) .skra-chip-remove{opacity:var(--skra-sys-opacity-disabled)}:host([data-skra-intent=neutral][data-skra-emphasis=high]){--skra-comp-chip-background: var( --skra-comp-chip-background-neutral-high, var(--skra-sys-color-neutral-base) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-neutral-high, var(--skra-sys-color-neutral-contrast) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-neutral-high, transparent )}:host([data-skra-intent=neutral][data-skra-emphasis=medium]){--skra-comp-chip-background: var( --skra-comp-chip-background-neutral-medium, var(--skra-sys-color-neutral-soft) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-neutral-medium, var(--skra-sys-color-neutral-strong) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-neutral-medium, var(--skra-sys-color-neutral-border) )}:host([data-skra-intent=info][data-skra-emphasis=high]){--skra-comp-chip-background: var( --skra-comp-chip-background-info-high, var(--skra-sys-color-info-base) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-info-high, var(--skra-sys-color-info-contrast) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-info-high, transparent )}:host([data-skra-intent=info][data-skra-emphasis=medium]){--skra-comp-chip-background: var( --skra-comp-chip-background-info-medium, var(--skra-sys-color-info-soft) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-info-medium, var(--skra-sys-color-info-strong) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-info-medium, var(--skra-sys-color-info-border) )}:host([data-skra-intent=success][data-skra-emphasis=high]){--skra-comp-chip-background: var( --skra-comp-chip-background-success-high, var(--skra-sys-color-success-base) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-success-high, var(--skra-sys-color-success-contrast) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-success-high, transparent )}:host([data-skra-intent=success][data-skra-emphasis=medium]){--skra-comp-chip-background: var( --skra-comp-chip-background-success-medium, var(--skra-sys-color-success-soft) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-success-medium, var(--skra-sys-color-success-strong) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-success-medium, var(--skra-sys-color-success-border) )}:host([data-skra-intent=warning][data-skra-emphasis=high]){--skra-comp-chip-background: var( --skra-comp-chip-background-warning-high, var(--skra-sys-color-warning-base) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-warning-high, var(--skra-sys-color-warning-contrast) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-warning-high, transparent )}:host([data-skra-intent=warning][data-skra-emphasis=medium]){--skra-comp-chip-background: var( --skra-comp-chip-background-warning-medium, var(--skra-sys-color-warning-soft) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-warning-medium, var(--skra-sys-color-warning-strong) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-warning-medium, var(--skra-sys-color-warning-border) )}:host([data-skra-intent=danger][data-skra-emphasis=high]){--skra-comp-chip-background: var( --skra-comp-chip-background-danger-high, var(--skra-sys-color-danger-base) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-danger-high, var(--skra-sys-color-danger-contrast) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-danger-high, transparent )}:host([data-skra-intent=danger][data-skra-emphasis=medium]){--skra-comp-chip-background: var( --skra-comp-chip-background-danger-medium, var(--skra-sys-color-danger-soft) );--skra-comp-chip-foreground: var( --skra-comp-chip-foreground-danger-medium, var(--skra-sys-color-danger-strong) );--skra-comp-chip-border-color: var( --skra-comp-chip-border-color-danger-medium, var(--skra-sys-color-danger-border) )}.skra-chip-icon{display:inline-flex;flex-shrink:0;align-items:center;block-size:1lh;margin-inline-end:var(--skra-comp-chip-icon-gap);--skra-comp-icon-size: var(--skra-comp-chip-icon-size)}.skra-chip-label{display:inline-flex;align-items:center;min-inline-size:0}.skra-chip-remove{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;inline-size:var(--skra-comp-chip-remove-size);block-size:var(--skra-comp-chip-remove-size);margin:0;margin-inline-start:var(--skra-comp-chip-remove-gap);padding:0;border:0;background:transparent;color:inherit;cursor:pointer;border-radius:var(--skra-comp-chip-radius);transition:opacity var(--skra-comp-chip-motion-duration) var(--skra-comp-chip-motion-easing)}@media(hover:hover)and (pointer:fine){.skra-chip-remove:hover{opacity:.7}}.skra-chip-remove:focus-visible{outline-style:solid;outline-color:var(--skra-comp-chip-focus-ring-color);outline-width:var(--skra-comp-chip-focus-ring-width);outline-offset:2px}.skra-chip-remove:disabled{cursor:not-allowed}.skra-chip-remove-glyph{inline-size:.875em;block-size:.875em;display:block}@media(prefers-reduced-motion:reduce){.skra-chip-remove{transition:none}}\n"] }]
         }], propDecorators: { intent: [{ type: i0.Input, args: [{ isSignal: true, alias: "intent", required: false }] }], emphasis: [{ type: i0.Input, args: [{ isSignal: true, alias: "emphasis", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }], iconSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SkraChipIcon), { isSignal: true }] }] } });
 
 /**

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

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

@@ -177,130 +177,130 @@ class SkraCombobox extends _SkraListboxWidgetBase {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraCombobox, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SkraCombobox, isStandalone: true, selector: "skra-combobox", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", filterChange: "filterChange" }, host: { properties: { "attr.data-skra-loading": "loading() ? \"\" : null", "attr.data-skra-empty": "!loading() && options().length === 0 ? \"\" : null" } }, providers: [{ provide: SKRA_LISTBOX_PANEL, useExisting: SkraCombobox }], exportAs: ["skraCombobox"], usesInheritance: true, ngImport: i0, template: `
-    <input
-      #trigger
-      class="skra-combobox-input"
-      type="text"
-      role="combobox"
-      autocomplete="off"
-      aria-autocomplete="list"
-      aria-haspopup="listbox"
-      [attr.id]="triggerId()"
-      [attr.aria-controls]="panelId"
-      [attr.aria-expanded]="isOpen()"
-      [attr.aria-activedescendant]="activeOptionId()"
-      [attr.aria-describedby]="describedBy()"
-      [attr.aria-invalid]="hasError() ? 'true' : null"
-      [attr.aria-required]="isRequired() ? 'true' : null"
-      [attr.aria-busy]="loading() ? 'true' : null"
-      [attr.placeholder]="placeholder()"
-      [disabled]="isDisabled()"
-      [readOnly]="isReadonly()"
-      [value]="displayValue()"
-      (focus)="onFocus()"
-      (input)="onInput($event)"
-      (keydown)="onTriggerKeydown($event)"
-      (blur)="onBlur()"
-    />
-    <button
-      class="skra-combobox-toggle"
-      type="button"
-      tabindex="-1"
-      aria-hidden="true"
-      [disabled]="isDisabled()"
-      (mousedown)="$event.preventDefault()"
-      (click)="toggle()"
-    >
-      <span class="skra-combobox-arrow" aria-hidden="true"></span>
-    </button>
-
-    <div
-      #panel
-      class="skra-combobox-listbox"
-      [id]="panelId"
-      role="listbox"
-      popover="auto"
-      (mousedown)="$event.preventDefault()"
-      (toggle)="onPanelToggle($event)"
-    >
-      <!-- ONE persistent live region (text swapped via @if) so loading/empty announce reliably —
-           a region injected on demand is unreliably spoken (ADR 0049 rule 4). Hidden when empty via
-           :empty in SCSS. -->
-      <div class="skra-combobox-status" role="status" aria-live="polite">
-        @if (loading()) {
-          <ng-content select="[skraLoadingIndicator]"></ng-content>
-          <span class="skra-combobox-spinner" aria-hidden="true"></span>
-        } @else if (options().length === 0) {
-          <ng-content select="[skraComboboxEmpty]"></ng-content>
-        }
-      </div>
-      <ng-content></ng-content>
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SkraCombobox, isStandalone: true, selector: "skra-combobox", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", filterChange: "filterChange" }, host: { properties: { "attr.data-skra-loading": "loading() ? \"\" : null", "attr.data-skra-empty": "!loading() && options().length === 0 ? \"\" : null" } }, providers: [{ provide: SKRA_LISTBOX_PANEL, useExisting: SkraCombobox }], exportAs: ["skraCombobox"], usesInheritance: true, ngImport: i0, template: `
+    <input
+      #trigger
+      class="skra-combobox-input"
+      type="text"
+      role="combobox"
+      autocomplete="off"
+      aria-autocomplete="list"
+      aria-haspopup="listbox"
+      [attr.id]="triggerId()"
+      [attr.aria-controls]="panelId"
+      [attr.aria-expanded]="isOpen()"
+      [attr.aria-activedescendant]="activeOptionId()"
+      [attr.aria-describedby]="describedBy()"
+      [attr.aria-invalid]="hasError() ? 'true' : null"
+      [attr.aria-required]="isRequired() ? 'true' : null"
+      [attr.aria-busy]="loading() ? 'true' : null"
+      [attr.placeholder]="placeholder()"
+      [disabled]="isDisabled()"
+      [readOnly]="isReadonly()"
+      [value]="displayValue()"
+      (focus)="onFocus()"
+      (input)="onInput($event)"
+      (keydown)="onTriggerKeydown($event)"
+      (blur)="onBlur()"
+    />
+    <button
+      class="skra-combobox-toggle"
+      type="button"
+      tabindex="-1"
+      aria-hidden="true"
+      [disabled]="isDisabled()"
+      (mousedown)="$event.preventDefault()"
+      (click)="toggle()"
+    >
+      <span class="skra-combobox-arrow" aria-hidden="true"></span>
+    </button>
+
+    <div
+      #panel
+      class="skra-combobox-listbox"
+      [id]="panelId"
+      role="listbox"
+      popover="auto"
+      (mousedown)="$event.preventDefault()"
+      (toggle)="onPanelToggle($event)"
+    >
+      <!-- ONE persistent live region (text swapped via @if) so loading/empty announce reliably —
+           a region injected on demand is unreliably spoken (ADR 0049 rule 4). Hidden when empty via
+           :empty in SCSS. -->
+      <div class="skra-combobox-status" role="status" aria-live="polite">
+        @if (loading()) {
+          <ng-content select="[skraLoadingIndicator]"></ng-content>
+          <span class="skra-combobox-spinner" aria-hidden="true"></span>
+        } @else if (options().length === 0) {
+          <ng-content select="[skraComboboxEmpty]"></ng-content>
+        }
+      </div>
+      <ng-content></ng-content>
+    </div>
   `, isInline: true, styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:var(--skra-comp-combobox-gap);inline-size:100%;min-block-size:var(--skra-comp-combobox-min-block-size);box-sizing:border-box;margin:0;padding-inline:var(--skra-comp-combobox-padding-inline);background:var(--skra-comp-combobox-background);color:var(--skra-comp-combobox-foreground);border-color:var(--skra-comp-combobox-border-color);border-width:var(--skra-comp-combobox-border-width);border-style:var(--skra-comp-combobox-border-style);border-radius:var(--skra-comp-combobox-radius);box-shadow:var(--skra-comp-combobox-shadow);transition:background-color var(--skra-comp-combobox-motion-duration) var(--skra-comp-combobox-motion-easing),border-color var(--skra-comp-combobox-motion-duration) var(--skra-comp-combobox-motion-easing)}:host:has(.skra-combobox-input:focus-visible){outline:var(--skra-comp-combobox-focus-ring-width) solid var(--skra-comp-combobox-focus-ring-color);outline-offset:.125rem}:host([data-skra-disabled]){background:var(--skra-comp-combobox-background-disabled);color:var(--skra-comp-combobox-foreground-disabled)}:host([data-skra-readonly]){background:var(--skra-comp-combobox-background-readonly)}:host([data-skra-validation=invalid]){border-color:var(--skra-comp-combobox-border-color-validation-invalid)}.skra-combobox-input{flex:1 1 auto;min-inline-size:0;box-sizing:border-box;margin:0;padding-block:var(--skra-comp-combobox-padding-block);padding-inline:0;border:none;background:transparent;color:inherit;appearance:none;outline:none;font-family:var(--skra-sys-typography-role-body-medium-font-family);font-size:var(--skra-sys-typography-role-body-medium-font-size);font-weight:var(--skra-sys-typography-role-body-medium-font-weight);line-height:var(--skra-sys-typography-role-body-medium-line-height);letter-spacing:var(--skra-sys-typography-role-body-medium-letter-spacing)}.skra-combobox-input::placeholder{color:var(--skra-comp-combobox-foreground-disabled)}.skra-combobox-input:disabled{color:var(--skra-comp-combobox-foreground-disabled);cursor:not-allowed}.skra-combobox-toggle{flex:none;display:inline-flex;align-items:center;justify-content:center;inline-size:var(--skra-comp-combobox-arrow-icon-size);block-size:var(--skra-comp-combobox-arrow-icon-size);margin:0;padding:0;border:none;background:transparent;cursor:pointer}.skra-combobox-toggle:disabled{cursor:not-allowed}.skra-combobox-arrow{inline-size:100%;block-size:100%;background-color:var(--skra-comp-combobox-arrow-color);mask:url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M6%209l6%206%206-6'%20fill='none'%20stroke='%23000'%20stroke-width='2'/%3E%3C/svg%3E\") no-repeat center/contain;-webkit-mask:url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M6%209l6%206%206-6'%20fill='none'%20stroke='%23000'%20stroke-width='2'/%3E%3C/svg%3E\") no-repeat center/contain;transition:transform var(--skra-comp-combobox-motion-duration) var(--skra-comp-combobox-motion-easing)}:host:has(.skra-combobox-input[aria-expanded=true]) .skra-combobox-arrow{transform:rotate(180deg)}.skra-combobox-listbox{position:fixed;margin:0;inset:auto;box-sizing:border-box;padding-block:var(--skra-comp-combobox-panel-padding-block);padding-inline:var(--skra-comp-combobox-panel-padding-inline);background:var(--skra-comp-combobox-panel-background);color:var(--skra-comp-combobox-panel-foreground);border:var(--skra-comp-combobox-border-width) solid var(--skra-comp-combobox-panel-border-color);border-radius:var(--skra-comp-combobox-panel-radius);box-shadow:var(--skra-comp-combobox-panel-shadow);inline-size:max-content;max-block-size:var(--skra-comp-combobox-panel-max-block-size);overflow-y:auto;flex-direction:column;opacity:0;transition:opacity var(--skra-comp-combobox-motion-duration) var(--skra-comp-combobox-motion-easing),display var(--skra-comp-combobox-motion-duration) allow-discrete,overlay var(--skra-comp-combobox-motion-duration) allow-discrete}.skra-combobox-listbox:popover-open{display:flex;opacity:1}@starting-style{.skra-combobox-listbox:popover-open{opacity:0}}.skra-combobox-status{display:flex;align-items:center;gap:var(--skra-comp-combobox-gap);padding-block:var(--skra-comp-combobox-status-padding-block);padding-inline:var(--skra-comp-combobox-status-padding-inline);font-family:var(--skra-sys-typography-role-body-small-font-family);font-size:var(--skra-sys-typography-role-body-small-font-size);font-weight:var(--skra-sys-typography-role-body-small-font-weight);line-height:var(--skra-sys-typography-role-body-small-line-height);letter-spacing:var(--skra-sys-typography-role-body-small-letter-spacing)}.skra-combobox-status:empty{display:none}:host([data-skra-empty]) .skra-combobox-status{color:var(--skra-comp-combobox-empty-foreground)}.skra-combobox-status:has([skraLoadingIndicator]) .skra-combobox-spinner{display:none}.skra-combobox-spinner{flex:none;inline-size:1em;block-size:1em;border:.125rem solid var(--skra-comp-combobox-loading-indicator-color);border-block-start-color:transparent;border-radius:50%;animation:skra-combobox-spin .6s linear infinite}@keyframes skra-combobox-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){:host,.skra-combobox-arrow,.skra-combobox-listbox{transition-duration:0ms}.skra-combobox-spinner{animation-duration:0ms}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraCombobox, decorators: [{
             type: Component,
-            args: [{ selector: 'skra-combobox', standalone: true, exportAs: 'skraCombobox', template: `
-    <input
-      #trigger
-      class="skra-combobox-input"
-      type="text"
-      role="combobox"
-      autocomplete="off"
-      aria-autocomplete="list"
-      aria-haspopup="listbox"
-      [attr.id]="triggerId()"
-      [attr.aria-controls]="panelId"
-      [attr.aria-expanded]="isOpen()"
-      [attr.aria-activedescendant]="activeOptionId()"
-      [attr.aria-describedby]="describedBy()"
-      [attr.aria-invalid]="hasError() ? 'true' : null"
-      [attr.aria-required]="isRequired() ? 'true' : null"
-      [attr.aria-busy]="loading() ? 'true' : null"
-      [attr.placeholder]="placeholder()"
-      [disabled]="isDisabled()"
-      [readOnly]="isReadonly()"
-      [value]="displayValue()"
-      (focus)="onFocus()"
-      (input)="onInput($event)"
-      (keydown)="onTriggerKeydown($event)"
-      (blur)="onBlur()"
-    />
-    <button
-      class="skra-combobox-toggle"
-      type="button"
-      tabindex="-1"
-      aria-hidden="true"
-      [disabled]="isDisabled()"
-      (mousedown)="$event.preventDefault()"
-      (click)="toggle()"
-    >
-      <span class="skra-combobox-arrow" aria-hidden="true"></span>
-    </button>
-
-    <div
-      #panel
-      class="skra-combobox-listbox"
-      [id]="panelId"
-      role="listbox"
-      popover="auto"
-      (mousedown)="$event.preventDefault()"
-      (toggle)="onPanelToggle($event)"
-    >
-      <!-- ONE persistent live region (text swapped via @if) so loading/empty announce reliably —
-           a region injected on demand is unreliably spoken (ADR 0049 rule 4). Hidden when empty via
-           :empty in SCSS. -->
-      <div class="skra-combobox-status" role="status" aria-live="polite">
-        @if (loading()) {
-          <ng-content select="[skraLoadingIndicator]"></ng-content>
-          <span class="skra-combobox-spinner" aria-hidden="true"></span>
-        } @else if (options().length === 0) {
-          <ng-content select="[skraComboboxEmpty]"></ng-content>
-        }
-      </div>
-      <ng-content></ng-content>
-    </div>
+            args: [{ selector: 'skra-combobox', standalone: true, exportAs: 'skraCombobox', template: `
+    <input
+      #trigger
+      class="skra-combobox-input"
+      type="text"
+      role="combobox"
+      autocomplete="off"
+      aria-autocomplete="list"
+      aria-haspopup="listbox"
+      [attr.id]="triggerId()"
+      [attr.aria-controls]="panelId"
+      [attr.aria-expanded]="isOpen()"
+      [attr.aria-activedescendant]="activeOptionId()"
+      [attr.aria-describedby]="describedBy()"
+      [attr.aria-invalid]="hasError() ? 'true' : null"
+      [attr.aria-required]="isRequired() ? 'true' : null"
+      [attr.aria-busy]="loading() ? 'true' : null"
+      [attr.placeholder]="placeholder()"
+      [disabled]="isDisabled()"
+      [readOnly]="isReadonly()"
+      [value]="displayValue()"
+      (focus)="onFocus()"
+      (input)="onInput($event)"
+      (keydown)="onTriggerKeydown($event)"
+      (blur)="onBlur()"
+    />
+    <button
+      class="skra-combobox-toggle"
+      type="button"
+      tabindex="-1"
+      aria-hidden="true"
+      [disabled]="isDisabled()"
+      (mousedown)="$event.preventDefault()"
+      (click)="toggle()"
+    >
+      <span class="skra-combobox-arrow" aria-hidden="true"></span>
+    </button>
+
+    <div
+      #panel
+      class="skra-combobox-listbox"
+      [id]="panelId"
+      role="listbox"
+      popover="auto"
+      (mousedown)="$event.preventDefault()"
+      (toggle)="onPanelToggle($event)"
+    >
+      <!-- ONE persistent live region (text swapped via @if) so loading/empty announce reliably —
+           a region injected on demand is unreliably spoken (ADR 0049 rule 4). Hidden when empty via
+           :empty in SCSS. -->
+      <div class="skra-combobox-status" role="status" aria-live="polite">
+        @if (loading()) {
+          <ng-content select="[skraLoadingIndicator]"></ng-content>
+          <span class="skra-combobox-spinner" aria-hidden="true"></span>
+        } @else if (options().length === 0) {
+          <ng-content select="[skraComboboxEmpty]"></ng-content>
+        }
+      </div>
+      <ng-content></ng-content>
+    </div>
   `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: {
                         '[attr.data-skra-loading]': 'loading() ? "" : null',
                         '[attr.data-skra-empty]': '!loading() && options().length === 0 ? "" : null',