npm - @skra/ui - Versions diffs - 0.5.0 → 0.6.0 - Mend

@skra/ui 0.5.0 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (32) hide show

package/consumer-guide/README.md +88 -85
package/consumer-guide/custom-components.md +154 -0
package/consumer-guide/wrapping-patterns.md +98 -90
package/fesm2022/skra-ui-button.mjs +2 -2
package/fesm2022/skra-ui-button.mjs.map +1 -1
package/fesm2022/skra-ui-checkbox.mjs +2 -2
package/fesm2022/skra-ui-checkbox.mjs.map +1 -1
package/fesm2022/skra-ui-core.mjs +28 -3
package/fesm2022/skra-ui-core.mjs.map +1 -1
package/fesm2022/skra-ui-input.mjs +2 -2
package/fesm2022/skra-ui-input.mjs.map +1 -1
package/fesm2022/skra-ui-menu.mjs +38 -14
package/fesm2022/skra-ui-menu.mjs.map +1 -1
package/fesm2022/skra-ui-popover.mjs +25 -9
package/fesm2022/skra-ui-popover.mjs.map +1 -1
package/fesm2022/skra-ui-radio.mjs +2 -2
package/fesm2022/skra-ui-radio.mjs.map +1 -1
package/fesm2022/skra-ui-rating-display.mjs +2 -2
package/fesm2022/skra-ui-rating-display.mjs.map +1 -1
package/fesm2022/skra-ui-star-rating.mjs +2 -2
package/fesm2022/skra-ui-star-rating.mjs.map +1 -1
package/fesm2022/skra-ui-switch.mjs +2 -2
package/fesm2022/skra-ui-switch.mjs.map +1 -1
package/fesm2022/skra-ui-tooltip.mjs +7 -2
package/fesm2022/skra-ui-tooltip.mjs.map +1 -1
package/package.json +2 -2
package/types/skra-ui-core.d.ts.map +1 -1
package/types/skra-ui-menu.d.ts +18 -6
package/types/skra-ui-menu.d.ts.map +1 -1
package/types/skra-ui-popover.d.ts +13 -4
package/types/skra-ui-popover.d.ts.map +1 -1
package/types/skra-ui-tooltip.d.ts.map +1 -1

package/fesm2022/skra-ui-button.mjs CHANGED Viewed

