@educarehq/solaris-ui 2.0.1 → 2.0.3

package/fesm2022/educarehq-solaris-ui.mjs

@@ -1,11 +1,11 @@
 import * as i0 from "@angular/core";
 import { ApplicationRef, ChangeDetectionStrategy, ChangeDetectorRef, Component, DOCUMENT, DestroyRef, Directive, ElementRef, EnvironmentInjector, HostListener, Injectable, InjectionToken, Injector, NgZone, PLATFORM_ID, Pipe, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation, afterEveryRender, afterNextRender, booleanAttribute, computed, contentChild, contentChildren, createComponent, effect, forwardRef, inject, input, isDevMode, linkedSignal, makeEnvironmentProviders, model, numberAttribute, output, signal, untracked, viewChild, viewChildren } from "@angular/core";
 import { DOCUMENT as DOCUMENT$1, NgTemplateOutlet, formatDate, isPlatformBrowser } from "@angular/common";
-import { DomSanitizer } from "@angular/platform-browser";
 import * as i1 from "@angular/forms";
 import { FormControl, FormControlDirective, FormControlName, FormGroup, FormsModule, NG_VALUE_ACCESSOR, NgControl, NgModel, ReactiveFormsModule, Validators } from "@angular/forms";
 import { Overlay, OverlayConfig } from "@angular/cdk/overlay";
 import { ComponentPortal, TemplatePortal } from "@angular/cdk/portal";
+import { DomSanitizer } from "@angular/platform-browser";
 import { AsYouType, Metadata, getCountries, getCountryCallingCode, getExampleNumber, parsePhoneNumberFromString } from "libphonenumber-js";
 import * as FLAG_3X2 from "country-flag-icons/string/3x2";
 import { hasFlag } from "country-flag-icons";
@@ -6957,21 +6957,22 @@ const ALLOWED_ATTRS = /* @__PURE__ */ new Set([
 	"stroke-linejoin",
 	"stroke-opacity",
 	"opacity",
-	"transform"
+	"transform",
+	"vector-effect"
 ]);
 const BANNED_PAIRED_RE = /<\s*(script|foreignObject|use|animate|animateTransform|style|iframe|embed|object|a|image|text|tspan)[^<>]*>[\s\S]*?<\/\s*\1\s*>/gi;
 const BANNED_SINGLE_RE = /<\s*(script|foreignObject|use|animate|animateTransform|style|iframe|embed|object|a|image|text|tspan)[^<>]*(?:\/>|>)/gi;
