@filip.mazev/blocks 1.4.16 → 1.4.17

package/fesm2022/filip.mazev-blocks-forms.mjs

@@ -339,6 +339,139 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
+var CheckboxIndicator = class CheckboxIndicator {
+	checked = input(false, ...ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []);
+	indeterminate = input(false, ...ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []);
+	invalid = input(false, ...ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []);
+	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: CheckboxIndicator,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: CheckboxIndicator,
+		isStandalone: true,
+		selector: "bx-checkbox-indicator",
+		inputs: {
+			checked: {
+				classPropertyName: "checked",
+				publicName: "checked",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			indeterminate: {
+				classPropertyName: "indeterminate",
+				publicName: "indeterminate",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			invalid: {
+				classPropertyName: "invalid",
+				publicName: "invalid",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { attributes: { "aria-hidden": "true" } },
+		ngImport: i0,
+		template: "<span class=\"bx-checkbox-box\" bxSurface [bxSurfaceEmission]=\"invalid() ? 'var(--bx-text-danger)' : 'var(--bx-accent)'\"\n    [class.is-checked]=\"checked() || indeterminate()\" [class.is-invalid]=\"invalid()\" [class.is-disabled]=\"disabled()\">\n    @if (indeterminate()) { <bx-icon name=\"minus\" size=\"16\" /> } @else if (checked()) { <bx-icon name=\"check\" size=\"16\" /> }\n</span>\n",
+		styles: [":host{display:inline-flex;flex:0 0 auto;vertical-align:middle;pointer-events:none;border-radius:var(--bx-rounded-sm)}.bx-checkbox-box{box-sizing:border-box;flex-shrink:0;display:flex;align-items:center;justify-content:center;inline-size:var(--bx-checkbox-size, 1.125rem);block-size:var(--bx-checkbox-size, 1.125rem);line-height:0;background-color:var(--bx-bg-surface);border:1px solid var(--bx-border-strong);border-radius:var(--bx-rounded-sm);color:var(--bx-text-primary);transition-property:border-color;transition-duration:calc(.15s * (1 - var(--bx-reduced-motion, 0)));transition-timing-function:ease}.bx-checkbox-box.is-invalid{border-color:var(--bx-border-danger);background-color:var(--bx-bg-danger-subtle)}.bx-checkbox-box.is-checked{background-color:var(--bx-accent);border-color:var(--bx-accent);color:var(--bx-on-accent)}.bx-checkbox-box.is-checked.is-invalid{background-color:var(--bx-bg-danger);border-color:var(--bx-border-danger)}.bx-checkbox-box[data-bx-surface]{--bx-glass-shadow: none;--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-edge: var(--bx-border-strong);--bx-glass-min-opacity: .65;border:1px solid var(--bx-glass-edge);box-sizing:border-box;--bx-glass-text: var(--bx-text-primary)}.bx-checkbox-box[data-bx-surface].is-checked{--bx-glass-surface: var(--bx-accent);--bx-glass-min-opacity: 1;--bx-glass-edge: var(--bx-border-accent);--bx-glass-text: var(--bx-on-accent)}.bx-checkbox-box[data-bx-surface].is-invalid{--bx-glass-surface: var(--bx-bg-danger-subtle);--bx-glass-edge: var(--bx-border-danger);--bx-glass-text: var(--bx-text-danger)}.bx-checkbox-box[data-bx-surface]:not(.is-disabled,.is-invalid){background-image:linear-gradient(180deg,color-mix(in srgb,var(--bx-border-strong) 24%,var(--bx-glass-surface)),var(--bx-glass-surface) 55%,color-mix(in srgb,var(--bx-border-strong) 10%,var(--bx-glass-surface)))!important;border-top-color:var(--bx-border-strong);border-bottom-color:var(--bx-border-default)}.bx-checkbox-box[data-bx-surface]:not(.is-disabled,.is-invalid).is-checked{background-image:linear-gradient(180deg,color-mix(in srgb,var(--bx-color-accent-50) 24%,var(--bx-accent)),var(--bx-accent) 42%,var(--bx-accent) 65%,color-mix(in srgb,var(--bx-border-accent) 18%,var(--bx-accent)))!important;border-top-color:color-mix(in srgb,var(--bx-color-accent-100) 60%,var(--bx-accent));border-inline-color:var(--bx-accent);border-bottom-color:var(--bx-border-accent)}:host-context(.high-contrast) .bx-checkbox-box[data-bx-surface]:not(.is-disabled,.is-invalid),:host-context(.bx-high-contrast-scope) .bx-checkbox-box[data-bx-surface]:not(.is-disabled,.is-invalid){background-image:none!important;border-color:var(--bx-glass-edge)}@media(forced-colors:active){.bx-checkbox-box[data-bx-surface]:not(.is-disabled,.is-invalid){background-image:none!important;border-color:ButtonText}}\n"],
+		dependencies: [{
+			kind: "directive",
+			type: BxSurfaceDirective,
+			selector: "[bxSurface]",
+			inputs: [
+				"bxSurfaceInteractive",
+				"bxSurfaceGlassiness",
+				"bxSurfaceEmission",
+				"bxSurfaceFocusEmission",
+				"bxReducedTransparency"
+			],
+			exportAs: ["bxSurface"]
+		}, {
+			kind: "component",
+			type: Icon,
+			selector: "bx-icon",
+			inputs: [
+				"name",
+				"size",
+				"color",
+				"bgColor",
+				"strokeWidth",
+				"decorative",
+				"ariaLabel"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: CheckboxIndicator,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "bx-checkbox-indicator",
+			imports: [BxSurfaceDirective, Icon],
+			host: { "aria-hidden": "true" },
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<span class=\"bx-checkbox-box\" bxSurface [bxSurfaceEmission]=\"invalid() ? 'var(--bx-text-danger)' : 'var(--bx-accent)'\"\n    [class.is-checked]=\"checked() || indeterminate()\" [class.is-invalid]=\"invalid()\" [class.is-disabled]=\"disabled()\">\n    @if (indeterminate()) { <bx-icon name=\"minus\" size=\"16\" /> } @else if (checked()) { <bx-icon name=\"check\" size=\"16\" /> }\n</span>\n",
+			styles: [":host{display:inline-flex;flex:0 0 auto;vertical-align:middle;pointer-events:none;border-radius:var(--bx-rounded-sm)}.bx-checkbox-box{box-sizing:border-box;flex-shrink:0;display:flex;align-items:center;justify-content:center;inline-size:var(--bx-checkbox-size, 1.125rem);block-size:var(--bx-checkbox-size, 1.125rem);line-height:0;background-color:var(--bx-bg-surface);border:1px solid var(--bx-border-strong);border-radius:var(--bx-rounded-sm);color:var(--bx-text-primary);transition-property:border-color;transition-duration:calc(.15s * (1 - var(--bx-reduced-motion, 0)));transition-timing-function:ease}.bx-checkbox-box.is-invalid{border-color:var(--bx-border-danger);background-color:var(--bx-bg-danger-subtle)}.bx-checkbox-box.is-checked{background-color:var(--bx-accent);border-color:var(--bx-accent);color:var(--bx-on-accent)}.bx-checkbox-box.is-checked.is-invalid{background-color:var(--bx-bg-danger);border-color:var(--bx-border-danger)}.bx-checkbox-box[data-bx-surface]{--bx-glass-shadow: none;--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-edge: var(--bx-border-strong);--bx-glass-min-opacity: .65;border:1px solid var(--bx-glass-edge);box-sizing:border-box;--bx-glass-text: var(--bx-text-primary)}.bx-checkbox-box[data-bx-surface].is-checked{--bx-glass-surface: var(--bx-accent);--bx-glass-min-opacity: 1;--bx-glass-edge: var(--bx-border-accent);--bx-glass-text: var(--bx-on-accent)}.bx-checkbox-box[data-bx-surface].is-invalid{--bx-glass-surface: var(--bx-bg-danger-subtle);--bx-glass-edge: var(--bx-border-danger);--bx-glass-text: var(--bx-text-danger)}.bx-checkbox-box[data-bx-surface]:not(.is-disabled,.is-invalid){background-image:linear-gradient(180deg,color-mix(in srgb,var(--bx-border-strong) 24%,var(--bx-glass-surface)),var(--bx-glass-surface) 55%,color-mix(in srgb,var(--bx-border-strong) 10%,var(--bx-glass-surface)))!important;border-top-color:var(--bx-border-strong);border-bottom-color:var(--bx-border-default)}.bx-checkbox-box[data-bx-surface]:not(.is-disabled,.is-invalid).is-checked{background-image:linear-gradient(180deg,color-mix(in srgb,var(--bx-color-accent-50) 24%,var(--bx-accent)),var(--bx-accent) 42%,var(--bx-accent) 65%,color-mix(in srgb,var(--bx-border-accent) 18%,var(--bx-accent)))!important;border-top-color:color-mix(in srgb,var(--bx-color-accent-100) 60%,var(--bx-accent));border-inline-color:var(--bx-accent);border-bottom-color:var(--bx-border-accent)}:host-context(.high-contrast) .bx-checkbox-box[data-bx-surface]:not(.is-disabled,.is-invalid),:host-context(.bx-high-contrast-scope) .bx-checkbox-box[data-bx-surface]:not(.is-disabled,.is-invalid){background-image:none!important;border-color:var(--bx-glass-edge)}@media(forced-colors:active){.bx-checkbox-box[data-bx-surface]:not(.is-disabled,.is-invalid){background-image:none!important;border-color:ButtonText}}\n"]
+		}]
+	}],
+	propDecorators: {
+		checked: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "checked",
+				required: false
+			}]
+		}],
+		indeterminate: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "indeterminate",
+				required: false
+			}]
+		}],
+		invalid: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "invalid",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}]
+	}
+});
 var BxError = class BxError {
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
@@ -1805,59 +1938,40 @@ var Checkbox = class Checkbox extends BxCheckedControl {
 		outputs: { indeterminate: "indeterminateChange" },
 		usesInheritance: true,
 		ngImport: i0,
-		template: "<bx-form-field [control]=\"fieldControl\" [inline]=\"true\" [tooltip]=\"tooltip()\" [loading]=\"loading()\"\n    [hint]=\"hint()\" [hintEnd]=\"hintEnd()\" [subscriptSizing]=\"resolvedSubscriptSizing()\" [forId]=\"controlId()\">\n    <label class=\"bx-inline-wrapper\" [class.is-disabled]=\"disabled()\" [class.is-readonly]=\"isReadonly()\" [class.is-keyboard-focused]=\"keyboardFocused()\" [class.label-before]=\"labelPosition() === 'before'\">\n        <input type=\"checkbox\" class=\"bx-visually-hidden\" [id]=\"controlId()\" [attr.name]=\"name() || null\" [attr.data-testid]=\"dataTestId()\"\n            [attr.aria-label]=\"ariaLabel()\" [attr.aria-labelledby]=\"ariaLabelledBy()\" [attr.aria-describedby]=\"describedBy()\"\n            [attr.aria-invalid]=\"showError()\" [attr.aria-readonly]=\"isReadonly()\" [disabled]=\"disabled()\" [required]=\"effectiveRequired()\" [checked]=\"displayedChecked()\" [indeterminate]=\"indeterminate()\"\n            (click)=\"onReadonlyClick($event)\" (change)=\"onToggle($event)\" (blur)=\"onBlur()\">\n        <div class=\"bx-checkbox-box\" bxSurface [bxSurfaceEmission]=\"showError() ? 'var(--bx-text-danger)' : 'var(--bx-accent)'\"\n            [class.is-checked]=\"displayedChecked() || indeterminate()\" [class.is-invalid]=\"showError()\">\n            @if (indeterminate()) { <bx-icon name=\"minus\" size=\"16\" /> } @else if (displayedChecked()) { <bx-icon name=\"check\" size=\"16\" /> }\n        </div>\n        <span class=\"bx-inline-label\"><ng-content />{{ resolvedLabel() }}\n            @if (effectiveRequired() && !resolvedHideRequiredMarker()) { <span class=\"bx-inline-required\" aria-hidden=\"true\">*</span> }\n        </span>\n    </label>\n    <ng-content select=\"bx-error\" ngProjectAs=\"bx-error\" /><ng-content select=\"bx-hint\" ngProjectAs=\"bx-hint\" />\n</bx-form-field>\n",
-		styles: [":host{display:block}.bx-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.bx-inline-wrapper{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none;min-height:1.5rem;vertical-align:middle}.bx-inline-wrapper.is-disabled{opacity:.5;cursor:not-allowed}.bx-inline-wrapper.is-readonly:not(.is-disabled){cursor:default}.bx-inline-label{font-size:.875rem;color:var(--bx-text-primary);line-height:1.5}.bx-inline-required{color:var(--bx-text-danger);margin-left:.125rem}.bx-checkbox-box{box-sizing:border-box;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.125rem;height:1.125rem;line-height:0;background-color:var(--bx-bg-surface);border:1px solid var(--bx-border-strong);border-radius:var(--bx-rounded-sm);color:var(--bx-text-primary);transition:border-color .15s ease}.bx-checkbox-box.is-invalid{border-color:var(--bx-border-danger);background-color:var(--bx-bg-danger-subtle)}.bx-checkbox-box.is-checked{background-color:var(--bx-accent);border-color:var(--bx-accent);color:var(--bx-on-accent)}.bx-checkbox-box.is-checked.is-invalid{background-color:var(--bx-bg-danger);border-color:var(--bx-border-danger)}.bx-inline-wrapper:not(.is-readonly) input:focus-visible~.bx-checkbox-box,.bx-inline-wrapper.is-readonly.is-keyboard-focused input:focus-visible~.bx-checkbox-box{box-shadow:0 0 0 3px var(--bx-accent-subtle)}.bx-checkbox-box[data-bx-surface]{--bx-glass-shadow: none;--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-edge: var(--bx-border-strong);--bx-glass-min-opacity: .65;border:1px solid var(--bx-glass-edge);box-sizing:border-box;--bx-glass-text: var(--bx-text-primary)}.bx-checkbox-box[data-bx-surface].is-checked{--bx-glass-surface: var(--bx-accent);--bx-glass-min-opacity: 1;--bx-glass-edge: var(--bx-border-accent);--bx-glass-text: var(--bx-on-accent)}.bx-checkbox-box[data-bx-surface].is-invalid{--bx-glass-surface: var(--bx-bg-danger-subtle);--bx-glass-edge: var(--bx-border-danger);--bx-glass-text: var(--bx-text-danger)}.bx-inline-wrapper:not(.is-disabled) .bx-checkbox-box[data-bx-surface]:not(.is-invalid){background-image:linear-gradient(180deg,color-mix(in srgb,var(--bx-border-strong) 24%,var(--bx-glass-surface)),var(--bx-glass-surface) 55%,color-mix(in srgb,var(--bx-border-strong) 10%,var(--bx-glass-surface)))!important;border-top-color:var(--bx-border-strong);border-bottom-color:var(--bx-border-default)}.bx-inline-wrapper:not(.is-disabled) .bx-checkbox-box[data-bx-surface]:not(.is-invalid).is-checked{background-image:linear-gradient(180deg,color-mix(in srgb,var(--bx-color-accent-50) 24%,var(--bx-accent)),var(--bx-accent) 42%,var(--bx-accent) 65%,color-mix(in srgb,var(--bx-border-accent) 18%,var(--bx-accent)))!important;border-top-color:color-mix(in srgb,var(--bx-color-accent-100) 60%,var(--bx-accent));border-inline-color:var(--bx-accent);border-bottom-color:var(--bx-border-accent)}:host-context(.high-contrast) .bx-inline-wrapper:not(.is-disabled) .bx-checkbox-box[data-bx-surface]:not(.is-invalid),:host-context(.bx-high-contrast-scope) .bx-inline-wrapper:not(.is-disabled) .bx-checkbox-box[data-bx-surface]:not(.is-invalid){background-image:none!important;border-color:var(--bx-glass-edge)}@media(forced-colors:active){.bx-inline-wrapper:not(.is-disabled) .bx-checkbox-box[data-bx-surface]:not(.is-invalid){background-image:none!important;border-color:ButtonText}}.bx-inline-wrapper.label-before .bx-inline-label{order:-1}\n"],
-		dependencies: [
-			{
-				kind: "directive",
-				type: BxSurfaceDirective,
-				selector: "[bxSurface]",
-				inputs: [
-					"bxSurfaceInteractive",
-					"bxSurfaceGlassiness",
-					"bxSurfaceEmission",
-					"bxSurfaceFocusEmission",
-					"bxReducedTransparency"
-				],
-				exportAs: ["bxSurface"]
-			},
-			{
-				kind: "component",
-				type: FormField,
-				selector: "bx-form-field",
-				inputs: [
-					"inline",
-					"control",
-					"label",
-					"tooltip",
-					"tooltipLabel",
-					"error",
-					"errors",
-					"hint",
-					"hintEnd",
-					"required",
-					"hideRequiredMarker",
-					"loading",
-					"showLoadingIndicator",
-					"forId",
-					"subscriptSizing"
-				]
-			},
-			{
-				kind: "component",
-				type: Icon,
-				selector: "bx-icon",
-				inputs: [
-					"name",
-					"size",
-					"color",
-					"bgColor",
-					"strokeWidth",
-					"decorative",
-					"ariaLabel"
-				]
-			}
-		],
+		template: "<bx-form-field [control]=\"fieldControl\" [inline]=\"true\" [tooltip]=\"tooltip()\" [loading]=\"loading()\"\n    [hint]=\"hint()\" [hintEnd]=\"hintEnd()\" [subscriptSizing]=\"resolvedSubscriptSizing()\" [forId]=\"controlId()\">\n    <label class=\"bx-inline-wrapper\" [class.is-disabled]=\"disabled()\" [class.is-readonly]=\"isReadonly()\" [class.is-keyboard-focused]=\"keyboardFocused()\" [class.label-before]=\"labelPosition() === 'before'\">\n        <input type=\"checkbox\" class=\"bx-visually-hidden\" [id]=\"controlId()\" [attr.name]=\"name() || null\" [attr.data-testid]=\"dataTestId()\"\n            [attr.aria-label]=\"ariaLabel()\" [attr.aria-labelledby]=\"ariaLabelledBy()\" [attr.aria-describedby]=\"describedBy()\"\n            [attr.aria-invalid]=\"showError()\" [attr.aria-readonly]=\"isReadonly()\" [disabled]=\"disabled()\" [required]=\"effectiveRequired()\" [checked]=\"displayedChecked()\" [indeterminate]=\"indeterminate()\"\n            (click)=\"onReadonlyClick($event)\" (change)=\"onToggle($event)\" (blur)=\"onBlur()\">\n        <bx-checkbox-indicator [checked]=\"displayedChecked()\" [indeterminate]=\"indeterminate()\" [invalid]=\"showError()\" [disabled]=\"disabled()\" />\n        <span class=\"bx-inline-label\"><ng-content />{{ resolvedLabel() }}\n            @if (effectiveRequired() && !resolvedHideRequiredMarker()) { <span class=\"bx-inline-required\" aria-hidden=\"true\">*</span> }\n        </span>\n    </label>\n    <ng-content select=\"bx-error\" ngProjectAs=\"bx-error\" /><ng-content select=\"bx-hint\" ngProjectAs=\"bx-hint\" />\n</bx-form-field>\n",
+		styles: [":host{display:block}.bx-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.bx-inline-wrapper{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none;min-height:1.5rem;vertical-align:middle}.bx-inline-wrapper.is-disabled{opacity:.5;cursor:not-allowed}.bx-inline-wrapper.is-readonly:not(.is-disabled){cursor:default}.bx-inline-label{font-size:.875rem;color:var(--bx-text-primary);line-height:1.5}.bx-inline-required{color:var(--bx-text-danger);margin-left:.125rem}.bx-inline-wrapper:not(.is-readonly) input:focus-visible~bx-checkbox-indicator,.bx-inline-wrapper.is-readonly.is-keyboard-focused input:focus-visible~bx-checkbox-indicator{outline:2px solid var(--bx-border-accent);outline-offset:2px}.bx-inline-wrapper.label-before .bx-inline-label{order:-1}\n"],
+		dependencies: [{
+			kind: "component",
+			type: FormField,
+			selector: "bx-form-field",
+			inputs: [
+				"inline",
+				"control",
+				"label",
+				"tooltip",
+				"tooltipLabel",
+				"error",
+				"errors",
+				"hint",
+				"hintEnd",
+				"required",
+				"hideRequiredMarker",
+				"loading",
+				"showLoadingIndicator",
+				"forId",
+				"subscriptSizing"
+			]
+		}, {
+			kind: "component",
+			type: CheckboxIndicator,
+			selector: "bx-checkbox-indicator",
+			inputs: [
+				"checked",
+				"indeterminate",
+				"invalid",
+				"disabled"
+			]
+		}],
 		changeDetection: i0.ChangeDetectionStrategy.OnPush
 	});
 };
