@educarehq/solaris-ui 0.20.0 → 0.22.0

package/fesm2022/educarehq-solaris-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, PLATFORM_ID, Injectable, Pipe, Directive, signal, DestroyRef, DOCUMENT, input, computed, ChangeDetectionStrategy, Component, output, ElementRef, EnvironmentInjector, effect, createComponent, HostListener, model, TemplateRef, ViewContainerRef, contentChild, forwardRef, ViewChild, ViewEncapsulation, contentChildren, NgZone, Injector, viewChild, isDevMode, ChangeDetectorRef, booleanAttribute, numberAttribute, afterNextRender, viewChildren, ApplicationRef } from '@angular/core';
+import { InjectionToken, inject, PLATFORM_ID, Injectable, Pipe, Directive, signal, DestroyRef, DOCUMENT, input, computed, ChangeDetectionStrategy, Component, booleanAttribute, output, ElementRef, EnvironmentInjector, effect, createComponent, HostListener, model, TemplateRef, ViewContainerRef, contentChild, forwardRef, ViewChild, ViewEncapsulation, contentChildren, NgZone, Injector, viewChild, isDevMode, ChangeDetectorRef, numberAttribute, afterNextRender, viewChildren, ApplicationRef } from '@angular/core';
 import { isPlatformBrowser, DOCUMENT as DOCUMENT$1, NgTemplateOutlet } from '@angular/common';
 import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
 import { TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
@@ -495,6 +495,219 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 
 const SOLARIS_ICONS_CONFIG = new InjectionToken('SOLARIS_ICONS_CONFIG');
 
+const COMMUNICATION_ICONS = [
+    {
+        name: 'mail',
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        stroke: 'currentColor',
+        strokeWidth: 2,
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        elements: [
+            { type: 'path', d: 'm22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7' },
+            { type: 'rect', x: 2, y: 4, width: 20, height: 16, rx: 2 },
+        ],
+    },
+    {
+        name: 'mail-open',
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        stroke: 'currentColor',
+        strokeWidth: 2,
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        elements: [
+            {
+                type: 'path',
+                d: 'M21.2 8.4c.5.38.8.97.8 1.6v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V10a2 2 0 0 1 .8-1.6l8-6a2 2 0 0 1 2.4 0l8 6Z',
+            },
+            { type: 'path', d: 'm22 10-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 10' },
+        ],
+    },
+    {
+        name: 'mail-plus',
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        stroke: 'currentColor',
+        strokeWidth: 2,
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        elements: [
+            {
+                type: 'path',
+                d: 'M22 13V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h8',
+            },
+            { type: 'path', d: 'm22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7' },
+            { type: 'path', d: 'M19 16v6' },
+            { type: 'path', d: 'M16 19h6' },
+        ],
+    },
+    {
+        name: 'message-circle',
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        stroke: 'currentColor',
+        strokeWidth: 2,
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        elements: [
+            {
+                type: 'path',
+                d: 'M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719',
+            },
+        ],
+    },
+    {
+        name: 'message-circle-2',
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        stroke: 'currentColor',
+        strokeWidth: 2,
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        elements: [
+            {
+                type: 'path',
+                d: 'M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719',
+            },
+            { type: 'path', d: 'M8 12h.01' },
+            { type: 'path', d: 'M12 12h.01' },
+            { type: 'path', d: 'M16 12h.01' },
+        ],
+    },
+    {
+        name: 'message-circle-off',
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        stroke: 'currentColor',
+        strokeWidth: 2,
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        elements: [
+            { type: 'path', d: 'm2 2 20 20' },
+            {
+                type: 'path',
+                d: 'M4.93 4.929a10 10 0 0 0-1.938 11.412 2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 0 0 11.302-1.989',
+            },
+            { type: 'path', d: 'M8.35 2.69A10 10 0 0 1 21.3 15.65' },
+        ],
+    },
+    {
+        name: 'message-circle-question-mark',
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        stroke: 'currentColor',
+        strokeWidth: 2,
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        elements: [
+            {
+                type: 'path',
+                d: 'M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719',
+            },
+            { type: 'path', d: 'M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3' },
+            { type: 'path', d: 'M12 17h.01' },
+        ],
+    },
+    {
+        name: 'message-square',
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        stroke: 'currentColor',
+        strokeWidth: 2,
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        elements: [
+            {
+                type: 'path',
+                d: 'M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z',
+            },
+        ],
+    },
+    {
+        name: 'message-square-2',
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        stroke: 'currentColor',
+        strokeWidth: 2,
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        elements: [
+            {
+                type: 'path',
+                d: 'M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z',
+            },
+            { type: 'path', d: 'M12 11h.01' },
+            { type: 'path', d: 'M16 11h.01' },
+            { type: 'path', d: 'M8 11h.01' },
+        ],
+    },
+    {
+        name: 'message-square-off',
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        stroke: 'currentColor',
+        strokeWidth: 2,
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        elements: [
+            {
+                type: 'path',
+                d: 'M19 19H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.7.7 0 0 1 2 21.286V5a2 2 0 0 1 1.184-1.826',
+            },
+            { type: 'path', d: 'm2 2 20 20' },
+            { type: 'path', d: 'M8.656 3H20a2 2 0 0 1 2 2v11.344' },
+        ],
+    },
+    {
+        name: 'inbox',
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        stroke: 'currentColor',
+        strokeWidth: 2,
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        elements: [
+            { type: 'polyline', points: '22 12 16 12 14 15 10 15 8 12 2 12' },
+            {
+                type: 'path',
+                d: 'M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z',
+            },
+        ],
+    },
+    {
+        name: 'send',
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        stroke: 'currentColor',
+        strokeWidth: 2,
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        elements: [
+            {
+                type: 'path',
+                d: 'M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z',
+            },
+            { type: 'path', d: 'm21.854 2.147-10.94 10.939' },
+        ],
+    },
+    {
+        name: 'rss',
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        stroke: 'currentColor',
+        strokeWidth: 2,
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        elements: [
+            { type: 'path', d: 'M4 11a9 9 0 0 1 9 9' },
+            { type: 'path', d: 'M4 4a16 16 0 0 1 16 16' },
+            { type: 'circle', cx: 5, cy: 19, r: 1 },
+        ],
+    },
+];
+
 const NAVIGATION_ICONS = [
     {
         name: 'archives',
@@ -1715,31 +1928,8 @@ const LAYOUT_ICONS = [
             { type: 'path', d: 'M15 3v18' },
         ],
     },
-];
-
-const THEME_ICONS = [
-    {
-        name: 'sun',
-        viewBox: '0 0 24 24',
-        fill: 'none',
-        stroke: 'currentColor',
-        strokeWidth: 2,
-        strokeLinecap: 'round',
-        strokeLinejoin: 'round',
-        elements: [
-            { type: 'circle', cx: 12, cy: 12, r: 4 },
-            { type: 'path', d: 'M12 2v2' },
-            { type: 'path', d: 'M12 20v2' },
-            { type: 'path', d: 'M5 5l1.5 1.5' },
-            { type: 'path', d: 'M17.5 17.5L19 19' },
-            { type: 'path', d: 'M2 12h2' },
-            { type: 'path', d: 'M20 12h2' },
-            { type: 'path', d: 'M5 19l1.5-1.5' },
-            { type: 'path', d: 'M17.5 6.5L19 5' },
-        ],
-    },
     {
-        name: 'moon',
+        name: 'list-ordered',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -1747,85 +1937,121 @@ const THEME_ICONS = [
         strokeLinecap: 'round',
         strokeLinejoin: 'round',
         elements: [
-            { type: 'path', d: 'M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z' },
+            { type: 'path', d: 'M11 5h10' },
+            { type: 'path', d: 'M11 12h10' },
+            { type: 'path', d: 'M11 19h10' },
+            { type: 'path', d: 'M4 4h1v5' },
+            { type: 'path', d: 'M4 9h2' },
+            {
+                type: 'path',
+                d: 'M6.5 20H3.4c0-1 2.6-1.925 2.6-3.5a1.5 1.5 0 0 0-2.6-1.02',
+            },
         ],
     },
+];
+
+const BRAND_ICONS = [
     {
-        name: 'monitor',
-        viewBox: '0 0 24 24',
+        name: 'google',
+        viewBox: '0 0 16 16',
         fill: 'none',
-        stroke: 'currentColor',
-        strokeWidth: 2,
-        strokeLinecap: 'round',
-        strokeLinejoin: 'round',
         elements: [
-            { type: 'path', d: 'M2 3h20v14H2z' },
-            { type: 'path', d: 'M8 21h8' },
-            { type: 'path', d: 'M12 17v4' },
-        ],
+            {
+                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',
+            },
+        ],
     },
-];
-
-const DATA_ICONS = [
     {
-        name: 'building',
-        viewBox: '0 0 24 24',
+        name: 'microsoft',
+        viewBox: '0 0 16 16',
         fill: 'none',
-        stroke: 'currentColor',
-        strokeWidth: 2,
-        strokeLinecap: 'round',
-        strokeLinejoin: 'round',
         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: 'path',
-                d: 'M6 2h12a2 2 0 012 2v16a2 2 0 01-2 2H6a2 2 0 01-2-2V4a2 2 0 012-2z',
+                type: 'rect',
+                x: 8.5,
+                y: 8.5,
+                width: 6.5,
+                height: 6.5,
+                fill: '#FFBA08',
             },
-            { type: 'path', d: 'M9 22v-4h6v4' },
-            { type: 'path', d: 'M8 6h.01' },
-            { type: 'path', d: 'M16 6h.01' },
-            { type: 'path', d: 'M12 6h.01' },
-            { type: 'path', d: 'M12 10h.01' },
-            { type: 'path', d: 'M12 14h.01' },
-            { type: 'path', d: 'M16 10h.01' },
-            { type: 'path', d: 'M16 14h.01' },
-            { type: 'path', d: 'M8 10h.01' },
-            { type: 'path', d: 'M8 14h.01' },
         ],
     },
     {
-        name: 'eye',
+        name: 'apple',
         viewBox: '0 0 24 24',
+        fill: 'none',
         elements: [
-            { type: 'path', d: 'M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z' },
-            { type: 'circle', cx: 12, cy: 12, r: 3 },
+            {
+                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: 'eye-off',
-        viewBox: '0 0 24 24',
+        name: 'android',
+        viewBox: '0 0 413.137 413.137',
+        fill: 'none',
         elements: [
             {
                 type: 'path',
-                d: 'M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24',
+                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',
             },
-            { type: 'line', x1: 1, y1: 1, x2: 23, y2: 23 },
         ],
     },
     {
-        name: 'globe',
+        name: 'github',
         viewBox: '0 0 24 24',
+        fill: 'none',
         elements: [
-            { type: 'path', d: 'M15 21v-4a2 2 0 012-2h4' },
             {
                 type: 'path',
-                d: 'M7 4v2a3 3 0 003 2h0a2 2 0 012 2 2 2 0 004 0 2 2 0 012-2h3',
+                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',
             },
-            { type: 'path', d: 'M3 11h2a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v4' },
-            { type: 'circle', cx: 12, cy: 12, r: 10 },
         ],
     },
+];
+
+const THEME_ICONS = [
     {
-        name: 'graduation-cap',
+        name: 'sun',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -1833,12 +2059,19 @@ const DATA_ICONS = [
         strokeLinecap: 'round',
         strokeLinejoin: 'round',
         elements: [
-            { type: 'path', d: 'M22 10v6M2 10l10-5 10 5-10 5z' },
-            { type: 'path', d: 'M6 12v5c3 3 9 3 12 0v-5' },
+            { type: 'circle', cx: 12, cy: 12, r: 4 },
+            { type: 'path', d: 'M12 2v2' },
+            { type: 'path', d: 'M12 20v2' },
+            { type: 'path', d: 'M5 5l1.5 1.5' },
+            { type: 'path', d: 'M17.5 17.5L19 19' },
+            { type: 'path', d: 'M2 12h2' },
+            { type: 'path', d: 'M20 12h2' },
+            { type: 'path', d: 'M5 19l1.5-1.5' },
+            { type: 'path', d: 'M17.5 6.5L19 5' },
         ],
     },
     {
-        name: 'map-pin',
+        name: 'moon',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -1846,12 +2079,11 @@ const DATA_ICONS = [
         strokeLinecap: 'round',
         strokeLinejoin: 'round',
         elements: [
-            { type: 'path', d: 'M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z' },
-            { type: 'circle', cx: 12, cy: 10, r: 3 },
+            { type: 'path', d: 'M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z' },
         ],
     },
     {
-        name: 'user',
+        name: 'monitor',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -1859,12 +2091,16 @@ const DATA_ICONS = [
         strokeLinecap: 'round',
         strokeLinejoin: 'round',
         elements: [
-            { type: 'path', d: 'M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2' },
-            { type: 'circle', cx: 12, cy: 7, r: 4 },
+            { type: 'path', d: 'M2 3h20v14H2z' },
+            { type: 'path', d: 'M8 21h8' },
+            { type: 'path', d: 'M12 17v4' },
         ],
     },
+];
+
+const MEDIA_ICONS = [
     {
-        name: 'users',
+        name: 'image',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -1872,14 +2108,16 @@ const DATA_ICONS = [
         strokeLinecap: 'round',
         strokeLinejoin: 'round',
         elements: [
-            { type: 'path', d: 'M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2' },
-            { type: 'circle', cx: 9, cy: 7, r: 4 },
-            { type: 'path', d: 'M23 21v-2a4 4 0 00-3-3.87' },
-            { type: 'path', d: 'M16 3.13a4 4 0 010 7.75' },
+            { type: 'rect', x: 3, y: 3, width: 18, height: 18, rx: 2, ry: 2 },
+            { type: 'circle', cx: 9, cy: 9, r: 2 },
+            {
+                type: 'path',
+                d: 'm21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21',
+            },
         ],
     },
     {
-        name: 'storage',
+        name: 'video',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -1887,13 +2125,15 @@ const DATA_ICONS = [
         strokeLinecap: 'round',
         strokeLinejoin: 'round',
         elements: [
-            { type: 'path', d: 'M3 5a9 3 0 1 0 18 0a9 3 0 1 0-18 0' },
-            { type: 'path', d: 'M3 5v14a9 3 0 0 0 18 0V5' },
-            { type: 'path', d: 'M3 12a9 3 0 0 0 18 0' },
+            {
+                type: 'path',
+                d: 'm16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5',
+            },
+            { type: 'rect', x: 2, y: 6, width: 14, height: 12, rx: 2 },
         ],
     },
     {
-        name: 'calendar',
+        name: 'mic',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -1901,20 +2141,13 @@ const DATA_ICONS = [
         strokeLinecap: 'round',
         strokeLinejoin: 'round',
         elements: [
-            { type: 'path', d: 'M8 2v3' },
-            { type: 'path', d: 'M16 2v3' },
-            { type: 'rect', x: 3, y: 3, width: 18, height: 18, rx: 2 },
-            { type: 'path', d: 'M3 9h18' },
-            { type: 'path', d: 'M8 13h.01' },
-            { type: 'path', d: 'M12 13h.01' },
-            { type: 'path', d: 'M16 13h.01' },
-            { type: 'path', d: 'M8 17h.01' },
-            { type: 'path', d: 'M12 17h.01' },
-            { type: 'path', d: 'M16 17h.01' },
+            { type: 'path', d: 'M12 19v3' },
+            { type: 'path', d: 'M19 10v2a7 7 0 0 1-14 0v-2' },
+            { type: 'rect', x: 9, y: 2, width: 6, height: 13, rx: 3 },
         ],
     },
     {
-        name: 'calendar-sync',
+        name: 'leaf',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -1922,21 +2155,15 @@ const DATA_ICONS = [
         strokeLinecap: 'round',
         strokeLinejoin: 'round',
         elements: [
-            { type: 'path', d: 'M11 10v4h4' },
-            { type: 'path', d: 'm11 14 1.535-1.605a5 5 0 0 1 8 1.5' },
-            { type: 'path', d: 'M16 2v3' },
-            { type: 'path', d: 'm21 18-1.535 1.605a5 5 0 0 1-8-1.5' },
-            { type: 'path', d: 'M21 22v-4h-4' },
             {
                 type: 'path',
-                d: 'M21 8.517V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3.517',
+                d: 'M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z',
             },
-            { type: 'path', d: 'M3 9h4' },
-            { type: 'path', d: 'M8 2v3' },
+            { type: 'path', d: 'M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12' },
         ],
     },
     {
-        name: 'book',
+        name: 'eject',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -1946,12 +2173,13 @@ const DATA_ICONS = [
         elements: [
             {
                 type: 'path',
-                d: 'M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20',
+                d: 'M4 13a1 1 0 0 1-.72-1.695l7.257-7.668a2 2 0 0 1 2.926 0l7.256 7.668A1 1 0 0 1 20 13z',
             },
+            { type: 'rect', x: 3, y: 17, width: 18, height: 4, rx: 1 },
         ],
     },
     {
-        name: 'server',
+        name: 'headphones',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -1959,14 +2187,14 @@ const DATA_ICONS = [
         strokeLinecap: 'round',
         strokeLinejoin: 'round',
         elements: [
-            { type: 'rect', x: 2, y: 2, width: 20, height: 8, rx: 2, ry: 2 },
-            { type: 'rect', x: 2, y: 14, width: 20, height: 8, rx: 2, ry: 2 },
-            { type: 'line', x1: 6, x2: 6.01, y1: 6, y2: 6 },
-            { type: 'line', x1: 6, x2: 6.01, y1: 18, y2: 18 },
+            {
+                type: 'path',
+                d: 'M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3',
+            },
         ],
     },
     {
-        name: 'package',
+        name: 'headphones-off',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -1974,17 +2202,24 @@ const DATA_ICONS = [
         strokeLinecap: 'round',
         strokeLinejoin: 'round',
         elements: [
+            { type: 'path', d: 'M21 14h-1.343' },
+            { type: 'path', d: 'M9.128 3.47A9 9 0 0 1 21 12v3.343' },
+            { type: 'path', d: 'm2 2 20 20' },
             {
                 type: 'path',
-                d: 'M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z',
+                d: 'M20.414 20.414A2 2 0 0 1 19 21h-1a2 2 0 0 1-2-2v-3',
+            },
+            {
+                type: 'path',
+                d: 'M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 2.636-6.364',
             },
-            { type: 'path', d: 'M12 22V12' },
-            { type: 'polyline', points: '3.29 7 12 12 20.71 7' },
-            { type: 'path', d: 'm7.5 4.27 9 5.15' },
         ],
     },
+];
+
+const DATA_ICONS = [
     {
-        name: 'squared-text',
+        name: 'building',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -1992,78 +2227,56 @@ const DATA_ICONS = [
         strokeLinecap: 'round',
         strokeLinejoin: 'round',
         elements: [
-            { type: 'rect', x: 3, y: 3, width: 18, height: 18, rx: 2 },
-            { type: 'path', d: 'M7 8h8' },
-            { type: 'path', d: 'M7 12h10' },
-            { type: 'path', d: 'M7 16h6' },
+            {
+                type: 'path',
+                d: 'M6 2h12a2 2 0 012 2v16a2 2 0 01-2 2H6a2 2 0 01-2-2V4a2 2 0 012-2z',
+            },
+            { type: 'path', d: 'M9 22v-4h6v4' },
+            { type: 'path', d: 'M8 6h.01' },
+            { type: 'path', d: 'M16 6h.01' },
+            { type: 'path', d: 'M12 6h.01' },
+            { type: 'path', d: 'M12 10h.01' },
+            { type: 'path', d: 'M12 14h.01' },
+            { type: 'path', d: 'M16 10h.01' },
+            { type: 'path', d: 'M16 14h.01' },
+            { type: 'path', d: 'M8 10h.01' },
+            { type: 'path', d: 'M8 14h.01' },
         ],
     },
     {
-        name: 'notepad',
+        name: 'eye',
         viewBox: '0 0 24 24',
-        fill: 'none',
-        stroke: 'currentColor',
-        strokeWidth: 2,
-        strokeLinecap: 'round',
-        strokeLinejoin: 'round',
         elements: [
-            { type: 'path', d: 'M8 2v4' },
-            { type: 'path', d: 'M12 2v4' },
-            { type: 'path', d: 'M16 2v4' },
-            { type: 'rect', x: 4, y: 4, width: 16, height: 18, rx: 2 },
-            { type: 'path', d: 'M8 10h6' },
-            { type: 'path', d: 'M8 14h8' },
-            { type: 'path', d: 'M8 18h5' },
+            { type: 'path', d: 'M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z' },
+            { type: 'circle', cx: 12, cy: 12, r: 3 },
         ],
     },
     {
-        name: 'podium',
+        name: 'eye-off',
         viewBox: '0 0 24 24',
-        fill: 'none',
-        stroke: 'currentColor',
-        strokeWidth: 2,
-        strokeLinecap: 'round',
-        strokeLinejoin: 'round',
         elements: [
-            { type: 'path', d: 'M12 6V2h-1' },
             {
                 type: 'path',
-                d: 'M9 15a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1',
+                d: 'M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24',
             },
-            { type: 'path', d: 'M9 21V11a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v10' },
-        ],
-    },
-    {
-        name: 'timer',
-        viewBox: '0 0 24 24',
-        fill: 'none',
-        stroke: 'currentColor',
-        strokeWidth: 2,
-        strokeLinecap: 'round',
-        strokeLinejoin: 'round',
-        elements: [
-            { type: 'line', x1: 10, x2: 14, y1: 2, y2: 2 },
-            { type: 'line', x1: 12, x2: 15, y1: 14, y2: 11 },
-            { type: 'circle', cx: 12, cy: 14, r: 8 },
+            { type: 'line', x1: 1, y1: 1, x2: 23, y2: 23 },
         ],
     },
     {
-        name: 'clock-arrow-right',
+        name: 'globe',
         viewBox: '0 0 24 24',
-        fill: 'none',
-        stroke: 'currentColor',
-        strokeWidth: 2,
-        strokeLinecap: 'round',
-        strokeLinejoin: 'round',
         elements: [
-            { type: 'path', d: 'M12 6v6l2 1' },
-            { type: 'path', d: 'M13.5 21.885A10 10 0 1 1 22 12' },
-            { type: 'path', d: 'M14 18h8' },
-            { type: 'path', d: 'm18 22 4-4-4-4' },
+            { type: 'path', d: 'M15 21v-4a2 2 0 012-2h4' },
+            {
+                type: 'path',
+                d: 'M7 4v2a3 3 0 003 2h0a2 2 0 012 2 2 2 0 004 0 2 2 0 012-2h3',
+            },
+            { type: 'path', d: 'M3 11h2a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v4' },
+            { type: 'circle', cx: 12, cy: 12, r: 10 },
         ],
     },
     {
-        name: 'truck',
+        name: 'graduation-cap',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -2071,21 +2284,12 @@ const DATA_ICONS = [
         strokeLinecap: 'round',
         strokeLinejoin: 'round',
         elements: [
-            {
-                type: 'path',
-                d: 'M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2',
-            },
-            { type: 'path', d: 'M15 18H9' },
-            {
-                type: 'path',
-                d: 'M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14',
-            },
-            { type: 'circle', cx: 17, cy: 18, r: 2 },
-            { type: 'circle', cx: 7, cy: 18, r: 2 },
+            { type: 'path', d: 'M22 10v6M2 10l10-5 10 5-10 5z' },
+            { type: 'path', d: 'M6 12v5c3 3 9 3 12 0v-5' },
         ],
     },
     {
-        name: 'handshake',
+        name: 'map-pin',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -2093,18 +2297,12 @@ const DATA_ICONS = [
         strokeLinecap: 'round',
         strokeLinejoin: 'round',
         elements: [
-            { type: 'path', d: 'm11 17 2 2a1 1 0 1 0 3-3' },
-            {
-                type: 'path',
-                d: 'm14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4',
-            },
-            { type: 'path', d: 'm21 3 1 11h-2' },
-            { type: 'path', d: 'M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3' },
-            { type: 'path', d: 'M3 4h8' },
+            { type: 'path', d: 'M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z' },
+            { type: 'circle', cx: 12, cy: 10, r: 3 },
         ],
     },
     {
-        name: 'route',
+        name: 'user',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -2112,19 +2310,12 @@ const DATA_ICONS = [
         strokeLinecap: 'round',
         strokeLinejoin: 'round',
         elements: [
-            { type: 'circle', cx: 6, cy: 19, r: 3 },
-            {
-                type: 'path',
-                d: 'M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15',
-            },
-            { type: 'circle', cx: 18, cy: 5, r: 3 },
+            { type: 'path', d: 'M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2' },
+            { type: 'circle', cx: 12, cy: 7, r: 4 },
         ],
     },
-];
-
-const COMMUNICATION_ICONS = [
     {
-        name: 'mail',
+        name: 'users',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -2132,12 +2323,14 @@ const COMMUNICATION_ICONS = [
         strokeLinecap: 'round',
         strokeLinejoin: 'round',
         elements: [
-            { type: 'path', d: 'm22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7' },
-            { type: 'rect', x: 2, y: 4, width: 20, height: 16, rx: 2 },
+            { type: 'path', d: 'M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2' },
+            { type: 'circle', cx: 9, cy: 7, r: 4 },
+            { type: 'path', d: 'M23 21v-2a4 4 0 00-3-3.87' },
+            { type: 'path', d: 'M16 3.13a4 4 0 010 7.75' },
         ],
     },
     {
-        name: 'mail-open',
+        name: 'storage',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -2145,15 +2338,13 @@ const COMMUNICATION_ICONS = [
         strokeLinecap: 'round',
         strokeLinejoin: 'round',
         elements: [
-            {
-                type: 'path',
-                d: 'M21.2 8.4c.5.38.8.97.8 1.6v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V10a2 2 0 0 1 .8-1.6l8-6a2 2 0 0 1 2.4 0l8 6Z',
-            },
-            { type: 'path', d: 'm22 10-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 10' },
+            { type: 'path', d: 'M3 5a9 3 0 1 0 18 0a9 3 0 1 0-18 0' },
+            { type: 'path', d: 'M3 5v14a9 3 0 0 0 18 0V5' },
+            { type: 'path', d: 'M3 12a9 3 0 0 0 18 0' },
         ],
     },
     {
-        name: 'mail-plus',
+        name: 'calendar',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -2161,17 +2352,20 @@ const COMMUNICATION_ICONS = [
         strokeLinecap: 'round',
         strokeLinejoin: 'round',
         elements: [
-            {
-                type: 'path',
-                d: 'M22 13V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h8',
-            },
-            { type: 'path', d: 'm22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7' },
-            { type: 'path', d: 'M19 16v6' },
-            { type: 'path', d: 'M16 19h6' },
+            { type: 'path', d: 'M8 2v3' },
+            { type: 'path', d: 'M16 2v3' },
+            { type: 'rect', x: 3, y: 3, width: 18, height: 18, rx: 2 },
+            { type: 'path', d: 'M3 9h18' },
+            { type: 'path', d: 'M8 13h.01' },
+            { type: 'path', d: 'M12 13h.01' },
+            { type: 'path', d: 'M16 13h.01' },
+            { type: 'path', d: 'M8 17h.01' },
+            { type: 'path', d: 'M12 17h.01' },
+            { type: 'path', d: 'M16 17h.01' },
         ],
     },
     {
-        name: 'message-circle',
+        name: 'calendar-sync',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -2179,14 +2373,21 @@ const COMMUNICATION_ICONS = [
         strokeLinecap: 'round',
         strokeLinejoin: 'round',
         elements: [
+            { type: 'path', d: 'M11 10v4h4' },
+            { type: 'path', d: 'm11 14 1.535-1.605a5 5 0 0 1 8 1.5' },
+            { type: 'path', d: 'M16 2v3' },
+            { type: 'path', d: 'm21 18-1.535 1.605a5 5 0 0 1-8-1.5' },
+            { type: 'path', d: 'M21 22v-4h-4' },
             {
                 type: 'path',
-                d: 'M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719',
+                d: 'M21 8.517V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3.517',
             },
+            { type: 'path', d: 'M3 9h4' },
+            { type: 'path', d: 'M8 2v3' },
         ],
     },
     {
-        name: 'message-circle-2',
+        name: 'book',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -2196,15 +2397,12 @@ const COMMUNICATION_ICONS = [
         elements: [
             {
                 type: 'path',
-                d: 'M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719',
+                d: 'M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20',
             },
-            { type: 'path', d: 'M8 12h.01' },
-            { type: 'path', d: 'M12 12h.01' },
-            { type: 'path', d: 'M16 12h.01' },
         ],
     },
     {
-        name: 'message-circle-off',
+        name: 'server',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -2212,16 +2410,14 @@ const COMMUNICATION_ICONS = [
         strokeLinecap: 'round',
         strokeLinejoin: 'round',
         elements: [
-            { type: 'path', d: 'm2 2 20 20' },
-            {
-                type: 'path',
-                d: 'M4.93 4.929a10 10 0 0 0-1.938 11.412 2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 0 0 11.302-1.989',
-            },
-            { type: 'path', d: 'M8.35 2.69A10 10 0 0 1 21.3 15.65' },
+            { type: 'rect', x: 2, y: 2, width: 20, height: 8, rx: 2, ry: 2 },
+            { type: 'rect', x: 2, y: 14, width: 20, height: 8, rx: 2, ry: 2 },
+            { type: 'line', x1: 6, x2: 6.01, y1: 6, y2: 6 },
+            { type: 'line', x1: 6, x2: 6.01, y1: 18, y2: 18 },
         ],
     },
     {
-        name: 'message-circle-question-mark',
+        name: 'package',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -2231,14 +2427,15 @@ const COMMUNICATION_ICONS = [
         elements: [
             {
                 type: 'path',
-                d: 'M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719',
+                d: 'M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z',
             },
-            { type: 'path', d: 'M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3' },
-            { type: 'path', d: 'M12 17h.01' },
+            { type: 'path', d: 'M12 22V12' },
+            { type: 'polyline', points: '3.29 7 12 12 20.71 7' },
+            { type: 'path', d: 'm7.5 4.27 9 5.15' },
         ],
     },
     {
-        name: 'message-square',
+        name: 'squared-text',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -2246,14 +2443,14 @@ const COMMUNICATION_ICONS = [
         strokeLinecap: 'round',
         strokeLinejoin: 'round',
         elements: [
-            {
-                type: 'path',
-                d: 'M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z',
-            },
+            { type: 'rect', x: 3, y: 3, width: 18, height: 18, rx: 2 },
+            { type: 'path', d: 'M7 8h8' },
+            { type: 'path', d: 'M7 12h10' },
+            { type: 'path', d: 'M7 16h6' },
         ],
     },
     {
-        name: 'message-square-2',
+        name: 'notepad',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -2261,17 +2458,17 @@ const COMMUNICATION_ICONS = [
         strokeLinecap: 'round',
         strokeLinejoin: 'round',
         elements: [
-            {
-                type: 'path',
-                d: 'M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z',
-            },
-            { type: 'path', d: 'M12 11h.01' },
-            { type: 'path', d: 'M16 11h.01' },
-            { type: 'path', d: 'M8 11h.01' },
+            { type: 'path', d: 'M8 2v4' },
+            { type: 'path', d: 'M12 2v4' },
+            { type: 'path', d: 'M16 2v4' },
+            { type: 'rect', x: 4, y: 4, width: 16, height: 18, rx: 2 },
+            { type: 'path', d: 'M8 10h6' },
+            { type: 'path', d: 'M8 14h8' },
+            { type: 'path', d: 'M8 18h5' },
         ],
     },
     {
-        name: 'message-square-off',
+        name: 'podium',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -2279,16 +2476,16 @@ const COMMUNICATION_ICONS = [
         strokeLinecap: 'round',
         strokeLinejoin: 'round',
         elements: [
+            { type: 'path', d: 'M12 6V2h-1' },
             {
                 type: 'path',
-                d: 'M19 19H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.7.7 0 0 1 2 21.286V5a2 2 0 0 1 1.184-1.826',
+                d: 'M9 15a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1',
             },
-            { type: 'path', d: 'm2 2 20 20' },
-            { type: 'path', d: 'M8.656 3H20a2 2 0 0 1 2 2v11.344' },
+            { type: 'path', d: 'M9 21V11a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v10' },
         ],
     },
     {
-        name: 'inbox',
+        name: 'timer',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -2296,15 +2493,13 @@ const COMMUNICATION_ICONS = [
         strokeLinecap: 'round',
         strokeLinejoin: 'round',
         elements: [
-            { type: 'polyline', points: '22 12 16 12 14 15 10 15 8 12 2 12' },
-            {
-                type: 'path',
-                d: 'M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z',
-            },
+            { type: 'line', x1: 10, x2: 14, y1: 2, y2: 2 },
+            { type: 'line', x1: 12, x2: 15, y1: 14, y2: 11 },
+            { type: 'circle', cx: 12, cy: 14, r: 8 },
         ],
     },
     {
-        name: 'send',
+        name: 'clock-arrow-right',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -2312,15 +2507,14 @@ const COMMUNICATION_ICONS = [
         strokeLinecap: 'round',
         strokeLinejoin: 'round',
         elements: [
-            {
-                type: 'path',
-                d: 'M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z',
-            },
-            { type: 'path', d: 'm21.854 2.147-10.94 10.939' },
+            { type: 'path', d: 'M12 6v6l2 1' },
+            { type: 'path', d: 'M13.5 21.885A10 10 0 1 1 22 12' },
+            { type: 'path', d: 'M14 18h8' },
+            { type: 'path', d: 'm18 22 4-4-4-4' },
         ],
     },
     {
-        name: 'rss',
+        name: 'truck',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -2328,16 +2522,21 @@ const COMMUNICATION_ICONS = [
         strokeLinecap: 'round',
         strokeLinejoin: 'round',
         elements: [
-            { type: 'path', d: 'M4 11a9 9 0 0 1 9 9' },
-            { type: 'path', d: 'M4 4a16 16 0 0 1 16 16' },
-            { type: 'circle', cx: 5, cy: 19, r: 1 },
+            {
+                type: 'path',
+                d: 'M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2',
+            },
+            { type: 'path', d: 'M15 18H9' },
+            {
+                type: 'path',
+                d: 'M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14',
+            },
+            { type: 'circle', cx: 17, cy: 18, r: 2 },
+            { type: 'circle', cx: 7, cy: 18, r: 2 },
         ],
     },
-];
-
-const MEDIA_ICONS = [
     {
-        name: 'image',
+        name: 'handshake',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -2345,16 +2544,18 @@ const MEDIA_ICONS = [
         strokeLinecap: 'round',
         strokeLinejoin: 'round',
         elements: [
-            { type: 'rect', x: 3, y: 3, width: 18, height: 18, rx: 2, ry: 2 },
-            { type: 'circle', cx: 9, cy: 9, r: 2 },
+            { type: 'path', d: 'm11 17 2 2a1 1 0 1 0 3-3' },
             {
                 type: 'path',
-                d: 'm21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21',
+                d: 'm14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4',
             },
+            { type: 'path', d: 'm21 3 1 11h-2' },
+            { type: 'path', d: 'M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3' },
+            { type: 'path', d: 'M3 4h8' },
         ],
     },
     {
-        name: 'video',
+        name: 'route',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -2362,15 +2563,16 @@ const MEDIA_ICONS = [
         strokeLinecap: 'round',
         strokeLinejoin: 'round',
         elements: [
+            { type: 'circle', cx: 6, cy: 19, r: 3 },
             {
                 type: 'path',
-                d: 'm16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5',
+                d: 'M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15',
             },
-            { type: 'rect', x: 2, y: 6, width: 14, height: 12, rx: 2 },
+            { type: 'circle', cx: 18, cy: 5, r: 3 },
         ],
     },
     {
-        name: 'mic',
+        name: 'id-card',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -2378,13 +2580,15 @@ const MEDIA_ICONS = [
         strokeLinecap: 'round',
         strokeLinejoin: 'round',
         elements: [
-            { type: 'path', d: 'M12 19v3' },
-            { type: 'path', d: 'M19 10v2a7 7 0 0 1-14 0v-2' },
-            { type: 'rect', x: 9, y: 2, width: 6, height: 13, rx: 3 },
+            { type: 'path', d: 'M16 10h2' },
+            { type: 'path', d: 'M16 14h2' },
+            { type: 'path', d: 'M6.17 15a3 3 0 0 1 5.66 0' },
+            { type: 'circle', cx: 9, cy: 11, r: 2 },
+            { type: 'rect', x: 2, y: 5, width: 20, height: 14, rx: 2 },
         ],
     },
     {
-        name: 'leaf',
+        name: 'badge',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -2392,15 +2596,18 @@ const MEDIA_ICONS = [
         strokeLinecap: 'round',
         strokeLinejoin: 'round',
         elements: [
+            { type: 'path', d: 'M13.5 8h-3' },
             {
                 type: 'path',
-                d: 'M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z',
+                d: 'm15 2-1 2h3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h3',
             },
-            { type: 'path', d: 'M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12' },
+            { type: 'path', d: 'M16.899 22A5 5 0 0 0 7.1 22' },
+            { type: 'path', d: 'm9 2 3 6' },
+            { type: 'circle', cx: 12, cy: 15, r: 3 },
         ],
     },
     {
-        name: 'eject',
+        name: 'city',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -2408,15 +2615,18 @@ const MEDIA_ICONS = [
         strokeLinecap: 'round',
         strokeLinejoin: 'round',
         elements: [
+            { type: 'path', d: 'M10 12h4' },
+            { type: 'path', d: 'M10 8h4' },
+            { type: 'path', d: 'M14 21v-3a2 2 0 0 0-4 0v3' },
             {
                 type: 'path',
-                d: 'M4 13a1 1 0 0 1-.72-1.695l7.257-7.668a2 2 0 0 1 2.926 0l7.256 7.668A1 1 0 0 1 20 13z',
+                d: 'M6 10H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-2',
             },
-            { type: 'rect', x: 3, y: 17, width: 18, height: 4, rx: 1 },
+            { type: 'path', d: 'M6 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16' },
         ],
     },
     {
-        name: 'headphones',
+        name: 'school',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -2424,14 +2634,19 @@ const MEDIA_ICONS = [
         strokeLinecap: 'round',
         strokeLinejoin: 'round',
         elements: [
+            { type: 'path', d: 'M14 21v-3a2 2 0 0 0-4 0v3' },
+            { type: 'path', d: 'M18 4.933V21' },
+            { type: 'path', d: 'm4 6 7.106-3.79a2 2 0 0 1 1.788 0L20 6' },
             {
                 type: 'path',
-                d: 'M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3',
+                d: 'm6 11-3.52 2.147a1 1 0 0 0-.48.854V19a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-5a1 1 0 0 0-.48-.853L18 11',
             },
+            { type: 'path', d: 'M6 4.933V21' },
+            { type: 'circle', cx: 12, cy: 9, r: 2 },
         ],
     },
     {
-        name: 'headphones-off',
+        name: 'balance',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -2439,130 +2654,91 @@ const MEDIA_ICONS = [
         strokeLinecap: 'round',
         strokeLinejoin: 'round',
         elements: [
-            { type: 'path', d: 'M21 14h-1.343' },
-            { type: 'path', d: 'M9.128 3.47A9 9 0 0 1 21 12v3.343' },
-            { type: 'path', d: 'm2 2 20 20' },
-            {
-                type: 'path',
-                d: 'M20.414 20.414A2 2 0 0 1 19 21h-1a2 2 0 0 1-2-2v-3',
-            },
-            {
-                type: 'path',
-                d: 'M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 2.636-6.364',
-            },
+            { type: 'path', d: 'M12 3v18' },
+            { type: 'path', d: 'm19 8 3 8a5 5 0 0 1-6 0zV7' },
+            { type: 'path', d: 'M3 7h1a17 17 0 0 0 8-2 17 17 0 0 0 8 2h1' },
+            { type: 'path', d: 'm5 8 3 8a5 5 0 0 1-6 0zV7' },
+            { type: 'path', d: 'M7 21h10' },
         ],
     },
-];
-
-const BRAND_ICONS = [
     {
-        name: 'google',
-        viewBox: '0 0 16 16',
+        name: 'signature',
+        viewBox: '0 0 24 24',
         fill: 'none',
+        stroke: 'currentColor',
+        strokeWidth: 2,
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
         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',
+                d: 'm21 17-2.156-1.868A.5.5 0 0 0 18 15.5v.5a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1c0-2.545-3.991-3.97-8.5-4a1 1 0 0 0 0 5c4.153 0 4.745-11.295 5.708-13.5a2.5 2.5 0 1 1 3.31 3.284',
             },
+            { type: 'path', d: 'M3 21h18' },
         ],
     },
     {
-        name: 'apple',
+        name: 'neighborhood',
         viewBox: '0 0 24 24',
         fill: 'none',
+        stroke: 'currentColor',
+        strokeWidth: 2,
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
         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',
+                d: 'M12.35 21H5a2 2 0 0 1-2-2v-9a2 2 0 0 1 .71-1.53l7-6a2 2 0 0 1 2.58 0l7 6A2 2 0 0 1 21 10v2.35',
             },
+            { type: 'path', d: 'M14.8 12.4A1 1 0 0 0 14 12h-4a1 1 0 0 0-1 1v8' },
+            { type: 'path', d: 'M15 18h6' },
+            { type: 'path', d: 'M18 15v6' },
         ],
     },
     {
-        name: 'android',
-        viewBox: '0 0 413.137 413.137',
+        name: 'book-user',
+        viewBox: '0 0 24 24',
         fill: 'none',
+        stroke: 'currentColor',
+        strokeWidth: 2,
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
         elements: [
+            { type: 'path', d: 'M15 13a3 3 0 1 0-6 0' },
             {
                 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',
+                d: 'M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20',
             },
+            { type: 'circle', cx: 12, cy: 8, r: 2 },
         ],
     },
     {
-        name: 'github',
+        name: 'hash',
         viewBox: '0 0 24 24',
         fill: 'none',
+        stroke: 'currentColor',
+        strokeWidth: 2,
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
         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',
-            },
+            { type: 'line', x1: 4, y1: 9, x2: 20, y2: 9 },
+            { type: 'line', x1: 4, y1: 15, x2: 20, y2: 15 },
+            { type: 'line', x1: 10, y1: 3, x2: 8, y2: 21 },
+            { type: 'line', x1: 16, y1: 3, x2: 14, y2: 21 },
         ],
     },
 ];
 
 const SOLARIS_BUILT_IN_ICONS = [
+    ...COMMUNICATION_ICONS,
     ...NAVIGATION_ICONS,
     ...ACTIONS_ICONS,
+    ...LAYOUT_ICONS,
     ...STATUS_ICONS,
     ...THEME_ICONS,
-    ...DATA_ICONS,
-    ...LAYOUT_ICONS,
-    ...COMMUNICATION_ICONS,
     ...MEDIA_ICONS,
     ...BRAND_ICONS,
+    ...DATA_ICONS,
 ];
 
 class SolarisIconRegistryService {
@@ -2711,12 +2887,13 @@ class SolarisCardComponent {
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     density = input(...(ngDevMode ? [undefined, { debugName: "density" }] : /* istanbul ignore next */ []));
     glassTexture = input('none', ...(ngDevMode ? [{ debugName: "glassTexture" }] : /* istanbul ignore next */ []));
+    mediaPosition = input('top', ...(ngDevMode ? [{ debugName: "mediaPosition" }] : /* istanbul ignore next */ []));
     themeService = inject(SolarisThemeService);
     effectiveDensity = computed(() => {
         return this.density() ?? this.themeService.density;
     }, ...(ngDevMode ? [{ debugName: "effectiveDensity" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.22", type: SolarisCardComponent, isStandalone: true, selector: "solaris-card", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", 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 }, glassTexture: { classPropertyName: "glassTexture", publicName: "glassTexture", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-appearance": "appearance()", "attr.data-size": "size()", "attr.data-radius": "radius()", "attr.data-density": "effectiveDensity()", "attr.data-glass-texture": "appearance() === \"glass\" && glassTexture() !== \"none\" ? glassTexture() : null" } }, ngImport: i0, template: "<ng-content />\n", styles: [":host{--solaris-card-shadow: none;--solaris-card-glass-blur: initial;--solaris-card-glass-background: initial;--solaris-card-glass-border-color: initial;--solaris-card-gap: var(--solaris-spacing-5);--solaris-card-glass-texture-opacity: initial;--solaris-card-radius: var(--solaris-radius-lg);--solaris-card-padding: var(--solaris-spacing-6);--solaris-card-color: var(--solaris-text-default);--solaris-card-header-gap: var(--solaris-spacing-1);--solaris-card-section-gap: var(--solaris-card-gap);--solaris-card-background: var(--solaris-surface-base);--solaris-card-border-color: var(--solaris-border-subtle);--solaris-card-border-width: var(--solaris-border-width-sm);--solaris-card-section-padding: var(--solaris-card-padding);--solaris-card-footer-border-color: var(--solaris-border-subtle);gap:0;padding:0;display:flex;overflow:hidden;flex-direction:column;box-sizing:border-box;color:var(--solaris-card-color);box-shadow:var(--solaris-card-shadow);border-radius:var(--solaris-card-radius);background:var(--solaris-card-background);border:var(--solaris-card-border-width) solid var(--solaris-card-border-color)}:host([data-size=sm]){--solaris-card-section-gap: var(--solaris-spacing-4);--solaris-card-section-padding: var(--solaris-spacing-4)}:host([data-size=lg]){--solaris-card-section-gap: var(--solaris-spacing-6);--solaris-card-section-padding: var(--solaris-spacing-8)}:host([data-appearance=surface]){--solaris-card-shadow: none;--solaris-card-color: var(--solaris-text-default);--solaris-card-background: var(--solaris-surface-base);--solaris-card-border-color: var(--solaris-border-subtle);--solaris-card-border-width: var(--solaris-border-width-sm)}:host([data-appearance=outline]){--solaris-card-shadow: none;--solaris-card-background: transparent;--solaris-card-color: var(--solaris-text-default);--solaris-card-border-color: var(--solaris-border-default);--solaris-card-border-width: var(--solaris-border-width-sm)}:host([data-appearance=tonal]){--solaris-card-shadow: none;--solaris-card-color: var(--solaris-text-default);--solaris-card-background: var(--solaris-surface-subtle);--solaris-card-border-color: var(--solaris-border-subtle);--solaris-card-border-width: var(--solaris-border-width-sm)}:host([data-appearance=glass]){--solaris-card-glass-blur: var(--solaris-glass-blur);--solaris-card-glass-texture-opacity: var(--solaris-glass-texture-opacity);--solaris-card-color: var(--solaris-text-glass);--solaris-card-border-width: var(--solaris-border-width-sm);--solaris-card-glass-border-color: var(--solaris-glass-border-color);--solaris-card-shadow: var(--solaris-glass-shadow);--solaris-card-glass-background: var(--solaris-glass-background);position:relative;isolation:isolate;box-shadow:var(--solaris-card-shadow);background:var(--solaris-card-glass-background);border-color:var(--solaris-card-glass-border-color);backdrop-filter:var(--solaris-glass-backdrop-filter);-webkit-backdrop-filter:var(--solaris-glass-backdrop-filter)}:host([data-appearance=glass]):before{inset:0;content:\"\";position:absolute;pointer-events:none;border-radius:inherit;z-index:var(--solaris-z-index-decorative);background:radial-gradient(circle at 72% 58%,rgba(255,110,24,.3607843137),transparent 34%),radial-gradient(circle at 22% 16%,rgba(255,255,255,.1803921569),transparent 30%),linear-gradient(135deg,rgba(255,255,255,.1803921569),transparent 42%)}:host([data-appearance=glass][data-glass-texture=grooves]):after{inset:0;content:\"\";position:absolute;pointer-events:none;border-radius:inherit;z-index:var(--solaris-z-index-decorative);opacity:var(--solaris-card-glass-texture-opacity);background-image:repeating-radial-gradient(circle at 0 0,var(--solaris-glass-border-color) 0,var(--solaris-glass-border-color) 1px,transparent 1px,transparent 4px)}:host([data-density=compact]){--solaris-card-gap: var(--solaris-density-gap-lg);--solaris-card-padding: var(--solaris-density-padding-xl)}:host([data-density=comfortable]){--solaris-card-gap: var(--solaris-density-gap-lg);--solaris-card-padding: var(--solaris-density-padding-xl)}:host([data-radius=none]){--solaris-card-radius: var(--solaris-radius-none)}:host([data-radius=sm]){--solaris-card-radius: var(--solaris-radius-sm)}:host([data-radius=lg]){--solaris-card-radius: var(--solaris-radius-lg)}:host([data-radius=xl]){--solaris-card-radius: var(--solaris-radius-xl)}:host ::ng-deep .solaris-card-header,:host ::ng-deep .solaris-card-content,:host ::ng-deep .solaris-card-footer{box-sizing:border-box;padding-inline:var(--solaris-card-section-padding)}:host ::ng-deep .solaris-card-header{display:flex;flex-direction:column;padding-block:var(--solaris-card-section-padding) var(--solaris-spacing-0);gap:var(--solaris-card-header-gap)}:host ::ng-deep .solaris-card-header:only-child{padding-block-end:var(--solaris-card-section-padding)}:host ::ng-deep .solaris-card-content{display:block;padding-block:var(--solaris-card-section-padding)}:host ::ng-deep .solaris-card-header+.solaris-card-content{padding-block-start:var(--solaris-card-section-gap)}:host ::ng-deep .solaris-card-footer{display:flex;flex-wrap:wrap;align-items:center;gap:var(--solaris-spacing-2);padding-block:var(--solaris-spacing-1) var(--solaris-card-section-padding)}:host ::ng-deep .solaris-card-footer:only-child{padding-block-start:var(--solaris-card-section-padding)}:host ::ng-deep .solaris-card-footer[data-separator]{padding-block-start:var(--solaris-card-section-gap);border-top:var(--solaris-border-width-sm) solid var(--solaris-card-footer-border-color)}:host ::ng-deep .solaris-card-media{margin:0;display:block;overflow:hidden}:host ::ng-deep .solaris-card-media:first-child{border-radius:var(--solaris-card-radius) var(--solaris-card-radius) 0 0}:host ::ng-deep .solaris-card-media:not(:first-child){border-radius:var(--solaris-radius-none)}:host ::ng-deep .solaris-card-media img,:host ::ng-deep .solaris-card-media video,:host ::ng-deep .solaris-card-media picture{width:100%;display:block}:host ::ng-deep .solaris-card-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--solaris-spacing-2)}:host ::ng-deep .solaris-card-title{color:var(--solaris-text-strong);font-size:var(--solaris-font-size-lg);line-height:var(--solaris-line-height-sm);font-weight:var(--solaris-font-weight-semibold);margin:var(--solaris-spacing-0) var(--solaris-spacing-0) var(--solaris-spacing-2)}:host ::ng-deep .solaris-card-description{margin:var(--solaris-spacing-0);color:var(--solaris-text-muted);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}:host([data-appearance=glass]) ::ng-deep .solaris-card-description{color:var(--solaris-text-glass)}:host ::ng-deep *+.solaris-card-description{margin-top:var(--solaris-spacing-1)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.22", type: SolarisCardComponent, isStandalone: true, selector: "solaris-card", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", 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 }, glassTexture: { classPropertyName: "glassTexture", publicName: "glassTexture", isSignal: true, isRequired: false, transformFunction: null }, mediaPosition: { classPropertyName: "mediaPosition", publicName: "mediaPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-appearance": "appearance()", "attr.data-size": "size()", "attr.data-radius": "radius()", "attr.data-density": "effectiveDensity()", "attr.data-media-position": "mediaPosition()", "attr.data-glass-texture": "appearance() === \"glass\" && glassTexture() !== \"none\" ? glassTexture() : null" } }, ngImport: i0, template: "<ng-content />\n", styles: [":host{--solaris-card-shadow: none;--solaris-card-glass-blur: initial;--solaris-card-glass-background: initial;--solaris-card-glass-border-color: initial;--solaris-card-gap: var(--solaris-spacing-0);--solaris-card-glass-texture-opacity: initial;--solaris-card-radius: var(--solaris-radius-lg);--solaris-card-padding: var(--solaris-spacing-0);--solaris-card-color: var(--solaris-text-default);--solaris-card-header-gap: var(--solaris-spacing-0);--solaris-card-section-gap: var(--solaris-card-gap);--solaris-card-background: var(--solaris-surface-base);--solaris-card-border-color: var(--solaris-border-subtle);--solaris-card-border-width: var(--solaris-border-width-sm);--solaris-card-section-padding: var(--solaris-card-padding);--solaris-card-footer-border-color: var(--solaris-border-subtle);--solaris-card-header-border-color: var(--solaris-border-subtle);--solaris-card-media-size: var(--solaris-spacing-12);gap:0;padding:0;display:flex;overflow:hidden;flex-direction:column;box-sizing:border-box;color:var(--solaris-card-color);box-shadow:var(--solaris-card-shadow);border-radius:var(--solaris-card-radius);background:var(--solaris-card-background);border:var(--solaris-card-border-width) solid var(--solaris-card-border-color)}:host([data-size=sm]){--solaris-card-media-size: var(--solaris-spacing-10)}:host([data-size=lg]){--solaris-card-media-size: var(--solaris-spacing-16)}:host([data-appearance=surface]){--solaris-card-shadow: none;--solaris-card-color: var(--solaris-text-default);--solaris-card-background: var(--solaris-surface-base);--solaris-card-border-color: var(--solaris-border-subtle);--solaris-card-border-width: var(--solaris-border-width-sm)}:host([data-appearance=outline]){--solaris-card-shadow: none;--solaris-card-background: transparent;--solaris-card-color: var(--solaris-text-default);--solaris-card-border-color: var(--solaris-border-default);--solaris-card-border-width: var(--solaris-border-width-sm)}:host([data-appearance=tonal]){--solaris-card-shadow: none;--solaris-card-color: var(--solaris-text-default);--solaris-card-background: var(--solaris-surface-subtle);--solaris-card-border-color: var(--solaris-border-subtle);--solaris-card-border-width: var(--solaris-border-width-sm)}:host([data-appearance=glass]){--solaris-card-glass-blur: var(--solaris-glass-blur);--solaris-card-glass-texture-opacity: var(--solaris-glass-texture-opacity);--solaris-card-color: var(--solaris-text-glass);--solaris-card-border-width: var(--solaris-border-width-sm);--solaris-card-glass-border-color: var(--solaris-glass-border-color);--solaris-card-shadow: var(--solaris-glass-shadow);--solaris-card-glass-background: var(--solaris-glass-background);position:relative;isolation:isolate;box-shadow:var(--solaris-card-shadow);background:var(--solaris-card-glass-background);border-color:var(--solaris-card-glass-border-color);backdrop-filter:var(--solaris-glass-backdrop-filter);-webkit-backdrop-filter:var(--solaris-glass-backdrop-filter)}:host([data-appearance=glass]):before{inset:0;content:\"\";position:absolute;pointer-events:none;border-radius:inherit;z-index:var(--solaris-z-index-decorative);background:radial-gradient(circle at 72% 58%,rgba(255,110,24,.3607843137),transparent 34%),radial-gradient(circle at 22% 16%,rgba(255,255,255,.1803921569),transparent 30%),linear-gradient(135deg,rgba(255,255,255,.1803921569),transparent 42%)}:host([data-appearance=glass][data-glass-texture=grooves]):after{inset:0;content:\"\";position:absolute;pointer-events:none;border-radius:inherit;z-index:var(--solaris-z-index-decorative);opacity:var(--solaris-card-glass-texture-opacity);background-image:repeating-radial-gradient(circle at 0 0,var(--solaris-glass-border-color) 0,var(--solaris-glass-border-color) 1px,transparent 1px,transparent 4px)}:host([data-radius=none]){--solaris-card-radius: var(--solaris-radius-none)}:host([data-radius=sm]){--solaris-card-radius: var(--solaris-radius-sm)}:host([data-radius=lg]){--solaris-card-radius: var(--solaris-radius-lg)}:host([data-radius=xl]){--solaris-card-radius: var(--solaris-radius-xl)}:host ::ng-deep .solaris-card-header,:host ::ng-deep .solaris-card-content,:host ::ng-deep .solaris-card-footer{box-sizing:border-box;padding-inline:var(--solaris-card-section-padding)}:host ::ng-deep .solaris-card-header{display:flex;flex-direction:column;padding-block:var(--solaris-card-section-padding) var(--solaris-spacing-0);gap:var(--solaris-card-header-gap)}:host ::ng-deep .solaris-card-header:only-child{padding-block-end:var(--solaris-card-section-padding)}:host ::ng-deep .solaris-card-content{display:block;padding-block:var(--solaris-card-section-padding)}:host ::ng-deep .solaris-card-header+.solaris-card-content{padding-block-start:var(--solaris-card-section-gap)}:host ::ng-deep .solaris-card-footer{display:flex;flex-wrap:wrap;align-items:center;gap:var(--solaris-spacing-0);padding-block:var(--solaris-spacing-0) var(--solaris-card-section-padding)}:host ::ng-deep .solaris-card-footer:only-child{padding-block-start:var(--solaris-card-section-padding)}:host ::ng-deep .solaris-card-header[data-separator]{padding-block-end:var(--solaris-card-section-gap);border-bottom:var(--solaris-border-width-sm) solid var(--solaris-card-header-border-color)}:host ::ng-deep .solaris-card-footer[data-separator]{padding-block-start:var(--solaris-card-section-gap);border-top:var(--solaris-border-width-sm) solid var(--solaris-card-footer-border-color)}:host ::ng-deep .solaris-card-media{margin:0;display:block;overflow:hidden}:host ::ng-deep .solaris-card-media:first-child{border-radius:var(--solaris-card-radius) var(--solaris-card-radius) 0 0}:host ::ng-deep .solaris-card-media:not(:first-child){border-radius:var(--solaris-radius-none)}:host ::ng-deep .solaris-card-media img,:host ::ng-deep .solaris-card-media video,:host ::ng-deep .solaris-card-media picture{width:100%;display:block}:host ::ng-deep .solaris-card-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--solaris-spacing-0)}:host ::ng-deep .solaris-card-title{color:var(--solaris-text-strong);font-size:var(--solaris-font-size-lg);line-height:var(--solaris-line-height-sm);font-weight:var(--solaris-font-weight-semibold);margin:var(--solaris-spacing-0)}:host ::ng-deep .solaris-card-description{margin:var(--solaris-spacing-0);color:var(--solaris-text-muted);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}:host([data-appearance=glass]) ::ng-deep .solaris-card-description{color:var(--solaris-text-glass)}:host ::ng-deep *+.solaris-card-description{margin-top:var(--solaris-spacing-0)}:host([data-media-position=start]){display:grid;grid-template-columns:auto minmax(0,1fr);align-items:stretch}:host([data-media-position=start]) ::ng-deep .solaris-card-media{grid-row:1/-1;grid-column:1;align-self:center;width:var(--solaris-card-media-size);height:var(--solaris-card-media-size);border-radius:var(--solaris-radius-md)}:host([data-media-position=start]) ::ng-deep .solaris-card-media img,:host([data-media-position=start]) ::ng-deep .solaris-card-media video,:host([data-media-position=start]) ::ng-deep .solaris-card-media picture{width:100%;height:100%;object-fit:cover}:host([data-media-position=start]) ::ng-deep .solaris-card-header,:host([data-media-position=start]) ::ng-deep .solaris-card-content,:host([data-media-position=start]) ::ng-deep .solaris-card-footer,:host([data-media-position=start]) ::ng-deep .solaris-card-actions{grid-column:2;min-width:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisCardComponent, decorators: [{
             type: Component,
@@ -2725,13 +2902,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                         '[attr.data-size]': 'size()',
                         '[attr.data-radius]': 'radius()',
                         '[attr.data-density]': 'effectiveDensity()',
+                        '[attr.data-media-position]': 'mediaPosition()',
                         '[attr.data-glass-texture]': 'appearance() === "glass" && glassTexture() !== "none" ? glassTexture() : null',
-                    }, template: "<ng-content />\n", styles: [":host{--solaris-card-shadow: none;--solaris-card-glass-blur: initial;--solaris-card-glass-background: initial;--solaris-card-glass-border-color: initial;--solaris-card-gap: var(--solaris-spacing-5);--solaris-card-glass-texture-opacity: initial;--solaris-card-radius: var(--solaris-radius-lg);--solaris-card-padding: var(--solaris-spacing-6);--solaris-card-color: var(--solaris-text-default);--solaris-card-header-gap: var(--solaris-spacing-1);--solaris-card-section-gap: var(--solaris-card-gap);--solaris-card-background: var(--solaris-surface-base);--solaris-card-border-color: var(--solaris-border-subtle);--solaris-card-border-width: var(--solaris-border-width-sm);--solaris-card-section-padding: var(--solaris-card-padding);--solaris-card-footer-border-color: var(--solaris-border-subtle);gap:0;padding:0;display:flex;overflow:hidden;flex-direction:column;box-sizing:border-box;color:var(--solaris-card-color);box-shadow:var(--solaris-card-shadow);border-radius:var(--solaris-card-radius);background:var(--solaris-card-background);border:var(--solaris-card-border-width) solid var(--solaris-card-border-color)}:host([data-size=sm]){--solaris-card-section-gap: var(--solaris-spacing-4);--solaris-card-section-padding: var(--solaris-spacing-4)}:host([data-size=lg]){--solaris-card-section-gap: var(--solaris-spacing-6);--solaris-card-section-padding: var(--solaris-spacing-8)}:host([data-appearance=surface]){--solaris-card-shadow: none;--solaris-card-color: var(--solaris-text-default);--solaris-card-background: var(--solaris-surface-base);--solaris-card-border-color: var(--solaris-border-subtle);--solaris-card-border-width: var(--solaris-border-width-sm)}:host([data-appearance=outline]){--solaris-card-shadow: none;--solaris-card-background: transparent;--solaris-card-color: var(--solaris-text-default);--solaris-card-border-color: var(--solaris-border-default);--solaris-card-border-width: var(--solaris-border-width-sm)}:host([data-appearance=tonal]){--solaris-card-shadow: none;--solaris-card-color: var(--solaris-text-default);--solaris-card-background: var(--solaris-surface-subtle);--solaris-card-border-color: var(--solaris-border-subtle);--solaris-card-border-width: var(--solaris-border-width-sm)}:host([data-appearance=glass]){--solaris-card-glass-blur: var(--solaris-glass-blur);--solaris-card-glass-texture-opacity: var(--solaris-glass-texture-opacity);--solaris-card-color: var(--solaris-text-glass);--solaris-card-border-width: var(--solaris-border-width-sm);--solaris-card-glass-border-color: var(--solaris-glass-border-color);--solaris-card-shadow: var(--solaris-glass-shadow);--solaris-card-glass-background: var(--solaris-glass-background);position:relative;isolation:isolate;box-shadow:var(--solaris-card-shadow);background:var(--solaris-card-glass-background);border-color:var(--solaris-card-glass-border-color);backdrop-filter:var(--solaris-glass-backdrop-filter);-webkit-backdrop-filter:var(--solaris-glass-backdrop-filter)}:host([data-appearance=glass]):before{inset:0;content:\"\";position:absolute;pointer-events:none;border-radius:inherit;z-index:var(--solaris-z-index-decorative);background:radial-gradient(circle at 72% 58%,rgba(255,110,24,.3607843137),transparent 34%),radial-gradient(circle at 22% 16%,rgba(255,255,255,.1803921569),transparent 30%),linear-gradient(135deg,rgba(255,255,255,.1803921569),transparent 42%)}:host([data-appearance=glass][data-glass-texture=grooves]):after{inset:0;content:\"\";position:absolute;pointer-events:none;border-radius:inherit;z-index:var(--solaris-z-index-decorative);opacity:var(--solaris-card-glass-texture-opacity);background-image:repeating-radial-gradient(circle at 0 0,var(--solaris-glass-border-color) 0,var(--solaris-glass-border-color) 1px,transparent 1px,transparent 4px)}:host([data-density=compact]){--solaris-card-gap: var(--solaris-density-gap-lg);--solaris-card-padding: var(--solaris-density-padding-xl)}:host([data-density=comfortable]){--solaris-card-gap: var(--solaris-density-gap-lg);--solaris-card-padding: var(--solaris-density-padding-xl)}:host([data-radius=none]){--solaris-card-radius: var(--solaris-radius-none)}:host([data-radius=sm]){--solaris-card-radius: var(--solaris-radius-sm)}:host([data-radius=lg]){--solaris-card-radius: var(--solaris-radius-lg)}:host([data-radius=xl]){--solaris-card-radius: var(--solaris-radius-xl)}:host ::ng-deep .solaris-card-header,:host ::ng-deep .solaris-card-content,:host ::ng-deep .solaris-card-footer{box-sizing:border-box;padding-inline:var(--solaris-card-section-padding)}:host ::ng-deep .solaris-card-header{display:flex;flex-direction:column;padding-block:var(--solaris-card-section-padding) var(--solaris-spacing-0);gap:var(--solaris-card-header-gap)}:host ::ng-deep .solaris-card-header:only-child{padding-block-end:var(--solaris-card-section-padding)}:host ::ng-deep .solaris-card-content{display:block;padding-block:var(--solaris-card-section-padding)}:host ::ng-deep .solaris-card-header+.solaris-card-content{padding-block-start:var(--solaris-card-section-gap)}:host ::ng-deep .solaris-card-footer{display:flex;flex-wrap:wrap;align-items:center;gap:var(--solaris-spacing-2);padding-block:var(--solaris-spacing-1) var(--solaris-card-section-padding)}:host ::ng-deep .solaris-card-footer:only-child{padding-block-start:var(--solaris-card-section-padding)}:host ::ng-deep .solaris-card-footer[data-separator]{padding-block-start:var(--solaris-card-section-gap);border-top:var(--solaris-border-width-sm) solid var(--solaris-card-footer-border-color)}:host ::ng-deep .solaris-card-media{margin:0;display:block;overflow:hidden}:host ::ng-deep .solaris-card-media:first-child{border-radius:var(--solaris-card-radius) var(--solaris-card-radius) 0 0}:host ::ng-deep .solaris-card-media:not(:first-child){border-radius:var(--solaris-radius-none)}:host ::ng-deep .solaris-card-media img,:host ::ng-deep .solaris-card-media video,:host ::ng-deep .solaris-card-media picture{width:100%;display:block}:host ::ng-deep .solaris-card-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--solaris-spacing-2)}:host ::ng-deep .solaris-card-title{color:var(--solaris-text-strong);font-size:var(--solaris-font-size-lg);line-height:var(--solaris-line-height-sm);font-weight:var(--solaris-font-weight-semibold);margin:var(--solaris-spacing-0) var(--solaris-spacing-0) var(--solaris-spacing-2)}:host ::ng-deep .solaris-card-description{margin:var(--solaris-spacing-0);color:var(--solaris-text-muted);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}:host([data-appearance=glass]) ::ng-deep .solaris-card-description{color:var(--solaris-text-glass)}:host ::ng-deep *+.solaris-card-description{margin-top:var(--solaris-spacing-1)}\n"] }]
-        }], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], glassTexture: [{ type: i0.Input, args: [{ isSignal: true, alias: "glassTexture", required: false }] }] } });
+                    }, template: "<ng-content />\n", styles: [":host{--solaris-card-shadow: none;--solaris-card-glass-blur: initial;--solaris-card-glass-background: initial;--solaris-card-glass-border-color: initial;--solaris-card-gap: var(--solaris-spacing-0);--solaris-card-glass-texture-opacity: initial;--solaris-card-radius: var(--solaris-radius-lg);--solaris-card-padding: var(--solaris-spacing-0);--solaris-card-color: var(--solaris-text-default);--solaris-card-header-gap: var(--solaris-spacing-0);--solaris-card-section-gap: var(--solaris-card-gap);--solaris-card-background: var(--solaris-surface-base);--solaris-card-border-color: var(--solaris-border-subtle);--solaris-card-border-width: var(--solaris-border-width-sm);--solaris-card-section-padding: var(--solaris-card-padding);--solaris-card-footer-border-color: var(--solaris-border-subtle);--solaris-card-header-border-color: var(--solaris-border-subtle);--solaris-card-media-size: var(--solaris-spacing-12);gap:0;padding:0;display:flex;overflow:hidden;flex-direction:column;box-sizing:border-box;color:var(--solaris-card-color);box-shadow:var(--solaris-card-shadow);border-radius:var(--solaris-card-radius);background:var(--solaris-card-background);border:var(--solaris-card-border-width) solid var(--solaris-card-border-color)}:host([data-size=sm]){--solaris-card-media-size: var(--solaris-spacing-10)}:host([data-size=lg]){--solaris-card-media-size: var(--solaris-spacing-16)}:host([data-appearance=surface]){--solaris-card-shadow: none;--solaris-card-color: var(--solaris-text-default);--solaris-card-background: var(--solaris-surface-base);--solaris-card-border-color: var(--solaris-border-subtle);--solaris-card-border-width: var(--solaris-border-width-sm)}:host([data-appearance=outline]){--solaris-card-shadow: none;--solaris-card-background: transparent;--solaris-card-color: var(--solaris-text-default);--solaris-card-border-color: var(--solaris-border-default);--solaris-card-border-width: var(--solaris-border-width-sm)}:host([data-appearance=tonal]){--solaris-card-shadow: none;--solaris-card-color: var(--solaris-text-default);--solaris-card-background: var(--solaris-surface-subtle);--solaris-card-border-color: var(--solaris-border-subtle);--solaris-card-border-width: var(--solaris-border-width-sm)}:host([data-appearance=glass]){--solaris-card-glass-blur: var(--solaris-glass-blur);--solaris-card-glass-texture-opacity: var(--solaris-glass-texture-opacity);--solaris-card-color: var(--solaris-text-glass);--solaris-card-border-width: var(--solaris-border-width-sm);--solaris-card-glass-border-color: var(--solaris-glass-border-color);--solaris-card-shadow: var(--solaris-glass-shadow);--solaris-card-glass-background: var(--solaris-glass-background);position:relative;isolation:isolate;box-shadow:var(--solaris-card-shadow);background:var(--solaris-card-glass-background);border-color:var(--solaris-card-glass-border-color);backdrop-filter:var(--solaris-glass-backdrop-filter);-webkit-backdrop-filter:var(--solaris-glass-backdrop-filter)}:host([data-appearance=glass]):before{inset:0;content:\"\";position:absolute;pointer-events:none;border-radius:inherit;z-index:var(--solaris-z-index-decorative);background:radial-gradient(circle at 72% 58%,rgba(255,110,24,.3607843137),transparent 34%),radial-gradient(circle at 22% 16%,rgba(255,255,255,.1803921569),transparent 30%),linear-gradient(135deg,rgba(255,255,255,.1803921569),transparent 42%)}:host([data-appearance=glass][data-glass-texture=grooves]):after{inset:0;content:\"\";position:absolute;pointer-events:none;border-radius:inherit;z-index:var(--solaris-z-index-decorative);opacity:var(--solaris-card-glass-texture-opacity);background-image:repeating-radial-gradient(circle at 0 0,var(--solaris-glass-border-color) 0,var(--solaris-glass-border-color) 1px,transparent 1px,transparent 4px)}:host([data-radius=none]){--solaris-card-radius: var(--solaris-radius-none)}:host([data-radius=sm]){--solaris-card-radius: var(--solaris-radius-sm)}:host([data-radius=lg]){--solaris-card-radius: var(--solaris-radius-lg)}:host([data-radius=xl]){--solaris-card-radius: var(--solaris-radius-xl)}:host ::ng-deep .solaris-card-header,:host ::ng-deep .solaris-card-content,:host ::ng-deep .solaris-card-footer{box-sizing:border-box;padding-inline:var(--solaris-card-section-padding)}:host ::ng-deep .solaris-card-header{display:flex;flex-direction:column;padding-block:var(--solaris-card-section-padding) var(--solaris-spacing-0);gap:var(--solaris-card-header-gap)}:host ::ng-deep .solaris-card-header:only-child{padding-block-end:var(--solaris-card-section-padding)}:host ::ng-deep .solaris-card-content{display:block;padding-block:var(--solaris-card-section-padding)}:host ::ng-deep .solaris-card-header+.solaris-card-content{padding-block-start:var(--solaris-card-section-gap)}:host ::ng-deep .solaris-card-footer{display:flex;flex-wrap:wrap;align-items:center;gap:var(--solaris-spacing-0);padding-block:var(--solaris-spacing-0) var(--solaris-card-section-padding)}:host ::ng-deep .solaris-card-footer:only-child{padding-block-start:var(--solaris-card-section-padding)}:host ::ng-deep .solaris-card-header[data-separator]{padding-block-end:var(--solaris-card-section-gap);border-bottom:var(--solaris-border-width-sm) solid var(--solaris-card-header-border-color)}:host ::ng-deep .solaris-card-footer[data-separator]{padding-block-start:var(--solaris-card-section-gap);border-top:var(--solaris-border-width-sm) solid var(--solaris-card-footer-border-color)}:host ::ng-deep .solaris-card-media{margin:0;display:block;overflow:hidden}:host ::ng-deep .solaris-card-media:first-child{border-radius:var(--solaris-card-radius) var(--solaris-card-radius) 0 0}:host ::ng-deep .solaris-card-media:not(:first-child){border-radius:var(--solaris-radius-none)}:host ::ng-deep .solaris-card-media img,:host ::ng-deep .solaris-card-media video,:host ::ng-deep .solaris-card-media picture{width:100%;display:block}:host ::ng-deep .solaris-card-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--solaris-spacing-0)}:host ::ng-deep .solaris-card-title{color:var(--solaris-text-strong);font-size:var(--solaris-font-size-lg);line-height:var(--solaris-line-height-sm);font-weight:var(--solaris-font-weight-semibold);margin:var(--solaris-spacing-0)}:host ::ng-deep .solaris-card-description{margin:var(--solaris-spacing-0);color:var(--solaris-text-muted);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}:host([data-appearance=glass]) ::ng-deep .solaris-card-description{color:var(--solaris-text-glass)}:host ::ng-deep *+.solaris-card-description{margin-top:var(--solaris-spacing-0)}:host([data-media-position=start]){display:grid;grid-template-columns:auto minmax(0,1fr);align-items:stretch}:host([data-media-position=start]) ::ng-deep .solaris-card-media{grid-row:1/-1;grid-column:1;align-self:center;width:var(--solaris-card-media-size);height:var(--solaris-card-media-size);border-radius:var(--solaris-radius-md)}:host([data-media-position=start]) ::ng-deep .solaris-card-media img,:host([data-media-position=start]) ::ng-deep .solaris-card-media video,:host([data-media-position=start]) ::ng-deep .solaris-card-media picture{width:100%;height:100%;object-fit:cover}:host([data-media-position=start]) ::ng-deep .solaris-card-header,:host([data-media-position=start]) ::ng-deep .solaris-card-content,:host([data-media-position=start]) ::ng-deep .solaris-card-footer,:host([data-media-position=start]) ::ng-deep .solaris-card-actions{grid-column:2;min-width:0}\n"] }]
+        }], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], glassTexture: [{ type: i0.Input, args: [{ isSignal: true, alias: "glassTexture", required: false }] }], mediaPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "mediaPosition", required: false }] }] } });
 
 class SolarisCardHeaderDirective {
+    separator = input(true, { ...(ngDevMode ? { debugName: "separator" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisCardHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: SolarisCardHeaderDirective, isStandalone: true, selector: "[solaris-card-header]", host: { classAttribute: "solaris-card-header" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.22", type: SolarisCardHeaderDirective, isStandalone: true, selector: "[solaris-card-header]", inputs: { separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-separator": "separator() ? '' : null" }, classAttribute: "solaris-card-header" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisCardHeaderDirective, decorators: [{
             type: Directive,
@@ -2740,9 +2919,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                     standalone: true,
                     host: {
                         class: 'solaris-card-header',
+                        '[attr.data-separator]': "separator() ? '' : null",
                     },
                 }]
-        }] });
+        }], propDecorators: { separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }] } });
 
 class SolarisCardContentDirective {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisCardContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -2775,7 +2955,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
         }] });
 
 class SolarisCardFooterDirective {
-    separator = input(false, ...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
+    separator = input(true, { ...(ngDevMode ? { debugName: "separator" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisCardFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.22", type: SolarisCardFooterDirective, isStandalone: true, selector: "[solaris-card-footer]", inputs: { separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-separator": "separator() ? '' : null" }, classAttribute: "solaris-card-footer" }, ngImport: i0 });
 }
@@ -4927,14 +5107,14 @@ class SolarisPopoverPanelComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisPopoverPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.22", type: SolarisPopoverPanelComponent, isStandalone: true, selector: "solaris-popover-panel", host: { properties: { "attr.tabindex": "data.autoFocus === \"panel\" ? \"-1\" : null" }, classAttribute: "solaris-popover-panel" }, ngImport: i0, template: "<div\n  class=\"solaris-popover-panel__container\"\n  [attr.data-appearance]=\"data.appearance\"\n  [attr.data-padding]=\"data.padding\"\n  [attr.data-radius]=\"data.radius\"\n  [attr.data-connected-side]=\"data.connectedSide ?? null\"\n  [attr.role]=\"data.role\"\n  [id]=\"data.panelId\"\n  tabindex=\"-1\"\n>\n  <ng-container *ngTemplateOutlet=\"data.contentTemplate\" />\n</div>\n", styles: [":host{--solaris-popover-border-width: 0;--solaris-popover-min-width: auto;--solaris-popover-max-width: none;--solaris-popover-border-color: transparent;--solaris-popover-radius: var(--solaris-radius-md);--solaris-popover-shadow: var(--solaris-shadow-lg);--solaris-popover-padding: var(--solaris-spacing-3);--solaris-popover-color: var(--solaris-text-default);--solaris-popover-background: var(--solaris-surface-raised);width:100%;outline:none;display:block}.solaris-popover-panel__container{width:100%;outline:none;box-sizing:border-box;color:var(--solaris-popover-color);padding:var(--solaris-popover-padding);box-shadow:var(--solaris-popover-shadow);min-width:var(--solaris-popover-min-width);max-width:var(--solaris-popover-max-width);border-radius:var(--solaris-popover-radius);background:var(--solaris-popover-background);border:var(--solaris-popover-border-width) solid var(--solaris-popover-border-color)}.solaris-popover-panel__container[data-appearance=outline]{background:var(--solaris-surface-base);border:var(--solaris-border-width-sm) solid var(--solaris-border-subtle)}.solaris-popover-panel__container[data-appearance=filled]{border:var(--solaris-border-width-sm) solid var(--solaris-border-subtle)}.solaris-popover-panel__container[data-padding=none]{--solaris-popover-padding: 0}.solaris-popover-panel__container[data-padding=sm]{--solaris-popover-padding: var(--solaris-spacing-2)}.solaris-popover-panel__container[data-padding=md]{--solaris-popover-padding: var(--solaris-spacing-3)}.solaris-popover-panel__container[data-padding=lg]{--solaris-popover-padding: var(--solaris-spacing-4)}.solaris-popover-panel__container[data-radius=none]{border-radius:var(--solaris-radius-none)}.solaris-popover-panel__container[data-radius=sm]{border-radius:var(--solaris-radius-sm)}.solaris-popover-panel__container[data-radius=md]{border-radius:var(--solaris-radius-md)}.solaris-popover-panel__container[data-radius=lg]{border-radius:var(--solaris-radius-lg)}.solaris-popover-panel__container[data-radius=xl]{border-radius:var(--solaris-radius-xl)}.solaris-popover-panel__container[data-connected-side=bottom][data-form-field]{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.solaris-popover-panel__container[data-connected-side=top][data-form-field]{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.22", type: SolarisPopoverPanelComponent, isStandalone: true, selector: "solaris-popover-panel", host: { properties: { "attr.tabindex": "data.autoFocus === \"panel\" ? \"-1\" : null" }, classAttribute: "solaris-popover-panel" }, ngImport: i0, template: "<div\n  class=\"solaris-popover-panel__container\"\n  [attr.data-appearance]=\"data.appearance\"\n  [attr.data-padding]=\"data.padding\"\n  [attr.data-radius]=\"data.radius\"\n  [attr.data-connected-side]=\"data.connectedSide ?? null\"\n  [attr.role]=\"data.role\"\n  [id]=\"data.panelId\"\n  tabindex=\"-1\"\n>\n  <ng-container *ngTemplateOutlet=\"data.contentTemplate\" />\n</div>\n", styles: [":host{--solaris-popover-border-width: 0;--solaris-popover-min-width: auto;--solaris-popover-max-width: none;--solaris-popover-border-color: transparent;--solaris-popover-radius: var(--solaris-radius-md);--solaris-popover-shadow: var(--solaris-shadow-lg);--solaris-popover-padding: var(--solaris-spacing-3);--solaris-popover-color: var(--solaris-text-default);--solaris-popover-background: var(--solaris-surface-raised);width:100%;outline:none;display:block}.solaris-popover-panel__container{width:100%;outline:none;box-sizing:border-box;color:var(--solaris-popover-color);padding:var(--solaris-popover-padding);box-shadow:var(--solaris-popover-shadow);min-width:var(--solaris-popover-min-width);max-width:var(--solaris-popover-max-width);border-radius:var(--solaris-popover-radius);background:var(--solaris-popover-background);border:var(--solaris-popover-border-width) solid var(--solaris-popover-border-color)}.solaris-popover-panel__container[data-appearance=outline]{background:var(--solaris-surface-base);border:var(--solaris-border-width-sm) solid var(--solaris-border-subtle)}.solaris-popover-panel__container[data-appearance=filled]{border:var(--solaris-border-width-sm) solid var(--solaris-border-subtle)}.solaris-popover-panel__container[data-padding=none]{--solaris-popover-padding: 0}.solaris-popover-panel__container[data-padding=sm]{--solaris-popover-padding: var(--solaris-spacing-2)}.solaris-popover-panel__container[data-padding=md]{--solaris-popover-padding: var(--solaris-spacing-3)}.solaris-popover-panel__container[data-padding=lg]{--solaris-popover-padding: var(--solaris-spacing-4)}.solaris-popover-panel__container[data-radius=none]{border-radius:var(--solaris-radius-none)}.solaris-popover-panel__container[data-radius=sm]{border-radius:var(--solaris-radius-sm)}.solaris-popover-panel__container[data-radius=md]{border-radius:var(--solaris-radius-md)}.solaris-popover-panel__container[data-radius=lg]{border-radius:var(--solaris-radius-lg)}.solaris-popover-panel__container[data-radius=xl]{border-radius:var(--solaris-radius-xl)}.solaris-popover-panel__container[data-connected-side=bottom][data-form-field]{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.solaris-popover-panel__container[data-connected-side=top][data-form-field]{border-bottom:none;box-shadow:none;border-bottom-left-radius:0;border-bottom-right-radius:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisPopoverPanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'solaris-popover-panel', standalone: true, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'solaris-popover-panel',
                         '[attr.tabindex]': 'data.autoFocus === "panel" ? "-1" : null',
-                    }, template: "<div\n  class=\"solaris-popover-panel__container\"\n  [attr.data-appearance]=\"data.appearance\"\n  [attr.data-padding]=\"data.padding\"\n  [attr.data-radius]=\"data.radius\"\n  [attr.data-connected-side]=\"data.connectedSide ?? null\"\n  [attr.role]=\"data.role\"\n  [id]=\"data.panelId\"\n  tabindex=\"-1\"\n>\n  <ng-container *ngTemplateOutlet=\"data.contentTemplate\" />\n</div>\n", styles: [":host{--solaris-popover-border-width: 0;--solaris-popover-min-width: auto;--solaris-popover-max-width: none;--solaris-popover-border-color: transparent;--solaris-popover-radius: var(--solaris-radius-md);--solaris-popover-shadow: var(--solaris-shadow-lg);--solaris-popover-padding: var(--solaris-spacing-3);--solaris-popover-color: var(--solaris-text-default);--solaris-popover-background: var(--solaris-surface-raised);width:100%;outline:none;display:block}.solaris-popover-panel__container{width:100%;outline:none;box-sizing:border-box;color:var(--solaris-popover-color);padding:var(--solaris-popover-padding);box-shadow:var(--solaris-popover-shadow);min-width:var(--solaris-popover-min-width);max-width:var(--solaris-popover-max-width);border-radius:var(--solaris-popover-radius);background:var(--solaris-popover-background);border:var(--solaris-popover-border-width) solid var(--solaris-popover-border-color)}.solaris-popover-panel__container[data-appearance=outline]{background:var(--solaris-surface-base);border:var(--solaris-border-width-sm) solid var(--solaris-border-subtle)}.solaris-popover-panel__container[data-appearance=filled]{border:var(--solaris-border-width-sm) solid var(--solaris-border-subtle)}.solaris-popover-panel__container[data-padding=none]{--solaris-popover-padding: 0}.solaris-popover-panel__container[data-padding=sm]{--solaris-popover-padding: var(--solaris-spacing-2)}.solaris-popover-panel__container[data-padding=md]{--solaris-popover-padding: var(--solaris-spacing-3)}.solaris-popover-panel__container[data-padding=lg]{--solaris-popover-padding: var(--solaris-spacing-4)}.solaris-popover-panel__container[data-radius=none]{border-radius:var(--solaris-radius-none)}.solaris-popover-panel__container[data-radius=sm]{border-radius:var(--solaris-radius-sm)}.solaris-popover-panel__container[data-radius=md]{border-radius:var(--solaris-radius-md)}.solaris-popover-panel__container[data-radius=lg]{border-radius:var(--solaris-radius-lg)}.solaris-popover-panel__container[data-radius=xl]{border-radius:var(--solaris-radius-xl)}.solaris-popover-panel__container[data-connected-side=bottom][data-form-field]{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.solaris-popover-panel__container[data-connected-side=top][data-form-field]{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}\n"] }]
+                    }, template: "<div\n  class=\"solaris-popover-panel__container\"\n  [attr.data-appearance]=\"data.appearance\"\n  [attr.data-padding]=\"data.padding\"\n  [attr.data-radius]=\"data.radius\"\n  [attr.data-connected-side]=\"data.connectedSide ?? null\"\n  [attr.role]=\"data.role\"\n  [id]=\"data.panelId\"\n  tabindex=\"-1\"\n>\n  <ng-container *ngTemplateOutlet=\"data.contentTemplate\" />\n</div>\n", styles: [":host{--solaris-popover-border-width: 0;--solaris-popover-min-width: auto;--solaris-popover-max-width: none;--solaris-popover-border-color: transparent;--solaris-popover-radius: var(--solaris-radius-md);--solaris-popover-shadow: var(--solaris-shadow-lg);--solaris-popover-padding: var(--solaris-spacing-3);--solaris-popover-color: var(--solaris-text-default);--solaris-popover-background: var(--solaris-surface-raised);width:100%;outline:none;display:block}.solaris-popover-panel__container{width:100%;outline:none;box-sizing:border-box;color:var(--solaris-popover-color);padding:var(--solaris-popover-padding);box-shadow:var(--solaris-popover-shadow);min-width:var(--solaris-popover-min-width);max-width:var(--solaris-popover-max-width);border-radius:var(--solaris-popover-radius);background:var(--solaris-popover-background);border:var(--solaris-popover-border-width) solid var(--solaris-popover-border-color)}.solaris-popover-panel__container[data-appearance=outline]{background:var(--solaris-surface-base);border:var(--solaris-border-width-sm) solid var(--solaris-border-subtle)}.solaris-popover-panel__container[data-appearance=filled]{border:var(--solaris-border-width-sm) solid var(--solaris-border-subtle)}.solaris-popover-panel__container[data-padding=none]{--solaris-popover-padding: 0}.solaris-popover-panel__container[data-padding=sm]{--solaris-popover-padding: var(--solaris-spacing-2)}.solaris-popover-panel__container[data-padding=md]{--solaris-popover-padding: var(--solaris-spacing-3)}.solaris-popover-panel__container[data-padding=lg]{--solaris-popover-padding: var(--solaris-spacing-4)}.solaris-popover-panel__container[data-radius=none]{border-radius:var(--solaris-radius-none)}.solaris-popover-panel__container[data-radius=sm]{border-radius:var(--solaris-radius-sm)}.solaris-popover-panel__container[data-radius=md]{border-radius:var(--solaris-radius-md)}.solaris-popover-panel__container[data-radius=lg]{border-radius:var(--solaris-radius-lg)}.solaris-popover-panel__container[data-radius=xl]{border-radius:var(--solaris-radius-xl)}.solaris-popover-panel__container[data-connected-side=bottom][data-form-field]{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.solaris-popover-panel__container[data-connected-side=top][data-form-field]{border-bottom:none;box-shadow:none;border-bottom-left-radius:0;border-bottom-right-radius:0}\n"] }]
         }] });
 
 function getBasePosition(placement, align) {
@@ -5105,6 +5285,8 @@ class SolarisPopoverTriggerDirective {
     outsideClickCleanup = null;
     previousActiveElement = null;
     panelContainerRef = null;
+    panelDataRef = null;
+    panelComponentRef = null;
     fitContentSizeTimeout = null;
     connectedSide = 'bottom';
     solarisPopoverTriggerFor = input(undefined, { ...(ngDevMode ? { debugName: "solarisPopoverTriggerFor" } : /* istanbul ignore next */ {}), alias: 'solarisPopoverTriggerFor' });
@@ -5212,6 +5394,13 @@ class SolarisPopoverTriggerDirective {
         this.positionStrategy.positionChanges.subscribe((change) => {
             this.connectedSide =
                 change.connectionPair.originY === 'bottom' ? 'bottom' : 'top';
+            // Keep the panel data object in sync so the template
+            // [attr.data-connected-side] binding does not revert the
+            // flip on the next change detection cycle.
+            if (this.panelDataRef) {
+                this.panelDataRef.connectedSide = this.connectedSide;
+            }
+            this.panelComponentRef?.changeDetectorRef.markForCheck();
             if (this.panelContainerRef) {
                 this.panelContainerRef.setAttribute('data-connected-side', this.connectedSide);
                 if (this.solarisPopoverTopConnected()) {
@@ -5291,6 +5480,8 @@ class SolarisPopoverTriggerDirective {
         });
         const portal = new ComponentPortal(SolarisPopoverPanelComponent, this.viewContainerRef, panelInjector);
         const componentRef = this.overlayRef.attach(portal);
+        this.panelComponentRef = componentRef;
+        this.panelDataRef = data;
         this.panelContainerRef = componentRef.location.nativeElement.querySelector('.solaris-popover-panel__container');
         if (this.panelContainerRef && this.solarisPopoverFitContent()) {
             this.panelContainerRef.style.maxWidth = '100%';
@@ -5318,6 +5509,9 @@ class SolarisPopoverTriggerDirective {
             this.overlayRef.detach();
             this.disposeOverlay();
         }
+        else {
+            this.clearConnectedSideAttributes();
+        }
         this.removeOutsideClickHandler();
     }
     disposeOverlay() {
@@ -5326,12 +5520,24 @@ class SolarisPopoverTriggerDirective {
             this.fitContentSizeTimeout = null;
         }
         this.panelContainerRef = null;
+        this.panelDataRef = null;
+        this.panelComponentRef = null;
         if (this.overlayRef) {
             this.overlayRef.dispose();
             this.overlayRef = null;
         }
+        this.clearConnectedSideAttributes();
         this.removeOutsideClickHandler();
     }
+    clearConnectedSideAttributes() {
+        const host = this.elementRef.nativeElement;
+        if (!host) {
+            return;
+        }
+        host.removeAttribute('data-connected-side');
+        const formFieldWrapper = host.querySelector(':scope > .solaris-form-field__control-wrapper');
+        formFieldWrapper?.removeAttribute('data-connected-side');
+    }
     addOutsideClickHandler() {
         if (!this.solarisPopoverCloseOnOutsideClick()) {
             return;
@@ -5427,9 +5633,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 // SECURITY_EXCEPTION_FILE: nativeElement.focus() required to programmatically focus the select trigger. Standard DOM method used by Angular CDK.
 // SECURITY_EXCEPTION_FILE: nativeElement.focus() required as fallback when no triggerElement ref. Standard DOM method.
 // SECURITY_EXCEPTION_FILE: nativeElement.focus() required to focus search input when panel opens. Standard DOM method.
-// SECURITY_EXCEPTION_FILE: nativeElement required to access form-field DOM for connected-side sync. ElementRef SSR-safe.
-// SECURITY_EXCEPTION_FILE: nativeElement.querySelector required to find control-wrapper for connected-side sync.
-// SECURITY_EXCEPTION_FILE: nativeElement required to access form-field DOM for connected-side cleanup. ElementRef SSR-safe.
 // SECURITY_EXCEPTION_FILE: nativeElement access needed to read option text for search filtering. Read-only, SSR-safe.
 // SECURITY_EXCEPTION_FILE: nativeElement.textContent needed to read option text for search filtering. Read-only, SSR-safe.
 class SolarisSelectComponent extends SolarisFormControl {
@@ -5441,7 +5644,6 @@ class SolarisSelectComponent extends SolarisFormControl {
     popoverTrigger = viewChild(SolarisPopoverTriggerDirective, ...(ngDevMode ? [{ debugName: "popoverTrigger" }] : /* istanbul ignore next */ []));
     searchInputRef = viewChild('searchInput', ...(ngDevMode ? [{ debugName: "searchInputRef" }] : /* istanbul ignore next */ []));
     triggerElement = viewChild('triggerEl', ...(ngDevMode ? [{ debugName: "triggerElement" }] : /* istanbul ignore next */ []));
-    formFieldElement = viewChild('formFieldRef', ...(ngDevMode ? [{ debugName: "formFieldElement" }] : /* istanbul ignore next */ []));
     options = contentChildren(SolarisOptionComponent, { ...(ngDevMode ? { debugName: "options" } : /* istanbul ignore next */ {}), descendants: true });
     optionGroups = contentChildren(SolarisOptionGroupComponent, { ...(ngDevMode ? { debugName: "optionGroups" } : /* istanbul ignore next */ {}), descendants: true });
     hint = input(...(ngDevMode ? [undefined, { debugName: "hint" }] : /* istanbul ignore next */ []));
@@ -5810,7 +6012,6 @@ class SolarisSelectComponent extends SolarisFormControl {
         this.syncVisibility();
         this.opened.emit();
         this.openChange.emit(true);
-        this.setConnectedSide('bottom');
         if (this.searchable()) {
             requestAnimationFrame(() => {
                 this.searchInputRef()?.nativeElement.focus();
@@ -5824,25 +6025,6 @@ class SolarisSelectComponent extends SolarisFormControl {
         this.closed.emit();
         this.openChange.emit(false);
         this.markAsTouched();
-        this.clearConnectedSide();
-    }
-    setConnectedSide(side) {
-        const el = this.formFieldElement()?.nativeElement;
-        if (el) {
-            const wrapper = el.querySelector('.solaris-form-field__control-wrapper');
-            if (wrapper) {
-                wrapper.setAttribute('data-connected-side', side);
-            }
-        }
-    }
-    clearConnectedSide() {
-        const el = this.formFieldElement()?.nativeElement;
-        if (el) {
-            const wrapper = el.querySelector('.solaris-form-field__control-wrapper');
-            if (wrapper) {
-                wrapper.removeAttribute('data-connected-side');
-            }
-        }
     }
     selectOption(option) {
         if (option.isEffectivelyDisabled())
@@ -6172,7 +6354,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\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", "solarisPopoverFitContent", "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 }], usesInheritance: true, ngImport: i0, template: "<solaris-form-field\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-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", "solarisPopoverFitContent", "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.22", ngImport: i0, type: SolarisSelectComponent, decorators: [{
             type: Component,
@@ -6199,8 +6381,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", 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\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), { ...{
+                    }, template: "<solaris-form-field\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-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 }] }], options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SolarisOptionComponent), { ...{
                             descendants: true,
                         }, isSignal: true }] }], optionGroups: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SolarisOptionGroupComponent), { ...{
                             descendants: true,
@@ -6835,9 +7017,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 // SECURITY_EXCEPTION_FILE: nativeElement.focus() required as fallback when no triggerElement ref. Standard DOM method.
 // SECURITY_EXCEPTION_FILE: nativeElement access needed to measure trigger content width for auto display mode. ResizeObserver is SSR-safe (guarded by typeof check). offsetWidth is read-only, no XSS risk.
 // SECURITY_EXCEPTION_FILE: nativeElement.focus() required to focus search input when panel opens. Standard DOM method.
-// SECURITY_EXCEPTION_FILE: nativeElement required to access form-field DOM for connected-side sync. ElementRef SSR-safe.
-// SECURITY_EXCEPTION_FILE: nativeElement.querySelector required to find control-wrapper for connected-side sync.
-// SECURITY_EXCEPTION_FILE: nativeElement required to access form-field DOM for connected-side cleanup. ElementRef SSR-safe.
 // SECURITY_EXCEPTION_FILE: nativeElement.focus() required to restore focus to search input after selection. ElementRef SSR-safe.
 // SECURITY_EXCEPTION_FILE: nativeElement access needed to read option text for search filtering. Read-only, SSR-safe.
 // SECURITY_EXCEPTION_FILE: nativeElement.textContent needed to read option text for search filtering. Read-only, SSR-safe.
@@ -6857,7 +7036,6 @@ class SolarisMultiSelectComponent extends SolarisFormControl {
     popoverTrigger = viewChild(SolarisPopoverTriggerDirective, ...(ngDevMode ? [{ debugName: "popoverTrigger" }] : /* istanbul ignore next */ []));
     searchInputRef = viewChild('searchInput', ...(ngDevMode ? [{ debugName: "searchInputRef" }] : /* istanbul ignore next */ []));
     triggerElement = viewChild('triggerEl', ...(ngDevMode ? [{ debugName: "triggerElement" }] : /* istanbul ignore next */ []));
-    formFieldElement = viewChild('formFieldRef', ...(ngDevMode ? [{ debugName: "formFieldElement" }] : /* istanbul ignore next */ []));
     options = contentChildren(SolarisOptionComponent, { ...(ngDevMode ? { debugName: "options" } : /* istanbul ignore next */ {}), descendants: true });
     optionGroups = contentChildren(SolarisOptionGroupComponent, { ...(ngDevMode ? { debugName: "optionGroups" } : /* istanbul ignore next */ {}), descendants: true });
     hint = input(...(ngDevMode ? [undefined, { debugName: "hint" }] : /* istanbul ignore next */ []));
@@ -7415,7 +7593,6 @@ class SolarisMultiSelectComponent extends SolarisFormControl {
         this.syncVisibility();
         this.opened.emit();
         this.openChange.emit(true);
-        this.setConnectedSide('bottom');
         if (this.searchable()) {
             requestAnimationFrame(() => {
                 this.searchInputRef()?.nativeElement.focus();
@@ -7429,25 +7606,6 @@ class SolarisMultiSelectComponent extends SolarisFormControl {
         this.closed.emit();
         this.openChange.emit(false);
         this.markAsTouched();
-        this.clearConnectedSide();
-    }
-    setConnectedSide(side) {
-        const el = this.formFieldElement()?.nativeElement;
-        if (el) {
-            const wrapper = el.querySelector('.solaris-form-field__control-wrapper');
-            if (wrapper) {
-                wrapper.setAttribute('data-connected-side', side);
-            }
-        }
-    }
-    clearConnectedSide() {
-        const el = this.formFieldElement()?.nativeElement;
-        if (el) {
-            const wrapper = el.querySelector('.solaris-form-field__control-wrapper');
-            if (wrapper) {
-                wrapper.removeAttribute('data-connected-side');
-            }
-        }
     }
     toggleOption(option) {
         if (option.isEffectivelyDisabled())
@@ -7858,7 +8016,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\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", "solarisPopoverFitContent", "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: "triggerContentRef", first: true, predicate: ["triggerContent"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<solaris-form-field\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", "solarisPopoverFitContent", "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.22", ngImport: i0, type: SolarisMultiSelectComponent, decorators: [{
             type: Component,
@@ -7886,8 +8044,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", 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\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), { ...{
+                    }, template: "<solaris-form-field\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 }] }], options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SolarisOptionComponent), { ...{
                             descendants: true,
                         }, isSignal: true }] }], optionGroups: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SolarisOptionGroupComponent), { ...{
                             descendants: true,
@@ -8890,6 +9048,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                     }, template: "<label class=\"solaris-radio__label\" [for]=\"elementId()\">\n  <input\n    type=\"radio\"\n    class=\"solaris-radio__input\"\n    [id]=\"elementId()\"\n    [checked]=\"_checked()\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [required]=\"required\"\n    [attr.aria-label]=\"effectiveAriaLabel() ?? null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    [attr.aria-invalid]=\"isEffectivelyInvalid() ? 'true' : null\"\n    [attr.name]=\"effectiveName() ?? null\"\n    (change)=\"onInputChange($event)\"\n    (blur)=\"onBlur()\"\n    (focus)=\"onFocus()\"\n    #inputElement\n  />\n  <span class=\"solaris-radio__control\" aria-hidden=\"true\">\n    @if (_checked()) {\n      <span class=\"solaris-radio__dot\"></span>\n    }\n  </span>\n  @if (hasProjectedContent()) {\n    <span class=\"solaris-radio__label-text\" [id]=\"elementId() + '-label'\">\n      <ng-content />\n    </span>\n  } @else if (labelText(); as text) {\n    <span class=\"solaris-radio__label-text\" [id]=\"elementId() + '-label'\">\n      {{ text }}\n    </span>\n  }\n</label>\n", styles: [":host{--solaris-radio-dot-color: transparent;--solaris-radio-background: transparent;--solaris-radio-ring-color: transparent;--solaris-radio-custom-surface: initial;--solaris-radio-custom-ring-color: initial;--solaris-radio-readonly-background: initial;--solaris-radio-custom-border-color: initial;--solaris-radio-gap: var(--solaris-spacing-2);--solaris-radio-size: var(--solaris-spacing-5);--solaris-radio-custom-indicator-color: initial;--solaris-radio-dot-size: var(--solaris-spacing-2);--solaris-radio-border-color: var(--solaris-primary-border);--solaris-radio-disabled-opacity: var(--solaris-opacity-50);--solaris-radio-label-font-size: var(--solaris-font-size-md);--solaris-radio-focus-ring-color: var(--solaris-primary-base);--solaris-radio-ring-width: var(--solaris-spacing-half);--solaris-radio-label-line-height: var(--solaris-line-height-md);outline:none;display:inline-flex;vertical-align:middle}.solaris-radio__label{cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;align-items:center;display:inline-flex;gap:var(--solaris-radio-gap)}.solaris-radio__input{width:0;height:0;margin:0;opacity:0;padding:0;position:absolute;pointer-events:none}.solaris-radio__control{display:flex;flex-shrink:0;border-radius:50%;position:relative;align-items:center;box-sizing:border-box;justify-content:center;width:var(--solaris-radio-size);height:var(--solaris-radio-size);background:var(--solaris-radio-background);border:var(--solaris-radio-ring-width) solid var(--solaris-radio-border-color);transition:background-color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard),border-color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard),box-shadow var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-radio__dot{display:block;border-radius:50%;box-sizing:border-box;width:var(--solaris-radio-dot-size);height:var(--solaris-radio-dot-size);background:var(--solaris-radio-dot-color)}.solaris-radio__label-text{color:inherit;font-size:var(--solaris-radio-label-font-size);line-height:var(--solaris-radio-label-line-height)}:host([data-size=sm]){--solaris-radio-gap: var(--solaris-spacing-2);--solaris-radio-size: var(--solaris-spacing-4);--solaris-radio-label-font-size: var(--solaris-font-size-sm);--solaris-radio-dot-size: calc(var(--solaris-spacing-1) * 1.5);--solaris-radio-ring-width: var(--solaris-spacing-half);--solaris-radio-label-line-height: var(--solaris-line-height-sm)}:host([data-size=md]){--solaris-radio-gap: var(--solaris-spacing-2);--solaris-radio-size: var(--solaris-spacing-5);--solaris-radio-dot-size: var(--solaris-spacing-2);--solaris-radio-label-font-size: var(--solaris-font-size-md);--solaris-radio-ring-width: var(--solaris-spacing-half);--solaris-radio-label-line-height: var(--solaris-line-height-md)}:host([data-size=lg]){--solaris-radio-gap: var(--solaris-spacing-3);--solaris-radio-size: var(--solaris-spacing-6);--solaris-radio-label-font-size: var(--solaris-font-size-lg);--solaris-radio-dot-size: calc(var(--solaris-spacing-1) * 2.5);--solaris-radio-label-line-height: var(--solaris-line-height-lg);--solaris-radio-ring-width: calc(var(--solaris-spacing-1) * .75)}:host([data-density=compact]){--solaris-radio-gap: var(--solaris-spacing-1)}:host([data-density=normal]){--solaris-radio-gap: var(--solaris-spacing-2)}:host([data-density=comfortable]){--solaris-radio-gap: var(--solaris-spacing-3)}:host([data-appearance=outline]){--solaris-radio-background: transparent}:host([data-appearance=surface]){--solaris-radio-border-color: transparent;--solaris-radio-ring-width: var(--solaris-spacing-0);--solaris-radio-background: var(--solaris-surface-muted)}:host([data-appearance=surface][data-checked]){--solaris-radio-background: transparent;--solaris-radio-ring-width: var(--solaris-spacing-half)}:host([data-color=neutral]){--solaris-radio-border-color: var(--solaris-border-default)}:host([data-color=neutral][data-checked]){--solaris-radio-dot-color: var(--solaris-text-default);--solaris-radio-ring-color: var(--solaris-text-default);--solaris-radio-border-color: var(--solaris-text-default)}:host([data-color=primary]){--solaris-radio-border-color: var(--solaris-primary-border);--solaris-radio-focus-ring-color: var(--solaris-primary-base)}:host([data-color=primary][data-checked]){--solaris-radio-dot-color: var(--solaris-primary-base);--solaris-radio-ring-color: var(--solaris-primary-base);--solaris-radio-border-color: var(--solaris-primary-base)}:host([data-color=success]){--solaris-radio-border-color: var(--solaris-success-border);--solaris-radio-focus-ring-color: var(--solaris-success-base)}:host([data-color=success][data-checked]){--solaris-radio-dot-color: var(--solaris-success-base);--solaris-radio-ring-color: var(--solaris-success-base);--solaris-radio-border-color: var(--solaris-success-base)}:host([data-color=warning]){--solaris-radio-border-color: var(--solaris-warning-border);--solaris-radio-focus-ring-color: var(--solaris-warning-base)}:host([data-color=warning][data-checked]){--solaris-radio-dot-color: var(--solaris-warning-base);--solaris-radio-ring-color: var(--solaris-warning-base);--solaris-radio-border-color: var(--solaris-warning-base)}:host([data-color=danger]){--solaris-radio-border-color: var(--solaris-danger-border);--solaris-radio-focus-ring-color: var(--solaris-danger-base)}:host([data-color=danger][data-checked]){--solaris-radio-dot-color: var(--solaris-danger-base);--solaris-radio-ring-color: var(--solaris-danger-base);--solaris-radio-border-color: var(--solaris-danger-base)}:host([data-color=info]){--solaris-radio-border-color: var(--solaris-info-border);--solaris-radio-focus-ring-color: var(--solaris-info-base)}:host([data-color=info][data-checked]){--solaris-radio-dot-color: var(--solaris-info-base);--solaris-radio-ring-color: var(--solaris-info-base);--solaris-radio-border-color: var(--solaris-info-base)}:host([data-color=custom]){--solaris-radio-background: var(--solaris-radio-custom-surface);--solaris-radio-border-color: var(--solaris-radio-custom-border-color)}:host([data-color=custom][data-checked]){--solaris-radio-ring-color: var(--solaris-radio-custom-ring-color);--solaris-radio-border-color: var(--solaris-radio-custom-ring-color);--solaris-radio-dot-color: var(--solaris-radio-custom-indicator-color)}.solaris-radio__label:hover .solaris-radio__control{border-color:var(--solaris-radio-border-color)}:host([data-color=primary]) .solaris-radio__label:hover .solaris-radio__control{border-color:var(--solaris-primary-hover)}:host([data-color=success]) .solaris-radio__label:hover .solaris-radio__control{border-color:var(--solaris-success-hover)}:host([data-color=warning]) .solaris-radio__label:hover .solaris-radio__control{border-color:var(--solaris-warning-hover)}:host([data-color=danger]) .solaris-radio__label:hover .solaris-radio__control{border-color:var(--solaris-danger-hover)}:host([data-color=info]) .solaris-radio__label:hover .solaris-radio__control{border-color:var(--solaris-info-hover)}.solaris-radio__input:focus-visible+.solaris-radio__control{outline-offset:var(--solaris-spacing-half);outline:var(--solaris-border-width-sm) solid var(--solaris-radio-focus-ring-color)}:host([data-invalid]){--solaris-radio-border-color: var(--solaris-danger-base);--solaris-radio-focus-ring-color: var(--solaris-danger-base)}:host([data-invalid][data-checked]){--solaris-radio-dot-color: var(--solaris-danger-base);--solaris-radio-ring-color: var(--solaris-danger-base);--solaris-radio-border-color: var(--solaris-danger-base)}:host([data-invalid]) .solaris-radio__label:hover .solaris-radio__control{border-color:var(--solaris-danger-base)}:host([data-disabled]){--solaris-radio-disabled-opacity: var(--solaris-opacity-50)}:host([data-disabled]) .solaris-radio__label{cursor:not-allowed}:host([data-disabled]) .solaris-radio__control{opacity:var(--solaris-radio-disabled-opacity)}:host([data-disabled]) .solaris-radio__label-text{opacity:var(--solaris-radio-disabled-opacity)}:host([data-readonly]),:host([data-readonly][data-checked]){--solaris-radio-readonly-opacity: .65;--solaris-radio-dot-color: var(--solaris-text-muted);--solaris-radio-ring-color: var(--solaris-text-muted);--solaris-radio-border-color: var(--solaris-border-subtle)}:host([data-readonly]) .solaris-radio__label{cursor:not-allowed}:host([data-readonly]) .solaris-radio__control,:host([data-readonly]) .solaris-radio__label-text{opacity:var(--solaris-radio-readonly-opacity)}:host([data-readonly]) .solaris-radio__label:hover .solaris-radio__control{border-color:var(--solaris-radio-border-color)}:host([data-readonly][data-checked]) .solaris-radio__control{border-color:var(--solaris-radio-ring-color);background:var(--solaris-radio-readonly-background)}:host([data-readonly][data-checked]) .solaris-radio__dot{background:var(--solaris-radio-dot-color)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { inputElementRef: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonlyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], requiredInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], radioLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelKey", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }], changeEvent: [{ type: i0.Output, args: ["changeEvent"] }] } });
 
+class SolarisSelectionCardFooterDirective {
+    separator = input(true, { ...(ngDevMode ? { debugName: "separator" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisSelectionCardFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.22", type: SolarisSelectionCardFooterDirective, isStandalone: true, selector: "[solaris-selection-card-footer]", inputs: { separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-separator": "separator() ? '' : null" }, classAttribute: "solaris-selection-card-footer" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisSelectionCardFooterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[solaris-selection-card-footer]',
+                    standalone: true,
+                    host: {
+                        class: 'solaris-selection-card-footer',
+                        '[attr.data-separator]': "separator() ? '' : null",
+                    },
+                }]
+        }], propDecorators: { separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }] } });
+
+class SolarisSelectionCardHeaderDirective {
+    separator = input(true, { ...(ngDevMode ? { debugName: "separator" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisSelectionCardHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.22", type: SolarisSelectionCardHeaderDirective, isStandalone: true, selector: "[solaris-selection-card-header]", inputs: { separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-separator": "separator() ? '' : null" }, classAttribute: "solaris-selection-card-header" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisSelectionCardHeaderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[solaris-selection-card-header]',
+                    standalone: true,
+                    host: {
+                        class: 'solaris-selection-card-header',
+                        '[attr.data-separator]': "separator() ? '' : null",
+                    },
+                }]
+        }], propDecorators: { separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }] } });
+
 class SolarisSelectionCardMediaDirective {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisSelectionCardMediaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: SolarisSelectionCardMediaDirective, isStandalone: true, selector: "[solaris-selection-card-media]", host: { classAttribute: "solaris-selection-card-media" }, ngImport: i0 });