-const TAG_RE = /<\s*(\/?)\s*([a-zA-Z][a-zA-Z0-9-]*)([^<>]*)(\/?)\s*>/g;
-const ATTR_RE = /([a-zA-Z_:][a-zA-Z0-9_.:-]*)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+)))?/g;
+const TAG_RE$1 = /<\s*(\/?)\s*([a-zA-Z][a-zA-Z0-9-]*)([^<>]*)(\/?)\s*>/g;
+const ATTR_RE$1 = /([a-zA-Z_:][a-zA-Z0-9_.:-]*)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+)))?/g;
 function isUnsafeValue(value) {
 	const v = value.trim().toLowerCase();
 	return v.includes("javascript:") || v.includes("data:text/html") || v.includes("<script") || v.includes("expression(") || /url\s*\(\s*['"]?\s*javascript:/.test(v);
 }
 function sanitizeAttrs(raw) {
 	const out = [];
-	ATTR_RE.lastIndex = 0;
+	ATTR_RE$1.lastIndex = 0;
 	let m;
-	while ((m = ATTR_RE.exec(raw)) !== null) {
+	while ((m = ATTR_RE$1.exec(raw)) !== null) {
 		const name = m[1].toLowerCase();
 		const value = m[2] ?? m[3] ?? m[4] ?? "";
 		if (name.startsWith("on")) continue;
@@ -6985,8 +6986,8 @@ function sanitizeAttrs(raw) {
 function sanitizeIconSvgInner(inner) {
 	if (!inner) return "";
 	const withoutBanned = inner.replace(/<!--[\s\S]*?-->/g, "").replace(BANNED_PAIRED_RE, "").replace(BANNED_SINGLE_RE, "");
-	TAG_RE.lastIndex = 0;
-	return withoutBanned.replace(TAG_RE, (_full, close, tag, attrs) => {
+	TAG_RE$1.lastIndex = 0;
+	return withoutBanned.replace(TAG_RE$1, (_full, close, tag, attrs) => {
 		const tagName = tag.toLowerCase();
 		if (close) return ALLOWED_TAGS.has(tagName) ? `</${tagName}>` : "";
 		if (!ALLOWED_TAGS.has(tagName)) return "";
@@ -6999,7 +7000,7 @@ function sanitizeIconSvgInner(inner) {
 function isSafeIconSvgInner(inner) {
 	return sanitizeIconSvgInner(inner) === inner;
 }
-const KEBAB = {
+const KEBAB$1 = {
 	fillRule: "fill-rule",
 	clipRule: "clip-rule",
 	strokeWidth: "stroke-width",
@@ -7012,11 +7013,79 @@ function iconElementsToInner(elements) {
 		const parts = [];
 		for (const [key, value] of Object.entries(attrs)) {
 			if (value === void 0 || value === null) continue;
-			parts.push(`${KEBAB[key] ?? key}="${String(value).replace(/"/g, "&quot;")}"`);
+			parts.push(`${KEBAB$1[key] ?? key}="${String(value).replace(/"/g, "&quot;")}"`);
 		}
 		return `<${type}${parts.length > 0 ? " " + parts.join(" ") : ""}/>`;
 	}).join("");
 }
+const CONTAINER_TAGS = /* @__PURE__ */ new Set(["g", "mask"]);
+const KEBAB = {
+	fillRule: "fill-rule",
+	clipRule: "clip-rule",
+	strokeWidth: "stroke-width",
+	strokeLinecap: "stroke-linecap",
+	strokeLinejoin: "stroke-linejoin",
+	fillOpacity: "fill-opacity",
+	strokeOpacity: "stroke-opacity",
+	vectorEffect: "vector-effect"
+};
+function toKebab(key) {
+	return KEBAB[key] ?? key.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+}
+function iconElementsToNodes(elements) {
+	return elements.map((el) => {
+		const { type, ...rest } = el;
+		const attrs = {};
+		for (const [key, value] of Object.entries(rest)) {
+			if (value === void 0 || value === null) continue;
+			attrs[toKebab(key)] = String(value);
+		}
+		return {
+			tag: type,
+			attrs,
+			children: []
+		};
+	});
+}
+const TAG_RE = /<\s*(\/?)\s*([a-zA-Z][a-zA-Z0-9-]*)([^<>]*?)(\/?)\s*>/g;
+const ATTR_RE = /([a-zA-Z_:][a-zA-Z0-9_.:-]*)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+)))?/g;
+function sanitizedInnerToNodes(inner) {
+	const clean = sanitizeIconSvgInner(inner);
+	if (!clean) return [];
+	const root = [];
+	const stack = [];
+	TAG_RE.lastIndex = 0;
+	let m;
+	while ((m = TAG_RE.exec(clean)) !== null) {
+		const isClose = m[1] === "/";
+		const tag = m[2].toLowerCase();
+		const rawAttrs = m[3] ?? "";
+		const selfClosing = m[4] === "/";
+		if (isClose) {
+			for (let i = stack.length - 1; i >= 0; i--) if (stack[i].tag === tag) {
+				stack.length = i;
+				break;
+			}
+			continue;
+		}
+		const attrs = {};
+		ATTR_RE.lastIndex = 0;
+		let am;
+		while ((am = ATTR_RE.exec(rawAttrs)) !== null) {
+			const name = am[1].toLowerCase();
+			attrs[name] = am[2] ?? am[3] ?? am[4] ?? "";
+		}
+		const node = {
+			tag,
+			attrs,
+			children: []
+		};
+		if (stack.length > 0) stack[stack.length - 1].children.push(node);
+		else root.push(node);
+		if (!selfClosing && CONTAINER_TAGS.has(tag)) stack.push(node);
+	}
+	return root;
+}
 const SOLARIS_ICONS_METADATA = {
 	analytics: {
 		categories: ["navigation"],
@@ -10455,10 +10524,10 @@ const NO_VARIANT_ICONS = /* @__PURE__ */ new Set([
 	"ellipsis-vertical",
 	"grip-vertical"
 ]);
+const VECTOR_EFFECT_ATTRS = { "vector-effect": "non-scaling-stroke" };
 var SolarisIconComponent = class SolarisIconComponent {
 	registry = inject(SolarisIconRegistryService);
 	config = inject(SOLARIS_ICONS_CONFIG, { optional: true });
-	sanitizer = inject(DomSanitizer);
 	name = input.required(...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
 	variant = input(...ngDevMode ? [void 0, { debugName: "variant" }] : /* istanbul ignore next */ []);
 	size = input(...ngDevMode ? [void 0, { debugName: "size" }] : /* istanbul ignore next */ []);
@@ -10503,8 +10572,8 @@ var SolarisIconComponent = class SolarisIconComponent {
 		const strokeWidth = this.resolvedStrokeWidth();
 		const linecap = icon.strokeLinecap ?? "round";
 		const linejoin = icon.strokeLinejoin ?? "round";
-		const inner = iconElementsToInner(icon.elements);
-		const vectorEffect = this.absoluteStrokeWidth() ? " vector-effect=\"non-scaling-stroke\"" : "";
+		const elementNodes = iconElementsToNodes(icon.elements);
+		const withVectorEffect = this.absoluteStrokeWidth() && variant === "outline" && !this.hasOwnColors();
 		if (this.hasOwnColors()) return {
 			viewBox: icon.viewBox,
 			fill: icon.fill ?? null,
@@ -10513,7 +10582,7 @@ var SolarisIconComponent = class SolarisIconComponent {
 			linecap,
 			linejoin,
 			variant,
-			safeInner: this.sanitizer.bypassSecurityTrustHtml(sanitizeIconSvgInner(inner))
+			nodes: elementNodes
 		};
 		if (variant === "solid") {
 			const solidInner = SOLARIS_SOLID_SVG[icon.name];
@@ -10525,7 +10594,7 @@ var SolarisIconComponent = class SolarisIconComponent {
 				linecap,
 				linejoin,
 				variant,
-				safeInner: this.sanitizer.bypassSecurityTrustHtml(sanitizeIconSvgInner(solidInner))
+				nodes: sanitizedInnerToNodes(solidInner)
 			};
 			return {
 				viewBox: icon.viewBox,
@@ -10535,7 +10604,7 @@ var SolarisIconComponent = class SolarisIconComponent {
 				linecap,
 				linejoin,
 				variant,
-				safeInner: this.sanitizer.bypassSecurityTrustHtml(sanitizeIconSvgInner(this.knockoutInner(icon.name, icon.viewBox, inner, strokeWidth)))
+				nodes: this.knockoutNodes(icon.name, icon.viewBox, elementNodes, strokeWidth)
 			};
 		}
 		if (variant === "duotone") {
@@ -10548,7 +10617,7 @@ var SolarisIconComponent = class SolarisIconComponent {
 				linecap,
 				linejoin,
 				variant,
-				safeInner: this.sanitizer.bypassSecurityTrustHtml(sanitizeIconSvgInner(duotoneInner))
+				nodes: sanitizedInnerToNodes(duotoneInner)
 			};
 			return {
 				viewBox: icon.viewBox,
@@ -10558,10 +10627,14 @@ var SolarisIconComponent = class SolarisIconComponent {
 				linecap,
 				linejoin,
 				variant,
-				safeInner: this.sanitizer.bypassSecurityTrustHtml(sanitizeIconSvgInner(this.duotoneInner(icon.viewBox, inner, strokeWidth, vectorEffect)))
+				nodes: this.duotoneFallbackNodes(icon.viewBox, elementNodes, strokeWidth)
 			};
 		}
-		const wrapped = vectorEffect !== "" ? `<g${vectorEffect}>${inner}</g>` : inner;
+		const nodes = withVectorEffect && elementNodes.length > 0 ? [{
+			tag: "g",
+			attrs: { ...VECTOR_EFFECT_ATTRS },
+			children: elementNodes
+		}] : elementNodes;
 		const stroke = this.inheritColor() ? icon.stroke ?? "currentColor" : "none";
 		return {
 			viewBox: icon.viewBox,
@@ -10571,18 +10644,85 @@ var SolarisIconComponent = class SolarisIconComponent {
 			linecap,
 			linejoin,
 			variant,
-			safeInner: this.sanitizer.bypassSecurityTrustHtml(sanitizeIconSvgInner(wrapped))
+			nodes
 		};
 	}, ...ngDevMode ? [{ debugName: "viewModel" }] : /* istanbul ignore next */ []);
-	knockoutInner(name, viewBox, inner, strokeWidth) {
+	knockoutNodes(name, viewBox, lineNodes, strokeWidth) {
 		const { w, h } = parseViewBoxSize(viewBox);
 		const rx = Math.round(Math.min(w, h) / 6 * 100) / 100;
 		const id = `solaris-${name.replace(/[^a-z0-9-]/gi, "")}-${String(strokeWidth).replace(".", "-")}-mask`;
-		return `<mask id="${id}"><rect x="0" y="0" width="${w}" height="${h}" rx="${rx}" fill="#fff"/><g fill="none" stroke="#000" stroke-width="${strokeWidth}" stroke-linecap="round" stroke-linejoin="round">${inner}</g></mask><rect x="0" y="0" width="${w}" height="${h}" rx="${rx}" fill="currentColor" mask="url(#${id})"/>`;
+		const size = {
+			w: String(w),
+			h: String(h),
+			rx: String(rx)
+		};
+		return [{
+			tag: "mask",
+			attrs: { id },
+			children: [{
+				tag: "rect",
+				attrs: {
+					x: "0",
+					y: "0",
+					width: size.w,
+					height: size.h,
+					rx: size.rx,
+					fill: "#fff"
+				},
+				children: []
+			}, {
+				tag: "g",
+				attrs: {
+					fill: "none",
+					stroke: "#000",
+					"stroke-width": String(strokeWidth),
+					"stroke-linecap": "round",
+					"stroke-linejoin": "round"
+				},
+				children: lineNodes
+			}]
+		}, {
+			tag: "rect",
+			attrs: {
+				x: "0",
+				y: "0",
+				width: size.w,
+				height: size.h,
+				rx: size.rx,
+				fill: "currentColor",
+				mask: `url(#${id})`
+			},
+			children: []
+		}];
 	}
-	duotoneInner(viewBox, inner, strokeWidth, vectorEffect) {
+	duotoneFallbackNodes(viewBox, lineNodes, strokeWidth) {
 		const { w, h } = parseViewBoxSize(viewBox);
-		return `<rect x="0" y="0" width="${w}" height="${h}" rx="${Math.round(Math.min(w, h) / 6 * 100) / 100}" fill="currentColor" opacity="0.2"/><g fill="none" stroke="currentColor" stroke-width="${strokeWidth}" stroke-linecap="round" stroke-linejoin="round"${vectorEffect}>${inner}</g>`;
+		const rx = Math.round(Math.min(w, h) / 6 * 100) / 100;
+		const lineAttrs = {
+			fill: "none",
+			stroke: "currentColor",
+			"stroke-width": String(strokeWidth),
+			"stroke-linecap": "round",
+			"stroke-linejoin": "round"
+		};
+		if (this.absoluteStrokeWidth()) Object.assign(lineAttrs, VECTOR_EFFECT_ATTRS);
+		return [{
+			tag: "rect",
+			attrs: {
+				x: "0",
+				y: "0",
+				width: String(w),
+				height: String(h),
+				rx: String(rx),
+				fill: "currentColor",
+				opacity: "0.2"
+			},
+			children: []
+		}, {
+			tag: "g",
+			attrs: lineAttrs,
+			children: lineNodes
+		}];
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
@@ -10662,8 +10802,18 @@ var SolarisIconComponent = class SolarisIconComponent {
 			"attr.data-variant": "resolvedVariant()"
 		} },
 		ngImport: i0,
-		template: "@if (viewModel(); as vm) {\n  <!-- SECURITY_EXCEPTION: inner SVG is allowlist-sanitized in the component before trust; this binding renders sanitized markup only. -->\n  <svg\n    [innerHTML]=\"vm.safeInner\"\n    width=\"100%\"\n    height=\"100%\"\n    [attr.viewBox]=\"vm.viewBox\"\n    [attr.fill]=\"vm.fill\"\n    [attr.stroke]=\"vm.stroke\"\n    [attr.stroke-width]=\"vm.strokeWidth\"\n    [attr.stroke-linecap]=\"vm.linecap\"\n    [attr.stroke-linejoin]=\"vm.linejoin\"\n    [attr.data-variant]=\"vm.variant\"\n    [attr.aria-hidden]=\"isHidden() ? 'true' : null\"\n    [attr.aria-label]=\"hasSemanticLabel() ? accessibleLabel() : null\"\n    [attr.role]=\"isHidden() ? 'presentation' : 'img'\"\n  ></svg>\n}\n",
+		template: "@if (viewModel(); as vm) {\n  <svg\n    width=\"100%\"\n    height=\"100%\"\n    [attr.viewBox]=\"vm.viewBox\"\n    [attr.fill]=\"vm.fill\"\n    [attr.stroke]=\"vm.stroke\"\n    [attr.stroke-width]=\"vm.strokeWidth\"\n    [attr.stroke-linecap]=\"vm.linecap\"\n    [attr.stroke-linejoin]=\"vm.linejoin\"\n    [attr.data-variant]=\"vm.variant\"\n    [attr.aria-hidden]=\"isHidden() ? 'true' : null\"\n    [attr.aria-label]=\"hasSemanticLabel() ? accessibleLabel() : null\"\n    [attr.role]=\"isHidden() ? 'presentation' : 'img'\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"nodeList; context: { $implicit: vm.nodes }\"\n    ></ng-container>\n  </svg>\n  <ng-template #nodeList let-nodes>\n    @for (node of nodes; track $index) {\n      @switch (node.tag) {\n        @case ('g') {\n          <svg:g\n            [attr.id]=\"node.attrs['id'] ?? null\"\n            [attr.fill]=\"node.attrs['fill'] ?? null\"\n            [attr.fill-rule]=\"node.attrs['fill-rule'] ?? null\"\n            [attr.fill-opacity]=\"node.attrs['fill-opacity'] ?? null\"\n            [attr.clip-rule]=\"node.attrs['clip-rule'] ?? null\"\n            [attr.stroke]=\"node.attrs['stroke'] ?? null\"\n            [attr.stroke-width]=\"node.attrs['stroke-width'] ?? null\"\n            [attr.stroke-linecap]=\"node.attrs['stroke-linecap'] ?? null\"\n            [attr.stroke-linejoin]=\"node.attrs['stroke-linejoin'] ?? null\"\n            [attr.stroke-opacity]=\"node.attrs['stroke-opacity'] ?? null\"\n            [attr.opacity]=\"node.attrs['opacity'] ?? null\"\n            [attr.transform]=\"node.attrs['transform'] ?? null\"\n            [attr.vector-effect]=\"node.attrs['vector-effect'] ?? null\"\n            [attr.mask]=\"node.attrs['mask'] ?? null\"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                nodeList;\n                context: { $implicit: node.children }\n              \"\n            ></ng-container>\n          </svg:g>\n        }\n        @case ('mask') {\n          <svg:mask\n            [attr.id]=\"node.attrs['id'] ?? null\"\n            [attr.x]=\"node.attrs['x'] ?? null\"\n            [attr.y]=\"node.attrs['y'] ?? null\"\n            [attr.width]=\"node.attrs['width'] ?? null\"\n            [attr.height]=\"node.attrs['height'] ?? null\"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                nodeList;\n                context: { $implicit: node.children }\n              \"\n            ></ng-container>\n          </svg:mask>\n        }\n        @case ('path') {\n          <svg:path\n            [attr.d]=\"node.attrs['d'] ?? null\"\n            [attr.id]=\"node.attrs['id'] ?? null\"\n            [attr.fill]=\"node.attrs['fill'] ?? null\"\n            [attr.fill-rule]=\"node.attrs['fill-rule'] ?? null\"\n            [attr.fill-opacity]=\"node.attrs['fill-opacity'] ?? null\"\n            [attr.clip-rule]=\"node.attrs['clip-rule'] ?? null\"\n            [attr.stroke]=\"node.attrs['stroke'] ?? null\"\n            [attr.stroke-width]=\"node.attrs['stroke-width'] ?? null\"\n            [attr.stroke-linecap]=\"node.attrs['stroke-linecap'] ?? null\"\n            [attr.stroke-linejoin]=\"node.attrs['stroke-linejoin'] ?? null\"\n            [attr.stroke-opacity]=\"node.attrs['stroke-opacity'] ?? null\"\n            [attr.opacity]=\"node.attrs['opacity'] ?? null\"\n            [attr.transform]=\"node.attrs['transform'] ?? null\"\n            [attr.vector-effect]=\"node.attrs['vector-effect'] ?? null\"\n            [attr.mask]=\"node.attrs['mask'] ?? null\"\n          />\n        }\n        @case ('circle') {\n          <svg:circle\n            [attr.cx]=\"node.attrs['cx'] ?? null\"\n            [attr.cy]=\"node.attrs['cy'] ?? null\"\n            [attr.r]=\"node.attrs['r'] ?? null\"\n            [attr.id]=\"node.attrs['id'] ?? null\"\n            [attr.fill]=\"node.attrs['fill'] ?? null\"\n            [attr.fill-rule]=\"node.attrs['fill-rule'] ?? null\"\n            [attr.fill-opacity]=\"node.attrs['fill-opacity'] ?? null\"\n            [attr.clip-rule]=\"node.attrs['clip-rule'] ?? null\"\n            [attr.stroke]=\"node.attrs['stroke'] ?? null\"\n            [attr.stroke-width]=\"node.attrs['stroke-width'] ?? null\"\n            [attr.stroke-linecap]=\"node.attrs['stroke-linecap'] ?? null\"\n            [attr.stroke-linejoin]=\"node.attrs['stroke-linejoin'] ?? null\"\n            [attr.stroke-opacity]=\"node.attrs['stroke-opacity'] ?? null\"\n            [attr.opacity]=\"node.attrs['opacity'] ?? null\"\n            [attr.transform]=\"node.attrs['transform'] ?? null\"\n            [attr.vector-effect]=\"node.attrs['vector-effect'] ?? null\"\n            [attr.mask]=\"node.attrs['mask'] ?? null\"\n          />\n        }\n        @case ('rect') {\n          <svg:rect\n            [attr.x]=\"node.attrs['x'] ?? null\"\n            [attr.y]=\"node.attrs['y'] ?? null\"\n            [attr.width]=\"node.attrs['width'] ?? null\"\n            [attr.height]=\"node.attrs['height'] ?? null\"\n            [attr.rx]=\"node.attrs['rx'] ?? null\"\n            [attr.ry]=\"node.attrs['ry'] ?? null\"\n            [attr.id]=\"node.attrs['id'] ?? null\"\n            [attr.fill]=\"node.attrs['fill'] ?? null\"\n            [attr.fill-rule]=\"node.attrs['fill-rule'] ?? null\"\n            [attr.fill-opacity]=\"node.attrs['fill-opacity'] ?? null\"\n            [attr.clip-rule]=\"node.attrs['clip-rule'] ?? null\"\n            [attr.stroke]=\"node.attrs['stroke'] ?? null\"\n            [attr.stroke-width]=\"node.attrs['stroke-width'] ?? null\"\n            [attr.stroke-linecap]=\"node.attrs['stroke-linecap'] ?? null\"\n            [attr.stroke-linejoin]=\"node.attrs['stroke-linejoin'] ?? null\"\n            [attr.stroke-opacity]=\"node.attrs['stroke-opacity'] ?? null\"\n            [attr.opacity]=\"node.attrs['opacity'] ?? null\"\n            [attr.transform]=\"node.attrs['transform'] ?? null\"\n            [attr.vector-effect]=\"node.attrs['vector-effect'] ?? null\"\n            [attr.mask]=\"node.attrs['mask'] ?? null\"\n          />\n        }\n        @case ('line') {\n          <svg:line\n            [attr.x1]=\"node.attrs['x1'] ?? null\"\n            [attr.y1]=\"node.attrs['y1'] ?? null\"\n            [attr.x2]=\"node.attrs['x2'] ?? null\"\n            [attr.y2]=\"node.attrs['y2'] ?? null\"\n            [attr.id]=\"node.attrs['id'] ?? null\"\n            [attr.fill]=\"node.attrs['fill'] ?? null\"\n            [attr.fill-rule]=\"node.attrs['fill-rule'] ?? null\"\n            [attr.fill-opacity]=\"node.attrs['fill-opacity'] ?? null\"\n            [attr.clip-rule]=\"node.attrs['clip-rule'] ?? null\"\n            [attr.stroke]=\"node.attrs['stroke'] ?? null\"\n            [attr.stroke-width]=\"node.attrs['stroke-width'] ?? null\"\n            [attr.stroke-linecap]=\"node.attrs['stroke-linecap'] ?? null\"\n            [attr.stroke-linejoin]=\"node.attrs['stroke-linejoin'] ?? null\"\n            [attr.stroke-opacity]=\"node.attrs['stroke-opacity'] ?? null\"\n            [attr.opacity]=\"node.attrs['opacity'] ?? null\"\n            [attr.transform]=\"node.attrs['transform'] ?? null\"\n            [attr.vector-effect]=\"node.attrs['vector-effect'] ?? null\"\n            [attr.mask]=\"node.attrs['mask'] ?? null\"\n          />\n        }\n        @case ('polyline') {\n          <svg:polyline\n            [attr.points]=\"node.attrs['points'] ?? null\"\n            [attr.id]=\"node.attrs['id'] ?? null\"\n            [attr.fill]=\"node.attrs['fill'] ?? null\"\n            [attr.fill-rule]=\"node.attrs['fill-rule'] ?? null\"\n            [attr.fill-opacity]=\"node.attrs['fill-opacity'] ?? null\"\n            [attr.clip-rule]=\"node.attrs['clip-rule'] ?? null\"\n            [attr.stroke]=\"node.attrs['stroke'] ?? null\"\n            [attr.stroke-width]=\"node.attrs['stroke-width'] ?? null\"\n            [attr.stroke-linecap]=\"node.attrs['stroke-linecap'] ?? null\"\n            [attr.stroke-linejoin]=\"node.attrs['stroke-linejoin'] ?? null\"\n            [attr.stroke-opacity]=\"node.attrs['stroke-opacity'] ?? null\"\n            [attr.opacity]=\"node.attrs['opacity'] ?? null\"\n            [attr.transform]=\"node.attrs['transform'] ?? null\"\n            [attr.vector-effect]=\"node.attrs['vector-effect'] ?? null\"\n            [attr.mask]=\"node.attrs['mask'] ?? null\"\n          />\n        }\n        @case ('polygon') {\n          <svg:polygon\n            [attr.points]=\"node.attrs['points'] ?? null\"\n            [attr.id]=\"node.attrs['id'] ?? null\"\n            [attr.fill]=\"node.attrs['fill'] ?? null\"\n            [attr.fill-rule]=\"node.attrs['fill-rule'] ?? null\"\n            [attr.fill-opacity]=\"node.attrs['fill-opacity'] ?? null\"\n            [attr.clip-rule]=\"node.attrs['clip-rule'] ?? null\"\n            [attr.stroke]=\"node.attrs['stroke'] ?? null\"\n            [attr.stroke-width]=\"node.attrs['stroke-width'] ?? null\"\n            [attr.stroke-linecap]=\"node.attrs['stroke-linecap'] ?? null\"\n            [attr.stroke-linejoin]=\"node.attrs['stroke-linejoin'] ?? null\"\n            [attr.stroke-opacity]=\"node.attrs['stroke-opacity'] ?? null\"\n            [attr.opacity]=\"node.attrs['opacity'] ?? null\"\n            [attr.transform]=\"node.attrs['transform'] ?? null\"\n            [attr.vector-effect]=\"node.attrs['vector-effect'] ?? null\"\n            [attr.mask]=\"node.attrs['mask'] ?? null\"\n          />\n        }\n        @case ('ellipse') {\n          <svg:ellipse\n            [attr.cx]=\"node.attrs['cx'] ?? null\"\n            [attr.cy]=\"node.attrs['cy'] ?? null\"\n            [attr.rx]=\"node.attrs['rx'] ?? null\"\n            [attr.ry]=\"node.attrs['ry'] ?? null\"\n            [attr.id]=\"node.attrs['id'] ?? null\"\n            [attr.fill]=\"node.attrs['fill'] ?? null\"\n            [attr.fill-rule]=\"node.attrs['fill-rule'] ?? null\"\n            [attr.fill-opacity]=\"node.attrs['fill-opacity'] ?? null\"\n            [attr.clip-rule]=\"node.attrs['clip-rule'] ?? null\"\n            [attr.stroke]=\"node.attrs['stroke'] ?? null\"\n            [attr.stroke-width]=\"node.attrs['stroke-width'] ?? null\"\n            [attr.stroke-linecap]=\"node.attrs['stroke-linecap'] ?? null\"\n            [attr.stroke-linejoin]=\"node.attrs['stroke-linejoin'] ?? null\"\n            [attr.stroke-opacity]=\"node.attrs['stroke-opacity'] ?? null\"\n            [attr.opacity]=\"node.attrs['opacity'] ?? null\"\n            [attr.transform]=\"node.attrs['transform'] ?? null\"\n            [attr.vector-effect]=\"node.attrs['vector-effect'] ?? null\"\n            [attr.mask]=\"node.attrs['mask'] ?? null\"\n          />\n        }\n      }\n    }\n  </ng-template>\n}\n",
 		styles: [":host{width:1em;height:1em;align-items:center;display:inline-flex;justify-content:center}:host svg{width:100%;height:100%}\n"],
+		dependencies: [{
+			kind: "directive",
+			type: NgTemplateOutlet,
+			selector: "[ngTemplateOutlet]",
+			inputs: [
+				"ngTemplateOutletContext",
+				"ngTemplateOutlet",
+				"ngTemplateOutletInjector"
+			]
+		}],
 		changeDetection: i0.ChangeDetectionStrategy.OnPush
 	});
 };
@@ -10677,13 +10827,14 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "solaris-icon",
 			standalone: true,
+			imports: [NgTemplateOutlet],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			host: {
 				"[style.width]": "sizeCss()",
 				"[style.height]": "sizeCss()",
 				"[attr.data-variant]": "resolvedVariant()"
 			},
-			template: "@if (viewModel(); as vm) {\n  <!-- SECURITY_EXCEPTION: inner SVG is allowlist-sanitized in the component before trust; this binding renders sanitized markup only. -->\n  <svg\n    [innerHTML]=\"vm.safeInner\"\n    width=\"100%\"\n    height=\"100%\"\n    [attr.viewBox]=\"vm.viewBox\"\n    [attr.fill]=\"vm.fill\"\n    [attr.stroke]=\"vm.stroke\"\n    [attr.stroke-width]=\"vm.strokeWidth\"\n    [attr.stroke-linecap]=\"vm.linecap\"\n    [attr.stroke-linejoin]=\"vm.linejoin\"\n    [attr.data-variant]=\"vm.variant\"\n    [attr.aria-hidden]=\"isHidden() ? 'true' : null\"\n    [attr.aria-label]=\"hasSemanticLabel() ? accessibleLabel() : null\"\n    [attr.role]=\"isHidden() ? 'presentation' : 'img'\"\n  ></svg>\n}\n",
+			template: "@if (viewModel(); as vm) {\n  <svg\n    width=\"100%\"\n    height=\"100%\"\n    [attr.viewBox]=\"vm.viewBox\"\n    [attr.fill]=\"vm.fill\"\n    [attr.stroke]=\"vm.stroke\"\n    [attr.stroke-width]=\"vm.strokeWidth\"\n    [attr.stroke-linecap]=\"vm.linecap\"\n    [attr.stroke-linejoin]=\"vm.linejoin\"\n    [attr.data-variant]=\"vm.variant\"\n    [attr.aria-hidden]=\"isHidden() ? 'true' : null\"\n    [attr.aria-label]=\"hasSemanticLabel() ? accessibleLabel() : null\"\n    [attr.role]=\"isHidden() ? 'presentation' : 'img'\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"nodeList; context: { $implicit: vm.nodes }\"\n    ></ng-container>\n  </svg>\n  <ng-template #nodeList let-nodes>\n    @for (node of nodes; track $index) {\n      @switch (node.tag) {\n        @case ('g') {\n          <svg:g\n            [attr.id]=\"node.attrs['id'] ?? null\"\n            [attr.fill]=\"node.attrs['fill'] ?? null\"\n            [attr.fill-rule]=\"node.attrs['fill-rule'] ?? null\"\n            [attr.fill-opacity]=\"node.attrs['fill-opacity'] ?? null\"\n            [attr.clip-rule]=\"node.attrs['clip-rule'] ?? null\"\n            [attr.stroke]=\"node.attrs['stroke'] ?? null\"\n            [attr.stroke-width]=\"node.attrs['stroke-width'] ?? null\"\n            [attr.stroke-linecap]=\"node.attrs['stroke-linecap'] ?? null\"\n            [attr.stroke-linejoin]=\"node.attrs['stroke-linejoin'] ?? null\"\n            [attr.stroke-opacity]=\"node.attrs['stroke-opacity'] ?? null\"\n            [attr.opacity]=\"node.attrs['opacity'] ?? null\"\n            [attr.transform]=\"node.attrs['transform'] ?? null\"\n            [attr.vector-effect]=\"node.attrs['vector-effect'] ?? null\"\n            [attr.mask]=\"node.attrs['mask'] ?? null\"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                nodeList;\n                context: { $implicit: node.children }\n              \"\n            ></ng-container>\n          </svg:g>\n        }\n        @case ('mask') {\n          <svg:mask\n            [attr.id]=\"node.attrs['id'] ?? null\"\n            [attr.x]=\"node.attrs['x'] ?? null\"\n            [attr.y]=\"node.attrs['y'] ?? null\"\n            [attr.width]=\"node.attrs['width'] ?? null\"\n            [attr.height]=\"node.attrs['height'] ?? null\"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                nodeList;\n                context: { $implicit: node.children }\n              \"\n            ></ng-container>\n          </svg:mask>\n        }\n        @case ('path') {\n          <svg:path\n            [attr.d]=\"node.attrs['d'] ?? null\"\n            [attr.id]=\"node.attrs['id'] ?? null\"\n            [attr.fill]=\"node.attrs['fill'] ?? null\"\n            [attr.fill-rule]=\"node.attrs['fill-rule'] ?? null\"\n            [attr.fill-opacity]=\"node.attrs['fill-opacity'] ?? null\"\n            [attr.clip-rule]=\"node.attrs['clip-rule'] ?? null\"\n            [attr.stroke]=\"node.attrs['stroke'] ?? null\"\n            [attr.stroke-width]=\"node.attrs['stroke-width'] ?? null\"\n            [attr.stroke-linecap]=\"node.attrs['stroke-linecap'] ?? null\"\n            [attr.stroke-linejoin]=\"node.attrs['stroke-linejoin'] ?? null\"\n            [attr.stroke-opacity]=\"node.attrs['stroke-opacity'] ?? null\"\n            [attr.opacity]=\"node.attrs['opacity'] ?? null\"\n            [attr.transform]=\"node.attrs['transform'] ?? null\"\n            [attr.vector-effect]=\"node.attrs['vector-effect'] ?? null\"\n            [attr.mask]=\"node.attrs['mask'] ?? null\"\n          />\n        }\n        @case ('circle') {\n          <svg:circle\n            [attr.cx]=\"node.attrs['cx'] ?? null\"\n            [attr.cy]=\"node.attrs['cy'] ?? null\"\n            [attr.r]=\"node.attrs['r'] ?? null\"\n            [attr.id]=\"node.attrs['id'] ?? null\"\n            [attr.fill]=\"node.attrs['fill'] ?? null\"\n            [attr.fill-rule]=\"node.attrs['fill-rule'] ?? null\"\n            [attr.fill-opacity]=\"node.attrs['fill-opacity'] ?? null\"\n            [attr.clip-rule]=\"node.attrs['clip-rule'] ?? null\"\n            [attr.stroke]=\"node.attrs['stroke'] ?? null\"\n            [attr.stroke-width]=\"node.attrs['stroke-width'] ?? null\"\n            [attr.stroke-linecap]=\"node.attrs['stroke-linecap'] ?? null\"\n            [attr.stroke-linejoin]=\"node.attrs['stroke-linejoin'] ?? null\"\n            [attr.stroke-opacity]=\"node.attrs['stroke-opacity'] ?? null\"\n            [attr.opacity]=\"node.attrs['opacity'] ?? null\"\n            [attr.transform]=\"node.attrs['transform'] ?? null\"\n            [attr.vector-effect]=\"node.attrs['vector-effect'] ?? null\"\n            [attr.mask]=\"node.attrs['mask'] ?? null\"\n          />\n        }\n        @case ('rect') {\n          <svg:rect\n            [attr.x]=\"node.attrs['x'] ?? null\"\n            [attr.y]=\"node.attrs['y'] ?? null\"\n            [attr.width]=\"node.attrs['width'] ?? null\"\n            [attr.height]=\"node.attrs['height'] ?? null\"\n            [attr.rx]=\"node.attrs['rx'] ?? null\"\n            [attr.ry]=\"node.attrs['ry'] ?? null\"\n            [attr.id]=\"node.attrs['id'] ?? null\"\n            [attr.fill]=\"node.attrs['fill'] ?? null\"\n            [attr.fill-rule]=\"node.attrs['fill-rule'] ?? null\"\n            [attr.fill-opacity]=\"node.attrs['fill-opacity'] ?? null\"\n            [attr.clip-rule]=\"node.attrs['clip-rule'] ?? null\"\n            [attr.stroke]=\"node.attrs['stroke'] ?? null\"\n            [attr.stroke-width]=\"node.attrs['stroke-width'] ?? null\"\n            [attr.stroke-linecap]=\"node.attrs['stroke-linecap'] ?? null\"\n            [attr.stroke-linejoin]=\"node.attrs['stroke-linejoin'] ?? null\"\n            [attr.stroke-opacity]=\"node.attrs['stroke-opacity'] ?? null\"\n            [attr.opacity]=\"node.attrs['opacity'] ?? null\"\n            [attr.transform]=\"node.attrs['transform'] ?? null\"\n            [attr.vector-effect]=\"node.attrs['vector-effect'] ?? null\"\n            [attr.mask]=\"node.attrs['mask'] ?? null\"\n          />\n        }\n        @case ('line') {\n          <svg:line\n            [attr.x1]=\"node.attrs['x1'] ?? null\"\n            [attr.y1]=\"node.attrs['y1'] ?? null\"\n            [attr.x2]=\"node.attrs['x2'] ?? null\"\n            [attr.y2]=\"node.attrs['y2'] ?? null\"\n            [attr.id]=\"node.attrs['id'] ?? null\"\n            [attr.fill]=\"node.attrs['fill'] ?? null\"\n            [attr.fill-rule]=\"node.attrs['fill-rule'] ?? null\"\n            [attr.fill-opacity]=\"node.attrs['fill-opacity'] ?? null\"\n            [attr.clip-rule]=\"node.attrs['clip-rule'] ?? null\"\n            [attr.stroke]=\"node.attrs['stroke'] ?? null\"\n            [attr.stroke-width]=\"node.attrs['stroke-width'] ?? null\"\n            [attr.stroke-linecap]=\"node.attrs['stroke-linecap'] ?? null\"\n            [attr.stroke-linejoin]=\"node.attrs['stroke-linejoin'] ?? null\"\n            [attr.stroke-opacity]=\"node.attrs['stroke-opacity'] ?? null\"\n            [attr.opacity]=\"node.attrs['opacity'] ?? null\"\n            [attr.transform]=\"node.attrs['transform'] ?? null\"\n            [attr.vector-effect]=\"node.attrs['vector-effect'] ?? null\"\n            [attr.mask]=\"node.attrs['mask'] ?? null\"\n          />\n        }\n        @case ('polyline') {\n          <svg:polyline\n            [attr.points]=\"node.attrs['points'] ?? null\"\n            [attr.id]=\"node.attrs['id'] ?? null\"\n            [attr.fill]=\"node.attrs['fill'] ?? null\"\n            [attr.fill-rule]=\"node.attrs['fill-rule'] ?? null\"\n            [attr.fill-opacity]=\"node.attrs['fill-opacity'] ?? null\"\n            [attr.clip-rule]=\"node.attrs['clip-rule'] ?? null\"\n            [attr.stroke]=\"node.attrs['stroke'] ?? null\"\n            [attr.stroke-width]=\"node.attrs['stroke-width'] ?? null\"\n            [attr.stroke-linecap]=\"node.attrs['stroke-linecap'] ?? null\"\n            [attr.stroke-linejoin]=\"node.attrs['stroke-linejoin'] ?? null\"\n            [attr.stroke-opacity]=\"node.attrs['stroke-opacity'] ?? null\"\n            [attr.opacity]=\"node.attrs['opacity'] ?? null\"\n            [attr.transform]=\"node.attrs['transform'] ?? null\"\n            [attr.vector-effect]=\"node.attrs['vector-effect'] ?? null\"\n            [attr.mask]=\"node.attrs['mask'] ?? null\"\n          />\n        }\n        @case ('polygon') {\n          <svg:polygon\n            [attr.points]=\"node.attrs['points'] ?? null\"\n            [attr.id]=\"node.attrs['id'] ?? null\"\n            [attr.fill]=\"node.attrs['fill'] ?? null\"\n            [attr.fill-rule]=\"node.attrs['fill-rule'] ?? null\"\n            [attr.fill-opacity]=\"node.attrs['fill-opacity'] ?? null\"\n            [attr.clip-rule]=\"node.attrs['clip-rule'] ?? null\"\n            [attr.stroke]=\"node.attrs['stroke'] ?? null\"\n            [attr.stroke-width]=\"node.attrs['stroke-width'] ?? null\"\n            [attr.stroke-linecap]=\"node.attrs['stroke-linecap'] ?? null\"\n            [attr.stroke-linejoin]=\"node.attrs['stroke-linejoin'] ?? null\"\n            [attr.stroke-opacity]=\"node.attrs['stroke-opacity'] ?? null\"\n            [attr.opacity]=\"node.attrs['opacity'] ?? null\"\n            [attr.transform]=\"node.attrs['transform'] ?? null\"\n            [attr.vector-effect]=\"node.attrs['vector-effect'] ?? null\"\n            [attr.mask]=\"node.attrs['mask'] ?? null\"\n          />\n        }\n        @case ('ellipse') {\n          <svg:ellipse\n            [attr.cx]=\"node.attrs['cx'] ?? null\"\n            [attr.cy]=\"node.attrs['cy'] ?? null\"\n            [attr.rx]=\"node.attrs['rx'] ?? null\"\n            [attr.ry]=\"node.attrs['ry'] ?? null\"\n            [attr.id]=\"node.attrs['id'] ?? null\"\n            [attr.fill]=\"node.attrs['fill'] ?? null\"\n            [attr.fill-rule]=\"node.attrs['fill-rule'] ?? null\"\n            [attr.fill-opacity]=\"node.attrs['fill-opacity'] ?? null\"\n            [attr.clip-rule]=\"node.attrs['clip-rule'] ?? null\"\n            [attr.stroke]=\"node.attrs['stroke'] ?? null\"\n            [attr.stroke-width]=\"node.attrs['stroke-width'] ?? null\"\n            [attr.stroke-linecap]=\"node.attrs['stroke-linecap'] ?? null\"\n            [attr.stroke-linejoin]=\"node.attrs['stroke-linejoin'] ?? null\"\n            [attr.stroke-opacity]=\"node.attrs['stroke-opacity'] ?? null\"\n            [attr.opacity]=\"node.attrs['opacity'] ?? null\"\n            [attr.transform]=\"node.attrs['transform'] ?? null\"\n            [attr.vector-effect]=\"node.attrs['vector-effect'] ?? null\"\n            [attr.mask]=\"node.attrs['mask'] ?? null\"\n          />\n        }\n      }\n    }\n  </ng-template>\n}\n",
 			styles: [":host{width:1em;height:1em;align-items:center;display:inline-flex;justify-content:center}:host svg{width:100%;height:100%}\n"]
 		}]
 	}],
@@ -32346,7 +32497,7 @@ var SolarisSelectComponent = class SolarisSelectComponent extends SolarisFormCon
 		],
 		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  [size]=\"size()\"\n  [radius]=\"radius()\"\n  [invalid]=\"isEffectivelyInvalid()\"\n  [required]=\"requiredInput()\"\n  [loading]=\"loading()\"\n  [hasPrefix]=\"!!prefix()\"\n  [hasSuffixAction]=\"!!projectedSuffixAction()\"\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]=\"effectivePanelMinWidth()\"\n  [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n  [solarisPopoverScrollStrategy]=\"'reposition'\"\n  [solarisPopoverCloseOnEscape]=\"false\"\n  [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n  <ng-content\n    select=\"[solaris-form-prefix]\"\n    ngProjectAs=\"[solaris-form-prefix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix][solaris-form-suffix-action]\"\n    ngProjectAs=\"[solaris-form-suffix-action]\"\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  @if (prefix(); as iconName) {\n    <span solaris-form-prefix>\n      <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n    </span>\n  }\n  @if (suffix(); as suffixName) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffixName\" [decorative]=\"true\" />\n    </span>\n  }\n\n  <div\n    #triggerEl\n    class=\"solaris-select__trigger\"\n    [id]=\"elementId() + '--trigger'\"\n    [style.min-width]=\"resolvedTriggerMinWidth()\"\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() && !loading()) {\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      @if (!loading()) {\n        <solaris-icon\n          class=\"solaris-select__dropdown-icon\"\n          name=\"chevron-down\"\n          [decorative]=\"true\"\n          size=\"sm\"\n        />\n      }\n    </span>\n  </div>\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",
+		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  [size]=\"size()\"\n  [radius]=\"radius()\"\n  [invalid]=\"isEffectivelyInvalid()\"\n  [required]=\"requiredInput()\"\n  [loading]=\"loading()\"\n  [hasPrefix]=\"!!prefix()\"\n  [hasSuffixAction]=\"!!projectedSuffixAction()\"\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]=\"effectivePanelMinWidth()\"\n  [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n  [solarisPopoverScrollStrategy]=\"'reposition'\"\n  [solarisPopoverCloseOnEscape]=\"false\"\n  [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n  <ng-content\n    select=\"[solaris-form-prefix]\"\n    ngProjectAs=\"[solaris-form-prefix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix-action]\"\n    ngProjectAs=\"[solaris-form-suffix-action]\"\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  @if (prefix(); as iconName) {\n    <span solaris-form-prefix>\n      <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n    </span>\n  }\n  @if (suffix(); as suffixName) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffixName\" [decorative]=\"true\" />\n    </span>\n  }\n\n  <div\n    #triggerEl\n    class=\"solaris-select__trigger\"\n    [id]=\"elementId() + '--trigger'\"\n    [style.min-width]=\"resolvedTriggerMinWidth()\"\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() && !loading()) {\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      @if (!loading()) {\n        <solaris-icon\n          class=\"solaris-select__dropdown-icon\"\n          name=\"chevron-down\"\n          [decorative]=\"true\"\n          size=\"sm\"\n        />\n      }\n    </span>\n  </div>\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-neutral-text-secondary);--solaris-select-font-size: var(--solaris-font-size-sm);--solaris-select-value-color: var(--solaris-neutral-text-body);--solaris-select-line-height: var(--solaris-line-height-md);--solaris-select-trigger-gap: var(--solaris-spacing-4);--solaris-select-dropdown-icon-size: var(--solaris-font-size-lg);--solaris-select-value-min-width: 0;--solaris-select-value-flex: 1;--solaris-select-actions-margin-inline-start: auto;--solaris-select-placeholder-color: var(--solaris-neutral-text-secondary);--solaris-select-placeholder-opacity: var(--solaris-opacity-70);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-select-trigger-gap)}:host ::ng-deep .solaris-form-field__message-row{margin-top:0}:host ::ng-deep solaris-form-field[data-loading] .solaris-select__trigger{padding-inline-end:var(--solaris-form-field-affix-size)}:host ::ng-deep .solaris-select--panel-open .solaris-form-field__message-row{display:none}.solaris-select__value{flex:var(--solaris-select-value-flex);min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-select__value-text{display:inline-block;color:var(--solaris-select-value-color);font-size:var(--solaris-select-font-size);line-height:var(--solaris-select-line-height);font-variant-numeric:tabular-nums;min-width:var(--solaris-select-value-min-width)}.solaris-select__placeholder{font-size:var(--solaris-select-font-size);color:var(--solaris-select-placeholder-color);line-height:var(--solaris-select-line-height);opacity:var(--solaris-select-placeholder-opacity)}.solaris-select__actions{display:flex;flex-shrink:0;align-items:center;gap:var(--solaris-spacing-3);margin-inline-start:var(--solaris-select-actions-margin-inline-start)}.solaris-select__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.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-lg);height:var(--solaris-font-size-lg);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-neutral-text-body)}.solaris-select__dropdown-icon solaris-icon{width:var(--solaris-select-dropdown-icon-size);height:var(--solaris-select-dropdown-icon-size)}.solaris-select__dropdown-icon{width:var(--solaris-select-dropdown-icon-size);height:var(--solaris-select-dropdown-icon-size);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;animation:solaris-motion-overlay-enter-top var(--solaris-motion-duration-normal) var(--solaris-motion-easing-decelerate) both}.solaris-select__search-input{flex:1;margin:0;padding:0;width: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);opacity:var(--solaris-select-placeholder-opacity)}.solaris-select__loading,.solaris-select__no-results,.solaris-select__empty{display:flex;align-items:center;justify-content:center;color:var(--solaris-neutral-text-secondary);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-3);padding:var(--solaris-spacing-3)}: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}.solaris-select__panel{animation:none}}[data-reduced-motion=true] .solaris-select__dropdown-icon,[data-reduced-motion=true] .solaris-select__clear{transition:none}[data-reduced-motion=true] .solaris-select__panel{animation:none}\n"],
 		dependencies: [
 			{
@@ -32394,6 +32545,11 @@ var SolarisSelectComponent = class SolarisSelectComponent extends SolarisFormCon
 				type: SolarisFormPrefixDirective,
 				selector: "[solaris-form-prefix]"
 			},
+			{
+				kind: "directive",
+				type: SolarisFormSuffixDirective,
+				selector: "[solaris-form-suffix]"
+			},
 			{
 				kind: "component",
 				type: SolarisIconComponent,
@@ -32467,6 +32623,7 @@ i0.ɵɵngDeclareClassMetadata({
 				SolarisFormFieldComponent,
 				SolarisFormFieldTriggerDirective,
 				SolarisFormPrefixDirective,
+				SolarisFormSuffixDirective,
 				SolarisIconComponent,
 				SolarisPopoverDirective,
 				SolarisPopoverTriggerDirective
@@ -32496,7 +32653,7 @@ i0.ɵɵngDeclareClassMetadata({
 				"[attr.aria-label]": "ariaLabelText() ?? null",
 				"[attr.data-has-value]": "hasValue() ? \"\" : null"
 			},
-			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  [size]=\"size()\"\n  [radius]=\"radius()\"\n  [invalid]=\"isEffectivelyInvalid()\"\n  [required]=\"requiredInput()\"\n  [loading]=\"loading()\"\n  [hasPrefix]=\"!!prefix()\"\n  [hasSuffixAction]=\"!!projectedSuffixAction()\"\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]=\"effectivePanelMinWidth()\"\n  [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n  [solarisPopoverScrollStrategy]=\"'reposition'\"\n  [solarisPopoverCloseOnEscape]=\"false\"\n  [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n  <ng-content\n    select=\"[solaris-form-prefix]\"\n    ngProjectAs=\"[solaris-form-prefix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix][solaris-form-suffix-action]\"\n    ngProjectAs=\"[solaris-form-suffix-action]\"\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  @if (prefix(); as iconName) {\n    <span solaris-form-prefix>\n      <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n    </span>\n  }\n  @if (suffix(); as suffixName) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffixName\" [decorative]=\"true\" />\n    </span>\n  }\n\n  <div\n    #triggerEl\n    class=\"solaris-select__trigger\"\n    [id]=\"elementId() + '--trigger'\"\n    [style.min-width]=\"resolvedTriggerMinWidth()\"\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() && !loading()) {\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      @if (!loading()) {\n        <solaris-icon\n          class=\"solaris-select__dropdown-icon\"\n          name=\"chevron-down\"\n          [decorative]=\"true\"\n          size=\"sm\"\n        />\n      }\n    </span>\n  </div>\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",
+			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  [size]=\"size()\"\n  [radius]=\"radius()\"\n  [invalid]=\"isEffectivelyInvalid()\"\n  [required]=\"requiredInput()\"\n  [loading]=\"loading()\"\n  [hasPrefix]=\"!!prefix()\"\n  [hasSuffixAction]=\"!!projectedSuffixAction()\"\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]=\"effectivePanelMinWidth()\"\n  [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n  [solarisPopoverScrollStrategy]=\"'reposition'\"\n  [solarisPopoverCloseOnEscape]=\"false\"\n  [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n  <ng-content\n    select=\"[solaris-form-prefix]\"\n    ngProjectAs=\"[solaris-form-prefix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix-action]\"\n    ngProjectAs=\"[solaris-form-suffix-action]\"\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  @if (prefix(); as iconName) {\n    <span solaris-form-prefix>\n      <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n    </span>\n  }\n  @if (suffix(); as suffixName) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffixName\" [decorative]=\"true\" />\n    </span>\n  }\n\n  <div\n    #triggerEl\n    class=\"solaris-select__trigger\"\n    [id]=\"elementId() + '--trigger'\"\n    [style.min-width]=\"resolvedTriggerMinWidth()\"\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() && !loading()) {\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      @if (!loading()) {\n        <solaris-icon\n          class=\"solaris-select__dropdown-icon\"\n          name=\"chevron-down\"\n          [decorative]=\"true\"\n          size=\"sm\"\n        />\n      }\n    </span>\n  </div>\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-neutral-text-secondary);--solaris-select-font-size: var(--solaris-font-size-sm);--solaris-select-value-color: var(--solaris-neutral-text-body);--solaris-select-line-height: var(--solaris-line-height-md);--solaris-select-trigger-gap: var(--solaris-spacing-4);--solaris-select-dropdown-icon-size: var(--solaris-font-size-lg);--solaris-select-value-min-width: 0;--solaris-select-value-flex: 1;--solaris-select-actions-margin-inline-start: auto;--solaris-select-placeholder-color: var(--solaris-neutral-text-secondary);--solaris-select-placeholder-opacity: var(--solaris-opacity-70);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-select-trigger-gap)}:host ::ng-deep .solaris-form-field__message-row{margin-top:0}:host ::ng-deep solaris-form-field[data-loading] .solaris-select__trigger{padding-inline-end:var(--solaris-form-field-affix-size)}:host ::ng-deep .solaris-select--panel-open .solaris-form-field__message-row{display:none}.solaris-select__value{flex:var(--solaris-select-value-flex);min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-select__value-text{display:inline-block;color:var(--solaris-select-value-color);font-size:var(--solaris-select-font-size);line-height:var(--solaris-select-line-height);font-variant-numeric:tabular-nums;min-width:var(--solaris-select-value-min-width)}.solaris-select__placeholder{font-size:var(--solaris-select-font-size);color:var(--solaris-select-placeholder-color);line-height:var(--solaris-select-line-height);opacity:var(--solaris-select-placeholder-opacity)}.solaris-select__actions{display:flex;flex-shrink:0;align-items:center;gap:var(--solaris-spacing-3);margin-inline-start:var(--solaris-select-actions-margin-inline-start)}.solaris-select__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.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-lg);height:var(--solaris-font-size-lg);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-neutral-text-body)}.solaris-select__dropdown-icon solaris-icon{width:var(--solaris-select-dropdown-icon-size);height:var(--solaris-select-dropdown-icon-size)}.solaris-select__dropdown-icon{width:var(--solaris-select-dropdown-icon-size);height:var(--solaris-select-dropdown-icon-size);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;animation:solaris-motion-overlay-enter-top var(--solaris-motion-duration-normal) var(--solaris-motion-easing-decelerate) both}.solaris-select__search-input{flex:1;margin:0;padding:0;width: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);opacity:var(--solaris-select-placeholder-opacity)}.solaris-select__loading,.solaris-select__no-results,.solaris-select__empty{display:flex;align-items:center;justify-content:center;color:var(--solaris-neutral-text-secondary);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-3);padding:var(--solaris-spacing-3)}: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}.solaris-select__panel{animation:none}}[data-reduced-motion=true] .solaris-select__dropdown-icon,[data-reduced-motion=true] .solaris-select__clear{transition:none}[data-reduced-motion=true] .solaris-select__panel{animation:none}\n"]
 		}]
 	}],
@@ -34395,7 +34552,7 @@ var SolarisDateRangePickerComponent = class SolarisDateRangePickerComponent exte
 		}],
 		usesInheritance: true,
 		ngImport: i0,
-		template: "@if (inline()) {\n  <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n} @else {\n  <solaris-form-field\n    [control]=\"this\"\n    [label]=\"labelText()\"\n    [hint]=\"hintText()\"\n    [error]=\"errorText()\"\n    [appearance]=\"appearance()\"\n    [density]=\"effectiveDensity()\"\n    [size]=\"size()\"\n    [radius]=\"radius()\"\n    [invalid]=\"isEffectivelyInvalid()\"\n    [required]=\"requiredInput()\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [readonly]=\"isEffectivelyReadonly()\"\n    [loading]=\"loading()\"\n    [hasSuffixAction]=\"!!projectedSuffixAction()\"\n    solaris-popover-trigger\n    [solarisPopoverTriggerFor]=\"rangePopover\"\n    [solarisPopoverDisabled]=\"\n      isEffectivelyDisabled() || isEffectivelyReadonly()\n    \"\n    [solarisPopoverPlacement]=\"'bottom'\"\n    [solarisPopoverAlign]=\"'start'\"\n    [solarisPopoverPadding]=\"'none'\"\n    [solarisPopoverFitContent]=\"true\"\n    [solarisPopoverMaxWidth]=\"'calc(100vw - var(--solaris-spacing-4))'\"\n    [solarisPopoverRadius]=\"radius()\"\n    [solarisPopoverAriaHasPopup]=\"'dialog'\"\n    (solarisPopoverOpened)=\"onPanelOpened()\"\n    (solarisPopoverClosed)=\"onPanelClosed()\"\n  >\n    <ng-content\n      select=\"[solaris-form-prefix]\"\n      ngProjectAs=\"[solaris-form-prefix]\"\n    />\n    <ng-content\n      select=\"[solaris-form-suffix][solaris-form-suffix-action]\"\n      ngProjectAs=\"[solaris-form-suffix-action]\"\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    @if (prefix(); as prefixName) {\n      <span solaris-form-prefix>\n        <solaris-icon [name]=\"prefixName\" [decorative]=\"true\" />\n      </span>\n    }\n    <button\n      #triggerButton\n      type=\"button\"\n      class=\"solaris-date-range-picker__trigger\"\n      [id]=\"id\"\n      [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n      [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n      [attr.aria-describedby]=\"describedByIds.join(' ') || null\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (keydown)=\"onInputKeydown($event)\"\n    >\n      {{ rangeDisplay() || placeholderText() }}\n    </button>\n\n    <button\n      type=\"button\"\n      appearance=\"ghost\"\n      solaris-icon-button\n      solaris-form-suffix\n      solaris-form-suffix-action\n      class=\"solaris-date-range-picker__calendar-trigger\"\n      [size]=\"size()\"\n      [density]=\"effectiveDensity()\"\n      [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n      [attr.aria-label]=\"calendarLabel()\"\n    >\n      <solaris-icon name=\"calendar\" [decorative]=\"true\" />\n    </button>\n    @if (canClear() && !loading()) {\n      <button\n        type=\"button\"\n        solaris-form-suffix\n        class=\"solaris-date-range-picker__clear\"\n        [attr.aria-label]=\"clearAriaLabel()\"\n        [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n        (click)=\"clearValue(); $event.stopPropagation()\"\n        tabindex=\"-1\"\n      >\n        <solaris-icon name=\"x\" [decorative]=\"true\" />\n      </button>\n    }\n    @if (suffix(); as suffixName) {\n      <span solaris-form-suffix>\n        <solaris-icon [name]=\"suffixName\" [decorative]=\"true\" />\n      </span>\n    }\n  </solaris-form-field>\n}\n\n<ng-template #rangePopover=\"solarisPopover\" #panelTpl solaris-popover>\n  <div\n    [attr.role]=\"inline() ? 'group' : 'dialog'\"\n    [attr.aria-label]=\"calendarLabel()\"\n    class=\"solaris-date-range-picker__panel\"\n  >\n    <nav\n      class=\"solaris-date-range-picker__presets\"\n      [attr.aria-label]=\"presetsLabel()\"\n    >\n      @if (presets().length > 0) {\n        @for (preset of presets(); track preset.id) {\n          <button\n            type=\"button\"\n            class=\"solaris-date-range-picker__preset\"\n            [attr.data-active]=\"activePresetId() === preset.id ? '' : null\"\n            (click)=\"selectPreset(preset)\"\n          >\n            {{ presetLabel(preset) }}\n          </button>\n        }\n      }\n      <button\n        type=\"button\"\n        class=\"solaris-date-range-picker__preset\"\n        [attr.data-active]=\"activePresetId() === 'custom' ? '' : null\"\n        (click)=\"selectCustom()\"\n      >\n        {{ customLabel() }}\n      </button>\n    </nav>\n    <div class=\"solaris-date-range-picker__content\">\n      <div class=\"solaris-date-range-picker__calendars\">\n        <solaris-date-calendar\n          [min]=\"min()\"\n          [max]=\"max()\"\n          [range]=\"pending()\"\n          [month]=\"displayedMonth()\"\n          [locale]=\"resolvedLocale()\"\n          [disabledDates]=\"disabledDates()\"\n          [weekStartsOn]=\"weekStartsOn()\"\n          [disablePast]=\"disablePast()\"\n          [disableFuture]=\"disableFuture()\"\n          [nextMonthLabel]=\"nextMonthLabel()\"\n          (selectedChange)=\"selectDate($event)\"\n          (monthChange)=\"setDisplayedMonth($event)\"\n          [previousMonthLabel]=\"previousMonthLabel()\"\n        />\n        <span\n          class=\"solaris-date-range-picker__calendar-divider\"\n          aria-hidden=\"true\"\n        ></span>\n        <solaris-date-calendar\n          [min]=\"min()\"\n          [max]=\"max()\"\n          [range]=\"pending()\"\n          [month]=\"nextMonth()\"\n          [locale]=\"resolvedLocale()\"\n          [disabledDates]=\"disabledDates()\"\n          [weekStartsOn]=\"weekStartsOn()\"\n          [disablePast]=\"disablePast()\"\n          [disableFuture]=\"disableFuture()\"\n          [nextMonthLabel]=\"nextMonthLabel()\"\n          (selectedChange)=\"selectDate($event)\"\n          (monthChange)=\"setDisplayedMonth($event)\"\n          [previousMonthLabel]=\"previousMonthLabel()\"\n        />\n      </div>\n      <footer class=\"solaris-date-range-picker__footer\">\n        <div class=\"solaris-date-range-picker__inputs\">\n          <input\n            type=\"text\"\n            solaris-input\n            (blur)=\"onBlur()\"\n            density=\"compact\"\n            autocomplete=\"off\"\n            [fullWidth]=\"false\"\n            inputmode=\"numeric\"\n            (focus)=\"onFocus()\"\n            [value]=\"startDisplay()\"\n            (click)=\"onInputClick($event)\"\n            [attr.aria-label]=\"startLabel()\"\n            [disabled]=\"isStartDisabled()\"\n            [readonly]=\"isStartReadonly()\"\n            [attr.aria-disabled]=\"isStartDisabled() ? 'true' : null\"\n            (input)=\"onInput('start', $event)\"\n            (keydown)=\"onPanelInputKeydown($event)\"\n          />\n          <span class=\"solaris-date-range-picker__separator\" aria-hidden=\"true\"\n            >-</span\n          >\n          <input\n            type=\"text\"\n            solaris-input\n            (blur)=\"onBlur()\"\n            density=\"compact\"\n            [fullWidth]=\"false\"\n            autocomplete=\"off\"\n            (focus)=\"onFocus()\"\n            inputmode=\"numeric\"\n            [value]=\"endDisplay()\"\n            [attr.aria-label]=\"endLabel()\"\n            (click)=\"onInputClick($event)\"\n            [disabled]=\"isEndDisabled()\"\n            [readonly]=\"isEndReadonly()\"\n            [attr.aria-disabled]=\"isEndDisabled() ? 'true' : null\"\n            (input)=\"onInput('end', $event)\"\n            (keydown)=\"onPanelInputKeydown($event)\"\n          />\n        </div>\n        <div class=\"solaris-date-range-picker__actions\">\n          <button\n            type=\"button\"\n            solaris-button\n            density=\"compact\"\n            appearance=\"ghost\"\n            data-density=\"compact\"\n            (click)=\"clearPending()\"\n          >\n            {{ clearButtonLabel() }}\n          </button>\n          <button\n            type=\"button\"\n            solaris-button\n            density=\"compact\"\n            (click)=\"cancel()\"\n            appearance=\"outline\"\n            data-density=\"compact\"\n          >\n            {{ cancelLabel() }}\n          </button>\n          <button\n            type=\"button\"\n            solaris-button\n            color=\"primary\"\n            (click)=\"apply()\"\n            density=\"compact\"\n            data-density=\"compact\"\n          >\n            {{ applyLabel() }}\n          </button>\n        </div>\n      </footer>\n    </div>\n  </div>\n</ng-template>\n",
+		template: "@if (inline()) {\n  <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n} @else {\n  <solaris-form-field\n    [control]=\"this\"\n    [label]=\"labelText()\"\n    [hint]=\"hintText()\"\n    [error]=\"errorText()\"\n    [appearance]=\"appearance()\"\n    [density]=\"effectiveDensity()\"\n    [size]=\"size()\"\n    [radius]=\"radius()\"\n    [invalid]=\"isEffectivelyInvalid()\"\n    [required]=\"requiredInput()\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [readonly]=\"isEffectivelyReadonly()\"\n    [loading]=\"loading()\"\n    [hasSuffixAction]=\"!!projectedSuffixAction()\"\n    solaris-popover-trigger\n    [solarisPopoverTriggerFor]=\"rangePopover\"\n    [solarisPopoverDisabled]=\"\n      isEffectivelyDisabled() || isEffectivelyReadonly()\n    \"\n    [solarisPopoverPlacement]=\"'bottom'\"\n    [solarisPopoverAlign]=\"'start'\"\n    [solarisPopoverPadding]=\"'none'\"\n    [solarisPopoverFitContent]=\"true\"\n    [solarisPopoverMaxWidth]=\"'calc(100vw - var(--solaris-spacing-4))'\"\n    [solarisPopoverRadius]=\"radius()\"\n    [solarisPopoverAriaHasPopup]=\"'dialog'\"\n    (solarisPopoverOpened)=\"onPanelOpened()\"\n    (solarisPopoverClosed)=\"onPanelClosed()\"\n  >\n    <ng-content\n      select=\"[solaris-form-prefix]\"\n      ngProjectAs=\"[solaris-form-prefix]\"\n    />\n    <ng-content\n      select=\"[solaris-form-suffix-action]\"\n      ngProjectAs=\"[solaris-form-suffix-action]\"\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    @if (prefix(); as prefixName) {\n      <span solaris-form-prefix>\n        <solaris-icon [name]=\"prefixName\" [decorative]=\"true\" />\n      </span>\n    }\n    <button\n      #triggerButton\n      type=\"button\"\n      class=\"solaris-date-range-picker__trigger\"\n      [id]=\"id\"\n      [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n      [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n      [attr.aria-describedby]=\"describedByIds.join(' ') || null\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (keydown)=\"onInputKeydown($event)\"\n    >\n      {{ rangeDisplay() || placeholderText() }}\n    </button>\n\n    <button\n      type=\"button\"\n      appearance=\"ghost\"\n      solaris-icon-button\n      solaris-form-suffix\n      solaris-form-suffix-action\n      class=\"solaris-date-range-picker__calendar-trigger\"\n      [size]=\"size()\"\n      [density]=\"effectiveDensity()\"\n      [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n      [attr.aria-label]=\"calendarLabel()\"\n    >\n      <solaris-icon name=\"calendar\" [decorative]=\"true\" />\n    </button>\n    @if (canClear() && !loading()) {\n      <button\n        type=\"button\"\n        solaris-form-suffix\n        class=\"solaris-date-range-picker__clear\"\n        [attr.aria-label]=\"clearAriaLabel()\"\n        [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n        (click)=\"clearValue(); $event.stopPropagation()\"\n        tabindex=\"-1\"\n      >\n        <solaris-icon name=\"x\" [decorative]=\"true\" />\n      </button>\n    }\n    @if (suffix(); as suffixName) {\n      <span solaris-form-suffix>\n        <solaris-icon [name]=\"suffixName\" [decorative]=\"true\" />\n      </span>\n    }\n  </solaris-form-field>\n}\n\n<ng-template #rangePopover=\"solarisPopover\" #panelTpl solaris-popover>\n  <div\n    [attr.role]=\"inline() ? 'group' : 'dialog'\"\n    [attr.aria-label]=\"calendarLabel()\"\n    class=\"solaris-date-range-picker__panel\"\n  >\n    <nav\n      class=\"solaris-date-range-picker__presets\"\n      [attr.aria-label]=\"presetsLabel()\"\n    >\n      @if (presets().length > 0) {\n        @for (preset of presets(); track preset.id) {\n          <button\n            type=\"button\"\n            class=\"solaris-date-range-picker__preset\"\n            [attr.data-active]=\"activePresetId() === preset.id ? '' : null\"\n            (click)=\"selectPreset(preset)\"\n          >\n            {{ presetLabel(preset) }}\n          </button>\n        }\n      }\n      <button\n        type=\"button\"\n        class=\"solaris-date-range-picker__preset\"\n        [attr.data-active]=\"activePresetId() === 'custom' ? '' : null\"\n        (click)=\"selectCustom()\"\n      >\n        {{ customLabel() }}\n      </button>\n    </nav>\n    <div class=\"solaris-date-range-picker__content\">\n      <div class=\"solaris-date-range-picker__calendars\">\n        <solaris-date-calendar\n          [min]=\"min()\"\n          [max]=\"max()\"\n          [range]=\"pending()\"\n          [month]=\"displayedMonth()\"\n          [locale]=\"resolvedLocale()\"\n          [disabledDates]=\"disabledDates()\"\n          [weekStartsOn]=\"weekStartsOn()\"\n          [disablePast]=\"disablePast()\"\n          [disableFuture]=\"disableFuture()\"\n          [nextMonthLabel]=\"nextMonthLabel()\"\n          (selectedChange)=\"selectDate($event)\"\n          (monthChange)=\"setDisplayedMonth($event)\"\n          [previousMonthLabel]=\"previousMonthLabel()\"\n        />\n        <span\n          class=\"solaris-date-range-picker__calendar-divider\"\n          aria-hidden=\"true\"\n        ></span>\n        <solaris-date-calendar\n          [min]=\"min()\"\n          [max]=\"max()\"\n          [range]=\"pending()\"\n          [month]=\"nextMonth()\"\n          [locale]=\"resolvedLocale()\"\n          [disabledDates]=\"disabledDates()\"\n          [weekStartsOn]=\"weekStartsOn()\"\n          [disablePast]=\"disablePast()\"\n          [disableFuture]=\"disableFuture()\"\n          [nextMonthLabel]=\"nextMonthLabel()\"\n          (selectedChange)=\"selectDate($event)\"\n          (monthChange)=\"setDisplayedMonth($event)\"\n          [previousMonthLabel]=\"previousMonthLabel()\"\n        />\n      </div>\n      <footer class=\"solaris-date-range-picker__footer\">\n        <div class=\"solaris-date-range-picker__inputs\">\n          <input\n            type=\"text\"\n            solaris-input\n            (blur)=\"onBlur()\"\n            density=\"compact\"\n            autocomplete=\"off\"\n            [fullWidth]=\"false\"\n            inputmode=\"numeric\"\n            (focus)=\"onFocus()\"\n            [value]=\"startDisplay()\"\n            (click)=\"onInputClick($event)\"\n            [attr.aria-label]=\"startLabel()\"\n            [disabled]=\"isStartDisabled()\"\n            [readonly]=\"isStartReadonly()\"\n            [attr.aria-disabled]=\"isStartDisabled() ? 'true' : null\"\n            (input)=\"onInput('start', $event)\"\n            (keydown)=\"onPanelInputKeydown($event)\"\n          />\n          <span class=\"solaris-date-range-picker__separator\" aria-hidden=\"true\"\n            >-</span\n          >\n          <input\n            type=\"text\"\n            solaris-input\n            (blur)=\"onBlur()\"\n            density=\"compact\"\n            [fullWidth]=\"false\"\n            autocomplete=\"off\"\n            (focus)=\"onFocus()\"\n            inputmode=\"numeric\"\n            [value]=\"endDisplay()\"\n            [attr.aria-label]=\"endLabel()\"\n            (click)=\"onInputClick($event)\"\n            [disabled]=\"isEndDisabled()\"\n            [readonly]=\"isEndReadonly()\"\n            [attr.aria-disabled]=\"isEndDisabled() ? 'true' : null\"\n            (input)=\"onInput('end', $event)\"\n            (keydown)=\"onPanelInputKeydown($event)\"\n          />\n        </div>\n        <div class=\"solaris-date-range-picker__actions\">\n          <button\n            type=\"button\"\n            solaris-button\n            density=\"compact\"\n            appearance=\"ghost\"\n            data-density=\"compact\"\n            (click)=\"clearPending()\"\n          >\n            {{ clearButtonLabel() }}\n          </button>\n          <button\n            type=\"button\"\n            solaris-button\n            density=\"compact\"\n            (click)=\"cancel()\"\n            appearance=\"outline\"\n            data-density=\"compact\"\n          >\n            {{ cancelLabel() }}\n          </button>\n          <button\n            type=\"button\"\n            solaris-button\n            color=\"primary\"\n            (click)=\"apply()\"\n            density=\"compact\"\n            data-density=\"compact\"\n          >\n            {{ applyLabel() }}\n          </button>\n        </div>\n      </footer>\n    </div>\n  </div>\n</ng-template>\n",
 		styles: [":host{display:block;--solaris-date-range-picker-trigger-font-size: var(--solaris-font-size-sm);--solaris-date-range-picker-trigger-line-height: var( --solaris-line-height-sm )}:host([data-size=sm][data-density=compact]),:host([data-size=sm][data-density=normal]){--solaris-date-range-picker-trigger-font-size: var(--solaris-font-size-xs)}:host([data-size=sm][data-density=comfortable]),:host([data-size=md][data-density=compact]),:host([data-size=md][data-density=normal]),:host([data-size=lg][data-density=compact]){--solaris-date-range-picker-trigger-font-size: var(--solaris-font-size-sm)}:host([data-size=md][data-density=comfortable]),:host([data-size=lg][data-density=normal]),:host([data-size=lg][data-density=comfortable]){--solaris-date-range-picker-trigger-font-size: var(--solaris-font-size-md);--solaris-date-range-picker-trigger-line-height: var( --solaris-line-height-md )}[solaris-button].solaris-date-range-picker__calendar-trigger,.solaris-date-range-picker__calendar-trigger{color:var(--solaris-neutral-text-secondary)!important;background:transparent!important;cursor:pointer}[solaris-button].solaris-date-range-picker__calendar-trigger:hover,[solaris-button].solaris-date-range-picker__calendar-trigger:active,.solaris-date-range-picker__calendar-trigger:hover,.solaris-date-range-picker__calendar-trigger:active{color:var(--solaris-neutral-text-heading)!important;background:transparent!important}.solaris-date-range-picker__calendar-trigger solaris-icon{cursor:pointer}.solaris-date-range-picker__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-date-range-picker__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-lg);height:var(--solaris-font-size-lg);color:var(--solaris-neutral-text-secondary);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-date-range-picker__clear:hover{color:var(--solaris-neutral-text-heading)}@media(prefers-reduced-motion:reduce){.solaris-date-range-picker__panel{animation:none}.solaris-date-range-picker__clear{transition:none}}[data-reduced-motion=true] .solaris-date-range-picker__panel{animation:none}[data-reduced-motion=true] .solaris-date-range-picker__clear{transition:none}.solaris-date-range-picker__inputs,.solaris-date-range-picker__actions{display:flex;align-items:center}.solaris-date-range-picker__trigger{width:100%;min-width:0;padding:0;border:0;color:var(--solaris-neutral-text-body);text-align:start;background:transparent;cursor:pointer;font:var(--solaris-font-weight-regular) var(--solaris-date-range-picker-trigger-font-size)/var(--solaris-date-range-picker-trigger-line-height) var(--solaris-font-family-sans)}.solaris-date-range-picker__trigger:focus-visible,.solaris-date-range-picker__preset:focus-visible{outline:var(--solaris-focus-ring-width) var(--solaris-focus-ring-style) var(--solaris-focus-ring-color);outline-offset:var(--solaris-focus-ring-offset)}.solaris-date-range-picker__trigger:disabled{cursor:not-allowed;color:var(--solaris-neutral-text-secondary)}.solaris-date-range-picker__inputs{gap:var(--solaris-spacing-2);min-width:0}.solaris-date-range-picker__inputs input{flex:0 0 calc(var(--solaris-spacing-17) + var(--solaris-spacing-8));width:calc(var(--solaris-spacing-17) + var(--solaris-spacing-8))}.solaris-date-range-picker__separator{color:var(--solaris-neutral-text-secondary)}.solaris-date-range-picker__panel{display:grid;width:fit-content;grid-template-columns:auto auto;animation:solaris-motion-overlay-enter-top var(--solaris-motion-duration-normal) var(--solaris-motion-easing-decelerate) both}.solaris-date-range-picker__presets{display:grid;align-content:start;gap:var(--solaris-spacing-1);min-width:calc(var(--solaris-spacing-17) + var(--solaris-spacing-4));padding-block:var(--solaris-spacing-3);padding-inline:var(--solaris-spacing-3) var(--solaris-spacing-4);border-inline-end:var(--solaris-border-width-sm) solid var(--solaris-neutral-border-subtle)}.solaris-date-range-picker__preset{position:relative;min-height:var(--solaris-spacing-8);padding:0 var(--solaris-spacing-2);border:0;border-radius:var(--solaris-radius-sm);color:var(--solaris-neutral-text-body);text-align:start;background:transparent;cursor:pointer;font:var(--solaris-font-weight-regular) var(--solaris-font-size-sm)/var(--solaris-line-height-md) var(--solaris-font-family-sans)}.solaris-date-range-picker__preset:hover{background:var(--solaris-neutral-subtle)}.solaris-date-range-picker__preset[data-active]:after{position:absolute;inset-block:0;inset-inline-start:calc(var(--solaris-spacing-3) * -1);width:var(--solaris-border-width-md);background:var(--solaris-primary-solid);content:\"\"}.solaris-date-range-picker__content{display:grid;min-width:max-content}.solaris-date-range-picker__calendars{display:grid;align-items:start;grid-template-columns:auto auto auto}.solaris-date-range-picker__calendars solaris-date-calendar{margin:var(--solaris-spacing-3)}.solaris-date-range-picker__calendar-divider{align-self:stretch;width:var(--solaris-border-width-sm);background:var(--solaris-neutral-border-subtle)}.solaris-date-range-picker__footer{display:flex;gap:var(--solaris-spacing-4);align-items:center;justify-content:space-between;padding:var(--solaris-spacing-3);border-block-start:var(--solaris-border-width-sm) solid var(--solaris-neutral-border-subtle)}.solaris-date-range-picker__actions{gap:var(--solaris-spacing-2)}@media(width<=640px){.solaris-date-range-picker__panel{box-sizing:border-box;min-width:0;width:min(100%,var(--solaris-spacing-17) * 2 + var(--solaris-spacing-16) + var(--solaris-spacing-3) * 2);max-width:100%;grid-template-columns:minmax(0,1fr);gap:0}.solaris-date-range-picker__presets{box-sizing:border-box;display:flex;flex-wrap:nowrap;min-width:0;overflow-x:auto;overscroll-behavior-inline:contain;padding-inline:var(--solaris-spacing-1);border-block-end:var(--solaris-border-width-sm) solid var(--solaris-neutral-border-subtle);border-inline-end:0}.solaris-date-range-picker__preset{flex:0 0 auto;min-height:var(--solaris-spacing-10);border-radius:0;scroll-snap-align:start;white-space:nowrap}.solaris-date-range-picker__preset[data-active]:after{inset-block:auto 0;inset-inline:var(--solaris-spacing-2);width:auto;height:var(--solaris-border-width-md)}.solaris-date-range-picker__content{box-sizing:border-box;width:100%;min-width:0}.solaris-date-range-picker__calendars{width:100%;min-width:0;grid-template-columns:minmax(0,1fr);justify-items:center}.solaris-date-range-picker__calendars solaris-date-calendar{margin:0}.solaris-date-range-picker__calendars ::ng-deep .solaris-date-calendar{box-sizing:border-box;max-width:100%;padding:0 var(--solaris-spacing-3) var(--solaris-spacing-3)}.solaris-date-range-picker__calendar-divider{display:none}.solaris-date-range-picker__calendars solaris-date-calendar:last-child{display:none}.solaris-date-range-picker__footer{box-sizing:border-box;width:100%;min-width:0;flex-direction:column;gap:var(--solaris-spacing-2);align-items:stretch}.solaris-date-range-picker__inputs input{flex:1 1 0;width:auto;min-width:0}.solaris-date-range-picker__actions{width:100%;min-width:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--solaris-spacing-1)}.solaris-date-range-picker__actions [solaris-button]{width:100%;min-width:0}}\n"],
 		dependencies: [
 			{
@@ -34633,7 +34790,7 @@ i0.ɵɵngDeclareClassMetadata({
 				"[attr.data-density]": "effectiveDensity()",
 				"[attr.data-open]": "panelOpen() ? \"\" : null"
 			},
-			template: "@if (inline()) {\n  <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n} @else {\n  <solaris-form-field\n    [control]=\"this\"\n    [label]=\"labelText()\"\n    [hint]=\"hintText()\"\n    [error]=\"errorText()\"\n    [appearance]=\"appearance()\"\n    [density]=\"effectiveDensity()\"\n    [size]=\"size()\"\n    [radius]=\"radius()\"\n    [invalid]=\"isEffectivelyInvalid()\"\n    [required]=\"requiredInput()\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [readonly]=\"isEffectivelyReadonly()\"\n    [loading]=\"loading()\"\n    [hasSuffixAction]=\"!!projectedSuffixAction()\"\n    solaris-popover-trigger\n    [solarisPopoverTriggerFor]=\"rangePopover\"\n    [solarisPopoverDisabled]=\"\n      isEffectivelyDisabled() || isEffectivelyReadonly()\n    \"\n    [solarisPopoverPlacement]=\"'bottom'\"\n    [solarisPopoverAlign]=\"'start'\"\n    [solarisPopoverPadding]=\"'none'\"\n    [solarisPopoverFitContent]=\"true\"\n    [solarisPopoverMaxWidth]=\"'calc(100vw - var(--solaris-spacing-4))'\"\n    [solarisPopoverRadius]=\"radius()\"\n    [solarisPopoverAriaHasPopup]=\"'dialog'\"\n    (solarisPopoverOpened)=\"onPanelOpened()\"\n    (solarisPopoverClosed)=\"onPanelClosed()\"\n  >\n    <ng-content\n      select=\"[solaris-form-prefix]\"\n      ngProjectAs=\"[solaris-form-prefix]\"\n    />\n    <ng-content\n      select=\"[solaris-form-suffix][solaris-form-suffix-action]\"\n      ngProjectAs=\"[solaris-form-suffix-action]\"\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    @if (prefix(); as prefixName) {\n      <span solaris-form-prefix>\n        <solaris-icon [name]=\"prefixName\" [decorative]=\"true\" />\n      </span>\n    }\n    <button\n      #triggerButton\n      type=\"button\"\n      class=\"solaris-date-range-picker__trigger\"\n      [id]=\"id\"\n      [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n      [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n      [attr.aria-describedby]=\"describedByIds.join(' ') || null\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (keydown)=\"onInputKeydown($event)\"\n    >\n      {{ rangeDisplay() || placeholderText() }}\n    </button>\n\n    <button\n      type=\"button\"\n      appearance=\"ghost\"\n      solaris-icon-button\n      solaris-form-suffix\n      solaris-form-suffix-action\n      class=\"solaris-date-range-picker__calendar-trigger\"\n      [size]=\"size()\"\n      [density]=\"effectiveDensity()\"\n      [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n      [attr.aria-label]=\"calendarLabel()\"\n    >\n      <solaris-icon name=\"calendar\" [decorative]=\"true\" />\n    </button>\n    @if (canClear() && !loading()) {\n      <button\n        type=\"button\"\n        solaris-form-suffix\n        class=\"solaris-date-range-picker__clear\"\n        [attr.aria-label]=\"clearAriaLabel()\"\n        [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n        (click)=\"clearValue(); $event.stopPropagation()\"\n        tabindex=\"-1\"\n      >\n        <solaris-icon name=\"x\" [decorative]=\"true\" />\n      </button>\n    }\n    @if (suffix(); as suffixName) {\n      <span solaris-form-suffix>\n        <solaris-icon [name]=\"suffixName\" [decorative]=\"true\" />\n      </span>\n    }\n  </solaris-form-field>\n}\n\n<ng-template #rangePopover=\"solarisPopover\" #panelTpl solaris-popover>\n  <div\n    [attr.role]=\"inline() ? 'group' : 'dialog'\"\n    [attr.aria-label]=\"calendarLabel()\"\n    class=\"solaris-date-range-picker__panel\"\n  >\n    <nav\n      class=\"solaris-date-range-picker__presets\"\n      [attr.aria-label]=\"presetsLabel()\"\n    >\n      @if (presets().length > 0) {\n        @for (preset of presets(); track preset.id) {\n          <button\n            type=\"button\"\n            class=\"solaris-date-range-picker__preset\"\n            [attr.data-active]=\"activePresetId() === preset.id ? '' : null\"\n            (click)=\"selectPreset(preset)\"\n          >\n            {{ presetLabel(preset) }}\n          </button>\n        }\n      }\n      <button\n        type=\"button\"\n        class=\"solaris-date-range-picker__preset\"\n        [attr.data-active]=\"activePresetId() === 'custom' ? '' : null\"\n        (click)=\"selectCustom()\"\n      >\n        {{ customLabel() }}\n      </button>\n    </nav>\n    <div class=\"solaris-date-range-picker__content\">\n      <div class=\"solaris-date-range-picker__calendars\">\n        <solaris-date-calendar\n          [min]=\"min()\"\n          [max]=\"max()\"\n          [range]=\"pending()\"\n          [month]=\"displayedMonth()\"\n          [locale]=\"resolvedLocale()\"\n          [disabledDates]=\"disabledDates()\"\n          [weekStartsOn]=\"weekStartsOn()\"\n          [disablePast]=\"disablePast()\"\n          [disableFuture]=\"disableFuture()\"\n          [nextMonthLabel]=\"nextMonthLabel()\"\n          (selectedChange)=\"selectDate($event)\"\n          (monthChange)=\"setDisplayedMonth($event)\"\n          [previousMonthLabel]=\"previousMonthLabel()\"\n        />\n        <span\n          class=\"solaris-date-range-picker__calendar-divider\"\n          aria-hidden=\"true\"\n        ></span>\n        <solaris-date-calendar\n          [min]=\"min()\"\n          [max]=\"max()\"\n          [range]=\"pending()\"\n          [month]=\"nextMonth()\"\n          [locale]=\"resolvedLocale()\"\n          [disabledDates]=\"disabledDates()\"\n          [weekStartsOn]=\"weekStartsOn()\"\n          [disablePast]=\"disablePast()\"\n          [disableFuture]=\"disableFuture()\"\n          [nextMonthLabel]=\"nextMonthLabel()\"\n          (selectedChange)=\"selectDate($event)\"\n          (monthChange)=\"setDisplayedMonth($event)\"\n          [previousMonthLabel]=\"previousMonthLabel()\"\n        />\n      </div>\n      <footer class=\"solaris-date-range-picker__footer\">\n        <div class=\"solaris-date-range-picker__inputs\">\n          <input\n            type=\"text\"\n            solaris-input\n            (blur)=\"onBlur()\"\n            density=\"compact\"\n            autocomplete=\"off\"\n            [fullWidth]=\"false\"\n            inputmode=\"numeric\"\n            (focus)=\"onFocus()\"\n            [value]=\"startDisplay()\"\n            (click)=\"onInputClick($event)\"\n            [attr.aria-label]=\"startLabel()\"\n            [disabled]=\"isStartDisabled()\"\n            [readonly]=\"isStartReadonly()\"\n            [attr.aria-disabled]=\"isStartDisabled() ? 'true' : null\"\n            (input)=\"onInput('start', $event)\"\n            (keydown)=\"onPanelInputKeydown($event)\"\n          />\n          <span class=\"solaris-date-range-picker__separator\" aria-hidden=\"true\"\n            >-</span\n          >\n          <input\n            type=\"text\"\n            solaris-input\n            (blur)=\"onBlur()\"\n            density=\"compact\"\n            [fullWidth]=\"false\"\n            autocomplete=\"off\"\n            (focus)=\"onFocus()\"\n            inputmode=\"numeric\"\n            [value]=\"endDisplay()\"\n            [attr.aria-label]=\"endLabel()\"\n            (click)=\"onInputClick($event)\"\n            [disabled]=\"isEndDisabled()\"\n            [readonly]=\"isEndReadonly()\"\n            [attr.aria-disabled]=\"isEndDisabled() ? 'true' : null\"\n            (input)=\"onInput('end', $event)\"\n            (keydown)=\"onPanelInputKeydown($event)\"\n          />\n        </div>\n        <div class=\"solaris-date-range-picker__actions\">\n          <button\n            type=\"button\"\n            solaris-button\n            density=\"compact\"\n            appearance=\"ghost\"\n            data-density=\"compact\"\n            (click)=\"clearPending()\"\n          >\n            {{ clearButtonLabel() }}\n          </button>\n          <button\n            type=\"button\"\n            solaris-button\n            density=\"compact\"\n            (click)=\"cancel()\"\n            appearance=\"outline\"\n            data-density=\"compact\"\n          >\n            {{ cancelLabel() }}\n          </button>\n          <button\n            type=\"button\"\n            solaris-button\n            color=\"primary\"\n            (click)=\"apply()\"\n            density=\"compact\"\n            data-density=\"compact\"\n          >\n            {{ applyLabel() }}\n          </button>\n        </div>\n      </footer>\n    </div>\n  </div>\n</ng-template>\n",
+			template: "@if (inline()) {\n  <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n} @else {\n  <solaris-form-field\n    [control]=\"this\"\n    [label]=\"labelText()\"\n    [hint]=\"hintText()\"\n    [error]=\"errorText()\"\n    [appearance]=\"appearance()\"\n    [density]=\"effectiveDensity()\"\n    [size]=\"size()\"\n    [radius]=\"radius()\"\n    [invalid]=\"isEffectivelyInvalid()\"\n    [required]=\"requiredInput()\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [readonly]=\"isEffectivelyReadonly()\"\n    [loading]=\"loading()\"\n    [hasSuffixAction]=\"!!projectedSuffixAction()\"\n    solaris-popover-trigger\n    [solarisPopoverTriggerFor]=\"rangePopover\"\n    [solarisPopoverDisabled]=\"\n      isEffectivelyDisabled() || isEffectivelyReadonly()\n    \"\n    [solarisPopoverPlacement]=\"'bottom'\"\n    [solarisPopoverAlign]=\"'start'\"\n    [solarisPopoverPadding]=\"'none'\"\n    [solarisPopoverFitContent]=\"true\"\n    [solarisPopoverMaxWidth]=\"'calc(100vw - var(--solaris-spacing-4))'\"\n    [solarisPopoverRadius]=\"radius()\"\n    [solarisPopoverAriaHasPopup]=\"'dialog'\"\n    (solarisPopoverOpened)=\"onPanelOpened()\"\n    (solarisPopoverClosed)=\"onPanelClosed()\"\n  >\n    <ng-content\n      select=\"[solaris-form-prefix]\"\n      ngProjectAs=\"[solaris-form-prefix]\"\n    />\n    <ng-content\n      select=\"[solaris-form-suffix-action]\"\n      ngProjectAs=\"[solaris-form-suffix-action]\"\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    @if (prefix(); as prefixName) {\n      <span solaris-form-prefix>\n        <solaris-icon [name]=\"prefixName\" [decorative]=\"true\" />\n      </span>\n    }\n    <button\n      #triggerButton\n      type=\"button\"\n      class=\"solaris-date-range-picker__trigger\"\n      [id]=\"id\"\n      [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n      [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n      [attr.aria-describedby]=\"describedByIds.join(' ') || null\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (keydown)=\"onInputKeydown($event)\"\n    >\n      {{ rangeDisplay() || placeholderText() }}\n    </button>\n\n    <button\n      type=\"button\"\n      appearance=\"ghost\"\n      solaris-icon-button\n      solaris-form-suffix\n      solaris-form-suffix-action\n      class=\"solaris-date-range-picker__calendar-trigger\"\n      [size]=\"size()\"\n      [density]=\"effectiveDensity()\"\n      [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n      [attr.aria-label]=\"calendarLabel()\"\n    >\n      <solaris-icon name=\"calendar\" [decorative]=\"true\" />\n    </button>\n    @if (canClear() && !loading()) {\n      <button\n        type=\"button\"\n        solaris-form-suffix\n        class=\"solaris-date-range-picker__clear\"\n        [attr.aria-label]=\"clearAriaLabel()\"\n        [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n        (click)=\"clearValue(); $event.stopPropagation()\"\n        tabindex=\"-1\"\n      >\n        <solaris-icon name=\"x\" [decorative]=\"true\" />\n      </button>\n    }\n    @if (suffix(); as suffixName) {\n      <span solaris-form-suffix>\n        <solaris-icon [name]=\"suffixName\" [decorative]=\"true\" />\n      </span>\n    }\n  </solaris-form-field>\n}\n\n<ng-template #rangePopover=\"solarisPopover\" #panelTpl solaris-popover>\n  <div\n    [attr.role]=\"inline() ? 'group' : 'dialog'\"\n    [attr.aria-label]=\"calendarLabel()\"\n    class=\"solaris-date-range-picker__panel\"\n  >\n    <nav\n      class=\"solaris-date-range-picker__presets\"\n      [attr.aria-label]=\"presetsLabel()\"\n    >\n      @if (presets().length > 0) {\n        @for (preset of presets(); track preset.id) {\n          <button\n            type=\"button\"\n            class=\"solaris-date-range-picker__preset\"\n            [attr.data-active]=\"activePresetId() === preset.id ? '' : null\"\n            (click)=\"selectPreset(preset)\"\n          >\n            {{ presetLabel(preset) }}\n          </button>\n        }\n      }\n      <button\n        type=\"button\"\n        class=\"solaris-date-range-picker__preset\"\n        [attr.data-active]=\"activePresetId() === 'custom' ? '' : null\"\n        (click)=\"selectCustom()\"\n      >\n        {{ customLabel() }}\n      </button>\n    </nav>\n    <div class=\"solaris-date-range-picker__content\">\n      <div class=\"solaris-date-range-picker__calendars\">\n        <solaris-date-calendar\n          [min]=\"min()\"\n          [max]=\"max()\"\n          [range]=\"pending()\"\n          [month]=\"displayedMonth()\"\n          [locale]=\"resolvedLocale()\"\n          [disabledDates]=\"disabledDates()\"\n          [weekStartsOn]=\"weekStartsOn()\"\n          [disablePast]=\"disablePast()\"\n          [disableFuture]=\"disableFuture()\"\n          [nextMonthLabel]=\"nextMonthLabel()\"\n          (selectedChange)=\"selectDate($event)\"\n          (monthChange)=\"setDisplayedMonth($event)\"\n          [previousMonthLabel]=\"previousMonthLabel()\"\n        />\n        <span\n          class=\"solaris-date-range-picker__calendar-divider\"\n          aria-hidden=\"true\"\n        ></span>\n        <solaris-date-calendar\n          [min]=\"min()\"\n          [max]=\"max()\"\n          [range]=\"pending()\"\n          [month]=\"nextMonth()\"\n          [locale]=\"resolvedLocale()\"\n          [disabledDates]=\"disabledDates()\"\n          [weekStartsOn]=\"weekStartsOn()\"\n          [disablePast]=\"disablePast()\"\n          [disableFuture]=\"disableFuture()\"\n          [nextMonthLabel]=\"nextMonthLabel()\"\n          (selectedChange)=\"selectDate($event)\"\n          (monthChange)=\"setDisplayedMonth($event)\"\n          [previousMonthLabel]=\"previousMonthLabel()\"\n        />\n      </div>\n      <footer class=\"solaris-date-range-picker__footer\">\n        <div class=\"solaris-date-range-picker__inputs\">\n          <input\n            type=\"text\"\n            solaris-input\n            (blur)=\"onBlur()\"\n            density=\"compact\"\n            autocomplete=\"off\"\n            [fullWidth]=\"false\"\n            inputmode=\"numeric\"\n            (focus)=\"onFocus()\"\n            [value]=\"startDisplay()\"\n            (click)=\"onInputClick($event)\"\n            [attr.aria-label]=\"startLabel()\"\n            [disabled]=\"isStartDisabled()\"\n            [readonly]=\"isStartReadonly()\"\n            [attr.aria-disabled]=\"isStartDisabled() ? 'true' : null\"\n            (input)=\"onInput('start', $event)\"\n            (keydown)=\"onPanelInputKeydown($event)\"\n          />\n          <span class=\"solaris-date-range-picker__separator\" aria-hidden=\"true\"\n            >-</span\n          >\n          <input\n            type=\"text\"\n            solaris-input\n            (blur)=\"onBlur()\"\n            density=\"compact\"\n            [fullWidth]=\"false\"\n            autocomplete=\"off\"\n            (focus)=\"onFocus()\"\n            inputmode=\"numeric\"\n            [value]=\"endDisplay()\"\n            [attr.aria-label]=\"endLabel()\"\n            (click)=\"onInputClick($event)\"\n            [disabled]=\"isEndDisabled()\"\n            [readonly]=\"isEndReadonly()\"\n            [attr.aria-disabled]=\"isEndDisabled() ? 'true' : null\"\n            (input)=\"onInput('end', $event)\"\n            (keydown)=\"onPanelInputKeydown($event)\"\n          />\n        </div>\n        <div class=\"solaris-date-range-picker__actions\">\n          <button\n            type=\"button\"\n            solaris-button\n            density=\"compact\"\n            appearance=\"ghost\"\n            data-density=\"compact\"\n            (click)=\"clearPending()\"\n          >\n            {{ clearButtonLabel() }}\n          </button>\n          <button\n            type=\"button\"\n            solaris-button\n            density=\"compact\"\n            (click)=\"cancel()\"\n            appearance=\"outline\"\n            data-density=\"compact\"\n          >\n            {{ cancelLabel() }}\n          </button>\n          <button\n            type=\"button\"\n            solaris-button\n            color=\"primary\"\n            (click)=\"apply()\"\n            density=\"compact\"\n            data-density=\"compact\"\n          >\n            {{ applyLabel() }}\n          </button>\n        </div>\n      </footer>\n    </div>\n  </div>\n</ng-template>\n",
 			styles: [":host{display:block;--solaris-date-range-picker-trigger-font-size: var(--solaris-font-size-sm);--solaris-date-range-picker-trigger-line-height: var( --solaris-line-height-sm )}:host([data-size=sm][data-density=compact]),:host([data-size=sm][data-density=normal]){--solaris-date-range-picker-trigger-font-size: var(--solaris-font-size-xs)}:host([data-size=sm][data-density=comfortable]),:host([data-size=md][data-density=compact]),:host([data-size=md][data-density=normal]),:host([data-size=lg][data-density=compact]){--solaris-date-range-picker-trigger-font-size: var(--solaris-font-size-sm)}:host([data-size=md][data-density=comfortable]),:host([data-size=lg][data-density=normal]),:host([data-size=lg][data-density=comfortable]){--solaris-date-range-picker-trigger-font-size: var(--solaris-font-size-md);--solaris-date-range-picker-trigger-line-height: var( --solaris-line-height-md )}[solaris-button].solaris-date-range-picker__calendar-trigger,.solaris-date-range-picker__calendar-trigger{color:var(--solaris-neutral-text-secondary)!important;background:transparent!important;cursor:pointer}[solaris-button].solaris-date-range-picker__calendar-trigger:hover,[solaris-button].solaris-date-range-picker__calendar-trigger:active,.solaris-date-range-picker__calendar-trigger:hover,.solaris-date-range-picker__calendar-trigger:active{color:var(--solaris-neutral-text-heading)!important;background:transparent!important}.solaris-date-range-picker__calendar-trigger solaris-icon{cursor:pointer}.solaris-date-range-picker__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-date-range-picker__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-lg);height:var(--solaris-font-size-lg);color:var(--solaris-neutral-text-secondary);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-date-range-picker__clear:hover{color:var(--solaris-neutral-text-heading)}@media(prefers-reduced-motion:reduce){.solaris-date-range-picker__panel{animation:none}.solaris-date-range-picker__clear{transition:none}}[data-reduced-motion=true] .solaris-date-range-picker__panel{animation:none}[data-reduced-motion=true] .solaris-date-range-picker__clear{transition:none}.solaris-date-range-picker__inputs,.solaris-date-range-picker__actions{display:flex;align-items:center}.solaris-date-range-picker__trigger{width:100%;min-width:0;padding:0;border:0;color:var(--solaris-neutral-text-body);text-align:start;background:transparent;cursor:pointer;font:var(--solaris-font-weight-regular) var(--solaris-date-range-picker-trigger-font-size)/var(--solaris-date-range-picker-trigger-line-height) var(--solaris-font-family-sans)}.solaris-date-range-picker__trigger:focus-visible,.solaris-date-range-picker__preset:focus-visible{outline:var(--solaris-focus-ring-width) var(--solaris-focus-ring-style) var(--solaris-focus-ring-color);outline-offset:var(--solaris-focus-ring-offset)}.solaris-date-range-picker__trigger:disabled{cursor:not-allowed;color:var(--solaris-neutral-text-secondary)}.solaris-date-range-picker__inputs{gap:var(--solaris-spacing-2);min-width:0}.solaris-date-range-picker__inputs input{flex:0 0 calc(var(--solaris-spacing-17) + var(--solaris-spacing-8));width:calc(var(--solaris-spacing-17) + var(--solaris-spacing-8))}.solaris-date-range-picker__separator{color:var(--solaris-neutral-text-secondary)}.solaris-date-range-picker__panel{display:grid;width:fit-content;grid-template-columns:auto auto;animation:solaris-motion-overlay-enter-top var(--solaris-motion-duration-normal) var(--solaris-motion-easing-decelerate) both}.solaris-date-range-picker__presets{display:grid;align-content:start;gap:var(--solaris-spacing-1);min-width:calc(var(--solaris-spacing-17) + var(--solaris-spacing-4));padding-block:var(--solaris-spacing-3);padding-inline:var(--solaris-spacing-3) var(--solaris-spacing-4);border-inline-end:var(--solaris-border-width-sm) solid var(--solaris-neutral-border-subtle)}.solaris-date-range-picker__preset{position:relative;min-height:var(--solaris-spacing-8);padding:0 var(--solaris-spacing-2);border:0;border-radius:var(--solaris-radius-sm);color:var(--solaris-neutral-text-body);text-align:start;background:transparent;cursor:pointer;font:var(--solaris-font-weight-regular) var(--solaris-font-size-sm)/var(--solaris-line-height-md) var(--solaris-font-family-sans)}.solaris-date-range-picker__preset:hover{background:var(--solaris-neutral-subtle)}.solaris-date-range-picker__preset[data-active]:after{position:absolute;inset-block:0;inset-inline-start:calc(var(--solaris-spacing-3) * -1);width:var(--solaris-border-width-md);background:var(--solaris-primary-solid);content:\"\"}.solaris-date-range-picker__content{display:grid;min-width:max-content}.solaris-date-range-picker__calendars{display:grid;align-items:start;grid-template-columns:auto auto auto}.solaris-date-range-picker__calendars solaris-date-calendar{margin:var(--solaris-spacing-3)}.solaris-date-range-picker__calendar-divider{align-self:stretch;width:var(--solaris-border-width-sm);background:var(--solaris-neutral-border-subtle)}.solaris-date-range-picker__footer{display:flex;gap:var(--solaris-spacing-4);align-items:center;justify-content:space-between;padding:var(--solaris-spacing-3);border-block-start:var(--solaris-border-width-sm) solid var(--solaris-neutral-border-subtle)}.solaris-date-range-picker__actions{gap:var(--solaris-spacing-2)}@media(width<=640px){.solaris-date-range-picker__panel{box-sizing:border-box;min-width:0;width:min(100%,var(--solaris-spacing-17) * 2 + var(--solaris-spacing-16) + var(--solaris-spacing-3) * 2);max-width:100%;grid-template-columns:minmax(0,1fr);gap:0}.solaris-date-range-picker__presets{box-sizing:border-box;display:flex;flex-wrap:nowrap;min-width:0;overflow-x:auto;overscroll-behavior-inline:contain;padding-inline:var(--solaris-spacing-1);border-block-end:var(--solaris-border-width-sm) solid var(--solaris-neutral-border-subtle);border-inline-end:0}.solaris-date-range-picker__preset{flex:0 0 auto;min-height:var(--solaris-spacing-10);border-radius:0;scroll-snap-align:start;white-space:nowrap}.solaris-date-range-picker__preset[data-active]:after{inset-block:auto 0;inset-inline:var(--solaris-spacing-2);width:auto;height:var(--solaris-border-width-md)}.solaris-date-range-picker__content{box-sizing:border-box;width:100%;min-width:0}.solaris-date-range-picker__calendars{width:100%;min-width:0;grid-template-columns:minmax(0,1fr);justify-items:center}.solaris-date-range-picker__calendars solaris-date-calendar{margin:0}.solaris-date-range-picker__calendars ::ng-deep .solaris-date-calendar{box-sizing:border-box;max-width:100%;padding:0 var(--solaris-spacing-3) var(--solaris-spacing-3)}.solaris-date-range-picker__calendar-divider{display:none}.solaris-date-range-picker__calendars solaris-date-calendar:last-child{display:none}.solaris-date-range-picker__footer{box-sizing:border-box;width:100%;min-width:0;flex-direction:column;gap:var(--solaris-spacing-2);align-items:stretch}.solaris-date-range-picker__inputs input{flex:1 1 0;width:auto;min-width:0}.solaris-date-range-picker__actions{width:100%;min-width:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--solaris-spacing-1)}.solaris-date-range-picker__actions [solaris-button]{width:100%;min-width:0}}\n"]
 		}]
 	}],
@@ -43615,7 +43772,7 @@ var SolarisMultiSelectComponent = class SolarisMultiSelectComponent extends Sola
 		],
 		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  [size]=\"size()\"\n  [radius]=\"radius()\"\n  [invalid]=\"isEffectivelyInvalid()\"\n  [required]=\"requiredInput()\"\n  [loading]=\"loading()\"\n  [hasPrefix]=\"!!prefix()\"\n  [hasSuffixAction]=\"!!projectedSuffixAction()\"\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]=\"effectivePanelMinWidth()\"\n  [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n  [solarisPopoverScrollStrategy]=\"'reposition'\"\n  [solarisPopoverCloseOnEscape]=\"false\"\n  [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n  <ng-content\n    select=\"[solaris-form-prefix]\"\n    ngProjectAs=\"[solaris-form-prefix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix][solaris-form-suffix-action]\"\n    ngProjectAs=\"[solaris-form-suffix-action]\"\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  @if (prefix(); as iconName) {\n    <span solaris-form-prefix>\n      <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n    </span>\n  }\n  @if (suffix(); as suffixName) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffixName\" [decorative]=\"true\" />\n    </span>\n  }\n\n  <div\n    #triggerEl\n    class=\"solaris-multi-select__trigger\"\n    [id]=\"elementId() + '--trigger'\"\n    [style.min-width.px]=\"contentMinWidth() || null\"\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() && !loading()) {\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      @if (!loading()) {\n        <solaris-icon\n          class=\"solaris-multi-select__dropdown-icon\"\n          name=\"chevron-down\"\n          [decorative]=\"true\"\n          size=\"sm\"\n        />\n      }\n    </span>\n  </div>\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",
+		template: "<solaris-form-field\n  [control]=\"this\"\n  [label]=\"labelText()\"\n  [hint]=\"hintText()\"\n  [error]=\"errorText()\"\n  [appearance]=\"appearance()\"\n  [density]=\"effectiveDensity()\"\n  [size]=\"size()\"\n  [radius]=\"radius()\"\n  [invalid]=\"isEffectivelyInvalid()\"\n  [required]=\"requiredInput()\"\n  [loading]=\"loading()\"\n  [hasPrefix]=\"!!prefix()\"\n  [hasSuffixAction]=\"!!projectedSuffixAction()\"\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]=\"effectivePanelMinWidth()\"\n  [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n  [solarisPopoverScrollStrategy]=\"'reposition'\"\n  [solarisPopoverCloseOnEscape]=\"false\"\n  [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n  <ng-content\n    select=\"[solaris-form-prefix]\"\n    ngProjectAs=\"[solaris-form-prefix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix-action]\"\n    ngProjectAs=\"[solaris-form-suffix-action]\"\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  @if (prefix(); as iconName) {\n    <span solaris-form-prefix>\n      <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n    </span>\n  }\n  @if (suffix(); as suffixName) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffixName\" [decorative]=\"true\" />\n    </span>\n  }\n\n  <div\n    #triggerEl\n    class=\"solaris-multi-select__trigger\"\n    [id]=\"elementId() + '--trigger'\"\n    [style.min-width.px]=\"contentMinWidth() || null\"\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() && !loading()) {\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      @if (!loading()) {\n        <solaris-icon\n          class=\"solaris-multi-select__dropdown-icon\"\n          name=\"chevron-down\"\n          [decorative]=\"true\"\n          size=\"sm\"\n        />\n      }\n    </span>\n  </div>\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-on-primary: var(--solaris-primary-on-solid);--solaris-surface-hover: var(--solaris-neutral-subtle);--solaris-primary-muted: var(--solaris-primary-soft);--solaris-multi-select-chip-gap: var(--solaris-spacing-5);--solaris-multi-select-chip-radius: var(--solaris-radius-sm);--solaris-multi-select-icon-color: var(--solaris-neutral-text-secondary);--solaris-multi-select-font-size: var(--solaris-font-size-sm);--solaris-multi-select-chip-color: var(--solaris-neutral-text-body);--solaris-multi-select-checkbox-size: var(--solaris-spacing-8);--solaris-multi-select-value-color: var(--solaris-neutral-text-body);--solaris-multi-select-chip-padding-y: var(--solaris-spacing-1);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-2);--solaris-multi-select-checkbox-radius: var(--solaris-radius-sm);--solaris-multi-select-line-height: var(--solaris-line-height-md);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-select-all-height: var(--solaris-spacing-9);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-6);--solaris-multi-select-placeholder-color: var( --solaris-neutral-text-secondary );--solaris-multi-select-chip-remove-size: var(--solaris-font-size-sm);--solaris-multi-select-chip-background: var(--solaris-neutral-subtle);--solaris-multi-select-placeholder-opacity: var(--solaris-opacity-70);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1);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-4)}:host ::ng-deep .solaris-form-field__message-row{margin-top:0}:host ::ng-deep solaris-form-field[data-loading] .solaris-multi-select__trigger{padding-inline-end:var(--solaris-form-field-affix-size)}: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-3)}.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);opacity:var(--solaris-multi-select-placeholder-opacity)}.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-neutral-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-3);margin-inline-start:auto}.solaris-multi-select__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.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-lg);height:var(--solaris-font-size-lg);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-neutral-text-body)}.solaris-multi-select__dropdown-icon solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-multi-select__dropdown-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);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;animation:solaris-motion-overlay-enter-top var(--solaris-motion-duration-normal) var(--solaris-motion-easing-decelerate) both}.solaris-multi-select__search-input{flex:1;margin:0;padding:0;width: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);opacity:var(--solaris-multi-select-placeholder-opacity)}.solaris-multi-select__loading,.solaris-multi-select__no-results,.solaris-multi-select__empty{display:flex;align-items:center;justify-content:center;color:var(--solaris-neutral-text-secondary);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;box-sizing:border-box;justify-content:center;width:var(--solaris-multi-select-checkbox-size);height:var(--solaris-multi-select-checkbox-size);border-radius:var(--solaris-multi-select-checkbox-radius);background:var(--solaris-neutral-default);border:var(--solaris-multi-select-checkbox-border-width) solid var(--solaris-primary-border)}.solaris-multi-select__select-all-checkbox--checked{background:var(--solaris-primary-solid);border-color:var(--solaris-primary-solid)}.solaris-multi-select__select-all-checkbox--partial{background:var(--solaris-primary-muted);border-color:var(--solaris-primary-solid)}.solaris-multi-select__select-all-checkbox-icon{display:flex;align-items:center;box-sizing:border-box;justify-content:center;color:var(--solaris-on-primary);width:var(--solaris-multi-select-checkbox-icon-size);height:var(--solaris-multi-select-checkbox-icon-size);font-size:var(--solaris-multi-select-checkbox-icon-size)}.solaris-multi-select__select-all-checkbox-icon solaris-icon{width:1em;height:1em}.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-size=sm][data-density=compact]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-1);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-2);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-checkbox-size: var(--solaris-spacing-7);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-5);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=md][data-density=compact]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-1);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-3);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-checkbox-size: calc( var(--solaris-spacing-7) + var(--solaris-spacing-2) );--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-6);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=lg][data-density=compact]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-2);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-4);--solaris-multi-select-chip-font-size: var(--solaris-font-size-sm);--solaris-multi-select-checkbox-size: var(--solaris-spacing-8);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-7);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-2)}:host([data-size=sm][data-density=normal]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-1);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-3);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-checkbox-size: var(--solaris-spacing-7);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-5);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=md][data-density=normal]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-2);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-4);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-checkbox-size: var(--solaris-spacing-8);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-6);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=lg][data-density=normal]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-3);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-5);--solaris-multi-select-chip-font-size: var(--solaris-font-size-sm);--solaris-multi-select-checkbox-size: calc( var(--solaris-spacing-8) + var(--solaris-spacing-2) );--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-7);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-2)}:host([data-size=sm][data-density=comfortable]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-2);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-4);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-checkbox-size: calc( var(--solaris-spacing-7) + var(--solaris-spacing-2) );--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-5);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=md][data-density=comfortable]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-3);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-5);--solaris-multi-select-chip-font-size: var(--solaris-font-size-sm);--solaris-multi-select-checkbox-size: calc( var(--solaris-spacing-8) + var(--solaris-spacing-2) );--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-6);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=lg][data-density=comfortable]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-4);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-6);--solaris-multi-select-chip-font-size: var(--solaris-font-size-sm);--solaris-multi-select-checkbox-size: var(--solaris-spacing-9);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-7);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-2)}: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}.solaris-multi-select__panel{animation:none}}[data-reduced-motion=true] .solaris-multi-select__dropdown-icon,[data-reduced-motion=true] .solaris-multi-select__clear{transition:none}[data-reduced-motion=true] .solaris-multi-select__panel{animation:none}\n"],
 		dependencies: [
 			{
@@ -43663,6 +43820,11 @@ var SolarisMultiSelectComponent = class SolarisMultiSelectComponent extends Sola
 				type: SolarisFormPrefixDirective,
 				selector: "[solaris-form-prefix]"
 			},
+			{
+				kind: "directive",
+				type: SolarisFormSuffixDirective,
+				selector: "[solaris-form-suffix]"
+			},
 			{
 				kind: "component",
 				type: SolarisIconComponent,
@@ -43772,6 +43934,7 @@ i0.ɵɵngDeclareClassMetadata({
 				SolarisFormFieldComponent,
 				SolarisFormFieldTriggerDirective,
 				SolarisFormPrefixDirective,
+				SolarisFormSuffixDirective,
 				SolarisIconComponent,
 				SolarisPopoverDirective,
 				SolarisPopoverTriggerDirective,
@@ -43802,7 +43965,7 @@ i0.ɵɵngDeclareClassMetadata({
 				"[attr.aria-label]": "ariaLabelText() ?? null",
 				"[attr.data-has-value]": "hasValue() ? \"\" : null"
 			},
-			template: "<solaris-form-field\n  [control]=\"this\"\n  [label]=\"labelText()\"\n  [hint]=\"hintText()\"\n  [error]=\"errorText()\"\n  [appearance]=\"appearance()\"\n  [density]=\"effectiveDensity()\"\n  [size]=\"size()\"\n  [radius]=\"radius()\"\n  [invalid]=\"isEffectivelyInvalid()\"\n  [required]=\"requiredInput()\"\n  [loading]=\"loading()\"\n  [hasPrefix]=\"!!prefix()\"\n  [hasSuffixAction]=\"!!projectedSuffixAction()\"\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]=\"effectivePanelMinWidth()\"\n  [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n  [solarisPopoverScrollStrategy]=\"'reposition'\"\n  [solarisPopoverCloseOnEscape]=\"false\"\n  [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n  <ng-content\n    select=\"[solaris-form-prefix]\"\n    ngProjectAs=\"[solaris-form-prefix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix][solaris-form-suffix-action]\"\n    ngProjectAs=\"[solaris-form-suffix-action]\"\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  @if (prefix(); as iconName) {\n    <span solaris-form-prefix>\n      <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n    </span>\n  }\n  @if (suffix(); as suffixName) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffixName\" [decorative]=\"true\" />\n    </span>\n  }\n\n  <div\n    #triggerEl\n    class=\"solaris-multi-select__trigger\"\n    [id]=\"elementId() + '--trigger'\"\n    [style.min-width.px]=\"contentMinWidth() || null\"\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() && !loading()) {\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      @if (!loading()) {\n        <solaris-icon\n          class=\"solaris-multi-select__dropdown-icon\"\n          name=\"chevron-down\"\n          [decorative]=\"true\"\n          size=\"sm\"\n        />\n      }\n    </span>\n  </div>\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",
+			template: "<solaris-form-field\n  [control]=\"this\"\n  [label]=\"labelText()\"\n  [hint]=\"hintText()\"\n  [error]=\"errorText()\"\n  [appearance]=\"appearance()\"\n  [density]=\"effectiveDensity()\"\n  [size]=\"size()\"\n  [radius]=\"radius()\"\n  [invalid]=\"isEffectivelyInvalid()\"\n  [required]=\"requiredInput()\"\n  [loading]=\"loading()\"\n  [hasPrefix]=\"!!prefix()\"\n  [hasSuffixAction]=\"!!projectedSuffixAction()\"\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]=\"effectivePanelMinWidth()\"\n  [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n  [solarisPopoverScrollStrategy]=\"'reposition'\"\n  [solarisPopoverCloseOnEscape]=\"false\"\n  [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n  <ng-content\n    select=\"[solaris-form-prefix]\"\n    ngProjectAs=\"[solaris-form-prefix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix-action]\"\n    ngProjectAs=\"[solaris-form-suffix-action]\"\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  @if (prefix(); as iconName) {\n    <span solaris-form-prefix>\n      <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n    </span>\n  }\n  @if (suffix(); as suffixName) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffixName\" [decorative]=\"true\" />\n    </span>\n  }\n\n  <div\n    #triggerEl\n    class=\"solaris-multi-select__trigger\"\n    [id]=\"elementId() + '--trigger'\"\n    [style.min-width.px]=\"contentMinWidth() || null\"\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() && !loading()) {\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      @if (!loading()) {\n        <solaris-icon\n          class=\"solaris-multi-select__dropdown-icon\"\n          name=\"chevron-down\"\n          [decorative]=\"true\"\n          size=\"sm\"\n        />\n      }\n    </span>\n  </div>\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-on-primary: var(--solaris-primary-on-solid);--solaris-surface-hover: var(--solaris-neutral-subtle);--solaris-primary-muted: var(--solaris-primary-soft);--solaris-multi-select-chip-gap: var(--solaris-spacing-5);--solaris-multi-select-chip-radius: var(--solaris-radius-sm);--solaris-multi-select-icon-color: var(--solaris-neutral-text-secondary);--solaris-multi-select-font-size: var(--solaris-font-size-sm);--solaris-multi-select-chip-color: var(--solaris-neutral-text-body);--solaris-multi-select-checkbox-size: var(--solaris-spacing-8);--solaris-multi-select-value-color: var(--solaris-neutral-text-body);--solaris-multi-select-chip-padding-y: var(--solaris-spacing-1);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-2);--solaris-multi-select-checkbox-radius: var(--solaris-radius-sm);--solaris-multi-select-line-height: var(--solaris-line-height-md);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-select-all-height: var(--solaris-spacing-9);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-6);--solaris-multi-select-placeholder-color: var( --solaris-neutral-text-secondary );--solaris-multi-select-chip-remove-size: var(--solaris-font-size-sm);--solaris-multi-select-chip-background: var(--solaris-neutral-subtle);--solaris-multi-select-placeholder-opacity: var(--solaris-opacity-70);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1);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-4)}:host ::ng-deep .solaris-form-field__message-row{margin-top:0}:host ::ng-deep solaris-form-field[data-loading] .solaris-multi-select__trigger{padding-inline-end:var(--solaris-form-field-affix-size)}: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-3)}.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);opacity:var(--solaris-multi-select-placeholder-opacity)}.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-neutral-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-3);margin-inline-start:auto}.solaris-multi-select__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.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-lg);height:var(--solaris-font-size-lg);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-neutral-text-body)}.solaris-multi-select__dropdown-icon solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-multi-select__dropdown-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);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;animation:solaris-motion-overlay-enter-top var(--solaris-motion-duration-normal) var(--solaris-motion-easing-decelerate) both}.solaris-multi-select__search-input{flex:1;margin:0;padding:0;width: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);opacity:var(--solaris-multi-select-placeholder-opacity)}.solaris-multi-select__loading,.solaris-multi-select__no-results,.solaris-multi-select__empty{display:flex;align-items:center;justify-content:center;color:var(--solaris-neutral-text-secondary);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;box-sizing:border-box;justify-content:center;width:var(--solaris-multi-select-checkbox-size);height:var(--solaris-multi-select-checkbox-size);border-radius:var(--solaris-multi-select-checkbox-radius);background:var(--solaris-neutral-default);border:var(--solaris-multi-select-checkbox-border-width) solid var(--solaris-primary-border)}.solaris-multi-select__select-all-checkbox--checked{background:var(--solaris-primary-solid);border-color:var(--solaris-primary-solid)}.solaris-multi-select__select-all-checkbox--partial{background:var(--solaris-primary-muted);border-color:var(--solaris-primary-solid)}.solaris-multi-select__select-all-checkbox-icon{display:flex;align-items:center;box-sizing:border-box;justify-content:center;color:var(--solaris-on-primary);width:var(--solaris-multi-select-checkbox-icon-size);height:var(--solaris-multi-select-checkbox-icon-size);font-size:var(--solaris-multi-select-checkbox-icon-size)}.solaris-multi-select__select-all-checkbox-icon solaris-icon{width:1em;height:1em}.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-size=sm][data-density=compact]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-1);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-2);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-checkbox-size: var(--solaris-spacing-7);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-5);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=md][data-density=compact]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-1);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-3);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-checkbox-size: calc( var(--solaris-spacing-7) + var(--solaris-spacing-2) );--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-6);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=lg][data-density=compact]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-2);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-4);--solaris-multi-select-chip-font-size: var(--solaris-font-size-sm);--solaris-multi-select-checkbox-size: var(--solaris-spacing-8);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-7);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-2)}:host([data-size=sm][data-density=normal]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-1);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-3);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-checkbox-size: var(--solaris-spacing-7);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-5);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=md][data-density=normal]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-2);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-4);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-checkbox-size: var(--solaris-spacing-8);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-6);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=lg][data-density=normal]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-3);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-5);--solaris-multi-select-chip-font-size: var(--solaris-font-size-sm);--solaris-multi-select-checkbox-size: calc( var(--solaris-spacing-8) + var(--solaris-spacing-2) );--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-7);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-2)}:host([data-size=sm][data-density=comfortable]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-2);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-4);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-checkbox-size: calc( var(--solaris-spacing-7) + var(--solaris-spacing-2) );--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-5);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=md][data-density=comfortable]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-3);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-5);--solaris-multi-select-chip-font-size: var(--solaris-font-size-sm);--solaris-multi-select-checkbox-size: calc( var(--solaris-spacing-8) + var(--solaris-spacing-2) );--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-6);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=lg][data-density=comfortable]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-4);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-6);--solaris-multi-select-chip-font-size: var(--solaris-font-size-sm);--solaris-multi-select-checkbox-size: var(--solaris-spacing-9);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-7);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-2)}: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}.solaris-multi-select__panel{animation:none}}[data-reduced-motion=true] .solaris-multi-select__dropdown-icon,[data-reduced-motion=true] .solaris-multi-select__clear{transition:none}[data-reduced-motion=true] .solaris-multi-select__panel{animation:none}\n"]
 		}]
 	}],
@@ -47125,7 +47288,7 @@ var SolarisDatePickerComponent = class SolarisDatePickerComponent extends Solari
 		}],
 		usesInheritance: true,
 		ngImport: i0,
-		template: "<solaris-form-field\n  [control]=\"this\"\n  [radius]=\"radius()\"\n  [hint]=\"hintText()\"\n  [label]=\"labelText()\"\n  [error]=\"errorText()\"\n  solaris-popover-trigger\n  [appearance]=\"appearance()\"\n  [required]=\"requiredInput()\"\n  [density]=\"effectiveDensity()\"\n  [size]=\"size()\"\n  [solarisPopoverPadding]=\"'md'\"\n  [solarisPopoverAlign]=\"'start'\"\n  [solarisPopoverRadius]=\"radius()\"\n  [invalid]=\"isEffectivelyInvalid()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [readonly]=\"isEffectivelyReadonly()\"\n  [loading]=\"loading()\"\n  [hasSuffixAction]=\"!!projectedSuffixAction()\"\n  [solarisPopoverPlacement]=\"'bottom'\"\n  [solarisPopoverAriaHasPopup]=\"'dialog'\"\n  (solarisPopoverOpened)=\"onPanelOpened()\"\n  (solarisPopoverClosed)=\"onPanelClosed()\"\n  [solarisPopoverTriggerFor]=\"calendarPopover\"\n  [solarisPopoverDisabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n>\n  <ng-content\n    select=\"[solaris-form-prefix]\"\n    ngProjectAs=\"[solaris-form-prefix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix][solaris-form-suffix-action]\"\n    ngProjectAs=\"[solaris-form-suffix-action]\"\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  @if (prefix(); as prefixName) {\n    <span solaris-form-prefix>\n      <solaris-icon [name]=\"prefixName\" [decorative]=\"true\" />\n    </span>\n  }\n  <input\n    [id]=\"id\"\n    type=\"text\"\n    #inputElement\n    solaris-input\n    autocomplete=\"off\"\n    inputmode=\"numeric\"\n    [density]=\"effectiveDensity()\"\n    [size]=\"size()\"\n    (blur)=\"onInputBlur()\"\n    [value]=\"displayValue()\"\n    (focus)=\"onInputFocus()\"\n    (input)=\"onInput($event)\"\n    (keydown)=\"onInputKeydown($event)\"\n    (click)=\"$event.stopPropagation()\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [readonly]=\"isEffectivelyReadonly()\"\n    [attr.placeholder]=\"placeholderText()\"\n    [attr.aria-describedby]=\"describedByIds.join(' ') || null\"\n  />\n\n  <button\n    type=\"button\"\n    appearance=\"ghost\"\n    solaris-icon-button\n    solaris-form-suffix\n    solaris-form-suffix-action\n    class=\"solaris-date-picker__calendar-trigger\"\n    [size]=\"size()\"\n    [density]=\"effectiveDensity()\"\n    [attr.aria-label]=\"calendarButtonLabelText()\"\n    [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n  >\n    <solaris-icon name=\"calendar\" [decorative]=\"true\" />\n  </button>\n  @if (canClear() && !loading()) {\n    <button\n      type=\"button\"\n      solaris-form-suffix\n      class=\"solaris-date-picker__clear\"\n      [attr.aria-label]=\"clearAriaLabel()\"\n      [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n      (click)=\"clearValue(); $event.stopPropagation()\"\n      tabindex=\"-1\"\n    >\n      <solaris-icon name=\"x\" [decorative]=\"true\" />\n    </button>\n  }\n  @if (suffix(); as suffixName) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffixName\" [decorative]=\"true\" />\n    </span>\n  }\n</solaris-form-field>\n\n<ng-template #calendarPopover=\"solarisPopover\" solaris-popover>\n  <div\n    role=\"dialog\"\n    class=\"solaris-date-picker__panel\"\n    [attr.aria-label]=\"calendarButtonLabelText()\"\n  >\n    <solaris-date-calendar\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [selected]=\"value()\"\n      [month]=\"displayedMonth()\"\n      [locale]=\"resolvedLocale()\"\n      [disabledDates]=\"disabledDates()\"\n      [weekStartsOn]=\"weekStartsOn()\"\n      [disablePast]=\"disablePast()\"\n      [disableFuture]=\"disableFuture()\"\n      [nextMonthLabel]=\"nextMonthLabel()\"\n      (selectedChange)=\"selectDate($event)\"\n      (monthChange)=\"setDisplayedMonth($event)\"\n      [previousMonthLabel]=\"previousMonthLabel()\"\n    />\n  </div>\n</ng-template>\n",
+		template: "<solaris-form-field\n  [control]=\"this\"\n  [radius]=\"radius()\"\n  [hint]=\"hintText()\"\n  [label]=\"labelText()\"\n  [error]=\"errorText()\"\n  solaris-popover-trigger\n  [appearance]=\"appearance()\"\n  [required]=\"requiredInput()\"\n  [density]=\"effectiveDensity()\"\n  [size]=\"size()\"\n  [solarisPopoverPadding]=\"'md'\"\n  [solarisPopoverAlign]=\"'start'\"\n  [solarisPopoverRadius]=\"radius()\"\n  [invalid]=\"isEffectivelyInvalid()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [readonly]=\"isEffectivelyReadonly()\"\n  [loading]=\"loading()\"\n  [hasSuffixAction]=\"!!projectedSuffixAction()\"\n  [solarisPopoverPlacement]=\"'bottom'\"\n  [solarisPopoverAriaHasPopup]=\"'dialog'\"\n  (solarisPopoverOpened)=\"onPanelOpened()\"\n  (solarisPopoverClosed)=\"onPanelClosed()\"\n  [solarisPopoverTriggerFor]=\"calendarPopover\"\n  [solarisPopoverDisabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n>\n  <ng-content\n    select=\"[solaris-form-prefix]\"\n    ngProjectAs=\"[solaris-form-prefix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix-action]\"\n    ngProjectAs=\"[solaris-form-suffix-action]\"\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  @if (prefix(); as prefixName) {\n    <span solaris-form-prefix>\n      <solaris-icon [name]=\"prefixName\" [decorative]=\"true\" />\n    </span>\n  }\n  <input\n    [id]=\"id\"\n    type=\"text\"\n    #inputElement\n    solaris-input\n    autocomplete=\"off\"\n    inputmode=\"numeric\"\n    [density]=\"effectiveDensity()\"\n    [size]=\"size()\"\n    (blur)=\"onInputBlur()\"\n    [value]=\"displayValue()\"\n    (focus)=\"onInputFocus()\"\n    (input)=\"onInput($event)\"\n    (keydown)=\"onInputKeydown($event)\"\n    (click)=\"$event.stopPropagation()\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [readonly]=\"isEffectivelyReadonly()\"\n    [attr.placeholder]=\"placeholderText()\"\n    [attr.aria-describedby]=\"describedByIds.join(' ') || null\"\n  />\n\n  <button\n    type=\"button\"\n    appearance=\"ghost\"\n    solaris-icon-button\n    solaris-form-suffix\n    solaris-form-suffix-action\n    class=\"solaris-date-picker__calendar-trigger\"\n    [size]=\"size()\"\n    [density]=\"effectiveDensity()\"\n    [attr.aria-label]=\"calendarButtonLabelText()\"\n    [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n  >\n    <solaris-icon name=\"calendar\" [decorative]=\"true\" />\n  </button>\n  @if (canClear() && !loading()) {\n    <button\n      type=\"button\"\n      solaris-form-suffix\n      class=\"solaris-date-picker__clear\"\n      [attr.aria-label]=\"clearAriaLabel()\"\n      [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n      (click)=\"clearValue(); $event.stopPropagation()\"\n      tabindex=\"-1\"\n    >\n      <solaris-icon name=\"x\" [decorative]=\"true\" />\n    </button>\n  }\n  @if (suffix(); as suffixName) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffixName\" [decorative]=\"true\" />\n    </span>\n  }\n</solaris-form-field>\n\n<ng-template #calendarPopover=\"solarisPopover\" solaris-popover>\n  <div\n    role=\"dialog\"\n    class=\"solaris-date-picker__panel\"\n    [attr.aria-label]=\"calendarButtonLabelText()\"\n  >\n    <solaris-date-calendar\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [selected]=\"value()\"\n      [month]=\"displayedMonth()\"\n      [locale]=\"resolvedLocale()\"\n      [disabledDates]=\"disabledDates()\"\n      [weekStartsOn]=\"weekStartsOn()\"\n      [disablePast]=\"disablePast()\"\n      [disableFuture]=\"disableFuture()\"\n      [nextMonthLabel]=\"nextMonthLabel()\"\n      (selectedChange)=\"selectDate($event)\"\n      (monthChange)=\"setDisplayedMonth($event)\"\n      [previousMonthLabel]=\"previousMonthLabel()\"\n    />\n  </div>\n</ng-template>\n",
 		styles: [":host{display:block}.solaris-date-picker__panel{width:calc(var(--solaris-spacing-17) * 2 + var(--solaris-spacing-16));animation:solaris-motion-overlay-enter-top var(--solaris-motion-duration-normal) var(--solaris-motion-easing-decelerate) both}[solaris-button].solaris-date-picker__calendar-trigger,.solaris-date-picker__calendar-trigger{color:var(--solaris-neutral-text-secondary)!important;background:transparent!important;cursor:pointer}[solaris-button].solaris-date-picker__calendar-trigger:hover,[solaris-button].solaris-date-picker__calendar-trigger:active,.solaris-date-picker__calendar-trigger:hover,.solaris-date-picker__calendar-trigger:active{color:var(--solaris-neutral-text-heading)!important;background:transparent!important}.solaris-date-picker__calendar-trigger solaris-icon{cursor:pointer}.solaris-date-picker__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-date-picker__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-lg);height:var(--solaris-font-size-lg);color:var(--solaris-neutral-text-secondary);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-date-picker__clear:hover{color:var(--solaris-neutral-text-heading)}@media(prefers-reduced-motion:reduce){.solaris-date-picker__panel{animation:none}.solaris-date-picker__clear{transition:none}}[data-reduced-motion=true] .solaris-date-picker__panel{animation:none}[data-reduced-motion=true] .solaris-date-picker__clear{transition:none}\n"],
 		dependencies: [
 			{
@@ -47328,7 +47491,7 @@ i0.ɵɵngDeclareClassMetadata({
 				"[attr.data-density]": "effectiveDensity()",
 				"[attr.data-open]": "panelOpen() ? \"\" : null"
 			},
-			template: "<solaris-form-field\n  [control]=\"this\"\n  [radius]=\"radius()\"\n  [hint]=\"hintText()\"\n  [label]=\"labelText()\"\n  [error]=\"errorText()\"\n  solaris-popover-trigger\n  [appearance]=\"appearance()\"\n  [required]=\"requiredInput()\"\n  [density]=\"effectiveDensity()\"\n  [size]=\"size()\"\n  [solarisPopoverPadding]=\"'md'\"\n  [solarisPopoverAlign]=\"'start'\"\n  [solarisPopoverRadius]=\"radius()\"\n  [invalid]=\"isEffectivelyInvalid()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [readonly]=\"isEffectivelyReadonly()\"\n  [loading]=\"loading()\"\n  [hasSuffixAction]=\"!!projectedSuffixAction()\"\n  [solarisPopoverPlacement]=\"'bottom'\"\n  [solarisPopoverAriaHasPopup]=\"'dialog'\"\n  (solarisPopoverOpened)=\"onPanelOpened()\"\n  (solarisPopoverClosed)=\"onPanelClosed()\"\n  [solarisPopoverTriggerFor]=\"calendarPopover\"\n  [solarisPopoverDisabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n>\n  <ng-content\n    select=\"[solaris-form-prefix]\"\n    ngProjectAs=\"[solaris-form-prefix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix][solaris-form-suffix-action]\"\n    ngProjectAs=\"[solaris-form-suffix-action]\"\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  @if (prefix(); as prefixName) {\n    <span solaris-form-prefix>\n      <solaris-icon [name]=\"prefixName\" [decorative]=\"true\" />\n    </span>\n  }\n  <input\n    [id]=\"id\"\n    type=\"text\"\n    #inputElement\n    solaris-input\n    autocomplete=\"off\"\n    inputmode=\"numeric\"\n    [density]=\"effectiveDensity()\"\n    [size]=\"size()\"\n    (blur)=\"onInputBlur()\"\n    [value]=\"displayValue()\"\n    (focus)=\"onInputFocus()\"\n    (input)=\"onInput($event)\"\n    (keydown)=\"onInputKeydown($event)\"\n    (click)=\"$event.stopPropagation()\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [readonly]=\"isEffectivelyReadonly()\"\n    [attr.placeholder]=\"placeholderText()\"\n    [attr.aria-describedby]=\"describedByIds.join(' ') || null\"\n  />\n\n  <button\n    type=\"button\"\n    appearance=\"ghost\"\n    solaris-icon-button\n    solaris-form-suffix\n    solaris-form-suffix-action\n    class=\"solaris-date-picker__calendar-trigger\"\n    [size]=\"size()\"\n    [density]=\"effectiveDensity()\"\n    [attr.aria-label]=\"calendarButtonLabelText()\"\n    [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n  >\n    <solaris-icon name=\"calendar\" [decorative]=\"true\" />\n  </button>\n  @if (canClear() && !loading()) {\n    <button\n      type=\"button\"\n      solaris-form-suffix\n      class=\"solaris-date-picker__clear\"\n      [attr.aria-label]=\"clearAriaLabel()\"\n      [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n      (click)=\"clearValue(); $event.stopPropagation()\"\n      tabindex=\"-1\"\n    >\n      <solaris-icon name=\"x\" [decorative]=\"true\" />\n    </button>\n  }\n  @if (suffix(); as suffixName) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffixName\" [decorative]=\"true\" />\n    </span>\n  }\n</solaris-form-field>\n\n<ng-template #calendarPopover=\"solarisPopover\" solaris-popover>\n  <div\n    role=\"dialog\"\n    class=\"solaris-date-picker__panel\"\n    [attr.aria-label]=\"calendarButtonLabelText()\"\n  >\n    <solaris-date-calendar\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [selected]=\"value()\"\n      [month]=\"displayedMonth()\"\n      [locale]=\"resolvedLocale()\"\n      [disabledDates]=\"disabledDates()\"\n      [weekStartsOn]=\"weekStartsOn()\"\n      [disablePast]=\"disablePast()\"\n      [disableFuture]=\"disableFuture()\"\n      [nextMonthLabel]=\"nextMonthLabel()\"\n      (selectedChange)=\"selectDate($event)\"\n      (monthChange)=\"setDisplayedMonth($event)\"\n      [previousMonthLabel]=\"previousMonthLabel()\"\n    />\n  </div>\n</ng-template>\n",
+			template: "<solaris-form-field\n  [control]=\"this\"\n  [radius]=\"radius()\"\n  [hint]=\"hintText()\"\n  [label]=\"labelText()\"\n  [error]=\"errorText()\"\n  solaris-popover-trigger\n  [appearance]=\"appearance()\"\n  [required]=\"requiredInput()\"\n  [density]=\"effectiveDensity()\"\n  [size]=\"size()\"\n  [solarisPopoverPadding]=\"'md'\"\n  [solarisPopoverAlign]=\"'start'\"\n  [solarisPopoverRadius]=\"radius()\"\n  [invalid]=\"isEffectivelyInvalid()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [readonly]=\"isEffectivelyReadonly()\"\n  [loading]=\"loading()\"\n  [hasSuffixAction]=\"!!projectedSuffixAction()\"\n  [solarisPopoverPlacement]=\"'bottom'\"\n  [solarisPopoverAriaHasPopup]=\"'dialog'\"\n  (solarisPopoverOpened)=\"onPanelOpened()\"\n  (solarisPopoverClosed)=\"onPanelClosed()\"\n  [solarisPopoverTriggerFor]=\"calendarPopover\"\n  [solarisPopoverDisabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n>\n  <ng-content\n    select=\"[solaris-form-prefix]\"\n    ngProjectAs=\"[solaris-form-prefix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix-action]\"\n    ngProjectAs=\"[solaris-form-suffix-action]\"\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  @if (prefix(); as prefixName) {\n    <span solaris-form-prefix>\n      <solaris-icon [name]=\"prefixName\" [decorative]=\"true\" />\n    </span>\n  }\n  <input\n    [id]=\"id\"\n    type=\"text\"\n    #inputElement\n    solaris-input\n    autocomplete=\"off\"\n    inputmode=\"numeric\"\n    [density]=\"effectiveDensity()\"\n    [size]=\"size()\"\n    (blur)=\"onInputBlur()\"\n    [value]=\"displayValue()\"\n    (focus)=\"onInputFocus()\"\n    (input)=\"onInput($event)\"\n    (keydown)=\"onInputKeydown($event)\"\n    (click)=\"$event.stopPropagation()\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [readonly]=\"isEffectivelyReadonly()\"\n    [attr.placeholder]=\"placeholderText()\"\n    [attr.aria-describedby]=\"describedByIds.join(' ') || null\"\n  />\n\n  <button\n    type=\"button\"\n    appearance=\"ghost\"\n    solaris-icon-button\n    solaris-form-suffix\n    solaris-form-suffix-action\n    class=\"solaris-date-picker__calendar-trigger\"\n    [size]=\"size()\"\n    [density]=\"effectiveDensity()\"\n    [attr.aria-label]=\"calendarButtonLabelText()\"\n    [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n  >\n    <solaris-icon name=\"calendar\" [decorative]=\"true\" />\n  </button>\n  @if (canClear() && !loading()) {\n    <button\n      type=\"button\"\n      solaris-form-suffix\n      class=\"solaris-date-picker__clear\"\n      [attr.aria-label]=\"clearAriaLabel()\"\n      [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n      (click)=\"clearValue(); $event.stopPropagation()\"\n      tabindex=\"-1\"\n    >\n      <solaris-icon name=\"x\" [decorative]=\"true\" />\n    </button>\n  }\n  @if (suffix(); as suffixName) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffixName\" [decorative]=\"true\" />\n    </span>\n  }\n</solaris-form-field>\n\n<ng-template #calendarPopover=\"solarisPopover\" solaris-popover>\n  <div\n    role=\"dialog\"\n    class=\"solaris-date-picker__panel\"\n    [attr.aria-label]=\"calendarButtonLabelText()\"\n  >\n    <solaris-date-calendar\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [selected]=\"value()\"\n      [month]=\"displayedMonth()\"\n      [locale]=\"resolvedLocale()\"\n      [disabledDates]=\"disabledDates()\"\n      [weekStartsOn]=\"weekStartsOn()\"\n      [disablePast]=\"disablePast()\"\n      [disableFuture]=\"disableFuture()\"\n      [nextMonthLabel]=\"nextMonthLabel()\"\n      (selectedChange)=\"selectDate($event)\"\n      (monthChange)=\"setDisplayedMonth($event)\"\n      [previousMonthLabel]=\"previousMonthLabel()\"\n    />\n  </div>\n</ng-template>\n",
 			styles: [":host{display:block}.solaris-date-picker__panel{width:calc(var(--solaris-spacing-17) * 2 + var(--solaris-spacing-16));animation:solaris-motion-overlay-enter-top var(--solaris-motion-duration-normal) var(--solaris-motion-easing-decelerate) both}[solaris-button].solaris-date-picker__calendar-trigger,.solaris-date-picker__calendar-trigger{color:var(--solaris-neutral-text-secondary)!important;background:transparent!important;cursor:pointer}[solaris-button].solaris-date-picker__calendar-trigger:hover,[solaris-button].solaris-date-picker__calendar-trigger:active,.solaris-date-picker__calendar-trigger:hover,.solaris-date-picker__calendar-trigger:active{color:var(--solaris-neutral-text-heading)!important;background:transparent!important}.solaris-date-picker__calendar-trigger solaris-icon{cursor:pointer}.solaris-date-picker__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-date-picker__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-lg);height:var(--solaris-font-size-lg);color:var(--solaris-neutral-text-secondary);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-date-picker__clear:hover{color:var(--solaris-neutral-text-heading)}@media(prefers-reduced-motion:reduce){.solaris-date-picker__panel{animation:none}.solaris-date-picker__clear{transition:none}}[data-reduced-motion=true] .solaris-date-picker__panel{animation:none}[data-reduced-motion=true] .solaris-date-picker__clear{transition:none}\n"]
 		}]
 	}],
@@ -50572,7 +50735,7 @@ var SolarisPasswordFieldComponent = class SolarisPasswordFieldComponent extends
 		}],
 		usesInheritance: true,
 		ngImport: i0,