@@ -1870,14 +1984,10 @@ i0.ɵɵngDeclareClassMetadata({
 		type: Component,
 		args: [{
 			selector: "bx-checkbox",
-			imports: [
-				BxSurfaceDirective,
-				FormField,
-				Icon
-			],
+			imports: [FormField, CheckboxIndicator],
 			changeDetection: ChangeDetectionStrategy.OnPush,
-			template: "<bx-form-field [control]=\"fieldControl\" [inline]=\"true\" [tooltip]=\"tooltip()\" [loading]=\"loading()\"\n    [hint]=\"hint()\" [hintEnd]=\"hintEnd()\" [subscriptSizing]=\"resolvedSubscriptSizing()\" [forId]=\"controlId()\">\n    <label class=\"bx-inline-wrapper\" [class.is-disabled]=\"disabled()\" [class.is-readonly]=\"isReadonly()\" [class.is-keyboard-focused]=\"keyboardFocused()\" [class.label-before]=\"labelPosition() === 'before'\">\n        <input type=\"checkbox\" class=\"bx-visually-hidden\" [id]=\"controlId()\" [attr.name]=\"name() || null\" [attr.data-testid]=\"dataTestId()\"\n            [attr.aria-label]=\"ariaLabel()\" [attr.aria-labelledby]=\"ariaLabelledBy()\" [attr.aria-describedby]=\"describedBy()\"\n            [attr.aria-invalid]=\"showError()\" [attr.aria-readonly]=\"isReadonly()\" [disabled]=\"disabled()\" [required]=\"effectiveRequired()\" [checked]=\"displayedChecked()\" [indeterminate]=\"indeterminate()\"\n            (click)=\"onReadonlyClick($event)\" (change)=\"onToggle($event)\" (blur)=\"onBlur()\">\n        <div class=\"bx-checkbox-box\" bxSurface [bxSurfaceEmission]=\"showError() ? 'var(--bx-text-danger)' : 'var(--bx-accent)'\"\n            [class.is-checked]=\"displayedChecked() || indeterminate()\" [class.is-invalid]=\"showError()\">\n            @if (indeterminate()) { <bx-icon name=\"minus\" size=\"16\" /> } @else if (displayedChecked()) { <bx-icon name=\"check\" size=\"16\" /> }\n        </div>\n        <span class=\"bx-inline-label\"><ng-content />{{ resolvedLabel() }}\n            @if (effectiveRequired() && !resolvedHideRequiredMarker()) { <span class=\"bx-inline-required\" aria-hidden=\"true\">*</span> }\n        </span>\n    </label>\n    <ng-content select=\"bx-error\" ngProjectAs=\"bx-error\" /><ng-content select=\"bx-hint\" ngProjectAs=\"bx-hint\" />\n</bx-form-field>\n",
-			styles: [":host{display:block}.bx-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.bx-inline-wrapper{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none;min-height:1.5rem;vertical-align:middle}.bx-inline-wrapper.is-disabled{opacity:.5;cursor:not-allowed}.bx-inline-wrapper.is-readonly:not(.is-disabled){cursor:default}.bx-inline-label{font-size:.875rem;color:var(--bx-text-primary);line-height:1.5}.bx-inline-required{color:var(--bx-text-danger);margin-left:.125rem}.bx-checkbox-box{box-sizing:border-box;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.125rem;height:1.125rem;line-height:0;background-color:var(--bx-bg-surface);border:1px solid var(--bx-border-strong);border-radius:var(--bx-rounded-sm);color:var(--bx-text-primary);transition:border-color .15s ease}.bx-checkbox-box.is-invalid{border-color:var(--bx-border-danger);background-color:var(--bx-bg-danger-subtle)}.bx-checkbox-box.is-checked{background-color:var(--bx-accent);border-color:var(--bx-accent);color:var(--bx-on-accent)}.bx-checkbox-box.is-checked.is-invalid{background-color:var(--bx-bg-danger);border-color:var(--bx-border-danger)}.bx-inline-wrapper:not(.is-readonly) input:focus-visible~.bx-checkbox-box,.bx-inline-wrapper.is-readonly.is-keyboard-focused input:focus-visible~.bx-checkbox-box{box-shadow:0 0 0 3px var(--bx-accent-subtle)}.bx-checkbox-box[data-bx-surface]{--bx-glass-shadow: none;--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-edge: var(--bx-border-strong);--bx-glass-min-opacity: .65;border:1px solid var(--bx-glass-edge);box-sizing:border-box;--bx-glass-text: var(--bx-text-primary)}.bx-checkbox-box[data-bx-surface].is-checked{--bx-glass-surface: var(--bx-accent);--bx-glass-min-opacity: 1;--bx-glass-edge: var(--bx-border-accent);--bx-glass-text: var(--bx-on-accent)}.bx-checkbox-box[data-bx-surface].is-invalid{--bx-glass-surface: var(--bx-bg-danger-subtle);--bx-glass-edge: var(--bx-border-danger);--bx-glass-text: var(--bx-text-danger)}.bx-inline-wrapper:not(.is-disabled) .bx-checkbox-box[data-bx-surface]:not(.is-invalid){background-image:linear-gradient(180deg,color-mix(in srgb,var(--bx-border-strong) 24%,var(--bx-glass-surface)),var(--bx-glass-surface) 55%,color-mix(in srgb,var(--bx-border-strong) 10%,var(--bx-glass-surface)))!important;border-top-color:var(--bx-border-strong);border-bottom-color:var(--bx-border-default)}.bx-inline-wrapper:not(.is-disabled) .bx-checkbox-box[data-bx-surface]:not(.is-invalid).is-checked{background-image:linear-gradient(180deg,color-mix(in srgb,var(--bx-color-accent-50) 24%,var(--bx-accent)),var(--bx-accent) 42%,var(--bx-accent) 65%,color-mix(in srgb,var(--bx-border-accent) 18%,var(--bx-accent)))!important;border-top-color:color-mix(in srgb,var(--bx-color-accent-100) 60%,var(--bx-accent));border-inline-color:var(--bx-accent);border-bottom-color:var(--bx-border-accent)}:host-context(.high-contrast) .bx-inline-wrapper:not(.is-disabled) .bx-checkbox-box[data-bx-surface]:not(.is-invalid),:host-context(.bx-high-contrast-scope) .bx-inline-wrapper:not(.is-disabled) .bx-checkbox-box[data-bx-surface]:not(.is-invalid){background-image:none!important;border-color:var(--bx-glass-edge)}@media(forced-colors:active){.bx-inline-wrapper:not(.is-disabled) .bx-checkbox-box[data-bx-surface]:not(.is-invalid){background-image:none!important;border-color:ButtonText}}.bx-inline-wrapper.label-before .bx-inline-label{order:-1}\n"]
+			template: "<bx-form-field [control]=\"fieldControl\" [inline]=\"true\" [tooltip]=\"tooltip()\" [loading]=\"loading()\"\n    [hint]=\"hint()\" [hintEnd]=\"hintEnd()\" [subscriptSizing]=\"resolvedSubscriptSizing()\" [forId]=\"controlId()\">\n    <label class=\"bx-inline-wrapper\" [class.is-disabled]=\"disabled()\" [class.is-readonly]=\"isReadonly()\" [class.is-keyboard-focused]=\"keyboardFocused()\" [class.label-before]=\"labelPosition() === 'before'\">\n        <input type=\"checkbox\" class=\"bx-visually-hidden\" [id]=\"controlId()\" [attr.name]=\"name() || null\" [attr.data-testid]=\"dataTestId()\"\n            [attr.aria-label]=\"ariaLabel()\" [attr.aria-labelledby]=\"ariaLabelledBy()\" [attr.aria-describedby]=\"describedBy()\"\n            [attr.aria-invalid]=\"showError()\" [attr.aria-readonly]=\"isReadonly()\" [disabled]=\"disabled()\" [required]=\"effectiveRequired()\" [checked]=\"displayedChecked()\" [indeterminate]=\"indeterminate()\"\n            (click)=\"onReadonlyClick($event)\" (change)=\"onToggle($event)\" (blur)=\"onBlur()\">\n        <bx-checkbox-indicator [checked]=\"displayedChecked()\" [indeterminate]=\"indeterminate()\" [invalid]=\"showError()\" [disabled]=\"disabled()\" />\n        <span class=\"bx-inline-label\"><ng-content />{{ resolvedLabel() }}\n            @if (effectiveRequired() && !resolvedHideRequiredMarker()) { <span class=\"bx-inline-required\" aria-hidden=\"true\">*</span> }\n        </span>\n    </label>\n    <ng-content select=\"bx-error\" ngProjectAs=\"bx-error\" /><ng-content select=\"bx-hint\" ngProjectAs=\"bx-hint\" />\n</bx-form-field>\n",
+			styles: [":host{display:block}.bx-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.bx-inline-wrapper{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none;min-height:1.5rem;vertical-align:middle}.bx-inline-wrapper.is-disabled{opacity:.5;cursor:not-allowed}.bx-inline-wrapper.is-readonly:not(.is-disabled){cursor:default}.bx-inline-label{font-size:.875rem;color:var(--bx-text-primary);line-height:1.5}.bx-inline-required{color:var(--bx-text-danger);margin-left:.125rem}.bx-inline-wrapper:not(.is-readonly) input:focus-visible~bx-checkbox-indicator,.bx-inline-wrapper.is-readonly.is-keyboard-focused input:focus-visible~bx-checkbox-indicator{outline:2px solid var(--bx-border-accent);outline-offset:2px}.bx-inline-wrapper.label-before .bx-inline-label{order:-1}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -2847,7 +2957,7 @@ var SearchInput = class SearchInput extends BxValueControl {
 		usesInheritance: true,
 		ngImport: i0,
 		template: "<bx-form-field [control]=\"fieldControl\" [label]=\"label()\" [tooltip]=\"tooltip()\" [showLoadingIndicator]=\"false\"\n    [hint]=\"hint()\" [hintEnd]=\"hintEnd()\" [hideRequiredMarker]=\"resolvedHideRequiredMarker()\" [subscriptSizing]=\"resolvedSubscriptSizing()\" [forId]=\"controlId()\">\n    <div class=\"bx-search-input-wrapper\" bxSurface [class.is-invalid]=\"showError()\" [class.is-disabled]=\"disabled()\" [class.is-readonly]=\"isReadonly()\" [class.is-keyboard-focused]=\"keyboardFocused()\"\n        [bxTooltip]=\"searchOverflow.text() | bxTruncatedText: searchOverflow.truncated(): resolvedTooltipOnTruncate()\" bxTooltipTouch=\"longpress\" placement=\"top\">\n        <span class=\"bx-search-icon-left\" aria-hidden=\"true\">\n            @if (isBusy() && !showRetry()) { <bx-loading-spinner [size]=\"16\" [decorative]=\"true\" /> }\n            @else { <bx-icon name=\"search\" size=\"16\" /> }\n        </span>\n        <input class=\"bx-native-search-input\" type=\"search\" bxTruncate #searchOverflow=\"bxTruncate\" [id]=\"controlId()\" [attr.name]=\"name() || null\"\n            [placeholder]=\"resolvedPlaceholder()\" [attr.data-testid]=\"dataTestId()\" [attr.autocomplete]=\"autocomplete()\"\n            [attr.aria-label]=\"ariaLabel()\" [attr.aria-labelledby]=\"ariaLabelledBy()\" [attr.aria-describedby]=\"searchDescribedBy()\" [attr.aria-busy]=\"isBusy()\"\n            [attr.aria-invalid]=\"showError()\" [required]=\"effectiveRequired()\" [readOnly]=\"isReadonly()\" [disabled]=\"disabled()\"\n            [value]=\"internalValue() ?? ''\" (input)=\"onInput($event)\" (blur)=\"onBlur()\"\n            (compositionstart)=\"onCompositionStart()\" (compositionend)=\"onCompositionEnd($event)\">\n        @if (internalValue() && !isReadonly()) {\n        <button type=\"button\" class=\"bx-search-clear-btn\" [attr.aria-label]=\"resolvedClearLabel()\" [disabled]=\"disabled() || isReadonly()\" (click)=\"clear()\"><bx-icon name=\"x\" size=\"16\" /></button>\n        }\n    </div>\n    <div class=\"bx-search-feedback\" [class.has-status]=\"showStatus()\">\n        <div class=\"bx-search-status\" [class.cdk-visually-hidden]=\"!showStatus()\">\n            @if (showRetry()) {\n            <span class=\"bx-search-status-reserve\" aria-hidden=\"true\">{{ resolvedRetainedError() }}</span>\n            <span class=\"bx-search-status-reserve\" aria-hidden=\"true\">{{ resolvedLoadingLabel() || resolvedLoadingAriaLabel() }}</span>\n            }\n            <span [id]=\"controlId() + '-search-status'\" role=\"status\" [class.bx-search-error]=\"!isBusy() && !!resolvedLoadError()\">{{ isBusy() ? (resolvedLoadingLabel() || resolvedLoadingAriaLabel()) : resolvedLoadError() }}</span>\n        </div>\n        @if (showRetry()) {\n        <button bx-button type=\"button\" [variant]=\"retryConfig().variant ?? 'text'\" [color]=\"retryConfig().color ?? 'primary'\"\n            [outlined]=\"retryConfig().outlined ?? false\" [class]=\"retryConfig().buttonClass ?? ''\" [attr.aria-label]=\"resolvedRetryAriaLabel()\"\n            [disabled]=\"disabled() || isReadonly()\" [loading]=\"isBusy()\" (click)=\"retrySearch()\"><bx-icon name=\"rotate-cw\" size=\"16\" />{{ resolvedRetryLabel() }}</button>\n        }\n    </div>\n    <ng-content select=\"bx-error\" ngProjectAs=\"bx-error\" /><ng-content select=\"bx-hint\" ngProjectAs=\"bx-hint\" />\n</bx-form-field>\n",
-		styles: [":host{display:block;width:100%;min-inline-size:0}.bx-search-input-wrapper{display:flex;align-items:center;width:100%;box-sizing:border-box;background-color:var(--bx-bg-surface);border:1px solid var(--bx-border-default);border-radius:.25rem;transition:border-color .15s ease,box-shadow .15s ease;min-height:2.5rem;padding:.25rem .5rem .25rem .75rem;gap:.5rem}.bx-search-input-wrapper:hover:not(.is-disabled,.is-readonly){border-color:var(--bx-border-strong)}.bx-search-input-wrapper:focus-within:not(.is-disabled,.is-readonly){border-color:var(--bx-border-brand);box-shadow:0 0 0 3px var(--bx-primary-subtle)}.bx-search-input-wrapper.is-invalid{border-color:var(--bx-border-danger)}.bx-search-input-wrapper.is-invalid:focus-within:not(.is-readonly){box-shadow:0 0 0 3px var(--bx-bg-danger-subtle)}.bx-search-input-wrapper.is-disabled{background-color:var(--bx-bg-element);opacity:.7;cursor:not-allowed}.bx-search-icon-left{display:inline-flex;align-items:center;justify-content:center;inline-size:1rem;block-size:1rem;color:var(--bx-text-secondary);flex-shrink:0}.bx-native-search-input{flex:1 1 0;min-width:0;width:0;box-sizing:border-box;padding:.5rem 0;background:transparent;border:none;outline:none;appearance:none;font-family:inherit;font-size:.875rem;color:var(--bx-text-heading)}.bx-native-search-input::-webkit-search-cancel-button,.bx-native-search-input::-webkit-search-decoration{appearance:none;display:none}.bx-native-search-input::placeholder{color:var(--bx-text-secondary)}.bx-native-search-input:disabled{color:var(--bx-text-secondary);cursor:not-allowed}.bx-native-search-input[readonly]:not(:disabled){cursor:default}.bx-search-clear-btn{display:flex;align-items:center;justify-content:center;background:transparent;border:none;padding:.25rem;width:1.5rem;height:1.5rem;border-radius:.25rem;color:var(--bx-text-secondary);cursor:pointer;flex-shrink:0}.bx-search-clear-btn:focus-visible{outline:2px solid var(--bx-border-brand);outline-offset:0}.bx-search-clear-btn{transition:color .15s ease}.bx-search-clear-btn:hover:not(:disabled){color:var(--bx-text-primary);background:var(--bx-bg-element-hover)}.bx-search-clear-btn:disabled{cursor:not-allowed;opacity:.5}.bx-search-clear-btn.hidden{opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none}.bx-search-feedback{display:grid;grid-template-columns:minmax(0,1fr);justify-items:start;gap:.5rem;color:var(--bx-text-secondary);font-size:.875rem}.bx-search-feedback.has-status{padding-block-start:var(--bx-search-feedback-gap, .5rem)}:host(.bx-readonly):not(:has(input:disabled)) button:disabled{cursor:default}.bx-search-status{display:grid;inline-size:100%;min-inline-size:0;line-height:1.5}.bx-search-status>span{grid-area:1/1;overflow-wrap:anywhere}.bx-search-status-reserve{visibility:hidden}.bx-search-error{color:var(--bx-text-danger)}.bx-search-input-wrapper[data-bx-surface]{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-shadow: none}.bx-search-input-wrapper[data-bx-surface].is-invalid{--bx-glass-edge: var(--bx-border-danger)}.bx-search-input-wrapper[data-bx-surface]{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-min-opacity: .45;--bx-glass-edge: var(--bx-border-default);--bx-glass-shadow: none;border:1px solid var(--bx-glass-edge);border-radius:.75rem}.bx-search-input-wrapper[data-bx-surface]:after{display:none}.bx-search-input-wrapper[data-bx-surface]:focus-within:not(.is-disabled,:disabled,.is-readonly,[readonly],[aria-readonly=true],:has([readonly],[aria-readonly=true])),.bx-search-input-wrapper[data-bx-surface]:focus-visible:not(:disabled,[readonly],[aria-readonly=true]),.bx-search-input-wrapper[data-bx-surface].is-open:not(:disabled),.bx-search-input-wrapper[data-bx-surface].is-readonly.is-keyboard-focused:focus-within,.bx-search-input-wrapper[data-bx-surface]:has(.bx-readonly.is-keyboard-focused):focus-within{--bx-glass-edge: var(--bx-border-brand);outline:2px solid var(--bx-border-brand);outline-offset:-2px;--bx-glass-shadow: none}.bx-search-input-wrapper[data-bx-surface].is-invalid{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-min-opacity: .45;--bx-glass-edge: color-mix(in srgb, var(--bx-text-danger) 40%, var(--bx-border-default));border-block-end-color:var(--bx-glass-edge);--bx-glass-shadow: 0 8px 18px -10px color-mix(in srgb, var(--bx-text-danger) 65%, transparent);outline-color:var(--bx-border-danger)}\n"],
+		styles: [":host{display:block;width:100%;min-inline-size:0}.bx-search-input-wrapper{display:flex;align-items:center;width:100%;box-sizing:border-box;background-color:var(--bx-bg-surface);border:1px solid var(--bx-border-default);border-radius:.25rem;transition:border-color .15s ease,box-shadow .15s ease;min-height:2.5rem;padding:.25rem .5rem .25rem .75rem;gap:.5rem}.bx-search-input-wrapper:hover:not(.is-disabled,.is-readonly){border-color:var(--bx-border-strong)}.bx-search-input-wrapper:focus-within:not(.is-disabled,.is-readonly){border-color:var(--bx-border-brand);box-shadow:0 0 0 3px var(--bx-primary-subtle)}.bx-search-input-wrapper.is-invalid{border-color:var(--bx-border-danger)}.bx-search-input-wrapper.is-invalid:focus-within:not(.is-readonly){box-shadow:0 0 0 3px var(--bx-bg-danger-subtle)}.bx-search-input-wrapper.is-disabled{background-color:var(--bx-bg-element);opacity:.7;cursor:not-allowed}.bx-search-icon-left{display:inline-flex;align-items:center;justify-content:center;inline-size:1rem;block-size:1rem;color:var(--bx-text-secondary);flex-shrink:0}.bx-native-search-input{flex:1 1 0;min-width:0;width:0;box-sizing:border-box;padding:.5rem 0;background:transparent;border:none;outline:none;appearance:none;font-family:inherit;font-size:.875rem;color:var(--bx-text-heading)}.bx-native-search-input::-webkit-search-cancel-button,.bx-native-search-input::-webkit-search-decoration{appearance:none;display:none}.bx-native-search-input::placeholder{color:var(--bx-text-secondary)}.bx-native-search-input:disabled{color:var(--bx-text-secondary);cursor:not-allowed}.bx-native-search-input[readonly]:not(:disabled){cursor:default}.bx-search-clear-btn{transition-property:color;transition-duration:calc(.15s * (1 - var(--bx-reduced-motion, 0)));transition-timing-function:ease;display:flex;align-items:center;justify-content:center;box-sizing:border-box;background:transparent;border:none;padding:.25rem;inline-size:1.5rem;block-size:1.5rem;border-radius:.25rem;color:var(--bx-text-secondary);cursor:pointer;flex-shrink:0}.bx-search-clear-btn:focus-visible{outline:2px solid var(--bx-border-brand);outline-offset:0}.bx-search-clear-btn:hover:not(:disabled){color:var(--bx-text-primary);background:var(--bx-bg-element-hover)}.bx-search-clear-btn:disabled{cursor:not-allowed;opacity:.5}.bx-search-clear-btn.hidden{opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none}.bx-search-feedback{display:grid;grid-template-columns:minmax(0,1fr);justify-items:start;gap:.5rem;color:var(--bx-text-secondary);font-size:.875rem}.bx-search-feedback.has-status{padding-block-start:var(--bx-search-feedback-gap, .5rem)}:host(.bx-readonly):not(:has(input:disabled)) button:disabled{cursor:default}.bx-search-status{display:grid;inline-size:100%;min-inline-size:0;line-height:1.5}.bx-search-status>span{grid-area:1/1;overflow-wrap:anywhere}.bx-search-status-reserve{visibility:hidden}.bx-search-error{color:var(--bx-text-danger)}.bx-search-input-wrapper[data-bx-surface]{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-shadow: none}.bx-search-input-wrapper[data-bx-surface].is-invalid{--bx-glass-edge: var(--bx-border-danger)}.bx-search-input-wrapper[data-bx-surface]{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-min-opacity: .45;--bx-glass-edge: var(--bx-border-default);--bx-glass-shadow: none;border:1px solid var(--bx-glass-edge);border-radius:.75rem}.bx-search-input-wrapper[data-bx-surface]:after{display:none}.bx-search-input-wrapper[data-bx-surface]:focus-within:not(.is-disabled,:disabled,.is-readonly,[readonly],[aria-readonly=true],:has([readonly],[aria-readonly=true])),.bx-search-input-wrapper[data-bx-surface]:focus-visible:not(:disabled,[readonly],[aria-readonly=true]),.bx-search-input-wrapper[data-bx-surface].is-open:not(:disabled),.bx-search-input-wrapper[data-bx-surface].is-readonly.is-keyboard-focused:focus-within,.bx-search-input-wrapper[data-bx-surface]:has(.bx-readonly.is-keyboard-focused):focus-within{--bx-glass-edge: var(--bx-border-brand);outline:2px solid var(--bx-border-brand);outline-offset:-2px;--bx-glass-shadow: none}.bx-search-input-wrapper[data-bx-surface].is-invalid{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-min-opacity: .45;--bx-glass-edge: color-mix(in srgb, var(--bx-text-danger) 40%, var(--bx-border-default));border-block-end-color:var(--bx-glass-edge);--bx-glass-shadow: 0 8px 18px -10px color-mix(in srgb, var(--bx-text-danger) 65%, transparent);outline-color:var(--bx-border-danger)}\n"],
 		dependencies: [
 			{
 				kind: "directive",
@@ -2972,7 +3082,7 @@ i0.ɵɵngDeclareClassMetadata({
 			],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			template: "<bx-form-field [control]=\"fieldControl\" [label]=\"label()\" [tooltip]=\"tooltip()\" [showLoadingIndicator]=\"false\"\n    [hint]=\"hint()\" [hintEnd]=\"hintEnd()\" [hideRequiredMarker]=\"resolvedHideRequiredMarker()\" [subscriptSizing]=\"resolvedSubscriptSizing()\" [forId]=\"controlId()\">\n    <div class=\"bx-search-input-wrapper\" bxSurface [class.is-invalid]=\"showError()\" [class.is-disabled]=\"disabled()\" [class.is-readonly]=\"isReadonly()\" [class.is-keyboard-focused]=\"keyboardFocused()\"\n        [bxTooltip]=\"searchOverflow.text() | bxTruncatedText: searchOverflow.truncated(): resolvedTooltipOnTruncate()\" bxTooltipTouch=\"longpress\" placement=\"top\">\n        <span class=\"bx-search-icon-left\" aria-hidden=\"true\">\n            @if (isBusy() && !showRetry()) { <bx-loading-spinner [size]=\"16\" [decorative]=\"true\" /> }\n            @else { <bx-icon name=\"search\" size=\"16\" /> }\n        </span>\n        <input class=\"bx-native-search-input\" type=\"search\" bxTruncate #searchOverflow=\"bxTruncate\" [id]=\"controlId()\" [attr.name]=\"name() || null\"\n            [placeholder]=\"resolvedPlaceholder()\" [attr.data-testid]=\"dataTestId()\" [attr.autocomplete]=\"autocomplete()\"\n            [attr.aria-label]=\"ariaLabel()\" [attr.aria-labelledby]=\"ariaLabelledBy()\" [attr.aria-describedby]=\"searchDescribedBy()\" [attr.aria-busy]=\"isBusy()\"\n            [attr.aria-invalid]=\"showError()\" [required]=\"effectiveRequired()\" [readOnly]=\"isReadonly()\" [disabled]=\"disabled()\"\n            [value]=\"internalValue() ?? ''\" (input)=\"onInput($event)\" (blur)=\"onBlur()\"\n            (compositionstart)=\"onCompositionStart()\" (compositionend)=\"onCompositionEnd($event)\">\n        @if (internalValue() && !isReadonly()) {\n        <button type=\"button\" class=\"bx-search-clear-btn\" [attr.aria-label]=\"resolvedClearLabel()\" [disabled]=\"disabled() || isReadonly()\" (click)=\"clear()\"><bx-icon name=\"x\" size=\"16\" /></button>\n        }\n    </div>\n    <div class=\"bx-search-feedback\" [class.has-status]=\"showStatus()\">\n        <div class=\"bx-search-status\" [class.cdk-visually-hidden]=\"!showStatus()\">\n            @if (showRetry()) {\n            <span class=\"bx-search-status-reserve\" aria-hidden=\"true\">{{ resolvedRetainedError() }}</span>\n            <span class=\"bx-search-status-reserve\" aria-hidden=\"true\">{{ resolvedLoadingLabel() || resolvedLoadingAriaLabel() }}</span>\n            }\n            <span [id]=\"controlId() + '-search-status'\" role=\"status\" [class.bx-search-error]=\"!isBusy() && !!resolvedLoadError()\">{{ isBusy() ? (resolvedLoadingLabel() || resolvedLoadingAriaLabel()) : resolvedLoadError() }}</span>\n        </div>\n        @if (showRetry()) {\n        <button bx-button type=\"button\" [variant]=\"retryConfig().variant ?? 'text'\" [color]=\"retryConfig().color ?? 'primary'\"\n            [outlined]=\"retryConfig().outlined ?? false\" [class]=\"retryConfig().buttonClass ?? ''\" [attr.aria-label]=\"resolvedRetryAriaLabel()\"\n            [disabled]=\"disabled() || isReadonly()\" [loading]=\"isBusy()\" (click)=\"retrySearch()\"><bx-icon name=\"rotate-cw\" size=\"16\" />{{ resolvedRetryLabel() }}</button>\n        }\n    </div>\n    <ng-content select=\"bx-error\" ngProjectAs=\"bx-error\" /><ng-content select=\"bx-hint\" ngProjectAs=\"bx-hint\" />\n</bx-form-field>\n",
-			styles: [":host{display:block;width:100%;min-inline-size:0}.bx-search-input-wrapper{display:flex;align-items:center;width:100%;box-sizing:border-box;background-color:var(--bx-bg-surface);border:1px solid var(--bx-border-default);border-radius:.25rem;transition:border-color .15s ease,box-shadow .15s ease;min-height:2.5rem;padding:.25rem .5rem .25rem .75rem;gap:.5rem}.bx-search-input-wrapper:hover:not(.is-disabled,.is-readonly){border-color:var(--bx-border-strong)}.bx-search-input-wrapper:focus-within:not(.is-disabled,.is-readonly){border-color:var(--bx-border-brand);box-shadow:0 0 0 3px var(--bx-primary-subtle)}.bx-search-input-wrapper.is-invalid{border-color:var(--bx-border-danger)}.bx-search-input-wrapper.is-invalid:focus-within:not(.is-readonly){box-shadow:0 0 0 3px var(--bx-bg-danger-subtle)}.bx-search-input-wrapper.is-disabled{background-color:var(--bx-bg-element);opacity:.7;cursor:not-allowed}.bx-search-icon-left{display:inline-flex;align-items:center;justify-content:center;inline-size:1rem;block-size:1rem;color:var(--bx-text-secondary);flex-shrink:0}.bx-native-search-input{flex:1 1 0;min-width:0;width:0;box-sizing:border-box;padding:.5rem 0;background:transparent;border:none;outline:none;appearance:none;font-family:inherit;font-size:.875rem;color:var(--bx-text-heading)}.bx-native-search-input::-webkit-search-cancel-button,.bx-native-search-input::-webkit-search-decoration{appearance:none;display:none}.bx-native-search-input::placeholder{color:var(--bx-text-secondary)}.bx-native-search-input:disabled{color:var(--bx-text-secondary);cursor:not-allowed}.bx-native-search-input[readonly]:not(:disabled){cursor:default}.bx-search-clear-btn{display:flex;align-items:center;justify-content:center;background:transparent;border:none;padding:.25rem;width:1.5rem;height:1.5rem;border-radius:.25rem;color:var(--bx-text-secondary);cursor:pointer;flex-shrink:0}.bx-search-clear-btn:focus-visible{outline:2px solid var(--bx-border-brand);outline-offset:0}.bx-search-clear-btn{transition:color .15s ease}.bx-search-clear-btn:hover:not(:disabled){color:var(--bx-text-primary);background:var(--bx-bg-element-hover)}.bx-search-clear-btn:disabled{cursor:not-allowed;opacity:.5}.bx-search-clear-btn.hidden{opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none}.bx-search-feedback{display:grid;grid-template-columns:minmax(0,1fr);justify-items:start;gap:.5rem;color:var(--bx-text-secondary);font-size:.875rem}.bx-search-feedback.has-status{padding-block-start:var(--bx-search-feedback-gap, .5rem)}:host(.bx-readonly):not(:has(input:disabled)) button:disabled{cursor:default}.bx-search-status{display:grid;inline-size:100%;min-inline-size:0;line-height:1.5}.bx-search-status>span{grid-area:1/1;overflow-wrap:anywhere}.bx-search-status-reserve{visibility:hidden}.bx-search-error{color:var(--bx-text-danger)}.bx-search-input-wrapper[data-bx-surface]{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-shadow: none}.bx-search-input-wrapper[data-bx-surface].is-invalid{--bx-glass-edge: var(--bx-border-danger)}.bx-search-input-wrapper[data-bx-surface]{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-min-opacity: .45;--bx-glass-edge: var(--bx-border-default);--bx-glass-shadow: none;border:1px solid var(--bx-glass-edge);border-radius:.75rem}.bx-search-input-wrapper[data-bx-surface]:after{display:none}.bx-search-input-wrapper[data-bx-surface]:focus-within:not(.is-disabled,:disabled,.is-readonly,[readonly],[aria-readonly=true],:has([readonly],[aria-readonly=true])),.bx-search-input-wrapper[data-bx-surface]:focus-visible:not(:disabled,[readonly],[aria-readonly=true]),.bx-search-input-wrapper[data-bx-surface].is-open:not(:disabled),.bx-search-input-wrapper[data-bx-surface].is-readonly.is-keyboard-focused:focus-within,.bx-search-input-wrapper[data-bx-surface]:has(.bx-readonly.is-keyboard-focused):focus-within{--bx-glass-edge: var(--bx-border-brand);outline:2px solid var(--bx-border-brand);outline-offset:-2px;--bx-glass-shadow: none}.bx-search-input-wrapper[data-bx-surface].is-invalid{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-min-opacity: .45;--bx-glass-edge: color-mix(in srgb, var(--bx-text-danger) 40%, var(--bx-border-default));border-block-end-color:var(--bx-glass-edge);--bx-glass-shadow: 0 8px 18px -10px color-mix(in srgb, var(--bx-text-danger) 65%, transparent);outline-color:var(--bx-border-danger)}\n"]
+			styles: [":host{display:block;width:100%;min-inline-size:0}.bx-search-input-wrapper{display:flex;align-items:center;width:100%;box-sizing:border-box;background-color:var(--bx-bg-surface);border:1px solid var(--bx-border-default);border-radius:.25rem;transition:border-color .15s ease,box-shadow .15s ease;min-height:2.5rem;padding:.25rem .5rem .25rem .75rem;gap:.5rem}.bx-search-input-wrapper:hover:not(.is-disabled,.is-readonly){border-color:var(--bx-border-strong)}.bx-search-input-wrapper:focus-within:not(.is-disabled,.is-readonly){border-color:var(--bx-border-brand);box-shadow:0 0 0 3px var(--bx-primary-subtle)}.bx-search-input-wrapper.is-invalid{border-color:var(--bx-border-danger)}.bx-search-input-wrapper.is-invalid:focus-within:not(.is-readonly){box-shadow:0 0 0 3px var(--bx-bg-danger-subtle)}.bx-search-input-wrapper.is-disabled{background-color:var(--bx-bg-element);opacity:.7;cursor:not-allowed}.bx-search-icon-left{display:inline-flex;align-items:center;justify-content:center;inline-size:1rem;block-size:1rem;color:var(--bx-text-secondary);flex-shrink:0}.bx-native-search-input{flex:1 1 0;min-width:0;width:0;box-sizing:border-box;padding:.5rem 0;background:transparent;border:none;outline:none;appearance:none;font-family:inherit;font-size:.875rem;color:var(--bx-text-heading)}.bx-native-search-input::-webkit-search-cancel-button,.bx-native-search-input::-webkit-search-decoration{appearance:none;display:none}.bx-native-search-input::placeholder{color:var(--bx-text-secondary)}.bx-native-search-input:disabled{color:var(--bx-text-secondary);cursor:not-allowed}.bx-native-search-input[readonly]:not(:disabled){cursor:default}.bx-search-clear-btn{transition-property:color;transition-duration:calc(.15s * (1 - var(--bx-reduced-motion, 0)));transition-timing-function:ease;display:flex;align-items:center;justify-content:center;box-sizing:border-box;background:transparent;border:none;padding:.25rem;inline-size:1.5rem;block-size:1.5rem;border-radius:.25rem;color:var(--bx-text-secondary);cursor:pointer;flex-shrink:0}.bx-search-clear-btn:focus-visible{outline:2px solid var(--bx-border-brand);outline-offset:0}.bx-search-clear-btn:hover:not(:disabled){color:var(--bx-text-primary);background:var(--bx-bg-element-hover)}.bx-search-clear-btn:disabled{cursor:not-allowed;opacity:.5}.bx-search-clear-btn.hidden{opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none}.bx-search-feedback{display:grid;grid-template-columns:minmax(0,1fr);justify-items:start;gap:.5rem;color:var(--bx-text-secondary);font-size:.875rem}.bx-search-feedback.has-status{padding-block-start:var(--bx-search-feedback-gap, .5rem)}:host(.bx-readonly):not(:has(input:disabled)) button:disabled{cursor:default}.bx-search-status{display:grid;inline-size:100%;min-inline-size:0;line-height:1.5}.bx-search-status>span{grid-area:1/1;overflow-wrap:anywhere}.bx-search-status-reserve{visibility:hidden}.bx-search-error{color:var(--bx-text-danger)}.bx-search-input-wrapper[data-bx-surface]{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-shadow: none}.bx-search-input-wrapper[data-bx-surface].is-invalid{--bx-glass-edge: var(--bx-border-danger)}.bx-search-input-wrapper[data-bx-surface]{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-min-opacity: .45;--bx-glass-edge: var(--bx-border-default);--bx-glass-shadow: none;border:1px solid var(--bx-glass-edge);border-radius:.75rem}.bx-search-input-wrapper[data-bx-surface]:after{display:none}.bx-search-input-wrapper[data-bx-surface]:focus-within:not(.is-disabled,:disabled,.is-readonly,[readonly],[aria-readonly=true],:has([readonly],[aria-readonly=true])),.bx-search-input-wrapper[data-bx-surface]:focus-visible:not(:disabled,[readonly],[aria-readonly=true]),.bx-search-input-wrapper[data-bx-surface].is-open:not(:disabled),.bx-search-input-wrapper[data-bx-surface].is-readonly.is-keyboard-focused:focus-within,.bx-search-input-wrapper[data-bx-surface]:has(.bx-readonly.is-keyboard-focused):focus-within{--bx-glass-edge: var(--bx-border-brand);outline:2px solid var(--bx-border-brand);outline-offset:-2px;--bx-glass-shadow: none}.bx-search-input-wrapper[data-bx-surface].is-invalid{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-min-opacity: .45;--bx-glass-edge: color-mix(in srgb, var(--bx-text-danger) 40%, var(--bx-border-default));border-block-end-color:var(--bx-glass-edge);--bx-glass-shadow: 0 8px 18px -10px color-mix(in srgb, var(--bx-text-danger) 65%, transparent);outline-color:var(--bx-border-danger)}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -3553,6 +3663,10 @@ var BxSelectBase = class BxSelectBase extends BxValueControl {
 	debouncing = signal(false, ...ngDevMode ? [{ debugName: "debouncing" }] : /* istanbul ignore next */ []);
 	searchRequest = signal(false, ...ngDevMode ? [{ debugName: "searchRequest" }] : /* istanbul ignore next */ []);
 	knownOptions = signal([], ...ngDevMode ? [{ debugName: "knownOptions" }] : /* istanbul ignore next */ []);
+	hasSelection = computed(() => this.internalValue() !== null && this.internalValue() !== void 0, ...ngDevMode ? [{ debugName: "hasSelection" }] : /* istanbul ignore next */ []);
+	showClear = computed(() => this.clearable() && this.hasSelection() && !this.isReadonly(), ...ngDevMode ? [{ debugName: "showClear" }] : /* istanbul ignore next */ []);
+	resolvedClearLabel = computed(() => resolveText(this.clearLabel(), this.i18n), ...ngDevMode ? [{ debugName: "resolvedClearLabel" }] : /* istanbul ignore next */ []);
+	resolvedClearTooltip = computed(() => resolveText(this.clearTooltip() ?? this.clearLabel(), this.i18n), ...ngDevMode ? [{ debugName: "resolvedClearTooltip" }] : /* istanbul ignore next */ []);
 	panelScrollStrategy = this.overlay.scrollStrategies.noop();
 	isPanelAttached = signal(false, ...ngDevMode ? [{ debugName: "isPanelAttached" }] : /* istanbul ignore next */ []);
 	searchTerm = computed(() => this.searchValue(), ...ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []);
@@ -3601,6 +3715,9 @@ var BxSelectBase = class BxSelectBase extends BxValueControl {
 	overflowTagTooltip = computed(() => this.selectedOptions().slice(this.visibleTagCount()).map((option) => resolveText(option.label, this.i18n)).join(", "), ...ngDevMode ? [{ debugName: "overflowTagTooltip" }] : /* istanbul ignore next */ []);
 	resolvedLoadingAriaLabel = computed(() => resolveText(this.loadingAriaLabel(), this.i18n), ...ngDevMode ? [{ debugName: "resolvedLoadingAriaLabel" }] : /* istanbul ignore next */ []);
 	resolvedLoadingLabel = computed(() => resolveText(this.loadingLabel(), this.i18n), ...ngDevMode ? [{ debugName: "resolvedLoadingLabel" }] : /* istanbul ignore next */ []);
+	clearable = input(true, ...ngDevMode ? [{ debugName: "clearable" }] : /* istanbul ignore next */ []);
+	clearLabel = input("Clear selection", ...ngDevMode ? [{ debugName: "clearLabel" }] : /* istanbul ignore next */ []);
+	clearTooltip = input(void 0, ...ngDevMode ? [{ debugName: "clearTooltip" }] : /* istanbul ignore next */ []);
 	selectionDisplay = input("text", ...ngDevMode ? [{ debugName: "selectionDisplay" }] : /* istanbul ignore next */ []);
 	tagConfig = input({}, ...ngDevMode ? [{ debugName: "tagConfig" }] : /* istanbul ignore next */ []);
 	overflowTagConfig = input({}, ...ngDevMode ? [{ debugName: "overflowTagConfig" }] : /* istanbul ignore next */ []);
@@ -3807,6 +3924,14 @@ var BxSelectBase = class BxSelectBase extends BxValueControl {
 		if (this.originRef?.nativeElement.contains(clickTarget)) return;
 		this.close();
 	}
+	clearSelectedValue(value) {
+		if (this.disabled() || this.isReadonly()) return false;
+		this.updateValue(value);
+		this.close();
+		this.markAsTouched();
+		this.focus({ preventScroll: true });
+		return true;
+	}
 	onSearchChange(value) {
 		clearTimeout(this.searchTimeout);
 		this.debouncing.set(true);
@@ -3851,6 +3976,27 @@ var BxSelectBase = class BxSelectBase extends BxValueControl {
 		type: BxSelectBase,
 		isStandalone: true,
 		inputs: {
+			clearable: {
+				classPropertyName: "clearable",
+				publicName: "clearable",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			clearLabel: {
+				classPropertyName: "clearLabel",
+				publicName: "clearLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			clearTooltip: {
+				classPropertyName: "clearTooltip",
+				publicName: "clearTooltip",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			selectionDisplay: {
 				classPropertyName: "selectionDisplay",
 				publicName: "selectionDisplay",
@@ -4067,6 +4213,30 @@ i0.ɵɵngDeclareClassMetadata({
 			type: i0.ViewChild,
 			args: ["labelOverflow", { isSignal: true }]
 		}],
+		clearable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "clearable",
+				required: false
+			}]
+		}],
+		clearLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "clearLabel",
+				required: false
+			}]
+		}],
+		clearTooltip: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "clearTooltip",
+				required: false
+			}]
+		}],
 		selectionDisplay: [{
 			type: i0.Input,
 			args: [{
@@ -4274,6 +4444,13 @@ i0.ɵɵngDeclareClassMetadata({
 });
 var Select = class Select extends BxSelectBase {
 	selectionChange = output();
+	clearSelection() {
+		if (!this.clearSelectedValue(null)) return;
+		this.selectionChange.emit({
+			value: null,
+			source: "clear"
+		});
+	}
 	isSelected(value) {
 		const selected = this.internalValue();
 		return selected !== null && this.compareWith()(selected, value);
@@ -4304,8 +4481,8 @@ var Select = class Select extends BxSelectBase {
 		outputs: { selectionChange: "selectionChange" },
 		usesInheritance: true,
 		ngImport: i0,
-		template: "<bx-form-field [control]=\"fieldControl\" [inline]=\"true\" [tooltip]=\"tooltip()\" [showLoadingIndicator]=\"false\"\n    [hint]=\"hint()\" [hintEnd]=\"hintEnd()\" [subscriptSizing]=\"resolvedSubscriptSizing()\" [forId]=\"controlId()\">\n    <button type=\"button\" role=\"combobox\" aria-haspopup=\"listbox\" [bxTooltip]=\"resolvedTooltipOnTruncate() ? (selectionDisplay() === 'tags' ? selectedOptionLabel() : truncatedSelectionTooltip()) : ''\" [bxTooltipHover]=\"selectionDisplay() !== 'tags'\" [bxTooltipTouch]=\"selectionDisplay() === 'tags' ? 'none' : 'longpress'\" cdkOverlayOrigin bxSurface #origin=\"cdkOverlayOrigin\" class=\"bx-select-trigger\"\n        [class.is-invalid]=\"showError()\" [class.is-outline]=\"resolvedAppearance() === 'outline'\" [class.is-open]=\"isOpen()\" [class.is-floating]=\"isFloating()\" [class.is-readonly]=\"isReadonly()\" [class.is-keyboard-focused]=\"keyboardFocused()\"\n        [id]=\"controlId()\" [attr.data-testid]=\"dataTestId()\" [attr.aria-label]=\"ariaLabel() || resolvedLabel()\" [attr.aria-labelledby]=\"ariaLabelledBy()\"\n        [attr.aria-describedby]=\"describedBy()\" [attr.aria-invalid]=\"showError()\" [attr.aria-required]=\"required()\" [attr.aria-readonly]=\"isReadonly()\" [attr.aria-busy]=\"loading() || pending() || isSearching()\"\n        [disabled]=\"disabled()\" (click)=\"toggleOpen()\" (keydown)=\"onTriggerKey($event)\" (blur)=\"onTriggerBlur()\"\n        [attr.aria-expanded]=\"isOpen()\" [attr.aria-controls]=\"isPanelAttached() ? controlId() + '-options' : null\">\n        <div class=\"bx-select-container\">\n            @if (label()) {\n            <span class=\"bx-floating-label\"><span [bxTruncate]=\"!isFloating()\" #labelOverflow=\"bxTruncate\">{{ resolvedLabel() }}</span>\n                @if (required() && !resolvedHideRequiredMarker()) { <span class=\"bx-field-required\" aria-hidden=\"true\">*</span> }\n            </span>\n            }\n            <span class=\"bx-select-value\" [class.is-placeholder]=\"!selectedOptionLabel()\" [bxTruncate]=\"!(selectionDisplay() === 'tags' && selectedOptions().length) && !triggerTemplate()\" #valueOverflow=\"bxTruncate\">\n                @if (triggerTemplate(); as template) {\n                <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"triggerContext()\" />\n                } @else if (selectionDisplay() === 'tags' && selectedOptions().length) {\n                <span class=\"bx-selected-tags\">\n                    @for (option of visibleTags(); track option.value) {\n                    <bx-tag [text]=\"option.label\" [config]=\"selectionTagConfig(option)\" [disabled]=\"disabled() || !!option.disabled\" [focusable]=\"false\" [tooltipOnTruncate]=\"resolvedTooltipOnTruncate() ? undefined : false\" />\n                    }\n                    @if (selectedOptions().length > visibleTagCount()) {\n                    <bx-tag class=\"bx-overflow-tag\" [text]=\"overflowTagLabel()\" [config]=\"overflowTagConfig()\" [tooltip]=\"overflowTagTooltip()\" [focusable]=\"false\" [tooltipOnTruncate]=\"resolvedTooltipOnTruncate() ? undefined : false\" />\n                    }\n                </span>\n                } @else { {{ selectedOptionLabel() || (isFloating() || !label() ? resolvedPlaceholder() : '') }} }\n            </span>\n        </div>\n        <ng-content select=\"[bxSuffix]\" />\n        <span class=\"bx-select-caret\" aria-hidden=\"true\">\n            @if (loading() || pending() || isSearching()) { <bx-loading-spinner [size]=\"16\" [decorative]=\"true\" /> }\n            @else { <bx-icon name=\"chevron-down\" size=\"16\" /> }\n        </span>\n    </button>\n    <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"origin\" [cdkConnectedOverlayOpen]=\"isPanelAttached()\"\n        [cdkConnectedOverlayPositions]=\"overlayPositions\" [cdkConnectedOverlayHasBackdrop]=\"false\"\n        [cdkConnectedOverlayScrollStrategy]=\"panelScrollStrategy\" [cdkConnectedOverlayUsePopover]=\"overlayPopoverLocation(origin.elementRef.nativeElement)\"\n        [cdkConnectedOverlayWidth]=\"origin.elementRef.nativeElement.offsetWidth\"\n        (overlayOutsideClick)=\"onOutsideClick($event)\" (attach)=\"onPanelAttach()\" (detach)=\"onPanelDetach()\" (positionChange)=\"refreshPanel()\">\n        <div class=\"bx-select-panel\" [class]=\"panelClass()\" data-bx-surface=\"solid\" tabindex=\"-1\" (keydown)=\"onPanelKey($event)\">\n            @if (isSearchable()) {\n            <div class=\"bx-select-search-container\">\n                <bx-search-input #searchInput [value]=\"searchValue()\" [placeholder]=\"resolvedSearchPlaceholder()\" [ariaLabel]=\"resolvedSearchPlaceholder()\"\n                    (search)=\"onSearchChange($event)\" (keydown.enter)=\"$event.preventDefault()\" />\n            </div>\n            }\n\n            <div class=\"bx-select-menu-container\" bxLoadMore #pagination=\"bxLoadMore\" [loadMoreHasMore]=\"hasMore()\" [loadMoreSuppressed]=\"isSearching()\" [loadMoreLoading]=\"loading()\"\n                [loadMoreDisabled]=\"disabled() || isReadonly()\" [loadMoreError]=\"loadError()\" [loadMoreConfig]=\"loadMoreConfig()\"\n                [loadMoreTemplate]=\"loadMoreTemplate()\" [loadMoreRevision]=\"options()\" (loadMore)=\"requestMore($event)\">\n                <div role=\"listbox\" [hidden]=\"isSearching()\"  [attr.aria-label]=\"ariaLabel() || resolvedLabel()\" [id]=\"controlId() + '-options'\">\n                    @for (option of filteredOptions(); track option.value; let index = $index) {\n                    @if (option.resolvedGroup && (index === 0 || filteredOptions()[index - 1].resolvedGroup !== option.resolvedGroup)) {\n                    <div class=\"bx-select-group\" [id]=\"controlId() + '-group-' + index\">{{ option.resolvedGroup }}</div>\n                    }\n                    <button type=\"button\" class=\"bx-select-option\" role=\"option\" tabindex=\"-1\" [attr.aria-selected]=\"isSelected(option.value)\"\n                        [disabled]=\"option.disabled || option.groupDisabled || false\" (click)=\"selectOption(option)\">\n                        <span class=\"bx-select-check-placeholder\"  aria-hidden=\"true\">\n                            @if (isSelected(option.value)) { <bx-icon name=\"check\" size=\"16\" /> }\n                        </span>\n                        @if (option.icon) { <bx-icon [name]=\"option.icon\" size=\"16\" /> }\n                        @if (optionTemplate(); as template) {\n                        <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ $implicit: option, selected: isSelected(option.value), index: index }\" />\n                        } @else { <span>{{ option.resolvedStr }}</span> }\n                    </button>\n                    } @empty {\n                    @if (!loading()) { <div class=\"bx-select-empty\" role=\"status\">{{ resolvedEmptyMessage() }}</div> }\n                    }\n                </div>\n                @if (isSearching()) {\n                <div class=\"bx-select-search-state\" role=\"status\" [attr.aria-label]=\"resolvedLoadingLabel() || resolvedLoadingAriaLabel()\">\n                    @if (resolvedLoadingLabel()) { <span>{{ resolvedLoadingLabel() }}</span> }\n                    @else { <bx-loading-spinner [size]=\"20\" [decorative]=\"true\" /> }\n                </div>\n                } @else if (loading() && !pagination.actionVisible()) { <div class=\"bx-select-loading\"><bx-loading-indicator [size]=\"16\" [label]=\"loadingLabel() ?? loadingAriaLabel()\" /></div> }\n            </div>\n        </div>\n    </ng-template>\n    <ng-content select=\"bx-error\" ngProjectAs=\"bx-error\" /><ng-content select=\"bx-hint\" ngProjectAs=\"bx-hint\" />\n</bx-form-field>\n",
-		styles: [":host{display:block;width:100%}.bx-select-trigger{position:relative;display:flex;align-items:center;width:100%;box-sizing:border-box;background-color:var(--bx-bg-neutral);border-radius:.25rem .25rem 0 0;border:none;border-bottom:1px solid var(--bx-border-strong);padding:0 .75rem 0 0;cursor:pointer;text-align:left;font-family:inherit;outline:none}.bx-select-trigger:hover:not(:disabled,.is-readonly){background-color:var(--bx-bg-neutral-hover)}.bx-select-trigger:disabled{background-color:var(--bx-bg-element);opacity:.7;border-bottom-style:dotted;cursor:not-allowed}.bx-select-trigger.is-readonly{cursor:default}.bx-select-trigger:after{content:\"\";position:absolute;bottom:-1px;left:0;right:0;height:2px;background-color:var(--bx-primary);transform:scaleX(0);transition:transform .2s cubic-bezier(.25,.8,.25,1);transform-origin:center;z-index:2}.bx-select-trigger.is-open:after,.bx-select-trigger:focus-visible:not(:disabled):after{transform:scaleX(1)}.bx-select-trigger.is-invalid{border-bottom-color:var(--bx-border-danger)}.bx-select-trigger.is-invalid:after{background-color:var(--bx-border-danger);transform:scaleX(1)}.bx-select-container{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;overflow:hidden}.bx-select-value{width:100%;box-sizing:border-box;padding:1.5rem 0 .5rem .75rem;min-height:3rem;display:block;font-size:1rem;color:var(--bx-text-heading);line-height:1.4;z-index:1}.bx-select-value.is-placeholder{color:var(--bx-text-secondary)}.bx-floating-label{display:flex;align-items:baseline;position:absolute;left:.75rem;top:50%;transform:translateY(-50%);font-size:1rem;color:var(--bx-text-secondary);pointer-events:none;z-index:2;transition:top .2s cubic-bezier(.25,.8,.25,1),transform .2s cubic-bezier(.25,.8,.25,1),font-size .2s cubic-bezier(.25,.8,.25,1),color .15s ease}.bx-select-trigger.is-floating .bx-floating-label{top:.5rem;transform:translateY(0);font-size:.75rem;font-weight:500}.bx-select-trigger.is-floating.is-open .bx-floating-label,.bx-select-trigger.is-floating:focus-visible:not(.is-readonly) .bx-floating-label{color:var(--bx-primary)}.bx-select-trigger.is-invalid .bx-floating-label{color:var(--bx-text-danger)!important}.bx-field-required{color:var(--bx-text-secondary);margin-left:.125rem}.bx-select-caret{flex-shrink:0;color:var(--bx-text-secondary);transition:transform .2s ease;margin-left:.5rem;transform-origin:center}.is-open .bx-select-caret{transform:rotate(180deg)}.bx-select-panel{display:flex;flex-direction:column;box-sizing:border-box;min-width:100%;width:100%;max-width:100%;background-color:var(--bx-glass-surface, var(--bx-bg-surface));border:1px solid var(--bx-glass-edge, var(--bx-border-default));border-radius:.75rem;box-shadow:0 2px 4px #0000001a,0 1px 2px -1px #0000001a;overflow:hidden;max-height:18rem}.bx-select-search-container{display:flex;align-items:center;padding:.25rem;flex-shrink:0;border-bottom:1px solid var(--bx-border-subtle)}.bx-select-menu-container{min-height:0;overflow:hidden auto;padding:.25rem}.bx-select-menu-container::-webkit-scrollbar{width:6px}.bx-select-menu-container::-webkit-scrollbar-track{background:var(--bx-scroll-bg)}.bx-select-menu-container::-webkit-scrollbar-thumb{background:var(--bx-scroll-thumb);border-radius:9999px}.bx-select-menu-container::-webkit-scrollbar-thumb:hover{background:var(--bx-scroll-thumb-hover)}.bx-select-option{display:flex;width:100%;padding:.5rem .75rem;border:0;border-radius:.25rem;background:transparent;color:var(--bx-text-primary);font:inherit;font-size:.875rem;line-height:1.4;text-align:start;cursor:pointer}.bx-select-option[aria-selected=true]{background:var(--bx-accent-subtle);color:var(--bx-text-accent)}.bx-select-option:hover:not(:disabled),.bx-select-option:active:not(:disabled){background:var(--bx-bg-element-hover)}.bx-select-option[aria-selected=true]:hover:not(:disabled){background:var(--bx-accent-subtle)}.bx-select-option:focus-visible{outline:2px solid var(--bx-border-accent);outline-offset:-2px}.bx-select-option:disabled{opacity:.4;cursor:not-allowed}.bx-select-item-inner{display:flex;align-items:center;gap:.5rem;width:100%}.bx-select-check-placeholder{width:16px;height:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--bx-text-accent)}.bx-select-empty{padding:.75rem;text-align:center;color:var(--bx-text-secondary);font-size:.875rem;font-style:italic}.bx-select-trigger[data-bx-surface]{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-shadow: none}.bx-select-trigger[data-bx-surface].is-invalid{--bx-glass-edge: var(--bx-border-danger)}.bx-select-panel[data-bx-surface]{--bx-glass-radius: var(--bx-rounded-lg, .75rem);--bx-glass-surface: var(--bx-bg-surface);--bx-glass-text: var(--bx-text-primary);--bx-glass-edge: var(--bx-border-default);--bx-glass-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);background:var(--bx-glass-surface)!important;-webkit-backdrop-filter:none;backdrop-filter:none}.bx-select-trigger[data-bx-surface]{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-min-opacity: .45;--bx-glass-edge: var(--bx-border-default);--bx-glass-shadow: none;border:1px solid var(--bx-glass-edge);border-radius:.75rem}.bx-select-trigger[data-bx-surface]:after{display:none}.bx-select-trigger[data-bx-surface]:focus-within:not(.is-disabled,:disabled,.is-readonly,[readonly],[aria-readonly=true],:has([readonly],[aria-readonly=true])),.bx-select-trigger[data-bx-surface]:focus-visible:not(:disabled,[readonly],[aria-readonly=true]),.bx-select-trigger[data-bx-surface].is-open:not(:disabled),.bx-select-trigger[data-bx-surface].is-readonly.is-keyboard-focused:focus-within,.bx-select-trigger[data-bx-surface]:has(.bx-readonly.is-keyboard-focused):focus-within{--bx-glass-edge: var(--bx-border-brand);outline:2px solid var(--bx-border-brand);outline-offset:-2px;--bx-glass-shadow: none}.bx-select-trigger[data-bx-surface].is-invalid{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-min-opacity: .45;--bx-glass-edge: color-mix(in srgb, var(--bx-text-danger) 40%, var(--bx-border-default));border-block-end-color:var(--bx-glass-edge);--bx-glass-shadow: 0 8px 18px -10px color-mix(in srgb, var(--bx-text-danger) 65%, transparent);outline-color:var(--bx-border-danger)}.bx-select-trigger.is-floating .bx-floating-label{position:static;transform:none;padding:.5rem 0 0 .75rem;overflow-wrap:anywhere}.bx-select-trigger.is-floating .bx-select-value{padding-top:.25rem;min-height:2rem}.bx-select-trigger:not(.is-floating) .bx-floating-label{right:0}.bx-select-item-inner>span:last-child{flex:1 1 auto;min-width:0;white-space:normal;overflow-wrap:anywhere}.bx-select-group{padding:.5rem .75rem;font-weight:600;color:var(--bx-text-secondary);font-size:.75rem}.bx-select-option{align-items:center;gap:.5rem}.bx-select-panel{max-block-size:min(var(--bx-select-panel-height, 22rem),70dvh)}.bx-select-menu-container{flex:1 1 auto}.bx-select-trigger.is-outline{border:1px solid var(--bx-border-strong);border-radius:var(--bx-field-radius, .5rem)}.bx-select-trigger.is-outline.is-invalid{border-color:var(--bx-border-danger)}.bx-select-panel{background:var(--bx-select-panel-background, var(--bx-bg-surface-alt));border-color:var(--bx-select-panel-border, var(--bx-border-strong));box-shadow:var(--bx-select-panel-shadow, 0 12px 20px -3px rgba(0, 0, 0, .2), 0 4px 6px -2px rgba(0, 0, 0, .1));isolation:isolate}.bx-select-measure{position:absolute;visibility:hidden;pointer-events:none;inset-inline:0;box-sizing:border-box;padding-inline-start:.75rem;font:inherit;font-size:1rem}.bx-select-caret{display:inline-flex;align-items:center;justify-content:center;inline-size:1rem;block-size:1rem}.bx-select-loading{padding:.5rem .75rem}.bx-select-menu-container{--bx-load-more-padding: .5rem .75rem}.bx-select-search-state{display:flex;justify-content:center;align-items:center;min-block-size:4rem;padding:.75rem;color:var(--bx-text-secondary)}[role=listbox][hidden]{display:none}.bx-selected-tags{display:flex;align-items:center;gap:var(--bx-select-tag-gap, .25rem);min-inline-size:0;max-inline-size:100%;overflow:hidden}.bx-selected-tags>bx-tag{min-inline-size:0}.bx-selected-tags>.bx-overflow-tag{flex:0 0 auto}\n"],
+		template: "<bx-form-field [control]=\"fieldControl\" [inline]=\"true\" [tooltip]=\"tooltip()\" [showLoadingIndicator]=\"false\"\n    [hint]=\"hint()\" [hintEnd]=\"hintEnd()\" [subscriptSizing]=\"resolvedSubscriptSizing()\" [forId]=\"controlId()\">\n    <div class=\"bx-select-control\" [class.has-clear]=\"showClear()\">\n    <button type=\"button\" role=\"combobox\" aria-haspopup=\"listbox\" [bxTooltip]=\"resolvedTooltipOnTruncate() ? (selectionDisplay() === 'tags' ? selectedOptionLabel() : truncatedSelectionTooltip()) : ''\" [bxTooltipHover]=\"selectionDisplay() !== 'tags'\" [bxTooltipTouch]=\"selectionDisplay() === 'tags' ? 'none' : 'longpress'\" cdkOverlayOrigin bxSurface #origin=\"cdkOverlayOrigin\" class=\"bx-select-trigger\"\n        [class.is-invalid]=\"showError()\" [class.is-outline]=\"resolvedAppearance() === 'outline'\" [class.is-open]=\"isOpen()\" [class.is-floating]=\"isFloating()\" [class.is-readonly]=\"isReadonly()\" [class.is-keyboard-focused]=\"keyboardFocused()\"\n        [id]=\"controlId()\" [attr.data-testid]=\"dataTestId()\" [attr.aria-label]=\"ariaLabel() || resolvedLabel()\" [attr.aria-labelledby]=\"ariaLabelledBy()\"\n        [attr.aria-describedby]=\"describedBy()\" [attr.aria-invalid]=\"showError()\" [attr.aria-required]=\"required()\" [attr.aria-readonly]=\"isReadonly()\" [attr.aria-busy]=\"loading() || pending() || isSearching()\"\n        [disabled]=\"disabled()\" (click)=\"toggleOpen()\" (keydown)=\"onTriggerKey($event)\" (blur)=\"onTriggerBlur()\"\n        [attr.aria-expanded]=\"isOpen()\" [attr.aria-controls]=\"isPanelAttached() ? controlId() + '-options' : null\">\n        <div class=\"bx-select-container\">\n            @if (label()) {\n            <span class=\"bx-floating-label\"><span [bxTruncate]=\"!isFloating()\" #labelOverflow=\"bxTruncate\">{{ resolvedLabel() }}</span>\n                @if (required() && !resolvedHideRequiredMarker()) { <span class=\"bx-field-required\" aria-hidden=\"true\">*</span> }\n            </span>\n            }\n            <span class=\"bx-select-value\" [class.is-placeholder]=\"!selectedOptionLabel()\" [bxTruncate]=\"!(selectionDisplay() === 'tags' && selectedOptions().length) && !triggerTemplate()\" #valueOverflow=\"bxTruncate\">\n                @if (triggerTemplate(); as template) {\n                <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"triggerContext()\" />\n                } @else if (selectionDisplay() === 'tags' && selectedOptions().length) {\n                <span class=\"bx-selected-tags\">\n                    @for (option of visibleTags(); track option.value) {\n                    <bx-tag [text]=\"option.label\" [config]=\"selectionTagConfig(option)\" [disabled]=\"disabled() || !!option.disabled\" [focusable]=\"false\" [tooltipOnTruncate]=\"resolvedTooltipOnTruncate() ? undefined : false\" />\n                    }\n                    @if (selectedOptions().length > visibleTagCount()) {\n                    <bx-tag class=\"bx-overflow-tag\" [text]=\"overflowTagLabel()\" [config]=\"overflowTagConfig()\" [tooltip]=\"overflowTagTooltip()\" [focusable]=\"false\" [tooltipOnTruncate]=\"resolvedTooltipOnTruncate() ? undefined : false\" />\n                    }\n                </span>\n                } @else { {{ selectedOptionLabel() || (isFloating() || !label() ? resolvedPlaceholder() : '') }} }\n            </span>\n        </div>\n        <ng-content select=\"[bxSuffix]\" />\n        <span class=\"bx-select-caret\" aria-hidden=\"true\">\n            @if (loading() || pending() || isSearching()) { <bx-loading-spinner [size]=\"16\" [decorative]=\"true\" /> }\n            @else { <bx-icon name=\"chevron-down\" size=\"16\" /> }\n        </span>\n    </button>\n    @if (showClear()) {\n    <button bx-button type=\"button\" variant=\"text\" class=\"bx-select-clear\" [surfaceEffects]=\"false\" [disabled]=\"disabled()\"\n        [attr.aria-label]=\"resolvedClearLabel()\" [bxTooltip]=\"resolvedClearTooltip()\" (click)=\"clearSelection()\">\n        <bx-icon name=\"x\" size=\"16\" />\n    </button>\n    }\n    </div>\n    <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"origin\" [cdkConnectedOverlayOpen]=\"isPanelAttached()\"\n        [cdkConnectedOverlayPositions]=\"overlayPositions\" [cdkConnectedOverlayHasBackdrop]=\"false\"\n        [cdkConnectedOverlayScrollStrategy]=\"panelScrollStrategy\" [cdkConnectedOverlayUsePopover]=\"overlayPopoverLocation(origin.elementRef.nativeElement)\"\n        [cdkConnectedOverlayWidth]=\"origin.elementRef.nativeElement.offsetWidth\"\n        (overlayOutsideClick)=\"onOutsideClick($event)\" (attach)=\"onPanelAttach()\" (detach)=\"onPanelDetach()\" (positionChange)=\"refreshPanel()\">\n        <div class=\"bx-select-panel\" [class]=\"panelClass()\" data-bx-surface=\"solid\" tabindex=\"-1\" (keydown)=\"onPanelKey($event)\">\n            @if (isSearchable()) {\n            <div class=\"bx-select-search-container\">\n                <bx-search-input #searchInput [value]=\"searchValue()\" [placeholder]=\"resolvedSearchPlaceholder()\" [ariaLabel]=\"resolvedSearchPlaceholder()\"\n                    (search)=\"onSearchChange($event)\" (keydown.enter)=\"$event.preventDefault()\" />\n            </div>\n            }\n\n            <div class=\"bx-select-menu-container\" bxLoadMore #pagination=\"bxLoadMore\" [loadMoreHasMore]=\"hasMore()\" [loadMoreSuppressed]=\"isSearching()\" [loadMoreLoading]=\"loading()\"\n                [loadMoreDisabled]=\"disabled() || isReadonly()\" [loadMoreError]=\"loadError()\" [loadMoreConfig]=\"loadMoreConfig()\"\n                [loadMoreTemplate]=\"loadMoreTemplate()\" [loadMoreRevision]=\"options()\" (loadMore)=\"requestMore($event)\">\n                <div role=\"listbox\" [hidden]=\"isSearching()\"  [attr.aria-label]=\"ariaLabel() || resolvedLabel()\" [id]=\"controlId() + '-options'\">\n                    @for (option of filteredOptions(); track option.value; let index = $index) {\n                    @if (option.resolvedGroup && (index === 0 || filteredOptions()[index - 1].resolvedGroup !== option.resolvedGroup)) {\n                    <div class=\"bx-select-group\" [id]=\"controlId() + '-group-' + index\">{{ option.resolvedGroup }}</div>\n                    }\n                    <button type=\"button\" class=\"bx-select-option\" role=\"option\" tabindex=\"-1\" [attr.aria-selected]=\"isSelected(option.value)\"\n                        [disabled]=\"option.disabled || option.groupDisabled || false\" (click)=\"selectOption(option)\">\n                        <span class=\"bx-select-check-placeholder\"  aria-hidden=\"true\">\n                            @if (isSelected(option.value)) { <bx-icon name=\"check\" size=\"16\" /> }\n                        </span>\n                        @if (option.icon) { <bx-icon [name]=\"option.icon\" size=\"16\" /> }\n                        @if (optionTemplate(); as template) {\n                        <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ $implicit: option, selected: isSelected(option.value), index: index }\" />\n                        } @else { <span>{{ option.resolvedStr }}</span> }\n                    </button>\n                    } @empty {\n                    @if (!loading()) { <div class=\"bx-select-empty\" role=\"status\">{{ resolvedEmptyMessage() }}</div> }\n                    }\n                </div>\n                @if (isSearching()) {\n                <div class=\"bx-select-search-state\" role=\"status\" [attr.aria-label]=\"resolvedLoadingLabel() || resolvedLoadingAriaLabel()\">\n                    @if (resolvedLoadingLabel()) { <span>{{ resolvedLoadingLabel() }}</span> }\n                    @else { <bx-loading-spinner [size]=\"20\" [decorative]=\"true\" /> }\n                </div>\n                } @else if (loading() && !pagination.actionVisible()) { <div class=\"bx-select-loading\"><bx-loading-indicator [size]=\"16\" [label]=\"loadingLabel() ?? loadingAriaLabel()\" /></div> }\n            </div>\n        </div>\n    </ng-template>\n    <ng-content select=\"bx-error\" ngProjectAs=\"bx-error\" /><ng-content select=\"bx-hint\" ngProjectAs=\"bx-hint\" />\n</bx-form-field>\n",
+		styles: [":host{display:block;width:100%}.bx-select-trigger{position:relative;display:flex;align-items:center;width:100%;box-sizing:border-box;background-color:var(--bx-bg-neutral);border-radius:.25rem .25rem 0 0;border:none;border-bottom:1px solid var(--bx-border-strong);padding:0;padding-inline-end:.75rem;cursor:pointer;text-align:left;font-family:inherit;outline:none}.bx-select-trigger:hover:not(:disabled,.is-readonly){background-color:var(--bx-bg-neutral-hover)}.bx-select-trigger:disabled{background-color:var(--bx-bg-element);opacity:.7;border-bottom-style:dotted;cursor:not-allowed}.bx-select-trigger.is-readonly{cursor:default}.bx-select-trigger:after{content:\"\";position:absolute;bottom:-1px;left:0;right:0;height:2px;background-color:var(--bx-primary);transform:scaleX(0);transition:transform .2s cubic-bezier(.25,.8,.25,1);transform-origin:center;z-index:2}.bx-select-trigger.is-open:after,.bx-select-trigger:focus-visible:not(:disabled):after{transform:scaleX(1)}.bx-select-trigger.is-invalid{border-bottom-color:var(--bx-border-danger)}.bx-select-trigger.is-invalid:after{background-color:var(--bx-border-danger);transform:scaleX(1)}.bx-select-container{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;overflow:hidden}.bx-select-value{width:100%;box-sizing:border-box;padding:1.5rem 0 .5rem .75rem;min-height:3rem;display:block;font-size:1rem;color:var(--bx-text-heading);line-height:1.4;z-index:1}.bx-select-value.is-placeholder{color:var(--bx-text-secondary)}.bx-floating-label{display:flex;align-items:baseline;position:absolute;left:.75rem;top:50%;transform:translateY(-50%);font-size:1rem;color:var(--bx-text-secondary);pointer-events:none;z-index:2;transition:top .2s cubic-bezier(.25,.8,.25,1),transform .2s cubic-bezier(.25,.8,.25,1),font-size .2s cubic-bezier(.25,.8,.25,1),color .15s ease}.bx-select-trigger.is-floating .bx-floating-label{top:.5rem;transform:translateY(0);font-size:.75rem;font-weight:500}.bx-select-trigger.is-floating.is-open .bx-floating-label,.bx-select-trigger.is-floating:focus-visible:not(.is-readonly) .bx-floating-label{color:var(--bx-primary)}.bx-select-trigger.is-invalid .bx-floating-label{color:var(--bx-text-danger)!important}.bx-field-required{color:var(--bx-text-secondary);margin-left:.125rem}.bx-select-caret{flex-shrink:0;color:var(--bx-text-secondary);transition:transform .2s ease;margin-inline-start:.5rem;transform-origin:center}.is-open .bx-select-caret{transform:rotate(180deg)}.bx-select-panel{display:flex;flex-direction:column;box-sizing:border-box;min-width:100%;width:100%;max-width:100%;background-color:var(--bx-glass-surface, var(--bx-bg-surface));border:1px solid var(--bx-glass-edge, var(--bx-border-default));border-radius:.75rem;box-shadow:0 2px 4px #0000001a,0 1px 2px -1px #0000001a;overflow:hidden;max-height:18rem}.bx-select-search-container{display:flex;align-items:center;padding:.25rem;flex-shrink:0;border-bottom:1px solid var(--bx-border-subtle)}.bx-select-menu-container{min-height:0;overflow:hidden auto;padding:.25rem}.bx-select-menu-container::-webkit-scrollbar{width:6px}.bx-select-menu-container::-webkit-scrollbar-track{background:var(--bx-scroll-bg)}.bx-select-menu-container::-webkit-scrollbar-thumb{background:var(--bx-scroll-thumb);border-radius:9999px}.bx-select-menu-container::-webkit-scrollbar-thumb:hover{background:var(--bx-scroll-thumb-hover)}.bx-select-option{display:flex;width:100%;padding:.5rem .75rem;border:0;border-radius:.25rem;background:transparent;color:var(--bx-text-primary);font:inherit;font-size:.875rem;line-height:1.4;text-align:start;cursor:pointer}.bx-select-option[aria-selected=true]{background:var(--bx-accent-subtle);color:var(--bx-text-accent)}.bx-select-option:hover:not(:disabled),.bx-select-option:active:not(:disabled){background:var(--bx-bg-element-hover)}.bx-select-option[aria-selected=true]:hover:not(:disabled){background:var(--bx-accent-subtle)}.bx-select-option:focus-visible{outline:2px solid var(--bx-border-accent);outline-offset:-2px}.bx-select-option:disabled{opacity:.4;cursor:not-allowed}.bx-select-item-inner{display:flex;align-items:center;gap:.5rem;width:100%}.bx-select-check-placeholder{width:16px;height:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--bx-text-accent)}.bx-select-empty{padding:.75rem;text-align:center;color:var(--bx-text-secondary);font-size:.875rem;font-style:italic}.bx-select-trigger[data-bx-surface]{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-shadow: none}.bx-select-trigger[data-bx-surface].is-invalid{--bx-glass-edge: var(--bx-border-danger)}.bx-select-panel[data-bx-surface]{--bx-glass-radius: var(--bx-rounded-lg, .75rem);--bx-glass-surface: var(--bx-bg-surface);--bx-glass-text: var(--bx-text-primary);--bx-glass-edge: var(--bx-border-default);--bx-glass-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);background:var(--bx-glass-surface)!important;-webkit-backdrop-filter:none;backdrop-filter:none}.bx-select-trigger[data-bx-surface]{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-min-opacity: .45;--bx-glass-edge: var(--bx-border-default);--bx-glass-shadow: none;border:1px solid var(--bx-glass-edge);border-radius:.75rem}.bx-select-trigger[data-bx-surface]:after{display:none}.bx-select-trigger[data-bx-surface]:focus-within:not(.is-disabled,:disabled,.is-readonly,[readonly],[aria-readonly=true],:has([readonly],[aria-readonly=true])),.bx-select-trigger[data-bx-surface]:focus-visible:not(:disabled,[readonly],[aria-readonly=true]),.bx-select-trigger[data-bx-surface].is-open:not(:disabled),.bx-select-trigger[data-bx-surface].is-readonly.is-keyboard-focused:focus-within,.bx-select-trigger[data-bx-surface]:has(.bx-readonly.is-keyboard-focused):focus-within{--bx-glass-edge: var(--bx-border-brand);outline:2px solid var(--bx-border-brand);outline-offset:-2px;--bx-glass-shadow: none}.bx-select-trigger[data-bx-surface].is-invalid{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-min-opacity: .45;--bx-glass-edge: color-mix(in srgb, var(--bx-text-danger) 40%, var(--bx-border-default));border-block-end-color:var(--bx-glass-edge);--bx-glass-shadow: 0 8px 18px -10px color-mix(in srgb, var(--bx-text-danger) 65%, transparent);outline-color:var(--bx-border-danger)}.bx-select-trigger.is-floating .bx-floating-label{position:static;transform:none;padding:.5rem 0 0 .75rem;overflow-wrap:anywhere}.bx-select-trigger.is-floating .bx-select-value{padding-top:.25rem;min-height:2rem}.bx-select-trigger:not(.is-floating) .bx-floating-label{right:0}.bx-select-item-inner>span:last-child{flex:1 1 auto;min-width:0;white-space:normal;overflow-wrap:anywhere}.bx-select-group{padding:.5rem .75rem;font-weight:600;color:var(--bx-text-secondary);font-size:.75rem}.bx-select-option{align-items:center;gap:.5rem}.bx-select-panel{max-block-size:min(var(--bx-select-panel-height, 22rem),70dvh)}.bx-select-menu-container{flex:1 1 auto}.bx-select-trigger.is-outline{border:1px solid var(--bx-border-strong);border-radius:var(--bx-field-radius, .5rem)}.bx-select-trigger.is-outline.is-invalid{border-color:var(--bx-border-danger)}.bx-select-panel{background:var(--bx-select-panel-background, var(--bx-bg-surface-alt));border-color:var(--bx-select-panel-border, var(--bx-border-strong));box-shadow:var(--bx-select-panel-shadow, 0 12px 20px -3px rgba(0, 0, 0, .2), 0 4px 6px -2px rgba(0, 0, 0, .1));isolation:isolate}.bx-select-measure{position:absolute;visibility:hidden;pointer-events:none;inset-inline:0;box-sizing:border-box;padding-inline-start:.75rem;font:inherit;font-size:1rem}.bx-select-caret{display:inline-flex;align-items:center;justify-content:center;inline-size:1rem;block-size:1rem}.bx-select-loading{padding:.5rem .75rem}.bx-select-menu-container{--bx-load-more-padding: .5rem .75rem}.bx-select-search-state{display:flex;justify-content:center;align-items:center;min-block-size:4rem;padding:.75rem;color:var(--bx-text-secondary)}[role=listbox][hidden]{display:none}.bx-selected-tags{display:flex;align-items:center;gap:var(--bx-select-tag-gap, .25rem);min-inline-size:0;max-inline-size:100%;overflow:hidden}.bx-selected-tags>bx-tag{min-inline-size:0}.bx-selected-tags>.bx-overflow-tag{flex:0 0 auto}[role=listbox]{display:flex;flex-direction:column;gap:var(--bx-select-option-gap, .25rem)}.bx-select-option>span:last-child{min-inline-size:0;overflow-wrap:anywhere}.bx-select-control{position:relative;inline-size:100%;min-inline-size:0}.bx-select-control.has-clear .bx-select-container{padding-inline-end:2rem}.bx-select-control.has-clear .bx-select-measure{inset-inline-end:2rem}.bx-select-clear.bx-btn{transition-property:color;transition-duration:calc(.15s * (1 - var(--bx-reduced-motion, 0)));transition-timing-function:ease;display:flex;align-items:center;justify-content:center;box-sizing:border-box;background:transparent;border:none;padding:.25rem;inline-size:1.5rem;block-size:1.5rem;border-radius:.25rem;color:var(--bx-text-secondary);cursor:pointer;flex-shrink:0}.bx-select-clear.bx-btn:focus-visible{outline:2px solid var(--bx-border-brand);outline-offset:0}.bx-select-clear.bx-btn:hover:not(:disabled){color:var(--bx-text-primary);background:var(--bx-bg-element-hover)}.bx-select-clear.bx-btn:disabled{cursor:not-allowed;opacity:.5}.bx-select-clear.bx-btn{position:absolute;inset-block-start:50%;inset-inline-end:calc(1px + 2.25rem);transform:translateY(-50%);z-index:3}\n"],
 		dependencies: [
 			{
 				kind: "directive",
@@ -4393,6 +4570,21 @@ var Select = class Select extends BxSelectBase {
 					"subscriptSizing"
 				]
 			},
+			{
+				kind: "component",
+				type: Button,
+				selector: "bx-button, button[bx-button], a[bx-button]",
+				inputs: [
+					"variant",
+					"color",
+					"outlined",
+					"elevated",
+					"disabled",
+					"loading",
+					"interactive",
+					"surfaceEffects"
+				]
+			},
 			{
 				kind: "component",
 				type: Icon,
@@ -4525,6 +4717,7 @@ i0.ɵɵngDeclareClassMetadata({
 				BxSurfaceDirective,
 				OverlayModule,
 				FormField,
+				Button,
 				Icon,
 				SearchInput,
 				LoadMoreDirective,
@@ -4536,8 +4729,8 @@ i0.ɵɵngDeclareClassMetadata({
 				TruncateDirective
 			],
 			changeDetection: ChangeDetectionStrategy.OnPush,
-			template: "<bx-form-field [control]=\"fieldControl\" [inline]=\"true\" [tooltip]=\"tooltip()\" [showLoadingIndicator]=\"false\"\n    [hint]=\"hint()\" [hintEnd]=\"hintEnd()\" [subscriptSizing]=\"resolvedSubscriptSizing()\" [forId]=\"controlId()\">\n    <button type=\"button\" role=\"combobox\" aria-haspopup=\"listbox\" [bxTooltip]=\"resolvedTooltipOnTruncate() ? (selectionDisplay() === 'tags' ? selectedOptionLabel() : truncatedSelectionTooltip()) : ''\" [bxTooltipHover]=\"selectionDisplay() !== 'tags'\" [bxTooltipTouch]=\"selectionDisplay() === 'tags' ? 'none' : 'longpress'\" cdkOverlayOrigin bxSurface #origin=\"cdkOverlayOrigin\" class=\"bx-select-trigger\"\n        [class.is-invalid]=\"showError()\" [class.is-outline]=\"resolvedAppearance() === 'outline'\" [class.is-open]=\"isOpen()\" [class.is-floating]=\"isFloating()\" [class.is-readonly]=\"isReadonly()\" [class.is-keyboard-focused]=\"keyboardFocused()\"\n        [id]=\"controlId()\" [attr.data-testid]=\"dataTestId()\" [attr.aria-label]=\"ariaLabel() || resolvedLabel()\" [attr.aria-labelledby]=\"ariaLabelledBy()\"\n        [attr.aria-describedby]=\"describedBy()\" [attr.aria-invalid]=\"showError()\" [attr.aria-required]=\"required()\" [attr.aria-readonly]=\"isReadonly()\" [attr.aria-busy]=\"loading() || pending() || isSearching()\"\n        [disabled]=\"disabled()\" (click)=\"toggleOpen()\" (keydown)=\"onTriggerKey($event)\" (blur)=\"onTriggerBlur()\"\n        [attr.aria-expanded]=\"isOpen()\" [attr.aria-controls]=\"isPanelAttached() ? controlId() + '-options' : null\">\n        <div class=\"bx-select-container\">\n            @if (label()) {\n            <span class=\"bx-floating-label\"><span [bxTruncate]=\"!isFloating()\" #labelOverflow=\"bxTruncate\">{{ resolvedLabel() }}</span>\n                @if (required() && !resolvedHideRequiredMarker()) { <span class=\"bx-field-required\" aria-hidden=\"true\">*</span> }\n            </span>\n            }\n            <span class=\"bx-select-value\" [class.is-placeholder]=\"!selectedOptionLabel()\" [bxTruncate]=\"!(selectionDisplay() === 'tags' && selectedOptions().length) && !triggerTemplate()\" #valueOverflow=\"bxTruncate\">\n                @if (triggerTemplate(); as template) {\n                <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"triggerContext()\" />\n                } @else if (selectionDisplay() === 'tags' && selectedOptions().length) {\n                <span class=\"bx-selected-tags\">\n                    @for (option of visibleTags(); track option.value) {\n                    <bx-tag [text]=\"option.label\" [config]=\"selectionTagConfig(option)\" [disabled]=\"disabled() || !!option.disabled\" [focusable]=\"false\" [tooltipOnTruncate]=\"resolvedTooltipOnTruncate() ? undefined : false\" />\n                    }\n                    @if (selectedOptions().length > visibleTagCount()) {\n                    <bx-tag class=\"bx-overflow-tag\" [text]=\"overflowTagLabel()\" [config]=\"overflowTagConfig()\" [tooltip]=\"overflowTagTooltip()\" [focusable]=\"false\" [tooltipOnTruncate]=\"resolvedTooltipOnTruncate() ? undefined : false\" />\n                    }\n                </span>\n                } @else { {{ selectedOptionLabel() || (isFloating() || !label() ? resolvedPlaceholder() : '') }} }\n            </span>\n        </div>\n        <ng-content select=\"[bxSuffix]\" />\n        <span class=\"bx-select-caret\" aria-hidden=\"true\">\n            @if (loading() || pending() || isSearching()) { <bx-loading-spinner [size]=\"16\" [decorative]=\"true\" /> }\n            @else { <bx-icon name=\"chevron-down\" size=\"16\" /> }\n        </span>\n    </button>\n    <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"origin\" [cdkConnectedOverlayOpen]=\"isPanelAttached()\"\n        [cdkConnectedOverlayPositions]=\"overlayPositions\" [cdkConnectedOverlayHasBackdrop]=\"false\"\n        [cdkConnectedOverlayScrollStrategy]=\"panelScrollStrategy\" [cdkConnectedOverlayUsePopover]=\"overlayPopoverLocation(origin.elementRef.nativeElement)\"\n        [cdkConnectedOverlayWidth]=\"origin.elementRef.nativeElement.offsetWidth\"\n        (overlayOutsideClick)=\"onOutsideClick($event)\" (attach)=\"onPanelAttach()\" (detach)=\"onPanelDetach()\" (positionChange)=\"refreshPanel()\">\n        <div class=\"bx-select-panel\" [class]=\"panelClass()\" data-bx-surface=\"solid\" tabindex=\"-1\" (keydown)=\"onPanelKey($event)\">\n            @if (isSearchable()) {\n            <div class=\"bx-select-search-container\">\n                <bx-search-input #searchInput [value]=\"searchValue()\" [placeholder]=\"resolvedSearchPlaceholder()\" [ariaLabel]=\"resolvedSearchPlaceholder()\"\n                    (search)=\"onSearchChange($event)\" (keydown.enter)=\"$event.preventDefault()\" />\n            </div>\n            }\n\n            <div class=\"bx-select-menu-container\" bxLoadMore #pagination=\"bxLoadMore\" [loadMoreHasMore]=\"hasMore()\" [loadMoreSuppressed]=\"isSearching()\" [loadMoreLoading]=\"loading()\"\n                [loadMoreDisabled]=\"disabled() || isReadonly()\" [loadMoreError]=\"loadError()\" [loadMoreConfig]=\"loadMoreConfig()\"\n                [loadMoreTemplate]=\"loadMoreTemplate()\" [loadMoreRevision]=\"options()\" (loadMore)=\"requestMore($event)\">\n                <div role=\"listbox\" [hidden]=\"isSearching()\"  [attr.aria-label]=\"ariaLabel() || resolvedLabel()\" [id]=\"controlId() + '-options'\">\n                    @for (option of filteredOptions(); track option.value; let index = $index) {\n                    @if (option.resolvedGroup && (index === 0 || filteredOptions()[index - 1].resolvedGroup !== option.resolvedGroup)) {\n                    <div class=\"bx-select-group\" [id]=\"controlId() + '-group-' + index\">{{ option.resolvedGroup }}</div>\n                    }\n                    <button type=\"button\" class=\"bx-select-option\" role=\"option\" tabindex=\"-1\" [attr.aria-selected]=\"isSelected(option.value)\"\n                        [disabled]=\"option.disabled || option.groupDisabled || false\" (click)=\"selectOption(option)\">\n                        <span class=\"bx-select-check-placeholder\"  aria-hidden=\"true\">\n                            @if (isSelected(option.value)) { <bx-icon name=\"check\" size=\"16\" /> }\n                        </span>\n                        @if (option.icon) { <bx-icon [name]=\"option.icon\" size=\"16\" /> }\n                        @if (optionTemplate(); as template) {\n                        <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ $implicit: option, selected: isSelected(option.value), index: index }\" />\n                        } @else { <span>{{ option.resolvedStr }}</span> }\n                    </button>\n                    } @empty {\n                    @if (!loading()) { <div class=\"bx-select-empty\" role=\"status\">{{ resolvedEmptyMessage() }}</div> }\n                    }\n                </div>\n                @if (isSearching()) {\n                <div class=\"bx-select-search-state\" role=\"status\" [attr.aria-label]=\"resolvedLoadingLabel() || resolvedLoadingAriaLabel()\">\n                    @if (resolvedLoadingLabel()) { <span>{{ resolvedLoadingLabel() }}</span> }\n                    @else { <bx-loading-spinner [size]=\"20\" [decorative]=\"true\" /> }\n                </div>\n                } @else if (loading() && !pagination.actionVisible()) { <div class=\"bx-select-loading\"><bx-loading-indicator [size]=\"16\" [label]=\"loadingLabel() ?? loadingAriaLabel()\" /></div> }\n            </div>\n        </div>\n    </ng-template>\n    <ng-content select=\"bx-error\" ngProjectAs=\"bx-error\" /><ng-content select=\"bx-hint\" ngProjectAs=\"bx-hint\" />\n</bx-form-field>\n",
-			styles: [":host{display:block;width:100%}.bx-select-trigger{position:relative;display:flex;align-items:center;width:100%;box-sizing:border-box;background-color:var(--bx-bg-neutral);border-radius:.25rem .25rem 0 0;border:none;border-bottom:1px solid var(--bx-border-strong);padding:0 .75rem 0 0;cursor:pointer;text-align:left;font-family:inherit;outline:none}.bx-select-trigger:hover:not(:disabled,.is-readonly){background-color:var(--bx-bg-neutral-hover)}.bx-select-trigger:disabled{background-color:var(--bx-bg-element);opacity:.7;border-bottom-style:dotted;cursor:not-allowed}.bx-select-trigger.is-readonly{cursor:default}.bx-select-trigger:after{content:\"\";position:absolute;bottom:-1px;left:0;right:0;height:2px;background-color:var(--bx-primary);transform:scaleX(0);transition:transform .2s cubic-bezier(.25,.8,.25,1);transform-origin:center;z-index:2}.bx-select-trigger.is-open:after,.bx-select-trigger:focus-visible:not(:disabled):after{transform:scaleX(1)}.bx-select-trigger.is-invalid{border-bottom-color:var(--bx-border-danger)}.bx-select-trigger.is-invalid:after{background-color:var(--bx-border-danger);transform:scaleX(1)}.bx-select-container{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;overflow:hidden}.bx-select-value{width:100%;box-sizing:border-box;padding:1.5rem 0 .5rem .75rem;min-height:3rem;display:block;font-size:1rem;color:var(--bx-text-heading);line-height:1.4;z-index:1}.bx-select-value.is-placeholder{color:var(--bx-text-secondary)}.bx-floating-label{display:flex;align-items:baseline;position:absolute;left:.75rem;top:50%;transform:translateY(-50%);font-size:1rem;color:var(--bx-text-secondary);pointer-events:none;z-index:2;transition:top .2s cubic-bezier(.25,.8,.25,1),transform .2s cubic-bezier(.25,.8,.25,1),font-size .2s cubic-bezier(.25,.8,.25,1),color .15s ease}.bx-select-trigger.is-floating .bx-floating-label{top:.5rem;transform:translateY(0);font-size:.75rem;font-weight:500}.bx-select-trigger.is-floating.is-open .bx-floating-label,.bx-select-trigger.is-floating:focus-visible:not(.is-readonly) .bx-floating-label{color:var(--bx-primary)}.bx-select-trigger.is-invalid .bx-floating-label{color:var(--bx-text-danger)!important}.bx-field-required{color:var(--bx-text-secondary);margin-left:.125rem}.bx-select-caret{flex-shrink:0;color:var(--bx-text-secondary);transition:transform .2s ease;margin-left:.5rem;transform-origin:center}.is-open .bx-select-caret{transform:rotate(180deg)}.bx-select-panel{display:flex;flex-direction:column;box-sizing:border-box;min-width:100%;width:100%;max-width:100%;background-color:var(--bx-glass-surface, var(--bx-bg-surface));border:1px solid var(--bx-glass-edge, var(--bx-border-default));border-radius:.75rem;box-shadow:0 2px 4px #0000001a,0 1px 2px -1px #0000001a;overflow:hidden;max-height:18rem}.bx-select-search-container{display:flex;align-items:center;padding:.25rem;flex-shrink:0;border-bottom:1px solid var(--bx-border-subtle)}.bx-select-menu-container{min-height:0;overflow:hidden auto;padding:.25rem}.bx-select-menu-container::-webkit-scrollbar{width:6px}.bx-select-menu-container::-webkit-scrollbar-track{background:var(--bx-scroll-bg)}.bx-select-menu-container::-webkit-scrollbar-thumb{background:var(--bx-scroll-thumb);border-radius:9999px}.bx-select-menu-container::-webkit-scrollbar-thumb:hover{background:var(--bx-scroll-thumb-hover)}.bx-select-option{display:flex;width:100%;padding:.5rem .75rem;border:0;border-radius:.25rem;background:transparent;color:var(--bx-text-primary);font:inherit;font-size:.875rem;line-height:1.4;text-align:start;cursor:pointer}.bx-select-option[aria-selected=true]{background:var(--bx-accent-subtle);color:var(--bx-text-accent)}.bx-select-option:hover:not(:disabled),.bx-select-option:active:not(:disabled){background:var(--bx-bg-element-hover)}.bx-select-option[aria-selected=true]:hover:not(:disabled){background:var(--bx-accent-subtle)}.bx-select-option:focus-visible{outline:2px solid var(--bx-border-accent);outline-offset:-2px}.bx-select-option:disabled{opacity:.4;cursor:not-allowed}.bx-select-item-inner{display:flex;align-items:center;gap:.5rem;width:100%}.bx-select-check-placeholder{width:16px;height:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--bx-text-accent)}.bx-select-empty{padding:.75rem;text-align:center;color:var(--bx-text-secondary);font-size:.875rem;font-style:italic}.bx-select-trigger[data-bx-surface]{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-shadow: none}.bx-select-trigger[data-bx-surface].is-invalid{--bx-glass-edge: var(--bx-border-danger)}.bx-select-panel[data-bx-surface]{--bx-glass-radius: var(--bx-rounded-lg, .75rem);--bx-glass-surface: var(--bx-bg-surface);--bx-glass-text: var(--bx-text-primary);--bx-glass-edge: var(--bx-border-default);--bx-glass-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);background:var(--bx-glass-surface)!important;-webkit-backdrop-filter:none;backdrop-filter:none}.bx-select-trigger[data-bx-surface]{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-min-opacity: .45;--bx-glass-edge: var(--bx-border-default);--bx-glass-shadow: none;border:1px solid var(--bx-glass-edge);border-radius:.75rem}.bx-select-trigger[data-bx-surface]:after{display:none}.bx-select-trigger[data-bx-surface]:focus-within:not(.is-disabled,:disabled,.is-readonly,[readonly],[aria-readonly=true],:has([readonly],[aria-readonly=true])),.bx-select-trigger[data-bx-surface]:focus-visible:not(:disabled,[readonly],[aria-readonly=true]),.bx-select-trigger[data-bx-surface].is-open:not(:disabled),.bx-select-trigger[data-bx-surface].is-readonly.is-keyboard-focused:focus-within,.bx-select-trigger[data-bx-surface]:has(.bx-readonly.is-keyboard-focused):focus-within{--bx-glass-edge: var(--bx-border-brand);outline:2px solid var(--bx-border-brand);outline-offset:-2px;--bx-glass-shadow: none}.bx-select-trigger[data-bx-surface].is-invalid{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-min-opacity: .45;--bx-glass-edge: color-mix(in srgb, var(--bx-text-danger) 40%, var(--bx-border-default));border-block-end-color:var(--bx-glass-edge);--bx-glass-shadow: 0 8px 18px -10px color-mix(in srgb, var(--bx-text-danger) 65%, transparent);outline-color:var(--bx-border-danger)}.bx-select-trigger.is-floating .bx-floating-label{position:static;transform:none;padding:.5rem 0 0 .75rem;overflow-wrap:anywhere}.bx-select-trigger.is-floating .bx-select-value{padding-top:.25rem;min-height:2rem}.bx-select-trigger:not(.is-floating) .bx-floating-label{right:0}.bx-select-item-inner>span:last-child{flex:1 1 auto;min-width:0;white-space:normal;overflow-wrap:anywhere}.bx-select-group{padding:.5rem .75rem;font-weight:600;color:var(--bx-text-secondary);font-size:.75rem}.bx-select-option{align-items:center;gap:.5rem}.bx-select-panel{max-block-size:min(var(--bx-select-panel-height, 22rem),70dvh)}.bx-select-menu-container{flex:1 1 auto}.bx-select-trigger.is-outline{border:1px solid var(--bx-border-strong);border-radius:var(--bx-field-radius, .5rem)}.bx-select-trigger.is-outline.is-invalid{border-color:var(--bx-border-danger)}.bx-select-panel{background:var(--bx-select-panel-background, var(--bx-bg-surface-alt));border-color:var(--bx-select-panel-border, var(--bx-border-strong));box-shadow:var(--bx-select-panel-shadow, 0 12px 20px -3px rgba(0, 0, 0, .2), 0 4px 6px -2px rgba(0, 0, 0, .1));isolation:isolate}.bx-select-measure{position:absolute;visibility:hidden;pointer-events:none;inset-inline:0;box-sizing:border-box;padding-inline-start:.75rem;font:inherit;font-size:1rem}.bx-select-caret{display:inline-flex;align-items:center;justify-content:center;inline-size:1rem;block-size:1rem}.bx-select-loading{padding:.5rem .75rem}.bx-select-menu-container{--bx-load-more-padding: .5rem .75rem}.bx-select-search-state{display:flex;justify-content:center;align-items:center;min-block-size:4rem;padding:.75rem;color:var(--bx-text-secondary)}[role=listbox][hidden]{display:none}.bx-selected-tags{display:flex;align-items:center;gap:var(--bx-select-tag-gap, .25rem);min-inline-size:0;max-inline-size:100%;overflow:hidden}.bx-selected-tags>bx-tag{min-inline-size:0}.bx-selected-tags>.bx-overflow-tag{flex:0 0 auto}\n"]
+			template: "<bx-form-field [control]=\"fieldControl\" [inline]=\"true\" [tooltip]=\"tooltip()\" [showLoadingIndicator]=\"false\"\n    [hint]=\"hint()\" [hintEnd]=\"hintEnd()\" [subscriptSizing]=\"resolvedSubscriptSizing()\" [forId]=\"controlId()\">\n    <div class=\"bx-select-control\" [class.has-clear]=\"showClear()\">\n    <button type=\"button\" role=\"combobox\" aria-haspopup=\"listbox\" [bxTooltip]=\"resolvedTooltipOnTruncate() ? (selectionDisplay() === 'tags' ? selectedOptionLabel() : truncatedSelectionTooltip()) : ''\" [bxTooltipHover]=\"selectionDisplay() !== 'tags'\" [bxTooltipTouch]=\"selectionDisplay() === 'tags' ? 'none' : 'longpress'\" cdkOverlayOrigin bxSurface #origin=\"cdkOverlayOrigin\" class=\"bx-select-trigger\"\n        [class.is-invalid]=\"showError()\" [class.is-outline]=\"resolvedAppearance() === 'outline'\" [class.is-open]=\"isOpen()\" [class.is-floating]=\"isFloating()\" [class.is-readonly]=\"isReadonly()\" [class.is-keyboard-focused]=\"keyboardFocused()\"\n        [id]=\"controlId()\" [attr.data-testid]=\"dataTestId()\" [attr.aria-label]=\"ariaLabel() || resolvedLabel()\" [attr.aria-labelledby]=\"ariaLabelledBy()\"\n        [attr.aria-describedby]=\"describedBy()\" [attr.aria-invalid]=\"showError()\" [attr.aria-required]=\"required()\" [attr.aria-readonly]=\"isReadonly()\" [attr.aria-busy]=\"loading() || pending() || isSearching()\"\n        [disabled]=\"disabled()\" (click)=\"toggleOpen()\" (keydown)=\"onTriggerKey($event)\" (blur)=\"onTriggerBlur()\"\n        [attr.aria-expanded]=\"isOpen()\" [attr.aria-controls]=\"isPanelAttached() ? controlId() + '-options' : null\">\n        <div class=\"bx-select-container\">\n            @if (label()) {\n            <span class=\"bx-floating-label\"><span [bxTruncate]=\"!isFloating()\" #labelOverflow=\"bxTruncate\">{{ resolvedLabel() }}</span>\n                @if (required() && !resolvedHideRequiredMarker()) { <span class=\"bx-field-required\" aria-hidden=\"true\">*</span> }\n            </span>\n            }\n            <span class=\"bx-select-value\" [class.is-placeholder]=\"!selectedOptionLabel()\" [bxTruncate]=\"!(selectionDisplay() === 'tags' && selectedOptions().length) && !triggerTemplate()\" #valueOverflow=\"bxTruncate\">\n                @if (triggerTemplate(); as template) {\n                <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"triggerContext()\" />\n                } @else if (selectionDisplay() === 'tags' && selectedOptions().length) {\n                <span class=\"bx-selected-tags\">\n                    @for (option of visibleTags(); track option.value) {\n                    <bx-tag [text]=\"option.label\" [config]=\"selectionTagConfig(option)\" [disabled]=\"disabled() || !!option.disabled\" [focusable]=\"false\" [tooltipOnTruncate]=\"resolvedTooltipOnTruncate() ? undefined : false\" />\n                    }\n                    @if (selectedOptions().length > visibleTagCount()) {\n                    <bx-tag class=\"bx-overflow-tag\" [text]=\"overflowTagLabel()\" [config]=\"overflowTagConfig()\" [tooltip]=\"overflowTagTooltip()\" [focusable]=\"false\" [tooltipOnTruncate]=\"resolvedTooltipOnTruncate() ? undefined : false\" />\n                    }\n                </span>\n                } @else { {{ selectedOptionLabel() || (isFloating() || !label() ? resolvedPlaceholder() : '') }} }\n            </span>\n        </div>\n        <ng-content select=\"[bxSuffix]\" />\n        <span class=\"bx-select-caret\" aria-hidden=\"true\">\n            @if (loading() || pending() || isSearching()) { <bx-loading-spinner [size]=\"16\" [decorative]=\"true\" /> }\n            @else { <bx-icon name=\"chevron-down\" size=\"16\" /> }\n        </span>\n    </button>\n    @if (showClear()) {\n    <button bx-button type=\"button\" variant=\"text\" class=\"bx-select-clear\" [surfaceEffects]=\"false\" [disabled]=\"disabled()\"\n        [attr.aria-label]=\"resolvedClearLabel()\" [bxTooltip]=\"resolvedClearTooltip()\" (click)=\"clearSelection()\">\n        <bx-icon name=\"x\" size=\"16\" />\n    </button>\n    }\n    </div>\n    <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"origin\" [cdkConnectedOverlayOpen]=\"isPanelAttached()\"\n        [cdkConnectedOverlayPositions]=\"overlayPositions\" [cdkConnectedOverlayHasBackdrop]=\"false\"\n        [cdkConnectedOverlayScrollStrategy]=\"panelScrollStrategy\" [cdkConnectedOverlayUsePopover]=\"overlayPopoverLocation(origin.elementRef.nativeElement)\"\n        [cdkConnectedOverlayWidth]=\"origin.elementRef.nativeElement.offsetWidth\"\n        (overlayOutsideClick)=\"onOutsideClick($event)\" (attach)=\"onPanelAttach()\" (detach)=\"onPanelDetach()\" (positionChange)=\"refreshPanel()\">\n        <div class=\"bx-select-panel\" [class]=\"panelClass()\" data-bx-surface=\"solid\" tabindex=\"-1\" (keydown)=\"onPanelKey($event)\">\n            @if (isSearchable()) {\n            <div class=\"bx-select-search-container\">\n                <bx-search-input #searchInput [value]=\"searchValue()\" [placeholder]=\"resolvedSearchPlaceholder()\" [ariaLabel]=\"resolvedSearchPlaceholder()\"\n                    (search)=\"onSearchChange($event)\" (keydown.enter)=\"$event.preventDefault()\" />\n            </div>\n            }\n\n            <div class=\"bx-select-menu-container\" bxLoadMore #pagination=\"bxLoadMore\" [loadMoreHasMore]=\"hasMore()\" [loadMoreSuppressed]=\"isSearching()\" [loadMoreLoading]=\"loading()\"\n                [loadMoreDisabled]=\"disabled() || isReadonly()\" [loadMoreError]=\"loadError()\" [loadMoreConfig]=\"loadMoreConfig()\"\n                [loadMoreTemplate]=\"loadMoreTemplate()\" [loadMoreRevision]=\"options()\" (loadMore)=\"requestMore($event)\">\n                <div role=\"listbox\" [hidden]=\"isSearching()\"  [attr.aria-label]=\"ariaLabel() || resolvedLabel()\" [id]=\"controlId() + '-options'\">\n                    @for (option of filteredOptions(); track option.value; let index = $index) {\n                    @if (option.resolvedGroup && (index === 0 || filteredOptions()[index - 1].resolvedGroup !== option.resolvedGroup)) {\n                    <div class=\"bx-select-group\" [id]=\"controlId() + '-group-' + index\">{{ option.resolvedGroup }}</div>\n                    }\n                    <button type=\"button\" class=\"bx-select-option\" role=\"option\" tabindex=\"-1\" [attr.aria-selected]=\"isSelected(option.value)\"\n                        [disabled]=\"option.disabled || option.groupDisabled || false\" (click)=\"selectOption(option)\">\n                        <span class=\"bx-select-check-placeholder\"  aria-hidden=\"true\">\n                            @if (isSelected(option.value)) { <bx-icon name=\"check\" size=\"16\" /> }\n                        </span>\n                        @if (option.icon) { <bx-icon [name]=\"option.icon\" size=\"16\" /> }\n                        @if (optionTemplate(); as template) {\n                        <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ $implicit: option, selected: isSelected(option.value), index: index }\" />\n                        } @else { <span>{{ option.resolvedStr }}</span> }\n                    </button>\n                    } @empty {\n                    @if (!loading()) { <div class=\"bx-select-empty\" role=\"status\">{{ resolvedEmptyMessage() }}</div> }\n                    }\n                </div>\n                @if (isSearching()) {\n                <div class=\"bx-select-search-state\" role=\"status\" [attr.aria-label]=\"resolvedLoadingLabel() || resolvedLoadingAriaLabel()\">\n                    @if (resolvedLoadingLabel()) { <span>{{ resolvedLoadingLabel() }}</span> }\n                    @else { <bx-loading-spinner [size]=\"20\" [decorative]=\"true\" /> }\n                </div>\n                } @else if (loading() && !pagination.actionVisible()) { <div class=\"bx-select-loading\"><bx-loading-indicator [size]=\"16\" [label]=\"loadingLabel() ?? loadingAriaLabel()\" /></div> }\n            </div>\n        </div>\n    </ng-template>\n    <ng-content select=\"bx-error\" ngProjectAs=\"bx-error\" /><ng-content select=\"bx-hint\" ngProjectAs=\"bx-hint\" />\n</bx-form-field>\n",
+			styles: [":host{display:block;width:100%}.bx-select-trigger{position:relative;display:flex;align-items:center;width:100%;box-sizing:border-box;background-color:var(--bx-bg-neutral);border-radius:.25rem .25rem 0 0;border:none;border-bottom:1px solid var(--bx-border-strong);padding:0;padding-inline-end:.75rem;cursor:pointer;text-align:left;font-family:inherit;outline:none}.bx-select-trigger:hover:not(:disabled,.is-readonly){background-color:var(--bx-bg-neutral-hover)}.bx-select-trigger:disabled{background-color:var(--bx-bg-element);opacity:.7;border-bottom-style:dotted;cursor:not-allowed}.bx-select-trigger.is-readonly{cursor:default}.bx-select-trigger:after{content:\"\";position:absolute;bottom:-1px;left:0;right:0;height:2px;background-color:var(--bx-primary);transform:scaleX(0);transition:transform .2s cubic-bezier(.25,.8,.25,1);transform-origin:center;z-index:2}.bx-select-trigger.is-open:after,.bx-select-trigger:focus-visible:not(:disabled):after{transform:scaleX(1)}.bx-select-trigger.is-invalid{border-bottom-color:var(--bx-border-danger)}.bx-select-trigger.is-invalid:after{background-color:var(--bx-border-danger);transform:scaleX(1)}.bx-select-container{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;overflow:hidden}.bx-select-value{width:100%;box-sizing:border-box;padding:1.5rem 0 .5rem .75rem;min-height:3rem;display:block;font-size:1rem;color:var(--bx-text-heading);line-height:1.4;z-index:1}.bx-select-value.is-placeholder{color:var(--bx-text-secondary)}.bx-floating-label{display:flex;align-items:baseline;position:absolute;left:.75rem;top:50%;transform:translateY(-50%);font-size:1rem;color:var(--bx-text-secondary);pointer-events:none;z-index:2;transition:top .2s cubic-bezier(.25,.8,.25,1),transform .2s cubic-bezier(.25,.8,.25,1),font-size .2s cubic-bezier(.25,.8,.25,1),color .15s ease}.bx-select-trigger.is-floating .bx-floating-label{top:.5rem;transform:translateY(0);font-size:.75rem;font-weight:500}.bx-select-trigger.is-floating.is-open .bx-floating-label,.bx-select-trigger.is-floating:focus-visible:not(.is-readonly) .bx-floating-label{color:var(--bx-primary)}.bx-select-trigger.is-invalid .bx-floating-label{color:var(--bx-text-danger)!important}.bx-field-required{color:var(--bx-text-secondary);margin-left:.125rem}.bx-select-caret{flex-shrink:0;color:var(--bx-text-secondary);transition:transform .2s ease;margin-inline-start:.5rem;transform-origin:center}.is-open .bx-select-caret{transform:rotate(180deg)}.bx-select-panel{display:flex;flex-direction:column;box-sizing:border-box;min-width:100%;width:100%;max-width:100%;background-color:var(--bx-glass-surface, var(--bx-bg-surface));border:1px solid var(--bx-glass-edge, var(--bx-border-default));border-radius:.75rem;box-shadow:0 2px 4px #0000001a,0 1px 2px -1px #0000001a;overflow:hidden;max-height:18rem}.bx-select-search-container{display:flex;align-items:center;padding:.25rem;flex-shrink:0;border-bottom:1px solid var(--bx-border-subtle)}.bx-select-menu-container{min-height:0;overflow:hidden auto;padding:.25rem}.bx-select-menu-container::-webkit-scrollbar{width:6px}.bx-select-menu-container::-webkit-scrollbar-track{background:var(--bx-scroll-bg)}.bx-select-menu-container::-webkit-scrollbar-thumb{background:var(--bx-scroll-thumb);border-radius:9999px}.bx-select-menu-container::-webkit-scrollbar-thumb:hover{background:var(--bx-scroll-thumb-hover)}.bx-select-option{display:flex;width:100%;padding:.5rem .75rem;border:0;border-radius:.25rem;background:transparent;color:var(--bx-text-primary);font:inherit;font-size:.875rem;line-height:1.4;text-align:start;cursor:pointer}.bx-select-option[aria-selected=true]{background:var(--bx-accent-subtle);color:var(--bx-text-accent)}.bx-select-option:hover:not(:disabled),.bx-select-option:active:not(:disabled){background:var(--bx-bg-element-hover)}.bx-select-option[aria-selected=true]:hover:not(:disabled){background:var(--bx-accent-subtle)}.bx-select-option:focus-visible{outline:2px solid var(--bx-border-accent);outline-offset:-2px}.bx-select-option:disabled{opacity:.4;cursor:not-allowed}.bx-select-item-inner{display:flex;align-items:center;gap:.5rem;width:100%}.bx-select-check-placeholder{width:16px;height:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--bx-text-accent)}.bx-select-empty{padding:.75rem;text-align:center;color:var(--bx-text-secondary);font-size:.875rem;font-style:italic}.bx-select-trigger[data-bx-surface]{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-shadow: none}.bx-select-trigger[data-bx-surface].is-invalid{--bx-glass-edge: var(--bx-border-danger)}.bx-select-panel[data-bx-surface]{--bx-glass-radius: var(--bx-rounded-lg, .75rem);--bx-glass-surface: var(--bx-bg-surface);--bx-glass-text: var(--bx-text-primary);--bx-glass-edge: var(--bx-border-default);--bx-glass-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);background:var(--bx-glass-surface)!important;-webkit-backdrop-filter:none;backdrop-filter:none}.bx-select-trigger[data-bx-surface]{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-min-opacity: .45;--bx-glass-edge: var(--bx-border-default);--bx-glass-shadow: none;border:1px solid var(--bx-glass-edge);border-radius:.75rem}.bx-select-trigger[data-bx-surface]:after{display:none}.bx-select-trigger[data-bx-surface]:focus-within:not(.is-disabled,:disabled,.is-readonly,[readonly],[aria-readonly=true],:has([readonly],[aria-readonly=true])),.bx-select-trigger[data-bx-surface]:focus-visible:not(:disabled,[readonly],[aria-readonly=true]),.bx-select-trigger[data-bx-surface].is-open:not(:disabled),.bx-select-trigger[data-bx-surface].is-readonly.is-keyboard-focused:focus-within,.bx-select-trigger[data-bx-surface]:has(.bx-readonly.is-keyboard-focused):focus-within{--bx-glass-edge: var(--bx-border-brand);outline:2px solid var(--bx-border-brand);outline-offset:-2px;--bx-glass-shadow: none}.bx-select-trigger[data-bx-surface].is-invalid{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-min-opacity: .45;--bx-glass-edge: color-mix(in srgb, var(--bx-text-danger) 40%, var(--bx-border-default));border-block-end-color:var(--bx-glass-edge);--bx-glass-shadow: 0 8px 18px -10px color-mix(in srgb, var(--bx-text-danger) 65%, transparent);outline-color:var(--bx-border-danger)}.bx-select-trigger.is-floating .bx-floating-label{position:static;transform:none;padding:.5rem 0 0 .75rem;overflow-wrap:anywhere}.bx-select-trigger.is-floating .bx-select-value{padding-top:.25rem;min-height:2rem}.bx-select-trigger:not(.is-floating) .bx-floating-label{right:0}.bx-select-item-inner>span:last-child{flex:1 1 auto;min-width:0;white-space:normal;overflow-wrap:anywhere}.bx-select-group{padding:.5rem .75rem;font-weight:600;color:var(--bx-text-secondary);font-size:.75rem}.bx-select-option{align-items:center;gap:.5rem}.bx-select-panel{max-block-size:min(var(--bx-select-panel-height, 22rem),70dvh)}.bx-select-menu-container{flex:1 1 auto}.bx-select-trigger.is-outline{border:1px solid var(--bx-border-strong);border-radius:var(--bx-field-radius, .5rem)}.bx-select-trigger.is-outline.is-invalid{border-color:var(--bx-border-danger)}.bx-select-panel{background:var(--bx-select-panel-background, var(--bx-bg-surface-alt));border-color:var(--bx-select-panel-border, var(--bx-border-strong));box-shadow:var(--bx-select-panel-shadow, 0 12px 20px -3px rgba(0, 0, 0, .2), 0 4px 6px -2px rgba(0, 0, 0, .1));isolation:isolate}.bx-select-measure{position:absolute;visibility:hidden;pointer-events:none;inset-inline:0;box-sizing:border-box;padding-inline-start:.75rem;font:inherit;font-size:1rem}.bx-select-caret{display:inline-flex;align-items:center;justify-content:center;inline-size:1rem;block-size:1rem}.bx-select-loading{padding:.5rem .75rem}.bx-select-menu-container{--bx-load-more-padding: .5rem .75rem}.bx-select-search-state{display:flex;justify-content:center;align-items:center;min-block-size:4rem;padding:.75rem;color:var(--bx-text-secondary)}[role=listbox][hidden]{display:none}.bx-selected-tags{display:flex;align-items:center;gap:var(--bx-select-tag-gap, .25rem);min-inline-size:0;max-inline-size:100%;overflow:hidden}.bx-selected-tags>bx-tag{min-inline-size:0}.bx-selected-tags>.bx-overflow-tag{flex:0 0 auto}[role=listbox]{display:flex;flex-direction:column;gap:var(--bx-select-option-gap, .25rem)}.bx-select-option>span:last-child{min-inline-size:0;overflow-wrap:anywhere}.bx-select-control{position:relative;inline-size:100%;min-inline-size:0}.bx-select-control.has-clear .bx-select-container{padding-inline-end:2rem}.bx-select-control.has-clear .bx-select-measure{inset-inline-end:2rem}.bx-select-clear.bx-btn{transition-property:color;transition-duration:calc(.15s * (1 - var(--bx-reduced-motion, 0)));transition-timing-function:ease;display:flex;align-items:center;justify-content:center;box-sizing:border-box;background:transparent;border:none;padding:.25rem;inline-size:1.5rem;block-size:1.5rem;border-radius:.25rem;color:var(--bx-text-secondary);cursor:pointer;flex-shrink:0}.bx-select-clear.bx-btn:focus-visible{outline:2px solid var(--bx-border-brand);outline-offset:0}.bx-select-clear.bx-btn:hover:not(:disabled){color:var(--bx-text-primary);background:var(--bx-bg-element-hover)}.bx-select-clear.bx-btn:disabled{cursor:not-allowed;opacity:.5}.bx-select-clear.bx-btn{position:absolute;inset-block-start:50%;inset-inline-end:calc(1px + 2.25rem);transform:translateY(-50%);z-index:3}\n"]
 		}]
 	}],
 	propDecorators: { selectionChange: [{
@@ -4961,8 +5154,15 @@ function summaryThreshold(value) {
 var MultiSelect = class MultiSelect extends BxSelectBase {
 	summaryOverflow = viewChild("summaryOverflow", ...ngDevMode ? [{ debugName: "summaryOverflow" }] : /* istanbul ignore next */ []);
 	labelsAdapter = inject(BX_I18N, { optional: true });
+	hasSelection = computed(() => !!this.internalValue()?.length || this.selectAll(), ...ngDevMode ? [{ debugName: "hasSelection" }] : /* istanbul ignore next */ []);
 	resolvedSelectAllLabel = computed(() => resolveText(this.selectAllLabel(), this.labelsAdapter), ...ngDevMode ? [{ debugName: "resolvedSelectAllLabel" }] : /* istanbul ignore next */ []);
-	someSelected = computed(() => this.filteredOptions().some((option) => this.isSelected(option.value)), ...ngDevMode ? [{ debugName: "someSelected" }] : /* istanbul ignore next */ []);
+	selectableOptions = computed(() => this.filteredOptions().filter((option) => !option.disabled && !option.groupDisabled), ...ngDevMode ? [{ debugName: "selectableOptions" }] : /* istanbul ignore next */ []);
+	allLoadedSelected = computed(() => {
+		const options = this.selectableOptions();
+		return options.length > 0 && options.every((option) => this.isSelected(option.value));
+	}, ...ngDevMode ? [{ debugName: "allLoadedSelected" }] : /* istanbul ignore next */ []);
+	selectAllChecked = computed(() => this.selectAll() || this.allLoadedSelected(), ...ngDevMode ? [{ debugName: "selectAllChecked" }] : /* istanbul ignore next */ []);
+	someSelected = computed(() => this.selectableOptions().some((option) => this.isSelected(option.value)), ...ngDevMode ? [{ debugName: "someSelected" }] : /* istanbul ignore next */ []);
 	usesSummary = computed(() => {
 		const count = this.internalValue()?.length ?? 0;
 		return this.selectionDisplay() === "tags" && this.selectedOptions().length > this.visibleTagCount() || !!(this.selectAll() && this.allSelectedText()) || count > this.summaryThreshold() || count >= 2 && (this.summaryOverflow()?.truncated() ?? false);
@@ -4973,10 +5173,19 @@ var MultiSelect = class MultiSelect extends BxSelectBase {
 		const count = this.internalValue()?.length ?? 0;
 		return resolveText(this.selectedCountText(), this.labelsAdapter, { count }).replaceAll("{count}", String(count));
 	}, ...ngDevMode ? [{ debugName: "displayedSelection" }] : /* istanbul ignore next */ []);
+	resolvedAllSelectedTooltip = computed(() => {
+		const text = this.allSelectedTooltip();
+		if (text === false) return "";
+		if (text === void 0) return this.resolvedTooltipOnTruncate() ? this.selectedOptionLabel() : "";
+		return resolveText(text, this.labelsAdapter);
+	}, ...ngDevMode ? [{ debugName: "resolvedAllSelectedTooltip" }] : /* istanbul ignore next */ []);
 	selectionTooltip = computed(() => {
-		if (!this.resolvedTooltipOnTruncate() || this.isOpen()) return "";
+		if (this.isOpen()) return "";
+		if (this.selectAll()) return this.resolvedAllSelectedTooltip();
+		if (!this.resolvedTooltipOnTruncate()) return "";
 		return this.selectionDisplay() === "tags" || this.usesSummary() ? this.selectedOptionLabel() : this.truncatedSelectionTooltip();
 	}, ...ngDevMode ? [{ debugName: "selectionTooltip" }] : /* istanbul ignore next */ []);
+	allSelectedTooltip = input(void 0, ...ngDevMode ? [{ debugName: "allSelectedTooltip" }] : /* istanbul ignore next */ []);
 	allSelectedText = input(void 0, ...ngDevMode ? [{ debugName: "allSelectedText" }] : /* istanbul ignore next */ []);
 	selectedCountText = input("{count} selected", ...ngDevMode ? [{ debugName: "selectedCountText" }] : /* istanbul ignore next */ []);
 	summaryThreshold = input(2, {
@@ -5014,13 +5223,24 @@ var MultiSelect = class MultiSelect extends BxSelectBase {
 			this.scope = scope;
 		});
 	}
+	clearSelection() {
+		if (this.disabled() || this.isReadonly()) return;
+		const hadIntent = this.selectAll();
+		this.selectAll.set(false);
+		this.clearSelectedValue([]);
+		this.selectionChange.emit({
+			value: [],
+			source: "clear"
+		});
+		if (hadIntent) this.emitIntent(false, "clear");
+	}
 	isSelected(value) {
 		return (this.internalValue() ?? []).some((item) => this.compareWith()(item, value));
 	}
 	toggleSelectAll() {
 		if (this.disabled() || this.isReadonly()) return;
-		const enabled = !this.selectAll();
-		const eligible = this.filteredOptions().filter((option) => !option.disabled && !option.groupDisabled);
+		const enabled = !this.selectAllChecked();
+		const eligible = this.selectableOptions();
 		const current = this.internalValue() ?? [];
 		const values = enabled ? [...current, ...eligible.filter((option) => !this.isSelected(option.value)).map((option) => option.value)] : current.filter((value) => !eligible.some((option) => this.compareWith()(value, option.value)));
 		this.selectAll.set(enabled);
@@ -5075,6 +5295,13 @@ var MultiSelect = class MultiSelect extends BxSelectBase {
 		isStandalone: true,
 		selector: "bx-multi-select",
 		inputs: {
+			allSelectedTooltip: {
+				classPropertyName: "allSelectedTooltip",
+				publicName: "allSelectedTooltip",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			allSelectedText: {
 				classPropertyName: "allSelectedText",
 				publicName: "allSelectedText",
@@ -5139,8 +5366,8 @@ var MultiSelect = class MultiSelect extends BxSelectBase {
 		}],
 		usesInheritance: true,
 		ngImport: i0,
-		template: "<bx-form-field [control]=\"fieldControl\" [inline]=\"true\" [tooltip]=\"tooltip()\" [showLoadingIndicator]=\"false\"\n    [hint]=\"hint()\" [hintEnd]=\"hintEnd()\" [subscriptSizing]=\"resolvedSubscriptSizing()\" [forId]=\"controlId()\">\n    <button type=\"button\" role=\"combobox\" aria-haspopup=\"listbox\" [bxTooltip]=\"selectionTooltip()\" [bxTooltipHover]=\"selectionDisplay() !== 'tags'\" [bxTooltipTouch]=\"selectionDisplay() === 'tags' ? 'none' : 'longpress'\" cdkOverlayOrigin bxSurface #origin=\"cdkOverlayOrigin\" class=\"bx-select-trigger\"\n        [class.is-invalid]=\"showError()\" [class.is-outline]=\"resolvedAppearance() === 'outline'\" [class.is-open]=\"isOpen()\" [class.is-floating]=\"isFloating()\" [class.is-readonly]=\"isReadonly()\" [class.is-keyboard-focused]=\"keyboardFocused()\"\n        [id]=\"controlId()\" [attr.data-testid]=\"dataTestId()\" [attr.aria-label]=\"ariaLabel() || resolvedLabel()\" [attr.aria-labelledby]=\"ariaLabelledBy()\"\n        [attr.aria-describedby]=\"describedBy()\" [attr.aria-invalid]=\"showError()\" [attr.aria-required]=\"required()\" [attr.aria-readonly]=\"isReadonly()\" [attr.aria-busy]=\"loading() || pending() || isSearching()\"\n        [disabled]=\"disabled()\" (click)=\"toggleOpen()\" (keydown)=\"onTriggerKey($event)\" (blur)=\"onTriggerBlur()\"\n        [attr.aria-expanded]=\"isOpen()\" [attr.aria-controls]=\"isPanelAttached() ? controlId() + '-options' : null\">\n        <div class=\"bx-select-container\">\n            @if (label()) {\n            <span class=\"bx-floating-label\"><span [bxTruncate]=\"!isFloating()\" #labelOverflow=\"bxTruncate\">{{ resolvedLabel() }}</span>\n                @if (required() && !resolvedHideRequiredMarker()) { <span class=\"bx-field-required\" aria-hidden=\"true\">*</span> }\n            </span>\n            }\n            <span class=\"bx-select-value\" [class.is-placeholder]=\"!selectedOptionLabel()\" [bxTruncate]=\"!(selectionDisplay() === 'tags' && selectedOptions().length) && !triggerTemplate()\" #valueOverflow=\"bxTruncate\">\n                @if (triggerTemplate(); as template) {\n                <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"triggerContext()\" />\n                } @else if (selectionDisplay() === 'tags' && selectedOptions().length) {\n                <span class=\"bx-selected-tags\">\n                    @if (selectAll() && allSelectedText()) {\n                    <bx-tag [text]=\"allSelectedText()\" [config]=\"tagConfig()\" [focusable]=\"false\" [tooltipOnTruncate]=\"resolvedTooltipOnTruncate() ? undefined : false\" />\n                    } @else {\n                    @for (option of visibleTags(); track option.value) {\n                    <bx-tag [text]=\"option.label\" [config]=\"selectionTagConfig(option)\" [disabled]=\"disabled() || !!option.disabled\" [focusable]=\"false\" [tooltipOnTruncate]=\"resolvedTooltipOnTruncate() ? undefined : false\" />\n                    }\n                    @if (selectedOptions().length > visibleTagCount()) {\n                    <bx-tag class=\"bx-overflow-tag\" [text]=\"overflowTagLabel()\" [config]=\"overflowTagConfig()\" [tooltip]=\"overflowTagTooltip()\" [focusable]=\"false\" [tooltipOnTruncate]=\"resolvedTooltipOnTruncate() ? undefined : false\" />\n                    }\n                    }\n                </span>\n                } @else { {{ displayedSelection() || (isFloating() || !label() ? resolvedPlaceholder() : '') }} }\n            </span>\n            <span class=\"bx-select-measure\" bxTruncate #summaryOverflow=\"bxTruncate\" aria-hidden=\"true\">{{ selectedOptionLabel() }}</span>\n        </div>\n        <ng-content select=\"[bxSuffix]\" />\n        <span class=\"bx-select-caret\" aria-hidden=\"true\">\n            @if (loading() || pending() || isSearching()) { <bx-loading-spinner [size]=\"16\" [decorative]=\"true\" /> }\n            @else { <bx-icon name=\"chevron-down\" size=\"16\" /> }\n        </span>\n    </button>\n    <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"origin\" [cdkConnectedOverlayOpen]=\"isPanelAttached()\"\n        [cdkConnectedOverlayPositions]=\"overlayPositions\" [cdkConnectedOverlayHasBackdrop]=\"false\"\n        [cdkConnectedOverlayScrollStrategy]=\"panelScrollStrategy\" [cdkConnectedOverlayUsePopover]=\"overlayPopoverLocation(origin.elementRef.nativeElement)\"\n        [cdkConnectedOverlayWidth]=\"origin.elementRef.nativeElement.offsetWidth\"\n        (overlayOutsideClick)=\"onOutsideClick($event)\" (attach)=\"onPanelAttach()\" (detach)=\"onPanelDetach()\" (positionChange)=\"refreshPanel()\">\n        <div class=\"bx-select-panel\" [class]=\"panelClass()\" data-bx-surface=\"solid\" tabindex=\"-1\" (keydown)=\"onPanelKey($event)\">\n            @if (isSearchable()) {\n            <div class=\"bx-select-search-container\">\n                <bx-search-input #searchInput [value]=\"searchValue()\" [placeholder]=\"resolvedSearchPlaceholder()\" [ariaLabel]=\"resolvedSearchPlaceholder()\"\n                    (search)=\"onSearchChange($event)\" (keydown.enter)=\"$event.preventDefault()\" />\n            </div>\n            }\n            @if (showSelectAll()) {\n            <button type=\"button\" class=\"bx-select-all\" role=\"checkbox\" [attr.aria-checked]=\"selectAll() ? 'true' : someSelected() ? 'mixed' : 'false'\"\n                [disabled]=\"disabled() || isReadonly()\" (click)=\"toggleSelectAll()\">\n                <span class=\"bx-multi-checkbox\" aria-hidden=\"true\">@if (selectAll()) { <bx-icon name=\"check\" size=\"16\" /> } @else if (someSelected()) { <bx-icon name=\"minus\" size=\"16\" /> }</span>\n                {{ resolvedSelectAllLabel() }}\n            </button>\n            }\n            <div class=\"bx-select-menu-container\" bxLoadMore #pagination=\"bxLoadMore\" [loadMoreHasMore]=\"hasMore()\" [loadMoreSuppressed]=\"isSearching()\" [loadMoreLoading]=\"loading()\"\n                [loadMoreDisabled]=\"disabled() || isReadonly()\" [loadMoreError]=\"loadError()\" [loadMoreConfig]=\"loadMoreConfig()\"\n                [loadMoreTemplate]=\"loadMoreTemplate()\" [loadMoreRevision]=\"options()\" (loadMore)=\"requestMore($event)\">\n                <div role=\"listbox\" [hidden]=\"isSearching()\" [attr.aria-multiselectable]=\"true\" [attr.aria-label]=\"ariaLabel() || resolvedLabel()\" [id]=\"controlId() + '-options'\">\n                    @for (option of filteredOptions(); track option.value; let index = $index) {\n                    @if (option.resolvedGroup && (index === 0 || filteredOptions()[index - 1].resolvedGroup !== option.resolvedGroup)) {\n                    <div class=\"bx-select-group\" [id]=\"controlId() + '-group-' + index\">{{ option.resolvedGroup }}</div>\n                    }\n                    <button type=\"button\" class=\"bx-select-option\" role=\"option\" tabindex=\"-1\" [attr.aria-selected]=\"isSelected(option.value)\"\n                        [disabled]=\"option.disabled || option.groupDisabled || false\" (click)=\"selectOption(option)\">\n                        <span class=\"bx-select-check-placeholder bx-multi-checkbox\" aria-hidden=\"true\">\n                            @if (isSelected(option.value)) { <bx-icon name=\"check\" size=\"16\" /> }\n                        </span>\n                        @if (option.icon) { <bx-icon [name]=\"option.icon\" size=\"16\" /> }\n                        @if (optionTemplate(); as template) {\n                        <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ $implicit: option, selected: isSelected(option.value), index: index }\" />\n                        } @else { <span>{{ option.resolvedStr }}</span> }\n                    </button>\n                    } @empty {\n                    @if (!loading()) { <div class=\"bx-select-empty\" role=\"status\">{{ resolvedEmptyMessage() }}</div> }\n                    }\n                </div>\n                @if (isSearching()) {\n                <div class=\"bx-select-search-state\" role=\"status\" [attr.aria-label]=\"resolvedLoadingLabel() || resolvedLoadingAriaLabel()\">\n                    @if (resolvedLoadingLabel()) { <span>{{ resolvedLoadingLabel() }}</span> }\n                    @else { <bx-loading-spinner [size]=\"20\" [decorative]=\"true\" /> }\n                </div>\n                } @else if (loading() && !pagination.actionVisible()) { <div class=\"bx-select-loading\"><bx-loading-indicator [size]=\"16\" [label]=\"loadingLabel() ?? loadingAriaLabel()\" /></div> }\n            </div>\n        </div>\n    </ng-template>\n    <ng-content select=\"bx-error\" ngProjectAs=\"bx-error\" /><ng-content select=\"bx-hint\" ngProjectAs=\"bx-hint\" />\n</bx-form-field>\n",
-		styles: [":host{display:block;width:100%}.bx-select-trigger{position:relative;display:flex;align-items:center;width:100%;box-sizing:border-box;background-color:var(--bx-bg-neutral);border-radius:.25rem .25rem 0 0;border:none;border-bottom:1px solid var(--bx-border-strong);padding:0 .75rem 0 0;cursor:pointer;text-align:left;font-family:inherit;outline:none}.bx-select-trigger:hover:not(:disabled,.is-readonly){background-color:var(--bx-bg-neutral-hover)}.bx-select-trigger:disabled{background-color:var(--bx-bg-element);opacity:.7;border-bottom-style:dotted;cursor:not-allowed}.bx-select-trigger.is-readonly{cursor:default}.bx-select-trigger:after{content:\"\";position:absolute;bottom:-1px;left:0;right:0;height:2px;background-color:var(--bx-primary);transform:scaleX(0);transition:transform .2s cubic-bezier(.25,.8,.25,1);transform-origin:center;z-index:2}.bx-select-trigger.is-open:after,.bx-select-trigger:focus-visible:not(:disabled):after{transform:scaleX(1)}.bx-select-trigger.is-invalid{border-bottom-color:var(--bx-border-danger)}.bx-select-trigger.is-invalid:after{background-color:var(--bx-border-danger);transform:scaleX(1)}.bx-select-container{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;overflow:hidden}.bx-select-value{width:100%;box-sizing:border-box;padding:1.5rem 0 .5rem .75rem;min-height:3rem;display:block;font-size:1rem;color:var(--bx-text-heading);line-height:1.4;z-index:1}.bx-select-value.is-placeholder{color:var(--bx-text-secondary)}.bx-floating-label{display:flex;align-items:baseline;position:absolute;left:.75rem;top:50%;transform:translateY(-50%);font-size:1rem;color:var(--bx-text-secondary);pointer-events:none;z-index:2;transition:top .2s cubic-bezier(.25,.8,.25,1),transform .2s cubic-bezier(.25,.8,.25,1),font-size .2s cubic-bezier(.25,.8,.25,1),color .15s ease}.bx-select-trigger.is-floating .bx-floating-label{top:.5rem;transform:translateY(0);font-size:.75rem;font-weight:500}.bx-select-trigger.is-floating.is-open .bx-floating-label,.bx-select-trigger.is-floating:focus-visible:not(.is-readonly) .bx-floating-label{color:var(--bx-primary)}.bx-select-trigger.is-invalid .bx-floating-label{color:var(--bx-text-danger)!important}.bx-field-required{color:var(--bx-text-secondary);margin-left:.125rem}.bx-select-caret{flex-shrink:0;color:var(--bx-text-secondary);transition:transform .2s ease;margin-left:.5rem;transform-origin:center}.is-open .bx-select-caret{transform:rotate(180deg)}.bx-select-panel{display:flex;flex-direction:column;box-sizing:border-box;min-width:100%;width:100%;max-width:100%;background-color:var(--bx-glass-surface, var(--bx-bg-surface));border:1px solid var(--bx-glass-edge, var(--bx-border-default));border-radius:.75rem;box-shadow:0 2px 4px #0000001a,0 1px 2px -1px #0000001a;overflow:hidden;max-height:18rem}.bx-select-search-container{display:flex;align-items:center;padding:.25rem;flex-shrink:0;border-bottom:1px solid var(--bx-border-subtle)}.bx-select-menu-container{min-height:0;overflow:hidden auto;padding:.25rem}.bx-select-menu-container::-webkit-scrollbar{width:6px}.bx-select-menu-container::-webkit-scrollbar-track{background:var(--bx-scroll-bg)}.bx-select-menu-container::-webkit-scrollbar-thumb{background:var(--bx-scroll-thumb);border-radius:9999px}.bx-select-menu-container::-webkit-scrollbar-thumb:hover{background:var(--bx-scroll-thumb-hover)}.bx-select-option{display:flex;width:100%;padding:.5rem .75rem;border:0;border-radius:.25rem;background:transparent;color:var(--bx-text-primary);font:inherit;font-size:.875rem;line-height:1.4;text-align:start;cursor:pointer}.bx-select-option[aria-selected=true]{background:var(--bx-accent-subtle);color:var(--bx-text-accent)}.bx-select-option:hover:not(:disabled),.bx-select-option:active:not(:disabled){background:var(--bx-bg-element-hover)}.bx-select-option[aria-selected=true]:hover:not(:disabled){background:var(--bx-accent-subtle)}.bx-select-option:focus-visible{outline:2px solid var(--bx-border-accent);outline-offset:-2px}.bx-select-option:disabled{opacity:.4;cursor:not-allowed}.bx-select-item-inner{display:flex;align-items:center;gap:.5rem;width:100%}.bx-select-check-placeholder{width:16px;height:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--bx-text-accent)}.bx-select-empty{padding:.75rem;text-align:center;color:var(--bx-text-secondary);font-size:.875rem;font-style:italic}.bx-select-trigger[data-bx-surface]{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-shadow: none}.bx-select-trigger[data-bx-surface].is-invalid{--bx-glass-edge: var(--bx-border-danger)}.bx-select-panel[data-bx-surface]{--bx-glass-radius: var(--bx-rounded-lg, .75rem);--bx-glass-surface: var(--bx-bg-surface);--bx-glass-text: var(--bx-text-primary);--bx-glass-edge: var(--bx-border-default);--bx-glass-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);background:var(--bx-glass-surface)!important;-webkit-backdrop-filter:none;backdrop-filter:none}.bx-select-trigger[data-bx-surface]{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-min-opacity: .45;--bx-glass-edge: var(--bx-border-default);--bx-glass-shadow: none;border:1px solid var(--bx-glass-edge);border-radius:.75rem}.bx-select-trigger[data-bx-surface]:after{display:none}.bx-select-trigger[data-bx-surface]:focus-within:not(.is-disabled,:disabled,.is-readonly,[readonly],[aria-readonly=true],:has([readonly],[aria-readonly=true])),.bx-select-trigger[data-bx-surface]:focus-visible:not(:disabled,[readonly],[aria-readonly=true]),.bx-select-trigger[data-bx-surface].is-open:not(:disabled),.bx-select-trigger[data-bx-surface].is-readonly.is-keyboard-focused:focus-within,.bx-select-trigger[data-bx-surface]:has(.bx-readonly.is-keyboard-focused):focus-within{--bx-glass-edge: var(--bx-border-brand);outline:2px solid var(--bx-border-brand);outline-offset:-2px;--bx-glass-shadow: none}.bx-select-trigger[data-bx-surface].is-invalid{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-min-opacity: .45;--bx-glass-edge: color-mix(in srgb, var(--bx-text-danger) 40%, var(--bx-border-default));border-block-end-color:var(--bx-glass-edge);--bx-glass-shadow: 0 8px 18px -10px color-mix(in srgb, var(--bx-text-danger) 65%, transparent);outline-color:var(--bx-border-danger)}.bx-select-trigger.is-floating .bx-floating-label{position:static;transform:none;padding:.5rem 0 0 .75rem;overflow-wrap:anywhere}.bx-select-trigger.is-floating .bx-select-value{padding-top:.25rem;min-height:2rem}.bx-select-trigger:not(.is-floating) .bx-floating-label{right:0}.bx-select-item-inner>span:last-child{flex:1 1 auto;min-width:0;white-space:normal;overflow-wrap:anywhere}.bx-select-group{padding:.5rem .75rem;font-weight:600;color:var(--bx-text-secondary);font-size:.75rem}.bx-select-option{align-items:center;gap:.5rem}.bx-select-panel{max-block-size:min(var(--bx-select-panel-height, 22rem),70dvh)}.bx-select-menu-container{flex:1 1 auto}.bx-select-trigger.is-outline{border:1px solid var(--bx-border-strong);border-radius:var(--bx-field-radius, .5rem)}.bx-select-trigger.is-outline.is-invalid{border-color:var(--bx-border-danger)}.bx-select-panel{background:var(--bx-select-panel-background, var(--bx-bg-surface-alt));border-color:var(--bx-select-panel-border, var(--bx-border-strong));box-shadow:var(--bx-select-panel-shadow, 0 12px 20px -3px rgba(0, 0, 0, .2), 0 4px 6px -2px rgba(0, 0, 0, .1));isolation:isolate}.bx-select-measure{position:absolute;visibility:hidden;pointer-events:none;inset-inline:0;box-sizing:border-box;padding-inline-start:.75rem;font:inherit;font-size:1rem}.bx-select-caret{display:inline-flex;align-items:center;justify-content:center;inline-size:1rem;block-size:1rem}.bx-select-loading{padding:.5rem .75rem}.bx-select-menu-container{--bx-load-more-padding: .5rem .75rem}.bx-select-search-state{display:flex;justify-content:center;align-items:center;min-block-size:4rem;padding:.75rem;color:var(--bx-text-secondary)}[role=listbox][hidden]{display:none}.bx-selected-tags{display:flex;align-items:center;gap:var(--bx-select-tag-gap, .25rem);min-inline-size:0;max-inline-size:100%;overflow:hidden}.bx-selected-tags>bx-tag{min-inline-size:0}.bx-selected-tags>.bx-overflow-tag{flex:0 0 auto}.bx-select-all{display:flex;align-items:center;gap:.5rem;padding:.75rem;border:0;border-bottom:1px solid var(--bx-border-subtle);background:transparent;color:var(--bx-text-primary);font:inherit;text-align:start;cursor:pointer}.bx-multi-checkbox{display:inline-flex;align-items:center;justify-content:center;inline-size:1rem;block-size:1rem;flex:0 0 auto;border:1px solid var(--bx-border-strong);color:var(--bx-text-accent)}.bx-select-all:focus-visible{outline:2px solid var(--bx-border-brand);outline-offset:-2px}\n"],
+		template: "<bx-form-field [control]=\"fieldControl\" [inline]=\"true\" [tooltip]=\"tooltip()\" [showLoadingIndicator]=\"false\"\n    [hint]=\"hint()\" [hintEnd]=\"hintEnd()\" [subscriptSizing]=\"resolvedSubscriptSizing()\" [forId]=\"controlId()\">\n    <div class=\"bx-select-control\" [class.has-clear]=\"showClear()\">\n    <button type=\"button\" role=\"combobox\" aria-haspopup=\"listbox\" [bxTooltip]=\"selectionTooltip()\" [bxTooltipHover]=\"selectionDisplay() !== 'tags' || (selectAll() && !!allSelectedText())\" [bxTooltipTouch]=\"selectionDisplay() === 'tags' && !(selectAll() && allSelectedText()) ? 'none' : 'longpress'\" cdkOverlayOrigin bxSurface #origin=\"cdkOverlayOrigin\" class=\"bx-select-trigger\"\n        [class.is-invalid]=\"showError()\" [class.is-outline]=\"resolvedAppearance() === 'outline'\" [class.is-open]=\"isOpen()\" [class.is-floating]=\"isFloating()\" [class.is-readonly]=\"isReadonly()\" [class.is-keyboard-focused]=\"keyboardFocused()\"\n        [id]=\"controlId()\" [attr.data-testid]=\"dataTestId()\" [attr.aria-label]=\"ariaLabel() || resolvedLabel()\" [attr.aria-labelledby]=\"ariaLabelledBy()\"\n        [attr.aria-describedby]=\"describedBy()\" [attr.aria-invalid]=\"showError()\" [attr.aria-required]=\"required()\" [attr.aria-readonly]=\"isReadonly()\" [attr.aria-busy]=\"loading() || pending() || isSearching()\"\n        [disabled]=\"disabled()\" (click)=\"toggleOpen()\" (keydown)=\"onTriggerKey($event)\" (blur)=\"onTriggerBlur()\"\n        [attr.aria-expanded]=\"isOpen()\" [attr.aria-controls]=\"isPanelAttached() ? controlId() + '-options' : null\">\n        <div class=\"bx-select-container\">\n            @if (label()) {\n            <span class=\"bx-floating-label\"><span [bxTruncate]=\"!isFloating()\" #labelOverflow=\"bxTruncate\">{{ resolvedLabel() }}</span>\n                @if (required() && !resolvedHideRequiredMarker()) { <span class=\"bx-field-required\" aria-hidden=\"true\">*</span> }\n            </span>\n            }\n            <span class=\"bx-select-value\" [class.is-placeholder]=\"!selectedOptionLabel()\" [bxTruncate]=\"!(selectionDisplay() === 'tags' && selectedOptions().length) && !triggerTemplate()\" #valueOverflow=\"bxTruncate\">\n                @if (triggerTemplate(); as template) {\n                <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"triggerContext()\" />\n                } @else if (selectionDisplay() === 'tags' && selectedOptions().length) {\n                <span class=\"bx-selected-tags\">\n                    @if (selectAll() && allSelectedText()) {\n                    <bx-tag [text]=\"allSelectedText()\" [config]=\"tagConfig()\" [focusable]=\"false\" [tooltip]=\"''\" [tooltipOnTruncate]=\"false\" />\n                    } @else {\n                    @for (option of visibleTags(); track option.value) {\n                    <bx-tag [text]=\"option.label\" [config]=\"selectionTagConfig(option)\" [disabled]=\"disabled() || !!option.disabled\" [focusable]=\"false\" [tooltipOnTruncate]=\"resolvedTooltipOnTruncate() ? undefined : false\" />\n                    }\n                    @if (selectedOptions().length > visibleTagCount()) {\n                    <bx-tag class=\"bx-overflow-tag\" [text]=\"overflowTagLabel()\" [config]=\"overflowTagConfig()\" [tooltip]=\"overflowTagTooltip()\" [focusable]=\"false\" [tooltipOnTruncate]=\"resolvedTooltipOnTruncate() ? undefined : false\" />\n                    }\n                    }\n                </span>\n                } @else { {{ displayedSelection() || (isFloating() || !label() ? resolvedPlaceholder() : '') }} }\n            </span>\n            <span class=\"bx-select-measure\" bxTruncate #summaryOverflow=\"bxTruncate\" aria-hidden=\"true\">{{ selectedOptionLabel() }}</span>\n        </div>\n        <ng-content select=\"[bxSuffix]\" />\n        <span class=\"bx-select-caret\" aria-hidden=\"true\">\n            @if (loading() || pending() || isSearching()) { <bx-loading-spinner [size]=\"16\" [decorative]=\"true\" /> }\n            @else { <bx-icon name=\"chevron-down\" size=\"16\" /> }\n        </span>\n    </button>\n    @if (showClear()) {\n    <button bx-button type=\"button\" variant=\"text\" class=\"bx-select-clear\" [surfaceEffects]=\"false\" [disabled]=\"disabled()\"\n        [attr.aria-label]=\"resolvedClearLabel()\" [bxTooltip]=\"resolvedClearTooltip()\" (click)=\"clearSelection()\">\n        <bx-icon name=\"x\" size=\"16\" />\n    </button>\n    }\n    </div>\n    <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"origin\" [cdkConnectedOverlayOpen]=\"isPanelAttached()\"\n        [cdkConnectedOverlayPositions]=\"overlayPositions\" [cdkConnectedOverlayHasBackdrop]=\"false\"\n        [cdkConnectedOverlayScrollStrategy]=\"panelScrollStrategy\" [cdkConnectedOverlayUsePopover]=\"overlayPopoverLocation(origin.elementRef.nativeElement)\"\n        [cdkConnectedOverlayWidth]=\"origin.elementRef.nativeElement.offsetWidth\"\n        (overlayOutsideClick)=\"onOutsideClick($event)\" (attach)=\"onPanelAttach()\" (detach)=\"onPanelDetach()\" (positionChange)=\"refreshPanel()\">\n        <div class=\"bx-select-panel\" [class]=\"panelClass()\" data-bx-surface=\"solid\" tabindex=\"-1\" (keydown)=\"onPanelKey($event)\">\n            @if (isSearchable()) {\n            <div class=\"bx-select-search-container\">\n                <bx-search-input #searchInput [value]=\"searchValue()\" [placeholder]=\"resolvedSearchPlaceholder()\" [ariaLabel]=\"resolvedSearchPlaceholder()\"\n                    (search)=\"onSearchChange($event)\" (keydown.enter)=\"$event.preventDefault()\" />\n            </div>\n            }\n            @if (showSelectAll()) {\n            <button type=\"button\" class=\"bx-select-all\" role=\"checkbox\" [attr.aria-checked]=\"selectAllChecked() ? 'true' : someSelected() ? 'mixed' : 'false'\"\n                [disabled]=\"disabled() || isReadonly()\" (click)=\"toggleSelectAll()\">\n                <bx-checkbox-indicator [checked]=\"selectAllChecked()\" [indeterminate]=\"!selectAllChecked() && someSelected()\" [disabled]=\"disabled()\" />\n                {{ resolvedSelectAllLabel() }}\n            </button>\n            }\n            <div class=\"bx-select-menu-container\" bxLoadMore #pagination=\"bxLoadMore\" [loadMoreHasMore]=\"hasMore()\" [loadMoreSuppressed]=\"isSearching()\" [loadMoreLoading]=\"loading()\"\n                [loadMoreDisabled]=\"disabled() || isReadonly()\" [loadMoreError]=\"loadError()\" [loadMoreConfig]=\"loadMoreConfig()\"\n                [loadMoreTemplate]=\"loadMoreTemplate()\" [loadMoreRevision]=\"options()\" (loadMore)=\"requestMore($event)\">\n                <div role=\"listbox\" [hidden]=\"isSearching()\" [attr.aria-multiselectable]=\"true\" [attr.aria-label]=\"ariaLabel() || resolvedLabel()\" [id]=\"controlId() + '-options'\">\n                    @for (option of filteredOptions(); track option.value; let index = $index) {\n                    @if (option.resolvedGroup && (index === 0 || filteredOptions()[index - 1].resolvedGroup !== option.resolvedGroup)) {\n                    <div class=\"bx-select-group\" [id]=\"controlId() + '-group-' + index\">{{ option.resolvedGroup }}</div>\n                    }\n                    <button type=\"button\" class=\"bx-select-option\" role=\"option\" tabindex=\"-1\" [attr.aria-selected]=\"isSelected(option.value)\"\n                        [disabled]=\"option.disabled || option.groupDisabled || false\" (click)=\"selectOption(option)\">\n                        <bx-checkbox-indicator [checked]=\"isSelected(option.value)\" [disabled]=\"disabled() || !!option.disabled || !!option.groupDisabled\" />\n                        @if (option.icon) { <bx-icon [name]=\"option.icon\" size=\"16\" /> }\n                        @if (optionTemplate(); as template) {\n                        <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ $implicit: option, selected: isSelected(option.value), index: index }\" />\n                        } @else { <span>{{ option.resolvedStr }}</span> }\n                    </button>\n                    } @empty {\n                    @if (!loading()) { <div class=\"bx-select-empty\" role=\"status\">{{ resolvedEmptyMessage() }}</div> }\n                    }\n                </div>\n                @if (isSearching()) {\n                <div class=\"bx-select-search-state\" role=\"status\" [attr.aria-label]=\"resolvedLoadingLabel() || resolvedLoadingAriaLabel()\">\n                    @if (resolvedLoadingLabel()) { <span>{{ resolvedLoadingLabel() }}</span> }\n                    @else { <bx-loading-spinner [size]=\"20\" [decorative]=\"true\" /> }\n                </div>\n                } @else if (loading() && !pagination.actionVisible()) { <div class=\"bx-select-loading\"><bx-loading-indicator [size]=\"16\" [label]=\"loadingLabel() ?? loadingAriaLabel()\" /></div> }\n            </div>\n        </div>\n    </ng-template>\n    <ng-content select=\"bx-error\" ngProjectAs=\"bx-error\" /><ng-content select=\"bx-hint\" ngProjectAs=\"bx-hint\" />\n</bx-form-field>\n",
+		styles: [":host{display:block;width:100%}.bx-select-trigger{position:relative;display:flex;align-items:center;width:100%;box-sizing:border-box;background-color:var(--bx-bg-neutral);border-radius:.25rem .25rem 0 0;border:none;border-bottom:1px solid var(--bx-border-strong);padding:0;padding-inline-end:.75rem;cursor:pointer;text-align:left;font-family:inherit;outline:none}.bx-select-trigger:hover:not(:disabled,.is-readonly){background-color:var(--bx-bg-neutral-hover)}.bx-select-trigger:disabled{background-color:var(--bx-bg-element);opacity:.7;border-bottom-style:dotted;cursor:not-allowed}.bx-select-trigger.is-readonly{cursor:default}.bx-select-trigger:after{content:\"\";position:absolute;bottom:-1px;left:0;right:0;height:2px;background-color:var(--bx-primary);transform:scaleX(0);transition:transform .2s cubic-bezier(.25,.8,.25,1);transform-origin:center;z-index:2}.bx-select-trigger.is-open:after,.bx-select-trigger:focus-visible:not(:disabled):after{transform:scaleX(1)}.bx-select-trigger.is-invalid{border-bottom-color:var(--bx-border-danger)}.bx-select-trigger.is-invalid:after{background-color:var(--bx-border-danger);transform:scaleX(1)}.bx-select-container{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;overflow:hidden}.bx-select-value{width:100%;box-sizing:border-box;padding:1.5rem 0 .5rem .75rem;min-height:3rem;display:block;font-size:1rem;color:var(--bx-text-heading);line-height:1.4;z-index:1}.bx-select-value.is-placeholder{color:var(--bx-text-secondary)}.bx-floating-label{display:flex;align-items:baseline;position:absolute;left:.75rem;top:50%;transform:translateY(-50%);font-size:1rem;color:var(--bx-text-secondary);pointer-events:none;z-index:2;transition:top .2s cubic-bezier(.25,.8,.25,1),transform .2s cubic-bezier(.25,.8,.25,1),font-size .2s cubic-bezier(.25,.8,.25,1),color .15s ease}.bx-select-trigger.is-floating .bx-floating-label{top:.5rem;transform:translateY(0);font-size:.75rem;font-weight:500}.bx-select-trigger.is-floating.is-open .bx-floating-label,.bx-select-trigger.is-floating:focus-visible:not(.is-readonly) .bx-floating-label{color:var(--bx-primary)}.bx-select-trigger.is-invalid .bx-floating-label{color:var(--bx-text-danger)!important}.bx-field-required{color:var(--bx-text-secondary);margin-left:.125rem}.bx-select-caret{flex-shrink:0;color:var(--bx-text-secondary);transition:transform .2s ease;margin-inline-start:.5rem;transform-origin:center}.is-open .bx-select-caret{transform:rotate(180deg)}.bx-select-panel{display:flex;flex-direction:column;box-sizing:border-box;min-width:100%;width:100%;max-width:100%;background-color:var(--bx-glass-surface, var(--bx-bg-surface));border:1px solid var(--bx-glass-edge, var(--bx-border-default));border-radius:.75rem;box-shadow:0 2px 4px #0000001a,0 1px 2px -1px #0000001a;overflow:hidden;max-height:18rem}.bx-select-search-container{display:flex;align-items:center;padding:.25rem;flex-shrink:0;border-bottom:1px solid var(--bx-border-subtle)}.bx-select-menu-container{min-height:0;overflow:hidden auto;padding:.25rem}.bx-select-menu-container::-webkit-scrollbar{width:6px}.bx-select-menu-container::-webkit-scrollbar-track{background:var(--bx-scroll-bg)}.bx-select-menu-container::-webkit-scrollbar-thumb{background:var(--bx-scroll-thumb);border-radius:9999px}.bx-select-menu-container::-webkit-scrollbar-thumb:hover{background:var(--bx-scroll-thumb-hover)}.bx-select-option{display:flex;width:100%;padding:.5rem .75rem;border:0;border-radius:.25rem;background:transparent;color:var(--bx-text-primary);font:inherit;font-size:.875rem;line-height:1.4;text-align:start;cursor:pointer}.bx-select-option[aria-selected=true]{background:var(--bx-accent-subtle);color:var(--bx-text-accent)}.bx-select-option:hover:not(:disabled),.bx-select-option:active:not(:disabled){background:var(--bx-bg-element-hover)}.bx-select-option[aria-selected=true]:hover:not(:disabled){background:var(--bx-accent-subtle)}.bx-select-option:focus-visible{outline:2px solid var(--bx-border-accent);outline-offset:-2px}.bx-select-option:disabled{opacity:.4;cursor:not-allowed}.bx-select-item-inner{display:flex;align-items:center;gap:.5rem;width:100%}.bx-select-check-placeholder{width:16px;height:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--bx-text-accent)}.bx-select-empty{padding:.75rem;text-align:center;color:var(--bx-text-secondary);font-size:.875rem;font-style:italic}.bx-select-trigger[data-bx-surface]{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-shadow: none}.bx-select-trigger[data-bx-surface].is-invalid{--bx-glass-edge: var(--bx-border-danger)}.bx-select-panel[data-bx-surface]{--bx-glass-radius: var(--bx-rounded-lg, .75rem);--bx-glass-surface: var(--bx-bg-surface);--bx-glass-text: var(--bx-text-primary);--bx-glass-edge: var(--bx-border-default);--bx-glass-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);background:var(--bx-glass-surface)!important;-webkit-backdrop-filter:none;backdrop-filter:none}.bx-select-trigger[data-bx-surface]{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-min-opacity: .45;--bx-glass-edge: var(--bx-border-default);--bx-glass-shadow: none;border:1px solid var(--bx-glass-edge);border-radius:.75rem}.bx-select-trigger[data-bx-surface]:after{display:none}.bx-select-trigger[data-bx-surface]:focus-within:not(.is-disabled,:disabled,.is-readonly,[readonly],[aria-readonly=true],:has([readonly],[aria-readonly=true])),.bx-select-trigger[data-bx-surface]:focus-visible:not(:disabled,[readonly],[aria-readonly=true]),.bx-select-trigger[data-bx-surface].is-open:not(:disabled),.bx-select-trigger[data-bx-surface].is-readonly.is-keyboard-focused:focus-within,.bx-select-trigger[data-bx-surface]:has(.bx-readonly.is-keyboard-focused):focus-within{--bx-glass-edge: var(--bx-border-brand);outline:2px solid var(--bx-border-brand);outline-offset:-2px;--bx-glass-shadow: none}.bx-select-trigger[data-bx-surface].is-invalid{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-min-opacity: .45;--bx-glass-edge: color-mix(in srgb, var(--bx-text-danger) 40%, var(--bx-border-default));border-block-end-color:var(--bx-glass-edge);--bx-glass-shadow: 0 8px 18px -10px color-mix(in srgb, var(--bx-text-danger) 65%, transparent);outline-color:var(--bx-border-danger)}.bx-select-trigger.is-floating .bx-floating-label{position:static;transform:none;padding:.5rem 0 0 .75rem;overflow-wrap:anywhere}.bx-select-trigger.is-floating .bx-select-value{padding-top:.25rem;min-height:2rem}.bx-select-trigger:not(.is-floating) .bx-floating-label{right:0}.bx-select-item-inner>span:last-child{flex:1 1 auto;min-width:0;white-space:normal;overflow-wrap:anywhere}.bx-select-group{padding:.5rem .75rem;font-weight:600;color:var(--bx-text-secondary);font-size:.75rem}.bx-select-option{align-items:center;gap:.5rem}.bx-select-panel{max-block-size:min(var(--bx-select-panel-height, 22rem),70dvh)}.bx-select-menu-container{flex:1 1 auto}.bx-select-trigger.is-outline{border:1px solid var(--bx-border-strong);border-radius:var(--bx-field-radius, .5rem)}.bx-select-trigger.is-outline.is-invalid{border-color:var(--bx-border-danger)}.bx-select-panel{background:var(--bx-select-panel-background, var(--bx-bg-surface-alt));border-color:var(--bx-select-panel-border, var(--bx-border-strong));box-shadow:var(--bx-select-panel-shadow, 0 12px 20px -3px rgba(0, 0, 0, .2), 0 4px 6px -2px rgba(0, 0, 0, .1));isolation:isolate}.bx-select-measure{position:absolute;visibility:hidden;pointer-events:none;inset-inline:0;box-sizing:border-box;padding-inline-start:.75rem;font:inherit;font-size:1rem}.bx-select-caret{display:inline-flex;align-items:center;justify-content:center;inline-size:1rem;block-size:1rem}.bx-select-loading{padding:.5rem .75rem}.bx-select-menu-container{--bx-load-more-padding: .5rem .75rem}.bx-select-search-state{display:flex;justify-content:center;align-items:center;min-block-size:4rem;padding:.75rem;color:var(--bx-text-secondary)}[role=listbox][hidden]{display:none}.bx-selected-tags{display:flex;align-items:center;gap:var(--bx-select-tag-gap, .25rem);min-inline-size:0;max-inline-size:100%;overflow:hidden}.bx-selected-tags>bx-tag{min-inline-size:0}.bx-selected-tags>.bx-overflow-tag{flex:0 0 auto}[role=listbox]{display:flex;flex-direction:column;gap:var(--bx-select-option-gap, .25rem)}.bx-select-option>span:last-child{min-inline-size:0;overflow-wrap:anywhere}.bx-select-control{position:relative;inline-size:100%;min-inline-size:0}.bx-select-control.has-clear .bx-select-container{padding-inline-end:2rem}.bx-select-control.has-clear .bx-select-measure{inset-inline-end:2rem}.bx-select-clear.bx-btn{transition-property:color;transition-duration:calc(.15s * (1 - var(--bx-reduced-motion, 0)));transition-timing-function:ease;display:flex;align-items:center;justify-content:center;box-sizing:border-box;background:transparent;border:none;padding:.25rem;inline-size:1.5rem;block-size:1.5rem;border-radius:.25rem;color:var(--bx-text-secondary);cursor:pointer;flex-shrink:0}.bx-select-clear.bx-btn:focus-visible{outline:2px solid var(--bx-border-brand);outline-offset:0}.bx-select-clear.bx-btn:hover:not(:disabled){color:var(--bx-text-primary);background:var(--bx-bg-element-hover)}.bx-select-clear.bx-btn:disabled{cursor:not-allowed;opacity:.5}.bx-select-clear.bx-btn{position:absolute;inset-block-start:50%;inset-inline-end:calc(1px + 2.25rem);transform:translateY(-50%);z-index:3}.bx-select-all{display:flex;align-items:center;gap:.5rem;padding:.75rem;border:0;border-bottom:1px solid var(--bx-border-subtle);background:transparent;color:var(--bx-text-primary);font:inherit;text-align:start;cursor:pointer}.bx-select-all:focus-visible{outline:2px solid var(--bx-border-brand);outline-offset:-2px}\n"],
 		dependencies: [
 			{
 				kind: "directive",
@@ -5228,6 +5455,32 @@ var MultiSelect = class MultiSelect extends BxSelectBase {
 					"subscriptSizing"
 				]
 			},
+			{
+				kind: "component",
+				type: Button,
+				selector: "bx-button, button[bx-button], a[bx-button]",
+				inputs: [
+					"variant",
+					"color",
+					"outlined",
+					"elevated",
+					"disabled",
+					"loading",
+					"interactive",
+					"surfaceEffects"
+				]
+			},
+			{
+				kind: "component",
+				type: CheckboxIndicator,
+				selector: "bx-checkbox-indicator",
+				inputs: [
+					"checked",
+					"indeterminate",
+					"invalid",
+					"disabled"
+				]
+			},
 			{
 				kind: "component",
 				type: Icon,
@@ -5360,6 +5613,8 @@ i0.ɵɵngDeclareClassMetadata({
 				BxSurfaceDirective,
 				OverlayModule,
 				FormField,
+				Button,
+				CheckboxIndicator,
 				Icon,
 				SearchInput,
 				LoadMoreDirective,
@@ -5371,8 +5626,8 @@ i0.ɵɵngDeclareClassMetadata({
 				Tag
 			],
 			changeDetection: ChangeDetectionStrategy.OnPush,
-			template: "<bx-form-field [control]=\"fieldControl\" [inline]=\"true\" [tooltip]=\"tooltip()\" [showLoadingIndicator]=\"false\"\n    [hint]=\"hint()\" [hintEnd]=\"hintEnd()\" [subscriptSizing]=\"resolvedSubscriptSizing()\" [forId]=\"controlId()\">\n    <button type=\"button\" role=\"combobox\" aria-haspopup=\"listbox\" [bxTooltip]=\"selectionTooltip()\" [bxTooltipHover]=\"selectionDisplay() !== 'tags'\" [bxTooltipTouch]=\"selectionDisplay() === 'tags' ? 'none' : 'longpress'\" cdkOverlayOrigin bxSurface #origin=\"cdkOverlayOrigin\" class=\"bx-select-trigger\"\n        [class.is-invalid]=\"showError()\" [class.is-outline]=\"resolvedAppearance() === 'outline'\" [class.is-open]=\"isOpen()\" [class.is-floating]=\"isFloating()\" [class.is-readonly]=\"isReadonly()\" [class.is-keyboard-focused]=\"keyboardFocused()\"\n        [id]=\"controlId()\" [attr.data-testid]=\"dataTestId()\" [attr.aria-label]=\"ariaLabel() || resolvedLabel()\" [attr.aria-labelledby]=\"ariaLabelledBy()\"\n        [attr.aria-describedby]=\"describedBy()\" [attr.aria-invalid]=\"showError()\" [attr.aria-required]=\"required()\" [attr.aria-readonly]=\"isReadonly()\" [attr.aria-busy]=\"loading() || pending() || isSearching()\"\n        [disabled]=\"disabled()\" (click)=\"toggleOpen()\" (keydown)=\"onTriggerKey($event)\" (blur)=\"onTriggerBlur()\"\n        [attr.aria-expanded]=\"isOpen()\" [attr.aria-controls]=\"isPanelAttached() ? controlId() + '-options' : null\">\n        <div class=\"bx-select-container\">\n            @if (label()) {\n            <span class=\"bx-floating-label\"><span [bxTruncate]=\"!isFloating()\" #labelOverflow=\"bxTruncate\">{{ resolvedLabel() }}</span>\n                @if (required() && !resolvedHideRequiredMarker()) { <span class=\"bx-field-required\" aria-hidden=\"true\">*</span> }\n            </span>\n            }\n            <span class=\"bx-select-value\" [class.is-placeholder]=\"!selectedOptionLabel()\" [bxTruncate]=\"!(selectionDisplay() === 'tags' && selectedOptions().length) && !triggerTemplate()\" #valueOverflow=\"bxTruncate\">\n                @if (triggerTemplate(); as template) {\n                <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"triggerContext()\" />\n                } @else if (selectionDisplay() === 'tags' && selectedOptions().length) {\n                <span class=\"bx-selected-tags\">\n                    @if (selectAll() && allSelectedText()) {\n                    <bx-tag [text]=\"allSelectedText()\" [config]=\"tagConfig()\" [focusable]=\"false\" [tooltipOnTruncate]=\"resolvedTooltipOnTruncate() ? undefined : false\" />\n                    } @else {\n                    @for (option of visibleTags(); track option.value) {\n                    <bx-tag [text]=\"option.label\" [config]=\"selectionTagConfig(option)\" [disabled]=\"disabled() || !!option.disabled\" [focusable]=\"false\" [tooltipOnTruncate]=\"resolvedTooltipOnTruncate() ? undefined : false\" />\n                    }\n                    @if (selectedOptions().length > visibleTagCount()) {\n                    <bx-tag class=\"bx-overflow-tag\" [text]=\"overflowTagLabel()\" [config]=\"overflowTagConfig()\" [tooltip]=\"overflowTagTooltip()\" [focusable]=\"false\" [tooltipOnTruncate]=\"resolvedTooltipOnTruncate() ? undefined : false\" />\n                    }\n                    }\n                </span>\n                } @else { {{ displayedSelection() || (isFloating() || !label() ? resolvedPlaceholder() : '') }} }\n            </span>\n            <span class=\"bx-select-measure\" bxTruncate #summaryOverflow=\"bxTruncate\" aria-hidden=\"true\">{{ selectedOptionLabel() }}</span>\n        </div>\n        <ng-content select=\"[bxSuffix]\" />\n        <span class=\"bx-select-caret\" aria-hidden=\"true\">\n            @if (loading() || pending() || isSearching()) { <bx-loading-spinner [size]=\"16\" [decorative]=\"true\" /> }\n            @else { <bx-icon name=\"chevron-down\" size=\"16\" /> }\n        </span>\n    </button>\n    <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"origin\" [cdkConnectedOverlayOpen]=\"isPanelAttached()\"\n        [cdkConnectedOverlayPositions]=\"overlayPositions\" [cdkConnectedOverlayHasBackdrop]=\"false\"\n        [cdkConnectedOverlayScrollStrategy]=\"panelScrollStrategy\" [cdkConnectedOverlayUsePopover]=\"overlayPopoverLocation(origin.elementRef.nativeElement)\"\n        [cdkConnectedOverlayWidth]=\"origin.elementRef.nativeElement.offsetWidth\"\n        (overlayOutsideClick)=\"onOutsideClick($event)\" (attach)=\"onPanelAttach()\" (detach)=\"onPanelDetach()\" (positionChange)=\"refreshPanel()\">\n        <div class=\"bx-select-panel\" [class]=\"panelClass()\" data-bx-surface=\"solid\" tabindex=\"-1\" (keydown)=\"onPanelKey($event)\">\n            @if (isSearchable()) {\n            <div class=\"bx-select-search-container\">\n                <bx-search-input #searchInput [value]=\"searchValue()\" [placeholder]=\"resolvedSearchPlaceholder()\" [ariaLabel]=\"resolvedSearchPlaceholder()\"\n                    (search)=\"onSearchChange($event)\" (keydown.enter)=\"$event.preventDefault()\" />\n            </div>\n            }\n            @if (showSelectAll()) {\n            <button type=\"button\" class=\"bx-select-all\" role=\"checkbox\" [attr.aria-checked]=\"selectAll() ? 'true' : someSelected() ? 'mixed' : 'false'\"\n                [disabled]=\"disabled() || isReadonly()\" (click)=\"toggleSelectAll()\">\n                <span class=\"bx-multi-checkbox\" aria-hidden=\"true\">@if (selectAll()) { <bx-icon name=\"check\" size=\"16\" /> } @else if (someSelected()) { <bx-icon name=\"minus\" size=\"16\" /> }</span>\n                {{ resolvedSelectAllLabel() }}\n            </button>\n            }\n            <div class=\"bx-select-menu-container\" bxLoadMore #pagination=\"bxLoadMore\" [loadMoreHasMore]=\"hasMore()\" [loadMoreSuppressed]=\"isSearching()\" [loadMoreLoading]=\"loading()\"\n                [loadMoreDisabled]=\"disabled() || isReadonly()\" [loadMoreError]=\"loadError()\" [loadMoreConfig]=\"loadMoreConfig()\"\n                [loadMoreTemplate]=\"loadMoreTemplate()\" [loadMoreRevision]=\"options()\" (loadMore)=\"requestMore($event)\">\n                <div role=\"listbox\" [hidden]=\"isSearching()\" [attr.aria-multiselectable]=\"true\" [attr.aria-label]=\"ariaLabel() || resolvedLabel()\" [id]=\"controlId() + '-options'\">\n                    @for (option of filteredOptions(); track option.value; let index = $index) {\n                    @if (option.resolvedGroup && (index === 0 || filteredOptions()[index - 1].resolvedGroup !== option.resolvedGroup)) {\n                    <div class=\"bx-select-group\" [id]=\"controlId() + '-group-' + index\">{{ option.resolvedGroup }}</div>\n                    }\n                    <button type=\"button\" class=\"bx-select-option\" role=\"option\" tabindex=\"-1\" [attr.aria-selected]=\"isSelected(option.value)\"\n                        [disabled]=\"option.disabled || option.groupDisabled || false\" (click)=\"selectOption(option)\">\n                        <span class=\"bx-select-check-placeholder bx-multi-checkbox\" aria-hidden=\"true\">\n                            @if (isSelected(option.value)) { <bx-icon name=\"check\" size=\"16\" /> }\n                        </span>\n                        @if (option.icon) { <bx-icon [name]=\"option.icon\" size=\"16\" /> }\n                        @if (optionTemplate(); as template) {\n                        <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ $implicit: option, selected: isSelected(option.value), index: index }\" />\n                        } @else { <span>{{ option.resolvedStr }}</span> }\n                    </button>\n                    } @empty {\n                    @if (!loading()) { <div class=\"bx-select-empty\" role=\"status\">{{ resolvedEmptyMessage() }}</div> }\n                    }\n                </div>\n                @if (isSearching()) {\n                <div class=\"bx-select-search-state\" role=\"status\" [attr.aria-label]=\"resolvedLoadingLabel() || resolvedLoadingAriaLabel()\">\n                    @if (resolvedLoadingLabel()) { <span>{{ resolvedLoadingLabel() }}</span> }\n                    @else { <bx-loading-spinner [size]=\"20\" [decorative]=\"true\" /> }\n                </div>\n                } @else if (loading() && !pagination.actionVisible()) { <div class=\"bx-select-loading\"><bx-loading-indicator [size]=\"16\" [label]=\"loadingLabel() ?? loadingAriaLabel()\" /></div> }\n            </div>\n        </div>\n    </ng-template>\n    <ng-content select=\"bx-error\" ngProjectAs=\"bx-error\" /><ng-content select=\"bx-hint\" ngProjectAs=\"bx-hint\" />\n</bx-form-field>\n",
-			styles: [":host{display:block;width:100%}.bx-select-trigger{position:relative;display:flex;align-items:center;width:100%;box-sizing:border-box;background-color:var(--bx-bg-neutral);border-radius:.25rem .25rem 0 0;border:none;border-bottom:1px solid var(--bx-border-strong);padding:0 .75rem 0 0;cursor:pointer;text-align:left;font-family:inherit;outline:none}.bx-select-trigger:hover:not(:disabled,.is-readonly){background-color:var(--bx-bg-neutral-hover)}.bx-select-trigger:disabled{background-color:var(--bx-bg-element);opacity:.7;border-bottom-style:dotted;cursor:not-allowed}.bx-select-trigger.is-readonly{cursor:default}.bx-select-trigger:after{content:\"\";position:absolute;bottom:-1px;left:0;right:0;height:2px;background-color:var(--bx-primary);transform:scaleX(0);transition:transform .2s cubic-bezier(.25,.8,.25,1);transform-origin:center;z-index:2}.bx-select-trigger.is-open:after,.bx-select-trigger:focus-visible:not(:disabled):after{transform:scaleX(1)}.bx-select-trigger.is-invalid{border-bottom-color:var(--bx-border-danger)}.bx-select-trigger.is-invalid:after{background-color:var(--bx-border-danger);transform:scaleX(1)}.bx-select-container{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;overflow:hidden}.bx-select-value{width:100%;box-sizing:border-box;padding:1.5rem 0 .5rem .75rem;min-height:3rem;display:block;font-size:1rem;color:var(--bx-text-heading);line-height:1.4;z-index:1}.bx-select-value.is-placeholder{color:var(--bx-text-secondary)}.bx-floating-label{display:flex;align-items:baseline;position:absolute;left:.75rem;top:50%;transform:translateY(-50%);font-size:1rem;color:var(--bx-text-secondary);pointer-events:none;z-index:2;transition:top .2s cubic-bezier(.25,.8,.25,1),transform .2s cubic-bezier(.25,.8,.25,1),font-size .2s cubic-bezier(.25,.8,.25,1),color .15s ease}.bx-select-trigger.is-floating .bx-floating-label{top:.5rem;transform:translateY(0);font-size:.75rem;font-weight:500}.bx-select-trigger.is-floating.is-open .bx-floating-label,.bx-select-trigger.is-floating:focus-visible:not(.is-readonly) .bx-floating-label{color:var(--bx-primary)}.bx-select-trigger.is-invalid .bx-floating-label{color:var(--bx-text-danger)!important}.bx-field-required{color:var(--bx-text-secondary);margin-left:.125rem}.bx-select-caret{flex-shrink:0;color:var(--bx-text-secondary);transition:transform .2s ease;margin-left:.5rem;transform-origin:center}.is-open .bx-select-caret{transform:rotate(180deg)}.bx-select-panel{display:flex;flex-direction:column;box-sizing:border-box;min-width:100%;width:100%;max-width:100%;background-color:var(--bx-glass-surface, var(--bx-bg-surface));border:1px solid var(--bx-glass-edge, var(--bx-border-default));border-radius:.75rem;box-shadow:0 2px 4px #0000001a,0 1px 2px -1px #0000001a;overflow:hidden;max-height:18rem}.bx-select-search-container{display:flex;align-items:center;padding:.25rem;flex-shrink:0;border-bottom:1px solid var(--bx-border-subtle)}.bx-select-menu-container{min-height:0;overflow:hidden auto;padding:.25rem}.bx-select-menu-container::-webkit-scrollbar{width:6px}.bx-select-menu-container::-webkit-scrollbar-track{background:var(--bx-scroll-bg)}.bx-select-menu-container::-webkit-scrollbar-thumb{background:var(--bx-scroll-thumb);border-radius:9999px}.bx-select-menu-container::-webkit-scrollbar-thumb:hover{background:var(--bx-scroll-thumb-hover)}.bx-select-option{display:flex;width:100%;padding:.5rem .75rem;border:0;border-radius:.25rem;background:transparent;color:var(--bx-text-primary);font:inherit;font-size:.875rem;line-height:1.4;text-align:start;cursor:pointer}.bx-select-option[aria-selected=true]{background:var(--bx-accent-subtle);color:var(--bx-text-accent)}.bx-select-option:hover:not(:disabled),.bx-select-option:active:not(:disabled){background:var(--bx-bg-element-hover)}.bx-select-option[aria-selected=true]:hover:not(:disabled){background:var(--bx-accent-subtle)}.bx-select-option:focus-visible{outline:2px solid var(--bx-border-accent);outline-offset:-2px}.bx-select-option:disabled{opacity:.4;cursor:not-allowed}.bx-select-item-inner{display:flex;align-items:center;gap:.5rem;width:100%}.bx-select-check-placeholder{width:16px;height:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--bx-text-accent)}.bx-select-empty{padding:.75rem;text-align:center;color:var(--bx-text-secondary);font-size:.875rem;font-style:italic}.bx-select-trigger[data-bx-surface]{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-shadow: none}.bx-select-trigger[data-bx-surface].is-invalid{--bx-glass-edge: var(--bx-border-danger)}.bx-select-panel[data-bx-surface]{--bx-glass-radius: var(--bx-rounded-lg, .75rem);--bx-glass-surface: var(--bx-bg-surface);--bx-glass-text: var(--bx-text-primary);--bx-glass-edge: var(--bx-border-default);--bx-glass-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);background:var(--bx-glass-surface)!important;-webkit-backdrop-filter:none;backdrop-filter:none}.bx-select-trigger[data-bx-surface]{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-min-opacity: .45;--bx-glass-edge: var(--bx-border-default);--bx-glass-shadow: none;border:1px solid var(--bx-glass-edge);border-radius:.75rem}.bx-select-trigger[data-bx-surface]:after{display:none}.bx-select-trigger[data-bx-surface]:focus-within:not(.is-disabled,:disabled,.is-readonly,[readonly],[aria-readonly=true],:has([readonly],[aria-readonly=true])),.bx-select-trigger[data-bx-surface]:focus-visible:not(:disabled,[readonly],[aria-readonly=true]),.bx-select-trigger[data-bx-surface].is-open:not(:disabled),.bx-select-trigger[data-bx-surface].is-readonly.is-keyboard-focused:focus-within,.bx-select-trigger[data-bx-surface]:has(.bx-readonly.is-keyboard-focused):focus-within{--bx-glass-edge: var(--bx-border-brand);outline:2px solid var(--bx-border-brand);outline-offset:-2px;--bx-glass-shadow: none}.bx-select-trigger[data-bx-surface].is-invalid{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-min-opacity: .45;--bx-glass-edge: color-mix(in srgb, var(--bx-text-danger) 40%, var(--bx-border-default));border-block-end-color:var(--bx-glass-edge);--bx-glass-shadow: 0 8px 18px -10px color-mix(in srgb, var(--bx-text-danger) 65%, transparent);outline-color:var(--bx-border-danger)}.bx-select-trigger.is-floating .bx-floating-label{position:static;transform:none;padding:.5rem 0 0 .75rem;overflow-wrap:anywhere}.bx-select-trigger.is-floating .bx-select-value{padding-top:.25rem;min-height:2rem}.bx-select-trigger:not(.is-floating) .bx-floating-label{right:0}.bx-select-item-inner>span:last-child{flex:1 1 auto;min-width:0;white-space:normal;overflow-wrap:anywhere}.bx-select-group{padding:.5rem .75rem;font-weight:600;color:var(--bx-text-secondary);font-size:.75rem}.bx-select-option{align-items:center;gap:.5rem}.bx-select-panel{max-block-size:min(var(--bx-select-panel-height, 22rem),70dvh)}.bx-select-menu-container{flex:1 1 auto}.bx-select-trigger.is-outline{border:1px solid var(--bx-border-strong);border-radius:var(--bx-field-radius, .5rem)}.bx-select-trigger.is-outline.is-invalid{border-color:var(--bx-border-danger)}.bx-select-panel{background:var(--bx-select-panel-background, var(--bx-bg-surface-alt));border-color:var(--bx-select-panel-border, var(--bx-border-strong));box-shadow:var(--bx-select-panel-shadow, 0 12px 20px -3px rgba(0, 0, 0, .2), 0 4px 6px -2px rgba(0, 0, 0, .1));isolation:isolate}.bx-select-measure{position:absolute;visibility:hidden;pointer-events:none;inset-inline:0;box-sizing:border-box;padding-inline-start:.75rem;font:inherit;font-size:1rem}.bx-select-caret{display:inline-flex;align-items:center;justify-content:center;inline-size:1rem;block-size:1rem}.bx-select-loading{padding:.5rem .75rem}.bx-select-menu-container{--bx-load-more-padding: .5rem .75rem}.bx-select-search-state{display:flex;justify-content:center;align-items:center;min-block-size:4rem;padding:.75rem;color:var(--bx-text-secondary)}[role=listbox][hidden]{display:none}.bx-selected-tags{display:flex;align-items:center;gap:var(--bx-select-tag-gap, .25rem);min-inline-size:0;max-inline-size:100%;overflow:hidden}.bx-selected-tags>bx-tag{min-inline-size:0}.bx-selected-tags>.bx-overflow-tag{flex:0 0 auto}.bx-select-all{display:flex;align-items:center;gap:.5rem;padding:.75rem;border:0;border-bottom:1px solid var(--bx-border-subtle);background:transparent;color:var(--bx-text-primary);font:inherit;text-align:start;cursor:pointer}.bx-multi-checkbox{display:inline-flex;align-items:center;justify-content:center;inline-size:1rem;block-size:1rem;flex:0 0 auto;border:1px solid var(--bx-border-strong);color:var(--bx-text-accent)}.bx-select-all:focus-visible{outline:2px solid var(--bx-border-brand);outline-offset:-2px}\n"]
+			template: "<bx-form-field [control]=\"fieldControl\" [inline]=\"true\" [tooltip]=\"tooltip()\" [showLoadingIndicator]=\"false\"\n    [hint]=\"hint()\" [hintEnd]=\"hintEnd()\" [subscriptSizing]=\"resolvedSubscriptSizing()\" [forId]=\"controlId()\">\n    <div class=\"bx-select-control\" [class.has-clear]=\"showClear()\">\n    <button type=\"button\" role=\"combobox\" aria-haspopup=\"listbox\" [bxTooltip]=\"selectionTooltip()\" [bxTooltipHover]=\"selectionDisplay() !== 'tags' || (selectAll() && !!allSelectedText())\" [bxTooltipTouch]=\"selectionDisplay() === 'tags' && !(selectAll() && allSelectedText()) ? 'none' : 'longpress'\" cdkOverlayOrigin bxSurface #origin=\"cdkOverlayOrigin\" class=\"bx-select-trigger\"\n        [class.is-invalid]=\"showError()\" [class.is-outline]=\"resolvedAppearance() === 'outline'\" [class.is-open]=\"isOpen()\" [class.is-floating]=\"isFloating()\" [class.is-readonly]=\"isReadonly()\" [class.is-keyboard-focused]=\"keyboardFocused()\"\n        [id]=\"controlId()\" [attr.data-testid]=\"dataTestId()\" [attr.aria-label]=\"ariaLabel() || resolvedLabel()\" [attr.aria-labelledby]=\"ariaLabelledBy()\"\n        [attr.aria-describedby]=\"describedBy()\" [attr.aria-invalid]=\"showError()\" [attr.aria-required]=\"required()\" [attr.aria-readonly]=\"isReadonly()\" [attr.aria-busy]=\"loading() || pending() || isSearching()\"\n        [disabled]=\"disabled()\" (click)=\"toggleOpen()\" (keydown)=\"onTriggerKey($event)\" (blur)=\"onTriggerBlur()\"\n        [attr.aria-expanded]=\"isOpen()\" [attr.aria-controls]=\"isPanelAttached() ? controlId() + '-options' : null\">\n        <div class=\"bx-select-container\">\n            @if (label()) {\n            <span class=\"bx-floating-label\"><span [bxTruncate]=\"!isFloating()\" #labelOverflow=\"bxTruncate\">{{ resolvedLabel() }}</span>\n                @if (required() && !resolvedHideRequiredMarker()) { <span class=\"bx-field-required\" aria-hidden=\"true\">*</span> }\n            </span>\n            }\n            <span class=\"bx-select-value\" [class.is-placeholder]=\"!selectedOptionLabel()\" [bxTruncate]=\"!(selectionDisplay() === 'tags' && selectedOptions().length) && !triggerTemplate()\" #valueOverflow=\"bxTruncate\">\n                @if (triggerTemplate(); as template) {\n                <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"triggerContext()\" />\n                } @else if (selectionDisplay() === 'tags' && selectedOptions().length) {\n                <span class=\"bx-selected-tags\">\n                    @if (selectAll() && allSelectedText()) {\n                    <bx-tag [text]=\"allSelectedText()\" [config]=\"tagConfig()\" [focusable]=\"false\" [tooltip]=\"''\" [tooltipOnTruncate]=\"false\" />\n                    } @else {\n                    @for (option of visibleTags(); track option.value) {\n                    <bx-tag [text]=\"option.label\" [config]=\"selectionTagConfig(option)\" [disabled]=\"disabled() || !!option.disabled\" [focusable]=\"false\" [tooltipOnTruncate]=\"resolvedTooltipOnTruncate() ? undefined : false\" />\n                    }\n                    @if (selectedOptions().length > visibleTagCount()) {\n                    <bx-tag class=\"bx-overflow-tag\" [text]=\"overflowTagLabel()\" [config]=\"overflowTagConfig()\" [tooltip]=\"overflowTagTooltip()\" [focusable]=\"false\" [tooltipOnTruncate]=\"resolvedTooltipOnTruncate() ? undefined : false\" />\n                    }\n                    }\n                </span>\n                } @else { {{ displayedSelection() || (isFloating() || !label() ? resolvedPlaceholder() : '') }} }\n            </span>\n            <span class=\"bx-select-measure\" bxTruncate #summaryOverflow=\"bxTruncate\" aria-hidden=\"true\">{{ selectedOptionLabel() }}</span>\n        </div>\n        <ng-content select=\"[bxSuffix]\" />\n        <span class=\"bx-select-caret\" aria-hidden=\"true\">\n            @if (loading() || pending() || isSearching()) { <bx-loading-spinner [size]=\"16\" [decorative]=\"true\" /> }\n            @else { <bx-icon name=\"chevron-down\" size=\"16\" /> }\n        </span>\n    </button>\n    @if (showClear()) {\n    <button bx-button type=\"button\" variant=\"text\" class=\"bx-select-clear\" [surfaceEffects]=\"false\" [disabled]=\"disabled()\"\n        [attr.aria-label]=\"resolvedClearLabel()\" [bxTooltip]=\"resolvedClearTooltip()\" (click)=\"clearSelection()\">\n        <bx-icon name=\"x\" size=\"16\" />\n    </button>\n    }\n    </div>\n    <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"origin\" [cdkConnectedOverlayOpen]=\"isPanelAttached()\"\n        [cdkConnectedOverlayPositions]=\"overlayPositions\" [cdkConnectedOverlayHasBackdrop]=\"false\"\n        [cdkConnectedOverlayScrollStrategy]=\"panelScrollStrategy\" [cdkConnectedOverlayUsePopover]=\"overlayPopoverLocation(origin.elementRef.nativeElement)\"\n        [cdkConnectedOverlayWidth]=\"origin.elementRef.nativeElement.offsetWidth\"\n        (overlayOutsideClick)=\"onOutsideClick($event)\" (attach)=\"onPanelAttach()\" (detach)=\"onPanelDetach()\" (positionChange)=\"refreshPanel()\">\n        <div class=\"bx-select-panel\" [class]=\"panelClass()\" data-bx-surface=\"solid\" tabindex=\"-1\" (keydown)=\"onPanelKey($event)\">\n            @if (isSearchable()) {\n            <div class=\"bx-select-search-container\">\n                <bx-search-input #searchInput [value]=\"searchValue()\" [placeholder]=\"resolvedSearchPlaceholder()\" [ariaLabel]=\"resolvedSearchPlaceholder()\"\n                    (search)=\"onSearchChange($event)\" (keydown.enter)=\"$event.preventDefault()\" />\n            </div>\n            }\n            @if (showSelectAll()) {\n            <button type=\"button\" class=\"bx-select-all\" role=\"checkbox\" [attr.aria-checked]=\"selectAllChecked() ? 'true' : someSelected() ? 'mixed' : 'false'\"\n                [disabled]=\"disabled() || isReadonly()\" (click)=\"toggleSelectAll()\">\n                <bx-checkbox-indicator [checked]=\"selectAllChecked()\" [indeterminate]=\"!selectAllChecked() && someSelected()\" [disabled]=\"disabled()\" />\n                {{ resolvedSelectAllLabel() }}\n            </button>\n            }\n            <div class=\"bx-select-menu-container\" bxLoadMore #pagination=\"bxLoadMore\" [loadMoreHasMore]=\"hasMore()\" [loadMoreSuppressed]=\"isSearching()\" [loadMoreLoading]=\"loading()\"\n                [loadMoreDisabled]=\"disabled() || isReadonly()\" [loadMoreError]=\"loadError()\" [loadMoreConfig]=\"loadMoreConfig()\"\n                [loadMoreTemplate]=\"loadMoreTemplate()\" [loadMoreRevision]=\"options()\" (loadMore)=\"requestMore($event)\">\n                <div role=\"listbox\" [hidden]=\"isSearching()\" [attr.aria-multiselectable]=\"true\" [attr.aria-label]=\"ariaLabel() || resolvedLabel()\" [id]=\"controlId() + '-options'\">\n                    @for (option of filteredOptions(); track option.value; let index = $index) {\n                    @if (option.resolvedGroup && (index === 0 || filteredOptions()[index - 1].resolvedGroup !== option.resolvedGroup)) {\n                    <div class=\"bx-select-group\" [id]=\"controlId() + '-group-' + index\">{{ option.resolvedGroup }}</div>\n                    }\n                    <button type=\"button\" class=\"bx-select-option\" role=\"option\" tabindex=\"-1\" [attr.aria-selected]=\"isSelected(option.value)\"\n                        [disabled]=\"option.disabled || option.groupDisabled || false\" (click)=\"selectOption(option)\">\n                        <bx-checkbox-indicator [checked]=\"isSelected(option.value)\" [disabled]=\"disabled() || !!option.disabled || !!option.groupDisabled\" />\n                        @if (option.icon) { <bx-icon [name]=\"option.icon\" size=\"16\" /> }\n                        @if (optionTemplate(); as template) {\n                        <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ $implicit: option, selected: isSelected(option.value), index: index }\" />\n                        } @else { <span>{{ option.resolvedStr }}</span> }\n                    </button>\n                    } @empty {\n                    @if (!loading()) { <div class=\"bx-select-empty\" role=\"status\">{{ resolvedEmptyMessage() }}</div> }\n                    }\n                </div>\n                @if (isSearching()) {\n                <div class=\"bx-select-search-state\" role=\"status\" [attr.aria-label]=\"resolvedLoadingLabel() || resolvedLoadingAriaLabel()\">\n                    @if (resolvedLoadingLabel()) { <span>{{ resolvedLoadingLabel() }}</span> }\n                    @else { <bx-loading-spinner [size]=\"20\" [decorative]=\"true\" /> }\n                </div>\n                } @else if (loading() && !pagination.actionVisible()) { <div class=\"bx-select-loading\"><bx-loading-indicator [size]=\"16\" [label]=\"loadingLabel() ?? loadingAriaLabel()\" /></div> }\n            </div>\n        </div>\n    </ng-template>\n    <ng-content select=\"bx-error\" ngProjectAs=\"bx-error\" /><ng-content select=\"bx-hint\" ngProjectAs=\"bx-hint\" />\n</bx-form-field>\n",
+			styles: [":host{display:block;width:100%}.bx-select-trigger{position:relative;display:flex;align-items:center;width:100%;box-sizing:border-box;background-color:var(--bx-bg-neutral);border-radius:.25rem .25rem 0 0;border:none;border-bottom:1px solid var(--bx-border-strong);padding:0;padding-inline-end:.75rem;cursor:pointer;text-align:left;font-family:inherit;outline:none}.bx-select-trigger:hover:not(:disabled,.is-readonly){background-color:var(--bx-bg-neutral-hover)}.bx-select-trigger:disabled{background-color:var(--bx-bg-element);opacity:.7;border-bottom-style:dotted;cursor:not-allowed}.bx-select-trigger.is-readonly{cursor:default}.bx-select-trigger:after{content:\"\";position:absolute;bottom:-1px;left:0;right:0;height:2px;background-color:var(--bx-primary);transform:scaleX(0);transition:transform .2s cubic-bezier(.25,.8,.25,1);transform-origin:center;z-index:2}.bx-select-trigger.is-open:after,.bx-select-trigger:focus-visible:not(:disabled):after{transform:scaleX(1)}.bx-select-trigger.is-invalid{border-bottom-color:var(--bx-border-danger)}.bx-select-trigger.is-invalid:after{background-color:var(--bx-border-danger);transform:scaleX(1)}.bx-select-container{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;overflow:hidden}.bx-select-value{width:100%;box-sizing:border-box;padding:1.5rem 0 .5rem .75rem;min-height:3rem;display:block;font-size:1rem;color:var(--bx-text-heading);line-height:1.4;z-index:1}.bx-select-value.is-placeholder{color:var(--bx-text-secondary)}.bx-floating-label{display:flex;align-items:baseline;position:absolute;left:.75rem;top:50%;transform:translateY(-50%);font-size:1rem;color:var(--bx-text-secondary);pointer-events:none;z-index:2;transition:top .2s cubic-bezier(.25,.8,.25,1),transform .2s cubic-bezier(.25,.8,.25,1),font-size .2s cubic-bezier(.25,.8,.25,1),color .15s ease}.bx-select-trigger.is-floating .bx-floating-label{top:.5rem;transform:translateY(0);font-size:.75rem;font-weight:500}.bx-select-trigger.is-floating.is-open .bx-floating-label,.bx-select-trigger.is-floating:focus-visible:not(.is-readonly) .bx-floating-label{color:var(--bx-primary)}.bx-select-trigger.is-invalid .bx-floating-label{color:var(--bx-text-danger)!important}.bx-field-required{color:var(--bx-text-secondary);margin-left:.125rem}.bx-select-caret{flex-shrink:0;color:var(--bx-text-secondary);transition:transform .2s ease;margin-inline-start:.5rem;transform-origin:center}.is-open .bx-select-caret{transform:rotate(180deg)}.bx-select-panel{display:flex;flex-direction:column;box-sizing:border-box;min-width:100%;width:100%;max-width:100%;background-color:var(--bx-glass-surface, var(--bx-bg-surface));border:1px solid var(--bx-glass-edge, var(--bx-border-default));border-radius:.75rem;box-shadow:0 2px 4px #0000001a,0 1px 2px -1px #0000001a;overflow:hidden;max-height:18rem}.bx-select-search-container{display:flex;align-items:center;padding:.25rem;flex-shrink:0;border-bottom:1px solid var(--bx-border-subtle)}.bx-select-menu-container{min-height:0;overflow:hidden auto;padding:.25rem}.bx-select-menu-container::-webkit-scrollbar{width:6px}.bx-select-menu-container::-webkit-scrollbar-track{background:var(--bx-scroll-bg)}.bx-select-menu-container::-webkit-scrollbar-thumb{background:var(--bx-scroll-thumb);border-radius:9999px}.bx-select-menu-container::-webkit-scrollbar-thumb:hover{background:var(--bx-scroll-thumb-hover)}.bx-select-option{display:flex;width:100%;padding:.5rem .75rem;border:0;border-radius:.25rem;background:transparent;color:var(--bx-text-primary);font:inherit;font-size:.875rem;line-height:1.4;text-align:start;cursor:pointer}.bx-select-option[aria-selected=true]{background:var(--bx-accent-subtle);color:var(--bx-text-accent)}.bx-select-option:hover:not(:disabled),.bx-select-option:active:not(:disabled){background:var(--bx-bg-element-hover)}.bx-select-option[aria-selected=true]:hover:not(:disabled){background:var(--bx-accent-subtle)}.bx-select-option:focus-visible{outline:2px solid var(--bx-border-accent);outline-offset:-2px}.bx-select-option:disabled{opacity:.4;cursor:not-allowed}.bx-select-item-inner{display:flex;align-items:center;gap:.5rem;width:100%}.bx-select-check-placeholder{width:16px;height:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--bx-text-accent)}.bx-select-empty{padding:.75rem;text-align:center;color:var(--bx-text-secondary);font-size:.875rem;font-style:italic}.bx-select-trigger[data-bx-surface]{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-shadow: none}.bx-select-trigger[data-bx-surface].is-invalid{--bx-glass-edge: var(--bx-border-danger)}.bx-select-panel[data-bx-surface]{--bx-glass-radius: var(--bx-rounded-lg, .75rem);--bx-glass-surface: var(--bx-bg-surface);--bx-glass-text: var(--bx-text-primary);--bx-glass-edge: var(--bx-border-default);--bx-glass-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);background:var(--bx-glass-surface)!important;-webkit-backdrop-filter:none;backdrop-filter:none}.bx-select-trigger[data-bx-surface]{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-min-opacity: .45;--bx-glass-edge: var(--bx-border-default);--bx-glass-shadow: none;border:1px solid var(--bx-glass-edge);border-radius:.75rem}.bx-select-trigger[data-bx-surface]:after{display:none}.bx-select-trigger[data-bx-surface]:focus-within:not(.is-disabled,:disabled,.is-readonly,[readonly],[aria-readonly=true],:has([readonly],[aria-readonly=true])),.bx-select-trigger[data-bx-surface]:focus-visible:not(:disabled,[readonly],[aria-readonly=true]),.bx-select-trigger[data-bx-surface].is-open:not(:disabled),.bx-select-trigger[data-bx-surface].is-readonly.is-keyboard-focused:focus-within,.bx-select-trigger[data-bx-surface]:has(.bx-readonly.is-keyboard-focused):focus-within{--bx-glass-edge: var(--bx-border-brand);outline:2px solid var(--bx-border-brand);outline-offset:-2px;--bx-glass-shadow: none}.bx-select-trigger[data-bx-surface].is-invalid{--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-min-opacity: .45;--bx-glass-edge: color-mix(in srgb, var(--bx-text-danger) 40%, var(--bx-border-default));border-block-end-color:var(--bx-glass-edge);--bx-glass-shadow: 0 8px 18px -10px color-mix(in srgb, var(--bx-text-danger) 65%, transparent);outline-color:var(--bx-border-danger)}.bx-select-trigger.is-floating .bx-floating-label{position:static;transform:none;padding:.5rem 0 0 .75rem;overflow-wrap:anywhere}.bx-select-trigger.is-floating .bx-select-value{padding-top:.25rem;min-height:2rem}.bx-select-trigger:not(.is-floating) .bx-floating-label{right:0}.bx-select-item-inner>span:last-child{flex:1 1 auto;min-width:0;white-space:normal;overflow-wrap:anywhere}.bx-select-group{padding:.5rem .75rem;font-weight:600;color:var(--bx-text-secondary);font-size:.75rem}.bx-select-option{align-items:center;gap:.5rem}.bx-select-panel{max-block-size:min(var(--bx-select-panel-height, 22rem),70dvh)}.bx-select-menu-container{flex:1 1 auto}.bx-select-trigger.is-outline{border:1px solid var(--bx-border-strong);border-radius:var(--bx-field-radius, .5rem)}.bx-select-trigger.is-outline.is-invalid{border-color:var(--bx-border-danger)}.bx-select-panel{background:var(--bx-select-panel-background, var(--bx-bg-surface-alt));border-color:var(--bx-select-panel-border, var(--bx-border-strong));box-shadow:var(--bx-select-panel-shadow, 0 12px 20px -3px rgba(0, 0, 0, .2), 0 4px 6px -2px rgba(0, 0, 0, .1));isolation:isolate}.bx-select-measure{position:absolute;visibility:hidden;pointer-events:none;inset-inline:0;box-sizing:border-box;padding-inline-start:.75rem;font:inherit;font-size:1rem}.bx-select-caret{display:inline-flex;align-items:center;justify-content:center;inline-size:1rem;block-size:1rem}.bx-select-loading{padding:.5rem .75rem}.bx-select-menu-container{--bx-load-more-padding: .5rem .75rem}.bx-select-search-state{display:flex;justify-content:center;align-items:center;min-block-size:4rem;padding:.75rem;color:var(--bx-text-secondary)}[role=listbox][hidden]{display:none}.bx-selected-tags{display:flex;align-items:center;gap:var(--bx-select-tag-gap, .25rem);min-inline-size:0;max-inline-size:100%;overflow:hidden}.bx-selected-tags>bx-tag{min-inline-size:0}.bx-selected-tags>.bx-overflow-tag{flex:0 0 auto}[role=listbox]{display:flex;flex-direction:column;gap:var(--bx-select-option-gap, .25rem)}.bx-select-option>span:last-child{min-inline-size:0;overflow-wrap:anywhere}.bx-select-control{position:relative;inline-size:100%;min-inline-size:0}.bx-select-control.has-clear .bx-select-container{padding-inline-end:2rem}.bx-select-control.has-clear .bx-select-measure{inset-inline-end:2rem}.bx-select-clear.bx-btn{transition-property:color;transition-duration:calc(.15s * (1 - var(--bx-reduced-motion, 0)));transition-timing-function:ease;display:flex;align-items:center;justify-content:center;box-sizing:border-box;background:transparent;border:none;padding:.25rem;inline-size:1.5rem;block-size:1.5rem;border-radius:.25rem;color:var(--bx-text-secondary);cursor:pointer;flex-shrink:0}.bx-select-clear.bx-btn:focus-visible{outline:2px solid var(--bx-border-brand);outline-offset:0}.bx-select-clear.bx-btn:hover:not(:disabled){color:var(--bx-text-primary);background:var(--bx-bg-element-hover)}.bx-select-clear.bx-btn:disabled{cursor:not-allowed;opacity:.5}.bx-select-clear.bx-btn{position:absolute;inset-block-start:50%;inset-inline-end:calc(1px + 2.25rem);transform:translateY(-50%);z-index:3}.bx-select-all{display:flex;align-items:center;gap:.5rem;padding:.75rem;border:0;border-bottom:1px solid var(--bx-border-subtle);background:transparent;color:var(--bx-text-primary);font:inherit;text-align:start;cursor:pointer}.bx-select-all:focus-visible{outline:2px solid var(--bx-border-brand);outline-offset:-2px}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -5381,6 +5636,14 @@ i0.ɵɵngDeclareClassMetadata({
 			type: i0.ViewChild,
 			args: ["summaryOverflow", { isSignal: true }]
 		}],
+		allSelectedTooltip: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "allSelectedTooltip",
+				required: false
+			}]
+		}],
 		allSelectedText: [{
 			type: i0.Input,
 			args: [{
@@ -5650,7 +5913,7 @@ var RangeSlider = class RangeSlider extends BxValueControl {
 		usesInheritance: true,
 		ngImport: i0,
 		template: "<bx-form-field [control]=\"fieldControl\" [label]=\"label()\" [hint]=\"hint()\" [hintEnd]=\"hintEnd()\" [tooltip]=\"tooltip()\" [forId]=\"controlId()\">\n    <div class=\"bx-range-slider\" role=\"group\" [class.is-readonly]=\"isReadonly() && !disabled()\" [attr.aria-label]=\"ariaLabel() || resolvedLabel()\" [style.--bx-range-start]=\"startPercent() / 100\" [style.--bx-range-end]=\"endPercent() / 100\">\n        <div class=\"bx-range-track\" aria-hidden=\"true\"></div>\n        <div class=\"bx-range-input\">\n            <input bxSlider type=\"range\" [id]=\"controlId()\" [min]=\"min()\" [max]=\"max()\" [attr.aria-valuemax]=\"end()\" [step]=\"step()\" [value]=\"start()\"\n                [disabled]=\"disabled() || isReadonly()\" [attr.aria-label]=\"resolvedStartLabel()\" [attr.aria-valuetext]=\"displayWith()(start())\"\n                [attr.aria-describedby]=\"describedBy()\" (input)=\"onRangeInput($event, 'start')\" (blur)=\"onBlur()\">\n        </div>\n        <div class=\"bx-range-input\">\n            <input bxSlider type=\"range\" [min]=\"min()\" [max]=\"max()\" [attr.aria-valuemin]=\"start()\" [step]=\"step()\" [value]=\"end()\"\n                [disabled]=\"disabled() || isReadonly()\" [attr.aria-label]=\"resolvedEndLabel()\" [attr.aria-valuetext]=\"displayWith()(end())\"\n                [attr.aria-describedby]=\"describedBy()\" (input)=\"onRangeInput($event, 'end')\" (blur)=\"onBlur()\">\n        </div>\n        <div class=\"bx-range-ticks\" aria-hidden=\"true\">@for (tick of ticks(); track tick) { <span [style.inset-inline-start.%]=\"tick\"></span> }</div>\n    </div>\n    @if (discrete()) { <output class=\"bx-range-values\">{{ displayWith()(start()) }} – {{ displayWith()(end()) }}</output> }\n    <ng-content select=\"bx-error\" ngProjectAs=\"bx-error\" /><ng-content select=\"bx-hint\" ngProjectAs=\"bx-hint\" />\n</bx-form-field>\n",
-		styles: [":host{display:block}.bx-range-slider{--bx-slider-lens-start: var(--bx-range-start);--bx-slider-lens-end: var(--bx-range-end);--bx-slider-lens-track-color: var(--bx-bg-element);--bx-slider-fill-display: none;position:relative;block-size:2.5rem;inline-size:100%}.bx-range-track{position:absolute;inset-block-start:50%;inset-inline:0;block-size:.5rem;transform:translateY(-50%);border-radius:9999px;background:var(--bx-bg-element)}.bx-range-track:after{content:\"\";position:absolute;inset-block:0;inset-inline:calc(var(--bx-slider-thumb-size, 1.5rem) / 2 + var(--bx-range-start) * (100% - var(--bx-slider-thumb-size, 1.5rem))) calc(var(--bx-slider-thumb-size, 1.5rem) / 2 + (1 - var(--bx-range-end)) * (100% - var(--bx-slider-thumb-size, 1.5rem)));background:var(--bx-accent);border-radius:inherit}.bx-range-input{position:absolute;inset:0;pointer-events:none}.bx-range-input input{pointer-events:none}.bx-range-slider.is-readonly input:disabled{cursor:default}.bx-range-input input::-webkit-slider-runnable-track{background:transparent;border-color:transparent;box-shadow:none}.bx-range-input input::-moz-range-track{background:transparent;border-color:transparent;box-shadow:none}.bx-range-input input::-webkit-slider-thumb{pointer-events:auto}.bx-range-input input::-moz-range-thumb{pointer-events:auto}.bx-range-ticks{position:absolute;inset-inline:calc(var(--bx-slider-thumb-size, 1.5rem) / 2);inset-block-start:50%;pointer-events:none;z-index:3}.bx-range-ticks span{position:absolute;inline-size:2px;block-size:4px;background:var(--bx-text-primary);transform:translate(-50%,-50%)}.bx-range-ticks span:dir(rtl){transform:translate(50%,-50%)}.bx-range-values{color:var(--bx-text-secondary);font-size:.875rem}\n"],
+		styles: [":host{display:block}.bx-range-slider{--bx-slider-lens-start: var(--bx-range-start);--bx-slider-lens-end: var(--bx-range-end);--bx-slider-lens-track-color: var(--bx-bg-neutral);--bx-slider-fill-display: none;position:relative;block-size:2.5rem;inline-size:100%}.bx-range-track{box-sizing:border-box;height:.5rem;border:1px solid var(--bx-border-strong);border-radius:9999px;background:var(--bx-bg-neutral);box-shadow:inset 0 1px 2px #00000029;position:absolute;inset-block-start:50%;inset-inline:0;transform:translateY(-50%)}.bx-range-track:after{content:\"\";position:absolute;inset-block:0;inset-inline:calc(var(--bx-slider-thumb-size, 1.5rem) / 2 - 1px + var(--bx-range-start) * (100% + 2px - var(--bx-slider-thumb-size, 1.5rem))) calc(var(--bx-slider-thumb-size, 1.5rem) / 2 - 1px + (1 - var(--bx-range-end)) * (100% + 2px - var(--bx-slider-thumb-size, 1.5rem)));background:var(--bx-accent);border-radius:inherit}.bx-range-input{position:absolute;inset:0;pointer-events:none}.bx-range-input input{pointer-events:none}.bx-range-slider.is-readonly input:disabled{cursor:default}.bx-range-input input::-webkit-slider-runnable-track{background:transparent;border-color:transparent;box-shadow:none}.bx-range-input input::-moz-range-track{background:transparent;border-color:transparent;box-shadow:none}.bx-range-input input::-webkit-slider-thumb{pointer-events:auto}.bx-range-input input::-moz-range-thumb{pointer-events:auto}.bx-range-ticks{position:absolute;inset-inline:calc(var(--bx-slider-thumb-size, 1.5rem) / 2);inset-block-start:50%;pointer-events:none;z-index:3}.bx-range-ticks span{position:absolute;inline-size:2px;block-size:4px;background:var(--bx-text-primary);transform:translate(-50%,-50%)}.bx-range-ticks span:dir(rtl){transform:translate(50%,-50%)}.bx-range-values{color:var(--bx-text-secondary);font-size:.875rem}\n"],
 		dependencies: [{
 			kind: "component",
 			type: FormField,
@@ -5697,7 +5960,7 @@ i0.ɵɵngDeclareClassMetadata({
 			imports: [FormField, SliderDirective],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			template: "<bx-form-field [control]=\"fieldControl\" [label]=\"label()\" [hint]=\"hint()\" [hintEnd]=\"hintEnd()\" [tooltip]=\"tooltip()\" [forId]=\"controlId()\">\n    <div class=\"bx-range-slider\" role=\"group\" [class.is-readonly]=\"isReadonly() && !disabled()\" [attr.aria-label]=\"ariaLabel() || resolvedLabel()\" [style.--bx-range-start]=\"startPercent() / 100\" [style.--bx-range-end]=\"endPercent() / 100\">\n        <div class=\"bx-range-track\" aria-hidden=\"true\"></div>\n        <div class=\"bx-range-input\">\n            <input bxSlider type=\"range\" [id]=\"controlId()\" [min]=\"min()\" [max]=\"max()\" [attr.aria-valuemax]=\"end()\" [step]=\"step()\" [value]=\"start()\"\n                [disabled]=\"disabled() || isReadonly()\" [attr.aria-label]=\"resolvedStartLabel()\" [attr.aria-valuetext]=\"displayWith()(start())\"\n                [attr.aria-describedby]=\"describedBy()\" (input)=\"onRangeInput($event, 'start')\" (blur)=\"onBlur()\">\n        </div>\n        <div class=\"bx-range-input\">\n            <input bxSlider type=\"range\" [min]=\"min()\" [max]=\"max()\" [attr.aria-valuemin]=\"start()\" [step]=\"step()\" [value]=\"end()\"\n                [disabled]=\"disabled() || isReadonly()\" [attr.aria-label]=\"resolvedEndLabel()\" [attr.aria-valuetext]=\"displayWith()(end())\"\n                [attr.aria-describedby]=\"describedBy()\" (input)=\"onRangeInput($event, 'end')\" (blur)=\"onBlur()\">\n        </div>\n        <div class=\"bx-range-ticks\" aria-hidden=\"true\">@for (tick of ticks(); track tick) { <span [style.inset-inline-start.%]=\"tick\"></span> }</div>\n    </div>\n    @if (discrete()) { <output class=\"bx-range-values\">{{ displayWith()(start()) }} – {{ displayWith()(end()) }}</output> }\n    <ng-content select=\"bx-error\" ngProjectAs=\"bx-error\" /><ng-content select=\"bx-hint\" ngProjectAs=\"bx-hint\" />\n</bx-form-field>\n",
-			styles: [":host{display:block}.bx-range-slider{--bx-slider-lens-start: var(--bx-range-start);--bx-slider-lens-end: var(--bx-range-end);--bx-slider-lens-track-color: var(--bx-bg-element);--bx-slider-fill-display: none;position:relative;block-size:2.5rem;inline-size:100%}.bx-range-track{position:absolute;inset-block-start:50%;inset-inline:0;block-size:.5rem;transform:translateY(-50%);border-radius:9999px;background:var(--bx-bg-element)}.bx-range-track:after{content:\"\";position:absolute;inset-block:0;inset-inline:calc(var(--bx-slider-thumb-size, 1.5rem) / 2 + var(--bx-range-start) * (100% - var(--bx-slider-thumb-size, 1.5rem))) calc(var(--bx-slider-thumb-size, 1.5rem) / 2 + (1 - var(--bx-range-end)) * (100% - var(--bx-slider-thumb-size, 1.5rem)));background:var(--bx-accent);border-radius:inherit}.bx-range-input{position:absolute;inset:0;pointer-events:none}.bx-range-input input{pointer-events:none}.bx-range-slider.is-readonly input:disabled{cursor:default}.bx-range-input input::-webkit-slider-runnable-track{background:transparent;border-color:transparent;box-shadow:none}.bx-range-input input::-moz-range-track{background:transparent;border-color:transparent;box-shadow:none}.bx-range-input input::-webkit-slider-thumb{pointer-events:auto}.bx-range-input input::-moz-range-thumb{pointer-events:auto}.bx-range-ticks{position:absolute;inset-inline:calc(var(--bx-slider-thumb-size, 1.5rem) / 2);inset-block-start:50%;pointer-events:none;z-index:3}.bx-range-ticks span{position:absolute;inline-size:2px;block-size:4px;background:var(--bx-text-primary);transform:translate(-50%,-50%)}.bx-range-ticks span:dir(rtl){transform:translate(50%,-50%)}.bx-range-values{color:var(--bx-text-secondary);font-size:.875rem}\n"]
+			styles: [":host{display:block}.bx-range-slider{--bx-slider-lens-start: var(--bx-range-start);--bx-slider-lens-end: var(--bx-range-end);--bx-slider-lens-track-color: var(--bx-bg-neutral);--bx-slider-fill-display: none;position:relative;block-size:2.5rem;inline-size:100%}.bx-range-track{box-sizing:border-box;height:.5rem;border:1px solid var(--bx-border-strong);border-radius:9999px;background:var(--bx-bg-neutral);box-shadow:inset 0 1px 2px #00000029;position:absolute;inset-block-start:50%;inset-inline:0;transform:translateY(-50%)}.bx-range-track:after{content:\"\";position:absolute;inset-block:0;inset-inline:calc(var(--bx-slider-thumb-size, 1.5rem) / 2 - 1px + var(--bx-range-start) * (100% + 2px - var(--bx-slider-thumb-size, 1.5rem))) calc(var(--bx-slider-thumb-size, 1.5rem) / 2 - 1px + (1 - var(--bx-range-end)) * (100% + 2px - var(--bx-slider-thumb-size, 1.5rem)));background:var(--bx-accent);border-radius:inherit}.bx-range-input{position:absolute;inset:0;pointer-events:none}.bx-range-input input{pointer-events:none}.bx-range-slider.is-readonly input:disabled{cursor:default}.bx-range-input input::-webkit-slider-runnable-track{background:transparent;border-color:transparent;box-shadow:none}.bx-range-input input::-moz-range-track{background:transparent;border-color:transparent;box-shadow:none}.bx-range-input input::-webkit-slider-thumb{pointer-events:auto}.bx-range-input input::-moz-range-thumb{pointer-events:auto}.bx-range-ticks{position:absolute;inset-inline:calc(var(--bx-slider-thumb-size, 1.5rem) / 2);inset-block-start:50%;pointer-events:none;z-index:3}.bx-range-ticks span{position:absolute;inline-size:2px;block-size:4px;background:var(--bx-text-primary);transform:translate(-50%,-50%)}.bx-range-ticks span:dir(rtl){transform:translate(50%,-50%)}.bx-range-values{color:var(--bx-text-secondary);font-size:.875rem}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -5767,6 +6030,6 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-export { BX_FORM_FIELD_CONTROL, Button, ButtonIconDirective, BxError, BxHint, Checkbox, FormField, FormSettingsService, InputField, LoadMoreDirective, MultiSelect, NativeControlDirective, PrefixDirective, Radio, RadioGroup, RangeSlider, SearchInput, Select, SlideToggle, SliderDirective, SuffixDirective };
+export { BX_FORM_FIELD_CONTROL, Button, ButtonIconDirective, BxError, BxHint, Checkbox, CheckboxIndicator, FormField, FormSettingsService, InputField, LoadMoreDirective, MultiSelect, NativeControlDirective, PrefixDirective, Radio, RadioGroup, RangeSlider, SearchInput, Select, SlideToggle, SliderDirective, SuffixDirective };
 
 //# sourceMappingURL=filip.mazev-blocks-forms.mjs.map