@@ -8912,6 +9104,8 @@ class SolarisSelectionCardComponent extends SolarisFormControl {
     groupName = inject(SOLARIS_RADIO_GROUP_NAME, { optional: true }) ?? null;
     inputElementRef = viewChild('inputElement', ...(ngDevMode ? [{ debugName: "inputElementRef" }] : /* istanbul ignore next */ []));
     media = contentChild(SolarisSelectionCardMediaDirective, ...(ngDevMode ? [{ debugName: "media" }] : /* istanbul ignore next */ []));
+    header = contentChild(SolarisSelectionCardHeaderDirective, ...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
+    footer = contentChild(SolarisSelectionCardFooterDirective, ...(ngDevMode ? [{ debugName: "footer" }] : /* istanbul ignore next */ []));
     _checked = signal(false, ...(ngDevMode ? [{ debugName: "_checked" }] : /* istanbul ignore next */ []));
     _focused = signal(false, ...(ngDevMode ? [{ debugName: "_focused" }] : /* istanbul ignore next */ []));
     _describedByIds = signal([], ...(ngDevMode ? [{ debugName: "_describedByIds" }] : /* istanbul ignore next */ []));
@@ -8934,6 +9128,9 @@ class SolarisSelectionCardComponent extends SolarisFormControl {
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     radius = input('lg', ...(ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []));
     density = input(...(ngDevMode ? [undefined, { debugName: "density" }] : /* istanbul ignore next */ []));
+    selection = input('radio', ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
+    selectionPosition = input('start', ...(ngDevMode ? [{ debugName: "selectionPosition" }] : /* istanbul ignore next */ []));
+    mediaPosition = input('top', ...(ngDevMode ? [{ debugName: "mediaPosition" }] : /* istanbul ignore next */ []));
     name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ []));
     value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
     ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
@@ -8943,12 +9140,16 @@ class SolarisSelectionCardComponent extends SolarisFormControl {
     themeService = inject(SolarisThemeService);
     effectiveDensity = computed(() => this.density() ?? this.themeService.density, ...(ngDevMode ? [{ debugName: "effectiveDensity" }] : /* istanbul ignore next */ []));
     hasMedia = computed(() => this.media() !== undefined, ...(ngDevMode ? [{ debugName: "hasMedia" }] : /* istanbul ignore next */ []));
+    hasFooter = computed(() => this.footer() !== undefined, ...(ngDevMode ? [{ debugName: "hasFooter" }] : /* istanbul ignore next */ []));
+    hasHeaderSeparator = computed(() => this.header()?.separator() ?? false, ...(ngDevMode ? [{ debugName: "hasHeaderSeparator" }] : /* istanbul ignore next */ []));
+    hasFooterSeparator = computed(() => this.footer()?.separator() ?? false, ...(ngDevMode ? [{ debugName: "hasFooterSeparator" }] : /* istanbul ignore next */ []));
+    isSwitchSelection = computed(() => this.selection() === 'switch', ...(ngDevMode ? [{ debugName: "isSwitchSelection" }] : /* istanbul ignore next */ []));
     isEffectivelyDisabled = computed(() => this.disabledInput() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isEffectivelyDisabled" }] : /* istanbul ignore next */ []));
     isEffectivelyReadonly = computed(() => this.readonlyInput() || this.cvaReadonly(), ...(ngDevMode ? [{ debugName: "isEffectivelyReadonly" }] : /* istanbul ignore next */ []));
     isEffectivelyInvalid = computed(() => this.invalidInput() ?? false, ...(ngDevMode ? [{ debugName: "isEffectivelyInvalid" }] : /* istanbul ignore next */ []));
     elementId = computed(() => resolveElementId(this.elementRef, 'solaris-selection-card'), ...(ngDevMode ? [{ debugName: "elementId" }] : /* istanbul ignore next */ []));
     contentId = computed(() => `${this.elementId()}-content`, ...(ngDevMode ? [{ debugName: "contentId" }] : /* istanbul ignore next */ []));
-    effectiveName = computed(() => this.name() ?? this.groupName, ...(ngDevMode ? [{ debugName: "effectiveName" }] : /* istanbul ignore next */ []));
+    effectiveName = computed(() => this.name() ?? (this.isSwitchSelection() ? null : this.groupName), ...(ngDevMode ? [{ debugName: "effectiveName" }] : /* istanbul ignore next */ []));
     ariaDescribedBy = computed(() => {
         const ids = this._describedByIds();
         return ids.length > 0 ? ids.join(' ') : null;
@@ -9042,7 +9243,7 @@ class SolarisSelectionCardComponent extends SolarisFormControl {
         this.onTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisSelectionCardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: SolarisSelectionCardComponent, isStandalone: true, selector: "solaris-selection-card", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonlyInput: { classPropertyName: "readonlyInput", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, requiredInput: { classPropertyName: "requiredInput", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", 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 }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", 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: { checkedChange: "checkedChange", changeEvent: "changeEvent" }, host: { properties: { "attr.data-appearance": "appearance()", "attr.data-color": "color()", "attr.data-size": "size()", "attr.data-radius": "radius()", "attr.data-density": "effectiveDensity()", "attr.data-checked": "_checked() ? \"\" : null", "attr.data-disabled": "isEffectivelyDisabled() ? \"\" : null", "attr.data-readonly": "isEffectivelyReadonly() ? \"\" : null", "attr.data-invalid": "isEffectivelyInvalid() ? \"\" : null", "attr.data-focused": "_focused() ? \"\" : null", "attr.data-has-media": "hasMedia() ? \"\" : null" }, classAttribute: "solaris-selection-card" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: SolarisSelectionCardComponent, isStandalone: true, selector: "solaris-selection-card", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonlyInput: { classPropertyName: "readonlyInput", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, requiredInput: { classPropertyName: "requiredInput", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", 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 }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, selectionPosition: { classPropertyName: "selectionPosition", publicName: "selectionPosition", isSignal: true, isRequired: false, transformFunction: null }, mediaPosition: { classPropertyName: "mediaPosition", publicName: "mediaPosition", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", 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: { checkedChange: "checkedChange", changeEvent: "changeEvent" }, host: { properties: { "attr.data-appearance": "appearance()", "attr.data-color": "color()", "attr.data-size": "size()", "attr.data-radius": "radius()", "attr.data-density": "effectiveDensity()", "attr.data-selection": "selection()", "attr.data-selection-position": "selectionPosition()", "attr.data-media-position": "mediaPosition()", "attr.data-checked": "_checked() ? \"\" : null", "attr.data-disabled": "isEffectivelyDisabled() ? \"\" : null", "attr.data-readonly": "isEffectivelyReadonly() ? \"\" : null", "attr.data-invalid": "isEffectivelyInvalid() ? \"\" : null", "attr.data-focused": "_focused() ? \"\" : null", "attr.data-has-media": "hasMedia() ? \"\" : null", "attr.data-has-footer": "hasFooter() ? \"\" : null", "attr.data-header-separator": "hasHeaderSeparator() ? \"\" : null", "attr.data-footer-separator": "hasFooterSeparator() ? \"\" : null" }, classAttribute: "solaris-selection-card" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SolarisSelectionCardComponent),
@@ -9056,7 +9257,7 @@ class SolarisSelectionCardComponent extends SolarisFormControl {
                 provide: SOLARIS_RADIO_OPTION,
                 useExisting: forwardRef(() => SolarisSelectionCardComponent),
             },
-        ], queries: [{ propertyName: "media", first: true, predicate: SolarisSelectionCardMediaDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<input\n  #inputElement\n  type=\"radio\"\n  class=\"solaris-selection-card__input\"\n  [id]=\"elementId()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [required]=\"required\"\n  [attr.name]=\"effectiveName() ?? null\"\n  [attr.aria-label]=\"effectiveAriaLabel() ?? null\"\n  [attr.aria-labelledby]=\"ariaLabelledBy()\"\n  [attr.aria-describedby]=\"ariaDescribedBy()\"\n  [attr.aria-invalid]=\"isEffectivelyInvalid() ? 'true' : null\"\n  [attr.aria-readonly]=\"isEffectivelyReadonly() ? 'true' : null\"\n  (change)=\"onInputChange($event)\"\n  (focus)=\"onFocus()\"\n  (blur)=\"onBlur()\"\n/>\n<div class=\"solaris-selection-card__surface\">\n  <ng-content select=\"[solaris-selection-card-media]\" />\n  <div class=\"solaris-selection-card__body\">\n    <span class=\"solaris-selection-card__control\" aria-hidden=\"true\">\n      @if (_checked()) {\n        <span class=\"solaris-selection-card__dot\"></span>\n      }\n    </span>\n    <div class=\"solaris-selection-card__content\" [id]=\"contentId()\">\n      <ng-content select=\"[solaris-selection-card-header]\" />\n      <ng-content select=\"[solaris-selection-card-content]\" />\n      <ng-content />\n      <ng-content select=\"[solaris-selection-card-footer]\" />\n    </div>\n  </div>\n</div>\n", styles: [":host{--solaris-selection-card-gap: var(--solaris-spacing-4);--solaris-selection-card-radius: var(--solaris-radius-lg);--solaris-selection-card-padding: var(--solaris-spacing-6);--solaris-selection-card-color: var(--solaris-text-default);--solaris-selection-card-background: var(--solaris-surface-base);--solaris-selection-card-indicator-size: var(--solaris-spacing-5);--solaris-selection-card-border-color: var(--solaris-border-subtle);--solaris-selection-card-disabled-opacity: var(--solaris-opacity-50);--solaris-selection-card-border-width: var(--solaris-border-width-sm);--solaris-selection-card-indicator-dot-size: var(--solaris-spacing-2);--solaris-selection-card-hover-background: var(--solaris-surface-subtle);--solaris-selection-card-active-background: var(--solaris-surface-muted);--solaris-selection-card-focus-ring-color: var(--solaris-text-default);--solaris-selection-card-indicator-dot-color: var(--solaris-text-default);--solaris-selection-card-selected-background: var(--solaris-surface-muted);--solaris-selection-card-selected-border-color: var(--solaris-border-default);--solaris-selection-card-indicator-border-color: var( --solaris-border-default );--solaris-selection-card-glass-background: initial;--solaris-selection-card-glass-border-color: initial;--solaris-selection-card-custom-focus-ring-color: initial;--solaris-selection-card-custom-indicator-dot-color: initial;--solaris-selection-card-custom-selected-background: initial;--solaris-selection-card-custom-selected-border-color: initial;--solaris-selection-card-custom-indicator-border-color: initial;display:block;position:relative;box-sizing:border-box}.solaris-selection-card__input{inset:0;margin:0;opacity:0;width:100%;height:100%;cursor:pointer;position:absolute;z-index:var(--solaris-z-index-content)}.solaris-selection-card__surface{overflow:hidden;position:relative;box-sizing:border-box;color:var(--solaris-selection-card-color);border-radius:var(--solaris-selection-card-radius);background:var(--solaris-selection-card-background);border:var(--solaris-selection-card-border-width) solid var(--solaris-selection-card-border-color);transition:background-color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard),border-color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard),box-shadow var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-selection-card__body{display:flex;min-height:var(--solaris-density-min-height);box-sizing:border-box;align-items:flex-start;gap:var(--solaris-selection-card-gap);padding:var(--solaris-selection-card-padding)}.solaris-selection-card__content{flex:1;min-width:0}.solaris-selection-card__control{display:flex;flex-shrink:0;border-radius:50%;align-items:center;box-sizing:border-box;justify-content:center;width:var(--solaris-selection-card-indicator-size);height:var(--solaris-selection-card-indicator-size);border:var(--solaris-border-width-sm) solid var(--solaris-selection-card-indicator-border-color)}:host([data-has-media]) .solaris-selection-card__control{top:var(--solaris-selection-card-padding);right:var(--solaris-selection-card-padding);position:absolute;background:var(--solaris-surface-base)}.solaris-selection-card__dot{display:block;border-radius:50%;width:var(--solaris-selection-card-indicator-dot-size);height:var(--solaris-selection-card-indicator-dot-size);background:var(--solaris-selection-card-indicator-dot-color)}:host ::ng-deep .solaris-selection-card-media{margin:0;display:block;overflow:hidden}:host ::ng-deep .solaris-selection-card-media img,:host ::ng-deep .solaris-selection-card-media video,:host ::ng-deep .solaris-selection-card-media picture{width:100%;display:block}:host ::ng-deep .solaris-selection-card-header{display:flex;flex-direction:column;gap:var(--solaris-spacing-1)}:host ::ng-deep .solaris-selection-card-content{display:block;margin-top:var(--solaris-selection-card-gap)}:host ::ng-deep .solaris-selection-card-footer{display:flex;flex-wrap:wrap;align-items:center;gap:var(--solaris-spacing-2);margin-top:var(--solaris-selection-card-gap)}:host ::ng-deep .solaris-selection-card-footer[data-separator]{padding-top:var(--solaris-selection-card-gap);border-top:var(--solaris-border-width-sm) solid var(--solaris-selection-card-border-color)}:host ::ng-deep .solaris-selection-card-title{margin:0;color:var(--solaris-text-strong);font:var(--solaris-font-weight-semibold) var(--solaris-font-size-lg)/var(--solaris-line-height-sm) var(--solaris-font-family-sans)}:host ::ng-deep .solaris-selection-card-description{margin:0;color:var(--solaris-text-muted);font:var(--solaris-font-weight-regular) var(--solaris-font-size-sm)/var(--solaris-line-height-md) var(--solaris-font-family-sans)}:host([data-size=sm]){--solaris-selection-card-gap: var(--solaris-spacing-3);--solaris-selection-card-padding: var(--solaris-spacing-4);--solaris-selection-card-indicator-size: var(--solaris-spacing-4);--solaris-selection-card-indicator-dot-size: calc( var(--solaris-spacing-1) * 1.5 )}:host([data-size=lg]){--solaris-selection-card-gap: var(--solaris-spacing-5);--solaris-selection-card-padding: var(--solaris-spacing-8);--solaris-selection-card-indicator-size: var(--solaris-spacing-6);--solaris-selection-card-indicator-dot-size: calc( var(--solaris-spacing-1) * 2.5 )}:host([data-density=compact]){--solaris-selection-card-gap: var(--solaris-density-gap-lg);--solaris-selection-card-padding: var(--solaris-density-padding-xl)}:host([data-density=comfortable]){--solaris-selection-card-gap: var(--solaris-density-gap-lg);--solaris-selection-card-padding: var(--solaris-density-padding-xl)}:host([data-radius=none]){--solaris-selection-card-radius: var(--solaris-radius-none)}:host([data-radius=sm]){--solaris-selection-card-radius: var(--solaris-radius-sm)}:host([data-radius=xl]){--solaris-selection-card-radius: var(--solaris-radius-xl)}:host([data-appearance=outline]){--solaris-selection-card-background: transparent;--solaris-selection-card-border-color: var(--solaris-border-default)}:host([data-appearance=tonal]){--solaris-selection-card-background: var(--solaris-surface-subtle);--solaris-selection-card-border-color: var(--solaris-border-subtle)}:host([data-appearance=glass]) .solaris-selection-card__surface{--solaris-selection-card-color: var(--solaris-text-glass);--solaris-selection-card-glass-background: var(--solaris-glass-background);--solaris-selection-card-glass-border-color: var( --solaris-glass-border-color );isolation:isolate;background:var(--solaris-selection-card-glass-background);border-color:var(--solaris-selection-card-glass-border-color);box-shadow:var(--solaris-glass-shadow);backdrop-filter:var(--solaris-glass-backdrop-filter);-webkit-backdrop-filter:var(--solaris-glass-backdrop-filter)}:host([data-appearance=glass][data-checked]) .solaris-selection-card__surface{background:var(--solaris-selection-card-background);border-color:var(--solaris-selection-card-border-color)}:host([data-appearance=glass]) ::ng-deep .solaris-selection-card-description{color:var(--solaris-text-glass)}:host([data-color=primary]){--solaris-selection-card-focus-ring-color: var(--solaris-primary-base);--solaris-selection-card-indicator-dot-color: var(--solaris-primary-base);--solaris-selection-card-selected-background: var(--solaris-primary-surface);--solaris-selection-card-selected-border-color: var(--solaris-primary-border);--solaris-selection-card-indicator-border-color: var( --solaris-primary-border )}:host([data-color=success]){--solaris-selection-card-focus-ring-color: var(--solaris-success-base);--solaris-selection-card-indicator-dot-color: var(--solaris-success-base);--solaris-selection-card-selected-background: var(--solaris-success-surface);--solaris-selection-card-selected-border-color: var(--solaris-success-border);--solaris-selection-card-indicator-border-color: var( --solaris-success-border )}:host([data-color=warning]){--solaris-selection-card-focus-ring-color: var(--solaris-warning-base);--solaris-selection-card-indicator-dot-color: var(--solaris-warning-base);--solaris-selection-card-selected-background: var(--solaris-warning-surface);--solaris-selection-card-selected-border-color: var(--solaris-warning-border);--solaris-selection-card-indicator-border-color: var( --solaris-warning-border )}:host([data-color=danger]){--solaris-selection-card-focus-ring-color: var(--solaris-danger-base);--solaris-selection-card-indicator-dot-color: var(--solaris-danger-base);--solaris-selection-card-selected-background: var(--solaris-danger-surface);--solaris-selection-card-selected-border-color: var(--solaris-danger-border);--solaris-selection-card-indicator-border-color: var(--solaris-danger-border)}:host([data-color=info]){--solaris-selection-card-focus-ring-color: var(--solaris-info-base);--solaris-selection-card-indicator-dot-color: var(--solaris-info-base);--solaris-selection-card-selected-background: var(--solaris-info-surface);--solaris-selection-card-selected-border-color: var(--solaris-info-border);--solaris-selection-card-indicator-border-color: var(--solaris-info-border)}:host([data-color=custom]){--solaris-selection-card-focus-ring-color: var( --solaris-selection-card-custom-focus-ring-color );--solaris-selection-card-indicator-dot-color: var( --solaris-selection-card-custom-indicator-dot-color );--solaris-selection-card-selected-background: var( --solaris-selection-card-custom-selected-background );--solaris-selection-card-selected-border-color: var( --solaris-selection-card-custom-selected-border-color );--solaris-selection-card-indicator-border-color: var( --solaris-selection-card-custom-indicator-border-color )}:host(:not([data-disabled],[data-readonly])) .solaris-selection-card__input:hover+.solaris-selection-card__surface{background:var(--solaris-selection-card-hover-background)}:host(:not([data-disabled],[data-readonly])) .solaris-selection-card__input:active+.solaris-selection-card__surface{background:var(--solaris-selection-card-active-background)}:host([data-checked]){--solaris-selection-card-background: var( --solaris-selection-card-selected-background );--solaris-selection-card-border-color: var( --solaris-selection-card-selected-border-color )}.solaris-selection-card__input:focus-visible+.solaris-selection-card__surface{outline-offset:var(--solaris-focus-ring-offset);outline:var(--solaris-focus-ring-width) var(--solaris-focus-ring-style) var(--solaris-selection-card-focus-ring-color)}:host([data-invalid]){--solaris-selection-card-border-color: var(--solaris-danger-border);--solaris-selection-card-focus-ring-color: var(--solaris-danger-base);--solaris-selection-card-indicator-dot-color: var(--solaris-danger-base);--solaris-selection-card-indicator-border-color: var(--solaris-danger-border)}:host([data-disabled]) .solaris-selection-card__surface{cursor:not-allowed;opacity:var(--solaris-selection-card-disabled-opacity)}:host([data-readonly]) .solaris-selection-card__input{cursor:not-allowed}:host([data-readonly]) .solaris-selection-card__surface{cursor:default;opacity:var(--solaris-selection-card-disabled-opacity)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "media", first: true, predicate: SolarisSelectionCardMediaDirective, descendants: true, isSignal: true }, { propertyName: "header", first: true, predicate: SolarisSelectionCardHeaderDirective, descendants: true, isSignal: true }, { propertyName: "footer", first: true, predicate: SolarisSelectionCardFooterDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<input\n  #inputElement\n  [type]=\"isSwitchSelection() ? 'checkbox' : 'radio'\"\n  [attr.role]=\"isSwitchSelection() ? 'switch' : null\"\n  class=\"solaris-selection-card__input\"\n  [id]=\"elementId()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [required]=\"required\"\n  [attr.name]=\"effectiveName() ?? null\"\n  [attr.aria-label]=\"effectiveAriaLabel() ?? null\"\n  [attr.aria-labelledby]=\"ariaLabelledBy()\"\n  [attr.aria-describedby]=\"ariaDescribedBy()\"\n  [attr.aria-invalid]=\"isEffectivelyInvalid() ? 'true' : null\"\n  [attr.aria-readonly]=\"isEffectivelyReadonly() ? 'true' : null\"\n  (change)=\"onInputChange($event)\"\n  (focus)=\"onFocus()\"\n  (blur)=\"onBlur()\"\n/>\n<div class=\"solaris-selection-card__surface\">\n  <ng-content select=\"[solaris-selection-card-media]\" />\n  <div class=\"solaris-selection-card__body\">\n    <div class=\"solaris-selection-card__top-row\">\n      @if (!isSwitchSelection() && selectionPosition() === 'start') {\n        <span class=\"solaris-selection-card__control\" aria-hidden=\"true\">\n          @if (_checked()) {\n            <span class=\"solaris-selection-card__dot\"></span>\n          }\n        </span>\n      }\n      <div class=\"solaris-selection-card__header\">\n        <ng-content select=\"[solaris-selection-card-header]\" />\n      </div>\n      @if (!isSwitchSelection() && selectionPosition() === 'end') {\n        <span class=\"solaris-selection-card__control\" aria-hidden=\"true\">\n          @if (_checked()) {\n            <span class=\"solaris-selection-card__dot\"></span>\n          }\n        </span>\n      }\n    </div>\n    @if (hasHeaderSeparator()) {\n      <div class=\"solaris-selection-card__separator\" aria-hidden=\"true\"></div>\n    }\n    <div class=\"solaris-selection-card__content\" [id]=\"contentId()\">\n      <ng-content select=\"[solaris-selection-card-content]\" />\n      <ng-content />\n    </div>\n  </div>\n  @if (isSwitchSelection() || hasFooter()) {\n    <div class=\"solaris-selection-card__footer\">\n      @if (isSwitchSelection() && selectionPosition() === 'start') {\n        <span class=\"solaris-selection-card__switch\" aria-hidden=\"true\">\n          <span class=\"solaris-selection-card__switch-thumb\"></span>\n        </span>\n      }\n      <ng-content select=\"[solaris-selection-card-footer]\" />\n      @if (isSwitchSelection() && selectionPosition() === 'end') {\n        <span class=\"solaris-selection-card__switch\" aria-hidden=\"true\">\n          <span class=\"solaris-selection-card__switch-thumb\"></span>\n        </span>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{--solaris-selection-card-gap: var(--solaris-spacing-0);--solaris-selection-card-radius: var(--solaris-radius-lg);--solaris-selection-card-padding: var(--solaris-spacing-0);--solaris-selection-card-color: var(--solaris-text-default);--solaris-selection-card-background: var(--solaris-surface-base);--solaris-selection-card-indicator-size: var(--solaris-spacing-5);--solaris-selection-card-border-color: var(--solaris-border-strong);--solaris-selection-card-disabled-opacity: var(--solaris-opacity-50);--solaris-selection-card-border-width: var(--solaris-border-width-sm);--solaris-selection-card-indicator-dot-size: var(--solaris-spacing-2);--solaris-selection-card-hover-background: var(--solaris-surface-subtle);--solaris-selection-card-active-background: var(--solaris-surface-muted);--solaris-selection-card-focus-ring-color: var(--solaris-text-default);--solaris-selection-card-indicator-dot-color: var(--solaris-text-default);--solaris-selection-card-selected-background: var(--solaris-surface-muted);--solaris-selection-card-selected-border-color: var(--solaris-border-default);--solaris-selection-card-header-border-color: var(--solaris-border-strong);--solaris-selection-card-footer-border-color: var(--solaris-border-strong);--solaris-selection-card-media-size: var(--solaris-spacing-12);--solaris-selection-card-switch-track-width: calc( var(--solaris-spacing-8) + var(--solaris-spacing-1) / 2 );--solaris-selection-card-switch-track-height: calc( var(--solaris-spacing-4) + var(--solaris-spacing-3) / 4 );--solaris-selection-card-switch-thumb-size: var(--solaris-spacing-3);--solaris-selection-card-switch-thumb-offset: var(--solaris-spacing-half);--solaris-selection-card-switch-track-background: var( --solaris-surface-muted );--solaris-selection-card-switch-thumb-background: var( --solaris-surface-raised );--solaris-selection-card-indicator-border-color: var( --solaris-border-default );--solaris-selection-card-glass-background: initial;--solaris-selection-card-glass-border-color: initial;--solaris-selection-card-custom-focus-ring-color: initial;--solaris-selection-card-custom-indicator-dot-color: initial;--solaris-selection-card-custom-selected-background: initial;--solaris-selection-card-custom-selected-border-color: initial;--solaris-selection-card-custom-indicator-border-color: initial;display:block;position:relative;box-sizing:border-box}.solaris-selection-card__input{inset:0;margin:0;opacity:0;width:100%;height:100%;cursor:pointer;position:absolute;z-index:var(--solaris-z-index-content)}.solaris-selection-card__surface{overflow:hidden;position:relative;box-sizing:border-box;color:var(--solaris-selection-card-color);border-radius:var(--solaris-selection-card-radius);background:var(--solaris-selection-card-background);border:var(--solaris-selection-card-border-width) solid var(--solaris-selection-card-border-color);transition:background-color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard),border-color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard),box-shadow var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-selection-card__body{display:flex;min-height:var(--solaris-density-min-height);box-sizing:border-box;flex-direction:column;gap:var(--solaris-selection-card-gap);padding:var(--solaris-selection-card-padding)}.solaris-selection-card__top-row{display:flex;align-items:flex-start;box-sizing:border-box;gap:var(--solaris-selection-card-gap)}.solaris-selection-card__header{flex:1;min-width:0}.solaris-selection-card__separator{border-bottom:var(--solaris-border-width-sm) solid var(--solaris-selection-card-header-border-color)}.solaris-selection-card__content{flex:1;min-width:0}.solaris-selection-card__control{display:flex;flex-shrink:0;border-radius:50%;align-items:center;box-sizing:border-box;justify-content:center;width:var(--solaris-selection-card-indicator-size);height:var(--solaris-selection-card-indicator-size);border:var(--solaris-border-width-sm) solid var(--solaris-selection-card-indicator-border-color)}:host([data-has-media]:not([data-media-position=start])) .solaris-selection-card__control{top:var(--solaris-selection-card-padding);right:var(--solaris-selection-card-padding);position:absolute;background:var(--solaris-surface-base)}.solaris-selection-card__footer{display:flex;align-items:center;box-sizing:border-box;gap:var(--solaris-selection-card-gap);padding:var(--solaris-selection-card-padding)}.solaris-selection-card__footer:empty{display:none}:host([data-selection-position=end]) .solaris-selection-card__footer{justify-content:flex-end}:host ::ng-deep .solaris-selection-card__footer .solaris-selection-card-footer{flex:1;min-width:0;margin-top:var(--solaris-spacing-0)}.solaris-selection-card__switch{display:flex;flex-shrink:0;position:relative;align-items:center;box-sizing:border-box;width:var(--solaris-selection-card-switch-track-width);height:var(--solaris-selection-card-switch-track-height);background:var(--solaris-selection-card-switch-track-background);border-radius:calc(var(--solaris-selection-card-switch-track-height) / 2);border:var(--solaris-border-width-sm) solid var(--solaris-selection-card-indicator-border-color);transition:background-color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard),border-color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-selection-card__switch-thumb{display:block;position:absolute;border-radius:50%;top:50%;transform:translateY(-50%);left:var(--solaris-selection-card-switch-thumb-offset);width:var(--solaris-selection-card-switch-thumb-size);height:var(--solaris-selection-card-switch-thumb-size);background:var(--solaris-selection-card-switch-thumb-background);transition:left var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-checked]) .solaris-selection-card__switch-thumb{left:calc(100% - var(--solaris-selection-card-switch-thumb-size) - var(--solaris-selection-card-switch-thumb-offset))}.solaris-selection-card__dot{display:block;border-radius:50%;width:var(--solaris-selection-card-indicator-dot-size);height:var(--solaris-selection-card-indicator-dot-size);background:var(--solaris-selection-card-indicator-dot-color)}:host ::ng-deep .solaris-selection-card-media{margin:0;display:block;overflow:hidden}:host ::ng-deep .solaris-selection-card-media img,:host ::ng-deep .solaris-selection-card-media video,:host ::ng-deep .solaris-selection-card-media picture{width:100%;display:block}:host ::ng-deep .solaris-selection-card-header{display:flex;flex-direction:column;gap:var(--solaris-spacing-0)}:host ::ng-deep .solaris-selection-card-content{display:block;margin-top:var(--solaris-spacing-0)}:host ::ng-deep .solaris-selection-card-footer{display:flex;flex-wrap:wrap;align-items:center;gap:var(--solaris-spacing-0);margin-top:var(--solaris-spacing-0)}:host([data-footer-separator]) .solaris-selection-card__footer{border-top:var(--solaris-border-width-sm) solid var(--solaris-selection-card-footer-border-color)}:host ::ng-deep .solaris-selection-card-title{margin:0;color:var(--solaris-text-strong);font:var(--solaris-font-weight-semibold) var(--solaris-font-size-lg)/var(--solaris-line-height-sm) var(--solaris-font-family-sans)}:host ::ng-deep .solaris-selection-card-description{margin:0;color:var(--solaris-text-muted);font:var(--solaris-font-weight-regular) var(--solaris-font-size-sm)/var(--solaris-line-height-md) var(--solaris-font-family-sans)}:host([data-size=sm]){--solaris-selection-card-media-size: var(--solaris-spacing-10);--solaris-selection-card-indicator-size: var(--solaris-spacing-4);--solaris-selection-card-indicator-dot-size: calc( var(--solaris-spacing-1) * 1.5 )}:host([data-size=lg]){--solaris-selection-card-media-size: var(--solaris-spacing-16);--solaris-selection-card-indicator-size: var(--solaris-spacing-6);--solaris-selection-card-indicator-dot-size: calc( var(--solaris-spacing-1) * 2.5 )}:host([data-media-position=start]) .solaris-selection-card__surface{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center}:host([data-media-position=start]) ::ng-deep .solaris-selection-card-media{grid-row:1/-1;grid-column:1;align-self:center;width:var(--solaris-selection-card-media-size);height:var(--solaris-selection-card-media-size);margin:var(--solaris-selection-card-padding);margin-inline-end:var(--solaris-spacing-0);border-radius:var(--solaris-radius-md)}:host([data-media-position=start]) ::ng-deep .solaris-selection-card-media img,:host([data-media-position=start]) ::ng-deep .solaris-selection-card-media video,:host([data-media-position=start]) ::ng-deep .solaris-selection-card-media picture{width:100%;height:100%;object-fit:cover}:host([data-media-position=start]) .solaris-selection-card__body{grid-column:2;min-width:0}:host([data-media-position=start]) .solaris-selection-card__footer{grid-column:2;min-width:0}:host([data-radius=none]){--solaris-selection-card-radius: var(--solaris-radius-none)}:host([data-radius=sm]){--solaris-selection-card-radius: var(--solaris-radius-sm)}:host([data-radius=xl]){--solaris-selection-card-radius: var(--solaris-radius-xl)}:host([data-appearance=outline]){--solaris-selection-card-background: transparent;--solaris-selection-card-border-color: var(--solaris-border-default)}:host([data-appearance=tonal]){--solaris-selection-card-background: var(--solaris-surface-subtle);--solaris-selection-card-border-color: var(--solaris-border-subtle)}:host([data-appearance=glass]) .solaris-selection-card__surface{--solaris-selection-card-color: var(--solaris-text-glass);--solaris-selection-card-glass-background: var(--solaris-glass-background);--solaris-selection-card-glass-border-color: var( --solaris-glass-border-color );isolation:isolate;background:var(--solaris-selection-card-glass-background);border-color:var(--solaris-selection-card-glass-border-color);box-shadow:var(--solaris-glass-shadow);backdrop-filter:var(--solaris-glass-backdrop-filter);-webkit-backdrop-filter:var(--solaris-glass-backdrop-filter)}:host([data-appearance=glass][data-checked]) .solaris-selection-card__surface{background:var(--solaris-selection-card-background);border-color:var(--solaris-selection-card-border-color)}:host([data-appearance=glass]) ::ng-deep .solaris-selection-card-description{color:var(--solaris-text-glass)}:host([data-color=primary]){--solaris-selection-card-focus-ring-color: var(--solaris-primary-base);--solaris-selection-card-indicator-dot-color: var(--solaris-primary-base);--solaris-selection-card-selected-background: var(--solaris-primary-surface);--solaris-selection-card-selected-border-color: var(--solaris-primary-border);--solaris-selection-card-indicator-border-color: var( --solaris-primary-border )}:host([data-color=success]){--solaris-selection-card-focus-ring-color: var(--solaris-success-base);--solaris-selection-card-indicator-dot-color: var(--solaris-success-base);--solaris-selection-card-selected-background: var(--solaris-success-surface);--solaris-selection-card-selected-border-color: var(--solaris-success-border);--solaris-selection-card-indicator-border-color: var( --solaris-success-border )}:host([data-color=warning]){--solaris-selection-card-focus-ring-color: var(--solaris-warning-base);--solaris-selection-card-indicator-dot-color: var(--solaris-warning-base);--solaris-selection-card-selected-background: var(--solaris-warning-surface);--solaris-selection-card-selected-border-color: var(--solaris-warning-border);--solaris-selection-card-indicator-border-color: var( --solaris-warning-border )}:host([data-color=danger]){--solaris-selection-card-focus-ring-color: var(--solaris-danger-base);--solaris-selection-card-indicator-dot-color: var(--solaris-danger-base);--solaris-selection-card-selected-background: var(--solaris-danger-surface);--solaris-selection-card-selected-border-color: var(--solaris-danger-border);--solaris-selection-card-indicator-border-color: var(--solaris-danger-border)}:host([data-color=info]){--solaris-selection-card-focus-ring-color: var(--solaris-info-base);--solaris-selection-card-indicator-dot-color: var(--solaris-info-base);--solaris-selection-card-selected-background: var(--solaris-info-surface);--solaris-selection-card-selected-border-color: var(--solaris-info-border);--solaris-selection-card-indicator-border-color: var(--solaris-info-border)}:host([data-color=custom]){--solaris-selection-card-focus-ring-color: var( --solaris-selection-card-custom-focus-ring-color );--solaris-selection-card-indicator-dot-color: var( --solaris-selection-card-custom-indicator-dot-color );--solaris-selection-card-selected-background: var( --solaris-selection-card-custom-selected-background );--solaris-selection-card-selected-border-color: var( --solaris-selection-card-custom-selected-border-color );--solaris-selection-card-indicator-border-color: var( --solaris-selection-card-custom-indicator-border-color )}:host([data-selection=switch][data-checked]) .solaris-selection-card__switch{background:var(--solaris-selection-card-focus-ring-color);border-color:var(--solaris-selection-card-focus-ring-color)}:host(:not([data-disabled],[data-readonly])) .solaris-selection-card__input:hover+.solaris-selection-card__surface{background:var(--solaris-selection-card-hover-background)}:host(:not([data-disabled],[data-readonly])) .solaris-selection-card__input:active+.solaris-selection-card__surface{background:var(--solaris-selection-card-active-background)}:host([data-checked]){--solaris-selection-card-background: var( --solaris-selection-card-selected-background );--solaris-selection-card-border-color: var( --solaris-selection-card-selected-border-color )}.solaris-selection-card__input:focus-visible+.solaris-selection-card__surface{outline-offset:var(--solaris-focus-ring-offset);outline:var(--solaris-focus-ring-width) var(--solaris-focus-ring-style) var(--solaris-selection-card-focus-ring-color)}:host([data-invalid]){--solaris-selection-card-border-color: var(--solaris-danger-border);--solaris-selection-card-focus-ring-color: var(--solaris-danger-base);--solaris-selection-card-indicator-dot-color: var(--solaris-danger-base);--solaris-selection-card-indicator-border-color: var(--solaris-danger-border)}:host([data-disabled]) .solaris-selection-card__surface{cursor:not-allowed;opacity:var(--solaris-selection-card-disabled-opacity)}:host([data-readonly]) .solaris-selection-card__input{cursor:not-allowed}:host([data-readonly]) .solaris-selection-card__surface{cursor:default;opacity:var(--solaris-selection-card-disabled-opacity)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisSelectionCardComponent, decorators: [{
             type: Component,
@@ -9081,14 +9282,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                         '[attr.data-size]': 'size()',
                         '[attr.data-radius]': 'radius()',
                         '[attr.data-density]': 'effectiveDensity()',
+                        '[attr.data-selection]': 'selection()',
+                        '[attr.data-selection-position]': 'selectionPosition()',
+                        '[attr.data-media-position]': 'mediaPosition()',
                         '[attr.data-checked]': '_checked() ? "" : null',
                         '[attr.data-disabled]': 'isEffectivelyDisabled() ? "" : null',
                         '[attr.data-readonly]': 'isEffectivelyReadonly() ? "" : null',
                         '[attr.data-invalid]': 'isEffectivelyInvalid() ? "" : null',
                         '[attr.data-focused]': '_focused() ? "" : null',
                         '[attr.data-has-media]': 'hasMedia() ? "" : null',
-                    }, template: "<input\n  #inputElement\n  type=\"radio\"\n  class=\"solaris-selection-card__input\"\n  [id]=\"elementId()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [required]=\"required\"\n  [attr.name]=\"effectiveName() ?? null\"\n  [attr.aria-label]=\"effectiveAriaLabel() ?? null\"\n  [attr.aria-labelledby]=\"ariaLabelledBy()\"\n  [attr.aria-describedby]=\"ariaDescribedBy()\"\n  [attr.aria-invalid]=\"isEffectivelyInvalid() ? 'true' : null\"\n  [attr.aria-readonly]=\"isEffectivelyReadonly() ? 'true' : null\"\n  (change)=\"onInputChange($event)\"\n  (focus)=\"onFocus()\"\n  (blur)=\"onBlur()\"\n/>\n<div class=\"solaris-selection-card__surface\">\n  <ng-content select=\"[solaris-selection-card-media]\" />\n  <div class=\"solaris-selection-card__body\">\n    <span class=\"solaris-selection-card__control\" aria-hidden=\"true\">\n      @if (_checked()) {\n        <span class=\"solaris-selection-card__dot\"></span>\n      }\n    </span>\n    <div class=\"solaris-selection-card__content\" [id]=\"contentId()\">\n      <ng-content select=\"[solaris-selection-card-header]\" />\n      <ng-content select=\"[solaris-selection-card-content]\" />\n      <ng-content />\n      <ng-content select=\"[solaris-selection-card-footer]\" />\n    </div>\n  </div>\n</div>\n", styles: [":host{--solaris-selection-card-gap: var(--solaris-spacing-4);--solaris-selection-card-radius: var(--solaris-radius-lg);--solaris-selection-card-padding: var(--solaris-spacing-6);--solaris-selection-card-color: var(--solaris-text-default);--solaris-selection-card-background: var(--solaris-surface-base);--solaris-selection-card-indicator-size: var(--solaris-spacing-5);--solaris-selection-card-border-color: var(--solaris-border-subtle);--solaris-selection-card-disabled-opacity: var(--solaris-opacity-50);--solaris-selection-card-border-width: var(--solaris-border-width-sm);--solaris-selection-card-indicator-dot-size: var(--solaris-spacing-2);--solaris-selection-card-hover-background: var(--solaris-surface-subtle);--solaris-selection-card-active-background: var(--solaris-surface-muted);--solaris-selection-card-focus-ring-color: var(--solaris-text-default);--solaris-selection-card-indicator-dot-color: var(--solaris-text-default);--solaris-selection-card-selected-background: var(--solaris-surface-muted);--solaris-selection-card-selected-border-color: var(--solaris-border-default);--solaris-selection-card-indicator-border-color: var( --solaris-border-default );--solaris-selection-card-glass-background: initial;--solaris-selection-card-glass-border-color: initial;--solaris-selection-card-custom-focus-ring-color: initial;--solaris-selection-card-custom-indicator-dot-color: initial;--solaris-selection-card-custom-selected-background: initial;--solaris-selection-card-custom-selected-border-color: initial;--solaris-selection-card-custom-indicator-border-color: initial;display:block;position:relative;box-sizing:border-box}.solaris-selection-card__input{inset:0;margin:0;opacity:0;width:100%;height:100%;cursor:pointer;position:absolute;z-index:var(--solaris-z-index-content)}.solaris-selection-card__surface{overflow:hidden;position:relative;box-sizing:border-box;color:var(--solaris-selection-card-color);border-radius:var(--solaris-selection-card-radius);background:var(--solaris-selection-card-background);border:var(--solaris-selection-card-border-width) solid var(--solaris-selection-card-border-color);transition:background-color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard),border-color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard),box-shadow var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-selection-card__body{display:flex;min-height:var(--solaris-density-min-height);box-sizing:border-box;align-items:flex-start;gap:var(--solaris-selection-card-gap);padding:var(--solaris-selection-card-padding)}.solaris-selection-card__content{flex:1;min-width:0}.solaris-selection-card__control{display:flex;flex-shrink:0;border-radius:50%;align-items:center;box-sizing:border-box;justify-content:center;width:var(--solaris-selection-card-indicator-size);height:var(--solaris-selection-card-indicator-size);border:var(--solaris-border-width-sm) solid var(--solaris-selection-card-indicator-border-color)}:host([data-has-media]) .solaris-selection-card__control{top:var(--solaris-selection-card-padding);right:var(--solaris-selection-card-padding);position:absolute;background:var(--solaris-surface-base)}.solaris-selection-card__dot{display:block;border-radius:50%;width:var(--solaris-selection-card-indicator-dot-size);height:var(--solaris-selection-card-indicator-dot-size);background:var(--solaris-selection-card-indicator-dot-color)}:host ::ng-deep .solaris-selection-card-media{margin:0;display:block;overflow:hidden}:host ::ng-deep .solaris-selection-card-media img,:host ::ng-deep .solaris-selection-card-media video,:host ::ng-deep .solaris-selection-card-media picture{width:100%;display:block}:host ::ng-deep .solaris-selection-card-header{display:flex;flex-direction:column;gap:var(--solaris-spacing-1)}:host ::ng-deep .solaris-selection-card-content{display:block;margin-top:var(--solaris-selection-card-gap)}:host ::ng-deep .solaris-selection-card-footer{display:flex;flex-wrap:wrap;align-items:center;gap:var(--solaris-spacing-2);margin-top:var(--solaris-selection-card-gap)}:host ::ng-deep .solaris-selection-card-footer[data-separator]{padding-top:var(--solaris-selection-card-gap);border-top:var(--solaris-border-width-sm) solid var(--solaris-selection-card-border-color)}:host ::ng-deep .solaris-selection-card-title{margin:0;color:var(--solaris-text-strong);font:var(--solaris-font-weight-semibold) var(--solaris-font-size-lg)/var(--solaris-line-height-sm) var(--solaris-font-family-sans)}:host ::ng-deep .solaris-selection-card-description{margin:0;color:var(--solaris-text-muted);font:var(--solaris-font-weight-regular) var(--solaris-font-size-sm)/var(--solaris-line-height-md) var(--solaris-font-family-sans)}:host([data-size=sm]){--solaris-selection-card-gap: var(--solaris-spacing-3);--solaris-selection-card-padding: var(--solaris-spacing-4);--solaris-selection-card-indicator-size: var(--solaris-spacing-4);--solaris-selection-card-indicator-dot-size: calc( var(--solaris-spacing-1) * 1.5 )}:host([data-size=lg]){--solaris-selection-card-gap: var(--solaris-spacing-5);--solaris-selection-card-padding: var(--solaris-spacing-8);--solaris-selection-card-indicator-size: var(--solaris-spacing-6);--solaris-selection-card-indicator-dot-size: calc( var(--solaris-spacing-1) * 2.5 )}:host([data-density=compact]){--solaris-selection-card-gap: var(--solaris-density-gap-lg);--solaris-selection-card-padding: var(--solaris-density-padding-xl)}:host([data-density=comfortable]){--solaris-selection-card-gap: var(--solaris-density-gap-lg);--solaris-selection-card-padding: var(--solaris-density-padding-xl)}:host([data-radius=none]){--solaris-selection-card-radius: var(--solaris-radius-none)}:host([data-radius=sm]){--solaris-selection-card-radius: var(--solaris-radius-sm)}:host([data-radius=xl]){--solaris-selection-card-radius: var(--solaris-radius-xl)}:host([data-appearance=outline]){--solaris-selection-card-background: transparent;--solaris-selection-card-border-color: var(--solaris-border-default)}:host([data-appearance=tonal]){--solaris-selection-card-background: var(--solaris-surface-subtle);--solaris-selection-card-border-color: var(--solaris-border-subtle)}:host([data-appearance=glass]) .solaris-selection-card__surface{--solaris-selection-card-color: var(--solaris-text-glass);--solaris-selection-card-glass-background: var(--solaris-glass-background);--solaris-selection-card-glass-border-color: var( --solaris-glass-border-color );isolation:isolate;background:var(--solaris-selection-card-glass-background);border-color:var(--solaris-selection-card-glass-border-color);box-shadow:var(--solaris-glass-shadow);backdrop-filter:var(--solaris-glass-backdrop-filter);-webkit-backdrop-filter:var(--solaris-glass-backdrop-filter)}:host([data-appearance=glass][data-checked]) .solaris-selection-card__surface{background:var(--solaris-selection-card-background);border-color:var(--solaris-selection-card-border-color)}:host([data-appearance=glass]) ::ng-deep .solaris-selection-card-description{color:var(--solaris-text-glass)}:host([data-color=primary]){--solaris-selection-card-focus-ring-color: var(--solaris-primary-base);--solaris-selection-card-indicator-dot-color: var(--solaris-primary-base);--solaris-selection-card-selected-background: var(--solaris-primary-surface);--solaris-selection-card-selected-border-color: var(--solaris-primary-border);--solaris-selection-card-indicator-border-color: var( --solaris-primary-border )}:host([data-color=success]){--solaris-selection-card-focus-ring-color: var(--solaris-success-base);--solaris-selection-card-indicator-dot-color: var(--solaris-success-base);--solaris-selection-card-selected-background: var(--solaris-success-surface);--solaris-selection-card-selected-border-color: var(--solaris-success-border);--solaris-selection-card-indicator-border-color: var( --solaris-success-border )}:host([data-color=warning]){--solaris-selection-card-focus-ring-color: var(--solaris-warning-base);--solaris-selection-card-indicator-dot-color: var(--solaris-warning-base);--solaris-selection-card-selected-background: var(--solaris-warning-surface);--solaris-selection-card-selected-border-color: var(--solaris-warning-border);--solaris-selection-card-indicator-border-color: var( --solaris-warning-border )}:host([data-color=danger]){--solaris-selection-card-focus-ring-color: var(--solaris-danger-base);--solaris-selection-card-indicator-dot-color: var(--solaris-danger-base);--solaris-selection-card-selected-background: var(--solaris-danger-surface);--solaris-selection-card-selected-border-color: var(--solaris-danger-border);--solaris-selection-card-indicator-border-color: var(--solaris-danger-border)}:host([data-color=info]){--solaris-selection-card-focus-ring-color: var(--solaris-info-base);--solaris-selection-card-indicator-dot-color: var(--solaris-info-base);--solaris-selection-card-selected-background: var(--solaris-info-surface);--solaris-selection-card-selected-border-color: var(--solaris-info-border);--solaris-selection-card-indicator-border-color: var(--solaris-info-border)}:host([data-color=custom]){--solaris-selection-card-focus-ring-color: var( --solaris-selection-card-custom-focus-ring-color );--solaris-selection-card-indicator-dot-color: var( --solaris-selection-card-custom-indicator-dot-color );--solaris-selection-card-selected-background: var( --solaris-selection-card-custom-selected-background );--solaris-selection-card-selected-border-color: var( --solaris-selection-card-custom-selected-border-color );--solaris-selection-card-indicator-border-color: var( --solaris-selection-card-custom-indicator-border-color )}:host(:not([data-disabled],[data-readonly])) .solaris-selection-card__input:hover+.solaris-selection-card__surface{background:var(--solaris-selection-card-hover-background)}:host(:not([data-disabled],[data-readonly])) .solaris-selection-card__input:active+.solaris-selection-card__surface{background:var(--solaris-selection-card-active-background)}:host([data-checked]){--solaris-selection-card-background: var( --solaris-selection-card-selected-background );--solaris-selection-card-border-color: var( --solaris-selection-card-selected-border-color )}.solaris-selection-card__input:focus-visible+.solaris-selection-card__surface{outline-offset:var(--solaris-focus-ring-offset);outline:var(--solaris-focus-ring-width) var(--solaris-focus-ring-style) var(--solaris-selection-card-focus-ring-color)}:host([data-invalid]){--solaris-selection-card-border-color: var(--solaris-danger-border);--solaris-selection-card-focus-ring-color: var(--solaris-danger-base);--solaris-selection-card-indicator-dot-color: var(--solaris-danger-base);--solaris-selection-card-indicator-border-color: var(--solaris-danger-border)}:host([data-disabled]) .solaris-selection-card__surface{cursor:not-allowed;opacity:var(--solaris-selection-card-disabled-opacity)}:host([data-readonly]) .solaris-selection-card__input{cursor:not-allowed}:host([data-readonly]) .solaris-selection-card__surface{cursor:default;opacity:var(--solaris-selection-card-disabled-opacity)}\n"] }]
-        }], propDecorators: { inputElementRef: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }], media: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisSelectionCardMediaDirective), { isSignal: true }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonlyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], requiredInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelKey", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }], changeEvent: [{ type: i0.Output, args: ["changeEvent"] }] } });
+                        '[attr.data-has-footer]': 'hasFooter() ? "" : null',
+                        '[attr.data-header-separator]': 'hasHeaderSeparator() ? "" : null',
+                        '[attr.data-footer-separator]': 'hasFooterSeparator() ? "" : null',
+                    }, template: "<input\n  #inputElement\n  [type]=\"isSwitchSelection() ? 'checkbox' : 'radio'\"\n  [attr.role]=\"isSwitchSelection() ? 'switch' : null\"\n  class=\"solaris-selection-card__input\"\n  [id]=\"elementId()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [required]=\"required\"\n  [attr.name]=\"effectiveName() ?? null\"\n  [attr.aria-label]=\"effectiveAriaLabel() ?? null\"\n  [attr.aria-labelledby]=\"ariaLabelledBy()\"\n  [attr.aria-describedby]=\"ariaDescribedBy()\"\n  [attr.aria-invalid]=\"isEffectivelyInvalid() ? 'true' : null\"\n  [attr.aria-readonly]=\"isEffectivelyReadonly() ? 'true' : null\"\n  (change)=\"onInputChange($event)\"\n  (focus)=\"onFocus()\"\n  (blur)=\"onBlur()\"\n/>\n<div class=\"solaris-selection-card__surface\">\n  <ng-content select=\"[solaris-selection-card-media]\" />\n  <div class=\"solaris-selection-card__body\">\n    <div class=\"solaris-selection-card__top-row\">\n      @if (!isSwitchSelection() && selectionPosition() === 'start') {\n        <span class=\"solaris-selection-card__control\" aria-hidden=\"true\">\n          @if (_checked()) {\n            <span class=\"solaris-selection-card__dot\"></span>\n          }\n        </span>\n      }\n      <div class=\"solaris-selection-card__header\">\n        <ng-content select=\"[solaris-selection-card-header]\" />\n      </div>\n      @if (!isSwitchSelection() && selectionPosition() === 'end') {\n        <span class=\"solaris-selection-card__control\" aria-hidden=\"true\">\n          @if (_checked()) {\n            <span class=\"solaris-selection-card__dot\"></span>\n          }\n        </span>\n      }\n    </div>\n    @if (hasHeaderSeparator()) {\n      <div class=\"solaris-selection-card__separator\" aria-hidden=\"true\"></div>\n    }\n    <div class=\"solaris-selection-card__content\" [id]=\"contentId()\">\n      <ng-content select=\"[solaris-selection-card-content]\" />\n      <ng-content />\n    </div>\n  </div>\n  @if (isSwitchSelection() || hasFooter()) {\n    <div class=\"solaris-selection-card__footer\">\n      @if (isSwitchSelection() && selectionPosition() === 'start') {\n        <span class=\"solaris-selection-card__switch\" aria-hidden=\"true\">\n          <span class=\"solaris-selection-card__switch-thumb\"></span>\n        </span>\n      }\n      <ng-content select=\"[solaris-selection-card-footer]\" />\n      @if (isSwitchSelection() && selectionPosition() === 'end') {\n        <span class=\"solaris-selection-card__switch\" aria-hidden=\"true\">\n          <span class=\"solaris-selection-card__switch-thumb\"></span>\n        </span>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{--solaris-selection-card-gap: var(--solaris-spacing-0);--solaris-selection-card-radius: var(--solaris-radius-lg);--solaris-selection-card-padding: var(--solaris-spacing-0);--solaris-selection-card-color: var(--solaris-text-default);--solaris-selection-card-background: var(--solaris-surface-base);--solaris-selection-card-indicator-size: var(--solaris-spacing-5);--solaris-selection-card-border-color: var(--solaris-border-strong);--solaris-selection-card-disabled-opacity: var(--solaris-opacity-50);--solaris-selection-card-border-width: var(--solaris-border-width-sm);--solaris-selection-card-indicator-dot-size: var(--solaris-spacing-2);--solaris-selection-card-hover-background: var(--solaris-surface-subtle);--solaris-selection-card-active-background: var(--solaris-surface-muted);--solaris-selection-card-focus-ring-color: var(--solaris-text-default);--solaris-selection-card-indicator-dot-color: var(--solaris-text-default);--solaris-selection-card-selected-background: var(--solaris-surface-muted);--solaris-selection-card-selected-border-color: var(--solaris-border-default);--solaris-selection-card-header-border-color: var(--solaris-border-strong);--solaris-selection-card-footer-border-color: var(--solaris-border-strong);--solaris-selection-card-media-size: var(--solaris-spacing-12);--solaris-selection-card-switch-track-width: calc( var(--solaris-spacing-8) + var(--solaris-spacing-1) / 2 );--solaris-selection-card-switch-track-height: calc( var(--solaris-spacing-4) + var(--solaris-spacing-3) / 4 );--solaris-selection-card-switch-thumb-size: var(--solaris-spacing-3);--solaris-selection-card-switch-thumb-offset: var(--solaris-spacing-half);--solaris-selection-card-switch-track-background: var( --solaris-surface-muted );--solaris-selection-card-switch-thumb-background: var( --solaris-surface-raised );--solaris-selection-card-indicator-border-color: var( --solaris-border-default );--solaris-selection-card-glass-background: initial;--solaris-selection-card-glass-border-color: initial;--solaris-selection-card-custom-focus-ring-color: initial;--solaris-selection-card-custom-indicator-dot-color: initial;--solaris-selection-card-custom-selected-background: initial;--solaris-selection-card-custom-selected-border-color: initial;--solaris-selection-card-custom-indicator-border-color: initial;display:block;position:relative;box-sizing:border-box}.solaris-selection-card__input{inset:0;margin:0;opacity:0;width:100%;height:100%;cursor:pointer;position:absolute;z-index:var(--solaris-z-index-content)}.solaris-selection-card__surface{overflow:hidden;position:relative;box-sizing:border-box;color:var(--solaris-selection-card-color);border-radius:var(--solaris-selection-card-radius);background:var(--solaris-selection-card-background);border:var(--solaris-selection-card-border-width) solid var(--solaris-selection-card-border-color);transition:background-color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard),border-color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard),box-shadow var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-selection-card__body{display:flex;min-height:var(--solaris-density-min-height);box-sizing:border-box;flex-direction:column;gap:var(--solaris-selection-card-gap);padding:var(--solaris-selection-card-padding)}.solaris-selection-card__top-row{display:flex;align-items:flex-start;box-sizing:border-box;gap:var(--solaris-selection-card-gap)}.solaris-selection-card__header{flex:1;min-width:0}.solaris-selection-card__separator{border-bottom:var(--solaris-border-width-sm) solid var(--solaris-selection-card-header-border-color)}.solaris-selection-card__content{flex:1;min-width:0}.solaris-selection-card__control{display:flex;flex-shrink:0;border-radius:50%;align-items:center;box-sizing:border-box;justify-content:center;width:var(--solaris-selection-card-indicator-size);height:var(--solaris-selection-card-indicator-size);border:var(--solaris-border-width-sm) solid var(--solaris-selection-card-indicator-border-color)}:host([data-has-media]:not([data-media-position=start])) .solaris-selection-card__control{top:var(--solaris-selection-card-padding);right:var(--solaris-selection-card-padding);position:absolute;background:var(--solaris-surface-base)}.solaris-selection-card__footer{display:flex;align-items:center;box-sizing:border-box;gap:var(--solaris-selection-card-gap);padding:var(--solaris-selection-card-padding)}.solaris-selection-card__footer:empty{display:none}:host([data-selection-position=end]) .solaris-selection-card__footer{justify-content:flex-end}:host ::ng-deep .solaris-selection-card__footer .solaris-selection-card-footer{flex:1;min-width:0;margin-top:var(--solaris-spacing-0)}.solaris-selection-card__switch{display:flex;flex-shrink:0;position:relative;align-items:center;box-sizing:border-box;width:var(--solaris-selection-card-switch-track-width);height:var(--solaris-selection-card-switch-track-height);background:var(--solaris-selection-card-switch-track-background);border-radius:calc(var(--solaris-selection-card-switch-track-height) / 2);border:var(--solaris-border-width-sm) solid var(--solaris-selection-card-indicator-border-color);transition:background-color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard),border-color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-selection-card__switch-thumb{display:block;position:absolute;border-radius:50%;top:50%;transform:translateY(-50%);left:var(--solaris-selection-card-switch-thumb-offset);width:var(--solaris-selection-card-switch-thumb-size);height:var(--solaris-selection-card-switch-thumb-size);background:var(--solaris-selection-card-switch-thumb-background);transition:left var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-checked]) .solaris-selection-card__switch-thumb{left:calc(100% - var(--solaris-selection-card-switch-thumb-size) - var(--solaris-selection-card-switch-thumb-offset))}.solaris-selection-card__dot{display:block;border-radius:50%;width:var(--solaris-selection-card-indicator-dot-size);height:var(--solaris-selection-card-indicator-dot-size);background:var(--solaris-selection-card-indicator-dot-color)}:host ::ng-deep .solaris-selection-card-media{margin:0;display:block;overflow:hidden}:host ::ng-deep .solaris-selection-card-media img,:host ::ng-deep .solaris-selection-card-media video,:host ::ng-deep .solaris-selection-card-media picture{width:100%;display:block}:host ::ng-deep .solaris-selection-card-header{display:flex;flex-direction:column;gap:var(--solaris-spacing-0)}:host ::ng-deep .solaris-selection-card-content{display:block;margin-top:var(--solaris-spacing-0)}:host ::ng-deep .solaris-selection-card-footer{display:flex;flex-wrap:wrap;align-items:center;gap:var(--solaris-spacing-0);margin-top:var(--solaris-spacing-0)}:host([data-footer-separator]) .solaris-selection-card__footer{border-top:var(--solaris-border-width-sm) solid var(--solaris-selection-card-footer-border-color)}:host ::ng-deep .solaris-selection-card-title{margin:0;color:var(--solaris-text-strong);font:var(--solaris-font-weight-semibold) var(--solaris-font-size-lg)/var(--solaris-line-height-sm) var(--solaris-font-family-sans)}:host ::ng-deep .solaris-selection-card-description{margin:0;color:var(--solaris-text-muted);font:var(--solaris-font-weight-regular) var(--solaris-font-size-sm)/var(--solaris-line-height-md) var(--solaris-font-family-sans)}:host([data-size=sm]){--solaris-selection-card-media-size: var(--solaris-spacing-10);--solaris-selection-card-indicator-size: var(--solaris-spacing-4);--solaris-selection-card-indicator-dot-size: calc( var(--solaris-spacing-1) * 1.5 )}:host([data-size=lg]){--solaris-selection-card-media-size: var(--solaris-spacing-16);--solaris-selection-card-indicator-size: var(--solaris-spacing-6);--solaris-selection-card-indicator-dot-size: calc( var(--solaris-spacing-1) * 2.5 )}:host([data-media-position=start]) .solaris-selection-card__surface{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center}:host([data-media-position=start]) ::ng-deep .solaris-selection-card-media{grid-row:1/-1;grid-column:1;align-self:center;width:var(--solaris-selection-card-media-size);height:var(--solaris-selection-card-media-size);margin:var(--solaris-selection-card-padding);margin-inline-end:var(--solaris-spacing-0);border-radius:var(--solaris-radius-md)}:host([data-media-position=start]) ::ng-deep .solaris-selection-card-media img,:host([data-media-position=start]) ::ng-deep .solaris-selection-card-media video,:host([data-media-position=start]) ::ng-deep .solaris-selection-card-media picture{width:100%;height:100%;object-fit:cover}:host([data-media-position=start]) .solaris-selection-card__body{grid-column:2;min-width:0}:host([data-media-position=start]) .solaris-selection-card__footer{grid-column:2;min-width:0}:host([data-radius=none]){--solaris-selection-card-radius: var(--solaris-radius-none)}:host([data-radius=sm]){--solaris-selection-card-radius: var(--solaris-radius-sm)}:host([data-radius=xl]){--solaris-selection-card-radius: var(--solaris-radius-xl)}:host([data-appearance=outline]){--solaris-selection-card-background: transparent;--solaris-selection-card-border-color: var(--solaris-border-default)}:host([data-appearance=tonal]){--solaris-selection-card-background: var(--solaris-surface-subtle);--solaris-selection-card-border-color: var(--solaris-border-subtle)}:host([data-appearance=glass]) .solaris-selection-card__surface{--solaris-selection-card-color: var(--solaris-text-glass);--solaris-selection-card-glass-background: var(--solaris-glass-background);--solaris-selection-card-glass-border-color: var( --solaris-glass-border-color );isolation:isolate;background:var(--solaris-selection-card-glass-background);border-color:var(--solaris-selection-card-glass-border-color);box-shadow:var(--solaris-glass-shadow);backdrop-filter:var(--solaris-glass-backdrop-filter);-webkit-backdrop-filter:var(--solaris-glass-backdrop-filter)}:host([data-appearance=glass][data-checked]) .solaris-selection-card__surface{background:var(--solaris-selection-card-background);border-color:var(--solaris-selection-card-border-color)}:host([data-appearance=glass]) ::ng-deep .solaris-selection-card-description{color:var(--solaris-text-glass)}:host([data-color=primary]){--solaris-selection-card-focus-ring-color: var(--solaris-primary-base);--solaris-selection-card-indicator-dot-color: var(--solaris-primary-base);--solaris-selection-card-selected-background: var(--solaris-primary-surface);--solaris-selection-card-selected-border-color: var(--solaris-primary-border);--solaris-selection-card-indicator-border-color: var( --solaris-primary-border )}:host([data-color=success]){--solaris-selection-card-focus-ring-color: var(--solaris-success-base);--solaris-selection-card-indicator-dot-color: var(--solaris-success-base);--solaris-selection-card-selected-background: var(--solaris-success-surface);--solaris-selection-card-selected-border-color: var(--solaris-success-border);--solaris-selection-card-indicator-border-color: var( --solaris-success-border )}:host([data-color=warning]){--solaris-selection-card-focus-ring-color: var(--solaris-warning-base);--solaris-selection-card-indicator-dot-color: var(--solaris-warning-base);--solaris-selection-card-selected-background: var(--solaris-warning-surface);--solaris-selection-card-selected-border-color: var(--solaris-warning-border);--solaris-selection-card-indicator-border-color: var( --solaris-warning-border )}:host([data-color=danger]){--solaris-selection-card-focus-ring-color: var(--solaris-danger-base);--solaris-selection-card-indicator-dot-color: var(--solaris-danger-base);--solaris-selection-card-selected-background: var(--solaris-danger-surface);--solaris-selection-card-selected-border-color: var(--solaris-danger-border);--solaris-selection-card-indicator-border-color: var(--solaris-danger-border)}:host([data-color=info]){--solaris-selection-card-focus-ring-color: var(--solaris-info-base);--solaris-selection-card-indicator-dot-color: var(--solaris-info-base);--solaris-selection-card-selected-background: var(--solaris-info-surface);--solaris-selection-card-selected-border-color: var(--solaris-info-border);--solaris-selection-card-indicator-border-color: var(--solaris-info-border)}:host([data-color=custom]){--solaris-selection-card-focus-ring-color: var( --solaris-selection-card-custom-focus-ring-color );--solaris-selection-card-indicator-dot-color: var( --solaris-selection-card-custom-indicator-dot-color );--solaris-selection-card-selected-background: var( --solaris-selection-card-custom-selected-background );--solaris-selection-card-selected-border-color: var( --solaris-selection-card-custom-selected-border-color );--solaris-selection-card-indicator-border-color: var( --solaris-selection-card-custom-indicator-border-color )}:host([data-selection=switch][data-checked]) .solaris-selection-card__switch{background:var(--solaris-selection-card-focus-ring-color);border-color:var(--solaris-selection-card-focus-ring-color)}:host(:not([data-disabled],[data-readonly])) .solaris-selection-card__input:hover+.solaris-selection-card__surface{background:var(--solaris-selection-card-hover-background)}:host(:not([data-disabled],[data-readonly])) .solaris-selection-card__input:active+.solaris-selection-card__surface{background:var(--solaris-selection-card-active-background)}:host([data-checked]){--solaris-selection-card-background: var( --solaris-selection-card-selected-background );--solaris-selection-card-border-color: var( --solaris-selection-card-selected-border-color )}.solaris-selection-card__input:focus-visible+.solaris-selection-card__surface{outline-offset:var(--solaris-focus-ring-offset);outline:var(--solaris-focus-ring-width) var(--solaris-focus-ring-style) var(--solaris-selection-card-focus-ring-color)}:host([data-invalid]){--solaris-selection-card-border-color: var(--solaris-danger-border);--solaris-selection-card-focus-ring-color: var(--solaris-danger-base);--solaris-selection-card-indicator-dot-color: var(--solaris-danger-base);--solaris-selection-card-indicator-border-color: var(--solaris-danger-border)}:host([data-disabled]) .solaris-selection-card__surface{cursor:not-allowed;opacity:var(--solaris-selection-card-disabled-opacity)}:host([data-readonly]) .solaris-selection-card__input{cursor:not-allowed}:host([data-readonly]) .solaris-selection-card__surface{cursor:default;opacity:var(--solaris-selection-card-disabled-opacity)}\n"] }]
+        }], propDecorators: { inputElementRef: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }], media: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisSelectionCardMediaDirective), { isSignal: true }] }], header: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisSelectionCardHeaderDirective), { isSignal: true }] }], footer: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisSelectionCardFooterDirective), { isSignal: true }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonlyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], requiredInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], selectionPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionPosition", required: false }] }], mediaPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "mediaPosition", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelKey", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }], changeEvent: [{ type: i0.Output, args: ["changeEvent"] }] } });
 
 class SolarisSelectionCardContentDirective {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisSelectionCardContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -9120,38 +9327,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                 }]
         }] });
 