-		template: "<solaris-form-field\n  [control]=\"this\"\n  [hint]=\"hint()\"\n  [label]=\"label()\"\n  [radius]=\"radius()\"\n  [density]=\"effectiveDensity()\"\n  [size]=\"size()\"\n  [hintKey]=\"hintKey()\"\n  [labelKey]=\"labelKey()\"\n  [errorKey]=\"errorKey()\"\n  [required]=\"requiredInput()\"\n  [optional]=\"optional()\"\n  [readonly]=\"readonlyInput()\"\n  [appearance]=\"appearance()\"\n  [invalid]=\"isFieldInvalid()\"\n  [error]=\"error() || computedError()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [loading]=\"loading()\"\n  [hasPrefix]=\"hasPrefix()\"\n  [hasSuffix]=\"hasSuffix()\"\n  [hasSuffixAction]=\"!!projectedSuffixAction()\"\n>\n  <ng-content\n    select=\"[solaris-form-prefix]\"\n    ngProjectAs=\"[solaris-form-prefix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix][solaris-form-suffix-action]\"\n    ngProjectAs=\"[solaris-form-suffix-action]\"\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  @if (prefix() && !projectedPrefix()) {\n    <span solaris-form-prefix>\n      <solaris-icon [name]=\"prefix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n  <input\n    #inputElement\n    solaris-input\n    [type]=\"inputType()\"\n    [density]=\"effectiveDensity()\"\n    [size]=\"size()\"\n    (blur)=\"onInputBlur()\"\n    [readonly]=\"readonlyInput()\"\n    [attr.id]=\"fieldId() ?? null\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    (focus)=\"onInputFocus()\"\n    [value]=\"internalValue()\"\n    (input)=\"onInput($event)\"\n    [attr.name]=\"name() ?? null\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [attr.autocomplete]=\"autocomplete() ?? null\"\n    [attr.placeholder]=\"placeholderText() || null\"\n    [attr.maxlength]=\"maxLength() ?? null\"\n  />\n  @if (suffix() && !projectedSuffix()) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n  @if (showToggle()) {\n    <button\n      type=\"button\"\n      solaris-form-suffix\n      solaris-form-suffix-action\n      (click)=\"toggleVisibility()\"\n      [attr.aria-label]=\"toggleLabel()\"\n      [disabled]=\"isEffectivelyDisabled()\"\n      class=\"solaris-password-field__toggle\"\n    >\n      <solaris-icon\n        [decorative]=\"true\"\n        [name]=\"_visibleState() ? 'eye-off' : 'eye'\"\n      />\n    </button>\n  }\n</solaris-form-field>\n\n@if (showRequirements() && effectivePolicy()) {\n  <div class=\"solaris-password-field__requirements\" role=\"list\">\n    @for (req of requirementList(); track req.key) {\n      <div\n        class=\"solaris-password-field__requirement\"\n        role=\"listitem\"\n        [attr.data-met]=\"req.met\"\n      >\n        <solaris-icon\n          class=\"solaris-password-field__requirement-icon\"\n          [name]=\"req.met ? 'check' : 'x'\"\n          [decorative]=\"true\"\n        />\n        <span class=\"solaris-password-field__requirement-label\">\n          {{ req.label }}\n        </span>\n      </div>\n    }\n  </div>\n}\n\n@if (showStrength() && internalValue().length > 0) {\n  <div\n    class=\"solaris-password-field__strength\"\n    [attr.data-level]=\"strengthLevel()\"\n    role=\"status\"\n    aria-live=\"polite\"\n  >\n    <div class=\"solaris-password-field__strength-bar\">\n      <div\n        class=\"solaris-password-field__strength-segment\"\n        [attr.data-active]=\"strengthLevel() !== 'empty'\"\n      ></div>\n      <div\n        class=\"solaris-password-field__strength-segment\"\n        [attr.data-active]=\"\n          strengthLevel() === 'medium' || strengthLevel() === 'strong'\n        \"\n      ></div>\n      <div\n        class=\"solaris-password-field__strength-segment\"\n        [attr.data-active]=\"strengthLevel() === 'strong'\"\n      ></div>\n    </div>\n    <span class=\"solaris-password-field__strength-label\">\n      {{ strengthLabelText() }}\n    </span>\n  </div>\n}\n",
+		template: "<solaris-form-field\n  [control]=\"this\"\n  [hint]=\"hint()\"\n  [label]=\"label()\"\n  [radius]=\"radius()\"\n  [density]=\"effectiveDensity()\"\n  [size]=\"size()\"\n  [hintKey]=\"hintKey()\"\n  [labelKey]=\"labelKey()\"\n  [errorKey]=\"errorKey()\"\n  [required]=\"requiredInput()\"\n  [optional]=\"optional()\"\n  [readonly]=\"readonlyInput()\"\n  [appearance]=\"appearance()\"\n  [invalid]=\"isFieldInvalid()\"\n  [error]=\"error() || computedError()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [loading]=\"loading()\"\n  [hasPrefix]=\"hasPrefix()\"\n  [hasSuffix]=\"hasSuffix()\"\n  [hasSuffixAction]=\"!!projectedSuffixAction()\"\n>\n  <ng-content\n    select=\"[solaris-form-prefix]\"\n    ngProjectAs=\"[solaris-form-prefix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix-action]\"\n    ngProjectAs=\"[solaris-form-suffix-action]\"\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  @if (prefix() && !projectedPrefix()) {\n    <span solaris-form-prefix>\n      <solaris-icon [name]=\"prefix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n  <input\n    #inputElement\n    solaris-input\n    [type]=\"inputType()\"\n    [density]=\"effectiveDensity()\"\n    [size]=\"size()\"\n    (blur)=\"onInputBlur()\"\n    [readonly]=\"readonlyInput()\"\n    [attr.id]=\"fieldId() ?? null\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    (focus)=\"onInputFocus()\"\n    [value]=\"internalValue()\"\n    (input)=\"onInput($event)\"\n    [attr.name]=\"name() ?? null\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [attr.autocomplete]=\"autocomplete() ?? null\"\n    [attr.placeholder]=\"placeholderText() || null\"\n    [attr.maxlength]=\"maxLength() ?? null\"\n  />\n  @if (suffix() && !projectedSuffix()) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n  @if (showToggle()) {\n    <button\n      type=\"button\"\n      solaris-form-suffix\n      solaris-form-suffix-action\n      (click)=\"toggleVisibility()\"\n      [attr.aria-label]=\"toggleLabel()\"\n      [disabled]=\"isEffectivelyDisabled()\"\n      class=\"solaris-password-field__toggle\"\n    >\n      <solaris-icon\n        [decorative]=\"true\"\n        [name]=\"_visibleState() ? 'eye-off' : 'eye'\"\n      />\n    </button>\n  }\n</solaris-form-field>\n\n@if (showRequirements() && effectivePolicy()) {\n  <div class=\"solaris-password-field__requirements\" role=\"list\">\n    @for (req of requirementList(); track req.key) {\n      <div\n        class=\"solaris-password-field__requirement\"\n        role=\"listitem\"\n        [attr.data-met]=\"req.met\"\n      >\n        <solaris-icon\n          class=\"solaris-password-field__requirement-icon\"\n          [name]=\"req.met ? 'check' : 'x'\"\n          [decorative]=\"true\"\n        />\n        <span class=\"solaris-password-field__requirement-label\">\n          {{ req.label }}\n        </span>\n      </div>\n    }\n  </div>\n}\n\n@if (showStrength() && internalValue().length > 0) {\n  <div\n    class=\"solaris-password-field__strength\"\n    [attr.data-level]=\"strengthLevel()\"\n    role=\"status\"\n    aria-live=\"polite\"\n  >\n    <div class=\"solaris-password-field__strength-bar\">\n      <div\n        class=\"solaris-password-field__strength-segment\"\n        [attr.data-active]=\"strengthLevel() !== 'empty'\"\n      ></div>\n      <div\n        class=\"solaris-password-field__strength-segment\"\n        [attr.data-active]=\"\n          strengthLevel() === 'medium' || strengthLevel() === 'strong'\n        \"\n      ></div>\n      <div\n        class=\"solaris-password-field__strength-segment\"\n        [attr.data-active]=\"strengthLevel() === 'strong'\"\n      ></div>\n    </div>\n    <span class=\"solaris-password-field__strength-label\">\n      {{ strengthLabelText() }}\n    </span>\n  </div>\n}\n",
 		styles: [":host{--solaris-password-field-strength-height: var(--solaris-spacing-3);--solaris-password-field-strength-gap: var(--solaris-spacing-2);--solaris-password-field-requirement-gap: var(--solaris-spacing-1);--solaris-password-field-strength-radius: var(--solaris-radius-sm);--solaris-password-field-requirement-color: var( --solaris-neutral-text-secondary );--solaris-password-field-strength-bar-bg: var(--solaris-neutral-sunken);--solaris-password-field-strength-weak-color: var( --solaris-danger-foreground );--solaris-password-field-requirement-met-color: var( --solaris-success-foreground );--solaris-password-field-strength-medium-color: var( --solaris-warning-foreground );--solaris-password-field-strength-strong-color: var( --solaris-success-foreground );--solaris-password-field-requirement-unmet-color: var( --solaris-danger-foreground );display:block;box-sizing:border-box}:host(:not([data-full-width])){display:inline-block;width:auto}.solaris-password-field__toggle:disabled{cursor:not-allowed;pointer-events:none;opacity:var(--solaris-opacity-50)}.solaris-password-field__toggle{margin:0;padding:0;padding-inline:var(--solaris-density-padding-sm);border:none;font:inherit;line-height:var(--solaris-line-height-none);cursor:pointer;appearance:none;background:none;color:var(--solaris-neutral-text-secondary);box-shadow:none;align-items:center;justify-content:center;-webkit-appearance:none}.solaris-password-field__toggle:hover,.solaris-password-field__toggle:active{color:var(--solaris-neutral-text-heading)}.solaris-form-suffix solaris-icon{cursor:pointer;width:1em;height:1em;transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-password-field__toggle solaris-icon{width:1em;height:1em}:host([data-size=sm][data-density=compact]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-sm)}:host([data-size=sm][data-density=normal]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-md)}:host([data-size=sm][data-density=comfortable]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-lg)}:host([data-size=md][data-density=compact]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-md)}:host([data-size=md][data-density=normal]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-lg)}:host([data-size=md][data-density=comfortable]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-xl)}:host([data-size=lg][data-density=compact]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-lg)}:host([data-size=lg][data-density=normal]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-xl)}:host([data-size=lg][data-density=comfortable]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-2xl)}.solaris-password-field__requirements{padding:0;display:flex;list-style:none;flex-direction:column;margin-top:var(--solaris-spacing-2);gap:var(--solaris-password-field-requirement-gap)}.solaris-password-field__requirement{display:flex;align-items:center;gap:var(--solaris-spacing-1);font-size:var(--solaris-font-size-sm);color:var(--solaris-password-field-requirement-unmet-color);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-password-field__requirement[data-met=true]{color:var(--solaris-password-field-requirement-met-color)}.solaris-password-field__requirement-icon{width:1em;height:1em;flex-shrink:0}.solaris-password-field__requirement[data-met=true] .solaris-password-field__requirement-icon{color:var(--solaris-password-field-requirement-met-color)}.solaris-password-field__requirement[data-met=false] .solaris-password-field__requirement-icon{color:var(--solaris-password-field-requirement-unmet-color)}.solaris-password-field__strength{display:flex;align-items:center;margin-top:var(--solaris-spacing-1);gap:var(--solaris-password-field-strength-gap)}.solaris-password-field__strength-bar{flex:1;display:flex;gap:var(--solaris-spacing-2);min-width:var(--solaris-spacing-15);height:var(--solaris-password-field-strength-height)}.solaris-password-field__strength-segment{flex:1;height:100%;background:var(--solaris-password-field-strength-bar-bg);border-radius:var(--solaris-password-field-strength-radius);transition:background-color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-password-field__strength[data-level=weak] .solaris-password-field__strength-segment[data-active=true]{background-color:var(--solaris-password-field-strength-weak-color)}.solaris-password-field__strength[data-level=medium] .solaris-password-field__strength-segment[data-active=true]{background-color:var(--solaris-password-field-strength-medium-color)}.solaris-password-field__strength[data-level=strong] .solaris-password-field__strength-segment[data-active=true]{background-color:var(--solaris-password-field-strength-strong-color)}input[type=password]::-ms-reveal,input[type=password]::-ms-clear{display:none}input[type=password]::-webkit-credentials-auto-fill-button,input[type=password]::-webkit-contacts-auto-fill-button{visibility:hidden;pointer-events:none;display:none!important}.solaris-password-field__strength-label{flex-shrink:0;white-space:nowrap;color:var(--solaris-neutral-text-secondary);font-size:var(--solaris-font-size-xs)}@media(prefers-reduced-motion:reduce){.solaris-password-field__requirement,.solaris-password-field__strength-segment{transition:none}}\n"],
 		dependencies: [
 			{
@@ -50627,6 +50790,11 @@ var SolarisPasswordFieldComponent = class SolarisPasswordFieldComponent extends
 					"fullWidth"
 				]
 			},
