@educarehq/solaris-ui 0.9.0 → 0.11.0

package/fesm2022/educarehq-solaris-ui.mjs

@@ -1982,6 +1982,105 @@ const MEDIA_ICONS = [
     },
 ];
 
+const BRAND_ICONS = [
+    {
+        name: 'google',
+        viewBox: '0 0 16 16',
+        fill: 'none',
+        elements: [
+            {
+                type: 'path',
+                fill: '#4285F4',
+                d: 'M14.9 8.161c0-.476-.039-.954-.121-1.422h-6.64v2.695h3.802a3.24 3.24 0 01-1.407 2.127v1.75h2.269c1.332-1.22 2.097-3.02 2.097-5.15z',
+            },
+            {
+                type: 'path',
+                fill: '#34A853',
+                d: 'M8.14 15c1.898 0 3.499-.62 4.665-1.69l-2.268-1.749c-.631.427-1.446.669-2.395.669-1.836 0-3.393-1.232-3.952-2.888H1.85v1.803A7.044 7.044 0 008.14 15z',
+            },
+            {
+                type: 'path',
+                fill: '#FBBC04',
+                d: 'M4.187 9.342a4.17 4.17 0 010-2.68V4.859H1.849a6.97 6.97 0 000 6.286l2.338-1.803z',
+            },
+            {
+                type: 'path',
+                fill: '#EA4335',
+                d: 'M8.14 3.77a3.837 3.837 0 012.7 1.05l2.01-1.999a6.786 6.786 0 00-4.71-1.82 7.042 7.042 0 00-6.29 3.858L4.186 6.66c.556-1.658 2.116-2.89 3.952-2.89z',
+            },
+        ],
+    },
+    {
+        name: 'microsoft',
+        viewBox: '0 0 16 16',
+        fill: 'none',
+        elements: [
+            { type: 'rect', x: 1, y: 1, width: 6.5, height: 6.5, fill: '#F35325' },
+            { type: 'rect', x: 8.5, y: 1, width: 6.5, height: 6.5, fill: '#81BC06' },
+            { type: 'rect', x: 1, y: 8.5, width: 6.5, height: 6.5, fill: '#05A6F0' },
+            {
+                type: 'rect',
+                x: 8.5,
+                y: 8.5,
+                width: 6.5,
+                height: 6.5,
+                fill: '#FFBA08',
+            },
+        ],
+    },
+    {
+        name: 'apple',
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        elements: [
+            {
+                type: 'path',
+                fill: 'currentColor',
+                d: 'M14.94,5.19A4.38,4.38,0,0,0,16,2,4.44,4.44,0,0,0,13,3.52,4.17,4.17,0,0,0,12,6.61,3.69,3.69,0,0,0,14.94,5.19Zm2.52,7.44a4.51,4.51,0,0,1,2.16-3.81,4.66,4.66,0,0,0-3.66-2c-1.56-.16-3,.91-3.83.91s-2-.89-3.3-.87A4.92,4.92,0,0,0,4.69,9.39C2.93,12.45,4.24,17,6,19.47,6.8,20.68,7.8,22.05,9.12,22s1.75-.82,3.28-.82,2,.82,3.3.79,2.22-1.24,3.06-2.45a11,11,0,0,0,1.38-2.85A4.41,4.41,0,0,1,17.46,12.63Z',
+            },
+        ],
+    },
+    {
+        name: 'android',
+        viewBox: '0 0 413.137 413.137',
+        fill: 'none',
+        elements: [
+            {
+                type: 'path',
+                fill: '#AAC148',
+                d: 'M311.358,136.395H101.779c-4.662,0-8.441,3.779-8.441,8.441v175.749c0,4.662,3.779,8.441,8.441,8.441h37.363v59.228c0,13.742,11.14,24.883,24.883,24.883l0,0c13.742,0,24.883-11.14,24.883-24.883v-59.228h34.803v59.228c0,13.742,11.14,24.883,24.883,24.883l0,0c13.742,0,24.883-11.14,24.883-24.883v-59.228h37.882c4.662,0,8.441-3.779,8.441-8.441V144.836C319.799,140.174,316.02,136.395,311.358,136.395z',
+            },
+            {
+                type: 'path',
+                fill: '#AAC148',
+                d: 'M57.856,136.354L57.856,136.354c-13.742,0-24.883,11.14-24.883,24.883v101.065c0,13.742,11.14,24.883,24.883,24.883l0,0c13.742,0,24.883-11.14,24.883-24.883V161.237C82.738,147.495,71.598,136.354,57.856,136.354z',
+            },
+            {
+                type: 'path',
+                fill: '#AAC148',
+                d: 'M355.281,136.354L355.281,136.354c-13.742,0-24.883,11.14-24.883,24.883v101.065c0,13.742,11.14,24.883,24.883,24.883l0,0c13.742,0,24.883-11.14,24.883-24.883V161.237C380.164,147.495,369.024,136.354,355.281,136.354z',
+            },
+            {
+                type: 'path',
+                fill: '#AAC148',
+                d: 'M103.475,124.069h205.692c5.366,0,9.368-4.943,8.266-10.195c-6.804-32.428-27.45-59.756-55.465-75.543l17.584-31.727c1.19-2.148,0.414-4.855-1.734-6.045c-2.153-1.193-4.856-0.414-6.046,1.734l-17.717,31.966c-14.511-6.734-30.683-10.495-47.734-10.495c-17.052,0-33.224,3.761-47.735,10.495L140.869,2.292c-1.191-2.149-3.898-2.924-6.045-1.734c-2.148,1.19-2.924,3.897-1.734,6.045l17.584,31.727c-28.015,15.788-48.661,43.115-55.465,75.544C94.106,119.126,98.108,124.069,103.475,124.069z M267.697,76.786c0,5.282-4.282,9.565-9.565,9.565c-5.282,0-9.565-4.282-9.565-9.565c0-5.282,4.282-9.565,9.565-9.565C263.415,67.221,267.697,71.504,267.697,76.786z M154.508,67.221c5.282,0,9.565,4.282,9.565,9.565c0,5.282-4.282,9.565-9.565,9.565c-5.282,0-9.565-4.282-9.565-9.565C144.943,71.504,149.225,67.221,154.508,67.221z',
+            },
+        ],
+    },
+    {
+        name: 'github',
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        elements: [
+            {
+                type: 'path',
+                fill: 'currentColor',
+                d: 'M12,2.2467A10.00042,10.00042,0,0,0,8.83752,21.73419c.5.08752.6875-.21247.6875-.475,0-.23749-.01251-1.025-.01251-1.86249C7,19.85919,6.35,18.78423,6.15,18.22173A3.636,3.636,0,0,0,5.125,16.8092c-.35-.1875-.85-.65-.01251-.66248A2.00117,2.00117,0,0,1,6.65,17.17169a2.13742,2.13742,0,0,0,2.91248.825A2.10376,2.10376,0,0,1,10.2,16.65923c-2.225-.25-4.55-1.11254-4.55-4.9375a3.89187,3.89187,0,0,1,1.025-2.6875,3.59373,3.59373,0,0,1,.1-2.65s.83747-.26251,2.75,1.025a9.42747,9.42747,0,0,1,5,0c1.91248-1.3,2.75-1.025,2.75-1.025a3.59323,3.59323,0,0,1,.1,2.65,3.869,3.869,0,0,1,1.025,2.6875c0,3.83747-2.33752,4.6875-4.5625,4.9375a2.36814,2.36814,0,0,1,.675,1.85c0,1.33752-.01251,2.41248-.01251,2.75,0,.26251.1875.575.6875.475A10.0053,10.0053,0,0,0,12,2.2467Z',
+            },
+        ],
+    },
+];
+
 const SOLARIS_BUILT_IN_ICONS = [
     ...NAVIGATION_ICONS,
     ...ACTIONS_ICONS,
@@ -1991,6 +2090,7 @@ const SOLARIS_BUILT_IN_ICONS = [
     ...LAYOUT_ICONS,
     ...COMMUNICATION_ICONS,
     ...MEDIA_ICONS,
+    ...BRAND_ICONS,
 ];
 
 class SolarisIconRegistryService {
@@ -2037,17 +2137,42 @@ class SolarisIconComponent {
     name = input.required(...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
     ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     decorative = input(false, ...(ngDevMode ? [{ debugName: "decorative" }] : /* istanbul ignore next */ []));
+    inheritColor = input(true, ...(ngDevMode ? [{ debugName: "inheritColor" }] : /* istanbul ignore next */ []));
     definition = computed(() => this.registry.getIcon(this.name()), ...(ngDevMode ? [{ debugName: "definition" }] : /* istanbul ignore next */ []));
     isHidden = computed(() => this.decorative(), ...(ngDevMode ? [{ debugName: "isHidden" }] : /* istanbul ignore next */ []));
     accessibleLabel = computed(() => this.ariaLabel() ?? '', ...(ngDevMode ? [{ debugName: "accessibleLabel" }] : /* istanbul ignore next */ []));
     hasSemanticLabel = computed(() => !this.decorative() && !!this.ariaLabel(), ...(ngDevMode ? [{ debugName: "hasSemanticLabel" }] : /* istanbul ignore next */ []));
+    hasOwnColors = computed(() => {
+        const icon = this.definition();
+        if (!icon)
+            return false;
+        if (icon.fill && icon.fill !== 'none') {
+            return true;
+        }
+        return icon.elements.some((el) => 'fill' in el && !!el.fill);
+    }, ...(ngDevMode ? [{ debugName: "hasOwnColors" }] : /* istanbul ignore next */ []));
+    resolvedStroke = computed(() => {
+        if (!this.inheritColor())
+            return 'none';
+        const icon = this.definition();
+        if (icon?.stroke)
+            return icon.stroke;
+        if (this.hasOwnColors())
+            return 'none';
+        return 'currentColor';
+    }, ...(ngDevMode ? [{ debugName: "resolvedStroke" }] : /* istanbul ignore next */ []));
+    resolvedStrokeWidth = computed(() => {
+        if (this.resolvedStroke() === 'none')
+            return 0;
+        return this.definition()?.strokeWidth ?? 2;
+    }, ...(ngDevMode ? [{ debugName: "resolvedStrokeWidth" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisIconComponent, isStandalone: true, selector: "solaris-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, decorative: { classPropertyName: "decorative", publicName: "decorative", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (definition(); as icon) {\n  <svg\n    width=\"100%\"\n    height=\"100%\"\n    [attr.viewBox]=\"icon.viewBox\"\n    [attr.fill]=\"icon.fill ?? 'none'\"\n    [attr.stroke]=\"icon.stroke ?? 'currentColor'\"\n    [attr.stroke-width]=\"icon.strokeWidth ?? 2\"\n    [attr.stroke-linecap]=\"icon.strokeLinecap ?? 'round'\"\n    [attr.stroke-linejoin]=\"icon.strokeLinejoin ?? 'round'\"\n    [attr.aria-hidden]=\"isHidden() ? 'true' : null\"\n    [attr.aria-label]=\"hasSemanticLabel() ? accessibleLabel() : null\"\n    [attr.role]=\"isHidden() ? 'presentation' : 'img'\"\n  >\n    @for (element of icon.elements; track $index) {\n      @switch (element.type) {\n        @case ('path') {\n          <path [attr.d]=\"element.d\" />\n        }\n        @case ('line') {\n          <line\n            [attr.x1]=\"element.x1\"\n            [attr.y1]=\"element.y1\"\n            [attr.x2]=\"element.x2\"\n            [attr.y2]=\"element.y2\"\n          />\n        }\n        @case ('polyline') {\n          <polyline [attr.points]=\"element.points\" />\n        }\n        @case ('polygon') {\n          <polygon [attr.points]=\"element.points\" />\n        }\n        @case ('circle') {\n          <circle\n            [attr.cx]=\"element.cx\"\n            [attr.cy]=\"element.cy\"\n            [attr.r]=\"element.r\"\n          />\n        }\n        @case ('rect') {\n          <rect\n            [attr.x]=\"element.x\"\n            [attr.y]=\"element.y\"\n            [attr.width]=\"element.width\"\n            [attr.height]=\"element.height\"\n            [attr.rx]=\"element.rx\"\n            [attr.ry]=\"element.ry\"\n          />\n        }\n      }\n    }\n  </svg>\n}\n", styles: [":host{width:1em;height:1em;align-items:center;display:inline-flex;justify-content:center}:host svg{width:100%;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisIconComponent, isStandalone: true, selector: "solaris-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, decorative: { classPropertyName: "decorative", publicName: "decorative", isSignal: true, isRequired: false, transformFunction: null }, inheritColor: { classPropertyName: "inheritColor", publicName: "inheritColor", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (definition(); as icon) {\n  <svg\n    width=\"100%\"\n    height=\"100%\"\n    [attr.viewBox]=\"icon.viewBox\"\n    [attr.fill]=\"icon.fill ?? 'none'\"\n    [attr.stroke]=\"resolvedStroke()\"\n    [attr.stroke-width]=\"resolvedStrokeWidth()\"\n    [attr.stroke-linecap]=\"icon.strokeLinecap ?? 'round'\"\n    [attr.stroke-linejoin]=\"icon.strokeLinejoin ?? 'round'\"\n    [attr.aria-hidden]=\"isHidden() ? 'true' : null\"\n    [attr.aria-label]=\"hasSemanticLabel() ? accessibleLabel() : null\"\n    [attr.role]=\"isHidden() ? 'presentation' : 'img'\"\n  >\n    @for (element of icon.elements; track $index) {\n      @switch (element.type) {\n        @case ('path') {\n          <path\n            [attr.d]=\"element.d\"\n            [attr.fill]=\"element.fill ?? null\"\n            [attr.stroke]=\"element.stroke ?? null\"\n            [attr.stroke-width]=\"element.strokeWidth ?? null\"\n            [attr.stroke-linecap]=\"element.strokeLinecap ?? null\"\n            [attr.stroke-linejoin]=\"element.strokeLinejoin ?? null\"\n          />\n        }\n        @case ('line') {\n          <line\n            [attr.x1]=\"element.x1\"\n            [attr.y1]=\"element.y1\"\n            [attr.x2]=\"element.x2\"\n            [attr.y2]=\"element.y2\"\n            [attr.fill]=\"element.fill ?? null\"\n            [attr.stroke]=\"element.stroke ?? null\"\n            [attr.stroke-width]=\"element.strokeWidth ?? null\"\n            [attr.stroke-linecap]=\"element.strokeLinecap ?? null\"\n            [attr.stroke-linejoin]=\"element.strokeLinejoin ?? null\"\n          />\n        }\n        @case ('polyline') {\n          <polyline\n            [attr.points]=\"element.points\"\n            [attr.fill]=\"element.fill ?? null\"\n            [attr.stroke]=\"element.stroke ?? null\"\n            [attr.stroke-width]=\"element.strokeWidth ?? null\"\n            [attr.stroke-linecap]=\"element.strokeLinecap ?? null\"\n            [attr.stroke-linejoin]=\"element.strokeLinejoin ?? null\"\n          />\n        }\n        @case ('polygon') {\n          <polygon\n            [attr.points]=\"element.points\"\n            [attr.fill]=\"element.fill ?? null\"\n            [attr.stroke]=\"element.stroke ?? null\"\n            [attr.stroke-width]=\"element.strokeWidth ?? null\"\n            [attr.stroke-linecap]=\"element.strokeLinecap ?? null\"\n            [attr.stroke-linejoin]=\"element.strokeLinejoin ?? null\"\n          />\n        }\n        @case ('circle') {\n          <circle\n            [attr.cx]=\"element.cx\"\n            [attr.cy]=\"element.cy\"\n            [attr.r]=\"element.r\"\n            [attr.fill]=\"element.fill ?? null\"\n            [attr.stroke]=\"element.stroke ?? null\"\n            [attr.stroke-width]=\"element.strokeWidth ?? null\"\n            [attr.stroke-linecap]=\"element.strokeLinecap ?? null\"\n            [attr.stroke-linejoin]=\"element.strokeLinejoin ?? null\"\n          />\n        }\n        @case ('rect') {\n          <rect\n            [attr.x]=\"element.x\"\n            [attr.y]=\"element.y\"\n            [attr.width]=\"element.width\"\n            [attr.height]=\"element.height\"\n            [attr.rx]=\"element.rx\"\n            [attr.ry]=\"element.ry\"\n            [attr.fill]=\"element.fill ?? null\"\n            [attr.stroke]=\"element.stroke ?? null\"\n            [attr.stroke-width]=\"element.strokeWidth ?? null\"\n            [attr.stroke-linecap]=\"element.strokeLinecap ?? null\"\n            [attr.stroke-linejoin]=\"element.strokeLinejoin ?? null\"\n          />\n        }\n      }\n    }\n  </svg>\n}\n", styles: [":host{width:1em;height:1em;align-items:center;display:inline-flex;justify-content:center}:host svg{width:100%;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'solaris-icon', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (definition(); as icon) {\n  <svg\n    width=\"100%\"\n    height=\"100%\"\n    [attr.viewBox]=\"icon.viewBox\"\n    [attr.fill]=\"icon.fill ?? 'none'\"\n    [attr.stroke]=\"icon.stroke ?? 'currentColor'\"\n    [attr.stroke-width]=\"icon.strokeWidth ?? 2\"\n    [attr.stroke-linecap]=\"icon.strokeLinecap ?? 'round'\"\n    [attr.stroke-linejoin]=\"icon.strokeLinejoin ?? 'round'\"\n    [attr.aria-hidden]=\"isHidden() ? 'true' : null\"\n    [attr.aria-label]=\"hasSemanticLabel() ? accessibleLabel() : null\"\n    [attr.role]=\"isHidden() ? 'presentation' : 'img'\"\n  >\n    @for (element of icon.elements; track $index) {\n      @switch (element.type) {\n        @case ('path') {\n          <path [attr.d]=\"element.d\" />\n        }\n        @case ('line') {\n          <line\n            [attr.x1]=\"element.x1\"\n            [attr.y1]=\"element.y1\"\n            [attr.x2]=\"element.x2\"\n            [attr.y2]=\"element.y2\"\n          />\n        }\n        @case ('polyline') {\n          <polyline [attr.points]=\"element.points\" />\n        }\n        @case ('polygon') {\n          <polygon [attr.points]=\"element.points\" />\n        }\n        @case ('circle') {\n          <circle\n            [attr.cx]=\"element.cx\"\n            [attr.cy]=\"element.cy\"\n            [attr.r]=\"element.r\"\n          />\n        }\n        @case ('rect') {\n          <rect\n            [attr.x]=\"element.x\"\n            [attr.y]=\"element.y\"\n            [attr.width]=\"element.width\"\n            [attr.height]=\"element.height\"\n            [attr.rx]=\"element.rx\"\n            [attr.ry]=\"element.ry\"\n          />\n        }\n      }\n    }\n  </svg>\n}\n", styles: [":host{width:1em;height:1em;align-items:center;display:inline-flex;justify-content:center}:host svg{width:100%;height:100%}\n"] }]
-        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], decorative: [{ type: i0.Input, args: [{ isSignal: true, alias: "decorative", required: false }] }] } });
+            args: [{ selector: 'solaris-icon', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (definition(); as icon) {\n  <svg\n    width=\"100%\"\n    height=\"100%\"\n    [attr.viewBox]=\"icon.viewBox\"\n    [attr.fill]=\"icon.fill ?? 'none'\"\n    [attr.stroke]=\"resolvedStroke()\"\n    [attr.stroke-width]=\"resolvedStrokeWidth()\"\n    [attr.stroke-linecap]=\"icon.strokeLinecap ?? 'round'\"\n    [attr.stroke-linejoin]=\"icon.strokeLinejoin ?? 'round'\"\n    [attr.aria-hidden]=\"isHidden() ? 'true' : null\"\n    [attr.aria-label]=\"hasSemanticLabel() ? accessibleLabel() : null\"\n    [attr.role]=\"isHidden() ? 'presentation' : 'img'\"\n  >\n    @for (element of icon.elements; track $index) {\n      @switch (element.type) {\n        @case ('path') {\n          <path\n            [attr.d]=\"element.d\"\n            [attr.fill]=\"element.fill ?? null\"\n            [attr.stroke]=\"element.stroke ?? null\"\n            [attr.stroke-width]=\"element.strokeWidth ?? null\"\n            [attr.stroke-linecap]=\"element.strokeLinecap ?? null\"\n            [attr.stroke-linejoin]=\"element.strokeLinejoin ?? null\"\n          />\n        }\n        @case ('line') {\n          <line\n            [attr.x1]=\"element.x1\"\n            [attr.y1]=\"element.y1\"\n            [attr.x2]=\"element.x2\"\n            [attr.y2]=\"element.y2\"\n            [attr.fill]=\"element.fill ?? null\"\n            [attr.stroke]=\"element.stroke ?? null\"\n            [attr.stroke-width]=\"element.strokeWidth ?? null\"\n            [attr.stroke-linecap]=\"element.strokeLinecap ?? null\"\n            [attr.stroke-linejoin]=\"element.strokeLinejoin ?? null\"\n          />\n        }\n        @case ('polyline') {\n          <polyline\n            [attr.points]=\"element.points\"\n            [attr.fill]=\"element.fill ?? null\"\n            [attr.stroke]=\"element.stroke ?? null\"\n            [attr.stroke-width]=\"element.strokeWidth ?? null\"\n            [attr.stroke-linecap]=\"element.strokeLinecap ?? null\"\n            [attr.stroke-linejoin]=\"element.strokeLinejoin ?? null\"\n          />\n        }\n        @case ('polygon') {\n          <polygon\n            [attr.points]=\"element.points\"\n            [attr.fill]=\"element.fill ?? null\"\n            [attr.stroke]=\"element.stroke ?? null\"\n            [attr.stroke-width]=\"element.strokeWidth ?? null\"\n            [attr.stroke-linecap]=\"element.strokeLinecap ?? null\"\n            [attr.stroke-linejoin]=\"element.strokeLinejoin ?? null\"\n          />\n        }\n        @case ('circle') {\n          <circle\n            [attr.cx]=\"element.cx\"\n            [attr.cy]=\"element.cy\"\n            [attr.r]=\"element.r\"\n            [attr.fill]=\"element.fill ?? null\"\n            [attr.stroke]=\"element.stroke ?? null\"\n            [attr.stroke-width]=\"element.strokeWidth ?? null\"\n            [attr.stroke-linecap]=\"element.strokeLinecap ?? null\"\n            [attr.stroke-linejoin]=\"element.strokeLinejoin ?? null\"\n          />\n        }\n        @case ('rect') {\n          <rect\n            [attr.x]=\"element.x\"\n            [attr.y]=\"element.y\"\n            [attr.width]=\"element.width\"\n            [attr.height]=\"element.height\"\n            [attr.rx]=\"element.rx\"\n            [attr.ry]=\"element.ry\"\n            [attr.fill]=\"element.fill ?? null\"\n            [attr.stroke]=\"element.stroke ?? null\"\n            [attr.stroke-width]=\"element.strokeWidth ?? null\"\n            [attr.stroke-linecap]=\"element.strokeLinecap ?? null\"\n            [attr.stroke-linejoin]=\"element.strokeLinejoin ?? null\"\n          />\n        }\n      }\n    }\n  </svg>\n}\n", styles: [":host{width:1em;height:1em;align-items:center;display:inline-flex;justify-content:center}:host svg{width:100%;height:100%}\n"] }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], decorative: [{ type: i0.Input, args: [{ isSignal: true, alias: "decorative", required: false }] }], inheritColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "inheritColor", required: false }] }] } });
 
 class SolarisBadgeComponent {
     appearance = input('tonal', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
@@ -2295,7 +2420,7 @@ class SolarisAlertComponent {
         this.dismissed.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisAlertComponent, isStandalone: true, selector: "solaris-alert", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, live: { classPropertyName: "live", publicName: "live", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, hasTitle: { classPropertyName: "hasTitle", publicName: "hasTitle", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, closeLabelKey: { classPropertyName: "closeLabelKey", publicName: "closeLabelKey", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, host: { properties: { "attr.role": "liveRole()", "attr.data-variant": "variant()", "attr.aria-live": "ariaLive()", "attr.data-radius": "radius()", "attr.data-density": "effectiveDensity()", "attr.data-appearance": "appearance()", "attr.data-closable": "closable() ? \"\" : null", "attr.data-has-title": "hasTitle() ? \"\" : null" } }, ngImport: i0, template: "@if (showIcon()) {\n  <div class=\"solaris-alert__icon\">\n    <solaris-icon [name]=\"iconName()\" [decorative]=\"true\" />\n  </div>\n}\n\n<div class=\"solaris-alert__content\">\n  <ng-content />\n</div>\n\n@if (closable()) {\n  <div class=\"solaris-alert__close-slot\">\n    <button\n      type=\"button\"\n      class=\"solaris-alert__close\"\n      [attr.aria-label]=\"closeButtonLabel()\"\n      (click)=\"handleClose()\"\n    >\n      <solaris-icon name=\"x\" [decorative]=\"true\" />\n    </button>\n  </div>\n}\n", styles: [":host{--solaris-alert-icon-offset: -1px;--solaris-alert-close-offset: 0px;--solaris-alert-close-background: transparent;--solaris-alert-gap: var(--solaris-spacing-3);--solaris-alert-color: var(--solaris-info-text);--solaris-alert-radius: var(--solaris-radius-md);--solaris-alert-padding: var(--solaris-spacing-4);--solaris-alert-icon-color: var(--solaris-info-base);--solaris-alert-close-size: var(--solaris-spacing-4);--solaris-alert-content-gap: var(--solaris-spacing-1);--solaris-alert-actions-gap: var(--solaris-spacing-2);--solaris-alert-close-color: var(--solaris-text-muted);--solaris-alert-icon-size: var(--solaris-font-size-lg);--solaris-alert-background: var(--solaris-info-surface);--solaris-alert-title-color: var(--solaris-text-strong);--solaris-alert-border-color: var(--solaris-info-border);--solaris-alert-close-hover-background: #0000000f;--solaris-alert-border-width: var(--solaris-border-width-sm);--solaris-alert-close-icon-size: var(--solaris-font-size-md);--solaris-alert-description-color: var(--solaris-text-default);--solaris-alert-first-line-height: var(--solaris-line-height-md);--solaris-alert-first-line-font-size: var(--solaris-font-size-sm);display:flex;box-sizing:border-box;align-items:flex-start;gap:var(--solaris-alert-gap);color:var(--solaris-alert-color);padding:var(--solaris-alert-padding);border-radius:var(--solaris-alert-radius);background:var(--solaris-alert-background);border:var(--solaris-alert-border-width) solid var(--solaris-alert-border-color)}:host([data-has-title]){--solaris-alert-icon-offset: 0px;--solaris-alert-close-offset: 0px;--solaris-alert-first-line-height: var(--solaris-line-height-sm);--solaris-alert-first-line-font-size: var(--solaris-font-size-md)}.solaris-alert__icon{display:grid;flex-shrink:0;position:relative;place-items:center;transform:translateY(-50%);width:var(--solaris-alert-icon-size);height:var(--solaris-alert-icon-size);color:var(--solaris-alert-icon-color);line-height:var(--solaris-alert-first-line-height);font-size:var(--solaris-alert-first-line-font-size);inset-block-start:calc(.5lh + var(--solaris-alert-icon-offset))}.solaris-alert__icon solaris-icon,.solaris-alert__icon svg{display:block;width:var(--solaris-alert-icon-size);height:var(--solaris-alert-icon-size)}.solaris-alert__content{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--solaris-alert-content-gap);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}.solaris-alert__close:hover{background:var(--solaris-alert-close-hover-background)}.solaris-alert__close:focus-visible{outline-offset:2px;outline:2px solid var(--solaris-primary-base)}.solaris-alert__close{all:unset;display:grid;flex-shrink:0;cursor:pointer;position:relative;place-items:center;box-sizing:border-box;inset-block-start:.5lh;transform:translateY(-50%);width:var(--solaris-alert-close-size);height:var(--solaris-alert-close-size);border-radius:var(--solaris-radius-sm);color:var(--solaris-alert-close-color);background:var(--solaris-alert-close-background);line-height:var(--solaris-alert-first-line-height);font-size:var(--solaris-alert-first-line-font-size)}.solaris-alert__close solaris-icon,.solaris-alert__close svg{display:block;width:var(--solaris-alert-close-icon-size);height:var(--solaris-alert-close-icon-size)}::ng-deep .solaris-alert-title{margin:0;font-size:var(--solaris-font-size-md);color:var(--solaris-alert-title-color);line-height:var(--solaris-line-height-sm);font-weight:var(--solaris-font-weight-semibold)}::ng-deep .solaris-alert-description{margin:0;font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md);color:var(--solaris-alert-description-color)}::ng-deep .solaris-alert-actions{display:flex;flex-wrap:wrap;gap:var(--solaris-alert-actions-gap);margin-block-start:var(--solaris-spacing-2)}::ng-deep .solaris-alert-title+.solaris-alert-description{margin-block-start:var(--solaris-alert-content-gap)}::ng-deep .solaris-alert__content>:first-child:not(.solaris-alert-title){margin-block-start:0}:host([data-radius=sm]){--solaris-alert-radius: var(--solaris-radius-sm)}:host([data-radius=md]){--solaris-alert-radius: var(--solaris-radius-md)}:host([data-radius=lg]){--solaris-alert-radius: var(--solaris-radius-lg)}:host([data-radius=xl]){--solaris-alert-radius: var(--solaris-radius-xl)}:host([data-density=compact]){--solaris-alert-gap: var(--solaris-density-gap-md);--solaris-alert-padding: var(--solaris-density-padding-md);--solaris-alert-content-gap: var(--solaris-density-gap-md);--solaris-alert-actions-gap: var(--solaris-density-gap-md);--solaris-alert-close-size: var(--solaris-density-min-height)}:host([data-density=normal]){--solaris-alert-gap: var(--solaris-density-gap-md);--solaris-alert-padding: var(--solaris-density-padding-md);--solaris-alert-content-gap: var(--solaris-density-gap-md);--solaris-alert-actions-gap: var(--solaris-density-gap-md);--solaris-alert-close-size: var(--solaris-density-min-height)}:host([data-density=comfortable]){--solaris-alert-gap: var(--solaris-density-gap-md);--solaris-alert-padding: var(--solaris-density-padding-lg);--solaris-alert-content-gap: var(--solaris-density-gap-md);--solaris-alert-actions-gap: var(--solaris-density-gap-md);--solaris-alert-close-size: var(--solaris-density-min-height)}:host([data-variant=neutral][data-appearance=tonal]){--solaris-alert-color: var(--solaris-text-default);--solaris-alert-icon-color: var(--solaris-text-muted);--solaris-alert-background: var(--solaris-surface-muted);--solaris-alert-border-color: var(--solaris-border-default)}:host([data-variant=neutral][data-appearance=outline]){--solaris-alert-background: transparent;--solaris-alert-color: var(--solaris-text-default);--solaris-alert-icon-color: var(--solaris-text-muted);--solaris-alert-border-color: var(--solaris-border-default)}:host([data-variant=neutral][data-appearance=surface]){--solaris-alert-color: var(--solaris-text-default);--solaris-alert-icon-color: var(--solaris-text-muted);--solaris-alert-background: var(--solaris-surface-base);--solaris-alert-border-color: var(--solaris-border-subtle)}:host([data-variant=neutral][data-appearance=solid]){--solaris-alert-border-color: transparent;--solaris-alert-color: var(--solaris-text-strong);--solaris-alert-icon-color: var(--solaris-text-strong);--solaris-alert-background: var(--solaris-surface-base);--solaris-alert-close-color: var(--solaris-text-strong);--solaris-alert-title-color: var(--solaris-text-strong);--solaris-alert-description-color: var(--solaris-text-inverse);--solaris-alert-close-hover-background: #ffffff1f}:host([data-variant=info][data-appearance=tonal]){--solaris-alert-color: var(--solaris-info-text);--solaris-alert-icon-color: var(--solaris-info-base);--solaris-alert-background: var(--solaris-info-surface);--solaris-alert-border-color: var(--solaris-info-border)}:host([data-variant=info][data-appearance=outline]){--solaris-alert-background: transparent;--solaris-alert-color: var(--solaris-info-text);--solaris-alert-icon-color: var(--solaris-info-base);--solaris-alert-border-color: var(--solaris-info-border)}:host([data-variant=info][data-appearance=surface]){--solaris-alert-color: var(--solaris-text-default);--solaris-alert-icon-color: var(--solaris-info-base);--solaris-alert-background: var(--solaris-surface-base);--solaris-alert-border-color: var(--solaris-info-border)}:host([data-variant=info][data-appearance=solid]){--solaris-alert-border-color: transparent;--solaris-alert-color: var(--solaris-info-on-solid);--solaris-alert-background: var(--solaris-info-base);--solaris-alert-icon-color: var(--solaris-info-on-solid);--solaris-alert-close-color: var(--solaris-info-on-solid);--solaris-alert-title-color: var(--solaris-info-on-solid);--solaris-alert-description-color: var(--solaris-info-on-solid);--solaris-alert-close-hover-background: #ffffff1f}:host([data-variant=success][data-appearance=tonal]){--solaris-alert-color: var(--solaris-success-text);--solaris-alert-icon-color: var(--solaris-success-base);--solaris-alert-background: var(--solaris-success-surface);--solaris-alert-border-color: var(--solaris-success-border)}:host([data-variant=success][data-appearance=outline]){--solaris-alert-background: transparent;--solaris-alert-color: var(--solaris-success-text);--solaris-alert-icon-color: var(--solaris-success-base);--solaris-alert-border-color: var(--solaris-success-border)}:host([data-variant=success][data-appearance=surface]){--solaris-alert-color: var(--solaris-text-default);--solaris-alert-background: var(--solaris-surface-base);--solaris-alert-icon-color: var(--solaris-success-base);--solaris-alert-border-color: var(--solaris-success-border)}:host([data-variant=success][data-appearance=solid]){--solaris-alert-border-color: transparent;--solaris-alert-color: var(--solaris-success-on-solid);--solaris-alert-background: var(--solaris-success-base);--solaris-alert-icon-color: var(--solaris-success-on-solid);--solaris-alert-close-color: var(--solaris-success-on-solid);--solaris-alert-title-color: var(--solaris-success-on-solid);--solaris-alert-close-hover-background: #ffffff1f;--solaris-alert-description-color: var(--solaris-success-on-solid)}:host([data-variant=warning][data-appearance=tonal]){--solaris-alert-color: var(--solaris-warning-text);--solaris-alert-icon-color: var(--solaris-warning-base);--solaris-alert-background: var(--solaris-warning-surface);--solaris-alert-border-color: var(--solaris-warning-border)}:host([data-variant=warning][data-appearance=outline]){--solaris-alert-background: transparent;--solaris-alert-color: var(--solaris-warning-text);--solaris-alert-icon-color: var(--solaris-warning-base);--solaris-alert-border-color: var(--solaris-warning-border)}:host([data-variant=warning][data-appearance=surface]){--solaris-alert-color: var(--solaris-text-default);--solaris-alert-icon-color: var(--solaris-warning-base);--solaris-alert-background: var(--solaris-surface-base);--solaris-alert-border-color: var(--solaris-warning-border)}:host([data-variant=warning][data-appearance=solid]){--solaris-alert-border-color: transparent;--solaris-alert-color: var(--solaris-warning-on-solid);--solaris-alert-background: var(--solaris-warning-base);--solaris-alert-close-hover-background: #0000001a;--solaris-alert-icon-color: var(--solaris-warning-on-solid);--solaris-alert-close-color: var(--solaris-warning-on-solid);--solaris-alert-title-color: var(--solaris-warning-on-solid);--solaris-alert-description-color: var(--solaris-warning-on-solid)}:host([data-variant=danger][data-appearance=tonal]){--solaris-alert-color: var(--solaris-danger-text);--solaris-alert-icon-color: var(--solaris-danger-base);--solaris-alert-background: var(--solaris-danger-surface);--solaris-alert-border-color: var(--solaris-danger-border)}:host([data-variant=danger][data-appearance=outline]){--solaris-alert-background: transparent;--solaris-alert-color: var(--solaris-danger-text);--solaris-alert-icon-color: var(--solaris-danger-base);--solaris-alert-border-color: var(--solaris-danger-border)}:host([data-variant=danger][data-appearance=surface]){--solaris-alert-color: var(--solaris-text-default);--solaris-alert-icon-color: var(--solaris-danger-base);--solaris-alert-background: var(--solaris-surface-base);--solaris-alert-border-color: var(--solaris-danger-border)}:host([data-variant=danger][data-appearance=solid]){--solaris-alert-border-color: transparent;--solaris-alert-color: var(--solaris-danger-on-solid);--solaris-alert-background: var(--solaris-danger-base);--solaris-alert-icon-color: var(--solaris-danger-on-solid);--solaris-alert-close-color: var(--solaris-danger-on-solid);--solaris-alert-title-color: var(--solaris-danger-on-solid);--solaris-alert-description-color: var(--solaris-danger-on-solid);--solaris-alert-close-hover-background: #ffffff1f}:host([data-variant=custom]){--solaris-alert-color: var( --solaris-alert-custom-color, var(--solaris-text-default) );--solaris-alert-icon-color: var( --solaris-alert-custom-icon-color, var(--solaris-text-muted) );--solaris-alert-background: var( --solaris-alert-custom-background, var(--solaris-surface-base) );--solaris-alert-border-color: var( --solaris-alert-custom-border-color, var(--solaris-border-default) )}:host([data-appearance=solid]){--solaris-alert-border-width: 0}:host([data-appearance]:not([data-appearance=solid])){--solaris-alert-border-width: var(--solaris-border-width-sm)}@media(prefers-reduced-motion:reduce){.solaris-alert__close{transition:none}}:host-context([data-reduced-motion=true]) .solaris-alert__close{transition:none}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisAlertComponent, isStandalone: true, selector: "solaris-alert", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, live: { classPropertyName: "live", publicName: "live", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, hasTitle: { classPropertyName: "hasTitle", publicName: "hasTitle", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, closeLabelKey: { classPropertyName: "closeLabelKey", publicName: "closeLabelKey", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, host: { properties: { "attr.role": "liveRole()", "attr.data-variant": "variant()", "attr.aria-live": "ariaLive()", "attr.data-radius": "radius()", "attr.data-density": "effectiveDensity()", "attr.data-appearance": "appearance()", "attr.data-closable": "closable() ? \"\" : null", "attr.data-has-title": "hasTitle() ? \"\" : null" } }, ngImport: i0, template: "@if (showIcon()) {\n  <div class=\"solaris-alert__icon\">\n    <solaris-icon [name]=\"iconName()\" [decorative]=\"true\" />\n  </div>\n}\n\n<div class=\"solaris-alert__content\">\n  <ng-content />\n</div>\n\n@if (closable()) {\n  <div class=\"solaris-alert__close-slot\">\n    <button\n      type=\"button\"\n      class=\"solaris-alert__close\"\n      [attr.aria-label]=\"closeButtonLabel()\"\n      (click)=\"handleClose()\"\n    >\n      <solaris-icon name=\"x\" [decorative]=\"true\" />\n    </button>\n  </div>\n}\n", styles: [":host{--solaris-alert-icon-offset: -1px;--solaris-alert-close-offset: 0px;--solaris-alert-close-background: transparent;--solaris-alert-gap: var(--solaris-spacing-3);--solaris-alert-color: var(--solaris-info-text);--solaris-alert-radius: var(--solaris-radius-md);--solaris-alert-padding: var(--solaris-spacing-4);--solaris-alert-icon-color: var(--solaris-info-base);--solaris-alert-close-size: var(--solaris-spacing-4);--solaris-alert-content-gap: var(--solaris-spacing-1);--solaris-alert-actions-gap: var(--solaris-spacing-2);--solaris-alert-close-color: var(--solaris-text-muted);--solaris-alert-icon-size: var(--solaris-font-size-lg);--solaris-alert-background: var(--solaris-info-surface);--solaris-alert-title-color: var(--solaris-text-strong);--solaris-alert-border-color: var(--solaris-info-border);--solaris-alert-close-hover-background: #0000000f;--solaris-alert-border-width: var(--solaris-border-width-sm);--solaris-alert-close-icon-size: var(--solaris-font-size-md);--solaris-alert-description-color: var(--solaris-text-default);--solaris-alert-first-line-height: var(--solaris-line-height-md);--solaris-alert-first-line-font-size: var(--solaris-font-size-sm);display:flex;box-sizing:border-box;align-items:flex-start;gap:var(--solaris-alert-gap);color:var(--solaris-alert-color);padding:var(--solaris-alert-padding);border-radius:var(--solaris-alert-radius);background:var(--solaris-alert-background);border:var(--solaris-alert-border-width) solid var(--solaris-alert-border-color)}:host([data-has-title]){--solaris-alert-icon-offset: 0px;--solaris-alert-close-offset: 0px;--solaris-alert-first-line-height: var(--solaris-line-height-sm);--solaris-alert-first-line-font-size: var(--solaris-font-size-md)}.solaris-alert__icon{display:grid;flex-shrink:0;position:relative;place-items:center;transform:translateY(-50%);width:var(--solaris-alert-icon-size);height:var(--solaris-alert-icon-size);color:var(--solaris-alert-icon-color);line-height:var(--solaris-alert-first-line-height);font-size:var(--solaris-alert-first-line-font-size);inset-block-start:calc(.5lh + var(--solaris-alert-icon-offset))}.solaris-alert__icon solaris-icon,.solaris-alert__icon svg{display:block;width:var(--solaris-alert-icon-size);height:var(--solaris-alert-icon-size)}.solaris-alert__content{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--solaris-alert-content-gap);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}.solaris-alert__close:hover{background:var(--solaris-alert-close-hover-background)}.solaris-alert__close:focus-visible{outline-offset:2px;outline:2px solid var(--solaris-primary-base)}.solaris-alert__close{all:unset;display:grid;flex-shrink:0;cursor:pointer;position:relative;place-items:center;box-sizing:border-box;inset-block-start:.5lh;transform:translateY(-50%);width:var(--solaris-alert-close-size);height:var(--solaris-alert-close-size);border-radius:var(--solaris-radius-sm);color:var(--solaris-alert-close-color);background:var(--solaris-alert-close-background);line-height:var(--solaris-alert-first-line-height);font-size:var(--solaris-alert-first-line-font-size)}.solaris-alert__close solaris-icon,.solaris-alert__close svg{display:block;width:var(--solaris-alert-close-icon-size);height:var(--solaris-alert-close-icon-size)}::ng-deep .solaris-alert-title{margin:0;font-size:var(--solaris-font-size-md);color:var(--solaris-alert-title-color);line-height:var(--solaris-line-height-sm);font-weight:var(--solaris-font-weight-semibold)}::ng-deep .solaris-alert-description{margin:0;font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md);color:var(--solaris-alert-description-color)}::ng-deep .solaris-alert-actions{display:flex;flex-wrap:wrap;gap:var(--solaris-alert-actions-gap);margin-block-start:var(--solaris-spacing-2)}::ng-deep .solaris-alert-title+.solaris-alert-description{margin-block-start:var(--solaris-alert-content-gap)}::ng-deep .solaris-alert__content>:first-child:not(.solaris-alert-title){margin-block-start:0}:host([data-radius=sm]){--solaris-alert-radius: var(--solaris-radius-sm)}:host([data-radius=md]){--solaris-alert-radius: var(--solaris-radius-md)}:host([data-radius=lg]){--solaris-alert-radius: var(--solaris-radius-lg)}:host([data-radius=xl]){--solaris-alert-radius: var(--solaris-radius-xl)}:host([data-density=compact]){--solaris-alert-gap: var(--solaris-density-gap-md);--solaris-alert-padding: var(--solaris-density-padding-md);--solaris-alert-content-gap: var(--solaris-density-gap-md);--solaris-alert-actions-gap: var(--solaris-density-gap-md);--solaris-alert-close-size: var(--solaris-density-min-height)}:host([data-density=normal]){--solaris-alert-gap: var(--solaris-density-gap-md);--solaris-alert-padding: var(--solaris-density-padding-md);--solaris-alert-content-gap: var(--solaris-density-gap-md);--solaris-alert-actions-gap: var(--solaris-density-gap-md);--solaris-alert-close-size: var(--solaris-density-min-height)}:host([data-density=comfortable]){--solaris-alert-gap: var(--solaris-density-gap-md);--solaris-alert-padding: var(--solaris-density-padding-lg);--solaris-alert-content-gap: var(--solaris-density-gap-md);--solaris-alert-actions-gap: var(--solaris-density-gap-md);--solaris-alert-close-size: var(--solaris-density-min-height)}:host([data-variant=neutral][data-appearance=tonal]){--solaris-alert-color: var(--solaris-text-default);--solaris-alert-icon-color: var(--solaris-text-muted);--solaris-alert-background: var(--solaris-surface-muted);--solaris-alert-border-color: var(--solaris-border-default)}:host([data-variant=neutral][data-appearance=outline]){--solaris-alert-background: transparent;--solaris-alert-color: var(--solaris-text-default);--solaris-alert-icon-color: var(--solaris-text-muted);--solaris-alert-border-color: var(--solaris-border-default)}:host([data-variant=neutral][data-appearance=surface]){--solaris-alert-color: var(--solaris-text-default);--solaris-alert-icon-color: var(--solaris-text-muted);--solaris-alert-background: var(--solaris-surface-base);--solaris-alert-border-color: var(--solaris-border-subtle)}:host([data-variant=neutral][data-appearance=solid]){--solaris-alert-border-color: transparent;--solaris-alert-color: var(--solaris-text-strong);--solaris-alert-icon-color: var(--solaris-text-strong);--solaris-alert-background: var(--solaris-surface-base);--solaris-alert-close-color: var(--solaris-text-strong);--solaris-alert-title-color: var(--solaris-text-strong);--solaris-alert-description-color: var(--solaris-text-inverse);--solaris-alert-close-hover-background: #ffffff1f}:host([data-variant=info][data-appearance=tonal]){--solaris-alert-color: var(--solaris-info-text);--solaris-alert-icon-color: var(--solaris-info-base);--solaris-alert-background: var(--solaris-info-surface);--solaris-alert-border-color: var(--solaris-info-border)}:host([data-variant=info][data-appearance=outline]){--solaris-alert-background: transparent;--solaris-alert-color: var(--solaris-info-text);--solaris-alert-icon-color: var(--solaris-info-base);--solaris-alert-border-color: var(--solaris-info-border)}:host([data-variant=info][data-appearance=surface]){--solaris-alert-color: var(--solaris-text-default);--solaris-alert-icon-color: var(--solaris-info-base);--solaris-alert-background: var(--solaris-surface-base);--solaris-alert-border-color: var(--solaris-info-border)}:host([data-variant=info][data-appearance=solid]){--solaris-alert-border-color: transparent;--solaris-alert-color: var(--solaris-info-on-solid);--solaris-alert-background: var(--solaris-info-base);--solaris-alert-icon-color: var(--solaris-info-on-solid);--solaris-alert-close-color: var(--solaris-info-on-solid);--solaris-alert-title-color: var(--solaris-info-on-solid);--solaris-alert-description-color: var(--solaris-info-on-solid);--solaris-alert-close-hover-background: #ffffff1f}:host([data-variant=success][data-appearance=tonal]){--solaris-alert-color: var(--solaris-success-text);--solaris-alert-icon-color: var(--solaris-success-base);--solaris-alert-background: var(--solaris-success-surface);--solaris-alert-border-color: var(--solaris-success-border)}:host([data-variant=success][data-appearance=outline]){--solaris-alert-background: transparent;--solaris-alert-color: var(--solaris-success-text);--solaris-alert-icon-color: var(--solaris-success-base);--solaris-alert-border-color: var(--solaris-success-border)}:host([data-variant=success][data-appearance=surface]){--solaris-alert-color: var(--solaris-text-default);--solaris-alert-background: var(--solaris-surface-base);--solaris-alert-icon-color: var(--solaris-success-base);--solaris-alert-border-color: var(--solaris-success-border)}:host([data-variant=success][data-appearance=solid]){--solaris-alert-border-color: transparent;--solaris-alert-color: var(--solaris-success-on-solid);--solaris-alert-background: var(--solaris-success-base);--solaris-alert-icon-color: var(--solaris-success-on-solid);--solaris-alert-close-color: var(--solaris-success-on-solid);--solaris-alert-title-color: var(--solaris-success-on-solid);--solaris-alert-close-hover-background: #ffffff1f;--solaris-alert-description-color: var(--solaris-success-on-solid)}:host([data-variant=warning][data-appearance=tonal]){--solaris-alert-color: var(--solaris-warning-text);--solaris-alert-icon-color: var(--solaris-warning-base);--solaris-alert-background: var(--solaris-warning-surface);--solaris-alert-border-color: var(--solaris-warning-border)}:host([data-variant=warning][data-appearance=outline]){--solaris-alert-background: transparent;--solaris-alert-color: var(--solaris-warning-text);--solaris-alert-icon-color: var(--solaris-warning-base);--solaris-alert-border-color: var(--solaris-warning-border)}:host([data-variant=warning][data-appearance=surface]){--solaris-alert-color: var(--solaris-text-default);--solaris-alert-icon-color: var(--solaris-warning-base);--solaris-alert-background: var(--solaris-surface-base);--solaris-alert-border-color: var(--solaris-warning-border)}:host([data-variant=warning][data-appearance=solid]){--solaris-alert-border-color: transparent;--solaris-alert-color: var(--solaris-warning-on-solid);--solaris-alert-background: var(--solaris-warning-base);--solaris-alert-close-hover-background: #0000001a;--solaris-alert-icon-color: var(--solaris-warning-on-solid);--solaris-alert-close-color: var(--solaris-warning-on-solid);--solaris-alert-title-color: var(--solaris-warning-on-solid);--solaris-alert-description-color: var(--solaris-warning-on-solid)}:host([data-variant=danger][data-appearance=tonal]){--solaris-alert-color: var(--solaris-danger-text);--solaris-alert-icon-color: var(--solaris-danger-base);--solaris-alert-background: var(--solaris-danger-surface);--solaris-alert-border-color: var(--solaris-danger-border)}:host([data-variant=danger][data-appearance=outline]){--solaris-alert-background: transparent;--solaris-alert-color: var(--solaris-danger-text);--solaris-alert-icon-color: var(--solaris-danger-base);--solaris-alert-border-color: var(--solaris-danger-border)}:host([data-variant=danger][data-appearance=surface]){--solaris-alert-color: var(--solaris-text-default);--solaris-alert-icon-color: var(--solaris-danger-base);--solaris-alert-background: var(--solaris-surface-base);--solaris-alert-border-color: var(--solaris-danger-border)}:host([data-variant=danger][data-appearance=solid]){--solaris-alert-border-color: transparent;--solaris-alert-color: var(--solaris-danger-on-solid);--solaris-alert-background: var(--solaris-danger-base);--solaris-alert-icon-color: var(--solaris-danger-on-solid);--solaris-alert-close-color: var(--solaris-danger-on-solid);--solaris-alert-title-color: var(--solaris-danger-on-solid);--solaris-alert-description-color: var(--solaris-danger-on-solid);--solaris-alert-close-hover-background: #ffffff1f}:host([data-variant=custom]){--solaris-alert-color: var( --solaris-alert-custom-color, var(--solaris-text-default) );--solaris-alert-icon-color: var( --solaris-alert-custom-icon-color, var(--solaris-text-muted) );--solaris-alert-background: var( --solaris-alert-custom-background, var(--solaris-surface-base) );--solaris-alert-border-color: var( --solaris-alert-custom-border-color, var(--solaris-border-default) )}:host([data-appearance=solid]){--solaris-alert-border-width: 0}:host([data-appearance]:not([data-appearance=solid])){--solaris-alert-border-width: var(--solaris-border-width-sm)}@media(prefers-reduced-motion:reduce){.solaris-alert__close{transition:none}}:host-context([data-reduced-motion=true]) .solaris-alert__close{transition:none}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisAlertComponent, decorators: [{
             type: Component,
@@ -2515,7 +2640,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 // SECURITY_EXCEPTION_FILE: ElementRef.nativeElement.tagName is the standard Angular API to differentiate <button> vs <a> for correct disabled/type behavior.
 // SECURITY_EXCEPTION_FILE: ElementRef.nativeElement.getAttribute/setAttribute is the standard Angular approach to handle default button type.
 // SECURITY_EXCEPTION_FILE: ElementRef.nativeElement.setAttribute required for default <button> type behavior.
-// SECURITY_EXCEPTION_FILE: createComponent/insertBefore required to render the spinner component inside a native button host (directive has no template).
+// SECURITY_EXCEPTION_FILE: createComponent/insertBefore/appendChild required to render the spinner and icon components inside a native button host (directive has no template).
 class SolarisButtonDirective {
     appearance = input('solid', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
     color = input('neutral', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
@@ -2527,6 +2652,11 @@ class SolarisButtonDirective {
     fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
     loadingLabelKey = input(...(ngDevMode ? [undefined, { debugName: "loadingLabelKey" }] : /* istanbul ignore next */ []));
     loadingLabel = input(...(ngDevMode ? [undefined, { debugName: "loadingLabel" }] : /* istanbul ignore next */ []));
+    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
+    iconPosition = input('start', ...(ngDevMode ? [{ debugName: "iconPosition" }] : /* istanbul ignore next */ []));
+    computedIconPosition = computed(() => {
+        return this.icon() ? this.iconPosition() : null;
+    }, ...(ngDevMode ? [{ debugName: "computedIconPosition" }] : /* istanbul ignore next */ []));
     isEffectivelyDisabled = computed(() => this.disabled() || this.loading(), ...(ngDevMode ? [{ debugName: "isEffectivelyDisabled" }] : /* istanbul ignore next */ []));
     themeService = inject(SolarisThemeService);
     effectiveDensity = computed(() => {
@@ -2540,6 +2670,7 @@ class SolarisButtonDirective {
     platformId = inject(PLATFORM_ID);
     destroyRef = inject(DestroyRef);
     spinnerRef = null;
+    iconRef = null;
     resolvedLoadingLabel = computed(() => {
         const label = this.loadingLabel();
         if (label) {
@@ -2569,7 +2700,13 @@ class SolarisButtonDirective {
                 this.detachSpinner();
             }
         });
-        this.destroyRef.onDestroy(() => this.detachSpinner());
+        effect(() => {
+            this.syncIcon();
+        });
+        this.destroyRef.onDestroy(() => {
+            this.detachSpinner();
+            this.detachIcon();
+        });
     }
     attachSpinner() {
         if (this.spinnerRef || !isPlatformBrowser(this.platformId)) {
@@ -2594,6 +2731,44 @@ class SolarisButtonDirective {
         this.spinnerRef.destroy();
         this.spinnerRef = null;
     }
+    syncIcon() {
+        const name = this.icon();
+        if (!name || !isPlatformBrowser(this.platformId)) {
+            this.detachIcon();
+            return;
+        }
+        if (this.iconRef) {
+            const el = this.iconRef.location.nativeElement;
+            this.placeIcon(el);
+            return;
+        }
+        const iconRef = createComponent(SolarisIconComponent, {
+            environmentInjector: this.environmentInjector,
+        });
+        iconRef.setInput('name', name);
+        iconRef.setInput('decorative', true);
+        iconRef.changeDetectorRef.detectChanges();
+        const iconEl = iconRef.location.nativeElement;
+        iconEl.classList.add('solaris-button-icon');
+        this.iconRef = iconRef;
+        this.placeIcon(iconEl);
+    }
+    placeIcon(iconEl) {
+        const host = this.elementRef.nativeElement;
+        if (this.iconPosition() === 'end') {
+            host.appendChild(iconEl);
+        }
+        else {
+            host.insertBefore(iconEl, host.firstChild);
+        }
+    }
+    detachIcon() {
+        if (!this.iconRef) {
+            return;
+        }
+        this.iconRef.destroy();
+        this.iconRef = null;
+    }
     onClick(event) {
         if (this.isEffectivelyDisabled() && this.isAnchor) {
             event.preventDefault();
@@ -2601,7 +2776,7 @@ class SolarisButtonDirective {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", type: SolarisButtonDirective, isStandalone: true, selector: "[solaris-button]", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, loadingLabelKey: { classPropertyName: "loadingLabelKey", publicName: "loadingLabelKey", isSignal: true, isRequired: false, transformFunction: null }, loadingLabel: { classPropertyName: "loadingLabel", publicName: "loadingLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)" }, properties: { "attr.data-appearance": "appearance()", "attr.data-color": "color()", "attr.data-radius": "radius()", "attr.data-density": "effectiveDensity()", "attr.data-shape": "shape()", "attr.data-loading": "loading() ? \"\" : null", "attr.data-full-width": "fullWidth() ? \"\" : null", "attr.aria-busy": "loading() ? \"true\" : null", "attr.aria-label": "loading() ? resolvedLoadingLabel() : null", "attr.aria-disabled": "isEffectivelyDisabled() ? \"true\" : null", "attr.disabled": "isButton && isEffectivelyDisabled() ? \"\" : null", "tabindex": "isAnchor && isEffectivelyDisabled() ? \"-1\" : null" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", type: SolarisButtonDirective, isStandalone: true, selector: "[solaris-button]", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, loadingLabelKey: { classPropertyName: "loadingLabelKey", publicName: "loadingLabelKey", isSignal: true, isRequired: false, transformFunction: null }, loadingLabel: { classPropertyName: "loadingLabel", publicName: "loadingLabel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)" }, properties: { "attr.data-appearance": "appearance()", "attr.data-color": "color()", "attr.data-radius": "radius()", "attr.data-density": "effectiveDensity()", "attr.data-shape": "shape()", "attr.data-loading": "loading() ? \"\" : null", "attr.data-full-width": "fullWidth() ? \"\" : null", "attr.data-icon-position": "computedIconPosition()", "attr.aria-busy": "loading() ? \"true\" : null", "attr.aria-label": "loading() ? resolvedLoadingLabel() : null", "attr.aria-disabled": "isEffectivelyDisabled() ? \"true\" : null", "attr.disabled": "isButton && isEffectivelyDisabled() ? \"\" : null", "tabindex": "isAnchor && isEffectivelyDisabled() ? \"-1\" : null" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisButtonDirective, decorators: [{
             type: Directive,
@@ -2616,6 +2791,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '[attr.data-shape]': 'shape()',
                         '[attr.data-loading]': 'loading() ? "" : null',
                         '[attr.data-full-width]': 'fullWidth() ? "" : null',
+                        '[attr.data-icon-position]': 'computedIconPosition()',
                         '[attr.aria-busy]': 'loading() ? "true" : null',
                         '[attr.aria-label]': 'loading() ? resolvedLoadingLabel() : null',
                         '[attr.aria-disabled]': 'isEffectivelyDisabled() ? "true" : null',
@@ -2623,7 +2799,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '[tabindex]': 'isAnchor && isEffectivelyDisabled() ? "-1" : null',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], loadingLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingLabelKey", required: false }] }], loadingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingLabel", required: false }] }], onClick: [{
+        }], ctorParameters: () => [], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], loadingLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingLabelKey", required: false }] }], loadingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingLabel", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], onClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
             }] } });
@@ -2926,7 +3102,7 @@ class SolarisOptionComponent {
         this.optionInteraction.emit({ option: this, event });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisOptionComponent, isStandalone: true, selector: "solaris-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, descriptionKey: { classPropertyName: "descriptionKey", publicName: "descriptionKey", 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 }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, highlighted: { classPropertyName: "highlighted", publicName: "highlighted", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, showSelectionIndicator: { classPropertyName: "showSelectionIndicator", publicName: "showSelectionIndicator", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, optionId: { classPropertyName: "optionId", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionInteraction: "optionInteraction" }, host: { attributes: { "role": "option" }, listeners: { "click": "onClick($event)" }, properties: { "attr.aria-selected": "ariaSelected()", "attr.aria-disabled": "isEffectivelyDisabled() ? \"true\" : null", "attr.data-size": "size()", "attr.data-density": "effectiveDensity()", "attr.data-selected": "selected() ? \"\" : null", "attr.data-active": "effectiveActive() ? \"\" : null", "attr.data-highlighted": "highlighted() ? \"\" : null", "attr.data-disabled": "isEffectivelyDisabled() ? \"\" : null", "attr.data-selection-mode": "effectiveSelectionMode()", "attr.data-show-indicator": "effectiveShowSelectionIndicator() ? \"\" : null", "attr.id": "elementId()", "style.display": "internalHidden() ? \"none\" : \"\"" } }, queries: [{ propertyName: "leadingSlot", first: true, predicate: SolarisOptionLeadingDirective, descendants: true, isSignal: true }, { propertyName: "labelSlot", first: true, predicate: SolarisOptionLabelDirective, descendants: true, isSignal: true }, { propertyName: "descriptionSlot", first: true, predicate: SolarisOptionDescriptionDirective, descendants: true, isSignal: true }, { propertyName: "metaSlot", first: true, predicate: SolarisOptionMetaDirective, descendants: true, isSignal: true }, { propertyName: "trailingSlot", first: true, predicate: SolarisOptionTrailingDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"solaris-option\">\n  @if (leadingSlot()) {\n    <div class=\"solaris-option__leading\">\n      <ng-content select=\"[solaris-option-leading]\" />\n    </div>\n  }\n\n  @if (showSelectionVisual()) {\n    <div class=\"solaris-option__selection-indicator\" aria-hidden=\"true\">\n      @if (isMultiCheckSelection()) {\n        <span\n          class=\"solaris-option__checkbox\"\n          [class.solaris-option__checkbox--checked]=\"selected()\"\n        >\n          @if (selected()) {\n            <span class=\"solaris-option__checkbox-icon\">\n              <solaris-icon name=\"check\" [decorative]=\"true\" />\n            </span>\n          }\n        </span>\n      }\n    </div>\n  }\n\n  <div class=\"solaris-option__content\">\n    <div class=\"solaris-option__label\">\n      @if (labelSlot()) {\n        <ng-content select=\"[solaris-option-label]\" />\n      }\n      <ng-content />\n      @if (!labelSlot() && labelText(); as text) {\n        <span class=\"solaris-option__label-text\">{{ text }}</span>\n      }\n    </div>\n\n    @if (descriptionSlot()) {\n      <div class=\"solaris-option__description\">\n        <ng-content select=\"[solaris-option-description]\" />\n      </div>\n    } @else if (descriptionText(); as desc) {\n      <div class=\"solaris-option__description\">\n        <span class=\"solaris-option__description-text\">{{ desc }}</span>\n      </div>\n    }\n  </div>\n\n  @if (metaSlot()) {\n    <div class=\"solaris-option__meta\">\n      <ng-content select=\"[solaris-option-meta]\" />\n    </div>\n  }\n\n  @if (trailingSlot() || selected()) {\n    <div class=\"solaris-option__trailing\">\n      <ng-content select=\"[solaris-option-trailing]\" />\n      @if (selected()) {\n        <span class=\"solaris-option__trailing-check\">\n          <solaris-icon name=\"check\" [decorative]=\"true\" />\n        </span>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{--solaris-option-min-height: 24px;--solaris-option-background: transparent;--solaris-option-gap: var(--solaris-spacing-2);--solaris-option-radius: var(--solaris-radius-sm);--solaris-option-padding-y: var(--solaris-spacing-2);--solaris-option-padding-x: var(--solaris-spacing-4);--solaris-option-meta-color: var(--solaris-text-muted);--solaris-option-indicator-size: var(--solaris-spacing-5);--solaris-option-label-color: var(--solaris-text-default);--solaris-option-meta-font-size: var(--solaris-font-size-sm);--solaris-option-disabled-opacity: var(--solaris-opacity-40);--solaris-option-selected-color: var(--solaris-primary-text);--solaris-option-description-color: var(--solaris-text-muted);--solaris-option-indicator-color: var(--solaris-primary-border);--solaris-option-hover-background: var(--solaris-surface-subtle);--solaris-option-active-background: var(--solaris-surface-muted);--solaris-option-description-font-size: var(--solaris-font-size-sm);--solaris-option-selected-background: var(--solaris-primary-surface);outline:none;display:block}.solaris-option{display:flex;color:inherit;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;box-sizing:border-box;gap:var(--solaris-option-gap);border-radius:var(--solaris-option-radius);background:var(--solaris-option-background);min-height:var(--solaris-option-min-height);padding:var(--solaris-option-padding-y) var(--solaris-option-padding-x);transition:background-color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard),color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-option__leading,.solaris-option__selection-indicator{display:flex;flex-shrink:0;align-items:center;justify-content:center}.solaris-option__check,.solaris-option__checkbox{display:flex;align-items:center;box-sizing:border-box;justify-content:center;border-radius:var(--solaris-radius-sm);width:var(--solaris-option-indicator-size);height:var(--solaris-option-indicator-size)}.solaris-option__check-icon,.solaris-option__checkbox-icon{width:100%;height:100%;display:flex;align-items:center;box-sizing:border-box;justify-content:center;padding:var(--solaris-spacing-half)}.solaris-option__checkbox{background:transparent;border:var(--solaris-border-width-sm) solid var(--solaris-option-indicator-color)}.solaris-option__checkbox--checked{color:var(--solaris-primary-text);background:var(--solaris-option-indicator-color);border-color:var(--solaris-option-indicator-color)}.solaris-option__content{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--solaris-spacing-1)}.solaris-option__label{min-width:0;display:flex;align-items:center}.solaris-option__label-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--solaris-option-label-color)}.solaris-option__description{min-width:0;display:flex;align-items:center}.solaris-option__description-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--solaris-option-description-color);font-size:var(--solaris-option-description-font-size)}.solaris-option__meta{display:flex;flex-shrink:0;align-items:center;color:var(--solaris-option-meta-color);font-size:var(--solaris-option-meta-font-size)}.solaris-option__trailing{display:flex;flex-shrink:0;align-items:center;gap:var(--solaris-option-gap)}.solaris-option__trailing-check{display:flex;align-items:center;justify-content:center;color:var(--solaris-success-base);width:var(--solaris-option-indicator-size);height:var(--solaris-option-indicator-size)}:host([data-selection-mode=single]) .solaris-option__check{border-radius:50%}:host([data-selection-mode=single]) .solaris-option__check-icon{padding:var(--solaris-spacing-half)}:host([data-size=sm]) .solaris-option__label-text{font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-sm)}:host([data-size=sm]){--solaris-option-min-height: 32px;--solaris-option-gap: var(--solaris-spacing-1);--solaris-option-padding-x: var(--solaris-spacing-3);--solaris-option-indicator-size: var(--solaris-spacing-4);--solaris-option-meta-font-size: var(--solaris-font-size-xs);--solaris-option-description-font-size: var(--solaris-font-size-xs)}:host([data-size=md]) .solaris-option__label-text{font-size:var(--solaris-font-size-md);line-height:var(--solaris-line-height-md)}:host([data-size=lg]) .solaris-option__label-text{font-size:var(--solaris-font-size-lg);line-height:var(--solaris-line-height-lg)}:host([data-size=lg]){--solaris-option-min-height: 48px;--solaris-option-gap: var(--solaris-spacing-3);--solaris-option-radius: var(--solaris-radius-md);--solaris-option-padding-y: var(--solaris-spacing-3);--solaris-option-padding-x: var(--solaris-spacing-5);--solaris-option-indicator-size: var(--solaris-spacing-6)}:host([data-density=compact]){--solaris-option-min-height: auto;--solaris-option-gap: var(--solaris-spacing-2);--solaris-option-padding-x: var(--solaris-spacing-3);--solaris-option-padding-y: var(--solaris-density-padding-sm)}:host([data-density=normal]){--solaris-option-min-height: auto;--solaris-option-gap: var(--solaris-spacing-3);--solaris-option-padding-x: var(--solaris-spacing-4);--solaris-option-padding-y: var(--solaris-density-padding-sm)}:host([data-density=comfortable]){--solaris-option-gap: var(--solaris-spacing-4)}:host(:not([data-disabled])) .solaris-option:hover{background:var(--solaris-option-hover-background)}:host(:not([data-disabled])) .solaris-option:active{background:var(--solaris-option-active-background)}:host([data-selected]:not([data-disabled])) .solaris-option{color:var(--solaris-option-selected-color);background:var(--solaris-option-selected-background)}:host([data-active]:not([data-disabled])) .solaris-option{background:var(--solaris-option-active-background)}:host([data-active][data-selected]:not([data-disabled])) .solaris-option{color:var(--solaris-option-selected-color);background:var(--solaris-option-selected-background)}:host([data-highlighted]) .solaris-option{outline-offset:calc(-1 * var(--solaris-spacing-1) / 2);outline:var(--solaris-border-width-sm) solid var(--solaris-primary-base)}:host([data-disabled]) .solaris-option{cursor:not-allowed;opacity:var(--solaris-option-disabled-opacity)}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisOptionComponent, isStandalone: true, selector: "solaris-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, descriptionKey: { classPropertyName: "descriptionKey", publicName: "descriptionKey", 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 }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, highlighted: { classPropertyName: "highlighted", publicName: "highlighted", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, showSelectionIndicator: { classPropertyName: "showSelectionIndicator", publicName: "showSelectionIndicator", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, optionId: { classPropertyName: "optionId", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionInteraction: "optionInteraction" }, host: { attributes: { "role": "option" }, listeners: { "click": "onClick($event)" }, properties: { "attr.aria-selected": "ariaSelected()", "attr.aria-disabled": "isEffectivelyDisabled() ? \"true\" : null", "attr.data-size": "size()", "attr.data-density": "effectiveDensity()", "attr.data-selected": "selected() ? \"\" : null", "attr.data-active": "effectiveActive() ? \"\" : null", "attr.data-highlighted": "highlighted() ? \"\" : null", "attr.data-disabled": "isEffectivelyDisabled() ? \"\" : null", "attr.data-selection-mode": "effectiveSelectionMode()", "attr.data-show-indicator": "effectiveShowSelectionIndicator() ? \"\" : null", "attr.id": "elementId()", "style.display": "internalHidden() ? \"none\" : \"\"" } }, queries: [{ propertyName: "leadingSlot", first: true, predicate: SolarisOptionLeadingDirective, descendants: true, isSignal: true }, { propertyName: "labelSlot", first: true, predicate: SolarisOptionLabelDirective, descendants: true, isSignal: true }, { propertyName: "descriptionSlot", first: true, predicate: SolarisOptionDescriptionDirective, descendants: true, isSignal: true }, { propertyName: "metaSlot", first: true, predicate: SolarisOptionMetaDirective, descendants: true, isSignal: true }, { propertyName: "trailingSlot", first: true, predicate: SolarisOptionTrailingDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"solaris-option\">\n  @if (leadingSlot()) {\n    <div class=\"solaris-option__leading\">\n      <ng-content select=\"[solaris-option-leading]\" />\n    </div>\n  }\n\n  @if (showSelectionVisual()) {\n    <div class=\"solaris-option__selection-indicator\" aria-hidden=\"true\">\n      @if (isMultiCheckSelection()) {\n        <span\n          class=\"solaris-option__checkbox\"\n          [class.solaris-option__checkbox--checked]=\"selected()\"\n        >\n          @if (selected()) {\n            <span class=\"solaris-option__checkbox-icon\">\n              <solaris-icon name=\"check\" [decorative]=\"true\" />\n            </span>\n          }\n        </span>\n      }\n    </div>\n  }\n\n  <div class=\"solaris-option__content\">\n    <div class=\"solaris-option__label\">\n      @if (labelSlot()) {\n        <ng-content select=\"[solaris-option-label]\" />\n      }\n      <ng-content />\n      @if (!labelSlot() && labelText(); as text) {\n        <span class=\"solaris-option__label-text\">{{ text }}</span>\n      }\n    </div>\n\n    @if (descriptionSlot()) {\n      <div class=\"solaris-option__description\">\n        <ng-content select=\"[solaris-option-description]\" />\n      </div>\n    } @else if (descriptionText(); as desc) {\n      <div class=\"solaris-option__description\">\n        <span class=\"solaris-option__description-text\">{{ desc }}</span>\n      </div>\n    }\n  </div>\n\n  @if (metaSlot()) {\n    <div class=\"solaris-option__meta\">\n      <ng-content select=\"[solaris-option-meta]\" />\n    </div>\n  }\n\n  @if (trailingSlot() || selected()) {\n    <div class=\"solaris-option__trailing\">\n      <ng-content select=\"[solaris-option-trailing]\" />\n      @if (selected()) {\n        <span class=\"solaris-option__trailing-check\">\n          <solaris-icon name=\"check\" [decorative]=\"true\" />\n        </span>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{--solaris-option-min-height: 24px;--solaris-option-background: transparent;--solaris-option-gap: var(--solaris-spacing-2);--solaris-option-radius: var(--solaris-radius-sm);--solaris-option-padding-y: var(--solaris-spacing-2);--solaris-option-padding-x: var(--solaris-spacing-4);--solaris-option-meta-color: var(--solaris-text-muted);--solaris-option-indicator-size: var(--solaris-spacing-5);--solaris-option-label-color: var(--solaris-text-default);--solaris-option-meta-font-size: var(--solaris-font-size-sm);--solaris-option-disabled-opacity: var(--solaris-opacity-40);--solaris-option-selected-color: var(--solaris-primary-text);--solaris-option-description-color: var(--solaris-text-muted);--solaris-option-indicator-color: var(--solaris-primary-border);--solaris-option-hover-background: var(--solaris-surface-subtle);--solaris-option-active-background: var(--solaris-surface-muted);--solaris-option-description-font-size: var(--solaris-font-size-sm);--solaris-option-selected-background: var(--solaris-primary-surface);outline:none;display:block}.solaris-option{display:flex;color:inherit;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;box-sizing:border-box;gap:var(--solaris-option-gap);border-radius:var(--solaris-option-radius);background:var(--solaris-option-background);min-height:var(--solaris-option-min-height);padding:var(--solaris-option-padding-y) var(--solaris-option-padding-x);transition:background-color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard),color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-option__leading,.solaris-option__selection-indicator{display:flex;flex-shrink:0;align-items:center;justify-content:center}.solaris-option__check,.solaris-option__checkbox{display:flex;align-items:center;box-sizing:border-box;justify-content:center;border-radius:var(--solaris-radius-sm);width:var(--solaris-option-indicator-size);height:var(--solaris-option-indicator-size)}.solaris-option__check-icon,.solaris-option__checkbox-icon{width:100%;height:100%;display:flex;align-items:center;box-sizing:border-box;justify-content:center;padding:var(--solaris-spacing-half)}.solaris-option__checkbox{background:transparent;border:var(--solaris-border-width-sm) solid var(--solaris-option-indicator-color)}.solaris-option__checkbox--checked{color:var(--solaris-primary-text);background:var(--solaris-option-indicator-color);border-color:var(--solaris-option-indicator-color)}.solaris-option__content{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--solaris-spacing-1)}.solaris-option__label{min-width:0;display:flex;align-items:center}.solaris-option__label-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--solaris-option-label-color)}.solaris-option__description{min-width:0;display:flex;align-items:center}.solaris-option__description-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--solaris-option-description-color);font-size:var(--solaris-option-description-font-size)}.solaris-option__meta{display:flex;flex-shrink:0;align-items:center;color:var(--solaris-option-meta-color);font-size:var(--solaris-option-meta-font-size)}.solaris-option__trailing{display:flex;flex-shrink:0;align-items:center;gap:var(--solaris-option-gap)}.solaris-option__trailing-check{display:flex;align-items:center;justify-content:center;color:var(--solaris-success-base);width:var(--solaris-option-indicator-size);height:var(--solaris-option-indicator-size)}:host([data-selection-mode=single]) .solaris-option__check{border-radius:50%}:host([data-selection-mode=single]) .solaris-option__check-icon{padding:var(--solaris-spacing-half)}:host([data-size=sm]) .solaris-option__label-text{font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-sm)}:host([data-size=sm]){--solaris-option-min-height: 32px;--solaris-option-gap: var(--solaris-spacing-1);--solaris-option-padding-x: var(--solaris-spacing-3);--solaris-option-indicator-size: var(--solaris-spacing-4);--solaris-option-meta-font-size: var(--solaris-font-size-xs);--solaris-option-description-font-size: var(--solaris-font-size-xs)}:host([data-size=md]) .solaris-option__label-text{font-size:var(--solaris-font-size-md);line-height:var(--solaris-line-height-md)}:host([data-size=lg]) .solaris-option__label-text{font-size:var(--solaris-font-size-lg);line-height:var(--solaris-line-height-lg)}:host([data-size=lg]){--solaris-option-min-height: 48px;--solaris-option-gap: var(--solaris-spacing-3);--solaris-option-radius: var(--solaris-radius-md);--solaris-option-padding-y: var(--solaris-spacing-3);--solaris-option-padding-x: var(--solaris-spacing-5);--solaris-option-indicator-size: var(--solaris-spacing-6)}:host([data-density=compact]){--solaris-option-min-height: auto;--solaris-option-gap: var(--solaris-spacing-2);--solaris-option-padding-x: var(--solaris-spacing-3);--solaris-option-padding-y: var(--solaris-density-padding-sm)}:host([data-density=normal]){--solaris-option-min-height: auto;--solaris-option-gap: var(--solaris-spacing-3);--solaris-option-padding-x: var(--solaris-spacing-4);--solaris-option-padding-y: var(--solaris-density-padding-sm)}:host([data-density=comfortable]){--solaris-option-gap: var(--solaris-spacing-4)}:host(:not([data-disabled])) .solaris-option:hover{background:var(--solaris-option-hover-background)}:host(:not([data-disabled])) .solaris-option:active{background:var(--solaris-option-active-background)}:host([data-selected]:not([data-disabled])) .solaris-option{color:var(--solaris-option-selected-color);background:var(--solaris-option-selected-background)}:host([data-active]:not([data-disabled])) .solaris-option{background:var(--solaris-option-active-background)}:host([data-active][data-selected]:not([data-disabled])) .solaris-option{color:var(--solaris-option-selected-color);background:var(--solaris-option-selected-background)}:host([data-highlighted]) .solaris-option{outline-offset:calc(-1 * var(--solaris-spacing-1) / 2);outline:var(--solaris-border-width-sm) solid var(--solaris-primary-base)}:host([data-disabled]) .solaris-option{cursor:not-allowed;opacity:var(--solaris-option-disabled-opacity)}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisOptionComponent, decorators: [{
             type: Component,
@@ -3057,6 +3233,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 }]
         }] });
 
+class SolarisFormLabelActionDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisFormLabelActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: SolarisFormLabelActionDirective, isStandalone: true, selector: "[solaris-form-label-action]", host: { classAttribute: "solaris-form-label-action" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisFormLabelActionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[solaris-form-label-action]',
+                    standalone: true,
+                    host: {
+                        class: 'solaris-form-label-action',
+                    },
+                }]
+        }] });
+
 class SolarisFormControl {
 }
 
@@ -3160,6 +3351,7 @@ class SolarisFormFieldComponent {
     projectedError = contentChild(SolarisFormErrorComponent, ...(ngDevMode ? [{ debugName: "projectedError" }] : /* istanbul ignore next */ []));
     projectedPrefix = contentChild(SolarisFormPrefixDirective, ...(ngDevMode ? [{ debugName: "projectedPrefix" }] : /* istanbul ignore next */ []));
     projectedSuffix = contentChild(SolarisFormSuffixDirective, ...(ngDevMode ? [{ debugName: "projectedSuffix" }] : /* istanbul ignore next */ []));
+    projectedLabelAction = contentChild(SolarisFormLabelActionDirective, ...(ngDevMode ? [{ debugName: "projectedLabelAction" }] : /* istanbul ignore next */ []));
     formControl = contentChild(SolarisFormControl, ...(ngDevMode ? [{ debugName: "formControl" }] : /* istanbul ignore next */ []));
     formControlDirective = contentChild(FormControlDirective, ...(ngDevMode ? [{ debugName: "formControlDirective" }] : /* istanbul ignore next */ []));
     formControlName = contentChild(FormControlName, ...(ngDevMode ? [{ debugName: "formControlName" }] : /* istanbul ignore next */ []));
@@ -3206,6 +3398,7 @@ class SolarisFormFieldComponent {
     hasProjectedLabel = computed(() => !!this.projectedLabel(), ...(ngDevMode ? [{ debugName: "hasProjectedLabel" }] : /* istanbul ignore next */ []));
     hasProjectedHint = computed(() => !!this.projectedHint(), ...(ngDevMode ? [{ debugName: "hasProjectedHint" }] : /* istanbul ignore next */ []));
     hasProjectedError = computed(() => !!this.projectedError(), ...(ngDevMode ? [{ debugName: "hasProjectedError" }] : /* istanbul ignore next */ []));
+    hasProjectedLabelAction = computed(() => !!this.projectedLabelAction(), ...(ngDevMode ? [{ debugName: "hasProjectedLabelAction" }] : /* istanbul ignore next */ []));
     hasPrefixInput = input(undefined, { ...(ngDevMode ? { debugName: "hasPrefixInput" } : /* istanbul ignore next */ {}), alias: 'hasPrefix' });
     hasSuffixInput = input(undefined, { ...(ngDevMode ? { debugName: "hasSuffixInput" } : /* istanbul ignore next */ {}), alias: 'hasSuffix' });
     prefix = input(...(ngDevMode ? [undefined, { debugName: "prefix" }] : /* istanbul ignore next */ []));
@@ -3520,7 +3713,7 @@ class SolarisFormFieldComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisFormFieldComponent, isStandalone: true, selector: "solaris-form-field", inputs: { hintKey: { classPropertyName: "hintKey", publicName: "hintKey", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorKey: { classPropertyName: "errorKey", publicName: "errorKey", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, optionalLabel: { classPropertyName: "optionalLabel", publicName: "optionalLabel", isSignal: true, isRequired: false, transformFunction: null }, requiredLabel: { classPropertyName: "requiredLabel", publicName: "requiredLabel", isSignal: true, isRequired: false, transformFunction: null }, optionalLabelKey: { classPropertyName: "optionalLabelKey", publicName: "optionalLabelKey", isSignal: true, isRequired: false, transformFunction: null }, requiredLabelKey: { classPropertyName: "requiredLabelKey", publicName: "requiredLabelKey", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", 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 }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, hasPrefixInput: { classPropertyName: "hasPrefixInput", publicName: "hasPrefix", isSignal: true, isRequired: false, transformFunction: null }, hasSuffixInput: { classPropertyName: "hasSuffixInput", publicName: "hasSuffix", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-radius": "radius()", "attr.data-bwignore": "\"true\"", "attr.data-appearance": "appearance()", "attr.data-density": "effectiveDensity()", "attr.data-control-type": "controlType()", "attr.data-control-resize": "controlResize()", "attr.data-invalid": "isInvalid() ? \"\" : null", "attr.data-focused": "isFocused() ? \"\" : null", "attr.data-has-prefix": "effectiveHasPrefix() ? \"\" : null", "attr.data-has-suffix": "effectiveHasSuffix() ? \"\" : null", "attr.data-disabled": "isEffectivelyDisabled() ? \"\" : null", "attr.data-readonly": "isEffectivelyReadonly() ? \"\" : null" } }, queries: [{ propertyName: "projectedLabel", first: true, predicate: SolarisFormLabelComponent, descendants: true, isSignal: true }, { propertyName: "projectedHint", first: true, predicate: SolarisFormHintComponent, descendants: true, isSignal: true }, { propertyName: "projectedError", first: true, predicate: SolarisFormErrorComponent, descendants: true, isSignal: true }, { propertyName: "projectedPrefix", first: true, predicate: SolarisFormPrefixDirective, descendants: true, isSignal: true }, { propertyName: "projectedSuffix", first: true, predicate: SolarisFormSuffixDirective, descendants: true, isSignal: true }, { propertyName: "formControl", first: true, predicate: SolarisFormControl, descendants: true, isSignal: true }, { propertyName: "formControlDirective", first: true, predicate: FormControlDirective, descendants: true, isSignal: true }, { propertyName: "formControlName", first: true, predicate: FormControlName, descendants: true, isSignal: true }, { propertyName: "ngModelDir", first: true, predicate: NgModel, descendants: true, isSignal: true }], ngImport: i0, template: "@if (labelText() || hasProjectedLabel()) {\n  <div class=\"solaris-form-field__label-row\">\n    @if (hasProjectedLabel()) {\n      <ng-content select=\"solaris-form-label\" />\n    } @else if (labelText()) {\n      <label\n        class=\"solaris-form-field__label\"\n        [id]=\"labelId\"\n        [for]=\"controlId ?? undefined\"\n      >\n        {{ labelText() }}\n      </label>\n    }\n    @if (optional()) {\n      <span\n        class=\"solaris-form-field__optional-marker\"\n        [attr.aria-label]=\"optionalLabelText()\"\n      >\n        {{ optionalLabelText() }}\n      </span>\n    }\n    @if (showCharacterCounter()) {\n      <span\n        class=\"solaris-form-field__character-counter\"\n        aria-live=\"polite\"\n        [attr.aria-label]=\"characterCounterText()\"\n        [attr.data-severity]=\"characterCounterSeverity()\"\n      >\n        {{ characterCounterText() }}\n      </span>\n    }\n  </div>\n}\n\n<div class=\"solaris-form-field__control-wrapper\">\n  <span\n    class=\"solaris-form-field__affix solaris-form-field__affix--prefix\"\n    [attr.data-empty]=\"effectiveHasPrefix() ? null : ''\"\n  >\n    @if (prefix(); as prefixName) {\n      <span solaris-form-prefix>\n        <solaris-icon [name]=\"prefixName\" [decorative]=\"true\" />\n      </span>\n    }\n    <ng-content select=\"[solaris-form-prefix]\" />\n  </span>\n\n  <div class=\"solaris-form-field__control\">\n    <ng-content />\n  </div>\n\n  <span\n    class=\"solaris-form-field__affix solaris-form-field__affix--suffix\"\n    [attr.data-empty]=\"effectiveHasSuffix() ? null : ''\"\n  >\n    @if (suffix(); as suffixName) {\n      <span solaris-form-suffix>\n        <solaris-icon [name]=\"suffixName\" [decorative]=\"true\" />\n      </span>\n    }\n    <ng-content select=\"[solaris-form-suffix]\" />\n  </span>\n</div>\n\n@if (showError() || showHint()) {\n  <div class=\"solaris-form-field__message-row\">\n    @if (showError()) {\n      <div class=\"solaris-form-field__error\" [id]=\"errorId\" role=\"alert\">\n        @if (hasProjectedError()) {\n          <ng-content select=\"solaris-form-error\" />\n        } @else {\n          {{ errorText() }}\n        }\n      </div>\n    } @else if (showHint()) {\n      <div class=\"solaris-form-field__hint\" [id]=\"hintId\">\n        @if (hasProjectedHint()) {\n          <ng-content select=\"solaris-form-hint\" />\n        } @else {\n          {{ hintText() }}\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [":host{--solaris-form-field-focus-ring-width: 2px;--solaris-form-field-control-color: initial;--solaris-form-field-control-radius: initial;--solaris-form-field-hint-color: var(--solaris-text-muted);--solaris-form-field-control-gap: var(--solaris-spacing-2);--solaris-form-field-font-size: var(--solaris-font-size-md);--solaris-form-field-error-color: var(--solaris-danger-text);--solaris-form-field-prefix-color: var(--solaris-text-muted);--solaris-form-field-suffix-color: var(--solaris-text-muted);--solaris-form-field-label-color: var(--solaris-text-default);--solaris-form-field-control-height: var(--solaris-spacing-10);--solaris-form-field-optional-color: var(--solaris-text-muted);--solaris-form-field-hint-font-size: var(--solaris-font-size-xs);--solaris-form-field-disabled-opacity: var(--solaris-opacity-50);--solaris-form-field-control-padding-x: var(--solaris-spacing-3);--solaris-form-field-label-font-size: var(--solaris-font-size-sm);--solaris-form-field-error-font-size: var(--solaris-font-size-xs);--solaris-form-field-message-margin-top: var(--solaris-spacing-1);--solaris-form-field-focus-ring-color: var(--solaris-primary-base);--solaris-form-field-label-margin-bottom: var(--solaris-spacing-1);--solaris-form-field-error-border-color: var(--solaris-danger-base);--solaris-form-field-optional-font-size: var(--solaris-font-size-xs);--solaris-form-field-control-background: var(--solaris-surface-base);--solaris-form-field-readonly-background: var(--solaris-surface-muted);--solaris-form-field-control-border-color: var(--solaris-border-subtle);--solaris-form-field-label-font-weight: var(--solaris-font-weight-medium);--solaris-form-field-control-border-width: var(--solaris-border-width-sm);display:block;box-sizing:border-box;font-size:var(--solaris-form-field-font-size);font-family:var(--solaris-font-family-sans),system-ui}.solaris-form-field__label-row{display:flex;align-items:center;gap:var(--solaris-spacing-2);margin-bottom:var(--solaris-form-field-label-margin-bottom)}.solaris-form-field__label,::ng-deep .solaris-form-label{cursor:pointer;display:inline-block;color:var(--solaris-form-field-label-color);font-size:var(--solaris-form-field-label-font-size);font-weight:var(--solaris-form-field-label-font-weight)}.solaris-form-field__optional-marker{white-space:nowrap;color:var(--solaris-form-field-optional-color);font-size:var(--solaris-form-field-optional-font-size)}.solaris-form-field__character-counter{margin-left:auto;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--solaris-form-field-optional-color);font-size:var(--solaris-form-field-optional-font-size);transition:color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}.solaris-form-field__character-counter[data-severity=warning]{color:var(--solaris-warning-text)}.solaris-form-field__character-counter[data-severity=danger]{color:var(--solaris-danger-text)}.solaris-form-field__control-wrapper{display:flex;position:relative;align-items:stretch;box-sizing:border-box;gap:var(--solaris-form-field-control-gap);border-style:var(--solaris-border-style-default);min-height:var(--solaris-form-field-control-height);padding:0 var(--solaris-form-field-control-padding-x);border-radius:var(--solaris-form-field-control-radius);background:var(--solaris-form-field-control-background);border-width:var(--solaris-form-field-control-border-width);border-color:var(--solaris-form-field-control-border-color);transition:border-color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard),box-shadow var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}:host([data-has-prefix]) .solaris-form-field__control-wrapper{padding-left:0}.solaris-form-field__control-wrapper[data-connected-side=bottom]{border-bottom-left-radius:0;border-bottom-right-radius:0}.solaris-form-field__control-wrapper[data-connected-side=top]{border-top-left-radius:0;border-top-right-radius:0}.solaris-form-field__control{flex:1;min-width:0;display:flex;align-items:center}.solaris-form-field__affix{min-width:0;display:flex;flex:0 0 auto;line-height:var(--solaris-line-height-none);cursor:default;align-self:stretch;align-items:center;box-sizing:border-box;justify-content:center}.solaris-form-field__affix[data-empty]{display:none}.solaris-form-field__affix--prefix{color:var(--solaris-form-field-prefix-color);inline-size:var(--solaris-form-field-control-height);border-inline-end:var(--solaris-border-width-sm) solid var(--solaris-border-subtle);transition:color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}.solaris-form-field__affix--suffix{color:var(--solaris-form-field-suffix-color);transition:color var(--solaris-motion-duration-slow) var(--solaris-motion-easing-standard)}.solaris-form-field__affix--prefix:hover,.solaris-form-field__affix--suffix:hover{color:var(--solaris-text-default)}:host ::ng-deep .solaris-form-prefix,:host ::ng-deep .solaris-form-suffix{border:0;flex:0 0 auto;color:inherit;line-height:var(--solaris-line-height-none);cursor:inherit;align-self:auto;align-items:center;display:inline-flex;justify-content:center}:host ::ng-deep solaris-icon.solaris-form-prefix,:host ::ng-deep solaris-icon.solaris-form-suffix,:host ::ng-deep .solaris-form-prefix solaris-icon,:host ::ng-deep .solaris-form-suffix solaris-icon{flex:0 0 auto;color:inherit;block-size:1em;inline-size:1em;font-size:var(--solaris-density-font-size);transition:color var(--solaris-motion-duration-slow) var(--solaris-motion-easing-standard)}:host([data-control-type=textarea]){min-width:0}:host([data-control-type=textarea]) .solaris-form-field__control-wrapper{padding-right:0;overflow:visible}:host([data-control-type=textarea]) .solaris-form-field__control{overflow:visible}:host([data-control-type=textarea][data-control-resize=horizontal]) .solaris-form-field__control-wrapper{width:100%;min-width:128px;overflow:hidden;resize:horizontal}:host([data-control-type=textarea][data-control-resize=horizontal]) .solaris-form-field__control{min-width:0}:host([data-control-type=textarea][data-control-resize=horizontal]) ::ng-deep textarea[solaris-textarea]{width:100%;min-width:0;resize:none;display:block}:host([data-control-type=textarea][data-control-resize=both]) .solaris-form-field__control-wrapper{width:100%;resize:both;min-width:128px;overflow:hidden;align-items:stretch;min-height:var(--solaris-form-field-control-height)}:host([data-control-type=textarea][data-control-resize=both]) .solaris-form-field__control{min-width:0;min-height:0;overflow:hidden;align-items:stretch}:host([data-control-type=textarea][data-control-resize=both]) ::ng-deep textarea[solaris-textarea]{width:100%;height:100%;min-width:0;resize:none;min-height:0;display:block;flex:1 1 auto}.solaris-form-field__message-row{margin-top:var(--solaris-form-field-message-margin-top)}.solaris-form-field__hint{margin:var(--solaris-spacing-1);color:var(--solaris-form-field-hint-color);font-size:var(--solaris-form-field-hint-font-size)}.solaris-form-field__error{margin:var(--solaris-spacing-1);color:var(--solaris-form-field-error-color);font-size:var(--solaris-form-field-error-font-size)}:host([data-density=compact]){--solaris-form-field-control-gap: var(--solaris-spacing-2);--solaris-form-field-font-size: var(--solaris-density-font-size);--solaris-form-field-control-padding-x: var(--solaris-spacing-2);--solaris-form-field-hint-font-size: var(--solaris-font-size-xs);--solaris-form-field-label-font-size: var(--solaris-font-size-sm);--solaris-form-field-message-margin-top: var(--solaris-spacing-1);--solaris-form-field-label-margin-bottom: var(--solaris-spacing-1);--solaris-form-field-optional-font-size: var(--solaris-font-size-xs);--solaris-form-field-control-height: var(--solaris-density-min-height);--solaris-form-field-error-font-size: var(--solaris-font-size-xs)}:host([data-density=normal]){--solaris-form-field-control-gap: var(--solaris-spacing-2);--solaris-form-field-font-size: var(--solaris-density-font-size);--solaris-form-field-control-padding-x: var(--solaris-spacing-3);--solaris-form-field-hint-font-size: var(--solaris-font-size-sm);--solaris-form-field-error-font-size: var(--solaris-font-size-sm);--solaris-form-field-label-font-size: var(--solaris-font-size-sm);--solaris-form-field-message-margin-top: var(--solaris-spacing-1);--solaris-form-field-label-margin-bottom: var(--solaris-spacing-1);--solaris-form-field-optional-font-size: var(--solaris-font-size-sm);--solaris-form-field-control-height: var(--solaris-density-min-height)}:host([data-density=comfortable]){--solaris-form-field-control-gap: var(--solaris-spacing-2);--solaris-form-field-font-size: var(--solaris-density-font-size);--solaris-form-field-control-padding-x: var(--solaris-spacing-3);--solaris-form-field-hint-font-size: var(--solaris-font-size-md);--solaris-form-field-message-margin-top: var(--solaris-spacing-2);--solaris-form-field-error-font-size: var(--solaris-font-size-md);--solaris-form-field-label-margin-bottom: var(--solaris-spacing-2);--solaris-form-field-optional-font-size: var(--solaris-font-size-md);--solaris-form-field-control-height: var(--solaris-density-min-height)}:host([data-radius=none]){--solaris-form-field-control-radius: var(--solaris-radius-none)}:host([data-radius=sm]){--solaris-form-field-control-radius: var(--solaris-radius-sm)}:host([data-radius=md]){--solaris-form-field-control-radius: var(--solaris-radius-md)}:host([data-radius=lg]){--solaris-form-field-control-radius: var(--solaris-radius-lg)}:host([data-focused]){--solaris-form-field-control-border-color: var( --solaris-form-field-focus-ring-color )}:host([data-disabled]){--solaris-form-field-control-color: var( --solaris-text-disabled, var(--solaris-text-muted) );--solaris-form-field-control-background: var( --solaris-surface-disabled, var(--solaris-surface-muted) );cursor:not-allowed;opacity:var(--solaris-form-field-disabled-opacity)}:host([data-readonly]){--solaris-form-field-control-border-color: var(--solaris-border-subtle);--solaris-form-field-control-background: var( --solaris-form-field-readonly-background )}:host([data-appearance=outline]),:host([data-appearance=surface]),:host([data-appearance=filled]){--solaris-form-field-focus-ring-width: 2px;--solaris-form-field-hint-color: var(--solaris-text-muted);--solaris-form-field-prefix-color: var(--solaris-text-muted);--solaris-form-field-suffix-color: var(--solaris-text-muted);--solaris-form-field-error-color: var(--solaris-danger-text);--solaris-form-field-label-color: var(--solaris-text-default);--solaris-form-field-optional-color: var(--solaris-text-muted);--solaris-form-field-disabled-opacity: var(--solaris-opacity-50);--solaris-form-field-focus-ring-color: var(--solaris-primary-base);--solaris-form-field-error-border-color: var(--solaris-danger-base);--solaris-form-field-label-font-weight: var(--solaris-font-weight-medium)}:host([data-appearance=outline]){--solaris-form-field-control-background: var(--solaris-surface-base);--solaris-form-field-readonly-background: var(--solaris-surface-muted);--solaris-form-field-control-border-color: var(--solaris-border-subtle);--solaris-form-field-control-border-width: var(--solaris-border-width-sm)}:host([data-appearance=surface]){--solaris-form-field-control-border-width: 0;--solaris-form-field-readonly-background: var(--solaris-surface-base);--solaris-form-field-control-background: var(--solaris-surface-subtle);--solaris-form-field-control-border-color: var(--solaris-border-subtle)}:host([data-appearance=filled]){--solaris-form-field-control-background: var(--solaris-surface-subtle);--solaris-form-field-readonly-background: var(--solaris-surface-muted);--solaris-form-field-control-border-color: var(--solaris-border-subtle);--solaris-form-field-control-border-width: var(--solaris-border-width-sm)}:host([data-invalid]){--solaris-form-field-control-border-color: var( --solaris-form-field-error-border-color )}:host([data-invalid][data-focused]){--solaris-form-field-control-border-color: var( --solaris-form-field-error-border-color );outline-color:var(--solaris-form-field-error-border-color)}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative"] }, { kind: "directive", type: SolarisFormPrefixDirective, selector: "[solaris-form-prefix]" }, { kind: "directive", type: SolarisFormSuffixDirective, selector: "[solaris-form-suffix]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisFormFieldComponent, isStandalone: true, selector: "solaris-form-field", inputs: { hintKey: { classPropertyName: "hintKey", publicName: "hintKey", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorKey: { classPropertyName: "errorKey", publicName: "errorKey", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, optionalLabel: { classPropertyName: "optionalLabel", publicName: "optionalLabel", isSignal: true, isRequired: false, transformFunction: null }, requiredLabel: { classPropertyName: "requiredLabel", publicName: "requiredLabel", isSignal: true, isRequired: false, transformFunction: null }, optionalLabelKey: { classPropertyName: "optionalLabelKey", publicName: "optionalLabelKey", isSignal: true, isRequired: false, transformFunction: null }, requiredLabelKey: { classPropertyName: "requiredLabelKey", publicName: "requiredLabelKey", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", 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 }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, hasPrefixInput: { classPropertyName: "hasPrefixInput", publicName: "hasPrefix", isSignal: true, isRequired: false, transformFunction: null }, hasSuffixInput: { classPropertyName: "hasSuffixInput", publicName: "hasSuffix", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-radius": "radius()", "attr.data-bwignore": "\"true\"", "attr.data-appearance": "appearance()", "attr.data-density": "effectiveDensity()", "attr.data-control-type": "controlType()", "attr.data-control-resize": "controlResize()", "attr.data-invalid": "isInvalid() ? \"\" : null", "attr.data-focused": "isFocused() ? \"\" : null", "attr.data-has-prefix": "effectiveHasPrefix() ? \"\" : null", "attr.data-has-suffix": "effectiveHasSuffix() ? \"\" : null", "attr.data-disabled": "isEffectivelyDisabled() ? \"\" : null", "attr.data-readonly": "isEffectivelyReadonly() ? \"\" : null" } }, queries: [{ propertyName: "projectedLabel", first: true, predicate: SolarisFormLabelComponent, descendants: true, isSignal: true }, { propertyName: "projectedHint", first: true, predicate: SolarisFormHintComponent, descendants: true, isSignal: true }, { propertyName: "projectedError", first: true, predicate: SolarisFormErrorComponent, descendants: true, isSignal: true }, { propertyName: "projectedPrefix", first: true, predicate: SolarisFormPrefixDirective, descendants: true, isSignal: true }, { propertyName: "projectedSuffix", first: true, predicate: SolarisFormSuffixDirective, descendants: true, isSignal: true }, { propertyName: "projectedLabelAction", first: true, predicate: SolarisFormLabelActionDirective, descendants: true, isSignal: true }, { propertyName: "formControl", first: true, predicate: SolarisFormControl, descendants: true, isSignal: true }, { propertyName: "formControlDirective", first: true, predicate: FormControlDirective, descendants: true, isSignal: true }, { propertyName: "formControlName", first: true, predicate: FormControlName, descendants: true, isSignal: true }, { propertyName: "ngModelDir", first: true, predicate: NgModel, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"solaris-form-field__label-row\"\n  [class.solaris-form-field__label-row--empty]=\"\n    !labelText() && !hasProjectedLabel() && !hasProjectedLabelAction()\n  \"\n>\n  @if (hasProjectedLabel()) {\n    <ng-content select=\"solaris-form-label\" />\n  } @else if (labelText()) {\n    <label\n      class=\"solaris-form-field__label\"\n      [id]=\"labelId\"\n      [for]=\"controlId ?? undefined\"\n    >\n      {{ labelText() }}\n    </label>\n  }\n  @if (optional()) {\n    <span\n      class=\"solaris-form-field__optional-marker\"\n      [attr.aria-label]=\"optionalLabelText()\"\n    >\n      {{ optionalLabelText() }}\n    </span>\n  }\n  @if (showCharacterCounter()) {\n    <span\n      class=\"solaris-form-field__character-counter\"\n      aria-live=\"polite\"\n      [attr.aria-label]=\"characterCounterText()\"\n      [attr.data-severity]=\"characterCounterSeverity()\"\n    >\n      {{ characterCounterText() }}\n    </span>\n  }\n  <ng-content select=\"[solaris-form-label-action]\" />\n</div>\n\n<div class=\"solaris-form-field__control-wrapper\">\n  <span\n    class=\"solaris-form-field__affix solaris-form-field__affix--prefix\"\n    [attr.data-empty]=\"effectiveHasPrefix() ? null : ''\"\n  >\n    @if (prefix(); as prefixName) {\n      <span solaris-form-prefix>\n        <solaris-icon [name]=\"prefixName\" [decorative]=\"true\" />\n      </span>\n    }\n    <ng-content select=\"[solaris-form-prefix]\" />\n  </span>\n\n  <div class=\"solaris-form-field__control\">\n    <ng-content />\n  </div>\n\n  <span\n    class=\"solaris-form-field__affix solaris-form-field__affix--suffix\"\n    [attr.data-empty]=\"effectiveHasSuffix() ? null : ''\"\n  >\n    @if (suffix(); as suffixName) {\n      <span solaris-form-suffix>\n        <solaris-icon [name]=\"suffixName\" [decorative]=\"true\" />\n      </span>\n    }\n    <ng-content select=\"[solaris-form-suffix]\" />\n  </span>\n</div>\n\n@if (showError() || showHint()) {\n  <div class=\"solaris-form-field__message-row\">\n    @if (showError()) {\n      <div class=\"solaris-form-field__error\" [id]=\"errorId\" role=\"alert\">\n        @if (hasProjectedError()) {\n          <ng-content select=\"solaris-form-error\" />\n        } @else {\n          {{ errorText() }}\n        }\n      </div>\n    } @else if (showHint()) {\n      <div class=\"solaris-form-field__hint\" [id]=\"hintId\">\n        @if (hasProjectedHint()) {\n          <ng-content select=\"solaris-form-hint\" />\n        } @else {\n          {{ hintText() }}\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [":host{--solaris-form-field-focus-ring-width: 2px;--solaris-form-field-control-color: initial;--solaris-form-field-control-radius: initial;--solaris-form-field-hint-color: var(--solaris-text-muted);--solaris-form-field-control-gap: var(--solaris-spacing-2);--solaris-form-field-font-size: var(--solaris-font-size-md);--solaris-form-field-error-color: var(--solaris-danger-text);--solaris-form-field-prefix-color: var(--solaris-text-muted);--solaris-form-field-suffix-color: var(--solaris-text-muted);--solaris-form-field-label-color: var(--solaris-text-default);--solaris-form-field-control-height: var(--solaris-spacing-10);--solaris-form-field-optional-color: var(--solaris-text-muted);--solaris-form-field-hint-font-size: var(--solaris-font-size-xs);--solaris-form-field-disabled-opacity: var(--solaris-opacity-50);--solaris-form-field-control-padding-x: var(--solaris-spacing-3);--solaris-form-field-label-font-size: var(--solaris-font-size-md);--solaris-form-field-error-font-size: var(--solaris-font-size-xs);--solaris-form-field-message-margin-top: var(--solaris-spacing-1);--solaris-form-field-focus-ring-color: var(--solaris-primary-base);--solaris-form-field-label-margin-bottom: var(--solaris-spacing-1);--solaris-form-field-error-border-color: var(--solaris-danger-base);--solaris-form-field-optional-font-size: var(--solaris-font-size-xs);--solaris-form-field-control-background: var(--solaris-surface-base);--solaris-form-field-readonly-background: var(--solaris-surface-muted);--solaris-form-field-control-border-color: var(--solaris-border-subtle);--solaris-form-field-label-font-weight: var(--solaris-font-weight-medium);--solaris-form-field-control-border-width: var(--solaris-border-width-sm);display:block;box-sizing:border-box;font-size:var(--solaris-form-field-font-size);font-family:var(--solaris-font-family-sans),system-ui}.solaris-form-field__label-row{display:flex;align-items:center;gap:var(--solaris-spacing-2);margin-bottom:var(--solaris-form-field-label-margin-bottom)}.solaris-form-field__label-row--empty{display:none}.solaris-form-field__label,::ng-deep .solaris-form-label{cursor:pointer;display:inline-block;color:var(--solaris-form-field-label-color);font-size:var(--solaris-form-field-label-font-size);font-weight:var(--solaris-form-field-label-font-weight)}.solaris-form-field__optional-marker{white-space:nowrap;color:var(--solaris-form-field-optional-color);font-size:var(--solaris-form-field-optional-font-size)}:host ::ng-deep .solaris-form-label-action{margin-inline-start:auto;white-space:nowrap}.solaris-form-field__character-counter{margin-left:auto;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--solaris-form-field-optional-color);font-size:var(--solaris-form-field-optional-font-size);transition:color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}.solaris-form-field__character-counter[data-severity=warning]{color:var(--solaris-warning-text)}.solaris-form-field__character-counter[data-severity=danger]{color:var(--solaris-danger-text)}.solaris-form-field__control-wrapper{display:flex;position:relative;align-items:stretch;box-sizing:border-box;gap:var(--solaris-form-field-control-gap);border-style:var(--solaris-border-style-default);min-height:var(--solaris-form-field-control-height);padding:0 var(--solaris-form-field-control-padding-x);border-radius:var(--solaris-form-field-control-radius);background:var(--solaris-form-field-control-background);border-width:var(--solaris-form-field-control-border-width);border-color:var(--solaris-form-field-control-border-color);transition:border-color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard),box-shadow var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}:host([data-has-prefix]) .solaris-form-field__control-wrapper{padding-left:0}.solaris-form-field__control-wrapper[data-connected-side=bottom]{border-bottom-left-radius:0;border-bottom-right-radius:0}.solaris-form-field__control-wrapper[data-connected-side=top]{border-top-left-radius:0;border-top-right-radius:0}.solaris-form-field__control{flex:1;min-width:0;display:flex;align-items:center}.solaris-form-field__affix{min-width:0;display:flex;flex:0 0 auto;line-height:var(--solaris-line-height-none);cursor:default;align-self:stretch;align-items:center;box-sizing:border-box;justify-content:center}.solaris-form-field__affix[data-empty]{display:none}.solaris-form-field__affix--prefix{color:var(--solaris-form-field-prefix-color);inline-size:var(--solaris-form-field-control-height);border-inline-end:var(--solaris-border-width-sm) solid var(--solaris-border-subtle);transition:color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}.solaris-form-field__affix--suffix{color:var(--solaris-form-field-suffix-color);transition:color var(--solaris-motion-duration-slow) var(--solaris-motion-easing-standard)}.solaris-form-field__affix--prefix:hover,.solaris-form-field__affix--suffix:hover{color:var(--solaris-text-default)}:host ::ng-deep .solaris-form-prefix,:host ::ng-deep .solaris-form-suffix{border:0;flex:0 0 auto;color:inherit;line-height:var(--solaris-line-height-none);cursor:inherit;align-self:auto;align-items:center;display:inline-flex;justify-content:center}:host ::ng-deep solaris-icon.solaris-form-prefix,:host ::ng-deep solaris-icon.solaris-form-suffix,:host ::ng-deep .solaris-form-prefix solaris-icon,:host ::ng-deep .solaris-form-suffix solaris-icon{flex:0 0 auto;color:inherit;block-size:1em;inline-size:1em;font-size:var(--solaris-density-font-size);transition:color var(--solaris-motion-duration-slow) var(--solaris-motion-easing-standard)}:host([data-control-type=textarea]){min-width:0}:host([data-control-type=textarea]) .solaris-form-field__control-wrapper{padding-right:0;overflow:visible}:host([data-control-type=textarea]) .solaris-form-field__control{overflow:visible}:host([data-control-type=textarea][data-control-resize=horizontal]) .solaris-form-field__control-wrapper{width:100%;min-width:128px;overflow:hidden;resize:horizontal}:host([data-control-type=textarea][data-control-resize=horizontal]) .solaris-form-field__control{min-width:0}:host([data-control-type=textarea][data-control-resize=horizontal]) ::ng-deep textarea[solaris-textarea]{width:100%;min-width:0;resize:none;display:block}:host([data-control-type=textarea][data-control-resize=both]) .solaris-form-field__control-wrapper{width:100%;resize:both;min-width:128px;overflow:hidden;align-items:stretch;min-height:var(--solaris-form-field-control-height)}:host([data-control-type=textarea][data-control-resize=both]) .solaris-form-field__control{min-width:0;min-height:0;overflow:hidden;align-items:stretch}:host([data-control-type=textarea][data-control-resize=both]) ::ng-deep textarea[solaris-textarea]{width:100%;height:100%;min-width:0;resize:none;min-height:0;display:block;flex:1 1 auto}.solaris-form-field__message-row{margin-top:var(--solaris-form-field-message-margin-top)}.solaris-form-field__hint{margin:var(--solaris-spacing-1);color:var(--solaris-form-field-hint-color);font-size:var(--solaris-form-field-hint-font-size)}.solaris-form-field__error{margin:var(--solaris-spacing-1);color:var(--solaris-form-field-error-color);font-size:var(--solaris-form-field-error-font-size)}:host([data-density=compact]){--solaris-form-field-control-gap: var(--solaris-spacing-2);--solaris-form-field-font-size: var(--solaris-density-font-size);--solaris-form-field-control-padding-x: var(--solaris-spacing-2);--solaris-form-field-hint-font-size: var(--solaris-font-size-xs);--solaris-form-field-label-font-size: var(--solaris-font-size-md);--solaris-form-field-message-margin-top: var(--solaris-spacing-1);--solaris-form-field-label-margin-bottom: var(--solaris-spacing-1);--solaris-form-field-optional-font-size: var(--solaris-font-size-xs);--solaris-form-field-control-height: var(--solaris-density-min-height);--solaris-form-field-error-font-size: var(--solaris-font-size-xs)}:host([data-density=normal]){--solaris-form-field-control-gap: var(--solaris-spacing-2);--solaris-form-field-font-size: var(--solaris-density-font-size);--solaris-form-field-control-padding-x: var(--solaris-spacing-3);--solaris-form-field-hint-font-size: var(--solaris-font-size-sm);--solaris-form-field-error-font-size: var(--solaris-font-size-sm);--solaris-form-field-label-font-size: var(--solaris-font-size-md);--solaris-form-field-message-margin-top: var(--solaris-spacing-1);--solaris-form-field-label-margin-bottom: var(--solaris-spacing-1);--solaris-form-field-optional-font-size: var(--solaris-font-size-sm);--solaris-form-field-control-height: var(--solaris-density-min-height)}:host([data-density=comfortable]){--solaris-form-field-control-gap: var(--solaris-spacing-2);--solaris-form-field-font-size: var(--solaris-density-font-size);--solaris-form-field-control-padding-x: var(--solaris-spacing-3);--solaris-form-field-hint-font-size: var(--solaris-font-size-md);--solaris-form-field-message-margin-top: var(--solaris-spacing-2);--solaris-form-field-error-font-size: var(--solaris-font-size-md);--solaris-form-field-label-margin-bottom: var(--solaris-spacing-2);--solaris-form-field-optional-font-size: var(--solaris-font-size-md);--solaris-form-field-control-height: var(--solaris-density-min-height)}:host([data-radius=none]){--solaris-form-field-control-radius: var(--solaris-radius-none)}:host([data-radius=sm]){--solaris-form-field-control-radius: var(--solaris-radius-sm)}:host([data-radius=md]){--solaris-form-field-control-radius: var(--solaris-radius-md)}:host([data-radius=lg]){--solaris-form-field-control-radius: var(--solaris-radius-lg)}:host([data-focused]){--solaris-form-field-control-border-color: var( --solaris-form-field-focus-ring-color )}:host([data-disabled]){--solaris-form-field-control-color: var( --solaris-text-disabled, var(--solaris-text-muted) );--solaris-form-field-control-background: var( --solaris-surface-disabled, var(--solaris-surface-muted) );cursor:not-allowed;opacity:var(--solaris-form-field-disabled-opacity)}:host([data-readonly]){--solaris-form-field-control-border-color: var(--solaris-border-subtle);--solaris-form-field-control-background: var( --solaris-form-field-readonly-background )}:host([data-appearance=outline]),:host([data-appearance=surface]),:host([data-appearance=filled]){--solaris-form-field-focus-ring-width: 2px;--solaris-form-field-hint-color: var(--solaris-text-muted);--solaris-form-field-prefix-color: var(--solaris-text-muted);--solaris-form-field-suffix-color: var(--solaris-text-muted);--solaris-form-field-error-color: var(--solaris-danger-text);--solaris-form-field-label-color: var(--solaris-text-default);--solaris-form-field-optional-color: var(--solaris-text-muted);--solaris-form-field-disabled-opacity: var(--solaris-opacity-50);--solaris-form-field-focus-ring-color: var(--solaris-primary-base);--solaris-form-field-error-border-color: var(--solaris-danger-base);--solaris-form-field-label-font-weight: var(--solaris-font-weight-medium)}:host([data-appearance=outline]){--solaris-form-field-control-background: var(--solaris-surface-base);--solaris-form-field-readonly-background: var(--solaris-surface-muted);--solaris-form-field-control-border-color: var(--solaris-border-subtle);--solaris-form-field-control-border-width: var(--solaris-border-width-sm)}:host([data-appearance=surface]){--solaris-form-field-control-border-width: 0;--solaris-form-field-readonly-background: var(--solaris-surface-base);--solaris-form-field-control-background: var(--solaris-surface-subtle);--solaris-form-field-control-border-color: var(--solaris-border-subtle)}:host([data-appearance=filled]){--solaris-form-field-control-background: var(--solaris-surface-subtle);--solaris-form-field-readonly-background: var(--solaris-surface-muted);--solaris-form-field-control-border-color: var(--solaris-border-subtle);--solaris-form-field-control-border-width: var(--solaris-border-width-sm)}:host([data-invalid]){--solaris-form-field-control-border-color: var( --solaris-form-field-error-border-color )}:host([data-invalid][data-focused]){--solaris-form-field-control-border-color: var( --solaris-form-field-error-border-color );outline-color:var(--solaris-form-field-error-border-color)}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }, { kind: "directive", type: SolarisFormPrefixDirective, selector: "[solaris-form-prefix]" }, { kind: "directive", type: SolarisFormSuffixDirective, selector: "[solaris-form-suffix]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisFormFieldComponent, decorators: [{
             type: Component,
@@ -3541,8 +3734,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '[attr.data-has-suffix]': 'effectiveHasSuffix() ? "" : null',
                         '[attr.data-disabled]': 'isEffectivelyDisabled() ? "" : null',
                         '[attr.data-readonly]': 'isEffectivelyReadonly() ? "" : null',
-                    }, template: "@if (labelText() || hasProjectedLabel()) {\n  <div class=\"solaris-form-field__label-row\">\n    @if (hasProjectedLabel()) {\n      <ng-content select=\"solaris-form-label\" />\n    } @else if (labelText()) {\n      <label\n        class=\"solaris-form-field__label\"\n        [id]=\"labelId\"\n        [for]=\"controlId ?? undefined\"\n      >\n        {{ labelText() }}\n      </label>\n    }\n    @if (optional()) {\n      <span\n        class=\"solaris-form-field__optional-marker\"\n        [attr.aria-label]=\"optionalLabelText()\"\n      >\n        {{ optionalLabelText() }}\n      </span>\n    }\n    @if (showCharacterCounter()) {\n      <span\n        class=\"solaris-form-field__character-counter\"\n        aria-live=\"polite\"\n        [attr.aria-label]=\"characterCounterText()\"\n        [attr.data-severity]=\"characterCounterSeverity()\"\n      >\n        {{ characterCounterText() }}\n      </span>\n    }\n  </div>\n}\n\n<div class=\"solaris-form-field__control-wrapper\">\n  <span\n    class=\"solaris-form-field__affix solaris-form-field__affix--prefix\"\n    [attr.data-empty]=\"effectiveHasPrefix() ? null : ''\"\n  >\n    @if (prefix(); as prefixName) {\n      <span solaris-form-prefix>\n        <solaris-icon [name]=\"prefixName\" [decorative]=\"true\" />\n      </span>\n    }\n    <ng-content select=\"[solaris-form-prefix]\" />\n  </span>\n\n  <div class=\"solaris-form-field__control\">\n    <ng-content />\n  </div>\n\n  <span\n    class=\"solaris-form-field__affix solaris-form-field__affix--suffix\"\n    [attr.data-empty]=\"effectiveHasSuffix() ? null : ''\"\n  >\n    @if (suffix(); as suffixName) {\n      <span solaris-form-suffix>\n        <solaris-icon [name]=\"suffixName\" [decorative]=\"true\" />\n      </span>\n    }\n    <ng-content select=\"[solaris-form-suffix]\" />\n  </span>\n</div>\n\n@if (showError() || showHint()) {\n  <div class=\"solaris-form-field__message-row\">\n    @if (showError()) {\n      <div class=\"solaris-form-field__error\" [id]=\"errorId\" role=\"alert\">\n        @if (hasProjectedError()) {\n          <ng-content select=\"solaris-form-error\" />\n        } @else {\n          {{ errorText() }}\n        }\n      </div>\n    } @else if (showHint()) {\n      <div class=\"solaris-form-field__hint\" [id]=\"hintId\">\n        @if (hasProjectedHint()) {\n          <ng-content select=\"solaris-form-hint\" />\n        } @else {\n          {{ hintText() }}\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [":host{--solaris-form-field-focus-ring-width: 2px;--solaris-form-field-control-color: initial;--solaris-form-field-control-radius: initial;--solaris-form-field-hint-color: var(--solaris-text-muted);--solaris-form-field-control-gap: var(--solaris-spacing-2);--solaris-form-field-font-size: var(--solaris-font-size-md);--solaris-form-field-error-color: var(--solaris-danger-text);--solaris-form-field-prefix-color: var(--solaris-text-muted);--solaris-form-field-suffix-color: var(--solaris-text-muted);--solaris-form-field-label-color: var(--solaris-text-default);--solaris-form-field-control-height: var(--solaris-spacing-10);--solaris-form-field-optional-color: var(--solaris-text-muted);--solaris-form-field-hint-font-size: var(--solaris-font-size-xs);--solaris-form-field-disabled-opacity: var(--solaris-opacity-50);--solaris-form-field-control-padding-x: var(--solaris-spacing-3);--solaris-form-field-label-font-size: var(--solaris-font-size-sm);--solaris-form-field-error-font-size: var(--solaris-font-size-xs);--solaris-form-field-message-margin-top: var(--solaris-spacing-1);--solaris-form-field-focus-ring-color: var(--solaris-primary-base);--solaris-form-field-label-margin-bottom: var(--solaris-spacing-1);--solaris-form-field-error-border-color: var(--solaris-danger-base);--solaris-form-field-optional-font-size: var(--solaris-font-size-xs);--solaris-form-field-control-background: var(--solaris-surface-base);--solaris-form-field-readonly-background: var(--solaris-surface-muted);--solaris-form-field-control-border-color: var(--solaris-border-subtle);--solaris-form-field-label-font-weight: var(--solaris-font-weight-medium);--solaris-form-field-control-border-width: var(--solaris-border-width-sm);display:block;box-sizing:border-box;font-size:var(--solaris-form-field-font-size);font-family:var(--solaris-font-family-sans),system-ui}.solaris-form-field__label-row{display:flex;align-items:center;gap:var(--solaris-spacing-2);margin-bottom:var(--solaris-form-field-label-margin-bottom)}.solaris-form-field__label,::ng-deep .solaris-form-label{cursor:pointer;display:inline-block;color:var(--solaris-form-field-label-color);font-size:var(--solaris-form-field-label-font-size);font-weight:var(--solaris-form-field-label-font-weight)}.solaris-form-field__optional-marker{white-space:nowrap;color:var(--solaris-form-field-optional-color);font-size:var(--solaris-form-field-optional-font-size)}.solaris-form-field__character-counter{margin-left:auto;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--solaris-form-field-optional-color);font-size:var(--solaris-form-field-optional-font-size);transition:color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}.solaris-form-field__character-counter[data-severity=warning]{color:var(--solaris-warning-text)}.solaris-form-field__character-counter[data-severity=danger]{color:var(--solaris-danger-text)}.solaris-form-field__control-wrapper{display:flex;position:relative;align-items:stretch;box-sizing:border-box;gap:var(--solaris-form-field-control-gap);border-style:var(--solaris-border-style-default);min-height:var(--solaris-form-field-control-height);padding:0 var(--solaris-form-field-control-padding-x);border-radius:var(--solaris-form-field-control-radius);background:var(--solaris-form-field-control-background);border-width:var(--solaris-form-field-control-border-width);border-color:var(--solaris-form-field-control-border-color);transition:border-color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard),box-shadow var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}:host([data-has-prefix]) .solaris-form-field__control-wrapper{padding-left:0}.solaris-form-field__control-wrapper[data-connected-side=bottom]{border-bottom-left-radius:0;border-bottom-right-radius:0}.solaris-form-field__control-wrapper[data-connected-side=top]{border-top-left-radius:0;border-top-right-radius:0}.solaris-form-field__control{flex:1;min-width:0;display:flex;align-items:center}.solaris-form-field__affix{min-width:0;display:flex;flex:0 0 auto;line-height:var(--solaris-line-height-none);cursor:default;align-self:stretch;align-items:center;box-sizing:border-box;justify-content:center}.solaris-form-field__affix[data-empty]{display:none}.solaris-form-field__affix--prefix{color:var(--solaris-form-field-prefix-color);inline-size:var(--solaris-form-field-control-height);border-inline-end:var(--solaris-border-width-sm) solid var(--solaris-border-subtle);transition:color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}.solaris-form-field__affix--suffix{color:var(--solaris-form-field-suffix-color);transition:color var(--solaris-motion-duration-slow) var(--solaris-motion-easing-standard)}.solaris-form-field__affix--prefix:hover,.solaris-form-field__affix--suffix:hover{color:var(--solaris-text-default)}:host ::ng-deep .solaris-form-prefix,:host ::ng-deep .solaris-form-suffix{border:0;flex:0 0 auto;color:inherit;line-height:var(--solaris-line-height-none);cursor:inherit;align-self:auto;align-items:center;display:inline-flex;justify-content:center}:host ::ng-deep solaris-icon.solaris-form-prefix,:host ::ng-deep solaris-icon.solaris-form-suffix,:host ::ng-deep .solaris-form-prefix solaris-icon,:host ::ng-deep .solaris-form-suffix solaris-icon{flex:0 0 auto;color:inherit;block-size:1em;inline-size:1em;font-size:var(--solaris-density-font-size);transition:color var(--solaris-motion-duration-slow) var(--solaris-motion-easing-standard)}:host([data-control-type=textarea]){min-width:0}:host([data-control-type=textarea]) .solaris-form-field__control-wrapper{padding-right:0;overflow:visible}:host([data-control-type=textarea]) .solaris-form-field__control{overflow:visible}:host([data-control-type=textarea][data-control-resize=horizontal]) .solaris-form-field__control-wrapper{width:100%;min-width:128px;overflow:hidden;resize:horizontal}:host([data-control-type=textarea][data-control-resize=horizontal]) .solaris-form-field__control{min-width:0}:host([data-control-type=textarea][data-control-resize=horizontal]) ::ng-deep textarea[solaris-textarea]{width:100%;min-width:0;resize:none;display:block}:host([data-control-type=textarea][data-control-resize=both]) .solaris-form-field__control-wrapper{width:100%;resize:both;min-width:128px;overflow:hidden;align-items:stretch;min-height:var(--solaris-form-field-control-height)}:host([data-control-type=textarea][data-control-resize=both]) .solaris-form-field__control{min-width:0;min-height:0;overflow:hidden;align-items:stretch}:host([data-control-type=textarea][data-control-resize=both]) ::ng-deep textarea[solaris-textarea]{width:100%;height:100%;min-width:0;resize:none;min-height:0;display:block;flex:1 1 auto}.solaris-form-field__message-row{margin-top:var(--solaris-form-field-message-margin-top)}.solaris-form-field__hint{margin:var(--solaris-spacing-1);color:var(--solaris-form-field-hint-color);font-size:var(--solaris-form-field-hint-font-size)}.solaris-form-field__error{margin:var(--solaris-spacing-1);color:var(--solaris-form-field-error-color);font-size:var(--solaris-form-field-error-font-size)}:host([data-density=compact]){--solaris-form-field-control-gap: var(--solaris-spacing-2);--solaris-form-field-font-size: var(--solaris-density-font-size);--solaris-form-field-control-padding-x: var(--solaris-spacing-2);--solaris-form-field-hint-font-size: var(--solaris-font-size-xs);--solaris-form-field-label-font-size: var(--solaris-font-size-sm);--solaris-form-field-message-margin-top: var(--solaris-spacing-1);--solaris-form-field-label-margin-bottom: var(--solaris-spacing-1);--solaris-form-field-optional-font-size: var(--solaris-font-size-xs);--solaris-form-field-control-height: var(--solaris-density-min-height);--solaris-form-field-error-font-size: var(--solaris-font-size-xs)}:host([data-density=normal]){--solaris-form-field-control-gap: var(--solaris-spacing-2);--solaris-form-field-font-size: var(--solaris-density-font-size);--solaris-form-field-control-padding-x: var(--solaris-spacing-3);--solaris-form-field-hint-font-size: var(--solaris-font-size-sm);--solaris-form-field-error-font-size: var(--solaris-font-size-sm);--solaris-form-field-label-font-size: var(--solaris-font-size-sm);--solaris-form-field-message-margin-top: var(--solaris-spacing-1);--solaris-form-field-label-margin-bottom: var(--solaris-spacing-1);--solaris-form-field-optional-font-size: var(--solaris-font-size-sm);--solaris-form-field-control-height: var(--solaris-density-min-height)}:host([data-density=comfortable]){--solaris-form-field-control-gap: var(--solaris-spacing-2);--solaris-form-field-font-size: var(--solaris-density-font-size);--solaris-form-field-control-padding-x: var(--solaris-spacing-3);--solaris-form-field-hint-font-size: var(--solaris-font-size-md);--solaris-form-field-message-margin-top: var(--solaris-spacing-2);--solaris-form-field-error-font-size: var(--solaris-font-size-md);--solaris-form-field-label-margin-bottom: var(--solaris-spacing-2);--solaris-form-field-optional-font-size: var(--solaris-font-size-md);--solaris-form-field-control-height: var(--solaris-density-min-height)}:host([data-radius=none]){--solaris-form-field-control-radius: var(--solaris-radius-none)}:host([data-radius=sm]){--solaris-form-field-control-radius: var(--solaris-radius-sm)}:host([data-radius=md]){--solaris-form-field-control-radius: var(--solaris-radius-md)}:host([data-radius=lg]){--solaris-form-field-control-radius: var(--solaris-radius-lg)}:host([data-focused]){--solaris-form-field-control-border-color: var( --solaris-form-field-focus-ring-color )}:host([data-disabled]){--solaris-form-field-control-color: var( --solaris-text-disabled, var(--solaris-text-muted) );--solaris-form-field-control-background: var( --solaris-surface-disabled, var(--solaris-surface-muted) );cursor:not-allowed;opacity:var(--solaris-form-field-disabled-opacity)}:host([data-readonly]){--solaris-form-field-control-border-color: var(--solaris-border-subtle);--solaris-form-field-control-background: var( --solaris-form-field-readonly-background )}:host([data-appearance=outline]),:host([data-appearance=surface]),:host([data-appearance=filled]){--solaris-form-field-focus-ring-width: 2px;--solaris-form-field-hint-color: var(--solaris-text-muted);--solaris-form-field-prefix-color: var(--solaris-text-muted);--solaris-form-field-suffix-color: var(--solaris-text-muted);--solaris-form-field-error-color: var(--solaris-danger-text);--solaris-form-field-label-color: var(--solaris-text-default);--solaris-form-field-optional-color: var(--solaris-text-muted);--solaris-form-field-disabled-opacity: var(--solaris-opacity-50);--solaris-form-field-focus-ring-color: var(--solaris-primary-base);--solaris-form-field-error-border-color: var(--solaris-danger-base);--solaris-form-field-label-font-weight: var(--solaris-font-weight-medium)}:host([data-appearance=outline]){--solaris-form-field-control-background: var(--solaris-surface-base);--solaris-form-field-readonly-background: var(--solaris-surface-muted);--solaris-form-field-control-border-color: var(--solaris-border-subtle);--solaris-form-field-control-border-width: var(--solaris-border-width-sm)}:host([data-appearance=surface]){--solaris-form-field-control-border-width: 0;--solaris-form-field-readonly-background: var(--solaris-surface-base);--solaris-form-field-control-background: var(--solaris-surface-subtle);--solaris-form-field-control-border-color: var(--solaris-border-subtle)}:host([data-appearance=filled]){--solaris-form-field-control-background: var(--solaris-surface-subtle);--solaris-form-field-readonly-background: var(--solaris-surface-muted);--solaris-form-field-control-border-color: var(--solaris-border-subtle);--solaris-form-field-control-border-width: var(--solaris-border-width-sm)}:host([data-invalid]){--solaris-form-field-control-border-color: var( --solaris-form-field-error-border-color )}:host([data-invalid][data-focused]){--solaris-form-field-control-border-color: var( --solaris-form-field-error-border-color );outline-color:var(--solaris-form-field-error-border-color)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { hintKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintKey", required: false }] }], labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorKey", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], optionalLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionalLabel", required: false }] }], requiredLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "requiredLabel", required: false }] }], optionalLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionalLabelKey", required: false }] }], requiredLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "requiredLabelKey", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], projectedLabel: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisFormLabelComponent), { isSignal: true }] }], projectedHint: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisFormHintComponent), { isSignal: true }] }], projectedError: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisFormErrorComponent), { isSignal: true }] }], projectedPrefix: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisFormPrefixDirective), { isSignal: true }] }], projectedSuffix: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisFormSuffixDirective), { isSignal: true }] }], formControl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisFormControl), { isSignal: true }] }], formControlDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FormControlDirective), { isSignal: true }] }], formControlName: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FormControlName), { isSignal: true }] }], ngModelDir: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgModel), { isSignal: true }] }], hasPrefixInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasPrefix", required: false }] }], hasSuffixInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasSuffix", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }] } });
+                    }, template: "<div\n  class=\"solaris-form-field__label-row\"\n  [class.solaris-form-field__label-row--empty]=\"\n    !labelText() && !hasProjectedLabel() && !hasProjectedLabelAction()\n  \"\n>\n  @if (hasProjectedLabel()) {\n    <ng-content select=\"solaris-form-label\" />\n  } @else if (labelText()) {\n    <label\n      class=\"solaris-form-field__label\"\n      [id]=\"labelId\"\n      [for]=\"controlId ?? undefined\"\n    >\n      {{ labelText() }}\n    </label>\n  }\n  @if (optional()) {\n    <span\n      class=\"solaris-form-field__optional-marker\"\n      [attr.aria-label]=\"optionalLabelText()\"\n    >\n      {{ optionalLabelText() }}\n    </span>\n  }\n  @if (showCharacterCounter()) {\n    <span\n      class=\"solaris-form-field__character-counter\"\n      aria-live=\"polite\"\n      [attr.aria-label]=\"characterCounterText()\"\n      [attr.data-severity]=\"characterCounterSeverity()\"\n    >\n      {{ characterCounterText() }}\n    </span>\n  }\n  <ng-content select=\"[solaris-form-label-action]\" />\n</div>\n\n<div class=\"solaris-form-field__control-wrapper\">\n  <span\n    class=\"solaris-form-field__affix solaris-form-field__affix--prefix\"\n    [attr.data-empty]=\"effectiveHasPrefix() ? null : ''\"\n  >\n    @if (prefix(); as prefixName) {\n      <span solaris-form-prefix>\n        <solaris-icon [name]=\"prefixName\" [decorative]=\"true\" />\n      </span>\n    }\n    <ng-content select=\"[solaris-form-prefix]\" />\n  </span>\n\n  <div class=\"solaris-form-field__control\">\n    <ng-content />\n  </div>\n\n  <span\n    class=\"solaris-form-field__affix solaris-form-field__affix--suffix\"\n    [attr.data-empty]=\"effectiveHasSuffix() ? null : ''\"\n  >\n    @if (suffix(); as suffixName) {\n      <span solaris-form-suffix>\n        <solaris-icon [name]=\"suffixName\" [decorative]=\"true\" />\n      </span>\n    }\n    <ng-content select=\"[solaris-form-suffix]\" />\n  </span>\n</div>\n\n@if (showError() || showHint()) {\n  <div class=\"solaris-form-field__message-row\">\n    @if (showError()) {\n      <div class=\"solaris-form-field__error\" [id]=\"errorId\" role=\"alert\">\n        @if (hasProjectedError()) {\n          <ng-content select=\"solaris-form-error\" />\n        } @else {\n          {{ errorText() }}\n        }\n      </div>\n    } @else if (showHint()) {\n      <div class=\"solaris-form-field__hint\" [id]=\"hintId\">\n        @if (hasProjectedHint()) {\n          <ng-content select=\"solaris-form-hint\" />\n        } @else {\n          {{ hintText() }}\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [":host{--solaris-form-field-focus-ring-width: 2px;--solaris-form-field-control-color: initial;--solaris-form-field-control-radius: initial;--solaris-form-field-hint-color: var(--solaris-text-muted);--solaris-form-field-control-gap: var(--solaris-spacing-2);--solaris-form-field-font-size: var(--solaris-font-size-md);--solaris-form-field-error-color: var(--solaris-danger-text);--solaris-form-field-prefix-color: var(--solaris-text-muted);--solaris-form-field-suffix-color: var(--solaris-text-muted);--solaris-form-field-label-color: var(--solaris-text-default);--solaris-form-field-control-height: var(--solaris-spacing-10);--solaris-form-field-optional-color: var(--solaris-text-muted);--solaris-form-field-hint-font-size: var(--solaris-font-size-xs);--solaris-form-field-disabled-opacity: var(--solaris-opacity-50);--solaris-form-field-control-padding-x: var(--solaris-spacing-3);--solaris-form-field-label-font-size: var(--solaris-font-size-md);--solaris-form-field-error-font-size: var(--solaris-font-size-xs);--solaris-form-field-message-margin-top: var(--solaris-spacing-1);--solaris-form-field-focus-ring-color: var(--solaris-primary-base);--solaris-form-field-label-margin-bottom: var(--solaris-spacing-1);--solaris-form-field-error-border-color: var(--solaris-danger-base);--solaris-form-field-optional-font-size: var(--solaris-font-size-xs);--solaris-form-field-control-background: var(--solaris-surface-base);--solaris-form-field-readonly-background: var(--solaris-surface-muted);--solaris-form-field-control-border-color: var(--solaris-border-subtle);--solaris-form-field-label-font-weight: var(--solaris-font-weight-medium);--solaris-form-field-control-border-width: var(--solaris-border-width-sm);display:block;box-sizing:border-box;font-size:var(--solaris-form-field-font-size);font-family:var(--solaris-font-family-sans),system-ui}.solaris-form-field__label-row{display:flex;align-items:center;gap:var(--solaris-spacing-2);margin-bottom:var(--solaris-form-field-label-margin-bottom)}.solaris-form-field__label-row--empty{display:none}.solaris-form-field__label,::ng-deep .solaris-form-label{cursor:pointer;display:inline-block;color:var(--solaris-form-field-label-color);font-size:var(--solaris-form-field-label-font-size);font-weight:var(--solaris-form-field-label-font-weight)}.solaris-form-field__optional-marker{white-space:nowrap;color:var(--solaris-form-field-optional-color);font-size:var(--solaris-form-field-optional-font-size)}:host ::ng-deep .solaris-form-label-action{margin-inline-start:auto;white-space:nowrap}.solaris-form-field__character-counter{margin-left:auto;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--solaris-form-field-optional-color);font-size:var(--solaris-form-field-optional-font-size);transition:color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}.solaris-form-field__character-counter[data-severity=warning]{color:var(--solaris-warning-text)}.solaris-form-field__character-counter[data-severity=danger]{color:var(--solaris-danger-text)}.solaris-form-field__control-wrapper{display:flex;position:relative;align-items:stretch;box-sizing:border-box;gap:var(--solaris-form-field-control-gap);border-style:var(--solaris-border-style-default);min-height:var(--solaris-form-field-control-height);padding:0 var(--solaris-form-field-control-padding-x);border-radius:var(--solaris-form-field-control-radius);background:var(--solaris-form-field-control-background);border-width:var(--solaris-form-field-control-border-width);border-color:var(--solaris-form-field-control-border-color);transition:border-color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard),box-shadow var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}:host([data-has-prefix]) .solaris-form-field__control-wrapper{padding-left:0}.solaris-form-field__control-wrapper[data-connected-side=bottom]{border-bottom-left-radius:0;border-bottom-right-radius:0}.solaris-form-field__control-wrapper[data-connected-side=top]{border-top-left-radius:0;border-top-right-radius:0}.solaris-form-field__control{flex:1;min-width:0;display:flex;align-items:center}.solaris-form-field__affix{min-width:0;display:flex;flex:0 0 auto;line-height:var(--solaris-line-height-none);cursor:default;align-self:stretch;align-items:center;box-sizing:border-box;justify-content:center}.solaris-form-field__affix[data-empty]{display:none}.solaris-form-field__affix--prefix{color:var(--solaris-form-field-prefix-color);inline-size:var(--solaris-form-field-control-height);border-inline-end:var(--solaris-border-width-sm) solid var(--solaris-border-subtle);transition:color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}.solaris-form-field__affix--suffix{color:var(--solaris-form-field-suffix-color);transition:color var(--solaris-motion-duration-slow) var(--solaris-motion-easing-standard)}.solaris-form-field__affix--prefix:hover,.solaris-form-field__affix--suffix:hover{color:var(--solaris-text-default)}:host ::ng-deep .solaris-form-prefix,:host ::ng-deep .solaris-form-suffix{border:0;flex:0 0 auto;color:inherit;line-height:var(--solaris-line-height-none);cursor:inherit;align-self:auto;align-items:center;display:inline-flex;justify-content:center}:host ::ng-deep solaris-icon.solaris-form-prefix,:host ::ng-deep solaris-icon.solaris-form-suffix,:host ::ng-deep .solaris-form-prefix solaris-icon,:host ::ng-deep .solaris-form-suffix solaris-icon{flex:0 0 auto;color:inherit;block-size:1em;inline-size:1em;font-size:var(--solaris-density-font-size);transition:color var(--solaris-motion-duration-slow) var(--solaris-motion-easing-standard)}:host([data-control-type=textarea]){min-width:0}:host([data-control-type=textarea]) .solaris-form-field__control-wrapper{padding-right:0;overflow:visible}:host([data-control-type=textarea]) .solaris-form-field__control{overflow:visible}:host([data-control-type=textarea][data-control-resize=horizontal]) .solaris-form-field__control-wrapper{width:100%;min-width:128px;overflow:hidden;resize:horizontal}:host([data-control-type=textarea][data-control-resize=horizontal]) .solaris-form-field__control{min-width:0}:host([data-control-type=textarea][data-control-resize=horizontal]) ::ng-deep textarea[solaris-textarea]{width:100%;min-width:0;resize:none;display:block}:host([data-control-type=textarea][data-control-resize=both]) .solaris-form-field__control-wrapper{width:100%;resize:both;min-width:128px;overflow:hidden;align-items:stretch;min-height:var(--solaris-form-field-control-height)}:host([data-control-type=textarea][data-control-resize=both]) .solaris-form-field__control{min-width:0;min-height:0;overflow:hidden;align-items:stretch}:host([data-control-type=textarea][data-control-resize=both]) ::ng-deep textarea[solaris-textarea]{width:100%;height:100%;min-width:0;resize:none;min-height:0;display:block;flex:1 1 auto}.solaris-form-field__message-row{margin-top:var(--solaris-form-field-message-margin-top)}.solaris-form-field__hint{margin:var(--solaris-spacing-1);color:var(--solaris-form-field-hint-color);font-size:var(--solaris-form-field-hint-font-size)}.solaris-form-field__error{margin:var(--solaris-spacing-1);color:var(--solaris-form-field-error-color);font-size:var(--solaris-form-field-error-font-size)}:host([data-density=compact]){--solaris-form-field-control-gap: var(--solaris-spacing-2);--solaris-form-field-font-size: var(--solaris-density-font-size);--solaris-form-field-control-padding-x: var(--solaris-spacing-2);--solaris-form-field-hint-font-size: var(--solaris-font-size-xs);--solaris-form-field-label-font-size: var(--solaris-font-size-md);--solaris-form-field-message-margin-top: var(--solaris-spacing-1);--solaris-form-field-label-margin-bottom: var(--solaris-spacing-1);--solaris-form-field-optional-font-size: var(--solaris-font-size-xs);--solaris-form-field-control-height: var(--solaris-density-min-height);--solaris-form-field-error-font-size: var(--solaris-font-size-xs)}:host([data-density=normal]){--solaris-form-field-control-gap: var(--solaris-spacing-2);--solaris-form-field-font-size: var(--solaris-density-font-size);--solaris-form-field-control-padding-x: var(--solaris-spacing-3);--solaris-form-field-hint-font-size: var(--solaris-font-size-sm);--solaris-form-field-error-font-size: var(--solaris-font-size-sm);--solaris-form-field-label-font-size: var(--solaris-font-size-md);--solaris-form-field-message-margin-top: var(--solaris-spacing-1);--solaris-form-field-label-margin-bottom: var(--solaris-spacing-1);--solaris-form-field-optional-font-size: var(--solaris-font-size-sm);--solaris-form-field-control-height: var(--solaris-density-min-height)}:host([data-density=comfortable]){--solaris-form-field-control-gap: var(--solaris-spacing-2);--solaris-form-field-font-size: var(--solaris-density-font-size);--solaris-form-field-control-padding-x: var(--solaris-spacing-3);--solaris-form-field-hint-font-size: var(--solaris-font-size-md);--solaris-form-field-message-margin-top: var(--solaris-spacing-2);--solaris-form-field-error-font-size: var(--solaris-font-size-md);--solaris-form-field-label-margin-bottom: var(--solaris-spacing-2);--solaris-form-field-optional-font-size: var(--solaris-font-size-md);--solaris-form-field-control-height: var(--solaris-density-min-height)}:host([data-radius=none]){--solaris-form-field-control-radius: var(--solaris-radius-none)}:host([data-radius=sm]){--solaris-form-field-control-radius: var(--solaris-radius-sm)}:host([data-radius=md]){--solaris-form-field-control-radius: var(--solaris-radius-md)}:host([data-radius=lg]){--solaris-form-field-control-radius: var(--solaris-radius-lg)}:host([data-focused]){--solaris-form-field-control-border-color: var( --solaris-form-field-focus-ring-color )}:host([data-disabled]){--solaris-form-field-control-color: var( --solaris-text-disabled, var(--solaris-text-muted) );--solaris-form-field-control-background: var( --solaris-surface-disabled, var(--solaris-surface-muted) );cursor:not-allowed;opacity:var(--solaris-form-field-disabled-opacity)}:host([data-readonly]){--solaris-form-field-control-border-color: var(--solaris-border-subtle);--solaris-form-field-control-background: var( --solaris-form-field-readonly-background )}:host([data-appearance=outline]),:host([data-appearance=surface]),:host([data-appearance=filled]){--solaris-form-field-focus-ring-width: 2px;--solaris-form-field-hint-color: var(--solaris-text-muted);--solaris-form-field-prefix-color: var(--solaris-text-muted);--solaris-form-field-suffix-color: var(--solaris-text-muted);--solaris-form-field-error-color: var(--solaris-danger-text);--solaris-form-field-label-color: var(--solaris-text-default);--solaris-form-field-optional-color: var(--solaris-text-muted);--solaris-form-field-disabled-opacity: var(--solaris-opacity-50);--solaris-form-field-focus-ring-color: var(--solaris-primary-base);--solaris-form-field-error-border-color: var(--solaris-danger-base);--solaris-form-field-label-font-weight: var(--solaris-font-weight-medium)}:host([data-appearance=outline]){--solaris-form-field-control-background: var(--solaris-surface-base);--solaris-form-field-readonly-background: var(--solaris-surface-muted);--solaris-form-field-control-border-color: var(--solaris-border-subtle);--solaris-form-field-control-border-width: var(--solaris-border-width-sm)}:host([data-appearance=surface]){--solaris-form-field-control-border-width: 0;--solaris-form-field-readonly-background: var(--solaris-surface-base);--solaris-form-field-control-background: var(--solaris-surface-subtle);--solaris-form-field-control-border-color: var(--solaris-border-subtle)}:host([data-appearance=filled]){--solaris-form-field-control-background: var(--solaris-surface-subtle);--solaris-form-field-readonly-background: var(--solaris-surface-muted);--solaris-form-field-control-border-color: var(--solaris-border-subtle);--solaris-form-field-control-border-width: var(--solaris-border-width-sm)}:host([data-invalid]){--solaris-form-field-control-border-color: var( --solaris-form-field-error-border-color )}:host([data-invalid][data-focused]){--solaris-form-field-control-border-color: var( --solaris-form-field-error-border-color );outline-color:var(--solaris-form-field-error-border-color)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { hintKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintKey", required: false }] }], labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorKey", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], optionalLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionalLabel", required: false }] }], requiredLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "requiredLabel", required: false }] }], optionalLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionalLabelKey", required: false }] }], requiredLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "requiredLabelKey", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], projectedLabel: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisFormLabelComponent), { isSignal: true }] }], projectedHint: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisFormHintComponent), { isSignal: true }] }], projectedError: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisFormErrorComponent), { isSignal: true }] }], projectedPrefix: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisFormPrefixDirective), { isSignal: true }] }], projectedSuffix: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisFormSuffixDirective), { isSignal: true }] }], projectedLabelAction: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisFormLabelActionDirective), { isSignal: true }] }], formControl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisFormControl), { isSignal: true }] }], formControlDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FormControlDirective), { isSignal: true }] }], formControlName: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FormControlName), { isSignal: true }] }], ngModelDir: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgModel), { isSignal: true }] }], hasPrefixInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasPrefix", required: false }] }], hasSuffixInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasSuffix", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }] } });
 
 class SolarisFormFieldTriggerDirective {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisFormFieldTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -4805,7 +4998,7 @@ class SolarisSelectComponent extends SolarisFormControl {
                 provide: SolarisFormControl,
                 useExisting: forwardRef(() => SolarisSelectComponent),
             },
-        ], queries: [{ propertyName: "options", predicate: SolarisOptionComponent, descendants: true, isSignal: true }, { propertyName: "optionGroups", predicate: SolarisOptionGroupComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "popoverTrigger", first: true, predicate: SolarisPopoverTriggerDirective, descendants: true, isSignal: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "triggerElement", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "formFieldElement", first: true, predicate: ["formFieldRef"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<solaris-form-field\n  #formFieldRef\n  [class.solaris-select--panel-open]=\"panelOpen()\"\n  [control]=\"this\"\n  [label]=\"labelText()\"\n  [hint]=\"hintText()\"\n  [error]=\"errorText()\"\n  [appearance]=\"appearance()\"\n  [density]=\"effectiveDensity()\"\n  [radius]=\"radius()\"\n  [invalid]=\"isEffectivelyInvalid()\"\n  [required]=\"requiredInput()\"\n  [hasPrefix]=\"!!prefix()\"\n  solaris-popover-trigger\n  [solarisPopoverDisabled]=\"!canOpen()\"\n  [solarisPopoverTriggerFor]=\"matchWidthPopover\"\n  [solarisPopoverMatchTriggerWidth]=\"panelMatchTriggerWidth()\"\n  [solarisPopoverAppearance]=\"popoverAppearance()\"\n  [solarisPopoverPlacement]=\"'bottom'\"\n  [solarisPopoverAlign]=\"'start'\"\n  [solarisPopoverOffset]=\"0\"\n  [solarisPopoverPadding]=\"'none'\"\n  [solarisPopoverRadius]=\"radius()\"\n  [solarisPopoverTopConnected]=\"true\"\n  [solarisPopoverMinWidth]=\"panelMinWidth()\"\n  [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n  [solarisPopoverScrollStrategy]=\"'reposition'\"\n  [solarisPopoverCloseOnEscape]=\"false\"\n  [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n  @if (prefix(); as iconName) {\n    <span solaris-form-prefix>\n      <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n    </span>\n  }\n  <ng-content select=\"[solaris-form-prefix]\" />\n\n  <div\n    #triggerEl\n    class=\"solaris-select__trigger\"\n    [id]=\"elementId() + '--trigger'\"\n    solaris-form-field-trigger\n    role=\"combobox\"\n    tabindex=\"0\"\n    [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n    [attr.aria-controls]=\"panelOpen() ? panelId : null\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-activedescendant]=\"activeDescendantId()\"\n    [attr.aria-labelledby]=\"ariaLabelledbyText() ?? null\"\n    [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n    (keydown)=\"onTriggerKeydown($event)\"\n    (focus)=\"onTriggerFocus()\"\n    (blur)=\"onTriggerBlur()\"\n  >\n    @if (searchable() && panelOpen()) {\n      <input\n        #searchInput\n        type=\"text\"\n        class=\"solaris-select__search-input\"\n        [attr.placeholder]=\"searchPlaceholderText()\"\n        [value]=\"searchQuery()\"\n        (input)=\"onSearchInput($event)\"\n        (keydown)=\"onSearchKeydown($event)\"\n        (click)=\"$event.stopPropagation()\"\n        role=\"searchbox\"\n        autocomplete=\"off\"\n      />\n    } @else {\n      <span class=\"solaris-select__value\">\n        @if (displayText()) {\n          <span class=\"solaris-select__value-text\">{{ displayText() }}</span>\n        } @else {\n          <span class=\"solaris-select__placeholder\">{{\n            placeholderText()\n          }}</span>\n        }\n      </span>\n    }\n\n    <span class=\"solaris-select__actions\">\n      @if (canClear()) {\n        <button\n          type=\"button\"\n          class=\"solaris-select__clear\"\n          [attr.aria-label]=\"clearAriaLabel()\"\n          (click)=\"clearValue(); $event.stopPropagation()\"\n          tabindex=\"-1\"\n        >\n          <solaris-icon name=\"x\" [decorative]=\"true\" />\n        </button>\n      }\n\n      <solaris-icon\n        class=\"solaris-select__dropdown-icon\"\n        name=\"chevron-down\"\n        [decorative]=\"true\"\n        size=\"sm\"\n      />\n    </span>\n  </div>\n\n  <ng-content select=\"[solaris-form-suffix]\" />\n</solaris-form-field>\n\n<ng-template #matchWidthPopover=\"solarisPopover\" solaris-popover>\n  <div\n    class=\"solaris-select__panel\"\n    role=\"listbox\"\n    [attr.id]=\"panelId\"\n    tabindex=\"-1\"\n    (click)=\"onPanelClick($event)\"\n    (keydown)=\"onPanelKeydown($event)\"\n  >\n    @if (loading()) {\n      <div class=\"solaris-select__loading\">\n        <span class=\"solaris-select__loading-text\">{{\n          loadingTextValue()\n        }}</span>\n      </div>\n    } @else if (showNoResults()) {\n      <div class=\"solaris-select__no-results\">\n        <span class=\"solaris-select__no-results-text\">{{\n          noResultsTextValue()\n        }}</span>\n      </div>\n    } @else if (showEmpty()) {\n      <div class=\"solaris-select__empty\">\n        <span class=\"solaris-select__empty-text\">{{ emptyTextValue() }}</span>\n      </div>\n    } @else {\n      <div\n        class=\"solaris-select__options\"\n        [style.max-height]=\"panelMaxHeight()\"\n      >\n        <ng-content select=\"solaris-option, solaris-option-group\" />\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [":host{--solaris-select-icon-color: var(--solaris-text-muted);--solaris-select-font-size: var(--solaris-font-size-md);--solaris-select-value-color: var(--solaris-text-default);--solaris-select-line-height: var(--solaris-line-height-md);--solaris-select-placeholder-color: var(--solaris-text-muted);outline:none;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;display:inline-flex;flex-direction:column;box-sizing:border-box;font-family:var(--solaris-font-family-sans),system-ui}.solaris-select__trigger{flex:1;padding:0;min-width:0;border:none;display:flex;outline:none;cursor:pointer;align-items:center;box-sizing:border-box;background:transparent;gap:var(--solaris-spacing-2)}:host ::ng-deep .solaris-form-field__message-row{margin-top:0}:host ::ng-deep .solaris-select--panel-open .solaris-form-field__message-row{display:none}.solaris-select__value{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-select__value-text{color:var(--solaris-select-value-color);font-size:var(--solaris-select-font-size);line-height:var(--solaris-select-line-height)}.solaris-select__placeholder{font-size:var(--solaris-select-font-size);color:var(--solaris-select-placeholder-color);line-height:var(--solaris-select-line-height)}.solaris-select__actions{display:flex;flex-shrink:0;align-items:center;gap:var(--solaris-spacing-2)}.solaris-select__clear solaris-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl)}.solaris-select__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl);color:var(--solaris-select-icon-color);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-select__clear:hover{color:var(--solaris-text-default)}.solaris-select__dropdown-icon solaris-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl)}.solaris-select__dropdown-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl);color:var(--solaris-select-icon-color);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-select__dropdown-icon{transform:rotate(180deg)}.solaris-select__panel{display:flex;overflow-y:auto;flex-direction:column;overscroll-behavior:contain}.solaris-select__search-input{flex:1;margin:0;padding:0;min-width:0;border:none;outline:none;font-family:inherit;box-sizing:border-box;background:transparent;color:var(--solaris-select-value-color);font-size:var(--solaris-select-font-size);line-height:var(--solaris-select-line-height)}.solaris-select__search-input::placeholder{color:var(--solaris-select-placeholder-color)}.solaris-select__loading,.solaris-select__no-results,.solaris-select__empty{display:flex;align-items:center;justify-content:center;color:var(--solaris-text-muted);padding:var(--solaris-spacing-4);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}.solaris-select__options{display:flex;flex-direction:column;gap:var(--solaris-spacing-1);padding:var(--solaris-spacing-1) var(--solaris-spacing-2)}:host([data-disabled]){cursor:not-allowed}:host([data-readonly]){cursor:default}@media(prefers-reduced-motion:reduce){.solaris-select__dropdown-icon,.solaris-select__clear{transition:none}}[data-reduced-motion=true] .solaris-select__dropdown-icon,[data-reduced-motion=true] .solaris-select__clear{transition:none}\n"], dependencies: [{ kind: "component", type: SolarisFormFieldComponent, selector: "solaris-form-field", inputs: ["hintKey", "labelKey", "hint", "errorKey", "label", "error", "optionalLabel", "requiredLabel", "optionalLabelKey", "requiredLabelKey", "required", "optional", "invalid", "disabled", "readonly", "density", "radius", "appearance", "control", "hasPrefix", "hasSuffix", "prefix", "suffix"] }, { kind: "directive", type: SolarisFormFieldTriggerDirective, selector: "[solaris-form-field-trigger]" }, { kind: "directive", type: SolarisFormPrefixDirective, selector: "[solaris-form-prefix]" }, { kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative"] }, { kind: "directive", type: SolarisPopoverDirective, selector: "ng-template[solaris-popover]", exportAs: ["solarisPopover"] }, { kind: "directive", type: SolarisPopoverTriggerDirective, selector: "[solaris-popover-trigger]", inputs: ["solarisPopoverTriggerFor", "solarisPopoverOpen", "solarisPopoverDisabled", "solarisPopoverPlacement", "solarisPopoverAlign", "solarisPopoverOffset", "solarisPopoverMatchTriggerWidth", "solarisPopoverMinWidth", "solarisPopoverMaxWidth", "solarisPopoverCloseOnOutsideClick", "solarisPopoverCloseOnEscape", "solarisPopoverRestoreFocus", "solarisPopoverAutoFocus", "solarisPopoverScrollStrategy", "solarisPopoverPanelRole", "solarisPopoverAriaHasPopup", "solarisPopoverAppearance", "solarisPopoverPadding", "solarisPopoverRadius", "solarisPopoverTopConnected"], outputs: ["solarisPopoverOpened", "solarisPopoverClosed", "solarisPopoverOpenChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "options", predicate: SolarisOptionComponent, descendants: true, isSignal: true }, { propertyName: "optionGroups", predicate: SolarisOptionGroupComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "popoverTrigger", first: true, predicate: SolarisPopoverTriggerDirective, descendants: true, isSignal: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "triggerElement", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "formFieldElement", first: true, predicate: ["formFieldRef"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<solaris-form-field\n  #formFieldRef\n  [class.solaris-select--panel-open]=\"panelOpen()\"\n  [control]=\"this\"\n  [label]=\"labelText()\"\n  [hint]=\"hintText()\"\n  [error]=\"errorText()\"\n  [appearance]=\"appearance()\"\n  [density]=\"effectiveDensity()\"\n  [radius]=\"radius()\"\n  [invalid]=\"isEffectivelyInvalid()\"\n  [required]=\"requiredInput()\"\n  [hasPrefix]=\"!!prefix()\"\n  solaris-popover-trigger\n  [solarisPopoverDisabled]=\"!canOpen()\"\n  [solarisPopoverTriggerFor]=\"matchWidthPopover\"\n  [solarisPopoverMatchTriggerWidth]=\"panelMatchTriggerWidth()\"\n  [solarisPopoverAppearance]=\"popoverAppearance()\"\n  [solarisPopoverPlacement]=\"'bottom'\"\n  [solarisPopoverAlign]=\"'start'\"\n  [solarisPopoverOffset]=\"0\"\n  [solarisPopoverPadding]=\"'none'\"\n  [solarisPopoverRadius]=\"radius()\"\n  [solarisPopoverTopConnected]=\"true\"\n  [solarisPopoverMinWidth]=\"panelMinWidth()\"\n  [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n  [solarisPopoverScrollStrategy]=\"'reposition'\"\n  [solarisPopoverCloseOnEscape]=\"false\"\n  [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n  @if (prefix(); as iconName) {\n    <span solaris-form-prefix>\n      <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n    </span>\n  }\n  <ng-content\n    select=\"[solaris-form-prefix]\"\n    ngProjectAs=\"[solaris-form-prefix]\"\n  />\n\n  <div\n    #triggerEl\n    class=\"solaris-select__trigger\"\n    [id]=\"elementId() + '--trigger'\"\n    solaris-form-field-trigger\n    role=\"combobox\"\n    tabindex=\"0\"\n    [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n    [attr.aria-controls]=\"panelOpen() ? panelId : null\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-activedescendant]=\"activeDescendantId()\"\n    [attr.aria-labelledby]=\"ariaLabelledbyText() ?? null\"\n    [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n    (keydown)=\"onTriggerKeydown($event)\"\n    (focus)=\"onTriggerFocus()\"\n    (blur)=\"onTriggerBlur()\"\n  >\n    @if (searchable() && panelOpen()) {\n      <input\n        #searchInput\n        type=\"text\"\n        class=\"solaris-select__search-input\"\n        [attr.placeholder]=\"searchPlaceholderText()\"\n        [value]=\"searchQuery()\"\n        (input)=\"onSearchInput($event)\"\n        (keydown)=\"onSearchKeydown($event)\"\n        (click)=\"$event.stopPropagation()\"\n        role=\"searchbox\"\n        autocomplete=\"off\"\n      />\n    } @else {\n      <span class=\"solaris-select__value\">\n        @if (displayText()) {\n          <span class=\"solaris-select__value-text\">{{ displayText() }}</span>\n        } @else {\n          <span class=\"solaris-select__placeholder\">{{\n            placeholderText()\n          }}</span>\n        }\n      </span>\n    }\n\n    <span class=\"solaris-select__actions\">\n      @if (canClear()) {\n        <button\n          type=\"button\"\n          class=\"solaris-select__clear\"\n          [attr.aria-label]=\"clearAriaLabel()\"\n          (click)=\"clearValue(); $event.stopPropagation()\"\n          tabindex=\"-1\"\n        >\n          <solaris-icon name=\"x\" [decorative]=\"true\" />\n        </button>\n      }\n\n      <solaris-icon\n        class=\"solaris-select__dropdown-icon\"\n        name=\"chevron-down\"\n        [decorative]=\"true\"\n        size=\"sm\"\n      />\n    </span>\n  </div>\n\n  <ng-content\n    select=\"[solaris-form-suffix]\"\n    ngProjectAs=\"[solaris-form-suffix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-label-action]\"\n    ngProjectAs=\"[solaris-form-label-action]\"\n  />\n</solaris-form-field>\n\n<ng-template #matchWidthPopover=\"solarisPopover\" solaris-popover>\n  <div\n    class=\"solaris-select__panel\"\n    role=\"listbox\"\n    [attr.id]=\"panelId\"\n    tabindex=\"-1\"\n    (click)=\"onPanelClick($event)\"\n    (keydown)=\"onPanelKeydown($event)\"\n  >\n    @if (loading()) {\n      <div class=\"solaris-select__loading\">\n        <span class=\"solaris-select__loading-text\">{{\n          loadingTextValue()\n        }}</span>\n      </div>\n    } @else if (showNoResults()) {\n      <div class=\"solaris-select__no-results\">\n        <span class=\"solaris-select__no-results-text\">{{\n          noResultsTextValue()\n        }}</span>\n      </div>\n    } @else if (showEmpty()) {\n      <div class=\"solaris-select__empty\">\n        <span class=\"solaris-select__empty-text\">{{ emptyTextValue() }}</span>\n      </div>\n    } @else {\n      <div\n        class=\"solaris-select__options\"\n        [style.max-height]=\"panelMaxHeight()\"\n      >\n        <ng-content select=\"solaris-option, solaris-option-group\" />\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [":host{--solaris-select-icon-color: var(--solaris-text-muted);--solaris-select-font-size: var(--solaris-font-size-md);--solaris-select-value-color: var(--solaris-text-default);--solaris-select-line-height: var(--solaris-line-height-md);--solaris-select-placeholder-color: var(--solaris-text-muted);outline:none;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;display:inline-flex;flex-direction:column;box-sizing:border-box;font-family:var(--solaris-font-family-sans),system-ui}.solaris-select__trigger{flex:1;padding:0;min-width:0;border:none;display:flex;outline:none;cursor:pointer;align-items:center;box-sizing:border-box;background:transparent;gap:var(--solaris-spacing-2)}:host ::ng-deep .solaris-form-field__message-row{margin-top:0}:host ::ng-deep .solaris-select--panel-open .solaris-form-field__message-row{display:none}.solaris-select__value{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-select__value-text{color:var(--solaris-select-value-color);font-size:var(--solaris-select-font-size);line-height:var(--solaris-select-line-height)}.solaris-select__placeholder{font-size:var(--solaris-select-font-size);color:var(--solaris-select-placeholder-color);line-height:var(--solaris-select-line-height)}.solaris-select__actions{display:flex;flex-shrink:0;align-items:center;gap:var(--solaris-spacing-2)}.solaris-select__clear solaris-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl)}.solaris-select__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl);color:var(--solaris-select-icon-color);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-select__clear:hover{color:var(--solaris-text-default)}.solaris-select__dropdown-icon solaris-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl)}.solaris-select__dropdown-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl);color:var(--solaris-select-icon-color);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-select__dropdown-icon{transform:rotate(180deg)}.solaris-select__panel{display:flex;overflow-y:auto;flex-direction:column;overscroll-behavior:contain}.solaris-select__search-input{flex:1;margin:0;padding:0;min-width:0;border:none;outline:none;font-family:inherit;box-sizing:border-box;background:transparent;color:var(--solaris-select-value-color);font-size:var(--solaris-select-font-size);line-height:var(--solaris-select-line-height)}.solaris-select__search-input::placeholder{color:var(--solaris-select-placeholder-color)}.solaris-select__loading,.solaris-select__no-results,.solaris-select__empty{display:flex;align-items:center;justify-content:center;color:var(--solaris-text-muted);padding:var(--solaris-spacing-4);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}.solaris-select__options{display:flex;flex-direction:column;gap:var(--solaris-spacing-1);padding:var(--solaris-spacing-1) var(--solaris-spacing-2)}:host([data-disabled]){cursor:not-allowed}:host([data-readonly]){cursor:default}@media(prefers-reduced-motion:reduce){.solaris-select__dropdown-icon,.solaris-select__clear{transition:none}}[data-reduced-motion=true] .solaris-select__dropdown-icon,[data-reduced-motion=true] .solaris-select__clear{transition:none}\n"], dependencies: [{ kind: "component", type: SolarisFormFieldComponent, selector: "solaris-form-field", inputs: ["hintKey", "labelKey", "hint", "errorKey", "label", "error", "optionalLabel", "requiredLabel", "optionalLabelKey", "requiredLabelKey", "required", "optional", "invalid", "disabled", "readonly", "density", "radius", "appearance", "control", "hasPrefix", "hasSuffix", "prefix", "suffix"] }, { kind: "directive", type: SolarisFormFieldTriggerDirective, selector: "[solaris-form-field-trigger]" }, { kind: "directive", type: SolarisFormPrefixDirective, selector: "[solaris-form-prefix]" }, { kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }, { kind: "directive", type: SolarisPopoverDirective, selector: "ng-template[solaris-popover]", exportAs: ["solarisPopover"] }, { kind: "directive", type: SolarisPopoverTriggerDirective, selector: "[solaris-popover-trigger]", inputs: ["solarisPopoverTriggerFor", "solarisPopoverOpen", "solarisPopoverDisabled", "solarisPopoverPlacement", "solarisPopoverAlign", "solarisPopoverOffset", "solarisPopoverMatchTriggerWidth", "solarisPopoverMinWidth", "solarisPopoverMaxWidth", "solarisPopoverCloseOnOutsideClick", "solarisPopoverCloseOnEscape", "solarisPopoverRestoreFocus", "solarisPopoverAutoFocus", "solarisPopoverScrollStrategy", "solarisPopoverPanelRole", "solarisPopoverAriaHasPopup", "solarisPopoverAppearance", "solarisPopoverPadding", "solarisPopoverRadius", "solarisPopoverTopConnected"], outputs: ["solarisPopoverOpened", "solarisPopoverClosed", "solarisPopoverOpenChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisSelectComponent, decorators: [{
             type: Component,
@@ -4832,7 +5025,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '[attr.data-open]': 'panelOpen() ? "" : null',
                         '[attr.aria-label]': 'ariaLabelText() ?? null',
                         '[attr.data-has-value]': 'hasValue() ? "" : null',
-                    }, template: "<solaris-form-field\n  #formFieldRef\n  [class.solaris-select--panel-open]=\"panelOpen()\"\n  [control]=\"this\"\n  [label]=\"labelText()\"\n  [hint]=\"hintText()\"\n  [error]=\"errorText()\"\n  [appearance]=\"appearance()\"\n  [density]=\"effectiveDensity()\"\n  [radius]=\"radius()\"\n  [invalid]=\"isEffectivelyInvalid()\"\n  [required]=\"requiredInput()\"\n  [hasPrefix]=\"!!prefix()\"\n  solaris-popover-trigger\n  [solarisPopoverDisabled]=\"!canOpen()\"\n  [solarisPopoverTriggerFor]=\"matchWidthPopover\"\n  [solarisPopoverMatchTriggerWidth]=\"panelMatchTriggerWidth()\"\n  [solarisPopoverAppearance]=\"popoverAppearance()\"\n  [solarisPopoverPlacement]=\"'bottom'\"\n  [solarisPopoverAlign]=\"'start'\"\n  [solarisPopoverOffset]=\"0\"\n  [solarisPopoverPadding]=\"'none'\"\n  [solarisPopoverRadius]=\"radius()\"\n  [solarisPopoverTopConnected]=\"true\"\n  [solarisPopoverMinWidth]=\"panelMinWidth()\"\n  [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n  [solarisPopoverScrollStrategy]=\"'reposition'\"\n  [solarisPopoverCloseOnEscape]=\"false\"\n  [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n  @if (prefix(); as iconName) {\n    <span solaris-form-prefix>\n      <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n    </span>\n  }\n  <ng-content select=\"[solaris-form-prefix]\" />\n\n  <div\n    #triggerEl\n    class=\"solaris-select__trigger\"\n    [id]=\"elementId() + '--trigger'\"\n    solaris-form-field-trigger\n    role=\"combobox\"\n    tabindex=\"0\"\n    [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n    [attr.aria-controls]=\"panelOpen() ? panelId : null\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-activedescendant]=\"activeDescendantId()\"\n    [attr.aria-labelledby]=\"ariaLabelledbyText() ?? null\"\n    [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n    (keydown)=\"onTriggerKeydown($event)\"\n    (focus)=\"onTriggerFocus()\"\n    (blur)=\"onTriggerBlur()\"\n  >\n    @if (searchable() && panelOpen()) {\n      <input\n        #searchInput\n        type=\"text\"\n        class=\"solaris-select__search-input\"\n        [attr.placeholder]=\"searchPlaceholderText()\"\n        [value]=\"searchQuery()\"\n        (input)=\"onSearchInput($event)\"\n        (keydown)=\"onSearchKeydown($event)\"\n        (click)=\"$event.stopPropagation()\"\n        role=\"searchbox\"\n        autocomplete=\"off\"\n      />\n    } @else {\n      <span class=\"solaris-select__value\">\n        @if (displayText()) {\n          <span class=\"solaris-select__value-text\">{{ displayText() }}</span>\n        } @else {\n          <span class=\"solaris-select__placeholder\">{{\n            placeholderText()\n          }}</span>\n        }\n      </span>\n    }\n\n    <span class=\"solaris-select__actions\">\n      @if (canClear()) {\n        <button\n          type=\"button\"\n          class=\"solaris-select__clear\"\n          [attr.aria-label]=\"clearAriaLabel()\"\n          (click)=\"clearValue(); $event.stopPropagation()\"\n          tabindex=\"-1\"\n        >\n          <solaris-icon name=\"x\" [decorative]=\"true\" />\n        </button>\n      }\n\n      <solaris-icon\n        class=\"solaris-select__dropdown-icon\"\n        name=\"chevron-down\"\n        [decorative]=\"true\"\n        size=\"sm\"\n      />\n    </span>\n  </div>\n\n  <ng-content select=\"[solaris-form-suffix]\" />\n</solaris-form-field>\n\n<ng-template #matchWidthPopover=\"solarisPopover\" solaris-popover>\n  <div\n    class=\"solaris-select__panel\"\n    role=\"listbox\"\n    [attr.id]=\"panelId\"\n    tabindex=\"-1\"\n    (click)=\"onPanelClick($event)\"\n    (keydown)=\"onPanelKeydown($event)\"\n  >\n    @if (loading()) {\n      <div class=\"solaris-select__loading\">\n        <span class=\"solaris-select__loading-text\">{{\n          loadingTextValue()\n        }}</span>\n      </div>\n    } @else if (showNoResults()) {\n      <div class=\"solaris-select__no-results\">\n        <span class=\"solaris-select__no-results-text\">{{\n          noResultsTextValue()\n        }}</span>\n      </div>\n    } @else if (showEmpty()) {\n      <div class=\"solaris-select__empty\">\n        <span class=\"solaris-select__empty-text\">{{ emptyTextValue() }}</span>\n      </div>\n    } @else {\n      <div\n        class=\"solaris-select__options\"\n        [style.max-height]=\"panelMaxHeight()\"\n      >\n        <ng-content select=\"solaris-option, solaris-option-group\" />\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [":host{--solaris-select-icon-color: var(--solaris-text-muted);--solaris-select-font-size: var(--solaris-font-size-md);--solaris-select-value-color: var(--solaris-text-default);--solaris-select-line-height: var(--solaris-line-height-md);--solaris-select-placeholder-color: var(--solaris-text-muted);outline:none;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;display:inline-flex;flex-direction:column;box-sizing:border-box;font-family:var(--solaris-font-family-sans),system-ui}.solaris-select__trigger{flex:1;padding:0;min-width:0;border:none;display:flex;outline:none;cursor:pointer;align-items:center;box-sizing:border-box;background:transparent;gap:var(--solaris-spacing-2)}:host ::ng-deep .solaris-form-field__message-row{margin-top:0}:host ::ng-deep .solaris-select--panel-open .solaris-form-field__message-row{display:none}.solaris-select__value{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-select__value-text{color:var(--solaris-select-value-color);font-size:var(--solaris-select-font-size);line-height:var(--solaris-select-line-height)}.solaris-select__placeholder{font-size:var(--solaris-select-font-size);color:var(--solaris-select-placeholder-color);line-height:var(--solaris-select-line-height)}.solaris-select__actions{display:flex;flex-shrink:0;align-items:center;gap:var(--solaris-spacing-2)}.solaris-select__clear solaris-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl)}.solaris-select__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl);color:var(--solaris-select-icon-color);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-select__clear:hover{color:var(--solaris-text-default)}.solaris-select__dropdown-icon solaris-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl)}.solaris-select__dropdown-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl);color:var(--solaris-select-icon-color);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-select__dropdown-icon{transform:rotate(180deg)}.solaris-select__panel{display:flex;overflow-y:auto;flex-direction:column;overscroll-behavior:contain}.solaris-select__search-input{flex:1;margin:0;padding:0;min-width:0;border:none;outline:none;font-family:inherit;box-sizing:border-box;background:transparent;color:var(--solaris-select-value-color);font-size:var(--solaris-select-font-size);line-height:var(--solaris-select-line-height)}.solaris-select__search-input::placeholder{color:var(--solaris-select-placeholder-color)}.solaris-select__loading,.solaris-select__no-results,.solaris-select__empty{display:flex;align-items:center;justify-content:center;color:var(--solaris-text-muted);padding:var(--solaris-spacing-4);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}.solaris-select__options{display:flex;flex-direction:column;gap:var(--solaris-spacing-1);padding:var(--solaris-spacing-1) var(--solaris-spacing-2)}:host([data-disabled]){cursor:not-allowed}:host([data-readonly]){cursor:default}@media(prefers-reduced-motion:reduce){.solaris-select__dropdown-icon,.solaris-select__clear{transition:none}}[data-reduced-motion=true] .solaris-select__dropdown-icon,[data-reduced-motion=true] .solaris-select__clear{transition:none}\n"] }]
+                    }, template: "<solaris-form-field\n  #formFieldRef\n  [class.solaris-select--panel-open]=\"panelOpen()\"\n  [control]=\"this\"\n  [label]=\"labelText()\"\n  [hint]=\"hintText()\"\n  [error]=\"errorText()\"\n  [appearance]=\"appearance()\"\n  [density]=\"effectiveDensity()\"\n  [radius]=\"radius()\"\n  [invalid]=\"isEffectivelyInvalid()\"\n  [required]=\"requiredInput()\"\n  [hasPrefix]=\"!!prefix()\"\n  solaris-popover-trigger\n  [solarisPopoverDisabled]=\"!canOpen()\"\n  [solarisPopoverTriggerFor]=\"matchWidthPopover\"\n  [solarisPopoverMatchTriggerWidth]=\"panelMatchTriggerWidth()\"\n  [solarisPopoverAppearance]=\"popoverAppearance()\"\n  [solarisPopoverPlacement]=\"'bottom'\"\n  [solarisPopoverAlign]=\"'start'\"\n  [solarisPopoverOffset]=\"0\"\n  [solarisPopoverPadding]=\"'none'\"\n  [solarisPopoverRadius]=\"radius()\"\n  [solarisPopoverTopConnected]=\"true\"\n  [solarisPopoverMinWidth]=\"panelMinWidth()\"\n  [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n  [solarisPopoverScrollStrategy]=\"'reposition'\"\n  [solarisPopoverCloseOnEscape]=\"false\"\n  [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n  @if (prefix(); as iconName) {\n    <span solaris-form-prefix>\n      <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n    </span>\n  }\n  <ng-content\n    select=\"[solaris-form-prefix]\"\n    ngProjectAs=\"[solaris-form-prefix]\"\n  />\n\n  <div\n    #triggerEl\n    class=\"solaris-select__trigger\"\n    [id]=\"elementId() + '--trigger'\"\n    solaris-form-field-trigger\n    role=\"combobox\"\n    tabindex=\"0\"\n    [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n    [attr.aria-controls]=\"panelOpen() ? panelId : null\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-activedescendant]=\"activeDescendantId()\"\n    [attr.aria-labelledby]=\"ariaLabelledbyText() ?? null\"\n    [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n    (keydown)=\"onTriggerKeydown($event)\"\n    (focus)=\"onTriggerFocus()\"\n    (blur)=\"onTriggerBlur()\"\n  >\n    @if (searchable() && panelOpen()) {\n      <input\n        #searchInput\n        type=\"text\"\n        class=\"solaris-select__search-input\"\n        [attr.placeholder]=\"searchPlaceholderText()\"\n        [value]=\"searchQuery()\"\n        (input)=\"onSearchInput($event)\"\n        (keydown)=\"onSearchKeydown($event)\"\n        (click)=\"$event.stopPropagation()\"\n        role=\"searchbox\"\n        autocomplete=\"off\"\n      />\n    } @else {\n      <span class=\"solaris-select__value\">\n        @if (displayText()) {\n          <span class=\"solaris-select__value-text\">{{ displayText() }}</span>\n        } @else {\n          <span class=\"solaris-select__placeholder\">{{\n            placeholderText()\n          }}</span>\n        }\n      </span>\n    }\n\n    <span class=\"solaris-select__actions\">\n      @if (canClear()) {\n        <button\n          type=\"button\"\n          class=\"solaris-select__clear\"\n          [attr.aria-label]=\"clearAriaLabel()\"\n          (click)=\"clearValue(); $event.stopPropagation()\"\n          tabindex=\"-1\"\n        >\n          <solaris-icon name=\"x\" [decorative]=\"true\" />\n        </button>\n      }\n\n      <solaris-icon\n        class=\"solaris-select__dropdown-icon\"\n        name=\"chevron-down\"\n        [decorative]=\"true\"\n        size=\"sm\"\n      />\n    </span>\n  </div>\n\n  <ng-content\n    select=\"[solaris-form-suffix]\"\n    ngProjectAs=\"[solaris-form-suffix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-label-action]\"\n    ngProjectAs=\"[solaris-form-label-action]\"\n  />\n</solaris-form-field>\n\n<ng-template #matchWidthPopover=\"solarisPopover\" solaris-popover>\n  <div\n    class=\"solaris-select__panel\"\n    role=\"listbox\"\n    [attr.id]=\"panelId\"\n    tabindex=\"-1\"\n    (click)=\"onPanelClick($event)\"\n    (keydown)=\"onPanelKeydown($event)\"\n  >\n    @if (loading()) {\n      <div class=\"solaris-select__loading\">\n        <span class=\"solaris-select__loading-text\">{{\n          loadingTextValue()\n        }}</span>\n      </div>\n    } @else if (showNoResults()) {\n      <div class=\"solaris-select__no-results\">\n        <span class=\"solaris-select__no-results-text\">{{\n          noResultsTextValue()\n        }}</span>\n      </div>\n    } @else if (showEmpty()) {\n      <div class=\"solaris-select__empty\">\n        <span class=\"solaris-select__empty-text\">{{ emptyTextValue() }}</span>\n      </div>\n    } @else {\n      <div\n        class=\"solaris-select__options\"\n        [style.max-height]=\"panelMaxHeight()\"\n      >\n        <ng-content select=\"solaris-option, solaris-option-group\" />\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [":host{--solaris-select-icon-color: var(--solaris-text-muted);--solaris-select-font-size: var(--solaris-font-size-md);--solaris-select-value-color: var(--solaris-text-default);--solaris-select-line-height: var(--solaris-line-height-md);--solaris-select-placeholder-color: var(--solaris-text-muted);outline:none;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;display:inline-flex;flex-direction:column;box-sizing:border-box;font-family:var(--solaris-font-family-sans),system-ui}.solaris-select__trigger{flex:1;padding:0;min-width:0;border:none;display:flex;outline:none;cursor:pointer;align-items:center;box-sizing:border-box;background:transparent;gap:var(--solaris-spacing-2)}:host ::ng-deep .solaris-form-field__message-row{margin-top:0}:host ::ng-deep .solaris-select--panel-open .solaris-form-field__message-row{display:none}.solaris-select__value{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-select__value-text{color:var(--solaris-select-value-color);font-size:var(--solaris-select-font-size);line-height:var(--solaris-select-line-height)}.solaris-select__placeholder{font-size:var(--solaris-select-font-size);color:var(--solaris-select-placeholder-color);line-height:var(--solaris-select-line-height)}.solaris-select__actions{display:flex;flex-shrink:0;align-items:center;gap:var(--solaris-spacing-2)}.solaris-select__clear solaris-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl)}.solaris-select__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl);color:var(--solaris-select-icon-color);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-select__clear:hover{color:var(--solaris-text-default)}.solaris-select__dropdown-icon solaris-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl)}.solaris-select__dropdown-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl);color:var(--solaris-select-icon-color);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-select__dropdown-icon{transform:rotate(180deg)}.solaris-select__panel{display:flex;overflow-y:auto;flex-direction:column;overscroll-behavior:contain}.solaris-select__search-input{flex:1;margin:0;padding:0;min-width:0;border:none;outline:none;font-family:inherit;box-sizing:border-box;background:transparent;color:var(--solaris-select-value-color);font-size:var(--solaris-select-font-size);line-height:var(--solaris-select-line-height)}.solaris-select__search-input::placeholder{color:var(--solaris-select-placeholder-color)}.solaris-select__loading,.solaris-select__no-results,.solaris-select__empty{display:flex;align-items:center;justify-content:center;color:var(--solaris-text-muted);padding:var(--solaris-spacing-4);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}.solaris-select__options{display:flex;flex-direction:column;gap:var(--solaris-spacing-1);padding:var(--solaris-spacing-1) var(--solaris-spacing-2)}:host([data-disabled]){cursor:not-allowed}:host([data-readonly]){cursor:default}@media(prefers-reduced-motion:reduce){.solaris-select__dropdown-icon,.solaris-select__clear{transition:none}}[data-reduced-motion=true] .solaris-select__dropdown-icon,[data-reduced-motion=true] .solaris-select__clear{transition:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { popoverTrigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SolarisPopoverTriggerDirective), { isSignal: true }] }], searchInputRef: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }], triggerElement: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], formFieldElement: [{ type: i0.ViewChild, args: ['formFieldRef', { isSignal: true }] }], options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SolarisOptionComponent), { ...{
                             descendants: true,
                         }, isSignal: true }] }], optionGroups: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SolarisOptionGroupComponent), { ...{
@@ -4850,7 +5043,7 @@ class SolarisTooltipPanelComponent {
         this.cdr.markForCheck();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisTooltipPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisTooltipPanelComponent, isStandalone: true, selector: "solaris-tooltip-panel", host: { classAttribute: "solaris-tooltip-panel" }, ngImport: i0, template: "<div\n  class=\"solaris-tooltip-panel__container\"\n  [attr.data-appearance]=\"data.appearance\"\n  [attr.data-size]=\"data.size\"\n  [attr.data-radius]=\"data.radius\"\n  [attr.data-placement]=\"data.placement\"\n  [id]=\"data.panelId\"\n  [style.max-width]=\"data.maxWidth\"\n>\n  @if (data.arrow) {\n    <div class=\"solaris-tooltip-panel__arrow {{ data.arrowClass }}\"></div>\n  }\n\n  <div class=\"solaris-tooltip-panel__content\">\n    @if (data.icon) {\n      <solaris-icon\n        [name]=\"data.icon\"\n        [decorative]=\"data.iconDecorative\"\n        class=\"solaris-tooltip-panel__icon\"\n      />\n    }\n\n    <div class=\"solaris-tooltip-panel__text\">\n      @if (data.title) {\n        <div class=\"solaris-tooltip-panel__title\">{{ data.title }}</div>\n      }\n\n      @if (data.body) {\n        <div class=\"solaris-tooltip-panel__body\">{{ data.body }}</div>\n      }\n\n      @if (data.contentTemplate) {\n        <ng-container [ngTemplateOutlet]=\"data.contentTemplate\" />\n      }\n    </div>\n  </div>\n\n  @if (data.closeable) {\n    <button\n      class=\"solaris-tooltip-panel__close\"\n      type=\"button\"\n      (click)=\"data.close()\"\n      attr.aria-label=\"{{ data.closeLabel }}\"\n    >\n      <solaris-icon name=\"x\" [decorative]=\"true\" />\n    </button>\n  }\n</div>\n", styles: [".solaris-tooltip-panel{--solaris-tooltip-max-width: 512px;--solaris-tooltip-border-width: 0px;--solaris-tooltip-border-color: transparent;--solaris-tooltip-gap: var(--solaris-spacing-5);--solaris-tooltip-shadow: var(--solaris-shadow-sm);--solaris-tooltip-radius: var(--solaris-radius-md);--solaris-tooltip-color: var(--solaris-text-default);--solaris-tooltip-icon-size: var(--solaris-font-size-md);--solaris-tooltip-arrow-size: var(--solaris-font-size-xs);--solaris-tooltip-padding-block: var(--solaris-spacing-3);--solaris-tooltip-padding-inline: var(--solaris-spacing-5);--solaris-tooltip-background: var(--solaris-surface-raised);--solaris-tooltip-offset: var(--solaris-spacing-half);outline:none;display:block}.solaris-tooltip-panel__container{--solaris-tooltip-background: var(--solaris-surface-raised);display:flex;outline:none;overflow:visible;position:relative;word-break:normal;white-space:normal;box-sizing:border-box;align-items:flex-start;gap:var(--solaris-tooltip-gap);color:var(--solaris-tooltip-color);box-shadow:var(--solaris-tooltip-shadow);line-height:var(--solaris-line-height-md);max-width:var(--solaris-tooltip-max-width);border-radius:var(--solaris-tooltip-radius);background:var(--solaris-tooltip-background);padding-block:var(--solaris-tooltip-padding-block);padding-inline:var(--solaris-tooltip-padding-inline);border:var(--solaris-tooltip-border-width) solid var(--solaris-tooltip-border-color)}.solaris-tooltip-panel__arrow{--solaris-tooltip-arrow-outer-size: calc( var(--solaris-tooltip-arrow-size) + var(--solaris-tooltip-border-width) + var(--solaris-tooltip-border-width) );width:0;height:0;position:absolute;pointer-events:none}.solaris-tooltip-panel__arrow:before,.solaris-tooltip-panel__arrow:after{width:0;height:0;content:\"\";position:absolute;border-style:var(--solaris-border-style-default)}.solaris-tooltip-arrow--bottom{left:50%;transform:translate(-50%);bottom:calc(0px - var(--solaris-tooltip-border-width))}.solaris-tooltip-arrow--bottom:before,.solaris-tooltip-arrow--bottom:after{left:50%;transform:translate(-50%);top:calc(0px - var(--solaris-tooltip-border-width))}.solaris-tooltip-arrow--bottom:before{border-width:var(--solaris-tooltip-arrow-outer-size) var(--solaris-tooltip-arrow-outer-size) 0;border-color:var(--solaris-tooltip-border-color) transparent transparent}.solaris-tooltip-arrow--bottom:after{border-width:var(--solaris-tooltip-arrow-size) var(--solaris-tooltip-arrow-size) 0;border-color:var(--solaris-tooltip-background) transparent transparent}.solaris-tooltip-arrow--top{left:50%;transform:translate(-50%);top:calc(0px - var(--solaris-tooltip-border-width))}.solaris-tooltip-arrow--top:before,.solaris-tooltip-arrow--top:after{left:50%;transform:translate(-50%);bottom:calc(0px - var(--solaris-tooltip-border-width))}.solaris-tooltip-arrow--top:before{border-width:0 var(--solaris-tooltip-arrow-outer-size) var(--solaris-tooltip-arrow-outer-size);border-color:transparent transparent var(--solaris-tooltip-border-color)}.solaris-tooltip-arrow--top:after{border-width:0 var(--solaris-tooltip-arrow-size) var(--solaris-tooltip-arrow-size);border-color:transparent transparent var(--solaris-tooltip-background)}.solaris-tooltip-arrow--right{top:50%;transform:translateY(-50%);right:calc(0px - var(--solaris-tooltip-border-width))}.solaris-tooltip-arrow--right:before,.solaris-tooltip-arrow--right:after{top:50%;transform:translateY(-50%);left:calc(0px - var(--solaris-tooltip-border-width))}.solaris-tooltip-arrow--right:before{border-width:var(--solaris-tooltip-arrow-outer-size) 0 var(--solaris-tooltip-arrow-outer-size) var(--solaris-tooltip-arrow-outer-size);border-color:transparent transparent transparent var(--solaris-tooltip-border-color)}.solaris-tooltip-arrow--right:after{border-width:var(--solaris-tooltip-arrow-size) 0 var(--solaris-tooltip-arrow-size) var(--solaris-tooltip-arrow-size);border-color:transparent transparent transparent var(--solaris-tooltip-background)}.solaris-tooltip-arrow--left{top:50%;transform:translateY(-50%);left:calc(0px - var(--solaris-tooltip-border-width))}.solaris-tooltip-arrow--left:before,.solaris-tooltip-arrow--left:after{top:50%;transform:translateY(-50%);right:calc(0px - var(--solaris-tooltip-border-width))}.solaris-tooltip-arrow--left:before{border-width:var(--solaris-tooltip-arrow-outer-size) var(--solaris-tooltip-arrow-outer-size) var(--solaris-tooltip-arrow-outer-size) 0;border-color:transparent var(--solaris-tooltip-border-color) transparent transparent}.solaris-tooltip-arrow--left:after{border-width:var(--solaris-tooltip-arrow-size) var(--solaris-tooltip-arrow-size) var(--solaris-tooltip-arrow-size) 0;border-color:transparent var(--solaris-tooltip-background) transparent transparent}.solaris-tooltip-panel__container[data-placement=top-start] .solaris-tooltip-arrow--bottom,.solaris-tooltip-panel__container[data-placement=bottom-start] .solaris-tooltip-arrow--top{left:calc(var(--solaris-tooltip-arrow-size) + var(--solaris-tooltip-radius));transform:none}.solaris-tooltip-panel__container[data-placement=top-end] .solaris-tooltip-arrow--bottom,.solaris-tooltip-panel__container[data-placement=bottom-end] .solaris-tooltip-arrow--top{left:auto;right:calc(var(--solaris-tooltip-arrow-size) + var(--solaris-tooltip-radius));transform:none}.solaris-tooltip-panel__container[data-placement=left-start] .solaris-tooltip-arrow--right,.solaris-tooltip-panel__container[data-placement=right-start] .solaris-tooltip-arrow--left{top:calc(var(--solaris-tooltip-arrow-size) + var(--solaris-tooltip-radius));transform:none}.solaris-tooltip-panel__container[data-placement=left-end] .solaris-tooltip-arrow--right,.solaris-tooltip-panel__container[data-placement=right-end] .solaris-tooltip-arrow--left{top:auto;bottom:calc(var(--solaris-tooltip-arrow-size) + var(--solaris-tooltip-radius));transform:none}.solaris-tooltip-panel__content{flex:1;min-width:0;display:flex;align-items:flex-start;gap:var(--solaris-tooltip-gap)}.solaris-tooltip-panel__icon{flex-shrink:0;display:inline-flex;margin-top:var(--solaris-tooltip-offset);font-size:var(--solaris-tooltip-icon-size);width:var(--solaris-tooltip-icon-size);height:var(--solaris-tooltip-icon-size)}.solaris-tooltip-panel__text{min-width:0;display:flex;gap:var(--solaris-tooltip-offset);flex-direction:column}.solaris-tooltip-panel__title{overflow:hidden;font-weight:var(--solaris-font-weight-semibold);white-space:nowrap;text-overflow:ellipsis}.solaris-tooltip-panel__body{word-break:normal;white-space:normal}.solaris-tooltip-panel__close{opacity:var(--solaris-opacity-70);border:none;flex-shrink:0;color:inherit;cursor:pointer;background:none;padding:0;border-radius:50%;align-items:center;display:inline-flex;margin-top:var(--solaris-tooltip-offset);justify-content:center;font-size:var(--solaris-tooltip-icon-size);transition:opacity var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard);width:var(--solaris-tooltip-icon-size);height:var(--solaris-tooltip-icon-size)}.solaris-tooltip-panel__close:hover,.solaris-tooltip-panel__close:focus-visible{opacity:1}.solaris-tooltip-panel__container[data-appearance=outline]{--solaris-tooltip-border-color: var(--solaris-border-default);--solaris-tooltip-border-width: var(--solaris-border-width-sm);background:var(--solaris-tooltip-background);border:var(--solaris-tooltip-border-width) solid var(--solaris-tooltip-border-color)}.solaris-tooltip-panel__container[data-appearance=surface]{--solaris-tooltip-border-width: 0px;--solaris-tooltip-border-color: transparent;border:0;background:var(--solaris-tooltip-background)}.solaris-tooltip-panel__container[data-appearance=inverse]{--solaris-tooltip-border-width: 0px;--solaris-tooltip-border-color: transparent;--solaris-tooltip-background: var(--solaris-text-default);border:0;color:var(--solaris-surface-raised);background:var(--solaris-tooltip-background)}.solaris-tooltip-panel__container[data-size=sm]{padding-block:var(--solaris-spacing-2);padding-inline:var(--solaris-spacing-5);font-size:var(--solaris-font-size-xs);--solaris-tooltip-arrow-size: var(--solaris-font-size-2xs)}.solaris-tooltip-panel__container[data-size=md]{padding-block:var(--solaris-spacing-3);padding-inline:var(--solaris-spacing-6);font-size:var(--solaris-font-size-sm);--solaris-tooltip-arrow-size: var(--solaris-font-size-xs)}.solaris-tooltip-panel__container[data-size=lg]{padding-block:var(--solaris-spacing-4);padding-inline:var(--solaris-spacing-8);font-size:var(--solaris-font-size-md);--solaris-tooltip-arrow-size: var(--solaris-font-size-md)}.solaris-tooltip-panel__container[data-size=sm] .solaris-tooltip-panel__icon,.solaris-tooltip-panel__container[data-size=sm] .solaris-tooltip-panel__close{font-size:var(--solaris-tooltip-icon-size);width:var(--solaris-tooltip-icon-size);height:var(--solaris-tooltip-icon-size)}.solaris-tooltip-panel__container[data-size=md] .solaris-tooltip-panel__icon,.solaris-tooltip-panel__container[data-size=md] .solaris-tooltip-panel__close{font-size:var(--solaris-font-size-xl);width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl)}.solaris-tooltip-panel__container[data-size=lg] .solaris-tooltip-panel__icon,.solaris-tooltip-panel__container[data-size=lg] .solaris-tooltip-panel__close{font-size:var(--solaris-font-size-2xl);width:var(--solaris-font-size-2xl);height:var(--solaris-font-size-2xl)}.solaris-tooltip-panel__container[data-radius=sm]{border-radius:var(--solaris-radius-sm)}.solaris-tooltip-panel__container[data-radius=md]{border-radius:var(--solaris-radius-md)}.solaris-tooltip-panel__container[data-radius=lg]{border-radius:var(--solaris-radius-lg)}@media(prefers-reduced-motion:reduce){.solaris-tooltip-panel__close{transition:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisTooltipPanelComponent, isStandalone: true, selector: "solaris-tooltip-panel", host: { classAttribute: "solaris-tooltip-panel" }, ngImport: i0, template: "<div\n  class=\"solaris-tooltip-panel__container\"\n  [attr.data-appearance]=\"data.appearance\"\n  [attr.data-size]=\"data.size\"\n  [attr.data-radius]=\"data.radius\"\n  [attr.data-placement]=\"data.placement\"\n  [id]=\"data.panelId\"\n  [style.max-width]=\"data.maxWidth\"\n>\n  @if (data.arrow) {\n    <div class=\"solaris-tooltip-panel__arrow {{ data.arrowClass }}\"></div>\n  }\n\n  <div class=\"solaris-tooltip-panel__content\">\n    @if (data.icon) {\n      <solaris-icon\n        [name]=\"data.icon\"\n        [decorative]=\"data.iconDecorative\"\n        class=\"solaris-tooltip-panel__icon\"\n      />\n    }\n\n    <div class=\"solaris-tooltip-panel__text\">\n      @if (data.title) {\n        <div class=\"solaris-tooltip-panel__title\">{{ data.title }}</div>\n      }\n\n      @if (data.body) {\n        <div class=\"solaris-tooltip-panel__body\">{{ data.body }}</div>\n      }\n\n      @if (data.contentTemplate) {\n        <ng-container [ngTemplateOutlet]=\"data.contentTemplate\" />\n      }\n    </div>\n  </div>\n\n  @if (data.closeable) {\n    <button\n      class=\"solaris-tooltip-panel__close\"\n      type=\"button\"\n      (click)=\"data.close()\"\n      attr.aria-label=\"{{ data.closeLabel }}\"\n    >\n      <solaris-icon name=\"x\" [decorative]=\"true\" />\n    </button>\n  }\n</div>\n", styles: [".solaris-tooltip-panel{--solaris-tooltip-max-width: 512px;--solaris-tooltip-border-width: 0px;--solaris-tooltip-border-color: transparent;--solaris-tooltip-gap: var(--solaris-spacing-5);--solaris-tooltip-shadow: var(--solaris-shadow-sm);--solaris-tooltip-radius: var(--solaris-radius-md);--solaris-tooltip-color: var(--solaris-text-default);--solaris-tooltip-icon-size: var(--solaris-font-size-md);--solaris-tooltip-arrow-size: var(--solaris-font-size-xs);--solaris-tooltip-padding-block: var(--solaris-spacing-3);--solaris-tooltip-padding-inline: var(--solaris-spacing-5);--solaris-tooltip-background: var(--solaris-surface-raised);--solaris-tooltip-offset: var(--solaris-spacing-half);outline:none;display:block}.solaris-tooltip-panel__container{--solaris-tooltip-background: var(--solaris-surface-raised);display:flex;outline:none;overflow:visible;position:relative;word-break:normal;white-space:normal;box-sizing:border-box;align-items:flex-start;gap:var(--solaris-tooltip-gap);color:var(--solaris-tooltip-color);box-shadow:var(--solaris-tooltip-shadow);line-height:var(--solaris-line-height-md);max-width:var(--solaris-tooltip-max-width);border-radius:var(--solaris-tooltip-radius);background:var(--solaris-tooltip-background);padding-block:var(--solaris-tooltip-padding-block);padding-inline:var(--solaris-tooltip-padding-inline);border:var(--solaris-tooltip-border-width) solid var(--solaris-tooltip-border-color)}.solaris-tooltip-panel__arrow{--solaris-tooltip-arrow-outer-size: calc( var(--solaris-tooltip-arrow-size) + var(--solaris-tooltip-border-width) + var(--solaris-tooltip-border-width) );width:0;height:0;position:absolute;pointer-events:none}.solaris-tooltip-panel__arrow:before,.solaris-tooltip-panel__arrow:after{width:0;height:0;content:\"\";position:absolute;border-style:var(--solaris-border-style-default)}.solaris-tooltip-arrow--bottom{left:50%;transform:translate(-50%);bottom:calc(0px - var(--solaris-tooltip-border-width))}.solaris-tooltip-arrow--bottom:before,.solaris-tooltip-arrow--bottom:after{left:50%;transform:translate(-50%);top:calc(0px - var(--solaris-tooltip-border-width))}.solaris-tooltip-arrow--bottom:before{border-width:var(--solaris-tooltip-arrow-outer-size) var(--solaris-tooltip-arrow-outer-size) 0;border-color:var(--solaris-tooltip-border-color) transparent transparent}.solaris-tooltip-arrow--bottom:after{border-width:var(--solaris-tooltip-arrow-size) var(--solaris-tooltip-arrow-size) 0;border-color:var(--solaris-tooltip-background) transparent transparent}.solaris-tooltip-arrow--top{left:50%;transform:translate(-50%);top:calc(0px - var(--solaris-tooltip-border-width))}.solaris-tooltip-arrow--top:before,.solaris-tooltip-arrow--top:after{left:50%;transform:translate(-50%);bottom:calc(0px - var(--solaris-tooltip-border-width))}.solaris-tooltip-arrow--top:before{border-width:0 var(--solaris-tooltip-arrow-outer-size) var(--solaris-tooltip-arrow-outer-size);border-color:transparent transparent var(--solaris-tooltip-border-color)}.solaris-tooltip-arrow--top:after{border-width:0 var(--solaris-tooltip-arrow-size) var(--solaris-tooltip-arrow-size);border-color:transparent transparent var(--solaris-tooltip-background)}.solaris-tooltip-arrow--right{top:50%;transform:translateY(-50%);right:calc(0px - var(--solaris-tooltip-border-width))}.solaris-tooltip-arrow--right:before,.solaris-tooltip-arrow--right:after{top:50%;transform:translateY(-50%);left:calc(0px - var(--solaris-tooltip-border-width))}.solaris-tooltip-arrow--right:before{border-width:var(--solaris-tooltip-arrow-outer-size) 0 var(--solaris-tooltip-arrow-outer-size) var(--solaris-tooltip-arrow-outer-size);border-color:transparent transparent transparent var(--solaris-tooltip-border-color)}.solaris-tooltip-arrow--right:after{border-width:var(--solaris-tooltip-arrow-size) 0 var(--solaris-tooltip-arrow-size) var(--solaris-tooltip-arrow-size);border-color:transparent transparent transparent var(--solaris-tooltip-background)}.solaris-tooltip-arrow--left{top:50%;transform:translateY(-50%);left:calc(0px - var(--solaris-tooltip-border-width))}.solaris-tooltip-arrow--left:before,.solaris-tooltip-arrow--left:after{top:50%;transform:translateY(-50%);right:calc(0px - var(--solaris-tooltip-border-width))}.solaris-tooltip-arrow--left:before{border-width:var(--solaris-tooltip-arrow-outer-size) var(--solaris-tooltip-arrow-outer-size) var(--solaris-tooltip-arrow-outer-size) 0;border-color:transparent var(--solaris-tooltip-border-color) transparent transparent}.solaris-tooltip-arrow--left:after{border-width:var(--solaris-tooltip-arrow-size) var(--solaris-tooltip-arrow-size) var(--solaris-tooltip-arrow-size) 0;border-color:transparent var(--solaris-tooltip-background) transparent transparent}.solaris-tooltip-panel__container[data-placement=top-start] .solaris-tooltip-arrow--bottom,.solaris-tooltip-panel__container[data-placement=bottom-start] .solaris-tooltip-arrow--top{left:calc(var(--solaris-tooltip-arrow-size) + var(--solaris-tooltip-radius));transform:none}.solaris-tooltip-panel__container[data-placement=top-end] .solaris-tooltip-arrow--bottom,.solaris-tooltip-panel__container[data-placement=bottom-end] .solaris-tooltip-arrow--top{left:auto;right:calc(var(--solaris-tooltip-arrow-size) + var(--solaris-tooltip-radius));transform:none}.solaris-tooltip-panel__container[data-placement=left-start] .solaris-tooltip-arrow--right,.solaris-tooltip-panel__container[data-placement=right-start] .solaris-tooltip-arrow--left{top:calc(var(--solaris-tooltip-arrow-size) + var(--solaris-tooltip-radius));transform:none}.solaris-tooltip-panel__container[data-placement=left-end] .solaris-tooltip-arrow--right,.solaris-tooltip-panel__container[data-placement=right-end] .solaris-tooltip-arrow--left{top:auto;bottom:calc(var(--solaris-tooltip-arrow-size) + var(--solaris-tooltip-radius));transform:none}.solaris-tooltip-panel__content{flex:1;min-width:0;display:flex;align-items:flex-start;gap:var(--solaris-tooltip-gap)}.solaris-tooltip-panel__icon{flex-shrink:0;display:inline-flex;margin-top:var(--solaris-tooltip-offset);font-size:var(--solaris-tooltip-icon-size);width:var(--solaris-tooltip-icon-size);height:var(--solaris-tooltip-icon-size)}.solaris-tooltip-panel__text{min-width:0;display:flex;gap:var(--solaris-tooltip-offset);flex-direction:column}.solaris-tooltip-panel__title{overflow:hidden;font-weight:var(--solaris-font-weight-semibold);white-space:nowrap;text-overflow:ellipsis}.solaris-tooltip-panel__body{word-break:normal;white-space:normal}.solaris-tooltip-panel__close{opacity:var(--solaris-opacity-70);border:none;flex-shrink:0;color:inherit;cursor:pointer;background:none;padding:0;border-radius:50%;align-items:center;display:inline-flex;margin-top:var(--solaris-tooltip-offset);justify-content:center;font-size:var(--solaris-tooltip-icon-size);transition:opacity var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard);width:var(--solaris-tooltip-icon-size);height:var(--solaris-tooltip-icon-size)}.solaris-tooltip-panel__close:hover,.solaris-tooltip-panel__close:focus-visible{opacity:1}.solaris-tooltip-panel__container[data-appearance=outline]{--solaris-tooltip-border-color: var(--solaris-border-default);--solaris-tooltip-border-width: var(--solaris-border-width-sm);background:var(--solaris-tooltip-background);border:var(--solaris-tooltip-border-width) solid var(--solaris-tooltip-border-color)}.solaris-tooltip-panel__container[data-appearance=surface]{--solaris-tooltip-border-width: 0px;--solaris-tooltip-border-color: transparent;border:0;background:var(--solaris-tooltip-background)}.solaris-tooltip-panel__container[data-appearance=inverse]{--solaris-tooltip-border-width: 0px;--solaris-tooltip-border-color: transparent;--solaris-tooltip-background: var(--solaris-text-default);border:0;color:var(--solaris-surface-raised);background:var(--solaris-tooltip-background)}.solaris-tooltip-panel__container[data-size=sm]{padding-block:var(--solaris-spacing-2);padding-inline:var(--solaris-spacing-5);font-size:var(--solaris-font-size-xs);--solaris-tooltip-arrow-size: var(--solaris-font-size-2xs)}.solaris-tooltip-panel__container[data-size=md]{padding-block:var(--solaris-spacing-3);padding-inline:var(--solaris-spacing-6);font-size:var(--solaris-font-size-sm);--solaris-tooltip-arrow-size: var(--solaris-font-size-xs)}.solaris-tooltip-panel__container[data-size=lg]{padding-block:var(--solaris-spacing-4);padding-inline:var(--solaris-spacing-8);font-size:var(--solaris-font-size-md);--solaris-tooltip-arrow-size: var(--solaris-font-size-md)}.solaris-tooltip-panel__container[data-size=sm] .solaris-tooltip-panel__icon,.solaris-tooltip-panel__container[data-size=sm] .solaris-tooltip-panel__close{font-size:var(--solaris-tooltip-icon-size);width:var(--solaris-tooltip-icon-size);height:var(--solaris-tooltip-icon-size)}.solaris-tooltip-panel__container[data-size=md] .solaris-tooltip-panel__icon,.solaris-tooltip-panel__container[data-size=md] .solaris-tooltip-panel__close{font-size:var(--solaris-font-size-xl);width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl)}.solaris-tooltip-panel__container[data-size=lg] .solaris-tooltip-panel__icon,.solaris-tooltip-panel__container[data-size=lg] .solaris-tooltip-panel__close{font-size:var(--solaris-font-size-2xl);width:var(--solaris-font-size-2xl);height:var(--solaris-font-size-2xl)}.solaris-tooltip-panel__container[data-radius=sm]{border-radius:var(--solaris-radius-sm)}.solaris-tooltip-panel__container[data-radius=md]{border-radius:var(--solaris-radius-md)}.solaris-tooltip-panel__container[data-radius=lg]{border-radius:var(--solaris-radius-lg)}@media(prefers-reduced-motion:reduce){.solaris-tooltip-panel__close{transition:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisTooltipPanelComponent, decorators: [{
             type: Component,
@@ -6491,7 +6684,7 @@ class SolarisMultiSelectComponent extends SolarisFormControl {
                 provide: SolarisFormControl,
                 useExisting: forwardRef(() => SolarisMultiSelectComponent),
             },
-        ], queries: [{ propertyName: "options", predicate: SolarisOptionComponent, descendants: true, isSignal: true }, { propertyName: "optionGroups", predicate: SolarisOptionGroupComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "popoverTrigger", first: true, predicate: SolarisPopoverTriggerDirective, descendants: true, isSignal: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "triggerElement", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "formFieldElement", first: true, predicate: ["formFieldRef"], descendants: true, isSignal: true }, { propertyName: "triggerContentRef", first: true, predicate: ["triggerContent"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<solaris-form-field\n  #formFieldRef\n  [control]=\"this\"\n  [label]=\"labelText()\"\n  [hint]=\"hintText()\"\n  [error]=\"errorText()\"\n  [appearance]=\"appearance()\"\n  [density]=\"effectiveDensity()\"\n  [radius]=\"radius()\"\n  [invalid]=\"isEffectivelyInvalid()\"\n  [required]=\"requiredInput()\"\n  [hasPrefix]=\"!!prefix()\"\n  solaris-popover-trigger\n  [solarisPopoverDisabled]=\"!canOpen()\"\n  [solarisPopoverTriggerFor]=\"matchWidthPopover\"\n  [class.solaris-multi-select--panel-open]=\"panelOpen()\"\n  [solarisPopoverMatchTriggerWidth]=\"panelMatchTriggerWidth()\"\n  [solarisPopoverAppearance]=\"popoverAppearance()\"\n  [solarisPopoverPlacement]=\"'bottom'\"\n  [solarisPopoverAlign]=\"'start'\"\n  [solarisPopoverOffset]=\"0\"\n  [solarisPopoverPadding]=\"'none'\"\n  [solarisPopoverRadius]=\"radius()\"\n  [solarisPopoverTopConnected]=\"true\"\n  [solarisPopoverMinWidth]=\"panelMinWidth()\"\n  [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n  [solarisPopoverScrollStrategy]=\"'reposition'\"\n  [solarisPopoverCloseOnEscape]=\"false\"\n  [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n  @if (prefix(); as iconName) {\n    <span solaris-form-prefix>\n      <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n    </span>\n  }\n  <ng-content select=\"[solaris-form-prefix]\" />\n\n  <div\n    #triggerEl\n    class=\"solaris-multi-select__trigger\"\n    [id]=\"elementId() + '--trigger'\"\n    solaris-form-field-trigger\n    role=\"combobox\"\n    tabindex=\"0\"\n    [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n    [attr.aria-controls]=\"panelOpen() ? panelId : null\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-activedescendant]=\"activeDescendantId()\"\n    [attr.aria-labelledby]=\"ariaLabelledbyText() ?? null\"\n    [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n    (keydown)=\"onTriggerKeydown($event)\"\n    (focus)=\"onTriggerFocus()\"\n    (blur)=\"onTriggerBlur()\"\n  >\n    <div class=\"solaris-multi-select__trigger-content\" #triggerContent>\n      @if (displayMode() === 'auto') {\n        @if (hasValue()) {\n          @if (showCountOnly()) {\n            <span\n              class=\"solaris-multi-select__chip\"\n              [solarisTooltip]=\"countTooltipText()\"\n              [solarisTooltipTrigger]=\"'hover'\"\n              tabindex=\"0\"\n            >\n              <span class=\"solaris-multi-select__chip-label\">{{\n                summaryText()\n              }}</span>\n            </span>\n          } @else {\n            <div\n              class=\"solaris-multi-select__chips solaris-multi-select__chips--auto\"\n            >\n              @for (opt of autoVisibleChips(); track opt) {\n                <span class=\"solaris-multi-select__chip\" role=\"listitem\">\n                  <span class=\"solaris-multi-select__chip-label\">{{\n                    getOptionDisplayLabel(opt)\n                  }}</span>\n                  @if (!isEffectivelyDisabled() && !isEffectivelyReadonly()) {\n                    <button\n                      type=\"button\"\n                      class=\"solaris-multi-select__chip-remove\"\n                      [attr.aria-label]=\"removeChipAriaLabel()\"\n                      (click)=\"removeChip(opt, $event)\"\n                      tabindex=\"-1\"\n                    >\n                      <solaris-icon name=\"x\" [decorative]=\"true\" />\n                    </button>\n                  }\n                </span>\n              }\n              @if (autoShowOverflow()) {\n                <span\n                  class=\"solaris-multi-select__chip-overflow\"\n                  [solarisTooltip]=\"autoOverflowTooltipText()\"\n                  [solarisTooltipTrigger]=\"'hover'\"\n                  tabindex=\"0\"\n                  [attr.aria-label]=\"\n                    '+ ' +\n                    autoOverflowCount() +\n                    ' ' +\n                    selectedLabels().join(', ')\n                  \"\n                  >+{{ autoOverflowCount() }}</span\n                >\n              }\n            </div>\n          }\n        }\n        @if (searchable() && panelOpen()) {\n          <input\n            #searchInput\n            type=\"text\"\n            class=\"solaris-multi-select__search-input\"\n            [attr.placeholder]=\"searchPlaceholderText()\"\n            [value]=\"searchQuery()\"\n            (input)=\"onSearchInput($event)\"\n            (keydown)=\"onSearchKeydown($event)\"\n            (click)=\"$event.stopPropagation()\"\n            role=\"searchbox\"\n            autocomplete=\"off\"\n          />\n        }\n        @if (!hasValue() && !(searchable() && panelOpen())) {\n          <span class=\"solaris-multi-select__value\">\n            <span class=\"solaris-multi-select__placeholder\">{{\n              placeholderText()\n            }}</span>\n          </span>\n        }\n      } @else {\n        @if (searchable() && panelOpen()) {\n          <input\n            #searchInput\n            type=\"text\"\n            class=\"solaris-multi-select__search-input\"\n            [attr.placeholder]=\"searchPlaceholderText()\"\n            [value]=\"searchQuery()\"\n            (input)=\"onSearchInput($event)\"\n            (keydown)=\"onSearchKeydown($event)\"\n            (click)=\"$event.stopPropagation()\"\n            role=\"searchbox\"\n            autocomplete=\"off\"\n          />\n        } @else {\n          @if (hasValue()) {\n            @if (displayMode() === 'chips') {\n              <div class=\"solaris-multi-select__chips\">\n                @for (\n                  opt of selectedOptions().slice(0, maxVisibleChips());\n                  track opt\n                ) {\n                  <span class=\"solaris-multi-select__chip\" role=\"listitem\">\n                    <span class=\"solaris-multi-select__chip-label\">{{\n                      getOptionDisplayLabel(opt)\n                    }}</span>\n                    @if (!isEffectivelyDisabled() && !isEffectivelyReadonly()) {\n                      <button\n                        type=\"button\"\n                        class=\"solaris-multi-select__chip-remove\"\n                        [attr.aria-label]=\"removeChipAriaLabel()\"\n                        (click)=\"removeChip(opt, $event)\"\n                        tabindex=\"-1\"\n                      >\n                        <solaris-icon name=\"x\" [decorative]=\"true\" />\n                      </button>\n                    }\n                  </span>\n                }\n                @if (overflowCount() > 0) {\n                  <span\n                    class=\"solaris-multi-select__chip-overflow\"\n                    [attr.aria-label]=\"\n                      '+ ' + overflowCount() + ' ' + selectedLabels().join(', ')\n                    \"\n                  >\n                    {{ overflowText() }}\n                  </span>\n                }\n              </div>\n            } @else if (displayMode() === 'comma') {\n              <span class=\"solaris-multi-select__value\">\n                <span class=\"solaris-multi-select__value-text\">{{\n                  commaText()\n                }}</span>\n              </span>\n            } @else {\n              <span\n                class=\"solaris-multi-select__chip\"\n                [solarisTooltip]=\"countTooltipText()\"\n                [solarisTooltipTrigger]=\"'hover'\"\n                tabindex=\"0\"\n              >\n                <span class=\"solaris-multi-select__chip-label\">{{\n                  summaryText()\n                }}</span>\n              </span>\n            }\n          } @else {\n            <span class=\"solaris-multi-select__value\">\n              <span class=\"solaris-multi-select__placeholder\">{{\n                placeholderText()\n              }}</span>\n            </span>\n          }\n        }\n      }\n    </div>\n\n    <span class=\"solaris-multi-select__actions\">\n      @if (canClear()) {\n        <button\n          type=\"button\"\n          class=\"solaris-multi-select__clear\"\n          [attr.aria-label]=\"clearAriaLabel()\"\n          (click)=\"clearValue(); $event.stopPropagation()\"\n          tabindex=\"-1\"\n        >\n          <solaris-icon name=\"x\" [decorative]=\"true\" />\n        </button>\n      }\n\n      <solaris-icon\n        class=\"solaris-multi-select__dropdown-icon\"\n        name=\"chevron-down\"\n        [decorative]=\"true\"\n        size=\"sm\"\n      />\n    </span>\n  </div>\n\n  <ng-content select=\"[solaris-form-suffix]\" />\n</solaris-form-field>\n\n<ng-template #matchWidthPopover=\"solarisPopover\" solaris-popover>\n  <div\n    class=\"solaris-multi-select__panel\"\n    role=\"listbox\"\n    [attr.aria-multiselectable]=\"'true'\"\n    [attr.id]=\"panelId\"\n    tabindex=\"-1\"\n    (click)=\"onPanelClick($event)\"\n    (keydown)=\"onPanelKeydown($event)\"\n  >\n    @if (selectAll() && !loading()) {\n      <div\n        class=\"solaris-multi-select__select-all\"\n        role=\"option\"\n        aria-selected=\"false\"\n        tabindex=\"-1\"\n        (click)=\"handleSelectAll()\"\n        (keydown.enter)=\"handleSelectAll()\"\n        (keydown.space)=\"handleSelectAll(); $event.preventDefault()\"\n        [class.solaris-multi-select__select-all--readonly]=\"\n          isEffectivelyReadonly()\n        \"\n      >\n        <span\n          class=\"solaris-multi-select__select-all-checkbox\"\n          [class.solaris-multi-select__select-all-checkbox--checked]=\"\n            isAllSelected()\n          \"\n          [class.solaris-multi-select__select-all-checkbox--partial]=\"\n            isPartialSelected()\n          \"\n        >\n          @if (isAllSelected()) {\n            <span class=\"solaris-multi-select__select-all-checkbox-icon\">\n              <solaris-icon name=\"check\" [decorative]=\"true\" />\n            </span>\n          } @else if (isPartialSelected()) {\n            <span class=\"solaris-multi-select__select-all-checkbox-icon\">\n              <solaris-icon name=\"minus\" [decorative]=\"true\" />\n            </span>\n          }\n        </span>\n        <span class=\"solaris-multi-select__select-all-label\">{{\n          selectAllLabelText()\n        }}</span>\n      </div>\n    }\n\n    @if (loading()) {\n      <div class=\"solaris-multi-select__loading\">\n        <span class=\"solaris-multi-select__loading-text\">{{\n          loadingTextValue()\n        }}</span>\n      </div>\n    } @else if (showNoResults()) {\n      <div class=\"solaris-multi-select__no-results\">\n        <span class=\"solaris-multi-select__no-results-text\">{{\n          noResultsTextValue()\n        }}</span>\n      </div>\n    } @else if (showEmpty()) {\n      <div class=\"solaris-multi-select__empty\">\n        <span class=\"solaris-multi-select__empty-text\">{{\n          emptyTextValue()\n        }}</span>\n      </div>\n    } @else {\n      <div\n        class=\"solaris-multi-select__options\"\n        [style.max-height]=\"panelMaxHeight()\"\n      >\n        <ng-content select=\"solaris-option, solaris-option-group\" />\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [":host{--solaris-multi-select-chip-gap: var(--solaris-spacing-1);--solaris-multi-select-chip-radius: var(--solaris-radius-sm);--solaris-multi-select-icon-color: var(--solaris-text-muted);--solaris-multi-select-font-size: var(--solaris-font-size-md);--solaris-multi-select-chip-color: var(--solaris-text-default);--solaris-multi-select-value-color: var(--solaris-text-default);--solaris-multi-select-chip-padding-y: var(--solaris-spacing-1);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-2);--solaris-multi-select-line-height: var(--solaris-line-height-md);--solaris-multi-select-chip-font-size: var(--solaris-font-size-sm);--solaris-multi-select-select-all-height: var(--solaris-spacing-9);--solaris-surface-hover: var(--solaris-surface-subtle);--solaris-primary-muted: var(--solaris-primary-surface);--solaris-on-primary: var(--solaris-primary-on-solid);--solaris-multi-select-placeholder-color: var(--solaris-text-muted);--solaris-multi-select-chip-remove-size: var(--solaris-font-size-md);--solaris-multi-select-chip-background: var(--solaris-surface-subtle);outline:none;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;display:inline-flex;flex-direction:column;box-sizing:border-box;font-family:var(--solaris-font-family-sans),system-ui}.solaris-multi-select__trigger{flex:1;padding:0;min-width:0;border:none;outline:none;display:flex;cursor:pointer;align-items:center;box-sizing:border-box;background:transparent;gap:var(--solaris-spacing-2)}:host ::ng-deep .solaris-form-field__message-row{margin-top:0}:host ::ng-deep .solaris-multi-select--panel-open .solaris-form-field__message-row{display:none}.solaris-multi-select__trigger-content{flex:1;min-width:0;display:flex;overflow:hidden;align-items:center;gap:var(--solaris-spacing-2)}.solaris-multi-select__value{flex:none;min-width:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-multi-select__value-text{color:var(--solaris-multi-select-value-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__placeholder{font-size:var(--solaris-multi-select-font-size);color:var(--solaris-multi-select-placeholder-color);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__chips{flex:1;min-width:0;display:flex;flex-wrap:wrap;overflow:hidden;align-items:center;gap:var(--solaris-multi-select-chip-gap)}.solaris-multi-select__chips--auto{flex:none;flex-wrap:nowrap}.solaris-multi-select__chips--auto .solaris-multi-select__chip{flex-shrink:0}.solaris-multi-select__chip{align-items:center;white-space:nowrap;display:inline-flex;gap:var(--solaris-spacing-1);line-height:var(--solaris-line-height-sm);color:var(--solaris-multi-select-chip-color);font-size:var(--solaris-multi-select-chip-font-size);border-radius:var(--solaris-multi-select-chip-radius);background:var(--solaris-multi-select-chip-background);border:var(--solaris-border-width-sm) solid var(--solaris-border-default);padding:var(--solaris-multi-select-chip-padding-y) var(--solaris-multi-select-chip-padding-x)}.solaris-multi-select__chip-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-multi-select__chip-remove solaris-icon{width:var(--solaris-multi-select-chip-remove-size);height:var(--solaris-multi-select-chip-remove-size)}.solaris-multi-select__chip-remove{padding:0;border:none;display:flex;flex-shrink:0;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;color:var(--solaris-multi-select-icon-color);width:var(--solaris-multi-select-chip-remove-size);height:var(--solaris-multi-select-chip-remove-size);transition:background var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-multi-select__chip-remove:hover{background:var(--solaris-surface-hover)}.solaris-multi-select__chip-overflow{flex-shrink:0;white-space:nowrap;color:var(--solaris-multi-select-icon-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__actions{display:flex;flex-shrink:0;align-items:center;gap:var(--solaris-spacing-2)}.solaris-multi-select__clear solaris-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl)}.solaris-multi-select__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl);color:var(--solaris-multi-select-icon-color);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-multi-select__clear:hover{color:var(--solaris-text-default)}.solaris-multi-select__dropdown-icon solaris-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl)}.solaris-multi-select__dropdown-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl);color:var(--solaris-multi-select-icon-color);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-multi-select__dropdown-icon{transform:rotate(180deg)}.solaris-multi-select__panel{display:flex;overflow-y:auto;flex-direction:column;overscroll-behavior:contain}.solaris-multi-select__search-input{flex:1;margin:0;padding:0;border:none;min-width:0;outline:none;font-family:inherit;box-sizing:border-box;background:transparent;color:var(--solaris-multi-select-value-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__search-input::placeholder{color:var(--solaris-multi-select-placeholder-color)}.solaris-multi-select__loading,.solaris-multi-select__no-results,.solaris-multi-select__empty{display:flex;align-items:center;justify-content:center;color:var(--solaris-text-muted);padding:var(--solaris-spacing-4);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}.solaris-multi-select__options{display:flex;flex-direction:column;gap:var(--solaris-spacing-1);padding:var(--solaris-spacing-1) var(--solaris-spacing-2)}.solaris-multi-select__select-all{display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:var(--solaris-spacing-2);min-height:var(--solaris-multi-select-select-all-height);padding:var(--solaris-spacing-2) var(--solaris-spacing-3);transition:background var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-multi-select__select-all:hover{background:var(--solaris-surface-hover)}.solaris-multi-select__select-all-checkbox{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);border-radius:var(--solaris-radius-sm);background:var(--solaris-surface-base);border:var(--solaris-border-width-sm) solid var(--solaris-primary-border)}.solaris-multi-select__select-all-checkbox--checked{background:var(--solaris-primary-base);border-color:var(--solaris-primary-base)}.solaris-multi-select__select-all-checkbox--partial{background:var(--solaris-primary-muted);border-color:var(--solaris-primary-base)}.solaris-multi-select__select-all-checkbox-icon{display:flex;align-items:center;justify-content:center;color:var(--solaris-on-primary);width:var(--solaris-font-size-sm);height:var(--solaris-font-size-sm)}.solaris-multi-select__select-all-label{color:var(--solaris-multi-select-value-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__select-all--readonly{cursor:default;opacity:var(--solaris-opacity-50)}:host([data-disabled]){cursor:not-allowed}:host([data-readonly]){cursor:default}@media(prefers-reduced-motion:reduce){.solaris-multi-select__dropdown-icon,.solaris-multi-select__clear{transition:none}}[data-reduced-motion=true] .solaris-multi-select__dropdown-icon,[data-reduced-motion=true] .solaris-multi-select__clear{transition:none}\n"], dependencies: [{ kind: "component", type: SolarisFormFieldComponent, selector: "solaris-form-field", inputs: ["hintKey", "labelKey", "hint", "errorKey", "label", "error", "optionalLabel", "requiredLabel", "optionalLabelKey", "requiredLabelKey", "required", "optional", "invalid", "disabled", "readonly", "density", "radius", "appearance", "control", "hasPrefix", "hasSuffix", "prefix", "suffix"] }, { kind: "directive", type: SolarisFormFieldTriggerDirective, selector: "[solaris-form-field-trigger]" }, { kind: "directive", type: SolarisFormPrefixDirective, selector: "[solaris-form-prefix]" }, { kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative"] }, { kind: "directive", type: SolarisPopoverDirective, selector: "ng-template[solaris-popover]", exportAs: ["solarisPopover"] }, { kind: "directive", type: SolarisPopoverTriggerDirective, selector: "[solaris-popover-trigger]", inputs: ["solarisPopoverTriggerFor", "solarisPopoverOpen", "solarisPopoverDisabled", "solarisPopoverPlacement", "solarisPopoverAlign", "solarisPopoverOffset", "solarisPopoverMatchTriggerWidth", "solarisPopoverMinWidth", "solarisPopoverMaxWidth", "solarisPopoverCloseOnOutsideClick", "solarisPopoverCloseOnEscape", "solarisPopoverRestoreFocus", "solarisPopoverAutoFocus", "solarisPopoverScrollStrategy", "solarisPopoverPanelRole", "solarisPopoverAriaHasPopup", "solarisPopoverAppearance", "solarisPopoverPadding", "solarisPopoverRadius", "solarisPopoverTopConnected"], outputs: ["solarisPopoverOpened", "solarisPopoverClosed", "solarisPopoverOpenChange"] }, { kind: "directive", type: SolarisTooltipDirective, selector: "[solaris-tooltip], [solarisTooltip], [solarisTooltipFor]", inputs: ["solarisTooltip", "solarisTooltipKey", "solarisTooltipFor", "solarisTooltipTitle", "solarisTooltipTitleKey", "solarisTooltipIcon", "solarisTooltipIconDecorative", "solarisTooltipTrigger", "solarisTooltipPlacement", "solarisTooltipOffset", "solarisTooltipDisabled", "solarisTooltipCloseable", "solarisTooltipCloseLabel", "solarisTooltipCloseLabelKey", "solarisTooltipShowDelay", "solarisTooltipHideDelay", "solarisTooltipAppearance", "solarisTooltipSize", "solarisTooltipRadius", "solarisTooltipMaxWidth", "solarisTooltipArrow", "solarisTooltipOpen"], outputs: ["solarisTooltipOpened", "solarisTooltipClosed", "solarisTooltipOpenChange"], exportAs: ["solarisTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "options", predicate: SolarisOptionComponent, descendants: true, isSignal: true }, { propertyName: "optionGroups", predicate: SolarisOptionGroupComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "popoverTrigger", first: true, predicate: SolarisPopoverTriggerDirective, descendants: true, isSignal: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "triggerElement", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "formFieldElement", first: true, predicate: ["formFieldRef"], descendants: true, isSignal: true }, { propertyName: "triggerContentRef", first: true, predicate: ["triggerContent"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<solaris-form-field\n  #formFieldRef\n  [control]=\"this\"\n  [label]=\"labelText()\"\n  [hint]=\"hintText()\"\n  [error]=\"errorText()\"\n  [appearance]=\"appearance()\"\n  [density]=\"effectiveDensity()\"\n  [radius]=\"radius()\"\n  [invalid]=\"isEffectivelyInvalid()\"\n  [required]=\"requiredInput()\"\n  [hasPrefix]=\"!!prefix()\"\n  solaris-popover-trigger\n  [solarisPopoverDisabled]=\"!canOpen()\"\n  [solarisPopoverTriggerFor]=\"matchWidthPopover\"\n  [class.solaris-multi-select--panel-open]=\"panelOpen()\"\n  [solarisPopoverMatchTriggerWidth]=\"panelMatchTriggerWidth()\"\n  [solarisPopoverAppearance]=\"popoverAppearance()\"\n  [solarisPopoverPlacement]=\"'bottom'\"\n  [solarisPopoverAlign]=\"'start'\"\n  [solarisPopoverOffset]=\"0\"\n  [solarisPopoverPadding]=\"'none'\"\n  [solarisPopoverRadius]=\"radius()\"\n  [solarisPopoverTopConnected]=\"true\"\n  [solarisPopoverMinWidth]=\"panelMinWidth()\"\n  [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n  [solarisPopoverScrollStrategy]=\"'reposition'\"\n  [solarisPopoverCloseOnEscape]=\"false\"\n  [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n  @if (prefix(); as iconName) {\n    <span solaris-form-prefix>\n      <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n    </span>\n  }\n  <ng-content\n    select=\"[solaris-form-prefix]\"\n    ngProjectAs=\"[solaris-form-prefix]\"\n  />\n\n  <div\n    #triggerEl\n    class=\"solaris-multi-select__trigger\"\n    [id]=\"elementId() + '--trigger'\"\n    solaris-form-field-trigger\n    role=\"combobox\"\n    tabindex=\"0\"\n    [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n    [attr.aria-controls]=\"panelOpen() ? panelId : null\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-activedescendant]=\"activeDescendantId()\"\n    [attr.aria-labelledby]=\"ariaLabelledbyText() ?? null\"\n    [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n    (keydown)=\"onTriggerKeydown($event)\"\n    (focus)=\"onTriggerFocus()\"\n    (blur)=\"onTriggerBlur()\"\n  >\n    <div class=\"solaris-multi-select__trigger-content\" #triggerContent>\n      @if (displayMode() === 'auto') {\n        @if (hasValue()) {\n          @if (showCountOnly()) {\n            <span\n              class=\"solaris-multi-select__chip\"\n              [solarisTooltip]=\"countTooltipText()\"\n              [solarisTooltipTrigger]=\"'hover'\"\n              tabindex=\"0\"\n            >\n              <span class=\"solaris-multi-select__chip-label\">{{\n                summaryText()\n              }}</span>\n            </span>\n          } @else {\n            <div\n              class=\"solaris-multi-select__chips solaris-multi-select__chips--auto\"\n            >\n              @for (opt of autoVisibleChips(); track opt) {\n                <span class=\"solaris-multi-select__chip\" role=\"listitem\">\n                  <span class=\"solaris-multi-select__chip-label\">{{\n                    getOptionDisplayLabel(opt)\n                  }}</span>\n                  @if (!isEffectivelyDisabled() && !isEffectivelyReadonly()) {\n                    <button\n                      type=\"button\"\n                      class=\"solaris-multi-select__chip-remove\"\n                      [attr.aria-label]=\"removeChipAriaLabel()\"\n                      (click)=\"removeChip(opt, $event)\"\n                      tabindex=\"-1\"\n                    >\n                      <solaris-icon name=\"x\" [decorative]=\"true\" />\n                    </button>\n                  }\n                </span>\n              }\n              @if (autoShowOverflow()) {\n                <span\n                  class=\"solaris-multi-select__chip-overflow\"\n                  [solarisTooltip]=\"autoOverflowTooltipText()\"\n                  [solarisTooltipTrigger]=\"'hover'\"\n                  tabindex=\"0\"\n                  [attr.aria-label]=\"\n                    '+ ' +\n                    autoOverflowCount() +\n                    ' ' +\n                    selectedLabels().join(', ')\n                  \"\n                  >+{{ autoOverflowCount() }}</span\n                >\n              }\n            </div>\n          }\n        }\n        @if (searchable() && panelOpen()) {\n          <input\n            #searchInput\n            type=\"text\"\n            class=\"solaris-multi-select__search-input\"\n            [attr.placeholder]=\"searchPlaceholderText()\"\n            [value]=\"searchQuery()\"\n            (input)=\"onSearchInput($event)\"\n            (keydown)=\"onSearchKeydown($event)\"\n            (click)=\"$event.stopPropagation()\"\n            role=\"searchbox\"\n            autocomplete=\"off\"\n          />\n        }\n        @if (!hasValue() && !(searchable() && panelOpen())) {\n          <span class=\"solaris-multi-select__value\">\n            <span class=\"solaris-multi-select__placeholder\">{{\n              placeholderText()\n            }}</span>\n          </span>\n        }\n      } @else {\n        @if (searchable() && panelOpen()) {\n          <input\n            #searchInput\n            type=\"text\"\n            class=\"solaris-multi-select__search-input\"\n            [attr.placeholder]=\"searchPlaceholderText()\"\n            [value]=\"searchQuery()\"\n            (input)=\"onSearchInput($event)\"\n            (keydown)=\"onSearchKeydown($event)\"\n            (click)=\"$event.stopPropagation()\"\n            role=\"searchbox\"\n            autocomplete=\"off\"\n          />\n        } @else {\n          @if (hasValue()) {\n            @if (displayMode() === 'chips') {\n              <div class=\"solaris-multi-select__chips\">\n                @for (\n                  opt of selectedOptions().slice(0, maxVisibleChips());\n                  track opt\n                ) {\n                  <span class=\"solaris-multi-select__chip\" role=\"listitem\">\n                    <span class=\"solaris-multi-select__chip-label\">{{\n                      getOptionDisplayLabel(opt)\n                    }}</span>\n                    @if (!isEffectivelyDisabled() && !isEffectivelyReadonly()) {\n                      <button\n                        type=\"button\"\n                        class=\"solaris-multi-select__chip-remove\"\n                        [attr.aria-label]=\"removeChipAriaLabel()\"\n                        (click)=\"removeChip(opt, $event)\"\n                        tabindex=\"-1\"\n                      >\n                        <solaris-icon name=\"x\" [decorative]=\"true\" />\n                      </button>\n                    }\n                  </span>\n                }\n                @if (overflowCount() > 0) {\n                  <span\n                    class=\"solaris-multi-select__chip-overflow\"\n                    [attr.aria-label]=\"\n                      '+ ' + overflowCount() + ' ' + selectedLabels().join(', ')\n                    \"\n                  >\n                    {{ overflowText() }}\n                  </span>\n                }\n              </div>\n            } @else if (displayMode() === 'comma') {\n              <span class=\"solaris-multi-select__value\">\n                <span class=\"solaris-multi-select__value-text\">{{\n                  commaText()\n                }}</span>\n              </span>\n            } @else {\n              <span\n                class=\"solaris-multi-select__chip\"\n                [solarisTooltip]=\"countTooltipText()\"\n                [solarisTooltipTrigger]=\"'hover'\"\n                tabindex=\"0\"\n              >\n                <span class=\"solaris-multi-select__chip-label\">{{\n                  summaryText()\n                }}</span>\n              </span>\n            }\n          } @else {\n            <span class=\"solaris-multi-select__value\">\n              <span class=\"solaris-multi-select__placeholder\">{{\n                placeholderText()\n              }}</span>\n            </span>\n          }\n        }\n      }\n    </div>\n\n    <span class=\"solaris-multi-select__actions\">\n      @if (canClear()) {\n        <button\n          type=\"button\"\n          class=\"solaris-multi-select__clear\"\n          [attr.aria-label]=\"clearAriaLabel()\"\n          (click)=\"clearValue(); $event.stopPropagation()\"\n          tabindex=\"-1\"\n        >\n          <solaris-icon name=\"x\" [decorative]=\"true\" />\n        </button>\n      }\n\n      <solaris-icon\n        class=\"solaris-multi-select__dropdown-icon\"\n        name=\"chevron-down\"\n        [decorative]=\"true\"\n        size=\"sm\"\n      />\n    </span>\n  </div>\n\n  <ng-content\n    select=\"[solaris-form-suffix]\"\n    ngProjectAs=\"[solaris-form-suffix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-label-action]\"\n    ngProjectAs=\"[solaris-form-label-action]\"\n  />\n</solaris-form-field>\n\n<ng-template #matchWidthPopover=\"solarisPopover\" solaris-popover>\n  <div\n    class=\"solaris-multi-select__panel\"\n    role=\"listbox\"\n    [attr.aria-multiselectable]=\"'true'\"\n    [attr.id]=\"panelId\"\n    tabindex=\"-1\"\n    (click)=\"onPanelClick($event)\"\n    (keydown)=\"onPanelKeydown($event)\"\n  >\n    @if (selectAll() && !loading()) {\n      <div\n        class=\"solaris-multi-select__select-all\"\n        role=\"option\"\n        aria-selected=\"false\"\n        tabindex=\"-1\"\n        (click)=\"handleSelectAll()\"\n        (keydown.enter)=\"handleSelectAll()\"\n        (keydown.space)=\"handleSelectAll(); $event.preventDefault()\"\n        [class.solaris-multi-select__select-all--readonly]=\"\n          isEffectivelyReadonly()\n        \"\n      >\n        <span\n          class=\"solaris-multi-select__select-all-checkbox\"\n          [class.solaris-multi-select__select-all-checkbox--checked]=\"\n            isAllSelected()\n          \"\n          [class.solaris-multi-select__select-all-checkbox--partial]=\"\n            isPartialSelected()\n          \"\n        >\n          @if (isAllSelected()) {\n            <span class=\"solaris-multi-select__select-all-checkbox-icon\">\n              <solaris-icon name=\"check\" [decorative]=\"true\" />\n            </span>\n          } @else if (isPartialSelected()) {\n            <span class=\"solaris-multi-select__select-all-checkbox-icon\">\n              <solaris-icon name=\"minus\" [decorative]=\"true\" />\n            </span>\n          }\n        </span>\n        <span class=\"solaris-multi-select__select-all-label\">{{\n          selectAllLabelText()\n        }}</span>\n      </div>\n    }\n\n    @if (loading()) {\n      <div class=\"solaris-multi-select__loading\">\n        <span class=\"solaris-multi-select__loading-text\">{{\n          loadingTextValue()\n        }}</span>\n      </div>\n    } @else if (showNoResults()) {\n      <div class=\"solaris-multi-select__no-results\">\n        <span class=\"solaris-multi-select__no-results-text\">{{\n          noResultsTextValue()\n        }}</span>\n      </div>\n    } @else if (showEmpty()) {\n      <div class=\"solaris-multi-select__empty\">\n        <span class=\"solaris-multi-select__empty-text\">{{\n          emptyTextValue()\n        }}</span>\n      </div>\n    } @else {\n      <div\n        class=\"solaris-multi-select__options\"\n        [style.max-height]=\"panelMaxHeight()\"\n      >\n        <ng-content select=\"solaris-option, solaris-option-group\" />\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [":host{--solaris-multi-select-chip-gap: var(--solaris-spacing-1);--solaris-multi-select-chip-radius: var(--solaris-radius-sm);--solaris-multi-select-icon-color: var(--solaris-text-muted);--solaris-multi-select-font-size: var(--solaris-font-size-md);--solaris-multi-select-chip-color: var(--solaris-text-default);--solaris-multi-select-value-color: var(--solaris-text-default);--solaris-multi-select-chip-padding-y: var(--solaris-spacing-1);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-2);--solaris-multi-select-line-height: var(--solaris-line-height-md);--solaris-multi-select-chip-font-size: var(--solaris-font-size-sm);--solaris-multi-select-select-all-height: var(--solaris-spacing-9);--solaris-surface-hover: var(--solaris-surface-subtle);--solaris-primary-muted: var(--solaris-primary-surface);--solaris-on-primary: var(--solaris-primary-on-solid);--solaris-multi-select-placeholder-color: var(--solaris-text-muted);--solaris-multi-select-chip-remove-size: var(--solaris-font-size-md);--solaris-multi-select-chip-background: var(--solaris-surface-subtle);outline:none;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;display:inline-flex;flex-direction:column;box-sizing:border-box;font-family:var(--solaris-font-family-sans),system-ui}.solaris-multi-select__trigger{flex:1;padding:0;min-width:0;border:none;outline:none;display:flex;cursor:pointer;align-items:center;box-sizing:border-box;background:transparent;gap:var(--solaris-spacing-2)}:host ::ng-deep .solaris-form-field__message-row{margin-top:0}:host ::ng-deep .solaris-multi-select--panel-open .solaris-form-field__message-row{display:none}.solaris-multi-select__trigger-content{flex:1;min-width:0;display:flex;overflow:hidden;align-items:center;gap:var(--solaris-spacing-2)}.solaris-multi-select__value{flex:none;min-width:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-multi-select__value-text{color:var(--solaris-multi-select-value-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__placeholder{font-size:var(--solaris-multi-select-font-size);color:var(--solaris-multi-select-placeholder-color);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__chips{flex:1;min-width:0;display:flex;flex-wrap:wrap;overflow:hidden;align-items:center;gap:var(--solaris-multi-select-chip-gap)}.solaris-multi-select__chips--auto{flex:none;flex-wrap:nowrap}.solaris-multi-select__chips--auto .solaris-multi-select__chip{flex-shrink:0}.solaris-multi-select__chip{align-items:center;white-space:nowrap;display:inline-flex;gap:var(--solaris-spacing-1);line-height:var(--solaris-line-height-sm);color:var(--solaris-multi-select-chip-color);font-size:var(--solaris-multi-select-chip-font-size);border-radius:var(--solaris-multi-select-chip-radius);background:var(--solaris-multi-select-chip-background);border:var(--solaris-border-width-sm) solid var(--solaris-border-default);padding:var(--solaris-multi-select-chip-padding-y) var(--solaris-multi-select-chip-padding-x)}.solaris-multi-select__chip-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-multi-select__chip-remove solaris-icon{width:var(--solaris-multi-select-chip-remove-size);height:var(--solaris-multi-select-chip-remove-size)}.solaris-multi-select__chip-remove{padding:0;border:none;display:flex;flex-shrink:0;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;color:var(--solaris-multi-select-icon-color);width:var(--solaris-multi-select-chip-remove-size);height:var(--solaris-multi-select-chip-remove-size);transition:background var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-multi-select__chip-remove:hover{background:var(--solaris-surface-hover)}.solaris-multi-select__chip-overflow{flex-shrink:0;white-space:nowrap;color:var(--solaris-multi-select-icon-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__actions{display:flex;flex-shrink:0;align-items:center;gap:var(--solaris-spacing-2)}.solaris-multi-select__clear solaris-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl)}.solaris-multi-select__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl);color:var(--solaris-multi-select-icon-color);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-multi-select__clear:hover{color:var(--solaris-text-default)}.solaris-multi-select__dropdown-icon solaris-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl)}.solaris-multi-select__dropdown-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl);color:var(--solaris-multi-select-icon-color);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-multi-select__dropdown-icon{transform:rotate(180deg)}.solaris-multi-select__panel{display:flex;overflow-y:auto;flex-direction:column;overscroll-behavior:contain}.solaris-multi-select__search-input{flex:1;margin:0;padding:0;border:none;min-width:0;outline:none;font-family:inherit;box-sizing:border-box;background:transparent;color:var(--solaris-multi-select-value-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__search-input::placeholder{color:var(--solaris-multi-select-placeholder-color)}.solaris-multi-select__loading,.solaris-multi-select__no-results,.solaris-multi-select__empty{display:flex;align-items:center;justify-content:center;color:var(--solaris-text-muted);padding:var(--solaris-spacing-4);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}.solaris-multi-select__options{display:flex;flex-direction:column;gap:var(--solaris-spacing-1);padding:var(--solaris-spacing-1) var(--solaris-spacing-2)}.solaris-multi-select__select-all{display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:var(--solaris-spacing-2);min-height:var(--solaris-multi-select-select-all-height);padding:var(--solaris-spacing-2) var(--solaris-spacing-3);transition:background var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-multi-select__select-all:hover{background:var(--solaris-surface-hover)}.solaris-multi-select__select-all-checkbox{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);border-radius:var(--solaris-radius-sm);background:var(--solaris-surface-base);border:var(--solaris-border-width-sm) solid var(--solaris-primary-border)}.solaris-multi-select__select-all-checkbox--checked{background:var(--solaris-primary-base);border-color:var(--solaris-primary-base)}.solaris-multi-select__select-all-checkbox--partial{background:var(--solaris-primary-muted);border-color:var(--solaris-primary-base)}.solaris-multi-select__select-all-checkbox-icon{display:flex;align-items:center;justify-content:center;color:var(--solaris-on-primary);width:var(--solaris-font-size-sm);height:var(--solaris-font-size-sm)}.solaris-multi-select__select-all-label{color:var(--solaris-multi-select-value-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__select-all--readonly{cursor:default;opacity:var(--solaris-opacity-50)}:host([data-disabled]){cursor:not-allowed}:host([data-readonly]){cursor:default}@media(prefers-reduced-motion:reduce){.solaris-multi-select__dropdown-icon,.solaris-multi-select__clear{transition:none}}[data-reduced-motion=true] .solaris-multi-select__dropdown-icon,[data-reduced-motion=true] .solaris-multi-select__clear{transition:none}\n"], dependencies: [{ kind: "component", type: SolarisFormFieldComponent, selector: "solaris-form-field", inputs: ["hintKey", "labelKey", "hint", "errorKey", "label", "error", "optionalLabel", "requiredLabel", "optionalLabelKey", "requiredLabelKey", "required", "optional", "invalid", "disabled", "readonly", "density", "radius", "appearance", "control", "hasPrefix", "hasSuffix", "prefix", "suffix"] }, { kind: "directive", type: SolarisFormFieldTriggerDirective, selector: "[solaris-form-field-trigger]" }, { kind: "directive", type: SolarisFormPrefixDirective, selector: "[solaris-form-prefix]" }, { kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }, { kind: "directive", type: SolarisPopoverDirective, selector: "ng-template[solaris-popover]", exportAs: ["solarisPopover"] }, { kind: "directive", type: SolarisPopoverTriggerDirective, selector: "[solaris-popover-trigger]", inputs: ["solarisPopoverTriggerFor", "solarisPopoverOpen", "solarisPopoverDisabled", "solarisPopoverPlacement", "solarisPopoverAlign", "solarisPopoverOffset", "solarisPopoverMatchTriggerWidth", "solarisPopoverMinWidth", "solarisPopoverMaxWidth", "solarisPopoverCloseOnOutsideClick", "solarisPopoverCloseOnEscape", "solarisPopoverRestoreFocus", "solarisPopoverAutoFocus", "solarisPopoverScrollStrategy", "solarisPopoverPanelRole", "solarisPopoverAriaHasPopup", "solarisPopoverAppearance", "solarisPopoverPadding", "solarisPopoverRadius", "solarisPopoverTopConnected"], outputs: ["solarisPopoverOpened", "solarisPopoverClosed", "solarisPopoverOpenChange"] }, { kind: "directive", type: SolarisTooltipDirective, selector: "[solaris-tooltip], [solarisTooltip], [solarisTooltipFor]", inputs: ["solarisTooltip", "solarisTooltipKey", "solarisTooltipFor", "solarisTooltipTitle", "solarisTooltipTitleKey", "solarisTooltipIcon", "solarisTooltipIconDecorative", "solarisTooltipTrigger", "solarisTooltipPlacement", "solarisTooltipOffset", "solarisTooltipDisabled", "solarisTooltipCloseable", "solarisTooltipCloseLabel", "solarisTooltipCloseLabelKey", "solarisTooltipShowDelay", "solarisTooltipHideDelay", "solarisTooltipAppearance", "solarisTooltipSize", "solarisTooltipRadius", "solarisTooltipMaxWidth", "solarisTooltipArrow", "solarisTooltipOpen"], outputs: ["solarisTooltipOpened", "solarisTooltipClosed", "solarisTooltipOpenChange"], exportAs: ["solarisTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisMultiSelectComponent, decorators: [{
             type: Component,
@@ -6519,7 +6712,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '[attr.data-open]': 'panelOpen() ? "" : null',
                         '[attr.aria-label]': 'ariaLabelText() ?? null',
                         '[attr.data-has-value]': 'hasValue() ? "" : null',
-                    }, template: "<solaris-form-field\n  #formFieldRef\n  [control]=\"this\"\n  [label]=\"labelText()\"\n  [hint]=\"hintText()\"\n  [error]=\"errorText()\"\n  [appearance]=\"appearance()\"\n  [density]=\"effectiveDensity()\"\n  [radius]=\"radius()\"\n  [invalid]=\"isEffectivelyInvalid()\"\n  [required]=\"requiredInput()\"\n  [hasPrefix]=\"!!prefix()\"\n  solaris-popover-trigger\n  [solarisPopoverDisabled]=\"!canOpen()\"\n  [solarisPopoverTriggerFor]=\"matchWidthPopover\"\n  [class.solaris-multi-select--panel-open]=\"panelOpen()\"\n  [solarisPopoverMatchTriggerWidth]=\"panelMatchTriggerWidth()\"\n  [solarisPopoverAppearance]=\"popoverAppearance()\"\n  [solarisPopoverPlacement]=\"'bottom'\"\n  [solarisPopoverAlign]=\"'start'\"\n  [solarisPopoverOffset]=\"0\"\n  [solarisPopoverPadding]=\"'none'\"\n  [solarisPopoverRadius]=\"radius()\"\n  [solarisPopoverTopConnected]=\"true\"\n  [solarisPopoverMinWidth]=\"panelMinWidth()\"\n  [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n  [solarisPopoverScrollStrategy]=\"'reposition'\"\n  [solarisPopoverCloseOnEscape]=\"false\"\n  [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n  @if (prefix(); as iconName) {\n    <span solaris-form-prefix>\n      <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n    </span>\n  }\n  <ng-content select=\"[solaris-form-prefix]\" />\n\n  <div\n    #triggerEl\n    class=\"solaris-multi-select__trigger\"\n    [id]=\"elementId() + '--trigger'\"\n    solaris-form-field-trigger\n    role=\"combobox\"\n    tabindex=\"0\"\n    [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n    [attr.aria-controls]=\"panelOpen() ? panelId : null\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-activedescendant]=\"activeDescendantId()\"\n    [attr.aria-labelledby]=\"ariaLabelledbyText() ?? null\"\n    [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n    (keydown)=\"onTriggerKeydown($event)\"\n    (focus)=\"onTriggerFocus()\"\n    (blur)=\"onTriggerBlur()\"\n  >\n    <div class=\"solaris-multi-select__trigger-content\" #triggerContent>\n      @if (displayMode() === 'auto') {\n        @if (hasValue()) {\n          @if (showCountOnly()) {\n            <span\n              class=\"solaris-multi-select__chip\"\n              [solarisTooltip]=\"countTooltipText()\"\n              [solarisTooltipTrigger]=\"'hover'\"\n              tabindex=\"0\"\n            >\n              <span class=\"solaris-multi-select__chip-label\">{{\n                summaryText()\n              }}</span>\n            </span>\n          } @else {\n            <div\n              class=\"solaris-multi-select__chips solaris-multi-select__chips--auto\"\n            >\n              @for (opt of autoVisibleChips(); track opt) {\n                <span class=\"solaris-multi-select__chip\" role=\"listitem\">\n                  <span class=\"solaris-multi-select__chip-label\">{{\n                    getOptionDisplayLabel(opt)\n                  }}</span>\n                  @if (!isEffectivelyDisabled() && !isEffectivelyReadonly()) {\n                    <button\n                      type=\"button\"\n                      class=\"solaris-multi-select__chip-remove\"\n                      [attr.aria-label]=\"removeChipAriaLabel()\"\n                      (click)=\"removeChip(opt, $event)\"\n                      tabindex=\"-1\"\n                    >\n                      <solaris-icon name=\"x\" [decorative]=\"true\" />\n                    </button>\n                  }\n                </span>\n              }\n              @if (autoShowOverflow()) {\n                <span\n                  class=\"solaris-multi-select__chip-overflow\"\n                  [solarisTooltip]=\"autoOverflowTooltipText()\"\n                  [solarisTooltipTrigger]=\"'hover'\"\n                  tabindex=\"0\"\n                  [attr.aria-label]=\"\n                    '+ ' +\n                    autoOverflowCount() +\n                    ' ' +\n                    selectedLabels().join(', ')\n                  \"\n                  >+{{ autoOverflowCount() }}</span\n                >\n              }\n            </div>\n          }\n        }\n        @if (searchable() && panelOpen()) {\n          <input\n            #searchInput\n            type=\"text\"\n            class=\"solaris-multi-select__search-input\"\n            [attr.placeholder]=\"searchPlaceholderText()\"\n            [value]=\"searchQuery()\"\n            (input)=\"onSearchInput($event)\"\n            (keydown)=\"onSearchKeydown($event)\"\n            (click)=\"$event.stopPropagation()\"\n            role=\"searchbox\"\n            autocomplete=\"off\"\n          />\n        }\n        @if (!hasValue() && !(searchable() && panelOpen())) {\n          <span class=\"solaris-multi-select__value\">\n            <span class=\"solaris-multi-select__placeholder\">{{\n              placeholderText()\n            }}</span>\n          </span>\n        }\n      } @else {\n        @if (searchable() && panelOpen()) {\n          <input\n            #searchInput\n            type=\"text\"\n            class=\"solaris-multi-select__search-input\"\n            [attr.placeholder]=\"searchPlaceholderText()\"\n            [value]=\"searchQuery()\"\n            (input)=\"onSearchInput($event)\"\n            (keydown)=\"onSearchKeydown($event)\"\n            (click)=\"$event.stopPropagation()\"\n            role=\"searchbox\"\n            autocomplete=\"off\"\n          />\n        } @else {\n          @if (hasValue()) {\n            @if (displayMode() === 'chips') {\n              <div class=\"solaris-multi-select__chips\">\n                @for (\n                  opt of selectedOptions().slice(0, maxVisibleChips());\n                  track opt\n                ) {\n                  <span class=\"solaris-multi-select__chip\" role=\"listitem\">\n                    <span class=\"solaris-multi-select__chip-label\">{{\n                      getOptionDisplayLabel(opt)\n                    }}</span>\n                    @if (!isEffectivelyDisabled() && !isEffectivelyReadonly()) {\n                      <button\n                        type=\"button\"\n                        class=\"solaris-multi-select__chip-remove\"\n                        [attr.aria-label]=\"removeChipAriaLabel()\"\n                        (click)=\"removeChip(opt, $event)\"\n                        tabindex=\"-1\"\n                      >\n                        <solaris-icon name=\"x\" [decorative]=\"true\" />\n                      </button>\n                    }\n                  </span>\n                }\n                @if (overflowCount() > 0) {\n                  <span\n                    class=\"solaris-multi-select__chip-overflow\"\n                    [attr.aria-label]=\"\n                      '+ ' + overflowCount() + ' ' + selectedLabels().join(', ')\n                    \"\n                  >\n                    {{ overflowText() }}\n                  </span>\n                }\n              </div>\n            } @else if (displayMode() === 'comma') {\n              <span class=\"solaris-multi-select__value\">\n                <span class=\"solaris-multi-select__value-text\">{{\n                  commaText()\n                }}</span>\n              </span>\n            } @else {\n              <span\n                class=\"solaris-multi-select__chip\"\n                [solarisTooltip]=\"countTooltipText()\"\n                [solarisTooltipTrigger]=\"'hover'\"\n                tabindex=\"0\"\n              >\n                <span class=\"solaris-multi-select__chip-label\">{{\n                  summaryText()\n                }}</span>\n              </span>\n            }\n          } @else {\n            <span class=\"solaris-multi-select__value\">\n              <span class=\"solaris-multi-select__placeholder\">{{\n                placeholderText()\n              }}</span>\n            </span>\n          }\n        }\n      }\n    </div>\n\n    <span class=\"solaris-multi-select__actions\">\n      @if (canClear()) {\n        <button\n          type=\"button\"\n          class=\"solaris-multi-select__clear\"\n          [attr.aria-label]=\"clearAriaLabel()\"\n          (click)=\"clearValue(); $event.stopPropagation()\"\n          tabindex=\"-1\"\n        >\n          <solaris-icon name=\"x\" [decorative]=\"true\" />\n        </button>\n      }\n\n      <solaris-icon\n        class=\"solaris-multi-select__dropdown-icon\"\n        name=\"chevron-down\"\n        [decorative]=\"true\"\n        size=\"sm\"\n      />\n    </span>\n  </div>\n\n  <ng-content select=\"[solaris-form-suffix]\" />\n</solaris-form-field>\n\n<ng-template #matchWidthPopover=\"solarisPopover\" solaris-popover>\n  <div\n    class=\"solaris-multi-select__panel\"\n    role=\"listbox\"\n    [attr.aria-multiselectable]=\"'true'\"\n    [attr.id]=\"panelId\"\n    tabindex=\"-1\"\n    (click)=\"onPanelClick($event)\"\n    (keydown)=\"onPanelKeydown($event)\"\n  >\n    @if (selectAll() && !loading()) {\n      <div\n        class=\"solaris-multi-select__select-all\"\n        role=\"option\"\n        aria-selected=\"false\"\n        tabindex=\"-1\"\n        (click)=\"handleSelectAll()\"\n        (keydown.enter)=\"handleSelectAll()\"\n        (keydown.space)=\"handleSelectAll(); $event.preventDefault()\"\n        [class.solaris-multi-select__select-all--readonly]=\"\n          isEffectivelyReadonly()\n        \"\n      >\n        <span\n          class=\"solaris-multi-select__select-all-checkbox\"\n          [class.solaris-multi-select__select-all-checkbox--checked]=\"\n            isAllSelected()\n          \"\n          [class.solaris-multi-select__select-all-checkbox--partial]=\"\n            isPartialSelected()\n          \"\n        >\n          @if (isAllSelected()) {\n            <span class=\"solaris-multi-select__select-all-checkbox-icon\">\n              <solaris-icon name=\"check\" [decorative]=\"true\" />\n            </span>\n          } @else if (isPartialSelected()) {\n            <span class=\"solaris-multi-select__select-all-checkbox-icon\">\n              <solaris-icon name=\"minus\" [decorative]=\"true\" />\n            </span>\n          }\n        </span>\n        <span class=\"solaris-multi-select__select-all-label\">{{\n          selectAllLabelText()\n        }}</span>\n      </div>\n    }\n\n    @if (loading()) {\n      <div class=\"solaris-multi-select__loading\">\n        <span class=\"solaris-multi-select__loading-text\">{{\n          loadingTextValue()\n        }}</span>\n      </div>\n    } @else if (showNoResults()) {\n      <div class=\"solaris-multi-select__no-results\">\n        <span class=\"solaris-multi-select__no-results-text\">{{\n          noResultsTextValue()\n        }}</span>\n      </div>\n    } @else if (showEmpty()) {\n      <div class=\"solaris-multi-select__empty\">\n        <span class=\"solaris-multi-select__empty-text\">{{\n          emptyTextValue()\n        }}</span>\n      </div>\n    } @else {\n      <div\n        class=\"solaris-multi-select__options\"\n        [style.max-height]=\"panelMaxHeight()\"\n      >\n        <ng-content select=\"solaris-option, solaris-option-group\" />\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [":host{--solaris-multi-select-chip-gap: var(--solaris-spacing-1);--solaris-multi-select-chip-radius: var(--solaris-radius-sm);--solaris-multi-select-icon-color: var(--solaris-text-muted);--solaris-multi-select-font-size: var(--solaris-font-size-md);--solaris-multi-select-chip-color: var(--solaris-text-default);--solaris-multi-select-value-color: var(--solaris-text-default);--solaris-multi-select-chip-padding-y: var(--solaris-spacing-1);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-2);--solaris-multi-select-line-height: var(--solaris-line-height-md);--solaris-multi-select-chip-font-size: var(--solaris-font-size-sm);--solaris-multi-select-select-all-height: var(--solaris-spacing-9);--solaris-surface-hover: var(--solaris-surface-subtle);--solaris-primary-muted: var(--solaris-primary-surface);--solaris-on-primary: var(--solaris-primary-on-solid);--solaris-multi-select-placeholder-color: var(--solaris-text-muted);--solaris-multi-select-chip-remove-size: var(--solaris-font-size-md);--solaris-multi-select-chip-background: var(--solaris-surface-subtle);outline:none;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;display:inline-flex;flex-direction:column;box-sizing:border-box;font-family:var(--solaris-font-family-sans),system-ui}.solaris-multi-select__trigger{flex:1;padding:0;min-width:0;border:none;outline:none;display:flex;cursor:pointer;align-items:center;box-sizing:border-box;background:transparent;gap:var(--solaris-spacing-2)}:host ::ng-deep .solaris-form-field__message-row{margin-top:0}:host ::ng-deep .solaris-multi-select--panel-open .solaris-form-field__message-row{display:none}.solaris-multi-select__trigger-content{flex:1;min-width:0;display:flex;overflow:hidden;align-items:center;gap:var(--solaris-spacing-2)}.solaris-multi-select__value{flex:none;min-width:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-multi-select__value-text{color:var(--solaris-multi-select-value-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__placeholder{font-size:var(--solaris-multi-select-font-size);color:var(--solaris-multi-select-placeholder-color);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__chips{flex:1;min-width:0;display:flex;flex-wrap:wrap;overflow:hidden;align-items:center;gap:var(--solaris-multi-select-chip-gap)}.solaris-multi-select__chips--auto{flex:none;flex-wrap:nowrap}.solaris-multi-select__chips--auto .solaris-multi-select__chip{flex-shrink:0}.solaris-multi-select__chip{align-items:center;white-space:nowrap;display:inline-flex;gap:var(--solaris-spacing-1);line-height:var(--solaris-line-height-sm);color:var(--solaris-multi-select-chip-color);font-size:var(--solaris-multi-select-chip-font-size);border-radius:var(--solaris-multi-select-chip-radius);background:var(--solaris-multi-select-chip-background);border:var(--solaris-border-width-sm) solid var(--solaris-border-default);padding:var(--solaris-multi-select-chip-padding-y) var(--solaris-multi-select-chip-padding-x)}.solaris-multi-select__chip-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-multi-select__chip-remove solaris-icon{width:var(--solaris-multi-select-chip-remove-size);height:var(--solaris-multi-select-chip-remove-size)}.solaris-multi-select__chip-remove{padding:0;border:none;display:flex;flex-shrink:0;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;color:var(--solaris-multi-select-icon-color);width:var(--solaris-multi-select-chip-remove-size);height:var(--solaris-multi-select-chip-remove-size);transition:background var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-multi-select__chip-remove:hover{background:var(--solaris-surface-hover)}.solaris-multi-select__chip-overflow{flex-shrink:0;white-space:nowrap;color:var(--solaris-multi-select-icon-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__actions{display:flex;flex-shrink:0;align-items:center;gap:var(--solaris-spacing-2)}.solaris-multi-select__clear solaris-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl)}.solaris-multi-select__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl);color:var(--solaris-multi-select-icon-color);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-multi-select__clear:hover{color:var(--solaris-text-default)}.solaris-multi-select__dropdown-icon solaris-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl)}.solaris-multi-select__dropdown-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl);color:var(--solaris-multi-select-icon-color);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-multi-select__dropdown-icon{transform:rotate(180deg)}.solaris-multi-select__panel{display:flex;overflow-y:auto;flex-direction:column;overscroll-behavior:contain}.solaris-multi-select__search-input{flex:1;margin:0;padding:0;border:none;min-width:0;outline:none;font-family:inherit;box-sizing:border-box;background:transparent;color:var(--solaris-multi-select-value-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__search-input::placeholder{color:var(--solaris-multi-select-placeholder-color)}.solaris-multi-select__loading,.solaris-multi-select__no-results,.solaris-multi-select__empty{display:flex;align-items:center;justify-content:center;color:var(--solaris-text-muted);padding:var(--solaris-spacing-4);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}.solaris-multi-select__options{display:flex;flex-direction:column;gap:var(--solaris-spacing-1);padding:var(--solaris-spacing-1) var(--solaris-spacing-2)}.solaris-multi-select__select-all{display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:var(--solaris-spacing-2);min-height:var(--solaris-multi-select-select-all-height);padding:var(--solaris-spacing-2) var(--solaris-spacing-3);transition:background var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-multi-select__select-all:hover{background:var(--solaris-surface-hover)}.solaris-multi-select__select-all-checkbox{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);border-radius:var(--solaris-radius-sm);background:var(--solaris-surface-base);border:var(--solaris-border-width-sm) solid var(--solaris-primary-border)}.solaris-multi-select__select-all-checkbox--checked{background:var(--solaris-primary-base);border-color:var(--solaris-primary-base)}.solaris-multi-select__select-all-checkbox--partial{background:var(--solaris-primary-muted);border-color:var(--solaris-primary-base)}.solaris-multi-select__select-all-checkbox-icon{display:flex;align-items:center;justify-content:center;color:var(--solaris-on-primary);width:var(--solaris-font-size-sm);height:var(--solaris-font-size-sm)}.solaris-multi-select__select-all-label{color:var(--solaris-multi-select-value-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__select-all--readonly{cursor:default;opacity:var(--solaris-opacity-50)}:host([data-disabled]){cursor:not-allowed}:host([data-readonly]){cursor:default}@media(prefers-reduced-motion:reduce){.solaris-multi-select__dropdown-icon,.solaris-multi-select__clear{transition:none}}[data-reduced-motion=true] .solaris-multi-select__dropdown-icon,[data-reduced-motion=true] .solaris-multi-select__clear{transition:none}\n"] }]
+                    }, template: "<solaris-form-field\n  #formFieldRef\n  [control]=\"this\"\n  [label]=\"labelText()\"\n  [hint]=\"hintText()\"\n  [error]=\"errorText()\"\n  [appearance]=\"appearance()\"\n  [density]=\"effectiveDensity()\"\n  [radius]=\"radius()\"\n  [invalid]=\"isEffectivelyInvalid()\"\n  [required]=\"requiredInput()\"\n  [hasPrefix]=\"!!prefix()\"\n  solaris-popover-trigger\n  [solarisPopoverDisabled]=\"!canOpen()\"\n  [solarisPopoverTriggerFor]=\"matchWidthPopover\"\n  [class.solaris-multi-select--panel-open]=\"panelOpen()\"\n  [solarisPopoverMatchTriggerWidth]=\"panelMatchTriggerWidth()\"\n  [solarisPopoverAppearance]=\"popoverAppearance()\"\n  [solarisPopoverPlacement]=\"'bottom'\"\n  [solarisPopoverAlign]=\"'start'\"\n  [solarisPopoverOffset]=\"0\"\n  [solarisPopoverPadding]=\"'none'\"\n  [solarisPopoverRadius]=\"radius()\"\n  [solarisPopoverTopConnected]=\"true\"\n  [solarisPopoverMinWidth]=\"panelMinWidth()\"\n  [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n  [solarisPopoverScrollStrategy]=\"'reposition'\"\n  [solarisPopoverCloseOnEscape]=\"false\"\n  [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n  @if (prefix(); as iconName) {\n    <span solaris-form-prefix>\n      <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n    </span>\n  }\n  <ng-content\n    select=\"[solaris-form-prefix]\"\n    ngProjectAs=\"[solaris-form-prefix]\"\n  />\n\n  <div\n    #triggerEl\n    class=\"solaris-multi-select__trigger\"\n    [id]=\"elementId() + '--trigger'\"\n    solaris-form-field-trigger\n    role=\"combobox\"\n    tabindex=\"0\"\n    [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n    [attr.aria-controls]=\"panelOpen() ? panelId : null\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-activedescendant]=\"activeDescendantId()\"\n    [attr.aria-labelledby]=\"ariaLabelledbyText() ?? null\"\n    [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n    (keydown)=\"onTriggerKeydown($event)\"\n    (focus)=\"onTriggerFocus()\"\n    (blur)=\"onTriggerBlur()\"\n  >\n    <div class=\"solaris-multi-select__trigger-content\" #triggerContent>\n      @if (displayMode() === 'auto') {\n        @if (hasValue()) {\n          @if (showCountOnly()) {\n            <span\n              class=\"solaris-multi-select__chip\"\n              [solarisTooltip]=\"countTooltipText()\"\n              [solarisTooltipTrigger]=\"'hover'\"\n              tabindex=\"0\"\n            >\n              <span class=\"solaris-multi-select__chip-label\">{{\n                summaryText()\n              }}</span>\n            </span>\n          } @else {\n            <div\n              class=\"solaris-multi-select__chips solaris-multi-select__chips--auto\"\n            >\n              @for (opt of autoVisibleChips(); track opt) {\n                <span class=\"solaris-multi-select__chip\" role=\"listitem\">\n                  <span class=\"solaris-multi-select__chip-label\">{{\n                    getOptionDisplayLabel(opt)\n                  }}</span>\n                  @if (!isEffectivelyDisabled() && !isEffectivelyReadonly()) {\n                    <button\n                      type=\"button\"\n                      class=\"solaris-multi-select__chip-remove\"\n                      [attr.aria-label]=\"removeChipAriaLabel()\"\n                      (click)=\"removeChip(opt, $event)\"\n                      tabindex=\"-1\"\n                    >\n                      <solaris-icon name=\"x\" [decorative]=\"true\" />\n                    </button>\n                  }\n                </span>\n              }\n              @if (autoShowOverflow()) {\n                <span\n                  class=\"solaris-multi-select__chip-overflow\"\n                  [solarisTooltip]=\"autoOverflowTooltipText()\"\n                  [solarisTooltipTrigger]=\"'hover'\"\n                  tabindex=\"0\"\n                  [attr.aria-label]=\"\n                    '+ ' +\n                    autoOverflowCount() +\n                    ' ' +\n                    selectedLabels().join(', ')\n                  \"\n                  >+{{ autoOverflowCount() }}</span\n                >\n              }\n            </div>\n          }\n        }\n        @if (searchable() && panelOpen()) {\n          <input\n            #searchInput\n            type=\"text\"\n            class=\"solaris-multi-select__search-input\"\n            [attr.placeholder]=\"searchPlaceholderText()\"\n            [value]=\"searchQuery()\"\n            (input)=\"onSearchInput($event)\"\n            (keydown)=\"onSearchKeydown($event)\"\n            (click)=\"$event.stopPropagation()\"\n            role=\"searchbox\"\n            autocomplete=\"off\"\n          />\n        }\n        @if (!hasValue() && !(searchable() && panelOpen())) {\n          <span class=\"solaris-multi-select__value\">\n            <span class=\"solaris-multi-select__placeholder\">{{\n              placeholderText()\n            }}</span>\n          </span>\n        }\n      } @else {\n        @if (searchable() && panelOpen()) {\n          <input\n            #searchInput\n            type=\"text\"\n            class=\"solaris-multi-select__search-input\"\n            [attr.placeholder]=\"searchPlaceholderText()\"\n            [value]=\"searchQuery()\"\n            (input)=\"onSearchInput($event)\"\n            (keydown)=\"onSearchKeydown($event)\"\n            (click)=\"$event.stopPropagation()\"\n            role=\"searchbox\"\n            autocomplete=\"off\"\n          />\n        } @else {\n          @if (hasValue()) {\n            @if (displayMode() === 'chips') {\n              <div class=\"solaris-multi-select__chips\">\n                @for (\n                  opt of selectedOptions().slice(0, maxVisibleChips());\n                  track opt\n                ) {\n                  <span class=\"solaris-multi-select__chip\" role=\"listitem\">\n                    <span class=\"solaris-multi-select__chip-label\">{{\n                      getOptionDisplayLabel(opt)\n                    }}</span>\n                    @if (!isEffectivelyDisabled() && !isEffectivelyReadonly()) {\n                      <button\n                        type=\"button\"\n                        class=\"solaris-multi-select__chip-remove\"\n                        [attr.aria-label]=\"removeChipAriaLabel()\"\n                        (click)=\"removeChip(opt, $event)\"\n                        tabindex=\"-1\"\n                      >\n                        <solaris-icon name=\"x\" [decorative]=\"true\" />\n                      </button>\n                    }\n                  </span>\n                }\n                @if (overflowCount() > 0) {\n                  <span\n                    class=\"solaris-multi-select__chip-overflow\"\n                    [attr.aria-label]=\"\n                      '+ ' + overflowCount() + ' ' + selectedLabels().join(', ')\n                    \"\n                  >\n                    {{ overflowText() }}\n                  </span>\n                }\n              </div>\n            } @else if (displayMode() === 'comma') {\n              <span class=\"solaris-multi-select__value\">\n                <span class=\"solaris-multi-select__value-text\">{{\n                  commaText()\n                }}</span>\n              </span>\n            } @else {\n              <span\n                class=\"solaris-multi-select__chip\"\n                [solarisTooltip]=\"countTooltipText()\"\n                [solarisTooltipTrigger]=\"'hover'\"\n                tabindex=\"0\"\n              >\n                <span class=\"solaris-multi-select__chip-label\">{{\n                  summaryText()\n                }}</span>\n              </span>\n            }\n          } @else {\n            <span class=\"solaris-multi-select__value\">\n              <span class=\"solaris-multi-select__placeholder\">{{\n                placeholderText()\n              }}</span>\n            </span>\n          }\n        }\n      }\n    </div>\n\n    <span class=\"solaris-multi-select__actions\">\n      @if (canClear()) {\n        <button\n          type=\"button\"\n          class=\"solaris-multi-select__clear\"\n          [attr.aria-label]=\"clearAriaLabel()\"\n          (click)=\"clearValue(); $event.stopPropagation()\"\n          tabindex=\"-1\"\n        >\n          <solaris-icon name=\"x\" [decorative]=\"true\" />\n        </button>\n      }\n\n      <solaris-icon\n        class=\"solaris-multi-select__dropdown-icon\"\n        name=\"chevron-down\"\n        [decorative]=\"true\"\n        size=\"sm\"\n      />\n    </span>\n  </div>\n\n  <ng-content\n    select=\"[solaris-form-suffix]\"\n    ngProjectAs=\"[solaris-form-suffix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-label-action]\"\n    ngProjectAs=\"[solaris-form-label-action]\"\n  />\n</solaris-form-field>\n\n<ng-template #matchWidthPopover=\"solarisPopover\" solaris-popover>\n  <div\n    class=\"solaris-multi-select__panel\"\n    role=\"listbox\"\n    [attr.aria-multiselectable]=\"'true'\"\n    [attr.id]=\"panelId\"\n    tabindex=\"-1\"\n    (click)=\"onPanelClick($event)\"\n    (keydown)=\"onPanelKeydown($event)\"\n  >\n    @if (selectAll() && !loading()) {\n      <div\n        class=\"solaris-multi-select__select-all\"\n        role=\"option\"\n        aria-selected=\"false\"\n        tabindex=\"-1\"\n        (click)=\"handleSelectAll()\"\n        (keydown.enter)=\"handleSelectAll()\"\n        (keydown.space)=\"handleSelectAll(); $event.preventDefault()\"\n        [class.solaris-multi-select__select-all--readonly]=\"\n          isEffectivelyReadonly()\n        \"\n      >\n        <span\n          class=\"solaris-multi-select__select-all-checkbox\"\n          [class.solaris-multi-select__select-all-checkbox--checked]=\"\n            isAllSelected()\n          \"\n          [class.solaris-multi-select__select-all-checkbox--partial]=\"\n            isPartialSelected()\n          \"\n        >\n          @if (isAllSelected()) {\n            <span class=\"solaris-multi-select__select-all-checkbox-icon\">\n              <solaris-icon name=\"check\" [decorative]=\"true\" />\n            </span>\n          } @else if (isPartialSelected()) {\n            <span class=\"solaris-multi-select__select-all-checkbox-icon\">\n              <solaris-icon name=\"minus\" [decorative]=\"true\" />\n            </span>\n          }\n        </span>\n        <span class=\"solaris-multi-select__select-all-label\">{{\n          selectAllLabelText()\n        }}</span>\n      </div>\n    }\n\n    @if (loading()) {\n      <div class=\"solaris-multi-select__loading\">\n        <span class=\"solaris-multi-select__loading-text\">{{\n          loadingTextValue()\n        }}</span>\n      </div>\n    } @else if (showNoResults()) {\n      <div class=\"solaris-multi-select__no-results\">\n        <span class=\"solaris-multi-select__no-results-text\">{{\n          noResultsTextValue()\n        }}</span>\n      </div>\n    } @else if (showEmpty()) {\n      <div class=\"solaris-multi-select__empty\">\n        <span class=\"solaris-multi-select__empty-text\">{{\n          emptyTextValue()\n        }}</span>\n      </div>\n    } @else {\n      <div\n        class=\"solaris-multi-select__options\"\n        [style.max-height]=\"panelMaxHeight()\"\n      >\n        <ng-content select=\"solaris-option, solaris-option-group\" />\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [":host{--solaris-multi-select-chip-gap: var(--solaris-spacing-1);--solaris-multi-select-chip-radius: var(--solaris-radius-sm);--solaris-multi-select-icon-color: var(--solaris-text-muted);--solaris-multi-select-font-size: var(--solaris-font-size-md);--solaris-multi-select-chip-color: var(--solaris-text-default);--solaris-multi-select-value-color: var(--solaris-text-default);--solaris-multi-select-chip-padding-y: var(--solaris-spacing-1);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-2);--solaris-multi-select-line-height: var(--solaris-line-height-md);--solaris-multi-select-chip-font-size: var(--solaris-font-size-sm);--solaris-multi-select-select-all-height: var(--solaris-spacing-9);--solaris-surface-hover: var(--solaris-surface-subtle);--solaris-primary-muted: var(--solaris-primary-surface);--solaris-on-primary: var(--solaris-primary-on-solid);--solaris-multi-select-placeholder-color: var(--solaris-text-muted);--solaris-multi-select-chip-remove-size: var(--solaris-font-size-md);--solaris-multi-select-chip-background: var(--solaris-surface-subtle);outline:none;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;display:inline-flex;flex-direction:column;box-sizing:border-box;font-family:var(--solaris-font-family-sans),system-ui}.solaris-multi-select__trigger{flex:1;padding:0;min-width:0;border:none;outline:none;display:flex;cursor:pointer;align-items:center;box-sizing:border-box;background:transparent;gap:var(--solaris-spacing-2)}:host ::ng-deep .solaris-form-field__message-row{margin-top:0}:host ::ng-deep .solaris-multi-select--panel-open .solaris-form-field__message-row{display:none}.solaris-multi-select__trigger-content{flex:1;min-width:0;display:flex;overflow:hidden;align-items:center;gap:var(--solaris-spacing-2)}.solaris-multi-select__value{flex:none;min-width:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-multi-select__value-text{color:var(--solaris-multi-select-value-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__placeholder{font-size:var(--solaris-multi-select-font-size);color:var(--solaris-multi-select-placeholder-color);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__chips{flex:1;min-width:0;display:flex;flex-wrap:wrap;overflow:hidden;align-items:center;gap:var(--solaris-multi-select-chip-gap)}.solaris-multi-select__chips--auto{flex:none;flex-wrap:nowrap}.solaris-multi-select__chips--auto .solaris-multi-select__chip{flex-shrink:0}.solaris-multi-select__chip{align-items:center;white-space:nowrap;display:inline-flex;gap:var(--solaris-spacing-1);line-height:var(--solaris-line-height-sm);color:var(--solaris-multi-select-chip-color);font-size:var(--solaris-multi-select-chip-font-size);border-radius:var(--solaris-multi-select-chip-radius);background:var(--solaris-multi-select-chip-background);border:var(--solaris-border-width-sm) solid var(--solaris-border-default);padding:var(--solaris-multi-select-chip-padding-y) var(--solaris-multi-select-chip-padding-x)}.solaris-multi-select__chip-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-multi-select__chip-remove solaris-icon{width:var(--solaris-multi-select-chip-remove-size);height:var(--solaris-multi-select-chip-remove-size)}.solaris-multi-select__chip-remove{padding:0;border:none;display:flex;flex-shrink:0;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;color:var(--solaris-multi-select-icon-color);width:var(--solaris-multi-select-chip-remove-size);height:var(--solaris-multi-select-chip-remove-size);transition:background var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-multi-select__chip-remove:hover{background:var(--solaris-surface-hover)}.solaris-multi-select__chip-overflow{flex-shrink:0;white-space:nowrap;color:var(--solaris-multi-select-icon-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__actions{display:flex;flex-shrink:0;align-items:center;gap:var(--solaris-spacing-2)}.solaris-multi-select__clear solaris-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl)}.solaris-multi-select__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl);color:var(--solaris-multi-select-icon-color);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-multi-select__clear:hover{color:var(--solaris-text-default)}.solaris-multi-select__dropdown-icon solaris-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl)}.solaris-multi-select__dropdown-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl);color:var(--solaris-multi-select-icon-color);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-multi-select__dropdown-icon{transform:rotate(180deg)}.solaris-multi-select__panel{display:flex;overflow-y:auto;flex-direction:column;overscroll-behavior:contain}.solaris-multi-select__search-input{flex:1;margin:0;padding:0;border:none;min-width:0;outline:none;font-family:inherit;box-sizing:border-box;background:transparent;color:var(--solaris-multi-select-value-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__search-input::placeholder{color:var(--solaris-multi-select-placeholder-color)}.solaris-multi-select__loading,.solaris-multi-select__no-results,.solaris-multi-select__empty{display:flex;align-items:center;justify-content:center;color:var(--solaris-text-muted);padding:var(--solaris-spacing-4);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}.solaris-multi-select__options{display:flex;flex-direction:column;gap:var(--solaris-spacing-1);padding:var(--solaris-spacing-1) var(--solaris-spacing-2)}.solaris-multi-select__select-all{display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:var(--solaris-spacing-2);min-height:var(--solaris-multi-select-select-all-height);padding:var(--solaris-spacing-2) var(--solaris-spacing-3);transition:background var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-multi-select__select-all:hover{background:var(--solaris-surface-hover)}.solaris-multi-select__select-all-checkbox{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);border-radius:var(--solaris-radius-sm);background:var(--solaris-surface-base);border:var(--solaris-border-width-sm) solid var(--solaris-primary-border)}.solaris-multi-select__select-all-checkbox--checked{background:var(--solaris-primary-base);border-color:var(--solaris-primary-base)}.solaris-multi-select__select-all-checkbox--partial{background:var(--solaris-primary-muted);border-color:var(--solaris-primary-base)}.solaris-multi-select__select-all-checkbox-icon{display:flex;align-items:center;justify-content:center;color:var(--solaris-on-primary);width:var(--solaris-font-size-sm);height:var(--solaris-font-size-sm)}.solaris-multi-select__select-all-label{color:var(--solaris-multi-select-value-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__select-all--readonly{cursor:default;opacity:var(--solaris-opacity-50)}:host([data-disabled]){cursor:not-allowed}:host([data-readonly]){cursor:default}@media(prefers-reduced-motion:reduce){.solaris-multi-select__dropdown-icon,.solaris-multi-select__clear{transition:none}}[data-reduced-motion=true] .solaris-multi-select__dropdown-icon,[data-reduced-motion=true] .solaris-multi-select__clear{transition:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { popoverTrigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SolarisPopoverTriggerDirective), { isSignal: true }] }], searchInputRef: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }], triggerElement: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], formFieldElement: [{ type: i0.ViewChild, args: ['formFieldRef', { isSignal: true }] }], options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SolarisOptionComponent), { ...{
                             descendants: true,
                         }, isSignal: true }] }], optionGroups: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SolarisOptionGroupComponent), { ...{
@@ -8649,9 +8842,13 @@ function hasSequentialChars(value, charset) {
 // SECURITY_EXCEPTION_FILE: nativeElement.focus() is the standard DOM API to restore focus after toggle. No SSR-safe alternative exists for imperative focus. Same approach used by Angular CDK.
 class SolarisPasswordFieldComponent {
     translateService = inject(SolarisTranslateService);
+    themeService = inject(SolarisThemeService);
     inputElementRef = viewChild('inputElement', ...(ngDevMode ? [{ debugName: "inputElementRef" }] : /* istanbul ignore next */ []));
     projectedPrefix = contentChild(SolarisFormPrefixDirective, ...(ngDevMode ? [{ debugName: "projectedPrefix" }] : /* istanbul ignore next */ []));
     projectedSuffix = contentChild(SolarisFormSuffixDirective, ...(ngDevMode ? [{ debugName: "projectedSuffix" }] : /* istanbul ignore next */ []));
+    effectiveDensity = computed(() => {
+        return this.density() ?? this.themeService.density;
+    }, ...(ngDevMode ? [{ debugName: "effectiveDensity" }] : /* istanbul ignore next */ []));
     value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     labelKey = input(...(ngDevMode ? [undefined, { debugName: "labelKey" }] : /* istanbul ignore next */ []));
@@ -8907,7 +9104,7 @@ class SolarisPasswordFieldComponent {
         this.visibleChange.emit(newVisible);
         if (this.inputElementRef()) {
             try {
-                this.inputElementRef().nativeElement.focus();
+                this.inputElementRef()?.nativeElement.focus();
             }
             catch {
                 if (isDevMode()) {
@@ -8917,13 +9114,13 @@ class SolarisPasswordFieldComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisPasswordFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisPasswordFieldComponent, isStandalone: true, selector: "solaris-password-field", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, hintKey: { classPropertyName: "hintKey", publicName: "hintKey", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, errorKey: { classPropertyName: "errorKey", publicName: "errorKey", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, placeholderKey: { classPropertyName: "placeholderKey", publicName: "placeholderKey", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, showToggle: { classPropertyName: "showToggle", publicName: "showToggle", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, showRequirements: { classPropertyName: "showRequirements", publicName: "showRequirements", isSignal: true, isRequired: false, transformFunction: null }, showStrength: { classPropertyName: "showStrength", publicName: "showStrength", isSignal: true, isRequired: false, transformFunction: null }, policy: { classPropertyName: "policy", publicName: "policy", isSignal: true, isRequired: false, transformFunction: null }, validatePolicy: { classPropertyName: "validatePolicy", publicName: "validatePolicy", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, toggleShowLabel: { classPropertyName: "toggleShowLabel", publicName: "toggleShowLabel", isSignal: true, isRequired: false, transformFunction: null }, toggleShowLabelKey: { classPropertyName: "toggleShowLabelKey", publicName: "toggleShowLabelKey", isSignal: true, isRequired: false, transformFunction: null }, toggleHideLabel: { classPropertyName: "toggleHideLabel", publicName: "toggleHideLabel", isSignal: true, isRequired: false, transformFunction: null }, toggleHideLabelKey: { classPropertyName: "toggleHideLabelKey", publicName: "toggleHideLabelKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", visibleChange: "visibleChange" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisPasswordFieldComponent, isStandalone: true, selector: "solaris-password-field", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, hintKey: { classPropertyName: "hintKey", publicName: "hintKey", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, errorKey: { classPropertyName: "errorKey", publicName: "errorKey", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, placeholderKey: { classPropertyName: "placeholderKey", publicName: "placeholderKey", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, showToggle: { classPropertyName: "showToggle", publicName: "showToggle", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, showRequirements: { classPropertyName: "showRequirements", publicName: "showRequirements", isSignal: true, isRequired: false, transformFunction: null }, showStrength: { classPropertyName: "showStrength", publicName: "showStrength", isSignal: true, isRequired: false, transformFunction: null }, policy: { classPropertyName: "policy", publicName: "policy", isSignal: true, isRequired: false, transformFunction: null }, validatePolicy: { classPropertyName: "validatePolicy", publicName: "validatePolicy", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, toggleShowLabel: { classPropertyName: "toggleShowLabel", publicName: "toggleShowLabel", isSignal: true, isRequired: false, transformFunction: null }, toggleShowLabelKey: { classPropertyName: "toggleShowLabelKey", publicName: "toggleShowLabelKey", isSignal: true, isRequired: false, transformFunction: null }, toggleHideLabel: { classPropertyName: "toggleHideLabel", publicName: "toggleHideLabel", isSignal: true, isRequired: false, transformFunction: null }, toggleHideLabelKey: { classPropertyName: "toggleHideLabelKey", publicName: "toggleHideLabelKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", visibleChange: "visibleChange" }, host: { properties: { "attr.data-density": "effectiveDensity()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SolarisPasswordFieldComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "projectedPrefix", first: true, predicate: SolarisFormPrefixDirective, descendants: true, isSignal: true }, { propertyName: "projectedSuffix", first: true, predicate: SolarisFormSuffixDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<solaris-form-field\n  [hint]=\"hint()\"\n  [label]=\"label()\"\n  [radius]=\"radius()\"\n  [density]=\"density()\"\n  [hintKey]=\"hintKey()\"\n  [labelKey]=\"labelKey()\"\n  [errorKey]=\"errorKey()\"\n  [required]=\"required()\"\n  [optional]=\"optional()\"\n  [readonly]=\"readonly()\"\n  [appearance]=\"appearance()\"\n  [invalid]=\"isFieldInvalid()\"\n  [error]=\"error() || computedError()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [hasPrefix]=\"hasPrefix()\"\n  [hasSuffix]=\"hasSuffix()\"\n>\n  @if (prefix() && !projectedPrefix()) {\n    <span solaris-form-prefix>\n      <solaris-icon [name]=\"prefix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n  <ng-content select=\"[solaris-form-prefix]\" />\n  <input\n    #inputElement\n    solaris-input\n    [type]=\"inputType()\"\n    [density]=\"density()\"\n    (blur)=\"onInputBlur()\"\n    [readonly]=\"readonly()\"\n    [attr.id]=\"id() ?? null\"\n    (focus)=\"onInputFocus()\"\n    [value]=\"internalValue()\"\n    (input)=\"onInput($event)\"\n    [attr.name]=\"name() ?? null\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [attr.autocomplete]=\"autocomplete() ?? null\"\n    [attr.placeholder]=\"placeholderText() || null\"\n    [attr.maxlength]=\"maxLength() ?? null\"\n  />\n  @if (suffix() && !projectedSuffix()) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n  @if (showToggle()) {\n    <button\n      type=\"button\"\n      solaris-form-suffix\n      (click)=\"toggleVisibility()\"\n      [attr.aria-label]=\"toggleLabel()\"\n      [disabled]=\"isEffectivelyDisabled()\"\n      class=\"solaris-password-field__toggle\"\n    >\n      <solaris-icon\n        [decorative]=\"true\"\n        [name]=\"_visibleState() ? 'eye-off' : 'eye'\"\n      />\n    </button>\n  }\n  <ng-content select=\"[solaris-form-suffix]\" />\n</solaris-form-field>\n\n@if (showRequirements() && effectivePolicy()) {\n  <div class=\"solaris-password-field__requirements\" role=\"list\">\n    @for (req of requirementList(); track req.key) {\n      <div\n        class=\"solaris-password-field__requirement\"\n        role=\"listitem\"\n        [attr.data-met]=\"req.met\"\n      >\n        <solaris-icon\n          class=\"solaris-password-field__requirement-icon\"\n          [name]=\"req.met ? 'check' : 'x'\"\n          [decorative]=\"true\"\n        />\n        <span class=\"solaris-password-field__requirement-label\">\n          {{ req.label }}\n        </span>\n      </div>\n    }\n  </div>\n}\n\n@if (showStrength() && internalValue().length > 0) {\n  <div\n    class=\"solaris-password-field__strength\"\n    [attr.data-level]=\"strengthLevel()\"\n    role=\"status\"\n    aria-live=\"polite\"\n  >\n    <div class=\"solaris-password-field__strength-bar\">\n      <div\n        class=\"solaris-password-field__strength-segment\"\n        [attr.data-active]=\"strengthLevel() !== 'empty'\"\n      ></div>\n      <div\n        class=\"solaris-password-field__strength-segment\"\n        [attr.data-active]=\"\n          strengthLevel() === 'medium' || strengthLevel() === 'strong'\n        \"\n      ></div>\n      <div\n        class=\"solaris-password-field__strength-segment\"\n        [attr.data-active]=\"strengthLevel() === 'strong'\"\n      ></div>\n    </div>\n    <span class=\"solaris-password-field__strength-label\">\n      {{ strengthLabelText() }}\n    </span>\n  </div>\n}\n", styles: [":host{--solaris-password-field-strength-height: 4px;--solaris-password-field-strength-gap: var(--solaris-spacing-2);--solaris-password-field-requirement-gap: var(--solaris-spacing-1);--solaris-password-field-strength-radius: var(--solaris-radius-sm);--solaris-password-field-requirement-color: var(--solaris-text-muted);--solaris-password-field-strength-bar-bg: var(--solaris-surface-muted);--solaris-password-field-strength-weak-color: var(--solaris-danger-text);--solaris-password-field-requirement-met-color: var(--solaris-success-text);--solaris-password-field-strength-medium-color: var(--solaris-warning-text);--solaris-password-field-strength-strong-color: var(--solaris-success-text);--solaris-password-field-requirement-unmet-color: var(--solaris-danger-text);display:block;box-sizing:border-box}.solaris-password-field__toggle:disabled{cursor:not-allowed;pointer-events:none;opacity:var(--solaris-opacity-50)}.solaris-password-field__toggle{margin:0;padding:0;padding-inline:var(--solaris-density-padding-sm);border:none;font:inherit;line-height:var(--solaris-line-height-none);cursor:pointer;appearance:none;background:none;box-shadow:none;align-items:center;justify-content:center;-webkit-appearance:none}.solaris-form-suffix solaris-icon{cursor:pointer;width:var(--solaris-density-font-size);height:var(--solaris-density-font-size);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-password-field__requirements{padding:0;display:flex;list-style:none;flex-direction:column;margin-top:var(--solaris-spacing-2);gap:var(--solaris-password-field-requirement-gap)}.solaris-password-field__requirement{display:flex;align-items:center;gap:var(--solaris-spacing-1);font-size:var(--solaris-font-size-sm);color:var(--solaris-password-field-requirement-unmet-color);transition:color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}.solaris-password-field__requirement[data-met=true]{color:var(--solaris-password-field-requirement-met-color)}.solaris-password-field__requirement-icon{width:1em;height:1em;flex-shrink:0}.solaris-password-field__requirement[data-met=true] .solaris-password-field__requirement-icon{color:var(--solaris-password-field-requirement-met-color)}.solaris-password-field__requirement[data-met=false] .solaris-password-field__requirement-icon{color:var(--solaris-password-field-requirement-unmet-color)}.solaris-password-field__strength{display:flex;align-items:center;margin-top:var(--solaris-spacing-1);gap:var(--solaris-password-field-strength-gap)}.solaris-password-field__strength-bar{flex:1;display:flex;gap:var(--solaris-spacing-half);min-width:64px;height:var(--solaris-password-field-strength-height)}.solaris-password-field__strength-segment{flex:1;height:100%;background:var(--solaris-password-field-strength-bar-bg);border-radius:var(--solaris-password-field-strength-radius);transition:background-color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-password-field__strength[data-level=weak] .solaris-password-field__strength-segment[data-active=true]{background-color:var(--solaris-password-field-strength-weak-color)}.solaris-password-field__strength[data-level=medium] .solaris-password-field__strength-segment[data-active=true]{background-color:var(--solaris-password-field-strength-medium-color)}.solaris-password-field__strength[data-level=strong] .solaris-password-field__strength-segment[data-active=true]{background-color:var(--solaris-password-field-strength-strong-color)}input[type=password]::-ms-reveal,input[type=password]::-ms-clear{display:none}input[type=password]::-webkit-credentials-auto-fill-button,input[type=password]::-webkit-contacts-auto-fill-button{visibility:hidden;pointer-events:none;display:none!important}.solaris-password-field__strength-label{flex-shrink:0;white-space:nowrap;color:var(--solaris-text-muted);font-size:var(--solaris-font-size-xs)}@media(prefers-reduced-motion:reduce){.solaris-password-field__requirement,.solaris-password-field__strength-segment{transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: SolarisFormFieldComponent, selector: "solaris-form-field", inputs: ["hintKey", "labelKey", "hint", "errorKey", "label", "error", "optionalLabel", "requiredLabel", "optionalLabelKey", "requiredLabelKey", "required", "optional", "invalid", "disabled", "readonly", "density", "radius", "appearance", "control", "hasPrefix", "hasSuffix", "prefix", "suffix"] }, { kind: "directive", type: SolarisInputDirective, selector: "[solaris-input]", inputs: ["appearance", "radius", "size", "density", "invalid", "fullWidth"] }, { kind: "directive", type: SolarisFormSuffixDirective, selector: "[solaris-form-suffix]" }, { kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "projectedPrefix", first: true, predicate: SolarisFormPrefixDirective, descendants: true, isSignal: true }, { propertyName: "projectedSuffix", first: true, predicate: SolarisFormSuffixDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<solaris-form-field\n  [hint]=\"hint()\"\n  [label]=\"label()\"\n  [radius]=\"radius()\"\n  [density]=\"density()\"\n  [hintKey]=\"hintKey()\"\n  [labelKey]=\"labelKey()\"\n  [errorKey]=\"errorKey()\"\n  [required]=\"required()\"\n  [optional]=\"optional()\"\n  [readonly]=\"readonly()\"\n  [appearance]=\"appearance()\"\n  [invalid]=\"isFieldInvalid()\"\n  [error]=\"error() || computedError()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [hasPrefix]=\"hasPrefix()\"\n  [hasSuffix]=\"hasSuffix()\"\n>\n  @if (prefix() && !projectedPrefix()) {\n    <span solaris-form-prefix>\n      <solaris-icon [name]=\"prefix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n  <ng-content\n    select=\"[solaris-form-prefix]\"\n    ngProjectAs=\"[solaris-form-prefix]\"\n  />\n  <input\n    #inputElement\n    solaris-input\n    [type]=\"inputType()\"\n    [density]=\"density()\"\n    (blur)=\"onInputBlur()\"\n    [readonly]=\"readonly()\"\n    [attr.id]=\"id() ?? null\"\n    (focus)=\"onInputFocus()\"\n    [value]=\"internalValue()\"\n    (input)=\"onInput($event)\"\n    [attr.name]=\"name() ?? null\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [attr.autocomplete]=\"autocomplete() ?? null\"\n    [attr.placeholder]=\"placeholderText() || null\"\n    [attr.maxlength]=\"maxLength() ?? null\"\n  />\n  @if (suffix() && !projectedSuffix()) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n  @if (showToggle()) {\n    <button\n      type=\"button\"\n      solaris-form-suffix\n      (click)=\"toggleVisibility()\"\n      [attr.aria-label]=\"toggleLabel()\"\n      [disabled]=\"isEffectivelyDisabled()\"\n      class=\"solaris-password-field__toggle\"\n    >\n      <solaris-icon\n        [decorative]=\"true\"\n        [name]=\"_visibleState() ? 'eye-off' : 'eye'\"\n      />\n    </button>\n  }\n  <ng-content\n    select=\"[solaris-form-suffix]\"\n    ngProjectAs=\"[solaris-form-suffix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-label-action]\"\n    ngProjectAs=\"[solaris-form-label-action]\"\n  />\n</solaris-form-field>\n\n@if (showRequirements() && effectivePolicy()) {\n  <div class=\"solaris-password-field__requirements\" role=\"list\">\n    @for (req of requirementList(); track req.key) {\n      <div\n        class=\"solaris-password-field__requirement\"\n        role=\"listitem\"\n        [attr.data-met]=\"req.met\"\n      >\n        <solaris-icon\n          class=\"solaris-password-field__requirement-icon\"\n          [name]=\"req.met ? 'check' : 'x'\"\n          [decorative]=\"true\"\n        />\n        <span class=\"solaris-password-field__requirement-label\">\n          {{ req.label }}\n        </span>\n      </div>\n    }\n  </div>\n}\n\n@if (showStrength() && internalValue().length > 0) {\n  <div\n    class=\"solaris-password-field__strength\"\n    [attr.data-level]=\"strengthLevel()\"\n    role=\"status\"\n    aria-live=\"polite\"\n  >\n    <div class=\"solaris-password-field__strength-bar\">\n      <div\n        class=\"solaris-password-field__strength-segment\"\n        [attr.data-active]=\"strengthLevel() !== 'empty'\"\n      ></div>\n      <div\n        class=\"solaris-password-field__strength-segment\"\n        [attr.data-active]=\"\n          strengthLevel() === 'medium' || strengthLevel() === 'strong'\n        \"\n      ></div>\n      <div\n        class=\"solaris-password-field__strength-segment\"\n        [attr.data-active]=\"strengthLevel() === 'strong'\"\n      ></div>\n    </div>\n    <span class=\"solaris-password-field__strength-label\">\n      {{ strengthLabelText() }}\n    </span>\n  </div>\n}\n", styles: [":host{--solaris-password-field-strength-height: 4px;--solaris-password-field-strength-gap: var(--solaris-spacing-2);--solaris-password-field-requirement-gap: var(--solaris-spacing-1);--solaris-password-field-strength-radius: var(--solaris-radius-sm);--solaris-password-field-requirement-color: var(--solaris-text-muted);--solaris-password-field-strength-bar-bg: var(--solaris-surface-muted);--solaris-password-field-strength-weak-color: var(--solaris-danger-text);--solaris-password-field-requirement-met-color: var(--solaris-success-text);--solaris-password-field-strength-medium-color: var(--solaris-warning-text);--solaris-password-field-strength-strong-color: var(--solaris-success-text);--solaris-password-field-requirement-unmet-color: var(--solaris-danger-text);display:block;box-sizing:border-box}.solaris-password-field__toggle:disabled{cursor:not-allowed;pointer-events:none;opacity:var(--solaris-opacity-50)}.solaris-password-field__toggle{margin:0;padding:0;padding-inline:var(--solaris-density-padding-sm);border:none;font:inherit;line-height:var(--solaris-line-height-none);cursor:pointer;appearance:none;background:none;box-shadow:none;align-items:center;justify-content:center;-webkit-appearance:none}.solaris-form-suffix solaris-icon{cursor:pointer;width:var(--solaris-density-font-size);height:var(--solaris-density-font-size);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-password-field__toggle solaris-icon{width:1em;height:1em}:host([data-density=compact]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-lg)}:host([data-density=normal]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-xl)}:host([data-density=comfortable]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-2xl)}.solaris-password-field__requirements{padding:0;display:flex;list-style:none;flex-direction:column;margin-top:var(--solaris-spacing-2);gap:var(--solaris-password-field-requirement-gap)}.solaris-password-field__requirement{display:flex;align-items:center;gap:var(--solaris-spacing-1);font-size:var(--solaris-font-size-sm);color:var(--solaris-password-field-requirement-unmet-color);transition:color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}.solaris-password-field__requirement[data-met=true]{color:var(--solaris-password-field-requirement-met-color)}.solaris-password-field__requirement-icon{width:1em;height:1em;flex-shrink:0}.solaris-password-field__requirement[data-met=true] .solaris-password-field__requirement-icon{color:var(--solaris-password-field-requirement-met-color)}.solaris-password-field__requirement[data-met=false] .solaris-password-field__requirement-icon{color:var(--solaris-password-field-requirement-unmet-color)}.solaris-password-field__strength{display:flex;align-items:center;margin-top:var(--solaris-spacing-1);gap:var(--solaris-password-field-strength-gap)}.solaris-password-field__strength-bar{flex:1;display:flex;gap:var(--solaris-spacing-half);min-width:64px;height:var(--solaris-password-field-strength-height)}.solaris-password-field__strength-segment{flex:1;height:100%;background:var(--solaris-password-field-strength-bar-bg);border-radius:var(--solaris-password-field-strength-radius);transition:background-color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-password-field__strength[data-level=weak] .solaris-password-field__strength-segment[data-active=true]{background-color:var(--solaris-password-field-strength-weak-color)}.solaris-password-field__strength[data-level=medium] .solaris-password-field__strength-segment[data-active=true]{background-color:var(--solaris-password-field-strength-medium-color)}.solaris-password-field__strength[data-level=strong] .solaris-password-field__strength-segment[data-active=true]{background-color:var(--solaris-password-field-strength-strong-color)}input[type=password]::-ms-reveal,input[type=password]::-ms-clear{display:none}input[type=password]::-webkit-credentials-auto-fill-button,input[type=password]::-webkit-contacts-auto-fill-button{visibility:hidden;pointer-events:none;display:none!important}.solaris-password-field__strength-label{flex-shrink:0;white-space:nowrap;color:var(--solaris-text-muted);font-size:var(--solaris-font-size-xs)}@media(prefers-reduced-motion:reduce){.solaris-password-field__requirement,.solaris-password-field__strength-segment{transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: SolarisFormFieldComponent, selector: "solaris-form-field", inputs: ["hintKey", "labelKey", "hint", "errorKey", "label", "error", "optionalLabel", "requiredLabel", "optionalLabelKey", "requiredLabelKey", "required", "optional", "invalid", "disabled", "readonly", "density", "radius", "appearance", "control", "hasPrefix", "hasSuffix", "prefix", "suffix"] }, { kind: "directive", type: SolarisInputDirective, selector: "[solaris-input]", inputs: ["appearance", "radius", "size", "density", "invalid", "fullWidth"] }, { kind: "directive", type: SolarisFormSuffixDirective, selector: "[solaris-form-suffix]" }, { kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisPasswordFieldComponent, decorators: [{
             type: Component,
@@ -8939,7 +9136,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                             useExisting: forwardRef(() => SolarisPasswordFieldComponent),
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<solaris-form-field\n  [hint]=\"hint()\"\n  [label]=\"label()\"\n  [radius]=\"radius()\"\n  [density]=\"density()\"\n  [hintKey]=\"hintKey()\"\n  [labelKey]=\"labelKey()\"\n  [errorKey]=\"errorKey()\"\n  [required]=\"required()\"\n  [optional]=\"optional()\"\n  [readonly]=\"readonly()\"\n  [appearance]=\"appearance()\"\n  [invalid]=\"isFieldInvalid()\"\n  [error]=\"error() || computedError()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [hasPrefix]=\"hasPrefix()\"\n  [hasSuffix]=\"hasSuffix()\"\n>\n  @if (prefix() && !projectedPrefix()) {\n    <span solaris-form-prefix>\n      <solaris-icon [name]=\"prefix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n  <ng-content select=\"[solaris-form-prefix]\" />\n  <input\n    #inputElement\n    solaris-input\n    [type]=\"inputType()\"\n    [density]=\"density()\"\n    (blur)=\"onInputBlur()\"\n    [readonly]=\"readonly()\"\n    [attr.id]=\"id() ?? null\"\n    (focus)=\"onInputFocus()\"\n    [value]=\"internalValue()\"\n    (input)=\"onInput($event)\"\n    [attr.name]=\"name() ?? null\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [attr.autocomplete]=\"autocomplete() ?? null\"\n    [attr.placeholder]=\"placeholderText() || null\"\n    [attr.maxlength]=\"maxLength() ?? null\"\n  />\n  @if (suffix() && !projectedSuffix()) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n  @if (showToggle()) {\n    <button\n      type=\"button\"\n      solaris-form-suffix\n      (click)=\"toggleVisibility()\"\n      [attr.aria-label]=\"toggleLabel()\"\n      [disabled]=\"isEffectivelyDisabled()\"\n      class=\"solaris-password-field__toggle\"\n    >\n      <solaris-icon\n        [decorative]=\"true\"\n        [name]=\"_visibleState() ? 'eye-off' : 'eye'\"\n      />\n    </button>\n  }\n  <ng-content select=\"[solaris-form-suffix]\" />\n</solaris-form-field>\n\n@if (showRequirements() && effectivePolicy()) {\n  <div class=\"solaris-password-field__requirements\" role=\"list\">\n    @for (req of requirementList(); track req.key) {\n      <div\n        class=\"solaris-password-field__requirement\"\n        role=\"listitem\"\n        [attr.data-met]=\"req.met\"\n      >\n        <solaris-icon\n          class=\"solaris-password-field__requirement-icon\"\n          [name]=\"req.met ? 'check' : 'x'\"\n          [decorative]=\"true\"\n        />\n        <span class=\"solaris-password-field__requirement-label\">\n          {{ req.label }}\n        </span>\n      </div>\n    }\n  </div>\n}\n\n@if (showStrength() && internalValue().length > 0) {\n  <div\n    class=\"solaris-password-field__strength\"\n    [attr.data-level]=\"strengthLevel()\"\n    role=\"status\"\n    aria-live=\"polite\"\n  >\n    <div class=\"solaris-password-field__strength-bar\">\n      <div\n        class=\"solaris-password-field__strength-segment\"\n        [attr.data-active]=\"strengthLevel() !== 'empty'\"\n      ></div>\n      <div\n        class=\"solaris-password-field__strength-segment\"\n        [attr.data-active]=\"\n          strengthLevel() === 'medium' || strengthLevel() === 'strong'\n        \"\n      ></div>\n      <div\n        class=\"solaris-password-field__strength-segment\"\n        [attr.data-active]=\"strengthLevel() === 'strong'\"\n      ></div>\n    </div>\n    <span class=\"solaris-password-field__strength-label\">\n      {{ strengthLabelText() }}\n    </span>\n  </div>\n}\n", styles: [":host{--solaris-password-field-strength-height: 4px;--solaris-password-field-strength-gap: var(--solaris-spacing-2);--solaris-password-field-requirement-gap: var(--solaris-spacing-1);--solaris-password-field-strength-radius: var(--solaris-radius-sm);--solaris-password-field-requirement-color: var(--solaris-text-muted);--solaris-password-field-strength-bar-bg: var(--solaris-surface-muted);--solaris-password-field-strength-weak-color: var(--solaris-danger-text);--solaris-password-field-requirement-met-color: var(--solaris-success-text);--solaris-password-field-strength-medium-color: var(--solaris-warning-text);--solaris-password-field-strength-strong-color: var(--solaris-success-text);--solaris-password-field-requirement-unmet-color: var(--solaris-danger-text);display:block;box-sizing:border-box}.solaris-password-field__toggle:disabled{cursor:not-allowed;pointer-events:none;opacity:var(--solaris-opacity-50)}.solaris-password-field__toggle{margin:0;padding:0;padding-inline:var(--solaris-density-padding-sm);border:none;font:inherit;line-height:var(--solaris-line-height-none);cursor:pointer;appearance:none;background:none;box-shadow:none;align-items:center;justify-content:center;-webkit-appearance:none}.solaris-form-suffix solaris-icon{cursor:pointer;width:var(--solaris-density-font-size);height:var(--solaris-density-font-size);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-password-field__requirements{padding:0;display:flex;list-style:none;flex-direction:column;margin-top:var(--solaris-spacing-2);gap:var(--solaris-password-field-requirement-gap)}.solaris-password-field__requirement{display:flex;align-items:center;gap:var(--solaris-spacing-1);font-size:var(--solaris-font-size-sm);color:var(--solaris-password-field-requirement-unmet-color);transition:color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}.solaris-password-field__requirement[data-met=true]{color:var(--solaris-password-field-requirement-met-color)}.solaris-password-field__requirement-icon{width:1em;height:1em;flex-shrink:0}.solaris-password-field__requirement[data-met=true] .solaris-password-field__requirement-icon{color:var(--solaris-password-field-requirement-met-color)}.solaris-password-field__requirement[data-met=false] .solaris-password-field__requirement-icon{color:var(--solaris-password-field-requirement-unmet-color)}.solaris-password-field__strength{display:flex;align-items:center;margin-top:var(--solaris-spacing-1);gap:var(--solaris-password-field-strength-gap)}.solaris-password-field__strength-bar{flex:1;display:flex;gap:var(--solaris-spacing-half);min-width:64px;height:var(--solaris-password-field-strength-height)}.solaris-password-field__strength-segment{flex:1;height:100%;background:var(--solaris-password-field-strength-bar-bg);border-radius:var(--solaris-password-field-strength-radius);transition:background-color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-password-field__strength[data-level=weak] .solaris-password-field__strength-segment[data-active=true]{background-color:var(--solaris-password-field-strength-weak-color)}.solaris-password-field__strength[data-level=medium] .solaris-password-field__strength-segment[data-active=true]{background-color:var(--solaris-password-field-strength-medium-color)}.solaris-password-field__strength[data-level=strong] .solaris-password-field__strength-segment[data-active=true]{background-color:var(--solaris-password-field-strength-strong-color)}input[type=password]::-ms-reveal,input[type=password]::-ms-clear{display:none}input[type=password]::-webkit-credentials-auto-fill-button,input[type=password]::-webkit-contacts-auto-fill-button{visibility:hidden;pointer-events:none;display:none!important}.solaris-password-field__strength-label{flex-shrink:0;white-space:nowrap;color:var(--solaris-text-muted);font-size:var(--solaris-font-size-xs)}@media(prefers-reduced-motion:reduce){.solaris-password-field__requirement,.solaris-password-field__strength-segment{transition:none}}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[attr.data-density]': 'effectiveDensity()',
+                    }, template: "<solaris-form-field\n  [hint]=\"hint()\"\n  [label]=\"label()\"\n  [radius]=\"radius()\"\n  [density]=\"density()\"\n  [hintKey]=\"hintKey()\"\n  [labelKey]=\"labelKey()\"\n  [errorKey]=\"errorKey()\"\n  [required]=\"required()\"\n  [optional]=\"optional()\"\n  [readonly]=\"readonly()\"\n  [appearance]=\"appearance()\"\n  [invalid]=\"isFieldInvalid()\"\n  [error]=\"error() || computedError()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [hasPrefix]=\"hasPrefix()\"\n  [hasSuffix]=\"hasSuffix()\"\n>\n  @if (prefix() && !projectedPrefix()) {\n    <span solaris-form-prefix>\n      <solaris-icon [name]=\"prefix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n  <ng-content\n    select=\"[solaris-form-prefix]\"\n    ngProjectAs=\"[solaris-form-prefix]\"\n  />\n  <input\n    #inputElement\n    solaris-input\n    [type]=\"inputType()\"\n    [density]=\"density()\"\n    (blur)=\"onInputBlur()\"\n    [readonly]=\"readonly()\"\n    [attr.id]=\"id() ?? null\"\n    (focus)=\"onInputFocus()\"\n    [value]=\"internalValue()\"\n    (input)=\"onInput($event)\"\n    [attr.name]=\"name() ?? null\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [attr.autocomplete]=\"autocomplete() ?? null\"\n    [attr.placeholder]=\"placeholderText() || null\"\n    [attr.maxlength]=\"maxLength() ?? null\"\n  />\n  @if (suffix() && !projectedSuffix()) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n  @if (showToggle()) {\n    <button\n      type=\"button\"\n      solaris-form-suffix\n      (click)=\"toggleVisibility()\"\n      [attr.aria-label]=\"toggleLabel()\"\n      [disabled]=\"isEffectivelyDisabled()\"\n      class=\"solaris-password-field__toggle\"\n    >\n      <solaris-icon\n        [decorative]=\"true\"\n        [name]=\"_visibleState() ? 'eye-off' : 'eye'\"\n      />\n    </button>\n  }\n  <ng-content\n    select=\"[solaris-form-suffix]\"\n    ngProjectAs=\"[solaris-form-suffix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-label-action]\"\n    ngProjectAs=\"[solaris-form-label-action]\"\n  />\n</solaris-form-field>\n\n@if (showRequirements() && effectivePolicy()) {\n  <div class=\"solaris-password-field__requirements\" role=\"list\">\n    @for (req of requirementList(); track req.key) {\n      <div\n        class=\"solaris-password-field__requirement\"\n        role=\"listitem\"\n        [attr.data-met]=\"req.met\"\n      >\n        <solaris-icon\n          class=\"solaris-password-field__requirement-icon\"\n          [name]=\"req.met ? 'check' : 'x'\"\n          [decorative]=\"true\"\n        />\n        <span class=\"solaris-password-field__requirement-label\">\n          {{ req.label }}\n        </span>\n      </div>\n    }\n  </div>\n}\n\n@if (showStrength() && internalValue().length > 0) {\n  <div\n    class=\"solaris-password-field__strength\"\n    [attr.data-level]=\"strengthLevel()\"\n    role=\"status\"\n    aria-live=\"polite\"\n  >\n    <div class=\"solaris-password-field__strength-bar\">\n      <div\n        class=\"solaris-password-field__strength-segment\"\n        [attr.data-active]=\"strengthLevel() !== 'empty'\"\n      ></div>\n      <div\n        class=\"solaris-password-field__strength-segment\"\n        [attr.data-active]=\"\n          strengthLevel() === 'medium' || strengthLevel() === 'strong'\n        \"\n      ></div>\n      <div\n        class=\"solaris-password-field__strength-segment\"\n        [attr.data-active]=\"strengthLevel() === 'strong'\"\n      ></div>\n    </div>\n    <span class=\"solaris-password-field__strength-label\">\n      {{ strengthLabelText() }}\n    </span>\n  </div>\n}\n", styles: [":host{--solaris-password-field-strength-height: 4px;--solaris-password-field-strength-gap: var(--solaris-spacing-2);--solaris-password-field-requirement-gap: var(--solaris-spacing-1);--solaris-password-field-strength-radius: var(--solaris-radius-sm);--solaris-password-field-requirement-color: var(--solaris-text-muted);--solaris-password-field-strength-bar-bg: var(--solaris-surface-muted);--solaris-password-field-strength-weak-color: var(--solaris-danger-text);--solaris-password-field-requirement-met-color: var(--solaris-success-text);--solaris-password-field-strength-medium-color: var(--solaris-warning-text);--solaris-password-field-strength-strong-color: var(--solaris-success-text);--solaris-password-field-requirement-unmet-color: var(--solaris-danger-text);display:block;box-sizing:border-box}.solaris-password-field__toggle:disabled{cursor:not-allowed;pointer-events:none;opacity:var(--solaris-opacity-50)}.solaris-password-field__toggle{margin:0;padding:0;padding-inline:var(--solaris-density-padding-sm);border:none;font:inherit;line-height:var(--solaris-line-height-none);cursor:pointer;appearance:none;background:none;box-shadow:none;align-items:center;justify-content:center;-webkit-appearance:none}.solaris-form-suffix solaris-icon{cursor:pointer;width:var(--solaris-density-font-size);height:var(--solaris-density-font-size);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-password-field__toggle solaris-icon{width:1em;height:1em}:host([data-density=compact]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-lg)}:host([data-density=normal]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-xl)}:host([data-density=comfortable]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-2xl)}.solaris-password-field__requirements{padding:0;display:flex;list-style:none;flex-direction:column;margin-top:var(--solaris-spacing-2);gap:var(--solaris-password-field-requirement-gap)}.solaris-password-field__requirement{display:flex;align-items:center;gap:var(--solaris-spacing-1);font-size:var(--solaris-font-size-sm);color:var(--solaris-password-field-requirement-unmet-color);transition:color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}.solaris-password-field__requirement[data-met=true]{color:var(--solaris-password-field-requirement-met-color)}.solaris-password-field__requirement-icon{width:1em;height:1em;flex-shrink:0}.solaris-password-field__requirement[data-met=true] .solaris-password-field__requirement-icon{color:var(--solaris-password-field-requirement-met-color)}.solaris-password-field__requirement[data-met=false] .solaris-password-field__requirement-icon{color:var(--solaris-password-field-requirement-unmet-color)}.solaris-password-field__strength{display:flex;align-items:center;margin-top:var(--solaris-spacing-1);gap:var(--solaris-password-field-strength-gap)}.solaris-password-field__strength-bar{flex:1;display:flex;gap:var(--solaris-spacing-half);min-width:64px;height:var(--solaris-password-field-strength-height)}.solaris-password-field__strength-segment{flex:1;height:100%;background:var(--solaris-password-field-strength-bar-bg);border-radius:var(--solaris-password-field-strength-radius);transition:background-color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-password-field__strength[data-level=weak] .solaris-password-field__strength-segment[data-active=true]{background-color:var(--solaris-password-field-strength-weak-color)}.solaris-password-field__strength[data-level=medium] .solaris-password-field__strength-segment[data-active=true]{background-color:var(--solaris-password-field-strength-medium-color)}.solaris-password-field__strength[data-level=strong] .solaris-password-field__strength-segment[data-active=true]{background-color:var(--solaris-password-field-strength-strong-color)}input[type=password]::-ms-reveal,input[type=password]::-ms-clear{display:none}input[type=password]::-webkit-credentials-auto-fill-button,input[type=password]::-webkit-contacts-auto-fill-button{visibility:hidden;pointer-events:none;display:none!important}.solaris-password-field__strength-label{flex-shrink:0;white-space:nowrap;color:var(--solaris-text-muted);font-size:var(--solaris-font-size-xs)}@media(prefers-reduced-motion:reduce){.solaris-password-field__requirement,.solaris-password-field__strength-segment{transition:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { inputElementRef: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }], projectedPrefix: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisFormPrefixDirective), { isSignal: true }] }], projectedSuffix: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisFormSuffixDirective), { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], hintKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintKey", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], errorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorKey", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], placeholderKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderKey", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], showToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToggle", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], showRequirements: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRequirements", required: false }] }], showStrength: [{ type: i0.Input, args: [{ isSignal: true, alias: "showStrength", required: false }] }], policy: [{ type: i0.Input, args: [{ isSignal: true, alias: "policy", required: false }] }], validatePolicy: [{ type: i0.Input, args: [{ isSignal: true, alias: "validatePolicy", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], toggleShowLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleShowLabel", required: false }] }], toggleShowLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleShowLabelKey", required: false }] }], toggleHideLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleHideLabel", required: false }] }], toggleHideLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleHideLabelKey", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], visibleChange: [{ type: i0.Output, args: ["visibleChange"] }] } });
 
 const BASIC_EMAIL_REGEX = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
@@ -9212,7 +9411,7 @@ class SolarisEmailFieldComponent {
                 useExisting: forwardRef(() => SolarisEmailFieldComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "projectedPrefix", first: true, predicate: SolarisFormPrefixDirective, descendants: true, isSignal: true }, { propertyName: "projectedSuffix", first: true, predicate: SolarisFormSuffixDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<solaris-form-field\n  [hint]=\"hint()\"\n  [label]=\"label()\"\n  [radius]=\"radius()\"\n  [density]=\"density()\"\n  [hintKey]=\"hintKey()\"\n  [labelKey]=\"labelKey()\"\n  [errorKey]=\"errorKey()\"\n  [required]=\"required()\"\n  [optional]=\"optional()\"\n  [readonly]=\"readonly()\"\n  [appearance]=\"appearance()\"\n  [invalid]=\"isFieldInvalid()\"\n  [error]=\"error() || computedError()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [hasPrefix]=\"hasPrefix()\"\n  [hasSuffix]=\"hasSuffix()\"\n>\n  @if (prefix() && !projectedPrefix()) {\n    <span solaris-form-prefix>\n      <solaris-icon [name]=\"prefix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n  <ng-content select=\"[solaris-form-prefix]\" />\n  <input\n    type=\"email\"\n    #inputElement\n    solaris-input\n    data-bwignore=\"true\"\n    [density]=\"density()\"\n    (blur)=\"onInputBlur()\"\n    [readonly]=\"readonly()\"\n    (focus)=\"onInputFocus()\"\n    [attr.id]=\"id() ?? null\"\n    (input)=\"onInput($event)\"\n    [value]=\"internalValue()\"\n    [attr.inputmode]=\"'email'\"\n    [attr.spellcheck]=\"'false'\"\n    [attr.name]=\"name() ?? null\"\n    [attr.autocapitalize]=\"'none'\"\n    [attr.autocomplete]=\"autocomplete()\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [attr.maxlength]=\"maxLength() ?? null\"\n    [attr.placeholder]=\"placeholderText() || null\"\n  />\n  @if (suffix() && !projectedSuffix()) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n  <ng-content select=\"[solaris-form-suffix]\" />\n</solaris-form-field>\n", styles: [":host{display:block;box-sizing:border-box}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: SolarisFormFieldComponent, selector: "solaris-form-field", inputs: ["hintKey", "labelKey", "hint", "errorKey", "label", "error", "optionalLabel", "requiredLabel", "optionalLabelKey", "requiredLabelKey", "required", "optional", "invalid", "disabled", "readonly", "density", "radius", "appearance", "control", "hasPrefix", "hasSuffix", "prefix", "suffix"] }, { kind: "directive", type: SolarisInputDirective, selector: "[solaris-input]", inputs: ["appearance", "radius", "size", "density", "invalid", "fullWidth"] }, { kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "projectedPrefix", first: true, predicate: SolarisFormPrefixDirective, descendants: true, isSignal: true }, { propertyName: "projectedSuffix", first: true, predicate: SolarisFormSuffixDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<solaris-form-field\n  [hint]=\"hint()\"\n  [label]=\"label()\"\n  [radius]=\"radius()\"\n  [density]=\"density()\"\n  [hintKey]=\"hintKey()\"\n  [labelKey]=\"labelKey()\"\n  [errorKey]=\"errorKey()\"\n  [required]=\"required()\"\n  [optional]=\"optional()\"\n  [readonly]=\"readonly()\"\n  [appearance]=\"appearance()\"\n  [invalid]=\"isFieldInvalid()\"\n  [error]=\"error() || computedError()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [hasPrefix]=\"hasPrefix()\"\n  [hasSuffix]=\"hasSuffix()\"\n>\n  @if (prefix() && !projectedPrefix()) {\n    <span solaris-form-prefix>\n      <solaris-icon [name]=\"prefix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n  <ng-content\n    select=\"[solaris-form-prefix]\"\n    ngProjectAs=\"[solaris-form-prefix]\"\n  />\n  <input\n    type=\"email\"\n    #inputElement\n    solaris-input\n    data-bwignore=\"true\"\n    [density]=\"density()\"\n    (blur)=\"onInputBlur()\"\n    [readonly]=\"readonly()\"\n    (focus)=\"onInputFocus()\"\n    [attr.id]=\"id() ?? null\"\n    (input)=\"onInput($event)\"\n    [value]=\"internalValue()\"\n    [attr.inputmode]=\"'email'\"\n    [attr.spellcheck]=\"'false'\"\n    [attr.name]=\"name() ?? null\"\n    [attr.autocapitalize]=\"'none'\"\n    [attr.autocomplete]=\"autocomplete()\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [attr.maxlength]=\"maxLength() ?? null\"\n    [attr.placeholder]=\"placeholderText() || null\"\n  />\n  @if (suffix() && !projectedSuffix()) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n  <ng-content\n    select=\"[solaris-form-suffix]\"\n    ngProjectAs=\"[solaris-form-suffix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-label-action]\"\n    ngProjectAs=\"[solaris-form-label-action]\"\n  />\n</solaris-form-field>\n", styles: [":host{display:block;box-sizing:border-box}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: SolarisFormFieldComponent, selector: "solaris-form-field", inputs: ["hintKey", "labelKey", "hint", "errorKey", "label", "error", "optionalLabel", "requiredLabel", "optionalLabelKey", "requiredLabelKey", "required", "optional", "invalid", "disabled", "readonly", "density", "radius", "appearance", "control", "hasPrefix", "hasSuffix", "prefix", "suffix"] }, { kind: "directive", type: SolarisInputDirective, selector: "[solaris-input]", inputs: ["appearance", "radius", "size", "density", "invalid", "fullWidth"] }, { kind: "directive", type: SolarisFormPrefixDirective, selector: "[solaris-form-prefix]" }, { kind: "directive", type: SolarisFormSuffixDirective, selector: "[solaris-form-suffix]" }, { kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisEmailFieldComponent, decorators: [{
             type: Component,
@@ -9220,6 +9419,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         FormsModule,
                         SolarisFormFieldComponent,
                         SolarisInputDirective,
+                        SolarisFormPrefixDirective,
+                        SolarisFormSuffixDirective,
                         SolarisIconComponent,
                     ], providers: [
                         {
@@ -9227,7 +9428,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                             useExisting: forwardRef(() => SolarisEmailFieldComponent),
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<solaris-form-field\n  [hint]=\"hint()\"\n  [label]=\"label()\"\n  [radius]=\"radius()\"\n  [density]=\"density()\"\n  [hintKey]=\"hintKey()\"\n  [labelKey]=\"labelKey()\"\n  [errorKey]=\"errorKey()\"\n  [required]=\"required()\"\n  [optional]=\"optional()\"\n  [readonly]=\"readonly()\"\n  [appearance]=\"appearance()\"\n  [invalid]=\"isFieldInvalid()\"\n  [error]=\"error() || computedError()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [hasPrefix]=\"hasPrefix()\"\n  [hasSuffix]=\"hasSuffix()\"\n>\n  @if (prefix() && !projectedPrefix()) {\n    <span solaris-form-prefix>\n      <solaris-icon [name]=\"prefix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n  <ng-content select=\"[solaris-form-prefix]\" />\n  <input\n    type=\"email\"\n    #inputElement\n    solaris-input\n    data-bwignore=\"true\"\n    [density]=\"density()\"\n    (blur)=\"onInputBlur()\"\n    [readonly]=\"readonly()\"\n    (focus)=\"onInputFocus()\"\n    [attr.id]=\"id() ?? null\"\n    (input)=\"onInput($event)\"\n    [value]=\"internalValue()\"\n    [attr.inputmode]=\"'email'\"\n    [attr.spellcheck]=\"'false'\"\n    [attr.name]=\"name() ?? null\"\n    [attr.autocapitalize]=\"'none'\"\n    [attr.autocomplete]=\"autocomplete()\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [attr.maxlength]=\"maxLength() ?? null\"\n    [attr.placeholder]=\"placeholderText() || null\"\n  />\n  @if (suffix() && !projectedSuffix()) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n  <ng-content select=\"[solaris-form-suffix]\" />\n</solaris-form-field>\n", styles: [":host{display:block;box-sizing:border-box}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<solaris-form-field\n  [hint]=\"hint()\"\n  [label]=\"label()\"\n  [radius]=\"radius()\"\n  [density]=\"density()\"\n  [hintKey]=\"hintKey()\"\n  [labelKey]=\"labelKey()\"\n  [errorKey]=\"errorKey()\"\n  [required]=\"required()\"\n  [optional]=\"optional()\"\n  [readonly]=\"readonly()\"\n  [appearance]=\"appearance()\"\n  [invalid]=\"isFieldInvalid()\"\n  [error]=\"error() || computedError()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [hasPrefix]=\"hasPrefix()\"\n  [hasSuffix]=\"hasSuffix()\"\n>\n  @if (prefix() && !projectedPrefix()) {\n    <span solaris-form-prefix>\n      <solaris-icon [name]=\"prefix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n  <ng-content\n    select=\"[solaris-form-prefix]\"\n    ngProjectAs=\"[solaris-form-prefix]\"\n  />\n  <input\n    type=\"email\"\n    #inputElement\n    solaris-input\n    data-bwignore=\"true\"\n    [density]=\"density()\"\n    (blur)=\"onInputBlur()\"\n    [readonly]=\"readonly()\"\n    (focus)=\"onInputFocus()\"\n    [attr.id]=\"id() ?? null\"\n    (input)=\"onInput($event)\"\n    [value]=\"internalValue()\"\n    [attr.inputmode]=\"'email'\"\n    [attr.spellcheck]=\"'false'\"\n    [attr.name]=\"name() ?? null\"\n    [attr.autocapitalize]=\"'none'\"\n    [attr.autocomplete]=\"autocomplete()\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [attr.maxlength]=\"maxLength() ?? null\"\n    [attr.placeholder]=\"placeholderText() || null\"\n  />\n  @if (suffix() && !projectedSuffix()) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n  <ng-content\n    select=\"[solaris-form-suffix]\"\n    ngProjectAs=\"[solaris-form-suffix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-label-action]\"\n    ngProjectAs=\"[solaris-form-label-action]\"\n  />\n</solaris-form-field>\n", styles: [":host{display:block;box-sizing:border-box}\n"] }]
         }], propDecorators: { inputElementRef: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }], projectedPrefix: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisFormPrefixDirective), { isSignal: true }] }], projectedSuffix: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisFormSuffixDirective), { isSignal: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], hintKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintKey", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], errorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorKey", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], invalidError: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidError", required: false }] }], requiredError: [{ type: i0.Input, args: [{ isSignal: true, alias: "requiredError", required: false }] }], placeholderKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderKey", required: false }] }], invalidErrorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidErrorKey", required: false }] }], requiredErrorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "requiredErrorKey", required: false }] }], allowedDomainError: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowedDomainError", required: false }] }], blockedDomainError: [{ type: i0.Input, args: [{ isSignal: true, alias: "blockedDomainError", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], trimOnBlur: [{ type: i0.Input, args: [{ isSignal: true, alias: "trimOnBlur", required: false }] }], allowedDomainErrorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowedDomainErrorKey", required: false }] }], blockedDomainErrorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "blockedDomainErrorKey", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], normalizeLowercase: [{ type: i0.Input, args: [{ isSignal: true, alias: "normalizeLowercase", required: false }] }], allowedDomains: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowedDomains", required: false }] }], blockedDomains: [{ type: i0.Input, args: [{ isSignal: true, alias: "blockedDomains", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], validateDomain: [{ type: i0.Input, args: [{ isSignal: true, alias: "validateDomain", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }] } });
 
 class SolarisSkeletonComponent {
@@ -9898,7 +10099,7 @@ class SolarisToastComponent {
         return key;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisToastComponent, isStandalone: true, selector: "solaris-toast", inputs: { entry: { classPropertyName: "entry", publicName: "entry", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { dismiss: "dismiss" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focusin": "onFocusIn()", "focusout": "onFocusOut()" }, properties: { "attr.role": "hostRole()", "attr.aria-live": "hostAriaLive()", "attr.data-variant": "hostDataVariant()", "attr.data-icon-size": "hostDataIconSize()", "attr.data-appearance": "hostDataAppearance()", "attr.data-media-shape": "hostDataMediaShape()", "attr.data-actions-align": "hostDataActionsAlign()", "attr.data-center-content": "centerContent()", "attr.data-actions-no-desc": "hasActionsNoDescription()" } }, ngImport: i0, template: "<div class=\"solaris-toast__root\">\n  @if (showIcon()) {\n    <div class=\"solaris-toast__media\">\n      <div class=\"solaris-toast__icon\">\n        <solaris-icon\n          [name]=\"entry().resolvedIcon\"\n          [decorative]=\"entry().options.iconDecorative !== false\"\n        />\n      </div>\n    </div>\n  }\n\n  <div class=\"solaris-toast__content\">\n    @if (showTitle()) {\n      <div class=\"solaris-toast__title\">{{ entry().resolvedTitle }}</div>\n    }\n\n    @if (showDescription()) {\n      <div\n        class=\"solaris-toast__description\"\n        [class.solaris-toast__description--truncated]=\"isTruncated()\"\n        [style.--solaris-toast-max-lines]=\"entry().resolvedMaxCollapsedLines\"\n      >\n        {{ entry().resolvedDescription }}\n      </div>\n    }\n\n    @if (showActions()) {\n      <div class=\"solaris-toast__actions\">\n        @for (action of entry().resolvedActions; track $index) {\n          <button\n            solaris-button\n            [appearance]=\"action.appearance ?? 'ghost'\"\n            [color]=\"action.color ?? 'neutral'\"\n            size=\"sm\"\n            [disabled]=\"action.disabled ?? false\"\n            (click)=\"handleActionClick(action)\"\n          >\n            {{ action.label }}\n          </button>\n        }\n      </div>\n    }\n  </div>\n\n  <div class=\"solaris-toast__trailing\">\n    @if (isExpandable()) {\n      <button\n        type=\"button\"\n        class=\"solaris-toast__trailing-btn\"\n        [attr.aria-label]=\"expandButtonLabel()\"\n        [attr.aria-expanded]=\"expanded()\"\n        (click)=\"toggleExpanded()\"\n      >\n        <solaris-icon\n          class=\"solaris-toast__expand-icon\"\n          [class.solaris-toast__expand-icon--expanded]=\"expanded()\"\n          name=\"chevron-down\"\n          [decorative]=\"true\"\n        />\n      </button>\n    }\n\n    @if (showClose()) {\n      <button\n        type=\"button\"\n        class=\"solaris-toast__trailing-btn\"\n        [attr.aria-label]=\"entry().resolvedCloseLabel\"\n        (click)=\"handleDismiss()\"\n      >\n        <solaris-icon name=\"x\" [decorative]=\"true\" />\n      </button>\n    }\n  </div>\n</div>\n\n@if (showProgressBar()) {\n  <div\n    class=\"solaris-toast__progress\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"progressValue()\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"100\"\n    [attr.aria-label]=\"\n      isProcessProgress()\n        ? translate('solaris.toast.progress')\n        : translate('solaris.toast.remaining')\n    \"\n  >\n    <div\n      class=\"solaris-toast__progress-bar\"\n      [style.width.%]=\"progressValue()\"\n    ></div>\n  </div>\n}\n\n@if (showCountdownText()) {\n  <div class=\"solaris-toast__countdown-text\">\n    <span class=\"solaris-toast__countdown-message\">{{ countdownText() }}</span>\n    <button\n      type=\"button\"\n      class=\"solaris-toast__countdown-toggle\"\n      (click)=\"togglePause()\"\n    >\n      {{ pauseButtonLabel() }}\n    </button>\n  </div>\n}\n", styles: [":host{--solaris-toast-max-lines: 2;--solaris-toast-width: 800px;--solaris-toast-border-width: 0;--solaris-toast-max-width: 800px;--solaris-toast-border-color: transparent;--solaris-toast-gap: var(--solaris-spacing-3);--solaris-toast-radius: var(--solaris-radius-md);--solaris-toast-shadow: var(--solaris-shadow-lg);--solaris-toast-padding: var(--solaris-spacing-2);--solaris-toast-color: var(--solaris-text-default);--solaris-toast-close-size: var(--solaris-spacing-4);--solaris-toast-media-size: var(--solaris-spacing-6);--solaris-toast-icon-color: var(--solaris-text-muted);--solaris-toast-content-gap: var(--solaris-spacing-1);--solaris-toast-actions-gap: var(--solaris-spacing-2);--solaris-toast-radius-value: var(--solaris-radius-md);--solaris-toast-icon-size: var(--solaris-font-size-lg);--solaris-toast-shadow-value: var(--solaris-shadow-lg);--solaris-toast-title-color: var(--solaris-text-strong);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-action-color: var(--solaris-primary-base);--solaris-toast-progress-color: var(--solaris-text-muted);--solaris-toast-progress-height: var(--solaris-spacing-1);--solaris-toast-description-color: var(--solaris-text-muted);--solaris-toast-close-icon-size: var(--solaris-font-size-lg);display:block;overflow:hidden;pointer-events:auto;box-sizing:border-box;width:var(--solaris-toast-width);max-width:var(--solaris-toast-max-width);box-shadow:var(--solaris-toast-shadow-value);border-radius:var(--solaris-toast-radius-value);animation:solaris-toast-enter var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-toast__root{display:flex;box-sizing:border-box;align-items:flex-start;gap:var(--solaris-toast-gap);color:var(--solaris-toast-color);padding:var(--solaris-toast-padding);border-radius:var(--solaris-radius-md);background:var(--solaris-toast-background);border:var(--solaris-toast-border-width) solid var(--solaris-toast-border-color)}:host([data-center-content=true]) .solaris-toast__root{align-items:center}:host([data-center-content=true]) .solaris-toast__trailing{align-self:center}:host([data-center-content=true]) .solaris-toast__media{margin-top:0}.solaris-toast__media{display:grid;flex-shrink:0;overflow:hidden;place-items:center;margin-top:var(--solaris-spacing-1);width:var(--solaris-toast-media-size);height:var(--solaris-toast-media-size)}.solaris-toast__icon solaris-icon,.solaris-toast__icon svg{display:block;width:var(--solaris-toast-icon-size);height:var(--solaris-toast-icon-size)}.solaris-toast__icon{display:grid;place-items:center;color:var(--solaris-toast-icon-color)}.solaris-toast__content{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--solaris-toast-content-gap);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}.solaris-toast__title{margin:0;word-break:normal;overflow-wrap:break-word;font-size:var(--solaris-font-size-md);line-height:var(--solaris-line-height-sm);font-weight:var(--solaris-font-weight-semibold);color:var(--solaris-toast-title-color)}.solaris-toast__description--truncated{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--solaris-toast-max-lines)}.solaris-toast__description{margin:0;word-break:normal;overflow-wrap:break-word;font-size:var(--solaris-font-size-xs);line-height:var(--solaris-line-height-md);color:var(--solaris-toast-description-color)}.solaris-toast__trailing{display:flex;flex-shrink:0;align-self:flex-start;gap:var(--solaris-spacing-2)}.solaris-toast__trailing-btn:hover{color:var(--solaris-text-default)}.solaris-toast__trailing-btn:focus-visible{outline-offset:2px;outline:2px solid var(--solaris-primary-base)}.solaris-toast__trailing-btn solaris-icon,.solaris-toast__trailing-btn svg{display:block;width:var(--solaris-toast-close-icon-size);height:var(--solaris-toast-close-icon-size)}.solaris-toast__trailing-btn{all:unset;display:grid;flex-shrink:0;cursor:pointer;place-items:center;box-sizing:border-box;background:transparent;color:var(--solaris-text-muted);width:var(--solaris-toast-close-size);height:var(--solaris-toast-close-size);border-radius:var(--solaris-radius-sm);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-toast__expand-icon--expanded{transform:rotate(180deg)}.solaris-toast__expand-icon{transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-toast__actions{display:flex;flex-wrap:wrap;gap:var(--solaris-toast-actions-gap);margin-block-start:var(--solaris-spacing-2)}:host([data-actions-align=start]) .solaris-toast__actions{justify-content:flex-start}:host([data-actions-align=center]) .solaris-toast__actions{justify-content:center}:host([data-actions-align=end]) .solaris-toast__actions{justify-content:flex-end}:host([data-actions-align=stretch]) .solaris-toast__actions [solaris-button]{flex:1}:host([data-actions-align=stretch]) .solaris-toast__actions{justify-content:stretch}.solaris-toast__progress{overflow:hidden;background:var(--solaris-surface-muted);height:var(--solaris-toast-progress-height)}.solaris-toast__progress-bar{height:100%;transition:width .1s var(--solaris-motion-easing-standard);background:var(--solaris-toast-progress-color)}.solaris-toast__countdown-text{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--solaris-spacing-1);color:var(--solaris-text-muted);background:var(--solaris-bg-page);font-size:var(--solaris-font-size-xs);line-height:var(--solaris-line-height-md);padding:var(--solaris-toast-padding) var(--solaris-spacing-4)}.solaris-toast__countdown-toggle:hover{text-decoration:underline}.solaris-toast__countdown-toggle:focus-visible{outline-offset:2px;text-decoration:underline;border-radius:var(--solaris-radius-sm);outline:2px solid var(--solaris-primary-base)}.solaris-toast__countdown-toggle{all:unset;cursor:pointer;white-space:nowrap;line-height:inherit;text-decoration:none;color:var(--solaris-text-default);font-weight:var(--solaris-font-weight-bold)}:host([data-icon-size=sm]){--solaris-toast-media-size: var(--solaris-spacing-6);--solaris-toast-icon-size: var(--solaris-font-size-lg)}:host([data-icon-size=md]){--solaris-toast-media-size: var(--solaris-spacing-8);--solaris-toast-icon-size: var(--solaris-font-size-2xl)}:host([data-icon-size=lg]){--solaris-toast-media-size: var(--solaris-spacing-10);--solaris-toast-icon-size: var(--solaris-font-size-3xl)}:host([data-media-shape=circle]) .solaris-toast__media{border-radius:50%}:host([data-media-shape=rounded]) .solaris-toast__media{border-radius:var(--solaris-radius-md)}:host([data-media-shape=square]) .solaris-toast__media{border-radius:0}:host([data-variant=neutral][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-text-muted);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-text-muted)}:host([data-variant=neutral][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-text-muted);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-text-muted);--solaris-toast-border-color: var(--solaris-border-default);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=info][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-info-base);--solaris-toast-progress-color: var(--solaris-info-base);--solaris-toast-background: var(--solaris-surface-raised)}:host([data-variant=info][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-info-base);--solaris-toast-border-color: var(--solaris-info-border);--solaris-toast-progress-color: var(--solaris-info-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=success][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-success-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-success-base)}:host([data-variant=success][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-success-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-border-color: var(--solaris-success-border);--solaris-toast-progress-color: var(--solaris-success-base);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=warning][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-warning-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-warning-base)}:host([data-variant=warning][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-warning-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-border-color: var(--solaris-warning-border);--solaris-toast-progress-color: var(--solaris-warning-base);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=danger][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-danger-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-danger-base)}:host([data-variant=danger][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-danger-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-border-color: var(--solaris-danger-border);--solaris-toast-progress-color: var(--solaris-danger-base);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=loading][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-primary-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-primary-base)}:host([data-variant=loading][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-primary-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-border-color: var(--solaris-primary-border);--solaris-toast-progress-color: var(--solaris-primary-base);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=custom]){--solaris-toast-color: var( --solaris-toast-custom-color, var(--solaris-text-default) );--solaris-toast-icon-color: var( --solaris-toast-custom-icon-color, var(--solaris-text-muted) );--solaris-toast-background: var( --solaris-toast-custom-background, var(--solaris-surface-raised) );--solaris-toast-border-color: var( --solaris-toast-custom-border-color, var(--solaris-border-default) );--solaris-toast-progress-color: var( --solaris-toast-custom-progress-color, var(--solaris-primary-base) )}:host([data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent}:host([data-appearance=outline]){--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=loading]) .solaris-toast__icon{animation:solaris-toast-spin 1s var(--solaris-motion-easing-linear) infinite}@keyframes solaris-toast-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes solaris-toast-enter{0%{opacity:0;transform:translateY(-16px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){:host{animation:none}:host([data-variant=loading]) .solaris-toast__icon{animation:none}}:host-context([data-reduced-motion=true]){animation:none}:host([data-reduced-motion=true][data-variant=loading]) .solaris-toast__icon{animation:none}@media(width<=640px){:host{--solaris-toast-width: 100%;--solaris-toast-max-width: 100%}}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative"] }, { kind: "directive", type: SolarisButtonDirective, selector: "[solaris-button]", inputs: ["appearance", "color", "radius", "density", "shape", "loading", "disabled", "fullWidth", "loadingLabelKey", "loadingLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisToastComponent, isStandalone: true, selector: "solaris-toast", inputs: { entry: { classPropertyName: "entry", publicName: "entry", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { dismiss: "dismiss" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focusin": "onFocusIn()", "focusout": "onFocusOut()" }, properties: { "attr.role": "hostRole()", "attr.aria-live": "hostAriaLive()", "attr.data-variant": "hostDataVariant()", "attr.data-icon-size": "hostDataIconSize()", "attr.data-appearance": "hostDataAppearance()", "attr.data-media-shape": "hostDataMediaShape()", "attr.data-actions-align": "hostDataActionsAlign()", "attr.data-center-content": "centerContent()", "attr.data-actions-no-desc": "hasActionsNoDescription()" } }, ngImport: i0, template: "<div class=\"solaris-toast__root\">\n  @if (showIcon()) {\n    <div class=\"solaris-toast__media\">\n      <div class=\"solaris-toast__icon\">\n        <solaris-icon\n          [name]=\"entry().resolvedIcon\"\n          [decorative]=\"entry().options.iconDecorative !== false\"\n        />\n      </div>\n    </div>\n  }\n\n  <div class=\"solaris-toast__content\">\n    @if (showTitle()) {\n      <div class=\"solaris-toast__title\">{{ entry().resolvedTitle }}</div>\n    }\n\n    @if (showDescription()) {\n      <div\n        class=\"solaris-toast__description\"\n        [class.solaris-toast__description--truncated]=\"isTruncated()\"\n        [style.--solaris-toast-max-lines]=\"entry().resolvedMaxCollapsedLines\"\n      >\n        {{ entry().resolvedDescription }}\n      </div>\n    }\n\n    @if (showActions()) {\n      <div class=\"solaris-toast__actions\">\n        @for (action of entry().resolvedActions; track $index) {\n          <button\n            solaris-button\n            [appearance]=\"action.appearance ?? 'ghost'\"\n            [color]=\"action.color ?? 'neutral'\"\n            size=\"sm\"\n            [disabled]=\"action.disabled ?? false\"\n            (click)=\"handleActionClick(action)\"\n          >\n            {{ action.label }}\n          </button>\n        }\n      </div>\n    }\n  </div>\n\n  <div class=\"solaris-toast__trailing\">\n    @if (isExpandable()) {\n      <button\n        type=\"button\"\n        class=\"solaris-toast__trailing-btn\"\n        [attr.aria-label]=\"expandButtonLabel()\"\n        [attr.aria-expanded]=\"expanded()\"\n        (click)=\"toggleExpanded()\"\n      >\n        <solaris-icon\n          class=\"solaris-toast__expand-icon\"\n          [class.solaris-toast__expand-icon--expanded]=\"expanded()\"\n          name=\"chevron-down\"\n          [decorative]=\"true\"\n        />\n      </button>\n    }\n\n    @if (showClose()) {\n      <button\n        type=\"button\"\n        class=\"solaris-toast__trailing-btn\"\n        [attr.aria-label]=\"entry().resolvedCloseLabel\"\n        (click)=\"handleDismiss()\"\n      >\n        <solaris-icon name=\"x\" [decorative]=\"true\" />\n      </button>\n    }\n  </div>\n</div>\n\n@if (showProgressBar()) {\n  <div\n    class=\"solaris-toast__progress\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"progressValue()\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"100\"\n    [attr.aria-label]=\"\n      isProcessProgress()\n        ? translate('solaris.toast.progress')\n        : translate('solaris.toast.remaining')\n    \"\n  >\n    <div\n      class=\"solaris-toast__progress-bar\"\n      [style.width.%]=\"progressValue()\"\n    ></div>\n  </div>\n}\n\n@if (showCountdownText()) {\n  <div class=\"solaris-toast__countdown-text\">\n    <span class=\"solaris-toast__countdown-message\">{{ countdownText() }}</span>\n    <button\n      type=\"button\"\n      class=\"solaris-toast__countdown-toggle\"\n      (click)=\"togglePause()\"\n    >\n      {{ pauseButtonLabel() }}\n    </button>\n  </div>\n}\n", styles: [":host{--solaris-toast-max-lines: 2;--solaris-toast-width: 800px;--solaris-toast-border-width: 0;--solaris-toast-max-width: 800px;--solaris-toast-border-color: transparent;--solaris-toast-gap: var(--solaris-spacing-3);--solaris-toast-radius: var(--solaris-radius-md);--solaris-toast-shadow: var(--solaris-shadow-lg);--solaris-toast-padding: var(--solaris-spacing-2);--solaris-toast-color: var(--solaris-text-default);--solaris-toast-close-size: var(--solaris-spacing-4);--solaris-toast-media-size: var(--solaris-spacing-6);--solaris-toast-icon-color: var(--solaris-text-muted);--solaris-toast-content-gap: var(--solaris-spacing-1);--solaris-toast-actions-gap: var(--solaris-spacing-2);--solaris-toast-radius-value: var(--solaris-radius-md);--solaris-toast-icon-size: var(--solaris-font-size-lg);--solaris-toast-shadow-value: var(--solaris-shadow-lg);--solaris-toast-title-color: var(--solaris-text-strong);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-action-color: var(--solaris-primary-base);--solaris-toast-progress-color: var(--solaris-text-muted);--solaris-toast-progress-height: var(--solaris-spacing-1);--solaris-toast-description-color: var(--solaris-text-muted);--solaris-toast-close-icon-size: var(--solaris-font-size-lg);display:block;overflow:hidden;pointer-events:auto;box-sizing:border-box;width:var(--solaris-toast-width);max-width:var(--solaris-toast-max-width);box-shadow:var(--solaris-toast-shadow-value);border-radius:var(--solaris-toast-radius-value);animation:solaris-toast-enter var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-toast__root{display:flex;box-sizing:border-box;align-items:flex-start;gap:var(--solaris-toast-gap);color:var(--solaris-toast-color);padding:var(--solaris-toast-padding);border-radius:var(--solaris-radius-md);background:var(--solaris-toast-background);border:var(--solaris-toast-border-width) solid var(--solaris-toast-border-color)}:host([data-center-content=true]) .solaris-toast__root{align-items:center}:host([data-center-content=true]) .solaris-toast__trailing{align-self:center}:host([data-center-content=true]) .solaris-toast__media{margin-top:0}.solaris-toast__media{display:grid;flex-shrink:0;overflow:hidden;place-items:center;margin-top:var(--solaris-spacing-1);width:var(--solaris-toast-media-size);height:var(--solaris-toast-media-size)}.solaris-toast__icon solaris-icon,.solaris-toast__icon svg{display:block;width:var(--solaris-toast-icon-size);height:var(--solaris-toast-icon-size)}.solaris-toast__icon{display:grid;place-items:center;color:var(--solaris-toast-icon-color)}.solaris-toast__content{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--solaris-toast-content-gap);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}.solaris-toast__title{margin:0;word-break:normal;overflow-wrap:break-word;font-size:var(--solaris-font-size-md);line-height:var(--solaris-line-height-sm);font-weight:var(--solaris-font-weight-semibold);color:var(--solaris-toast-title-color)}.solaris-toast__description--truncated{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--solaris-toast-max-lines)}.solaris-toast__description{margin:0;word-break:normal;overflow-wrap:break-word;font-size:var(--solaris-font-size-xs);line-height:var(--solaris-line-height-md);color:var(--solaris-toast-description-color)}.solaris-toast__trailing{display:flex;flex-shrink:0;align-self:flex-start;gap:var(--solaris-spacing-2)}.solaris-toast__trailing-btn:hover{color:var(--solaris-text-default)}.solaris-toast__trailing-btn:focus-visible{outline-offset:2px;outline:2px solid var(--solaris-primary-base)}.solaris-toast__trailing-btn solaris-icon,.solaris-toast__trailing-btn svg{display:block;width:var(--solaris-toast-close-icon-size);height:var(--solaris-toast-close-icon-size)}.solaris-toast__trailing-btn{all:unset;display:grid;flex-shrink:0;cursor:pointer;place-items:center;box-sizing:border-box;background:transparent;color:var(--solaris-text-muted);width:var(--solaris-toast-close-size);height:var(--solaris-toast-close-size);border-radius:var(--solaris-radius-sm);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-toast__expand-icon--expanded{transform:rotate(180deg)}.solaris-toast__expand-icon{transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-toast__actions{display:flex;flex-wrap:wrap;gap:var(--solaris-toast-actions-gap);margin-block-start:var(--solaris-spacing-2)}:host([data-actions-align=start]) .solaris-toast__actions{justify-content:flex-start}:host([data-actions-align=center]) .solaris-toast__actions{justify-content:center}:host([data-actions-align=end]) .solaris-toast__actions{justify-content:flex-end}:host([data-actions-align=stretch]) .solaris-toast__actions [solaris-button]{flex:1}:host([data-actions-align=stretch]) .solaris-toast__actions{justify-content:stretch}.solaris-toast__progress{overflow:hidden;background:var(--solaris-surface-muted);height:var(--solaris-toast-progress-height)}.solaris-toast__progress-bar{height:100%;transition:width .1s var(--solaris-motion-easing-standard);background:var(--solaris-toast-progress-color)}.solaris-toast__countdown-text{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--solaris-spacing-1);color:var(--solaris-text-muted);background:var(--solaris-bg-page);font-size:var(--solaris-font-size-xs);line-height:var(--solaris-line-height-md);padding:var(--solaris-toast-padding) var(--solaris-spacing-4)}.solaris-toast__countdown-toggle:hover{text-decoration:underline}.solaris-toast__countdown-toggle:focus-visible{outline-offset:2px;text-decoration:underline;border-radius:var(--solaris-radius-sm);outline:2px solid var(--solaris-primary-base)}.solaris-toast__countdown-toggle{all:unset;cursor:pointer;white-space:nowrap;line-height:inherit;text-decoration:none;color:var(--solaris-text-default);font-weight:var(--solaris-font-weight-bold)}:host([data-icon-size=sm]){--solaris-toast-media-size: var(--solaris-spacing-6);--solaris-toast-icon-size: var(--solaris-font-size-lg)}:host([data-icon-size=md]){--solaris-toast-media-size: var(--solaris-spacing-8);--solaris-toast-icon-size: var(--solaris-font-size-2xl)}:host([data-icon-size=lg]){--solaris-toast-media-size: var(--solaris-spacing-10);--solaris-toast-icon-size: var(--solaris-font-size-3xl)}:host([data-media-shape=circle]) .solaris-toast__media{border-radius:50%}:host([data-media-shape=rounded]) .solaris-toast__media{border-radius:var(--solaris-radius-md)}:host([data-media-shape=square]) .solaris-toast__media{border-radius:0}:host([data-variant=neutral][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-text-muted);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-text-muted)}:host([data-variant=neutral][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-text-muted);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-text-muted);--solaris-toast-border-color: var(--solaris-border-default);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=info][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-info-base);--solaris-toast-progress-color: var(--solaris-info-base);--solaris-toast-background: var(--solaris-surface-raised)}:host([data-variant=info][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-info-base);--solaris-toast-border-color: var(--solaris-info-border);--solaris-toast-progress-color: var(--solaris-info-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=success][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-success-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-success-base)}:host([data-variant=success][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-success-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-border-color: var(--solaris-success-border);--solaris-toast-progress-color: var(--solaris-success-base);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=warning][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-warning-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-warning-base)}:host([data-variant=warning][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-warning-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-border-color: var(--solaris-warning-border);--solaris-toast-progress-color: var(--solaris-warning-base);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=danger][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-danger-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-danger-base)}:host([data-variant=danger][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-danger-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-border-color: var(--solaris-danger-border);--solaris-toast-progress-color: var(--solaris-danger-base);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=loading][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-primary-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-primary-base)}:host([data-variant=loading][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-primary-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-border-color: var(--solaris-primary-border);--solaris-toast-progress-color: var(--solaris-primary-base);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=custom]){--solaris-toast-color: var( --solaris-toast-custom-color, var(--solaris-text-default) );--solaris-toast-icon-color: var( --solaris-toast-custom-icon-color, var(--solaris-text-muted) );--solaris-toast-background: var( --solaris-toast-custom-background, var(--solaris-surface-raised) );--solaris-toast-border-color: var( --solaris-toast-custom-border-color, var(--solaris-border-default) );--solaris-toast-progress-color: var( --solaris-toast-custom-progress-color, var(--solaris-primary-base) )}:host([data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent}:host([data-appearance=outline]){--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=loading]) .solaris-toast__icon{animation:solaris-toast-spin 1s var(--solaris-motion-easing-linear) infinite}@keyframes solaris-toast-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes solaris-toast-enter{0%{opacity:0;transform:translateY(-16px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){:host{animation:none}:host([data-variant=loading]) .solaris-toast__icon{animation:none}}:host-context([data-reduced-motion=true]){animation:none}:host([data-reduced-motion=true][data-variant=loading]) .solaris-toast__icon{animation:none}@media(width<=640px){:host{--solaris-toast-width: 100%;--solaris-toast-max-width: 100%}}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }, { kind: "directive", type: SolarisButtonDirective, selector: "[solaris-button]", inputs: ["appearance", "color", "radius", "density", "shape", "loading", "disabled", "fullWidth", "loadingLabelKey", "loadingLabel", "icon", "iconPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisToastComponent, decorators: [{
             type: Component,
@@ -9983,7 +10184,7 @@ class SolarisDialogActionsComponent {
         this.actionExecuted.emit(action);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisDialogActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisDialogActionsComponent, isStandalone: true, selector: "solaris-dialog-actions", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, stack: { classPropertyName: "stack", publicName: "stack", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionExecuted: "actionExecuted" }, host: { properties: { "attr.data-align": "align()", "attr.data-stack": "stack()" }, classAttribute: "solaris-dialog-actions" }, ngImport: i0, template: "<div class=\"solaris-dialog-actions__inner\">\n  @for (action of actions(); track $index) {\n    <button\n      type=\"button\"\n      solaris-button\n      (click)=\"handleAction(action)\"\n      [color]=\"action.color ?? 'neutral'\"\n      [disabled]=\"action.disabled ?? false\"\n      [appearance]=\"action.appearance ?? 'solid'\"\n    >\n      {{ action.label }}\n    </button>\n  }\n</div>\n", styles: [":host{display:block;padding:var(--solaris-spacing-3) var(--solaris-spacing-4)}.solaris-dialog-actions__inner{display:flex;flex-wrap:wrap;gap:var(--solaris-spacing-2)}:host([data-align=start]) .solaris-dialog-actions__inner{justify-content:flex-start}:host([data-align=center]) .solaris-dialog-actions__inner{justify-content:center}:host([data-align=end]) .solaris-dialog-actions__inner{justify-content:flex-end}:host([data-align=space-between]) .solaris-dialog-actions__inner{justify-content:space-between}:host([data-stack=vertical]) .solaris-dialog-actions__inner{flex-direction:column}:host([data-stack=horizontal]) .solaris-dialog-actions__inner{flex-direction:row}\n"], dependencies: [{ kind: "directive", type: SolarisButtonDirective, selector: "[solaris-button]", inputs: ["appearance", "color", "radius", "density", "shape", "loading", "disabled", "fullWidth", "loadingLabelKey", "loadingLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisDialogActionsComponent, isStandalone: true, selector: "solaris-dialog-actions", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, stack: { classPropertyName: "stack", publicName: "stack", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionExecuted: "actionExecuted" }, host: { properties: { "attr.data-align": "align()", "attr.data-stack": "stack()" }, classAttribute: "solaris-dialog-actions" }, ngImport: i0, template: "<div class=\"solaris-dialog-actions__inner\">\n  @for (action of actions(); track $index) {\n    <button\n      type=\"button\"\n      solaris-button\n      (click)=\"handleAction(action)\"\n      [color]=\"action.color ?? 'neutral'\"\n      [disabled]=\"action.disabled ?? false\"\n      [appearance]=\"action.appearance ?? 'solid'\"\n    >\n      {{ action.label }}\n    </button>\n  }\n</div>\n", styles: [":host{display:block;padding:var(--solaris-spacing-3) var(--solaris-spacing-4)}.solaris-dialog-actions__inner{display:flex;flex-wrap:wrap;gap:var(--solaris-spacing-2)}:host([data-align=start]) .solaris-dialog-actions__inner{justify-content:flex-start}:host([data-align=center]) .solaris-dialog-actions__inner{justify-content:center}:host([data-align=end]) .solaris-dialog-actions__inner{justify-content:flex-end}:host([data-align=space-between]) .solaris-dialog-actions__inner{justify-content:space-between}:host([data-stack=vertical]) .solaris-dialog-actions__inner{flex-direction:column}:host([data-stack=horizontal]) .solaris-dialog-actions__inner{flex-direction:row}\n"], dependencies: [{ kind: "directive", type: SolarisButtonDirective, selector: "[solaris-button]", inputs: ["appearance", "color", "radius", "density", "shape", "loading", "disabled", "fullWidth", "loadingLabelKey", "loadingLabel", "icon", "iconPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisDialogActionsComponent, decorators: [{
             type: Component,
@@ -10020,7 +10221,7 @@ class SolarisDialogHeaderComponent {
         this.dialogRef.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisDialogHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisDialogHeaderComponent, isStandalone: true, selector: "solaris-dialog-header", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, closeable: { classPropertyName: "closeable", publicName: "closeable", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, closeLabelKey: { classPropertyName: "closeLabelKey", publicName: "closeLabelKey", isSignal: true, isRequired: false, transformFunction: null }, iconDecorative: { classPropertyName: "iconDecorative", publicName: "iconDecorative", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variant": "variant()" }, classAttribute: "solaris-dialog-header" }, ngImport: i0, template: "<div class=\"solaris-dialog-header__start\">\n  @if (hasIcon()) {\n    <div class=\"solaris-dialog-header__icon\">\n      <solaris-icon [name]=\"icon()!\" [decorative]=\"iconDecorative()\" />\n    </div>\n  }\n\n  <div class=\"solaris-dialog-header__text\">\n    @if (hasTitle()) {\n      <h2 class=\"solaris-dialog-header__title\" id=\"solaris-dialog-title\">\n        {{ title() }}\n      </h2>\n    }\n\n    @if (hasDescription()) {\n      <p\n        class=\"solaris-dialog-header__description\"\n        id=\"solaris-dialog-description\"\n      >\n        {{ description() }}\n      </p>\n    }\n  </div>\n</div>\n\n@if (showCloseButton()) {\n  <div class=\"solaris-dialog-header__end\">\n    <button\n      type=\"button\"\n      class=\"solaris-dialog-header__close\"\n      [attr.data-size]=\"size()\"\n      [attr.aria-label]=\"resolvedCloseLabel()\"\n      (click)=\"close()\"\n    >\n      <solaris-icon name=\"x\" [decorative]=\"true\" />\n    </button>\n  </div>\n}\n", styles: [":host{display:flex;align-items:flex-start;gap:var(--solaris-spacing-3);padding:var(--solaris-spacing-4) var(--solaris-spacing-4) 0;--solaris-dialog-close-size: var(--solaris-font-size-lg);--solaris-dialog-close-icon-size: var(--solaris-font-size-lg);--solaris-dialog-icon-color: var(--solaris-text-muted);--solaris-dialog-media-size: var(--solaris-spacing-8);--solaris-dialog-icon-size: var(--solaris-font-size-2xl)}:host([data-variant=info]){--solaris-dialog-icon-color: var(--solaris-info-base)}:host([data-variant=success]){--solaris-dialog-icon-color: var(--solaris-success-base)}:host([data-variant=warning]){--solaris-dialog-icon-color: var(--solaris-warning-base)}:host([data-variant=danger]){--solaris-dialog-icon-color: var(--solaris-danger-base)}.solaris-dialog-header__start{display:flex;align-items:flex-start;gap:var(--solaris-spacing-3);flex:1;min-width:0}.solaris-dialog-header__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:var(--solaris-dialog-media-size);height:var(--solaris-dialog-media-size);color:var(--solaris-dialog-icon-color)}.solaris-dialog-header__icon solaris-icon,.solaris-dialog-header__icon svg{display:block;width:var(--solaris-dialog-icon-size);height:var(--solaris-dialog-icon-size)}.solaris-dialog-header__text{flex:1;min-width:0}.solaris-dialog-header__title{margin:0;font:var(--solaris-font-weight-semibold) var(--solaris-font-size-lg)/var(--solaris-line-height-sm) var(--solaris-font-family-sans);color:var(--solaris-text-strong)}.solaris-dialog-header__description{margin:var(--solaris-spacing-1) 0 0;font:var(--solaris-font-weight-regular) var(--solaris-font-size-sm)/var(--solaris-line-height-md) var(--solaris-font-family-sans);color:var(--solaris-text-muted)}.solaris-dialog-header__end{flex-shrink:0;display:flex;align-items:center}.solaris-dialog-header__close{all:unset;display:grid;flex-shrink:0;cursor:pointer;place-items:center;box-sizing:border-box;background:transparent;color:var(--solaris-text-muted);width:var(--solaris-dialog-close-size);height:var(--solaris-dialog-close-size);border-radius:var(--solaris-radius-sm);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-dialog-header__close:hover{color:var(--solaris-text-default)}.solaris-dialog-header__close:focus-visible{outline-offset:2px;outline:2px solid var(--solaris-primary-base)}.solaris-dialog-header__close solaris-icon,.solaris-dialog-header__close svg{display:block;width:var(--solaris-dialog-close-icon-size);height:var(--solaris-dialog-close-icon-size)}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisDialogHeaderComponent, isStandalone: true, selector: "solaris-dialog-header", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, closeable: { classPropertyName: "closeable", publicName: "closeable", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, closeLabelKey: { classPropertyName: "closeLabelKey", publicName: "closeLabelKey", isSignal: true, isRequired: false, transformFunction: null }, iconDecorative: { classPropertyName: "iconDecorative", publicName: "iconDecorative", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variant": "variant()" }, classAttribute: "solaris-dialog-header" }, ngImport: i0, template: "<div class=\"solaris-dialog-header__start\">\n  @if (hasIcon()) {\n    <div class=\"solaris-dialog-header__icon\">\n      <solaris-icon [name]=\"icon()!\" [decorative]=\"iconDecorative()\" />\n    </div>\n  }\n\n  <div class=\"solaris-dialog-header__text\">\n    @if (hasTitle()) {\n      <h2 class=\"solaris-dialog-header__title\" id=\"solaris-dialog-title\">\n        {{ title() }}\n      </h2>\n    }\n\n    @if (hasDescription()) {\n      <p\n        class=\"solaris-dialog-header__description\"\n        id=\"solaris-dialog-description\"\n      >\n        {{ description() }}\n      </p>\n    }\n  </div>\n</div>\n\n@if (showCloseButton()) {\n  <div class=\"solaris-dialog-header__end\">\n    <button\n      type=\"button\"\n      class=\"solaris-dialog-header__close\"\n      [attr.data-size]=\"size()\"\n      [attr.aria-label]=\"resolvedCloseLabel()\"\n      (click)=\"close()\"\n    >\n      <solaris-icon name=\"x\" [decorative]=\"true\" />\n    </button>\n  </div>\n}\n", styles: [":host{display:flex;align-items:flex-start;gap:var(--solaris-spacing-3);padding:var(--solaris-spacing-4) var(--solaris-spacing-4) 0;--solaris-dialog-close-size: var(--solaris-font-size-lg);--solaris-dialog-close-icon-size: var(--solaris-font-size-lg);--solaris-dialog-icon-color: var(--solaris-text-muted);--solaris-dialog-media-size: var(--solaris-spacing-8);--solaris-dialog-icon-size: var(--solaris-font-size-2xl)}:host([data-variant=info]){--solaris-dialog-icon-color: var(--solaris-info-base)}:host([data-variant=success]){--solaris-dialog-icon-color: var(--solaris-success-base)}:host([data-variant=warning]){--solaris-dialog-icon-color: var(--solaris-warning-base)}:host([data-variant=danger]){--solaris-dialog-icon-color: var(--solaris-danger-base)}.solaris-dialog-header__start{display:flex;align-items:flex-start;gap:var(--solaris-spacing-3);flex:1;min-width:0}.solaris-dialog-header__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:var(--solaris-dialog-media-size);height:var(--solaris-dialog-media-size);color:var(--solaris-dialog-icon-color)}.solaris-dialog-header__icon solaris-icon,.solaris-dialog-header__icon svg{display:block;width:var(--solaris-dialog-icon-size);height:var(--solaris-dialog-icon-size)}.solaris-dialog-header__text{flex:1;min-width:0}.solaris-dialog-header__title{margin:0;font:var(--solaris-font-weight-semibold) var(--solaris-font-size-lg)/var(--solaris-line-height-sm) var(--solaris-font-family-sans);color:var(--solaris-text-strong)}.solaris-dialog-header__description{margin:var(--solaris-spacing-1) 0 0;font:var(--solaris-font-weight-regular) var(--solaris-font-size-sm)/var(--solaris-line-height-md) var(--solaris-font-family-sans);color:var(--solaris-text-muted)}.solaris-dialog-header__end{flex-shrink:0;display:flex;align-items:center}.solaris-dialog-header__close{all:unset;display:grid;flex-shrink:0;cursor:pointer;place-items:center;box-sizing:border-box;background:transparent;color:var(--solaris-text-muted);width:var(--solaris-dialog-close-size);height:var(--solaris-dialog-close-size);border-radius:var(--solaris-radius-sm);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-dialog-header__close:hover{color:var(--solaris-text-default)}.solaris-dialog-header__close:focus-visible{outline-offset:2px;outline:2px solid var(--solaris-primary-base)}.solaris-dialog-header__close solaris-icon,.solaris-dialog-header__close svg{display:block;width:var(--solaris-dialog-close-icon-size);height:var(--solaris-dialog-close-icon-size)}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisDialogHeaderComponent, decorators: [{
             type: Component,
@@ -10610,7 +10811,7 @@ class SolarisTabComponent {
         return null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisTabComponent, isStandalone: true, selector: "solaris-tab", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, iconDecorative: { classPropertyName: "iconDecorative", publicName: "iconDecorative", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, badgeLabel: { classPropertyName: "badgeLabel", publicName: "badgeLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, badgeLabelKey: { classPropertyName: "badgeLabelKey", publicName: "badgeLabelKey", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tab" }, listeners: { "click": "onClick()", "keydown": "onKeydown($event)" }, properties: { "attr.id": "tabId()", "attr.data-density": "density()", "attr.data-shape": "shape()", "attr.data-active": "isActive()", "attr.aria-controls": "panelId()", "attr.aria-selected": "isActive()", "attr.data-appearance": "appearance()", "attr.aria-label": "resolvedAriaLabel()", "attr.data-orientation": "orientation()", "attr.tabindex": "isActive() ? \"0\" : \"-1\"", "attr.data-disabled": "isComputedDisabled()", "attr.aria-disabled": "isComputedDisabled() || undefined" } }, ngImport: i0, template: "<span class=\"solaris-tab__inner\">\n  @if (icon(); as iconName) {\n    <solaris-icon\n      class=\"solaris-tab__icon\"\n      [name]=\"iconName\"\n      [decorative]=\"iconDecorative()\"\n    />\n  }\n  @if (resolvedLabel(); as labelText) {\n    <span class=\"solaris-tab__label\">{{ labelText }}</span>\n  }\n  <ng-content />\n  @if (computedBadge(); as badgeValue) {\n    <solaris-badge\n      class=\"solaris-tab__badge\"\n      variant=\"count\"\n      size=\"sm\"\n      [attr.aria-label]=\"resolvedBadgeLabel()\"\n    >\n      {{ badgeValue }}\n    </solaris-badge>\n  }\n</span>\n", styles: [":host{--solaris-tab-gap: var(--solaris-spacing-2);--solaris-tab-padding-x: var(--solaris-spacing-3);--solaris-tab-padding-y: var(--solaris-spacing-2);--solaris-tab-color: var(--solaris-text-default);--solaris-tab-active-color: var(--solaris-primary-text);--solaris-tab-hover-background: var(--solaris-surface-subtle);--solaris-tab-active-background: var(--solaris-surface-base);--solaris-tab-radius: var(--solaris-radius-sm);--solaris-tab-font-size: var(--solaris-font-size-sm);--solaris-tab-font-weight: var(--solaris-font-weight-medium);--solaris-tab-icon-size: var(--solaris-spacing-4);--solaris-tab-badge-gap: var(--solaris-spacing-2);--solaris-tabs-indicator-color: var(--solaris-primary-base);--solaris-tabs-border-color: var(--solaris-border-subtle);--solaris-tabs-tab-active-background: var(--solaris-primary-surface);border:none;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;align-items:center;white-space:nowrap;display:inline-flex;text-decoration:none;background:transparent;gap:var(--solaris-tab-gap);color:var(--solaris-tab-color);padding:var(--solaris-tab-padding-y) var(--solaris-tab-padding-x);font:var(--solaris-tab-font-weight) var(--solaris-tab-font-size)/1 var(--solaris-font-family-sans);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard),background var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard),box-shadow var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host(:hover:not([data-disabled=true],[data-active=true])){background:var(--solaris-tab-hover-background)}:host(:focus-visible){outline-offset:var(--solaris-border-width-md);outline:var(--solaris-border-width-md) solid var(--solaris-primary-base)}:host([data-active=true]){color:var(--solaris-tab-active-color)}:host([data-disabled=true]){opacity:var(--solaris-opacity-50);cursor:not-allowed}:host([data-orientation=vertical]){width:100%;display:flex;max-width:100%;box-sizing:border-box}.solaris-tab__inner{align-items:center;display:inline-flex;gap:var(--solaris-tab-gap)}.solaris-tab__icon{flex-shrink:0;width:var(--solaris-tab-icon-size);height:var(--solaris-tab-icon-size)}.solaris-tab__label{line-height:var(--solaris-line-height-md)}.solaris-tab__badge{flex-shrink:0}:host([data-density=compact]){--solaris-tab-gap: var(--solaris-spacing-1);--solaris-tab-padding-y: var(--solaris-spacing-1);--solaris-tab-padding-x: var(--solaris-spacing-2);--solaris-tab-icon-size: var(--solaris-spacing-3);--solaris-tab-font-size: var(--solaris-font-size-xs)}:host([data-density=normal]){--solaris-tab-gap: var(--solaris-spacing-2);--solaris-tab-padding-y: var(--solaris-spacing-2);--solaris-tab-padding-x: var(--solaris-spacing-3);--solaris-tab-icon-size: var(--solaris-spacing-4);--solaris-tab-font-size: var(--solaris-font-size-sm)}:host([data-density=comfortable]){--solaris-tab-gap: var(--solaris-spacing-3);--solaris-tab-padding-y: var(--solaris-spacing-3);--solaris-tab-padding-x: var(--solaris-spacing-4);--solaris-tab-icon-size: var(--solaris-spacing-5);--solaris-tab-font-size: var(--solaris-font-size-md)}:host([data-shape=wide]){--solaris-tab-padding-x: calc(var(--solaris-density-padding-lg) * 2.5)}:host([data-appearance=underline]){--solaris-tab-radius: 0}:host([data-appearance=pills]){border-radius:var(--solaris-tab-radius);--solaris-tab-radius: var(--solaris-radius-full)}:host([data-appearance=pills]:hover:not([data-disabled=true],[data-active=true])){background:var(--solaris-tab-hover-background)}:host([data-appearance=pills][data-active=true]){color:var(--solaris-tab-active-color);background:var(--solaris-tabs-tab-active-background)}:host([data-appearance=enclosed]){margin-bottom:0;border:var(--solaris-border-width-sm) solid transparent;border-bottom:none;border-radius:var(--solaris-radius-sm) var(--solaris-radius-sm) 0 0}:host([data-appearance=enclosed][data-active=true]){background:var(--solaris-surface-base);border-color:var(--solaris-tabs-border-color)}:host-context([data-full-width=true]){flex:1;justify-content:center}@media(prefers-reduced-motion:reduce){:host{transition:none}}:host-context([data-reduced-motion=true]){transition:none}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative"] }, { kind: "component", type: SolarisBadgeComponent, selector: "solaris-badge", inputs: ["appearance", "variant", "color", "radius", "density", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisTabComponent, isStandalone: true, selector: "solaris-tab", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, iconDecorative: { classPropertyName: "iconDecorative", publicName: "iconDecorative", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, badgeLabel: { classPropertyName: "badgeLabel", publicName: "badgeLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, badgeLabelKey: { classPropertyName: "badgeLabelKey", publicName: "badgeLabelKey", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tab" }, listeners: { "click": "onClick()", "keydown": "onKeydown($event)" }, properties: { "attr.id": "tabId()", "attr.data-density": "density()", "attr.data-shape": "shape()", "attr.data-active": "isActive()", "attr.aria-controls": "panelId()", "attr.aria-selected": "isActive()", "attr.data-appearance": "appearance()", "attr.aria-label": "resolvedAriaLabel()", "attr.data-orientation": "orientation()", "attr.tabindex": "isActive() ? \"0\" : \"-1\"", "attr.data-disabled": "isComputedDisabled()", "attr.aria-disabled": "isComputedDisabled() || undefined" } }, ngImport: i0, template: "<span class=\"solaris-tab__inner\">\n  @if (icon(); as iconName) {\n    <solaris-icon\n      class=\"solaris-tab__icon\"\n      [name]=\"iconName\"\n      [decorative]=\"iconDecorative()\"\n    />\n  }\n  @if (resolvedLabel(); as labelText) {\n    <span class=\"solaris-tab__label\">{{ labelText }}</span>\n  }\n  <ng-content />\n  @if (computedBadge(); as badgeValue) {\n    <solaris-badge\n      class=\"solaris-tab__badge\"\n      variant=\"count\"\n      size=\"sm\"\n      [attr.aria-label]=\"resolvedBadgeLabel()\"\n    >\n      {{ badgeValue }}\n    </solaris-badge>\n  }\n</span>\n", styles: [":host{--solaris-tab-gap: var(--solaris-spacing-2);--solaris-tab-padding-x: var(--solaris-spacing-3);--solaris-tab-padding-y: var(--solaris-spacing-2);--solaris-tab-color: var(--solaris-text-default);--solaris-tab-active-color: var(--solaris-primary-text);--solaris-tab-hover-background: var(--solaris-surface-subtle);--solaris-tab-active-background: var(--solaris-surface-base);--solaris-tab-radius: var(--solaris-radius-sm);--solaris-tab-font-size: var(--solaris-font-size-sm);--solaris-tab-font-weight: var(--solaris-font-weight-medium);--solaris-tab-icon-size: var(--solaris-spacing-4);--solaris-tab-badge-gap: var(--solaris-spacing-2);--solaris-tabs-indicator-color: var(--solaris-primary-base);--solaris-tabs-border-color: var(--solaris-border-subtle);--solaris-tabs-tab-active-background: var(--solaris-primary-surface);border:none;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;align-items:center;white-space:nowrap;display:inline-flex;text-decoration:none;background:transparent;gap:var(--solaris-tab-gap);color:var(--solaris-tab-color);padding:var(--solaris-tab-padding-y) var(--solaris-tab-padding-x);font:var(--solaris-tab-font-weight) var(--solaris-tab-font-size)/1 var(--solaris-font-family-sans);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard),background var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard),box-shadow var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host(:hover:not([data-disabled=true],[data-active=true])){background:var(--solaris-tab-hover-background)}:host(:focus-visible){outline-offset:var(--solaris-border-width-md);outline:var(--solaris-border-width-md) solid var(--solaris-primary-base)}:host([data-active=true]){color:var(--solaris-tab-active-color)}:host([data-disabled=true]){opacity:var(--solaris-opacity-50);cursor:not-allowed}:host([data-orientation=vertical]){width:100%;display:flex;max-width:100%;box-sizing:border-box}.solaris-tab__inner{align-items:center;display:inline-flex;gap:var(--solaris-tab-gap)}.solaris-tab__icon{flex-shrink:0;width:var(--solaris-tab-icon-size);height:var(--solaris-tab-icon-size)}.solaris-tab__label{line-height:var(--solaris-line-height-md)}.solaris-tab__badge{flex-shrink:0}:host([data-density=compact]){--solaris-tab-gap: var(--solaris-spacing-1);--solaris-tab-padding-y: var(--solaris-spacing-1);--solaris-tab-padding-x: var(--solaris-spacing-2);--solaris-tab-icon-size: var(--solaris-spacing-3);--solaris-tab-font-size: var(--solaris-font-size-xs)}:host([data-density=normal]){--solaris-tab-gap: var(--solaris-spacing-2);--solaris-tab-padding-y: var(--solaris-spacing-2);--solaris-tab-padding-x: var(--solaris-spacing-3);--solaris-tab-icon-size: var(--solaris-spacing-4);--solaris-tab-font-size: var(--solaris-font-size-sm)}:host([data-density=comfortable]){--solaris-tab-gap: var(--solaris-spacing-3);--solaris-tab-padding-y: var(--solaris-spacing-3);--solaris-tab-padding-x: var(--solaris-spacing-4);--solaris-tab-icon-size: var(--solaris-spacing-5);--solaris-tab-font-size: var(--solaris-font-size-md)}:host([data-shape=wide]){--solaris-tab-padding-x: calc(var(--solaris-density-padding-lg) * 2.5)}:host([data-appearance=underline]){--solaris-tab-radius: 0}:host([data-appearance=pills]){border-radius:var(--solaris-tab-radius);--solaris-tab-radius: var(--solaris-radius-full)}:host([data-appearance=pills]:hover:not([data-disabled=true],[data-active=true])){background:var(--solaris-tab-hover-background)}:host([data-appearance=pills][data-active=true]){color:var(--solaris-tab-active-color);background:var(--solaris-tabs-tab-active-background)}:host([data-appearance=enclosed]){margin-bottom:0;border:var(--solaris-border-width-sm) solid transparent;border-bottom:none;border-radius:var(--solaris-radius-sm) var(--solaris-radius-sm) 0 0}:host([data-appearance=enclosed][data-active=true]){background:var(--solaris-surface-base);border-color:var(--solaris-tabs-border-color)}:host-context([data-full-width=true]){flex:1;justify-content:center}@media(prefers-reduced-motion:reduce){:host{transition:none}}:host-context([data-reduced-motion=true]){transition:none}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }, { kind: "component", type: SolarisBadgeComponent, selector: "solaris-badge", inputs: ["appearance", "variant", "color", "radius", "density", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisTabComponent, decorators: [{
             type: Component,
@@ -11036,7 +11237,7 @@ class SolarisStepperComponent {
                 provide: SOLARIS_STEPPER,
                 useExisting: SolarisStepperComponent,
             },
-        ], queries: [{ propertyName: "steps", predicate: SolarisStepComponent, isSignal: true }, { propertyName: "actions", first: true, predicate: SolarisStepperActionsComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"solaris-stepper__indicators\">\n  @for (step of steps(); track step; let i = $index) {\n    @if (showConnectors() && i > 0) {\n      <div\n        class=\"solaris-stepper__connector\"\n        [class.solaris-stepper__connector--active]=\"i <= activeIndex()\"\n      ></div>\n    }\n\n    <div\n      class=\"solaris-stepper__step\"\n      [class.solaris-stepper__step--active]=\"i === activeIndex()\"\n      [class.solaris-stepper__step--clickable]=\"isStepClickable(step)\"\n      [attr.data-status]=\"step.computedStatus()\"\n    >\n      @if (isStepClickable(step)) {\n        <button\n          type=\"button\"\n          class=\"solaris-stepper__indicator-button\"\n          (click)=\"goToStep(i)\"\n          [attr.aria-current]=\"i === activeIndex() ? 'step' : undefined\"\n          [attr.aria-disabled]=\"step.computedStatus() === 'disabled'\"\n        >\n          @if (step.icon(); as iconName) {\n            <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n          } @else if (step.showCheckIcon()) {\n            <solaris-icon name=\"check\" [decorative]=\"true\" />\n          } @else if (step.showErrorIcon()) {\n            <solaris-icon name=\"danger\" [decorative]=\"true\" />\n          } @else if (showStepNumbers()) {\n            <span class=\"solaris-stepper__number\">{{ i + 1 }}</span>\n          }\n        </button>\n      } @else {\n        <span class=\"solaris-stepper__indicator-static\">\n          @if (step.icon(); as iconName) {\n            <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n          } @else if (step.showCheckIcon()) {\n            <solaris-icon name=\"check\" [decorative]=\"true\" />\n          } @else if (step.showErrorIcon()) {\n            <solaris-icon name=\"danger\" [decorative]=\"true\" />\n          } @else if (showStepNumbers()) {\n            <span class=\"solaris-stepper__number\">{{ i + 1 }}</span>\n          }\n        </span>\n      }\n\n      <div class=\"solaris-stepper__label-group\">\n        <span class=\"solaris-stepper__label\">{{ step.resolvedLabel() }}</span>\n        @if (step.resolvedDescription(); as desc) {\n          <span class=\"solaris-stepper__description\">{{ desc }}</span>\n        }\n      </div>\n\n      @if (showStepStatus()) {\n        <span class=\"solaris-stepper__status-badge\">\n          @if (step.resolvedOptionalLabel(); as optLabel) {\n            <span class=\"solaris-stepper__optional-text\">{{ optLabel }}</span>\n          }\n        </span>\n      }\n    </div>\n  }\n</div>\n\n<div\n  class=\"solaris-stepper__content-panel\"\n  [class.solaris-stepper__content-panel--fade]=\"contentTransition() === 'fade'\"\n  [class.solaris-stepper__content-panel--slide-right]=\"\n    contentTransition() === 'slide' && stepTransitionDirection() === 'next'\n  \"\n  [class.solaris-stepper__content-panel--slide-left]=\"\n    contentTransition() === 'slide' && stepTransitionDirection() === 'previous'\n  \"\n>\n  <ng-content select=\"solaris-step\" />\n</div>\n\n<ng-content select=\"solaris-stepper-actions\" />\n", styles: [":host{--solaris-stepper-gap: var(--solaris-spacing-4);--solaris-stepper-card-shadow: var(--solaris-shadow-sm);--solaris-stepper-indicator-size: var(--solaris-spacing-8);--solaris-stepper-label-color: var(--solaris-text-default);--solaris-stepper-indicator-color: var(--solaris-text-subtle);--solaris-stepper-description-color: var(--solaris-text-muted);--solaris-stepper-card-background: var(--solaris-surface-base);--solaris-stepper-connector-color: var(--solaris-border-subtle);--solaris-stepper-connector-size: var(--solaris-border-width-md);--solaris-stepper-card-border-color: var(--solaris-border-subtle);--solaris-stepper-indicator-background: var(--solaris-surface-muted);--solaris-stepper-connector-active-color: var(--solaris-primary-base);--solaris-stepper-dashed-connector-color: var(--solaris-border-subtle);display:block}.solaris-stepper__indicators{display:flex;align-items:flex-start;gap:var(--solaris-stepper-gap)}:host([data-orientation=vertical]) .solaris-stepper__indicators{flex-direction:column}.solaris-stepper__connector{flex:1;min-width:var(--solaris-spacing-6);border-radius:var(--solaris-radius-full);height:var(--solaris-stepper-connector-size);background:var(--solaris-stepper-connector-color);margin-top:calc(var(--solaris-stepper-indicator-size) / 2 - var(--solaris-stepper-connector-size) / 2);transition:background var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}:host([data-orientation=vertical]) .solaris-stepper__connector{flex:1;height:auto;margin-top:0;min-width:auto;min-height:var(--solaris-spacing-6);width:var(--solaris-stepper-connector-size);margin-left:calc(var(--solaris-stepper-indicator-size) / 2 - var(--solaris-stepper-connector-size) / 2)}.solaris-stepper__connector--active{background:var(--solaris-stepper-connector-active-color)}.solaris-stepper__step{display:flex;flex-shrink:0;align-items:center;gap:var(--solaris-spacing-3)}.solaris-stepper__step--clickable{cursor:pointer}.solaris-stepper__indicator-button,.solaris-stepper__indicator-static{padding:0;border:none;display:flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:var(--solaris-radius-full);width:var(--solaris-stepper-indicator-size);height:var(--solaris-stepper-indicator-size);color:var(--solaris-stepper-indicator-color);background:var(--solaris-stepper-indicator-background);font:var(--solaris-font-weight-semibold) var(--solaris-font-size-sm)/1 var(--solaris-font-family-sans);transition:background var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard),color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard),box-shadow var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}.solaris-stepper__indicator-button{cursor:pointer}.solaris-stepper__indicator-button:focus-visible{outline-offset:var(--solaris-spacing-half);outline:var(--solaris-spacing-half) solid var(--solaris-primary-base)}.solaris-stepper__step[data-status=active] .solaris-stepper__indicator-button,.solaris-stepper__step[data-status=active] .solaris-stepper__indicator-static{color:var(--solaris-primary-text);background:var(--solaris-primary-base)}.solaris-stepper__step[data-status=completed] .solaris-stepper__indicator-button,.solaris-stepper__step[data-status=completed] .solaris-stepper__indicator-static{color:var(--solaris-success-on-solid);background:var(--solaris-success-base)}.solaris-stepper__step[data-status=error] .solaris-stepper__indicator-button,.solaris-stepper__step[data-status=error] .solaris-stepper__indicator-static{color:var(--solaris-danger-on-solid);background:var(--solaris-danger-base)}.solaris-stepper__step[data-status=disabled] .solaris-stepper__indicator-button,.solaris-stepper__step[data-status=disabled] .solaris-stepper__indicator-static{opacity:var(--solaris-opacity-50);cursor:not-allowed}.solaris-stepper__step[data-status=disabled] .solaris-stepper__label{opacity:var(--solaris-opacity-50)}.solaris-stepper__number{font:var(--solaris-font-weight-semibold) var(--solaris-font-size-sm)/1 var(--solaris-font-family-sans)}.solaris-stepper__label-group{display:flex;flex-direction:column;gap:var(--solaris-spacing-1)}:host([data-orientation=vertical]) .solaris-stepper__label-group{flex:1}.solaris-stepper__label{white-space:nowrap;color:var(--solaris-stepper-label-color);font:var(--solaris-font-weight-medium) var(--solaris-font-size-sm)/var(--solaris-line-height-md) var(--solaris-font-family-sans)}.solaris-stepper__description{white-space:nowrap;color:var(--solaris-stepper-description-color);font:var(--solaris-font-weight-regular) var(--solaris-font-size-xs)/var(--solaris-line-height-md) var(--solaris-font-family-sans)}.solaris-stepper__status-badge{display:flex;align-items:center}.solaris-stepper__optional-text{color:var(--solaris-text-muted);border-radius:var(--solaris-radius-sm);background:var(--solaris-surface-subtle);padding:var(--solaris-spacing-1) var(--solaris-spacing-2);font:var(--solaris-font-weight-regular) var(--solaris-font-size-xs)/1 var(--solaris-font-family-sans)}.solaris-stepper__content-panel{padding-top:var(--solaris-spacing-6)}:host([data-orientation=horizontal]) .solaris-stepper__content-panel{max-width:100%}.solaris-stepper__content-panel--fade{animation:solaris-stepper-fade-in var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-stepper__content-panel--slide-right{animation:solaris-stepper-slide-in-right var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-stepper__content-panel--slide-left{animation:solaris-stepper-slide-in-left var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-appearance=card]) .solaris-stepper__connector{display:none}:host([data-appearance=card]) .solaris-stepper__step{flex:1;text-align:center;align-items:center;flex-direction:column;padding:var(--solaris-spacing-4);border-radius:var(--solaris-radius-lg);box-shadow:var(--solaris-stepper-card-shadow);background:var(--solaris-stepper-card-background);border:var(--solaris-border-width-sm) solid var(--solaris-stepper-card-border-color);transition:box-shadow var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard),border-color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}:host([data-appearance=card]) .solaris-stepper__step--active{border-color:var(--solaris-primary-base);box-shadow:var(--solaris-shadow-focus, 0 0 0 1px var(--solaris-primary-base))}:host([data-appearance=card]) .solaris-stepper__indicators{gap:var(--solaris-stepper-gap)}:host([data-appearance=dashed]){--solaris-stepper-gap: 0}:host([data-appearance=dashed]) .solaris-stepper__indicators{gap:var(--solaris-spacing-2)}:host([data-appearance=dashed]) .solaris-stepper__connector,:host([data-appearance=dashed]) .solaris-stepper__indicator-button,:host([data-appearance=dashed]) .solaris-stepper__indicator-static,:host([data-appearance=dashed]) .solaris-stepper__label-group,:host([data-appearance=dashed]) .solaris-stepper__status-badge{display:none}:host([data-appearance=dashed]) .solaris-stepper__step{flex:1;height:var(--solaris-spacing-2);min-width:var(--solaris-spacing-4);border-radius:var(--solaris-radius-full);background:var(--solaris-stepper-connector-color)}:host([data-appearance=dashed]) .solaris-stepper__step[data-status=completed]{background:var(--solaris-success-base)}:host([data-appearance=dashed]) .solaris-stepper__step[data-status=active]{background:var(--solaris-primary-base)}:host([data-appearance=dashed]) .solaris-stepper__step[data-status=error]{background:var(--solaris-danger-base)}:host([data-appearance=dashed]) .solaris-stepper__step--clickable{cursor:pointer}:host([data-appearance=dashed][data-orientation=vertical]) .solaris-stepper__indicators{gap:var(--solaris-spacing-2)}:host([data-appearance=dashed][data-orientation=vertical]) .solaris-stepper__step{flex:none;height:auto;min-width:auto;width:var(--solaris-spacing-2);min-height:var(--solaris-spacing-4)}:host([data-size=sm]){--solaris-stepper-gap: var(--solaris-spacing-3);--solaris-stepper-indicator-size: var(--solaris-spacing-6)}:host([data-size=sm]) .solaris-stepper__label{font-size:var(--solaris-font-size-xs)}:host([data-size=lg]){--solaris-stepper-gap: var(--solaris-spacing-6);--solaris-stepper-indicator-size: var(--solaris-spacing-10)}:host([data-size=lg]) .solaris-stepper__label{font-size:var(--solaris-font-size-md)}:host([data-density=compact]){--solaris-stepper-gap: var(--solaris-spacing-2);--solaris-stepper-indicator-size: var(--solaris-spacing-6)}:host([data-density=compact]) .solaris-stepper__label{font-size:var(--solaris-font-size-xs)}:host([data-density=compact]) .solaris-stepper__description{display:none}:host([data-density=compact]) .solaris-stepper__content-panel{padding-top:var(--solaris-spacing-3)}:host([data-density=normal]){--solaris-stepper-gap: var(--solaris-spacing-3);--solaris-stepper-indicator-size: var(--solaris-spacing-8)}:host([data-density=normal]) .solaris-stepper__label{font-size:var(--solaris-font-size-sm)}:host([data-density=normal]) .solaris-stepper__content-panel{padding-top:var(--solaris-spacing-4)}@media(prefers-reduced-motion:reduce){.solaris-stepper__content-panel--fade,.solaris-stepper__content-panel--slide-right,.solaris-stepper__content-panel--slide-left{animation:none}}@keyframes solaris-stepper-fade-in{0%{opacity:0}to{opacity:1}}@keyframes solaris-stepper-slide-in-right{0%{opacity:0;transform:translate(var(--solaris-spacing-4))}to{opacity:1;transform:translate(0)}}@keyframes solaris-stepper-slide-in-left{0%{opacity:0;transform:translate(calc(-1 * var(--solaris-spacing-4)))}to{opacity:1;transform:translate(0)}}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "steps", predicate: SolarisStepComponent, isSignal: true }, { propertyName: "actions", first: true, predicate: SolarisStepperActionsComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"solaris-stepper__indicators\">\n  @for (step of steps(); track step; let i = $index) {\n    @if (showConnectors() && i > 0) {\n      <div\n        class=\"solaris-stepper__connector\"\n        [class.solaris-stepper__connector--active]=\"i <= activeIndex()\"\n      ></div>\n    }\n\n    <div\n      class=\"solaris-stepper__step\"\n      [class.solaris-stepper__step--active]=\"i === activeIndex()\"\n      [class.solaris-stepper__step--clickable]=\"isStepClickable(step)\"\n      [attr.data-status]=\"step.computedStatus()\"\n    >\n      @if (isStepClickable(step)) {\n        <button\n          type=\"button\"\n          class=\"solaris-stepper__indicator-button\"\n          (click)=\"goToStep(i)\"\n          [attr.aria-current]=\"i === activeIndex() ? 'step' : undefined\"\n          [attr.aria-disabled]=\"step.computedStatus() === 'disabled'\"\n        >\n          @if (step.icon(); as iconName) {\n            <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n          } @else if (step.showCheckIcon()) {\n            <solaris-icon name=\"check\" [decorative]=\"true\" />\n          } @else if (step.showErrorIcon()) {\n            <solaris-icon name=\"danger\" [decorative]=\"true\" />\n          } @else if (showStepNumbers()) {\n            <span class=\"solaris-stepper__number\">{{ i + 1 }}</span>\n          }\n        </button>\n      } @else {\n        <span class=\"solaris-stepper__indicator-static\">\n          @if (step.icon(); as iconName) {\n            <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n          } @else if (step.showCheckIcon()) {\n            <solaris-icon name=\"check\" [decorative]=\"true\" />\n          } @else if (step.showErrorIcon()) {\n            <solaris-icon name=\"danger\" [decorative]=\"true\" />\n          } @else if (showStepNumbers()) {\n            <span class=\"solaris-stepper__number\">{{ i + 1 }}</span>\n          }\n        </span>\n      }\n\n      <div class=\"solaris-stepper__label-group\">\n        <span class=\"solaris-stepper__label\">{{ step.resolvedLabel() }}</span>\n        @if (step.resolvedDescription(); as desc) {\n          <span class=\"solaris-stepper__description\">{{ desc }}</span>\n        }\n      </div>\n\n      @if (showStepStatus()) {\n        <span class=\"solaris-stepper__status-badge\">\n          @if (step.resolvedOptionalLabel(); as optLabel) {\n            <span class=\"solaris-stepper__optional-text\">{{ optLabel }}</span>\n          }\n        </span>\n      }\n    </div>\n  }\n</div>\n\n<div\n  class=\"solaris-stepper__content-panel\"\n  [class.solaris-stepper__content-panel--fade]=\"contentTransition() === 'fade'\"\n  [class.solaris-stepper__content-panel--slide-right]=\"\n    contentTransition() === 'slide' && stepTransitionDirection() === 'next'\n  \"\n  [class.solaris-stepper__content-panel--slide-left]=\"\n    contentTransition() === 'slide' && stepTransitionDirection() === 'previous'\n  \"\n>\n  <ng-content select=\"solaris-step\" />\n</div>\n\n<ng-content select=\"solaris-stepper-actions\" />\n", styles: [":host{--solaris-stepper-gap: var(--solaris-spacing-4);--solaris-stepper-card-shadow: var(--solaris-shadow-sm);--solaris-stepper-indicator-size: var(--solaris-spacing-8);--solaris-stepper-label-color: var(--solaris-text-default);--solaris-stepper-indicator-color: var(--solaris-text-subtle);--solaris-stepper-description-color: var(--solaris-text-muted);--solaris-stepper-card-background: var(--solaris-surface-base);--solaris-stepper-connector-color: var(--solaris-border-subtle);--solaris-stepper-connector-size: var(--solaris-border-width-md);--solaris-stepper-card-border-color: var(--solaris-border-subtle);--solaris-stepper-indicator-background: var(--solaris-surface-muted);--solaris-stepper-connector-active-color: var(--solaris-primary-base);--solaris-stepper-dashed-connector-color: var(--solaris-border-subtle);display:block}.solaris-stepper__indicators{display:flex;align-items:flex-start;gap:var(--solaris-stepper-gap)}:host([data-orientation=vertical]) .solaris-stepper__indicators{flex-direction:column}.solaris-stepper__connector{flex:1;min-width:var(--solaris-spacing-6);border-radius:var(--solaris-radius-full);height:var(--solaris-stepper-connector-size);background:var(--solaris-stepper-connector-color);margin-top:calc(var(--solaris-stepper-indicator-size) / 2 - var(--solaris-stepper-connector-size) / 2);transition:background var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}:host([data-orientation=vertical]) .solaris-stepper__connector{flex:1;height:auto;margin-top:0;min-width:auto;min-height:var(--solaris-spacing-6);width:var(--solaris-stepper-connector-size);margin-left:calc(var(--solaris-stepper-indicator-size) / 2 - var(--solaris-stepper-connector-size) / 2)}.solaris-stepper__connector--active{background:var(--solaris-stepper-connector-active-color)}.solaris-stepper__step{display:flex;flex-shrink:0;align-items:center;gap:var(--solaris-spacing-3)}.solaris-stepper__step--clickable{cursor:pointer}.solaris-stepper__indicator-button,.solaris-stepper__indicator-static{padding:0;border:none;display:flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:var(--solaris-radius-full);width:var(--solaris-stepper-indicator-size);height:var(--solaris-stepper-indicator-size);color:var(--solaris-stepper-indicator-color);background:var(--solaris-stepper-indicator-background);font:var(--solaris-font-weight-semibold) var(--solaris-font-size-sm)/1 var(--solaris-font-family-sans);transition:background var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard),color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard),box-shadow var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}.solaris-stepper__indicator-button{cursor:pointer}.solaris-stepper__indicator-button:focus-visible{outline-offset:var(--solaris-spacing-half);outline:var(--solaris-spacing-half) solid var(--solaris-primary-base)}.solaris-stepper__step[data-status=active] .solaris-stepper__indicator-button,.solaris-stepper__step[data-status=active] .solaris-stepper__indicator-static{color:var(--solaris-primary-text);background:var(--solaris-primary-base)}.solaris-stepper__step[data-status=completed] .solaris-stepper__indicator-button,.solaris-stepper__step[data-status=completed] .solaris-stepper__indicator-static{color:var(--solaris-success-on-solid);background:var(--solaris-success-base)}.solaris-stepper__step[data-status=error] .solaris-stepper__indicator-button,.solaris-stepper__step[data-status=error] .solaris-stepper__indicator-static{color:var(--solaris-danger-on-solid);background:var(--solaris-danger-base)}.solaris-stepper__step[data-status=disabled] .solaris-stepper__indicator-button,.solaris-stepper__step[data-status=disabled] .solaris-stepper__indicator-static{opacity:var(--solaris-opacity-50);cursor:not-allowed}.solaris-stepper__step[data-status=disabled] .solaris-stepper__label{opacity:var(--solaris-opacity-50)}.solaris-stepper__number{font:var(--solaris-font-weight-semibold) var(--solaris-font-size-sm)/1 var(--solaris-font-family-sans)}.solaris-stepper__label-group{display:flex;flex-direction:column;gap:var(--solaris-spacing-1)}:host([data-orientation=vertical]) .solaris-stepper__label-group{flex:1}.solaris-stepper__label{white-space:nowrap;color:var(--solaris-stepper-label-color);font:var(--solaris-font-weight-medium) var(--solaris-font-size-sm)/var(--solaris-line-height-md) var(--solaris-font-family-sans)}.solaris-stepper__description{white-space:nowrap;color:var(--solaris-stepper-description-color);font:var(--solaris-font-weight-regular) var(--solaris-font-size-xs)/var(--solaris-line-height-md) var(--solaris-font-family-sans)}.solaris-stepper__status-badge{display:flex;align-items:center}.solaris-stepper__optional-text{color:var(--solaris-text-muted);border-radius:var(--solaris-radius-sm);background:var(--solaris-surface-subtle);padding:var(--solaris-spacing-1) var(--solaris-spacing-2);font:var(--solaris-font-weight-regular) var(--solaris-font-size-xs)/1 var(--solaris-font-family-sans)}.solaris-stepper__content-panel{padding-top:var(--solaris-spacing-6)}:host([data-orientation=horizontal]) .solaris-stepper__content-panel{max-width:100%}.solaris-stepper__content-panel--fade{animation:solaris-stepper-fade-in var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-stepper__content-panel--slide-right{animation:solaris-stepper-slide-in-right var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-stepper__content-panel--slide-left{animation:solaris-stepper-slide-in-left var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-appearance=card]) .solaris-stepper__connector{display:none}:host([data-appearance=card]) .solaris-stepper__step{flex:1;text-align:center;align-items:center;flex-direction:column;padding:var(--solaris-spacing-4);border-radius:var(--solaris-radius-lg);box-shadow:var(--solaris-stepper-card-shadow);background:var(--solaris-stepper-card-background);border:var(--solaris-border-width-sm) solid var(--solaris-stepper-card-border-color);transition:box-shadow var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard),border-color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}:host([data-appearance=card]) .solaris-stepper__step--active{border-color:var(--solaris-primary-base);box-shadow:var(--solaris-shadow-focus, 0 0 0 1px var(--solaris-primary-base))}:host([data-appearance=card]) .solaris-stepper__indicators{gap:var(--solaris-stepper-gap)}:host([data-appearance=dashed]){--solaris-stepper-gap: 0}:host([data-appearance=dashed]) .solaris-stepper__indicators{gap:var(--solaris-spacing-2)}:host([data-appearance=dashed]) .solaris-stepper__connector,:host([data-appearance=dashed]) .solaris-stepper__indicator-button,:host([data-appearance=dashed]) .solaris-stepper__indicator-static,:host([data-appearance=dashed]) .solaris-stepper__label-group,:host([data-appearance=dashed]) .solaris-stepper__status-badge{display:none}:host([data-appearance=dashed]) .solaris-stepper__step{flex:1;height:var(--solaris-spacing-2);min-width:var(--solaris-spacing-4);border-radius:var(--solaris-radius-full);background:var(--solaris-stepper-connector-color)}:host([data-appearance=dashed]) .solaris-stepper__step[data-status=completed]{background:var(--solaris-success-base)}:host([data-appearance=dashed]) .solaris-stepper__step[data-status=active]{background:var(--solaris-primary-base)}:host([data-appearance=dashed]) .solaris-stepper__step[data-status=error]{background:var(--solaris-danger-base)}:host([data-appearance=dashed]) .solaris-stepper__step--clickable{cursor:pointer}:host([data-appearance=dashed][data-orientation=vertical]) .solaris-stepper__indicators{gap:var(--solaris-spacing-2)}:host([data-appearance=dashed][data-orientation=vertical]) .solaris-stepper__step{flex:none;height:auto;min-width:auto;width:var(--solaris-spacing-2);min-height:var(--solaris-spacing-4)}:host([data-size=sm]){--solaris-stepper-gap: var(--solaris-spacing-3);--solaris-stepper-indicator-size: var(--solaris-spacing-6)}:host([data-size=sm]) .solaris-stepper__label{font-size:var(--solaris-font-size-xs)}:host([data-size=lg]){--solaris-stepper-gap: var(--solaris-spacing-6);--solaris-stepper-indicator-size: var(--solaris-spacing-10)}:host([data-size=lg]) .solaris-stepper__label{font-size:var(--solaris-font-size-md)}:host([data-density=compact]){--solaris-stepper-gap: var(--solaris-spacing-2);--solaris-stepper-indicator-size: var(--solaris-spacing-6)}:host([data-density=compact]) .solaris-stepper__label{font-size:var(--solaris-font-size-xs)}:host([data-density=compact]) .solaris-stepper__description{display:none}:host([data-density=compact]) .solaris-stepper__content-panel{padding-top:var(--solaris-spacing-3)}:host([data-density=normal]){--solaris-stepper-gap: var(--solaris-spacing-3);--solaris-stepper-indicator-size: var(--solaris-spacing-8)}:host([data-density=normal]) .solaris-stepper__label{font-size:var(--solaris-font-size-sm)}:host([data-density=normal]) .solaris-stepper__content-panel{padding-top:var(--solaris-spacing-4)}@media(prefers-reduced-motion:reduce){.solaris-stepper__content-panel--fade,.solaris-stepper__content-panel--slide-right,.solaris-stepper__content-panel--slide-left{animation:none}}@keyframes solaris-stepper-fade-in{0%{opacity:0}to{opacity:1}}@keyframes solaris-stepper-slide-in-right{0%{opacity:0;transform:translate(var(--solaris-spacing-4))}to{opacity:1;transform:translate(0)}}@keyframes solaris-stepper-slide-in-left{0%{opacity:0;transform:translate(calc(-1 * var(--solaris-spacing-4)))}to{opacity:1;transform:translate(0)}}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisStepperComponent, decorators: [{
             type: Component,
@@ -11241,7 +11442,7 @@ class SolarisSegmentedItemComponent {
         return null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisSegmentedItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisSegmentedItemComponent, isStandalone: true, selector: "solaris-segmented-item", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "radio" }, listeners: { "click": "onClick()", "keydown": "onKeydown($event)" }, properties: { "attr.id": "itemId()", "attr.data-selected": "isSelected()", "attr.data-disabled": "isComputedDisabled()", "attr.aria-checked": "isSelected()", "attr.aria-disabled": "isComputedDisabled() || undefined", "attr.aria-label": "resolvedAriaLabel() || undefined", "attr.tabindex": "isTabstop() ? \"0\" : \"-1\"", "class.solaris-segmented-item--icon-only": "isIconOnly()" } }, ngImport: i0, template: "<span class=\"solaris-segmented-item__inner\">\n  @if (icon(); as iconName) {\n    <solaris-icon\n      class=\"solaris-segmented-item__icon\"\n      [name]=\"iconName\"\n      [decorative]=\"true\"\n    />\n  }\n  @if (resolvedLabel(); as labelText) {\n    <span class=\"solaris-segmented-item__label\">{{ labelText }}</span>\n  }\n  <ng-content />\n</span>\n", styles: [":host{--solaris-segmented-item-gap: var(--solaris-spacing-2);--solaris-segmented-item-radius: var(--solaris-radius-sm);--solaris-segmented-item-color: var(--solaris-text-default);--solaris-segmented-item-padding-y: var(--solaris-spacing-2);--solaris-segmented-item-padding-x: var(--solaris-spacing-2);--solaris-segmented-item-icon-size: var(--solaris-font-size-sm);--solaris-segmented-item-font-size: var(--solaris-font-size-sm);--solaris-segmented-item-selected-color: var(--solaris-text-strong);--solaris-segmented-item-font-weight: var(--solaris-font-weight-medium);--solaris-segmented-item-hover-background: var(--solaris-surface-subtle);border:none;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;align-items:center;white-space:nowrap;display:inline-flex;text-decoration:none;background:transparent;gap:var(--solaris-segmented-item-gap);z-index:var(--solaris-z-index-raised);color:var(--solaris-segmented-item-color);padding:var(--solaris-segmented-item-padding-y) var(--solaris-segmented-item-padding-x);font:var(--solaris-segmented-item-font-weight) var(--solaris-segmented-item-font-size)/1 var(--solaris-font-family-sans);border-radius:max(var(--solaris-segmented-radius) - var(--solaris-segmented-padding),var(--solaris-segmented-padding) - var(--solaris-segmented-radius));transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard),background var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host(:hover:not([data-disabled=true],[data-selected=true])){background:var(--solaris-segmented-item-hover-background)}:host(.solaris-segmented-item--icon-only){--solaris-segmented-item-icon-size: calc(var(--solaris-font-size-md) * 1.2)}:host:not([data-selected=true],[data-disabled=true]){opacity:var(--solaris-opacity-50)}:host(:focus-visible){outline-offset:var(--solaris-border-width-md);border-radius:var(--solaris-segmented-item-radius);outline:var(--solaris-border-width-md) solid var(--solaris-primary-base)}:host([data-selected=true]){color:var(--solaris-segmented-item-selected-color)}:host([data-disabled=true]){opacity:var(--solaris-opacity-10);cursor:not-allowed}:host([data-disabled=true]:focus-visible){outline:none}:host([data-selected=true][data-disabled=true]){opacity:var(--solaris-opacity-40)}:host-context([data-orientation=vertical]){width:100%;display:flex;max-width:100%;box-sizing:border-box}.solaris-segmented-item__inner{min-width:0;align-items:center;display:inline-flex;gap:var(--solaris-segmented-item-gap)}.solaris-segmented-item__icon{flex-shrink:0;width:var(--solaris-segmented-item-icon-size);height:var(--solaris-segmented-item-icon-size)}.solaris-segmented-item__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:var(--solaris-line-height-md)}:host-context([data-size=sm]){--solaris-segmented-item-padding-y: var(--solaris-spacing-1);--solaris-segmented-item-padding-x: var(--solaris-spacing-1);--solaris-segmented-item-icon-size: var(--solaris-font-size-xs);--solaris-segmented-item-font-size: var(--solaris-font-size-xs)}:host-context([data-size=lg]){--solaris-segmented-item-padding-y: var(--solaris-spacing-3);--solaris-segmented-item-padding-x: var(--solaris-spacing-3);--solaris-segmented-item-icon-size: var(--solaris-font-size-md);--solaris-segmented-item-font-size: var(--solaris-font-size-md)}:host-context([data-size=sm][data-density=compact]){--solaris-segmented-item-gap: var(--solaris-spacing-1);--solaris-segmented-item-padding-y: var(--solaris-spacing-1);--solaris-segmented-item-padding-x: var(--solaris-spacing-1);--solaris-segmented-item-icon-size: var(--solaris-font-size-xs);--solaris-segmented-item-font-size: var(--solaris-font-size-xs)}:host-context([data-size=md][data-density=compact]){--solaris-segmented-item-gap: var(--solaris-spacing-1);--solaris-segmented-item-padding-y: var(--solaris-spacing-1);--solaris-segmented-item-padding-x: var(--solaris-spacing-1);--solaris-segmented-item-icon-size: var(--solaris-font-size-sm);--solaris-segmented-item-font-size: var(--solaris-font-size-sm)}:host-context([data-size=lg][data-density=compact]){--solaris-segmented-item-gap: var(--solaris-spacing-1);--solaris-segmented-item-padding-y: var(--solaris-spacing-2);--solaris-segmented-item-padding-x: var(--solaris-spacing-2);--solaris-segmented-item-icon-size: var(--solaris-font-size-md);--solaris-segmented-item-font-size: var(--solaris-font-size-md)}:host-context([data-appearance=surface][data-selected=true]){--solaris-segmented-item-color: var(--solaris-text-strong)}:host-context([data-appearance=outline]){--solaris-segmented-item-color: var(--solaris-text-default)}:host-context([data-full-width=true]){flex:1;justify-content:center}:host-context([data-equal-width=true]){flex:1;justify-content:center}@media(prefers-reduced-motion:reduce){:host{transition:none}}:host-context([data-reduced-motion=true]){transition:none}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisSegmentedItemComponent, isStandalone: true, selector: "solaris-segmented-item", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "radio" }, listeners: { "click": "onClick()", "keydown": "onKeydown($event)" }, properties: { "attr.id": "itemId()", "attr.data-selected": "isSelected()", "attr.data-disabled": "isComputedDisabled()", "attr.aria-checked": "isSelected()", "attr.aria-disabled": "isComputedDisabled() || undefined", "attr.aria-label": "resolvedAriaLabel() || undefined", "attr.tabindex": "isTabstop() ? \"0\" : \"-1\"", "class.solaris-segmented-item--icon-only": "isIconOnly()" } }, ngImport: i0, template: "<span class=\"solaris-segmented-item__inner\">\n  @if (icon(); as iconName) {\n    <solaris-icon\n      class=\"solaris-segmented-item__icon\"\n      [name]=\"iconName\"\n      [decorative]=\"true\"\n    />\n  }\n  @if (resolvedLabel(); as labelText) {\n    <span class=\"solaris-segmented-item__label\">{{ labelText }}</span>\n  }\n  <ng-content />\n</span>\n", styles: [":host{--solaris-segmented-item-gap: var(--solaris-spacing-2);--solaris-segmented-item-radius: var(--solaris-radius-sm);--solaris-segmented-item-color: var(--solaris-text-default);--solaris-segmented-item-padding-y: var(--solaris-spacing-2);--solaris-segmented-item-padding-x: var(--solaris-spacing-2);--solaris-segmented-item-icon-size: var(--solaris-font-size-sm);--solaris-segmented-item-font-size: var(--solaris-font-size-sm);--solaris-segmented-item-selected-color: var(--solaris-text-strong);--solaris-segmented-item-font-weight: var(--solaris-font-weight-medium);--solaris-segmented-item-hover-background: var(--solaris-surface-subtle);border:none;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;align-items:center;white-space:nowrap;display:inline-flex;text-decoration:none;background:transparent;gap:var(--solaris-segmented-item-gap);z-index:var(--solaris-z-index-raised);color:var(--solaris-segmented-item-color);padding:var(--solaris-segmented-item-padding-y) var(--solaris-segmented-item-padding-x);font:var(--solaris-segmented-item-font-weight) var(--solaris-segmented-item-font-size)/1 var(--solaris-font-family-sans);border-radius:max(var(--solaris-segmented-radius) - var(--solaris-segmented-padding),var(--solaris-segmented-padding) - var(--solaris-segmented-radius));transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard),background var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host(:hover:not([data-disabled=true],[data-selected=true])){background:var(--solaris-segmented-item-hover-background)}:host(.solaris-segmented-item--icon-only){--solaris-segmented-item-icon-size: calc(var(--solaris-font-size-md) * 1.2)}:host:not([data-selected=true],[data-disabled=true]){opacity:var(--solaris-opacity-50)}:host(:focus-visible){outline-offset:var(--solaris-border-width-md);border-radius:var(--solaris-segmented-item-radius);outline:var(--solaris-border-width-md) solid var(--solaris-primary-base)}:host([data-selected=true]){color:var(--solaris-segmented-item-selected-color)}:host([data-disabled=true]){opacity:var(--solaris-opacity-10);cursor:not-allowed}:host([data-disabled=true]:focus-visible){outline:none}:host([data-selected=true][data-disabled=true]){opacity:var(--solaris-opacity-40)}:host-context([data-orientation=vertical]){width:100%;display:flex;max-width:100%;box-sizing:border-box}.solaris-segmented-item__inner{min-width:0;align-items:center;display:inline-flex;gap:var(--solaris-segmented-item-gap)}.solaris-segmented-item__icon{flex-shrink:0;width:var(--solaris-segmented-item-icon-size);height:var(--solaris-segmented-item-icon-size)}.solaris-segmented-item__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:var(--solaris-line-height-md)}:host-context([data-size=sm]){--solaris-segmented-item-padding-y: var(--solaris-spacing-1);--solaris-segmented-item-padding-x: var(--solaris-spacing-1);--solaris-segmented-item-icon-size: var(--solaris-font-size-xs);--solaris-segmented-item-font-size: var(--solaris-font-size-xs)}:host-context([data-size=lg]){--solaris-segmented-item-padding-y: var(--solaris-spacing-3);--solaris-segmented-item-padding-x: var(--solaris-spacing-3);--solaris-segmented-item-icon-size: var(--solaris-font-size-md);--solaris-segmented-item-font-size: var(--solaris-font-size-md)}:host-context([data-size=sm][data-density=compact]){--solaris-segmented-item-gap: var(--solaris-spacing-1);--solaris-segmented-item-padding-y: var(--solaris-spacing-1);--solaris-segmented-item-padding-x: var(--solaris-spacing-1);--solaris-segmented-item-icon-size: var(--solaris-font-size-xs);--solaris-segmented-item-font-size: var(--solaris-font-size-xs)}:host-context([data-size=md][data-density=compact]){--solaris-segmented-item-gap: var(--solaris-spacing-1);--solaris-segmented-item-padding-y: var(--solaris-spacing-1);--solaris-segmented-item-padding-x: var(--solaris-spacing-1);--solaris-segmented-item-icon-size: var(--solaris-font-size-sm);--solaris-segmented-item-font-size: var(--solaris-font-size-sm)}:host-context([data-size=lg][data-density=compact]){--solaris-segmented-item-gap: var(--solaris-spacing-1);--solaris-segmented-item-padding-y: var(--solaris-spacing-2);--solaris-segmented-item-padding-x: var(--solaris-spacing-2);--solaris-segmented-item-icon-size: var(--solaris-font-size-md);--solaris-segmented-item-font-size: var(--solaris-font-size-md)}:host-context([data-appearance=surface][data-selected=true]){--solaris-segmented-item-color: var(--solaris-text-strong)}:host-context([data-appearance=outline]){--solaris-segmented-item-color: var(--solaris-text-default)}:host-context([data-full-width=true]){flex:1;justify-content:center}:host-context([data-equal-width=true]){flex:1;justify-content:center}@media(prefers-reduced-motion:reduce){:host{transition:none}}:host-context([data-reduced-motion=true]){transition:none}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisSegmentedItemComponent, decorators: [{
             type: Component,
@@ -12035,7 +12236,7 @@ class SolarisDropdownMenuItemComponent {
                 provide: SOLARIS_DROPDOWN_NAVIGABLE_ITEM,
                 useExisting: forwardRef(() => SolarisDropdownMenuItemComponent),
             },
-        ], ngImport: i0, template: "@if (hasLeadingContent()) {\n  <div class=\"solaris-dropdown-menu-item__leading\">\n    @if (type() === 'checkbox') {\n      <span\n        class=\"solaris-dropdown-menu-item__checkbox\"\n        [class.solaris-dropdown-menu-item__checkbox--checked]=\"checked()\"\n        aria-hidden=\"true\"\n      >\n        @if (checked()) {\n          <span class=\"solaris-dropdown-menu-item__checkbox-icon\">\n            <solaris-icon name=\"check\" [decorative]=\"true\" />\n          </span>\n        }\n      </span>\n    } @else if (type() === 'radio') {\n      <span\n        class=\"solaris-dropdown-menu-item__radio\"\n        [class.solaris-dropdown-menu-item__radio--checked]=\"checked()\"\n        aria-hidden=\"true\"\n      >\n        @if (checked()) {\n          <span class=\"solaris-dropdown-menu-item__radio-dot\"></span>\n        }\n      </span>\n    } @else {\n      <solaris-icon [name]=\"icon()!\" aria-hidden=\"true\" />\n    }\n  </div>\n}\n<div class=\"solaris-dropdown-menu-item__content\">\n  @if (label()) {\n    <span class=\"solaris-dropdown-menu-item__label\">{{ label() }}</span>\n  }\n  @if (description()) {\n    <span class=\"solaris-dropdown-menu-item__description\">{{\n      description()\n    }}</span>\n  }\n</div>\n@if (shortcut()) {\n  <span class=\"solaris-dropdown-menu-item__shortcut\" aria-hidden=\"true\">{{\n    shortcut()\n  }}</span>\n}\n", styles: [":host{--solaris-dropdown-menu-item-gap: var(--solaris-spacing-2);--solaris-dropdown-menu-item-radius: var(--solaris-radius-sm);--solaris-dropdown-menu-item-padding-y: var(--solaris-spacing-2);--solaris-dropdown-menu-item-padding-x: var(--solaris-spacing-4);--solaris-dropdown-menu-item-label-color: var(--solaris-text-default);--solaris-dropdown-menu-item-danger-color: var(--solaris-danger-text);--solaris-dropdown-menu-item-shortcut-color: var(--solaris-text-muted);--solaris-dropdown-menu-item-danger-hover: var(--solaris-danger-surface);--solaris-dropdown-menu-item-description-color: var(--solaris-text-muted);--solaris-dropdown-menu-item-focus-ring-color: var(--solaris-primary-base);--solaris-dropdown-menu-item-hover-background: var(--solaris-surface-muted);--solaris-dropdown-menu-item-focus-background: var(--solaris-surface-subtle);display:flex;outline:none;cursor:pointer;align-items:center;text-decoration:none;box-sizing:border-box;min-height:var(--solaris-spacing-8);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-sm);gap:var(--solaris-dropdown-menu-item-gap);color:var(--solaris-dropdown-menu-item-label-color);border-radius:var(--solaris-dropdown-menu-item-radius);font-family:var(--solaris-font-family-sans),system-ui;padding:var(--solaris-dropdown-menu-item-padding-y) var(--solaris-dropdown-menu-item-padding-x);transition:background var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}:host(:hover){background:var(--solaris-dropdown-menu-item-hover-background)}:host(:focus){outline-offset:-2px;background:var(--solaris-dropdown-menu-item-hover-background)}:host(:focus-visible){outline:var(--solaris-border-width-md) solid var(--solaris-dropdown-menu-item-focus-ring-color)}:host([data-disabled]){opacity:var(--solaris-opacity-50);cursor:not-allowed}:host([data-color=danger]){color:var(--solaris-dropdown-menu-item-danger-color)}:host([data-color=danger]:hover),:host([data-color=danger]:focus){background:var(--solaris-dropdown-menu-item-danger-hover)}.solaris-dropdown-menu-item__leading{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--solaris-spacing-5);height:var(--solaris-spacing-5);color:var(--solaris-text-muted)}:host([data-color=danger]) .solaris-dropdown-menu-item__leading{color:var(--solaris-dropdown-menu-item-danger-color)}.solaris-dropdown-menu-item__checkbox{width:100%;height:100%;display:flex;align-items:center;box-sizing:border-box;justify-content:center;background:transparent;border-radius:var(--solaris-radius-sm);border:var(--solaris-border-width-sm) solid var(--solaris-primary-border)}.solaris-dropdown-menu-item__checkbox--checked{color:var(--solaris-primary-text);background:var(--solaris-primary-base);border-color:var(--solaris-primary-base)}.solaris-dropdown-menu-item__checkbox-icon{width:100%;height:100%;display:flex;align-items:center;box-sizing:border-box;justify-content:center;padding:var(--solaris-spacing-half)}.solaris-dropdown-menu-item__radio{width:100%;height:100%;display:flex;border-radius:50%;align-items:center;box-sizing:border-box;background:transparent;justify-content:center;border:var(--solaris-spacing-half) solid var(--solaris-primary-border)}.solaris-dropdown-menu-item__radio--checked{border-color:var(--solaris-primary-base)}.solaris-dropdown-menu-item__radio-dot{border-radius:50%;width:var(--solaris-spacing-2);height:var(--solaris-spacing-2);background:var(--solaris-primary-base)}.solaris-dropdown-menu-item__content{flex:1;min-width:0;display:flex;gap:var(--solaris-spacing-half);flex-direction:column}.solaris-dropdown-menu-item__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-dropdown-menu-item__description{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--solaris-font-size-xs);line-height:var(--solaris-line-height-xs);color:var(--solaris-dropdown-menu-item-description-color)}.solaris-dropdown-menu-item__shortcut{flex-shrink:0;font-size:var(--solaris-font-size-xs);line-height:var(--solaris-line-height-xs);margin-inline-start:var(--solaris-spacing-4);color:var(--solaris-dropdown-menu-item-shortcut-color)}@media(prefers-reduced-motion:reduce){:host{transition:none}}[data-reduced-motion=true] :host{transition:none}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "@if (hasLeadingContent()) {\n  <div class=\"solaris-dropdown-menu-item__leading\">\n    @if (type() === 'checkbox') {\n      <span\n        class=\"solaris-dropdown-menu-item__checkbox\"\n        [class.solaris-dropdown-menu-item__checkbox--checked]=\"checked()\"\n        aria-hidden=\"true\"\n      >\n        @if (checked()) {\n          <span class=\"solaris-dropdown-menu-item__checkbox-icon\">\n            <solaris-icon name=\"check\" [decorative]=\"true\" />\n          </span>\n        }\n      </span>\n    } @else if (type() === 'radio') {\n      <span\n        class=\"solaris-dropdown-menu-item__radio\"\n        [class.solaris-dropdown-menu-item__radio--checked]=\"checked()\"\n        aria-hidden=\"true\"\n      >\n        @if (checked()) {\n          <span class=\"solaris-dropdown-menu-item__radio-dot\"></span>\n        }\n      </span>\n    } @else {\n      <solaris-icon [name]=\"icon()!\" aria-hidden=\"true\" />\n    }\n  </div>\n}\n<div class=\"solaris-dropdown-menu-item__content\">\n  @if (label()) {\n    <span class=\"solaris-dropdown-menu-item__label\">{{ label() }}</span>\n  }\n  @if (description()) {\n    <span class=\"solaris-dropdown-menu-item__description\">{{\n      description()\n    }}</span>\n  }\n</div>\n@if (shortcut()) {\n  <span class=\"solaris-dropdown-menu-item__shortcut\" aria-hidden=\"true\">{{\n    shortcut()\n  }}</span>\n}\n", styles: [":host{--solaris-dropdown-menu-item-gap: var(--solaris-spacing-2);--solaris-dropdown-menu-item-radius: var(--solaris-radius-sm);--solaris-dropdown-menu-item-padding-y: var(--solaris-spacing-2);--solaris-dropdown-menu-item-padding-x: var(--solaris-spacing-4);--solaris-dropdown-menu-item-label-color: var(--solaris-text-default);--solaris-dropdown-menu-item-danger-color: var(--solaris-danger-text);--solaris-dropdown-menu-item-shortcut-color: var(--solaris-text-muted);--solaris-dropdown-menu-item-danger-hover: var(--solaris-danger-surface);--solaris-dropdown-menu-item-description-color: var(--solaris-text-muted);--solaris-dropdown-menu-item-focus-ring-color: var(--solaris-primary-base);--solaris-dropdown-menu-item-hover-background: var(--solaris-surface-muted);--solaris-dropdown-menu-item-focus-background: var(--solaris-surface-subtle);display:flex;outline:none;cursor:pointer;align-items:center;text-decoration:none;box-sizing:border-box;min-height:var(--solaris-spacing-8);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-sm);gap:var(--solaris-dropdown-menu-item-gap);color:var(--solaris-dropdown-menu-item-label-color);border-radius:var(--solaris-dropdown-menu-item-radius);font-family:var(--solaris-font-family-sans),system-ui;padding:var(--solaris-dropdown-menu-item-padding-y) var(--solaris-dropdown-menu-item-padding-x);transition:background var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}:host(:hover){background:var(--solaris-dropdown-menu-item-hover-background)}:host(:focus){outline-offset:-2px;background:var(--solaris-dropdown-menu-item-hover-background)}:host(:focus-visible){outline:var(--solaris-border-width-md) solid var(--solaris-dropdown-menu-item-focus-ring-color)}:host([data-disabled]){opacity:var(--solaris-opacity-50);cursor:not-allowed}:host([data-color=danger]){color:var(--solaris-dropdown-menu-item-danger-color)}:host([data-color=danger]:hover),:host([data-color=danger]:focus){background:var(--solaris-dropdown-menu-item-danger-hover)}.solaris-dropdown-menu-item__leading{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--solaris-spacing-5);height:var(--solaris-spacing-5);color:var(--solaris-text-muted)}:host([data-color=danger]) .solaris-dropdown-menu-item__leading{color:var(--solaris-dropdown-menu-item-danger-color)}.solaris-dropdown-menu-item__checkbox{width:100%;height:100%;display:flex;align-items:center;box-sizing:border-box;justify-content:center;background:transparent;border-radius:var(--solaris-radius-sm);border:var(--solaris-border-width-sm) solid var(--solaris-primary-border)}.solaris-dropdown-menu-item__checkbox--checked{color:var(--solaris-primary-text);background:var(--solaris-primary-base);border-color:var(--solaris-primary-base)}.solaris-dropdown-menu-item__checkbox-icon{width:100%;height:100%;display:flex;align-items:center;box-sizing:border-box;justify-content:center;padding:var(--solaris-spacing-half)}.solaris-dropdown-menu-item__radio{width:100%;height:100%;display:flex;border-radius:50%;align-items:center;box-sizing:border-box;background:transparent;justify-content:center;border:var(--solaris-spacing-half) solid var(--solaris-primary-border)}.solaris-dropdown-menu-item__radio--checked{border-color:var(--solaris-primary-base)}.solaris-dropdown-menu-item__radio-dot{border-radius:50%;width:var(--solaris-spacing-2);height:var(--solaris-spacing-2);background:var(--solaris-primary-base)}.solaris-dropdown-menu-item__content{flex:1;min-width:0;display:flex;gap:var(--solaris-spacing-half);flex-direction:column}.solaris-dropdown-menu-item__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-dropdown-menu-item__description{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--solaris-font-size-xs);line-height:var(--solaris-line-height-xs);color:var(--solaris-dropdown-menu-item-description-color)}.solaris-dropdown-menu-item__shortcut{flex-shrink:0;font-size:var(--solaris-font-size-xs);line-height:var(--solaris-line-height-xs);margin-inline-start:var(--solaris-spacing-4);color:var(--solaris-dropdown-menu-item-shortcut-color)}@media(prefers-reduced-motion:reduce){:host{transition:none}}[data-reduced-motion=true] :host{transition:none}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisDropdownMenuItemComponent, decorators: [{
             type: Component,
@@ -12158,7 +12359,7 @@ class SolarisDropdownSubmenuTriggerComponent {
                 provide: SOLARIS_DROPDOWN_NAVIGABLE_ITEM,
                 useExisting: forwardRef(() => SolarisDropdownSubmenuTriggerComponent),
             },
-        ], ngImport: i0, template: "<div class=\"solaris-dropdown-submenu-trigger__wrapper\">\n  @if (hasLeadingContent()) {\n    <div class=\"solaris-dropdown-submenu-trigger__leading\">\n      <solaris-icon [name]=\"icon()!\" aria-hidden=\"true\" />\n    </div>\n  }\n  <div class=\"solaris-dropdown-submenu-trigger__content\">\n    <ng-content></ng-content>\n    @if (label()) {\n      <span class=\"solaris-dropdown-submenu-trigger__label\">{{ label() }}</span>\n    }\n  </div>\n  <div class=\"solaris-dropdown-submenu-trigger__trailing\">\n    <solaris-icon name=\"chevron-right\" aria-hidden=\"true\" />\n  </div>\n</div>\n", styles: [":host{--solaris-dropdown-submenu-trigger-gap: var(--solaris-spacing-2);--solaris-dropdown-submenu-trigger-radius: var(--solaris-radius-sm);--solaris-dropdown-submenu-trigger-padding-y: var(--solaris-spacing-2);--solaris-dropdown-submenu-trigger-padding-x: var(--solaris-spacing-4);--solaris-dropdown-submenu-trigger-label-color: var(--solaris-text-default);--solaris-dropdown-submenu-trigger-danger-color: var(--solaris-danger-text);--solaris-dropdown-submenu-trigger-danger-hover: var( --solaris-danger-surface );--solaris-dropdown-submenu-trigger-focus-ring-color: var( --solaris-primary-base );--solaris-dropdown-submenu-trigger-hover-background: var( --solaris-surface-muted );--solaris-dropdown-submenu-trigger-trailing-color: var(--solaris-text-muted);display:flex;outline:none;cursor:pointer;align-items:center;text-decoration:none;box-sizing:border-box;min-height:var(--solaris-spacing-8);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-sm);gap:var(--solaris-dropdown-submenu-trigger-gap);color:var(--solaris-dropdown-submenu-trigger-label-color);border-radius:var(--solaris-dropdown-submenu-trigger-radius);font-family:var(--solaris-font-family-sans),system-ui;padding:var(--solaris-dropdown-submenu-trigger-padding-y) var(--solaris-dropdown-submenu-trigger-padding-x);transition:background var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}:host(:hover){background:var(--solaris-dropdown-submenu-trigger-hover-background)}:host(:focus){outline-offset:-2px;background:var(--solaris-dropdown-submenu-trigger-hover-background)}:host(:focus-visible){outline:var(--solaris-border-width-md) solid var(--solaris-dropdown-submenu-trigger-focus-ring-color)}:host([data-disabled]){opacity:var(--solaris-opacity-50);cursor:not-allowed}:host([data-color=danger]){color:var(--solaris-dropdown-submenu-trigger-danger-color)}:host([data-color=danger]:hover),:host([data-color=danger]:focus){background:var(--solaris-dropdown-submenu-trigger-danger-hover)}.solaris-dropdown-submenu-trigger__wrapper{display:flex;flex:1;min-width:0;align-items:center;gap:var(--solaris-dropdown-submenu-trigger-gap)}.solaris-dropdown-submenu-trigger__leading{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--solaris-spacing-5);height:var(--solaris-spacing-5);color:var(--solaris-text-muted)}:host([data-color=danger]) .solaris-dropdown-submenu-trigger__leading{color:var(--solaris-dropdown-submenu-trigger-danger-color)}.solaris-dropdown-submenu-trigger__content{flex:1;min-width:0}.solaris-dropdown-submenu-trigger__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-dropdown-submenu-trigger__trailing{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--solaris-spacing-4);height:var(--solaris-spacing-4);margin-inline-start:var(--solaris-spacing-4);color:var(--solaris-dropdown-submenu-trigger-trailing-color)}@media(prefers-reduced-motion:reduce){:host{transition:none}}[data-reduced-motion=true] :host{transition:none}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<div class=\"solaris-dropdown-submenu-trigger__wrapper\">\n  @if (hasLeadingContent()) {\n    <div class=\"solaris-dropdown-submenu-trigger__leading\">\n      <solaris-icon [name]=\"icon()!\" aria-hidden=\"true\" />\n    </div>\n  }\n  <div class=\"solaris-dropdown-submenu-trigger__content\">\n    <ng-content></ng-content>\n    @if (label()) {\n      <span class=\"solaris-dropdown-submenu-trigger__label\">{{ label() }}</span>\n    }\n  </div>\n  <div class=\"solaris-dropdown-submenu-trigger__trailing\">\n    <solaris-icon name=\"chevron-right\" aria-hidden=\"true\" />\n  </div>\n</div>\n", styles: [":host{--solaris-dropdown-submenu-trigger-gap: var(--solaris-spacing-2);--solaris-dropdown-submenu-trigger-radius: var(--solaris-radius-sm);--solaris-dropdown-submenu-trigger-padding-y: var(--solaris-spacing-2);--solaris-dropdown-submenu-trigger-padding-x: var(--solaris-spacing-4);--solaris-dropdown-submenu-trigger-label-color: var(--solaris-text-default);--solaris-dropdown-submenu-trigger-danger-color: var(--solaris-danger-text);--solaris-dropdown-submenu-trigger-danger-hover: var( --solaris-danger-surface );--solaris-dropdown-submenu-trigger-focus-ring-color: var( --solaris-primary-base );--solaris-dropdown-submenu-trigger-hover-background: var( --solaris-surface-muted );--solaris-dropdown-submenu-trigger-trailing-color: var(--solaris-text-muted);display:flex;outline:none;cursor:pointer;align-items:center;text-decoration:none;box-sizing:border-box;min-height:var(--solaris-spacing-8);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-sm);gap:var(--solaris-dropdown-submenu-trigger-gap);color:var(--solaris-dropdown-submenu-trigger-label-color);border-radius:var(--solaris-dropdown-submenu-trigger-radius);font-family:var(--solaris-font-family-sans),system-ui;padding:var(--solaris-dropdown-submenu-trigger-padding-y) var(--solaris-dropdown-submenu-trigger-padding-x);transition:background var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}:host(:hover){background:var(--solaris-dropdown-submenu-trigger-hover-background)}:host(:focus){outline-offset:-2px;background:var(--solaris-dropdown-submenu-trigger-hover-background)}:host(:focus-visible){outline:var(--solaris-border-width-md) solid var(--solaris-dropdown-submenu-trigger-focus-ring-color)}:host([data-disabled]){opacity:var(--solaris-opacity-50);cursor:not-allowed}:host([data-color=danger]){color:var(--solaris-dropdown-submenu-trigger-danger-color)}:host([data-color=danger]:hover),:host([data-color=danger]:focus){background:var(--solaris-dropdown-submenu-trigger-danger-hover)}.solaris-dropdown-submenu-trigger__wrapper{display:flex;flex:1;min-width:0;align-items:center;gap:var(--solaris-dropdown-submenu-trigger-gap)}.solaris-dropdown-submenu-trigger__leading{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--solaris-spacing-5);height:var(--solaris-spacing-5);color:var(--solaris-text-muted)}:host([data-color=danger]) .solaris-dropdown-submenu-trigger__leading{color:var(--solaris-dropdown-submenu-trigger-danger-color)}.solaris-dropdown-submenu-trigger__content{flex:1;min-width:0}.solaris-dropdown-submenu-trigger__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-dropdown-submenu-trigger__trailing{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--solaris-spacing-4);height:var(--solaris-spacing-4);margin-inline-start:var(--solaris-spacing-4);color:var(--solaris-dropdown-submenu-trigger-trailing-color)}@media(prefers-reduced-motion:reduce){:host{transition:none}}[data-reduced-motion=true] :host{transition:none}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisDropdownSubmenuTriggerComponent, decorators: [{
             type: Component,
@@ -12983,7 +13184,7 @@ class SolarisBreadcrumbComponent {
         this.next.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisBreadcrumbComponent, isStandalone: true, selector: "solaris-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleItems: { classPropertyName: "maxVisibleItems", publicName: "maxVisibleItems", isSignal: true, isRequired: false, transformFunction: null }, overflowPosition: { classPropertyName: "overflowPosition", publicName: "overflowPosition", isSignal: true, isRequired: false, transformFunction: null }, showNavigation: { classPropertyName: "showNavigation", publicName: "showNavigation", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigate: "navigate", previous: "previous", next: "next" }, host: { properties: { "attr.data-size": "size()", "attr.data-separator": "separator()", "attr.data-overflow": "overflowPosition()" }, classAttribute: "solaris-breadcrumb" }, ngImport: i0, template: "<nav class=\"solaris-breadcrumb__nav\" [attr.aria-label]=\"resolvedLabel()\">\n  <ol class=\"solaris-breadcrumb__list\">\n    @for (slot of slots(); track $index) {\n      <li class=\"solaris-breadcrumb__item\">\n        @if (slot.kind === 'ellipsis') {\n          <button\n            type=\"button\"\n            class=\"solaris-breadcrumb__overflow-trigger\"\n            solaris-dropdown-menu-trigger\n            [solarisDropdownMenuTriggerFor]=\"overflowMenu\"\n            [attr.aria-label]=\"resolvedShowMoreLabel()\"\n            (menuOpened)=\"overflowOpen.set(true)\"\n            (menuClosed)=\"overflowOpen.set(false)\"\n          >\n            <solaris-icon name=\"ellipsis\" [decorative]=\"true\" />\n          </button>\n        } @else if (isLink(slot.item)) {\n          <a\n            class=\"solaris-breadcrumb__link\"\n            [href]=\"slot.item.href\"\n            [attr.aria-label]=\"itemAriaLabel(slot.item)\"\n            (click)=\"onItemClick(slot.item, $event)\"\n          >\n            @if (slot.item.icon) {\n              <solaris-icon [name]=\"slot.item.icon!\" [decorative]=\"true\" />\n            }\n            @if (itemLabel(slot.item)) {\n              <span class=\"solaris-breadcrumb__label\">{{\n                itemLabel(slot.item)\n              }}</span>\n            }\n          </a>\n        } @else {\n          <span\n            class=\"solaris-breadcrumb__text\"\n            [attr.aria-current]=\"isCurrent(slot.item) ? 'page' : null\"\n            [attr.aria-disabled]=\"isDisabled(slot.item) ? 'true' : null\"\n            [attr.aria-label]=\"itemAriaLabel(slot.item)\"\n          >\n            @if (slot.item.icon) {\n              <solaris-icon [name]=\"slot.item.icon!\" [decorative]=\"true\" />\n            }\n            @if (itemLabel(slot.item)) {\n              <span class=\"solaris-breadcrumb__label\">{{\n                itemLabel(slot.item)\n              }}</span>\n            }\n          </span>\n        }\n\n        @if (!$last) {\n          <span class=\"solaris-breadcrumb__separator\" aria-hidden=\"true\">\n            <solaris-icon [name]=\"separatorIcon()\" [decorative]=\"true\" />\n          </span>\n        }\n      </li>\n    }\n  </ol>\n</nav>\n\n@if (showNavigation()) {\n  <div class=\"solaris-breadcrumb__pager\">\n    <button\n      type=\"button\"\n      class=\"solaris-breadcrumb__pager-button\"\n      [attr.aria-label]=\"resolvedPreviousLabel()\"\n      [disabled]=\"!canGoPrevious()\"\n      (click)=\"onPrevious()\"\n    >\n      <solaris-icon name=\"chevron-left\" [decorative]=\"true\" />\n    </button>\n    <button\n      type=\"button\"\n      class=\"solaris-breadcrumb__pager-button\"\n      [attr.aria-label]=\"resolvedNextLabel()\"\n      [disabled]=\"!canGoNext()\"\n      (click)=\"onNext()\"\n    >\n      <solaris-icon name=\"chevron-right\" [decorative]=\"true\" />\n    </button>\n  </div>\n}\n\n<solaris-dropdown-menu #overflowMenu>\n  @for (item of hiddenItems(); track $index) {\n    <solaris-dropdown-menu-item\n      [label]=\"itemLabel(item)\"\n      [icon]=\"item.icon\"\n      [disabled]=\"item.disabled ?? false\"\n      (itemSelected)=\"onOverflowItemSelect(item)\"\n    />\n  }\n</solaris-dropdown-menu>\n", styles: [":host{--solaris-breadcrumb-gap: var(--solaris-spacing-1);--solaris-breadcrumb-icon-size: var(--solaris-spacing-3);--solaris-breadcrumb-pager-size: var(--solaris-spacing-5);--solaris-breadcrumb-link-color: var(--solaris-text-muted);--solaris-breadcrumb-font-size: var(--solaris-font-size-md);--solaris-breadcrumb-muted-color: var(--solaris-text-muted);--solaris-breadcrumb-text-color: var(--solaris-text-default);--solaris-breadcrumb-separator-size: var(--solaris-spacing-3);display:block;box-sizing:border-box}:host([data-size=sm]){--solaris-breadcrumb-icon-size: var(--solaris-spacing-2);--solaris-breadcrumb-pager-size: var(--solaris-spacing-4);--solaris-breadcrumb-font-size: var(--solaris-font-size-sm);--solaris-breadcrumb-separator-size: var(--solaris-spacing-2)}:host([data-size=lg]){--solaris-breadcrumb-icon-size: var(--solaris-spacing-4);--solaris-breadcrumb-pager-size: var(--solaris-spacing-6);--solaris-breadcrumb-font-size: var(--solaris-font-size-lg);--solaris-breadcrumb-separator-size: var(--solaris-spacing-4)}.solaris-breadcrumb__nav{display:inline-flex;box-sizing:border-box}.solaris-breadcrumb__list{margin:0;padding:0;display:flex;flex-wrap:wrap;list-style:none;align-items:center;gap:var(--solaris-breadcrumb-gap)}.solaris-breadcrumb__item{align-items:center;display:inline-flex;gap:var(--solaris-breadcrumb-gap);font-size:var(--solaris-breadcrumb-font-size)}.solaris-breadcrumb__link,.solaris-breadcrumb__text{align-items:center;display:inline-flex;text-decoration:none;box-sizing:border-box;gap:var(--solaris-spacing-2)}.solaris-breadcrumb__link{border-radius:var(--solaris-radius-sm);color:var(--solaris-breadcrumb-link-color);transition:all var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-breadcrumb__link:hover{text-decoration:underline;color:var(--solaris-text-default)}.solaris-breadcrumb__link:focus-visible{outline-offset:var(--solaris-focus-ring-offset);outline:var(--solaris-focus-ring-width) solid var(--solaris-focus-ring-color)}.solaris-breadcrumb__text{color:var(--solaris-breadcrumb-text-color)}.solaris-breadcrumb__text[aria-disabled=true]{color:var(--solaris-breadcrumb-muted-color)}.solaris-breadcrumb__text[aria-current=page]{color:var(--solaris-breadcrumb-text-color);font-weight:var(--solaris-font-weight-medium)}.solaris-breadcrumb__label{line-height:1.2}.solaris-breadcrumb__separator{display:inline-flex;color:var(--solaris-breadcrumb-muted-color)}.solaris-breadcrumb__separator solaris-icon,.solaris-breadcrumb__link solaris-icon,.solaris-breadcrumb__text solaris-icon{width:var(--solaris-breadcrumb-icon-size);height:var(--solaris-breadcrumb-icon-size)}.solaris-breadcrumb__separator solaris-icon{width:var(--solaris-breadcrumb-separator-size);height:var(--solaris-breadcrumb-separator-size)}.solaris-breadcrumb__overflow-trigger{padding:0;border:none;cursor:pointer;align-items:center;display:inline-flex;justify-content:center;background:transparent;border-radius:var(--solaris-radius-sm);color:var(--solaris-breadcrumb-muted-color)}.solaris-breadcrumb__overflow-trigger:hover{color:var(--solaris-breadcrumb-text-color)}.solaris-breadcrumb__overflow-trigger:focus-visible{outline-offset:var(--solaris-focus-ring-offset);outline:var(--solaris-focus-ring-width) solid var(--solaris-focus-ring-color)}.solaris-breadcrumb__overflow-trigger solaris-icon{width:var(--solaris-breadcrumb-icon-size);height:var(--solaris-breadcrumb-icon-size)}.solaris-breadcrumb__pager{align-items:center;display:inline-flex;gap:var(--solaris-spacing-1)}.solaris-breadcrumb__pager-button{padding:0;border:none;cursor:pointer;align-items:center;display:inline-flex;justify-content:center;background:transparent;border-radius:var(--solaris-radius-sm);width:var(--solaris-breadcrumb-pager-size);height:var(--solaris-breadcrumb-pager-size);color:var(--solaris-breadcrumb-muted-color)}.solaris-breadcrumb__pager-button:hover:not(:disabled){background:var(--solaris-surface-subtle);color:var(--solaris-breadcrumb-text-color)}.solaris-breadcrumb__pager-button:focus-visible{outline-offset:var(--solaris-focus-ring-offset);outline:var(--solaris-focus-ring-width) solid var(--solaris-focus-ring-color)}.solaris-breadcrumb__pager-button:disabled{cursor:not-allowed;opacity:var(--solaris-opacity-50)}.solaris-breadcrumb__pager-button solaris-icon{width:var(--solaris-spacing-3);height:var(--solaris-spacing-3)}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative"] }, { kind: "component", type: SolarisDropdownMenuComponent, selector: "solaris-dropdown-menu", inputs: ["size", "density"] }, { kind: "component", type: SolarisDropdownMenuItemComponent, selector: "solaris-dropdown-menu-item", inputs: ["color", "type", "closeOnSelect", "descriptionKey", "description", "checked", "labelKey", "shortcut", "label", "icon", "iconDecorative", "value", "disabled"], outputs: ["itemSelected"] }, { kind: "directive", type: SolarisDropdownMenuTriggerDirective, selector: "[solaris-dropdown-menu-trigger]", inputs: ["solarisDropdownMenuTriggerFor", "solarisDropdownMenuOpen", "solarisDropdownMenuDisabled", "solarisDropdownMenuPlacement", "solarisDropdownMenuAlign", "solarisDropdownMenuOffset", "solarisDropdownMenuAppearance", "solarisDropdownMenuRadius", "solarisDropdownMenuCloseOnSelect", "solarisDropdownMenuCloseOnEscape", "solarisDropdownMenuCloseOnOutsideClick", "solarisDropdownMenuMatchTriggerWidth", "solarisDropdownMenuMinWidth", "solarisDropdownMenuMaxWidth", "solarisDropdownMenuRestoreFocus", "solarisDropdownMenuScrollStrategy"], outputs: ["menuOpened", "menuClosed", "openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisBreadcrumbComponent, isStandalone: true, selector: "solaris-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleItems: { classPropertyName: "maxVisibleItems", publicName: "maxVisibleItems", isSignal: true, isRequired: false, transformFunction: null }, overflowPosition: { classPropertyName: "overflowPosition", publicName: "overflowPosition", isSignal: true, isRequired: false, transformFunction: null }, showNavigation: { classPropertyName: "showNavigation", publicName: "showNavigation", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigate: "navigate", previous: "previous", next: "next" }, host: { properties: { "attr.data-size": "size()", "attr.data-separator": "separator()", "attr.data-overflow": "overflowPosition()" }, classAttribute: "solaris-breadcrumb" }, ngImport: i0, template: "<nav class=\"solaris-breadcrumb__nav\" [attr.aria-label]=\"resolvedLabel()\">\n  <ol class=\"solaris-breadcrumb__list\">\n    @for (slot of slots(); track $index) {\n      <li class=\"solaris-breadcrumb__item\">\n        @if (slot.kind === 'ellipsis') {\n          <button\n            type=\"button\"\n            class=\"solaris-breadcrumb__overflow-trigger\"\n            solaris-dropdown-menu-trigger\n            [solarisDropdownMenuTriggerFor]=\"overflowMenu\"\n            [attr.aria-label]=\"resolvedShowMoreLabel()\"\n            (menuOpened)=\"overflowOpen.set(true)\"\n            (menuClosed)=\"overflowOpen.set(false)\"\n          >\n            <solaris-icon name=\"ellipsis\" [decorative]=\"true\" />\n          </button>\n        } @else if (isLink(slot.item)) {\n          <a\n            class=\"solaris-breadcrumb__link\"\n            [href]=\"slot.item.href\"\n            [attr.aria-label]=\"itemAriaLabel(slot.item)\"\n            (click)=\"onItemClick(slot.item, $event)\"\n          >\n            @if (slot.item.icon) {\n              <solaris-icon [name]=\"slot.item.icon!\" [decorative]=\"true\" />\n            }\n            @if (itemLabel(slot.item)) {\n              <span class=\"solaris-breadcrumb__label\">{{\n                itemLabel(slot.item)\n              }}</span>\n            }\n          </a>\n        } @else {\n          <span\n            class=\"solaris-breadcrumb__text\"\n            [attr.aria-current]=\"isCurrent(slot.item) ? 'page' : null\"\n            [attr.aria-disabled]=\"isDisabled(slot.item) ? 'true' : null\"\n            [attr.aria-label]=\"itemAriaLabel(slot.item)\"\n          >\n            @if (slot.item.icon) {\n              <solaris-icon [name]=\"slot.item.icon!\" [decorative]=\"true\" />\n            }\n            @if (itemLabel(slot.item)) {\n              <span class=\"solaris-breadcrumb__label\">{{\n                itemLabel(slot.item)\n              }}</span>\n            }\n          </span>\n        }\n\n        @if (!$last) {\n          <span class=\"solaris-breadcrumb__separator\" aria-hidden=\"true\">\n            <solaris-icon [name]=\"separatorIcon()\" [decorative]=\"true\" />\n          </span>\n        }\n      </li>\n    }\n  </ol>\n</nav>\n\n@if (showNavigation()) {\n  <div class=\"solaris-breadcrumb__pager\">\n    <button\n      type=\"button\"\n      class=\"solaris-breadcrumb__pager-button\"\n      [attr.aria-label]=\"resolvedPreviousLabel()\"\n      [disabled]=\"!canGoPrevious()\"\n      (click)=\"onPrevious()\"\n    >\n      <solaris-icon name=\"chevron-left\" [decorative]=\"true\" />\n    </button>\n    <button\n      type=\"button\"\n      class=\"solaris-breadcrumb__pager-button\"\n      [attr.aria-label]=\"resolvedNextLabel()\"\n      [disabled]=\"!canGoNext()\"\n      (click)=\"onNext()\"\n    >\n      <solaris-icon name=\"chevron-right\" [decorative]=\"true\" />\n    </button>\n  </div>\n}\n\n<solaris-dropdown-menu #overflowMenu>\n  @for (item of hiddenItems(); track $index) {\n    <solaris-dropdown-menu-item\n      [label]=\"itemLabel(item)\"\n      [icon]=\"item.icon\"\n      [disabled]=\"item.disabled ?? false\"\n      (itemSelected)=\"onOverflowItemSelect(item)\"\n    />\n  }\n</solaris-dropdown-menu>\n", styles: [":host{--solaris-breadcrumb-gap: var(--solaris-spacing-1);--solaris-breadcrumb-icon-size: var(--solaris-spacing-3);--solaris-breadcrumb-pager-size: var(--solaris-spacing-5);--solaris-breadcrumb-link-color: var(--solaris-text-muted);--solaris-breadcrumb-font-size: var(--solaris-font-size-md);--solaris-breadcrumb-muted-color: var(--solaris-text-muted);--solaris-breadcrumb-text-color: var(--solaris-text-default);--solaris-breadcrumb-separator-size: var(--solaris-spacing-3);display:block;box-sizing:border-box}:host([data-size=sm]){--solaris-breadcrumb-icon-size: var(--solaris-spacing-2);--solaris-breadcrumb-pager-size: var(--solaris-spacing-4);--solaris-breadcrumb-font-size: var(--solaris-font-size-sm);--solaris-breadcrumb-separator-size: var(--solaris-spacing-2)}:host([data-size=lg]){--solaris-breadcrumb-icon-size: var(--solaris-spacing-4);--solaris-breadcrumb-pager-size: var(--solaris-spacing-6);--solaris-breadcrumb-font-size: var(--solaris-font-size-lg);--solaris-breadcrumb-separator-size: var(--solaris-spacing-4)}.solaris-breadcrumb__nav{display:inline-flex;box-sizing:border-box}.solaris-breadcrumb__list{margin:0;padding:0;display:flex;flex-wrap:wrap;list-style:none;align-items:center;gap:var(--solaris-breadcrumb-gap)}.solaris-breadcrumb__item{align-items:center;display:inline-flex;gap:var(--solaris-breadcrumb-gap);font-size:var(--solaris-breadcrumb-font-size)}.solaris-breadcrumb__link,.solaris-breadcrumb__text{align-items:center;display:inline-flex;text-decoration:none;box-sizing:border-box;gap:var(--solaris-spacing-2)}.solaris-breadcrumb__link{border-radius:var(--solaris-radius-sm);color:var(--solaris-breadcrumb-link-color);transition:all var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-breadcrumb__link:hover{text-decoration:underline;color:var(--solaris-text-default)}.solaris-breadcrumb__link:focus-visible{outline-offset:var(--solaris-focus-ring-offset);outline:var(--solaris-focus-ring-width) solid var(--solaris-focus-ring-color)}.solaris-breadcrumb__text{color:var(--solaris-breadcrumb-text-color)}.solaris-breadcrumb__text[aria-disabled=true]{color:var(--solaris-breadcrumb-muted-color)}.solaris-breadcrumb__text[aria-current=page]{color:var(--solaris-breadcrumb-text-color);font-weight:var(--solaris-font-weight-medium)}.solaris-breadcrumb__label{line-height:1.2}.solaris-breadcrumb__separator{display:inline-flex;color:var(--solaris-breadcrumb-muted-color)}.solaris-breadcrumb__separator solaris-icon,.solaris-breadcrumb__link solaris-icon,.solaris-breadcrumb__text solaris-icon{width:var(--solaris-breadcrumb-icon-size);height:var(--solaris-breadcrumb-icon-size)}.solaris-breadcrumb__separator solaris-icon{width:var(--solaris-breadcrumb-separator-size);height:var(--solaris-breadcrumb-separator-size)}.solaris-breadcrumb__overflow-trigger{padding:0;border:none;cursor:pointer;align-items:center;display:inline-flex;justify-content:center;background:transparent;border-radius:var(--solaris-radius-sm);color:var(--solaris-breadcrumb-muted-color)}.solaris-breadcrumb__overflow-trigger:hover{color:var(--solaris-breadcrumb-text-color)}.solaris-breadcrumb__overflow-trigger:focus-visible{outline-offset:var(--solaris-focus-ring-offset);outline:var(--solaris-focus-ring-width) solid var(--solaris-focus-ring-color)}.solaris-breadcrumb__overflow-trigger solaris-icon{width:var(--solaris-breadcrumb-icon-size);height:var(--solaris-breadcrumb-icon-size)}.solaris-breadcrumb__pager{align-items:center;display:inline-flex;gap:var(--solaris-spacing-1)}.solaris-breadcrumb__pager-button{padding:0;border:none;cursor:pointer;align-items:center;display:inline-flex;justify-content:center;background:transparent;border-radius:var(--solaris-radius-sm);width:var(--solaris-breadcrumb-pager-size);height:var(--solaris-breadcrumb-pager-size);color:var(--solaris-breadcrumb-muted-color)}.solaris-breadcrumb__pager-button:hover:not(:disabled){background:var(--solaris-surface-subtle);color:var(--solaris-breadcrumb-text-color)}.solaris-breadcrumb__pager-button:focus-visible{outline-offset:var(--solaris-focus-ring-offset);outline:var(--solaris-focus-ring-width) solid var(--solaris-focus-ring-color)}.solaris-breadcrumb__pager-button:disabled{cursor:not-allowed;opacity:var(--solaris-opacity-50)}.solaris-breadcrumb__pager-button solaris-icon{width:var(--solaris-spacing-3);height:var(--solaris-spacing-3)}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }, { kind: "component", type: SolarisDropdownMenuComponent, selector: "solaris-dropdown-menu", inputs: ["size", "density"] }, { kind: "component", type: SolarisDropdownMenuItemComponent, selector: "solaris-dropdown-menu-item", inputs: ["color", "type", "closeOnSelect", "descriptionKey", "description", "checked", "labelKey", "shortcut", "label", "icon", "iconDecorative", "value", "disabled"], outputs: ["itemSelected"] }, { kind: "directive", type: SolarisDropdownMenuTriggerDirective, selector: "[solaris-dropdown-menu-trigger]", inputs: ["solarisDropdownMenuTriggerFor", "solarisDropdownMenuOpen", "solarisDropdownMenuDisabled", "solarisDropdownMenuPlacement", "solarisDropdownMenuAlign", "solarisDropdownMenuOffset", "solarisDropdownMenuAppearance", "solarisDropdownMenuRadius", "solarisDropdownMenuCloseOnSelect", "solarisDropdownMenuCloseOnEscape", "solarisDropdownMenuCloseOnOutsideClick", "solarisDropdownMenuMatchTriggerWidth", "solarisDropdownMenuMinWidth", "solarisDropdownMenuMaxWidth", "solarisDropdownMenuRestoreFocus", "solarisDropdownMenuScrollStrategy"], outputs: ["menuOpened", "menuClosed", "openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisBreadcrumbComponent, decorators: [{
             type: Component,
@@ -13173,7 +13374,7 @@ class SolarisCollapsibleComponent {
         this.open.set(!this.open());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisCollapsibleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisCollapsibleComponent, isStandalone: true, selector: "solaris-collapsible", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { properties: { "attr.data-size": "size()", "attr.data-appearance": "effectiveAppearance()", "attr.data-open": "isOpen() ? \"\" : null", "attr.data-disabled": "isEffectivelyDisabled() ? \"\" : null" }, classAttribute: "solaris-collapsible" }, ngImport: i0, template: "@if (headingLevel()) {\n  @switch (headingLevel()) {\n    @case (2) {\n      <h2 class=\"solaris-collapsible__header\">\n        <ng-container *ngTemplateOutlet=\"triggerContent\" />\n      </h2>\n    }\n    @case (3) {\n      <h3 class=\"solaris-collapsible__header\">\n        <ng-container *ngTemplateOutlet=\"triggerContent\" />\n      </h3>\n    }\n    @case (4) {\n      <h4 class=\"solaris-collapsible__header\">\n        <ng-container *ngTemplateOutlet=\"triggerContent\" />\n      </h4>\n    }\n    @case (5) {\n      <h5 class=\"solaris-collapsible__header\">\n        <ng-container *ngTemplateOutlet=\"triggerContent\" />\n      </h5>\n    }\n    @case (6) {\n      <h6 class=\"solaris-collapsible__header\">\n        <ng-container *ngTemplateOutlet=\"triggerContent\" />\n      </h6>\n    }\n    @default {\n      <h3 class=\"solaris-collapsible__header\">\n        <ng-container *ngTemplateOutlet=\"triggerContent\" />\n      </h3>\n    }\n  }\n} @else {\n  <div class=\"solaris-collapsible__header\">\n    <ng-container *ngTemplateOutlet=\"triggerContent\" />\n  </div>\n}\n\n<ng-template #triggerContent>\n  <button\n    type=\"button\"\n    class=\"solaris-collapsible__trigger\"\n    [id]=\"triggerId()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-controls]=\"panelId()\"\n    [attr.aria-label]=\"effectiveAriaLabel()\"\n    [attr.aria-disabled]=\"!canToggleClosed() && isOpen() ? 'true' : null\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    (click)=\"toggle()\"\n  >\n    <span class=\"solaris-collapsible__trigger-label\">\n      {{ labelText() }}\n    </span>\n    <solaris-icon\n      [name]=\"effectiveIcon()\"\n      class=\"solaris-collapsible__trigger-icon\"\n      [decorative]=\"true\"\n    />\n  </button>\n</ng-template>\n\n<div\n  class=\"solaris-collapsible__panel\"\n  [id]=\"panelId()\"\n  role=\"region\"\n  [attr.aria-labelledby]=\"triggerId()\"\n  [attr.aria-hidden]=\"isOpen() ? null : 'true'\"\n  [attr.inert]=\"isOpen() ? null : ''\"\n>\n  <div class=\"solaris-collapsible__panel-inner\">\n    <ng-content />\n  </div>\n</div>\n", styles: [":host{--solaris-collapsible-radius: var(--solaris-radius-md);--solaris-collapsible-icon-size: var(--solaris-spacing-4);--solaris-collapsible-trigger-gap: var(--solaris-spacing-2);--solaris-collapsible-trigger-color: var(--solaris-text-muted);--solaris-collapsible-border-color: var(--solaris-border-subtle);--solaris-collapsible-trigger-font-size: var(--solaris-font-size-md);--solaris-collapsible-trigger-font-weight: var(--solaris-font-weight-medium);--solaris-collapsible-trigger-padding: var(--solaris-spacing-2) var(--solaris-spacing-3);--solaris-collapsible-header-inset-top: var(--solaris-spacing-3);display:block;box-sizing:border-box}.solaris-collapsible__header{margin:0}.solaris-collapsible__trigger{width:100%;border:none;display:flex;cursor:pointer;text-align:start;align-items:center;box-sizing:border-box;background:transparent;justify-content:space-between;gap:var(--solaris-collapsible-trigger-gap);color:var(--solaris-collapsible-trigger-color);padding:var(--solaris-collapsible-trigger-padding);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard);font:var(--solaris-collapsible-trigger-font-weight) var(--solaris-collapsible-trigger-font-size)/1.2 var(--solaris-font-family-sans)}.solaris-collapsible__trigger:hover:not(:disabled){color:var(--solaris-text-default)}.solaris-collapsible__trigger:focus-visible{outline-offset:var(--solaris-focus-ring-offset);outline:var(--solaris-focus-ring-width) solid var(--solaris-focus-ring-color)}.solaris-collapsible__trigger:disabled{cursor:not-allowed;opacity:var(--solaris-opacity-50)}.solaris-collapsible__trigger-icon{flex-shrink:0;width:var(--solaris-collapsible-icon-size);height:var(--solaris-collapsible-icon-size);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-collapsible__trigger-icon{transform:rotate(180deg)}.solaris-collapsible__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-collapsible__panel{grid-template-rows:1fr}.solaris-collapsible__panel-inner{min-height:0;overflow:hidden;color:var(--solaris-text-muted);font-size:var(--solaris-font-size-sm);padding:0 var(--solaris-spacing-5) var(--solaris-spacing-3)}:host([data-appearance=boxed]){border-radius:var(--solaris-collapsible-radius);border:var(--solaris-border-width-sm) solid var(--solaris-collapsible-border-color)}:host([data-appearance=boxed]) .solaris-collapsible__header{margin-top:var(--solaris-collapsible-header-inset-top)}:host([data-appearance=lined]) .solaris-collapsible__trigger{border-bottom:var(--solaris-border-width-sm) solid var(--solaris-collapsible-border-color)}:host([data-appearance=lined]):last-child .solaris-collapsible__trigger{border-bottom:none}@media(prefers-reduced-motion:reduce){.solaris-collapsible__trigger,.solaris-collapsible__trigger-icon,.solaris-collapsible__panel{transition:none}}:host-context([data-reduced-motion=true]) .solaris-collapsible__trigger,:host-context([data-reduced-motion=true]) .solaris-collapsible__trigger-icon,:host-context([data-reduced-motion=true]) .solaris-collapsible__panel{transition:none}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisCollapsibleComponent, isStandalone: true, selector: "solaris-collapsible", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { properties: { "attr.data-size": "size()", "attr.data-appearance": "effectiveAppearance()", "attr.data-open": "isOpen() ? \"\" : null", "attr.data-disabled": "isEffectivelyDisabled() ? \"\" : null" }, classAttribute: "solaris-collapsible" }, ngImport: i0, template: "@if (headingLevel()) {\n  @switch (headingLevel()) {\n    @case (2) {\n      <h2 class=\"solaris-collapsible__header\">\n        <ng-container *ngTemplateOutlet=\"triggerContent\" />\n      </h2>\n    }\n    @case (3) {\n      <h3 class=\"solaris-collapsible__header\">\n        <ng-container *ngTemplateOutlet=\"triggerContent\" />\n      </h3>\n    }\n    @case (4) {\n      <h4 class=\"solaris-collapsible__header\">\n        <ng-container *ngTemplateOutlet=\"triggerContent\" />\n      </h4>\n    }\n    @case (5) {\n      <h5 class=\"solaris-collapsible__header\">\n        <ng-container *ngTemplateOutlet=\"triggerContent\" />\n      </h5>\n    }\n    @case (6) {\n      <h6 class=\"solaris-collapsible__header\">\n        <ng-container *ngTemplateOutlet=\"triggerContent\" />\n      </h6>\n    }\n    @default {\n      <h3 class=\"solaris-collapsible__header\">\n        <ng-container *ngTemplateOutlet=\"triggerContent\" />\n      </h3>\n    }\n  }\n} @else {\n  <div class=\"solaris-collapsible__header\">\n    <ng-container *ngTemplateOutlet=\"triggerContent\" />\n  </div>\n}\n\n<ng-template #triggerContent>\n  <button\n    type=\"button\"\n    class=\"solaris-collapsible__trigger\"\n    [id]=\"triggerId()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-controls]=\"panelId()\"\n    [attr.aria-label]=\"effectiveAriaLabel()\"\n    [attr.aria-disabled]=\"!canToggleClosed() && isOpen() ? 'true' : null\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    (click)=\"toggle()\"\n  >\n    <span class=\"solaris-collapsible__trigger-label\">\n      {{ labelText() }}\n    </span>\n    <solaris-icon\n      [name]=\"effectiveIcon()\"\n      class=\"solaris-collapsible__trigger-icon\"\n      [decorative]=\"true\"\n    />\n  </button>\n</ng-template>\n\n<div\n  class=\"solaris-collapsible__panel\"\n  [id]=\"panelId()\"\n  role=\"region\"\n  [attr.aria-labelledby]=\"triggerId()\"\n  [attr.aria-hidden]=\"isOpen() ? null : 'true'\"\n  [attr.inert]=\"isOpen() ? null : ''\"\n>\n  <div class=\"solaris-collapsible__panel-inner\">\n    <ng-content />\n  </div>\n</div>\n", styles: [":host{--solaris-collapsible-radius: var(--solaris-radius-md);--solaris-collapsible-icon-size: var(--solaris-spacing-4);--solaris-collapsible-trigger-gap: var(--solaris-spacing-2);--solaris-collapsible-trigger-color: var(--solaris-text-muted);--solaris-collapsible-border-color: var(--solaris-border-subtle);--solaris-collapsible-trigger-font-size: var(--solaris-font-size-md);--solaris-collapsible-trigger-font-weight: var(--solaris-font-weight-medium);--solaris-collapsible-trigger-padding: var(--solaris-spacing-2) var(--solaris-spacing-3);--solaris-collapsible-header-inset-top: var(--solaris-spacing-3);display:block;box-sizing:border-box}.solaris-collapsible__header{margin:0}.solaris-collapsible__trigger{width:100%;border:none;display:flex;cursor:pointer;text-align:start;align-items:center;box-sizing:border-box;background:transparent;justify-content:space-between;gap:var(--solaris-collapsible-trigger-gap);color:var(--solaris-collapsible-trigger-color);padding:var(--solaris-collapsible-trigger-padding);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard);font:var(--solaris-collapsible-trigger-font-weight) var(--solaris-collapsible-trigger-font-size)/1.2 var(--solaris-font-family-sans)}.solaris-collapsible__trigger:hover:not(:disabled){color:var(--solaris-text-default)}.solaris-collapsible__trigger:focus-visible{outline-offset:var(--solaris-focus-ring-offset);outline:var(--solaris-focus-ring-width) solid var(--solaris-focus-ring-color)}.solaris-collapsible__trigger:disabled{cursor:not-allowed;opacity:var(--solaris-opacity-50)}.solaris-collapsible__trigger-icon{flex-shrink:0;width:var(--solaris-collapsible-icon-size);height:var(--solaris-collapsible-icon-size);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-collapsible__trigger-icon{transform:rotate(180deg)}.solaris-collapsible__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-collapsible__panel{grid-template-rows:1fr}.solaris-collapsible__panel-inner{min-height:0;overflow:hidden;color:var(--solaris-text-muted);font-size:var(--solaris-font-size-sm);padding:0 var(--solaris-spacing-5) var(--solaris-spacing-3)}:host([data-appearance=boxed]){border-radius:var(--solaris-collapsible-radius);border:var(--solaris-border-width-sm) solid var(--solaris-collapsible-border-color)}:host([data-appearance=boxed]) .solaris-collapsible__header{margin-top:var(--solaris-collapsible-header-inset-top)}:host([data-appearance=lined]) .solaris-collapsible__trigger{border-bottom:var(--solaris-border-width-sm) solid var(--solaris-collapsible-border-color)}:host([data-appearance=lined]):last-child .solaris-collapsible__trigger{border-bottom:none}@media(prefers-reduced-motion:reduce){.solaris-collapsible__trigger,.solaris-collapsible__trigger-icon,.solaris-collapsible__panel{transition:none}}:host-context([data-reduced-motion=true]) .solaris-collapsible__trigger,:host-context([data-reduced-motion=true]) .solaris-collapsible__trigger-icon,:host-context([data-reduced-motion=true]) .solaris-collapsible__panel{transition:none}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisCollapsibleComponent, decorators: [{
             type: Component,
@@ -13564,7 +13765,7 @@ class SolarisEditableTabsComponent {
         return undefined;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisEditableTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisEditableTabsComponent, isStandalone: true, selector: "solaris-editable-tabs", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, activationMode: { classPropertyName: "activationMode", publicName: "activationMode", isSignal: true, isRequired: false, transformFunction: null }, contentTransition: { classPropertyName: "contentTransition", publicName: "contentTransition", isSignal: true, isRequired: false, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, renamable: { classPropertyName: "renamable", publicName: "renamable", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, movable: { classPropertyName: "movable", publicName: "movable", isSignal: true, isRequired: false, transformFunction: null }, defaultable: { classPropertyName: "defaultable", publicName: "defaultable", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, renameOnBlur: { classPropertyName: "renameOnBlur", publicName: "renameOnBlur", isSignal: true, isRequired: false, transformFunction: null }, minTabs: { classPropertyName: "minTabs", publicName: "minTabs", isSignal: true, isRequired: false, transformFunction: null }, allowEmpty: { classPropertyName: "allowEmpty", publicName: "allowEmpty", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, tabContentMap: { classPropertyName: "tabContentMap", publicName: "tabContentMap", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange", tabRenameRequested: "tabRenameRequested", tabRename: "tabRename", tabRemoveRequested: "tabRemoveRequested", tabRemove: "tabRemove", tabMoveRequested: "tabMoveRequested", tabMove: "tabMove", defaultTabChange: "defaultTabChange", tabAction: "tabAction" }, host: { properties: { "attr.data-orientation": "orientation()", "attr.data-appearance": "appearance()", "attr.data-density": "effectiveDensity()", "attr.data-shape": "shape()", "attr.data-show-actions": "showActions()" }, classAttribute: "solaris-editable-tabs" }, viewQueries: [{ propertyName: "menuComponents", predicate: SolarisDropdownMenuComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"solaris-editable-tabs__wrapper\">\n  <solaris-tabs\n    [value]=\"$any(value())\"\n    (valueChange)=\"onValueChange($event)\"\n    [defaultValue]=\"$any(defaultValue())\"\n    [orientation]=\"orientation()\"\n    [appearance]=\"appearance()\"\n    [density]=\"effectiveDensity()\"\n    [shape]=\"shape()\"\n    [activationMode]=\"activationMode()\"\n    [contentTransition]=\"contentTransition()\"\n    [ariaLabel]=\"resolvedAriaLabel()\"\n    class=\"solaris-editable-tabs__inner\"\n  >\n    @for (tab of tabs(); track tab.value; let i = $index) {\n      <solaris-tab\n        [value]=\"$any(tab.value)\"\n        [label]=\"isRenaming(tab) ? undefined : tab.label\"\n        [labelKey]=\"isRenaming(tab) ? undefined : tab.labelKey\"\n        [icon]=\"tab.icon\"\n        [badge]=\"tab.badge\"\n        [disabled]=\"tab.disabled ?? false\"\n        [attr.data-editable]=\"editable() ? '' : null\"\n        [attr.data-has-icon]=\"tab.icon ? '' : null\"\n        [attr.data-menu-open]=\"activeMenuIndex() === i ? '' : null\"\n      >\n        @if (isRenaming(tab)) {\n          <span class=\"solaris-editable-tabs__rename-wrapper\">\n            <input\n              #renameInput\n              class=\"solaris-editable-tabs__rename-input\"\n              [value]=\"renameValue()\"\n              (input)=\"renameValue.set($any($event).target.value)\"\n              (keydown)=\"onRenameKeydown($event, tab)\"\n              (blur)=\"onRenameBlur(tab)\"\n              [attr.aria-label]=\"\n                resolveText('solaris.editableTabs.confirmRename') ??\n                'Confirm rename'\n              \"\n            />\n          </span>\n        } @else if (hasActions(tab)) {\n          <span\n            class=\"solaris-editable-tabs__action-area\"\n            [class.solaris-editable-tabs__action-area--visible]=\"\n              showActions() === 'always'\n            \"\n            [class.solaris-editable-tabs__action-area--replaces-icon]=\"\n              !!tab.icon\n            \"\n          >\n            <button\n              class=\"solaris-editable-tabs__action-trigger\"\n              solaris-dropdown-menu-trigger\n              [solarisDropdownMenuTriggerFor]=\"tabMenuRefs()[i]\"\n              [solarisDropdownMenuPlacement]=\"'bottom'\"\n              [solarisDropdownMenuAlign]=\"'start'\"\n              [solarisDropdownMenuOffset]=\"4\"\n              [solarisDropdownMenuRestoreFocus]=\"true\"\n              [solarisDropdownMenuOpen]=\"activeMenuIndex() === i\"\n              (menuOpened)=\"activeMenuIndex.set(i)\"\n              (menuClosed)=\"activeMenuIndex.set(null)\"\n              [attr.aria-label]=\"\n                resolveText('solaris.editableTabs.tabActions') ?? 'Tab actions'\n              \"\n              tabindex=\"0\"\n              type=\"button\"\n            >\n              <solaris-icon name=\"ellipsis\" [decorative]=\"true\" />\n            </button>\n          </span>\n        }\n      </solaris-tab>\n    }\n\n    @for (tab of tabs(); track tab.value) {\n      <solaris-tab-panel [value]=\"$any(tab.value)\" [lazy]=\"true\">\n        @if (getContentTemplate(tab); as tmpl) {\n          <ng-container [ngTemplateOutlet]=\"tmpl\" />\n        }\n      </solaris-tab-panel>\n    }\n  </solaris-tabs>\n</div>\n\n@for (tab of tabs(); track tab.value; let i = $index) {\n  <solaris-dropdown-menu>\n    @if (canRename(tab)) {\n      <solaris-dropdown-menu-item\n        [label]=\"resolveText('solaris.editableTabs.rename') ?? 'Rename'\"\n        icon=\"edit\"\n        (itemSelected)=\"startRename(tab)\"\n      />\n    }\n    @if (canSetDefault(tab)) {\n      <solaris-dropdown-menu-item\n        [label]=\"\n          resolveText('solaris.editableTabs.setAsDefault') ?? 'Set as default'\n        \"\n        icon=\"check\"\n        (itemSelected)=\"setAsDefault(tab)\"\n      />\n    }\n    @if (canMoveLeft(tab)) {\n      <solaris-dropdown-menu-item\n        [label]=\"moveLabel('left')\"\n        [icon]=\"moveIcon('left')\"\n        (itemSelected)=\"\n          moveTab(tab, i, orientation() === 'vertical' ? 'up' : 'left')\n        \"\n      />\n    }\n    @if (canMoveRight(tab)) {\n      <solaris-dropdown-menu-item\n        [label]=\"moveLabel('right')\"\n        [icon]=\"moveIcon('right')\"\n        (itemSelected)=\"\n          moveTab(tab, i, orientation() === 'vertical' ? 'down' : 'right')\n        \"\n      />\n    }\n    @if (tab.customActions?.length) {\n      @for (action of tab.customActions; track action.id) {\n        @if (!action.disabled) {\n          <solaris-dropdown-menu-item\n            [label]=\"action.label ?? ''\"\n            [labelKey]=\"action.labelKey\"\n            [icon]=\"action.icon\"\n            [color]=\"action.color ?? 'neutral'\"\n            (itemSelected)=\"handleCustomAction(tab, action)\"\n          />\n        }\n      }\n    }\n    @if (canRemove(tab)) {\n      <solaris-divider />\n      <solaris-dropdown-menu-item\n        [label]=\"resolveText('solaris.editableTabs.remove') ?? 'Remove'\"\n        icon=\"x\"\n        color=\"danger\"\n        (itemSelected)=\"confirmRemove(tab, i)\"\n      />\n    }\n  </solaris-dropdown-menu>\n}\n", styles: [":host{--solaris-editable-tabs-action-size: var(--solaris-spacing-5);--solaris-editable-tabs-action-radius: var(--solaris-radius-sm);--solaris-editable-tabs-action-color: var(--solaris-text-muted);--solaris-editable-tabs-action-hover-color: var(--solaris-text-default);--solaris-editable-tabs-action-hover-background: var( --solaris-surface-subtle );--solaris-editable-tabs-rename-input-min-width: var(--solaris-spacing-20);--solaris-editable-tabs-rename-input-padding: var(--solaris-spacing-1);--solaris-editable-tabs-rename-input-radius: var(--solaris-radius-sm);--solaris-editable-tabs-rename-input-font-size: inherit;--solaris-editable-tabs-rename-input-border-color: var( --solaris-primary-base );--solaris-primary-base-alpha: #4282fb4d;--solaris-editable-tabs-rename-input-background: var(--solaris-surface-base);display:block;width:100%}.solaris-editable-tabs__wrapper{position:relative;width:100%}.solaris-editable-tabs__action-area{display:inline-flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}.solaris-editable-tabs__action-area--visible{opacity:1}:host([data-show-actions=always]) .solaris-editable-tabs__action-area{opacity:1}:host ::ng-deep solaris-tab[data-editable]:hover .solaris-editable-tabs__action-area{opacity:1}:host ::ng-deep solaris-tab[data-editable]:focus-within .solaris-editable-tabs__action-area{opacity:1}:host ::ng-deep .solaris-editable-tabs__action-area--replaces-icon{display:none;order:-1}:host ::ng-deep .solaris-editable-tabs__action-area--replaces-icon .solaris-editable-tabs__action-trigger{width:var(--solaris-tab-icon-size);height:var(--solaris-tab-icon-size)}:host ::ng-deep solaris-tab[data-has-icon]:hover .solaris-editable-tabs__action-area--replaces-icon,:host ::ng-deep solaris-tab[data-has-icon]:focus-within .solaris-editable-tabs__action-area--replaces-icon{display:inline-flex}:host ::ng-deep solaris-tab[data-has-icon]:hover .solaris-tab__icon,:host ::ng-deep solaris-tab[data-has-icon]:focus-within .solaris-tab__icon{display:none}:host ::ng-deep solaris-tab[data-has-icon][data-menu-open] .solaris-editable-tabs__action-area--replaces-icon{display:inline-flex}:host ::ng-deep solaris-tab[data-has-icon][data-menu-open] .solaris-tab__icon{display:none}:host([data-show-actions=always]) ::ng-deep .solaris-editable-tabs__action-area--replaces-icon{display:inline-flex}:host([data-show-actions=always]) ::ng-deep solaris-tab[data-has-icon] .solaris-tab__icon{display:none}.solaris-editable-tabs__action-trigger{display:inline-flex;align-items:center;justify-content:center;width:var(--solaris-editable-tabs-action-size);height:var(--solaris-editable-tabs-action-size);padding:0;margin:0;border:none;cursor:pointer;background:transparent;color:var(--solaris-editable-tabs-action-color);border-radius:var(--solaris-editable-tabs-action-radius);transition:color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard),background var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard);line-height:0}.solaris-editable-tabs__action-trigger:hover,.solaris-editable-tabs__action-trigger:focus-visible{color:var(--solaris-editable-tabs-action-hover-color);background:var(--solaris-editable-tabs-action-hover-background)}.solaris-editable-tabs__action-trigger:focus-visible{outline:var(--solaris-border-width-md) solid var(--solaris-primary-base);outline-offset:var(--solaris-border-width-sm)}.solaris-editable-tabs__rename-wrapper{display:inline-flex;align-items:center}.solaris-editable-tabs__rename-input{min-width:var(--solaris-editable-tabs-rename-input-min-width);padding:var(--solaris-editable-tabs-rename-input-padding);border:var(--solaris-border-width-sm) solid var(--solaris-editable-tabs-rename-input-border-color);border-radius:var(--solaris-editable-tabs-rename-input-radius);background:var(--solaris-editable-tabs-rename-input-background);font:var(--solaris-font-weight-regular) var(--solaris-editable-tabs-rename-input-font-size)/1.2 var(--solaris-font-family-sans);color:inherit;outline:none;box-sizing:border-box}.solaris-editable-tabs__rename-input:focus{box-shadow:0 0 0 var(--solaris-border-width-sm) var(--solaris-primary-base-alpha)}@media(prefers-reduced-motion:reduce){.solaris-editable-tabs__action-area,.solaris-editable-tabs__action-trigger{transition:none}}:host-context([data-reduced-motion=true]) .solaris-editable-tabs__action-area{transition:none}:host-context([data-reduced-motion=true]) .solaris-editable-tabs__action-trigger{transition:none}\n"], dependencies: [{ kind: "component", type: SolarisTabsComponent, selector: "solaris-tabs", inputs: ["value", "defaultValue", "orientation", "appearance", "density", "shape", "activationMode", "contentTransition", "fullWidth", "fitContent", "scrollable", "showIndicator", "disabled", "ariaLabel", "ariaLabelKey"], outputs: ["valueChange", "tabChange", "tabClick"] }, { kind: "component", type: SolarisTabComponent, selector: "solaris-tab", inputs: ["disabled", "value", "iconDecorative", "icon", "label", "labelKey", "ariaLabel", "badgeLabel", "ariaLabelKey", "badgeLabelKey", "badge"] }, { kind: "component", type: SolarisTabPanelComponent, selector: "solaris-tab-panel", inputs: ["value", "lazy"] }, { kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative"] }, { kind: "component", type: SolarisDropdownMenuComponent, selector: "solaris-dropdown-menu", inputs: ["size", "density"] }, { kind: "component", type: SolarisDropdownMenuItemComponent, selector: "solaris-dropdown-menu-item", inputs: ["color", "type", "closeOnSelect", "descriptionKey", "description", "checked", "labelKey", "shortcut", "label", "icon", "iconDecorative", "value", "disabled"], outputs: ["itemSelected"] }, { kind: "directive", type: SolarisDropdownMenuTriggerDirective, selector: "[solaris-dropdown-menu-trigger]", inputs: ["solarisDropdownMenuTriggerFor", "solarisDropdownMenuOpen", "solarisDropdownMenuDisabled", "solarisDropdownMenuPlacement", "solarisDropdownMenuAlign", "solarisDropdownMenuOffset", "solarisDropdownMenuAppearance", "solarisDropdownMenuRadius", "solarisDropdownMenuCloseOnSelect", "solarisDropdownMenuCloseOnEscape", "solarisDropdownMenuCloseOnOutsideClick", "solarisDropdownMenuMatchTriggerWidth", "solarisDropdownMenuMinWidth", "solarisDropdownMenuMaxWidth", "solarisDropdownMenuRestoreFocus", "solarisDropdownMenuScrollStrategy"], outputs: ["menuOpened", "menuClosed", "openChange"] }, { kind: "component", type: SolarisDividerComponent, selector: "solaris-divider", inputs: ["orientation", "appearance", "spacing", "inset", "decorative", "width", "height", "label", "labelKey", "textPosition"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisEditableTabsComponent, isStandalone: true, selector: "solaris-editable-tabs", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, activationMode: { classPropertyName: "activationMode", publicName: "activationMode", isSignal: true, isRequired: false, transformFunction: null }, contentTransition: { classPropertyName: "contentTransition", publicName: "contentTransition", isSignal: true, isRequired: false, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, renamable: { classPropertyName: "renamable", publicName: "renamable", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, movable: { classPropertyName: "movable", publicName: "movable", isSignal: true, isRequired: false, transformFunction: null }, defaultable: { classPropertyName: "defaultable", publicName: "defaultable", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, renameOnBlur: { classPropertyName: "renameOnBlur", publicName: "renameOnBlur", isSignal: true, isRequired: false, transformFunction: null }, minTabs: { classPropertyName: "minTabs", publicName: "minTabs", isSignal: true, isRequired: false, transformFunction: null }, allowEmpty: { classPropertyName: "allowEmpty", publicName: "allowEmpty", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, tabContentMap: { classPropertyName: "tabContentMap", publicName: "tabContentMap", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange", tabRenameRequested: "tabRenameRequested", tabRename: "tabRename", tabRemoveRequested: "tabRemoveRequested", tabRemove: "tabRemove", tabMoveRequested: "tabMoveRequested", tabMove: "tabMove", defaultTabChange: "defaultTabChange", tabAction: "tabAction" }, host: { properties: { "attr.data-orientation": "orientation()", "attr.data-appearance": "appearance()", "attr.data-density": "effectiveDensity()", "attr.data-shape": "shape()", "attr.data-show-actions": "showActions()" }, classAttribute: "solaris-editable-tabs" }, viewQueries: [{ propertyName: "menuComponents", predicate: SolarisDropdownMenuComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"solaris-editable-tabs__wrapper\">\n  <solaris-tabs\n    [value]=\"$any(value())\"\n    (valueChange)=\"onValueChange($event)\"\n    [defaultValue]=\"$any(defaultValue())\"\n    [orientation]=\"orientation()\"\n    [appearance]=\"appearance()\"\n    [density]=\"effectiveDensity()\"\n    [shape]=\"shape()\"\n    [activationMode]=\"activationMode()\"\n    [contentTransition]=\"contentTransition()\"\n    [ariaLabel]=\"resolvedAriaLabel()\"\n    class=\"solaris-editable-tabs__inner\"\n  >\n    @for (tab of tabs(); track tab.value; let i = $index) {\n      <solaris-tab\n        [value]=\"$any(tab.value)\"\n        [label]=\"isRenaming(tab) ? undefined : tab.label\"\n        [labelKey]=\"isRenaming(tab) ? undefined : tab.labelKey\"\n        [icon]=\"tab.icon\"\n        [badge]=\"tab.badge\"\n        [disabled]=\"tab.disabled ?? false\"\n        [attr.data-editable]=\"editable() ? '' : null\"\n        [attr.data-has-icon]=\"tab.icon ? '' : null\"\n        [attr.data-menu-open]=\"activeMenuIndex() === i ? '' : null\"\n      >\n        @if (isRenaming(tab)) {\n          <span class=\"solaris-editable-tabs__rename-wrapper\">\n            <input\n              #renameInput\n              class=\"solaris-editable-tabs__rename-input\"\n              [value]=\"renameValue()\"\n              (input)=\"renameValue.set($any($event).target.value)\"\n              (keydown)=\"onRenameKeydown($event, tab)\"\n              (blur)=\"onRenameBlur(tab)\"\n              [attr.aria-label]=\"\n                resolveText('solaris.editableTabs.confirmRename') ??\n                'Confirm rename'\n              \"\n            />\n          </span>\n        } @else if (hasActions(tab)) {\n          <span\n            class=\"solaris-editable-tabs__action-area\"\n            [class.solaris-editable-tabs__action-area--visible]=\"\n              showActions() === 'always'\n            \"\n            [class.solaris-editable-tabs__action-area--replaces-icon]=\"\n              !!tab.icon\n            \"\n          >\n            <button\n              class=\"solaris-editable-tabs__action-trigger\"\n              solaris-dropdown-menu-trigger\n              [solarisDropdownMenuTriggerFor]=\"tabMenuRefs()[i]\"\n              [solarisDropdownMenuPlacement]=\"'bottom'\"\n              [solarisDropdownMenuAlign]=\"'start'\"\n              [solarisDropdownMenuOffset]=\"4\"\n              [solarisDropdownMenuRestoreFocus]=\"true\"\n              [solarisDropdownMenuOpen]=\"activeMenuIndex() === i\"\n              (menuOpened)=\"activeMenuIndex.set(i)\"\n              (menuClosed)=\"activeMenuIndex.set(null)\"\n              [attr.aria-label]=\"\n                resolveText('solaris.editableTabs.tabActions') ?? 'Tab actions'\n              \"\n              tabindex=\"0\"\n              type=\"button\"\n            >\n              <solaris-icon name=\"ellipsis\" [decorative]=\"true\" />\n            </button>\n          </span>\n        }\n      </solaris-tab>\n    }\n\n    @for (tab of tabs(); track tab.value) {\n      <solaris-tab-panel [value]=\"$any(tab.value)\" [lazy]=\"true\">\n        @if (getContentTemplate(tab); as tmpl) {\n          <ng-container [ngTemplateOutlet]=\"tmpl\" />\n        }\n      </solaris-tab-panel>\n    }\n  </solaris-tabs>\n</div>\n\n@for (tab of tabs(); track tab.value; let i = $index) {\n  <solaris-dropdown-menu>\n    @if (canRename(tab)) {\n      <solaris-dropdown-menu-item\n        [label]=\"resolveText('solaris.editableTabs.rename') ?? 'Rename'\"\n        icon=\"edit\"\n        (itemSelected)=\"startRename(tab)\"\n      />\n    }\n    @if (canSetDefault(tab)) {\n      <solaris-dropdown-menu-item\n        [label]=\"\n          resolveText('solaris.editableTabs.setAsDefault') ?? 'Set as default'\n        \"\n        icon=\"check\"\n        (itemSelected)=\"setAsDefault(tab)\"\n      />\n    }\n    @if (canMoveLeft(tab)) {\n      <solaris-dropdown-menu-item\n        [label]=\"moveLabel('left')\"\n        [icon]=\"moveIcon('left')\"\n        (itemSelected)=\"\n          moveTab(tab, i, orientation() === 'vertical' ? 'up' : 'left')\n        \"\n      />\n    }\n    @if (canMoveRight(tab)) {\n      <solaris-dropdown-menu-item\n        [label]=\"moveLabel('right')\"\n        [icon]=\"moveIcon('right')\"\n        (itemSelected)=\"\n          moveTab(tab, i, orientation() === 'vertical' ? 'down' : 'right')\n        \"\n      />\n    }\n    @if (tab.customActions?.length) {\n      @for (action of tab.customActions; track action.id) {\n        @if (!action.disabled) {\n          <solaris-dropdown-menu-item\n            [label]=\"action.label ?? ''\"\n            [labelKey]=\"action.labelKey\"\n            [icon]=\"action.icon\"\n            [color]=\"action.color ?? 'neutral'\"\n            (itemSelected)=\"handleCustomAction(tab, action)\"\n          />\n        }\n      }\n    }\n    @if (canRemove(tab)) {\n      <solaris-divider />\n      <solaris-dropdown-menu-item\n        [label]=\"resolveText('solaris.editableTabs.remove') ?? 'Remove'\"\n        icon=\"x\"\n        color=\"danger\"\n        (itemSelected)=\"confirmRemove(tab, i)\"\n      />\n    }\n  </solaris-dropdown-menu>\n}\n", styles: [":host{--solaris-editable-tabs-action-size: var(--solaris-spacing-5);--solaris-editable-tabs-action-radius: var(--solaris-radius-sm);--solaris-editable-tabs-action-color: var(--solaris-text-muted);--solaris-editable-tabs-action-hover-color: var(--solaris-text-default);--solaris-editable-tabs-action-hover-background: var( --solaris-surface-subtle );--solaris-editable-tabs-rename-input-min-width: var(--solaris-spacing-20);--solaris-editable-tabs-rename-input-padding: var(--solaris-spacing-1);--solaris-editable-tabs-rename-input-radius: var(--solaris-radius-sm);--solaris-editable-tabs-rename-input-font-size: inherit;--solaris-editable-tabs-rename-input-border-color: var( --solaris-primary-base );--solaris-primary-base-alpha: #4282fb4d;--solaris-editable-tabs-rename-input-background: var(--solaris-surface-base);display:block;width:100%}.solaris-editable-tabs__wrapper{position:relative;width:100%}.solaris-editable-tabs__action-area{display:inline-flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}.solaris-editable-tabs__action-area--visible{opacity:1}:host([data-show-actions=always]) .solaris-editable-tabs__action-area{opacity:1}:host ::ng-deep solaris-tab[data-editable]:hover .solaris-editable-tabs__action-area{opacity:1}:host ::ng-deep solaris-tab[data-editable]:focus-within .solaris-editable-tabs__action-area{opacity:1}:host ::ng-deep .solaris-editable-tabs__action-area--replaces-icon{display:none;order:-1}:host ::ng-deep .solaris-editable-tabs__action-area--replaces-icon .solaris-editable-tabs__action-trigger{width:var(--solaris-tab-icon-size);height:var(--solaris-tab-icon-size)}:host ::ng-deep solaris-tab[data-has-icon]:hover .solaris-editable-tabs__action-area--replaces-icon,:host ::ng-deep solaris-tab[data-has-icon]:focus-within .solaris-editable-tabs__action-area--replaces-icon{display:inline-flex}:host ::ng-deep solaris-tab[data-has-icon]:hover .solaris-tab__icon,:host ::ng-deep solaris-tab[data-has-icon]:focus-within .solaris-tab__icon{display:none}:host ::ng-deep solaris-tab[data-has-icon][data-menu-open] .solaris-editable-tabs__action-area--replaces-icon{display:inline-flex}:host ::ng-deep solaris-tab[data-has-icon][data-menu-open] .solaris-tab__icon{display:none}:host([data-show-actions=always]) ::ng-deep .solaris-editable-tabs__action-area--replaces-icon{display:inline-flex}:host([data-show-actions=always]) ::ng-deep solaris-tab[data-has-icon] .solaris-tab__icon{display:none}.solaris-editable-tabs__action-trigger{display:inline-flex;align-items:center;justify-content:center;width:var(--solaris-editable-tabs-action-size);height:var(--solaris-editable-tabs-action-size);padding:0;margin:0;border:none;cursor:pointer;background:transparent;color:var(--solaris-editable-tabs-action-color);border-radius:var(--solaris-editable-tabs-action-radius);transition:color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard),background var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard);line-height:0}.solaris-editable-tabs__action-trigger:hover,.solaris-editable-tabs__action-trigger:focus-visible{color:var(--solaris-editable-tabs-action-hover-color);background:var(--solaris-editable-tabs-action-hover-background)}.solaris-editable-tabs__action-trigger:focus-visible{outline:var(--solaris-border-width-md) solid var(--solaris-primary-base);outline-offset:var(--solaris-border-width-sm)}.solaris-editable-tabs__rename-wrapper{display:inline-flex;align-items:center}.solaris-editable-tabs__rename-input{min-width:var(--solaris-editable-tabs-rename-input-min-width);padding:var(--solaris-editable-tabs-rename-input-padding);border:var(--solaris-border-width-sm) solid var(--solaris-editable-tabs-rename-input-border-color);border-radius:var(--solaris-editable-tabs-rename-input-radius);background:var(--solaris-editable-tabs-rename-input-background);font:var(--solaris-font-weight-regular) var(--solaris-editable-tabs-rename-input-font-size)/1.2 var(--solaris-font-family-sans);color:inherit;outline:none;box-sizing:border-box}.solaris-editable-tabs__rename-input:focus{box-shadow:0 0 0 var(--solaris-border-width-sm) var(--solaris-primary-base-alpha)}@media(prefers-reduced-motion:reduce){.solaris-editable-tabs__action-area,.solaris-editable-tabs__action-trigger{transition:none}}:host-context([data-reduced-motion=true]) .solaris-editable-tabs__action-area{transition:none}:host-context([data-reduced-motion=true]) .solaris-editable-tabs__action-trigger{transition:none}\n"], dependencies: [{ kind: "component", type: SolarisTabsComponent, selector: "solaris-tabs", inputs: ["value", "defaultValue", "orientation", "appearance", "density", "shape", "activationMode", "contentTransition", "fullWidth", "fitContent", "scrollable", "showIndicator", "disabled", "ariaLabel", "ariaLabelKey"], outputs: ["valueChange", "tabChange", "tabClick"] }, { kind: "component", type: SolarisTabComponent, selector: "solaris-tab", inputs: ["disabled", "value", "iconDecorative", "icon", "label", "labelKey", "ariaLabel", "badgeLabel", "ariaLabelKey", "badgeLabelKey", "badge"] }, { kind: "component", type: SolarisTabPanelComponent, selector: "solaris-tab-panel", inputs: ["value", "lazy"] }, { kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }, { kind: "component", type: SolarisDropdownMenuComponent, selector: "solaris-dropdown-menu", inputs: ["size", "density"] }, { kind: "component", type: SolarisDropdownMenuItemComponent, selector: "solaris-dropdown-menu-item", inputs: ["color", "type", "closeOnSelect", "descriptionKey", "description", "checked", "labelKey", "shortcut", "label", "icon", "iconDecorative", "value", "disabled"], outputs: ["itemSelected"] }, { kind: "directive", type: SolarisDropdownMenuTriggerDirective, selector: "[solaris-dropdown-menu-trigger]", inputs: ["solarisDropdownMenuTriggerFor", "solarisDropdownMenuOpen", "solarisDropdownMenuDisabled", "solarisDropdownMenuPlacement", "solarisDropdownMenuAlign", "solarisDropdownMenuOffset", "solarisDropdownMenuAppearance", "solarisDropdownMenuRadius", "solarisDropdownMenuCloseOnSelect", "solarisDropdownMenuCloseOnEscape", "solarisDropdownMenuCloseOnOutsideClick", "solarisDropdownMenuMatchTriggerWidth", "solarisDropdownMenuMinWidth", "solarisDropdownMenuMaxWidth", "solarisDropdownMenuRestoreFocus", "solarisDropdownMenuScrollStrategy"], outputs: ["menuOpened", "menuClosed", "openChange"] }, { kind: "component", type: SolarisDividerComponent, selector: "solaris-divider", inputs: ["orientation", "appearance", "spacing", "inset", "decorative", "width", "height", "label", "labelKey", "textPosition"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisEditableTabsComponent, decorators: [{
             type: Component,
@@ -13718,5 +13919,5 @@ function provideSolaris(config) {
  * Generated bundle index. Do not edit.
  */
 
-export { SOLARIS_ACCESSIBILITY_CONFIG, SOLARIS_BUILT_IN_ICONS, SOLARIS_DIALOG_CONFIG, SOLARIS_DIALOG_DATA, SOLARIS_DIALOG_REF, SOLARIS_ICONS_CONFIG, SOLARIS_SEGMENTED_CONTROL, SOLARIS_STEPPER, SOLARIS_TABS, SOLARIS_THEME_CONFIG, SOLARIS_TOAST_CONFIG, SOLARIS_TRANSLATE_CONFIG, SolarisAccessibilityService, SolarisAccordionComponent, SolarisAlertActionsComponent, SolarisAlertComponent, SolarisAlertDescriptionDirective, SolarisAlertTitleDirective, SolarisBadgeComponent, SolarisBadgeIconDirective, SolarisBreadcrumbComponent, SolarisButtonDirective, SolarisButtonGroupComponent, SolarisButtonIconDirective, SolarisCardActionsDirective, SolarisCardComponent, SolarisCardContentDirective, SolarisCardDescriptionDirective, SolarisCardFooterDirective, SolarisCardHeaderDirective, SolarisCardMediaDirective, SolarisCardTitleDirective, SolarisCheckboxComponent, SolarisCheckboxGroupComponent, SolarisCollapsibleComponent, SolarisDialogActionsComponent, SolarisDialogComponent, SolarisDialogContainerComponent, SolarisDialogContentComponent, SolarisDialogFlowComponent, SolarisDialogHeaderComponent, SolarisDialogRef, SolarisDialogService, SolarisDialogStepComponent, SolarisDividerComponent, SolarisDividerStackComponent, SolarisDropdownMenuComponent, SolarisDropdownMenuGroupComponent, SolarisDropdownMenuItemComponent, SolarisDropdownMenuLabelComponent, SolarisDropdownMenuTriggerDirective, SolarisDropdownSubmenuComponent, SolarisDropdownSubmenuTriggerComponent, SolarisEditableTabComponent, SolarisEditableTabsComponent, SolarisEmailFieldComponent, SolarisFormErrorComponent, SolarisFormFieldComponent, SolarisFormHintComponent, SolarisFormLabelComponent, SolarisFormPrefixDirective, SolarisFormSuffixDirective, SolarisIconButtonBadgeDirective, SolarisIconButtonDirective, SolarisIconComponent, SolarisIconRegistryService, SolarisInputDirective, SolarisLoadingTextComponent, SolarisMultiSelectComponent, SolarisOptionComponent, SolarisOptionDescriptionDirective, SolarisOptionGroupComponent, SolarisOptionLabelDirective, SolarisOptionLeadingDirective, SolarisOptionMetaDirective, SolarisOptionTrailingDirective, SolarisPasswordFieldComponent, SolarisPopoverDirective, SolarisPopoverPanelComponent, SolarisPopoverTriggerDirective, SolarisProgressComponent, SolarisRadioComponent, SolarisRadioGroupComponent, SolarisSegmentedControlComponent, SolarisSegmentedItemComponent, SolarisSelectComponent, SolarisSkeletonComponent, SolarisSpinnerComponent, SolarisStepComponent, SolarisStepperActionsComponent, SolarisStepperComponent, SolarisStepperContentComponent, SolarisSwitchComponent, SolarisSwitchGroupComponent, SolarisTabComponent, SolarisTabPanelComponent, SolarisTabsComponent, SolarisTextareaDirective, SolarisThemeService, SolarisToastComponent, SolarisToastContainerComponent, SolarisToastService, SolarisTooltipDirective, SolarisTooltipPanelComponent, SolarisTranslatePipe, SolarisTranslateService, SolarisVisuallyHiddenDirective, configureSolarisTesting, nextIdFor, provideSolaris, provideSolarisAccessibilityTesting, provideSolarisTesting, provideSolarisThemeTesting, provideSolarisTranslateTesting, resolveElementId, solarisAllowedDomainsValidator, solarisBlockedDomainsValidator, solarisEmailValidator, solarisPasswordValidator };
+export { SOLARIS_ACCESSIBILITY_CONFIG, SOLARIS_BUILT_IN_ICONS, SOLARIS_DIALOG_CONFIG, SOLARIS_DIALOG_DATA, SOLARIS_DIALOG_REF, SOLARIS_ICONS_CONFIG, SOLARIS_SEGMENTED_CONTROL, SOLARIS_STEPPER, SOLARIS_TABS, SOLARIS_THEME_CONFIG, SOLARIS_TOAST_CONFIG, SOLARIS_TRANSLATE_CONFIG, SolarisAccessibilityService, SolarisAccordionComponent, SolarisAlertActionsComponent, SolarisAlertComponent, SolarisAlertDescriptionDirective, SolarisAlertTitleDirective, SolarisBadgeComponent, SolarisBadgeIconDirective, SolarisBreadcrumbComponent, SolarisButtonDirective, SolarisButtonGroupComponent, SolarisButtonIconDirective, SolarisCardActionsDirective, SolarisCardComponent, SolarisCardContentDirective, SolarisCardDescriptionDirective, SolarisCardFooterDirective, SolarisCardHeaderDirective, SolarisCardMediaDirective, SolarisCardTitleDirective, SolarisCheckboxComponent, SolarisCheckboxGroupComponent, SolarisCollapsibleComponent, SolarisDialogActionsComponent, SolarisDialogComponent, SolarisDialogContainerComponent, SolarisDialogContentComponent, SolarisDialogFlowComponent, SolarisDialogHeaderComponent, SolarisDialogRef, SolarisDialogService, SolarisDialogStepComponent, SolarisDividerComponent, SolarisDividerStackComponent, SolarisDropdownMenuComponent, SolarisDropdownMenuGroupComponent, SolarisDropdownMenuItemComponent, SolarisDropdownMenuLabelComponent, SolarisDropdownMenuTriggerDirective, SolarisDropdownSubmenuComponent, SolarisDropdownSubmenuTriggerComponent, SolarisEditableTabComponent, SolarisEditableTabsComponent, SolarisEmailFieldComponent, SolarisFormErrorComponent, SolarisFormFieldComponent, SolarisFormHintComponent, SolarisFormLabelActionDirective, SolarisFormLabelComponent, SolarisFormPrefixDirective, SolarisFormSuffixDirective, SolarisIconButtonBadgeDirective, SolarisIconButtonDirective, SolarisIconComponent, SolarisIconRegistryService, SolarisInputDirective, SolarisLoadingTextComponent, SolarisMultiSelectComponent, SolarisOptionComponent, SolarisOptionDescriptionDirective, SolarisOptionGroupComponent, SolarisOptionLabelDirective, SolarisOptionLeadingDirective, SolarisOptionMetaDirective, SolarisOptionTrailingDirective, SolarisPasswordFieldComponent, SolarisPopoverDirective, SolarisPopoverPanelComponent, SolarisPopoverTriggerDirective, SolarisProgressComponent, SolarisRadioComponent, SolarisRadioGroupComponent, SolarisSegmentedControlComponent, SolarisSegmentedItemComponent, SolarisSelectComponent, SolarisSkeletonComponent, SolarisSpinnerComponent, SolarisStepComponent, SolarisStepperActionsComponent, SolarisStepperComponent, SolarisStepperContentComponent, SolarisSwitchComponent, SolarisSwitchGroupComponent, SolarisTabComponent, SolarisTabPanelComponent, SolarisTabsComponent, SolarisTextareaDirective, SolarisThemeService, SolarisToastComponent, SolarisToastContainerComponent, SolarisToastService, SolarisTooltipDirective, SolarisTooltipPanelComponent, SolarisTranslatePipe, SolarisTranslateService, SolarisVisuallyHiddenDirective, configureSolarisTesting, nextIdFor, provideSolaris, provideSolarisAccessibilityTesting, provideSolarisTesting, provideSolarisThemeTesting, provideSolarisTranslateTesting, resolveElementId, solarisAllowedDomainsValidator, solarisBlockedDomainsValidator, solarisEmailValidator, solarisPasswordValidator };
 //# sourceMappingURL=educarehq-solaris-ui.mjs.map