-class SolarisSelectionCardFooterDirective {
-    separator = input(false, ...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisSelectionCardFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.22", type: SolarisSelectionCardFooterDirective, isStandalone: true, selector: "[solaris-selection-card-footer]", inputs: { separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-separator": "separator() ? '' : null" }, classAttribute: "solaris-selection-card-footer" }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisSelectionCardFooterDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[solaris-selection-card-footer]',
-                    standalone: true,
-                    host: {
-                        class: 'solaris-selection-card-footer',
-                        '[attr.data-separator]': "separator() ? '' : null",
-                    },
-                }]
-        }], propDecorators: { separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }] } });
-
-class SolarisSelectionCardHeaderDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisSelectionCardHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: SolarisSelectionCardHeaderDirective, isStandalone: true, selector: "[solaris-selection-card-header]", host: { classAttribute: "solaris-selection-card-header" }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisSelectionCardHeaderDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[solaris-selection-card-header]',
-                    standalone: true,
-                    host: {
-                        class: 'solaris-selection-card-header',
-                    },
-                }]
-        }] });
-
 class SolarisSelectionCardTitleDirective {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisSelectionCardTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: SolarisSelectionCardTitleDirective, isStandalone: true, selector: "[solaris-selection-card-title]", host: { classAttribute: "solaris-selection-card-title" }, ngImport: i0 });