+			{
+				kind: "directive",
+				type: SolarisFormPrefixDirective,
+				selector: "[solaris-form-prefix]"
+			},
 			{
 				kind: "directive",
 				type: SolarisFormSuffixDirective,
@@ -50670,6 +50838,7 @@ i0.ɵɵngDeclareClassMetadata({
 				FormsModule,
 				SolarisFormFieldComponent,
 				SolarisInputDirective,
+				SolarisFormPrefixDirective,
 				SolarisFormSuffixDirective,
 				SolarisFormSuffixActionDirective,
 				SolarisIconComponent
@@ -50688,7 +50857,7 @@ i0.ɵɵngDeclareClassMetadata({
 				"[attr.data-density]": "effectiveDensity()",
 				"[attr.data-full-width]": "fullWidth() || undefined"
 			},
-			template: "<solaris-form-field\n  [control]=\"this\"\n  [hint]=\"hint()\"\n  [label]=\"label()\"\n  [radius]=\"radius()\"\n  [density]=\"effectiveDensity()\"\n  [size]=\"size()\"\n  [hintKey]=\"hintKey()\"\n  [labelKey]=\"labelKey()\"\n  [errorKey]=\"errorKey()\"\n  [required]=\"requiredInput()\"\n  [optional]=\"optional()\"\n  [readonly]=\"readonlyInput()\"\n  [appearance]=\"appearance()\"\n  [invalid]=\"isFieldInvalid()\"\n  [error]=\"error() || computedError()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [loading]=\"loading()\"\n  [hasPrefix]=\"hasPrefix()\"\n  [hasSuffix]=\"hasSuffix()\"\n  [hasSuffixAction]=\"!!projectedSuffixAction()\"\n>\n  <ng-content\n    select=\"[solaris-form-prefix]\"\n    ngProjectAs=\"[solaris-form-prefix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix][solaris-form-suffix-action]\"\n    ngProjectAs=\"[solaris-form-suffix-action]\"\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  @if (prefix() && !projectedPrefix()) {\n    <span solaris-form-prefix>\n      <solaris-icon [name]=\"prefix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n  <input\n    #inputElement\n    solaris-input\n    [type]=\"inputType()\"\n    [density]=\"effectiveDensity()\"\n    [size]=\"size()\"\n    (blur)=\"onInputBlur()\"\n    [readonly]=\"readonlyInput()\"\n    [attr.id]=\"fieldId() ?? null\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    (focus)=\"onInputFocus()\"\n    [value]=\"internalValue()\"\n    (input)=\"onInput($event)\"\n    [attr.name]=\"name() ?? null\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [attr.autocomplete]=\"autocomplete() ?? null\"\n    [attr.placeholder]=\"placeholderText() || null\"\n    [attr.maxlength]=\"maxLength() ?? null\"\n  />\n  @if (suffix() && !projectedSuffix()) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n  @if (showToggle()) {\n    <button\n      type=\"button\"\n      solaris-form-suffix\n      solaris-form-suffix-action\n      (click)=\"toggleVisibility()\"\n      [attr.aria-label]=\"toggleLabel()\"\n      [disabled]=\"isEffectivelyDisabled()\"\n      class=\"solaris-password-field__toggle\"\n    >\n      <solaris-icon\n        [decorative]=\"true\"\n        [name]=\"_visibleState() ? 'eye-off' : 'eye'\"\n      />\n    </button>\n  }\n</solaris-form-field>\n\n@if (showRequirements() && effectivePolicy()) {\n  <div class=\"solaris-password-field__requirements\" role=\"list\">\n    @for (req of requirementList(); track req.key) {\n      <div\n        class=\"solaris-password-field__requirement\"\n        role=\"listitem\"\n        [attr.data-met]=\"req.met\"\n      >\n        <solaris-icon\n          class=\"solaris-password-field__requirement-icon\"\n          [name]=\"req.met ? 'check' : 'x'\"\n          [decorative]=\"true\"\n        />\n        <span class=\"solaris-password-field__requirement-label\">\n          {{ req.label }}\n        </span>\n      </div>\n    }\n  </div>\n}\n\n@if (showStrength() && internalValue().length > 0) {\n  <div\n    class=\"solaris-password-field__strength\"\n    [attr.data-level]=\"strengthLevel()\"\n    role=\"status\"\n    aria-live=\"polite\"\n  >\n    <div class=\"solaris-password-field__strength-bar\">\n      <div\n        class=\"solaris-password-field__strength-segment\"\n        [attr.data-active]=\"strengthLevel() !== 'empty'\"\n      ></div>\n      <div\n        class=\"solaris-password-field__strength-segment\"\n        [attr.data-active]=\"\n          strengthLevel() === 'medium' || strengthLevel() === 'strong'\n        \"\n      ></div>\n      <div\n        class=\"solaris-password-field__strength-segment\"\n        [attr.data-active]=\"strengthLevel() === 'strong'\"\n      ></div>\n    </div>\n    <span class=\"solaris-password-field__strength-label\">\n      {{ strengthLabelText() }}\n    </span>\n  </div>\n}\n",
+			template: "<solaris-form-field\n  [control]=\"this\"\n  [hint]=\"hint()\"\n  [label]=\"label()\"\n  [radius]=\"radius()\"\n  [density]=\"effectiveDensity()\"\n  [size]=\"size()\"\n  [hintKey]=\"hintKey()\"\n  [labelKey]=\"labelKey()\"\n  [errorKey]=\"errorKey()\"\n  [required]=\"requiredInput()\"\n  [optional]=\"optional()\"\n  [readonly]=\"readonlyInput()\"\n  [appearance]=\"appearance()\"\n  [invalid]=\"isFieldInvalid()\"\n  [error]=\"error() || computedError()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [loading]=\"loading()\"\n  [hasPrefix]=\"hasPrefix()\"\n  [hasSuffix]=\"hasSuffix()\"\n  [hasSuffixAction]=\"!!projectedSuffixAction()\"\n>\n  <ng-content\n    select=\"[solaris-form-prefix]\"\n    ngProjectAs=\"[solaris-form-prefix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix-action]\"\n    ngProjectAs=\"[solaris-form-suffix-action]\"\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  @if (prefix() && !projectedPrefix()) {\n    <span solaris-form-prefix>\n      <solaris-icon [name]=\"prefix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n  <input\n    #inputElement\n    solaris-input\n    [type]=\"inputType()\"\n    [density]=\"effectiveDensity()\"\n    [size]=\"size()\"\n    (blur)=\"onInputBlur()\"\n    [readonly]=\"readonlyInput()\"\n    [attr.id]=\"fieldId() ?? null\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    (focus)=\"onInputFocus()\"\n    [value]=\"internalValue()\"\n    (input)=\"onInput($event)\"\n    [attr.name]=\"name() ?? null\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [attr.autocomplete]=\"autocomplete() ?? null\"\n    [attr.placeholder]=\"placeholderText() || null\"\n    [attr.maxlength]=\"maxLength() ?? null\"\n  />\n  @if (suffix() && !projectedSuffix()) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n  @if (showToggle()) {\n    <button\n      type=\"button\"\n      solaris-form-suffix\n      solaris-form-suffix-action\n      (click)=\"toggleVisibility()\"\n      [attr.aria-label]=\"toggleLabel()\"\n      [disabled]=\"isEffectivelyDisabled()\"\n      class=\"solaris-password-field__toggle\"\n    >\n      <solaris-icon\n        [decorative]=\"true\"\n        [name]=\"_visibleState() ? 'eye-off' : 'eye'\"\n      />\n    </button>\n  }\n</solaris-form-field>\n\n@if (showRequirements() && effectivePolicy()) {\n  <div class=\"solaris-password-field__requirements\" role=\"list\">\n    @for (req of requirementList(); track req.key) {\n      <div\n        class=\"solaris-password-field__requirement\"\n        role=\"listitem\"\n        [attr.data-met]=\"req.met\"\n      >\n        <solaris-icon\n          class=\"solaris-password-field__requirement-icon\"\n          [name]=\"req.met ? 'check' : 'x'\"\n          [decorative]=\"true\"\n        />\n        <span class=\"solaris-password-field__requirement-label\">\n          {{ req.label }}\n        </span>\n      </div>\n    }\n  </div>\n}\n\n@if (showStrength() && internalValue().length > 0) {\n  <div\n    class=\"solaris-password-field__strength\"\n    [attr.data-level]=\"strengthLevel()\"\n    role=\"status\"\n    aria-live=\"polite\"\n  >\n    <div class=\"solaris-password-field__strength-bar\">\n      <div\n        class=\"solaris-password-field__strength-segment\"\n        [attr.data-active]=\"strengthLevel() !== 'empty'\"\n      ></div>\n      <div\n        class=\"solaris-password-field__strength-segment\"\n        [attr.data-active]=\"\n          strengthLevel() === 'medium' || strengthLevel() === 'strong'\n        \"\n      ></div>\n      <div\n        class=\"solaris-password-field__strength-segment\"\n        [attr.data-active]=\"strengthLevel() === 'strong'\"\n      ></div>\n    </div>\n    <span class=\"solaris-password-field__strength-label\">\n      {{ strengthLabelText() }}\n    </span>\n  </div>\n}\n",
 			styles: [":host{--solaris-password-field-strength-height: var(--solaris-spacing-3);--solaris-password-field-strength-gap: var(--solaris-spacing-2);--solaris-password-field-requirement-gap: var(--solaris-spacing-1);--solaris-password-field-strength-radius: var(--solaris-radius-sm);--solaris-password-field-requirement-color: var( --solaris-neutral-text-secondary );--solaris-password-field-strength-bar-bg: var(--solaris-neutral-sunken);--solaris-password-field-strength-weak-color: var( --solaris-danger-foreground );--solaris-password-field-requirement-met-color: var( --solaris-success-foreground );--solaris-password-field-strength-medium-color: var( --solaris-warning-foreground );--solaris-password-field-strength-strong-color: var( --solaris-success-foreground );--solaris-password-field-requirement-unmet-color: var( --solaris-danger-foreground );display:block;box-sizing:border-box}:host(:not([data-full-width])){display:inline-block;width:auto}.solaris-password-field__toggle:disabled{cursor:not-allowed;pointer-events:none;opacity:var(--solaris-opacity-50)}.solaris-password-field__toggle{margin:0;padding:0;padding-inline:var(--solaris-density-padding-sm);border:none;font:inherit;line-height:var(--solaris-line-height-none);cursor:pointer;appearance:none;background:none;color:var(--solaris-neutral-text-secondary);box-shadow:none;align-items:center;justify-content:center;-webkit-appearance:none}.solaris-password-field__toggle:hover,.solaris-password-field__toggle:active{color:var(--solaris-neutral-text-heading)}.solaris-form-suffix solaris-icon{cursor:pointer;width:1em;height:1em;transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-password-field__toggle solaris-icon{width:1em;height:1em}:host([data-size=sm][data-density=compact]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-sm)}:host([data-size=sm][data-density=normal]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-md)}:host([data-size=sm][data-density=comfortable]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-lg)}:host([data-size=md][data-density=compact]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-md)}:host([data-size=md][data-density=normal]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-lg)}:host([data-size=md][data-density=comfortable]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-xl)}:host([data-size=lg][data-density=compact]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-lg)}:host([data-size=lg][data-density=normal]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-xl)}:host([data-size=lg][data-density=comfortable]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-2xl)}.solaris-password-field__requirements{padding:0;display:flex;list-style:none;flex-direction:column;margin-top:var(--solaris-spacing-2);gap:var(--solaris-password-field-requirement-gap)}.solaris-password-field__requirement{display:flex;align-items:center;gap:var(--solaris-spacing-1);font-size:var(--solaris-font-size-sm);color:var(--solaris-password-field-requirement-unmet-color);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-password-field__requirement[data-met=true]{color:var(--solaris-password-field-requirement-met-color)}.solaris-password-field__requirement-icon{width:1em;height:1em;flex-shrink:0}.solaris-password-field__requirement[data-met=true] .solaris-password-field__requirement-icon{color:var(--solaris-password-field-requirement-met-color)}.solaris-password-field__requirement[data-met=false] .solaris-password-field__requirement-icon{color:var(--solaris-password-field-requirement-unmet-color)}.solaris-password-field__strength{display:flex;align-items:center;margin-top:var(--solaris-spacing-1);gap:var(--solaris-password-field-strength-gap)}.solaris-password-field__strength-bar{flex:1;display:flex;gap:var(--solaris-spacing-2);min-width:var(--solaris-spacing-15);height:var(--solaris-password-field-strength-height)}.solaris-password-field__strength-segment{flex:1;height:100%;background:var(--solaris-password-field-strength-bar-bg);border-radius:var(--solaris-password-field-strength-radius);transition:background-color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-password-field__strength[data-level=weak] .solaris-password-field__strength-segment[data-active=true]{background-color:var(--solaris-password-field-strength-weak-color)}.solaris-password-field__strength[data-level=medium] .solaris-password-field__strength-segment[data-active=true]{background-color:var(--solaris-password-field-strength-medium-color)}.solaris-password-field__strength[data-level=strong] .solaris-password-field__strength-segment[data-active=true]{background-color:var(--solaris-password-field-strength-strong-color)}input[type=password]::-ms-reveal,input[type=password]::-ms-clear{display:none}input[type=password]::-webkit-credentials-auto-fill-button,input[type=password]::-webkit-contacts-auto-fill-button{visibility:hidden;pointer-events:none;display:none!important}.solaris-password-field__strength-label{flex-shrink:0;white-space:nowrap;color:var(--solaris-neutral-text-secondary);font-size:var(--solaris-font-size-xs)}@media(prefers-reduced-motion:reduce){.solaris-password-field__requirement,.solaris-password-field__strength-segment{transition:none}}\n"]
 		}]
 	}],