@@ -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-ink) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-neutral-medium, var(--skra-sys-color-neutral-ink) )}@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-ink) );--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-ink) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-primary-medium, var(--skra-sys-color-primary-ink) )}@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-ink) );--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-ink) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-secondary-medium, var(--skra-sys-color-secondary-ink) )}@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-ink) );--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-ink) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-info-medium, var(--skra-sys-color-info-ink) )}@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-ink) );--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-ink) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-success-medium, var(--skra-sys-color-success-ink) )}@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-ink) );--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-ink) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-warning-medium, var(--skra-sys-color-warning-ink) )}@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-ink) );--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-ink) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-danger-medium, var(--skra-sys-color-danger-ink) )}@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-ink) );--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 )}@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 });
 }
 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-ink) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-neutral-medium, var(--skra-sys-color-neutral-ink) )}@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-ink) );--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-ink) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-primary-medium, var(--skra-sys-color-primary-ink) )}@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-ink) );--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-ink) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-secondary-medium, var(--skra-sys-color-secondary-ink) )}@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-ink) );--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-ink) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-info-medium, var(--skra-sys-color-info-ink) )}@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-ink) );--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-ink) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-success-medium, var(--skra-sys-color-success-ink) )}@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-ink) );--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-ink) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-warning-medium, var(--skra-sys-color-warning-ink) )}@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-ink) );--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-ink) );--skra-comp-button-border-color: var( --skra-comp-button-border-color-danger-medium, var(--skra-sys-color-danger-ink) )}@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-ink) );--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 )}@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"] }]
         }], 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 CHANGED Viewed

	@@ -1 +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":";;;;MAMa,eAAe,CAAA;uGAAf,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAf,eAAe,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,cAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAf,eAAe,EAAA,UAAA,EAAA,CAAA;kBAJ3B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,cAAc;AACxB,oBAAA,UAAU,EAAE,IAAI;AACjB,iBAAA;;MAOY,aAAa,CAAA;uGAAb,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAb,aAAa,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAb,aAAa,EAAA,UAAA,EAAA,CAAA;kBAJzB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,YAAY;AACtB,oBAAA,UAAU,EAAE,IAAI;AACjB,iBAAA;;;MCgDY,UAAU,CAAA;;IAEZ,MAAM,GAAG,KAAK,CAAe,SAAS;+EAAC;IACvC,QAAQ,GAAG,KAAK,CAAiB,MAAM;iFAAC;IACxC,IAAI,GAAG,KAAK,CAAa,IAAI;6EAAC;;IAG9B,OAAO,GAAG,KAAK,CAAC,KAAK,+EAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;;IAGvD,SAAS,GAAG,YAAY,CAAC,eAAe;kFAAC;IACzC,OAAO,GAAG,YAAY,CAAC,aAAa;gFAAC;IAErC,QAAQ,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE;iFAAC;IAC7C,MAAM,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE;+EAAC;;IAGzC,oBAAoB,GAAG,YAAY,CAAC,oBAAoB;6FAAC;IACzD,mBAAmB,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,oBAAoB,EAAE;4FAAC;uGAlBjE,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAV,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAU,28BAUa,eAAe,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,SAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EACjB,aAAa,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,sBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAMA,oBAAoB,gEC5EnE,yqBAuBA,EAAA,MAAA,EAAA,CAAA,~~65jBAAA~~,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FDoCa,UAAU,EAAA,UAAA,EAAA,CAAA;kBAtBtB,SAAS;+BACE,oBAAoB,EAAA,UAAA,EAClB,IAAI,EAAA,eAAA,EAGC,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,QAAQ,EAAA,IAAA,EACnC;;AAEJ,wBAAA,yBAAyB,EAAE,UAAU;AACrC,wBAAA,2BAA2B,EAAE,YAAY;AACzC,wBAAA,uBAAuB,EAAE,QAAQ;;AAGjC,wBAAA,0BAA0B,EAAE,uBAAuB;AACnD,wBAAA,kBAAkB,EAAE,2BAA2B;;AAG/C,wBAAA,4BAA4B,EAAE,wBAAwB;AACtD,wBAAA,0BAA0B,EAAE,sBAAsB;AACnD,qBAAA,EAAA,QAAA,EAAA,yqBAAA,EAAA,MAAA,EAAA,CAAA,~~65jBAAA~~,CAAA,EAAA;gdAYiC,eAAe,CAAA,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,OAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,YAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,UAAA,CAAA,MACjB,aAAa,CAAA,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,oBAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,YAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,UAAA,CAAA,MAMA,oBAAoB,CAAA,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AE5EnE;;AAEG;;;;"}
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":";;;;MAMa,eAAe,CAAA;uGAAf,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAf,eAAe,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,cAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAf,eAAe,EAAA,UAAA,EAAA,CAAA;kBAJ3B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,cAAc;AACxB,oBAAA,UAAU,EAAE,IAAI;AACjB,iBAAA;;MAOY,aAAa,CAAA;uGAAb,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAb,aAAa,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAb,aAAa,EAAA,UAAA,EAAA,CAAA;kBAJzB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,YAAY;AACtB,oBAAA,UAAU,EAAE,IAAI;AACjB,iBAAA;;;MCgDY,UAAU,CAAA;;IAEZ,MAAM,GAAG,KAAK,CAAe,SAAS;+EAAC;IACvC,QAAQ,GAAG,KAAK,CAAiB,MAAM;iFAAC;IACxC,IAAI,GAAG,KAAK,CAAa,IAAI;6EAAC;;IAG9B,OAAO,GAAG,KAAK,CAAC,KAAK,+EAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;;IAGvD,SAAS,GAAG,YAAY,CAAC,eAAe;kFAAC;IACzC,OAAO,GAAG,YAAY,CAAC,aAAa;gFAAC;IAErC,QAAQ,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE;iFAAC;IAC7C,MAAM,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE;+EAAC;;IAGzC,oBAAoB,GAAG,YAAY,CAAC,oBAAoB;6FAAC;IACzD,mBAAmB,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,oBAAoB,EAAE;4FAAC;uGAlBjE,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAV,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAU,28BAUa,eAAe,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,SAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EACjB,aAAa,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,sBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAMA,oBAAoB,gEC5EnE,yqBAuBA,EAAA,MAAA,EAAA,CAAA,49jBAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FDoCa,UAAU,EAAA,UAAA,EAAA,CAAA;kBAtBtB,SAAS;+BACE,oBAAoB,EAAA,UAAA,EAClB,IAAI,EAAA,eAAA,EAGC,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,QAAQ,EAAA,IAAA,EACnC;;AAEJ,wBAAA,yBAAyB,EAAE,UAAU;AACrC,wBAAA,2BAA2B,EAAE,YAAY;AACzC,wBAAA,uBAAuB,EAAE,QAAQ;;AAGjC,wBAAA,0BAA0B,EAAE,uBAAuB;AACnD,wBAAA,kBAAkB,EAAE,2BAA2B;;AAG/C,wBAAA,4BAA4B,EAAE,wBAAwB;AACtD,wBAAA,0BAA0B,EAAE,sBAAsB;AACnD,qBAAA,EAAA,QAAA,EAAA,yqBAAA,EAAA,MAAA,EAAA,CAAA,49jBAAA,CAAA,EAAA;gdAYiC,eAAe,CAAA,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,OAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,YAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,UAAA,CAAA,MACjB,aAAa,CAAA,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,oBAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,YAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,UAAA,CAAA,MAMA,oBAAoB,CAAA,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AE5EnE;;AAEG;;;;"}

