@educarehq/solaris-components 0.6.6 → 0.6.8

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 (4) hide show
  1. package/fesm2022/educarehq-solaris-components.mjs +58 -79
  2. package/fesm2022/educarehq-solaris-components.mjs.map +1 -1
  3. package/package.json +2 -2
  4. package/types/educarehq-solaris-components.d.ts +29 -26
package/fesm2022/educarehq-solaris-components.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- import { inject, ElementRef, Renderer2, Directive, TemplateRef, Injectable, ViewContainerRef, DestroyRef, Input, ContentChild, ViewEncapsulation, Component, EventEmitter, Output, HostBinding, ChangeDetectionStrategy, ViewChildren, ContentChildren, ApplicationRef, signal, computed, effect, HostListener, Optional, EnvironmentInjector, createComponent, input, booleanAttribute, InjectionToken, makeEnvironmentProviders, PLATFORM_ID, contentChild, model, numberAttribute, output, afterNextRender, Injector, ViewChild, forwardRef, Host } from '@angular/core';
2
+ import { inject, ElementRef, Renderer2, Directive, TemplateRef, Injectable, ViewContainerRef, DestroyRef, Input, ContentChild, ViewEncapsulation, Component, EventEmitter, Output, HostBinding, ChangeDetectionStrategy, booleanAttribute, ViewChildren, ContentChildren, ApplicationRef, signal, computed, effect, HostListener, Optional, EnvironmentInjector, createComponent, input, InjectionToken, makeEnvironmentProviders, PLATFORM_ID, contentChild, model, numberAttribute, output, afterNextRender, Injector, ViewChild, forwardRef, Host } from '@angular/core';
3
3
  import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
4
4
  import { Overlay } from '@angular/cdk/overlay';
5
5
  import { TemplatePortal } from '@angular/cdk/portal';
@@ -478,15 +478,15 @@ class SolarisStepperItem {
478
478
  badgeText;
479
479
  badgeTextKey;
480
480
  badgeColor;
481
- badgeVariant = 'subtle';
482
481
  badgeSize = 'sm';
482
+ badgeVariant = 'soft';
483
483
  badgePill = true;
484
484
  active = false;
485
485
  index = 0;
486
486
  headerId = '';
487
487
  panelId = '';
488
488
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisStepperItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
489
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: SolarisStepperItem, isStandalone: true, selector: "solaris-stepper-item", inputs: { stepId: "stepId", label: "label", labelKey: "labelKey", title: "title", titleKey: "titleKey", description: "description", descriptionKey: "descriptionKey", icon: "icon", optional: "optional", phase: "phase", status: "status", badgeText: "badgeText", badgeTextKey: "badgeTextKey", badgeColor: "badgeColor", badgeVariant: "badgeVariant", badgeSize: "badgeSize", badgePill: "badgePill" }, ngImport: i0, template: "<section\n class=\"solaris-stepper-item__panel\"\n role=\"tabpanel\"\n [id]=\"panelId\"\n [attr.aria-labelledby]=\"headerId\"\n [attr.aria-hidden]=\"!active\"\n [attr.hidden]=\"active ? null : ''\"\n>\n <ng-content></ng-content>\n</section>\n", styles: [":host{display:block;min-width:0}.solaris-stepper-item__panel{min-width:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
489
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: SolarisStepperItem, isStandalone: true, selector: "solaris-stepper-item", inputs: { stepId: "stepId", label: "label", labelKey: "labelKey", title: "title", titleKey: "titleKey", description: "description", descriptionKey: "descriptionKey", icon: "icon", optional: "optional", phase: "phase", status: "status", badgeText: "badgeText", badgeTextKey: "badgeTextKey", badgeColor: "badgeColor", badgeSize: "badgeSize", badgeVariant: "badgeVariant", badgePill: "badgePill" }, ngImport: i0, template: "<section\n class=\"solaris-stepper-item__panel\"\n role=\"tabpanel\"\n [id]=\"panelId\"\n [attr.aria-labelledby]=\"headerId\"\n [attr.aria-hidden]=\"!active\"\n [attr.hidden]=\"active ? null : ''\"\n>\n <ng-content></ng-content>\n</section>\n", styles: [":host{display:block;min-width:0}.solaris-stepper-item__panel{min-width:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
490
490
  }
491
491
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisStepperItem, decorators: [{
492
492
  type: Component,
@@ -519,21 +519,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
519
519
  type: Input
520
520
  }], badgeColor: [{
521
521
  type: Input
522
- }], badgeVariant: [{
523
- type: Input
524
522
  }], badgeSize: [{
525
523
  type: Input
524
+ }], badgeVariant: [{
525
+ type: Input
526
526
  }], badgePill: [{
527
527
  type: Input
528
528
  }] } });
529
529
 
