@educarehq/solaris-ui 0.20.0 → 0.21.0

package/fesm2022/educarehq-solaris-ui.mjs

@@ -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,124 +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' },
-        ],
-    },
-];
-
-const DATA_ICONS = [
-    {
-        name: 'building',
-        viewBox: '0 0 24 24',
-        fill: 'none',
-        stroke: 'currentColor',
-        strokeWidth: 2,
-        strokeLinecap: 'round',
-        strokeLinejoin: 'round',
         elements: [
             {
                 type: 'path',
-                d: 'M6 2h12a2 2 0 012 2v16a2 2 0 01-2 2H6a2 2 0 01-2-2V4a2 2 0 012-2z',
+                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', 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',
-        viewBox: '0 0 24 24',
-        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 },
-        ],
-    },
-    {
-        name: 'eye-off',
-        viewBox: '0 0 24 24',
-        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: '#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',
             },
-            { type: 'line', x1: 1, y1: 1, x2: 23, y2: 23 },
         ],
     },
     {
-        name: 'globe',
-        viewBox: '0 0 24 24',
+        name: 'microsoft',
+        viewBox: '0 0 16 16',
+        fill: 'none',
         elements: [
-            { type: 'path', d: 'M15 21v-4a2 2 0 012-2h4' },
+            { 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: 'M7 4v2a3 3 0 003 2h0a2 2 0 012 2 2 2 0 004 0 2 2 0 012-2h3',
+                type: 'rect',
+                x: 8.5,
+                y: 8.5,
+                width: 6.5,
+                height: 6.5,
+                fill: '#FFBA08',
             },
-            { 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: 'graduation-cap',
+        name: 'apple',
         viewBox: '0 0 24 24',
         fill: 'none',
-        stroke: 'currentColor',
-        strokeWidth: 2,
-        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: '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: 'map-pin',
-        viewBox: '0 0 24 24',
+        name: 'android',
+        viewBox: '0 0 413.137 413.137',
         fill: 'none',
-        stroke: 'currentColor',
-        strokeWidth: 2,
-        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',
+                fill: '#AAC148',
+                d: 'M311.358,136.395H101.779c-4.662,0-8.441,3.779-8.441,8.441v175.749c0,4.662,3.779,8.441,8.441,8.441h37.363v59.228c0,13.742,11.14,24.883,24.883,24.883l0,0c13.742,0,24.883-11.14,24.883-24.883v-59.228h34.803v59.228c0,13.742,11.14,24.883,24.883,24.883l0,0c13.742,0,24.883-11.14,24.883-24.883v-59.228h37.882c4.662,0,8.441-3.779,8.441-8.441V144.836C319.799,140.174,316.02,136.395,311.358,136.395z',
+            },
+            {
+                type: 'path',
+                fill: '#AAC148',
+                d: 'M57.856,136.354L57.856,136.354c-13.742,0-24.883,11.14-24.883,24.883v101.065c0,13.742,11.14,24.883,24.883,24.883l0,0c13.742,0,24.883-11.14,24.883-24.883V161.237C82.738,147.495,71.598,136.354,57.856,136.354z',
+            },
+            {
+                type: 'path',
+                fill: '#AAC148',
+                d: 'M355.281,136.354L355.281,136.354c-13.742,0-24.883,11.14-24.883,24.883v101.065c0,13.742,11.14,24.883,24.883,24.883l0,0c13.742,0,24.883-11.14,24.883-24.883V161.237C380.164,147.495,369.024,136.354,355.281,136.354z',
+            },
+            {
+                type: 'path',
+                fill: '#AAC148',
+                d: 'M103.475,124.069h205.692c5.366,0,9.368-4.943,8.266-10.195c-6.804-32.428-27.45-59.756-55.465-75.543l17.584-31.727c1.19-2.148,0.414-4.855-1.734-6.045c-2.153-1.193-4.856-0.414-6.046,1.734l-17.717,31.966c-14.511-6.734-30.683-10.495-47.734-10.495c-17.052,0-33.224,3.761-47.735,10.495L140.869,2.292c-1.191-2.149-3.898-2.924-6.045-1.734c-2.148,1.19-2.924,3.897-1.734,6.045l17.584,31.727c-28.015,15.788-48.661,43.115-55.465,75.544C94.106,119.126,98.108,124.069,103.475,124.069z M267.697,76.786c0,5.282-4.282,9.565-9.565,9.565c-5.282,0-9.565-4.282-9.565-9.565c0-5.282,4.282-9.565,9.565-9.565C263.415,67.221,267.697,71.504,267.697,76.786z M154.508,67.221c5.282,0,9.565,4.282,9.565,9.565c0,5.282-4.282,9.565-9.565,9.565c-5.282,0-9.565-4.282-9.565-9.565C144.943,71.504,149.225,67.221,154.508,67.221z',
+            },
         ],
     },
     {
-        name: 'user',
+        name: 'github',
         viewBox: '0 0 24 24',
         fill: 'none',
-        stroke: 'currentColor',
-        strokeWidth: 2,
-        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',
+                fill: 'currentColor',
+                d: 'M12,2.2467A10.00042,10.00042,0,0,0,8.83752,21.73419c.5.08752.6875-.21247.6875-.475,0-.23749-.01251-1.025-.01251-1.86249C7,19.85919,6.35,18.78423,6.15,18.22173A3.636,3.636,0,0,0,5.125,16.8092c-.35-.1875-.85-.65-.01251-.66248A2.00117,2.00117,0,0,1,6.65,17.17169a2.13742,2.13742,0,0,0,2.91248.825A2.10376,2.10376,0,0,1,10.2,16.65923c-2.225-.25-4.55-1.11254-4.55-4.9375a3.89187,3.89187,0,0,1,1.025-2.6875,3.59373,3.59373,0,0,1,.1-2.65s.83747-.26251,2.75,1.025a9.42747,9.42747,0,0,1,5,0c1.91248-1.3,2.75-1.025,2.75-1.025a3.59323,3.59323,0,0,1,.1,2.65,3.869,3.869,0,0,1,1.025,2.6875c0,3.83747-2.33752,4.6875-4.5625,4.9375a2.36814,2.36814,0,0,1,.675,1.85c0,1.33752-.01251,2.41248-.01251,2.75,0,.26251.1875.575.6875.475A10.0053,10.0053,0,0,0,12,2.2467Z',
+            },
         ],
     },