@@ -51648,7 +51817,7 @@ var SolarisEmailFieldComponent = class SolarisEmailFieldComponent extends Solari
 		}],
 		usesInheritance: true,
 		ngImport: i0,
-		template: "<solaris-form-field\n  [control]=\"this\"\n  [hint]=\"hint()\"\n  [label]=\"label()\"\n  [radius]=\"radius()\"\n  [density]=\"effectiveDensity()\"\n  [size]=\"size()\"\n  [hintKey]=\"hintKey()\"\n  [labelKey]=\"labelKey()\"\n  [errorKey]=\"errorKey()\"\n  [required]=\"requiredInput()\"\n  [optional]=\"optional()\"\n  [readonly]=\"readonlyInput()\"\n  [appearance]=\"appearance()\"\n  [invalid]=\"isFieldInvalid()\"\n  [error]=\"error() || computedError()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [loading]=\"loading()\"\n  [hasPrefix]=\"hasPrefix()\"\n  [hasSuffix]=\"hasSuffix()\"\n  [hasSuffixAction]=\"!!projectedSuffixAction()\"\n>\n  <ng-content\n    select=\"[solaris-form-prefix]\"\n    ngProjectAs=\"[solaris-form-prefix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix][solaris-form-suffix-action]\"\n    ngProjectAs=\"[solaris-form-suffix-action]\"\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  @if (prefix() && !projectedPrefix()) {\n    <span solaris-form-prefix>\n      <solaris-icon [name]=\"prefix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n  <input\n    type=\"email\"\n    #inputElement\n    solaris-input\n    data-bwignore=\"true\"\n    [density]=\"effectiveDensity()\"\n    [size]=\"size()\"\n    (blur)=\"onInputBlur()\"\n    [readonly]=\"readonlyInput()\"\n    (focus)=\"onInputFocus()\"\n    [attr.id]=\"fieldId() ?? null\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    (input)=\"onInput($event)\"\n    [value]=\"internalValue()\"\n    [attr.inputmode]=\"'email'\"\n    [attr.spellcheck]=\"'false'\"\n    [attr.name]=\"name() ?? null\"\n    [attr.autocapitalize]=\"'none'\"\n    [attr.autocomplete]=\"autocomplete()\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [attr.maxlength]=\"maxLength() ?? null\"\n    [attr.placeholder]=\"placeholderText() || null\"\n  />\n  @if (canClear() && !loading()) {\n    <button\n      type=\"button\"\n      solaris-form-suffix\n      class=\"solaris-email-field__clear\"\n      [attr.aria-label]=\"clearAriaLabel()\"\n      [disabled]=\"isEffectivelyDisabled() || readonlyInput()\"\n      (click)=\"clearValue(); $event.stopPropagation()\"\n      tabindex=\"-1\"\n    >\n      <solaris-icon name=\"x\" [decorative]=\"true\" />\n    </button>\n  }\n  @if (suffix() && !projectedSuffix()) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n</solaris-form-field>\n",
+		template: "<solaris-form-field\n  [control]=\"this\"\n  [hint]=\"hint()\"\n  [label]=\"label()\"\n  [radius]=\"radius()\"\n  [density]=\"effectiveDensity()\"\n  [size]=\"size()\"\n  [hintKey]=\"hintKey()\"\n  [labelKey]=\"labelKey()\"\n  [errorKey]=\"errorKey()\"\n  [required]=\"requiredInput()\"\n  [optional]=\"optional()\"\n  [readonly]=\"readonlyInput()\"\n  [appearance]=\"appearance()\"\n  [invalid]=\"isFieldInvalid()\"\n  [error]=\"error() || computedError()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [loading]=\"loading()\"\n  [hasPrefix]=\"hasPrefix()\"\n  [hasSuffix]=\"hasSuffix()\"\n  [hasSuffixAction]=\"!!projectedSuffixAction()\"\n>\n  <ng-content\n    select=\"[solaris-form-prefix]\"\n    ngProjectAs=\"[solaris-form-prefix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix-action]\"\n    ngProjectAs=\"[solaris-form-suffix-action]\"\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  @if (prefix() && !projectedPrefix()) {\n    <span solaris-form-prefix>\n      <solaris-icon [name]=\"prefix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n  <input\n    type=\"email\"\n    #inputElement\n    solaris-input\n    data-bwignore=\"true\"\n    [density]=\"effectiveDensity()\"\n    [size]=\"size()\"\n    (blur)=\"onInputBlur()\"\n    [readonly]=\"readonlyInput()\"\n    (focus)=\"onInputFocus()\"\n    [attr.id]=\"fieldId() ?? null\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    (input)=\"onInput($event)\"\n    [value]=\"internalValue()\"\n    [attr.inputmode]=\"'email'\"\n    [attr.spellcheck]=\"'false'\"\n    [attr.name]=\"name() ?? null\"\n    [attr.autocapitalize]=\"'none'\"\n    [attr.autocomplete]=\"autocomplete()\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [attr.maxlength]=\"maxLength() ?? null\"\n    [attr.placeholder]=\"placeholderText() || null\"\n  />\n  @if (canClear() && !loading()) {\n    <button\n      type=\"button\"\n      solaris-form-suffix\n      class=\"solaris-email-field__clear\"\n      [attr.aria-label]=\"clearAriaLabel()\"\n      [disabled]=\"isEffectivelyDisabled() || readonlyInput()\"\n      (click)=\"clearValue(); $event.stopPropagation()\"\n      tabindex=\"-1\"\n    >\n      <solaris-icon name=\"x\" [decorative]=\"true\" />\n    </button>\n  }\n  @if (suffix() && !projectedSuffix()) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n</solaris-form-field>\n",
 		styles: [":host{display:block;box-sizing:border-box}.solaris-email-field__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-email-field__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-lg);height:var(--solaris-font-size-lg);color:var(--solaris-neutral-text-secondary);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-email-field__clear:hover{color:var(--solaris-neutral-text-heading)}@media(prefers-reduced-motion:reduce){.solaris-email-field__clear{transition:none}}[data-reduced-motion=true] .solaris-email-field__clear{transition:none}\n"],
 		dependencies: [
 			{
@@ -51763,7 +51932,7 @@ i0.ɵɵngDeclareClassMetadata({
 				"[attr.data-size]": "size()",
 				"[attr.data-density]": "effectiveDensity()"
 			},
-			template: "<solaris-form-field\n  [control]=\"this\"\n  [hint]=\"hint()\"\n  [label]=\"label()\"\n  [radius]=\"radius()\"\n  [density]=\"effectiveDensity()\"\n  [size]=\"size()\"\n  [hintKey]=\"hintKey()\"\n  [labelKey]=\"labelKey()\"\n  [errorKey]=\"errorKey()\"\n  [required]=\"requiredInput()\"\n  [optional]=\"optional()\"\n  [readonly]=\"readonlyInput()\"\n  [appearance]=\"appearance()\"\n  [invalid]=\"isFieldInvalid()\"\n  [error]=\"error() || computedError()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [loading]=\"loading()\"\n  [hasPrefix]=\"hasPrefix()\"\n  [hasSuffix]=\"hasSuffix()\"\n  [hasSuffixAction]=\"!!projectedSuffixAction()\"\n>\n  <ng-content\n    select=\"[solaris-form-prefix]\"\n    ngProjectAs=\"[solaris-form-prefix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix][solaris-form-suffix-action]\"\n    ngProjectAs=\"[solaris-form-suffix-action]\"\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  @if (prefix() && !projectedPrefix()) {\n    <span solaris-form-prefix>\n      <solaris-icon [name]=\"prefix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n  <input\n    type=\"email\"\n    #inputElement\n    solaris-input\n    data-bwignore=\"true\"\n    [density]=\"effectiveDensity()\"\n    [size]=\"size()\"\n    (blur)=\"onInputBlur()\"\n    [readonly]=\"readonlyInput()\"\n    (focus)=\"onInputFocus()\"\n    [attr.id]=\"fieldId() ?? null\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    (input)=\"onInput($event)\"\n    [value]=\"internalValue()\"\n    [attr.inputmode]=\"'email'\"\n    [attr.spellcheck]=\"'false'\"\n    [attr.name]=\"name() ?? null\"\n    [attr.autocapitalize]=\"'none'\"\n    [attr.autocomplete]=\"autocomplete()\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [attr.maxlength]=\"maxLength() ?? null\"\n    [attr.placeholder]=\"placeholderText() || null\"\n  />\n  @if (canClear() && !loading()) {\n    <button\n      type=\"button\"\n      solaris-form-suffix\n      class=\"solaris-email-field__clear\"\n      [attr.aria-label]=\"clearAriaLabel()\"\n      [disabled]=\"isEffectivelyDisabled() || readonlyInput()\"\n      (click)=\"clearValue(); $event.stopPropagation()\"\n      tabindex=\"-1\"\n    >\n      <solaris-icon name=\"x\" [decorative]=\"true\" />\n    </button>\n  }\n  @if (suffix() && !projectedSuffix()) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n</solaris-form-field>\n",
+			template: "<solaris-form-field\n  [control]=\"this\"\n  [hint]=\"hint()\"\n  [label]=\"label()\"\n  [radius]=\"radius()\"\n  [density]=\"effectiveDensity()\"\n  [size]=\"size()\"\n  [hintKey]=\"hintKey()\"\n  [labelKey]=\"labelKey()\"\n  [errorKey]=\"errorKey()\"\n  [required]=\"requiredInput()\"\n  [optional]=\"optional()\"\n  [readonly]=\"readonlyInput()\"\n  [appearance]=\"appearance()\"\n  [invalid]=\"isFieldInvalid()\"\n  [error]=\"error() || computedError()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [loading]=\"loading()\"\n  [hasPrefix]=\"hasPrefix()\"\n  [hasSuffix]=\"hasSuffix()\"\n  [hasSuffixAction]=\"!!projectedSuffixAction()\"\n>\n  <ng-content\n    select=\"[solaris-form-prefix]\"\n    ngProjectAs=\"[solaris-form-prefix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix-action]\"\n    ngProjectAs=\"[solaris-form-suffix-action]\"\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  @if (prefix() && !projectedPrefix()) {\n    <span solaris-form-prefix>\n      <solaris-icon [name]=\"prefix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n  <input\n    type=\"email\"\n    #inputElement\n    solaris-input\n    data-bwignore=\"true\"\n    [density]=\"effectiveDensity()\"\n    [size]=\"size()\"\n    (blur)=\"onInputBlur()\"\n    [readonly]=\"readonlyInput()\"\n    (focus)=\"onInputFocus()\"\n    [attr.id]=\"fieldId() ?? null\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    (input)=\"onInput($event)\"\n    [value]=\"internalValue()\"\n    [attr.inputmode]=\"'email'\"\n    [attr.spellcheck]=\"'false'\"\n    [attr.name]=\"name() ?? null\"\n    [attr.autocapitalize]=\"'none'\"\n    [attr.autocomplete]=\"autocomplete()\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [attr.maxlength]=\"maxLength() ?? null\"\n    [attr.placeholder]=\"placeholderText() || null\"\n  />\n  @if (canClear() && !loading()) {\n    <button\n      type=\"button\"\n      solaris-form-suffix\n      class=\"solaris-email-field__clear\"\n      [attr.aria-label]=\"clearAriaLabel()\"\n      [disabled]=\"isEffectivelyDisabled() || readonlyInput()\"\n      (click)=\"clearValue(); $event.stopPropagation()\"\n      tabindex=\"-1\"\n    >\n      <solaris-icon name=\"x\" [decorative]=\"true\" />\n    </button>\n  }\n  @if (suffix() && !projectedSuffix()) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n</solaris-form-field>\n",
 			styles: [":host{display:block;box-sizing:border-box}.solaris-email-field__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-email-field__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-lg);height:var(--solaris-font-size-lg);color:var(--solaris-neutral-text-secondary);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-email-field__clear:hover{color:var(--solaris-neutral-text-heading)}@media(prefers-reduced-motion:reduce){.solaris-email-field__clear{transition:none}}[data-reduced-motion=true] .solaris-email-field__clear{transition:none}\n"]
 		}]
 	}],