530
530
  class SolarisBadge {
531
- pill = false;
532
- customTextColor;
533
- interactive = false;
531
+ shape = 'pill';
534
532
  size = 'md';
535
- variant = 'subtle';
533
+ density = 'comfortable';
536
534
  color = 'surface';
535
+ appearance = 'soft';
536
+ customTextColor;
537
+ interactive = false;
537
538
  ariaHidden = null;
538
539
  hostClass = 'solaris-badge-host';
539
540
  presetColors = new Set([
@@ -544,8 +545,14 @@ class SolarisBadge {
544
545
  'info',
545
546
  'surface',
546
547
  ]);
547
- get colorClass() {
548
- return this.isCustomColor ? 'color-custom' : `color-${this.color}`;
548
+ get resolvedAppearance() {
549
+ return this.appearance;
550
+ }
551
+ get resolvedShape() {
552
+ return this.shape;
553
+ }
554
+ get resolvedColor() {
555
+ return this.isCustomColor ? 'custom' : this.color;
549
556
  }
550
557
  get isCustomColor() {
551
558
  return !this.presetColors.has(this.color);
@@ -554,23 +561,26 @@ class SolarisBadge {
554
561
  return this.isCustomColor ? String(this.color) : null;
555
562
  }
556
563
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
557
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: SolarisBadge, isStandalone: true, selector: "solaris-badge", inputs: { pill: "pill", customTextColor: "customTextColor", interactive: "interactive", size: "size", variant: "variant", color: "color", ariaHidden: ["aria-hidden", "ariaHidden"] }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<span\n class=\"solaris-badge\"\n [attr.aria-hidden]=\"ariaHidden\"\n [ngClass]=\"[\n 'variant-' + variant,\n colorClass,\n 'size-' + size,\n pill ? 'is-pill' : '',\n interactive ? 'is-interactive' : '',\n ]\"\n [style.--solaris-badge-custom]=\"customColorValue\"\n [style.--solaris-badge-custom-fg]=\"customTextColor\"\n>\n <ng-content></ng-content>\n</span>\n", styles: [":host.solaris-badge-host{display:inline-flex}.solaris-badge{--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-radius: var(--solaris-radius-full);--solaris-badge-fg-solid: var(--solaris-badge-fg);line-height:1;font-weight:600;-webkit-user-select:none;user-select:none;white-space:nowrap;align-items:center;display:inline-flex;gap:var(--solaris-space-2);border:1px solid transparent;letter-spacing:var(--solaris-ls-sm);border-radius:var(--solaris-badge-radius)}.solaris-badge.size-sm{padding:.3rem .6rem;font-size:var(--solaris-fs-10)}.solaris-badge.size-md{padding:.4rem .8rem;font-size:var(--solaris-fs-12)}.solaris-badge.size-lg{padding:.5rem 1rem;font-size:var(--solaris-fs-14)}.solaris-badge.is-pill{--solaris-badge-radius: var(--solaris-radius-full)}.solaris-badge.is-interactive{cursor:pointer;transition:background var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),border-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),box-shadow var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-badge.is-interactive:hover{box-shadow:var(--solaris-shadow-xs)}.solaris-badge.color-surface{--_base: var(--solaris-color-surface-2);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, var(--solaris-color-black));--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient( 180deg, color-mix(in srgb, var(--_base) 92%, var(--solaris-color-white)), color-mix(in srgb, var(--_base) 75%, var(--solaris-color-black)) )}.solaris-badge.color-primary{--_base: var(--solaris-color-primary);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, var(--solaris-color-black));--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient( 180deg, color-mix(in srgb, var(--_base) 92%, var(--solaris-color-white)), color-mix(in srgb, var(--_base) 82%, var(--solaris-color-black)) )}.solaris-badge.color-success{--_base: var(--solaris-color-success);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, var(--solaris-color-black));--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient( 180deg, color-mix(in srgb, var(--_base) 92%, var(--solaris-color-white)), color-mix(in srgb, var(--_base) 75%, var(--solaris-color-black)) )}.solaris-badge.color-warning{--_base: var(--solaris-color-warning);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, var(--solaris-color-black));--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient( 180deg, color-mix(in srgb, var(--_base) 92%, var(--solaris-color-white)), color-mix(in srgb, var(--_base) 75%, var(--solaris-color-black)) )}.solaris-badge.color-error{--_base: var(--solaris-color-error);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, var(--solaris-color-black));--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient( 180deg, color-mix(in srgb, var(--_base) 92%, var(--solaris-color-white)), color-mix(in srgb, var(--_base) 82%, var(--solaris-color-black)) )}.solaris-badge.color-info{--_base: var(--solaris-color-info);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, var(--solaris-color-black));--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient( 180deg, color-mix(in srgb, var(--_base) 92%, var(--solaris-color-white)), color-mix(in srgb, var(--_base) 82%, var(--solaris-color-black)) )}.solaris-badge.color-custom{--_base: var(--solaris-badge-custom, var(--solaris-color-surface-2));--solaris-badge-fg-solid: var(--solaris-badge-custom-fg, var(--solaris-color-white));--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, var(--solaris-color-black));--solaris-badge-fg: var(--solaris-badge-custom-fg, var(--solaris-color-text));--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient( 180deg, color-mix(in srgb, var(--_base) 92%, var(--solaris-color-white)), color-mix(in srgb, var(--_base) 82%, var(--solaris-color-black)) )}.solaris-badge.variant-solid{color:var(--solaris-badge-fg-solid);background:var(--solaris-badge-bg-solid, var(--solaris-badge-bg));border-color:var(--solaris-badge-border-solid, var(--solaris-badge-border))}.solaris-badge.variant-subtle{color:var(--solaris-badge-fg);background:var(--solaris-badge-bg);border-color:var(--solaris-badge-border)}.solaris-badge.variant-outline{border-color:var(--solaris-badge-border);color:color-mix(in srgb,var(--solaris-badge-border) 30%,var(--solaris-color-white));background:color-mix(in srgb,var(--solaris-badge-border) 20%,transparent)}.solaris-badge.variant-solid.color-surface{color:var(--solaris-color-text);border-color:var(--solaris-color-border);background:var(--solaris-color-surface-2)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
564
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.13", type: SolarisBadge, isStandalone: true, selector: "solaris-badge", inputs: { shape: "shape", size: "size", density: "density", color: "color", appearance: "appearance", customTextColor: "customTextColor", interactive: ["interactive", "interactive", booleanAttribute], ariaHidden: ["aria-hidden", "ariaHidden"] }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<span class=\"solaris-badge\" [attr.aria-hidden]=\"ariaHidden\" [attr.data-appearance]=\"resolvedAppearance\"\n [style.--solaris-badge-custom]=\"customColorValue\" [style.--solaris-badge-custom-fg]=\"customTextColor\"\n [attr.data-color]=\"resolvedColor\" [attr.data-size]=\"size\" [attr.data-shape]=\"resolvedShape\"\n [attr.data-density]=\"density\" [class.is-interactive]=\"interactive\">\n <ng-content></ng-content>\n</span>\n", styles: [":host.solaris-badge-host{display:inline-flex}.solaris-badge{--solaris-badge-min-height: auto;--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-badge-fg);--solaris-badge-radius: var(--solaris-radius-full);--solaris-badge-line-height: var(--solaris-lh-tight);font-weight:600;-webkit-user-select:none;user-select:none;white-space:nowrap;align-items:center;display:inline-flex;gap:var(--solaris-space-2);border:1px solid transparent;letter-spacing:var(--solaris-ls-sm);border-radius:var(--solaris-badge-radius);line-height:var(--solaris-badge-line-height);min-block-size:var(--solaris-badge-min-height)}.solaris-badge.size-sm{--solaris-badge-min-height: 2rem;--solaris-badge-line-height: var(--solaris-lh-tight);padding:.2rem .6rem;font-size:var(--solaris-fs-10)}.solaris-badge.size-md{--solaris-badge-min-height: 2.4rem;--solaris-badge-line-height: var(--solaris-lh-tight);padding:.3rem .8rem;font-size:var(--solaris-fs-12)}.solaris-badge.size-lg{--solaris-badge-min-height: 2.8rem;--solaris-badge-line-height: var(--solaris-lh-tight);padding:.4rem 1rem;font-size:var(--solaris-fs-14)}.solaris-badge.is-pill{--solaris-badge-radius: var(--solaris-radius-full)}.solaris-badge.is-interactive{cursor:pointer;transition:background var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),border-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),box-shadow var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-badge.is-interactive:hover{box-shadow:var(--solaris-shadow-xs)}.solaris-badge.color-surface{--_base: var(--solaris-color-surface-2);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, var(--solaris-color-black));--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient( 180deg, color-mix(in srgb, var(--_base) 92%, var(--solaris-color-white)), color-mix(in srgb, var(--_base) 75%, var(--solaris-color-black)) )}.solaris-badge.color-primary{--_base: var(--solaris-color-primary);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, var(--solaris-color-black));--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient( 180deg, color-mix(in srgb, var(--_base) 92%, var(--solaris-color-white)), color-mix(in srgb, var(--_base) 82%, var(--solaris-color-black)) )}.solaris-badge.color-success{--_base: var(--solaris-color-success);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, var(--solaris-color-black));--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient( 180deg, color-mix(in srgb, var(--_base) 92%, var(--solaris-color-white)), color-mix(in srgb, var(--_base) 75%, var(--solaris-color-black)) )}.solaris-badge.color-warning{--_base: var(--solaris-color-warning);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, var(--solaris-color-black));--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient( 180deg, color-mix(in srgb, var(--_base) 92%, var(--solaris-color-white)), color-mix(in srgb, var(--_base) 75%, var(--solaris-color-black)) )}.solaris-badge.color-error{--_base: var(--solaris-color-error);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, var(--solaris-color-black));--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient( 180deg, color-mix(in srgb, var(--_base) 92%, var(--solaris-color-white)), color-mix(in srgb, var(--_base) 82%, var(--solaris-color-black)) )}.solaris-badge.color-info{--_base: var(--solaris-color-info);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, var(--solaris-color-black));--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient( 180deg, color-mix(in srgb, var(--_base) 92%, var(--solaris-color-white)), color-mix(in srgb, var(--_base) 82%, var(--solaris-color-black)) )}.solaris-badge.color-custom{--_base: var(--solaris-badge-custom, var(--solaris-color-surface-2));--solaris-badge-fg-solid: var(--solaris-badge-custom-fg, var(--solaris-color-white));--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, var(--solaris-color-black));--solaris-badge-fg: var(--solaris-badge-custom-fg, var(--solaris-color-text));--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient( 180deg, color-mix(in srgb, var(--_base) 92%, var(--solaris-color-white)), color-mix(in srgb, var(--_base) 82%, var(--solaris-color-black)) )}.solaris-badge.variant-solid{color:var(--solaris-badge-fg-solid);background:var(--solaris-badge-bg-solid, var(--solaris-badge-bg));border-color:var(--solaris-badge-border-solid, var(--solaris-badge-border))}.solaris-badge.variant-subtle{color:var(--solaris-badge-fg);background:var(--solaris-badge-bg);border-color:var(--solaris-badge-border)}.solaris-badge.variant-outline{border-color:var(--solaris-badge-border);color:color-mix(in srgb,var(--solaris-badge-border) 30%,var(--solaris-color-white));background:color-mix(in srgb,var(--solaris-badge-border) 20%,transparent)}.solaris-badge.variant-solid.color-surface{color:var(--solaris-color-text);border-color:var(--solaris-color-border);background:var(--solaris-color-surface-2)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
558
565
  }
559
566
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisBadge, decorators: [{
560
567
  type: Component,
561
- args: [{ selector: 'solaris-badge', standalone: true, imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n class=\"solaris-badge\"\n [attr.aria-hidden]=\"ariaHidden\"\n [ngClass]=\"[\n 'variant-' + variant,\n colorClass,\n 'size-' + size,\n pill ? 'is-pill' : '',\n interactive ? 'is-interactive' : '',\n ]\"\n [style.--solaris-badge-custom]=\"customColorValue\"\n [style.--solaris-badge-custom-fg]=\"customTextColor\"\n>\n <ng-content></ng-content>\n</span>\n", styles: [":host.solaris-badge-host{display:inline-flex}.solaris-badge{--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-radius: var(--solaris-radius-full);--solaris-badge-fg-solid: var(--solaris-badge-fg);line-height:1;font-weight:600;-webkit-user-select:none;user-select:none;white-space:nowrap;align-items:center;display:inline-flex;gap:var(--solaris-space-2);border:1px solid transparent;letter-spacing:var(--solaris-ls-sm);border-radius:var(--solaris-badge-radius)}.solaris-badge.size-sm{padding:.3rem .6rem;font-size:var(--solaris-fs-10)}.solaris-badge.size-md{padding:.4rem .8rem;font-size:var(--solaris-fs-12)}.solaris-badge.size-lg{padding:.5rem 1rem;font-size:var(--solaris-fs-14)}.solaris-badge.is-pill{--solaris-badge-radius: var(--solaris-radius-full)}.solaris-badge.is-interactive{cursor:pointer;transition:background var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),border-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),box-shadow var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-badge.is-interactive:hover{box-shadow:var(--solaris-shadow-xs)}.solaris-badge.color-surface{--_base: var(--solaris-color-surface-2);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, var(--solaris-color-black));--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient( 180deg, color-mix(in srgb, var(--_base) 92%, var(--solaris-color-white)), color-mix(in srgb, var(--_base) 75%, var(--solaris-color-black)) )}.solaris-badge.color-primary{--_base: var(--solaris-color-primary);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, var(--solaris-color-black));--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient( 180deg, color-mix(in srgb, var(--_base) 92%, var(--solaris-color-white)), color-mix(in srgb, var(--_base) 82%, var(--solaris-color-black)) )}.solaris-badge.color-success{--_base: var(--solaris-color-success);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, var(--solaris-color-black));--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient( 180deg, color-mix(in srgb, var(--_base) 92%, var(--solaris-color-white)), color-mix(in srgb, var(--_base) 75%, var(--solaris-color-black)) )}.solaris-badge.color-warning{--_base: var(--solaris-color-warning);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, var(--solaris-color-black));--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient( 180deg, color-mix(in srgb, var(--_base) 92%, var(--solaris-color-white)), color-mix(in srgb, var(--_base) 75%, var(--solaris-color-black)) )}.solaris-badge.color-error{--_base: var(--solaris-color-error);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, var(--solaris-color-black));--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient( 180deg, color-mix(in srgb, var(--_base) 92%, var(--solaris-color-white)), color-mix(in srgb, var(--_base) 82%, var(--solaris-color-black)) )}.solaris-badge.color-info{--_base: var(--solaris-color-info);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, var(--solaris-color-black));--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient( 180deg, color-mix(in srgb, var(--_base) 92%, var(--solaris-color-white)), color-mix(in srgb, var(--_base) 82%, var(--solaris-color-black)) )}.solaris-badge.color-custom{--_base: var(--solaris-badge-custom, var(--solaris-color-surface-2));--solaris-badge-fg-solid: var(--solaris-badge-custom-fg, var(--solaris-color-white));--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, var(--solaris-color-black));--solaris-badge-fg: var(--solaris-badge-custom-fg, var(--solaris-color-text));--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient( 180deg, color-mix(in srgb, var(--_base) 92%, var(--solaris-color-white)), color-mix(in srgb, var(--_base) 82%, var(--solaris-color-black)) )}.solaris-badge.variant-solid{color:var(--solaris-badge-fg-solid);background:var(--solaris-badge-bg-solid, var(--solaris-badge-bg));border-color:var(--solaris-badge-border-solid, var(--solaris-badge-border))}.solaris-badge.variant-subtle{color:var(--solaris-badge-fg);background:var(--solaris-badge-bg);border-color:var(--solaris-badge-border)}.solaris-badge.variant-outline{border-color:var(--solaris-badge-border);color:color-mix(in srgb,var(--solaris-badge-border) 30%,var(--solaris-color-white));background:color-mix(in srgb,var(--solaris-badge-border) 20%,transparent)}.solaris-badge.variant-solid.color-surface{color:var(--solaris-color-text);border-color:var(--solaris-color-border);background:var(--solaris-color-surface-2)}\n"] }]
562
- }], propDecorators: { pill: [{
563
- type: Input
564
- }], customTextColor: [{
565
- type: Input
566
- }], interactive: [{
568
+ args: [{ selector: 'solaris-badge', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"solaris-badge\" [attr.aria-hidden]=\"ariaHidden\" [attr.data-appearance]=\"resolvedAppearance\"\n [style.--solaris-badge-custom]=\"customColorValue\" [style.--solaris-badge-custom-fg]=\"customTextColor\"\n [attr.data-color]=\"resolvedColor\" [attr.data-size]=\"size\" [attr.data-shape]=\"resolvedShape\"\n [attr.data-density]=\"density\" [class.is-interactive]=\"interactive\">\n <ng-content></ng-content>\n</span>\n", styles: [":host.solaris-badge-host{display:inline-flex}.solaris-badge{--solaris-badge-min-height: auto;--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-badge-fg);--solaris-badge-radius: var(--solaris-radius-full);--solaris-badge-line-height: var(--solaris-lh-tight);font-weight:600;-webkit-user-select:none;user-select:none;white-space:nowrap;align-items:center;display:inline-flex;gap:var(--solaris-space-2);border:1px solid transparent;letter-spacing:var(--solaris-ls-sm);border-radius:var(--solaris-badge-radius);line-height:var(--solaris-badge-line-height);min-block-size:var(--solaris-badge-min-height)}.solaris-badge.size-sm{--solaris-badge-min-height: 2rem;--solaris-badge-line-height: var(--solaris-lh-tight);padding:.2rem .6rem;font-size:var(--solaris-fs-10)}.solaris-badge.size-md{--solaris-badge-min-height: 2.4rem;--solaris-badge-line-height: var(--solaris-lh-tight);padding:.3rem .8rem;font-size:var(--solaris-fs-12)}.solaris-badge.size-lg{--solaris-badge-min-height: 2.8rem;--solaris-badge-line-height: var(--solaris-lh-tight);padding:.4rem 1rem;font-size:var(--solaris-fs-14)}.solaris-badge.is-pill{--solaris-badge-radius: var(--solaris-radius-full)}.solaris-badge.is-interactive{cursor:pointer;transition:background var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),border-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),box-shadow var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-badge.is-interactive:hover{box-shadow:var(--solaris-shadow-xs)}.solaris-badge.color-surface{--_base: var(--solaris-color-surface-2);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, var(--solaris-color-black));--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient( 180deg, color-mix(in srgb, var(--_base) 92%, var(--solaris-color-white)), color-mix(in srgb, var(--_base) 75%, var(--solaris-color-black)) )}.solaris-badge.color-primary{--_base: var(--solaris-color-primary);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, var(--solaris-color-black));--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient( 180deg, color-mix(in srgb, var(--_base) 92%, var(--solaris-color-white)), color-mix(in srgb, var(--_base) 82%, var(--solaris-color-black)) )}.solaris-badge.color-success{--_base: var(--solaris-color-success);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, var(--solaris-color-black));--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient( 180deg, color-mix(in srgb, var(--_base) 92%, var(--solaris-color-white)), color-mix(in srgb, var(--_base) 75%, var(--solaris-color-black)) )}.solaris-badge.color-warning{--_base: var(--solaris-color-warning);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, var(--solaris-color-black));--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient( 180deg, color-mix(in srgb, var(--_base) 92%, var(--solaris-color-white)), color-mix(in srgb, var(--_base) 75%, var(--solaris-color-black)) )}.solaris-badge.color-error{--_base: var(--solaris-color-error);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, var(--solaris-color-black));--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient( 180deg, color-mix(in srgb, var(--_base) 92%, var(--solaris-color-white)), color-mix(in srgb, var(--_base) 82%, var(--solaris-color-black)) )}.solaris-badge.color-info{--_base: var(--solaris-color-info);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, var(--solaris-color-black));--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient( 180deg, color-mix(in srgb, var(--_base) 92%, var(--solaris-color-white)), color-mix(in srgb, var(--_base) 82%, var(--solaris-color-black)) )}.solaris-badge.color-custom{--_base: var(--solaris-badge-custom, var(--solaris-color-surface-2));--solaris-badge-fg-solid: var(--solaris-badge-custom-fg, var(--solaris-color-white));--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, var(--solaris-color-black));--solaris-badge-fg: var(--solaris-badge-custom-fg, var(--solaris-color-text));--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient( 180deg, color-mix(in srgb, var(--_base) 92%, var(--solaris-color-white)), color-mix(in srgb, var(--_base) 82%, var(--solaris-color-black)) )}.solaris-badge.variant-solid{color:var(--solaris-badge-fg-solid);background:var(--solaris-badge-bg-solid, var(--solaris-badge-bg));border-color:var(--solaris-badge-border-solid, var(--solaris-badge-border))}.solaris-badge.variant-subtle{color:var(--solaris-badge-fg);background:var(--solaris-badge-bg);border-color:var(--solaris-badge-border)}.solaris-badge.variant-outline{border-color:var(--solaris-badge-border);color:color-mix(in srgb,var(--solaris-badge-border) 30%,var(--solaris-color-white));background:color-mix(in srgb,var(--solaris-badge-border) 20%,transparent)}.solaris-badge.variant-solid.color-surface{color:var(--solaris-color-text);border-color:var(--solaris-color-border);background:var(--solaris-color-surface-2)}\n"] }]
569
+ }], propDecorators: { shape: [{
567
570
  type: Input
568
571
  }], size: [{
569
572
  type: Input
570
- }], variant: [{
573
+ }], density: [{
571
574
  type: Input
572
575
  }], color: [{
573
576
  type: Input
577
+ }], appearance: [{
578
+ type: Input
579
+ }], customTextColor: [{
580
+ type: Input
581
+ }], interactive: [{
582
+ type: Input,
583
+ args: [{ transform: booleanAttribute }]
574
584
  }], ariaHidden: [{
575
585
  type: Input,
576
586
  args: [{ alias: 'aria-hidden' }]
@@ -627,13 +637,6 @@ class SolarisStepper {
627
637
  this.syncItems();
628
638
  }
629
639
  }
630
- next() {
631
- const target = this.findAdjacentNavigableIndex(this.currentIndex, 1);
632
- if (target === null)
633
- return;
634
- this.commitIndexChange(target, 'next');
635
- this.nextChange.emit(target);
636
- }
637
640
  previous() {
638
641
  const target = this.findAdjacentNavigableIndex(this.currentIndex, -1);
639
642
  if (target === null)
@@ -646,6 +649,21 @@ class SolarisStepper {
646
649
  return;
647
650
  this.commitIndexChange(index, 'programmatic');
648
651
  }
652
+ isProgrammaticallyNavigable(index) {
653
+ if (!this.isInBounds(index))
654
+ return false;
655
+ const item = this.items[index];
656
+ if (!item)
657
+ return false;
658
+ return !this.isDisabledLike(item);
659
+ }
660
+ next() {
661
+ const target = this.findAdjacentNavigableIndex(this.currentIndex, 1);
662
+ if (target === null)
663
+ return;
664
+ this.commitIndexChange(target, 'next');
665
+ this.nextChange.emit(target);
666
+ }
649
667
  onStepHeaderClick(index) {
650
668
  if (!this.canActivateByHeaderClick(index))
651
669
  return;
@@ -732,9 +750,9 @@ class SolarisStepper {
732
750
  if (item.status === 'locked')
733
751
  return 'ph-lock';
734
752
  if (item.status === 'error')
735
- return 'ph-x-circle';
753
+ return 'ph-x';
736
754
  if (item.status === 'warning')
737
- return 'ph-warning-circle';
755
+ return 'ph-warning';
738
756
  if (this.isCompleted(index))
739
757
  return 'ph-check';
740
758
  return item.icon ?? null;
@@ -750,11 +768,6 @@ class SolarisStepper {
750
768
  return false;
751
769
  return Boolean(item.badgeText || item.badgeTextKey || this.getAutoBadgeTranslationKey(item, index));
752
770
  }
753
- getResolvedLabel(item, index) {
754
- if (item.labelKey || item.label)
755
- return null;
756
- return `${index + 1}`;
757
- }
758
771
  getResolvedBadgeColor(item, index) {
759
772
  if (item.badgeColor)
760
773
  return item.badgeColor;
@@ -771,9 +784,6 @@ class SolarisStepper {
771
784
  return 'primary';
772
785
  return 'surface';
773
786
  }
774
- getResolvedBadgeVariant(item) {
775
- return item.badgeVariant;
776
- }
777
787
  getAutoBadgeTranslationKey(item, index) {
778
788
  if (item.status === 'error')
779
789
  return 'ui.solaris.stepper.error';
@@ -790,29 +800,6 @@ class SolarisStepper {
790
800
  return 'ui.solaris.stepper.inProgress';
791
801
  return 'ui.solaris.stepper.pending';
792
802
  }
793
- getTitle(item) {
794
- return item.title ?? '';
795
- }
796
- getDescription(item) {
797
- return item.description ?? '';
798
- }
799
- getStepAriaLabel(item, index) {
800
- const phase = this.resolvePhase(item, index);
801
- const title = item.title ?? item.titleKey ?? `${index + 1}`;
802
- if (phase === 'completed') {
803
- return `${title} completed`;
804
- }
805
- if (phase === 'current') {
806
- return `${title} current step`;
807
- }
808
- if (item.status === 'locked') {
809
- return `${title} locked`;
810
- }
811
- if (item.status === 'disabled') {
812
- return `${title} disabled`;
813
- }
814
- return title;
815
- }
816
803
  trackByIndex(index) {
817
804
  return index;
818
805
  }
@@ -863,14 +850,6 @@ class SolarisStepper {
863
850
  return index === this.currentIndex + 1;
864
851
  return true;
865
852
  }
866
- isProgrammaticallyNavigable(index) {
867
- if (!this.isInBounds(index))
868
- return false;
869
- const item = this.items[index];
870
- if (!item)
871
- return false;
872
- return !this.isDisabledLike(item);
873
- }
874
853
  findAdjacentNavigableIndex(start, direction) {
875
854
  let cursor = start + direction;
876
855
  while (this.isInBounds(cursor)) {
@@ -911,11 +890,11 @@ class SolarisStepper {
911
890
  button?.focus();
912
891
  }
913
892
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisStepper, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
914
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisStepper, isStandalone: true, selector: "solaris-stepper", inputs: { orientation: "orientation", appearance: "appearance", linear: "linear", interactive: "interactive", activeIndex: "activeIndex", defaultActiveIndex: "defaultActiveIndex", allowBackNavigation: "allowBackNavigation", allowFutureNavigation: "allowFutureNavigation", allowSkip: "allowSkip", renderPanels: "renderPanels", showStateBadges: "showStateBadges" }, outputs: { activeIndexChange: "activeIndexChange", nextChange: "next", previousChange: "previous", stepChange: "stepChange" }, queries: [{ propertyName: "itemsQuery", predicate: SolarisStepperItem }], viewQueries: [{ propertyName: "stepButtons", predicate: ["stepButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"solaris-stepper\" [ngClass]=\"['orientation-' + orientation, 'appearance-' + appearance]\">\n <div class=\"solaris-stepper__rail\" role=\"tablist\" [attr.aria-orientation]=\"orientation\">\n @for (item of items; track trackByIndex($index); let i = $index; let last = $last) {\n <div class=\"solaris-stepper__node\">\n <button\n #stepButton\n type=\"button\"\n role=\"tab\"\n class=\"solaris-stepper__step\"\n [id]=\"item.headerId\"\n [attr.aria-controls]=\"item.panelId\"\n [attr.aria-selected]=\"isCurrent(i)\"\n [attr.aria-current]=\"isCurrent(i) ? 'step' : null\"\n [attr.aria-disabled]=\"item.status === 'disabled' || item.status === 'locked'\"\n [attr.tabindex]=\"isCurrent(i) ? 0 : -1\"\n [ngClass]=\"getStepClasses(item, i)\"\n (click)=\"onStepHeaderClick(i)\"\n (keydown)=\"onStepKeydown($event, i)\"\n >\n <span class=\"solaris-stepper__marker\" [ngClass]=\"getStepClasses(item, i)\">\n @if (getMarkerIcon(item, i)) {\n <i class=\"ph\" [ngClass]=\"getMarkerIcon(item, i)\" aria-hidden=\"true\"></i>\n }\n\n @if (getMarkerText(item, i)) {\n <span>{{ getMarkerText(item, i) }}</span>\n }\n </span>\n\n <span class=\"solaris-stepper__meta\">\n <span class=\"solaris-stepper__label\">\n @if (item.labelKey) {\n {{ item.labelKey | translate }}\n } @else if (item.label) {\n {{ item.label }}\n } @else {\n {{ 'ui.solaris.stepper.step' | translate }} {{ i + 1 }}\n }\n </span>\n\n <span class=\"solaris-stepper__title\">\n @if (item.titleKey) {\n {{ item.titleKey | translate }}\n } @else {\n {{ item.title }}\n }\n </span>\n\n @if (item.descriptionKey || item.description) {\n <span class=\"solaris-stepper__description\">\n @if (item.descriptionKey) {\n {{ item.descriptionKey | translate }}\n } @else {\n {{ item.description }}\n }\n </span>\n }\n\n @if (item.optional) {\n <span class=\"solaris-stepper__optional\">\n {{ 'ui.solaris.stepper.optional' | translate }}\n </span>\n }\n </span>\n\n @if (hasBadge(item, i)) {\n <solaris-badge\n class=\"solaris-stepper__badge\"\n [pill]=\"item.badgePill\"\n [size]=\"item.badgeSize\"\n [variant]=\"getResolvedBadgeVariant(item)\"\n [color]=\"getResolvedBadgeColor(item, i)\"\n aria-hidden=\"true\"\n >\n @if (item.badgeTextKey) {\n {{ item.badgeTextKey | translate }}\n } @else if (item.badgeText) {\n {{ item.badgeText }}\n } @else {\n {{ getAutoBadgeTranslationKey(item, i) | translate }}\n }\n </solaris-badge>\n }\n </button>\n\n @if (!last) {\n <span\n class=\"solaris-stepper__connector\"\n [ngClass]=\"getConnectorClasses(i)\"\n aria-hidden=\"true\"\n ></span>\n }\n </div>\n }\n </div>\n\n @if (renderPanels) {\n <div class=\"solaris-stepper__content\">\n <ng-content></ng-content>\n </div>\n }\n</div>\n", styles: [":host{display:block;min-width:0}.solaris-stepper{display:grid;gap:var(--solaris-space-6);min-width:0}.solaris-stepper.orientation-horizontal{grid-template-columns:minmax(0,1fr)}.solaris-stepper.orientation-vertical{grid-template-columns:minmax(16rem,20rem) minmax(0,1fr);align-items:start}.solaris-stepper__rail{min-width:0}.solaris-stepper.orientation-horizontal .solaris-stepper__rail{display:flex;align-items:stretch;overflow-x:auto;gap:var(--solaris-space-2);padding-bottom:var(--solaris-space-1)}.solaris-stepper.orientation-vertical .solaris-stepper__rail{display:flex;flex-direction:column;gap:var(--solaris-space-2)}.solaris-stepper__node{min-width:0}.solaris-stepper.orientation-horizontal .solaris-stepper__node{flex:1 1 0;display:flex;align-items:center;min-width:11rem}.solaris-stepper.orientation-vertical .solaris-stepper__node{display:flex;flex-direction:column;align-items:stretch}.solaris-stepper__step{width:100%;min-width:0;display:flex;align-items:flex-start;gap:var(--solaris-space-2);padding:var(--solaris-space-2) var(--solaris-space-3);border:1px solid transparent;background:transparent;border-radius:var(--solaris-radius-md);color:var(--solaris-color-text);text-align:left;transition:background var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),border-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),box-shadow var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-stepper__step.is-clickable{cursor:pointer}.solaris-stepper__step.is-clickable:hover{background:color-mix(in srgb,var(--solaris-color-surface-2) 78%,transparent)}.solaris-stepper__step.is-current{background:color-mix(in srgb,var(--solaris-color-primary) 8%,var(--solaris-color-surface));border-color:color-mix(in srgb,var(--solaris-color-primary) 35%,transparent);box-shadow:var(--solaris-shadow-xs)}.solaris-stepper__step.is-disabled,.solaris-stepper__step.is-locked{opacity:.65;cursor:not-allowed}.solaris-stepper__step:focus-visible{outline:none;box-shadow:0 0 0 .2rem color-mix(in srgb,var(--solaris-color-primary) 28%,transparent),var(--solaris-shadow-xs)}.solaris-stepper__marker{width:2rem;height:2rem;flex:0 0 2rem;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--solaris-radius-full);border:1px solid var(--solaris-color-border);background:var(--solaris-color-surface);color:var(--solaris-color-text);font-size:var(--solaris-fs-12);font-weight:700;line-height:1;box-shadow:var(--solaris-shadow-xs)}.solaris-stepper__marker.is-current{background:var(--solaris-color-primary);border-color:var(--solaris-color-primary);color:var(--solaris-color-primary-contrast)}.solaris-stepper__marker.is-completed{background:var(--solaris-color-success);border-color:var(--solaris-color-success);color:var(--solaris-color-primary-contrast)}.solaris-stepper__marker.is-warning{border-color:var(--solaris-color-warning);color:var(--solaris-color-warning)}.solaris-stepper__marker.is-error{border-color:var(--solaris-color-error);color:var(--solaris-color-error)}.solaris-stepper__marker.is-locked,.solaris-stepper__marker.is-disabled{background:var(--solaris-color-surface-2);border-color:var(--solaris-color-border);color:var(--solaris-color-text-muted)}.solaris-stepper__meta{display:grid;gap:var(--solaris-space-1);min-width:0;flex:1 1 auto}.solaris-stepper__label{color:var(--solaris-color-text-muted);font-size:var(--solaris-fs-10);line-height:var(--solaris-lh-tight);letter-spacing:var(--solaris-ls-lg);text-transform:uppercase;font-weight:700}.solaris-stepper__title{color:var(--solaris-color-text);font-size:var(--solaris-fs-14);line-height:var(--solaris-lh-normal);font-weight:700}.solaris-stepper__description{color:var(--solaris-color-text-muted);font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-relaxed)}.solaris-stepper__optional{color:var(--solaris-color-text-muted);font-size:var(--solaris-fs-10);line-height:var(--solaris-lh-tight)}.solaris-stepper__badge{align-self:flex-start}.solaris-stepper__connector{background:var(--solaris-color-border);opacity:.8}.solaris-stepper.orientation-horizontal .solaris-stepper__connector{height:1px;flex:1 1 auto;min-width:var(--solaris-space-10)}.solaris-stepper.orientation-vertical .solaris-stepper__connector{width:1px;min-height:var(--solaris-space-8);margin-left:calc(var(--solaris-space-3) + 1rem)}.solaris-stepper__connector.is-completed,.solaris-stepper__connector.is-current{background:color-mix(in srgb,var(--solaris-color-primary) 75%,var(--solaris-color-success))}.solaris-stepper__step.is-current.is-warning,.solaris-stepper__step.is-completed.is-warning{background:color-mix(in srgb,var(--solaris-color-warning) 10%,var(--solaris-color-surface));border-color:color-mix(in srgb,var(--solaris-color-warning) 45%,transparent);box-shadow:var(--solaris-shadow-xs)}.solaris-stepper__step.is-current.is-error,.solaris-stepper__step.is-completed.is-error{background:color-mix(in srgb,var(--solaris-color-error) 10%,var(--solaris-color-surface));border-color:color-mix(in srgb,var(--solaris-color-error) 45%,transparent);box-shadow:var(--solaris-shadow-xs)}.solaris-stepper__step.is-current.is-locked,.solaris-stepper__step.is-completed.is-locked,.solaris-stepper__step.is-current.is-disabled,.solaris-stepper__step.is-completed.is-disabled{background:color-mix(in srgb,var(--solaris-color-surface-2) 65%,transparent);border-color:var(--solaris-color-border);box-shadow:none}.solaris-stepper__marker.is-current.is-warning,.solaris-stepper__marker.is-completed.is-warning{background:var(--solaris-color-warning);border-color:var(--solaris-color-warning);color:var(--solaris-color-primary-contrast)}.solaris-stepper__marker.is-current.is-error,.solaris-stepper__marker.is-completed.is-error{background:var(--solaris-color-error);border-color:var(--solaris-color-error);color:var(--solaris-color-primary-contrast)}.solaris-stepper__marker.is-current.is-locked,.solaris-stepper__marker.is-completed.is-locked,.solaris-stepper__marker.is-current.is-disabled,.solaris-stepper__marker.is-completed.is-disabled{background:var(--solaris-color-surface-2);border-color:var(--solaris-color-border);color:var(--solaris-color-text-muted)}.solaris-stepper__content{min-width:0}.solaris-stepper.appearance-compact{gap:var(--solaris-space-4)}.solaris-stepper.appearance-compact .solaris-stepper__rail{display:flex;align-items:stretch;overflow-x:auto;gap:var(--solaris-space-4);padding-bottom:var(--solaris-space-1)}.solaris-stepper.appearance-compact .solaris-stepper__node{flex:1 0 auto;min-width:8rem}.solaris-stepper.appearance-compact .solaris-stepper__step{position:relative;padding:0 0 var(--solaris-space-3);gap:var(--solaris-space-1);background:transparent;border:0;border-radius:0;box-shadow:none;align-items:center}.solaris-stepper.appearance-compact .solaris-stepper__step.is-clickable:hover{background:transparent}.solaris-stepper.appearance-compact .solaris-stepper__step:after{content:\"\";position:absolute;left:0;right:0;bottom:-.25rem;height:.75rem;border-radius:var(--solaris-radius-full);background:var(--solaris-color-surface-2)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current:after,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed:after{background:var(--solaris-color-primary)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-warning:after,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-warning:after{background:var(--solaris-color-warning)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-error:after,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-error:after{background:var(--solaris-color-error)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-disabled:after,.solaris-stepper.appearance-compact .solaris-stepper__step.is-locked:after,.solaris-stepper.appearance-compact .solaris-stepper__step.is-pending:after{background:var(--solaris-color-surface-2)}.solaris-stepper.appearance-compact .solaris-stepper__marker{width:auto;height:auto;flex:0 0 auto;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--solaris-color-text-muted);font-size:var(--solaris-fs-12);font-weight:700;line-height:var(--solaris-lh-tight)}.solaris-stepper.appearance-compact .solaris-stepper__meta{display:block}.solaris-stepper.appearance-compact .solaris-stepper__label,.solaris-stepper.appearance-compact .solaris-stepper__description,.solaris-stepper.appearance-compact .solaris-stepper__optional,.solaris-stepper.appearance-compact .solaris-stepper__badge{display:none}.solaris-stepper.appearance-compact .solaris-stepper__title{font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-tight);font-weight:600;color:var(--solaris-color-text-muted);white-space:nowrap}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-current .solaris-stepper__title,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed .solaris-stepper__title{color:color-mix(in srgb,var(--solaris-color-primary) 65%,var(--solaris-color-white))}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-warning .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-warning .solaris-stepper__title,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-warning .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-warning .solaris-stepper__title{color:var(--solaris-color-warning)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-error .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-error .solaris-stepper__title,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-error .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-error .solaris-stepper__title{color:var(--solaris-color-error)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-disabled .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-disabled .solaris-stepper__title,.solaris-stepper.appearance-compact .solaris-stepper__step.is-locked .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-locked .solaris-stepper__title,.solaris-stepper.appearance-compact .solaris-stepper__step.is-pending .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-pending .solaris-stepper__title{color:var(--solaris-color-text-muted)}.solaris-stepper.appearance-compact .solaris-stepper__connector{display:none}@media(max-width:768px){.solaris-stepper.orientation-vertical{grid-template-columns:minmax(0,1fr)}.solaris-stepper.orientation-vertical .solaris-stepper__rail{overflow-x:auto;flex-direction:row;gap:var(--solaris-space-4)}.solaris-stepper.orientation-vertical .solaris-stepper__node,.solaris-stepper.orientation-horizontal .solaris-stepper__node{min-width:10rem}.solaris-stepper.orientation-horizontal .solaris-stepper__connector,.solaris-stepper.orientation-vertical .solaris-stepper__connector{min-width:var(--solaris-space-8);min-height:1px;height:1px;width:auto;margin-left:0;flex:1 1 auto}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SolarisBadge, selector: "solaris-badge", inputs: ["pill", "customTextColor", "interactive", "size", "variant", "color", "aria-hidden"] }, { kind: "pipe", type: SolarisTranslationPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
893
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisStepper, isStandalone: true, selector: "solaris-stepper", inputs: { orientation: "orientation", appearance: "appearance", linear: "linear", interactive: "interactive", activeIndex: "activeIndex", defaultActiveIndex: "defaultActiveIndex", allowBackNavigation: "allowBackNavigation", allowFutureNavigation: "allowFutureNavigation", allowSkip: "allowSkip", renderPanels: "renderPanels", showStateBadges: "showStateBadges" }, outputs: { activeIndexChange: "activeIndexChange", nextChange: "next", previousChange: "previous", stepChange: "stepChange" }, queries: [{ propertyName: "itemsQuery", predicate: SolarisStepperItem }], viewQueries: [{ propertyName: "stepButtons", predicate: ["stepButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"solaris-stepper\" [ngClass]=\"['orientation-' + orientation, 'appearance-' + appearance]\">\n <div class=\"solaris-stepper__rail\" role=\"tablist\" [attr.aria-orientation]=\"orientation\">\n @for (item of items; track trackByIndex($index); let i = $index; let last = $last) {\n <div class=\"solaris-stepper__node\">\n <button\n #stepButton\n type=\"button\"\n role=\"tab\"\n class=\"solaris-stepper__step\"\n [id]=\"item.headerId\"\n [attr.aria-controls]=\"item.panelId\"\n [attr.aria-selected]=\"isCurrent(i)\"\n [attr.aria-current]=\"isCurrent(i) ? 'step' : null\"\n [attr.aria-disabled]=\"item.status === 'disabled' || item.status === 'locked'\"\n [attr.tabindex]=\"isCurrent(i) ? 0 : -1\"\n [ngClass]=\"getStepClasses(item, i)\"\n (click)=\"onStepHeaderClick(i)\"\n (keydown)=\"onStepKeydown($event, i)\"\n >\n <span class=\"solaris-stepper__marker\" [ngClass]=\"getStepClasses(item, i)\">\n @if (getMarkerIcon(item, i)) {\n <i class=\"ph\" [ngClass]=\"getMarkerIcon(item, i)\" aria-hidden=\"true\"></i>\n }\n\n @if (getMarkerText(item, i)) {\n <span>{{ getMarkerText(item, i) }}</span>\n }\n </span>\n\n <span class=\"solaris-stepper__meta\">\n <span class=\"solaris-stepper__label\">\n @if (item.labelKey) {\n {{ item.labelKey | translate }}\n } @else if (item.label) {\n {{ item.label }}\n } @else {\n {{ 'ui.solaris.stepper.step' | translate }} {{ i + 1 }}\n }\n </span>\n\n <span class=\"solaris-stepper__title\">\n @if (item.titleKey) {\n {{ item.titleKey | translate }}\n } @else {\n {{ item.title }}\n }\n </span>\n\n @if (item.descriptionKey || item.description) {\n <span class=\"solaris-stepper__description\">\n @if (item.descriptionKey) {\n {{ item.descriptionKey | translate }}\n } @else {\n {{ item.description }}\n }\n </span>\n }\n\n @if (item.optional) {\n <span class=\"solaris-stepper__optional\">\n {{ 'ui.solaris.stepper.optional' | translate }}\n </span>\n }\n </span>\n\n @if (hasBadge(item, i)) {\n <solaris-badge class=\"solaris-stepper__badge\" [size]=\"item.badgeSize\" [color]=\"getResolvedBadgeColor(item, i)\"\n aria-hidden=\"true\">\n @if (item.badgeTextKey) {\n {{ item.badgeTextKey | translate }}\n } @else if (item.badgeText) {\n {{ item.badgeText }}\n } @else {\n {{ getAutoBadgeTranslationKey(item, i) | translate }}\n }\n </solaris-badge>\n }\n </button>\n\n @if (!last) {\n <span class=\"solaris-stepper__connector\" [ngClass]=\"getConnectorClasses(i)\" aria-hidden=\"true\"></span>\n }\n </div>\n }\n </div>\n\n @if (renderPanels) {\n <div class=\"solaris-stepper__content\">\n <ng-content></ng-content>\n </div>\n }\n</div>\n", styles: [":host{display:block;min-width:0}.solaris-stepper{--solaris-stepper-marker-size: var(--solaris-indicator-size-md);--solaris-stepper-marker-icon-size: var(--solaris-indicator-icon-size-sm);--solaris-stepper-marker-check-size: var(--solaris-indicator-check-size-sm);--solaris-stepper-marker-check-stroke: var(--solaris-indicator-check-stroke-sm);display:grid;gap:var(--solaris-space-6);min-width:0}.solaris-stepper.orientation-horizontal{grid-template-columns:minmax(0,1fr)}.solaris-stepper.orientation-vertical{grid-template-columns:minmax(16rem,20rem) minmax(0,1fr);align-items:start}.solaris-stepper__rail{min-width:0}.solaris-stepper.orientation-horizontal .solaris-stepper__rail{display:flex;align-items:stretch;overflow-x:auto;gap:var(--solaris-space-2);padding-bottom:var(--solaris-space-1)}.solaris-stepper.orientation-vertical .solaris-stepper__rail{display:flex;flex-direction:column;gap:var(--solaris-space-2)}.solaris-stepper__node{min-width:0}.solaris-stepper.orientation-horizontal .solaris-stepper__node{flex:1 1 0;display:flex;align-items:center;min-width:11rem}.solaris-stepper.orientation-vertical .solaris-stepper__node{display:flex;flex-direction:column;align-items:stretch}.solaris-stepper__step{width:100%;min-width:0;display:flex;align-items:flex-start;gap:var(--solaris-space-2);padding:var(--solaris-space-2) var(--solaris-space-3);border:1px solid transparent;background:transparent;border-radius:var(--solaris-radius-md);color:var(--solaris-color-text);text-align:left;transition:background var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),border-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),box-shadow var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-stepper__step.is-clickable{cursor:pointer}.solaris-stepper__step.is-clickable:hover{background:color-mix(in srgb,var(--solaris-color-surface-2) 78%,transparent)}.solaris-stepper__step.is-current{background:color-mix(in srgb,var(--solaris-color-primary) 8%,var(--solaris-color-surface));border-color:color-mix(in srgb,var(--solaris-color-primary) 35%,transparent);box-shadow:var(--solaris-shadow-xs)}.solaris-stepper__step.is-disabled,.solaris-stepper__step.is-locked{opacity:.65;cursor:not-allowed}.solaris-stepper__step:focus-visible{outline:none;box-shadow:0 0 0 .2rem color-mix(in srgb,var(--solaris-color-primary) 28%,transparent),var(--solaris-shadow-xs)}.solaris-stepper__marker{inline-size:var(--solaris-stepper-marker-size);block-size:var(--solaris-stepper-marker-size);min-inline-size:var(--solaris-stepper-marker-size);min-block-size:var(--solaris-stepper-marker-size);aspect-ratio:1/1;display:inline-grid;place-items:center;box-sizing:border-box;line-height:0;border-radius:var(--solaris-indicator-radius);border:var(--solaris-indicator-border-width) solid var(--solaris-indicator-border);background:var(--solaris-indicator-bg);color:var(--solaris-indicator-fg);box-shadow:var(--solaris-indicator-shadow);flex:0 0 var(--solaris-stepper-marker-size);overflow:hidden;font-size:var(--solaris-fs-12);font-weight:700}.solaris-stepper__marker>span{display:inline-grid;place-items:center;inline-size:100%;block-size:100%;line-height:1;text-align:center}.solaris-stepper__marker i{display:inline-grid;place-items:center;inline-size:100%;block-size:100%;margin:0;padding:0;color:currentColor;font-size:var(--solaris-stepper-marker-icon-size);line-height:1;text-align:center}.solaris-stepper__marker i:before{display:block;margin:0;line-height:1}.solaris-stepper__marker i.ph-check{font-size:var(--solaris-stepper-marker-check-size);font-weight:700;-webkit-text-stroke:var(--solaris-stepper-marker-check-stroke) currentColor}.solaris-stepper__marker.is-current{background:var(--solaris-color-primary);border-color:var(--solaris-color-primary);color:var(--solaris-color-primary-contrast)}.solaris-stepper__marker.is-completed{background:var(--solaris-color-success);border-color:var(--solaris-color-success);color:var(--solaris-color-primary-contrast)}.solaris-stepper__marker.is-warning{border-color:var(--solaris-color-warning);color:var(--solaris-color-warning)}.solaris-stepper__marker.is-error{border-color:var(--solaris-color-error);color:var(--solaris-color-error)}.solaris-stepper__marker.is-locked,.solaris-stepper__marker.is-disabled{background:var(--solaris-color-surface-2);border-color:var(--solaris-color-border);color:var(--solaris-color-text-muted)}.solaris-stepper__meta{display:grid;gap:var(--solaris-space-1);min-width:0;flex:1 1 auto}.solaris-stepper__label{color:var(--solaris-color-text-muted);font-size:var(--solaris-fs-10);line-height:var(--solaris-lh-tight);letter-spacing:var(--solaris-ls-lg);text-transform:uppercase;font-weight:700}.solaris-stepper__title{color:var(--solaris-color-text);font-size:var(--solaris-fs-14);line-height:var(--solaris-lh-normal);font-weight:700}.solaris-stepper__description{color:var(--solaris-color-text-muted);font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-relaxed)}.solaris-stepper__optional{color:var(--solaris-color-text-muted);font-size:var(--solaris-fs-10);line-height:var(--solaris-lh-tight)}.solaris-stepper__badge{align-self:flex-start}.solaris-stepper__connector{background:var(--solaris-color-border);opacity:.8}.solaris-stepper.orientation-horizontal .solaris-stepper__connector{height:1px;flex:1 1 auto;min-width:var(--solaris-space-10)}.solaris-stepper.orientation-vertical .solaris-stepper__connector{width:1px;min-height:var(--solaris-space-8);margin-left:calc(var(--solaris-space-3) + 1rem)}.solaris-stepper__connector.is-completed,.solaris-stepper__connector.is-current{background:color-mix(in srgb,var(--solaris-color-primary) 75%,var(--solaris-color-success))}.solaris-stepper__step.is-current.is-warning,.solaris-stepper__step.is-completed.is-warning{background:color-mix(in srgb,var(--solaris-color-warning) 10%,var(--solaris-color-surface));border-color:color-mix(in srgb,var(--solaris-color-warning) 45%,transparent);box-shadow:var(--solaris-shadow-xs)}.solaris-stepper__step.is-current.is-error,.solaris-stepper__step.is-completed.is-error{background:color-mix(in srgb,var(--solaris-color-error) 10%,var(--solaris-color-surface));border-color:color-mix(in srgb,var(--solaris-color-error) 45%,transparent);box-shadow:var(--solaris-shadow-xs)}.solaris-stepper__step.is-current.is-locked,.solaris-stepper__step.is-completed.is-locked,.solaris-stepper__step.is-current.is-disabled,.solaris-stepper__step.is-completed.is-disabled{background:color-mix(in srgb,var(--solaris-color-surface-2) 65%,transparent);border-color:var(--solaris-color-border);box-shadow:none}.solaris-stepper__marker.is-current.is-warning,.solaris-stepper__marker.is-completed.is-warning{background:var(--solaris-color-warning);border-color:var(--solaris-color-warning);color:var(--solaris-color-primary-contrast)}.solaris-stepper__marker.is-current.is-error,.solaris-stepper__marker.is-completed.is-error{background:var(--solaris-color-error);border-color:var(--solaris-color-error);color:var(--solaris-color-primary-contrast)}.solaris-stepper__marker.is-current.is-locked,.solaris-stepper__marker.is-completed.is-locked,.solaris-stepper__marker.is-current.is-disabled,.solaris-stepper__marker.is-completed.is-disabled{background:var(--solaris-color-surface-2);border-color:var(--solaris-color-border);color:var(--solaris-color-text-muted)}.solaris-stepper__content{min-width:0}.solaris-stepper.appearance-compact{gap:var(--solaris-space-4)}.solaris-stepper.appearance-compact .solaris-stepper__rail{display:flex;align-items:stretch;overflow-x:auto;gap:var(--solaris-space-4);padding-bottom:var(--solaris-space-1)}.solaris-stepper.appearance-compact .solaris-stepper__node{flex:1 0 auto;min-width:8rem}.solaris-stepper.appearance-compact .solaris-stepper__step{position:relative;padding:0 0 var(--solaris-space-3);gap:var(--solaris-space-1);background:transparent;border:0;border-radius:0;box-shadow:none;align-items:center}.solaris-stepper.appearance-compact .solaris-stepper__step.is-clickable:hover{background:transparent}.solaris-stepper.appearance-compact .solaris-stepper__step:after{content:\"\";position:absolute;left:0;right:0;bottom:-.25rem;height:.75rem;border-radius:var(--solaris-radius-full);background:var(--solaris-color-surface-2)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current:after,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed:after{background:var(--solaris-color-primary)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-warning:after,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-warning:after{background:var(--solaris-color-warning)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-error:after,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-error:after{background:var(--solaris-color-error)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-disabled:after,.solaris-stepper.appearance-compact .solaris-stepper__step.is-locked:after,.solaris-stepper.appearance-compact .solaris-stepper__step.is-pending:after{background:var(--solaris-color-surface-2)}.solaris-stepper.appearance-compact .solaris-stepper__marker{inline-size:auto;block-size:auto;min-inline-size:auto;min-block-size:auto;flex:0 0 auto;aspect-ratio:auto;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--solaris-color-text-muted);font-size:var(--solaris-fs-12);font-weight:700;line-height:var(--solaris-lh-tight)}.solaris-stepper.appearance-compact .solaris-stepper__meta{display:block}.solaris-stepper.appearance-compact .solaris-stepper__label,.solaris-stepper.appearance-compact .solaris-stepper__description,.solaris-stepper.appearance-compact .solaris-stepper__optional,.solaris-stepper.appearance-compact .solaris-stepper__badge{display:none}.solaris-stepper.appearance-compact .solaris-stepper__title{font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-tight);font-weight:600;color:var(--solaris-color-text-muted);white-space:nowrap}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-current .solaris-stepper__title,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed .solaris-stepper__title{color:color-mix(in srgb,var(--solaris-color-primary) 65%,var(--solaris-color-white))}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-warning .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-warning .solaris-stepper__title,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-warning .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-warning .solaris-stepper__title{color:var(--solaris-color-warning)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-error .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-error .solaris-stepper__title,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-error .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-error .solaris-stepper__title{color:var(--solaris-color-error)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-disabled .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-disabled .solaris-stepper__title,.solaris-stepper.appearance-compact .solaris-stepper__step.is-locked .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-locked .solaris-stepper__title,.solaris-stepper.appearance-compact .solaris-stepper__step.is-pending .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-pending .solaris-stepper__title{color:var(--solaris-color-text-muted)}.solaris-stepper.appearance-compact .solaris-stepper__connector{display:none}@media(max-width:768px){.solaris-stepper.orientation-vertical{grid-template-columns:minmax(0,1fr)}.solaris-stepper.orientation-vertical .solaris-stepper__rail{overflow-x:auto;flex-direction:row;gap:var(--solaris-space-4)}.solaris-stepper.orientation-vertical .solaris-stepper__node,.solaris-stepper.orientation-horizontal .solaris-stepper__node{min-width:10rem}.solaris-stepper.orientation-horizontal .solaris-stepper__connector,.solaris-stepper.orientation-vertical .solaris-stepper__connector{min-width:var(--solaris-space-8);min-height:1px;height:1px;width:auto;margin-left:0;flex:1 1 auto}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SolarisBadge, selector: "solaris-badge", inputs: ["shape", "size", "density", "color", "appearance", "customTextColor", "interactive", "aria-hidden"] }, { kind: "pipe", type: SolarisTranslationPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
915
894
  }
916
895
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisStepper, decorators: [{
917
896
  type: Component,
918
- args: [{ selector: 'solaris-stepper', standalone: true, imports: [CommonModule, SolarisTranslationPipe, SolarisBadge], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"solaris-stepper\" [ngClass]=\"['orientation-' + orientation, 'appearance-' + appearance]\">\n <div class=\"solaris-stepper__rail\" role=\"tablist\" [attr.aria-orientation]=\"orientation\">\n @for (item of items; track trackByIndex($index); let i = $index; let last = $last) {\n <div class=\"solaris-stepper__node\">\n <button\n #stepButton\n type=\"button\"\n role=\"tab\"\n class=\"solaris-stepper__step\"\n [id]=\"item.headerId\"\n [attr.aria-controls]=\"item.panelId\"\n [attr.aria-selected]=\"isCurrent(i)\"\n [attr.aria-current]=\"isCurrent(i) ? 'step' : null\"\n [attr.aria-disabled]=\"item.status === 'disabled' || item.status === 'locked'\"\n [attr.tabindex]=\"isCurrent(i) ? 0 : -1\"\n [ngClass]=\"getStepClasses(item, i)\"\n (click)=\"onStepHeaderClick(i)\"\n (keydown)=\"onStepKeydown($event, i)\"\n >\n <span class=\"solaris-stepper__marker\" [ngClass]=\"getStepClasses(item, i)\">\n @if (getMarkerIcon(item, i)) {\n <i class=\"ph\" [ngClass]=\"getMarkerIcon(item, i)\" aria-hidden=\"true\"></i>\n }\n\n @if (getMarkerText(item, i)) {\n <span>{{ getMarkerText(item, i) }}</span>\n }\n </span>\n\n <span class=\"solaris-stepper__meta\">\n <span class=\"solaris-stepper__label\">\n @if (item.labelKey) {\n {{ item.labelKey | translate }}\n } @else if (item.label) {\n {{ item.label }}\n } @else {\n {{ 'ui.solaris.stepper.step' | translate }} {{ i + 1 }}\n }\n </span>\n\n <span class=\"solaris-stepper__title\">\n @if (item.titleKey) {\n {{ item.titleKey | translate }}\n } @else {\n {{ item.title }}\n }\n </span>\n\n @if (item.descriptionKey || item.description) {\n <span class=\"solaris-stepper__description\">\n @if (item.descriptionKey) {\n {{ item.descriptionKey | translate }}\n } @else {\n {{ item.description }}\n }\n </span>\n }\n\n @if (item.optional) {\n <span class=\"solaris-stepper__optional\">\n {{ 'ui.solaris.stepper.optional' | translate }}\n </span>\n }\n </span>\n\n @if (hasBadge(item, i)) {\n <solaris-badge\n class=\"solaris-stepper__badge\"\n [pill]=\"item.badgePill\"\n [size]=\"item.badgeSize\"\n [variant]=\"getResolvedBadgeVariant(item)\"\n [color]=\"getResolvedBadgeColor(item, i)\"\n aria-hidden=\"true\"\n >\n @if (item.badgeTextKey) {\n {{ item.badgeTextKey | translate }}\n } @else if (item.badgeText) {\n {{ item.badgeText }}\n } @else {\n {{ getAutoBadgeTranslationKey(item, i) | translate }}\n }\n </solaris-badge>\n }\n </button>\n\n @if (!last) {\n <span\n class=\"solaris-stepper__connector\"\n [ngClass]=\"getConnectorClasses(i)\"\n aria-hidden=\"true\"\n ></span>\n }\n </div>\n }\n </div>\n\n @if (renderPanels) {\n <div class=\"solaris-stepper__content\">\n <ng-content></ng-content>\n </div>\n }\n</div>\n", styles: [":host{display:block;min-width:0}.solaris-stepper{display:grid;gap:var(--solaris-space-6);min-width:0}.solaris-stepper.orientation-horizontal{grid-template-columns:minmax(0,1fr)}.solaris-stepper.orientation-vertical{grid-template-columns:minmax(16rem,20rem) minmax(0,1fr);align-items:start}.solaris-stepper__rail{min-width:0}.solaris-stepper.orientation-horizontal .solaris-stepper__rail{display:flex;align-items:stretch;overflow-x:auto;gap:var(--solaris-space-2);padding-bottom:var(--solaris-space-1)}.solaris-stepper.orientation-vertical .solaris-stepper__rail{display:flex;flex-direction:column;gap:var(--solaris-space-2)}.solaris-stepper__node{min-width:0}.solaris-stepper.orientation-horizontal .solaris-stepper__node{flex:1 1 0;display:flex;align-items:center;min-width:11rem}.solaris-stepper.orientation-vertical .solaris-stepper__node{display:flex;flex-direction:column;align-items:stretch}.solaris-stepper__step{width:100%;min-width:0;display:flex;align-items:flex-start;gap:var(--solaris-space-2);padding:var(--solaris-space-2) var(--solaris-space-3);border:1px solid transparent;background:transparent;border-radius:var(--solaris-radius-md);color:var(--solaris-color-text);text-align:left;transition:background var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),border-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),box-shadow var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-stepper__step.is-clickable{cursor:pointer}.solaris-stepper__step.is-clickable:hover{background:color-mix(in srgb,var(--solaris-color-surface-2) 78%,transparent)}.solaris-stepper__step.is-current{background:color-mix(in srgb,var(--solaris-color-primary) 8%,var(--solaris-color-surface));border-color:color-mix(in srgb,var(--solaris-color-primary) 35%,transparent);box-shadow:var(--solaris-shadow-xs)}.solaris-stepper__step.is-disabled,.solaris-stepper__step.is-locked{opacity:.65;cursor:not-allowed}.solaris-stepper__step:focus-visible{outline:none;box-shadow:0 0 0 .2rem color-mix(in srgb,var(--solaris-color-primary) 28%,transparent),var(--solaris-shadow-xs)}.solaris-stepper__marker{width:2rem;height:2rem;flex:0 0 2rem;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--solaris-radius-full);border:1px solid var(--solaris-color-border);background:var(--solaris-color-surface);color:var(--solaris-color-text);font-size:var(--solaris-fs-12);font-weight:700;line-height:1;box-shadow:var(--solaris-shadow-xs)}.solaris-stepper__marker.is-current{background:var(--solaris-color-primary);border-color:var(--solaris-color-primary);color:var(--solaris-color-primary-contrast)}.solaris-stepper__marker.is-completed{background:var(--solaris-color-success);border-color:var(--solaris-color-success);color:var(--solaris-color-primary-contrast)}.solaris-stepper__marker.is-warning{border-color:var(--solaris-color-warning);color:var(--solaris-color-warning)}.solaris-stepper__marker.is-error{border-color:var(--solaris-color-error);color:var(--solaris-color-error)}.solaris-stepper__marker.is-locked,.solaris-stepper__marker.is-disabled{background:var(--solaris-color-surface-2);border-color:var(--solaris-color-border);color:var(--solaris-color-text-muted)}.solaris-stepper__meta{display:grid;gap:var(--solaris-space-1);min-width:0;flex:1 1 auto}.solaris-stepper__label{color:var(--solaris-color-text-muted);font-size:var(--solaris-fs-10);line-height:var(--solaris-lh-tight);letter-spacing:var(--solaris-ls-lg);text-transform:uppercase;font-weight:700}.solaris-stepper__title{color:var(--solaris-color-text);font-size:var(--solaris-fs-14);line-height:var(--solaris-lh-normal);font-weight:700}.solaris-stepper__description{color:var(--solaris-color-text-muted);font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-relaxed)}.solaris-stepper__optional{color:var(--solaris-color-text-muted);font-size:var(--solaris-fs-10);line-height:var(--solaris-lh-tight)}.solaris-stepper__badge{align-self:flex-start}.solaris-stepper__connector{background:var(--solaris-color-border);opacity:.8}.solaris-stepper.orientation-horizontal .solaris-stepper__connector{height:1px;flex:1 1 auto;min-width:var(--solaris-space-10)}.solaris-stepper.orientation-vertical .solaris-stepper__connector{width:1px;min-height:var(--solaris-space-8);margin-left:calc(var(--solaris-space-3) + 1rem)}.solaris-stepper__connector.is-completed,.solaris-stepper__connector.is-current{background:color-mix(in srgb,var(--solaris-color-primary) 75%,var(--solaris-color-success))}.solaris-stepper__step.is-current.is-warning,.solaris-stepper__step.is-completed.is-warning{background:color-mix(in srgb,var(--solaris-color-warning) 10%,var(--solaris-color-surface));border-color:color-mix(in srgb,var(--solaris-color-warning) 45%,transparent);box-shadow:var(--solaris-shadow-xs)}.solaris-stepper__step.is-current.is-error,.solaris-stepper__step.is-completed.is-error{background:color-mix(in srgb,var(--solaris-color-error) 10%,var(--solaris-color-surface));border-color:color-mix(in srgb,var(--solaris-color-error) 45%,transparent);box-shadow:var(--solaris-shadow-xs)}.solaris-stepper__step.is-current.is-locked,.solaris-stepper__step.is-completed.is-locked,.solaris-stepper__step.is-current.is-disabled,.solaris-stepper__step.is-completed.is-disabled{background:color-mix(in srgb,var(--solaris-color-surface-2) 65%,transparent);border-color:var(--solaris-color-border);box-shadow:none}.solaris-stepper__marker.is-current.is-warning,.solaris-stepper__marker.is-completed.is-warning{background:var(--solaris-color-warning);border-color:var(--solaris-color-warning);color:var(--solaris-color-primary-contrast)}.solaris-stepper__marker.is-current.is-error,.solaris-stepper__marker.is-completed.is-error{background:var(--solaris-color-error);border-color:var(--solaris-color-error);color:var(--solaris-color-primary-contrast)}.solaris-stepper__marker.is-current.is-locked,.solaris-stepper__marker.is-completed.is-locked,.solaris-stepper__marker.is-current.is-disabled,.solaris-stepper__marker.is-completed.is-disabled{background:var(--solaris-color-surface-2);border-color:var(--solaris-color-border);color:var(--solaris-color-text-muted)}.solaris-stepper__content{min-width:0}.solaris-stepper.appearance-compact{gap:var(--solaris-space-4)}.solaris-stepper.appearance-compact .solaris-stepper__rail{display:flex;align-items:stretch;overflow-x:auto;gap:var(--solaris-space-4);padding-bottom:var(--solaris-space-1)}.solaris-stepper.appearance-compact .solaris-stepper__node{flex:1 0 auto;min-width:8rem}.solaris-stepper.appearance-compact .solaris-stepper__step{position:relative;padding:0 0 var(--solaris-space-3);gap:var(--solaris-space-1);background:transparent;border:0;border-radius:0;box-shadow:none;align-items:center}.solaris-stepper.appearance-compact .solaris-stepper__step.is-clickable:hover{background:transparent}.solaris-stepper.appearance-compact .solaris-stepper__step:after{content:\"\";position:absolute;left:0;right:0;bottom:-.25rem;height:.75rem;border-radius:var(--solaris-radius-full);background:var(--solaris-color-surface-2)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current:after,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed:after{background:var(--solaris-color-primary)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-warning:after,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-warning:after{background:var(--solaris-color-warning)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-error:after,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-error:after{background:var(--solaris-color-error)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-disabled:after,.solaris-stepper.appearance-compact .solaris-stepper__step.is-locked:after,.solaris-stepper.appearance-compact .solaris-stepper__step.is-pending:after{background:var(--solaris-color-surface-2)}.solaris-stepper.appearance-compact .solaris-stepper__marker{width:auto;height:auto;flex:0 0 auto;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--solaris-color-text-muted);font-size:var(--solaris-fs-12);font-weight:700;line-height:var(--solaris-lh-tight)}.solaris-stepper.appearance-compact .solaris-stepper__meta{display:block}.solaris-stepper.appearance-compact .solaris-stepper__label,.solaris-stepper.appearance-compact .solaris-stepper__description,.solaris-stepper.appearance-compact .solaris-stepper__optional,.solaris-stepper.appearance-compact .solaris-stepper__badge{display:none}.solaris-stepper.appearance-compact .solaris-stepper__title{font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-tight);font-weight:600;color:var(--solaris-color-text-muted);white-space:nowrap}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-current .solaris-stepper__title,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed .solaris-stepper__title{color:color-mix(in srgb,var(--solaris-color-primary) 65%,var(--solaris-color-white))}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-warning .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-warning .solaris-stepper__title,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-warning .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-warning .solaris-stepper__title{color:var(--solaris-color-warning)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-error .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-error .solaris-stepper__title,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-error .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-error .solaris-stepper__title{color:var(--solaris-color-error)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-disabled .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-disabled .solaris-stepper__title,.solaris-stepper.appearance-compact .solaris-stepper__step.is-locked .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-locked .solaris-stepper__title,.solaris-stepper.appearance-compact .solaris-stepper__step.is-pending .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-pending .solaris-stepper__title{color:var(--solaris-color-text-muted)}.solaris-stepper.appearance-compact .solaris-stepper__connector{display:none}@media(max-width:768px){.solaris-stepper.orientation-vertical{grid-template-columns:minmax(0,1fr)}.solaris-stepper.orientation-vertical .solaris-stepper__rail{overflow-x:auto;flex-direction:row;gap:var(--solaris-space-4)}.solaris-stepper.orientation-vertical .solaris-stepper__node,.solaris-stepper.orientation-horizontal .solaris-stepper__node{min-width:10rem}.solaris-stepper.orientation-horizontal .solaris-stepper__connector,.solaris-stepper.orientation-vertical .solaris-stepper__connector{min-width:var(--solaris-space-8);min-height:1px;height:1px;width:auto;margin-left:0;flex:1 1 auto}}\n"] }]
897
+ args: [{ selector: 'solaris-stepper', standalone: true, imports: [CommonModule, SolarisTranslationPipe, SolarisBadge], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"solaris-stepper\" [ngClass]=\"['orientation-' + orientation, 'appearance-' + appearance]\">\n <div class=\"solaris-stepper__rail\" role=\"tablist\" [attr.aria-orientation]=\"orientation\">\n @for (item of items; track trackByIndex($index); let i = $index; let last = $last) {\n <div class=\"solaris-stepper__node\">\n <button\n #stepButton\n type=\"button\"\n role=\"tab\"\n class=\"solaris-stepper__step\"\n [id]=\"item.headerId\"\n [attr.aria-controls]=\"item.panelId\"\n [attr.aria-selected]=\"isCurrent(i)\"\n [attr.aria-current]=\"isCurrent(i) ? 'step' : null\"\n [attr.aria-disabled]=\"item.status === 'disabled' || item.status === 'locked'\"\n [attr.tabindex]=\"isCurrent(i) ? 0 : -1\"\n [ngClass]=\"getStepClasses(item, i)\"\n (click)=\"onStepHeaderClick(i)\"\n (keydown)=\"onStepKeydown($event, i)\"\n >\n <span class=\"solaris-stepper__marker\" [ngClass]=\"getStepClasses(item, i)\">\n @if (getMarkerIcon(item, i)) {\n <i class=\"ph\" [ngClass]=\"getMarkerIcon(item, i)\" aria-hidden=\"true\"></i>\n }\n\n @if (getMarkerText(item, i)) {\n <span>{{ getMarkerText(item, i) }}</span>\n }\n </span>\n\n <span class=\"solaris-stepper__meta\">\n <span class=\"solaris-stepper__label\">\n @if (item.labelKey) {\n {{ item.labelKey | translate }}\n } @else if (item.label) {\n {{ item.label }}\n } @else {\n {{ 'ui.solaris.stepper.step' | translate }} {{ i + 1 }}\n }\n </span>\n\n <span class=\"solaris-stepper__title\">\n @if (item.titleKey) {\n {{ item.titleKey | translate }}\n } @else {\n {{ item.title }}\n }\n </span>\n\n @if (item.descriptionKey || item.description) {\n <span class=\"solaris-stepper__description\">\n @if (item.descriptionKey) {\n {{ item.descriptionKey | translate }}\n } @else {\n {{ item.description }}\n }\n </span>\n }\n\n @if (item.optional) {\n <span class=\"solaris-stepper__optional\">\n {{ 'ui.solaris.stepper.optional' | translate }}\n </span>\n }\n </span>\n\n @if (hasBadge(item, i)) {\n <solaris-badge class=\"solaris-stepper__badge\" [size]=\"item.badgeSize\" [color]=\"getResolvedBadgeColor(item, i)\"\n aria-hidden=\"true\">\n @if (item.badgeTextKey) {\n {{ item.badgeTextKey | translate }}\n } @else if (item.badgeText) {\n {{ item.badgeText }}\n } @else {\n {{ getAutoBadgeTranslationKey(item, i) | translate }}\n }\n </solaris-badge>\n }\n </button>\n\n @if (!last) {\n <span class=\"solaris-stepper__connector\" [ngClass]=\"getConnectorClasses(i)\" aria-hidden=\"true\"></span>\n }\n </div>\n }\n </div>\n\n @if (renderPanels) {\n <div class=\"solaris-stepper__content\">\n <ng-content></ng-content>\n </div>\n }\n</div>\n", styles: [":host{display:block;min-width:0}.solaris-stepper{--solaris-stepper-marker-size: var(--solaris-indicator-size-md);--solaris-stepper-marker-icon-size: var(--solaris-indicator-icon-size-sm);--solaris-stepper-marker-check-size: var(--solaris-indicator-check-size-sm);--solaris-stepper-marker-check-stroke: var(--solaris-indicator-check-stroke-sm);display:grid;gap:var(--solaris-space-6);min-width:0}.solaris-stepper.orientation-horizontal{grid-template-columns:minmax(0,1fr)}.solaris-stepper.orientation-vertical{grid-template-columns:minmax(16rem,20rem) minmax(0,1fr);align-items:start}.solaris-stepper__rail{min-width:0}.solaris-stepper.orientation-horizontal .solaris-stepper__rail{display:flex;align-items:stretch;overflow-x:auto;gap:var(--solaris-space-2);padding-bottom:var(--solaris-space-1)}.solaris-stepper.orientation-vertical .solaris-stepper__rail{display:flex;flex-direction:column;gap:var(--solaris-space-2)}.solaris-stepper__node{min-width:0}.solaris-stepper.orientation-horizontal .solaris-stepper__node{flex:1 1 0;display:flex;align-items:center;min-width:11rem}.solaris-stepper.orientation-vertical .solaris-stepper__node{display:flex;flex-direction:column;align-items:stretch}.solaris-stepper__step{width:100%;min-width:0;display:flex;align-items:flex-start;gap:var(--solaris-space-2);padding:var(--solaris-space-2) var(--solaris-space-3);border:1px solid transparent;background:transparent;border-radius:var(--solaris-radius-md);color:var(--solaris-color-text);text-align:left;transition:background var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),border-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),box-shadow var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-stepper__step.is-clickable{cursor:pointer}.solaris-stepper__step.is-clickable:hover{background:color-mix(in srgb,var(--solaris-color-surface-2) 78%,transparent)}.solaris-stepper__step.is-current{background:color-mix(in srgb,var(--solaris-color-primary) 8%,var(--solaris-color-surface));border-color:color-mix(in srgb,var(--solaris-color-primary) 35%,transparent);box-shadow:var(--solaris-shadow-xs)}.solaris-stepper__step.is-disabled,.solaris-stepper__step.is-locked{opacity:.65;cursor:not-allowed}.solaris-stepper__step:focus-visible{outline:none;box-shadow:0 0 0 .2rem color-mix(in srgb,var(--solaris-color-primary) 28%,transparent),var(--solaris-shadow-xs)}.solaris-stepper__marker{inline-size:var(--solaris-stepper-marker-size);block-size:var(--solaris-stepper-marker-size);min-inline-size:var(--solaris-stepper-marker-size);min-block-size:var(--solaris-stepper-marker-size);aspect-ratio:1/1;display:inline-grid;place-items:center;box-sizing:border-box;line-height:0;border-radius:var(--solaris-indicator-radius);border:var(--solaris-indicator-border-width) solid var(--solaris-indicator-border);background:var(--solaris-indicator-bg);color:var(--solaris-indicator-fg);box-shadow:var(--solaris-indicator-shadow);flex:0 0 var(--solaris-stepper-marker-size);overflow:hidden;font-size:var(--solaris-fs-12);font-weight:700}.solaris-stepper__marker>span{display:inline-grid;place-items:center;inline-size:100%;block-size:100%;line-height:1;text-align:center}.solaris-stepper__marker i{display:inline-grid;place-items:center;inline-size:100%;block-size:100%;margin:0;padding:0;color:currentColor;font-size:var(--solaris-stepper-marker-icon-size);line-height:1;text-align:center}.solaris-stepper__marker i:before{display:block;margin:0;line-height:1}.solaris-stepper__marker i.ph-check{font-size:var(--solaris-stepper-marker-check-size);font-weight:700;-webkit-text-stroke:var(--solaris-stepper-marker-check-stroke) currentColor}.solaris-stepper__marker.is-current{background:var(--solaris-color-primary);border-color:var(--solaris-color-primary);color:var(--solaris-color-primary-contrast)}.solaris-stepper__marker.is-completed{background:var(--solaris-color-success);border-color:var(--solaris-color-success);color:var(--solaris-color-primary-contrast)}.solaris-stepper__marker.is-warning{border-color:var(--solaris-color-warning);color:var(--solaris-color-warning)}.solaris-stepper__marker.is-error{border-color:var(--solaris-color-error);color:var(--solaris-color-error)}.solaris-stepper__marker.is-locked,.solaris-stepper__marker.is-disabled{background:var(--solaris-color-surface-2);border-color:var(--solaris-color-border);color:var(--solaris-color-text-muted)}.solaris-stepper__meta{display:grid;gap:var(--solaris-space-1);min-width:0;flex:1 1 auto}.solaris-stepper__label{color:var(--solaris-color-text-muted);font-size:var(--solaris-fs-10);line-height:var(--solaris-lh-tight);letter-spacing:var(--solaris-ls-lg);text-transform:uppercase;font-weight:700}.solaris-stepper__title{color:var(--solaris-color-text);font-size:var(--solaris-fs-14);line-height:var(--solaris-lh-normal);font-weight:700}.solaris-stepper__description{color:var(--solaris-color-text-muted);font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-relaxed)}.solaris-stepper__optional{color:var(--solaris-color-text-muted);font-size:var(--solaris-fs-10);line-height:var(--solaris-lh-tight)}.solaris-stepper__badge{align-self:flex-start}.solaris-stepper__connector{background:var(--solaris-color-border);opacity:.8}.solaris-stepper.orientation-horizontal .solaris-stepper__connector{height:1px;flex:1 1 auto;min-width:var(--solaris-space-10)}.solaris-stepper.orientation-vertical .solaris-stepper__connector{width:1px;min-height:var(--solaris-space-8);margin-left:calc(var(--solaris-space-3) + 1rem)}.solaris-stepper__connector.is-completed,.solaris-stepper__connector.is-current{background:color-mix(in srgb,var(--solaris-color-primary) 75%,var(--solaris-color-success))}.solaris-stepper__step.is-current.is-warning,.solaris-stepper__step.is-completed.is-warning{background:color-mix(in srgb,var(--solaris-color-warning) 10%,var(--solaris-color-surface));border-color:color-mix(in srgb,var(--solaris-color-warning) 45%,transparent);box-shadow:var(--solaris-shadow-xs)}.solaris-stepper__step.is-current.is-error,.solaris-stepper__step.is-completed.is-error{background:color-mix(in srgb,var(--solaris-color-error) 10%,var(--solaris-color-surface));border-color:color-mix(in srgb,var(--solaris-color-error) 45%,transparent);box-shadow:var(--solaris-shadow-xs)}.solaris-stepper__step.is-current.is-locked,.solaris-stepper__step.is-completed.is-locked,.solaris-stepper__step.is-current.is-disabled,.solaris-stepper__step.is-completed.is-disabled{background:color-mix(in srgb,var(--solaris-color-surface-2) 65%,transparent);border-color:var(--solaris-color-border);box-shadow:none}.solaris-stepper__marker.is-current.is-warning,.solaris-stepper__marker.is-completed.is-warning{background:var(--solaris-color-warning);border-color:var(--solaris-color-warning);color:var(--solaris-color-primary-contrast)}.solaris-stepper__marker.is-current.is-error,.solaris-stepper__marker.is-completed.is-error{background:var(--solaris-color-error);border-color:var(--solaris-color-error);color:var(--solaris-color-primary-contrast)}.solaris-stepper__marker.is-current.is-locked,.solaris-stepper__marker.is-completed.is-locked,.solaris-stepper__marker.is-current.is-disabled,.solaris-stepper__marker.is-completed.is-disabled{background:var(--solaris-color-surface-2);border-color:var(--solaris-color-border);color:var(--solaris-color-text-muted)}.solaris-stepper__content{min-width:0}.solaris-stepper.appearance-compact{gap:var(--solaris-space-4)}.solaris-stepper.appearance-compact .solaris-stepper__rail{display:flex;align-items:stretch;overflow-x:auto;gap:var(--solaris-space-4);padding-bottom:var(--solaris-space-1)}.solaris-stepper.appearance-compact .solaris-stepper__node{flex:1 0 auto;min-width:8rem}.solaris-stepper.appearance-compact .solaris-stepper__step{position:relative;padding:0 0 var(--solaris-space-3);gap:var(--solaris-space-1);background:transparent;border:0;border-radius:0;box-shadow:none;align-items:center}.solaris-stepper.appearance-compact .solaris-stepper__step.is-clickable:hover{background:transparent}.solaris-stepper.appearance-compact .solaris-stepper__step:after{content:\"\";position:absolute;left:0;right:0;bottom:-.25rem;height:.75rem;border-radius:var(--solaris-radius-full);background:var(--solaris-color-surface-2)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current:after,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed:after{background:var(--solaris-color-primary)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-warning:after,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-warning:after{background:var(--solaris-color-warning)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-error:after,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-error:after{background:var(--solaris-color-error)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-disabled:after,.solaris-stepper.appearance-compact .solaris-stepper__step.is-locked:after,.solaris-stepper.appearance-compact .solaris-stepper__step.is-pending:after{background:var(--solaris-color-surface-2)}.solaris-stepper.appearance-compact .solaris-stepper__marker{inline-size:auto;block-size:auto;min-inline-size:auto;min-block-size:auto;flex:0 0 auto;aspect-ratio:auto;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--solaris-color-text-muted);font-size:var(--solaris-fs-12);font-weight:700;line-height:var(--solaris-lh-tight)}.solaris-stepper.appearance-compact .solaris-stepper__meta{display:block}.solaris-stepper.appearance-compact .solaris-stepper__label,.solaris-stepper.appearance-compact .solaris-stepper__description,.solaris-stepper.appearance-compact .solaris-stepper__optional,.solaris-stepper.appearance-compact .solaris-stepper__badge{display:none}.solaris-stepper.appearance-compact .solaris-stepper__title{font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-tight);font-weight:600;color:var(--solaris-color-text-muted);white-space:nowrap}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-current .solaris-stepper__title,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed .solaris-stepper__title{color:color-mix(in srgb,var(--solaris-color-primary) 65%,var(--solaris-color-white))}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-warning .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-warning .solaris-stepper__title,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-warning .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-warning .solaris-stepper__title{color:var(--solaris-color-warning)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-error .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-error .solaris-stepper__title,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-error .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-error .solaris-stepper__title{color:var(--solaris-color-error)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-disabled .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-disabled .solaris-stepper__title,.solaris-stepper.appearance-compact .solaris-stepper__step.is-locked .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-locked .solaris-stepper__title,.solaris-stepper.appearance-compact .solaris-stepper__step.is-pending .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-pending .solaris-stepper__title{color:var(--solaris-color-text-muted)}.solaris-stepper.appearance-compact .solaris-stepper__connector{display:none}@media(max-width:768px){.solaris-stepper.orientation-vertical{grid-template-columns:minmax(0,1fr)}.solaris-stepper.orientation-vertical .solaris-stepper__rail{overflow-x:auto;flex-direction:row;gap:var(--solaris-space-4)}.solaris-stepper.orientation-vertical .solaris-stepper__node,.solaris-stepper.orientation-horizontal .solaris-stepper__node{min-width:10rem}.solaris-stepper.orientation-horizontal .solaris-stepper__connector,.solaris-stepper.orientation-vertical .solaris-stepper__connector{min-width:var(--solaris-space-8);min-height:1px;height:1px;width:auto;margin-left:0;flex:1 1 auto}}\n"] }]
919
898
  }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { orientation: [{
920
899
  type: Input
921
900
  }], appearance: [{
@@ -3622,11 +3601,11 @@ class SolarisDialogStepsContainer {
3622
3601
  this.resizeObserver.observe(element);
3623
3602
  }
3624
3603
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisDialogStepsContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
3625
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisDialogStepsContainer, isStandalone: true, selector: "solaris-dialog-steps-container", viewQueries: [{ propertyName: "stepElements", predicate: ["stepElement"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n class=\"solaris-dialog-steps\"\n [class.is-transitioning]=\"transitioning()\"\n [class.is-halfway]=\"transitionHalfway()\"\n [class.has-transition-blur]=\"transitionBlur\"\n [style.--solaris-dialog-steps-min-height]=\"contentMinHeight\"\n [style.--solaris-dialog-steps-active-height]=\"activeStepHeight()\"\n>\n @if (showProgress) {\n <div class=\"solaris-dialog-steps__progress\" aria-hidden=\"true\">\n @for (step of steps; track step.key; let index = $index) {\n <span\n class=\"solaris-dialog-steps__dot\"\n [class.is-active]=\"index === currentStepIndex()\"\n [class.is-complete]=\"index < currentStepIndex()\"\n ></span>\n }\n </div>\n }\n\n <div class=\"solaris-dialog-steps__viewport\">\n <div\n class=\"solaris-dialog-steps__track\"\n [style.transform]=\"trackTransform()\"\n [style.--solaris-dialog-steps-transition-duration]=\"transitionDuration()\"\n >\n @for (step of steps; track step.key; let index = $index) {\n <section\n #stepElement\n class=\"solaris-dialog-steps__step\"\n [class.is-active]=\"index === currentStepIndex()\"\n [class.is-before]=\"index < currentStepIndex()\"\n [class.is-after]=\"index > currentStepIndex()\"\n >\n <div class=\"solaris-dialog-steps__step-inner\">\n <ng-container\n *ngComponentOutlet=\"step.component; injector: stepInjector(index)\"\n ></ng-container>\n </div>\n </section>\n }\n </div>\n </div>\n</div>\n", styles: [":host{display:block;min-inline-size:0}.solaris-dialog-steps{--solaris-dialog-steps-min-height: 0;--solaris-dialog-steps-active-height: auto;--solaris-dialog-steps-transition-duration: var(--solaris-motion-duration-dialog-steps);display:grid;min-inline-size:0;gap:var(--solaris-space-5)}.solaris-dialog-steps__progress{display:flex;align-items:center;justify-content:center;gap:var(--solaris-space-2)}.solaris-dialog-steps__dot{inline-size:.8rem;block-size:.8rem;border-radius:var(--solaris-radius-full);background:color-mix(in srgb,var(--solaris-color-text-muted) 35%,transparent);transition:background-color var(--solaris-motion-duration-lg) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-lg) var(--solaris-motion-ease-standard)}.solaris-dialog-steps__dot.is-active{background:var(--solaris-color-primary);transform:scale(1.2)}.solaris-dialog-steps__dot.is-complete{background:color-mix(in srgb,var(--solaris-color-primary) 72%,var(--solaris-color-white))}.solaris-dialog-steps__viewport{overflow:hidden;inline-size:100%;min-inline-size:0;block-size:var(--solaris-dialog-steps-active-height, auto);min-block-size:var(--solaris-dialog-steps-min-height);transition:block-size var(--solaris-dialog-steps-transition-duration) var(--solaris-motion-ease-productive)}.solaris-dialog-steps__track{display:flex;align-items:flex-start;inline-size:100%;min-inline-size:0;will-change:transform;transition:transform var(--solaris-dialog-steps-transition-duration) var(--solaris-motion-ease-productive)}.solaris-dialog-steps__step{flex:0 0 100%;inline-size:100%;min-inline-size:100%;min-block-size:var(--solaris-dialog-steps-min-height);display:grid;align-content:center;overflow:visible}.solaris-dialog-steps__step-inner{inline-size:100%;min-inline-size:0;transition:filter var(--solaris-motion-duration-lg) var(--solaris-motion-ease-standard),opacity var(--solaris-motion-duration-lg) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-lg) var(--solaris-motion-ease-standard)}.solaris-dialog-steps.has-transition-blur.is-transitioning.is-halfway .solaris-dialog-steps__step:not(.is-active) .solaris-dialog-steps__step-inner{filter:blur(.35rem);opacity:.45;transform:scale(.985)}.solaris-dialog-steps.has-transition-blur.is-transitioning.is-halfway .solaris-dialog-steps__step.is-active .solaris-dialog-steps__step-inner{filter:blur(0);opacity:1;transform:scale(1)}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3604
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisDialogStepsContainer, isStandalone: true, selector: "solaris-dialog-steps-container", viewQueries: [{ propertyName: "stepElements", predicate: ["stepElement"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n class=\"solaris-dialog-steps\"\n [class.is-transitioning]=\"transitioning()\"\n [class.is-halfway]=\"transitionHalfway()\"\n [class.has-transition-blur]=\"transitionBlur\"\n [style.--solaris-dialog-steps-min-height]=\"contentMinHeight\"\n [style.--solaris-dialog-steps-active-height]=\"activeStepHeight()\"\n>\n @if (showProgress) {\n <div class=\"solaris-dialog-steps__progress\" aria-hidden=\"true\">\n @for (step of steps; track step.key; let index = $index) {\n <span\n class=\"solaris-dialog-steps__dot\"\n [class.is-active]=\"index === currentStepIndex()\"\n [class.is-complete]=\"index < currentStepIndex()\"\n ></span>\n }\n </div>\n }\n\n <div class=\"solaris-dialog-steps__viewport\">\n <div\n class=\"solaris-dialog-steps__track\"\n [style.transform]=\"trackTransform()\"\n [style.--solaris-dialog-steps-transition-duration]=\"transitionDuration()\"\n >\n @for (step of steps; track step.key; let index = $index) {\n <section\n #stepElement\n class=\"solaris-dialog-steps__step\"\n [class.is-active]=\"index === currentStepIndex()\"\n [class.is-before]=\"index < currentStepIndex()\"\n [class.is-after]=\"index > currentStepIndex()\"\n >\n <div class=\"solaris-dialog-steps__step-inner\">\n <ng-container\n *ngComponentOutlet=\"step.component; injector: stepInjector(index)\"\n ></ng-container>\n </div>\n </section>\n }\n </div>\n </div>\n</div>\n", styles: [":host{display:block;min-inline-size:0}.solaris-dialog-steps{--solaris-dialog-steps-min-height: 0;--solaris-dialog-steps-active-height: auto;--solaris-dialog-steps-transition-duration: var(--solaris-motion-duration-dialog-steps);display:grid;min-inline-size:0;gap:var(--solaris-space-5)}.solaris-dialog-steps__progress{display:flex;align-items:center;justify-content:center;gap:var(--solaris-space-2)}.solaris-dialog-steps__dot{inline-size:var(--solaris-indicator-dot-size-md);block-size:var(--solaris-indicator-dot-size-md);border-radius:var(--solaris-indicator-radius);background:color-mix(in srgb,var(--solaris-color-text-muted) 35%,transparent);transition:background-color var(--solaris-motion-duration-lg) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-lg) var(--solaris-motion-ease-standard)}.solaris-dialog-steps__dot.is-active{background:var(--solaris-color-primary);transform:scale(1.2)}.solaris-dialog-steps__dot.is-complete{background:color-mix(in srgb,var(--solaris-color-primary) 72%,var(--solaris-color-white))}.solaris-dialog-steps__viewport{overflow:hidden;inline-size:100%;min-inline-size:0;block-size:var(--solaris-dialog-steps-active-height, auto);min-block-size:var(--solaris-dialog-steps-min-height);transition:block-size var(--solaris-dialog-steps-transition-duration) var(--solaris-motion-ease-productive)}.solaris-dialog-steps__track{display:flex;align-items:flex-start;inline-size:100%;min-inline-size:0;will-change:transform;transition:transform var(--solaris-dialog-steps-transition-duration) var(--solaris-motion-ease-productive)}.solaris-dialog-steps__step{flex:0 0 100%;inline-size:100%;min-inline-size:100%;min-block-size:var(--solaris-dialog-steps-min-height);display:grid;align-content:center;overflow:visible}.solaris-dialog-steps__step-inner{inline-size:100%;min-inline-size:0;transition:filter var(--solaris-motion-duration-lg) var(--solaris-motion-ease-standard),opacity var(--solaris-motion-duration-lg) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-lg) var(--solaris-motion-ease-standard)}.solaris-dialog-steps.has-transition-blur.is-transitioning.is-halfway .solaris-dialog-steps__step:not(.is-active) .solaris-dialog-steps__step-inner{filter:blur(.35rem);opacity:.45;transform:scale(.985)}.solaris-dialog-steps.has-transition-blur.is-transitioning.is-halfway .solaris-dialog-steps__step.is-active .solaris-dialog-steps__step-inner{filter:blur(0);opacity:1;transform:scale(1)}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3626
3605
  }
3627
3606
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisDialogStepsContainer, decorators: [{
3628
3607
  type: Component,
3629
- args: [{ selector: 'solaris-dialog-steps-container', standalone: true, imports: [NgComponentOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"solaris-dialog-steps\"\n [class.is-transitioning]=\"transitioning()\"\n [class.is-halfway]=\"transitionHalfway()\"\n [class.has-transition-blur]=\"transitionBlur\"\n [style.--solaris-dialog-steps-min-height]=\"contentMinHeight\"\n [style.--solaris-dialog-steps-active-height]=\"activeStepHeight()\"\n>\n @if (showProgress) {\n <div class=\"solaris-dialog-steps__progress\" aria-hidden=\"true\">\n @for (step of steps; track step.key; let index = $index) {\n <span\n class=\"solaris-dialog-steps__dot\"\n [class.is-active]=\"index === currentStepIndex()\"\n [class.is-complete]=\"index < currentStepIndex()\"\n ></span>\n }\n </div>\n }\n\n <div class=\"solaris-dialog-steps__viewport\">\n <div\n class=\"solaris-dialog-steps__track\"\n [style.transform]=\"trackTransform()\"\n [style.--solaris-dialog-steps-transition-duration]=\"transitionDuration()\"\n >\n @for (step of steps; track step.key; let index = $index) {\n <section\n #stepElement\n class=\"solaris-dialog-steps__step\"\n [class.is-active]=\"index === currentStepIndex()\"\n [class.is-before]=\"index < currentStepIndex()\"\n [class.is-after]=\"index > currentStepIndex()\"\n >\n <div class=\"solaris-dialog-steps__step-inner\">\n <ng-container\n *ngComponentOutlet=\"step.component; injector: stepInjector(index)\"\n ></ng-container>\n </div>\n </section>\n }\n </div>\n </div>\n</div>\n", styles: [":host{display:block;min-inline-size:0}.solaris-dialog-steps{--solaris-dialog-steps-min-height: 0;--solaris-dialog-steps-active-height: auto;--solaris-dialog-steps-transition-duration: var(--solaris-motion-duration-dialog-steps);display:grid;min-inline-size:0;gap:var(--solaris-space-5)}.solaris-dialog-steps__progress{display:flex;align-items:center;justify-content:center;gap:var(--solaris-space-2)}.solaris-dialog-steps__dot{inline-size:.8rem;block-size:.8rem;border-radius:var(--solaris-radius-full);background:color-mix(in srgb,var(--solaris-color-text-muted) 35%,transparent);transition:background-color var(--solaris-motion-duration-lg) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-lg) var(--solaris-motion-ease-standard)}.solaris-dialog-steps__dot.is-active{background:var(--solaris-color-primary);transform:scale(1.2)}.solaris-dialog-steps__dot.is-complete{background:color-mix(in srgb,var(--solaris-color-primary) 72%,var(--solaris-color-white))}.solaris-dialog-steps__viewport{overflow:hidden;inline-size:100%;min-inline-size:0;block-size:var(--solaris-dialog-steps-active-height, auto);min-block-size:var(--solaris-dialog-steps-min-height);transition:block-size var(--solaris-dialog-steps-transition-duration) var(--solaris-motion-ease-productive)}.solaris-dialog-steps__track{display:flex;align-items:flex-start;inline-size:100%;min-inline-size:0;will-change:transform;transition:transform var(--solaris-dialog-steps-transition-duration) var(--solaris-motion-ease-productive)}.solaris-dialog-steps__step{flex:0 0 100%;inline-size:100%;min-inline-size:100%;min-block-size:var(--solaris-dialog-steps-min-height);display:grid;align-content:center;overflow:visible}.solaris-dialog-steps__step-inner{inline-size:100%;min-inline-size:0;transition:filter var(--solaris-motion-duration-lg) var(--solaris-motion-ease-standard),opacity var(--solaris-motion-duration-lg) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-lg) var(--solaris-motion-ease-standard)}.solaris-dialog-steps.has-transition-blur.is-transitioning.is-halfway .solaris-dialog-steps__step:not(.is-active) .solaris-dialog-steps__step-inner{filter:blur(.35rem);opacity:.45;transform:scale(.985)}.solaris-dialog-steps.has-transition-blur.is-transitioning.is-halfway .solaris-dialog-steps__step.is-active .solaris-dialog-steps__step-inner{filter:blur(0);opacity:1;transform:scale(1)}\n"] }]
3608
+ args: [{ selector: 'solaris-dialog-steps-container', standalone: true, imports: [NgComponentOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"solaris-dialog-steps\"\n [class.is-transitioning]=\"transitioning()\"\n [class.is-halfway]=\"transitionHalfway()\"\n [class.has-transition-blur]=\"transitionBlur\"\n [style.--solaris-dialog-steps-min-height]=\"contentMinHeight\"\n [style.--solaris-dialog-steps-active-height]=\"activeStepHeight()\"\n>\n @if (showProgress) {\n <div class=\"solaris-dialog-steps__progress\" aria-hidden=\"true\">\n @for (step of steps; track step.key; let index = $index) {\n <span\n class=\"solaris-dialog-steps__dot\"\n [class.is-active]=\"index === currentStepIndex()\"\n [class.is-complete]=\"index < currentStepIndex()\"\n ></span>\n }\n </div>\n }\n\n <div class=\"solaris-dialog-steps__viewport\">\n <div\n class=\"solaris-dialog-steps__track\"\n [style.transform]=\"trackTransform()\"\n [style.--solaris-dialog-steps-transition-duration]=\"transitionDuration()\"\n >\n @for (step of steps; track step.key; let index = $index) {\n <section\n #stepElement\n class=\"solaris-dialog-steps__step\"\n [class.is-active]=\"index === currentStepIndex()\"\n [class.is-before]=\"index < currentStepIndex()\"\n [class.is-after]=\"index > currentStepIndex()\"\n >\n <div class=\"solaris-dialog-steps__step-inner\">\n <ng-container\n *ngComponentOutlet=\"step.component; injector: stepInjector(index)\"\n ></ng-container>\n </div>\n </section>\n }\n </div>\n </div>\n</div>\n", styles: [":host{display:block;min-inline-size:0}.solaris-dialog-steps{--solaris-dialog-steps-min-height: 0;--solaris-dialog-steps-active-height: auto;--solaris-dialog-steps-transition-duration: var(--solaris-motion-duration-dialog-steps);display:grid;min-inline-size:0;gap:var(--solaris-space-5)}.solaris-dialog-steps__progress{display:flex;align-items:center;justify-content:center;gap:var(--solaris-space-2)}.solaris-dialog-steps__dot{inline-size:var(--solaris-indicator-dot-size-md);block-size:var(--solaris-indicator-dot-size-md);border-radius:var(--solaris-indicator-radius);background:color-mix(in srgb,var(--solaris-color-text-muted) 35%,transparent);transition:background-color var(--solaris-motion-duration-lg) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-lg) var(--solaris-motion-ease-standard)}.solaris-dialog-steps__dot.is-active{background:var(--solaris-color-primary);transform:scale(1.2)}.solaris-dialog-steps__dot.is-complete{background:color-mix(in srgb,var(--solaris-color-primary) 72%,var(--solaris-color-white))}.solaris-dialog-steps__viewport{overflow:hidden;inline-size:100%;min-inline-size:0;block-size:var(--solaris-dialog-steps-active-height, auto);min-block-size:var(--solaris-dialog-steps-min-height);transition:block-size var(--solaris-dialog-steps-transition-duration) var(--solaris-motion-ease-productive)}.solaris-dialog-steps__track{display:flex;align-items:flex-start;inline-size:100%;min-inline-size:0;will-change:transform;transition:transform var(--solaris-dialog-steps-transition-duration) var(--solaris-motion-ease-productive)}.solaris-dialog-steps__step{flex:0 0 100%;inline-size:100%;min-inline-size:100%;min-block-size:var(--solaris-dialog-steps-min-height);display:grid;align-content:center;overflow:visible}.solaris-dialog-steps__step-inner{inline-size:100%;min-inline-size:0;transition:filter var(--solaris-motion-duration-lg) var(--solaris-motion-ease-standard),opacity var(--solaris-motion-duration-lg) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-lg) var(--solaris-motion-ease-standard)}.solaris-dialog-steps.has-transition-blur.is-transitioning.is-halfway .solaris-dialog-steps__step:not(.is-active) .solaris-dialog-steps__step-inner{filter:blur(.35rem);opacity:.45;transform:scale(.985)}.solaris-dialog-steps.has-transition-blur.is-transitioning.is-halfway .solaris-dialog-steps__step.is-active .solaris-dialog-steps__step-inner{filter:blur(0);opacity:1;transform:scale(1)}\n"] }]
3630
3609
  }], ctorParameters: () => [], propDecorators: { stepElements: [{
3631
3610
  type: ViewChildren,
3632
3611
  args: ['stepElement', { read: ElementRef }]
@@ -4596,7 +4575,7 @@ class SolarisCheckbox {
4596
4575
  useExisting: forwardRef(() => SolarisCheckbox),
4597
4576
  multi: true,
4598
4577
  },
4599
- ], viewQueries: [{ propertyName: "native", first: true, predicate: ["native"], descendants: true, static: true }], ngImport: i0, template: "<label class=\"solaris-checkbox\">\n <input\n #native\n class=\"solaris-checkbox__native\"\n type=\"checkbox\"\n [attr.id]=\"id()\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-checked]=\"indeterminate() ? 'mixed' : checked() ? 'true' : 'false'\"\n (change)=\"onNativeChange(native.checked)\"\n (blur)=\"onBlur()\"\n />\n\n <span class=\"solaris-checkbox__control\" aria-hidden=\"true\">\n @if (variant() === 'icon') {\n <span class=\"solaris-checkbox__dot\" aria-hidden=\"true\"></span>\n } @else {\n <i\n class=\"ph solaris-checkbox__icon\"\n [class.ph-check]=\"!indeterminate()\"\n [class.ph-minus]=\"indeterminate()\"\n aria-hidden=\"true\"\n ></i>\n }\n </span>\n\n @if (variant() !== 'icon') {\n <span class=\"solaris-checkbox__content\"><ng-content /></span>\n }\n</label>\n", styles: [":host{--_hit: 2.4rem;--_size: 2rem;--_icon: 1.6rem;--_icon-ring: .5rem;--_text: var(--solaris-color-text);--_radius: var(--solaris-radius-sm);--_border: var(--solaris-color-border);--_muted: var(--solaris-color-text-muted);--solaris-checkbox-border: var(--_border);--solaris-checkbox-accent: var(--solaris-color-primary);--solaris-checkbox-on-accent: var(--solaris-color-primary-contrast)}:host([data-size=sm]){--_size: 1.8rem;--_icon: 1.4rem}:host([data-size=md]){--_size: 2rem;--_icon: 1.6rem}:host([data-size=lg]){--_size: 2.4rem;--_icon: 1.8rem}:host([data-variant=round]),:host([data-variant=icon]){--_radius: var(--solaris-radius-full)}:host([data-color=primary]){--solaris-checkbox-accent: var(--solaris-color-primary)}:host([data-color=success]){--solaris-checkbox-accent: var(--solaris-color-success)}:host([data-color=warning]){--solaris-checkbox-accent: var(--solaris-color-warning)}:host([data-color=error]){--solaris-checkbox-accent: var(--solaris-color-error)}:host([data-color=info]){--solaris-checkbox-accent: var(--solaris-color-info)}:host([data-color=custom]){--solaris-checkbox-accent: var(--solaris-checkbox-custom, var(--solaris-color-primary))}.solaris-checkbox{gap:.8rem;cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--_text);display:inline-flex;align-items:flex-start}.solaris-checkbox__native{opacity:0;width:1px;height:1px;position:absolute;pointer-events:none}.solaris-checkbox__control{line-height:0;flex:0 0 auto;color:transparent;align-items:center;display:inline-flex;box-sizing:border-box;justify-content:center;border-radius:var(--_radius);background-color:transparent;width:max(var(--_size),var(--_size));height:max(var(--_size),var(--_size));border:.1rem solid var(--solaris-checkbox-border)}.solaris-checkbox__content{gap:.2rem;line-height:1.3;display:inline-flex;flex-direction:column}.solaris-checkbox__icon{opacity:0;line-height:1;display:block;font-weight:bolder;pointer-events:none;font-size:var(--_icon)}.solaris-checkbox__native:checked+.solaris-checkbox__control .solaris-checkbox__icon,.solaris-checkbox__native:indeterminate+.solaris-checkbox__control .solaris-checkbox__icon{opacity:1}.solaris-checkbox__native:checked+.solaris-checkbox__control,.solaris-checkbox__native:indeterminate+.solaris-checkbox__control{border-color:var(--solaris-checkbox-accent)}:host([data-color=primary]) .solaris-checkbox__native:checked+.solaris-checkbox__control,:host([data-color=primary]) .solaris-checkbox__native:indeterminate+.solaris-checkbox__control{border-color:var(--solaris-color-primary-tint)}:host([data-appearance=outline]) .solaris-checkbox__native:checked+.solaris-checkbox__control,:host([data-appearance=outline]) .solaris-checkbox__native:indeterminate+.solaris-checkbox__control{background-color:transparent;color:var(--solaris-checkbox-ink, var(--solaris-checkbox-accent))}:host([data-appearance=solid]) .solaris-checkbox__native:checked+.solaris-checkbox__control,:host([data-appearance=solid]) .solaris-checkbox__native:indeterminate+.solaris-checkbox__control{background-color:var(--solaris-checkbox-accent);color:var(--solaris-checkbox-ink, var(--solaris-checkbox-on-accent))}:host([data-variant=icon]) .solaris-checkbox__control{padding:var(--_icon-ring);background-clip:content-box}.solaris-checkbox__native:focus-visible+.solaris-checkbox__control{outline-offset:.2rem;outline:.2rem solid var(--solaris-checkbox-accent)}:host([data-disabled=true]) .solaris-checkbox{opacity:.55;cursor:not-allowed}:host([data-disabled=true]) .solaris-checkbox__control{border-color:color-mix(in srgb,var(--_border) 70%,transparent)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
4578
+ ], viewQueries: [{ propertyName: "native", first: true, predicate: ["native"], descendants: true, static: true }], ngImport: i0, template: "<label class=\"solaris-checkbox\">\n <input\n #native\n class=\"solaris-checkbox__native\"\n type=\"checkbox\"\n [attr.id]=\"id()\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-checked]=\"indeterminate() ? 'mixed' : checked() ? 'true' : 'false'\"\n (change)=\"onNativeChange(native.checked)\"\n (blur)=\"onBlur()\"\n />\n\n <span class=\"solaris-checkbox__control\" aria-hidden=\"true\">\n @if (variant() === 'icon') {\n <span class=\"solaris-checkbox__dot\" aria-hidden=\"true\"></span>\n } @else {\n <i\n class=\"ph solaris-checkbox__icon\"\n [class.ph-check]=\"!indeterminate()\"\n [class.ph-minus]=\"indeterminate()\"\n aria-hidden=\"true\"\n ></i>\n }\n </span>\n\n @if (variant() !== 'icon') {\n <span class=\"solaris-checkbox__content\"><ng-content /></span>\n }\n</label>\n", styles: [":host{--_hit: 2.4rem;--_size: var(--solaris-indicator-size-md);--_icon: var(--solaris-indicator-check-size-md);--_icon-ring: .5rem;--_text: var(--solaris-color-text);--_radius: var(--solaris-radius-sm);--_border: var(--solaris-color-border);--_muted: var(--solaris-color-text-muted);--solaris-checkbox-border: var(--_border);--solaris-checkbox-accent: var(--solaris-color-primary);--solaris-checkbox-on-accent: var(--solaris-color-primary-contrast)}:host([data-size=sm]){--_size: var(--solaris-indicator-size-sm);--_icon: var(--solaris-indicator-check-size-sm)}:host([data-size=md]){--_size: var(--solaris-indicator-size-md);--_icon: var(--solaris-indicator-check-size-md)}:host([data-size=lg]){--_size: var(--solaris-indicator-size-lg);--_icon: var(--solaris-indicator-check-size-lg)}:host([data-variant=round]),:host([data-variant=icon]){--_radius: var(--solaris-radius-full)}:host([data-color=primary]){--solaris-checkbox-accent: var(--solaris-color-primary)}:host([data-color=success]){--solaris-checkbox-accent: var(--solaris-color-success)}:host([data-color=warning]){--solaris-checkbox-accent: var(--solaris-color-warning)}:host([data-color=error]){--solaris-checkbox-accent: var(--solaris-color-error)}:host([data-color=info]){--solaris-checkbox-accent: var(--solaris-color-info)}:host([data-color=custom]){--solaris-checkbox-accent: var(--solaris-checkbox-custom, var(--solaris-color-primary))}.solaris-checkbox{gap:.8rem;cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--_text);display:inline-flex;align-items:flex-start}.solaris-checkbox__native{opacity:0;width:1px;height:1px;position:absolute;pointer-events:none}.solaris-checkbox__control{inline-size:var(--_size);block-size:var(--_size);min-inline-size:var(--_size);min-block-size:var(--_size);aspect-ratio:1/1;display:inline-grid;box-sizing:border-box;line-height:0;border-radius:var(--_radius);border:var(--solaris-indicator-border-width) solid var(--solaris-checkbox-border);background:transparent;color:transparent;flex:0 0 auto;align-items:center;place-items:center}.solaris-checkbox__content{gap:.2rem;line-height:1.3;display:inline-flex;flex-direction:column}.solaris-checkbox__icon{display:block;flex:0 0 auto;line-height:1;font-size:var(--_icon);font-weight:700;opacity:0;pointer-events:none}.solaris-checkbox__native:checked+.solaris-checkbox__control .solaris-checkbox__icon,.solaris-checkbox__native:indeterminate+.solaris-checkbox__control .solaris-checkbox__icon{opacity:1}.solaris-checkbox__native:checked+.solaris-checkbox__control,.solaris-checkbox__native:indeterminate+.solaris-checkbox__control{border-color:var(--solaris-checkbox-accent)}:host([data-color=primary]) .solaris-checkbox__native:checked+.solaris-checkbox__control,:host([data-color=primary]) .solaris-checkbox__native:indeterminate+.solaris-checkbox__control{border-color:var(--solaris-color-primary-tint)}:host([data-appearance=outline]) .solaris-checkbox__native:checked+.solaris-checkbox__control,:host([data-appearance=outline]) .solaris-checkbox__native:indeterminate+.solaris-checkbox__control{background-color:transparent;color:var(--solaris-checkbox-ink, var(--solaris-checkbox-accent))}:host([data-appearance=solid]) .solaris-checkbox__native:checked+.solaris-checkbox__control,:host([data-appearance=solid]) .solaris-checkbox__native:indeterminate+.solaris-checkbox__control{background-color:var(--solaris-checkbox-accent);color:var(--solaris-checkbox-ink, var(--solaris-checkbox-on-accent))}:host([data-variant=icon]) .solaris-checkbox__control{padding:var(--_icon-ring);background-clip:content-box}.solaris-checkbox__native:focus-visible+.solaris-checkbox__control{outline-offset:.2rem;outline:.2rem solid var(--solaris-checkbox-accent)}:host([data-disabled=true]) .solaris-checkbox{opacity:.55;cursor:not-allowed}:host([data-disabled=true]) .solaris-checkbox__control{border-color:color-mix(in srgb,var(--_border) 70%,transparent)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
4600
4579
  }
4601
4580
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisCheckbox, decorators: [{
4602
4581
  type: Component,
@@ -4615,7 +4594,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
4615
4594
  '[style.--solaris-checkbox-ink]': 'ink()',
4616
4595
  '[attr.data-disabled]': 'disabled() ? "true" : null',
4617
4596
  '[style.--solaris-checkbox-custom]': 'customAccent()',
4618
- }, template: "<label class=\"solaris-checkbox\">\n <input\n #native\n class=\"solaris-checkbox__native\"\n type=\"checkbox\"\n [attr.id]=\"id()\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-checked]=\"indeterminate() ? 'mixed' : checked() ? 'true' : 'false'\"\n (change)=\"onNativeChange(native.checked)\"\n (blur)=\"onBlur()\"\n />\n\n <span class=\"solaris-checkbox__control\" aria-hidden=\"true\">\n @if (variant() === 'icon') {\n <span class=\"solaris-checkbox__dot\" aria-hidden=\"true\"></span>\n } @else {\n <i\n class=\"ph solaris-checkbox__icon\"\n [class.ph-check]=\"!indeterminate()\"\n [class.ph-minus]=\"indeterminate()\"\n aria-hidden=\"true\"\n ></i>\n }\n </span>\n\n @if (variant() !== 'icon') {\n <span class=\"solaris-checkbox__content\"><ng-content /></span>\n }\n</label>\n", styles: [":host{--_hit: 2.4rem;--_size: 2rem;--_icon: 1.6rem;--_icon-ring: .5rem;--_text: var(--solaris-color-text);--_radius: var(--solaris-radius-sm);--_border: var(--solaris-color-border);--_muted: var(--solaris-color-text-muted);--solaris-checkbox-border: var(--_border);--solaris-checkbox-accent: var(--solaris-color-primary);--solaris-checkbox-on-accent: var(--solaris-color-primary-contrast)}:host([data-size=sm]){--_size: 1.8rem;--_icon: 1.4rem}:host([data-size=md]){--_size: 2rem;--_icon: 1.6rem}:host([data-size=lg]){--_size: 2.4rem;--_icon: 1.8rem}:host([data-variant=round]),:host([data-variant=icon]){--_radius: var(--solaris-radius-full)}:host([data-color=primary]){--solaris-checkbox-accent: var(--solaris-color-primary)}:host([data-color=success]){--solaris-checkbox-accent: var(--solaris-color-success)}:host([data-color=warning]){--solaris-checkbox-accent: var(--solaris-color-warning)}:host([data-color=error]){--solaris-checkbox-accent: var(--solaris-color-error)}:host([data-color=info]){--solaris-checkbox-accent: var(--solaris-color-info)}:host([data-color=custom]){--solaris-checkbox-accent: var(--solaris-checkbox-custom, var(--solaris-color-primary))}.solaris-checkbox{gap:.8rem;cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--_text);display:inline-flex;align-items:flex-start}.solaris-checkbox__native{opacity:0;width:1px;height:1px;position:absolute;pointer-events:none}.solaris-checkbox__control{line-height:0;flex:0 0 auto;color:transparent;align-items:center;display:inline-flex;box-sizing:border-box;justify-content:center;border-radius:var(--_radius);background-color:transparent;width:max(var(--_size),var(--_size));height:max(var(--_size),var(--_size));border:.1rem solid var(--solaris-checkbox-border)}.solaris-checkbox__content{gap:.2rem;line-height:1.3;display:inline-flex;flex-direction:column}.solaris-checkbox__icon{opacity:0;line-height:1;display:block;font-weight:bolder;pointer-events:none;font-size:var(--_icon)}.solaris-checkbox__native:checked+.solaris-checkbox__control .solaris-checkbox__icon,.solaris-checkbox__native:indeterminate+.solaris-checkbox__control .solaris-checkbox__icon{opacity:1}.solaris-checkbox__native:checked+.solaris-checkbox__control,.solaris-checkbox__native:indeterminate+.solaris-checkbox__control{border-color:var(--solaris-checkbox-accent)}:host([data-color=primary]) .solaris-checkbox__native:checked+.solaris-checkbox__control,:host([data-color=primary]) .solaris-checkbox__native:indeterminate+.solaris-checkbox__control{border-color:var(--solaris-color-primary-tint)}:host([data-appearance=outline]) .solaris-checkbox__native:checked+.solaris-checkbox__control,:host([data-appearance=outline]) .solaris-checkbox__native:indeterminate+.solaris-checkbox__control{background-color:transparent;color:var(--solaris-checkbox-ink, var(--solaris-checkbox-accent))}:host([data-appearance=solid]) .solaris-checkbox__native:checked+.solaris-checkbox__control,:host([data-appearance=solid]) .solaris-checkbox__native:indeterminate+.solaris-checkbox__control{background-color:var(--solaris-checkbox-accent);color:var(--solaris-checkbox-ink, var(--solaris-checkbox-on-accent))}:host([data-variant=icon]) .solaris-checkbox__control{padding:var(--_icon-ring);background-clip:content-box}.solaris-checkbox__native:focus-visible+.solaris-checkbox__control{outline-offset:.2rem;outline:.2rem solid var(--solaris-checkbox-accent)}:host([data-disabled=true]) .solaris-checkbox{opacity:.55;cursor:not-allowed}:host([data-disabled=true]) .solaris-checkbox__control{border-color:color-mix(in srgb,var(--_border) 70%,transparent)}\n"] }]
4597
+ }, template: "<label class=\"solaris-checkbox\">\n <input\n #native\n class=\"solaris-checkbox__native\"\n type=\"checkbox\"\n [attr.id]=\"id()\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-checked]=\"indeterminate() ? 'mixed' : checked() ? 'true' : 'false'\"\n (change)=\"onNativeChange(native.checked)\"\n (blur)=\"onBlur()\"\n />\n\n <span class=\"solaris-checkbox__control\" aria-hidden=\"true\">\n @if (variant() === 'icon') {\n <span class=\"solaris-checkbox__dot\" aria-hidden=\"true\"></span>\n } @else {\n <i\n class=\"ph solaris-checkbox__icon\"\n [class.ph-check]=\"!indeterminate()\"\n [class.ph-minus]=\"indeterminate()\"\n aria-hidden=\"true\"\n ></i>\n }\n </span>\n\n @if (variant() !== 'icon') {\n <span class=\"solaris-checkbox__content\"><ng-content /></span>\n }\n</label>\n", styles: [":host{--_hit: 2.4rem;--_size: var(--solaris-indicator-size-md);--_icon: var(--solaris-indicator-check-size-md);--_icon-ring: .5rem;--_text: var(--solaris-color-text);--_radius: var(--solaris-radius-sm);--_border: var(--solaris-color-border);--_muted: var(--solaris-color-text-muted);--solaris-checkbox-border: var(--_border);--solaris-checkbox-accent: var(--solaris-color-primary);--solaris-checkbox-on-accent: var(--solaris-color-primary-contrast)}:host([data-size=sm]){--_size: var(--solaris-indicator-size-sm);--_icon: var(--solaris-indicator-check-size-sm)}:host([data-size=md]){--_size: var(--solaris-indicator-size-md);--_icon: var(--solaris-indicator-check-size-md)}:host([data-size=lg]){--_size: var(--solaris-indicator-size-lg);--_icon: var(--solaris-indicator-check-size-lg)}:host([data-variant=round]),:host([data-variant=icon]){--_radius: var(--solaris-radius-full)}:host([data-color=primary]){--solaris-checkbox-accent: var(--solaris-color-primary)}:host([data-color=success]){--solaris-checkbox-accent: var(--solaris-color-success)}:host([data-color=warning]){--solaris-checkbox-accent: var(--solaris-color-warning)}:host([data-color=error]){--solaris-checkbox-accent: var(--solaris-color-error)}:host([data-color=info]){--solaris-checkbox-accent: var(--solaris-color-info)}:host([data-color=custom]){--solaris-checkbox-accent: var(--solaris-checkbox-custom, var(--solaris-color-primary))}.solaris-checkbox{gap:.8rem;cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--_text);display:inline-flex;align-items:flex-start}.solaris-checkbox__native{opacity:0;width:1px;height:1px;position:absolute;pointer-events:none}.solaris-checkbox__control{inline-size:var(--_size);block-size:var(--_size);min-inline-size:var(--_size);min-block-size:var(--_size);aspect-ratio:1/1;display:inline-grid;box-sizing:border-box;line-height:0;border-radius:var(--_radius);border:var(--solaris-indicator-border-width) solid var(--solaris-checkbox-border);background:transparent;color:transparent;flex:0 0 auto;align-items:center;place-items:center}.solaris-checkbox__content{gap:.2rem;line-height:1.3;display:inline-flex;flex-direction:column}.solaris-checkbox__icon{display:block;flex:0 0 auto;line-height:1;font-size:var(--_icon);font-weight:700;opacity:0;pointer-events:none}.solaris-checkbox__native:checked+.solaris-checkbox__control .solaris-checkbox__icon,.solaris-checkbox__native:indeterminate+.solaris-checkbox__control .solaris-checkbox__icon{opacity:1}.solaris-checkbox__native:checked+.solaris-checkbox__control,.solaris-checkbox__native:indeterminate+.solaris-checkbox__control{border-color:var(--solaris-checkbox-accent)}:host([data-color=primary]) .solaris-checkbox__native:checked+.solaris-checkbox__control,:host([data-color=primary]) .solaris-checkbox__native:indeterminate+.solaris-checkbox__control{border-color:var(--solaris-color-primary-tint)}:host([data-appearance=outline]) .solaris-checkbox__native:checked+.solaris-checkbox__control,:host([data-appearance=outline]) .solaris-checkbox__native:indeterminate+.solaris-checkbox__control{background-color:transparent;color:var(--solaris-checkbox-ink, var(--solaris-checkbox-accent))}:host([data-appearance=solid]) .solaris-checkbox__native:checked+.solaris-checkbox__control,:host([data-appearance=solid]) .solaris-checkbox__native:indeterminate+.solaris-checkbox__control{background-color:var(--solaris-checkbox-accent);color:var(--solaris-checkbox-ink, var(--solaris-checkbox-on-accent))}:host([data-variant=icon]) .solaris-checkbox__control{padding:var(--_icon-ring);background-clip:content-box}.solaris-checkbox__native:focus-visible+.solaris-checkbox__control{outline-offset:.2rem;outline:.2rem solid var(--solaris-checkbox-accent)}:host([data-disabled=true]) .solaris-checkbox{opacity:.55;cursor:not-allowed}:host([data-disabled=true]) .solaris-checkbox__control{border-color:color-mix(in srgb,var(--_border) 70%,transparent)}\n"] }]
4619
4598
  }], ctorParameters: () => [], propDecorators: { indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], checkColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkColor", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }], indeterminateChange: [{ type: i0.Output, args: ["indeterminateChange"] }], native: [{
4620
4599
  type: ViewChild,
4621
4600
  args: ['native', { static: true }]
@@ -5547,7 +5526,7 @@ class SolarisRadio {
5547
5526
  useExisting: forwardRef(() => SolarisRadio),
5548
5527
  multi: true,
5549
5528
  },
5550
- ], viewQueries: [{ propertyName: "native", first: true, predicate: ["native"], descendants: true, static: true }], ngImport: i0, template: "<label class=\"solaris-radio\">\n <input\n #native\n class=\"solaris-radio__native\"\n type=\"radio\"\n [attr.id]=\"id()\"\n [attr.name]=\"name()\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.tabindex]=\"tabIndex()\"\n (change)=\"onNativeChange()\"\n (keydown)=\"onNativeKeydown($event)\"\n (blur)=\"onBlur()\"\n />\n\n <span class=\"solaris-radio__control\" aria-hidden=\"true\">\n <span class=\"solaris-radio__inner\" aria-hidden=\"true\"></span>\n </span>\n\n <span class=\"solaris-radio__content\">\n <ng-content />\n </span>\n</label>\n", styles: [":host{--_size: 2rem;--_dot: .8rem;--_icon-dot: .55rem;--_text: var(--solaris-color-text);--_radius: var(--solaris-radius-full);--_border: var(--solaris-color-border);--solaris-radio-border: var(--_border);--_muted: var(--solaris-color-text-muted);--solaris-radio-accent: var(--solaris-color-primary);--solaris-radio-on-accent: var(--solaris-color-primary-contrast);--solaris-radio-soft-fill: color-mix(in srgb, var(--solaris-radio-accent) 12%, transparent);display:inline-flex}:host([data-size=sm]){--_dot: .7rem;--_size: 1.8rem;--_icon-dot: .5rem}:host([data-size=md]){--_size: 2rem;--_dot: .8rem;--_icon-dot: .55rem}:host([data-size=lg]){--_size: 2.4rem;--_dot: .95rem;--_icon-dot: .65rem}:host([data-color=primary]){--solaris-radio-accent: var(--solaris-color-primary)}:host([data-color=success]){--solaris-radio-accent: var(--solaris-color-success)}:host([data-color=warning]){--solaris-radio-accent: var(--solaris-color-warning)}:host([data-color=error]){--solaris-radio-accent: var(--solaris-color-error)}:host([data-color=info]){--solaris-radio-accent: var(--solaris-color-info)}:host([data-color=custom]){--solaris-radio-accent: var(--solaris-radio-custom, var(--solaris-color-primary))}.solaris-radio{gap:.8rem;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;color:var(--_text);display:inline-flex}.solaris-radio__native{opacity:0;width:1px;height:1px;position:absolute;pointer-events:none}.solaris-radio__control{flex:0 0 auto;width:var(--_size);height:var(--_size);display:grid;place-items:center;box-sizing:border-box;background:transparent;border-radius:var(--_radius);border:.1rem solid var(--solaris-radio-border)}.solaris-radio__content{gap:.2rem;line-height:1.3;display:inline-flex;flex-direction:column;justify-content:center;min-height:var(--_size)}.solaris-radio__inner{opacity:0;width:var(--_dot);height:var(--_dot);transform:scale(.4);background:var(--solaris-radio-accent);border-radius:var(--solaris-radius-full);transition:opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),background-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-radio:hover .solaris-radio__control{border-color:color-mix(in srgb,var(--solaris-radio-accent) 36%,var(--solaris-radio-border))}.solaris-radio__native:focus-visible+.solaris-radio__control{outline-offset:.2rem;outline:.2rem solid var(--solaris-radio-accent)}.solaris-radio__native:active+.solaris-radio__control{transform:scale(.98)}.solaris-radio__native:checked+.solaris-radio__control{border-color:var(--solaris-radio-accent)}.solaris-radio__native:checked+.solaris-radio__control .solaris-radio__inner{opacity:1;transform:scale(1)}:host([data-variant=dot][data-appearance=outline]) .solaris-radio__native:checked+.solaris-radio__control{background:transparent}:host([data-variant=dot][data-appearance=solid]) .solaris-radio__native:checked+.solaris-radio__control{background:var(--solaris-radio-soft-fill)}:host([data-variant=icon]) .solaris-radio__control{padding:.25rem;background-clip:content-box}:host([data-variant=icon]) .solaris-radio__inner{width:var(--_icon-dot);height:var(--_icon-dot)}:host([data-variant=icon][data-appearance=solid]) .solaris-radio__native:checked+.solaris-radio__control{background:var(--solaris-radio-accent)}:host([data-variant=icon][data-appearance=solid]) .solaris-radio__native:checked+.solaris-radio__control .solaris-radio__inner{background:var(--solaris-radio-on-accent)}:host([data-variant=icon][data-appearance=outline]) .solaris-radio__native:checked+.solaris-radio__control{background:transparent}:host([data-variant=icon][data-appearance=outline]) .solaris-radio__native:checked+.solaris-radio__control .solaris-radio__inner{background:var(--solaris-radio-accent)}:host([data-disabled=true]) .solaris-radio{opacity:.55;cursor:not-allowed}:host([data-disabled=true]) .solaris-radio__control{border-color:color-mix(in srgb,var(--_border) 70%,transparent)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
5529
+ ], viewQueries: [{ propertyName: "native", first: true, predicate: ["native"], descendants: true, static: true }], ngImport: i0, template: "<label class=\"solaris-radio\">\n <input\n #native\n class=\"solaris-radio__native\"\n type=\"radio\"\n [attr.id]=\"id()\"\n [attr.name]=\"name()\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.tabindex]=\"tabIndex()\"\n (change)=\"onNativeChange()\"\n (keydown)=\"onNativeKeydown($event)\"\n (blur)=\"onBlur()\"\n />\n\n <span class=\"solaris-radio__control\" aria-hidden=\"true\">\n <span class=\"solaris-radio__inner\" aria-hidden=\"true\"></span>\n </span>\n\n <span class=\"solaris-radio__content\">\n <ng-content />\n </span>\n</label>\n", styles: [":host{--_size: var(--solaris-indicator-size-md);--_dot: var(--solaris-indicator-dot-size-md);--_icon-dot: var(--solaris-indicator-icon-dot-size-md);--_text: var(--solaris-color-text);--_radius: var(--solaris-indicator-radius);--_border: var(--solaris-color-border);--solaris-radio-border: var(--_border);--_muted: var(--solaris-color-text-muted);--solaris-radio-accent: var(--solaris-color-primary);--solaris-radio-on-accent: var(--solaris-color-primary-contrast);--solaris-radio-soft-fill: color-mix(in srgb, var(--solaris-radio-accent) 12%, transparent);display:inline-flex}:host([data-size=sm]){--_size: var(--solaris-indicator-size-sm);--_dot: var(--solaris-indicator-dot-size-sm);--_icon-dot: var(--solaris-indicator-icon-dot-size-sm)}:host([data-size=md]){--_size: var(--solaris-indicator-size-md);--_dot: var(--solaris-indicator-dot-size-md);--_icon-dot: var(--solaris-indicator-icon-dot-size-md)}:host([data-size=lg]){--_size: var(--solaris-indicator-size-lg);--_dot: var(--solaris-indicator-dot-size-lg);--_icon-dot: var(--solaris-indicator-icon-dot-size-lg)}:host([data-color=primary]){--solaris-radio-accent: var(--solaris-color-primary)}:host([data-color=success]){--solaris-radio-accent: var(--solaris-color-success)}:host([data-color=warning]){--solaris-radio-accent: var(--solaris-color-warning)}:host([data-color=error]){--solaris-radio-accent: var(--solaris-color-error)}:host([data-color=info]){--solaris-radio-accent: var(--solaris-color-info)}:host([data-color=custom]){--solaris-radio-accent: var(--solaris-radio-custom, var(--solaris-color-primary))}.solaris-radio{gap:.8rem;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;color:var(--_text);display:inline-flex}.solaris-radio__native{opacity:0;width:1px;height:1px;position:absolute;pointer-events:none}.solaris-radio__control{inline-size:var(--_size);block-size:var(--_size);min-inline-size:var(--_size);min-block-size:var(--_size);aspect-ratio:1/1;display:inline-grid;place-items:center;box-sizing:border-box;line-height:0;border-radius:var(--_radius);border:var(--solaris-indicator-border-width) solid var(--solaris-radio-border);background:transparent;color:currentColor;flex:0 0 auto}.solaris-radio__content{gap:.2rem;line-height:1.3;display:inline-flex;flex-direction:column;justify-content:center;min-height:var(--_size)}.solaris-radio__inner{opacity:0;width:var(--_dot);height:var(--_dot);transform:scale(.4);background:var(--solaris-radio-accent);border-radius:var(--solaris-radius-full);transition:opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),background-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-radio:hover .solaris-radio__control{border-color:color-mix(in srgb,var(--solaris-radio-accent) 36%,var(--solaris-radio-border))}.solaris-radio__native:focus-visible+.solaris-radio__control{outline-offset:.2rem;outline:.2rem solid var(--solaris-radio-accent)}.solaris-radio__native:active+.solaris-radio__control{transform:scale(.98)}.solaris-radio__native:checked+.solaris-radio__control{border-color:var(--solaris-radio-accent)}.solaris-radio__native:checked+.solaris-radio__control .solaris-radio__inner{opacity:1;transform:scale(1)}:host([data-variant=dot][data-appearance=outline]) .solaris-radio__native:checked+.solaris-radio__control{background:transparent}:host([data-variant=dot][data-appearance=solid]) .solaris-radio__native:checked+.solaris-radio__control{background:var(--solaris-radio-soft-fill)}:host([data-variant=icon]) .solaris-radio__control{padding:.25rem;background-clip:content-box}:host([data-variant=icon]) .solaris-radio__inner{width:var(--_icon-dot);height:var(--_icon-dot)}:host([data-variant=icon][data-appearance=solid]) .solaris-radio__native:checked+.solaris-radio__control{background:var(--solaris-radio-accent)}:host([data-variant=icon][data-appearance=solid]) .solaris-radio__native:checked+.solaris-radio__control .solaris-radio__inner{background:var(--solaris-radio-on-accent)}:host([data-variant=icon][data-appearance=outline]) .solaris-radio__native:checked+.solaris-radio__control{background:transparent}:host([data-variant=icon][data-appearance=outline]) .solaris-radio__native:checked+.solaris-radio__control .solaris-radio__inner{background:var(--solaris-radio-accent)}:host([data-disabled=true]) .solaris-radio{opacity:.55;cursor:not-allowed}:host([data-disabled=true]) .solaris-radio__control{border-color:color-mix(in srgb,var(--_border) 70%,transparent)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
5551
5530
  }
5552
5531
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisRadio, decorators: [{
5553
5532
  type: Component,
@@ -5566,7 +5545,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
5566
5545
  '[attr.data-disabled]': 'disabled() ? "true" : null',
5567
5546
  '[attr.data-checked]': 'checked() ? "true" : null',
5568
5547
  '[style.--solaris-radio-custom]': 'customAccent()',
5569
- }, template: "<label class=\"solaris-radio\">\n <input\n #native\n class=\"solaris-radio__native\"\n type=\"radio\"\n [attr.id]=\"id()\"\n [attr.name]=\"name()\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.tabindex]=\"tabIndex()\"\n (change)=\"onNativeChange()\"\n (keydown)=\"onNativeKeydown($event)\"\n (blur)=\"onBlur()\"\n />\n\n <span class=\"solaris-radio__control\" aria-hidden=\"true\">\n <span class=\"solaris-radio__inner\" aria-hidden=\"true\"></span>\n </span>\n\n <span class=\"solaris-radio__content\">\n <ng-content />\n </span>\n</label>\n", styles: [":host{--_size: 2rem;--_dot: .8rem;--_icon-dot: .55rem;--_text: var(--solaris-color-text);--_radius: var(--solaris-radius-full);--_border: var(--solaris-color-border);--solaris-radio-border: var(--_border);--_muted: var(--solaris-color-text-muted);--solaris-radio-accent: var(--solaris-color-primary);--solaris-radio-on-accent: var(--solaris-color-primary-contrast);--solaris-radio-soft-fill: color-mix(in srgb, var(--solaris-radio-accent) 12%, transparent);display:inline-flex}:host([data-size=sm]){--_dot: .7rem;--_size: 1.8rem;--_icon-dot: .5rem}:host([data-size=md]){--_size: 2rem;--_dot: .8rem;--_icon-dot: .55rem}:host([data-size=lg]){--_size: 2.4rem;--_dot: .95rem;--_icon-dot: .65rem}:host([data-color=primary]){--solaris-radio-accent: var(--solaris-color-primary)}:host([data-color=success]){--solaris-radio-accent: var(--solaris-color-success)}:host([data-color=warning]){--solaris-radio-accent: var(--solaris-color-warning)}:host([data-color=error]){--solaris-radio-accent: var(--solaris-color-error)}:host([data-color=info]){--solaris-radio-accent: var(--solaris-color-info)}:host([data-color=custom]){--solaris-radio-accent: var(--solaris-radio-custom, var(--solaris-color-primary))}.solaris-radio{gap:.8rem;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;color:var(--_text);display:inline-flex}.solaris-radio__native{opacity:0;width:1px;height:1px;position:absolute;pointer-events:none}.solaris-radio__control{flex:0 0 auto;width:var(--_size);height:var(--_size);display:grid;place-items:center;box-sizing:border-box;background:transparent;border-radius:var(--_radius);border:.1rem solid var(--solaris-radio-border)}.solaris-radio__content{gap:.2rem;line-height:1.3;display:inline-flex;flex-direction:column;justify-content:center;min-height:var(--_size)}.solaris-radio__inner{opacity:0;width:var(--_dot);height:var(--_dot);transform:scale(.4);background:var(--solaris-radio-accent);border-radius:var(--solaris-radius-full);transition:opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),background-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-radio:hover .solaris-radio__control{border-color:color-mix(in srgb,var(--solaris-radio-accent) 36%,var(--solaris-radio-border))}.solaris-radio__native:focus-visible+.solaris-radio__control{outline-offset:.2rem;outline:.2rem solid var(--solaris-radio-accent)}.solaris-radio__native:active+.solaris-radio__control{transform:scale(.98)}.solaris-radio__native:checked+.solaris-radio__control{border-color:var(--solaris-radio-accent)}.solaris-radio__native:checked+.solaris-radio__control .solaris-radio__inner{opacity:1;transform:scale(1)}:host([data-variant=dot][data-appearance=outline]) .solaris-radio__native:checked+.solaris-radio__control{background:transparent}:host([data-variant=dot][data-appearance=solid]) .solaris-radio__native:checked+.solaris-radio__control{background:var(--solaris-radio-soft-fill)}:host([data-variant=icon]) .solaris-radio__control{padding:.25rem;background-clip:content-box}:host([data-variant=icon]) .solaris-radio__inner{width:var(--_icon-dot);height:var(--_icon-dot)}:host([data-variant=icon][data-appearance=solid]) .solaris-radio__native:checked+.solaris-radio__control{background:var(--solaris-radio-accent)}:host([data-variant=icon][data-appearance=solid]) .solaris-radio__native:checked+.solaris-radio__control .solaris-radio__inner{background:var(--solaris-radio-on-accent)}:host([data-variant=icon][data-appearance=outline]) .solaris-radio__native:checked+.solaris-radio__control{background:transparent}:host([data-variant=icon][data-appearance=outline]) .solaris-radio__native:checked+.solaris-radio__control .solaris-radio__inner{background:var(--solaris-radio-accent)}:host([data-disabled=true]) .solaris-radio{opacity:.55;cursor:not-allowed}:host([data-disabled=true]) .solaris-radio__control{border-color:color-mix(in srgb,var(--_border) 70%,transparent)}\n"] }]
5548
+ }, template: "<label class=\"solaris-radio\">\n <input\n #native\n class=\"solaris-radio__native\"\n type=\"radio\"\n [attr.id]=\"id()\"\n [attr.name]=\"name()\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.tabindex]=\"tabIndex()\"\n (change)=\"onNativeChange()\"\n (keydown)=\"onNativeKeydown($event)\"\n (blur)=\"onBlur()\"\n />\n\n <span class=\"solaris-radio__control\" aria-hidden=\"true\">\n <span class=\"solaris-radio__inner\" aria-hidden=\"true\"></span>\n </span>\n\n <span class=\"solaris-radio__content\">\n <ng-content />\n </span>\n</label>\n", styles: [":host{--_size: var(--solaris-indicator-size-md);--_dot: var(--solaris-indicator-dot-size-md);--_icon-dot: var(--solaris-indicator-icon-dot-size-md);--_text: var(--solaris-color-text);--_radius: var(--solaris-indicator-radius);--_border: var(--solaris-color-border);--solaris-radio-border: var(--_border);--_muted: var(--solaris-color-text-muted);--solaris-radio-accent: var(--solaris-color-primary);--solaris-radio-on-accent: var(--solaris-color-primary-contrast);--solaris-radio-soft-fill: color-mix(in srgb, var(--solaris-radio-accent) 12%, transparent);display:inline-flex}:host([data-size=sm]){--_size: var(--solaris-indicator-size-sm);--_dot: var(--solaris-indicator-dot-size-sm);--_icon-dot: var(--solaris-indicator-icon-dot-size-sm)}:host([data-size=md]){--_size: var(--solaris-indicator-size-md);--_dot: var(--solaris-indicator-dot-size-md);--_icon-dot: var(--solaris-indicator-icon-dot-size-md)}:host([data-size=lg]){--_size: var(--solaris-indicator-size-lg);--_dot: var(--solaris-indicator-dot-size-lg);--_icon-dot: var(--solaris-indicator-icon-dot-size-lg)}:host([data-color=primary]){--solaris-radio-accent: var(--solaris-color-primary)}:host([data-color=success]){--solaris-radio-accent: var(--solaris-color-success)}:host([data-color=warning]){--solaris-radio-accent: var(--solaris-color-warning)}:host([data-color=error]){--solaris-radio-accent: var(--solaris-color-error)}:host([data-color=info]){--solaris-radio-accent: var(--solaris-color-info)}:host([data-color=custom]){--solaris-radio-accent: var(--solaris-radio-custom, var(--solaris-color-primary))}.solaris-radio{gap:.8rem;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;color:var(--_text);display:inline-flex}.solaris-radio__native{opacity:0;width:1px;height:1px;position:absolute;pointer-events:none}.solaris-radio__control{inline-size:var(--_size);block-size:var(--_size);min-inline-size:var(--_size);min-block-size:var(--_size);aspect-ratio:1/1;display:inline-grid;place-items:center;box-sizing:border-box;line-height:0;border-radius:var(--_radius);border:var(--solaris-indicator-border-width) solid var(--solaris-radio-border);background:transparent;color:currentColor;flex:0 0 auto}.solaris-radio__content{gap:.2rem;line-height:1.3;display:inline-flex;flex-direction:column;justify-content:center;min-height:var(--_size)}.solaris-radio__inner{opacity:0;width:var(--_dot);height:var(--_dot);transform:scale(.4);background:var(--solaris-radio-accent);border-radius:var(--solaris-radius-full);transition:opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),background-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-radio:hover .solaris-radio__control{border-color:color-mix(in srgb,var(--solaris-radio-accent) 36%,var(--solaris-radio-border))}.solaris-radio__native:focus-visible+.solaris-radio__control{outline-offset:.2rem;outline:.2rem solid var(--solaris-radio-accent)}.solaris-radio__native:active+.solaris-radio__control{transform:scale(.98)}.solaris-radio__native:checked+.solaris-radio__control{border-color:var(--solaris-radio-accent)}.solaris-radio__native:checked+.solaris-radio__control .solaris-radio__inner{opacity:1;transform:scale(1)}:host([data-variant=dot][data-appearance=outline]) .solaris-radio__native:checked+.solaris-radio__control{background:transparent}:host([data-variant=dot][data-appearance=solid]) .solaris-radio__native:checked+.solaris-radio__control{background:var(--solaris-radio-soft-fill)}:host([data-variant=icon]) .solaris-radio__control{padding:.25rem;background-clip:content-box}:host([data-variant=icon]) .solaris-radio__inner{width:var(--_icon-dot);height:var(--_icon-dot)}:host([data-variant=icon][data-appearance=solid]) .solaris-radio__native:checked+.solaris-radio__control{background:var(--solaris-radio-accent)}:host([data-variant=icon][data-appearance=solid]) .solaris-radio__native:checked+.solaris-radio__control .solaris-radio__inner{background:var(--solaris-radio-on-accent)}:host([data-variant=icon][data-appearance=outline]) .solaris-radio__native:checked+.solaris-radio__control{background:transparent}:host([data-variant=icon][data-appearance=outline]) .solaris-radio__native:checked+.solaris-radio__control .solaris-radio__inner{background:var(--solaris-radio-accent)}:host([data-disabled=true]) .solaris-radio{opacity:.55;cursor:not-allowed}:host([data-disabled=true]) .solaris-radio__control{border-color:color-mix(in srgb,var(--_border) 70%,transparent)}\n"] }]
5570
5549
  }], ctorParameters: () => [], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], inputName: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], checkedInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }], native: [{
5571
5550
  type: ViewChild,
5572
5551
  args: ['native', { static: true }]
@@ -6363,7 +6342,7 @@ class SolarisCard {
6363
6342
  customColor = computed(() => resolveCardCustomColor(this.color()), ...(ngDevMode ? [{ debugName: "customColor" }] : /* istanbul ignore next */ []));
6364
6343
  colorKey = computed(() => resolveCardColorKey(this.color()), ...(ngDevMode ? [{ debugName: "colorKey" }] : /* istanbul ignore next */ []));
6365
6344
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
6366
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: SolarisCard, isStandalone: true, selector: "solaris-card", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, reservedInlineEnd: { classPropertyName: "reservedInlineEnd", publicName: "reservedInlineEnd", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-size": "size()", "attr.data-orientation": "orientation()", "attr.data-appearance": "appearance()", "attr.data-color": "colorKey()", "attr.data-selected": "selected() ? \"true\" : null", "attr.data-invalid": "invalid() ? \"true\" : null", "attr.data-interactive": "interactive() ? \"true\" : null", "attr.data-disabled": "disabled() ? \"true\" : null", "attr.aria-disabled": "disabled() ? \"true\" : null", "style.--solaris-card-radius": "resolvedRadius()", "style.--solaris-card-accent-custom": "customColor()", "style.--solaris-card-min-height": "normalizedMinHeight()", "style.--solaris-card-reserved-inline-end": "normalizedReservedInlineEnd()" }, classAttribute: "solaris-card-host" }, ngImport: i0, template: "<article class=\"solaris-card\">\n <div class=\"solaris-card__media\">\n <ng-content select=\"solaris-card-media, [solaris-card-media]\"></ng-content>\n </div>\n\n <div class=\"solaris-card__content\">\n <div class=\"solaris-card__header\">\n <div class=\"solaris-card__header-main\">\n <div class=\"solaris-card__eyebrow\">\n <ng-content select=\"[solaris-card-eyebrow]\"></ng-content>\n </div>\n\n <div class=\"solaris-card__title\">\n <ng-content select=\"[solaris-card-title]\"></ng-content>\n </div>\n </div>\n\n <div class=\"solaris-card__badge\">\n <ng-content select=\"[solaris-card-badge]\"></ng-content>\n </div>\n </div>\n\n <div class=\"solaris-card__description\">\n <ng-content select=\"[solaris-card-description]\"></ng-content>\n </div>\n\n <div class=\"solaris-card__meta\">\n <ng-content select=\"[solaris-card-meta]\"></ng-content>\n </div>\n\n <div class=\"solaris-card__footer\">\n <div class=\"solaris-card__footer-main\">\n <ng-content select=\"[solaris-card-footer]\"></ng-content>\n </div>\n\n <div class=\"solaris-card__actions\">\n <ng-content select=\"[solaris-card-actions]\"></ng-content>\n </div>\n </div>\n </div>\n</article>\n", styles: [":host{display:block;min-inline-size:0;inline-size:100%;--solaris-card-accent: var(--solaris-color-primary);--solaris-card-bg: var(--solaris-color-surface);--solaris-card-bg-hover: color-mix( in srgb, var(--solaris-card-bg) 92%, var(--solaris-color-white) );--solaris-card-bg-selected: color-mix( in srgb, var(--solaris-card-accent) 8%, var(--solaris-color-surface) );--solaris-card-border: var(--solaris-color-border);--solaris-card-border-hover: color-mix( in srgb, var(--solaris-card-accent) 18%, var(--solaris-card-border) );--solaris-card-border-selected: color-mix( in srgb, var(--solaris-card-accent) 72%, var(--solaris-card-border) );--solaris-card-border-invalid: var(--solaris-color-error);--solaris-card-shadow: var(--solaris-shadow-xs);--solaris-card-shadow-hover: var(--solaris-shadow-sm);--solaris-card-shadow-selected: var(--solaris-shadow-sm);--solaris-card-title-color: var(--solaris-color-text);--solaris-card-description-color: var(--solaris-color-text-muted);--solaris-card-meta-color: var(--solaris-color-text);--solaris-card-eyebrow-color: var(--solaris-color-text-muted);--solaris-card-disabled-opacity: .62;--solaris-card-gap: var(--solaris-space-4);--solaris-card-padding-x: var(--solaris-space-5);--solaris-card-padding-y: var(--solaris-space-5);--solaris-card-content-gap: var(--solaris-space-3);--solaris-card-padding-top: var(--solaris-card-padding-y);--solaris-card-padding-left: var(--solaris-card-padding-x);--solaris-card-padding-right: calc( var(--solaris-card-padding-x) + var(--solaris-card-reserved-inline-end, 0px) );--solaris-card-padding-bottom: var(--solaris-card-padding-y);--solaris-card-media-size: 7.2rem;--solaris-card-radius: var(--solaris-radius-lg)}:host([data-size=sm]){--solaris-card-padding-x: var(--solaris-space-4);--solaris-card-padding-y: var(--solaris-space-4);--solaris-card-gap: var(--solaris-space-3);--solaris-card-content-gap: var(--solaris-space-2);--solaris-card-media-size: 5.6rem}:host([data-size=md]){--solaris-card-padding-x: var(--solaris-space-5);--solaris-card-padding-y: var(--solaris-space-5);--solaris-card-gap: var(--solaris-space-4);--solaris-card-content-gap: var(--solaris-space-3);--solaris-card-media-size: 7.2rem}:host([data-size=lg]){--solaris-card-padding-x: var(--solaris-space-6);--solaris-card-padding-y: var(--solaris-space-6);--solaris-card-gap: var(--solaris-space-5);--solaris-card-content-gap: var(--solaris-space-4);--solaris-card-media-size: 8.8rem}:host([data-color=neutral]){--solaris-card-accent: var(--solaris-color-primary)}:host([data-color=primary]){--solaris-card-accent: var(--solaris-color-primary)}:host([data-color=success]){--solaris-card-accent: var(--solaris-color-success)}:host([data-color=warning]){--solaris-card-accent: var(--solaris-color-warning)}:host([data-color=error]){--solaris-card-accent: var(--solaris-color-error)}:host([data-color=info]){--solaris-card-accent: var(--solaris-color-info)}:host([data-color=custom]){--solaris-card-accent: var(--solaris-card-accent-custom, var(--solaris-color-primary))}:host([data-appearance=outline]){--solaris-card-bg: var(--solaris-color-surface);--solaris-card-border: var(--solaris-color-border);--solaris-card-shadow: var(--solaris-shadow-xs)}:host([data-appearance=soft]){--solaris-card-bg: color-mix( in srgb, var(--solaris-card-accent) 6%, var(--solaris-color-surface) );--solaris-card-border: color-mix( in srgb, var(--solaris-card-accent) 18%, var(--solaris-color-border) );--solaris-card-shadow: var(--solaris-shadow-xs)}:host([data-appearance=solid]){--solaris-card-bg: var(--solaris-card-accent);--solaris-card-bg-hover: color-mix( in srgb, var(--solaris-card-accent) 92%, var(--solaris-color-white) );--solaris-card-border: color-mix( in srgb, var(--solaris-card-accent) 80%, var(--solaris-color-border) );--solaris-card-title-color: var(--solaris-color-primary-contrast);--solaris-card-description-color: var(--solaris-color-primary-contrast);--solaris-card-meta-color: var(--solaris-color-primary-contrast);--solaris-card-eyebrow-color: var(--solaris-color-primary-contrast)}:host([data-appearance=elevated]){--solaris-card-bg: var(--solaris-color-surface);--solaris-card-border: color-mix(in srgb, var(--solaris-color-border) 70%, transparent);--solaris-card-shadow: var(--solaris-shadow-sm);--solaris-card-shadow-hover: var(--solaris-shadow-md)}:host([data-appearance=ghost]){--solaris-card-bg: transparent;--solaris-card-bg-hover: color-mix(in srgb, var(--solaris-card-accent) 4%, transparent);--solaris-card-border: transparent;--solaris-card-shadow: none;--solaris-card-shadow-hover: none}:host([data-appearance=glass]){--solaris-card-bg: color-mix(in srgb, var(--solaris-card-accent) 10%, transparent);--solaris-card-bg-hover: color-mix(in srgb, var(--solaris-card-accent) 16%, transparent);--solaris-card-border: color-mix( in srgb, var(--solaris-color-surface) 34%, var(--solaris-color-border) );--solaris-card-border-hover: color-mix( in srgb, var(--solaris-card-accent) 36%, var(--solaris-color-border) );--solaris-card-shadow: var(--solaris-shadow-sm);--solaris-card-shadow-hover: var(--solaris-shadow-md)}:host([data-appearance=glass]) .solaris-card{backdrop-filter:blur(1.4rem) saturate(1.35);-webkit-backdrop-filter:blur(1.4rem) saturate(1.35)}:host([data-appearance=glass]) .solaris-card:before{content:\"\";position:absolute;inset:0;z-index:var(--solaris-z-base);pointer-events:none;border-radius:inherit;background:linear-gradient(135deg,color-mix(in srgb,var(--solaris-color-surface) 18%,transparent) 0%,transparent 48%)}:host([data-appearance=gradient]){--solaris-card-bg: linear-gradient( 135deg, var(--solaris-card-accent) 0%, color-mix(in srgb, var(--solaris-card-accent) 62%, var(--solaris-color-text)) 100% );--solaris-card-bg-hover: linear-gradient( 135deg, color-mix(in srgb, var(--solaris-card-accent) 92%, var(--solaris-color-white)) 0%, color-mix(in srgb, var(--solaris-card-accent) 62%, var(--solaris-color-text)) 100% );--solaris-card-border: color-mix(in srgb, var(--solaris-card-accent) 42%, transparent);--solaris-card-border-hover: color-mix(in srgb, var(--solaris-card-accent) 64%, transparent);--solaris-card-title-color: var(--solaris-color-primary-contrast);--solaris-card-description-color: var(--solaris-color-primary-contrast);--solaris-card-meta-color: var(--solaris-color-primary-contrast);--solaris-card-eyebrow-color: var(--solaris-color-primary-contrast)}:host([data-appearance=gradient]) .solaris-card:before{content:\"\";position:absolute;inset:0;z-index:var(--solaris-z-base);pointer-events:none;border-radius:inherit;background:radial-gradient(circle at top right,color-mix(in srgb,var(--solaris-color-surface) 24%,transparent) 0%,transparent 42%)}:host([data-invalid=true]){--solaris-card-border: var(--solaris-card-border-invalid);--solaris-card-border-hover: var(--solaris-card-border-invalid);--solaris-card-border-selected: var(--solaris-card-border-invalid)}.solaris-card{min-inline-size:0;inline-size:100%;min-block-size:var(--solaris-card-min-height, auto);display:flex;flex-direction:column;box-sizing:border-box;overflow:hidden;gap:var(--solaris-card-gap);padding:var(--solaris-card-padding-top) var(--solaris-card-padding-right) var(--solaris-card-padding-bottom) var(--solaris-card-padding-left);color:var(--solaris-color-text);background:var(--solaris-card-bg);border:1px solid var(--solaris-card-border);border-radius:var(--solaris-card-radius);box-shadow:var(--solaris-card-shadow)}:host([data-interactive=true]:not([data-disabled=true])) .solaris-card{cursor:pointer;transition:background-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),border-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),box-shadow var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard)}:host([data-interactive=true]:not([data-disabled=true])) .solaris-card:hover{background:var(--solaris-card-bg-hover);border-color:var(--solaris-card-border-hover);box-shadow:var(--solaris-card-shadow-hover)}:host([data-selected=true]) .solaris-card{border-color:var(--solaris-card-border-selected);box-shadow:var(--solaris-card-shadow-selected)}:host([data-selected=true][data-appearance=outline]) .solaris-card,:host([data-selected=true][data-appearance=elevated]) .solaris-card,:host([data-selected=true][data-appearance=ghost]) .solaris-card{background:var(--solaris-card-bg-selected)}:host([data-selected=true][data-appearance=soft]) .solaris-card{background:color-mix(in srgb,var(--solaris-card-accent) 12%,var(--solaris-color-surface))}:host([data-selected=true][data-appearance=solid]) .solaris-card{background:var(--solaris-card-bg)}:host([data-disabled=true]) .solaris-card{cursor:not-allowed;box-shadow:none;opacity:var(--solaris-card-disabled-opacity)}.solaris-card__media{min-inline-size:0;inline-size:100%;overflow:hidden;border-radius:calc(var(--solaris-card-radius) - .2rem)}.solaris-card__media:empty{display:none}.solaris-card__content{min-inline-size:0;display:flex;flex:1 1 auto;flex-direction:column;gap:var(--solaris-card-content-gap)}.solaris-card__header{min-inline-size:0;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--solaris-space-3)}.solaris-card__header-main{min-inline-size:0;flex:1 1 auto;display:flex;flex-direction:column;gap:var(--solaris-space-2)}.solaris-card__eyebrow{min-inline-size:0;color:var(--solaris-card-eyebrow-color);font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-normal);letter-spacing:var(--solaris-ls-md);text-transform:uppercase;overflow-wrap:anywhere}.solaris-card__title{min-inline-size:0;color:var(--solaris-card-title-color);font-size:var(--solaris-fs-16);font-weight:700;line-height:var(--solaris-lh-tight);overflow-wrap:anywhere}.solaris-card__description{min-inline-size:0;color:var(--solaris-card-description-color);font-size:var(--solaris-fs-14);line-height:var(--solaris-lh-normal);overflow-wrap:anywhere}.solaris-card__meta{min-inline-size:0;color:var(--solaris-card-meta-color);font-size:var(--solaris-fs-14);font-weight:600;line-height:var(--solaris-lh-normal);overflow-wrap:anywhere}.solaris-card__badge{flex:0 0 auto;display:inline-flex;align-items:flex-start}.solaris-card__badge:empty{display:none}.solaris-card__footer{min-inline-size:0;display:flex;align-items:center;justify-content:space-between;gap:var(--solaris-space-3)}.solaris-card__footer:empty{display:none}.solaris-card__footer-main{min-inline-size:0;flex:1 1 auto}.solaris-card__footer-main:empty{display:none}.solaris-card__actions{flex:0 0 auto;display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--solaris-space-2)}.solaris-card__actions:empty{display:none}:host([data-orientation=horizontal]) .solaris-card{flex-direction:row;align-items:stretch}:host([data-orientation=horizontal]) .solaris-card__media{flex:0 0 min(32%,var(--solaris-card-media-size));inline-size:min(32%,var(--solaris-card-media-size))}:host([data-orientation=horizontal]) .solaris-card__content{justify-content:center}:host([data-orientation=compact]) .solaris-card{flex-direction:row;align-items:center;gap:var(--solaris-space-3)}:host([data-orientation=compact]) .solaris-card__media{flex:0 0 auto;inline-size:var(--solaris-card-media-size)}:host([data-orientation=compact]) .solaris-card__content{gap:var(--solaris-space-2)}:host([data-orientation=compact]) .solaris-card__footer{margin-block-start:var(--solaris-space-1)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6345
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: SolarisCard, isStandalone: true, selector: "solaris-card", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, reservedInlineEnd: { classPropertyName: "reservedInlineEnd", publicName: "reservedInlineEnd", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-size": "size()", "attr.data-orientation": "orientation()", "attr.data-appearance": "appearance()", "attr.data-color": "colorKey()", "attr.data-selected": "selected() ? \"true\" : null", "attr.data-invalid": "invalid() ? \"true\" : null", "attr.data-interactive": "interactive() ? \"true\" : null", "attr.data-disabled": "disabled() ? \"true\" : null", "attr.aria-disabled": "disabled() ? \"true\" : null", "style.--solaris-card-radius": "resolvedRadius()", "style.--solaris-card-accent-custom": "customColor()", "style.--solaris-card-min-height": "normalizedMinHeight()", "style.--solaris-card-reserved-inline-end": "normalizedReservedInlineEnd()" }, classAttribute: "solaris-card-host" }, ngImport: i0, template: "<article class=\"solaris-card\">\n <div class=\"solaris-card__media\">\n <ng-content select=\"solaris-card-media, [solaris-card-media]\"></ng-content>\n </div>\n\n <div class=\"solaris-card__content\">\n <div class=\"solaris-card__header\">\n <div class=\"solaris-card__header-main\">\n <div class=\"solaris-card__eyebrow\">\n <ng-content select=\"[solaris-card-eyebrow]\"></ng-content>\n </div>\n\n <div class=\"solaris-card__title\">\n <ng-content select=\"[solaris-card-title]\"></ng-content>\n </div>\n </div>\n\n <div class=\"solaris-card__badge\">\n <ng-content select=\"[solaris-card-badge]\"></ng-content>\n </div>\n </div>\n\n <div class=\"solaris-card__description\">\n <ng-content select=\"[solaris-card-description]\"></ng-content>\n </div>\n\n <div class=\"solaris-card__meta\">\n <ng-content select=\"[solaris-card-meta]\"></ng-content>\n </div>\n\n <div class=\"solaris-card__footer\">\n <div class=\"solaris-card__footer-main\">\n <ng-content select=\"[solaris-card-footer]\"></ng-content>\n </div>\n\n <div class=\"solaris-card__actions\">\n <ng-content select=\"[solaris-card-actions]\"></ng-content>\n </div>\n </div>\n </div>\n</article>\n", styles: [":host{display:block;min-inline-size:0;inline-size:100%;--solaris-card-bg: var(--solaris-color-surface);--solaris-card-accent: var(--solaris-color-primary);--solaris-card-bg-hover: color-mix(in srgb, var(--solaris-card-bg) 92%, var(--solaris-color-white));--solaris-card-bg-selected: color-mix(in srgb, var(--solaris-card-accent) 8%, var(--solaris-color-surface));--solaris-card-border: var(--solaris-color-border);--solaris-card-border-invalid: var(--solaris-color-error);--solaris-card-border-hover: color-mix(in srgb, var(--solaris-card-accent) 18%, var(--solaris-card-border));--solaris-card-border-selected: color-mix(in srgb, var(--solaris-card-accent) 72%, var(--solaris-card-border));--solaris-card-shadow: var(--solaris-shadow-xs);--solaris-card-shadow-hover: var(--solaris-shadow-sm);--solaris-card-shadow-selected: var(--solaris-shadow-sm);--solaris-card-meta-color: var(--solaris-color-text);--solaris-card-title-color: var(--solaris-color-text);--solaris-card-eyebrow-color: var(--solaris-color-text-muted);--solaris-card-description-color: var(--solaris-color-text-muted);--solaris-card-disabled-opacity: .62;--solaris-card-gap: var(--solaris-space-4);--solaris-card-padding-x: var(--solaris-space-5);--solaris-card-padding-y: var(--solaris-space-5);--solaris-card-content-gap: var(--solaris-space-3);--solaris-card-padding-top: var(--solaris-card-padding-y);--solaris-card-padding-left: var(--solaris-card-padding-x);--solaris-card-padding-right: calc( var(--solaris-card-padding-x) + var(--solaris-card-reserved-inline-end, 0px) );--solaris-card-padding-bottom: var(--solaris-card-padding-y);--solaris-card-media-size: 7.2rem;--solaris-card-radius: var(--solaris-radius-lg)}:host([data-size=sm]){--solaris-card-padding-x: var(--solaris-space-4);--solaris-card-padding-y: var(--solaris-space-4);--solaris-card-gap: var(--solaris-space-3);--solaris-card-content-gap: var(--solaris-space-2);--solaris-card-media-size: 5.6rem}:host([data-size=md]){--solaris-card-padding-x: var(--solaris-space-5);--solaris-card-padding-y: var(--solaris-space-5);--solaris-card-gap: var(--solaris-space-4);--solaris-card-content-gap: var(--solaris-space-3);--solaris-card-media-size: 7.2rem}:host([data-size=lg]){--solaris-card-padding-x: var(--solaris-space-6);--solaris-card-padding-y: var(--solaris-space-6);--solaris-card-gap: var(--solaris-space-5);--solaris-card-content-gap: var(--solaris-space-4);--solaris-card-media-size: 8.8rem}:host([data-color=neutral]){--solaris-card-accent: var(--solaris-color-primary)}:host([data-color=primary]){--solaris-card-accent: var(--solaris-color-primary)}:host([data-color=success]){--solaris-card-accent: var(--solaris-color-success)}:host([data-color=warning]){--solaris-card-accent: var(--solaris-color-warning)}:host([data-color=error]){--solaris-card-accent: var(--solaris-color-error)}:host([data-color=info]){--solaris-card-accent: var(--solaris-color-info)}:host([data-color=custom]){--solaris-card-accent: var(--solaris-card-accent-custom, var(--solaris-color-primary))}:host([data-appearance=outline]){--solaris-card-bg: var(--solaris-color-surface);--solaris-card-border: var(--solaris-color-border);--solaris-card-shadow: var(--solaris-shadow-xs)}:host([data-appearance=soft]){--solaris-card-bg: color-mix( in srgb, var(--solaris-card-accent) 6%, var(--solaris-color-surface) );--solaris-card-border: color-mix( in srgb, var(--solaris-card-accent) 18%, var(--solaris-color-border) );--solaris-card-shadow: var(--solaris-shadow-xs)}:host([data-appearance=solid]){--solaris-card-bg: var(--solaris-card-accent);--solaris-card-bg-hover: color-mix( in srgb, var(--solaris-card-accent) 92%, var(--solaris-color-white) );--solaris-card-border: color-mix( in srgb, var(--solaris-card-accent) 80%, var(--solaris-color-border) );--solaris-card-title-color: var(--solaris-color-primary-contrast);--solaris-card-description-color: var(--solaris-color-primary-contrast);--solaris-card-meta-color: var(--solaris-color-primary-contrast);--solaris-card-eyebrow-color: var(--solaris-color-primary-contrast)}:host([data-appearance=elevated]){--solaris-card-bg: var(--solaris-color-surface);--solaris-card-border: color-mix(in srgb, var(--solaris-color-border) 70%, transparent);--solaris-card-shadow: var(--solaris-shadow-sm);--solaris-card-shadow-hover: var(--solaris-shadow-md)}:host([data-appearance=ghost]){--solaris-card-bg: transparent;--solaris-card-bg-hover: color-mix(in srgb, var(--solaris-card-accent) 4%, transparent);--solaris-card-border: transparent;--solaris-card-shadow: none;--solaris-card-shadow-hover: none}:host([data-appearance=glass]){--solaris-card-bg: color-mix(in srgb, var(--solaris-card-accent) 10%, transparent);--solaris-card-bg-hover: color-mix(in srgb, var(--solaris-card-accent) 16%, transparent);--solaris-card-border: color-mix( in srgb, var(--solaris-color-surface) 34%, var(--solaris-color-border) );--solaris-card-border-hover: color-mix( in srgb, var(--solaris-card-accent) 36%, var(--solaris-color-border) );--solaris-card-shadow: var(--solaris-shadow-sm);--solaris-card-shadow-hover: var(--solaris-shadow-md)}:host([data-appearance=gradient]){--solaris-card-bg: linear-gradient( 135deg, var(--solaris-card-accent) 0%, color-mix(in srgb, var(--solaris-card-accent) 62%, var(--solaris-color-text)) 100% );--solaris-card-bg-hover: linear-gradient( 135deg, color-mix(in srgb, var(--solaris-card-accent) 92%, var(--solaris-color-white)) 0%, color-mix(in srgb, var(--solaris-card-accent) 62%, var(--solaris-color-text)) 100% );--solaris-card-border: color-mix(in srgb, var(--solaris-card-accent) 42%, transparent);--solaris-card-border-hover: color-mix(in srgb, var(--solaris-card-accent) 64%, transparent);--solaris-card-title-color: var(--solaris-color-primary-contrast);--solaris-card-description-color: var(--solaris-color-primary-contrast);--solaris-card-meta-color: var(--solaris-color-primary-contrast);--solaris-card-eyebrow-color: var(--solaris-color-primary-contrast)}:host([data-invalid=true]){--solaris-card-border: var(--solaris-card-border-invalid);--solaris-card-border-hover: var(--solaris-card-border-invalid);--solaris-card-border-selected: var(--solaris-card-border-invalid)}.solaris-card{min-inline-size:0;inline-size:100%;min-block-size:var(--solaris-card-min-height, auto);position:relative;isolation:isolate;display:flex;flex-direction:column;box-sizing:border-box;overflow:hidden;gap:var(--solaris-card-gap);padding:var(--solaris-card-padding-top) var(--solaris-card-padding-right) var(--solaris-card-padding-bottom) var(--solaris-card-padding-left);color:var(--solaris-color-text);background:var(--solaris-card-bg);border:1px solid var(--solaris-card-border);border-radius:var(--solaris-card-radius);box-shadow:var(--solaris-card-shadow)}:host([data-appearance=glass]) .solaris-card{backdrop-filter:blur(1.4rem) saturate(1.35);-webkit-backdrop-filter:blur(1.4rem) saturate(1.35)}:host([data-appearance=glass]) .solaris-card:before{content:\"\";position:absolute;inset:0;z-index:var(--solaris-z-base);pointer-events:none;border-radius:inherit;background:linear-gradient(135deg,color-mix(in srgb,var(--solaris-color-surface) 18%,transparent) 0%,transparent 48%)}:host([data-appearance=gradient]) .solaris-card:before{content:\"\";position:absolute;inset:0;z-index:var(--solaris-z-base);pointer-events:none;border-radius:inherit;background:radial-gradient(circle at top right,color-mix(in srgb,var(--solaris-color-surface) 24%,transparent) 0%,transparent 42%)}.solaris-card>*{position:relative;z-index:var(--solaris-z-raised)}:host([data-interactive=true]:not([data-disabled=true])) .solaris-card{cursor:pointer;transition:background-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),border-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),box-shadow var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard)}:host([data-interactive=true]:not([data-disabled=true])) .solaris-card:hover{background:var(--solaris-card-bg-hover);border-color:var(--solaris-card-border-hover);box-shadow:var(--solaris-card-shadow-hover)}:host([data-selected=true]) .solaris-card{border-color:var(--solaris-card-border-selected);box-shadow:var(--solaris-card-shadow-selected)}:host([data-selected=true][data-appearance=outline]) .solaris-card,:host([data-selected=true][data-appearance=elevated]) .solaris-card,:host([data-selected=true][data-appearance=ghost]) .solaris-card{background:var(--solaris-card-bg-selected)}:host([data-selected=true][data-appearance=soft]) .solaris-card{background:color-mix(in srgb,var(--solaris-card-accent) 12%,var(--solaris-color-surface))}:host([data-selected=true][data-appearance=solid]) .solaris-card,:host([data-selected=true][data-appearance=glass]) .solaris-card,:host([data-selected=true][data-appearance=gradient]) .solaris-card{background:var(--solaris-card-bg)}:host([data-disabled=true]) .solaris-card{cursor:not-allowed;box-shadow:none;opacity:var(--solaris-card-disabled-opacity)}.solaris-card__media{min-inline-size:0;inline-size:100%;overflow:hidden;border-radius:calc(var(--solaris-card-radius) - .2rem)}.solaris-card__content{min-inline-size:0;display:flex;flex:1 1 auto;flex-direction:column;gap:var(--solaris-card-content-gap)}.solaris-card__header{min-inline-size:0;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--solaris-space-3)}.solaris-card__header-main{min-inline-size:0;flex:1 1 auto;display:flex;flex-direction:column;gap:var(--solaris-space-2)}.solaris-card__eyebrow{min-inline-size:0;color:var(--solaris-card-eyebrow-color);font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-normal);letter-spacing:var(--solaris-ls-md);text-transform:uppercase;overflow-wrap:anywhere}.solaris-card__title{min-inline-size:0;color:var(--solaris-card-title-color);font-size:var(--solaris-fs-16);font-weight:700;line-height:var(--solaris-lh-tight);overflow-wrap:anywhere}.solaris-card__description{min-inline-size:0;color:var(--solaris-card-description-color);font-size:var(--solaris-fs-14);line-height:var(--solaris-lh-normal);overflow-wrap:anywhere}.solaris-card__meta{min-inline-size:0;color:var(--solaris-card-meta-color);font-size:var(--solaris-fs-14);font-weight:600;line-height:var(--solaris-lh-normal);overflow-wrap:anywhere}.solaris-card__badge{flex:0 0 auto;display:inline-flex;align-items:flex-start}.solaris-card__footer{min-inline-size:0;display:flex;align-items:center;justify-content:space-between;gap:var(--solaris-space-3)}.solaris-card__footer-main{min-inline-size:0;flex:1 1 auto}.solaris-card__actions{flex:0 0 auto;display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--solaris-space-2)}.solaris-card__media:not(:has(solaris-card-media,[solaris-card-media])){display:none}.solaris-card__eyebrow:not(:has([solaris-card-eyebrow])){display:none}.solaris-card__title:not(:has([solaris-card-title])){display:none}.solaris-card__description:not(:has([solaris-card-description])){display:none}.solaris-card__meta:not(:has([solaris-card-meta])){display:none}.solaris-card__badge:not(:has([solaris-card-badge])){display:none}.solaris-card__footer-main:not(:has([solaris-card-footer])){display:none}.solaris-card__actions:not(:has([solaris-card-actions])){display:none}.solaris-card__header-main:not(:has([solaris-card-eyebrow],[solaris-card-title])){display:none}.solaris-card__header:not(:has([solaris-card-eyebrow],[solaris-card-title],[solaris-card-badge])){display:none}.solaris-card__footer:not(:has([solaris-card-footer],[solaris-card-actions])){display:none}:host([data-orientation=horizontal]) .solaris-card{flex-direction:row;align-items:stretch}:host([data-orientation=horizontal]) .solaris-card__media{flex:0 0 min(32%,var(--solaris-card-media-size));inline-size:min(32%,var(--solaris-card-media-size))}:host([data-orientation=horizontal]) .solaris-card__content{justify-content:center}:host([data-orientation=compact]) .solaris-card{flex-direction:row;align-items:center;gap:var(--solaris-space-3)}:host([data-orientation=compact]) .solaris-card__media{flex:0 0 auto;inline-size:var(--solaris-card-media-size)}:host([data-orientation=compact]) .solaris-card__content{gap:var(--solaris-space-2)}:host([data-orientation=compact]) .solaris-card__footer{margin-block-start:var(--solaris-space-1)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6367
6346
  }
6368
6347
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisCard, decorators: [{
6369
6348
  type: Component,
@@ -6382,7 +6361,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
6382
6361
  '[style.--solaris-card-accent-custom]': 'customColor()',
6383
6362
  '[style.--solaris-card-min-height]': 'normalizedMinHeight()',
6384
6363
  '[style.--solaris-card-reserved-inline-end]': 'normalizedReservedInlineEnd()',
6385
- }, template: "<article class=\"solaris-card\">\n <div class=\"solaris-card__media\">\n <ng-content select=\"solaris-card-media, [solaris-card-media]\"></ng-content>\n </div>\n\n <div class=\"solaris-card__content\">\n <div class=\"solaris-card__header\">\n <div class=\"solaris-card__header-main\">\n <div class=\"solaris-card__eyebrow\">\n <ng-content select=\"[solaris-card-eyebrow]\"></ng-content>\n </div>\n\n <div class=\"solaris-card__title\">\n <ng-content select=\"[solaris-card-title]\"></ng-content>\n </div>\n </div>\n\n <div class=\"solaris-card__badge\">\n <ng-content select=\"[solaris-card-badge]\"></ng-content>\n </div>\n </div>\n\n <div class=\"solaris-card__description\">\n <ng-content select=\"[solaris-card-description]\"></ng-content>\n </div>\n\n <div class=\"solaris-card__meta\">\n <ng-content select=\"[solaris-card-meta]\"></ng-content>\n </div>\n\n <div class=\"solaris-card__footer\">\n <div class=\"solaris-card__footer-main\">\n <ng-content select=\"[solaris-card-footer]\"></ng-content>\n </div>\n\n <div class=\"solaris-card__actions\">\n <ng-content select=\"[solaris-card-actions]\"></ng-content>\n </div>\n </div>\n </div>\n</article>\n", styles: [":host{display:block;min-inline-size:0;inline-size:100%;--solaris-card-accent: var(--solaris-color-primary);--solaris-card-bg: var(--solaris-color-surface);--solaris-card-bg-hover: color-mix( in srgb, var(--solaris-card-bg) 92%, var(--solaris-color-white) );--solaris-card-bg-selected: color-mix( in srgb, var(--solaris-card-accent) 8%, var(--solaris-color-surface) );--solaris-card-border: var(--solaris-color-border);--solaris-card-border-hover: color-mix( in srgb, var(--solaris-card-accent) 18%, var(--solaris-card-border) );--solaris-card-border-selected: color-mix( in srgb, var(--solaris-card-accent) 72%, var(--solaris-card-border) );--solaris-card-border-invalid: var(--solaris-color-error);--solaris-card-shadow: var(--solaris-shadow-xs);--solaris-card-shadow-hover: var(--solaris-shadow-sm);--solaris-card-shadow-selected: var(--solaris-shadow-sm);--solaris-card-title-color: var(--solaris-color-text);--solaris-card-description-color: var(--solaris-color-text-muted);--solaris-card-meta-color: var(--solaris-color-text);--solaris-card-eyebrow-color: var(--solaris-color-text-muted);--solaris-card-disabled-opacity: .62;--solaris-card-gap: var(--solaris-space-4);--solaris-card-padding-x: var(--solaris-space-5);--solaris-card-padding-y: var(--solaris-space-5);--solaris-card-content-gap: var(--solaris-space-3);--solaris-card-padding-top: var(--solaris-card-padding-y);--solaris-card-padding-left: var(--solaris-card-padding-x);--solaris-card-padding-right: calc( var(--solaris-card-padding-x) + var(--solaris-card-reserved-inline-end, 0px) );--solaris-card-padding-bottom: var(--solaris-card-padding-y);--solaris-card-media-size: 7.2rem;--solaris-card-radius: var(--solaris-radius-lg)}:host([data-size=sm]){--solaris-card-padding-x: var(--solaris-space-4);--solaris-card-padding-y: var(--solaris-space-4);--solaris-card-gap: var(--solaris-space-3);--solaris-card-content-gap: var(--solaris-space-2);--solaris-card-media-size: 5.6rem}:host([data-size=md]){--solaris-card-padding-x: var(--solaris-space-5);--solaris-card-padding-y: var(--solaris-space-5);--solaris-card-gap: var(--solaris-space-4);--solaris-card-content-gap: var(--solaris-space-3);--solaris-card-media-size: 7.2rem}:host([data-size=lg]){--solaris-card-padding-x: var(--solaris-space-6);--solaris-card-padding-y: var(--solaris-space-6);--solaris-card-gap: var(--solaris-space-5);--solaris-card-content-gap: var(--solaris-space-4);--solaris-card-media-size: 8.8rem}:host([data-color=neutral]){--solaris-card-accent: var(--solaris-color-primary)}:host([data-color=primary]){--solaris-card-accent: var(--solaris-color-primary)}:host([data-color=success]){--solaris-card-accent: var(--solaris-color-success)}:host([data-color=warning]){--solaris-card-accent: var(--solaris-color-warning)}:host([data-color=error]){--solaris-card-accent: var(--solaris-color-error)}:host([data-color=info]){--solaris-card-accent: var(--solaris-color-info)}:host([data-color=custom]){--solaris-card-accent: var(--solaris-card-accent-custom, var(--solaris-color-primary))}:host([data-appearance=outline]){--solaris-card-bg: var(--solaris-color-surface);--solaris-card-border: var(--solaris-color-border);--solaris-card-shadow: var(--solaris-shadow-xs)}:host([data-appearance=soft]){--solaris-card-bg: color-mix( in srgb, var(--solaris-card-accent) 6%, var(--solaris-color-surface) );--solaris-card-border: color-mix( in srgb, var(--solaris-card-accent) 18%, var(--solaris-color-border) );--solaris-card-shadow: var(--solaris-shadow-xs)}:host([data-appearance=solid]){--solaris-card-bg: var(--solaris-card-accent);--solaris-card-bg-hover: color-mix( in srgb, var(--solaris-card-accent) 92%, var(--solaris-color-white) );--solaris-card-border: color-mix( in srgb, var(--solaris-card-accent) 80%, var(--solaris-color-border) );--solaris-card-title-color: var(--solaris-color-primary-contrast);--solaris-card-description-color: var(--solaris-color-primary-contrast);--solaris-card-meta-color: var(--solaris-color-primary-contrast);--solaris-card-eyebrow-color: var(--solaris-color-primary-contrast)}:host([data-appearance=elevated]){--solaris-card-bg: var(--solaris-color-surface);--solaris-card-border: color-mix(in srgb, var(--solaris-color-border) 70%, transparent);--solaris-card-shadow: var(--solaris-shadow-sm);--solaris-card-shadow-hover: var(--solaris-shadow-md)}:host([data-appearance=ghost]){--solaris-card-bg: transparent;--solaris-card-bg-hover: color-mix(in srgb, var(--solaris-card-accent) 4%, transparent);--solaris-card-border: transparent;--solaris-card-shadow: none;--solaris-card-shadow-hover: none}:host([data-appearance=glass]){--solaris-card-bg: color-mix(in srgb, var(--solaris-card-accent) 10%, transparent);--solaris-card-bg-hover: color-mix(in srgb, var(--solaris-card-accent) 16%, transparent);--solaris-card-border: color-mix( in srgb, var(--solaris-color-surface) 34%, var(--solaris-color-border) );--solaris-card-border-hover: color-mix( in srgb, var(--solaris-card-accent) 36%, var(--solaris-color-border) );--solaris-card-shadow: var(--solaris-shadow-sm);--solaris-card-shadow-hover: var(--solaris-shadow-md)}:host([data-appearance=glass]) .solaris-card{backdrop-filter:blur(1.4rem) saturate(1.35);-webkit-backdrop-filter:blur(1.4rem) saturate(1.35)}:host([data-appearance=glass]) .solaris-card:before{content:\"\";position:absolute;inset:0;z-index:var(--solaris-z-base);pointer-events:none;border-radius:inherit;background:linear-gradient(135deg,color-mix(in srgb,var(--solaris-color-surface) 18%,transparent) 0%,transparent 48%)}:host([data-appearance=gradient]){--solaris-card-bg: linear-gradient( 135deg, var(--solaris-card-accent) 0%, color-mix(in srgb, var(--solaris-card-accent) 62%, var(--solaris-color-text)) 100% );--solaris-card-bg-hover: linear-gradient( 135deg, color-mix(in srgb, var(--solaris-card-accent) 92%, var(--solaris-color-white)) 0%, color-mix(in srgb, var(--solaris-card-accent) 62%, var(--solaris-color-text)) 100% );--solaris-card-border: color-mix(in srgb, var(--solaris-card-accent) 42%, transparent);--solaris-card-border-hover: color-mix(in srgb, var(--solaris-card-accent) 64%, transparent);--solaris-card-title-color: var(--solaris-color-primary-contrast);--solaris-card-description-color: var(--solaris-color-primary-contrast);--solaris-card-meta-color: var(--solaris-color-primary-contrast);--solaris-card-eyebrow-color: var(--solaris-color-primary-contrast)}:host([data-appearance=gradient]) .solaris-card:before{content:\"\";position:absolute;inset:0;z-index:var(--solaris-z-base);pointer-events:none;border-radius:inherit;background:radial-gradient(circle at top right,color-mix(in srgb,var(--solaris-color-surface) 24%,transparent) 0%,transparent 42%)}:host([data-invalid=true]){--solaris-card-border: var(--solaris-card-border-invalid);--solaris-card-border-hover: var(--solaris-card-border-invalid);--solaris-card-border-selected: var(--solaris-card-border-invalid)}.solaris-card{min-inline-size:0;inline-size:100%;min-block-size:var(--solaris-card-min-height, auto);display:flex;flex-direction:column;box-sizing:border-box;overflow:hidden;gap:var(--solaris-card-gap);padding:var(--solaris-card-padding-top) var(--solaris-card-padding-right) var(--solaris-card-padding-bottom) var(--solaris-card-padding-left);color:var(--solaris-color-text);background:var(--solaris-card-bg);border:1px solid var(--solaris-card-border);border-radius:var(--solaris-card-radius);box-shadow:var(--solaris-card-shadow)}:host([data-interactive=true]:not([data-disabled=true])) .solaris-card{cursor:pointer;transition:background-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),border-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),box-shadow var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard)}:host([data-interactive=true]:not([data-disabled=true])) .solaris-card:hover{background:var(--solaris-card-bg-hover);border-color:var(--solaris-card-border-hover);box-shadow:var(--solaris-card-shadow-hover)}:host([data-selected=true]) .solaris-card{border-color:var(--solaris-card-border-selected);box-shadow:var(--solaris-card-shadow-selected)}:host([data-selected=true][data-appearance=outline]) .solaris-card,:host([data-selected=true][data-appearance=elevated]) .solaris-card,:host([data-selected=true][data-appearance=ghost]) .solaris-card{background:var(--solaris-card-bg-selected)}:host([data-selected=true][data-appearance=soft]) .solaris-card{background:color-mix(in srgb,var(--solaris-card-accent) 12%,var(--solaris-color-surface))}:host([data-selected=true][data-appearance=solid]) .solaris-card{background:var(--solaris-card-bg)}:host([data-disabled=true]) .solaris-card{cursor:not-allowed;box-shadow:none;opacity:var(--solaris-card-disabled-opacity)}.solaris-card__media{min-inline-size:0;inline-size:100%;overflow:hidden;border-radius:calc(var(--solaris-card-radius) - .2rem)}.solaris-card__media:empty{display:none}.solaris-card__content{min-inline-size:0;display:flex;flex:1 1 auto;flex-direction:column;gap:var(--solaris-card-content-gap)}.solaris-card__header{min-inline-size:0;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--solaris-space-3)}.solaris-card__header-main{min-inline-size:0;flex:1 1 auto;display:flex;flex-direction:column;gap:var(--solaris-space-2)}.solaris-card__eyebrow{min-inline-size:0;color:var(--solaris-card-eyebrow-color);font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-normal);letter-spacing:var(--solaris-ls-md);text-transform:uppercase;overflow-wrap:anywhere}.solaris-card__title{min-inline-size:0;color:var(--solaris-card-title-color);font-size:var(--solaris-fs-16);font-weight:700;line-height:var(--solaris-lh-tight);overflow-wrap:anywhere}.solaris-card__description{min-inline-size:0;color:var(--solaris-card-description-color);font-size:var(--solaris-fs-14);line-height:var(--solaris-lh-normal);overflow-wrap:anywhere}.solaris-card__meta{min-inline-size:0;color:var(--solaris-card-meta-color);font-size:var(--solaris-fs-14);font-weight:600;line-height:var(--solaris-lh-normal);overflow-wrap:anywhere}.solaris-card__badge{flex:0 0 auto;display:inline-flex;align-items:flex-start}.solaris-card__badge:empty{display:none}.solaris-card__footer{min-inline-size:0;display:flex;align-items:center;justify-content:space-between;gap:var(--solaris-space-3)}.solaris-card__footer:empty{display:none}.solaris-card__footer-main{min-inline-size:0;flex:1 1 auto}.solaris-card__footer-main:empty{display:none}.solaris-card__actions{flex:0 0 auto;display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--solaris-space-2)}.solaris-card__actions:empty{display:none}:host([data-orientation=horizontal]) .solaris-card{flex-direction:row;align-items:stretch}:host([data-orientation=horizontal]) .solaris-card__media{flex:0 0 min(32%,var(--solaris-card-media-size));inline-size:min(32%,var(--solaris-card-media-size))}:host([data-orientation=horizontal]) .solaris-card__content{justify-content:center}:host([data-orientation=compact]) .solaris-card{flex-direction:row;align-items:center;gap:var(--solaris-space-3)}:host([data-orientation=compact]) .solaris-card__media{flex:0 0 auto;inline-size:var(--solaris-card-media-size)}:host([data-orientation=compact]) .solaris-card__content{gap:var(--solaris-space-2)}:host([data-orientation=compact]) .solaris-card__footer{margin-block-start:var(--solaris-space-1)}\n"] }]
6364
+ }, template: "<article class=\"solaris-card\">\n <div class=\"solaris-card__media\">\n <ng-content select=\"solaris-card-media, [solaris-card-media]\"></ng-content>\n </div>\n\n <div class=\"solaris-card__content\">\n <div class=\"solaris-card__header\">\n <div class=\"solaris-card__header-main\">\n <div class=\"solaris-card__eyebrow\">\n <ng-content select=\"[solaris-card-eyebrow]\"></ng-content>\n </div>\n\n <div class=\"solaris-card__title\">\n <ng-content select=\"[solaris-card-title]\"></ng-content>\n </div>\n </div>\n\n <div class=\"solaris-card__badge\">\n <ng-content select=\"[solaris-card-badge]\"></ng-content>\n </div>\n </div>\n\n <div class=\"solaris-card__description\">\n <ng-content select=\"[solaris-card-description]\"></ng-content>\n </div>\n\n <div class=\"solaris-card__meta\">\n <ng-content select=\"[solaris-card-meta]\"></ng-content>\n </div>\n\n <div class=\"solaris-card__footer\">\n <div class=\"solaris-card__footer-main\">\n <ng-content select=\"[solaris-card-footer]\"></ng-content>\n </div>\n\n <div class=\"solaris-card__actions\">\n <ng-content select=\"[solaris-card-actions]\"></ng-content>\n </div>\n </div>\n </div>\n</article>\n", styles: [":host{display:block;min-inline-size:0;inline-size:100%;--solaris-card-bg: var(--solaris-color-surface);--solaris-card-accent: var(--solaris-color-primary);--solaris-card-bg-hover: color-mix(in srgb, var(--solaris-card-bg) 92%, var(--solaris-color-white));--solaris-card-bg-selected: color-mix(in srgb, var(--solaris-card-accent) 8%, var(--solaris-color-surface));--solaris-card-border: var(--solaris-color-border);--solaris-card-border-invalid: var(--solaris-color-error);--solaris-card-border-hover: color-mix(in srgb, var(--solaris-card-accent) 18%, var(--solaris-card-border));--solaris-card-border-selected: color-mix(in srgb, var(--solaris-card-accent) 72%, var(--solaris-card-border));--solaris-card-shadow: var(--solaris-shadow-xs);--solaris-card-shadow-hover: var(--solaris-shadow-sm);--solaris-card-shadow-selected: var(--solaris-shadow-sm);--solaris-card-meta-color: var(--solaris-color-text);--solaris-card-title-color: var(--solaris-color-text);--solaris-card-eyebrow-color: var(--solaris-color-text-muted);--solaris-card-description-color: var(--solaris-color-text-muted);--solaris-card-disabled-opacity: .62;--solaris-card-gap: var(--solaris-space-4);--solaris-card-padding-x: var(--solaris-space-5);--solaris-card-padding-y: var(--solaris-space-5);--solaris-card-content-gap: var(--solaris-space-3);--solaris-card-padding-top: var(--solaris-card-padding-y);--solaris-card-padding-left: var(--solaris-card-padding-x);--solaris-card-padding-right: calc( var(--solaris-card-padding-x) + var(--solaris-card-reserved-inline-end, 0px) );--solaris-card-padding-bottom: var(--solaris-card-padding-y);--solaris-card-media-size: 7.2rem;--solaris-card-radius: var(--solaris-radius-lg)}:host([data-size=sm]){--solaris-card-padding-x: var(--solaris-space-4);--solaris-card-padding-y: var(--solaris-space-4);--solaris-card-gap: var(--solaris-space-3);--solaris-card-content-gap: var(--solaris-space-2);--solaris-card-media-size: 5.6rem}:host([data-size=md]){--solaris-card-padding-x: var(--solaris-space-5);--solaris-card-padding-y: var(--solaris-space-5);--solaris-card-gap: var(--solaris-space-4);--solaris-card-content-gap: var(--solaris-space-3);--solaris-card-media-size: 7.2rem}:host([data-size=lg]){--solaris-card-padding-x: var(--solaris-space-6);--solaris-card-padding-y: var(--solaris-space-6);--solaris-card-gap: var(--solaris-space-5);--solaris-card-content-gap: var(--solaris-space-4);--solaris-card-media-size: 8.8rem}:host([data-color=neutral]){--solaris-card-accent: var(--solaris-color-primary)}:host([data-color=primary]){--solaris-card-accent: var(--solaris-color-primary)}:host([data-color=success]){--solaris-card-accent: var(--solaris-color-success)}:host([data-color=warning]){--solaris-card-accent: var(--solaris-color-warning)}:host([data-color=error]){--solaris-card-accent: var(--solaris-color-error)}:host([data-color=info]){--solaris-card-accent: var(--solaris-color-info)}:host([data-color=custom]){--solaris-card-accent: var(--solaris-card-accent-custom, var(--solaris-color-primary))}:host([data-appearance=outline]){--solaris-card-bg: var(--solaris-color-surface);--solaris-card-border: var(--solaris-color-border);--solaris-card-shadow: var(--solaris-shadow-xs)}:host([data-appearance=soft]){--solaris-card-bg: color-mix( in srgb, var(--solaris-card-accent) 6%, var(--solaris-color-surface) );--solaris-card-border: color-mix( in srgb, var(--solaris-card-accent) 18%, var(--solaris-color-border) );--solaris-card-shadow: var(--solaris-shadow-xs)}:host([data-appearance=solid]){--solaris-card-bg: var(--solaris-card-accent);--solaris-card-bg-hover: color-mix( in srgb, var(--solaris-card-accent) 92%, var(--solaris-color-white) );--solaris-card-border: color-mix( in srgb, var(--solaris-card-accent) 80%, var(--solaris-color-border) );--solaris-card-title-color: var(--solaris-color-primary-contrast);--solaris-card-description-color: var(--solaris-color-primary-contrast);--solaris-card-meta-color: var(--solaris-color-primary-contrast);--solaris-card-eyebrow-color: var(--solaris-color-primary-contrast)}:host([data-appearance=elevated]){--solaris-card-bg: var(--solaris-color-surface);--solaris-card-border: color-mix(in srgb, var(--solaris-color-border) 70%, transparent);--solaris-card-shadow: var(--solaris-shadow-sm);--solaris-card-shadow-hover: var(--solaris-shadow-md)}:host([data-appearance=ghost]){--solaris-card-bg: transparent;--solaris-card-bg-hover: color-mix(in srgb, var(--solaris-card-accent) 4%, transparent);--solaris-card-border: transparent;--solaris-card-shadow: none;--solaris-card-shadow-hover: none}:host([data-appearance=glass]){--solaris-card-bg: color-mix(in srgb, var(--solaris-card-accent) 10%, transparent);--solaris-card-bg-hover: color-mix(in srgb, var(--solaris-card-accent) 16%, transparent);--solaris-card-border: color-mix( in srgb, var(--solaris-color-surface) 34%, var(--solaris-color-border) );--solaris-card-border-hover: color-mix( in srgb, var(--solaris-card-accent) 36%, var(--solaris-color-border) );--solaris-card-shadow: var(--solaris-shadow-sm);--solaris-card-shadow-hover: var(--solaris-shadow-md)}:host([data-appearance=gradient]){--solaris-card-bg: linear-gradient( 135deg, var(--solaris-card-accent) 0%, color-mix(in srgb, var(--solaris-card-accent) 62%, var(--solaris-color-text)) 100% );--solaris-card-bg-hover: linear-gradient( 135deg, color-mix(in srgb, var(--solaris-card-accent) 92%, var(--solaris-color-white)) 0%, color-mix(in srgb, var(--solaris-card-accent) 62%, var(--solaris-color-text)) 100% );--solaris-card-border: color-mix(in srgb, var(--solaris-card-accent) 42%, transparent);--solaris-card-border-hover: color-mix(in srgb, var(--solaris-card-accent) 64%, transparent);--solaris-card-title-color: var(--solaris-color-primary-contrast);--solaris-card-description-color: var(--solaris-color-primary-contrast);--solaris-card-meta-color: var(--solaris-color-primary-contrast);--solaris-card-eyebrow-color: var(--solaris-color-primary-contrast)}:host([data-invalid=true]){--solaris-card-border: var(--solaris-card-border-invalid);--solaris-card-border-hover: var(--solaris-card-border-invalid);--solaris-card-border-selected: var(--solaris-card-border-invalid)}.solaris-card{min-inline-size:0;inline-size:100%;min-block-size:var(--solaris-card-min-height, auto);position:relative;isolation:isolate;display:flex;flex-direction:column;box-sizing:border-box;overflow:hidden;gap:var(--solaris-card-gap);padding:var(--solaris-card-padding-top) var(--solaris-card-padding-right) var(--solaris-card-padding-bottom) var(--solaris-card-padding-left);color:var(--solaris-color-text);background:var(--solaris-card-bg);border:1px solid var(--solaris-card-border);border-radius:var(--solaris-card-radius);box-shadow:var(--solaris-card-shadow)}:host([data-appearance=glass]) .solaris-card{backdrop-filter:blur(1.4rem) saturate(1.35);-webkit-backdrop-filter:blur(1.4rem) saturate(1.35)}:host([data-appearance=glass]) .solaris-card:before{content:\"\";position:absolute;inset:0;z-index:var(--solaris-z-base);pointer-events:none;border-radius:inherit;background:linear-gradient(135deg,color-mix(in srgb,var(--solaris-color-surface) 18%,transparent) 0%,transparent 48%)}:host([data-appearance=gradient]) .solaris-card:before{content:\"\";position:absolute;inset:0;z-index:var(--solaris-z-base);pointer-events:none;border-radius:inherit;background:radial-gradient(circle at top right,color-mix(in srgb,var(--solaris-color-surface) 24%,transparent) 0%,transparent 42%)}.solaris-card>*{position:relative;z-index:var(--solaris-z-raised)}:host([data-interactive=true]:not([data-disabled=true])) .solaris-card{cursor:pointer;transition:background-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),border-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),box-shadow var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard)}:host([data-interactive=true]:not([data-disabled=true])) .solaris-card:hover{background:var(--solaris-card-bg-hover);border-color:var(--solaris-card-border-hover);box-shadow:var(--solaris-card-shadow-hover)}:host([data-selected=true]) .solaris-card{border-color:var(--solaris-card-border-selected);box-shadow:var(--solaris-card-shadow-selected)}:host([data-selected=true][data-appearance=outline]) .solaris-card,:host([data-selected=true][data-appearance=elevated]) .solaris-card,:host([data-selected=true][data-appearance=ghost]) .solaris-card{background:var(--solaris-card-bg-selected)}:host([data-selected=true][data-appearance=soft]) .solaris-card{background:color-mix(in srgb,var(--solaris-card-accent) 12%,var(--solaris-color-surface))}:host([data-selected=true][data-appearance=solid]) .solaris-card,:host([data-selected=true][data-appearance=glass]) .solaris-card,:host([data-selected=true][data-appearance=gradient]) .solaris-card{background:var(--solaris-card-bg)}:host([data-disabled=true]) .solaris-card{cursor:not-allowed;box-shadow:none;opacity:var(--solaris-card-disabled-opacity)}.solaris-card__media{min-inline-size:0;inline-size:100%;overflow:hidden;border-radius:calc(var(--solaris-card-radius) - .2rem)}.solaris-card__content{min-inline-size:0;display:flex;flex:1 1 auto;flex-direction:column;gap:var(--solaris-card-content-gap)}.solaris-card__header{min-inline-size:0;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--solaris-space-3)}.solaris-card__header-main{min-inline-size:0;flex:1 1 auto;display:flex;flex-direction:column;gap:var(--solaris-space-2)}.solaris-card__eyebrow{min-inline-size:0;color:var(--solaris-card-eyebrow-color);font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-normal);letter-spacing:var(--solaris-ls-md);text-transform:uppercase;overflow-wrap:anywhere}.solaris-card__title{min-inline-size:0;color:var(--solaris-card-title-color);font-size:var(--solaris-fs-16);font-weight:700;line-height:var(--solaris-lh-tight);overflow-wrap:anywhere}.solaris-card__description{min-inline-size:0;color:var(--solaris-card-description-color);font-size:var(--solaris-fs-14);line-height:var(--solaris-lh-normal);overflow-wrap:anywhere}.solaris-card__meta{min-inline-size:0;color:var(--solaris-card-meta-color);font-size:var(--solaris-fs-14);font-weight:600;line-height:var(--solaris-lh-normal);overflow-wrap:anywhere}.solaris-card__badge{flex:0 0 auto;display:inline-flex;align-items:flex-start}.solaris-card__footer{min-inline-size:0;display:flex;align-items:center;justify-content:space-between;gap:var(--solaris-space-3)}.solaris-card__footer-main{min-inline-size:0;flex:1 1 auto}.solaris-card__actions{flex:0 0 auto;display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--solaris-space-2)}.solaris-card__media:not(:has(solaris-card-media,[solaris-card-media])){display:none}.solaris-card__eyebrow:not(:has([solaris-card-eyebrow])){display:none}.solaris-card__title:not(:has([solaris-card-title])){display:none}.solaris-card__description:not(:has([solaris-card-description])){display:none}.solaris-card__meta:not(:has([solaris-card-meta])){display:none}.solaris-card__badge:not(:has([solaris-card-badge])){display:none}.solaris-card__footer-main:not(:has([solaris-card-footer])){display:none}.solaris-card__actions:not(:has([solaris-card-actions])){display:none}.solaris-card__header-main:not(:has([solaris-card-eyebrow],[solaris-card-title])){display:none}.solaris-card__header:not(:has([solaris-card-eyebrow],[solaris-card-title],[solaris-card-badge])){display:none}.solaris-card__footer:not(:has([solaris-card-footer],[solaris-card-actions])){display:none}:host([data-orientation=horizontal]) .solaris-card{flex-direction:row;align-items:stretch}:host([data-orientation=horizontal]) .solaris-card__media{flex:0 0 min(32%,var(--solaris-card-media-size));inline-size:min(32%,var(--solaris-card-media-size))}:host([data-orientation=horizontal]) .solaris-card__content{justify-content:center}:host([data-orientation=compact]) .solaris-card{flex-direction:row;align-items:center;gap:var(--solaris-space-3)}:host([data-orientation=compact]) .solaris-card__media{flex:0 0 auto;inline-size:var(--solaris-card-media-size)}:host([data-orientation=compact]) .solaris-card__content{gap:var(--solaris-space-2)}:host([data-orientation=compact]) .solaris-card__footer{margin-block-start:var(--solaris-space-1)}\n"] }]
6386
6365
  }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], reservedInlineEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "reservedInlineEnd", required: false }] }] } });
6387
6366
 
6388
6367
  class SolarisSelectionCard {
@@ -6536,7 +6515,7 @@ class SolarisSelectionCard {
6536
6515
  return !!target.closest(['[data-card-actions="true"]', '[solaris-card-actions]', '.solaris-card-slot--actions'].join(','));
6537
6516
  }
6538
6517
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisSelectionCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
6539
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisSelectionCard, isStandalone: true, selector: "solaris-selection-card", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, selectionIndicator: { classPropertyName: "selectionIndicator", publicName: "selectionIndicator", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selectedInput: { classPropertyName: "selectedInput", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange", cardClick: "cardClick" }, host: { listeners: { "click": "onHostClick($event)", "keydown": "onHostKeydown($event)", "blur": "onHostBlur()" }, properties: { "attr.data-size": "size()", "attr.data-orientation": "orientation()", "attr.data-selected": "selected() ? \"true\" : null", "attr.data-disabled": "disabled() ? \"true\" : null", "attr.data-invalid": "invalid() ? \"true\" : null", "attr.data-appearance": "appearance()", "attr.data-color": "colorKey()", "attr.data-indicator": "resolvedIndicator()", "attr.role": "role()", "attr.aria-checked": "ariaChecked()", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.tabindex": "tabIndex()", "style.--solaris-selection-card-custom": "customAccent()" }, classAttribute: "solaris-selection-card-host" }, ngImport: i0, template: "<div class=\"solaris-selection-card\">\n @if (resolvedIndicator() !== 'none') {\n <span class=\"solaris-selection-card__indicator\" aria-hidden=\"true\">\n <span class=\"solaris-selection-card__indicator-control\">\n @switch (resolvedIndicator()) {\n @case ('radio') {\n <span class=\"solaris-selection-card__indicator-dot\"></span>\n }\n\n @case ('checkbox') {\n <i class=\"ph ph-check solaris-selection-card__indicator-check\"></i>\n }\n\n @case ('icon') {\n <span class=\"solaris-selection-card__indicator-icon-dot\"></span>\n }\n }\n </span>\n </span>\n }\n\n <solaris-card\n class=\"solaris-selection-card__card\"\n [orientation]=\"orientation()\"\n [size]=\"size()\"\n [radius]=\"radius()\"\n [appearance]=\"appearance()\"\n [color]=\"color()\"\n [selected]=\"selected()\"\n [invalid]=\"invalid()\"\n [interactive]=\"!disabled()\"\n [disabled]=\"disabled()\"\n [minHeight]=\"minHeight()\"\n [reservedInlineEnd]=\"reservedInlineEnd()\"\n >\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"solaris-card-media\">\n <ng-content select=\"solaris-card-media\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-media]\">\n <ng-content select=\"[solaris-card-media]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-eyebrow]\">\n <ng-content select=\"[solaris-card-eyebrow]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-title]\">\n <ng-content select=\"[solaris-card-title]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-description]\">\n <ng-content select=\"[solaris-card-description]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-meta]\">\n <ng-content select=\"[solaris-card-meta]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-badge]\">\n <ng-content select=\"[solaris-card-badge]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-footer]\">\n <ng-content select=\"[solaris-card-footer]\"></ng-content>\n </div>\n\n <div\n class=\"solaris-selection-card__slot\"\n ngProjectAs=\"[solaris-card-actions]\"\n data-card-actions=\"true\"\n >\n <ng-content select=\"[solaris-card-actions]\"></ng-content>\n </div>\n </solaris-card>\n</div>\n", styles: [":host{display:block;min-width:0;position:relative;outline:none;cursor:pointer;--ssc-accent: var(--solaris-color-primary);--ssc-focus-ring: color-mix(in srgb, var(--ssc-accent) 26%, transparent);--ssc-indicator-size: 2rem;--ssc-indicator-dot-size: .8rem;--ssc-indicator-check-size: 1.5rem;--ssc-indicator-check-weight: .08rem;--ssc-indicator-icon-dot-size: .6rem;--ssc-indicator-gap: var(--solaris-space-3);--ssc-pad-x: var(--solaris-space-6);--ssc-pad-y: var(--solaris-space-5);--ssc-indicator-top: var(--ssc-pad-y);--ssc-indicator-end: var(--ssc-pad-x);--ssc-min-height: 12rem;--ssc-reserved-inline-end: calc(var(--ssc-indicator-size) + var(--ssc-indicator-gap))}:host([data-size=sm]){--ssc-indicator-size: 1.8rem;--ssc-indicator-dot-size: .7rem;--ssc-indicator-check-size: 1.1rem;--ssc-indicator-check-weight: .07rem;--ssc-indicator-icon-dot-size: .6rem;--ssc-pad-x: var(--solaris-space-5);--ssc-pad-y: var(--solaris-space-4);--ssc-min-height: 10rem}:host([data-size=md]){--ssc-indicator-size: 2rem;--ssc-indicator-dot-size: .8rem;--ssc-indicator-check-size: 1.25rem;--ssc-indicator-check-weight: .08rem;--ssc-indicator-icon-dot-size: .6rem;--ssc-pad-x: var(--solaris-space-6);--ssc-pad-y: var(--solaris-space-5);--ssc-min-height: 12rem}:host([data-size=lg]){--ssc-indicator-size: 2.4rem;--ssc-indicator-dot-size: .95rem;--ssc-indicator-check-size: 1.5rem;--ssc-indicator-check-weight: .09rem;--ssc-indicator-icon-dot-size: .8rem;--ssc-min-height: 14rem;--ssc-pad-x: var(--solaris-space-7);--ssc-pad-y: var(--solaris-space-6)}:host([data-color=primary]){--ssc-accent: var(--solaris-color-primary)}:host([data-color=success]){--ssc-accent: var(--solaris-color-success)}:host([data-color=warning]){--ssc-accent: var(--solaris-color-warning)}:host([data-color=error]){--ssc-accent: var(--solaris-color-error)}:host([data-color=info]){--ssc-accent: var(--solaris-color-info)}:host([data-color=custom]){--ssc-accent: var(--solaris-selection-card-custom, var(--solaris-color-primary))}:host([data-disabled=true]){cursor:not-allowed}:host(:focus-visible){outline:.2rem solid var(--ssc-focus-ring);outline-offset:.2rem;border-radius:var(--solaris-card-radius, var(--solaris-radius-lg))}.solaris-selection-card{min-width:0;min-height:var(--ssc-min-height);position:relative}.solaris-selection-card__card{display:block;min-width:0;--solaris-card-padding-x: var(--ssc-pad-x);--solaris-card-padding-y: var(--ssc-pad-y)}.solaris-selection-card__indicator{position:absolute;inset-block-start:var(--ssc-indicator-top);inset-inline-end:var(--ssc-indicator-end);z-index:1;pointer-events:none;inline-size:var(--ssc-indicator-size);block-size:var(--ssc-indicator-size);display:inline-grid;place-items:center;line-height:0}.solaris-selection-card__indicator-control{inline-size:var(--ssc-indicator-size);block-size:var(--ssc-indicator-size);aspect-ratio:1/1;flex:0 0 auto;position:relative;place-items:center;display:inline-grid;box-sizing:border-box;line-height:0;color:transparent;background:transparent;border:1px solid var(--solaris-card-border, var(--solaris-color-border));transition:border-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),background-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard)}.solaris-selection-card__indicator-dot,.solaris-selection-card__indicator-icon-dot{position:absolute;inset-block-start:50%;inset-inline-start:50%;display:block;flex:0 0 auto;aspect-ratio:1/1;box-sizing:border-box;opacity:0;transform-origin:center;border-radius:var(--solaris-radius-full);transform:translate(-50%,-50%) scale(.45);transition:opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),background-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-selection-card__indicator-dot{background:var(--ssc-accent);block-size:var(--ssc-indicator-dot-size);inline-size:var(--ssc-indicator-dot-size)}.solaris-selection-card__indicator-icon-dot{block-size:var(--ssc-indicator-icon-dot-size);inline-size:var(--ssc-indicator-icon-dot-size);background:var(--solaris-color-primary-contrast)}.solaris-selection-card__indicator-check{display:block;flex:0 0 auto;line-height:1;font-size:var(--ssc-indicator-check-size);font-weight:700;opacity:0;transform:scale(.45);transform-origin:center;-webkit-text-stroke:var(--ssc-indicator-check-weight) currentColor;transition:opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-selection-card__slot{display:contents}:host([data-indicator=radio]) .solaris-selection-card__indicator-control,:host([data-indicator=icon]) .solaris-selection-card__indicator-control{border-radius:var(--solaris-radius-full)}:host([data-indicator=checkbox]) .solaris-selection-card__indicator-control{border-radius:var(--solaris-radius-sm)}:host([data-selected=true][data-indicator=radio]) .solaris-selection-card__indicator-control{border-color:var(--ssc-accent)}:host([data-selected=true][data-indicator=radio]) .solaris-selection-card__indicator-dot{opacity:1;transform:translate(-50%,-50%) scale(1)}:host([data-selected=true][data-indicator=checkbox]) .solaris-selection-card__indicator-control{background:var(--ssc-accent);border-color:var(--ssc-accent);color:var(--solaris-color-primary-contrast);box-shadow:inset 0 0 0 .1rem color-mix(in srgb,var(--solaris-color-primary-contrast) 18%,transparent)}:host([data-selected=true][data-indicator=checkbox]) .solaris-selection-card__indicator-check{opacity:1;transform:scale(1)}:host([data-selected=true][data-indicator=icon]) .solaris-selection-card__indicator-control{border-color:var(--ssc-accent);background:var(--ssc-accent)}:host([data-selected=true][data-indicator=icon]) .solaris-selection-card__indicator-icon-dot{opacity:1;transform:translate(-50%,-50%) scale(1)}:host([data-disabled=true]) .solaris-selection-card__indicator-control{opacity:.55}:host([data-orientation=compact]){--ssc-min-height: 8.8rem;--ssc-reserved-inline-end: calc(var(--ssc-indicator-size) + var(--solaris-space-2))}\n"], dependencies: [{ kind: "component", type: SolarisCard, selector: "solaris-card", inputs: ["size", "orientation", "radius", "color", "appearance", "invalid", "selected", "disabled", "interactive", "minHeight", "reservedInlineEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6518
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisSelectionCard, isStandalone: true, selector: "solaris-selection-card", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, selectionIndicator: { classPropertyName: "selectionIndicator", publicName: "selectionIndicator", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selectedInput: { classPropertyName: "selectedInput", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange", cardClick: "cardClick" }, host: { listeners: { "click": "onHostClick($event)", "keydown": "onHostKeydown($event)", "blur": "onHostBlur()" }, properties: { "attr.data-size": "size()", "attr.data-orientation": "orientation()", "attr.data-selected": "selected() ? \"true\" : null", "attr.data-disabled": "disabled() ? \"true\" : null", "attr.data-invalid": "invalid() ? \"true\" : null", "attr.data-appearance": "appearance()", "attr.data-color": "colorKey()", "attr.data-indicator": "resolvedIndicator()", "attr.role": "role()", "attr.aria-checked": "ariaChecked()", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.tabindex": "tabIndex()", "style.--solaris-selection-card-custom": "customAccent()" }, classAttribute: "solaris-selection-card-host" }, ngImport: i0, template: "<div class=\"solaris-selection-card\">\n @if (resolvedIndicator() !== 'none') {\n <span class=\"solaris-selection-card__indicator\" aria-hidden=\"true\">\n <span class=\"solaris-selection-card__indicator-control\">\n @switch (resolvedIndicator()) {\n @case ('radio') {\n <span class=\"solaris-selection-card__indicator-dot\"></span>\n }\n\n @case ('checkbox') {\n <i class=\"ph ph-check solaris-selection-card__indicator-check\"></i>\n }\n\n @case ('icon') {\n <span class=\"solaris-selection-card__indicator-icon-dot\"></span>\n }\n }\n </span>\n </span>\n }\n\n <solaris-card\n class=\"solaris-selection-card__card\"\n [orientation]=\"orientation()\"\n [size]=\"size()\"\n [radius]=\"radius()\"\n [appearance]=\"appearance()\"\n [color]=\"color()\"\n [selected]=\"selected()\"\n [invalid]=\"invalid()\"\n [interactive]=\"!disabled()\"\n [disabled]=\"disabled()\"\n [minHeight]=\"minHeight()\"\n [reservedInlineEnd]=\"reservedInlineEnd()\"\n >\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"solaris-card-media\">\n <ng-content select=\"solaris-card-media\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-media]\">\n <ng-content select=\"[solaris-card-media]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-eyebrow]\">\n <ng-content select=\"[solaris-card-eyebrow]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-title]\">\n <ng-content select=\"[solaris-card-title]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-description]\">\n <ng-content select=\"[solaris-card-description]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-meta]\">\n <ng-content select=\"[solaris-card-meta]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-badge]\">\n <ng-content select=\"[solaris-card-badge]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-footer]\">\n <ng-content select=\"[solaris-card-footer]\"></ng-content>\n </div>\n\n <div\n class=\"solaris-selection-card__slot\"\n ngProjectAs=\"[solaris-card-actions]\"\n data-card-actions=\"true\"\n >\n <ng-content select=\"[solaris-card-actions]\"></ng-content>\n </div>\n </solaris-card>\n</div>\n", styles: [":host{display:block;min-width:0;position:relative;outline:none;cursor:pointer;--ssc-accent: var(--solaris-color-primary);--ssc-focus-ring: color-mix(in srgb, var(--ssc-accent) 26%, transparent);--ssc-indicator-size: var(--solaris-indicator-size-md);--ssc-indicator-dot-size: var(--solaris-indicator-dot-size-md);--ssc-indicator-check-size: var(--solaris-indicator-check-size-md);--ssc-indicator-check-weight: var(--solaris-indicator-check-stroke-md);--ssc-indicator-icon-dot-size: var(--solaris-indicator-icon-dot-size-md);--ssc-indicator-gap: var(--solaris-space-3);--ssc-pad-x: var(--solaris-space-6);--ssc-pad-y: var(--solaris-space-5);--ssc-indicator-top: var(--ssc-pad-y);--ssc-indicator-end: var(--ssc-pad-x);--ssc-min-height: 12rem;--ssc-reserved-inline-end: calc(var(--ssc-indicator-size) + var(--ssc-indicator-gap));--ssc-indicator-border: var(--solaris-color-border);--ssc-indicator-bg: transparent;--ssc-indicator-fg: var(--solaris-color-primary-contrast);--ssc-indicator-selected-bg: var(--ssc-accent);--ssc-indicator-selected-border: var(--ssc-accent);--ssc-indicator-selected-fg: var(--solaris-color-primary-contrast)}:host([data-size=sm]){--ssc-indicator-size: var(--solaris-indicator-size-sm);--ssc-indicator-dot-size: var(--solaris-indicator-dot-size-sm);--ssc-indicator-check-size: var(--solaris-indicator-check-size-sm);--ssc-indicator-check-weight: var(--solaris-indicator-check-stroke-sm);--ssc-indicator-icon-dot-size: var(--solaris-indicator-icon-dot-size-sm);--ssc-pad-x: var(--solaris-space-5);--ssc-pad-y: var(--solaris-space-4);--ssc-min-height: 10rem}:host([data-size=md]){--ssc-indicator-size: var(--solaris-indicator-size-md);--ssc-indicator-dot-size: var(--solaris-indicator-dot-size-md);--ssc-indicator-check-size: var(--solaris-indicator-check-size-md);--ssc-indicator-check-weight: var(--solaris-indicator-check-stroke-md);--ssc-indicator-icon-dot-size: var(--solaris-indicator-icon-dot-size-md);--ssc-pad-x: var(--solaris-space-6);--ssc-pad-y: var(--solaris-space-5);--ssc-min-height: 12rem}:host([data-size=lg]){--ssc-indicator-size: var(--solaris-indicator-size-lg);--ssc-indicator-dot-size: var(--solaris-indicator-dot-size-lg);--ssc-indicator-check-size: var(--solaris-indicator-check-size-lg);--ssc-indicator-check-weight: var(--solaris-indicator-check-stroke-lg);--ssc-indicator-icon-dot-size: var(--solaris-indicator-icon-dot-size-lg);--ssc-min-height: 14rem;--ssc-pad-x: var(--solaris-space-7);--ssc-pad-y: var(--solaris-space-6)}:host([data-color=primary]){--ssc-accent: var(--solaris-color-primary)}:host([data-color=success]){--ssc-accent: var(--solaris-color-success)}:host([data-color=warning]){--ssc-accent: var(--solaris-color-warning)}:host([data-color=error]){--ssc-accent: var(--solaris-color-error)}:host([data-color=info]){--ssc-accent: var(--solaris-color-info)}:host([data-color=custom]){--ssc-accent: var(--solaris-selection-card-custom, var(--solaris-color-primary))}:host([data-disabled=true]){cursor:not-allowed}:host(:focus-visible){outline:.2rem solid var(--ssc-focus-ring);outline-offset:.2rem;border-radius:var(--solaris-card-radius, var(--solaris-radius-lg))}.solaris-selection-card{min-width:0;min-height:var(--ssc-min-height);position:relative}.solaris-selection-card__card{display:block;min-width:0;--solaris-card-padding-x: var(--ssc-pad-x);--solaris-card-padding-y: var(--ssc-pad-y)}.solaris-selection-card__indicator{position:absolute;inset-block-start:var(--ssc-indicator-top);inset-inline-end:var(--ssc-indicator-end);z-index:1;pointer-events:none;inline-size:var(--ssc-indicator-size);block-size:var(--ssc-indicator-size);display:inline-grid;place-items:center;line-height:0}.solaris-selection-card__indicator-control{inline-size:var(--ssc-indicator-size);block-size:var(--ssc-indicator-size);min-inline-size:var(--ssc-indicator-size);min-block-size:var(--ssc-indicator-size);aspect-ratio:1/1;display:inline-grid;place-items:center;box-sizing:border-box;line-height:0;border-radius:var(--solaris-indicator-radius);border:var(--solaris-indicator-border-width) solid var(--ssc-indicator-border);background:var(--ssc-indicator-bg);color:var(--ssc-indicator-fg);flex:0 0 auto;position:relative;transition:border-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),background-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard)}.solaris-selection-card__indicator-dot,.solaris-selection-card__indicator-icon-dot{position:absolute;inset-block-start:50%;inset-inline-start:50%;display:block;flex:0 0 auto;aspect-ratio:1/1;box-sizing:border-box;opacity:0;transform-origin:center;border-radius:var(--solaris-indicator-radius);transform:translate(-50%,-50%) scale(.45);transition:opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),background-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-selection-card__indicator-dot{block-size:var(--ssc-indicator-dot-size);inline-size:var(--ssc-indicator-dot-size);background:var(--ssc-indicator-selected-border)}:host([data-appearance=solid]) .solaris-selection-card__indicator-dot,:host([data-appearance=gradient]) .solaris-selection-card__indicator-dot{background:var(--ssc-indicator-selected-bg)}.solaris-selection-card__indicator-icon-dot{background:var(--ssc-indicator-selected-fg);block-size:var(--ssc-indicator-icon-dot-size);inline-size:var(--ssc-indicator-icon-dot-size)}.solaris-selection-card__indicator-check{display:block;flex:0 0 auto;line-height:1;font-size:var(--ssc-indicator-check-size);font-weight:700;-webkit-text-stroke:var(--ssc-indicator-check-weight) currentColor;opacity:0;transform:scale(.45);transform-origin:center;transition:opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-selection-card__slot{display:contents}:host([data-indicator=radio]) .solaris-selection-card__indicator-control,:host([data-indicator=icon]) .solaris-selection-card__indicator-control{border-radius:var(--solaris-radius-full)}:host([data-indicator=checkbox]) .solaris-selection-card__indicator-control{border-radius:var(--solaris-radius-sm)}:host([data-selected=true][data-indicator=radio]) .solaris-selection-card__indicator-control{border-color:var(--ssc-indicator-selected-border)}:host([data-selected=true][data-indicator=radio]) .solaris-selection-card__indicator-dot{opacity:1;transform:translate(-50%,-50%) scale(1)}:host([data-selected=true][data-indicator=checkbox]) .solaris-selection-card__indicator-control{color:var(--ssc-indicator-selected-fg);background:var(--ssc-indicator-selected-bg);border-color:var(--ssc-indicator-selected-border);box-shadow:inset 0 0 0 .1rem color-mix(in srgb,var(--ssc-indicator-selected-fg) 18%,transparent)}:host([data-selected=true][data-indicator=checkbox]) .solaris-selection-card__indicator-check{opacity:1;transform:scale(1)}:host([data-selected=true][data-indicator=icon]) .solaris-selection-card__indicator-control{background:var(--ssc-indicator-selected-bg);border-color:var(--ssc-indicator-selected-border)}:host([data-selected=true][data-indicator=icon]) .solaris-selection-card__indicator-icon-dot{opacity:1;transform:translate(-50%,-50%) scale(1)}:host([data-disabled=true]) .solaris-selection-card__indicator-control{opacity:.55}:host([data-orientation=compact]){--ssc-min-height: 8.8rem;--ssc-reserved-inline-end: calc(var(--ssc-indicator-size) + var(--solaris-space-2))}:host([data-appearance=outline]){--ssc-indicator-border: var(--solaris-color-border);--ssc-indicator-bg: transparent}:host([data-appearance=soft]){--ssc-indicator-border: color-mix( in srgb, var(--ssc-accent) 24%, var(--solaris-color-border) );--ssc-indicator-bg: color-mix( in srgb, var(--ssc-accent) 4%, transparent )}:host([data-appearance=solid]){--ssc-indicator-border: color-mix( in srgb, var(--solaris-color-primary-contrast) 46%, transparent );--ssc-indicator-bg: color-mix( in srgb, var(--solaris-color-primary-contrast) 8%, transparent );--ssc-indicator-selected-bg: var(--solaris-color-primary-contrast);--ssc-indicator-selected-border: var(--solaris-color-primary-contrast);--ssc-indicator-selected-fg: var(--ssc-accent)}:host([data-appearance=elevated]){--ssc-indicator-border: color-mix( in srgb, var(--solaris-color-border) 72%, transparent );--ssc-indicator-bg: var(--solaris-color-surface)}:host([data-appearance=ghost]){--ssc-indicator-border: color-mix( in srgb, var(--ssc-accent) 22%, var(--solaris-color-border) );--ssc-indicator-bg: transparent}:host([data-appearance=glass]){--ssc-indicator-border: color-mix( in srgb, var(--solaris-color-surface) 34%, var(--solaris-color-border) );--ssc-indicator-bg: color-mix( in srgb, var(--ssc-accent) 10%, transparent )}:host([data-appearance=gradient]){--ssc-indicator-border: color-mix( in srgb, var(--solaris-color-primary-contrast) 42%, transparent );--ssc-indicator-bg: color-mix( in srgb, var(--solaris-color-primary-contrast) 8%, transparent );--ssc-indicator-selected-bg: var(--solaris-color-primary-contrast);--ssc-indicator-selected-border: var(--solaris-color-primary-contrast);--ssc-indicator-selected-fg: var(--ssc-accent)}\n"], dependencies: [{ kind: "component", type: SolarisCard, selector: "solaris-card", inputs: ["size", "orientation", "radius", "color", "appearance", "invalid", "selected", "disabled", "interactive", "minHeight", "reservedInlineEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6540
6519
  }
6541
6520
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisSelectionCard, decorators: [{
6542
6521
  type: Component,
@@ -6558,7 +6537,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
6558
6537
  '(click)': 'onHostClick($event)',
6559
6538
  '(keydown)': 'onHostKeydown($event)',
6560
6539
  '(blur)': 'onHostBlur()',
6561
- }, template: "<div class=\"solaris-selection-card\">\n @if (resolvedIndicator() !== 'none') {\n <span class=\"solaris-selection-card__indicator\" aria-hidden=\"true\">\n <span class=\"solaris-selection-card__indicator-control\">\n @switch (resolvedIndicator()) {\n @case ('radio') {\n <span class=\"solaris-selection-card__indicator-dot\"></span>\n }\n\n @case ('checkbox') {\n <i class=\"ph ph-check solaris-selection-card__indicator-check\"></i>\n }\n\n @case ('icon') {\n <span class=\"solaris-selection-card__indicator-icon-dot\"></span>\n }\n }\n </span>\n </span>\n }\n\n <solaris-card\n class=\"solaris-selection-card__card\"\n [orientation]=\"orientation()\"\n [size]=\"size()\"\n [radius]=\"radius()\"\n [appearance]=\"appearance()\"\n [color]=\"color()\"\n [selected]=\"selected()\"\n [invalid]=\"invalid()\"\n [interactive]=\"!disabled()\"\n [disabled]=\"disabled()\"\n [minHeight]=\"minHeight()\"\n [reservedInlineEnd]=\"reservedInlineEnd()\"\n >\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"solaris-card-media\">\n <ng-content select=\"solaris-card-media\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-media]\">\n <ng-content select=\"[solaris-card-media]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-eyebrow]\">\n <ng-content select=\"[solaris-card-eyebrow]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-title]\">\n <ng-content select=\"[solaris-card-title]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-description]\">\n <ng-content select=\"[solaris-card-description]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-meta]\">\n <ng-content select=\"[solaris-card-meta]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-badge]\">\n <ng-content select=\"[solaris-card-badge]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-footer]\">\n <ng-content select=\"[solaris-card-footer]\"></ng-content>\n </div>\n\n <div\n class=\"solaris-selection-card__slot\"\n ngProjectAs=\"[solaris-card-actions]\"\n data-card-actions=\"true\"\n >\n <ng-content select=\"[solaris-card-actions]\"></ng-content>\n </div>\n </solaris-card>\n</div>\n", styles: [":host{display:block;min-width:0;position:relative;outline:none;cursor:pointer;--ssc-accent: var(--solaris-color-primary);--ssc-focus-ring: color-mix(in srgb, var(--ssc-accent) 26%, transparent);--ssc-indicator-size: 2rem;--ssc-indicator-dot-size: .8rem;--ssc-indicator-check-size: 1.5rem;--ssc-indicator-check-weight: .08rem;--ssc-indicator-icon-dot-size: .6rem;--ssc-indicator-gap: var(--solaris-space-3);--ssc-pad-x: var(--solaris-space-6);--ssc-pad-y: var(--solaris-space-5);--ssc-indicator-top: var(--ssc-pad-y);--ssc-indicator-end: var(--ssc-pad-x);--ssc-min-height: 12rem;--ssc-reserved-inline-end: calc(var(--ssc-indicator-size) + var(--ssc-indicator-gap))}:host([data-size=sm]){--ssc-indicator-size: 1.8rem;--ssc-indicator-dot-size: .7rem;--ssc-indicator-check-size: 1.1rem;--ssc-indicator-check-weight: .07rem;--ssc-indicator-icon-dot-size: .6rem;--ssc-pad-x: var(--solaris-space-5);--ssc-pad-y: var(--solaris-space-4);--ssc-min-height: 10rem}:host([data-size=md]){--ssc-indicator-size: 2rem;--ssc-indicator-dot-size: .8rem;--ssc-indicator-check-size: 1.25rem;--ssc-indicator-check-weight: .08rem;--ssc-indicator-icon-dot-size: .6rem;--ssc-pad-x: var(--solaris-space-6);--ssc-pad-y: var(--solaris-space-5);--ssc-min-height: 12rem}:host([data-size=lg]){--ssc-indicator-size: 2.4rem;--ssc-indicator-dot-size: .95rem;--ssc-indicator-check-size: 1.5rem;--ssc-indicator-check-weight: .09rem;--ssc-indicator-icon-dot-size: .8rem;--ssc-min-height: 14rem;--ssc-pad-x: var(--solaris-space-7);--ssc-pad-y: var(--solaris-space-6)}:host([data-color=primary]){--ssc-accent: var(--solaris-color-primary)}:host([data-color=success]){--ssc-accent: var(--solaris-color-success)}:host([data-color=warning]){--ssc-accent: var(--solaris-color-warning)}:host([data-color=error]){--ssc-accent: var(--solaris-color-error)}:host([data-color=info]){--ssc-accent: var(--solaris-color-info)}:host([data-color=custom]){--ssc-accent: var(--solaris-selection-card-custom, var(--solaris-color-primary))}:host([data-disabled=true]){cursor:not-allowed}:host(:focus-visible){outline:.2rem solid var(--ssc-focus-ring);outline-offset:.2rem;border-radius:var(--solaris-card-radius, var(--solaris-radius-lg))}.solaris-selection-card{min-width:0;min-height:var(--ssc-min-height);position:relative}.solaris-selection-card__card{display:block;min-width:0;--solaris-card-padding-x: var(--ssc-pad-x);--solaris-card-padding-y: var(--ssc-pad-y)}.solaris-selection-card__indicator{position:absolute;inset-block-start:var(--ssc-indicator-top);inset-inline-end:var(--ssc-indicator-end);z-index:1;pointer-events:none;inline-size:var(--ssc-indicator-size);block-size:var(--ssc-indicator-size);display:inline-grid;place-items:center;line-height:0}.solaris-selection-card__indicator-control{inline-size:var(--ssc-indicator-size);block-size:var(--ssc-indicator-size);aspect-ratio:1/1;flex:0 0 auto;position:relative;place-items:center;display:inline-grid;box-sizing:border-box;line-height:0;color:transparent;background:transparent;border:1px solid var(--solaris-card-border, var(--solaris-color-border));transition:border-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),background-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard)}.solaris-selection-card__indicator-dot,.solaris-selection-card__indicator-icon-dot{position:absolute;inset-block-start:50%;inset-inline-start:50%;display:block;flex:0 0 auto;aspect-ratio:1/1;box-sizing:border-box;opacity:0;transform-origin:center;border-radius:var(--solaris-radius-full);transform:translate(-50%,-50%) scale(.45);transition:opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),background-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-selection-card__indicator-dot{background:var(--ssc-accent);block-size:var(--ssc-indicator-dot-size);inline-size:var(--ssc-indicator-dot-size)}.solaris-selection-card__indicator-icon-dot{block-size:var(--ssc-indicator-icon-dot-size);inline-size:var(--ssc-indicator-icon-dot-size);background:var(--solaris-color-primary-contrast)}.solaris-selection-card__indicator-check{display:block;flex:0 0 auto;line-height:1;font-size:var(--ssc-indicator-check-size);font-weight:700;opacity:0;transform:scale(.45);transform-origin:center;-webkit-text-stroke:var(--ssc-indicator-check-weight) currentColor;transition:opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-selection-card__slot{display:contents}:host([data-indicator=radio]) .solaris-selection-card__indicator-control,:host([data-indicator=icon]) .solaris-selection-card__indicator-control{border-radius:var(--solaris-radius-full)}:host([data-indicator=checkbox]) .solaris-selection-card__indicator-control{border-radius:var(--solaris-radius-sm)}:host([data-selected=true][data-indicator=radio]) .solaris-selection-card__indicator-control{border-color:var(--ssc-accent)}:host([data-selected=true][data-indicator=radio]) .solaris-selection-card__indicator-dot{opacity:1;transform:translate(-50%,-50%) scale(1)}:host([data-selected=true][data-indicator=checkbox]) .solaris-selection-card__indicator-control{background:var(--ssc-accent);border-color:var(--ssc-accent);color:var(--solaris-color-primary-contrast);box-shadow:inset 0 0 0 .1rem color-mix(in srgb,var(--solaris-color-primary-contrast) 18%,transparent)}:host([data-selected=true][data-indicator=checkbox]) .solaris-selection-card__indicator-check{opacity:1;transform:scale(1)}:host([data-selected=true][data-indicator=icon]) .solaris-selection-card__indicator-control{border-color:var(--ssc-accent);background:var(--ssc-accent)}:host([data-selected=true][data-indicator=icon]) .solaris-selection-card__indicator-icon-dot{opacity:1;transform:translate(-50%,-50%) scale(1)}:host([data-disabled=true]) .solaris-selection-card__indicator-control{opacity:.55}:host([data-orientation=compact]){--ssc-min-height: 8.8rem;--ssc-reserved-inline-end: calc(var(--ssc-indicator-size) + var(--solaris-space-2))}\n"] }]
6540
+ }, template: "<div class=\"solaris-selection-card\">\n @if (resolvedIndicator() !== 'none') {\n <span class=\"solaris-selection-card__indicator\" aria-hidden=\"true\">\n <span class=\"solaris-selection-card__indicator-control\">\n @switch (resolvedIndicator()) {\n @case ('radio') {\n <span class=\"solaris-selection-card__indicator-dot\"></span>\n }\n\n @case ('checkbox') {\n <i class=\"ph ph-check solaris-selection-card__indicator-check\"></i>\n }\n\n @case ('icon') {\n <span class=\"solaris-selection-card__indicator-icon-dot\"></span>\n }\n }\n </span>\n </span>\n }\n\n <solaris-card\n class=\"solaris-selection-card__card\"\n [orientation]=\"orientation()\"\n [size]=\"size()\"\n [radius]=\"radius()\"\n [appearance]=\"appearance()\"\n [color]=\"color()\"\n [selected]=\"selected()\"\n [invalid]=\"invalid()\"\n [interactive]=\"!disabled()\"\n [disabled]=\"disabled()\"\n [minHeight]=\"minHeight()\"\n [reservedInlineEnd]=\"reservedInlineEnd()\"\n >\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"solaris-card-media\">\n <ng-content select=\"solaris-card-media\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-media]\">\n <ng-content select=\"[solaris-card-media]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-eyebrow]\">\n <ng-content select=\"[solaris-card-eyebrow]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-title]\">\n <ng-content select=\"[solaris-card-title]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-description]\">\n <ng-content select=\"[solaris-card-description]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-meta]\">\n <ng-content select=\"[solaris-card-meta]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-badge]\">\n <ng-content select=\"[solaris-card-badge]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-footer]\">\n <ng-content select=\"[solaris-card-footer]\"></ng-content>\n </div>\n\n <div\n class=\"solaris-selection-card__slot\"\n ngProjectAs=\"[solaris-card-actions]\"\n data-card-actions=\"true\"\n >\n <ng-content select=\"[solaris-card-actions]\"></ng-content>\n </div>\n </solaris-card>\n</div>\n", styles: [":host{display:block;min-width:0;position:relative;outline:none;cursor:pointer;--ssc-accent: var(--solaris-color-primary);--ssc-focus-ring: color-mix(in srgb, var(--ssc-accent) 26%, transparent);--ssc-indicator-size: var(--solaris-indicator-size-md);--ssc-indicator-dot-size: var(--solaris-indicator-dot-size-md);--ssc-indicator-check-size: var(--solaris-indicator-check-size-md);--ssc-indicator-check-weight: var(--solaris-indicator-check-stroke-md);--ssc-indicator-icon-dot-size: var(--solaris-indicator-icon-dot-size-md);--ssc-indicator-gap: var(--solaris-space-3);--ssc-pad-x: var(--solaris-space-6);--ssc-pad-y: var(--solaris-space-5);--ssc-indicator-top: var(--ssc-pad-y);--ssc-indicator-end: var(--ssc-pad-x);--ssc-min-height: 12rem;--ssc-reserved-inline-end: calc(var(--ssc-indicator-size) + var(--ssc-indicator-gap));--ssc-indicator-border: var(--solaris-color-border);--ssc-indicator-bg: transparent;--ssc-indicator-fg: var(--solaris-color-primary-contrast);--ssc-indicator-selected-bg: var(--ssc-accent);--ssc-indicator-selected-border: var(--ssc-accent);--ssc-indicator-selected-fg: var(--solaris-color-primary-contrast)}:host([data-size=sm]){--ssc-indicator-size: var(--solaris-indicator-size-sm);--ssc-indicator-dot-size: var(--solaris-indicator-dot-size-sm);--ssc-indicator-check-size: var(--solaris-indicator-check-size-sm);--ssc-indicator-check-weight: var(--solaris-indicator-check-stroke-sm);--ssc-indicator-icon-dot-size: var(--solaris-indicator-icon-dot-size-sm);--ssc-pad-x: var(--solaris-space-5);--ssc-pad-y: var(--solaris-space-4);--ssc-min-height: 10rem}:host([data-size=md]){--ssc-indicator-size: var(--solaris-indicator-size-md);--ssc-indicator-dot-size: var(--solaris-indicator-dot-size-md);--ssc-indicator-check-size: var(--solaris-indicator-check-size-md);--ssc-indicator-check-weight: var(--solaris-indicator-check-stroke-md);--ssc-indicator-icon-dot-size: var(--solaris-indicator-icon-dot-size-md);--ssc-pad-x: var(--solaris-space-6);--ssc-pad-y: var(--solaris-space-5);--ssc-min-height: 12rem}:host([data-size=lg]){--ssc-indicator-size: var(--solaris-indicator-size-lg);--ssc-indicator-dot-size: var(--solaris-indicator-dot-size-lg);--ssc-indicator-check-size: var(--solaris-indicator-check-size-lg);--ssc-indicator-check-weight: var(--solaris-indicator-check-stroke-lg);--ssc-indicator-icon-dot-size: var(--solaris-indicator-icon-dot-size-lg);--ssc-min-height: 14rem;--ssc-pad-x: var(--solaris-space-7);--ssc-pad-y: var(--solaris-space-6)}:host([data-color=primary]){--ssc-accent: var(--solaris-color-primary)}:host([data-color=success]){--ssc-accent: var(--solaris-color-success)}:host([data-color=warning]){--ssc-accent: var(--solaris-color-warning)}:host([data-color=error]){--ssc-accent: var(--solaris-color-error)}:host([data-color=info]){--ssc-accent: var(--solaris-color-info)}:host([data-color=custom]){--ssc-accent: var(--solaris-selection-card-custom, var(--solaris-color-primary))}:host([data-disabled=true]){cursor:not-allowed}:host(:focus-visible){outline:.2rem solid var(--ssc-focus-ring);outline-offset:.2rem;border-radius:var(--solaris-card-radius, var(--solaris-radius-lg))}.solaris-selection-card{min-width:0;min-height:var(--ssc-min-height);position:relative}.solaris-selection-card__card{display:block;min-width:0;--solaris-card-padding-x: var(--ssc-pad-x);--solaris-card-padding-y: var(--ssc-pad-y)}.solaris-selection-card__indicator{position:absolute;inset-block-start:var(--ssc-indicator-top);inset-inline-end:var(--ssc-indicator-end);z-index:1;pointer-events:none;inline-size:var(--ssc-indicator-size);block-size:var(--ssc-indicator-size);display:inline-grid;place-items:center;line-height:0}.solaris-selection-card__indicator-control{inline-size:var(--ssc-indicator-size);block-size:var(--ssc-indicator-size);min-inline-size:var(--ssc-indicator-size);min-block-size:var(--ssc-indicator-size);aspect-ratio:1/1;display:inline-grid;place-items:center;box-sizing:border-box;line-height:0;border-radius:var(--solaris-indicator-radius);border:var(--solaris-indicator-border-width) solid var(--ssc-indicator-border);background:var(--ssc-indicator-bg);color:var(--ssc-indicator-fg);flex:0 0 auto;position:relative;transition:border-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),background-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard)}.solaris-selection-card__indicator-dot,.solaris-selection-card__indicator-icon-dot{position:absolute;inset-block-start:50%;inset-inline-start:50%;display:block;flex:0 0 auto;aspect-ratio:1/1;box-sizing:border-box;opacity:0;transform-origin:center;border-radius:var(--solaris-indicator-radius);transform:translate(-50%,-50%) scale(.45);transition:opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),background-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-selection-card__indicator-dot{block-size:var(--ssc-indicator-dot-size);inline-size:var(--ssc-indicator-dot-size);background:var(--ssc-indicator-selected-border)}:host([data-appearance=solid]) .solaris-selection-card__indicator-dot,:host([data-appearance=gradient]) .solaris-selection-card__indicator-dot{background:var(--ssc-indicator-selected-bg)}.solaris-selection-card__indicator-icon-dot{background:var(--ssc-indicator-selected-fg);block-size:var(--ssc-indicator-icon-dot-size);inline-size:var(--ssc-indicator-icon-dot-size)}.solaris-selection-card__indicator-check{display:block;flex:0 0 auto;line-height:1;font-size:var(--ssc-indicator-check-size);font-weight:700;-webkit-text-stroke:var(--ssc-indicator-check-weight) currentColor;opacity:0;transform:scale(.45);transform-origin:center;transition:opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-selection-card__slot{display:contents}:host([data-indicator=radio]) .solaris-selection-card__indicator-control,:host([data-indicator=icon]) .solaris-selection-card__indicator-control{border-radius:var(--solaris-radius-full)}:host([data-indicator=checkbox]) .solaris-selection-card__indicator-control{border-radius:var(--solaris-radius-sm)}:host([data-selected=true][data-indicator=radio]) .solaris-selection-card__indicator-control{border-color:var(--ssc-indicator-selected-border)}:host([data-selected=true][data-indicator=radio]) .solaris-selection-card__indicator-dot{opacity:1;transform:translate(-50%,-50%) scale(1)}:host([data-selected=true][data-indicator=checkbox]) .solaris-selection-card__indicator-control{color:var(--ssc-indicator-selected-fg);background:var(--ssc-indicator-selected-bg);border-color:var(--ssc-indicator-selected-border);box-shadow:inset 0 0 0 .1rem color-mix(in srgb,var(--ssc-indicator-selected-fg) 18%,transparent)}:host([data-selected=true][data-indicator=checkbox]) .solaris-selection-card__indicator-check{opacity:1;transform:scale(1)}:host([data-selected=true][data-indicator=icon]) .solaris-selection-card__indicator-control{background:var(--ssc-indicator-selected-bg);border-color:var(--ssc-indicator-selected-border)}:host([data-selected=true][data-indicator=icon]) .solaris-selection-card__indicator-icon-dot{opacity:1;transform:translate(-50%,-50%) scale(1)}:host([data-disabled=true]) .solaris-selection-card__indicator-control{opacity:.55}:host([data-orientation=compact]){--ssc-min-height: 8.8rem;--ssc-reserved-inline-end: calc(var(--ssc-indicator-size) + var(--solaris-space-2))}:host([data-appearance=outline]){--ssc-indicator-border: var(--solaris-color-border);--ssc-indicator-bg: transparent}:host([data-appearance=soft]){--ssc-indicator-border: color-mix( in srgb, var(--ssc-accent) 24%, var(--solaris-color-border) );--ssc-indicator-bg: color-mix( in srgb, var(--ssc-accent) 4%, transparent )}:host([data-appearance=solid]){--ssc-indicator-border: color-mix( in srgb, var(--solaris-color-primary-contrast) 46%, transparent );--ssc-indicator-bg: color-mix( in srgb, var(--solaris-color-primary-contrast) 8%, transparent );--ssc-indicator-selected-bg: var(--solaris-color-primary-contrast);--ssc-indicator-selected-border: var(--solaris-color-primary-contrast);--ssc-indicator-selected-fg: var(--ssc-accent)}:host([data-appearance=elevated]){--ssc-indicator-border: color-mix( in srgb, var(--solaris-color-border) 72%, transparent );--ssc-indicator-bg: var(--solaris-color-surface)}:host([data-appearance=ghost]){--ssc-indicator-border: color-mix( in srgb, var(--ssc-accent) 22%, var(--solaris-color-border) );--ssc-indicator-bg: transparent}:host([data-appearance=glass]){--ssc-indicator-border: color-mix( in srgb, var(--solaris-color-surface) 34%, var(--solaris-color-border) );--ssc-indicator-bg: color-mix( in srgb, var(--ssc-accent) 10%, transparent )}:host([data-appearance=gradient]){--ssc-indicator-border: color-mix( in srgb, var(--solaris-color-primary-contrast) 42%, transparent );--ssc-indicator-bg: color-mix( in srgb, var(--solaris-color-primary-contrast) 8%, transparent );--ssc-indicator-selected-bg: var(--solaris-color-primary-contrast);--ssc-indicator-selected-border: var(--solaris-color-primary-contrast);--ssc-indicator-selected-fg: var(--ssc-accent)}\n"] }]
6562
6541
  }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], selectionIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionIndicator", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selectedInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }], cardClick: [{ type: i0.Output, args: ["cardClick"] }] } });
6563
6542
  function inferStandaloneMode(indicator) {
6564
6543
  switch (indicator) {