package/fesm2022/skra-ui-checkbox.mjs CHANGED Viewed

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

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

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

package/fesm2022/skra-ui-core.mjs CHANGED Viewed

@@ -223,27 +223,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
  * `options` is a getter so live token values (offset) are re-read on every reposition.
  */
 function _attachPositioner(reference, floating, options) {
+    let destroyed = false;
+    let seq = 0;
     const update = () => {
         const { placement, offset: offset$1 = 0, viewportPadding = 8 } = options();
-        void computePosition(reference, floating, {
+        // `computePosition` is async, so two things can go wrong between call and settle: the handle can
+        // be destroyed (writing geometry onto a detached / hidden node), and a newer update can settle
+        // first (landing stale coordinates). Guard on both — this file positions every overlay in the
+        // library, so a two-line guard is cheap insurance.
+        const token = ++seq;
+        computePosition(reference, floating, {
             strategy: 'fixed', // floating element renders in the top layer → viewport-relative
             placement: placement,
             middleware: [
                 offset(offset$1),
+                // NOTE: `flip()` deliberately left unpadded pending a decision — see the review residual.
+                // Giving it `viewportPadding` would change resolved placement for all 7 overlay consumers
+                // with no visual test to catch a regression; that is a measured change, not a cleanup.
                 flip(),
                 shift({ padding: viewportPadding }),
             ],
-        }).then(({ x, y, placement: resolved }) => {
+        })
+            .then(({ x, y, placement: resolved }) => {
+            if (destroyed || token !== seq)
+                return;
             // Geometry only (ADR 0044 §3 rule 4). Never theme/state.
             floating.style.left = `${x}px`;
             floating.style.top = `${y}px`;
             // Resolved side (post-flip) for orientation CSS / future arrow — a data-attr, not a style.
             floating.setAttribute('data-skra-placement', resolved.split('-')[0]);
+        })
+            .catch(() => {
+            // Positioning is best-effort: a rejection must never surface as an unhandled rejection
+            // (fatal under Node, e.g. any future SSR/prerender path).
         });
     };
     // autoUpdate repositions on scroll, resize and element resize; returns its own cleanup.
     const cleanup = autoUpdate(reference, floating, update);
-    let destroyed = false;
     return {
         destroy() {
             if (destroyed)
@@ -525,6 +541,15 @@ class _SkraSelectBase extends _SkraListboxWidgetBase {
         }
         if (key === 'Escape')
             return; // platform (popover="auto") closes; onPanelToggle handles cleanup
+        if (key === 'ArrowUp' && event.altKey) {
+            // APG select-only combobox: Alt+Up closes and keeps the current value, focus stays on the
+            // trigger. Must be handled BEFORE the nav branch — `ArrowUp` is `isNav`, so it would otherwise
+            // be preventDefault'ed and handed to the key manager, which ignores modified arrows: the
+            // keystroke did nothing at all.
+            event.preventDefault();
+            this.close();
+            return;
+        }
         if (isNav || isPrintable) {
             event.preventDefault();
             this.keyboard.onKeydown(event); // move / type-ahead the active descendant