@@ -53276,7 +53445,7 @@ var SolarisPhoneFieldComponent = class SolarisPhoneFieldComponent extends Solari
 		}],
 		usesInheritance: true,
 		ngImport: i0,
-		template: "<solaris-form-field\n  [control]=\"this\"\n  [hint]=\"hint()\"\n  [label]=\"label()\"\n  [radius]=\"radius()\"\n  [density]=\"effectiveDensity()\"\n  [size]=\"size()\"\n  [hintKey]=\"hintKey()\"\n  [labelKey]=\"labelKey()\"\n  [errorKey]=\"errorKey()\"\n  [required]=\"requiredInput()\"\n  [optional]=\"optional()\"\n  [readonly]=\"isEffectivelyReadonly()\"\n  [appearance]=\"appearance()\"\n  [invalid]=\"isFieldInvalid()\"\n  [error]=\"error() || computedError()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [loading]=\"loading()\"\n  [hasPrefix]=\"hasPrefix()\"\n  [hasSuffix]=\"hasSuffix()\"\n  [hasSuffixAction]=\"!!projectedSuffixAction()\"\n  solaris-popover-trigger\n  [solarisPopoverTriggerFor]=\"countryPopover\"\n  [solarisPopoverDisabled]=\"!canOpen()\"\n  [solarisPopoverPlacement]=\"'bottom'\"\n  [solarisPopoverAlign]=\"'start'\"\n  [solarisPopoverOffset]=\"8\"\n  [solarisPopoverPadding]=\"'none'\"\n  [solarisPopoverRadius]=\"radius()\"\n  [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n  [solarisPopoverAppearance]=\"popoverAppearance()\"\n  [solarisPopoverAutoFocus]=\"'first-tabbable'\"\n  [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n  <ng-content\n    select=\"[solaris-form-suffix][solaris-form-suffix-action]\"\n    ngProjectAs=\"[solaris-form-suffix-action]\"\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  <button\n    type=\"button\"\n    class=\"solaris-phone-field__country\"\n    solaris-form-prefix\n    [attr.aria-label]=\"countryButtonLabelText()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n    [disabled]=\"!canOpen()\"\n    (click)=\"onCountryToggle($event)\"\n  >\n    <!-- SECURITY_EXCEPTION: flag SVG already vetted by solarisSafeHtml pipe (isTrustedFlagSvg). -->\n    <span\n      class=\"solaris-phone-field__flag\"\n      [innerHTML]=\"selectedFlag() | solarisSafeHtml\"\n    ></span>\n    <solaris-icon\n      class=\"solaris-phone-field__chevron\"\n      name=\"chevron-down\"\n      [decorative]=\"true\"\n    />\n  </button>\n\n  <span class=\"solaris-phone-field__dial-code\"\n    >+{{ selectedCallingCode() }}</span\n  >\n\n  <input\n    type=\"tel\"\n    #inputElement\n    solaris-input\n    data-bwignore=\"true\"\n    [density]=\"effectiveDensity()\"\n    [size]=\"size()\"\n    (blur)=\"onInputBlur()\"\n    [readonly]=\"isEffectivelyReadonly()\"\n    (focus)=\"onInputFocus()\"\n    (click)=\"onInputClick($event)\"\n    [attr.id]=\"fieldId() ?? null\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    (input)=\"onInput($event)\"\n    [value]=\"displayValue()\"\n    [attr.inputmode]=\"'tel'\"\n    [attr.autocapitalize]=\"'none'\"\n    [attr.spellcheck]=\"'false'\"\n    [attr.name]=\"name() ?? null\"\n    [attr.autocomplete]=\"autocomplete()\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [attr.maxlength]=\"effectiveMaxLength()\"\n    [attr.placeholder]=\"placeholderText() || null\"\n  />\n\n  @if (canClear() && !loading()) {\n    <button\n      type=\"button\"\n      solaris-form-suffix\n      class=\"solaris-phone-field__clear\"\n      [attr.aria-label]=\"clearAriaLabel()\"\n      [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n      (click)=\"clearValue(); $event.stopPropagation()\"\n      tabindex=\"-1\"\n    >\n      <solaris-icon name=\"x\" [decorative]=\"true\" />\n    </button>\n  }\n  @if (suffix() && !projectedSuffix()) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n</solaris-form-field>\n\n<ng-template #countryPopover=\"solarisPopover\" solaris-popover>\n  <solaris-phone-country-list\n    [countries]=\"countries()\"\n    [selectedCode]=\"effectiveCountry()\"\n    [searchable]=\"searchable()\"\n    [searchPlaceholder]=\"searchPlaceholderText()\"\n    [noResultsText]=\"noResultsTextValue()\"\n    [emptyText]=\"emptyTextValue()\"\n    [maxHeight]=\"panelMaxHeight()\"\n    (countrySelected)=\"selectCountry($event)\"\n    (closeRequest)=\"closeCountryPanel()\"\n  />\n</ng-template>\n",
+		template: "<solaris-form-field\n  [control]=\"this\"\n  [hint]=\"hint()\"\n  [label]=\"label()\"\n  [radius]=\"radius()\"\n  [density]=\"effectiveDensity()\"\n  [size]=\"size()\"\n  [hintKey]=\"hintKey()\"\n  [labelKey]=\"labelKey()\"\n  [errorKey]=\"errorKey()\"\n  [required]=\"requiredInput()\"\n  [optional]=\"optional()\"\n  [readonly]=\"isEffectivelyReadonly()\"\n  [appearance]=\"appearance()\"\n  [invalid]=\"isFieldInvalid()\"\n  [error]=\"error() || computedError()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [loading]=\"loading()\"\n  [hasPrefix]=\"hasPrefix()\"\n  [hasSuffix]=\"hasSuffix()\"\n  [hasSuffixAction]=\"!!projectedSuffixAction()\"\n  solaris-popover-trigger\n  [solarisPopoverTriggerFor]=\"countryPopover\"\n  [solarisPopoverDisabled]=\"!canOpen()\"\n  [solarisPopoverPlacement]=\"'bottom'\"\n  [solarisPopoverAlign]=\"'start'\"\n  [solarisPopoverOffset]=\"8\"\n  [solarisPopoverPadding]=\"'none'\"\n  [solarisPopoverRadius]=\"radius()\"\n  [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n  [solarisPopoverAppearance]=\"popoverAppearance()\"\n  [solarisPopoverAutoFocus]=\"'first-tabbable'\"\n  [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n  <ng-content\n    select=\"[solaris-form-suffix-action]\"\n    ngProjectAs=\"[solaris-form-suffix-action]\"\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  <button\n    type=\"button\"\n    class=\"solaris-phone-field__country\"\n    solaris-form-prefix\n    [attr.aria-label]=\"countryButtonLabelText()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n    [disabled]=\"!canOpen()\"\n    (click)=\"onCountryToggle($event)\"\n  >\n    <!-- SECURITY_EXCEPTION: flag SVG already vetted by solarisSafeHtml pipe (isTrustedFlagSvg). -->\n    <span\n      class=\"solaris-phone-field__flag\"\n      [innerHTML]=\"selectedFlag() | solarisSafeHtml\"\n    ></span>\n    <solaris-icon\n      class=\"solaris-phone-field__chevron\"\n      name=\"chevron-down\"\n      [decorative]=\"true\"\n    />\n  </button>\n\n  <span class=\"solaris-phone-field__dial-code\"\n    >+{{ selectedCallingCode() }}</span\n  >\n\n  <input\n    type=\"tel\"\n    #inputElement\n    solaris-input\n    data-bwignore=\"true\"\n    [density]=\"effectiveDensity()\"\n    [size]=\"size()\"\n    (blur)=\"onInputBlur()\"\n    [readonly]=\"isEffectivelyReadonly()\"\n    (focus)=\"onInputFocus()\"\n    (click)=\"onInputClick($event)\"\n    [attr.id]=\"fieldId() ?? null\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    (input)=\"onInput($event)\"\n    [value]=\"displayValue()\"\n    [attr.inputmode]=\"'tel'\"\n    [attr.autocapitalize]=\"'none'\"\n    [attr.spellcheck]=\"'false'\"\n    [attr.name]=\"name() ?? null\"\n    [attr.autocomplete]=\"autocomplete()\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [attr.maxlength]=\"effectiveMaxLength()\"\n    [attr.placeholder]=\"placeholderText() || null\"\n  />\n\n  @if (canClear() && !loading()) {\n    <button\n      type=\"button\"\n      solaris-form-suffix\n      class=\"solaris-phone-field__clear\"\n      [attr.aria-label]=\"clearAriaLabel()\"\n      [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n      (click)=\"clearValue(); $event.stopPropagation()\"\n      tabindex=\"-1\"\n    >\n      <solaris-icon name=\"x\" [decorative]=\"true\" />\n    </button>\n  }\n  @if (suffix() && !projectedSuffix()) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n</solaris-form-field>\n\n<ng-template #countryPopover=\"solarisPopover\" solaris-popover>\n  <solaris-phone-country-list\n    [countries]=\"countries()\"\n    [selectedCode]=\"effectiveCountry()\"\n    [searchable]=\"searchable()\"\n    [searchPlaceholder]=\"searchPlaceholderText()\"\n    [noResultsText]=\"noResultsTextValue()\"\n    [emptyText]=\"emptyTextValue()\"\n    [maxHeight]=\"panelMaxHeight()\"\n    (countrySelected)=\"selectCountry($event)\"\n    (closeRequest)=\"closeCountryPanel()\"\n  />\n</ng-template>\n",
 		styles: [":host{--solaris-phone-field-country-gap: var(--solaris-spacing-1);--solaris-phone-field-country-padding-inline: var(--solaris-spacing-2);--solaris-phone-field-dial-code-color: var(--solaris-neutral-text-secondary);--solaris-phone-field-flag-size: var(--solaris-font-size-xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-2xs);--solaris-phone-field-country-font-size: var(--solaris-font-size-xs);display:block;box-sizing:border-box}:host .solaris-phone-field__country.solaris-form-prefix{all:unset;display:inline-flex;box-sizing:border-box;align-items:center;gap:var(--solaris-phone-field-country-gap);padding-inline:var(--solaris-phone-field-country-padding-inline);cursor:pointer;color:var(--solaris-neutral-text-body);font-size:var(--solaris-phone-field-country-font-size);line-height:var(--solaris-line-height-md)}:host .solaris-phone-field__country.solaris-form-prefix:focus-visible{outline-offset:var(--solaris-focus-ring-offset);outline:var(--solaris-focus-ring-width) solid var(--solaris-primary-solid)}:host .solaris-phone-field__country.solaris-form-prefix[disabled]{cursor:not-allowed;opacity:var(--solaris-opacity-50)}.solaris-phone-field__flag{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--solaris-phone-field-flag-size);font-size:var(--solaris-phone-field-flag-size);line-height:1}.solaris-phone-field__flag svg{display:block;width:100%;height:auto}:host .solaris-phone-field__country .solaris-phone-field__chevron{flex-shrink:0;color:var(--solaris-neutral-text-secondary);block-size:var(--solaris-phone-field-chevron-size);inline-size:var(--solaris-phone-field-chevron-size);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-phone-field__chevron{transform:rotate(180deg)}.solaris-phone-field__dial-code{flex:0 0 auto;-webkit-user-select:none;user-select:none;cursor:default;color:var(--solaris-phone-field-dial-code-color);font-size:var(--solaris-phone-field-country-font-size);line-height:var(--solaris-line-height-md);margin-inline-end:var(--solaris-spacing-1)}:host([data-size=sm][data-density=compact]){--solaris-phone-field-country-font-size: var(--solaris-font-size-xs);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-sm );--solaris-phone-field-flag-size: var(--solaris-font-size-2xs);--solaris-phone-field-chevron-size: calc( var(--solaris-spacing-5) + var(--solaris-border-width-md) )}:host([data-size=sm][data-density=normal]){--solaris-phone-field-country-font-size: var(--solaris-font-size-xs);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-md );--solaris-phone-field-flag-size: var(--solaris-font-size-2xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-2xs)}:host([data-size=sm][data-density=comfortable]){--solaris-phone-field-country-font-size: var(--solaris-font-size-xs);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-lg );--solaris-phone-field-flag-size: var(--solaris-font-size-2xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-xs)}:host([data-size=md][data-density=compact]){--solaris-phone-field-country-font-size: var(--solaris-font-size-sm);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-sm );--solaris-phone-field-flag-size: var(--solaris-font-size-xs);--solaris-phone-field-chevron-size: calc( var(--solaris-spacing-5) + var(--solaris-border-width-md) )}:host([data-size=md][data-density=normal]){--solaris-phone-field-country-font-size: var(--solaris-font-size-sm);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-md );--solaris-phone-field-flag-size: var(--solaris-font-size-xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-2xs)}:host([data-size=md][data-density=comfortable]){--solaris-phone-field-country-font-size: var(--solaris-font-size-sm);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-lg );--solaris-phone-field-flag-size: var(--solaris-font-size-xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-xs)}:host([data-size=lg][data-density=compact]){--solaris-phone-field-country-font-size: var(--solaris-font-size-md);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-sm );--solaris-phone-field-flag-size: var(--solaris-font-size-sm);--solaris-phone-field-chevron-size: calc( var(--solaris-spacing-5) + var(--solaris-border-width-md) )}:host([data-size=lg][data-density=normal]){--solaris-phone-field-country-font-size: var(--solaris-font-size-md);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-md );--solaris-phone-field-flag-size: var(--solaris-font-size-sm);--solaris-phone-field-chevron-size: var(--solaris-font-size-2xs)}:host([data-size=lg][data-density=comfortable]){--solaris-phone-field-country-font-size: var(--solaris-font-size-md);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-lg );--solaris-phone-field-flag-size: var(--solaris-font-size-sm);--solaris-phone-field-chevron-size: var(--solaris-font-size-xs)}@media(prefers-reduced-motion:reduce){.solaris-phone-field__chevron{transition:none}}.solaris-phone-field__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-phone-field__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-lg);height:var(--solaris-font-size-lg);color:var(--solaris-neutral-text-secondary);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-phone-field__clear:hover{color:var(--solaris-neutral-text-heading)}@media(prefers-reduced-motion:reduce){.solaris-phone-field__clear{transition:none}}[data-reduced-motion=true] .solaris-phone-field__clear{transition:none}\n"],
 		dependencies: [
 			{
@@ -53457,7 +53626,7 @@ i0.ɵɵngDeclareClassMetadata({
 				"[attr.data-open]": "panelOpen() ? \"\" : null",
 				"[attr.data-density]": "effectiveDensity()"
 			},
-			template: "<solaris-form-field\n  [control]=\"this\"\n  [hint]=\"hint()\"\n  [label]=\"label()\"\n  [radius]=\"radius()\"\n  [density]=\"effectiveDensity()\"\n  [size]=\"size()\"\n  [hintKey]=\"hintKey()\"\n  [labelKey]=\"labelKey()\"\n  [errorKey]=\"errorKey()\"\n  [required]=\"requiredInput()\"\n  [optional]=\"optional()\"\n  [readonly]=\"isEffectivelyReadonly()\"\n  [appearance]=\"appearance()\"\n  [invalid]=\"isFieldInvalid()\"\n  [error]=\"error() || computedError()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [loading]=\"loading()\"\n  [hasPrefix]=\"hasPrefix()\"\n  [hasSuffix]=\"hasSuffix()\"\n  [hasSuffixAction]=\"!!projectedSuffixAction()\"\n  solaris-popover-trigger\n  [solarisPopoverTriggerFor]=\"countryPopover\"\n  [solarisPopoverDisabled]=\"!canOpen()\"\n  [solarisPopoverPlacement]=\"'bottom'\"\n  [solarisPopoverAlign]=\"'start'\"\n  [solarisPopoverOffset]=\"8\"\n  [solarisPopoverPadding]=\"'none'\"\n  [solarisPopoverRadius]=\"radius()\"\n  [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n  [solarisPopoverAppearance]=\"popoverAppearance()\"\n  [solarisPopoverAutoFocus]=\"'first-tabbable'\"\n  [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n  <ng-content\n    select=\"[solaris-form-suffix][solaris-form-suffix-action]\"\n    ngProjectAs=\"[solaris-form-suffix-action]\"\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  <button\n    type=\"button\"\n    class=\"solaris-phone-field__country\"\n    solaris-form-prefix\n    [attr.aria-label]=\"countryButtonLabelText()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n    [disabled]=\"!canOpen()\"\n    (click)=\"onCountryToggle($event)\"\n  >\n    <!-- SECURITY_EXCEPTION: flag SVG already vetted by solarisSafeHtml pipe (isTrustedFlagSvg). -->\n    <span\n      class=\"solaris-phone-field__flag\"\n      [innerHTML]=\"selectedFlag() | solarisSafeHtml\"\n    ></span>\n    <solaris-icon\n      class=\"solaris-phone-field__chevron\"\n      name=\"chevron-down\"\n      [decorative]=\"true\"\n    />\n  </button>\n\n  <span class=\"solaris-phone-field__dial-code\"\n    >+{{ selectedCallingCode() }}</span\n  >\n\n  <input\n    type=\"tel\"\n    #inputElement\n    solaris-input\n    data-bwignore=\"true\"\n    [density]=\"effectiveDensity()\"\n    [size]=\"size()\"\n    (blur)=\"onInputBlur()\"\n    [readonly]=\"isEffectivelyReadonly()\"\n    (focus)=\"onInputFocus()\"\n    (click)=\"onInputClick($event)\"\n    [attr.id]=\"fieldId() ?? null\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    (input)=\"onInput($event)\"\n    [value]=\"displayValue()\"\n    [attr.inputmode]=\"'tel'\"\n    [attr.autocapitalize]=\"'none'\"\n    [attr.spellcheck]=\"'false'\"\n    [attr.name]=\"name() ?? null\"\n    [attr.autocomplete]=\"autocomplete()\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [attr.maxlength]=\"effectiveMaxLength()\"\n    [attr.placeholder]=\"placeholderText() || null\"\n  />\n\n  @if (canClear() && !loading()) {\n    <button\n      type=\"button\"\n      solaris-form-suffix\n      class=\"solaris-phone-field__clear\"\n      [attr.aria-label]=\"clearAriaLabel()\"\n      [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n      (click)=\"clearValue(); $event.stopPropagation()\"\n      tabindex=\"-1\"\n    >\n      <solaris-icon name=\"x\" [decorative]=\"true\" />\n    </button>\n  }\n  @if (suffix() && !projectedSuffix()) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n</solaris-form-field>\n\n<ng-template #countryPopover=\"solarisPopover\" solaris-popover>\n  <solaris-phone-country-list\n    [countries]=\"countries()\"\n    [selectedCode]=\"effectiveCountry()\"\n    [searchable]=\"searchable()\"\n    [searchPlaceholder]=\"searchPlaceholderText()\"\n    [noResultsText]=\"noResultsTextValue()\"\n    [emptyText]=\"emptyTextValue()\"\n    [maxHeight]=\"panelMaxHeight()\"\n    (countrySelected)=\"selectCountry($event)\"\n    (closeRequest)=\"closeCountryPanel()\"\n  />\n</ng-template>\n",
+			template: "<solaris-form-field\n  [control]=\"this\"\n  [hint]=\"hint()\"\n  [label]=\"label()\"\n  [radius]=\"radius()\"\n  [density]=\"effectiveDensity()\"\n  [size]=\"size()\"\n  [hintKey]=\"hintKey()\"\n  [labelKey]=\"labelKey()\"\n  [errorKey]=\"errorKey()\"\n  [required]=\"requiredInput()\"\n  [optional]=\"optional()\"\n  [readonly]=\"isEffectivelyReadonly()\"\n  [appearance]=\"appearance()\"\n  [invalid]=\"isFieldInvalid()\"\n  [error]=\"error() || computedError()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [loading]=\"loading()\"\n  [hasPrefix]=\"hasPrefix()\"\n  [hasSuffix]=\"hasSuffix()\"\n  [hasSuffixAction]=\"!!projectedSuffixAction()\"\n  solaris-popover-trigger\n  [solarisPopoverTriggerFor]=\"countryPopover\"\n  [solarisPopoverDisabled]=\"!canOpen()\"\n  [solarisPopoverPlacement]=\"'bottom'\"\n  [solarisPopoverAlign]=\"'start'\"\n  [solarisPopoverOffset]=\"8\"\n  [solarisPopoverPadding]=\"'none'\"\n  [solarisPopoverRadius]=\"radius()\"\n  [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n  [solarisPopoverAppearance]=\"popoverAppearance()\"\n  [solarisPopoverAutoFocus]=\"'first-tabbable'\"\n  [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n  <ng-content\n    select=\"[solaris-form-suffix-action]\"\n    ngProjectAs=\"[solaris-form-suffix-action]\"\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  <button\n    type=\"button\"\n    class=\"solaris-phone-field__country\"\n    solaris-form-prefix\n    [attr.aria-label]=\"countryButtonLabelText()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n    [disabled]=\"!canOpen()\"\n    (click)=\"onCountryToggle($event)\"\n  >\n    <!-- SECURITY_EXCEPTION: flag SVG already vetted by solarisSafeHtml pipe (isTrustedFlagSvg). -->\n    <span\n      class=\"solaris-phone-field__flag\"\n      [innerHTML]=\"selectedFlag() | solarisSafeHtml\"\n    ></span>\n    <solaris-icon\n      class=\"solaris-phone-field__chevron\"\n      name=\"chevron-down\"\n      [decorative]=\"true\"\n    />\n  </button>\n\n  <span class=\"solaris-phone-field__dial-code\"\n    >+{{ selectedCallingCode() }}</span\n  >\n\n  <input\n    type=\"tel\"\n    #inputElement\n    solaris-input\n    data-bwignore=\"true\"\n    [density]=\"effectiveDensity()\"\n    [size]=\"size()\"\n    (blur)=\"onInputBlur()\"\n    [readonly]=\"isEffectivelyReadonly()\"\n    (focus)=\"onInputFocus()\"\n    (click)=\"onInputClick($event)\"\n    [attr.id]=\"fieldId() ?? null\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    (input)=\"onInput($event)\"\n    [value]=\"displayValue()\"\n    [attr.inputmode]=\"'tel'\"\n    [attr.autocapitalize]=\"'none'\"\n    [attr.spellcheck]=\"'false'\"\n    [attr.name]=\"name() ?? null\"\n    [attr.autocomplete]=\"autocomplete()\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [attr.maxlength]=\"effectiveMaxLength()\"\n    [attr.placeholder]=\"placeholderText() || null\"\n  />\n\n  @if (canClear() && !loading()) {\n    <button\n      type=\"button\"\n      solaris-form-suffix\n      class=\"solaris-phone-field__clear\"\n      [attr.aria-label]=\"clearAriaLabel()\"\n      [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n      (click)=\"clearValue(); $event.stopPropagation()\"\n      tabindex=\"-1\"\n    >\n      <solaris-icon name=\"x\" [decorative]=\"true\" />\n    </button>\n  }\n  @if (suffix() && !projectedSuffix()) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n</solaris-form-field>\n\n<ng-template #countryPopover=\"solarisPopover\" solaris-popover>\n  <solaris-phone-country-list\n    [countries]=\"countries()\"\n    [selectedCode]=\"effectiveCountry()\"\n    [searchable]=\"searchable()\"\n    [searchPlaceholder]=\"searchPlaceholderText()\"\n    [noResultsText]=\"noResultsTextValue()\"\n    [emptyText]=\"emptyTextValue()\"\n    [maxHeight]=\"panelMaxHeight()\"\n    (countrySelected)=\"selectCountry($event)\"\n    (closeRequest)=\"closeCountryPanel()\"\n  />\n</ng-template>\n",
 			styles: [":host{--solaris-phone-field-country-gap: var(--solaris-spacing-1);--solaris-phone-field-country-padding-inline: var(--solaris-spacing-2);--solaris-phone-field-dial-code-color: var(--solaris-neutral-text-secondary);--solaris-phone-field-flag-size: var(--solaris-font-size-xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-2xs);--solaris-phone-field-country-font-size: var(--solaris-font-size-xs);display:block;box-sizing:border-box}:host .solaris-phone-field__country.solaris-form-prefix{all:unset;display:inline-flex;box-sizing:border-box;align-items:center;gap:var(--solaris-phone-field-country-gap);padding-inline:var(--solaris-phone-field-country-padding-inline);cursor:pointer;color:var(--solaris-neutral-text-body);font-size:var(--solaris-phone-field-country-font-size);line-height:var(--solaris-line-height-md)}:host .solaris-phone-field__country.solaris-form-prefix:focus-visible{outline-offset:var(--solaris-focus-ring-offset);outline:var(--solaris-focus-ring-width) solid var(--solaris-primary-solid)}:host .solaris-phone-field__country.solaris-form-prefix[disabled]{cursor:not-allowed;opacity:var(--solaris-opacity-50)}.solaris-phone-field__flag{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--solaris-phone-field-flag-size);font-size:var(--solaris-phone-field-flag-size);line-height:1}.solaris-phone-field__flag svg{display:block;width:100%;height:auto}:host .solaris-phone-field__country .solaris-phone-field__chevron{flex-shrink:0;color:var(--solaris-neutral-text-secondary);block-size:var(--solaris-phone-field-chevron-size);inline-size:var(--solaris-phone-field-chevron-size);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-phone-field__chevron{transform:rotate(180deg)}.solaris-phone-field__dial-code{flex:0 0 auto;-webkit-user-select:none;user-select:none;cursor:default;color:var(--solaris-phone-field-dial-code-color);font-size:var(--solaris-phone-field-country-font-size);line-height:var(--solaris-line-height-md);margin-inline-end:var(--solaris-spacing-1)}:host([data-size=sm][data-density=compact]){--solaris-phone-field-country-font-size: var(--solaris-font-size-xs);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-sm );--solaris-phone-field-flag-size: var(--solaris-font-size-2xs);--solaris-phone-field-chevron-size: calc( var(--solaris-spacing-5) + var(--solaris-border-width-md) )}:host([data-size=sm][data-density=normal]){--solaris-phone-field-country-font-size: var(--solaris-font-size-xs);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-md );--solaris-phone-field-flag-size: var(--solaris-font-size-2xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-2xs)}:host([data-size=sm][data-density=comfortable]){--solaris-phone-field-country-font-size: var(--solaris-font-size-xs);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-lg );--solaris-phone-field-flag-size: var(--solaris-font-size-2xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-xs)}:host([data-size=md][data-density=compact]){--solaris-phone-field-country-font-size: var(--solaris-font-size-sm);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-sm );--solaris-phone-field-flag-size: var(--solaris-font-size-xs);--solaris-phone-field-chevron-size: calc( var(--solaris-spacing-5) + var(--solaris-border-width-md) )}:host([data-size=md][data-density=normal]){--solaris-phone-field-country-font-size: var(--solaris-font-size-sm);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-md );--solaris-phone-field-flag-size: var(--solaris-font-size-xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-2xs)}:host([data-size=md][data-density=comfortable]){--solaris-phone-field-country-font-size: var(--solaris-font-size-sm);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-lg );--solaris-phone-field-flag-size: var(--solaris-font-size-xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-xs)}:host([data-size=lg][data-density=compact]){--solaris-phone-field-country-font-size: var(--solaris-font-size-md);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-sm );--solaris-phone-field-flag-size: var(--solaris-font-size-sm);--solaris-phone-field-chevron-size: calc( var(--solaris-spacing-5) + var(--solaris-border-width-md) )}:host([data-size=lg][data-density=normal]){--solaris-phone-field-country-font-size: var(--solaris-font-size-md);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-md );--solaris-phone-field-flag-size: var(--solaris-font-size-sm);--solaris-phone-field-chevron-size: var(--solaris-font-size-2xs)}:host([data-size=lg][data-density=comfortable]){--solaris-phone-field-country-font-size: var(--solaris-font-size-md);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-lg );--solaris-phone-field-flag-size: var(--solaris-font-size-sm);--solaris-phone-field-chevron-size: var(--solaris-font-size-xs)}@media(prefers-reduced-motion:reduce){.solaris-phone-field__chevron{transition:none}}.solaris-phone-field__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-phone-field__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-lg);height:var(--solaris-font-size-lg);color:var(--solaris-neutral-text-secondary);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-phone-field__clear:hover{color:var(--solaris-neutral-text-heading)}@media(prefers-reduced-motion:reduce){.solaris-phone-field__clear{transition:none}}[data-reduced-motion=true] .solaris-phone-field__clear{transition:none}\n"]
 		}]
 	}],
