@skra/ui 0.6.0 → 0.8.0

package/fesm2022/skra-ui-alert.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Directive, input, booleanAttribute, output, contentChild, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { Directive, input, booleanAttribute, output, contentChild, computed, contentChildren, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 
 /**
  * Marker directive for the leading icon slot of `<skra-alert>`.
@@ -37,6 +37,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                     standalone: true,
                 }]
         }] });
+/**
+ * Marker directive for an ACTION of `<skra-alert>` — "what to do next" ("Try again").
+ * Put it on each action; several are allowed and keep the consumer's order. Detected via
+ * `contentChildren` (ADR 020) to render the actions region below the message only when one
+ * exists. The region sits inside the content column, so it never collides with the dismiss
+ * control.
+ *
+ * The action keeps its OWN meaning: the alert never sets or changes a projected button's
+ * `intent` / `emphasis` (ADR 0059 R59.1) — a retry inside a danger alert is not a destructive
+ * action. What the alert owns is the region's layout and the focus ring its actions draw on the
+ * alert's fill (R59.3). Guaranteed legible on the alert's fill (ADR 0059 R59.2 — the gate
+ * measures exactly these):
+ *
+ * | Alert emphasis      | Guaranteed actions                                              |
+ * | ------------------- | --------------------------------------------------------------- |
+ * | `medium` (default)  | `neutral` at any emphasis; any intent at `emphasis="high"`      |
+ * | `high`              | any intent at `emphasis="high"` other than the alert's intent   |
+ *
+ * Anything else (a coloured `medium`/`low` action, a `medium`/`low` action on a `high` alert,
+ * a `high` action in the alert's own intent) is unsupported. The zero-config
+ * `<button skraButton skra-alert-actions>` (`neutral × high`) is guaranteed everywhere except
+ * on a `neutral × high` alert. Admitted atom: `button[skraButton]`.
+ *
+ * Announcement: a live alert (`live="polite"|"assertive"`) announces its whole text, action
+ * labels included (the implicit `role` carries `aria-atomic`, ADR 0052) — the label tells the
+ * user an action exists.
+ */
+class SkraAlertActions {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraAlertActions, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: SkraAlertActions, isStandalone: true, selector: "[skra-alert-actions]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraAlertActions, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[skra-alert-actions]',
+                    standalone: true,
+                }]
+        }] });
 
 /**
  * `<skra-alert>` — in-content, page/section-level feedback message (Feedback/Status
@@ -53,6 +91,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
  * Forge does NOT remove itself from the DOM — the consumer owns removal via `@if`
  * (agnostic-atom doctrine). The close control's accessible name comes from a projected
  * `[skra-alert-close-label]` (sr-only; ADR 033 Path 2) — the "×" glyph is `aria-hidden`.
+ *
+ * Actions (GitHub #4, ADR 0059): mark each next-step button `[skra-alert-actions]`; they render
+ * in a region below the message. The alert owns that region's layout and its focus ring, never
+ * the actions' meaning — see `SkraAlertActions` for the guaranteed combinations.
  */
 class SkraAlert {
     // --- Variant Surface (ADR 035) ---
@@ -75,6 +117,12 @@ class SkraAlert {
     ...(ngDevMode ? [{ debugName: "titleSlot" }] : /* istanbul ignore next */ []));
     hasTitle = computed(() => !!this.titleSlot(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasTitle" }] : /* istanbul ignore next */ []));
+    // Several actions are allowed (consumer order) — hence contentChildren, not contentChild.
+    // The alert never touches their intent/emphasis (ADR 0059 R59.1); see SkraAlertActions.
+    actionSlots = contentChildren(SkraAlertActions, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "actionSlots" }] : /* istanbul ignore next */ []));
+    hasActions = computed(() => this.actionSlots().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasActions" }] : /* istanbul ignore next */ []));
     /**
      * Map `live` politeness to the implicit-live ARIA role (ADR 0052). The role
      * carries `aria-live` + `aria-atomic` implicitly; `off` → no live region.
@@ -94,11 +142,11 @@ class SkraAlert {
         this.dismissed.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraAlert, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SkraAlert, isStandalone: true, selector: "skra-alert", inputs: { intent: { classPropertyName: "intent", publicName: "intent", isSignal: true, isRequired: false, transformFunction: null }, emphasis: { classPropertyName: "emphasis", publicName: "emphasis", isSignal: true, isRequired: false, transformFunction: null }, live: { classPropertyName: "live", publicName: "live", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, host: { properties: { "attr.data-skra-intent": "intent()", "attr.data-skra-emphasis": "emphasis()", "attr.role": "liveRole()", "attr.data-skra-has-icon": "hasIcon() ? \"\" : null", "attr.data-skra-has-title": "hasTitle() ? \"\" : null" } }, queries: [{ propertyName: "iconSlot", first: true, predicate: SkraAlertIcon, descendants: true, isSignal: true }, { propertyName: "titleSlot", first: true, predicate: SkraAlertTitle, descendants: true, isSignal: true }], ngImport: i0, template: "@if (hasIcon()) {\r\n<span class=\"skra-alert-icon\">\r\n  <ng-content select=\"[skra-alert-icon]\"></ng-content>\r\n</span>\r\n}\r\n\r\n<div class=\"skra-alert-content\">\r\n  @if (hasTitle()) {\r\n  <div class=\"skra-alert-title\">\r\n    <ng-content select=\"[skra-alert-title]\"></ng-content>\r\n  </div>\r\n  }\r\n  <div class=\"skra-alert-body\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n\r\n@if (dismissible()) {\r\n<button type=\"button\" class=\"skra-alert-dismiss\" (click)=\"onDismiss()\">\r\n  <span class=\"skra-alert-dismiss-glyph\" aria-hidden=\"true\">&times;</span>\r\n  <ng-content select=\"[skra-alert-close-label]\"></ng-content>\r\n</button>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:flex-start;box-sizing:border-box;margin:0;gap:var(--skra-comp-alert-icon-gap);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);background:var(--skra-comp-alert-background);color:var(--skra-comp-alert-foreground);border-color:var(--skra-comp-alert-border-color);border-width:var(--skra-comp-alert-border-width);border-style:var(--skra-comp-alert-border-style);border-radius:var(--skra-comp-alert-radius);padding-block:var(--skra-comp-alert-padding-block);padding-inline:var(--skra-comp-alert-padding-inline);box-shadow:var(--skra-comp-alert-shadow)}:host([data-skra-emphasis=high]){--skra-comp-alert-border-width: 0}:host([data-skra-intent=neutral][data-skra-emphasis=high]){--skra-comp-alert-background: var( --skra-comp-alert-background-neutral-high, var(--skra-sys-color-neutral-base) );--skra-comp-alert-foreground: var( --skra-comp-alert-foreground-neutral-high, var(--skra-sys-color-neutral-contrast) );--skra-comp-alert-border-color: var( --skra-comp-alert-border-color-neutral-high, transparent )}:host([data-skra-intent=neutral][data-skra-emphasis=medium]){--skra-comp-alert-background: var( --skra-comp-alert-background-neutral-medium, var(--skra-sys-color-neutral-soft) );--skra-comp-alert-foreground: var( --skra-comp-alert-foreground-neutral-medium, var(--skra-sys-color-neutral-strong) );--skra-comp-alert-border-color: var( --skra-comp-alert-border-color-neutral-medium, var(--skra-sys-color-neutral-border) )}:host([data-skra-intent=info][data-skra-emphasis=high]){--skra-comp-alert-background: var( --skra-comp-alert-background-info-high, var(--skra-sys-color-info-base) );--skra-comp-alert-foreground: var( --skra-comp-alert-foreground-info-high, var(--skra-sys-color-info-contrast) );--skra-comp-alert-border-color: var( --skra-comp-alert-border-color-info-high, transparent )}:host([data-skra-intent=info][data-skra-emphasis=medium]){--skra-comp-alert-background: var( --skra-comp-alert-background-info-medium, var(--skra-sys-color-info-soft) );--skra-comp-alert-foreground: var( --skra-comp-alert-foreground-info-medium, var(--skra-sys-color-info-strong) );--skra-comp-alert-border-color: var( --skra-comp-alert-border-color-info-medium, var(--skra-sys-color-info-border) )}:host([data-skra-intent=success][data-skra-emphasis=high]){--skra-comp-alert-background: var( --skra-comp-alert-background-success-high, var(--skra-sys-color-success-base) );--skra-comp-alert-foreground: var( --skra-comp-alert-foreground-success-high, var(--skra-sys-color-success-contrast) );--skra-comp-alert-border-color: var( --skra-comp-alert-border-color-success-high, transparent )}:host([data-skra-intent=success][data-skra-emphasis=medium]){--skra-comp-alert-background: var( --skra-comp-alert-background-success-medium, var(--skra-sys-color-success-soft) );--skra-comp-alert-foreground: var( --skra-comp-alert-foreground-success-medium, var(--skra-sys-color-success-strong) );--skra-comp-alert-border-color: var( --skra-comp-alert-border-color-success-medium, var(--skra-sys-color-success-border) )}:host([data-skra-intent=warning][data-skra-emphasis=high]){--skra-comp-alert-background: var( --skra-comp-alert-background-warning-high, var(--skra-sys-color-warning-base) );--skra-comp-alert-foreground: var( --skra-comp-alert-foreground-warning-high, var(--skra-sys-color-warning-contrast) );--skra-comp-alert-border-color: var( --skra-comp-alert-border-color-warning-high, transparent )}:host([data-skra-intent=warning][data-skra-emphasis=medium]){--skra-comp-alert-background: var( --skra-comp-alert-background-warning-medium, var(--skra-sys-color-warning-soft) );--skra-comp-alert-foreground: var( --skra-comp-alert-foreground-warning-medium, var(--skra-sys-color-warning-strong) );--skra-comp-alert-border-color: var( --skra-comp-alert-border-color-warning-medium, var(--skra-sys-color-warning-border) )}:host([data-skra-intent=danger][data-skra-emphasis=high]){--skra-comp-alert-background: var( --skra-comp-alert-background-danger-high, var(--skra-sys-color-danger-base) );--skra-comp-alert-foreground: var( --skra-comp-alert-foreground-danger-high, var(--skra-sys-color-danger-contrast) );--skra-comp-alert-border-color: var( --skra-comp-alert-border-color-danger-high, transparent )}:host([data-skra-intent=danger][data-skra-emphasis=medium]){--skra-comp-alert-background: var( --skra-comp-alert-background-danger-medium, var(--skra-sys-color-danger-soft) );--skra-comp-alert-foreground: var( --skra-comp-alert-foreground-danger-medium, var(--skra-sys-color-danger-strong) );--skra-comp-alert-border-color: var( --skra-comp-alert-border-color-danger-medium, var(--skra-sys-color-danger-border) )}.skra-alert-icon{display:inline-flex;flex-shrink:0;align-items:center;block-size:1lh;--skra-comp-icon-size: var(--skra-comp-alert-icon-size)}.skra-alert-content{flex:1 1 auto;min-inline-size:0;display:flex;flex-direction:column;gap:var(--skra-comp-alert-title-gap)}.skra-alert-title{font-family:var(--skra-sys-typography-role-label-large-font-family);font-size:var(--skra-sys-typography-role-label-large-font-size);font-weight:var(--skra-sys-typography-role-label-large-font-weight);line-height:var(--skra-sys-typography-role-label-large-line-height);letter-spacing:var(--skra-sys-typography-role-label-large-letter-spacing)}.skra-alert-dismiss{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;inline-size:var(--skra-comp-alert-dismiss-size);block-size:var(--skra-comp-alert-dismiss-size);margin:0;padding:0;border:0;background:transparent;color:inherit;cursor:pointer;border-radius:var(--skra-comp-alert-radius);transition:opacity var(--skra-comp-alert-motion-duration) var(--skra-comp-alert-motion-easing)}@media(hover:hover)and (pointer:fine){.skra-alert-dismiss:hover{opacity:.7}}.skra-alert-dismiss:focus-visible{outline-style:solid;outline-color:var(--skra-comp-alert-focus-ring-color);outline-width:var(--skra-comp-alert-focus-ring-width);outline-offset:2px}.skra-alert-dismiss-glyph{font-size:1.25em;line-height:1}@media(prefers-reduced-motion:reduce){.skra-alert-dismiss{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SkraAlert, isStandalone: true, selector: "skra-alert", inputs: { intent: { classPropertyName: "intent", publicName: "intent", isSignal: true, isRequired: false, transformFunction: null }, emphasis: { classPropertyName: "emphasis", publicName: "emphasis", isSignal: true, isRequired: false, transformFunction: null }, live: { classPropertyName: "live", publicName: "live", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, host: { properties: { "attr.data-skra-intent": "intent()", "attr.data-skra-emphasis": "emphasis()", "attr.role": "liveRole()", "attr.data-skra-has-icon": "hasIcon() ? \"\" : null", "attr.data-skra-has-title": "hasTitle() ? \"\" : null", "attr.data-skra-has-actions": "hasActions() ? \"\" : null" } }, queries: [{ propertyName: "iconSlot", first: true, predicate: SkraAlertIcon, descendants: true, isSignal: true }, { propertyName: "titleSlot", first: true, predicate: SkraAlertTitle, descendants: true, isSignal: true }, { propertyName: "actionSlots", predicate: SkraAlertActions, isSignal: true }], ngImport: i0, template: "@if (hasIcon()) {\n<span class=\"skra-alert-icon\">\n  <ng-content select=\"[skra-alert-icon]\"></ng-content>\n</span>\n}\n\n<div class=\"skra-alert-content\">\n  @if (hasTitle()) {\n  <div class=\"skra-alert-title\">\n    <ng-content select=\"[skra-alert-title]\"></ng-content>\n  </div>\n  }\n  <div class=\"skra-alert-body\">\n    <ng-content></ng-content>\n  </div>\n  @if (hasActions()) {\n  <div class=\"skra-alert-actions\">\n    <ng-content select=\"[skra-alert-actions]\"></ng-content>\n  </div>\n  }\n</div>\n\n@if (dismissible()) {\n<button type=\"button\" class=\"skra-alert-dismiss\" (click)=\"onDismiss()\">\n  <span class=\"skra-alert-dismiss-glyph\" aria-hidden=\"true\">&times;</span>\n  <ng-content select=\"[skra-alert-close-label]\"></ng-content>\n</button>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:flex-start;box-sizing:border-box;margin:0;gap:var(--skra-comp-alert-icon-gap);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);background:var(--skra-comp-alert-background);color:var(--skra-comp-alert-foreground);border-color:var(--skra-comp-alert-border-color);border-width:var(--skra-comp-alert-border-width);border-style:var(--skra-comp-alert-border-style);border-radius:var(--skra-comp-alert-radius);padding-block:var(--skra-comp-alert-padding-block);padding-inline:var(--skra-comp-alert-padding-inline);box-shadow:var(--skra-comp-alert-shadow)}:host([data-skra-emphasis=high]){--skra-comp-alert-border-width: 0}:host([data-skra-intent=neutral][data-skra-emphasis=high]){--skra-comp-alert-background: var( --skra-comp-alert-background-neutral-high, var(--skra-sys-color-neutral-base) );--skra-comp-alert-foreground: var( --skra-comp-alert-foreground-neutral-high, var(--skra-sys-color-neutral-contrast) );--skra-comp-alert-border-color: var( --skra-comp-alert-border-color-neutral-high, transparent );--skra-comp-alert-focus-ring-color: var( --skra-comp-alert-focus-ring-color-neutral-high, var(--skra-sys-color-neutral-contrast) )}:host([data-skra-intent=neutral][data-skra-emphasis=medium]){--skra-comp-alert-background: var( --skra-comp-alert-background-neutral-medium, var(--skra-sys-color-neutral-soft) );--skra-comp-alert-foreground: var( --skra-comp-alert-foreground-neutral-medium, var(--skra-sys-color-neutral-strong) );--skra-comp-alert-border-color: var( --skra-comp-alert-border-color-neutral-medium, var(--skra-sys-color-neutral-border) );--skra-comp-alert-focus-ring-color: var( --skra-comp-alert-focus-ring-color-neutral-medium, var(--skra-sys-color-focus-ring) )}:host([data-skra-intent=info][data-skra-emphasis=high]){--skra-comp-alert-background: var( --skra-comp-alert-background-info-high, var(--skra-sys-color-info-base) );--skra-comp-alert-foreground: var( --skra-comp-alert-foreground-info-high, var(--skra-sys-color-info-contrast) );--skra-comp-alert-border-color: var( --skra-comp-alert-border-color-info-high, transparent );--skra-comp-alert-focus-ring-color: var( --skra-comp-alert-focus-ring-color-info-high, var(--skra-sys-color-info-contrast) )}:host([data-skra-intent=info][data-skra-emphasis=medium]){--skra-comp-alert-background: var( --skra-comp-alert-background-info-medium, var(--skra-sys-color-info-soft) );--skra-comp-alert-foreground: var( --skra-comp-alert-foreground-info-medium, var(--skra-sys-color-info-strong) );--skra-comp-alert-border-color: var( --skra-comp-alert-border-color-info-medium, var(--skra-sys-color-info-border) );--skra-comp-alert-focus-ring-color: var( --skra-comp-alert-focus-ring-color-info-medium, var(--skra-sys-color-focus-ring) )}:host([data-skra-intent=success][data-skra-emphasis=high]){--skra-comp-alert-background: var( --skra-comp-alert-background-success-high, var(--skra-sys-color-success-base) );--skra-comp-alert-foreground: var( --skra-comp-alert-foreground-success-high, var(--skra-sys-color-success-contrast) );--skra-comp-alert-border-color: var( --skra-comp-alert-border-color-success-high, transparent );--skra-comp-alert-focus-ring-color: var( --skra-comp-alert-focus-ring-color-success-high, var(--skra-sys-color-success-contrast) )}:host([data-skra-intent=success][data-skra-emphasis=medium]){--skra-comp-alert-background: var( --skra-comp-alert-background-success-medium, var(--skra-sys-color-success-soft) );--skra-comp-alert-foreground: var( --skra-comp-alert-foreground-success-medium, var(--skra-sys-color-success-strong) );--skra-comp-alert-border-color: var( --skra-comp-alert-border-color-success-medium, var(--skra-sys-color-success-border) );--skra-comp-alert-focus-ring-color: var( --skra-comp-alert-focus-ring-color-success-medium, var(--skra-sys-color-focus-ring) )}:host([data-skra-intent=warning][data-skra-emphasis=high]){--skra-comp-alert-background: var( --skra-comp-alert-background-warning-high, var(--skra-sys-color-warning-base) );--skra-comp-alert-foreground: var( --skra-comp-alert-foreground-warning-high, var(--skra-sys-color-warning-contrast) );--skra-comp-alert-border-color: var( --skra-comp-alert-border-color-warning-high, transparent );--skra-comp-alert-focus-ring-color: var( --skra-comp-alert-focus-ring-color-warning-high, var(--skra-sys-color-warning-contrast) )}:host([data-skra-intent=warning][data-skra-emphasis=medium]){--skra-comp-alert-background: var( --skra-comp-alert-background-warning-medium, var(--skra-sys-color-warning-soft) );--skra-comp-alert-foreground: var( --skra-comp-alert-foreground-warning-medium, var(--skra-sys-color-warning-strong) );--skra-comp-alert-border-color: var( --skra-comp-alert-border-color-warning-medium, var(--skra-sys-color-warning-border) );--skra-comp-alert-focus-ring-color: var( --skra-comp-alert-focus-ring-color-warning-medium, var(--skra-sys-color-focus-ring) )}:host([data-skra-intent=danger][data-skra-emphasis=high]){--skra-comp-alert-background: var( --skra-comp-alert-background-danger-high, var(--skra-sys-color-danger-base) );--skra-comp-alert-foreground: var( --skra-comp-alert-foreground-danger-high, var(--skra-sys-color-danger-contrast) );--skra-comp-alert-border-color: var( --skra-comp-alert-border-color-danger-high, transparent );--skra-comp-alert-focus-ring-color: var( --skra-comp-alert-focus-ring-color-danger-high, var(--skra-sys-color-danger-contrast) )}:host([data-skra-intent=danger][data-skra-emphasis=medium]){--skra-comp-alert-background: var( --skra-comp-alert-background-danger-medium, var(--skra-sys-color-danger-soft) );--skra-comp-alert-foreground: var( --skra-comp-alert-foreground-danger-medium, var(--skra-sys-color-danger-strong) );--skra-comp-alert-border-color: var( --skra-comp-alert-border-color-danger-medium, var(--skra-sys-color-danger-border) );--skra-comp-alert-focus-ring-color: var( --skra-comp-alert-focus-ring-color-danger-medium, var(--skra-sys-color-focus-ring) )}.skra-alert-icon{display:inline-flex;flex-shrink:0;align-items:center;block-size:1lh;--skra-comp-icon-size: var(--skra-comp-alert-icon-size)}.skra-alert-content{flex:1 1 auto;min-inline-size:0;display:flex;flex-direction:column;gap:var(--skra-comp-alert-title-gap)}.skra-alert-title{font-family:var(--skra-sys-typography-role-label-large-font-family);font-size:var(--skra-sys-typography-role-label-large-font-size);font-weight:var(--skra-sys-typography-role-label-large-font-weight);line-height:var(--skra-sys-typography-role-label-large-line-height);letter-spacing:var(--skra-sys-typography-role-label-large-letter-spacing)}.skra-alert-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--skra-comp-alert-actions-gap);padding-block-start:var(--skra-comp-alert-actions-gap);--skra-comp-button-focus-ring-color: var(--skra-comp-alert-focus-ring-color)}.skra-alert-dismiss{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;inline-size:var(--skra-comp-alert-dismiss-size);block-size:var(--skra-comp-alert-dismiss-size);margin:0;padding:0;border:0;background:transparent;color:inherit;cursor:pointer;border-radius:var(--skra-comp-alert-radius);transition:opacity var(--skra-comp-alert-motion-duration) var(--skra-comp-alert-motion-easing)}@media(hover:hover)and (pointer:fine){.skra-alert-dismiss:hover{opacity:.7}}.skra-alert-dismiss:focus-visible{outline-style:solid;outline-color:var(--skra-comp-alert-focus-ring-color);outline-width:var(--skra-comp-alert-focus-ring-width);outline-offset:2px}.skra-alert-dismiss-glyph{font-size:1.25em;line-height:1}@media(prefers-reduced-motion:reduce){.skra-alert-dismiss{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraAlert, decorators: [{
             type: Component,
-            args: [{ selector: 'skra-alert', standalone: true, imports: [SkraAlertIcon, SkraAlertTitle], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: {
+            args: [{ selector: 'skra-alert', standalone: true, imports: [SkraAlertIcon, SkraAlertTitle, SkraAlertActions], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: {
                         // Variant Surface reflection (ADR 035 §3.5)
                         '[attr.data-skra-intent]': 'intent()',
                         '[attr.data-skra-emphasis]': 'emphasis()',
@@ -107,12 +155,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         // Smart Slots layout reflection (ADR 020 v2.0 — slot-presence, State-Surface-exempt §3.6)
                         '[attr.data-skra-has-icon]': 'hasIcon() ? "" : null',
                         '[attr.data-skra-has-title]': 'hasTitle() ? "" : null',
-                    }, template: "@if (hasIcon()) {\r\n<span class=\"skra-alert-icon\">\r\n  <ng-content select=\"[skra-alert-icon]\"></ng-content>\r\n</span>\r\n}\r\n\r\n<div class=\"skra-alert-content\">\r\n  @if (hasTitle()) {\r\n  <div class=\"skra-alert-title\">\r\n    <ng-content select=\"[skra-alert-title]\"></ng-content>\r\n  </div>\r\n  }\r\n  <div class=\"skra-alert-body\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n\r\n@if (dismissible()) {\r\n<button type=\"button\" class=\"skra-alert-dismiss\" (click)=\"onDismiss()\">\r\n  <span class=\"skra-alert-dismiss-glyph\" aria-hidden=\"true\">&times;</span>\r\n  <ng-content select=\"[skra-alert-close-label]\"></ng-content>\r\n</button>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:flex-start;box-sizing:border-box;margin:0;gap:var(--skra-comp-alert-icon-gap);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);background:var(--skra-comp-alert-background);color:var(--skra-comp-alert-foreground);border-color:var(--skra-comp-alert-border-color);border-width:var(--skra-comp-alert-border-width);border-style:var(--skra-comp-alert-border-style);border-radius:var(--skra-comp-alert-radius);padding-block:var(--skra-comp-alert-padding-block);padding-inline:var(--skra-comp-alert-padding-inline);box-shadow:var(--skra-comp-alert-shadow)}:host([data-skra-emphasis=high]){--skra-comp-alert-border-width: 0}:host([data-skra-intent=neutral][data-skra-emphasis=high]){--skra-comp-alert-background: var( --skra-comp-alert-background-neutral-high, var(--skra-sys-color-neutral-base) );--skra-comp-alert-foreground: var( --skra-comp-alert-foreground-neutral-high, var(--skra-sys-color-neutral-contrast) );--skra-comp-alert-border-color: var( --skra-comp-alert-border-color-neutral-high, transparent )}:host([data-skra-intent=neutral][data-skra-emphasis=medium]){--skra-comp-alert-background: var( --skra-comp-alert-background-neutral-medium, var(--skra-sys-color-neutral-soft) );--skra-comp-alert-foreground: var( --skra-comp-alert-foreground-neutral-medium, var(--skra-sys-color-neutral-strong) );--skra-comp-alert-border-color: var( --skra-comp-alert-border-color-neutral-medium, var(--skra-sys-color-neutral-border) )}:host([data-skra-intent=info][data-skra-emphasis=high]){--skra-comp-alert-background: var( --skra-comp-alert-background-info-high, var(--skra-sys-color-info-base) );--skra-comp-alert-foreground: var( --skra-comp-alert-foreground-info-high, var(--skra-sys-color-info-contrast) );--skra-comp-alert-border-color: var( --skra-comp-alert-border-color-info-high, transparent )}:host([data-skra-intent=info][data-skra-emphasis=medium]){--skra-comp-alert-background: var( --skra-comp-alert-background-info-medium, var(--skra-sys-color-info-soft) );--skra-comp-alert-foreground: var( --skra-comp-alert-foreground-info-medium, var(--skra-sys-color-info-strong) );--skra-comp-alert-border-color: var( --skra-comp-alert-border-color-info-medium, var(--skra-sys-color-info-border) )}:host([data-skra-intent=success][data-skra-emphasis=high]){--skra-comp-alert-background: var( --skra-comp-alert-background-success-high, var(--skra-sys-color-success-base) );--skra-comp-alert-foreground: var( --skra-comp-alert-foreground-success-high, var(--skra-sys-color-success-contrast) );--skra-comp-alert-border-color: var( --skra-comp-alert-border-color-success-high, transparent )}:host([data-skra-intent=success][data-skra-emphasis=medium]){--skra-comp-alert-background: var( --skra-comp-alert-background-success-medium, var(--skra-sys-color-success-soft) );--skra-comp-alert-foreground: var( --skra-comp-alert-foreground-success-medium, var(--skra-sys-color-success-strong) );--skra-comp-alert-border-color: var( --skra-comp-alert-border-color-success-medium, var(--skra-sys-color-success-border) )}:host([data-skra-intent=warning][data-skra-emphasis=high]){--skra-comp-alert-background: var( --skra-comp-alert-background-warning-high, var(--skra-sys-color-warning-base) );--skra-comp-alert-foreground: var( --skra-comp-alert-foreground-warning-high, var(--skra-sys-color-warning-contrast) );--skra-comp-alert-border-color: var( --skra-comp-alert-border-color-warning-high, transparent )}:host([data-skra-intent=warning][data-skra-emphasis=medium]){--skra-comp-alert-background: var( --skra-comp-alert-background-warning-medium, var(--skra-sys-color-warning-soft) );--skra-comp-alert-foreground: var( --skra-comp-alert-foreground-warning-medium, var(--skra-sys-color-warning-strong) );--skra-comp-alert-border-color: var( --skra-comp-alert-border-color-warning-medium, var(--skra-sys-color-warning-border) )}:host([data-skra-intent=danger][data-skra-emphasis=high]){--skra-comp-alert-background: var( --skra-comp-alert-background-danger-high, var(--skra-sys-color-danger-base) );--skra-comp-alert-foreground: var( --skra-comp-alert-foreground-danger-high, var(--skra-sys-color-danger-contrast) );--skra-comp-alert-border-color: var( --skra-comp-alert-border-color-danger-high, transparent )}:host([data-skra-intent=danger][data-skra-emphasis=medium]){--skra-comp-alert-background: var( --skra-comp-alert-background-danger-medium, var(--skra-sys-color-danger-soft) );--skra-comp-alert-foreground: var( --skra-comp-alert-foreground-danger-medium, var(--skra-sys-color-danger-strong) );--skra-comp-alert-border-color: var( --skra-comp-alert-border-color-danger-medium, var(--skra-sys-color-danger-border) )}.skra-alert-icon{display:inline-flex;flex-shrink:0;align-items:center;block-size:1lh;--skra-comp-icon-size: var(--skra-comp-alert-icon-size)}.skra-alert-content{flex:1 1 auto;min-inline-size:0;display:flex;flex-direction:column;gap:var(--skra-comp-alert-title-gap)}.skra-alert-title{font-family:var(--skra-sys-typography-role-label-large-font-family);font-size:var(--skra-sys-typography-role-label-large-font-size);font-weight:var(--skra-sys-typography-role-label-large-font-weight);line-height:var(--skra-sys-typography-role-label-large-line-height);letter-spacing:var(--skra-sys-typography-role-label-large-letter-spacing)}.skra-alert-dismiss{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;inline-size:var(--skra-comp-alert-dismiss-size);block-size:var(--skra-comp-alert-dismiss-size);margin:0;padding:0;border:0;background:transparent;color:inherit;cursor:pointer;border-radius:var(--skra-comp-alert-radius);transition:opacity var(--skra-comp-alert-motion-duration) var(--skra-comp-alert-motion-easing)}@media(hover:hover)and (pointer:fine){.skra-alert-dismiss:hover{opacity:.7}}.skra-alert-dismiss:focus-visible{outline-style:solid;outline-color:var(--skra-comp-alert-focus-ring-color);outline-width:var(--skra-comp-alert-focus-ring-width);outline-offset:2px}.skra-alert-dismiss-glyph{font-size:1.25em;line-height:1}@media(prefers-reduced-motion:reduce){.skra-alert-dismiss{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 }] }], live: [{ type: i0.Input, args: [{ isSignal: true, alias: "live", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }], iconSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SkraAlertIcon), { isSignal: true }] }], titleSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SkraAlertTitle), { isSignal: true }] }] } });
+                        '[attr.data-skra-has-actions]': 'hasActions() ? "" : null',
+                    }, template: "@if (hasIcon()) {\n<span class=\"skra-alert-icon\">\n  <ng-content select=\"[skra-alert-icon]\"></ng-content>\n</span>\n}\n\n<div class=\"skra-alert-content\">\n  @if (hasTitle()) {\n  <div class=\"skra-alert-title\">\n    <ng-content select=\"[skra-alert-title]\"></ng-content>\n  </div>\n  }\n  <div class=\"skra-alert-body\">\n    <ng-content></ng-content>\n  </div>\n  @if (hasActions()) {\n  <div class=\"skra-alert-actions\">\n    <ng-content select=\"[skra-alert-actions]\"></ng-content>\n  </div>\n  }\n</div>\n\n@if (dismissible()) {\n<button type=\"button\" class=\"skra-alert-dismiss\" (click)=\"onDismiss()\">\n  <span class=\"skra-alert-dismiss-glyph\" aria-hidden=\"true\">&times;</span>\n  <ng-content select=\"[skra-alert-close-label]\"></ng-content>\n</button>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:flex-start;box-sizing:border-box;margin:0;gap:var(--skra-comp-alert-icon-gap);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);background:var(--skra-comp-alert-background);color:var(--skra-comp-alert-foreground);border-color:var(--skra-comp-alert-border-color);border-width:var(--skra-comp-alert-border-width);border-style:var(--skra-comp-alert-border-style);border-radius:var(--skra-comp-alert-radius);padding-block:var(--skra-comp-alert-padding-block);padding-inline:var(--skra-comp-alert-padding-inline);box-shadow:var(--skra-comp-alert-shadow)}:host([data-skra-emphasis=high]){--skra-comp-alert-border-width: 0}:host([data-skra-intent=neutral][data-skra-emphasis=high]){--skra-comp-alert-background: var( --skra-comp-alert-background-neutral-high, var(--skra-sys-color-neutral-base) );--skra-comp-alert-foreground: var( --skra-comp-alert-foreground-neutral-high, var(--skra-sys-color-neutral-contrast) );--skra-comp-alert-border-color: var( --skra-comp-alert-border-color-neutral-high, transparent );--skra-comp-alert-focus-ring-color: var( --skra-comp-alert-focus-ring-color-neutral-high, var(--skra-sys-color-neutral-contrast) )}:host([data-skra-intent=neutral][data-skra-emphasis=medium]){--skra-comp-alert-background: var( --skra-comp-alert-background-neutral-medium, var(--skra-sys-color-neutral-soft) );--skra-comp-alert-foreground: var( --skra-comp-alert-foreground-neutral-medium, var(--skra-sys-color-neutral-strong) );--skra-comp-alert-border-color: var( --skra-comp-alert-border-color-neutral-medium, var(--skra-sys-color-neutral-border) );--skra-comp-alert-focus-ring-color: var( --skra-comp-alert-focus-ring-color-neutral-medium, var(--skra-sys-color-focus-ring) )}:host([data-skra-intent=info][data-skra-emphasis=high]){--skra-comp-alert-background: var( --skra-comp-alert-background-info-high, var(--skra-sys-color-info-base) );--skra-comp-alert-foreground: var( --skra-comp-alert-foreground-info-high, var(--skra-sys-color-info-contrast) );--skra-comp-alert-border-color: var( --skra-comp-alert-border-color-info-high, transparent );--skra-comp-alert-focus-ring-color: var( --skra-comp-alert-focus-ring-color-info-high, var(--skra-sys-color-info-contrast) )}:host([data-skra-intent=info][data-skra-emphasis=medium]){--skra-comp-alert-background: var( --skra-comp-alert-background-info-medium, var(--skra-sys-color-info-soft) );--skra-comp-alert-foreground: var( --skra-comp-alert-foreground-info-medium, var(--skra-sys-color-info-strong) );--skra-comp-alert-border-color: var( --skra-comp-alert-border-color-info-medium, var(--skra-sys-color-info-border) );--skra-comp-alert-focus-ring-color: var( --skra-comp-alert-focus-ring-color-info-medium, var(--skra-sys-color-focus-ring) )}:host([data-skra-intent=success][data-skra-emphasis=high]){--skra-comp-alert-background: var( --skra-comp-alert-background-success-high, var(--skra-sys-color-success-base) );--skra-comp-alert-foreground: var( --skra-comp-alert-foreground-success-high, var(--skra-sys-color-success-contrast) );--skra-comp-alert-border-color: var( --skra-comp-alert-border-color-success-high, transparent );--skra-comp-alert-focus-ring-color: var( --skra-comp-alert-focus-ring-color-success-high, var(--skra-sys-color-success-contrast) )}:host([data-skra-intent=success][data-skra-emphasis=medium]){--skra-comp-alert-background: var( --skra-comp-alert-background-success-medium, var(--skra-sys-color-success-soft) );--skra-comp-alert-foreground: var( --skra-comp-alert-foreground-success-medium, var(--skra-sys-color-success-strong) );--skra-comp-alert-border-color: var( --skra-comp-alert-border-color-success-medium, var(--skra-sys-color-success-border) );--skra-comp-alert-focus-ring-color: var( --skra-comp-alert-focus-ring-color-success-medium, var(--skra-sys-color-focus-ring) )}:host([data-skra-intent=warning][data-skra-emphasis=high]){--skra-comp-alert-background: var( --skra-comp-alert-background-warning-high, var(--skra-sys-color-warning-base) );--skra-comp-alert-foreground: var( --skra-comp-alert-foreground-warning-high, var(--skra-sys-color-warning-contrast) );--skra-comp-alert-border-color: var( --skra-comp-alert-border-color-warning-high, transparent );--skra-comp-alert-focus-ring-color: var( --skra-comp-alert-focus-ring-color-warning-high, var(--skra-sys-color-warning-contrast) )}:host([data-skra-intent=warning][data-skra-emphasis=medium]){--skra-comp-alert-background: var( --skra-comp-alert-background-warning-medium, var(--skra-sys-color-warning-soft) );--skra-comp-alert-foreground: var( --skra-comp-alert-foreground-warning-medium, var(--skra-sys-color-warning-strong) );--skra-comp-alert-border-color: var( --skra-comp-alert-border-color-warning-medium, var(--skra-sys-color-warning-border) );--skra-comp-alert-focus-ring-color: var( --skra-comp-alert-focus-ring-color-warning-medium, var(--skra-sys-color-focus-ring) )}:host([data-skra-intent=danger][data-skra-emphasis=high]){--skra-comp-alert-background: var( --skra-comp-alert-background-danger-high, var(--skra-sys-color-danger-base) );--skra-comp-alert-foreground: var( --skra-comp-alert-foreground-danger-high, var(--skra-sys-color-danger-contrast) );--skra-comp-alert-border-color: var( --skra-comp-alert-border-color-danger-high, transparent );--skra-comp-alert-focus-ring-color: var( --skra-comp-alert-focus-ring-color-danger-high, var(--skra-sys-color-danger-contrast) )}:host([data-skra-intent=danger][data-skra-emphasis=medium]){--skra-comp-alert-background: var( --skra-comp-alert-background-danger-medium, var(--skra-sys-color-danger-soft) );--skra-comp-alert-foreground: var( --skra-comp-alert-foreground-danger-medium, var(--skra-sys-color-danger-strong) );--skra-comp-alert-border-color: var( --skra-comp-alert-border-color-danger-medium, var(--skra-sys-color-danger-border) );--skra-comp-alert-focus-ring-color: var( --skra-comp-alert-focus-ring-color-danger-medium, var(--skra-sys-color-focus-ring) )}.skra-alert-icon{display:inline-flex;flex-shrink:0;align-items:center;block-size:1lh;--skra-comp-icon-size: var(--skra-comp-alert-icon-size)}.skra-alert-content{flex:1 1 auto;min-inline-size:0;display:flex;flex-direction:column;gap:var(--skra-comp-alert-title-gap)}.skra-alert-title{font-family:var(--skra-sys-typography-role-label-large-font-family);font-size:var(--skra-sys-typography-role-label-large-font-size);font-weight:var(--skra-sys-typography-role-label-large-font-weight);line-height:var(--skra-sys-typography-role-label-large-line-height);letter-spacing:var(--skra-sys-typography-role-label-large-letter-spacing)}.skra-alert-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--skra-comp-alert-actions-gap);padding-block-start:var(--skra-comp-alert-actions-gap);--skra-comp-button-focus-ring-color: var(--skra-comp-alert-focus-ring-color)}.skra-alert-dismiss{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;inline-size:var(--skra-comp-alert-dismiss-size);block-size:var(--skra-comp-alert-dismiss-size);margin:0;padding:0;border:0;background:transparent;color:inherit;cursor:pointer;border-radius:var(--skra-comp-alert-radius);transition:opacity var(--skra-comp-alert-motion-duration) var(--skra-comp-alert-motion-easing)}@media(hover:hover)and (pointer:fine){.skra-alert-dismiss:hover{opacity:.7}}.skra-alert-dismiss:focus-visible{outline-style:solid;outline-color:var(--skra-comp-alert-focus-ring-color);outline-width:var(--skra-comp-alert-focus-ring-width);outline-offset:2px}.skra-alert-dismiss-glyph{font-size:1.25em;line-height:1}@media(prefers-reduced-motion:reduce){.skra-alert-dismiss{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 }] }], live: [{ type: i0.Input, args: [{ isSignal: true, alias: "live", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }], iconSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SkraAlertIcon), { isSignal: true }] }], titleSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SkraAlertTitle), { isSignal: true }] }], actionSlots: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SkraAlertActions), { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { SkraAlert, SkraAlertIcon, SkraAlertTitle };
+export { SkraAlert, SkraAlertActions, SkraAlertIcon, SkraAlertTitle };
 //# sourceMappingURL=skra-ui-alert.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"skra-ui-alert.mjs","sources":["../../../../libs/ui/alert/src/lib/alert.directives.ts","../../../../libs/ui/alert/src/lib/alert/alert.ts","../../../../libs/ui/alert/src/lib/alert/alert.html","../../../../libs/ui/alert/src/skra-ui-alert.ts"],"sourcesContent":["import { Directive } from '@angular/core';\n\n/**\n * Marker directive for the leading icon slot of `<skra-alert>`.\n * Detected via `contentChild` (ADR 020 Smart Slots v2.0) to toggle the icon\n * wrapper without emitting an empty DOM node. Feedback-local (not the button\n * lib's `[skra-start]`) to avoid a cross-lib marker dependency.\n */\n@Directive({\n  selector: '[skra-alert-icon]',\n  standalone: true,\n})\nexport class SkraAlertIcon {}\n\n/**\n * Marker directive for the OPTIONAL title slot of `<skra-alert>` — a short, bold\n * heading rendered above the message. Detected via `contentChild` (ADR 020) to\n * toggle the title row. It is styled bold via a typography role but is NOT a\n * semantic heading (`<h*>`): an alert title is not part of the document outline,\n * and a heading would pollute screen-reader heading navigation (especially for a\n * dynamically-injected alert). The live region announces title + body atomically.\n */\n@Directive({\n  selector: '[skra-alert-title]',\n  standalone: true,\n})\nexport class SkraAlertTitle {}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  booleanAttribute,\n  computed,\n  contentChild,\n  input,\n  output,\n} from '@angular/core';\nimport { SkraAlertIcon, SkraAlertTitle } from '../alert.directives';\n\n/**\n * AlertIntent — semantic feedback meaning (ADR 035 §3.1, downward subset).\n * Excludes the action intents `primary`/`secondary` (meaningless for a status\n * message). Closed enum; extension requires an ADR 035 amendment.\n */\nexport type AlertIntent = 'neutral' | 'info' | 'success' | 'warning' | 'danger';\n\n/**\n * AlertEmphasis — visual loudness within the chosen intent (ADR 035 §3.1, subset).\n * `high` = filled banner, `medium` = soft/tinted. `low` deferred.\n */\nexport type AlertEmphasis = 'high' | 'medium';\n\n/**\n * AlertLive — screen-reader announcement politeness (ADR 0052). Maps to the\n * implicit-live ARIA role; politeness is a property of USE (static vs injected),\n * NOT of intent.\n */\nexport type AlertLive = 'off' | 'polite' | 'assertive';\n\n/**\n * `<skra-alert>` — in-content, page/section-level feedback message (Feedback/Status\n * family, ADR 0052). Serves BOTH a static notification (`live=\"off\"`, present at load)\n * and a dynamically-injected alert (`live=\"polite\"|\"assertive\"`, announced on insertion).\n *\n * SRP-distinct from `<skra-error>` (form-validation-bound, `SkraFieldContext`, error-only).\n *\n * Announcement (ADR 0052): the `live` input maps to the implicit-live ARIA role\n * (`status`/`alert`) — which carries `aria-live` + `aria-atomic` implicitly. NO explicit\n * `aria-live` is set (that would be redundant/contradictory; the `skra-error` pattern).\n *\n * Dismissal: `dismissible` renders a built-in close control that emits `(dismissed)`.\n * Forge does NOT remove itself from the DOM — the consumer owns removal via `@if`\n * (agnostic-atom doctrine). The close control's accessible name comes from a projected\n * `[skra-alert-close-label]` (sr-only; ADR 033 Path 2) — the \"×\" glyph is `aria-hidden`.\n */\n@Component({\n  selector: 'skra-alert',\n  standalone: true,\n  imports: [SkraAlertIcon, SkraAlertTitle],\n  templateUrl: './alert.html',\n  styleUrl: './alert.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\n    // Announcement role (ADR 0052) — implicit-live role ONLY; never an explicit aria-live.\n    '[attr.role]': 'liveRole()',\n\n    // Smart Slots layout reflection (ADR 020 v2.0 — slot-presence, State-Surface-exempt §3.6)\n    '[attr.data-skra-has-icon]': 'hasIcon() ? \"\" : null',\n    '[attr.data-skra-has-title]': 'hasTitle() ? \"\" : null',\n  },\n})\nexport class SkraAlert {\n  // --- Variant Surface (ADR 035) ---\n  readonly intent = input<AlertIntent>('neutral');\n  readonly emphasis = input<AlertEmphasis>('medium');\n\n  // --- Announcement (ADR 0052) ---\n  readonly live = input<AlertLive>('off');\n\n  // --- Dismissal ---\n  readonly dismissible = input(false, { transform: booleanAttribute });\n  readonly dismissed = output<void>();\n\n  // --- Smart Slots v2.0 (ADR 020) ---\n  readonly iconSlot = contentChild(SkraAlertIcon);\n  readonly hasIcon = computed(() => !!this.iconSlot());\n\n  readonly titleSlot = contentChild(SkraAlertTitle);\n  readonly hasTitle = computed(() => !!this.titleSlot());\n\n  /**\n   * Map `live` politeness to the implicit-live ARIA role (ADR 0052). The role\n   * carries `aria-live` + `aria-atomic` implicitly; `off` → no live region.\n   */\n  readonly liveRole = computed<'alert' | 'status' | null>(() => {\n    switch (this.live()) {\n      case 'assertive':\n        return 'alert';\n      case 'polite':\n        return 'status';\n      default:\n        return null;\n    }\n  });\n\n  protected onDismiss(): void {\n    this.dismissed.emit();\n  }\n}\n","@if (hasIcon()) {\r\n<span class=\"skra-alert-icon\">\r\n  <ng-content select=\"[skra-alert-icon]\"></ng-content>\r\n</span>\r\n}\r\n\r\n<div class=\"skra-alert-content\">\r\n  @if (hasTitle()) {\r\n  <div class=\"skra-alert-title\">\r\n    <ng-content select=\"[skra-alert-title]\"></ng-content>\r\n  </div>\r\n  }\r\n  <div class=\"skra-alert-body\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n\r\n@if (dismissible()) {\r\n<button type=\"button\" class=\"skra-alert-dismiss\" (click)=\"onDismiss()\">\r\n  <span class=\"skra-alert-dismiss-glyph\" aria-hidden=\"true\">&times;</span>\r\n  <ng-content select=\"[skra-alert-close-label]\"></ng-content>\r\n</button>\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-alert.mjs","sources":["../../../../libs/ui/alert/src/lib/alert.directives.ts","../../../../libs/ui/alert/src/lib/alert/alert.ts","../../../../libs/ui/alert/src/lib/alert/alert.html","../../../../libs/ui/alert/src/skra-ui-alert.ts"],"sourcesContent":["import { Directive } from '@angular/core';\n\n/**\n * Marker directive for the leading icon slot of `<skra-alert>`.\n * Detected via `contentChild` (ADR 020 Smart Slots v2.0) to toggle the icon\n * wrapper without emitting an empty DOM node. Feedback-local (not the button\n * lib's `[skra-start]`) to avoid a cross-lib marker dependency.\n */\n@Directive({\n  selector: '[skra-alert-icon]',\n  standalone: true,\n})\nexport class SkraAlertIcon {}\n\n/**\n * Marker directive for the OPTIONAL title slot of `<skra-alert>` — a short, bold\n * heading rendered above the message. Detected via `contentChild` (ADR 020) to\n * toggle the title row. It is styled bold via a typography role but is NOT a\n * semantic heading (`<h*>`): an alert title is not part of the document outline,\n * and a heading would pollute screen-reader heading navigation (especially for a\n * dynamically-injected alert). The live region announces title + body atomically.\n */\n@Directive({\n  selector: '[skra-alert-title]',\n  standalone: true,\n})\nexport class SkraAlertTitle {}\n\n/**\n * Marker directive for an ACTION of `<skra-alert>` — \"what to do next\" (\"Try again\").\n * Put it on each action; several are allowed and keep the consumer's order. Detected via\n * `contentChildren` (ADR 020) to render the actions region below the message only when one\n * exists. The region sits inside the content column, so it never collides with the dismiss\n * control.\n *\n * The action keeps its OWN meaning: the alert never sets or changes a projected button's\n * `intent` / `emphasis` (ADR 0059 R59.1) — a retry inside a danger alert is not a destructive\n * action. What the alert owns is the region's layout and the focus ring its actions draw on the\n * alert's fill (R59.3). Guaranteed legible on the alert's fill (ADR 0059 R59.2 — the gate\n * measures exactly these):\n *\n * | Alert emphasis      | Guaranteed actions                                              |\n * | ------------------- | --------------------------------------------------------------- |\n * | `medium` (default)  | `neutral` at any emphasis; any intent at `emphasis=\"high\"`      |\n * | `high`              | any intent at `emphasis=\"high\"` other than the alert's intent   |\n *\n * Anything else (a coloured `medium`/`low` action, a `medium`/`low` action on a `high` alert,\n * a `high` action in the alert's own intent) is unsupported. The zero-config\n * `<button skraButton skra-alert-actions>` (`neutral × high`) is guaranteed everywhere except\n * on a `neutral × high` alert. Admitted atom: `button[skraButton]`.\n *\n * Announcement: a live alert (`live=\"polite\"|\"assertive\"`) announces its whole text, action\n * labels included (the implicit `role` carries `aria-atomic`, ADR 0052) — the label tells the\n * user an action exists.\n */\n@Directive({\n  selector: '[skra-alert-actions]',\n  standalone: true,\n})\nexport class SkraAlertActions {}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  booleanAttribute,\n  computed,\n  contentChild,\n  contentChildren,\n  input,\n  output,\n} from '@angular/core';\nimport {\n  SkraAlertActions,\n  SkraAlertIcon,\n  SkraAlertTitle,\n} from '../alert.directives';\n\n/**\n * AlertIntent — semantic feedback meaning (ADR 035 §3.1, downward subset).\n * Excludes the action intents `primary`/`secondary` (meaningless for a status\n * message). Closed enum; extension requires an ADR 035 amendment.\n */\nexport type AlertIntent = 'neutral' | 'info' | 'success' | 'warning' | 'danger';\n\n/**\n * AlertEmphasis — visual loudness within the chosen intent (ADR 035 §3.1, subset).\n * `high` = filled banner, `medium` = soft/tinted. `low` deferred.\n */\nexport type AlertEmphasis = 'high' | 'medium';\n\n/**\n * AlertLive — screen-reader announcement politeness (ADR 0052). Maps to the\n * implicit-live ARIA role; politeness is a property of USE (static vs injected),\n * NOT of intent.\n */\nexport type AlertLive = 'off' | 'polite' | 'assertive';\n\n/**\n * `<skra-alert>` — in-content, page/section-level feedback message (Feedback/Status\n * family, ADR 0052). Serves BOTH a static notification (`live=\"off\"`, present at load)\n * and a dynamically-injected alert (`live=\"polite\"|\"assertive\"`, announced on insertion).\n *\n * SRP-distinct from `<skra-error>` (form-validation-bound, `SkraFieldContext`, error-only).\n *\n * Announcement (ADR 0052): the `live` input maps to the implicit-live ARIA role\n * (`status`/`alert`) — which carries `aria-live` + `aria-atomic` implicitly. NO explicit\n * `aria-live` is set (that would be redundant/contradictory; the `skra-error` pattern).\n *\n * Dismissal: `dismissible` renders a built-in close control that emits `(dismissed)`.\n * Forge does NOT remove itself from the DOM — the consumer owns removal via `@if`\n * (agnostic-atom doctrine). The close control's accessible name comes from a projected\n * `[skra-alert-close-label]` (sr-only; ADR 033 Path 2) — the \"×\" glyph is `aria-hidden`.\n *\n * Actions (GitHub #4, ADR 0059): mark each next-step button `[skra-alert-actions]`; they render\n * in a region below the message. The alert owns that region's layout and its focus ring, never\n * the actions' meaning — see `SkraAlertActions` for the guaranteed combinations.\n */\n@Component({\n  selector: 'skra-alert',\n  standalone: true,\n  imports: [SkraAlertIcon, SkraAlertTitle, SkraAlertActions],\n  templateUrl: './alert.html',\n  styleUrl: './alert.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\n    // Announcement role (ADR 0052) — implicit-live role ONLY; never an explicit aria-live.\n    '[attr.role]': 'liveRole()',\n\n    // Smart Slots layout reflection (ADR 020 v2.0 — slot-presence, State-Surface-exempt §3.6)\n    '[attr.data-skra-has-icon]': 'hasIcon() ? \"\" : null',\n    '[attr.data-skra-has-title]': 'hasTitle() ? \"\" : null',\n    '[attr.data-skra-has-actions]': 'hasActions() ? \"\" : null',\n  },\n})\nexport class SkraAlert {\n  // --- Variant Surface (ADR 035) ---\n  readonly intent = input<AlertIntent>('neutral');\n  readonly emphasis = input<AlertEmphasis>('medium');\n\n  // --- Announcement (ADR 0052) ---\n  readonly live = input<AlertLive>('off');\n\n  // --- Dismissal ---\n  readonly dismissible = input(false, { transform: booleanAttribute });\n  readonly dismissed = output<void>();\n\n  // --- Smart Slots v2.0 (ADR 020) ---\n  readonly iconSlot = contentChild(SkraAlertIcon);\n  readonly hasIcon = computed(() => !!this.iconSlot());\n\n  readonly titleSlot = contentChild(SkraAlertTitle);\n  readonly hasTitle = computed(() => !!this.titleSlot());\n\n  // Several actions are allowed (consumer order) — hence contentChildren, not contentChild.\n  // The alert never touches their intent/emphasis (ADR 0059 R59.1); see SkraAlertActions.\n  readonly actionSlots = contentChildren(SkraAlertActions);\n  readonly hasActions = computed(() => this.actionSlots().length > 0);\n\n  /**\n   * Map `live` politeness to the implicit-live ARIA role (ADR 0052). The role\n   * carries `aria-live` + `aria-atomic` implicitly; `off` → no live region.\n   */\n  readonly liveRole = computed<'alert' | 'status' | null>(() => {\n    switch (this.live()) {\n      case 'assertive':\n        return 'alert';\n      case 'polite':\n        return 'status';\n      default:\n        return null;\n    }\n  });\n\n  protected onDismiss(): void {\n    this.dismissed.emit();\n  }\n}\n","@if (hasIcon()) {\n<span class=\"skra-alert-icon\">\n  <ng-content select=\"[skra-alert-icon]\"></ng-content>\n</span>\n}\n\n<div class=\"skra-alert-content\">\n  @if (hasTitle()) {\n  <div class=\"skra-alert-title\">\n    <ng-content select=\"[skra-alert-title]\"></ng-content>\n  </div>\n  }\n  <div class=\"skra-alert-body\">\n    <ng-content></ng-content>\n  </div>\n  @if (hasActions()) {\n  <div class=\"skra-alert-actions\">\n    <ng-content select=\"[skra-alert-actions]\"></ng-content>\n  </div>\n  }\n</div>\n\n@if (dismissible()) {\n<button type=\"button\" class=\"skra-alert-dismiss\" (click)=\"onDismiss()\">\n  <span class=\"skra-alert-dismiss-glyph\" aria-hidden=\"true\">&times;</span>\n  <ng-content select=\"[skra-alert-close-label]\"></ng-content>\n</button>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/skra-ui-button.mjs

@@ -50,7 +50,7 @@ class SkraButton {
     hasLoadingIndicator = computed(() => !!this.loadingIndicatorSlot(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasLoadingIndicator" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SkraButton, isStandalone: true, selector: "button[skraButton]", inputs: { intent: { classPropertyName: "intent", publicName: "intent", isSignal: true, isRequired: false, transformFunction: null }, emphasis: { classPropertyName: "emphasis", publicName: "emphasis", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-skra-intent": "intent()", "attr.data-skra-emphasis": "emphasis()", "attr.data-skra-size": "size()", "attr.data-skra-loading": "loading() ? \"\" : null", "attr.aria-busy": "loading() ? \"true\" : null", "attr.data-skra-has-start": "hasStart() ? \"\" : null", "attr.data-skra-has-end": "hasEnd() ? \"\" : null" } }, queries: [{ propertyName: "startSlot", first: true, predicate: SkraButtonStart, descendants: true, isSignal: true }, { propertyName: "endSlot", first: true, predicate: SkraButtonEnd, descendants: true, isSignal: true }, { propertyName: "loadingIndicatorSlot", first: true, predicate: SkraLoadingIndicator, descendants: true, isSignal: true }], ngImport: i0, template: "@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", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;cursor:pointer;font-family:var(--skra-comp-button-font-family);font-size:var(--skra-comp-button-font-size);font-weight:var(--skra-comp-button-font-weight);line-height:var(--skra-comp-button-line-height);letter-spacing:var(--skra-comp-button-letter-spacing);min-block-size:var(--skra-comp-button-min-block-size);background:var(--skra-comp-button-background);color:var(--skra-comp-button-foreground);border-color:var(--skra-comp-button-border-color);border-width:var(--skra-comp-button-border-width);border-style:var(--skra-comp-button-border-style);border-radius:var(--skra-comp-button-radius);padding-block:var(--skra-comp-button-padding-block);padding-inline:var(--skra-comp-button-padding-inline);box-shadow:var(--skra-comp-button-shadow);transition:background var(--skra-comp-button-motion-duration) var(--skra-comp-button-motion-easing),color var(--skra-comp-button-motion-duration) var(--skra-comp-button-motion-easing),border-color var(--skra-comp-button-motion-duration) var(--skra-comp-button-motion-easing),box-shadow var(--skra-comp-button-motion-duration) var(--skra-comp-button-motion-easing)}:host[data-skra-has-start],:host[data-skra-has-end]{gap:var(--skra-comp-button-icon-gap)}:host:focus-visible{outline-style:solid;outline-color:var(--skra-comp-button-focus-ring-color);outline-width:var(--skra-comp-button-focus-ring-width);outline-offset:2px}@media(hover:hover)and (pointer:fine){:host:hover:not(:disabled){box-shadow:var(--skra-comp-button-shadow-hover)}}:host([data-skra-size=sm]){--skra-comp-button-padding-block: var( --skra-comp-button-size-sm-padding-block );--skra-comp-button-padding-inline: var( --skra-comp-button-size-sm-padding-inline );--skra-comp-button-min-block-size: var( --skra-comp-button-size-sm-min-block-size );--skra-comp-button-font-family: var( --skra-sys-typography-role-label-small-font-family );--skra-comp-button-font-size: var( --skra-sys-typography-role-label-small-font-size );--skra-comp-button-font-weight: var( --skra-sys-typography-role-label-small-font-weight );--skra-comp-button-line-height: var( --skra-sys-typography-role-label-small-line-height );--skra-comp-button-letter-spacing: var( --skra-sys-typography-role-label-small-letter-spacing )}:host([data-skra-size=md]){--skra-comp-button-padding-block: var( --skra-comp-button-size-md-padding-block );--skra-comp-button-padding-inline: var( --skra-comp-button-size-md-padding-inline );--skra-comp-button-min-block-size: var( --skra-comp-button-size-md-min-block-size );--skra-comp-button-font-family: var( --skra-sys-typography-role-label-medium-font-family );--skra-comp-button-font-size: var( --skra-sys-typography-role-label-medium-font-size );--skra-comp-button-font-weight: var( --skra-sys-typography-role-label-medium-font-weight );--skra-comp-button-line-height: var( --skra-sys-typography-role-label-medium-line-height );--skra-comp-button-letter-spacing: var( --skra-sys-typography-role-label-medium-letter-spacing )}:host([data-skra-size=lg]){--skra-comp-button-padding-block: var( --skra-comp-button-size-lg-padding-block );--skra-comp-button-padding-inline: var( --skra-comp-button-size-lg-padding-inline );--skra-comp-button-min-block-size: var( --skra-comp-button-size-lg-min-block-size );--skra-comp-button-font-family: var( --skra-sys-typography-role-label-large-font-family );--skra-comp-button-font-size: var( --skra-sys-typography-role-label-large-font-size );--skra-comp-button-font-weight: var( --skra-sys-typography-role-label-large-font-weight );--skra-comp-button-line-height: var( --skra-sys-typography-role-label-large-line-height );--skra-comp-button-letter-spacing: var( --skra-sys-typography-role-label-large-letter-spacing )}:host([data-skra-emphasis=high]){--skra-comp-button-border-width: 0}:host([data-skra-emphasis=medium]){--skra-comp-button-border-width: .0625rem}:host([data-skra-emphasis=low]){--skra-comp-button-border-width: 0}:host([data-skra-intent=neutral][data-skra-emphasis=high]){--skra-comp-button-background: var( --skra-comp-button-background-neutral-high, var(--skra-sys-color-neutral-base) );--skra-comp-button-foreground: var( --skra-comp-button-foreground-neutral-high, var(--skra-sys-color-neutral-contrast) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-neutral-high, transparent )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=neutral][data-skra-emphasis=high]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-neutral-base-hover)}}:host([data-skra-intent=neutral][data-skra-emphasis=high]):active:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-neutral-base-active)}:host([data-skra-intent=neutral][data-skra-emphasis=medium]){--skra-comp-button-background: var( --skra-comp-button-background-neutral-medium, transparent );--skra-comp-button-foreground: var( --skra-comp-button-foreground-neutral-medium, var(--skra-sys-color-neutral-strong) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-neutral-medium, var(--skra-sys-color-neutral-strong) )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=neutral][data-skra-emphasis=medium]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-neutral-soft)}}:host([data-skra-intent=neutral][data-skra-emphasis=low]){--skra-comp-button-background: var( --skra-comp-button-background-neutral-low, transparent );--skra-comp-button-foreground: var( --skra-comp-button-foreground-neutral-low, var(--skra-sys-color-neutral-strong) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-neutral-low, transparent )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=neutral][data-skra-emphasis=low]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-neutral-soft)}}:host([data-skra-intent=primary][data-skra-emphasis=high]){--skra-comp-button-background: var( --skra-comp-button-background-primary-high, var(--skra-sys-color-primary-base) );--skra-comp-button-foreground: var( --skra-comp-button-foreground-primary-high, var(--skra-sys-color-primary-contrast) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-primary-high, transparent )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=primary][data-skra-emphasis=high]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-primary-base-hover)}}:host([data-skra-intent=primary][data-skra-emphasis=high]):active:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-primary-base-active)}:host([data-skra-intent=primary][data-skra-emphasis=medium]){--skra-comp-button-background: var( --skra-comp-button-background-primary-medium, transparent );--skra-comp-button-foreground: var( --skra-comp-button-foreground-primary-medium, var(--skra-sys-color-primary-strong) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-primary-medium, var(--skra-sys-color-primary-strong) )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=primary][data-skra-emphasis=medium]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-primary-soft)}}:host([data-skra-intent=primary][data-skra-emphasis=low]){--skra-comp-button-background: var( --skra-comp-button-background-primary-low, transparent );--skra-comp-button-foreground: var( --skra-comp-button-foreground-primary-low, var(--skra-sys-color-primary-strong) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-primary-low, transparent )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=primary][data-skra-emphasis=low]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-primary-soft)}}:host([data-skra-intent=secondary][data-skra-emphasis=high]){--skra-comp-button-background: var( --skra-comp-button-background-secondary-high, var(--skra-sys-color-secondary-base) );--skra-comp-button-foreground: var( --skra-comp-button-foreground-secondary-high, var(--skra-sys-color-secondary-contrast) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-secondary-high, transparent )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=secondary][data-skra-emphasis=high]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-secondary-base-hover)}}:host([data-skra-intent=secondary][data-skra-emphasis=high]):active:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-secondary-base-active)}:host([data-skra-intent=secondary][data-skra-emphasis=medium]){--skra-comp-button-background: var( --skra-comp-button-background-secondary-medium, transparent );--skra-comp-button-foreground: var( --skra-comp-button-foreground-secondary-medium, var(--skra-sys-color-secondary-strong) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-secondary-medium, var(--skra-sys-color-secondary-strong) )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=secondary][data-skra-emphasis=medium]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-secondary-soft)}}:host([data-skra-intent=secondary][data-skra-emphasis=low]){--skra-comp-button-background: var( --skra-comp-button-background-secondary-low, transparent );--skra-comp-button-foreground: var( --skra-comp-button-foreground-secondary-low, var(--skra-sys-color-secondary-strong) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-secondary-low, transparent )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=secondary][data-skra-emphasis=low]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-secondary-soft)}}:host([data-skra-intent=info][data-skra-emphasis=high]){--skra-comp-button-background: var( --skra-comp-button-background-info-high, var(--skra-sys-color-info-base) );--skra-comp-button-foreground: var( --skra-comp-button-foreground-info-high, var(--skra-sys-color-info-contrast) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-info-high, transparent )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=info][data-skra-emphasis=high]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-info-base-hover)}}:host([data-skra-intent=info][data-skra-emphasis=high]):active:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-info-base-active)}:host([data-skra-intent=info][data-skra-emphasis=medium]){--skra-comp-button-background: var( --skra-comp-button-background-info-medium, transparent );--skra-comp-button-foreground: var( --skra-comp-button-foreground-info-medium, var(--skra-sys-color-info-strong) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-info-medium, var(--skra-sys-color-info-strong) )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=info][data-skra-emphasis=medium]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-info-soft)}}:host([data-skra-intent=info][data-skra-emphasis=low]){--skra-comp-button-background: var( --skra-comp-button-background-info-low, transparent );--skra-comp-button-foreground: var( --skra-comp-button-foreground-info-low, var(--skra-sys-color-info-strong) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-info-low, transparent )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=info][data-skra-emphasis=low]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-info-soft)}}:host([data-skra-intent=success][data-skra-emphasis=high]){--skra-comp-button-background: var( --skra-comp-button-background-success-high, var(--skra-sys-color-success-base) );--skra-comp-button-foreground: var( --skra-comp-button-foreground-success-high, var(--skra-sys-color-success-contrast) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-success-high, transparent )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=success][data-skra-emphasis=high]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-success-base-hover)}}:host([data-skra-intent=success][data-skra-emphasis=high]):active:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-success-base-active)}:host([data-skra-intent=success][data-skra-emphasis=medium]){--skra-comp-button-background: var( --skra-comp-button-background-success-medium, transparent );--skra-comp-button-foreground: var( --skra-comp-button-foreground-success-medium, var(--skra-sys-color-success-strong) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-success-medium, var(--skra-sys-color-success-strong) )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=success][data-skra-emphasis=medium]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-success-soft)}}:host([data-skra-intent=success][data-skra-emphasis=low]){--skra-comp-button-background: var( --skra-comp-button-background-success-low, transparent );--skra-comp-button-foreground: var( --skra-comp-button-foreground-success-low, var(--skra-sys-color-success-strong) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-success-low, transparent )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=success][data-skra-emphasis=low]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-success-soft)}}:host([data-skra-intent=warning][data-skra-emphasis=high]){--skra-comp-button-background: var( --skra-comp-button-background-warning-high, var(--skra-sys-color-warning-base) );--skra-comp-button-foreground: var( --skra-comp-button-foreground-warning-high, var(--skra-sys-color-warning-contrast) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-warning-high, transparent )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=warning][data-skra-emphasis=high]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-warning-base-hover)}}:host([data-skra-intent=warning][data-skra-emphasis=high]):active:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-warning-base-active)}:host([data-skra-intent=warning][data-skra-emphasis=medium]){--skra-comp-button-background: var( --skra-comp-button-background-warning-medium, transparent );--skra-comp-button-foreground: var( --skra-comp-button-foreground-warning-medium, var(--skra-sys-color-warning-strong) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-warning-medium, var(--skra-sys-color-warning-strong) )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=warning][data-skra-emphasis=medium]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-warning-soft)}}:host([data-skra-intent=warning][data-skra-emphasis=low]){--skra-comp-button-background: var( --skra-comp-button-background-warning-low, transparent );--skra-comp-button-foreground: var( --skra-comp-button-foreground-warning-low, var(--skra-sys-color-warning-strong) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-warning-low, transparent )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=warning][data-skra-emphasis=low]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-warning-soft)}}:host([data-skra-intent=danger][data-skra-emphasis=high]){--skra-comp-button-background: var( --skra-comp-button-background-danger-high, var(--skra-sys-color-danger-base) );--skra-comp-button-foreground: var( --skra-comp-button-foreground-danger-high, var(--skra-sys-color-danger-contrast) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-danger-high, transparent )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=danger][data-skra-emphasis=high]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-danger-base-hover)}}:host([data-skra-intent=danger][data-skra-emphasis=high]):active:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-danger-base-active)}:host([data-skra-intent=danger][data-skra-emphasis=medium]){--skra-comp-button-background: var( --skra-comp-button-background-danger-medium, transparent );--skra-comp-button-foreground: var( --skra-comp-button-foreground-danger-medium, var(--skra-sys-color-danger-strong) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-danger-medium, var(--skra-sys-color-danger-strong) )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=danger][data-skra-emphasis=medium]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-danger-soft)}}:host([data-skra-intent=danger][data-skra-emphasis=low]){--skra-comp-button-background: var( --skra-comp-button-background-danger-low, transparent );--skra-comp-button-foreground: var( --skra-comp-button-foreground-danger-low, var(--skra-sys-color-danger-strong) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-danger-low, transparent )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=danger][data-skra-emphasis=low]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-danger-soft)}}:host:disabled{background:var(--skra-comp-button-background-disabled);color:var(--skra-comp-button-foreground-disabled);border-color:var(--skra-comp-button-border-color-disabled);cursor:not-allowed;box-shadow:none}.skra-button-slot-wrapper{display:inline-flex;align-items:center;flex-shrink:0;align-self:center;--skra-comp-icon-size: var(--skra-comp-button-icon-size)}.skra-button-label-wrapper{display:inline-block}.skra-button-loading-indicator{display:inline-flex;align-items:center}:host([data-skra-loading]){pointer-events:none;position:relative}:host([data-skra-loading]) .skra-button-label-wrapper,:host([data-skra-loading]) .skra-button-slot-wrapper{opacity:0}:host([data-skra-loading]) .skra-button-loading-indicator{position:absolute;inset:0;justify-content:center}[data-skra-loading-indicator-fallback]{display:inline-block;inline-size:var(--skra-comp-button-loading-indicator-size);block-size:var(--skra-comp-button-loading-indicator-size);border:.125em solid var(--skra-comp-button-loading-indicator-color);border-block-start-color:transparent;border-radius:50%;animation:skra-button-spin .8s linear infinite}@keyframes skra-button-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){[data-skra-loading-indicator-fallback]{animation:none;opacity:.6}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SkraButton, isStandalone: true, selector: "button[skraButton]", inputs: { intent: { classPropertyName: "intent", publicName: "intent", isSignal: true, isRequired: false, transformFunction: null }, emphasis: { classPropertyName: "emphasis", publicName: "emphasis", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-skra-intent": "intent()", "attr.data-skra-emphasis": "emphasis()", "attr.data-skra-size": "size()", "attr.data-skra-loading": "loading() ? \"\" : null", "attr.aria-busy": "loading() ? \"true\" : null", "attr.data-skra-has-start": "hasStart() ? \"\" : null", "attr.data-skra-has-end": "hasEnd() ? \"\" : null" } }, queries: [{ propertyName: "startSlot", first: true, predicate: SkraButtonStart, descendants: true, isSignal: true }, { propertyName: "endSlot", first: true, predicate: SkraButtonEnd, descendants: true, isSignal: true }, { propertyName: "loadingIndicatorSlot", first: true, predicate: SkraLoadingIndicator, descendants: true, isSignal: true }], ngImport: i0, template: "@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", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;cursor:pointer;font-family:var(--skra-comp-button-font-family);font-size:var(--skra-comp-button-font-size);font-weight:var(--skra-comp-button-font-weight);line-height:var(--skra-comp-button-line-height);letter-spacing:var(--skra-comp-button-letter-spacing);min-block-size:var(--skra-comp-button-min-block-size);background:var(--skra-comp-button-background);color:var(--skra-comp-button-foreground);border-color:var(--skra-comp-button-border-color);border-width:var(--skra-comp-button-border-width);border-style:var(--skra-comp-button-border-style);border-radius:var(--skra-comp-button-radius);padding-block:var(--skra-comp-button-padding-block);padding-inline:var(--skra-comp-button-padding-inline);box-shadow:var(--skra-comp-button-shadow);transition:background var(--skra-comp-button-motion-duration) var(--skra-comp-button-motion-easing),color var(--skra-comp-button-motion-duration) var(--skra-comp-button-motion-easing),border-color var(--skra-comp-button-motion-duration) var(--skra-comp-button-motion-easing),box-shadow var(--skra-comp-button-motion-duration) var(--skra-comp-button-motion-easing)}:host[data-skra-has-start],:host[data-skra-has-end]{gap:var(--skra-comp-button-icon-gap)}:host:focus-visible{outline-style:solid;outline-color:var(--skra-comp-button-focus-ring-color);outline-width:var(--skra-comp-button-focus-ring-width);outline-offset:2px}@media(hover:hover)and (pointer:fine){:host:hover:not(:disabled){box-shadow:var(--skra-comp-button-shadow-hover)}}:host([data-skra-size=sm]){--skra-comp-button-padding-block: var( --skra-comp-button-size-sm-padding-block );--skra-comp-button-padding-inline: var( --skra-comp-button-size-sm-padding-inline );--skra-comp-button-min-block-size: var( --skra-comp-button-size-sm-min-block-size );--skra-comp-button-font-family: var( --skra-sys-typography-role-label-small-font-family );--skra-comp-button-font-size: var( --skra-sys-typography-role-label-small-font-size );--skra-comp-button-font-weight: var( --skra-sys-typography-role-label-small-font-weight );--skra-comp-button-line-height: var( --skra-sys-typography-role-label-small-line-height );--skra-comp-button-letter-spacing: var( --skra-sys-typography-role-label-small-letter-spacing )}:host([data-skra-size=md]){--skra-comp-button-padding-block: var( --skra-comp-button-size-md-padding-block );--skra-comp-button-padding-inline: var( --skra-comp-button-size-md-padding-inline );--skra-comp-button-min-block-size: var( --skra-comp-button-size-md-min-block-size );--skra-comp-button-font-family: var( --skra-sys-typography-role-label-medium-font-family );--skra-comp-button-font-size: var( --skra-sys-typography-role-label-medium-font-size );--skra-comp-button-font-weight: var( --skra-sys-typography-role-label-medium-font-weight );--skra-comp-button-line-height: var( --skra-sys-typography-role-label-medium-line-height );--skra-comp-button-letter-spacing: var( --skra-sys-typography-role-label-medium-letter-spacing )}:host([data-skra-size=lg]){--skra-comp-button-padding-block: var( --skra-comp-button-size-lg-padding-block );--skra-comp-button-padding-inline: var( --skra-comp-button-size-lg-padding-inline );--skra-comp-button-min-block-size: var( --skra-comp-button-size-lg-min-block-size );--skra-comp-button-font-family: var( --skra-sys-typography-role-label-large-font-family );--skra-comp-button-font-size: var( --skra-sys-typography-role-label-large-font-size );--skra-comp-button-font-weight: var( --skra-sys-typography-role-label-large-font-weight );--skra-comp-button-line-height: var( --skra-sys-typography-role-label-large-line-height );--skra-comp-button-letter-spacing: var( --skra-sys-typography-role-label-large-letter-spacing )}:host([data-skra-emphasis=high]){--skra-comp-button-border-width: 0}:host([data-skra-emphasis=medium]){--skra-comp-button-border-width: .0625rem}:host([data-skra-emphasis=low]){--skra-comp-button-border-width: 0}:host([data-skra-intent=neutral][data-skra-emphasis=high]){--skra-comp-button-background: var( --skra-comp-button-background-neutral-high, var(--skra-sys-color-neutral-base) );--skra-comp-button-foreground: var( --skra-comp-button-foreground-neutral-high, var(--skra-sys-color-neutral-contrast) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-neutral-high, transparent );--skra-comp-button-loading-indicator-color: var( --skra-comp-button-loading-indicator-color-neutral-high, var(--skra-sys-color-neutral-contrast) )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=neutral][data-skra-emphasis=high]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-neutral-base-hover)}}:host([data-skra-intent=neutral][data-skra-emphasis=high]):active:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-neutral-base-active)}:host([data-skra-intent=neutral][data-skra-emphasis=medium]){--skra-comp-button-background: var( --skra-comp-button-background-neutral-medium, transparent );--skra-comp-button-foreground: var( --skra-comp-button-foreground-neutral-medium, var(--skra-sys-color-neutral-strong) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-neutral-medium, var(--skra-sys-color-neutral-strong) );--skra-comp-button-loading-indicator-color: var( --skra-comp-button-loading-indicator-color-neutral-medium, var(--skra-sys-color-neutral-strong) )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=neutral][data-skra-emphasis=medium]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-neutral-soft)}}:host([data-skra-intent=neutral][data-skra-emphasis=low]){--skra-comp-button-background: var( --skra-comp-button-background-neutral-low, transparent );--skra-comp-button-foreground: var( --skra-comp-button-foreground-neutral-low, var(--skra-sys-color-neutral-strong) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-neutral-low, transparent );--skra-comp-button-loading-indicator-color: var( --skra-comp-button-loading-indicator-color-neutral-low, var(--skra-sys-color-neutral-strong) )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=neutral][data-skra-emphasis=low]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-neutral-soft)}}:host([data-skra-intent=primary][data-skra-emphasis=high]){--skra-comp-button-background: var( --skra-comp-button-background-primary-high, var(--skra-sys-color-primary-base) );--skra-comp-button-foreground: var( --skra-comp-button-foreground-primary-high, var(--skra-sys-color-primary-contrast) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-primary-high, transparent );--skra-comp-button-loading-indicator-color: var( --skra-comp-button-loading-indicator-color-primary-high, var(--skra-sys-color-primary-contrast) )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=primary][data-skra-emphasis=high]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-primary-base-hover)}}:host([data-skra-intent=primary][data-skra-emphasis=high]):active:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-primary-base-active)}:host([data-skra-intent=primary][data-skra-emphasis=medium]){--skra-comp-button-background: var( --skra-comp-button-background-primary-medium, transparent );--skra-comp-button-foreground: var( --skra-comp-button-foreground-primary-medium, var(--skra-sys-color-primary-strong) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-primary-medium, var(--skra-sys-color-primary-strong) );--skra-comp-button-loading-indicator-color: var( --skra-comp-button-loading-indicator-color-primary-medium, var(--skra-sys-color-primary-strong) )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=primary][data-skra-emphasis=medium]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-primary-soft)}}:host([data-skra-intent=primary][data-skra-emphasis=low]){--skra-comp-button-background: var( --skra-comp-button-background-primary-low, transparent );--skra-comp-button-foreground: var( --skra-comp-button-foreground-primary-low, var(--skra-sys-color-primary-strong) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-primary-low, transparent );--skra-comp-button-loading-indicator-color: var( --skra-comp-button-loading-indicator-color-primary-low, var(--skra-sys-color-primary-strong) )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=primary][data-skra-emphasis=low]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-primary-soft)}}:host([data-skra-intent=secondary][data-skra-emphasis=high]){--skra-comp-button-background: var( --skra-comp-button-background-secondary-high, var(--skra-sys-color-secondary-base) );--skra-comp-button-foreground: var( --skra-comp-button-foreground-secondary-high, var(--skra-sys-color-secondary-contrast) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-secondary-high, transparent );--skra-comp-button-loading-indicator-color: var( --skra-comp-button-loading-indicator-color-secondary-high, var(--skra-sys-color-secondary-contrast) )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=secondary][data-skra-emphasis=high]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-secondary-base-hover)}}:host([data-skra-intent=secondary][data-skra-emphasis=high]):active:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-secondary-base-active)}:host([data-skra-intent=secondary][data-skra-emphasis=medium]){--skra-comp-button-background: var( --skra-comp-button-background-secondary-medium, transparent );--skra-comp-button-foreground: var( --skra-comp-button-foreground-secondary-medium, var(--skra-sys-color-secondary-strong) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-secondary-medium, var(--skra-sys-color-secondary-strong) );--skra-comp-button-loading-indicator-color: var( --skra-comp-button-loading-indicator-color-secondary-medium, var(--skra-sys-color-secondary-strong) )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=secondary][data-skra-emphasis=medium]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-secondary-soft)}}:host([data-skra-intent=secondary][data-skra-emphasis=low]){--skra-comp-button-background: var( --skra-comp-button-background-secondary-low, transparent );--skra-comp-button-foreground: var( --skra-comp-button-foreground-secondary-low, var(--skra-sys-color-secondary-strong) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-secondary-low, transparent );--skra-comp-button-loading-indicator-color: var( --skra-comp-button-loading-indicator-color-secondary-low, var(--skra-sys-color-secondary-strong) )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=secondary][data-skra-emphasis=low]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-secondary-soft)}}:host([data-skra-intent=info][data-skra-emphasis=high]){--skra-comp-button-background: var( --skra-comp-button-background-info-high, var(--skra-sys-color-info-base) );--skra-comp-button-foreground: var( --skra-comp-button-foreground-info-high, var(--skra-sys-color-info-contrast) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-info-high, transparent );--skra-comp-button-loading-indicator-color: var( --skra-comp-button-loading-indicator-color-info-high, var(--skra-sys-color-info-contrast) )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=info][data-skra-emphasis=high]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-info-base-hover)}}:host([data-skra-intent=info][data-skra-emphasis=high]):active:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-info-base-active)}:host([data-skra-intent=info][data-skra-emphasis=medium]){--skra-comp-button-background: var( --skra-comp-button-background-info-medium, transparent );--skra-comp-button-foreground: var( --skra-comp-button-foreground-info-medium, var(--skra-sys-color-info-strong) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-info-medium, var(--skra-sys-color-info-strong) );--skra-comp-button-loading-indicator-color: var( --skra-comp-button-loading-indicator-color-info-medium, var(--skra-sys-color-info-strong) )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=info][data-skra-emphasis=medium]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-info-soft)}}:host([data-skra-intent=info][data-skra-emphasis=low]){--skra-comp-button-background: var( --skra-comp-button-background-info-low, transparent );--skra-comp-button-foreground: var( --skra-comp-button-foreground-info-low, var(--skra-sys-color-info-strong) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-info-low, transparent );--skra-comp-button-loading-indicator-color: var( --skra-comp-button-loading-indicator-color-info-low, var(--skra-sys-color-info-strong) )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=info][data-skra-emphasis=low]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-info-soft)}}:host([data-skra-intent=success][data-skra-emphasis=high]){--skra-comp-button-background: var( --skra-comp-button-background-success-high, var(--skra-sys-color-success-base) );--skra-comp-button-foreground: var( --skra-comp-button-foreground-success-high, var(--skra-sys-color-success-contrast) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-success-high, transparent );--skra-comp-button-loading-indicator-color: var( --skra-comp-button-loading-indicator-color-success-high, var(--skra-sys-color-success-contrast) )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=success][data-skra-emphasis=high]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-success-base-hover)}}:host([data-skra-intent=success][data-skra-emphasis=high]):active:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-success-base-active)}:host([data-skra-intent=success][data-skra-emphasis=medium]){--skra-comp-button-background: var( --skra-comp-button-background-success-medium, transparent );--skra-comp-button-foreground: var( --skra-comp-button-foreground-success-medium, var(--skra-sys-color-success-strong) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-success-medium, var(--skra-sys-color-success-strong) );--skra-comp-button-loading-indicator-color: var( --skra-comp-button-loading-indicator-color-success-medium, var(--skra-sys-color-success-strong) )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=success][data-skra-emphasis=medium]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-success-soft)}}:host([data-skra-intent=success][data-skra-emphasis=low]){--skra-comp-button-background: var( --skra-comp-button-background-success-low, transparent );--skra-comp-button-foreground: var( --skra-comp-button-foreground-success-low, var(--skra-sys-color-success-strong) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-success-low, transparent );--skra-comp-button-loading-indicator-color: var( --skra-comp-button-loading-indicator-color-success-low, var(--skra-sys-color-success-strong) )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=success][data-skra-emphasis=low]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-success-soft)}}:host([data-skra-intent=warning][data-skra-emphasis=high]){--skra-comp-button-background: var( --skra-comp-button-background-warning-high, var(--skra-sys-color-warning-base) );--skra-comp-button-foreground: var( --skra-comp-button-foreground-warning-high, var(--skra-sys-color-warning-contrast) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-warning-high, transparent );--skra-comp-button-loading-indicator-color: var( --skra-comp-button-loading-indicator-color-warning-high, var(--skra-sys-color-warning-contrast) )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=warning][data-skra-emphasis=high]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-warning-base-hover)}}:host([data-skra-intent=warning][data-skra-emphasis=high]):active:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-warning-base-active)}:host([data-skra-intent=warning][data-skra-emphasis=medium]){--skra-comp-button-background: var( --skra-comp-button-background-warning-medium, transparent );--skra-comp-button-foreground: var( --skra-comp-button-foreground-warning-medium, var(--skra-sys-color-warning-strong) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-warning-medium, var(--skra-sys-color-warning-strong) );--skra-comp-button-loading-indicator-color: var( --skra-comp-button-loading-indicator-color-warning-medium, var(--skra-sys-color-warning-strong) )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=warning][data-skra-emphasis=medium]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-warning-soft)}}:host([data-skra-intent=warning][data-skra-emphasis=low]){--skra-comp-button-background: var( --skra-comp-button-background-warning-low, transparent );--skra-comp-button-foreground: var( --skra-comp-button-foreground-warning-low, var(--skra-sys-color-warning-strong) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-warning-low, transparent );--skra-comp-button-loading-indicator-color: var( --skra-comp-button-loading-indicator-color-warning-low, var(--skra-sys-color-warning-strong) )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=warning][data-skra-emphasis=low]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-warning-soft)}}:host([data-skra-intent=danger][data-skra-emphasis=high]){--skra-comp-button-background: var( --skra-comp-button-background-danger-high, var(--skra-sys-color-danger-base) );--skra-comp-button-foreground: var( --skra-comp-button-foreground-danger-high, var(--skra-sys-color-danger-contrast) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-danger-high, transparent );--skra-comp-button-loading-indicator-color: var( --skra-comp-button-loading-indicator-color-danger-high, var(--skra-sys-color-danger-contrast) )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=danger][data-skra-emphasis=high]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-danger-base-hover)}}:host([data-skra-intent=danger][data-skra-emphasis=high]):active:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-danger-base-active)}:host([data-skra-intent=danger][data-skra-emphasis=medium]){--skra-comp-button-background: var( --skra-comp-button-background-danger-medium, transparent );--skra-comp-button-foreground: var( --skra-comp-button-foreground-danger-medium, var(--skra-sys-color-danger-strong) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-danger-medium, var(--skra-sys-color-danger-strong) );--skra-comp-button-loading-indicator-color: var( --skra-comp-button-loading-indicator-color-danger-medium, var(--skra-sys-color-danger-strong) )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=danger][data-skra-emphasis=medium]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-danger-soft)}}:host([data-skra-intent=danger][data-skra-emphasis=low]){--skra-comp-button-background: var( --skra-comp-button-background-danger-low, transparent );--skra-comp-button-foreground: var( --skra-comp-button-foreground-danger-low, var(--skra-sys-color-danger-strong) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-danger-low, transparent );--skra-comp-button-loading-indicator-color: var( --skra-comp-button-loading-indicator-color-danger-low, var(--skra-sys-color-danger-strong) )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=danger][data-skra-emphasis=low]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-danger-soft)}}:host:disabled{background:var(--skra-comp-button-background-disabled);color:var(--skra-comp-button-foreground-disabled);border-color:var(--skra-comp-button-border-color-disabled);cursor:not-allowed;box-shadow:none}.skra-button-slot-wrapper{display:inline-flex;align-items:center;flex-shrink:0;align-self:center;--skra-comp-icon-size: var(--skra-comp-button-icon-size)}.skra-button-label-wrapper{display:inline-block}.skra-button-loading-indicator{display:inline-flex;align-items:center}:host([data-skra-loading]){pointer-events:none;position:relative}:host([data-skra-loading]) .skra-button-label-wrapper,:host([data-skra-loading]) .skra-button-slot-wrapper{opacity:0}:host([data-skra-loading]) .skra-button-loading-indicator{position:absolute;inset:0;justify-content:center}[data-skra-loading-indicator-fallback]{display:inline-block;inline-size:var(--skra-comp-button-loading-indicator-size);block-size:var(--skra-comp-button-loading-indicator-size);border:.125em solid var(--skra-comp-button-loading-indicator-color);border-block-start-color:transparent;border-radius:50%;animation:skra-button-spin .8s linear infinite}@keyframes skra-button-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){[data-skra-loading-indicator-fallback]{animation:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraButton, decorators: [{
             type: Component,
@@ -65,7 +65,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         // Smart Slots layout reflection (ADR 020 v2.0 §3.2 — slot-presence, exempt from State Surface per ADR 027 §3.6)
                         '[attr.data-skra-has-start]': 'hasStart() ? "" : null',
                         '[attr.data-skra-has-end]': 'hasEnd() ? "" : null',
-                    }, template: "@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", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;cursor:pointer;font-family:var(--skra-comp-button-font-family);font-size:var(--skra-comp-button-font-size);font-weight:var(--skra-comp-button-font-weight);line-height:var(--skra-comp-button-line-height);letter-spacing:var(--skra-comp-button-letter-spacing);min-block-size:var(--skra-comp-button-min-block-size);background:var(--skra-comp-button-background);color:var(--skra-comp-button-foreground);border-color:var(--skra-comp-button-border-color);border-width:var(--skra-comp-button-border-width);border-style:var(--skra-comp-button-border-style);border-radius:var(--skra-comp-button-radius);padding-block:var(--skra-comp-button-padding-block);padding-inline:var(--skra-comp-button-padding-inline);box-shadow:var(--skra-comp-button-shadow);transition:background var(--skra-comp-button-motion-duration) var(--skra-comp-button-motion-easing),color var(--skra-comp-button-motion-duration) var(--skra-comp-button-motion-easing),border-color var(--skra-comp-button-motion-duration) var(--skra-comp-button-motion-easing),box-shadow var(--skra-comp-button-motion-duration) var(--skra-comp-button-motion-easing)}:host[data-skra-has-start],:host[data-skra-has-end]{gap:var(--skra-comp-button-icon-gap)}:host:focus-visible{outline-style:solid;outline-color:var(--skra-comp-button-focus-ring-color);outline-width:var(--skra-comp-button-focus-ring-width);outline-offset:2px}@media(hover:hover)and (pointer:fine){:host:hover:not(:disabled){box-shadow:var(--skra-comp-button-shadow-hover)}}:host([data-skra-size=sm]){--skra-comp-button-padding-block: var( --skra-comp-button-size-sm-padding-block );--skra-comp-button-padding-inline: var( --skra-comp-button-size-sm-padding-inline );--skra-comp-button-min-block-size: var( --skra-comp-button-size-sm-min-block-size );--skra-comp-button-font-family: var( --skra-sys-typography-role-label-small-font-family );--skra-comp-button-font-size: var( --skra-sys-typography-role-label-small-font-size );--skra-comp-button-font-weight: var( --skra-sys-typography-role-label-small-font-weight );--skra-comp-button-line-height: var( --skra-sys-typography-role-label-small-line-height );--skra-comp-button-letter-spacing: var( --skra-sys-typography-role-label-small-letter-spacing )}:host([data-skra-size=md]){--skra-comp-button-padding-block: var( --skra-comp-button-size-md-padding-block );--skra-comp-button-padding-inline: var( --skra-comp-button-size-md-padding-inline );--skra-comp-button-min-block-size: var( --skra-comp-button-size-md-min-block-size );--skra-comp-button-font-family: var( --skra-sys-typography-role-label-medium-font-family );--skra-comp-button-font-size: var( --skra-sys-typography-role-label-medium-font-size );--skra-comp-button-font-weight: var( --skra-sys-typography-role-label-medium-font-weight );--skra-comp-button-line-height: var( --skra-sys-typography-role-label-medium-line-height );--skra-comp-button-letter-spacing: var( --skra-sys-typography-role-label-medium-letter-spacing )}:host([data-skra-size=lg]){--skra-comp-button-padding-block: var( --skra-comp-button-size-lg-padding-block );--skra-comp-button-padding-inline: var( --skra-comp-button-size-lg-padding-inline );--skra-comp-button-min-block-size: var( --skra-comp-button-size-lg-min-block-size );--skra-comp-button-font-family: var( --skra-sys-typography-role-label-large-font-family );--skra-comp-button-font-size: var( --skra-sys-typography-role-label-large-font-size );--skra-comp-button-font-weight: var( --skra-sys-typography-role-label-large-font-weight );--skra-comp-button-line-height: var( --skra-sys-typography-role-label-large-line-height );--skra-comp-button-letter-spacing: var( --skra-sys-typography-role-label-large-letter-spacing )}:host([data-skra-emphasis=high]){--skra-comp-button-border-width: 0}:host([data-skra-emphasis=medium]){--skra-comp-button-border-width: .0625rem}:host([data-skra-emphasis=low]){--skra-comp-button-border-width: 0}:host([data-skra-intent=neutral][data-skra-emphasis=high]){--skra-comp-button-background: var( --skra-comp-button-background-neutral-high, var(--skra-sys-color-neutral-base) );--skra-comp-button-foreground: var( --skra-comp-button-foreground-neutral-high, var(--skra-sys-color-neutral-contrast) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-neutral-high, transparent )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=neutral][data-skra-emphasis=high]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-neutral-base-hover)}}:host([data-skra-intent=neutral][data-skra-emphasis=high]):active:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-neutral-base-active)}:host([data-skra-intent=neutral][data-skra-emphasis=medium]){--skra-comp-button-background: var( --skra-comp-button-background-neutral-medium, transparent );--skra-comp-button-foreground: var( --skra-comp-button-foreground-neutral-medium, var(--skra-sys-color-neutral-strong) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-neutral-medium, var(--skra-sys-color-neutral-strong) )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=neutral][data-skra-emphasis=medium]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-neutral-soft)}}:host([data-skra-intent=neutral][data-skra-emphasis=low]){--skra-comp-button-background: var( --skra-comp-button-background-neutral-low, transparent );--skra-comp-button-foreground: var( --skra-comp-button-foreground-neutral-low, var(--skra-sys-color-neutral-strong) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-neutral-low, transparent )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=neutral][data-skra-emphasis=low]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-neutral-soft)}}:host([data-skra-intent=primary][data-skra-emphasis=high]){--skra-comp-button-background: var( --skra-comp-button-background-primary-high, var(--skra-sys-color-primary-base) );--skra-comp-button-foreground: var( --skra-comp-button-foreground-primary-high, var(--skra-sys-color-primary-contrast) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-primary-high, transparent )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=primary][data-skra-emphasis=high]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-primary-base-hover)}}:host([data-skra-intent=primary][data-skra-emphasis=high]):active:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-primary-base-active)}:host([data-skra-intent=primary][data-skra-emphasis=medium]){--skra-comp-button-background: var( --skra-comp-button-background-primary-medium, transparent );--skra-comp-button-foreground: var( --skra-comp-button-foreground-primary-medium, var(--skra-sys-color-primary-strong) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-primary-medium, var(--skra-sys-color-primary-strong) )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=primary][data-skra-emphasis=medium]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-primary-soft)}}:host([data-skra-intent=primary][data-skra-emphasis=low]){--skra-comp-button-background: var( --skra-comp-button-background-primary-low, transparent );--skra-comp-button-foreground: var( --skra-comp-button-foreground-primary-low, var(--skra-sys-color-primary-strong) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-primary-low, transparent )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=primary][data-skra-emphasis=low]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-primary-soft)}}:host([data-skra-intent=secondary][data-skra-emphasis=high]){--skra-comp-button-background: var( --skra-comp-button-background-secondary-high, var(--skra-sys-color-secondary-base) );--skra-comp-button-foreground: var( --skra-comp-button-foreground-secondary-high, var(--skra-sys-color-secondary-contrast) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-secondary-high, transparent )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=secondary][data-skra-emphasis=high]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-secondary-base-hover)}}:host([data-skra-intent=secondary][data-skra-emphasis=high]):active:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-secondary-base-active)}:host([data-skra-intent=secondary][data-skra-emphasis=medium]){--skra-comp-button-background: var( --skra-comp-button-background-secondary-medium, transparent );--skra-comp-button-foreground: var( --skra-comp-button-foreground-secondary-medium, var(--skra-sys-color-secondary-strong) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-secondary-medium, var(--skra-sys-color-secondary-strong) )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=secondary][data-skra-emphasis=medium]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-secondary-soft)}}:host([data-skra-intent=secondary][data-skra-emphasis=low]){--skra-comp-button-background: var( --skra-comp-button-background-secondary-low, transparent );--skra-comp-button-foreground: var( --skra-comp-button-foreground-secondary-low, var(--skra-sys-color-secondary-strong) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-secondary-low, transparent )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=secondary][data-skra-emphasis=low]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-secondary-soft)}}:host([data-skra-intent=info][data-skra-emphasis=high]){--skra-comp-button-background: var( --skra-comp-button-background-info-high, var(--skra-sys-color-info-base) );--skra-comp-button-foreground: var( --skra-comp-button-foreground-info-high, var(--skra-sys-color-info-contrast) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-info-high, transparent )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=info][data-skra-emphasis=high]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-info-base-hover)}}:host([data-skra-intent=info][data-skra-emphasis=high]):active:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-info-base-active)}:host([data-skra-intent=info][data-skra-emphasis=medium]){--skra-comp-button-background: var( --skra-comp-button-background-info-medium, transparent );--skra-comp-button-foreground: var( --skra-comp-button-foreground-info-medium, var(--skra-sys-color-info-strong) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-info-medium, var(--skra-sys-color-info-strong) )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=info][data-skra-emphasis=medium]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-info-soft)}}:host([data-skra-intent=info][data-skra-emphasis=low]){--skra-comp-button-background: var( --skra-comp-button-background-info-low, transparent );--skra-comp-button-foreground: var( --skra-comp-button-foreground-info-low, var(--skra-sys-color-info-strong) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-info-low, transparent )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=info][data-skra-emphasis=low]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-info-soft)}}:host([data-skra-intent=success][data-skra-emphasis=high]){--skra-comp-button-background: var( --skra-comp-button-background-success-high, var(--skra-sys-color-success-base) );--skra-comp-button-foreground: var( --skra-comp-button-foreground-success-high, var(--skra-sys-color-success-contrast) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-success-high, transparent )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=success][data-skra-emphasis=high]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-success-base-hover)}}:host([data-skra-intent=success][data-skra-emphasis=high]):active:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-success-base-active)}:host([data-skra-intent=success][data-skra-emphasis=medium]){--skra-comp-button-background: var( --skra-comp-button-background-success-medium, transparent );--skra-comp-button-foreground: var( --skra-comp-button-foreground-success-medium, var(--skra-sys-color-success-strong) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-success-medium, var(--skra-sys-color-success-strong) )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=success][data-skra-emphasis=medium]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-success-soft)}}:host([data-skra-intent=success][data-skra-emphasis=low]){--skra-comp-button-background: var( --skra-comp-button-background-success-low, transparent );--skra-comp-button-foreground: var( --skra-comp-button-foreground-success-low, var(--skra-sys-color-success-strong) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-success-low, transparent )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=success][data-skra-emphasis=low]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-success-soft)}}:host([data-skra-intent=warning][data-skra-emphasis=high]){--skra-comp-button-background: var( --skra-comp-button-background-warning-high, var(--skra-sys-color-warning-base) );--skra-comp-button-foreground: var( --skra-comp-button-foreground-warning-high, var(--skra-sys-color-warning-contrast) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-warning-high, transparent )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=warning][data-skra-emphasis=high]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-warning-base-hover)}}:host([data-skra-intent=warning][data-skra-emphasis=high]):active:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-warning-base-active)}:host([data-skra-intent=warning][data-skra-emphasis=medium]){--skra-comp-button-background: var( --skra-comp-button-background-warning-medium, transparent );--skra-comp-button-foreground: var( --skra-comp-button-foreground-warning-medium, var(--skra-sys-color-warning-strong) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-warning-medium, var(--skra-sys-color-warning-strong) )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=warning][data-skra-emphasis=medium]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-warning-soft)}}:host([data-skra-intent=warning][data-skra-emphasis=low]){--skra-comp-button-background: var( --skra-comp-button-background-warning-low, transparent );--skra-comp-button-foreground: var( --skra-comp-button-foreground-warning-low, var(--skra-sys-color-warning-strong) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-warning-low, transparent )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=warning][data-skra-emphasis=low]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-warning-soft)}}:host([data-skra-intent=danger][data-skra-emphasis=high]){--skra-comp-button-background: var( --skra-comp-button-background-danger-high, var(--skra-sys-color-danger-base) );--skra-comp-button-foreground: var( --skra-comp-button-foreground-danger-high, var(--skra-sys-color-danger-contrast) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-danger-high, transparent )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=danger][data-skra-emphasis=high]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-danger-base-hover)}}:host([data-skra-intent=danger][data-skra-emphasis=high]):active:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-danger-base-active)}:host([data-skra-intent=danger][data-skra-emphasis=medium]){--skra-comp-button-background: var( --skra-comp-button-background-danger-medium, transparent );--skra-comp-button-foreground: var( --skra-comp-button-foreground-danger-medium, var(--skra-sys-color-danger-strong) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-danger-medium, var(--skra-sys-color-danger-strong) )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=danger][data-skra-emphasis=medium]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-danger-soft)}}:host([data-skra-intent=danger][data-skra-emphasis=low]){--skra-comp-button-background: var( --skra-comp-button-background-danger-low, transparent );--skra-comp-button-foreground: var( --skra-comp-button-foreground-danger-low, var(--skra-sys-color-danger-strong) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-danger-low, transparent )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=danger][data-skra-emphasis=low]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-danger-soft)}}:host:disabled{background:var(--skra-comp-button-background-disabled);color:var(--skra-comp-button-foreground-disabled);border-color:var(--skra-comp-button-border-color-disabled);cursor:not-allowed;box-shadow:none}.skra-button-slot-wrapper{display:inline-flex;align-items:center;flex-shrink:0;align-self:center;--skra-comp-icon-size: var(--skra-comp-button-icon-size)}.skra-button-label-wrapper{display:inline-block}.skra-button-loading-indicator{display:inline-flex;align-items:center}:host([data-skra-loading]){pointer-events:none;position:relative}:host([data-skra-loading]) .skra-button-label-wrapper,:host([data-skra-loading]) .skra-button-slot-wrapper{opacity:0}:host([data-skra-loading]) .skra-button-loading-indicator{position:absolute;inset:0;justify-content:center}[data-skra-loading-indicator-fallback]{display:inline-block;inline-size:var(--skra-comp-button-loading-indicator-size);block-size:var(--skra-comp-button-loading-indicator-size);border:.125em solid var(--skra-comp-button-loading-indicator-color);border-block-start-color:transparent;border-radius:50%;animation:skra-button-spin .8s linear infinite}@keyframes skra-button-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){[data-skra-loading-indicator-fallback]{animation:none;opacity:.6}}\n"] }]
+                    }, template: "@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", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;cursor:pointer;font-family:var(--skra-comp-button-font-family);font-size:var(--skra-comp-button-font-size);font-weight:var(--skra-comp-button-font-weight);line-height:var(--skra-comp-button-line-height);letter-spacing:var(--skra-comp-button-letter-spacing);min-block-size:var(--skra-comp-button-min-block-size);background:var(--skra-comp-button-background);color:var(--skra-comp-button-foreground);border-color:var(--skra-comp-button-border-color);border-width:var(--skra-comp-button-border-width);border-style:var(--skra-comp-button-border-style);border-radius:var(--skra-comp-button-radius);padding-block:var(--skra-comp-button-padding-block);padding-inline:var(--skra-comp-button-padding-inline);box-shadow:var(--skra-comp-button-shadow);transition:background var(--skra-comp-button-motion-duration) var(--skra-comp-button-motion-easing),color var(--skra-comp-button-motion-duration) var(--skra-comp-button-motion-easing),border-color var(--skra-comp-button-motion-duration) var(--skra-comp-button-motion-easing),box-shadow var(--skra-comp-button-motion-duration) var(--skra-comp-button-motion-easing)}:host[data-skra-has-start],:host[data-skra-has-end]{gap:var(--skra-comp-button-icon-gap)}:host:focus-visible{outline-style:solid;outline-color:var(--skra-comp-button-focus-ring-color);outline-width:var(--skra-comp-button-focus-ring-width);outline-offset:2px}@media(hover:hover)and (pointer:fine){:host:hover:not(:disabled){box-shadow:var(--skra-comp-button-shadow-hover)}}:host([data-skra-size=sm]){--skra-comp-button-padding-block: var( --skra-comp-button-size-sm-padding-block );--skra-comp-button-padding-inline: var( --skra-comp-button-size-sm-padding-inline );--skra-comp-button-min-block-size: var( --skra-comp-button-size-sm-min-block-size );--skra-comp-button-font-family: var( --skra-sys-typography-role-label-small-font-family );--skra-comp-button-font-size: var( --skra-sys-typography-role-label-small-font-size );--skra-comp-button-font-weight: var( --skra-sys-typography-role-label-small-font-weight );--skra-comp-button-line-height: var( --skra-sys-typography-role-label-small-line-height );--skra-comp-button-letter-spacing: var( --skra-sys-typography-role-label-small-letter-spacing )}:host([data-skra-size=md]){--skra-comp-button-padding-block: var( --skra-comp-button-size-md-padding-block );--skra-comp-button-padding-inline: var( --skra-comp-button-size-md-padding-inline );--skra-comp-button-min-block-size: var( --skra-comp-button-size-md-min-block-size );--skra-comp-button-font-family: var( --skra-sys-typography-role-label-medium-font-family );--skra-comp-button-font-size: var( --skra-sys-typography-role-label-medium-font-size );--skra-comp-button-font-weight: var( --skra-sys-typography-role-label-medium-font-weight );--skra-comp-button-line-height: var( --skra-sys-typography-role-label-medium-line-height );--skra-comp-button-letter-spacing: var( --skra-sys-typography-role-label-medium-letter-spacing )}:host([data-skra-size=lg]){--skra-comp-button-padding-block: var( --skra-comp-button-size-lg-padding-block );--skra-comp-button-padding-inline: var( --skra-comp-button-size-lg-padding-inline );--skra-comp-button-min-block-size: var( --skra-comp-button-size-lg-min-block-size );--skra-comp-button-font-family: var( --skra-sys-typography-role-label-large-font-family );--skra-comp-button-font-size: var( --skra-sys-typography-role-label-large-font-size );--skra-comp-button-font-weight: var( --skra-sys-typography-role-label-large-font-weight );--skra-comp-button-line-height: var( --skra-sys-typography-role-label-large-line-height );--skra-comp-button-letter-spacing: var( --skra-sys-typography-role-label-large-letter-spacing )}:host([data-skra-emphasis=high]){--skra-comp-button-border-width: 0}:host([data-skra-emphasis=medium]){--skra-comp-button-border-width: .0625rem}:host([data-skra-emphasis=low]){--skra-comp-button-border-width: 0}:host([data-skra-intent=neutral][data-skra-emphasis=high]){--skra-comp-button-background: var( --skra-comp-button-background-neutral-high, var(--skra-sys-color-neutral-base) );--skra-comp-button-foreground: var( --skra-comp-button-foreground-neutral-high, var(--skra-sys-color-neutral-contrast) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-neutral-high, transparent );--skra-comp-button-loading-indicator-color: var( --skra-comp-button-loading-indicator-color-neutral-high, var(--skra-sys-color-neutral-contrast) )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=neutral][data-skra-emphasis=high]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-neutral-base-hover)}}:host([data-skra-intent=neutral][data-skra-emphasis=high]):active:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-neutral-base-active)}:host([data-skra-intent=neutral][data-skra-emphasis=medium]){--skra-comp-button-background: var( --skra-comp-button-background-neutral-medium, transparent );--skra-comp-button-foreground: var( --skra-comp-button-foreground-neutral-medium, var(--skra-sys-color-neutral-strong) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-neutral-medium, var(--skra-sys-color-neutral-strong) );--skra-comp-button-loading-indicator-color: var( --skra-comp-button-loading-indicator-color-neutral-medium, var(--skra-sys-color-neutral-strong) )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=neutral][data-skra-emphasis=medium]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-neutral-soft)}}:host([data-skra-intent=neutral][data-skra-emphasis=low]){--skra-comp-button-background: var( --skra-comp-button-background-neutral-low, transparent );--skra-comp-button-foreground: var( --skra-comp-button-foreground-neutral-low, var(--skra-sys-color-neutral-strong) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-neutral-low, transparent );--skra-comp-button-loading-indicator-color: var( --skra-comp-button-loading-indicator-color-neutral-low, var(--skra-sys-color-neutral-strong) )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=neutral][data-skra-emphasis=low]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-neutral-soft)}}:host([data-skra-intent=primary][data-skra-emphasis=high]){--skra-comp-button-background: var( --skra-comp-button-background-primary-high, var(--skra-sys-color-primary-base) );--skra-comp-button-foreground: var( --skra-comp-button-foreground-primary-high, var(--skra-sys-color-primary-contrast) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-primary-high, transparent );--skra-comp-button-loading-indicator-color: var( --skra-comp-button-loading-indicator-color-primary-high, var(--skra-sys-color-primary-contrast) )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=primary][data-skra-emphasis=high]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-primary-base-hover)}}:host([data-skra-intent=primary][data-skra-emphasis=high]):active:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-primary-base-active)}:host([data-skra-intent=primary][data-skra-emphasis=medium]){--skra-comp-button-background: var( --skra-comp-button-background-primary-medium, transparent );--skra-comp-button-foreground: var( --skra-comp-button-foreground-primary-medium, var(--skra-sys-color-primary-strong) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-primary-medium, var(--skra-sys-color-primary-strong) );--skra-comp-button-loading-indicator-color: var( --skra-comp-button-loading-indicator-color-primary-medium, var(--skra-sys-color-primary-strong) )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=primary][data-skra-emphasis=medium]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-primary-soft)}}:host([data-skra-intent=primary][data-skra-emphasis=low]){--skra-comp-button-background: var( --skra-comp-button-background-primary-low, transparent );--skra-comp-button-foreground: var( --skra-comp-button-foreground-primary-low, var(--skra-sys-color-primary-strong) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-primary-low, transparent );--skra-comp-button-loading-indicator-color: var( --skra-comp-button-loading-indicator-color-primary-low, var(--skra-sys-color-primary-strong) )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=primary][data-skra-emphasis=low]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-primary-soft)}}:host([data-skra-intent=secondary][data-skra-emphasis=high]){--skra-comp-button-background: var( --skra-comp-button-background-secondary-high, var(--skra-sys-color-secondary-base) );--skra-comp-button-foreground: var( --skra-comp-button-foreground-secondary-high, var(--skra-sys-color-secondary-contrast) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-secondary-high, transparent );--skra-comp-button-loading-indicator-color: var( --skra-comp-button-loading-indicator-color-secondary-high, var(--skra-sys-color-secondary-contrast) )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=secondary][data-skra-emphasis=high]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-secondary-base-hover)}}:host([data-skra-intent=secondary][data-skra-emphasis=high]):active:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-secondary-base-active)}:host([data-skra-intent=secondary][data-skra-emphasis=medium]){--skra-comp-button-background: var( --skra-comp-button-background-secondary-medium, transparent );--skra-comp-button-foreground: var( --skra-comp-button-foreground-secondary-medium, var(--skra-sys-color-secondary-strong) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-secondary-medium, var(--skra-sys-color-secondary-strong) );--skra-comp-button-loading-indicator-color: var( --skra-comp-button-loading-indicator-color-secondary-medium, var(--skra-sys-color-secondary-strong) )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=secondary][data-skra-emphasis=medium]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-secondary-soft)}}:host([data-skra-intent=secondary][data-skra-emphasis=low]){--skra-comp-button-background: var( --skra-comp-button-background-secondary-low, transparent );--skra-comp-button-foreground: var( --skra-comp-button-foreground-secondary-low, var(--skra-sys-color-secondary-strong) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-secondary-low, transparent );--skra-comp-button-loading-indicator-color: var( --skra-comp-button-loading-indicator-color-secondary-low, var(--skra-sys-color-secondary-strong) )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=secondary][data-skra-emphasis=low]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-secondary-soft)}}:host([data-skra-intent=info][data-skra-emphasis=high]){--skra-comp-button-background: var( --skra-comp-button-background-info-high, var(--skra-sys-color-info-base) );--skra-comp-button-foreground: var( --skra-comp-button-foreground-info-high, var(--skra-sys-color-info-contrast) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-info-high, transparent );--skra-comp-button-loading-indicator-color: var( --skra-comp-button-loading-indicator-color-info-high, var(--skra-sys-color-info-contrast) )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=info][data-skra-emphasis=high]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-info-base-hover)}}:host([data-skra-intent=info][data-skra-emphasis=high]):active:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-info-base-active)}:host([data-skra-intent=info][data-skra-emphasis=medium]){--skra-comp-button-background: var( --skra-comp-button-background-info-medium, transparent );--skra-comp-button-foreground: var( --skra-comp-button-foreground-info-medium, var(--skra-sys-color-info-strong) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-info-medium, var(--skra-sys-color-info-strong) );--skra-comp-button-loading-indicator-color: var( --skra-comp-button-loading-indicator-color-info-medium, var(--skra-sys-color-info-strong) )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=info][data-skra-emphasis=medium]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-info-soft)}}:host([data-skra-intent=info][data-skra-emphasis=low]){--skra-comp-button-background: var( --skra-comp-button-background-info-low, transparent );--skra-comp-button-foreground: var( --skra-comp-button-foreground-info-low, var(--skra-sys-color-info-strong) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-info-low, transparent );--skra-comp-button-loading-indicator-color: var( --skra-comp-button-loading-indicator-color-info-low, var(--skra-sys-color-info-strong) )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=info][data-skra-emphasis=low]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-info-soft)}}:host([data-skra-intent=success][data-skra-emphasis=high]){--skra-comp-button-background: var( --skra-comp-button-background-success-high, var(--skra-sys-color-success-base) );--skra-comp-button-foreground: var( --skra-comp-button-foreground-success-high, var(--skra-sys-color-success-contrast) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-success-high, transparent );--skra-comp-button-loading-indicator-color: var( --skra-comp-button-loading-indicator-color-success-high, var(--skra-sys-color-success-contrast) )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=success][data-skra-emphasis=high]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-success-base-hover)}}:host([data-skra-intent=success][data-skra-emphasis=high]):active:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-success-base-active)}:host([data-skra-intent=success][data-skra-emphasis=medium]){--skra-comp-button-background: var( --skra-comp-button-background-success-medium, transparent );--skra-comp-button-foreground: var( --skra-comp-button-foreground-success-medium, var(--skra-sys-color-success-strong) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-success-medium, var(--skra-sys-color-success-strong) );--skra-comp-button-loading-indicator-color: var( --skra-comp-button-loading-indicator-color-success-medium, var(--skra-sys-color-success-strong) )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=success][data-skra-emphasis=medium]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-success-soft)}}:host([data-skra-intent=success][data-skra-emphasis=low]){--skra-comp-button-background: var( --skra-comp-button-background-success-low, transparent );--skra-comp-button-foreground: var( --skra-comp-button-foreground-success-low, var(--skra-sys-color-success-strong) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-success-low, transparent );--skra-comp-button-loading-indicator-color: var( --skra-comp-button-loading-indicator-color-success-low, var(--skra-sys-color-success-strong) )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=success][data-skra-emphasis=low]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-success-soft)}}:host([data-skra-intent=warning][data-skra-emphasis=high]){--skra-comp-button-background: var( --skra-comp-button-background-warning-high, var(--skra-sys-color-warning-base) );--skra-comp-button-foreground: var( --skra-comp-button-foreground-warning-high, var(--skra-sys-color-warning-contrast) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-warning-high, transparent );--skra-comp-button-loading-indicator-color: var( --skra-comp-button-loading-indicator-color-warning-high, var(--skra-sys-color-warning-contrast) )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=warning][data-skra-emphasis=high]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-warning-base-hover)}}:host([data-skra-intent=warning][data-skra-emphasis=high]):active:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-warning-base-active)}:host([data-skra-intent=warning][data-skra-emphasis=medium]){--skra-comp-button-background: var( --skra-comp-button-background-warning-medium, transparent );--skra-comp-button-foreground: var( --skra-comp-button-foreground-warning-medium, var(--skra-sys-color-warning-strong) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-warning-medium, var(--skra-sys-color-warning-strong) );--skra-comp-button-loading-indicator-color: var( --skra-comp-button-loading-indicator-color-warning-medium, var(--skra-sys-color-warning-strong) )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=warning][data-skra-emphasis=medium]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-warning-soft)}}:host([data-skra-intent=warning][data-skra-emphasis=low]){--skra-comp-button-background: var( --skra-comp-button-background-warning-low, transparent );--skra-comp-button-foreground: var( --skra-comp-button-foreground-warning-low, var(--skra-sys-color-warning-strong) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-warning-low, transparent );--skra-comp-button-loading-indicator-color: var( --skra-comp-button-loading-indicator-color-warning-low, var(--skra-sys-color-warning-strong) )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=warning][data-skra-emphasis=low]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-warning-soft)}}:host([data-skra-intent=danger][data-skra-emphasis=high]){--skra-comp-button-background: var( --skra-comp-button-background-danger-high, var(--skra-sys-color-danger-base) );--skra-comp-button-foreground: var( --skra-comp-button-foreground-danger-high, var(--skra-sys-color-danger-contrast) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-danger-high, transparent );--skra-comp-button-loading-indicator-color: var( --skra-comp-button-loading-indicator-color-danger-high, var(--skra-sys-color-danger-contrast) )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=danger][data-skra-emphasis=high]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-danger-base-hover)}}:host([data-skra-intent=danger][data-skra-emphasis=high]):active:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-danger-base-active)}:host([data-skra-intent=danger][data-skra-emphasis=medium]){--skra-comp-button-background: var( --skra-comp-button-background-danger-medium, transparent );--skra-comp-button-foreground: var( --skra-comp-button-foreground-danger-medium, var(--skra-sys-color-danger-strong) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-danger-medium, var(--skra-sys-color-danger-strong) );--skra-comp-button-loading-indicator-color: var( --skra-comp-button-loading-indicator-color-danger-medium, var(--skra-sys-color-danger-strong) )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=danger][data-skra-emphasis=medium]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-danger-soft)}}:host([data-skra-intent=danger][data-skra-emphasis=low]){--skra-comp-button-background: var( --skra-comp-button-background-danger-low, transparent );--skra-comp-button-foreground: var( --skra-comp-button-foreground-danger-low, var(--skra-sys-color-danger-strong) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-danger-low, transparent );--skra-comp-button-loading-indicator-color: var( --skra-comp-button-loading-indicator-color-danger-low, var(--skra-sys-color-danger-strong) )}@media(hover:hover)and (pointer:fine){:host([data-skra-intent=danger][data-skra-emphasis=low]):hover:not(:disabled){--skra-comp-button-background: var(--skra-sys-color-danger-soft)}}:host:disabled{background:var(--skra-comp-button-background-disabled);color:var(--skra-comp-button-foreground-disabled);border-color:var(--skra-comp-button-border-color-disabled);cursor:not-allowed;box-shadow:none}.skra-button-slot-wrapper{display:inline-flex;align-items:center;flex-shrink:0;align-self:center;--skra-comp-icon-size: var(--skra-comp-button-icon-size)}.skra-button-label-wrapper{display:inline-block}.skra-button-loading-indicator{display:inline-flex;align-items:center}:host([data-skra-loading]){pointer-events:none;position:relative}:host([data-skra-loading]) .skra-button-label-wrapper,:host([data-skra-loading]) .skra-button-slot-wrapper{opacity:0}:host([data-skra-loading]) .skra-button-loading-indicator{position:absolute;inset:0;justify-content:center}[data-skra-loading-indicator-fallback]{display:inline-block;inline-size:var(--skra-comp-button-loading-indicator-size);block-size:var(--skra-comp-button-loading-indicator-size);border:.125em solid var(--skra-comp-button-loading-indicator-color);border-block-start-color:transparent;border-radius:50%;animation:skra-button-spin .8s linear infinite}@keyframes skra-button-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){[data-skra-loading-indicator-fallback]{animation: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 }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], startSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SkraButtonStart), { isSignal: true }] }], endSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SkraButtonEnd), { isSignal: true }] }], loadingIndicatorSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SkraLoadingIndicator), { isSignal: true }] }] } });
 
 /**

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';\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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"}
+{"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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"}