+];
+
+const THEME_ICONS = [
     {
-        name: 'users',
+        name: 'sun',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -1872,14 +2059,19 @@ 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: '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: 'storage',
+        name: 'moon',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -1887,13 +2079,11 @@ 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: 'M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z' },
         ],
     },
     {
-        name: 'calendar',
+        name: 'monitor',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -1901,20 +2091,16 @@ 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: 'M2 3h20v14H2z' },
+            { type: 'path', d: 'M8 21h8' },
+            { type: 'path', d: 'M12 17v4' },
         ],
     },
+];
+
+const MEDIA_ICONS = [
     {
-        name: 'calendar-sync',
+        name: 'image',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -1922,21 +2108,16 @@ 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: '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 8.517V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3.517',
+                d: 'm21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21',
             },
-            { type: 'path', d: 'M3 9h4' },
-            { type: 'path', d: 'M8 2v3' },
         ],
     },
     {
-        name: 'book',
+        name: 'video',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -1946,12 +2127,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: '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: 'server',
+        name: 'mic',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -1959,14 +2141,13 @@ 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: '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: 'package',
+        name: 'leaf',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -1976,15 +2157,13 @@ const DATA_ICONS = [
         elements: [
             {
                 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: '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: 'M12 22V12' },
-            { type: 'polyline', points: '3.29 7 12 12 20.71 7' },
-            { type: 'path', d: 'm7.5 4.27 9 5.15' },
+            { type: 'path', d: 'M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12' },
         ],
     },
     {
-        name: 'squared-text',
+        name: 'eject',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -1992,14 +2171,15 @@ 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: '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: 'notepad',
+        name: 'headphones',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -2007,17 +2187,14 @@ const DATA_ICONS = [
         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: '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: 'podium',
+        name: 'headphones-off',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -2025,16 +2202,24 @@ const DATA_ICONS = [
         strokeLinecap: 'round',
         strokeLinejoin: 'round',
         elements: [
-            { type: 'path', d: 'M12 6V2h-1' },
+            { 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: '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: '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: 'M9 21V11a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v10' },
         ],
     },
+];
+
+const DATA_ICONS = [
     {
-        name: 'timer',
+        name: 'building',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -2042,50 +2227,56 @@ const DATA_ICONS = [
         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: '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: 'clock-arrow-right',
+        name: 'eye',
         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: '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: 'truck',
+        name: 'eye-off',
         viewBox: '0 0 24 24',
-        fill: 'none',
-        stroke: 'currentColor',
-        strokeWidth: 2,
-        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',
+                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: 'M15 18H9' },
+            { type: 'line', x1: 1, y1: 1, x2: 23, y2: 23 },
+        ],
+    },
+    {
+        name: 'globe',
+        viewBox: '0 0 24 24',
+        elements: [
+            { type: 'path', d: 'M15 21v-4a2 2 0 012-2h4' },
             {
                 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',
+                d: 'M7 4v2a3 3 0 003 2h0a2 2 0 012 2 2 2 0 004 0 2 2 0 012-2h3',
             },
-            { type: 'circle', cx: 17, cy: 18, r: 2 },
-            { type: 'circle', cx: 7, cy: 18, r: 2 },
+            { 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: 'handshake',
+        name: 'graduation-cap',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -2093,18 +2284,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: 'M22 10v6M2 10l10-5 10 5-10 5z' },
+            { type: 'path', d: 'M6 12v5c3 3 9 3 12 0v-5' },
         ],
     },
     {
-        name: 'route',
+        name: 'map-pin',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -2112,19 +2297,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: 'M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z' },
+            { type: 'circle', cx: 12, cy: 10, r: 3 },
         ],
     },
-];
-
-const COMMUNICATION_ICONS = [
     {
-        name: 'mail',
+        name: 'user',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -2132,12 +2310,12 @@ 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: 'M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2' },
+            { type: 'circle', cx: 12, cy: 7, r: 4 },
         ],
     },
     {
-        name: 'mail-open',
+        name: 'users',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -2145,15 +2323,14 @@ 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: '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-plus',
+        name: 'storage',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -2161,17 +2338,13 @@ 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: '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: 'message-circle',
+        name: 'calendar',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -2179,14 +2352,20 @@ const COMMUNICATION_ICONS = [
         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 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-2',
+        name: 'calendar-sync',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -2194,17 +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: 'M8 12h.01' },
-            { type: 'path', d: 'M12 12h.01' },
-            { type: 'path', d: 'M16 12h.01' },
+            { type: 'path', d: 'M3 9h4' },
+            { type: 'path', d: 'M8 2v3' },
         ],
     },
     {
-        name: 'message-circle-off',
+        name: 'book',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -2212,16 +2395,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',
+                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.35 2.69A10 10 0 0 1 21.3 15.65' },
         ],
     },
     {
-        name: 'message-circle-question-mark',
+        name: 'server',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -2229,16 +2410,14 @@ const COMMUNICATION_ICONS = [
         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' },
+            { 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-square',
+        name: 'package',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -2248,12 +2427,15 @@ const COMMUNICATION_ICONS = [
         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',
+                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: '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-2',
+        name: 'squared-text',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -2261,17 +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: 'path', d: 'M12 11h.01' },
-            { type: 'path', d: 'M16 11h.01' },
-            { type: 'path', d: 'M8 11h.01' },
+            { 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-off',
+        name: 'notepad',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -2279,16 +2458,17 @@ const COMMUNICATION_ICONS = [
         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' },
+            { 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: 'inbox',
+        name: 'podium',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -2296,15 +2476,16 @@ 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: 'M12 6V2h-1' },
             {
                 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',
+                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: 'M9 21V11a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v10' },
         ],
     },
     {
-        name: 'send',
+        name: 'timer',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -2312,15 +2493,13 @@ 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: '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: 'rss',
+        name: 'clock-arrow-right',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -2328,16 +2507,14 @@ 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: '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' },
         ],
     },
-];
-
-const MEDIA_ICONS = [
     {
-        name: 'image',
+        name: 'truck',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -2345,16 +2522,21 @@ 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: 'm21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21',
+                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 },
         ],
     },
     {
-        name: 'video',
+        name: 'handshake',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -2362,15 +2544,18 @@ const MEDIA_ICONS = [
         strokeLinecap: 'round',
         strokeLinejoin: 'round',
         elements: [
+            { type: 'path', d: 'm11 17 2 2a1 1 0 1 0 3-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: '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: 'rect', x: 2, y: 6, width: 14, height: 12, rx: 2 },
+            { 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: 'mic',
+        name: 'route',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -2378,13 +2563,16 @@ 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: '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 },
         ],
     },
     {
-        name: 'leaf',
+        name: 'id-card',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -2392,15 +2580,15 @@ const MEDIA_ICONS = [
         strokeLinecap: 'round',
         strokeLinejoin: 'round',
         elements: [
-            {
-                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',
-            },
-            { type: 'path', d: 'M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12' },
+            { 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: 'eject',
+        name: 'badge',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -2408,15 +2596,18 @@ const MEDIA_ICONS = [
         strokeLinecap: 'round',
         strokeLinejoin: 'round',
         elements: [
+            { type: 'path', d: 'M13.5 8h-3' },
             {
                 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: '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: 'rect', x: 3, y: 17, width: 18, height: 4, rx: 1 },
+            { 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: 'headphones',
+        name: 'city',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -2424,14 +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: '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 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: 'path', d: 'M6 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16' },
         ],
     },
     {
-        name: 'headphones-off',
+        name: 'school',
         viewBox: '0 0 24 24',
         fill: 'none',
         stroke: 'currentColor',
@@ -2439,130 +2634,111 @@ 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: '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 2.636-6.364',
+                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 },
         ],
     },
-];
-
-const BRAND_ICONS = [
     {
-        name: 'google',
-        viewBox: '0 0 16 16',
+        name: 'balance',
+        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',
-            },
+            { 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' },
         ],
     },
     {
-        name: 'microsoft',
-        viewBox: '0 0 16 16',
+        name: 'signature',
+        viewBox: '0 0 24 24',
         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: 'rect',
-                x: 8.5,
-                y: 8.5,
-                width: 6.5,
-                height: 6.5,
-                fill: '#FFBA08',
+                type: 'path',
+                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 {
@@ -4927,14 +5103,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 +5281,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 +5390,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 +5476,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 +5505,9 @@ class SolarisPopoverTriggerDirective {
             this.overlayRef.detach();
             this.disposeOverlay();
         }
+        else {
+            this.clearConnectedSideAttributes();
+        }
         this.removeOutsideClickHandler();
     }
     disposeOverlay() {
@@ -5326,12 +5516,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 +5629,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 +5640,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 +6008,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 +6021,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 +6350,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 +6377,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 +7013,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 +7032,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 +7589,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 +7602,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 +8012,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 +8040,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,