@@ -54436,7 +54605,7 @@ var SolarisOtpInputComponent = class SolarisOtpInputComponent extends SolarisFor
 		}],
 		usesInheritance: true,
 		ngImport: i0,
-		template: "<solaris-form-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [error]=\"error() || computedError()\"\n  [labelKey]=\"labelKey()\"\n  [hintKey]=\"hintKey()\"\n  [errorKey]=\"errorKey()\"\n  [required]=\"requiredInput()\"\n  [optional]=\"optional()\"\n  [appearance]=\"appearance()\"\n  [density]=\"effectiveDensity()\"\n  [size]=\"size()\"\n  [radius]=\"radius()\"\n  [invalid]=\"isFieldInvalid()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [readonly]=\"isEffectivelyReadonly()\"\n  [loading]=\"loading()\"\n  [control]=\"this\"\n  [hasSuffixAction]=\"!!projectedSuffixAction()\"\n>\n  <div\n    class=\"solaris-otp-input__boxes\"\n    solaris-form-field-trigger\n    role=\"group\"\n    [attr.aria-label]=\"groupAriaLabel() || null\"\n  >\n    @for (box of boxes(); track $index; let index = $index) {\n      <input\n        #box\n        type=\"text\"\n        class=\"solaris-otp-input__box\"\n        [attr.inputmode]=\"inputmode()\"\n        maxlength=\"1\"\n        autocomplete=\"one-time-code\"\n        [attr.aria-label]=\"boxAriaLabel(index)\"\n        [attr.aria-describedby]=\"ariaDescribedBy()\"\n        [attr.data-active]=\"focusedIndex() === index ? '' : null\"\n        [value]=\"box\"\n        [disabled]=\"isEffectivelyDisabled() || loading()\"\n        [readonly]=\"isEffectivelyReadonly()\"\n        (input)=\"onBoxInput($event, index)\"\n        (keydown)=\"onBoxKeydown($event, index)\"\n        (paste)=\"onBoxPaste($event, index)\"\n        (focus)=\"onBoxFocus(index)\"\n        (blur)=\"onBoxBlur()\"\n      />\n      @if (showSeparatorAfter(index)) {\n        <span class=\"solaris-otp-input__separator\" aria-hidden=\"true\">-</span>\n      }\n    }\n  </div>\n  <ng-content\n    select=\"[solaris-form-suffix][solaris-form-suffix-action]\"\n    ngProjectAs=\"[solaris-form-suffix-action]\"\n  />\n  <ng-content\n    select=\"[solaris-form-label-action]\"\n    ngProjectAs=\"[solaris-form-label-action]\"\n  />\n</solaris-form-field>\n",
+		template: "<solaris-form-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [error]=\"error() || computedError()\"\n  [labelKey]=\"labelKey()\"\n  [hintKey]=\"hintKey()\"\n  [errorKey]=\"errorKey()\"\n  [required]=\"requiredInput()\"\n  [optional]=\"optional()\"\n  [appearance]=\"appearance()\"\n  [density]=\"effectiveDensity()\"\n  [size]=\"size()\"\n  [radius]=\"radius()\"\n  [invalid]=\"isFieldInvalid()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [readonly]=\"isEffectivelyReadonly()\"\n  [loading]=\"loading()\"\n  [control]=\"this\"\n  [hasSuffixAction]=\"!!projectedSuffixAction()\"\n>\n  <div\n    class=\"solaris-otp-input__boxes\"\n    solaris-form-field-trigger\n    role=\"group\"\n    [attr.aria-label]=\"groupAriaLabel() || null\"\n  >\n    @for (box of boxes(); track $index; let index = $index) {\n      <input\n        #box\n        type=\"text\"\n        class=\"solaris-otp-input__box\"\n        [attr.inputmode]=\"inputmode()\"\n        maxlength=\"1\"\n        autocomplete=\"one-time-code\"\n        [attr.aria-label]=\"boxAriaLabel(index)\"\n        [attr.aria-describedby]=\"ariaDescribedBy()\"\n        [attr.data-active]=\"focusedIndex() === index ? '' : null\"\n        [value]=\"box\"\n        [disabled]=\"isEffectivelyDisabled() || loading()\"\n        [readonly]=\"isEffectivelyReadonly()\"\n        (input)=\"onBoxInput($event, index)\"\n        (keydown)=\"onBoxKeydown($event, index)\"\n        (paste)=\"onBoxPaste($event, index)\"\n        (focus)=\"onBoxFocus(index)\"\n        (blur)=\"onBoxBlur()\"\n      />\n      @if (showSeparatorAfter(index)) {\n        <span class=\"solaris-otp-input__separator\" aria-hidden=\"true\">-</span>\n      }\n    }\n  </div>\n  <ng-content\n    select=\"[solaris-form-suffix-action]\"\n    ngProjectAs=\"[solaris-form-suffix-action]\"\n  />\n  <ng-content\n    select=\"[solaris-form-label-action]\"\n    ngProjectAs=\"[solaris-form-label-action]\"\n  />\n</solaris-form-field>\n",
 		styles: [":host{--solaris-otp-input-gap: var(--solaris-spacing-2);--solaris-otp-input-box-radius: var(--solaris-radius-sm);--solaris-otp-input-box-border-color: var(--solaris-neutral-border-subtle);--solaris-otp-input-box-border-width: var(--solaris-border-width-sm);--solaris-otp-input-box-background: transparent;--solaris-otp-input-box-color: var(--solaris-neutral-text-body);--solaris-otp-input-box-active-border-color: var( --solaris-neutral-border-strong );--solaris-otp-input-box-error-border-color: var(--solaris-danger-solid);--solaris-otp-input-box-width: calc( var(--solaris-control-height-normal-md) * .9 );--solaris-otp-input-box-height: calc( var(--solaris-control-height-normal-md) * 1.15 );--solaris-otp-input-separator-color: var(--solaris-neutral-text-secondary);--solaris-otp-input-box-font-size: var(--solaris-font-size-sm);display:block;box-sizing:border-box}:host solaris-form-field ::ng-deep .solaris-form-field__control-wrapper{border:0 transparent;background:transparent}:host([data-radius=none]){--solaris-otp-input-box-radius: var(--solaris-radius-none)}:host([data-radius=sm]){--solaris-otp-input-box-radius: var(--solaris-radius-sm)}:host([data-radius=md]){--solaris-otp-input-box-radius: var(--solaris-radius-md)}:host([data-radius=lg]){--solaris-otp-input-box-radius: var(--solaris-radius-lg)}:host([data-radius=xl]){--solaris-otp-input-box-radius: var(--solaris-radius-full)}:host([data-density=compact]){--solaris-otp-input-box-font-size: var(--solaris-font-size-xs);--solaris-otp-input-gap: var(--solaris-spacing-1)}:host([data-density=normal]){--solaris-otp-input-box-font-size: var(--solaris-font-size-sm);--solaris-otp-input-gap: var(--solaris-spacing-2)}:host([data-density=comfortable]){--solaris-otp-input-box-font-size: var(--solaris-font-size-md);--solaris-otp-input-gap: var(--solaris-spacing-3)}.solaris-otp-input__boxes{display:flex;box-sizing:border-box;align-items:center;gap:var(--solaris-otp-input-gap);padding-block:var(--solaris-spacing-2)}.solaris-otp-input__box{box-sizing:border-box;width:var(--solaris-otp-input-box-width);height:var(--solaris-otp-input-box-height);margin:0;padding:0;text-align:center;color:var(--solaris-otp-input-box-color);font-size:var(--solaris-otp-input-box-font-size);line-height:var(--solaris-line-height-none);background:var(--solaris-otp-input-box-background);border-radius:var(--solaris-otp-input-box-radius);border:var(--solaris-otp-input-box-border-width) solid var(--solaris-otp-input-box-border-color);transition:border-color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard),box-shadow var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-otp-input__box:focus{outline:none;border-color:var(--solaris-otp-input-box-active-border-color);box-shadow:none}.solaris-otp-input__box[data-active]{border-color:var(--solaris-otp-input-box-active-border-color)}.solaris-otp-input__box[disabled]{cursor:not-allowed;opacity:var(--solaris-opacity-50)}.solaris-otp-input__box:hover:not([disabled]){border-color:var(--solaris-otp-input-box-active-border-color)}:host([data-appearance=surface]){--solaris-otp-input-box-background: var(--solaris-neutral-subtle);--solaris-otp-input-box-border-width: 0}:host([data-appearance=filled]){--solaris-otp-input-box-background: var(--solaris-neutral-subtle);--solaris-otp-input-box-border-width: var(--solaris-border-width-sm)}:host([data-invalid]) .solaris-otp-input__box{border-color:var(--solaris-otp-input-box-error-border-color)}:host([data-size=sm][data-density=compact]){--solaris-otp-input-box-width: calc( var(--solaris-control-height-compact-sm) * .9 );--solaris-otp-input-box-height: calc( var(--solaris-control-height-compact-sm) * 1.15 )}:host([data-size=md][data-density=compact]){--solaris-otp-input-box-width: calc( var(--solaris-control-height-compact-md) * .9 );--solaris-otp-input-box-height: calc( var(--solaris-control-height-compact-md) * 1.15 )}:host([data-size=lg][data-density=compact]){--solaris-otp-input-box-width: calc( var(--solaris-control-height-compact-lg) * .9 );--solaris-otp-input-box-height: calc( var(--solaris-control-height-compact-lg) * 1.15 )}:host([data-size=sm][data-density=normal]){--solaris-otp-input-box-width: calc( var(--solaris-control-height-normal-sm) * .9 );--solaris-otp-input-box-height: calc( var(--solaris-control-height-normal-sm) * 1.15 )}:host([data-size=md][data-density=normal]){--solaris-otp-input-box-width: calc( var(--solaris-control-height-normal-md) * .9 );--solaris-otp-input-box-height: calc( var(--solaris-control-height-normal-md) * 1.15 )}:host([data-size=lg][data-density=normal]){--solaris-otp-input-box-width: calc( var(--solaris-control-height-normal-lg) * .9 );--solaris-otp-input-box-height: calc( var(--solaris-control-height-normal-lg) * 1.15 )}:host([data-size=sm][data-density=comfortable]){--solaris-otp-input-box-width: calc( var(--solaris-control-height-comfortable-sm) * .9 );--solaris-otp-input-box-height: calc( var(--solaris-control-height-comfortable-sm) * 1.15 )}:host([data-size=md][data-density=comfortable]){--solaris-otp-input-box-width: calc( var(--solaris-control-height-comfortable-md) * .9 );--solaris-otp-input-box-height: calc( var(--solaris-control-height-comfortable-md) * 1.15 )}:host([data-size=lg][data-density=comfortable]){--solaris-otp-input-box-width: calc( var(--solaris-control-height-comfortable-lg) * .9 );--solaris-otp-input-box-height: calc( var(--solaris-control-height-comfortable-lg) * 1.15 )}.solaris-otp-input__separator{flex:0 0 auto;-webkit-user-select:none;user-select:none;color:var(--solaris-otp-input-separator-color);font-size:var(--solaris-otp-input-box-font-size);line-height:var(--solaris-line-height-none)}@media(prefers-reduced-motion:reduce){.solaris-otp-input__box{transition:none}}\n"],
 		dependencies: [
 			{
@@ -54523,7 +54692,7 @@ i0.ɵɵngDeclareClassMetadata({
 				"[attr.data-char-type]": "charType()",
 				"[attr.data-invalid]": "isFieldInvalid() ? \"\" : null"
 			},
-			template: "<solaris-form-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [error]=\"error() || computedError()\"\n  [labelKey]=\"labelKey()\"\n  [hintKey]=\"hintKey()\"\n  [errorKey]=\"errorKey()\"\n  [required]=\"requiredInput()\"\n  [optional]=\"optional()\"\n  [appearance]=\"appearance()\"\n  [density]=\"effectiveDensity()\"\n  [size]=\"size()\"\n  [radius]=\"radius()\"\n  [invalid]=\"isFieldInvalid()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [readonly]=\"isEffectivelyReadonly()\"\n  [loading]=\"loading()\"\n  [control]=\"this\"\n  [hasSuffixAction]=\"!!projectedSuffixAction()\"\n>\n  <div\n    class=\"solaris-otp-input__boxes\"\n    solaris-form-field-trigger\n    role=\"group\"\n    [attr.aria-label]=\"groupAriaLabel() || null\"\n  >\n    @for (box of boxes(); track $index; let index = $index) {\n      <input\n        #box\n        type=\"text\"\n        class=\"solaris-otp-input__box\"\n        [attr.inputmode]=\"inputmode()\"\n        maxlength=\"1\"\n        autocomplete=\"one-time-code\"\n        [attr.aria-label]=\"boxAriaLabel(index)\"\n        [attr.aria-describedby]=\"ariaDescribedBy()\"\n        [attr.data-active]=\"focusedIndex() === index ? '' : null\"\n        [value]=\"box\"\n        [disabled]=\"isEffectivelyDisabled() || loading()\"\n        [readonly]=\"isEffectivelyReadonly()\"\n        (input)=\"onBoxInput($event, index)\"\n        (keydown)=\"onBoxKeydown($event, index)\"\n        (paste)=\"onBoxPaste($event, index)\"\n        (focus)=\"onBoxFocus(index)\"\n        (blur)=\"onBoxBlur()\"\n      />\n      @if (showSeparatorAfter(index)) {\n        <span class=\"solaris-otp-input__separator\" aria-hidden=\"true\">-</span>\n      }\n    }\n  </div>\n  <ng-content\n    select=\"[solaris-form-suffix][solaris-form-suffix-action]\"\n    ngProjectAs=\"[solaris-form-suffix-action]\"\n  />\n  <ng-content\n    select=\"[solaris-form-label-action]\"\n    ngProjectAs=\"[solaris-form-label-action]\"\n  />\n</solaris-form-field>\n",
+			template: "<solaris-form-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [error]=\"error() || computedError()\"\n  [labelKey]=\"labelKey()\"\n  [hintKey]=\"hintKey()\"\n  [errorKey]=\"errorKey()\"\n  [required]=\"requiredInput()\"\n  [optional]=\"optional()\"\n  [appearance]=\"appearance()\"\n  [density]=\"effectiveDensity()\"\n  [size]=\"size()\"\n  [radius]=\"radius()\"\n  [invalid]=\"isFieldInvalid()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [readonly]=\"isEffectivelyReadonly()\"\n  [loading]=\"loading()\"\n  [control]=\"this\"\n  [hasSuffixAction]=\"!!projectedSuffixAction()\"\n>\n  <div\n    class=\"solaris-otp-input__boxes\"\n    solaris-form-field-trigger\n    role=\"group\"\n    [attr.aria-label]=\"groupAriaLabel() || null\"\n  >\n    @for (box of boxes(); track $index; let index = $index) {\n      <input\n        #box\n        type=\"text\"\n        class=\"solaris-otp-input__box\"\n        [attr.inputmode]=\"inputmode()\"\n        maxlength=\"1\"\n        autocomplete=\"one-time-code\"\n        [attr.aria-label]=\"boxAriaLabel(index)\"\n        [attr.aria-describedby]=\"ariaDescribedBy()\"\n        [attr.data-active]=\"focusedIndex() === index ? '' : null\"\n        [value]=\"box\"\n        [disabled]=\"isEffectivelyDisabled() || loading()\"\n        [readonly]=\"isEffectivelyReadonly()\"\n        (input)=\"onBoxInput($event, index)\"\n        (keydown)=\"onBoxKeydown($event, index)\"\n        (paste)=\"onBoxPaste($event, index)\"\n        (focus)=\"onBoxFocus(index)\"\n        (blur)=\"onBoxBlur()\"\n      />\n      @if (showSeparatorAfter(index)) {\n        <span class=\"solaris-otp-input__separator\" aria-hidden=\"true\">-</span>\n      }\n    }\n  </div>\n  <ng-content\n    select=\"[solaris-form-suffix-action]\"\n    ngProjectAs=\"[solaris-form-suffix-action]\"\n  />\n  <ng-content\n    select=\"[solaris-form-label-action]\"\n    ngProjectAs=\"[solaris-form-label-action]\"\n  />\n</solaris-form-field>\n",
 			styles: [":host{--solaris-otp-input-gap: var(--solaris-spacing-2);--solaris-otp-input-box-radius: var(--solaris-radius-sm);--solaris-otp-input-box-border-color: var(--solaris-neutral-border-subtle);--solaris-otp-input-box-border-width: var(--solaris-border-width-sm);--solaris-otp-input-box-background: transparent;--solaris-otp-input-box-color: var(--solaris-neutral-text-body);--solaris-otp-input-box-active-border-color: var( --solaris-neutral-border-strong );--solaris-otp-input-box-error-border-color: var(--solaris-danger-solid);--solaris-otp-input-box-width: calc( var(--solaris-control-height-normal-md) * .9 );--solaris-otp-input-box-height: calc( var(--solaris-control-height-normal-md) * 1.15 );--solaris-otp-input-separator-color: var(--solaris-neutral-text-secondary);--solaris-otp-input-box-font-size: var(--solaris-font-size-sm);display:block;box-sizing:border-box}:host solaris-form-field ::ng-deep .solaris-form-field__control-wrapper{border:0 transparent;background:transparent}:host([data-radius=none]){--solaris-otp-input-box-radius: var(--solaris-radius-none)}:host([data-radius=sm]){--solaris-otp-input-box-radius: var(--solaris-radius-sm)}:host([data-radius=md]){--solaris-otp-input-box-radius: var(--solaris-radius-md)}:host([data-radius=lg]){--solaris-otp-input-box-radius: var(--solaris-radius-lg)}:host([data-radius=xl]){--solaris-otp-input-box-radius: var(--solaris-radius-full)}:host([data-density=compact]){--solaris-otp-input-box-font-size: var(--solaris-font-size-xs);--solaris-otp-input-gap: var(--solaris-spacing-1)}:host([data-density=normal]){--solaris-otp-input-box-font-size: var(--solaris-font-size-sm);--solaris-otp-input-gap: var(--solaris-spacing-2)}:host([data-density=comfortable]){--solaris-otp-input-box-font-size: var(--solaris-font-size-md);--solaris-otp-input-gap: var(--solaris-spacing-3)}.solaris-otp-input__boxes{display:flex;box-sizing:border-box;align-items:center;gap:var(--solaris-otp-input-gap);padding-block:var(--solaris-spacing-2)}.solaris-otp-input__box{box-sizing:border-box;width:var(--solaris-otp-input-box-width);height:var(--solaris-otp-input-box-height);margin:0;padding:0;text-align:center;color:var(--solaris-otp-input-box-color);font-size:var(--solaris-otp-input-box-font-size);line-height:var(--solaris-line-height-none);background:var(--solaris-otp-input-box-background);border-radius:var(--solaris-otp-input-box-radius);border:var(--solaris-otp-input-box-border-width) solid var(--solaris-otp-input-box-border-color);transition:border-color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard),box-shadow var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-otp-input__box:focus{outline:none;border-color:var(--solaris-otp-input-box-active-border-color);box-shadow:none}.solaris-otp-input__box[data-active]{border-color:var(--solaris-otp-input-box-active-border-color)}.solaris-otp-input__box[disabled]{cursor:not-allowed;opacity:var(--solaris-opacity-50)}.solaris-otp-input__box:hover:not([disabled]){border-color:var(--solaris-otp-input-box-active-border-color)}:host([data-appearance=surface]){--solaris-otp-input-box-background: var(--solaris-neutral-subtle);--solaris-otp-input-box-border-width: 0}:host([data-appearance=filled]){--solaris-otp-input-box-background: var(--solaris-neutral-subtle);--solaris-otp-input-box-border-width: var(--solaris-border-width-sm)}:host([data-invalid]) .solaris-otp-input__box{border-color:var(--solaris-otp-input-box-error-border-color)}:host([data-size=sm][data-density=compact]){--solaris-otp-input-box-width: calc( var(--solaris-control-height-compact-sm) * .9 );--solaris-otp-input-box-height: calc( var(--solaris-control-height-compact-sm) * 1.15 )}:host([data-size=md][data-density=compact]){--solaris-otp-input-box-width: calc( var(--solaris-control-height-compact-md) * .9 );--solaris-otp-input-box-height: calc( var(--solaris-control-height-compact-md) * 1.15 )}:host([data-size=lg][data-density=compact]){--solaris-otp-input-box-width: calc( var(--solaris-control-height-compact-lg) * .9 );--solaris-otp-input-box-height: calc( var(--solaris-control-height-compact-lg) * 1.15 )}:host([data-size=sm][data-density=normal]){--solaris-otp-input-box-width: calc( var(--solaris-control-height-normal-sm) * .9 );--solaris-otp-input-box-height: calc( var(--solaris-control-height-normal-sm) * 1.15 )}:host([data-size=md][data-density=normal]){--solaris-otp-input-box-width: calc( var(--solaris-control-height-normal-md) * .9 );--solaris-otp-input-box-height: calc( var(--solaris-control-height-normal-md) * 1.15 )}:host([data-size=lg][data-density=normal]){--solaris-otp-input-box-width: calc( var(--solaris-control-height-normal-lg) * .9 );--solaris-otp-input-box-height: calc( var(--solaris-control-height-normal-lg) * 1.15 )}:host([data-size=sm][data-density=comfortable]){--solaris-otp-input-box-width: calc( var(--solaris-control-height-comfortable-sm) * .9 );--solaris-otp-input-box-height: calc( var(--solaris-control-height-comfortable-sm) * 1.15 )}:host([data-size=md][data-density=comfortable]){--solaris-otp-input-box-width: calc( var(--solaris-control-height-comfortable-md) * .9 );--solaris-otp-input-box-height: calc( var(--solaris-control-height-comfortable-md) * 1.15 )}:host([data-size=lg][data-density=comfortable]){--solaris-otp-input-box-width: calc( var(--solaris-control-height-comfortable-lg) * .9 );--solaris-otp-input-box-height: calc( var(--solaris-control-height-comfortable-lg) * 1.15 )}.solaris-otp-input__separator{flex:0 0 auto;-webkit-user-select:none;user-select:none;color:var(--solaris-otp-input-separator-color);font-size:var(--solaris-otp-input-box-font-size);line-height:var(--solaris-line-height-none)}@media(prefers-reduced-motion:reduce){.solaris-otp-input__box{transition:none}}\n"]
 		}]
 	}],
@@ -82284,6 +82453,6 @@ function provideSolaris(config) {
 	if (config?.translate) providers.push(...provideSolarisTranslate(config.translate));
 	return providers;
 }
-export { DEFAULT_CODE_BLOCK_COLLAPSED_LINES, DEFAULT_CODE_BLOCK_COPIED_DURATION, DEFAULT_PREVIEW_CODE_ALIGN, DEFAULT_PREVIEW_CODE_APPEARANCE, DEFAULT_PREVIEW_CODE_COLLAPSED_LINES, DEFAULT_PREVIEW_CODE_MIN_HEIGHT, DEFAULT_PREVIEW_CODE_PADDING, DEFAULT_PREVIEW_CODE_SIZE, DEFAULT_PREVIEW_CODE_TAB, DEFAULT_SHELL_PERIODS, DEFAULT_SOLARIS_EXPORT_MAX_ROWS, GradebookAutofocusDirective, SOLARIS_ACCESSIBILITY_CONFIG, SOLARIS_AVATAR_DEFAULT_WORKING_HOURS, SOLARIS_BAR_CHART_HEIGHT, SOLARIS_BAR_CHART_HORIZONTAL_PADDING, SOLARIS_BAR_CHART_PADDING, SOLARIS_BAR_CHART_WIDTH, SOLARIS_BUILT_IN_ICONS, SOLARIS_CALENDAR_DRAG_DEFAULT_STEP, SOLARIS_CALENDAR_DRAG_MAX_STEP, SOLARIS_CALENDAR_DRAG_MIN_STEP, SOLARIS_CHART_PALETTE, SOLARIS_CODE_HIGHLIGHTER, SOLARIS_CSV_DELIMITER_PRESETS, SOLARIS_DAY_MINUTES, SOLARIS_DENSITY_DEFAULT_ATTRIBUTE, SOLARIS_DIALOG_CONFIG, SOLARIS_DIALOG_DATA, SOLARIS_DIALOG_REF, SOLARIS_DUOTONE_SVG, SOLARIS_EXPORTERS, SOLARIS_EXPORT_CONFIG, SOLARIS_FILE_UPLOAD_DEFAULT_MAX_FILES, SOLARIS_FILE_UPLOAD_DEFAULT_MAX_SIZE, SOLARIS_FILE_UPLOAD_HANDLER, SOLARIS_GAUGE_CHART_HEIGHT, SOLARIS_GAUGE_CHART_RADIUS, SOLARIS_GAUGE_CHART_STROKE, SOLARIS_GAUGE_CHART_WIDTH, SOLARIS_GRADEBOOK_AGGREGATES, SOLARIS_GRADEBOOK_CELL_STATUSES, SOLARIS_GRADEBOOK_CELL_TEMPLATE_ID, SOLARIS_GRADEBOOK_CONCEPT_SCALE, SOLARIS_GRADEBOOK_EDITOR_TEMPLATE_ID, SOLARIS_GRADEBOOK_HEADER_TEMPLATE_ID, SOLARIS_GRADEBOOK_IDENTITY_COLUMN_ID, SOLARIS_GRADEBOOK_SCALES, SOLARIS_GRADEBOOK_SCORE_100_SCALE, SOLARIS_GRADEBOOK_SCORE_10_SCALE, SOLARIS_GRADEBOOK_STATUS_TEMPLATE_ID, SOLARIS_HEATMAP_ANCHOR_GAP, SOLARIS_HEATMAP_CELL_SIZE, SOLARIS_HEATMAP_ENTER_CELL_DELAY_MS, SOLARIS_HEATMAP_ENTER_MAX_DELAY_MS, SOLARIS_HEATMAP_GAP, SOLARIS_HEATMAP_HEADER_HEIGHT, SOLARIS_HEATMAP_MAX_FILL_MIX, SOLARIS_HEATMAP_MIN_FILL_MIX, SOLARIS_ICONS_CONFIG, SOLARIS_ICONS_METADATA, SOLARIS_LINE_CHART_HEIGHT, SOLARIS_LINE_CHART_PADDING, SOLARIS_LINE_CHART_WIDTH, SOLARIS_PIE_CHART_DONUT_RATIO, SOLARIS_PIE_CHART_GRADIENT_RADIUS_RATIO, SOLARIS_PIE_CHART_HEIGHT, SOLARIS_PIE_CHART_RADIUS, SOLARIS_PIE_CHART_TOOLTIP_OFFSET, SOLARIS_PIE_CHART_WIDTH, SOLARIS_PIE_ENTER_GAUGE_DURATION_MS, SOLARIS_PIE_ENTER_SLICE_DELAY_MS, SOLARIS_PIE_ENTER_SLICE_DURATION_MS, SOLARIS_PREVIEW_CODE_ALIGNS, SOLARIS_PREVIEW_CODE_MIN_HEIGHTS, SOLARIS_PREVIEW_CODE_PADDINGS, SOLARIS_PREVIEW_CODE_TABS, SOLARIS_PREVIEW_CODE_TOKENS, SOLARIS_RADAR_CHART_ANCHOR_OFFSET, SOLARIS_RADAR_CHART_HEIGHT, SOLARIS_RADAR_CHART_LABEL_OFFSET, SOLARIS_RADAR_CHART_LEVELS, SOLARIS_RADAR_CHART_RADIUS, SOLARIS_RADAR_CHART_WIDTH, SOLARIS_RADAR_ENTER_SERIES_DELAY_MS, SOLARIS_RADAR_ENTER_SERIES_DURATION_MS, SOLARIS_RECORD_GRID_CELL_TEMPLATE_ID, SOLARIS_RECORD_GRID_FOOTER_CELL_TEMPLATE_ID, SOLARIS_RECORD_GRID_FORMULAS, SOLARIS_RECORD_GRID_HEADER_TEMPLATE_ID, SOLARIS_RECORD_GRID_SELECTION_COLUMN_ID, SOLARIS_RECURRENCE_MAX_RESULTS, SOLARIS_SEGMENTED_CONTROL, SOLARIS_SOLID_SVG, SOLARIS_SPARKLINE_HEIGHT, SOLARIS_SPARKLINE_WIDTH, SOLARIS_STEPPER, SOLARIS_TABLE_APPEARANCES, SOLARIS_TABLE_CELL_PADDINGS, SOLARIS_TABLE_COLUMN_TYPES, SOLARIS_TABLE_DETAIL_VARIANTS, SOLARIS_TABLE_EXPAND_MODES, SOLARIS_TABLE_FILTER_OPERATORS, SOLARIS_TABLE_LAYOUTS, SOLARIS_TABLE_RADII, SOLARIS_TABLE_SELECTION_MODES, SOLARIS_TABLE_STRIPED_MODES, SOLARIS_TABLE_TOOLBAR_EXPORT_DISPLAYS, SOLARIS_TABS, SOLARIS_THEME_CONFIG, SOLARIS_TOAST_CONFIG, SOLARIS_TRANSLATE_CONFIG, SolarisAccessibilityService, SolarisAccordionComponent, SolarisAlertActionsComponent, SolarisAlertComponent, SolarisAlertDescriptionDirective, SolarisAlertTitleDirective, SolarisAnimatedIconComponent, SolarisAnnouncementActionsDirective, SolarisAnnouncementComponent, SolarisAnnouncementMediaDirective, SolarisAvatarComponent, SolarisAvatarGroupBadgeComponent, SolarisAvatarGroupComponent, SolarisAvatarPresenceService, SolarisAvatarProfileComponent, SolarisBadgeComponent, SolarisBadgeIconDirective, SolarisBarChartComponent, SolarisBreadcrumbComponent, SolarisButtonDirective, SolarisButtonGroupComponent, SolarisButtonIconDirective, SolarisCalendarComponent, SolarisCalendarEditorDialogComponent, SolarisCalendarEventEditorComponent, SolarisCalendarMonthViewComponent, SolarisCalendarScheduleViewComponent, SolarisCalendarWeekViewComponent, SolarisCalendarYearViewComponent, SolarisCardActionsDirective, SolarisCardComponent, SolarisCardContentDirective, SolarisCardDescriptionDirective, SolarisCardFooterDirective, SolarisCardHeaderDirective, SolarisCardMediaDirective, SolarisCardTitleDirective, SolarisChartShellComponent, SolarisCheckboxComponent, SolarisCheckboxGroupComponent, SolarisCodeBlockComponent, SolarisCollapsibleAddDialogComponent, SolarisCollapsibleComponent, SolarisCollapsibleInputComponent, SolarisColumnManagerComponent, SolarisDatePickerComponent, SolarisDateRangePickerComponent, SolarisDialogActionsComponent, SolarisDialogCloseDirective, SolarisDialogComponent, SolarisDialogContainerComponent, SolarisDialogContentComponent, SolarisDialogFlowComponent, SolarisDialogFooterComponent, SolarisDialogHeaderComponent, SolarisDialogRef, SolarisDialogService, SolarisDialogStepComponent, SolarisDividerComponent, SolarisDividerStackComponent, SolarisDropdownMenuComponent, SolarisDropdownMenuGroupComponent, SolarisDropdownMenuItemComponent, SolarisDropdownMenuLabelComponent, SolarisDropdownMenuTriggerDirective, SolarisDropdownSubmenuComponent, SolarisDropdownSubmenuTriggerComponent, SolarisEditableTabComponent, SolarisEditableTabsComponent, SolarisEmailFieldComponent, SolarisExportService, SolarisFileListComponent, SolarisFileListItemComponent, SolarisFileUploadComponent, SolarisFileUploadHandler, SolarisFormErrorComponent, SolarisFormFieldComponent, SolarisFormHintComponent, SolarisFormLabelActionDirective, SolarisFormLabelComponent, SolarisFormPrefixDirective, SolarisFormSuffixActionDirective, SolarisFormSuffixDirective, SolarisGradebookComponent, SolarisGradebookLegendComponent, SolarisHeatmapComponent, SolarisIconButtonBadgeDirective, SolarisIconButtonDirective, SolarisIconComponent, SolarisIconRegistryService, SolarisImageEditorComponent, SolarisInputDirective, SolarisLineChartComponent, SolarisLoadingTextComponent, SolarisLoadingZoneDirective, SolarisMegaMenuAnchorDirective, SolarisMegaMenuComponent, SolarisMegaMenuGroupDirective, SolarisMegaMenuPanelDirective, SolarisMegaMenuTriggerDirective, SolarisMenuToggleDirective, SolarisMultiSelectComponent, SolarisOptionComponent, SolarisOptionDescriptionDirective, SolarisOptionGroupComponent, SolarisOptionLabelDirective, SolarisOptionLeadingDirective, SolarisOptionMetaDirective, SolarisOptionTrailingDirective, SolarisOtpInputComponent, SolarisPaginationComponent, SolarisPasswordFieldComponent, SolarisPhoneCountryListComponent, SolarisPhoneFieldComponent, SolarisPieChartComponent, SolarisPopoverDirective, SolarisPopoverPanelComponent, SolarisPopoverTriggerDirective, SolarisPreviewCodeComponent, SolarisProgressComponent, SolarisRadarComponent, SolarisRadioComponent, SolarisRadioGroupComponent, SolarisRecordGridComponent, SolarisRecordGridFormulaError, SolarisSegmentedControlComponent, SolarisSegmentedItemComponent, SolarisSelectComponent, SolarisSelectionCardComponent, SolarisSelectionCardContentDirective, SolarisSelectionCardDescriptionDirective, SolarisSelectionCardFooterDirective, SolarisSelectionCardHeaderDirective, SolarisSelectionCardMediaDirective, SolarisSelectionCardTitleDirective, SolarisSkeletonComponent, SolarisSparklineComponent, SolarisSpinnerComponent, SolarisStepComponent, SolarisStepperActionsComponent, SolarisStepperComponent, SolarisStepperContentComponent, SolarisSwitchComponent, SolarisSwitchGroupComponent, SolarisTabComponent, SolarisTabPanelComponent, SolarisTableCellDirective, SolarisTableCellEditorDirective, SolarisTableComponent, SolarisTableDetailDirective, SolarisTableEmptyDirective, SolarisTableErrorDirective, SolarisTableFooterCellDirective, SolarisTableFooterDirective, SolarisTableHeaderDirective, SolarisTableLoadingDirective, SolarisTableToolbarComponent, SolarisTableToolbarDirective, SolarisTableToolbarLeadingDirective, SolarisTableToolbarTrailingDirective, SolarisTabsComponent, SolarisTextareaDirective, SolarisThemeService, SolarisToastComponent, SolarisToastContainerComponent, SolarisToastService, SolarisTooltipDirective, SolarisTooltipPanelComponent, SolarisTranslatePipe, SolarisTranslateService, SolarisVisuallyHiddenDirective, XhrFileUploadHandler, activeTableFilterCount, addDaysPreservingSolarisWall, addDaysToSolarisDate, addMinutesToSolarisDateTime, aggregateGradeValues, applyColumnOrder, applyColumnVisibility, applyOrderedVisibleColumns, applyTableFilters, barChartValuePosition, buildBarChartFrame, buildCsvContent, buildFormulaGraph, buildGaugeGeometry, buildGradebookColumns, buildHeatmapFrame, buildJsonContent, buildLineChartFrame, buildMonthCreateProposal, buildMonthMoveProposal, buildPieChartFrame, buildRadarFrame, buildRecordGridColumns, buildSparklineGeometry, buildSvgAreaPath, buildSvgLinePath, buildWeekCreateProposal, buildWeekMoveProposal, buildWeekResizeProposal, builtInHolidays, chartFallbackLanguage, clampHeatmapPercent, clampPageIndex, clampRadarPercent, clearSolarisAnnouncementDismissed, clipSpanToDay, compareRecordSortable, compareSolarisDateTimes, computeEasterSunday, computeRowGrade, configureSolarisTesting, createClientTableDataSource, createCsvExporter, createEmptyTableFilterState, createJsonExporter, createServerTableDataSource, defaultScoresOf, defaultSolarisTimeZone, defaultWriteRecordValue, diffSolarisCivilDays, diffSolarisDateTimeMinutes, easeOutCubic, easeOutRadar, escapeCsvCell, expandLocaleYearHolidays, expandSolarisRecurrence, formatAggregateValue, formatGradeCell, formatTimeZoneOffset, gaugeAnchorPoint, gaugeArcPath, gaugeTargetTick, getTimeZoneOffsetMinutes, getWeekdayInZone, getZonedWall, gradebookAssignmentIdOf, groupSmallChartSlices, heatmapAnchorPoint, heatmapCellFill, heatmapCellKey, heatmapEnterDelayMs, heatmapFillMix, heatmapIntensity, heatmapTooltipSide, iconElementsToInner, insertColumnBefore, isBuiltInHolidaysLoaded, isChartSeriesEmpty, isNarrowViewport, isPassingGrade, isSafeIconSvgInner, isSolarisAnnouncementDismissed, isSolarisDateTimeValue, isSolarisDateValue, isSolarisWeekend, isTableDataSource, isTableFilterActive, isValidCondition, lastWeekdayOfMonth, layoutOverlappingSpans, lineChartYPosition, matchesTableFilterCondition, moveColumnInOrder, nextIdFor, normalizeCustomDays, normalizeDragSnapStep, normalizeGradeValue, normalizeRecordValue, normalizeShellView, normalizeStacked100, normalizeTableFilterState, nthWeekdayOfMonth, orderFromColumns, parseSolarisDateParts, parseSolarisDateTimeMs, parseTableFilterState, persistSolarisAnnouncementDismissed, pieEnterTotalMs, pieSliceAnchorPoint, pieSliceEnterProgress, pieSliceLabelPosition, pieSlicePath, pieTooltipSide, preloadBuiltInHolidays, provideSolaris, provideSolarisAccessibilityTesting, provideSolarisCodeHighlighter, provideSolarisExport, provideSolarisShikiHighlighter, provideSolarisTesting, provideSolarisThemeTesting, provideSolarisTranslateTesting, radarAnchorPoint, radarEnterProgress, radarEnterTotalMs, radarPolygonPath, radarSeriesFill, radarTooltipSide, radarVertexPoint, readPersistedTableFilterState, recordGridColumnIdOf, resolveBarLabelEvery, resolveBodySpans, resolveCellValue, resolveChartDomain, resolveChartFallback, resolveChartSeriesColor, resolveChartTicks, resolveDisplayValue, resolveDragOccurrenceScope, resolveEffectiveView, resolveElementId, resolveExportFilename, resolveFilterDisplayText, resolveFilterValue, resolveFooterValue, resolveGradeBand, resolveGradebookScale, resolveHeaderGroupSpans, resolveHeatmapMax, resolveMiniMonth, resolveRadarMax, resolveRecordValues, resolveRowId, resolveRows, resolveSectionGroups, resolveSolarisEventDelete, resolveSolarisEventSave, resolveSolarisWallTimeMs, resolveSortValue, sanitizeIconSvgInner, serializeTableFilterState, seriesToPieSlices, shiftShellDate, shiftSolarisCivilMonth, sliceRows, snapMinutesToStep, solarisAllowedDomainsValidator, solarisBlockedDomainsValidator, solarisChartColorVar, solarisChartSoftVar, solarisCivilWeekday, solarisEmailValidator, solarisOtpValidator, solarisPasswordValidator, solarisPhoneValidator, sortRows, startOfSolarisDay, startOfSolarisMonth, startOfSolarisWeek, sumLineChartValuesAt, toRecordSortable, toSolarisDateInZone, toSolarisDateTimeValue, topoSortFormulaColumns, truncateBarCategoryLabel, visibleChartSeries, visibleDaysForView, visibleRadarSeries, writePersistedTableFilterState };
+export { DEFAULT_CODE_BLOCK_COLLAPSED_LINES, DEFAULT_CODE_BLOCK_COPIED_DURATION, DEFAULT_PREVIEW_CODE_ALIGN, DEFAULT_PREVIEW_CODE_APPEARANCE, DEFAULT_PREVIEW_CODE_COLLAPSED_LINES, DEFAULT_PREVIEW_CODE_MIN_HEIGHT, DEFAULT_PREVIEW_CODE_PADDING, DEFAULT_PREVIEW_CODE_SIZE, DEFAULT_PREVIEW_CODE_TAB, DEFAULT_SHELL_PERIODS, DEFAULT_SOLARIS_EXPORT_MAX_ROWS, GradebookAutofocusDirective, SOLARIS_ACCESSIBILITY_CONFIG, SOLARIS_AVATAR_DEFAULT_WORKING_HOURS, SOLARIS_BAR_CHART_HEIGHT, SOLARIS_BAR_CHART_HORIZONTAL_PADDING, SOLARIS_BAR_CHART_PADDING, SOLARIS_BAR_CHART_WIDTH, SOLARIS_BUILT_IN_ICONS, SOLARIS_CALENDAR_DRAG_DEFAULT_STEP, SOLARIS_CALENDAR_DRAG_MAX_STEP, SOLARIS_CALENDAR_DRAG_MIN_STEP, SOLARIS_CHART_PALETTE, SOLARIS_CODE_HIGHLIGHTER, SOLARIS_CSV_DELIMITER_PRESETS, SOLARIS_DAY_MINUTES, SOLARIS_DENSITY_DEFAULT_ATTRIBUTE, SOLARIS_DIALOG_CONFIG, SOLARIS_DIALOG_DATA, SOLARIS_DIALOG_REF, SOLARIS_DUOTONE_SVG, SOLARIS_EXPORTERS, SOLARIS_EXPORT_CONFIG, SOLARIS_FILE_UPLOAD_DEFAULT_MAX_FILES, SOLARIS_FILE_UPLOAD_DEFAULT_MAX_SIZE, SOLARIS_FILE_UPLOAD_HANDLER, SOLARIS_GAUGE_CHART_HEIGHT, SOLARIS_GAUGE_CHART_RADIUS, SOLARIS_GAUGE_CHART_STROKE, SOLARIS_GAUGE_CHART_WIDTH, SOLARIS_GRADEBOOK_AGGREGATES, SOLARIS_GRADEBOOK_CELL_STATUSES, SOLARIS_GRADEBOOK_CELL_TEMPLATE_ID, SOLARIS_GRADEBOOK_CONCEPT_SCALE, SOLARIS_GRADEBOOK_EDITOR_TEMPLATE_ID, SOLARIS_GRADEBOOK_HEADER_TEMPLATE_ID, SOLARIS_GRADEBOOK_IDENTITY_COLUMN_ID, SOLARIS_GRADEBOOK_SCALES, SOLARIS_GRADEBOOK_SCORE_100_SCALE, SOLARIS_GRADEBOOK_SCORE_10_SCALE, SOLARIS_GRADEBOOK_STATUS_TEMPLATE_ID, SOLARIS_HEATMAP_ANCHOR_GAP, SOLARIS_HEATMAP_CELL_SIZE, SOLARIS_HEATMAP_ENTER_CELL_DELAY_MS, SOLARIS_HEATMAP_ENTER_MAX_DELAY_MS, SOLARIS_HEATMAP_GAP, SOLARIS_HEATMAP_HEADER_HEIGHT, SOLARIS_HEATMAP_MAX_FILL_MIX, SOLARIS_HEATMAP_MIN_FILL_MIX, SOLARIS_ICONS_CONFIG, SOLARIS_ICONS_METADATA, SOLARIS_LINE_CHART_HEIGHT, SOLARIS_LINE_CHART_PADDING, SOLARIS_LINE_CHART_WIDTH, SOLARIS_PIE_CHART_DONUT_RATIO, SOLARIS_PIE_CHART_GRADIENT_RADIUS_RATIO, SOLARIS_PIE_CHART_HEIGHT, SOLARIS_PIE_CHART_RADIUS, SOLARIS_PIE_CHART_TOOLTIP_OFFSET, SOLARIS_PIE_CHART_WIDTH, SOLARIS_PIE_ENTER_GAUGE_DURATION_MS, SOLARIS_PIE_ENTER_SLICE_DELAY_MS, SOLARIS_PIE_ENTER_SLICE_DURATION_MS, SOLARIS_PREVIEW_CODE_ALIGNS, SOLARIS_PREVIEW_CODE_MIN_HEIGHTS, SOLARIS_PREVIEW_CODE_PADDINGS, SOLARIS_PREVIEW_CODE_TABS, SOLARIS_PREVIEW_CODE_TOKENS, SOLARIS_RADAR_CHART_ANCHOR_OFFSET, SOLARIS_RADAR_CHART_HEIGHT, SOLARIS_RADAR_CHART_LABEL_OFFSET, SOLARIS_RADAR_CHART_LEVELS, SOLARIS_RADAR_CHART_RADIUS, SOLARIS_RADAR_CHART_WIDTH, SOLARIS_RADAR_ENTER_SERIES_DELAY_MS, SOLARIS_RADAR_ENTER_SERIES_DURATION_MS, SOLARIS_RECORD_GRID_CELL_TEMPLATE_ID, SOLARIS_RECORD_GRID_FOOTER_CELL_TEMPLATE_ID, SOLARIS_RECORD_GRID_FORMULAS, SOLARIS_RECORD_GRID_HEADER_TEMPLATE_ID, SOLARIS_RECORD_GRID_SELECTION_COLUMN_ID, SOLARIS_RECURRENCE_MAX_RESULTS, SOLARIS_SEGMENTED_CONTROL, SOLARIS_SOLID_SVG, SOLARIS_SPARKLINE_HEIGHT, SOLARIS_SPARKLINE_WIDTH, SOLARIS_STEPPER, SOLARIS_TABLE_APPEARANCES, SOLARIS_TABLE_CELL_PADDINGS, SOLARIS_TABLE_COLUMN_TYPES, SOLARIS_TABLE_DETAIL_VARIANTS, SOLARIS_TABLE_EXPAND_MODES, SOLARIS_TABLE_FILTER_OPERATORS, SOLARIS_TABLE_LAYOUTS, SOLARIS_TABLE_RADII, SOLARIS_TABLE_SELECTION_MODES, SOLARIS_TABLE_STRIPED_MODES, SOLARIS_TABLE_TOOLBAR_EXPORT_DISPLAYS, SOLARIS_TABS, SOLARIS_THEME_CONFIG, SOLARIS_TOAST_CONFIG, SOLARIS_TRANSLATE_CONFIG, SolarisAccessibilityService, SolarisAccordionComponent, SolarisAlertActionsComponent, SolarisAlertComponent, SolarisAlertDescriptionDirective, SolarisAlertTitleDirective, SolarisAnimatedIconComponent, SolarisAnnouncementActionsDirective, SolarisAnnouncementComponent, SolarisAnnouncementMediaDirective, SolarisAvatarComponent, SolarisAvatarGroupBadgeComponent, SolarisAvatarGroupComponent, SolarisAvatarPresenceService, SolarisAvatarProfileComponent, SolarisBadgeComponent, SolarisBadgeIconDirective, SolarisBarChartComponent, SolarisBreadcrumbComponent, SolarisButtonDirective, SolarisButtonGroupComponent, SolarisButtonIconDirective, SolarisCalendarComponent, SolarisCalendarEditorDialogComponent, SolarisCalendarEventEditorComponent, SolarisCalendarMonthViewComponent, SolarisCalendarScheduleViewComponent, SolarisCalendarWeekViewComponent, SolarisCalendarYearViewComponent, SolarisCardActionsDirective, SolarisCardComponent, SolarisCardContentDirective, SolarisCardDescriptionDirective, SolarisCardFooterDirective, SolarisCardHeaderDirective, SolarisCardMediaDirective, SolarisCardTitleDirective, SolarisChartShellComponent, SolarisCheckboxComponent, SolarisCheckboxGroupComponent, SolarisCodeBlockComponent, SolarisCollapsibleAddDialogComponent, SolarisCollapsibleComponent, SolarisCollapsibleInputComponent, SolarisColumnManagerComponent, SolarisDatePickerComponent, SolarisDateRangePickerComponent, SolarisDialogActionsComponent, SolarisDialogCloseDirective, SolarisDialogComponent, SolarisDialogContainerComponent, SolarisDialogContentComponent, SolarisDialogFlowComponent, SolarisDialogFooterComponent, SolarisDialogHeaderComponent, SolarisDialogRef, SolarisDialogService, SolarisDialogStepComponent, SolarisDividerComponent, SolarisDividerStackComponent, SolarisDropdownMenuComponent, SolarisDropdownMenuGroupComponent, SolarisDropdownMenuItemComponent, SolarisDropdownMenuLabelComponent, SolarisDropdownMenuTriggerDirective, SolarisDropdownSubmenuComponent, SolarisDropdownSubmenuTriggerComponent, SolarisEditableTabComponent, SolarisEditableTabsComponent, SolarisEmailFieldComponent, SolarisExportService, SolarisFileListComponent, SolarisFileListItemComponent, SolarisFileUploadComponent, SolarisFileUploadHandler, SolarisFormErrorComponent, SolarisFormFieldComponent, SolarisFormHintComponent, SolarisFormLabelActionDirective, SolarisFormLabelComponent, SolarisFormPrefixDirective, SolarisFormSuffixActionDirective, SolarisFormSuffixDirective, SolarisGradebookComponent, SolarisGradebookLegendComponent, SolarisHeatmapComponent, SolarisIconButtonBadgeDirective, SolarisIconButtonDirective, SolarisIconComponent, SolarisIconRegistryService, SolarisImageEditorComponent, SolarisInputDirective, SolarisLineChartComponent, SolarisLoadingTextComponent, SolarisLoadingZoneDirective, SolarisMegaMenuAnchorDirective, SolarisMegaMenuComponent, SolarisMegaMenuGroupDirective, SolarisMegaMenuPanelDirective, SolarisMegaMenuTriggerDirective, SolarisMenuToggleDirective, SolarisMultiSelectComponent, SolarisOptionComponent, SolarisOptionDescriptionDirective, SolarisOptionGroupComponent, SolarisOptionLabelDirective, SolarisOptionLeadingDirective, SolarisOptionMetaDirective, SolarisOptionTrailingDirective, SolarisOtpInputComponent, SolarisPaginationComponent, SolarisPasswordFieldComponent, SolarisPhoneCountryListComponent, SolarisPhoneFieldComponent, SolarisPieChartComponent, SolarisPopoverDirective, SolarisPopoverPanelComponent, SolarisPopoverTriggerDirective, SolarisPreviewCodeComponent, SolarisProgressComponent, SolarisRadarComponent, SolarisRadioComponent, SolarisRadioGroupComponent, SolarisRecordGridComponent, SolarisRecordGridFormulaError, SolarisSegmentedControlComponent, SolarisSegmentedItemComponent, SolarisSelectComponent, SolarisSelectionCardComponent, SolarisSelectionCardContentDirective, SolarisSelectionCardDescriptionDirective, SolarisSelectionCardFooterDirective, SolarisSelectionCardHeaderDirective, SolarisSelectionCardMediaDirective, SolarisSelectionCardTitleDirective, SolarisSkeletonComponent, SolarisSparklineComponent, SolarisSpinnerComponent, SolarisStepComponent, SolarisStepperActionsComponent, SolarisStepperComponent, SolarisStepperContentComponent, SolarisSwitchComponent, SolarisSwitchGroupComponent, SolarisTabComponent, SolarisTabPanelComponent, SolarisTableCellDirective, SolarisTableCellEditorDirective, SolarisTableComponent, SolarisTableDetailDirective, SolarisTableEmptyDirective, SolarisTableErrorDirective, SolarisTableFooterCellDirective, SolarisTableFooterDirective, SolarisTableHeaderDirective, SolarisTableLoadingDirective, SolarisTableToolbarComponent, SolarisTableToolbarDirective, SolarisTableToolbarLeadingDirective, SolarisTableToolbarTrailingDirective, SolarisTabsComponent, SolarisTextareaDirective, SolarisThemeService, SolarisToastComponent, SolarisToastContainerComponent, SolarisToastService, SolarisTooltipDirective, SolarisTooltipPanelComponent, SolarisTranslatePipe, SolarisTranslateService, SolarisVisuallyHiddenDirective, XhrFileUploadHandler, activeTableFilterCount, addDaysPreservingSolarisWall, addDaysToSolarisDate, addMinutesToSolarisDateTime, aggregateGradeValues, applyColumnOrder, applyColumnVisibility, applyOrderedVisibleColumns, applyTableFilters, barChartValuePosition, buildBarChartFrame, buildCsvContent, buildFormulaGraph, buildGaugeGeometry, buildGradebookColumns, buildHeatmapFrame, buildJsonContent, buildLineChartFrame, buildMonthCreateProposal, buildMonthMoveProposal, buildPieChartFrame, buildRadarFrame, buildRecordGridColumns, buildSparklineGeometry, buildSvgAreaPath, buildSvgLinePath, buildWeekCreateProposal, buildWeekMoveProposal, buildWeekResizeProposal, builtInHolidays, chartFallbackLanguage, clampHeatmapPercent, clampPageIndex, clampRadarPercent, clearSolarisAnnouncementDismissed, clipSpanToDay, compareRecordSortable, compareSolarisDateTimes, computeEasterSunday, computeRowGrade, configureSolarisTesting, createClientTableDataSource, createCsvExporter, createEmptyTableFilterState, createJsonExporter, createServerTableDataSource, defaultScoresOf, defaultSolarisTimeZone, defaultWriteRecordValue, diffSolarisCivilDays, diffSolarisDateTimeMinutes, easeOutCubic, easeOutRadar, escapeCsvCell, expandLocaleYearHolidays, expandSolarisRecurrence, formatAggregateValue, formatGradeCell, formatTimeZoneOffset, gaugeAnchorPoint, gaugeArcPath, gaugeTargetTick, getTimeZoneOffsetMinutes, getWeekdayInZone, getZonedWall, gradebookAssignmentIdOf, groupSmallChartSlices, heatmapAnchorPoint, heatmapCellFill, heatmapCellKey, heatmapEnterDelayMs, heatmapFillMix, heatmapIntensity, heatmapTooltipSide, iconElementsToInner, iconElementsToNodes, insertColumnBefore, isBuiltInHolidaysLoaded, isChartSeriesEmpty, isNarrowViewport, isPassingGrade, isSafeIconSvgInner, isSolarisAnnouncementDismissed, isSolarisDateTimeValue, isSolarisDateValue, isSolarisWeekend, isTableDataSource, isTableFilterActive, isValidCondition, lastWeekdayOfMonth, layoutOverlappingSpans, lineChartYPosition, matchesTableFilterCondition, moveColumnInOrder, nextIdFor, normalizeCustomDays, normalizeDragSnapStep, normalizeGradeValue, normalizeRecordValue, normalizeShellView, normalizeStacked100, normalizeTableFilterState, nthWeekdayOfMonth, orderFromColumns, parseSolarisDateParts, parseSolarisDateTimeMs, parseTableFilterState, persistSolarisAnnouncementDismissed, pieEnterTotalMs, pieSliceAnchorPoint, pieSliceEnterProgress, pieSliceLabelPosition, pieSlicePath, pieTooltipSide, preloadBuiltInHolidays, provideSolaris, provideSolarisAccessibilityTesting, provideSolarisCodeHighlighter, provideSolarisExport, provideSolarisShikiHighlighter, provideSolarisTesting, provideSolarisThemeTesting, provideSolarisTranslateTesting, radarAnchorPoint, radarEnterProgress, radarEnterTotalMs, radarPolygonPath, radarSeriesFill, radarTooltipSide, radarVertexPoint, readPersistedTableFilterState, recordGridColumnIdOf, resolveBarLabelEvery, resolveBodySpans, resolveCellValue, resolveChartDomain, resolveChartFallback, resolveChartSeriesColor, resolveChartTicks, resolveDisplayValue, resolveDragOccurrenceScope, resolveEffectiveView, resolveElementId, resolveExportFilename, resolveFilterDisplayText, resolveFilterValue, resolveFooterValue, resolveGradeBand, resolveGradebookScale, resolveHeaderGroupSpans, resolveHeatmapMax, resolveMiniMonth, resolveRadarMax, resolveRecordValues, resolveRowId, resolveRows, resolveSectionGroups, resolveSolarisEventDelete, resolveSolarisEventSave, resolveSolarisWallTimeMs, resolveSortValue, sanitizeIconSvgInner, sanitizedInnerToNodes, serializeTableFilterState, seriesToPieSlices, shiftShellDate, shiftSolarisCivilMonth, sliceRows, snapMinutesToStep, solarisAllowedDomainsValidator, solarisBlockedDomainsValidator, solarisChartColorVar, solarisChartSoftVar, solarisCivilWeekday, solarisEmailValidator, solarisOtpValidator, solarisPasswordValidator, solarisPhoneValidator, sortRows, startOfSolarisDay, startOfSolarisMonth, startOfSolarisWeek, sumLineChartValuesAt, toRecordSortable, toSolarisDateInZone, toSolarisDateTimeValue, topoSortFormulaColumns, truncateBarCategoryLabel, visibleChartSeries, visibleDaysForView, visibleRadarSeries, writePersistedTableFilterState };
 
 //# sourceMappingURL=educarehq-solaris-ui.mjs.map