@filip.mazev/blocks 1.4.15 → 1.4.16

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

@@ -1,14 +1,14 @@
 import { BxSurfaceDirective } from "@filip.mazev/blocks/effects";
 import * as i0 from "@angular/core";
-import { ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, HostListener, InjectionToken, NgZone, PLATFORM_ID, TemplateRef, ViewContainerRef, afterNextRender, afterRenderEffect, booleanAttribute, computed, contentChild, contentChildren, effect, forwardRef, inject, input, model, output, signal, viewChild, viewChildren } from "@angular/core";
-import { BX_I18N, BxA11yService, BxOverlayPositionService, BxShortcutService, inheritOverlayTheme, isTextWithKey, resolveTokenToCssVar, trackOverlayOrigin, uuidv4 } from "@filip.mazev/blocks/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, HostListener, InjectionToken, NgZone, PLATFORM_ID, Pipe, TemplateRef, ViewContainerRef, afterEveryRender, afterNextRender, afterRenderEffect, booleanAttribute, computed, contentChild, contentChildren, effect, forwardRef, inject, input, model, output, signal, viewChild, viewChildren } from "@angular/core";
+import { BX_I18N, BxA11yService, BxOverlayPositionService, BxShortcutService, inheritOverlayTheme, isTextWithKey, resolveText, resolveTokenToCssVar, trackOverlayOrigin, uuidv4 } from "@filip.mazev/blocks/core";
 import { Icon } from "@filip.mazev/blocks/icons";
-import { NgTemplateOutlet, isPlatformBrowser } from "@angular/common";
 import { AriaDescriber, FocusMonitor } from "@angular/cdk/a11y";
 import { Overlay } from "@angular/cdk/overlay";
 import { ComponentPortal, TemplatePortal } from "@angular/cdk/portal";
 import { createGlassTransition, inheritGlassLighting } from "@filip.mazev/blocks/effects/runtime";
 import { Subscription } from "rxjs";
+import { NgTemplateOutlet, isPlatformBrowser } from "@angular/common";
 var Tooltip = class Tooltip {
 	i18n = inject(BX_I18N, { optional: true });
 	a11y = inject(BxA11yService);
@@ -125,190 +125,1160 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}]
 });
-var MenuItem = class MenuItem {
-	i18n = inject(BX_I18N, { optional: true });
+const BX_OVERLAY_CONTEXT = new InjectionToken("BX_OVERLAY_CONTEXT");
+var ContextMenuDirective = class ContextMenuDirective {
+	overlay = inject(Overlay);
+	positionBuilder = inject(BxOverlayPositionService);
+	overlayContext = inject(BX_OVERLAY_CONTEXT, { optional: true });
+	elementRef = inject(ElementRef);
 	a11y = inject(BxA11yService);
-	bxShortcutService = inject(BxShortcutService);
-	resolvedLabel = computed(() => {
-		this.i18n?.version?.();
-		const label = this.label();
-		if (!label) return void 0;
-		if (isTextWithKey(label)) return this.i18n?.translate(label.key) ?? label.key;
-		return label;
-	}, ...ngDevMode ? [{ debugName: "resolvedLabel" }] : /* istanbul ignore next */ []);
-	resolvedShortcut = computed(() => {
-		return this.bxShortcutService.resolve(this.shortcut());
-	}, ...ngDevMode ? [{ debugName: "resolvedShortcut" }] : /* istanbul ignore next */ []);
-	isAnimated = computed(() => !this.a11y.isReducedMotion(), ...ngDevMode ? [{ debugName: "isAnimated" }] : /* istanbul ignore next */ []);
-	icon = input(void 0, ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
-	endIcon = input(void 0, ...ngDevMode ? [{ debugName: "endIcon" }] : /* istanbul ignore next */ []);
-	label = input(void 0, ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
-	wrapLabel = input(false, ...ngDevMode ? [{ debugName: "wrapLabel" }] : /* istanbul ignore next */ []);
-	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
-	danger = input(false, ...ngDevMode ? [{ debugName: "danger" }] : /* istanbul ignore next */ []);
-	shortcut = input(void 0, ...ngDevMode ? [{ debugName: "shortcut" }] : /* istanbul ignore next */ []);
-	action = output();
-	onClick(event) {
-		if (this.disabled()) {
+	zone = inject(NgZone);
+	vcr = inject(ViewContainerRef);
+	bxContextMenu = input.required(...ngDevMode ? [{ debugName: "bxContextMenu" }] : /* istanbul ignore next */ []);
+	bxContextMenuLongPress = input(true, {
+		...ngDevMode ? { debugName: "bxContextMenuLongPress" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	onPointerDown = (event) => {
+		this.lastPointerType = event.pointerType;
+		this.cancelTouchPress();
+		if (event.isPrimary) this.clearTouchGuard();
+		if (event.pointerType !== "touch" || !event.isPrimary || event.button !== 0 || !this.bxContextMenuLongPress() || this.hasNativeTouchAction(event)) return;
+		const doc = this.elementRef.nativeElement.ownerDocument;
+		const win = doc.defaultView;
+		if (!win || this.hasTextSelection()) return;
+		const press = {
+			pointerId: event.pointerId,
+			x: event.clientX,
+			y: event.clientY,
+			timer: 0,
+			opened: false,
+			events: new AbortController()
+		};
+		this.touchPress = press;
+		const options = {
+			capture: true,
+			passive: true,
+			signal: press.events.signal
+		};
+		const finish = () => this.cancelTouchPress();
+		doc.addEventListener("pointermove", (move) => {
+			if (move.pointerId === press.pointerId && !press.opened && Math.hypot(move.clientX - press.x, move.clientY - press.y) > 10) finish();
+		}, options);
+		for (const type of ["pointerup", "pointercancel"]) doc.addEventListener(type, (end) => {
+			if (end.pointerId === press.pointerId) finish();
+		}, options);
+		doc.addEventListener("pointerdown", (next) => {
+			if (next.pointerId !== press.pointerId) finish();
+		}, options);
+		doc.addEventListener("scroll", finish, options);
+		doc.addEventListener("visibilitychange", () => {
+			if (doc.hidden) finish();
+		}, options);
+		win.addEventListener("blur", finish, { signal: press.events.signal });
+		press.timer = win.setTimeout(() => this.zone.run(() => this.openTouchMenu(press)), 500);
+	};
+	overlayRef = null;
+	transition;
+	point;
+	disconnectTheme;
+	disconnectLighting;
+	subscriptions = new Subscription();
+	revision = 0;
+	touchPress;
+	touchGuard;
+	touchGuardTimer;
+	lastPointerType = "";
+	constructor() {
+		const source = this.elementRef.nativeElement;
+		if (source.ownerDocument.defaultView) this.zone.runOutsideAngular(() => source.addEventListener("pointerdown", this.onPointerDown, { passive: true }));
+		inject(DestroyRef).onDestroy(() => {
+			++this.revision;
+			source.removeEventListener("pointerdown", this.onPointerDown);
+			this.cancelTouchPress();
+			this.clearTouchGuard();
+			this.dispose();
+		});
+	}
+	open(event) {
+		if (event.type === "contextmenu" && this.lastPointerType === "touch") {
+			const press = this.touchPress;
+			if (!press) return;
+			if (!this.bxContextMenuLongPress() || this.hasNativeTouchAction(event) || this.hasTextSelection()) {
+				this.cancelTouchPress();
+				return;
+			}
 			event.preventDefault();
-			event.stopPropagation();
+			this.openTouchMenu(press);
 			return;
 		}
-		this.action.emit(event);
+		event.preventDefault();
+		this.cancelTouchPress();
+		this.clearTouchGuard();
+		this.openAt(event.clientX, event.clientY);
 	}
-	static ɵfac = i0.ɵɵngDeclareFactory({
-		minVersion: "12.0.0",
-		version: "22.2.3",
-		ngImport: i0,
-		type: MenuItem,
-		deps: [],
-		target: i0.ɵɵFactoryTarget.Component
-	});
-	static ɵcmp = i0.ɵɵngDeclareComponent({
-		minVersion: "17.0.0",
-		version: "22.2.3",
-		type: MenuItem,
-		isStandalone: true,
-		selector: "bx-menu-item",
-		inputs: {
-			icon: {
-				classPropertyName: "icon",
-				publicName: "icon",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			},
-			endIcon: {
-				classPropertyName: "endIcon",
-				publicName: "endIcon",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			},
-			label: {
-				classPropertyName: "label",
-				publicName: "label",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			},
-			wrapLabel: {
-				classPropertyName: "wrapLabel",
-				publicName: "wrapLabel",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			},
-			disabled: {
-				classPropertyName: "disabled",
-				publicName: "disabled",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			},
-			danger: {
-				classPropertyName: "danger",
-				publicName: "danger",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			},
-			shortcut: {
-				classPropertyName: "shortcut",
-				publicName: "shortcut",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			}
-		},
-		outputs: { action: "action" },
-		ngImport: i0,
-		template: "<button bxSurface [bxSurfaceEmission]=\"danger() ? 'var(--bx-text-danger)' : 'var(--bx-primary)'\" type=\"button\" role=\"menuitem\" [disabled]=\"disabled()\" class=\"bx-menu-item-btn\" [class.is-disabled]=\"disabled()\" [class.is-danger]=\"danger()\"\n    [class.bx-menu-item-animated]=\"isAnimated()\" (click)=\"onClick($event)\">\n\n    @if (icon()) {\n    <bx-icon class=\"bx-icon-pos-start\" [name]=\"icon()!\" size=\"20\" />\n    }\n\n    <span class=\"bx-menu-item-content\" [class.bx-menu-item-content-wrapped]=\"wrapLabel()\">\n        @if (resolvedLabel()) {\n        {{ resolvedLabel() }}\n        } @else {\n        <ng-content></ng-content>\n        }\n    </span>\n\n    @if (resolvedShortcut()) {\n    <span class=\"bx-menu-item-shortcut\">\n        @for (key of resolvedShortcut(); track $index) {\n        <kbd>{{ key }}</kbd>\n        }\n    </span>\n    }\n\n    @if (endIcon()) {\n    <bx-icon class=\"bx-icon-pos-end\" [name]=\"endIcon()!\" size=\"20\" />\n    }\n</button>\n",
-		styles: [":host{display:block;width:100%}.bx-menu-item-btn{width:100%;display:flex;align-items:center;background:transparent!important;border:none;padding:.5rem .75rem;cursor:pointer;font-family:inherit;font-size:.875rem;text-align:left;border-radius:max(0px,var(--bx-glass-radius, var(--bx-rounded-lg, .75rem)) - .25rem);color:var(--bx-text-primary);--bx-glass-decoration-opacity: 0;--bx-glass-rim-visibility: 0;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}.bx-menu-item-btn:focus-visible{outline:2px solid var(--bx-border-brand);outline-offset:-2px}.bx-menu-item-btn.bx-menu-item-animated{transition:background-color .1s ease-in-out,color .1s ease-in-out}.bx-menu-item-btn.bx-menu-item-animated .bx-menu-item-shortcut{transition:color .1s ease-in-out}.bx-menu-item-btn:hover:not(.is-disabled){background:var(--bx-bg-element-hover)!important}.bx-menu-item-btn:hover:not(.is-disabled) .bx-menu-item-shortcut{color:inherit;opacity:1}.bx-menu-item-btn:active:not(.is-disabled){background:var(--bx-bg-element-active)!important}.bx-menu-item-btn:active:not(.is-disabled) .bx-menu-item-shortcut{color:inherit;opacity:1}.bx-menu-item-btn.is-danger{color:var(--bx-text-danger)}.bx-menu-item-btn.is-danger .bx-menu-item-shortcut{color:var(--bx-text-danger);opacity:.7}.bx-menu-item-btn.is-danger:hover:not(.is-disabled){background:var(--bx-bg-danger-hover)!important}.bx-menu-item-btn.is-danger:active:not(.is-disabled){background:var(--bx-bg-danger-active)!important}.bx-menu-item-btn.is-disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.bx-menu-item-content{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4;text-align:left}.bx-menu-item-content-wrapped{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}.bx-menu-item-shortcut{display:flex;align-items:center;gap:.15rem;margin-left:1.5rem;color:var(--bx-text-secondary);font-size:.875rem}.bx-menu-item-shortcut kbd{font-family:inherit;background:transparent;border:none;box-shadow:none;padding:0;margin:0;color:inherit}\n"],
-		dependencies: [{
-			kind: "component",
-			type: Icon,
-			selector: "bx-icon",
-			inputs: [
-				"name",
-				"size",
-				"color",
-				"bgColor",
-				"strokeWidth",
-				"decorative",
-				"ariaLabel"
-			]
-		}, {
-			kind: "directive",
-			type: BxSurfaceDirective,
-			selector: "[bxSurface]",
-			inputs: [
-				"bxSurfaceInteractive",
-				"bxSurfaceGlassiness",
-				"bxSurfaceEmission",
-				"bxSurfaceFocusEmission",
-				"bxReducedTransparency"
-			],
-			exportAs: ["bxSurface"]
-		}],
-		changeDetection: i0.ChangeDetectionStrategy.OnPush
-	});
-};
-i0.ɵɵngDeclareClassMetadata({
-	minVersion: "12.0.0",
-	version: "22.2.3",
-	ngImport: i0,
-	type: MenuItem,
-	decorators: [{
-		type: Component,
-		args: [{
-			selector: "bx-menu-item",
-			imports: [Icon, BxSurfaceDirective],
-			changeDetection: ChangeDetectionStrategy.OnPush,
-			template: "<button bxSurface [bxSurfaceEmission]=\"danger() ? 'var(--bx-text-danger)' : 'var(--bx-primary)'\" type=\"button\" role=\"menuitem\" [disabled]=\"disabled()\" class=\"bx-menu-item-btn\" [class.is-disabled]=\"disabled()\" [class.is-danger]=\"danger()\"\n    [class.bx-menu-item-animated]=\"isAnimated()\" (click)=\"onClick($event)\">\n\n    @if (icon()) {\n    <bx-icon class=\"bx-icon-pos-start\" [name]=\"icon()!\" size=\"20\" />\n    }\n\n    <span class=\"bx-menu-item-content\" [class.bx-menu-item-content-wrapped]=\"wrapLabel()\">\n        @if (resolvedLabel()) {\n        {{ resolvedLabel() }}\n        } @else {\n        <ng-content></ng-content>\n        }\n    </span>\n\n    @if (resolvedShortcut()) {\n    <span class=\"bx-menu-item-shortcut\">\n        @for (key of resolvedShortcut(); track $index) {\n        <kbd>{{ key }}</kbd>\n        }\n    </span>\n    }\n\n    @if (endIcon()) {\n    <bx-icon class=\"bx-icon-pos-end\" [name]=\"endIcon()!\" size=\"20\" />\n    }\n</button>\n",
-			styles: [":host{display:block;width:100%}.bx-menu-item-btn{width:100%;display:flex;align-items:center;background:transparent!important;border:none;padding:.5rem .75rem;cursor:pointer;font-family:inherit;font-size:.875rem;text-align:left;border-radius:max(0px,var(--bx-glass-radius, var(--bx-rounded-lg, .75rem)) - .25rem);color:var(--bx-text-primary);--bx-glass-decoration-opacity: 0;--bx-glass-rim-visibility: 0;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}.bx-menu-item-btn:focus-visible{outline:2px solid var(--bx-border-brand);outline-offset:-2px}.bx-menu-item-btn.bx-menu-item-animated{transition:background-color .1s ease-in-out,color .1s ease-in-out}.bx-menu-item-btn.bx-menu-item-animated .bx-menu-item-shortcut{transition:color .1s ease-in-out}.bx-menu-item-btn:hover:not(.is-disabled){background:var(--bx-bg-element-hover)!important}.bx-menu-item-btn:hover:not(.is-disabled) .bx-menu-item-shortcut{color:inherit;opacity:1}.bx-menu-item-btn:active:not(.is-disabled){background:var(--bx-bg-element-active)!important}.bx-menu-item-btn:active:not(.is-disabled) .bx-menu-item-shortcut{color:inherit;opacity:1}.bx-menu-item-btn.is-danger{color:var(--bx-text-danger)}.bx-menu-item-btn.is-danger .bx-menu-item-shortcut{color:var(--bx-text-danger);opacity:.7}.bx-menu-item-btn.is-danger:hover:not(.is-disabled){background:var(--bx-bg-danger-hover)!important}.bx-menu-item-btn.is-danger:active:not(.is-disabled){background:var(--bx-bg-danger-active)!important}.bx-menu-item-btn.is-disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.bx-menu-item-content{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4;text-align:left}.bx-menu-item-content-wrapped{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}.bx-menu-item-shortcut{display:flex;align-items:center;gap:.15rem;margin-left:1.5rem;color:var(--bx-text-secondary);font-size:.875rem}.bx-menu-item-shortcut kbd{font-family:inherit;background:transparent;border:none;box-shadow:none;padding:0;margin:0;color:inherit}\n"]
-		}]
-	}],
-	propDecorators: {
-		icon: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "icon",
-				required: false
-			}]
-		}],
-		endIcon: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "endIcon",
-				required: false
-			}]
-		}],
-		label: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "label",
-				required: false
-			}]
-		}],
-		wrapLabel: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "wrapLabel",
-				required: false
-			}]
-		}],
-		disabled: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "disabled",
-				required: false
-			}]
+	close(restoreFocus = false) {
+		if (!this.overlayRef) return;
+		const revision = ++this.revision;
+		if (restoreFocus || this.overlayRef.overlayElement.contains(this.elementRef.nativeElement.ownerDocument.activeElement)) this.elementRef.nativeElement.focus({ preventScroll: true });
+		this.overlayRef.overlayElement.inert = true;
+		const transition = this.transition;
+		if (transition && !this.a11y.isReducedMotion()) this.zone.runOutsideAngular(() => transition.exit()).then(() => {
+			if (revision === this.revision) this.dispose();
+		}).catch(() => {
+			if (revision === this.revision) this.dispose();
+		});
+		else this.dispose();
+	}
+	onKey(event) {
+		if (event.key !== "ContextMenu" && !(event.shiftKey && event.key === "F10")) return;
+		event.preventDefault();
+		this.lastPointerType = "";
+		this.cancelTouchPress();
+		this.clearTouchGuard();
+		const rect = this.elementRef.nativeElement.getBoundingClientRect();
+		this.openAt(rect.left + Math.min(24, rect.width / 2), rect.bottom);
+		this.items()[0]?.focus();
+	}
+	onDocumentClick(event) {
+		const target = event.target;
+		if (target && this.overlayRef?.overlayElement.contains(target) && target.closest("button, a, [role=\"menuitem\"]")) this.close();
+	}
+	hasNativeTouchAction(event) {
+		const source = this.elementRef.nativeElement;
+		for (const node of event.composedPath()) if (node instanceof HTMLElement) {
+			if (node.isContentEditable || node.matches("input, textarea, select, :disabled, [aria-disabled=\"true\"], [inert]")) return true;
+			if (node === source) break;
+		}
+		return !!source.closest(":disabled, [aria-disabled=\"true\"], [inert]");
+	}
+	hasTextSelection() {
+		const source = this.elementRef.nativeElement;
+		const selection = source.ownerDocument.getSelection();
+		return !!selection && !selection.isCollapsed && (source.contains(selection.anchorNode) || source.contains(selection.focusNode));
+	}
+	openTouchMenu(press) {
+		if (this.touchPress !== press || press.opened) return;
+		const source = this.elementRef.nativeElement;
+		if (!this.bxContextMenuLongPress() || !source.isConnected || source.isContentEditable || source.closest(":disabled, [aria-disabled=\"true\"], [inert]") || this.hasTextSelection()) {
+			this.cancelTouchPress();
+			return;
+		}
+		press.opened = true;
+		this.elementRef.nativeElement.ownerDocument.defaultView?.clearTimeout(press.timer);
+		this.guardTouchRelease();
+		this.openAt(press.x, press.y + 12);
+	}
+	cancelTouchPress() {
+		const press = this.touchPress;
+		if (!press) return;
+		this.touchPress = void 0;
+		const win = this.elementRef.nativeElement.ownerDocument.defaultView;
+		win?.clearTimeout(press.timer);
+		press.events.abort();
+		if (press.opened && win) this.touchGuardTimer = win.setTimeout(() => this.clearTouchGuard(), 800);
+	}
+	guardTouchRelease() {
+		this.clearTouchGuard();
+		const doc = this.elementRef.nativeElement.ownerDocument;
+		const guard = new AbortController();
+		this.touchGuard = guard;
+		const options = {
+			capture: true,
+			signal: guard.signal
+		};
+		doc.addEventListener("click", (event) => {
+			if (event.detail === 0) return;
+			event.preventDefault();
+			event.stopImmediatePropagation();
+			this.clearTouchGuard();
+		}, options);
+		doc.addEventListener("contextmenu", (event) => {
+			event.preventDefault();
+			event.stopImmediatePropagation();
+		}, options);
+		doc.addEventListener("pointerdown", (event) => {
+			if (event.isPrimary) this.clearTouchGuard();
+		}, {
+			...options,
+			passive: true
+		});
+		doc.addEventListener("keydown", () => this.clearTouchGuard(), options);
+	}
+	clearTouchGuard() {
+		this.touchGuard?.abort();
+		this.touchGuard = void 0;
+		this.elementRef.nativeElement.ownerDocument.defaultView?.clearTimeout(this.touchGuardTimer);
+		this.touchGuardTimer = void 0;
+	}
+	openAt(x, y) {
+		this.dispose();
+		++this.revision;
+		const source = this.elementRef.nativeElement;
+		this.overlayRef = this.overlay.create({
+			positionStrategy: this.positionBuilder.getCoordinateStrategy(x, y),
+			scrollStrategy: this.overlay.scrollStrategies.noop(),
+			usePopover: !!this.overlayContext?.useTopLayer || !!source.closest("dialog, [role=\"dialog\"], [role=\"alertdialog\"], bx-modal, bx-modal-core, [popover]"),
+			hasBackdrop: true,
+			backdropClass: "cdk-overlay-transparent-backdrop"
+		});
+		this.subscriptions = new Subscription();
+		const win = source.ownerDocument.defaultView;
+		if (win) this.zone.runOutsideAngular(() => {
+			const closeOnScroll = (event) => {
+				const target = event.target;
+				if (this.overlayRef?.overlayElement.inert) return;
+				if (target === win || target instanceof Node && target.contains(source)) this.zone.run(() => this.close());
+			};
+			win.addEventListener("scroll", closeOnScroll, {
+				capture: true,
+				passive: true
+			});
+			this.subscriptions.add(() => win.removeEventListener("scroll", closeOnScroll, true));
+		});
+		this.subscriptions.add(this.overlayRef.backdropClick().subscribe(() => this.close()));
+		this.subscriptions.add(this.overlayRef.detachments().subscribe(() => this.dispose()));
+		this.subscriptions.add(this.overlayRef.keydownEvents().subscribe((event) => this.onMenuKey(event)));
+		const pane = this.overlayRef.overlayElement;
+		this.disconnectTheme = this.zone.runOutsideAngular(() => inheritOverlayTheme(source, pane));
+		this.disconnectLighting = inheritGlassLighting(pane, source);
+		this.overlayRef.attach(new TemplatePortal(this.bxContextMenu(), this.vcr)).detectChanges();
+		this.overlayRef.updatePosition();
+		if (!this.a11y.isReducedMotion()) {
+			const point = source.ownerDocument.createElement("span");
+			point.setAttribute("aria-hidden", "true");
+			Object.assign(point.style, {
+				position: "fixed",
+				left: `${x}px`,
+				top: `${y}px`,
+				width: "1px",
+				height: "1px",
+				pointerEvents: "none"
+			});
+			source.ownerDocument.body.append(point);
+			this.point = point;
+			const transition = this.zone.runOutsideAngular(() => createGlassTransition(point, pane));
+			this.transition = transition;
+			this.zone.runOutsideAngular(() => transition.enter()).catch(() => {
+				this.transition?.destroy();
+				this.transition = void 0;
+			});
+		}
+	}
+	items() {
+		return Array.from(this.overlayRef?.overlayElement.querySelectorAll("button:not(:disabled), a[href], [role=\"menuitem\"]") ?? []).filter((item) => !item.matches("[disabled], [aria-disabled=\"true\"]") && !item.closest("[hidden], [inert]"));
+	}
+	onMenuKey(event) {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			this.close(true);
+			return;
+		}
+		if (event.target?.closest("input,textarea,[contenteditable=\"true\"]")) return;
+		if (![
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) return;
+		const items = this.items();
+		if (!items.length) return;
+		event.preventDefault();
+		const current = items.indexOf(this.elementRef.nativeElement.ownerDocument.activeElement);
+		items[event.key === "Home" ? 0 : event.key === "End" ? items.length - 1 : event.key === "ArrowDown" ? (current + 1) % items.length : current < 0 ? items.length - 1 : (current - 1 + items.length) % items.length].focus();
+	}
+	dispose() {
+		this.subscriptions.unsubscribe();
+		this.disconnectTheme?.();
+		this.disconnectTheme = void 0;
+		this.transition?.destroy();
+		this.transition = void 0;
+		this.point?.remove();
+		this.point = void 0;
+		const overlay = this.overlayRef;
+		this.overlayRef = null;
+		overlay?.dispose();
+		this.disconnectLighting?.();
+		this.disconnectLighting = void 0;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: ContextMenuDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.3",
+		type: ContextMenuDirective,
+		isStandalone: true,
+		selector: "[bxContextMenu]",
+		inputs: {
+			bxContextMenu: {
+				classPropertyName: "bxContextMenu",
+				publicName: "bxContextMenu",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			bxContextMenuLongPress: {
+				classPropertyName: "bxContextMenuLongPress",
+				publicName: "bxContextMenuLongPress",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { listeners: {
+			"contextmenu": "open($event)",
+			"keydown": "onKey($event)",
+			"document:click": "onDocumentClick($event)"
+		} },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: ContextMenuDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[bxContextMenu]" }]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		bxContextMenu: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "bxContextMenu",
+				required: true
+			}]
+		}],
+		bxContextMenuLongPress: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "bxContextMenuLongPress",
+				required: false
+			}]
+		}],
+		open: [{
+			type: HostListener,
+			args: ["contextmenu", ["$event"]]
+		}],
+		onKey: [{
+			type: HostListener,
+			args: ["keydown", ["$event"]]
+		}],
+		onDocumentClick: [{
+			type: HostListener,
+			args: ["document:click", ["$event"]]
+		}]
+	}
+});
+var TooltipDirective = class TooltipDirective {
+	elementRef = inject(ElementRef);
+	overlay = inject(Overlay);
+	positionBuilder = inject(BxOverlayPositionService);
+	a11y = inject(BxA11yService);
+	zone = inject(NgZone);
+	focusMonitor = inject(FocusMonitor);
+	describer = inject(AriaDescriber);
+	i18n = inject(BX_I18N, { optional: true });
+	contextMenu = inject(ContextMenuDirective, { optional: true });
+	id = `bx-tooltip-${uuidv4()}`;
+	bxTooltip = input.required(...ngDevMode ? [{ debugName: "bxTooltip" }] : /* istanbul ignore next */ []);
+	placement = input("bottom", ...ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []);
+	bxTooltipTouch = input("none", ...ngDevMode ? [{ debugName: "bxTooltipTouch" }] : /* istanbul ignore next */ []);
+	bxTooltipHover = input(true, ...ngDevMode ? [{ debugName: "bxTooltipHover" }] : /* istanbul ignore next */ []);
+	overlayRef = null;
+	tooltipComponent;
+	transition;
+	disconnectTheme;
+	disconnectLighting;
+	positionSubscription;
+	keyboardSubscription;
+	revision = 0;
+	hovered = false;
+	focused = false;
+	lastPointerType = "";
+	touchEvents;
+	holdTimer;
+	touchHideTimer;
+	touchVisible = false;
+	closeTouchTap = false;
+	constructor() {
+		const source = this.elementRef.nativeElement;
+		const focus = source.ownerDocument.defaultView ? this.focusMonitor.monitor(source, true).subscribe((origin) => this.zone.run(() => {
+			this.focused = origin === "keyboard";
+			if (this.focused) {
+				this.clearTouchInteraction();
+				this.show();
+			} else if (!this.hovered && !this.touchEvents) this.hide();
+		})) : void 0;
+		effect((onCleanup) => {
+			this.i18n?.version?.();
+			const text = this.bxTooltip();
+			const description = isTextWithKey(text) ? this.i18n?.translate(text.key) ?? text.key : text;
+			if (!description) {
+				if (this.overlayRef) this.hide();
+				return;
+			}
+			this.tooltipComponent?.setInput("text", text);
+			if (this.hovered || this.focused) this.show();
+			this.describer.describe(source, description, "tooltip");
+			onCleanup(() => this.describer.removeDescription(source, description, "tooltip"));
+		});
+		inject(DestroyRef).onDestroy(() => {
+			++this.revision;
+			focus?.unsubscribe();
+			if (focus) this.focusMonitor.stopMonitoring(source);
+			this.clearTouchInteraction();
+			this.dispose();
+		});
+	}
+	show() {
+		if (!this.bxTooltip()) return;
+		const revision = ++this.revision;
+		if (!this.overlayRef) {
+			const strategy = this.positionBuilder.getElementStrategy(this.elementRef.nativeElement, this.placement()).withFlexibleDimensions(false);
+			this.overlayRef = this.overlay.create({
+				positionStrategy: strategy,
+				scrollStrategy: this.overlay.scrollStrategies.reposition(),
+				hasBackdrop: false,
+				panelClass: "bx-tooltip-pane"
+			});
+			const pane = this.overlayRef.overlayElement;
+			pane.id = this.id;
+			pane.setAttribute("role", "tooltip");
+			pane.setAttribute("aria-hidden", "true");
+			this.disconnectTheme = this.zone.runOutsideAngular(() => inheritOverlayTheme(this.elementRef.nativeElement, pane));
+			this.disconnectLighting = inheritGlassLighting(pane, this.elementRef.nativeElement);
+			const component = this.overlayRef.attach(new ComponentPortal(Tooltip));
+			this.tooltipComponent = component;
+			pane.style.pointerEvents = "none";
+			this.keyboardSubscription = this.overlayRef.keydownEvents().subscribe((event) => this.onEscape(event));
+			component.setInput("text", this.bxTooltip());
+			component.changeDetectorRef.detectChanges();
+			const positionArrow = () => {
+				const trigger = this.elementRef.nativeElement.getBoundingClientRect();
+				const bounds = pane.getBoundingClientRect();
+				pane.style.setProperty("--bx-tooltip-arrow-x", `${trigger.left + trigger.width / 2 - bounds.left}px`);
+				pane.style.setProperty("--bx-tooltip-arrow-y", `${trigger.top + trigger.height / 2 - bounds.top}px`);
+				this.transition?.refresh();
+			};
+			this.positionSubscription = strategy.positionChanges.subscribe(positionArrow);
+			this.overlayRef.updatePosition();
+			positionArrow();
+			if (!this.a11y.isReducedMotion()) this.transition = this.zone.runOutsideAngular(() => createGlassTransition(this.elementRef.nativeElement, pane));
+		}
+		Promise.resolve(this.zone.runOutsideAngular(() => this.transition?.enter())).catch(() => {
+			if (revision === this.revision) {
+				this.transition?.destroy();
+				this.transition = void 0;
+			}
+		});
+	}
+	hide() {
+		this.clearTouchInteraction();
+		const revision = ++this.revision;
+		if (!this.overlayRef) return;
+		const transition = this.transition;
+		if (transition && !this.a11y.isReducedMotion()) this.zone.runOutsideAngular(() => transition.exit()).then(() => {
+			if (revision === this.revision) this.dispose();
+		}).catch(() => {
+			if (revision === this.revision) this.dispose();
+		});
+		else this.dispose();
+	}
+	onEnter(event) {
+		if (event.pointerType !== "mouse" || !this.bxTooltipHover()) return;
+		this.clearTouchInteraction();
+		this.hovered = true;
+		this.show();
+	}
+	onLeave(event) {
+		if (event.pointerType !== "mouse") return;
+		this.hovered = false;
+		if (!this.focused) this.hide();
+	}
+	onPointerDown(event) {
+		this.lastPointerType = event.pointerType;
+		if (event.pointerType !== "touch") return;
+		this.closeTouchTap = this.touchVisible && this.bxTooltipTouch() === "tap";
+		this.hovered = false;
+		this.focused = false;
+		this.hide();
+		if (this.bxTooltipTouch() !== "longpress" || !event.isPrimary || event.button !== 0 || !this.canUseTouch(event)) return;
+		this.zone.runOutsideAngular(() => this.startTouchInteraction(event));
+	}
+	onClick(event) {
+		if (event.detail === 0 || this.lastPointerType !== "touch" || this.bxTooltipTouch() !== "tap" || !this.canUseTouch(event)) return;
+		if (this.closeTouchTap) {
+			this.closeTouchTap = false;
+			return;
+		}
+		this.zone.runOutsideAngular(() => this.startTouchInteraction());
+	}
+	onEscape(event) {
+		if (event.key === "Escape" && this.overlayRef) {
+			event.stopPropagation();
+			this.hovered = false;
+			this.focused = false;
+			this.hide();
+		}
+	}
+	canUseTouch(event) {
+		if (this.contextMenu && this.bxTooltipTouch() === "longpress") return false;
+		if (this.elementRef.nativeElement.closest(":disabled, [aria-disabled=\"true\"], [inert]")) return false;
+		return !event.composedPath().some((node) => node instanceof HTMLElement && (node.isContentEditable || node.matches("input, textarea, select")));
+	}
+	hasTextSelection() {
+		const source = this.elementRef.nativeElement;
+		const selection = source.ownerDocument.getSelection();
+		return !!selection && !selection.isCollapsed && (source.contains(selection.anchorNode) || source.contains(selection.focusNode));
+	}
+	startTouchInteraction(press) {
+		const source = this.elementRef.nativeElement;
+		const doc = source.ownerDocument;
+		const win = doc.defaultView;
+		if (!win || this.hasTextSelection()) return;
+		this.clearTouchInteraction();
+		const events = new AbortController();
+		this.touchEvents = events;
+		const options = {
+			capture: true,
+			passive: true,
+			signal: events.signal
+		};
+		const dismiss = () => this.zone.run(() => this.hide());
+		let suppressReleaseClick = false;
+		doc.addEventListener("pointerdown", (event) => {
+			if (!press && event.target instanceof Node && source.contains(event.target)) return;
+			dismiss();
+		}, options);
+		doc.addEventListener("scroll", dismiss, options);
+		doc.addEventListener("visibilitychange", () => {
+			if (doc.hidden) dismiss();
+		}, options);
+		win.addEventListener("blur", dismiss, { signal: events.signal });
+		if (!press) {
+			this.touchVisible = true;
+			this.zone.run(() => this.show());
+			return;
+		}
+		doc.addEventListener("pointermove", (event) => {
+			if (event.pointerId === press.pointerId && !this.touchVisible && Math.hypot(event.clientX - press.clientX, event.clientY - press.clientY) > 10) dismiss();
+		}, options);
+		doc.addEventListener("pointerup", (event) => {
+			if (event.pointerId !== press.pointerId) return;
+			if (!this.touchVisible) dismiss();
+			else this.touchHideTimer = win.setTimeout(dismiss, 1500);
+		}, options);
+		doc.addEventListener("pointercancel", (event) => {
+			if (event.pointerId === press.pointerId) dismiss();
+		}, options);
+		doc.addEventListener("click", (event) => {
+			if (!suppressReleaseClick || event.detail === 0) return;
+			event.preventDefault();
+			event.stopImmediatePropagation();
+			suppressReleaseClick = false;
+		}, {
+			...options,
+			passive: false
+		});
+		doc.addEventListener("contextmenu", (event) => {
+			if (event.target instanceof Node && source.contains(event.target) && !this.hasTextSelection()) event.preventDefault();
+		}, {
+			...options,
+			passive: false
+		});
+		this.holdTimer = win.setTimeout(() => {
+			if (this.bxTooltipTouch() !== "longpress" || !source.isConnected || source.closest(":disabled, [aria-disabled=\"true\"], [inert]") || this.hasTextSelection()) {
+				dismiss();
+				return;
+			}
+			this.touchVisible = true;
+			suppressReleaseClick = true;
+			this.zone.run(() => this.show());
+		}, 500);
+	}
+	clearTouchInteraction() {
+		this.touchEvents?.abort();
+		this.touchEvents = void 0;
+		const win = this.elementRef.nativeElement.ownerDocument.defaultView;
+		win?.clearTimeout(this.holdTimer);
+		win?.clearTimeout(this.touchHideTimer);
+		this.holdTimer = void 0;
+		this.touchHideTimer = void 0;
+		this.touchVisible = false;
+	}
+	dispose() {
+		this.keyboardSubscription?.unsubscribe();
+		this.keyboardSubscription = void 0;
+		this.positionSubscription?.unsubscribe();
+		this.positionSubscription = void 0;
+		this.disconnectTheme?.();
+		this.disconnectTheme = void 0;
+		this.transition?.destroy();
+		this.transition = void 0;
+		this.overlayRef?.dispose();
+		this.overlayRef = null;
+		this.tooltipComponent = void 0;
+		this.disconnectLighting?.();
+		this.disconnectLighting = void 0;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: TooltipDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.3",
+		type: TooltipDirective,
+		isStandalone: true,
+		selector: "[bxTooltip]",
+		inputs: {
+			bxTooltip: {
+				classPropertyName: "bxTooltip",
+				publicName: "bxTooltip",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			placement: {
+				classPropertyName: "placement",
+				publicName: "placement",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			bxTooltipTouch: {
+				classPropertyName: "bxTooltipTouch",
+				publicName: "bxTooltipTouch",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			bxTooltipHover: {
+				classPropertyName: "bxTooltipHover",
+				publicName: "bxTooltipHover",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { listeners: {
+			"pointerenter": "onEnter($event)",
+			"pointerleave": "onLeave($event)",
+			"pointerdown": "onPointerDown($event)",
+			"click": "onClick($event)",
+			"document:keydown": "onEscape($event)"
+		} },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: TooltipDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[bxTooltip]" }]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		bxTooltip: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "bxTooltip",
+				required: true
+			}]
+		}],
+		placement: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placement",
+				required: false
+			}]
+		}],
+		bxTooltipTouch: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "bxTooltipTouch",
+				required: false
+			}]
+		}],
+		bxTooltipHover: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "bxTooltipHover",
+				required: false
+			}]
+		}],
+		onEnter: [{
+			type: HostListener,
+			args: ["pointerenter", ["$event"]]
+		}],
+		onLeave: [{
+			type: HostListener,
+			args: ["pointerleave", ["$event"]]
+		}],
+		onPointerDown: [{
+			type: HostListener,
+			args: ["pointerdown", ["$event"]]
+		}],
+		onClick: [{
+			type: HostListener,
+			args: ["click", ["$event"]]
+		}],
+		onEscape: [{
+			type: HostListener,
+			args: ["document:keydown", ["$event"]]
+		}]
+	}
+});
+var TruncateDirective = class TruncateDirective {
+	element = inject(ElementRef).nativeElement;
+	destroyRef = inject(DestroyRef);
+	zone = inject(NgZone);
+	clipped = signal(false, ...ngDevMode ? [{ debugName: "clipped" }] : /* istanbul ignore next */ []);
+	content = signal("", ...ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []);
+	enabled = input(true, {
+		...ngDevMode ? { debugName: "enabled" } : /* istanbul ignore next */ {},
+		alias: "bxTruncate",
+		transform: booleanAttribute
+	});
+	truncated = this.clipped.asReadonly();
+	text = this.content.asReadonly();
+	truncatedChange = output();
+	rendered = false;
+	frame;
+	resize;
+	mutations;
+	listeners;
+	textContext;
+	constructor() {
+		afterNextRender(() => this.observeLayout());
+		afterEveryRender(() => this.scheduleMeasure());
+		this.destroyRef.onDestroy(() => {
+			if (this.frame !== void 0) this.element.ownerDocument.defaultView?.cancelAnimationFrame(this.frame);
+			this.resize?.disconnect();
+			this.mutations?.disconnect();
+			this.listeners?.abort();
+		});
+	}
+	refresh() {
+		if (!this.rendered || this.destroyRef.destroyed) return;
+		const text = this.element.tagName === "INPUT" ? this.element.value || this.element.placeholder : this.element.textContent ?? "";
+		const clipped = this.enabled() && this.element.getClientRects().length > 0 && this.measureOverflow(text);
+		if (clipped === this.clipped() && text === this.content()) return;
+		this.zone.run(() => {
+			this.content.set(text);
+			if (clipped !== this.clipped()) {
+				this.clipped.set(clipped);
+				this.truncatedChange.emit(clipped);
+			}
+		});
+	}
+	measureOverflow(text) {
+		if (this.element.tagName !== "INPUT") return this.element.scrollWidth > this.element.clientWidth || this.element.scrollHeight > this.element.clientHeight;
+		if (!text) return false;
+		const style = this.element.ownerDocument.defaultView?.getComputedStyle(this.element);
+		this.textContext ??= this.element.ownerDocument.createElement("canvas").getContext("2d");
+		if (!style || !this.textContext) return this.element.scrollWidth > this.element.clientWidth;
+		this.textContext.font = style.font || `${style.fontWeight} ${style.fontSize} ${style.fontFamily}`;
+		const letterSpacing = parseFloat(style.letterSpacing) || 0;
+		const wordSpacing = parseFloat(style.wordSpacing) || 0;
+		return this.textContext.measureText(text).width + letterSpacing * Math.max(0, [...text].length - 1) + wordSpacing * (text.match(/\s/g)?.length ?? 0) > this.element.clientWidth - (parseFloat(style.paddingInlineStart) || 0) - (parseFloat(style.paddingInlineEnd) || 0) + .5;
+	}
+	observeLayout() {
+		const view = this.element.ownerDocument.defaultView;
+		if (!view) return;
+		this.rendered = true;
+		this.zone.runOutsideAngular(() => {
+			if (typeof ResizeObserver !== "undefined") {
+				this.resize = new ResizeObserver(() => this.scheduleMeasure());
+				this.resize.observe(this.element);
+			}
+			if (typeof MutationObserver !== "undefined") {
+				this.mutations = new MutationObserver(() => this.scheduleMeasure());
+				this.mutations.observe(this.element, {
+					childList: true,
+					characterData: true,
+					subtree: true
+				});
+			}
+			const listeners = new AbortController();
+			this.listeners = listeners;
+			const options = {
+				passive: true,
+				signal: listeners.signal
+			};
+			view.addEventListener("resize", () => this.scheduleMeasure(), options);
+			view.visualViewport?.addEventListener("resize", () => this.scheduleMeasure(), options);
+			const fonts = this.element.ownerDocument.fonts;
+			fonts?.addEventListener("loadingdone", () => this.scheduleMeasure(), options);
+			fonts?.ready.then(() => this.scheduleMeasure());
+			this.scheduleMeasure();
+		});
+	}
+	scheduleMeasure() {
+		const view = this.element.ownerDocument.defaultView;
+		if (!this.rendered || this.destroyRef.destroyed || !view || this.frame !== void 0) return;
+		this.zone.runOutsideAngular(() => {
+			this.frame = view.requestAnimationFrame(() => {
+				this.frame = void 0;
+				this.refresh();
+			});
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: TruncateDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.3",
+		type: TruncateDirective,
+		isStandalone: true,
+		selector: "[bxTruncate]",
+		inputs: { enabled: {
+			classPropertyName: "enabled",
+			publicName: "bxTruncate",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		outputs: { truncatedChange: "truncatedChange" },
+		host: { properties: {
+			"style.display": "enabled() ? \"block\" : null",
+			"class.bx-truncate": "enabled()"
+		} },
+		exportAs: ["bxTruncate"],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: TruncateDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[bxTruncate]",
+			exportAs: "bxTruncate",
+			host: {
+				"[style.display]": "enabled() ? \"block\" : null",
+				"[class.bx-truncate]": "enabled()"
+			}
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		enabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "bxTruncate",
+				required: false
+			}]
+		}],
+		truncatedChange: [{
+			type: i0.Output,
+			args: ["truncatedChange"]
+		}]
+	}
+});
+function truncatedText(text, truncated, enabled = true) {
+	return enabled && truncated ? text ?? "" : "";
+}
+var TruncatedTextPipe = class TruncatedTextPipe {
+	transform(text, truncated, enabled = true) {
+		return truncatedText(text, truncated, enabled);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: TruncatedTextPipe,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Pipe
+	});
+	static ɵpipe = i0.ɵɵngDeclarePipe({
+		minVersion: "14.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: TruncatedTextPipe,
+		isStandalone: true,
+		name: "bxTruncatedText"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: TruncatedTextPipe,
+	decorators: [{
+		type: Pipe,
+		args: [{ name: "bxTruncatedText" }]
+	}]
+});
+var MenuItem = class MenuItem {
+	i18n = inject(BX_I18N, { optional: true });
+	a11y = inject(BxA11yService);
+	bxShortcutService = inject(BxShortcutService);
+	resolvedLabel = computed(() => {
+		this.i18n?.version?.();
+		const label = this.label();
+		if (!label) return void 0;
+		if (isTextWithKey(label)) return this.i18n?.translate(label.key) ?? label.key;
+		return label;
+	}, ...ngDevMode ? [{ debugName: "resolvedLabel" }] : /* istanbul ignore next */ []);
+	resolvedShortcut = computed(() => {
+		return this.bxShortcutService.resolve(this.shortcut());
+	}, ...ngDevMode ? [{ debugName: "resolvedShortcut" }] : /* istanbul ignore next */ []);
+	isAnimated = computed(() => !this.a11y.isReducedMotion(), ...ngDevMode ? [{ debugName: "isAnimated" }] : /* istanbul ignore next */ []);
+	icon = input(void 0, ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
+	endIcon = input(void 0, ...ngDevMode ? [{ debugName: "endIcon" }] : /* istanbul ignore next */ []);
+	label = input(void 0, ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	wrapLabel = input(false, ...ngDevMode ? [{ debugName: "wrapLabel" }] : /* istanbul ignore next */ []);
+	tooltipOnTruncate = input(true, {
+		...ngDevMode ? { debugName: "tooltipOnTruncate" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+	danger = input(false, ...ngDevMode ? [{ debugName: "danger" }] : /* istanbul ignore next */ []);
+	shortcut = input(void 0, ...ngDevMode ? [{ debugName: "shortcut" }] : /* istanbul ignore next */ []);
+	action = output();
+	onClick(event) {
+		if (this.disabled()) {
+			event.preventDefault();
+			event.stopPropagation();
+			return;
+		}
+		this.action.emit(event);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: MenuItem,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: MenuItem,
+		isStandalone: true,
+		selector: "bx-menu-item",
+		inputs: {
+			icon: {
+				classPropertyName: "icon",
+				publicName: "icon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			endIcon: {
+				classPropertyName: "endIcon",
+				publicName: "endIcon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			wrapLabel: {
+				classPropertyName: "wrapLabel",
+				publicName: "wrapLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			tooltipOnTruncate: {
+				classPropertyName: "tooltipOnTruncate",
+				publicName: "tooltipOnTruncate",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			danger: {
+				classPropertyName: "danger",
+				publicName: "danger",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			shortcut: {
+				classPropertyName: "shortcut",
+				publicName: "shortcut",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { action: "action" },
+		ngImport: i0,
+		template: "<button bxSurface [bxSurfaceEmission]=\"danger() ? 'var(--bx-text-danger)' : 'var(--bx-primary)'\" type=\"button\" role=\"menuitem\" [disabled]=\"disabled()\" class=\"bx-menu-item-btn\" [class.is-disabled]=\"disabled()\" [class.is-danger]=\"danger()\"\n    [class.bx-menu-item-animated]=\"isAnimated()\" (click)=\"onClick($event)\"\n    [bxTooltip]=\"(resolvedLabel() ?? menuText.text().trim()) | bxTruncatedText: menuText.truncated(): tooltipOnTruncate()\" bxTooltipTouch=\"longpress\">\n\n    @if (icon()) {\n    <bx-icon class=\"bx-icon-pos-start\" [name]=\"icon()!\" size=\"20\" />\n    }\n\n    <span class=\"bx-menu-item-content\" [bxTruncate]=\"!wrapLabel()\" #menuText=\"bxTruncate\" [class.bx-menu-item-content-wrapped]=\"wrapLabel()\">\n        @if (resolvedLabel()) {\n        {{ resolvedLabel() }}\n        } @else {\n        <ng-content></ng-content>\n        }\n    </span>\n\n    @if (resolvedShortcut()) {\n    <span class=\"bx-menu-item-shortcut\">\n        @for (key of resolvedShortcut(); track $index) {\n        <kbd>{{ key }}</kbd>\n        }\n    </span>\n    }\n\n    @if (endIcon()) {\n    <bx-icon class=\"bx-icon-pos-end\" [name]=\"endIcon()!\" size=\"20\" />\n    }\n</button>\n",
+		styles: [":host{display:block;width:100%}.bx-menu-item-btn{width:100%;display:flex;align-items:center;background:transparent!important;border:none;padding:.5rem .75rem;cursor:pointer;font-family:inherit;font-size:.875rem;text-align:left;border-radius:max(0px,var(--bx-glass-radius, var(--bx-rounded-lg, .75rem)) - .25rem);color:var(--bx-text-primary);--bx-glass-decoration-opacity: 0;--bx-glass-rim-visibility: 0;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}.bx-menu-item-btn:focus-visible{outline:2px solid var(--bx-border-brand);outline-offset:-2px}.bx-menu-item-btn.bx-menu-item-animated{transition:background-color .1s ease-in-out,color .1s ease-in-out}.bx-menu-item-btn.bx-menu-item-animated .bx-menu-item-shortcut{transition:color .1s ease-in-out}.bx-menu-item-btn:hover:not(.is-disabled){background:var(--bx-bg-element-hover)!important}.bx-menu-item-btn:hover:not(.is-disabled) .bx-menu-item-shortcut{color:inherit;opacity:1}.bx-menu-item-btn:active:not(.is-disabled){background:var(--bx-bg-element-active)!important}.bx-menu-item-btn:active:not(.is-disabled) .bx-menu-item-shortcut{color:inherit;opacity:1}.bx-menu-item-btn.is-danger{color:var(--bx-text-danger)}.bx-menu-item-btn.is-danger .bx-menu-item-shortcut{color:var(--bx-text-danger);opacity:.7}.bx-menu-item-btn.is-danger:hover:not(.is-disabled){background:var(--bx-bg-danger-hover)!important}.bx-menu-item-btn.is-danger:active:not(.is-disabled){background:var(--bx-bg-danger-active)!important}.bx-menu-item-btn.is-disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.bx-menu-item-content{flex:1 1 auto;min-width:0;line-height:1.4;text-align:left}.bx-menu-item-content-wrapped{white-space:normal;overflow-wrap:anywhere}.bx-menu-item-shortcut{display:flex;align-items:center;gap:.15rem;margin-left:1.5rem;color:var(--bx-text-secondary);font-size:.875rem}.bx-menu-item-shortcut kbd{font-family:inherit;background:transparent;border:none;box-shadow:none;padding:0;margin:0;color:inherit}\n"],
+		dependencies: [
+			{
+				kind: "component",
+				type: Icon,
+				selector: "bx-icon",
+				inputs: [
+					"name",
+					"size",
+					"color",
+					"bgColor",
+					"strokeWidth",
+					"decorative",
+					"ariaLabel"
+				]
+			},
+			{
+				kind: "directive",
+				type: BxSurfaceDirective,
+				selector: "[bxSurface]",
+				inputs: [
+					"bxSurfaceInteractive",
+					"bxSurfaceGlassiness",
+					"bxSurfaceEmission",
+					"bxSurfaceFocusEmission",
+					"bxReducedTransparency"
+				],
+				exportAs: ["bxSurface"]
+			},
+			{
+				kind: "directive",
+				type: TooltipDirective,
+				selector: "[bxTooltip]",
+				inputs: [
+					"bxTooltip",
+					"placement",
+					"bxTooltipTouch",
+					"bxTooltipHover"
+				]
+			},
+			{
+				kind: "directive",
+				type: TruncateDirective,
+				selector: "[bxTruncate]",
+				inputs: ["bxTruncate"],
+				outputs: ["truncatedChange"],
+				exportAs: ["bxTruncate"]
+			},
+			{
+				kind: "pipe",
+				type: TruncatedTextPipe,
+				name: "bxTruncatedText"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: MenuItem,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "bx-menu-item",
+			imports: [
+				Icon,
+				BxSurfaceDirective,
+				TooltipDirective,
+				TruncateDirective,
+				TruncatedTextPipe
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<button bxSurface [bxSurfaceEmission]=\"danger() ? 'var(--bx-text-danger)' : 'var(--bx-primary)'\" type=\"button\" role=\"menuitem\" [disabled]=\"disabled()\" class=\"bx-menu-item-btn\" [class.is-disabled]=\"disabled()\" [class.is-danger]=\"danger()\"\n    [class.bx-menu-item-animated]=\"isAnimated()\" (click)=\"onClick($event)\"\n    [bxTooltip]=\"(resolvedLabel() ?? menuText.text().trim()) | bxTruncatedText: menuText.truncated(): tooltipOnTruncate()\" bxTooltipTouch=\"longpress\">\n\n    @if (icon()) {\n    <bx-icon class=\"bx-icon-pos-start\" [name]=\"icon()!\" size=\"20\" />\n    }\n\n    <span class=\"bx-menu-item-content\" [bxTruncate]=\"!wrapLabel()\" #menuText=\"bxTruncate\" [class.bx-menu-item-content-wrapped]=\"wrapLabel()\">\n        @if (resolvedLabel()) {\n        {{ resolvedLabel() }}\n        } @else {\n        <ng-content></ng-content>\n        }\n    </span>\n\n    @if (resolvedShortcut()) {\n    <span class=\"bx-menu-item-shortcut\">\n        @for (key of resolvedShortcut(); track $index) {\n        <kbd>{{ key }}</kbd>\n        }\n    </span>\n    }\n\n    @if (endIcon()) {\n    <bx-icon class=\"bx-icon-pos-end\" [name]=\"endIcon()!\" size=\"20\" />\n    }\n</button>\n",
+			styles: [":host{display:block;width:100%}.bx-menu-item-btn{width:100%;display:flex;align-items:center;background:transparent!important;border:none;padding:.5rem .75rem;cursor:pointer;font-family:inherit;font-size:.875rem;text-align:left;border-radius:max(0px,var(--bx-glass-radius, var(--bx-rounded-lg, .75rem)) - .25rem);color:var(--bx-text-primary);--bx-glass-decoration-opacity: 0;--bx-glass-rim-visibility: 0;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}.bx-menu-item-btn:focus-visible{outline:2px solid var(--bx-border-brand);outline-offset:-2px}.bx-menu-item-btn.bx-menu-item-animated{transition:background-color .1s ease-in-out,color .1s ease-in-out}.bx-menu-item-btn.bx-menu-item-animated .bx-menu-item-shortcut{transition:color .1s ease-in-out}.bx-menu-item-btn:hover:not(.is-disabled){background:var(--bx-bg-element-hover)!important}.bx-menu-item-btn:hover:not(.is-disabled) .bx-menu-item-shortcut{color:inherit;opacity:1}.bx-menu-item-btn:active:not(.is-disabled){background:var(--bx-bg-element-active)!important}.bx-menu-item-btn:active:not(.is-disabled) .bx-menu-item-shortcut{color:inherit;opacity:1}.bx-menu-item-btn.is-danger{color:var(--bx-text-danger)}.bx-menu-item-btn.is-danger .bx-menu-item-shortcut{color:var(--bx-text-danger);opacity:.7}.bx-menu-item-btn.is-danger:hover:not(.is-disabled){background:var(--bx-bg-danger-hover)!important}.bx-menu-item-btn.is-danger:active:not(.is-disabled){background:var(--bx-bg-danger-active)!important}.bx-menu-item-btn.is-disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.bx-menu-item-content{flex:1 1 auto;min-width:0;line-height:1.4;text-align:left}.bx-menu-item-content-wrapped{white-space:normal;overflow-wrap:anywhere}.bx-menu-item-shortcut{display:flex;align-items:center;gap:.15rem;margin-left:1.5rem;color:var(--bx-text-secondary);font-size:.875rem}.bx-menu-item-shortcut kbd{font-family:inherit;background:transparent;border:none;box-shadow:none;padding:0;margin:0;color:inherit}\n"]
+		}]
+	}],
+	propDecorators: {
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: false
+			}]
+		}],
+		endIcon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "endIcon",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		wrapLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "wrapLabel",
+				required: false
+			}]
+		}],
+		tooltipOnTruncate: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tooltipOnTruncate",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
 		}],
 		danger: [{
 			type: i0.Input,
@@ -550,1329 +1520,1438 @@ i0.ɵɵngDeclareClassMetadata({
 		value: [{
 			type: i0.Input,
 			args: [{
-				isSignal: true,
-				alias: "value",
-				required: false
-			}]
-		}],
-		disabled: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "disabled",
-				required: false
-			}]
-		}],
-		color: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "color",
-				required: false
-			}]
-		}],
-		textColor: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "textColor",
-				required: false
-			}]
-		}],
-		highlightColor: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "highlightColor",
-				required: false
-			}]
-		}],
-		contentColor: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "contentColor",
-				required: false
-			}]
-		}],
-		icon: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "icon",
-				required: false
-			}]
-		}],
-		endIcon: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "endIcon",
-				required: false
-			}]
-		}]
-	}
-});
-var Tabs = class Tabs {
-	i18n = inject(BX_I18N, { optional: true });
-	triggers = viewChildren("trigger", ...ngDevMode ? [{ debugName: "triggers" }] : /* istanbul ignore next */ []);
-	a11y = inject(BxA11yService);
-	hasRendered = signal(false, ...ngDevMode ? [{ debugName: "hasRendered" }] : /* istanbul ignore next */ []);
-	tabs = contentChildren(Tab, ...ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []);
-	activeTab = computed(() => {
-		const enabled = this.tabs().filter((tab) => !tab.disabled());
-		return enabled.find((tab) => tab.value() === this.selectedValue()) ?? enabled[0];
-	}, ...ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []);
-	resolvedLabel = computed(() => resolveTabText(this.ariaLabel(), this.i18n), ...ngDevMode ? [{ debugName: "resolvedLabel" }] : /* istanbul ignore next */ []);
-	variant = input(DEFAULT_TABS_VARIANT, ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
-	ariaLabel = input(DEFAULT_TABS_LABEL, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
-	selectedValue = model(null, ...ngDevMode ? [{ debugName: "selectedValue" }] : /* istanbul ignore next */ []);
-	constructor() {
-		afterNextRender(() => this.hasRendered.set(true));
-		afterRenderEffect(() => {
-			const value = this.activeTab()?.value() ?? null;
-			if (this.selectedValue() !== value) this.selectedValue.set(value);
-		});
-	}
-	select(value) {
-		if (this.tabs().find((item) => item.value() === value && !item.disabled())) this.selectedValue.set(value);
-	}
-	onTabKey(event, tab) {
-		if (event.altKey || event.ctrlKey || event.metaKey || !TAB_NAVIGATION_KEYS.has(event.key)) return;
-		const enabled = this.tabs().filter((item) => !item.disabled());
-		const current = enabled.indexOf(tab);
-		if (current < 0) return;
-		event.preventDefault();
-		event.stopPropagation();
-		const button = event.currentTarget;
-		const rtl = button.ownerDocument.defaultView?.getComputedStyle(button).direction === "rtl";
-		const direction = (event.key === "ArrowRight" ? 1 : -1) * (rtl ? -1 : 1);
-		const next = enabled[event.key === "Home" ? 0 : event.key === "End" ? enabled.length - 1 : (current + direction + enabled.length) % enabled.length];
-		this.select(next.value());
-		const trigger = this.triggers().find((item) => item.nativeElement.id === next.triggerId)?.nativeElement;
-		trigger?.focus({ preventScroll: true });
-		trigger?.scrollIntoView({
-			block: "nearest",
-			inline: "nearest"
-		});
-	}
-	static ɵfac = i0.ɵɵngDeclareFactory({
-		minVersion: "12.0.0",
-		version: "22.2.3",
-		ngImport: i0,
-		type: Tabs,
-		deps: [],
-		target: i0.ɵɵFactoryTarget.Component
-	});
-	static ɵcmp = i0.ɵɵngDeclareComponent({
-		minVersion: "17.0.0",
-		version: "22.2.3",
-		type: Tabs,
-		isStandalone: true,
-		selector: "bx-tabs",
-		inputs: {
-			variant: {
-				classPropertyName: "variant",
-				publicName: "variant",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			},
-			ariaLabel: {
-				classPropertyName: "ariaLabel",
-				publicName: "ariaLabel",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			},
-			selectedValue: {
-				classPropertyName: "selectedValue",
-				publicName: "selectedValue",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			}
-		},
-		outputs: { selectedValue: "selectedValueChange" },
-		host: { properties: {
-			"class.bx-tabs-underline": "variant() === \"underline\"",
-			"class.bx-tabs-animated": "hasRendered() && !a11y.isReducedMotion()"
-		} },
-		queries: [{
-			propertyName: "tabs",
-			predicate: Tab,
-			isSignal: true
-		}],
-		viewQueries: [{
-			propertyName: "triggers",
-			predicate: ["trigger"],
-			descendants: true,
-			isSignal: true
-		}],
-		ngImport: i0,
-		template: "<ng-content select=\"bx-tab\"></ng-content>\n\n<div bxSurface data-bx-surface=\"glass\" class=\"bx-tab-header\" role=\"tablist\" [attr.aria-label]=\"resolvedLabel()\" aria-orientation=\"horizontal\">\n<div class=\"bx-tab-list\">\n    @for (tab of tabs(); track tab) {\n    <button #trigger bxSurface data-bx-surface=\"glass\" class=\"bx-tab-trigger\" type=\"button\" role=\"tab\"\n        [bxSurfaceEmission]=\"tab.resolvedEmission()\"\n        [style.--bx-tab-highlight]=\"tab.resolvedHighlight()\" [style.--bx-tab-text]=\"tab.resolvedTextColor()\"\n        [style.--bx-tab-selected-text]=\"tab.resolvedSelectedText()\"\n        [id]=\"tab.triggerId\" [attr.aria-controls]=\"tab.panelId\" [attr.aria-selected]=\"tab === activeTab()\"\n        [attr.tabindex]=\"tab === activeTab() ? 0 : -1\" [disabled]=\"tab.disabled()\"\n        [class.is-selected]=\"tab === activeTab()\" (click)=\"select(tab.value())\" (keydown)=\"onTabKey($event, tab)\">\n        @if (tab.icon()) { <bx-icon [name]=\"tab.icon()!\" size=\"16\" /> }\n        <span>{{ tab.resolvedLabel() }}</span>\n        @if (tab.endIcon()) { <bx-icon [name]=\"tab.endIcon()!\" size=\"16\" /> }\n    </button>\n    }\n</div>\n</div>\n\n<div class=\"bx-tab-panels\">\n    @for (tab of tabs(); track tab) {\n    <div class=\"bx-tab-panel\" role=\"tabpanel\" tabindex=\"0\" [id]=\"tab.panelId\"\n        [style.color]=\"tab.resolvedContentColor()\"\n        [attr.aria-labelledby]=\"tab.triggerId\" [hidden]=\"tab !== activeTab()\">\n        @if (tab === activeTab()) {\n        <ng-container [ngTemplateOutlet]=\"tab.template()\"></ng-container>\n        }\n    </div>\n    }\n</div>\n",
-		styles: [":host{display:flex;flex-direction:column;min-width:0;min-height:0;box-sizing:border-box;width:100%;max-width:100%;gap:var(--bx-tabs-panel-gap, 1.5rem)}.bx-tab-header{--bx-glass-surface: var(--bx-bg-surface-alt);--bx-glass-edge: var(--bx-border-default);--bx-glass-shadow: none;--bx-glass-opacity: calc(.1 + .25 * var(--bx-glassiness, .5));--bx-glass-radius: .5rem;display:flex;align-self:flex-start;flex:none;box-sizing:border-box;width:fit-content;max-width:100%;padding:.25rem;border:1px solid var(--bx-border-default);border-radius:.5rem}.bx-tab-list{display:flex;flex:1 1 auto;gap:.25rem;min-width:0;padding:1px;overflow:auto hidden;overscroll-behavior-x:contain;scrollbar-width:thin}.bx-tab-trigger{--bx-glass-surface: var(--bx-bg-surface);--bx-glass-text: var(--bx-tab-text, var(--bx-text-secondary));--bx-glass-edge: transparent;--bx-glass-radius: .25rem;--bx-glass-opacity: 0;--bx-glass-decoration-opacity: 0;--bx-glass-rim-visibility: 0;--bx-glass-shadow: none;display:inline-flex;align-items:center;gap:.5rem;flex:none;padding:.5rem .75rem;border:1px solid transparent;border-radius:.25rem;font:inherit;font-size:.875rem;white-space:nowrap;cursor:pointer}.bx-tab-trigger:hover:not(:disabled,.is-selected){--bx-glass-text: var(--bx-tab-text, var(--bx-text-primary));--bx-glass-opacity: .15}.bx-tab-trigger.is-selected{--bx-glass-surface: color-mix( in srgb, var(--bx-tab-highlight, var(--bx-primary)) 35%, var(--bx-bg-surface) );--bx-glass-text: var(--bx-tab-selected-text, var(--bx-text-brand));--bx-glass-edge: color-mix( in srgb, var(--bx-tab-highlight, var(--bx-primary)) 35%, transparent );--bx-glass-opacity: .45;--bx-glass-decoration-opacity: .5;--bx-glass-rim-visibility: .65;--bx-glass-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1)}.bx-tab-trigger:disabled{opacity:.4;cursor:not-allowed}.bx-tab-trigger:focus-visible{outline:2px solid var(--bx-tab-highlight, var(--bx-border-brand));outline-offset:-2px}.bx-tab-panels{flex:1 1 auto;min-width:0;min-height:0;max-height:var(--bx-tabs-max-panel-height, none);overflow:var(--bx-tabs-panel-overflow, visible)}.bx-tab-panel{min-width:0}.bx-tab-panel:focus-visible{outline:2px solid var(--bx-border-brand);outline-offset:-2px}:host(.bx-tabs-animated) .bx-tab-trigger{transition:background-color .1s ease-in-out,color .1s ease-in-out,box-shadow .1s ease-in-out}:host(.bx-tabs-underline){gap:var(--bx-tabs-panel-gap, 0)}:host(.bx-tabs-underline) .bx-tab-header{align-self:stretch;width:auto;padding:0;border:0;border-bottom:1px solid var(--bx-border-default);border-radius:0}:host(.bx-tabs-underline) .bx-tab-list{gap:0}:host(.bx-tabs-underline) .bx-tab-trigger{padding:.75rem 1rem;border-inline-end:1px solid var(--bx-border-default);border-radius:0;font-size:.8rem}:host(.bx-tabs-underline) .bx-tab-trigger.is-selected{--bx-glass-shadow: inset 0 -2px 0 var(--bx-tab-highlight, var(--bx-border-brand))}@media(forced-colors:active){.bx-tab-trigger.is-selected{outline:2px solid Highlight;outline-offset:-2px}}\n"],
-		dependencies: [
-			{
-				kind: "directive",
-				type: NgTemplateOutlet,
-				selector: "[ngTemplateOutlet]",
-				inputs: [
-					"ngTemplateOutletContext",
-					"ngTemplateOutlet",
-					"ngTemplateOutletInjector"
-				]
-			},
-			{
-				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: Tabs,
-	decorators: [{
-		type: Component,
-		args: [{
-			selector: "bx-tabs",
-			standalone: true,
-			imports: [
-				NgTemplateOutlet,
-				BxSurfaceDirective,
-				Icon
-			],
-			changeDetection: ChangeDetectionStrategy.OnPush,
-			host: {
-				"[class.bx-tabs-underline]": "variant() === \"underline\"",
-				"[class.bx-tabs-animated]": "hasRendered() && !a11y.isReducedMotion()"
-			},
-			template: "<ng-content select=\"bx-tab\"></ng-content>\n\n<div bxSurface data-bx-surface=\"glass\" class=\"bx-tab-header\" role=\"tablist\" [attr.aria-label]=\"resolvedLabel()\" aria-orientation=\"horizontal\">\n<div class=\"bx-tab-list\">\n    @for (tab of tabs(); track tab) {\n    <button #trigger bxSurface data-bx-surface=\"glass\" class=\"bx-tab-trigger\" type=\"button\" role=\"tab\"\n        [bxSurfaceEmission]=\"tab.resolvedEmission()\"\n        [style.--bx-tab-highlight]=\"tab.resolvedHighlight()\" [style.--bx-tab-text]=\"tab.resolvedTextColor()\"\n        [style.--bx-tab-selected-text]=\"tab.resolvedSelectedText()\"\n        [id]=\"tab.triggerId\" [attr.aria-controls]=\"tab.panelId\" [attr.aria-selected]=\"tab === activeTab()\"\n        [attr.tabindex]=\"tab === activeTab() ? 0 : -1\" [disabled]=\"tab.disabled()\"\n        [class.is-selected]=\"tab === activeTab()\" (click)=\"select(tab.value())\" (keydown)=\"onTabKey($event, tab)\">\n        @if (tab.icon()) { <bx-icon [name]=\"tab.icon()!\" size=\"16\" /> }\n        <span>{{ tab.resolvedLabel() }}</span>\n        @if (tab.endIcon()) { <bx-icon [name]=\"tab.endIcon()!\" size=\"16\" /> }\n    </button>\n    }\n</div>\n</div>\n\n<div class=\"bx-tab-panels\">\n    @for (tab of tabs(); track tab) {\n    <div class=\"bx-tab-panel\" role=\"tabpanel\" tabindex=\"0\" [id]=\"tab.panelId\"\n        [style.color]=\"tab.resolvedContentColor()\"\n        [attr.aria-labelledby]=\"tab.triggerId\" [hidden]=\"tab !== activeTab()\">\n        @if (tab === activeTab()) {\n        <ng-container [ngTemplateOutlet]=\"tab.template()\"></ng-container>\n        }\n    </div>\n    }\n</div>\n",
-			styles: [":host{display:flex;flex-direction:column;min-width:0;min-height:0;box-sizing:border-box;width:100%;max-width:100%;gap:var(--bx-tabs-panel-gap, 1.5rem)}.bx-tab-header{--bx-glass-surface: var(--bx-bg-surface-alt);--bx-glass-edge: var(--bx-border-default);--bx-glass-shadow: none;--bx-glass-opacity: calc(.1 + .25 * var(--bx-glassiness, .5));--bx-glass-radius: .5rem;display:flex;align-self:flex-start;flex:none;box-sizing:border-box;width:fit-content;max-width:100%;padding:.25rem;border:1px solid var(--bx-border-default);border-radius:.5rem}.bx-tab-list{display:flex;flex:1 1 auto;gap:.25rem;min-width:0;padding:1px;overflow:auto hidden;overscroll-behavior-x:contain;scrollbar-width:thin}.bx-tab-trigger{--bx-glass-surface: var(--bx-bg-surface);--bx-glass-text: var(--bx-tab-text, var(--bx-text-secondary));--bx-glass-edge: transparent;--bx-glass-radius: .25rem;--bx-glass-opacity: 0;--bx-glass-decoration-opacity: 0;--bx-glass-rim-visibility: 0;--bx-glass-shadow: none;display:inline-flex;align-items:center;gap:.5rem;flex:none;padding:.5rem .75rem;border:1px solid transparent;border-radius:.25rem;font:inherit;font-size:.875rem;white-space:nowrap;cursor:pointer}.bx-tab-trigger:hover:not(:disabled,.is-selected){--bx-glass-text: var(--bx-tab-text, var(--bx-text-primary));--bx-glass-opacity: .15}.bx-tab-trigger.is-selected{--bx-glass-surface: color-mix( in srgb, var(--bx-tab-highlight, var(--bx-primary)) 35%, var(--bx-bg-surface) );--bx-glass-text: var(--bx-tab-selected-text, var(--bx-text-brand));--bx-glass-edge: color-mix( in srgb, var(--bx-tab-highlight, var(--bx-primary)) 35%, transparent );--bx-glass-opacity: .45;--bx-glass-decoration-opacity: .5;--bx-glass-rim-visibility: .65;--bx-glass-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1)}.bx-tab-trigger:disabled{opacity:.4;cursor:not-allowed}.bx-tab-trigger:focus-visible{outline:2px solid var(--bx-tab-highlight, var(--bx-border-brand));outline-offset:-2px}.bx-tab-panels{flex:1 1 auto;min-width:0;min-height:0;max-height:var(--bx-tabs-max-panel-height, none);overflow:var(--bx-tabs-panel-overflow, visible)}.bx-tab-panel{min-width:0}.bx-tab-panel:focus-visible{outline:2px solid var(--bx-border-brand);outline-offset:-2px}:host(.bx-tabs-animated) .bx-tab-trigger{transition:background-color .1s ease-in-out,color .1s ease-in-out,box-shadow .1s ease-in-out}:host(.bx-tabs-underline){gap:var(--bx-tabs-panel-gap, 0)}:host(.bx-tabs-underline) .bx-tab-header{align-self:stretch;width:auto;padding:0;border:0;border-bottom:1px solid var(--bx-border-default);border-radius:0}:host(.bx-tabs-underline) .bx-tab-list{gap:0}:host(.bx-tabs-underline) .bx-tab-trigger{padding:.75rem 1rem;border-inline-end:1px solid var(--bx-border-default);border-radius:0;font-size:.8rem}:host(.bx-tabs-underline) .bx-tab-trigger.is-selected{--bx-glass-shadow: inset 0 -2px 0 var(--bx-tab-highlight, var(--bx-border-brand))}@media(forced-colors:active){.bx-tab-trigger.is-selected{outline:2px solid Highlight;outline-offset:-2px}}\n"]
-		}]
-	}],
-	ctorParameters: () => [],
-	propDecorators: {
-		triggers: [{
-			type: i0.ViewChildren,
-			args: ["trigger", { isSignal: true }]
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
 		}],
-		tabs: [{
-			type: i0.ContentChildren,
-			args: [i0.forwardRef(() => Tab), { isSignal: true }]
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
 		}],
-		variant: [{
+		color: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "variant",
+				alias: "color",
 				required: false
 			}]
 		}],
-		ariaLabel: [{
+		textColor: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "ariaLabel",
+				alias: "textColor",
 				required: false
 			}]
 		}],
-		selectedValue: [{
+		highlightColor: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "selectedValue",
+				alias: "highlightColor",
 				required: false
 			}]
-		}, {
-			type: i0.Output,
-			args: ["selectedValueChange"]
-		}]
-	}
-});
-const BX_OVERLAY_CONTEXT = new InjectionToken("BX_OVERLAY_CONTEXT");
-var ContextMenuDirective = class ContextMenuDirective {
-	overlay = inject(Overlay);
-	positionBuilder = inject(BxOverlayPositionService);
-	overlayContext = inject(BX_OVERLAY_CONTEXT, { optional: true });
-	elementRef = inject(ElementRef);
-	a11y = inject(BxA11yService);
-	zone = inject(NgZone);
-	vcr = inject(ViewContainerRef);
-	bxContextMenu = input.required(...ngDevMode ? [{ debugName: "bxContextMenu" }] : /* istanbul ignore next */ []);
-	bxContextMenuLongPress = input(true, {
-		...ngDevMode ? { debugName: "bxContextMenuLongPress" } : /* istanbul ignore next */ {},
-		transform: booleanAttribute
-	});
-	onPointerDown = (event) => {
-		this.lastPointerType = event.pointerType;
-		this.cancelTouchPress();
-		if (event.isPrimary) this.clearTouchGuard();
-		if (event.pointerType !== "touch" || !event.isPrimary || event.button !== 0 || !this.bxContextMenuLongPress() || this.hasNativeTouchAction(event)) return;
-		const doc = this.elementRef.nativeElement.ownerDocument;
-		const win = doc.defaultView;
-		if (!win || this.hasTextSelection()) return;
-		const press = {
-			pointerId: event.pointerId,
-			x: event.clientX,
-			y: event.clientY,
-			timer: 0,
-			opened: false,
-			events: new AbortController()
-		};
-		this.touchPress = press;
-		const options = {
-			capture: true,
-			passive: true,
-			signal: press.events.signal
-		};
-		const finish = () => this.cancelTouchPress();
-		doc.addEventListener("pointermove", (move) => {
-			if (move.pointerId === press.pointerId && !press.opened && Math.hypot(move.clientX - press.x, move.clientY - press.y) > 10) finish();
-		}, options);
-		for (const type of ["pointerup", "pointercancel"]) doc.addEventListener(type, (end) => {
-			if (end.pointerId === press.pointerId) finish();
-		}, options);
-		doc.addEventListener("pointerdown", (next) => {
-			if (next.pointerId !== press.pointerId) finish();
-		}, options);
-		doc.addEventListener("scroll", finish, options);
-		doc.addEventListener("visibilitychange", () => {
-			if (doc.hidden) finish();
-		}, options);
-		win.addEventListener("blur", finish, { signal: press.events.signal });
-		press.timer = win.setTimeout(() => this.zone.run(() => this.openTouchMenu(press)), 500);
-	};
-	overlayRef = null;
-	transition;
-	point;
-	disconnectTheme;
-	disconnectLighting;
-	subscriptions = new Subscription();
-	revision = 0;
-	touchPress;
-	touchGuard;
-	touchGuardTimer;
-	lastPointerType = "";
-	constructor() {
-		const source = this.elementRef.nativeElement;
-		if (source.ownerDocument.defaultView) this.zone.runOutsideAngular(() => source.addEventListener("pointerdown", this.onPointerDown, { passive: true }));
-		inject(DestroyRef).onDestroy(() => {
-			++this.revision;
-			source.removeEventListener("pointerdown", this.onPointerDown);
-			this.cancelTouchPress();
-			this.clearTouchGuard();
-			this.dispose();
-		});
-	}
-	open(event) {
-		if (event.type === "contextmenu" && this.lastPointerType === "touch") {
-			const press = this.touchPress;
-			if (!press) return;
-			if (!this.bxContextMenuLongPress() || this.hasNativeTouchAction(event) || this.hasTextSelection()) {
-				this.cancelTouchPress();
-				return;
-			}
-			event.preventDefault();
-			this.openTouchMenu(press);
-			return;
-		}
-		event.preventDefault();
-		this.cancelTouchPress();
-		this.clearTouchGuard();
-		this.openAt(event.clientX, event.clientY);
-	}
-	close(restoreFocus = false) {
-		if (!this.overlayRef) return;
-		const revision = ++this.revision;
-		if (restoreFocus || this.overlayRef.overlayElement.contains(this.elementRef.nativeElement.ownerDocument.activeElement)) this.elementRef.nativeElement.focus({ preventScroll: true });
-		this.overlayRef.overlayElement.inert = true;
-		const transition = this.transition;
-		if (transition && !this.a11y.isReducedMotion()) this.zone.runOutsideAngular(() => transition.exit()).then(() => {
-			if (revision === this.revision) this.dispose();
-		}).catch(() => {
-			if (revision === this.revision) this.dispose();
-		});
-		else this.dispose();
-	}
-	onKey(event) {
-		if (event.key !== "ContextMenu" && !(event.shiftKey && event.key === "F10")) return;
-		event.preventDefault();
-		this.lastPointerType = "";
-		this.cancelTouchPress();
-		this.clearTouchGuard();
-		const rect = this.elementRef.nativeElement.getBoundingClientRect();
-		this.openAt(rect.left + Math.min(24, rect.width / 2), rect.bottom);
-		this.items()[0]?.focus();
-	}
-	onDocumentClick(event) {
-		const target = event.target;
-		if (target && this.overlayRef?.overlayElement.contains(target) && target.closest("button, a, [role=\"menuitem\"]")) this.close();
-	}
-	hasNativeTouchAction(event) {
-		const source = this.elementRef.nativeElement;
-		for (const node of event.composedPath()) if (node instanceof HTMLElement) {
-			if (node.isContentEditable || node.matches("input, textarea, select, :disabled, [aria-disabled=\"true\"], [inert]")) return true;
-			if (node === source) break;
-		}
-		return !!source.closest(":disabled, [aria-disabled=\"true\"], [inert]");
-	}
-	hasTextSelection() {
-		const source = this.elementRef.nativeElement;
-		const selection = source.ownerDocument.getSelection();
-		return !!selection && !selection.isCollapsed && (source.contains(selection.anchorNode) || source.contains(selection.focusNode));
-	}
-	openTouchMenu(press) {
-		if (this.touchPress !== press || press.opened) return;
-		const source = this.elementRef.nativeElement;
-		if (!this.bxContextMenuLongPress() || !source.isConnected || source.isContentEditable || source.closest(":disabled, [aria-disabled=\"true\"], [inert]") || this.hasTextSelection()) {
-			this.cancelTouchPress();
-			return;
-		}
-		press.opened = true;
-		this.elementRef.nativeElement.ownerDocument.defaultView?.clearTimeout(press.timer);
-		this.guardTouchRelease();
-		this.openAt(press.x, press.y + 12);
-	}
-	cancelTouchPress() {
-		const press = this.touchPress;
-		if (!press) return;
-		this.touchPress = void 0;
-		const win = this.elementRef.nativeElement.ownerDocument.defaultView;
-		win?.clearTimeout(press.timer);
-		press.events.abort();
-		if (press.opened && win) this.touchGuardTimer = win.setTimeout(() => this.clearTouchGuard(), 800);
-	}
-	guardTouchRelease() {
-		this.clearTouchGuard();
-		const doc = this.elementRef.nativeElement.ownerDocument;
-		const guard = new AbortController();
-		this.touchGuard = guard;
-		const options = {
-			capture: true,
-			signal: guard.signal
-		};
-		doc.addEventListener("click", (event) => {
-			if (event.detail === 0) return;
-			event.preventDefault();
-			event.stopImmediatePropagation();
-			this.clearTouchGuard();
-		}, options);
-		doc.addEventListener("contextmenu", (event) => {
-			event.preventDefault();
-			event.stopImmediatePropagation();
-		}, options);
-		doc.addEventListener("pointerdown", (event) => {
-			if (event.isPrimary) this.clearTouchGuard();
-		}, {
-			...options,
-			passive: true
-		});
-		doc.addEventListener("keydown", () => this.clearTouchGuard(), options);
-	}
-	clearTouchGuard() {
-		this.touchGuard?.abort();
-		this.touchGuard = void 0;
-		this.elementRef.nativeElement.ownerDocument.defaultView?.clearTimeout(this.touchGuardTimer);
-		this.touchGuardTimer = void 0;
-	}
-	openAt(x, y) {
-		this.dispose();
-		++this.revision;
-		const source = this.elementRef.nativeElement;
-		this.overlayRef = this.overlay.create({
-			positionStrategy: this.positionBuilder.getCoordinateStrategy(x, y),
-			scrollStrategy: this.overlay.scrollStrategies.noop(),
-			usePopover: !!this.overlayContext?.useTopLayer || !!source.closest("dialog, [role=\"dialog\"], [role=\"alertdialog\"], bx-modal, bx-modal-core, [popover]"),
-			hasBackdrop: true,
-			backdropClass: "cdk-overlay-transparent-backdrop"
-		});
-		this.subscriptions = new Subscription();
-		const win = source.ownerDocument.defaultView;
-		if (win) this.zone.runOutsideAngular(() => {
-			const closeOnScroll = (event) => {
-				const target = event.target;
-				if (this.overlayRef?.overlayElement.inert) return;
-				if (target === win || target instanceof Node && target.contains(source)) this.zone.run(() => this.close());
-			};
-			win.addEventListener("scroll", closeOnScroll, {
-				capture: true,
-				passive: true
-			});
-			this.subscriptions.add(() => win.removeEventListener("scroll", closeOnScroll, true));
+		}],
+		contentColor: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "contentColor",
+				required: false
+			}]
+		}],
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: false
+			}]
+		}],
+		endIcon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "endIcon",
+				required: false
+			}]
+		}]
+	}
+});
+var Tabs = class Tabs {
+	i18n = inject(BX_I18N, { optional: true });
+	triggers = viewChildren("trigger", ...ngDevMode ? [{ debugName: "triggers" }] : /* istanbul ignore next */ []);
+	a11y = inject(BxA11yService);
+	hasRendered = signal(false, ...ngDevMode ? [{ debugName: "hasRendered" }] : /* istanbul ignore next */ []);
+	tabs = contentChildren(Tab, ...ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []);
+	activeTab = computed(() => {
+		const enabled = this.tabs().filter((tab) => !tab.disabled());
+		return enabled.find((tab) => tab.value() === this.selectedValue()) ?? enabled[0];
+	}, ...ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []);
+	resolvedLabel = computed(() => resolveTabText(this.ariaLabel(), this.i18n), ...ngDevMode ? [{ debugName: "resolvedLabel" }] : /* istanbul ignore next */ []);
+	variant = input(DEFAULT_TABS_VARIANT, ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	ariaLabel = input(DEFAULT_TABS_LABEL, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	selectedValue = model(null, ...ngDevMode ? [{ debugName: "selectedValue" }] : /* istanbul ignore next */ []);
+	constructor() {
+		afterNextRender(() => this.hasRendered.set(true));
+		afterRenderEffect(() => {
+			const value = this.activeTab()?.value() ?? null;
+			if (this.selectedValue() !== value) this.selectedValue.set(value);
 		});
-		this.subscriptions.add(this.overlayRef.backdropClick().subscribe(() => this.close()));
-		this.subscriptions.add(this.overlayRef.detachments().subscribe(() => this.dispose()));
-		this.subscriptions.add(this.overlayRef.keydownEvents().subscribe((event) => this.onMenuKey(event)));
-		const pane = this.overlayRef.overlayElement;
-		this.disconnectTheme = this.zone.runOutsideAngular(() => inheritOverlayTheme(source, pane));
-		this.disconnectLighting = inheritGlassLighting(pane, source);
-		this.overlayRef.attach(new TemplatePortal(this.bxContextMenu(), this.vcr)).detectChanges();
-		this.overlayRef.updatePosition();
-		if (!this.a11y.isReducedMotion()) {
-			const point = source.ownerDocument.createElement("span");
-			point.setAttribute("aria-hidden", "true");
-			Object.assign(point.style, {
-				position: "fixed",
-				left: `${x}px`,
-				top: `${y}px`,
-				width: "1px",
-				height: "1px",
-				pointerEvents: "none"
-			});
-			source.ownerDocument.body.append(point);
-			this.point = point;
-			const transition = this.zone.runOutsideAngular(() => createGlassTransition(point, pane));
-			this.transition = transition;
-			this.zone.runOutsideAngular(() => transition.enter()).catch(() => {
-				this.transition?.destroy();
-				this.transition = void 0;
-			});
-		}
 	}
-	items() {
-		return Array.from(this.overlayRef?.overlayElement.querySelectorAll("button:not(:disabled), a[href], [role=\"menuitem\"]") ?? []).filter((item) => !item.matches("[disabled], [aria-disabled=\"true\"]") && !item.closest("[hidden], [inert]"));
+	select(value) {
+		if (this.tabs().find((item) => item.value() === value && !item.disabled())) this.selectedValue.set(value);
 	}
-	onMenuKey(event) {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			this.close(true);
-			return;
-		}
-		if (event.target?.closest("input,textarea,[contenteditable=\"true\"]")) return;
-		if (![
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) return;
-		const items = this.items();
-		if (!items.length) return;
+	onTabKey(event, tab) {
+		if (event.altKey || event.ctrlKey || event.metaKey || !TAB_NAVIGATION_KEYS.has(event.key)) return;
+		const enabled = this.tabs().filter((item) => !item.disabled());
+		const current = enabled.indexOf(tab);
+		if (current < 0) return;
 		event.preventDefault();
-		const current = items.indexOf(this.elementRef.nativeElement.ownerDocument.activeElement);
-		items[event.key === "Home" ? 0 : event.key === "End" ? items.length - 1 : event.key === "ArrowDown" ? (current + 1) % items.length : current < 0 ? items.length - 1 : (current - 1 + items.length) % items.length].focus();
-	}
-	dispose() {
-		this.subscriptions.unsubscribe();
-		this.disconnectTheme?.();
-		this.disconnectTheme = void 0;
-		this.transition?.destroy();
-		this.transition = void 0;
-		this.point?.remove();
-		this.point = void 0;
-		const overlay = this.overlayRef;
-		this.overlayRef = null;
-		overlay?.dispose();
-		this.disconnectLighting?.();
-		this.disconnectLighting = void 0;
+		event.stopPropagation();
+		const button = event.currentTarget;
+		const rtl = button.ownerDocument.defaultView?.getComputedStyle(button).direction === "rtl";
+		const direction = (event.key === "ArrowRight" ? 1 : -1) * (rtl ? -1 : 1);
+		const next = enabled[event.key === "Home" ? 0 : event.key === "End" ? enabled.length - 1 : (current + direction + enabled.length) % enabled.length];
+		this.select(next.value());
+		const trigger = this.triggers().find((item) => item.nativeElement.id === next.triggerId)?.nativeElement;
+		trigger?.focus({ preventScroll: true });
+		trigger?.scrollIntoView({
+			block: "nearest",
+			inline: "nearest"
+		});
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.2.3",
 		ngImport: i0,
-		type: ContextMenuDirective,
+		type: Tabs,
 		deps: [],
-		target: i0.ɵɵFactoryTarget.Directive
+		target: i0.ɵɵFactoryTarget.Component
 	});
-	static ɵdir = i0.ɵɵngDeclareDirective({
-		minVersion: "17.1.0",
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
 		version: "22.2.3",
-		type: ContextMenuDirective,
+		type: Tabs,
 		isStandalone: true,
-		selector: "[bxContextMenu]",
+		selector: "bx-tabs",
 		inputs: {
-			bxContextMenu: {
-				classPropertyName: "bxContextMenu",
-				publicName: "bxContextMenu",
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
 				isSignal: true,
-				isRequired: true,
+				isRequired: false,
 				transformFunction: null
 			},
-			bxContextMenuLongPress: {
-				classPropertyName: "bxContextMenuLongPress",
-				publicName: "bxContextMenuLongPress",
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			selectedValue: {
+				classPropertyName: "selectedValue",
+				publicName: "selectedValue",
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
 			}
 		},
-		host: { listeners: {
-			"contextmenu": "open($event)",
-			"keydown": "onKey($event)",
-			"document:click": "onDocumentClick($event)"
+		outputs: { selectedValue: "selectedValueChange" },
+		host: { properties: {
+			"class.bx-tabs-underline": "variant() === \"underline\"",
+			"class.bx-tabs-animated": "hasRendered() && !a11y.isReducedMotion()"
 		} },
-		ngImport: i0
+		queries: [{
+			propertyName: "tabs",
+			predicate: Tab,
+			isSignal: true
+		}],
+		viewQueries: [{
+			propertyName: "triggers",
+			predicate: ["trigger"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<ng-content select=\"bx-tab\"></ng-content>\n\n<div bxSurface data-bx-surface=\"glass\" class=\"bx-tab-header\" role=\"tablist\" [attr.aria-label]=\"resolvedLabel()\" aria-orientation=\"horizontal\">\n<div class=\"bx-tab-list\">\n    @for (tab of tabs(); track tab) {\n    <button #trigger bxSurface data-bx-surface=\"glass\" class=\"bx-tab-trigger\" type=\"button\" role=\"tab\"\n        [bxSurfaceEmission]=\"tab.resolvedEmission()\"\n        [style.--bx-tab-highlight]=\"tab.resolvedHighlight()\" [style.--bx-tab-text]=\"tab.resolvedTextColor()\"\n        [style.--bx-tab-selected-text]=\"tab.resolvedSelectedText()\"\n        [id]=\"tab.triggerId\" [attr.aria-controls]=\"tab.panelId\" [attr.aria-selected]=\"tab === activeTab()\"\n        [attr.tabindex]=\"tab === activeTab() ? 0 : -1\" [disabled]=\"tab.disabled()\"\n        [class.is-selected]=\"tab === activeTab()\" (click)=\"select(tab.value())\" (keydown)=\"onTabKey($event, tab)\">\n        @if (tab.icon()) { <bx-icon [name]=\"tab.icon()!\" size=\"16\" /> }\n        <span>{{ tab.resolvedLabel() }}</span>\n        @if (tab.endIcon()) { <bx-icon [name]=\"tab.endIcon()!\" size=\"16\" /> }\n    </button>\n    }\n</div>\n</div>\n\n<div class=\"bx-tab-panels\">\n    @for (tab of tabs(); track tab) {\n    <div class=\"bx-tab-panel\" role=\"tabpanel\" tabindex=\"0\" [id]=\"tab.panelId\"\n        [style.color]=\"tab.resolvedContentColor()\"\n        [attr.aria-labelledby]=\"tab.triggerId\" [hidden]=\"tab !== activeTab()\">\n        @if (tab === activeTab()) {\n        <ng-container [ngTemplateOutlet]=\"tab.template()\"></ng-container>\n        }\n    </div>\n    }\n</div>\n",
+		styles: [":host{display:flex;flex-direction:column;min-width:0;min-height:0;box-sizing:border-box;width:100%;max-width:100%;gap:var(--bx-tabs-panel-gap, 1.5rem)}.bx-tab-header{--bx-glass-surface: var(--bx-bg-surface-alt);--bx-glass-edge: var(--bx-border-default);--bx-glass-shadow: none;--bx-glass-opacity: calc(.1 + .25 * var(--bx-glassiness, .5));--bx-glass-radius: .5rem;display:flex;align-self:flex-start;flex:none;box-sizing:border-box;width:fit-content;max-width:100%;padding:.25rem;border:1px solid var(--bx-border-default);border-radius:.5rem}.bx-tab-list{display:flex;flex:1 1 auto;gap:.25rem;min-width:0;padding:1px;overflow:auto hidden;overscroll-behavior-x:contain;scrollbar-width:thin}.bx-tab-trigger{--bx-glass-surface: var(--bx-bg-surface);--bx-glass-text: var(--bx-tab-text, var(--bx-text-secondary));--bx-glass-edge: transparent;--bx-glass-radius: .25rem;--bx-glass-opacity: 0;--bx-glass-decoration-opacity: 0;--bx-glass-rim-visibility: 0;--bx-glass-shadow: none;display:inline-flex;align-items:center;gap:.5rem;flex:none;padding:.5rem .75rem;border:1px solid transparent;border-radius:.25rem;font:inherit;font-size:.875rem;white-space:nowrap;cursor:pointer}.bx-tab-trigger:hover:not(:disabled,.is-selected){--bx-glass-text: var(--bx-tab-text, var(--bx-text-primary));--bx-glass-opacity: .15}.bx-tab-trigger.is-selected{--bx-glass-surface: color-mix( in srgb, var(--bx-tab-highlight, var(--bx-primary)) 35%, var(--bx-bg-surface) );--bx-glass-text: var(--bx-tab-selected-text, var(--bx-text-brand));--bx-glass-edge: color-mix( in srgb, var(--bx-tab-highlight, var(--bx-primary)) 35%, transparent );--bx-glass-opacity: .45;--bx-glass-decoration-opacity: .5;--bx-glass-rim-visibility: .65;--bx-glass-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1)}.bx-tab-trigger:disabled{opacity:.4;cursor:not-allowed}.bx-tab-trigger:focus-visible{outline:2px solid var(--bx-tab-highlight, var(--bx-border-brand));outline-offset:-2px}.bx-tab-panels{flex:1 1 auto;min-width:0;min-height:0;max-height:var(--bx-tabs-max-panel-height, none);overflow:var(--bx-tabs-panel-overflow, visible)}.bx-tab-panel{min-width:0}.bx-tab-panel:focus-visible{outline:2px solid var(--bx-border-brand);outline-offset:-2px}:host(.bx-tabs-animated) .bx-tab-trigger{transition:background-color .1s ease-in-out,color .1s ease-in-out,box-shadow .1s ease-in-out}:host(.bx-tabs-underline){gap:var(--bx-tabs-panel-gap, 0)}:host(.bx-tabs-underline) .bx-tab-header{align-self:stretch;width:auto;padding:0;border:0;border-bottom:1px solid var(--bx-border-default);border-radius:0}:host(.bx-tabs-underline) .bx-tab-list{gap:0}:host(.bx-tabs-underline) .bx-tab-trigger{padding:.75rem 1rem;border-inline-end:1px solid var(--bx-border-default);border-radius:0;font-size:.8rem}:host(.bx-tabs-underline) .bx-tab-trigger.is-selected{--bx-glass-shadow: inset 0 -2px 0 var(--bx-tab-highlight, var(--bx-border-brand))}@media(forced-colors:active){.bx-tab-trigger.is-selected{outline:2px solid Highlight;outline-offset:-2px}}\n"],
+		dependencies: [
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				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: ContextMenuDirective,
+	type: Tabs,
 	decorators: [{
-		type: Directive,
-		args: [{ selector: "[bxContextMenu]" }]
+		type: Component,
+		args: [{
+			selector: "bx-tabs",
+			standalone: true,
+			imports: [
+				NgTemplateOutlet,
+				BxSurfaceDirective,
+				Icon
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				"[class.bx-tabs-underline]": "variant() === \"underline\"",
+				"[class.bx-tabs-animated]": "hasRendered() && !a11y.isReducedMotion()"
+			},
+			template: "<ng-content select=\"bx-tab\"></ng-content>\n\n<div bxSurface data-bx-surface=\"glass\" class=\"bx-tab-header\" role=\"tablist\" [attr.aria-label]=\"resolvedLabel()\" aria-orientation=\"horizontal\">\n<div class=\"bx-tab-list\">\n    @for (tab of tabs(); track tab) {\n    <button #trigger bxSurface data-bx-surface=\"glass\" class=\"bx-tab-trigger\" type=\"button\" role=\"tab\"\n        [bxSurfaceEmission]=\"tab.resolvedEmission()\"\n        [style.--bx-tab-highlight]=\"tab.resolvedHighlight()\" [style.--bx-tab-text]=\"tab.resolvedTextColor()\"\n        [style.--bx-tab-selected-text]=\"tab.resolvedSelectedText()\"\n        [id]=\"tab.triggerId\" [attr.aria-controls]=\"tab.panelId\" [attr.aria-selected]=\"tab === activeTab()\"\n        [attr.tabindex]=\"tab === activeTab() ? 0 : -1\" [disabled]=\"tab.disabled()\"\n        [class.is-selected]=\"tab === activeTab()\" (click)=\"select(tab.value())\" (keydown)=\"onTabKey($event, tab)\">\n        @if (tab.icon()) { <bx-icon [name]=\"tab.icon()!\" size=\"16\" /> }\n        <span>{{ tab.resolvedLabel() }}</span>\n        @if (tab.endIcon()) { <bx-icon [name]=\"tab.endIcon()!\" size=\"16\" /> }\n    </button>\n    }\n</div>\n</div>\n\n<div class=\"bx-tab-panels\">\n    @for (tab of tabs(); track tab) {\n    <div class=\"bx-tab-panel\" role=\"tabpanel\" tabindex=\"0\" [id]=\"tab.panelId\"\n        [style.color]=\"tab.resolvedContentColor()\"\n        [attr.aria-labelledby]=\"tab.triggerId\" [hidden]=\"tab !== activeTab()\">\n        @if (tab === activeTab()) {\n        <ng-container [ngTemplateOutlet]=\"tab.template()\"></ng-container>\n        }\n    </div>\n    }\n</div>\n",
+			styles: [":host{display:flex;flex-direction:column;min-width:0;min-height:0;box-sizing:border-box;width:100%;max-width:100%;gap:var(--bx-tabs-panel-gap, 1.5rem)}.bx-tab-header{--bx-glass-surface: var(--bx-bg-surface-alt);--bx-glass-edge: var(--bx-border-default);--bx-glass-shadow: none;--bx-glass-opacity: calc(.1 + .25 * var(--bx-glassiness, .5));--bx-glass-radius: .5rem;display:flex;align-self:flex-start;flex:none;box-sizing:border-box;width:fit-content;max-width:100%;padding:.25rem;border:1px solid var(--bx-border-default);border-radius:.5rem}.bx-tab-list{display:flex;flex:1 1 auto;gap:.25rem;min-width:0;padding:1px;overflow:auto hidden;overscroll-behavior-x:contain;scrollbar-width:thin}.bx-tab-trigger{--bx-glass-surface: var(--bx-bg-surface);--bx-glass-text: var(--bx-tab-text, var(--bx-text-secondary));--bx-glass-edge: transparent;--bx-glass-radius: .25rem;--bx-glass-opacity: 0;--bx-glass-decoration-opacity: 0;--bx-glass-rim-visibility: 0;--bx-glass-shadow: none;display:inline-flex;align-items:center;gap:.5rem;flex:none;padding:.5rem .75rem;border:1px solid transparent;border-radius:.25rem;font:inherit;font-size:.875rem;white-space:nowrap;cursor:pointer}.bx-tab-trigger:hover:not(:disabled,.is-selected){--bx-glass-text: var(--bx-tab-text, var(--bx-text-primary));--bx-glass-opacity: .15}.bx-tab-trigger.is-selected{--bx-glass-surface: color-mix( in srgb, var(--bx-tab-highlight, var(--bx-primary)) 35%, var(--bx-bg-surface) );--bx-glass-text: var(--bx-tab-selected-text, var(--bx-text-brand));--bx-glass-edge: color-mix( in srgb, var(--bx-tab-highlight, var(--bx-primary)) 35%, transparent );--bx-glass-opacity: .45;--bx-glass-decoration-opacity: .5;--bx-glass-rim-visibility: .65;--bx-glass-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1)}.bx-tab-trigger:disabled{opacity:.4;cursor:not-allowed}.bx-tab-trigger:focus-visible{outline:2px solid var(--bx-tab-highlight, var(--bx-border-brand));outline-offset:-2px}.bx-tab-panels{flex:1 1 auto;min-width:0;min-height:0;max-height:var(--bx-tabs-max-panel-height, none);overflow:var(--bx-tabs-panel-overflow, visible)}.bx-tab-panel{min-width:0}.bx-tab-panel:focus-visible{outline:2px solid var(--bx-border-brand);outline-offset:-2px}:host(.bx-tabs-animated) .bx-tab-trigger{transition:background-color .1s ease-in-out,color .1s ease-in-out,box-shadow .1s ease-in-out}:host(.bx-tabs-underline){gap:var(--bx-tabs-panel-gap, 0)}:host(.bx-tabs-underline) .bx-tab-header{align-self:stretch;width:auto;padding:0;border:0;border-bottom:1px solid var(--bx-border-default);border-radius:0}:host(.bx-tabs-underline) .bx-tab-list{gap:0}:host(.bx-tabs-underline) .bx-tab-trigger{padding:.75rem 1rem;border-inline-end:1px solid var(--bx-border-default);border-radius:0;font-size:.8rem}:host(.bx-tabs-underline) .bx-tab-trigger.is-selected{--bx-glass-shadow: inset 0 -2px 0 var(--bx-tab-highlight, var(--bx-border-brand))}@media(forced-colors:active){.bx-tab-trigger.is-selected{outline:2px solid Highlight;outline-offset:-2px}}\n"]
+		}]
 	}],
 	ctorParameters: () => [],
 	propDecorators: {
-		bxContextMenu: [{
+		triggers: [{
+			type: i0.ViewChildren,
+			args: ["trigger", { isSignal: true }]
+		}],
+		tabs: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => Tab), { isSignal: true }]
+		}],
+		variant: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "bxContextMenu",
-				required: true
+				alias: "variant",
+				required: false
 			}]
 		}],
-		bxContextMenuLongPress: [{
+		ariaLabel: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "bxContextMenuLongPress",
+				alias: "ariaLabel",
 				required: false
 			}]
 		}],
-		open: [{
-			type: HostListener,
-			args: ["contextmenu", ["$event"]]
-		}],
-		onKey: [{
-			type: HostListener,
-			args: ["keydown", ["$event"]]
-		}],
-		onDocumentClick: [{
-			type: HostListener,
-			args: ["document:click", ["$event"]]
+		selectedValue: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selectedValue",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["selectedValueChange"]
 		}]
 	}
 });
-var TooltipDirective = class TooltipDirective {
+var DropdownDirective = class DropdownDirective {
 	elementRef = inject(ElementRef);
 	overlay = inject(Overlay);
 	positionBuilder = inject(BxOverlayPositionService);
+	overlayContext = inject(BX_OVERLAY_CONTEXT, { optional: true });
 	a11y = inject(BxA11yService);
 	zone = inject(NgZone);
-	focusMonitor = inject(FocusMonitor);
-	describer = inject(AriaDescriber);
-	i18n = inject(BX_I18N, { optional: true });
-	contextMenu = inject(ContextMenuDirective, { optional: true });
-	id = `bx-tooltip-${uuidv4()}`;
-	bxTooltip = input.required(...ngDevMode ? [{ debugName: "bxTooltip" }] : /* istanbul ignore next */ []);
+	vcr = inject(ViewContainerRef);
+	isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+	_isOpen = signal(false, ...ngDevMode ? [{ debugName: "_isOpen" }] : /* istanbul ignore next */ []);
+	overlayId = signal(null, ...ngDevMode ? [{ debugName: "overlayId" }] : /* istanbul ignore next */ []);
+	isOpen = this._isOpen.asReadonly();
+	_state = signal("closed", ...ngDevMode ? [{ debugName: "_state" }] : /* istanbul ignore next */ []);
+	state = this._state.asReadonly();
+	bxDropdown = input.required(...ngDevMode ? [{ debugName: "bxDropdown" }] : /* istanbul ignore next */ []);
 	placement = input("bottom", ...ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []);
-	bxTooltipTouch = input("none", ...ngDevMode ? [{ debugName: "bxTooltipTouch" }] : /* istanbul ignore next */ []);
+	bxTransition = input("fade", ...ngDevMode ? [{ debugName: "bxTransition" }] : /* istanbul ignore next */ []);
 	overlayRef = null;
-	transition;
+	transition = null;
+	subscriptions = new Subscription();
+	revision = 0;
 	disconnectTheme;
 	disconnectLighting;
-	positionSubscription;
-	keyboardSubscription;
-	revision = 0;
-	hovered = false;
-	focused = false;
-	lastPointerType = "";
-	touchEvents;
-	holdTimer;
-	touchHideTimer;
-	touchVisible = false;
-	closeTouchTap = false;
 	constructor() {
-		const source = this.elementRef.nativeElement;
-		const focus = source.ownerDocument.defaultView ? this.focusMonitor.monitor(source, true).subscribe((origin) => this.zone.run(() => {
-			this.focused = origin === "keyboard";
-			if (this.focused) {
-				this.clearTouchInteraction();
-				this.show();
-			} else if (!this.hovered && !this.touchEvents) this.hide();
-		})) : void 0;
-		effect((onCleanup) => {
-			this.i18n?.version?.();
-			const text = this.bxTooltip();
-			const description = isTextWithKey(text) ? this.i18n?.translate(text.key) ?? text.key : text;
-			if (!description) return;
-			this.describer.describe(source, description, "tooltip");
-			onCleanup(() => this.describer.removeDescription(source, description, "tooltip"));
-		});
 		inject(DestroyRef).onDestroy(() => {
 			++this.revision;
-			focus?.unsubscribe();
-			if (focus) this.focusMonitor.stopMonitoring(source);
-			this.clearTouchInteraction();
 			this.dispose();
 		});
-	}
-	show() {
-		if (!this.bxTooltip()) return;
-		const revision = ++this.revision;
-		if (!this.overlayRef) {
-			const strategy = this.positionBuilder.getElementStrategy(this.elementRef.nativeElement, this.placement()).withFlexibleDimensions(false);
-			this.overlayRef = this.overlay.create({
-				positionStrategy: strategy,
-				scrollStrategy: this.overlay.scrollStrategies.reposition(),
-				hasBackdrop: false,
-				panelClass: "bx-tooltip-pane"
-			});
-			const pane = this.overlayRef.overlayElement;
-			pane.id = this.id;
-			pane.setAttribute("role", "tooltip");
-			pane.setAttribute("aria-hidden", "true");
-			this.disconnectTheme = this.zone.runOutsideAngular(() => inheritOverlayTheme(this.elementRef.nativeElement, pane));
-			this.disconnectLighting = inheritGlassLighting(pane, this.elementRef.nativeElement);
-			const component = this.overlayRef.attach(new ComponentPortal(Tooltip));
-			pane.style.pointerEvents = "none";
-			this.keyboardSubscription = this.overlayRef.keydownEvents().subscribe((event) => this.onEscape(event));
-			component.setInput("text", this.bxTooltip());
-			component.changeDetectorRef.detectChanges();
-			const positionArrow = () => {
-				const trigger = this.elementRef.nativeElement.getBoundingClientRect();
-				const bounds = pane.getBoundingClientRect();
-				pane.style.setProperty("--bx-tooltip-arrow-x", `${trigger.left + trigger.width / 2 - bounds.left}px`);
-				pane.style.setProperty("--bx-tooltip-arrow-y", `${trigger.top + trigger.height / 2 - bounds.top}px`);
-				this.transition?.refresh();
-			};
-			this.positionSubscription = strategy.positionChanges.subscribe(positionArrow);
-			this.overlayRef.updatePosition();
-			positionArrow();
-			if (!this.a11y.isReducedMotion()) this.transition = this.zone.runOutsideAngular(() => createGlassTransition(this.elementRef.nativeElement, pane));
-		}
-		Promise.resolve(this.zone.runOutsideAngular(() => this.transition?.enter())).catch(() => {
-			if (revision === this.revision) {
-				this.transition?.destroy();
-				this.transition = void 0;
+		effect(() => {
+			if (this.a11y.isReducedMotion() && this.transition) {
+				++this.revision;
+				this.transition.destroy();
+				this.transition = null;
+				if (this.isOpen()) this._state.set("open");
+				else this.dispose();
 			}
 		});
 	}
-	hide() {
-		this.clearTouchInteraction();
-		const revision = ++this.revision;
-		if (!this.overlayRef) return;
-		const transition = this.transition;
-		if (transition && !this.a11y.isReducedMotion()) this.zone.runOutsideAngular(() => transition.exit()).then(() => {
-			if (revision === this.revision) this.dispose();
-		}).catch(() => {
-			if (revision === this.revision) this.dispose();
-		});
-		else this.dispose();
-	}
-	onEnter(event) {
-		if (event.pointerType !== "mouse") return;
-		this.clearTouchInteraction();
-		this.hovered = true;
-		this.show();
-	}
-	onLeave(event) {
-		if (event.pointerType !== "mouse") return;
-		this.hovered = false;
-		if (!this.focused) this.hide();
-	}
-	onPointerDown(event) {
-		this.lastPointerType = event.pointerType;
-		if (event.pointerType !== "touch") return;
-		this.closeTouchTap = this.touchVisible && this.bxTooltipTouch() === "tap";
-		this.hovered = false;
-		this.focused = false;
-		this.hide();
-		if (this.bxTooltipTouch() !== "longpress" || !event.isPrimary || event.button !== 0 || !this.canUseTouch(event)) return;
-		this.zone.runOutsideAngular(() => this.startTouchInteraction(event));
-	}
-	onClick(event) {
-		if (event.detail === 0 || this.lastPointerType !== "touch" || this.bxTooltipTouch() !== "tap" || !this.canUseTouch(event)) return;
-		if (this.closeTouchTap) {
-			this.closeTouchTap = false;
-			return;
-		}
-		this.zone.runOutsideAngular(() => this.startTouchInteraction());
-	}
-	onEscape(event) {
-		if (event.key === "Escape" && this.overlayRef) {
-			event.stopPropagation();
-			this.hovered = false;
-			this.focused = false;
-			this.hide();
-		}
+	toggle(event) {
+		if (this.isDisabled()) return;
+		event?.stopPropagation();
+		if (this.isOpen()) this.close();
+		else this.open();
 	}
-	canUseTouch(event) {
-		if (this.contextMenu && this.bxTooltipTouch() === "longpress") return false;
-		if (this.elementRef.nativeElement.closest(":disabled, [aria-disabled=\"true\"], [inert]")) return false;
-		return !event.composedPath().some((node) => node instanceof HTMLElement && (node.isContentEditable || node.matches("input, textarea, select")));
+	onTriggerKeydown(event) {
+		if (this.bxTransition() === "none" || this.isDisabled() || this.isEditing(event.target)) return;
+		if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
+		event.preventDefault();
+		event.stopPropagation();
+		this.open();
+		const items = this.menuItems();
+		(event.key === "ArrowUp" ? items[items.length - 1] : items[0])?.focus({ preventScroll: true });
 	}
-	hasTextSelection() {
-		const source = this.elementRef.nativeElement;
-		const selection = source.ownerDocument.getSelection();
-		return !!selection && !selection.isCollapsed && (source.contains(selection.anchorNode) || source.contains(selection.focusNode));
+	open() {
+		if (!this.isBrowser || this.isOpen() || this.isDisabled()) return;
+		const revision = ++this.revision;
+		this._isOpen.set(true);
+		this._state.set("opening");
+		if (!this.overlayRef) this.attachOverlay();
+		const overlay = this.overlayRef;
+		if (!overlay) return;
+		overlay.overlayElement.inert = false;
+		overlay.overlayElement.style.removeProperty("pointer-events");
+		if (this.bxTransition() !== "none" && !this.a11y.isReducedMotion()) {
+			const transition = this.transition ??= this.zone.runOutsideAngular(() => createGlassTransition(this.elementRef.nativeElement, overlay.overlayElement));
+			this.zone.runOutsideAngular(() => transition.enter()).then(() => {
+				if (revision === this.revision && this.isOpen()) this.zone.run(() => this._state.set("open"));
+			}).catch(() => {
+				if (revision === this.revision && this.isOpen()) {
+					this.transition?.destroy();
+					this.transition = null;
+					this._state.set("open");
+				}
+			});
+		} else this._state.set("open");
 	}
-	startTouchInteraction(press) {
-		const source = this.elementRef.nativeElement;
-		const doc = source.ownerDocument;
-		const win = doc.defaultView;
-		if (!win || this.hasTextSelection()) return;
-		this.clearTouchInteraction();
-		const events = new AbortController();
-		this.touchEvents = events;
-		const options = {
-			capture: true,
-			passive: true,
-			signal: events.signal
-		};
-		const dismiss = () => this.zone.run(() => this.hide());
-		let suppressReleaseClick = false;
-		doc.addEventListener("pointerdown", (event) => {
-			if (!press && event.target instanceof Node && source.contains(event.target)) return;
-			dismiss();
-		}, options);
-		doc.addEventListener("scroll", dismiss, options);
-		doc.addEventListener("visibilitychange", () => {
-			if (doc.hidden) dismiss();
-		}, options);
-		win.addEventListener("blur", dismiss, { signal: events.signal });
-		if (!press) {
-			this.touchVisible = true;
-			this.zone.run(() => this.show());
-			return;
-		}
-		doc.addEventListener("pointermove", (event) => {
-			if (event.pointerId === press.pointerId && !this.touchVisible && Math.hypot(event.clientX - press.clientX, event.clientY - press.clientY) > 10) dismiss();
-		}, options);
-		doc.addEventListener("pointerup", (event) => {
-			if (event.pointerId !== press.pointerId) return;
-			if (!this.touchVisible) dismiss();
-			else this.touchHideTimer = win.setTimeout(dismiss, 1500);
-		}, options);
-		doc.addEventListener("pointercancel", (event) => {
-			if (event.pointerId === press.pointerId) dismiss();
-		}, options);
-		doc.addEventListener("click", (event) => {
-			if (!suppressReleaseClick || event.detail === 0) return;
-			event.preventDefault();
-			event.stopImmediatePropagation();
-			suppressReleaseClick = false;
-		}, {
-			...options,
-			passive: false
+	close(restoreFocus = false) {
+		if (!this.overlayRef || !this.isOpen()) return;
+		const revision = ++this.revision;
+		const overlay = this.overlayRef;
+		this._isOpen.set(false);
+		this._state.set("closing");
+		const source = this.elementRef.nativeElement;
+		if (restoreFocus || overlay.overlayElement.contains(source.ownerDocument.activeElement)) source.focus({ preventScroll: true });
+		overlay.overlayElement.inert = true;
+		overlay.overlayElement.style.pointerEvents = "none";
+		const transition = this.transition;
+		if (transition && !this.a11y.isReducedMotion()) this.zone.runOutsideAngular(() => transition.exit()).then(() => {
+			if (revision === this.revision && !this.isOpen()) this.zone.run(() => this.dispose());
+		}).catch(() => {
+			if (revision === this.revision && !this.isOpen()) this.dispose();
 		});
-		doc.addEventListener("contextmenu", (event) => {
-			if (event.target instanceof Node && source.contains(event.target) && !this.hasTextSelection()) event.preventDefault();
-		}, {
-			...options,
-			passive: false
+		else this.dispose();
+	}
+	onDocumentClick(event) {
+		if (!this.overlayRef?.hasAttached() || !this.isOpen()) return;
+		const target = event.target;
+		if (!target || this.elementRef.nativeElement.contains(target)) return;
+		if (!this.overlayRef.overlayElement.contains(target) || this.bxTransition() === "none" || target instanceof Element && target.closest("button, a, [role=\"menuitem\"]")) this.close();
+	}
+	attachOverlay() {
+		const positionStrategy = this.positionBuilder.getElementStrategy(this.elementRef.nativeElement, this.placement(), 4);
+		const overlay = this.overlay.create({
+			positionStrategy,
+			scrollStrategy: this.overlay.scrollStrategies.noop(),
+			usePopover: !!this.overlayContext?.useTopLayer || !!this.elementRef.nativeElement.closest("dialog, [role=\"dialog\"], [role=\"alertdialog\"], bx-modal, bx-modal-core, [popover]"),
+			hasBackdrop: this.bxTransition() === "none",
+			backdropClass: "cdk-overlay-transparent-backdrop"
 		});
-		this.holdTimer = win.setTimeout(() => {
-			if (this.bxTooltipTouch() !== "longpress" || !source.isConnected || source.closest(":disabled, [aria-disabled=\"true\"], [inert]") || this.hasTextSelection()) {
-				dismiss();
-				return;
-			}
-			this.touchVisible = true;
-			suppressReleaseClick = true;
-			this.zone.run(() => this.show());
-		}, 500);
+		this.overlayRef = overlay;
+		this.overlayId.set(overlay.overlayElement.id || null);
+		this.disconnectTheme = this.zone.runOutsideAngular(() => inheritOverlayTheme(this.elementRef.nativeElement, overlay.overlayElement));
+		this.disconnectLighting = inheritGlassLighting(overlay.overlayElement, this.elementRef.nativeElement);
+		this.subscriptions = new Subscription();
+		this.subscriptions.add(this.zone.runOutsideAngular(() => trackOverlayOrigin(overlay, this.elementRef.nativeElement)));
+		this.subscriptions.add(overlay.backdropClick().subscribe(() => this.close()));
+		this.subscriptions.add(overlay.outsidePointerEvents().subscribe((event) => {
+			if (!this.elementRef.nativeElement.contains(event.target)) this.close();
+		}));
+		this.subscriptions.add(overlay.keydownEvents().subscribe((event) => {
+			if (event.key === "Escape" && this.isOpen()) {
+				event.preventDefault();
+				event.stopPropagation();
+				this.close(true);
+			} else if (!event.defaultPrevented && this.bxTransition() !== "none" && this.isOpen()) this.navigateMenu(event);
+		}));
+		this.subscriptions.add(positionStrategy.positionChanges.subscribe(() => {
+			this.zone.runOutsideAngular(() => this.transition?.refresh());
+		}));
+		overlay.attach(new TemplatePortal(this.bxDropdown(), this.vcr)).detectChanges();
+		overlay.updatePosition();
 	}
-	clearTouchInteraction() {
-		this.touchEvents?.abort();
-		this.touchEvents = void 0;
-		const win = this.elementRef.nativeElement.ownerDocument.defaultView;
-		win?.clearTimeout(this.holdTimer);
-		win?.clearTimeout(this.touchHideTimer);
-		this.holdTimer = void 0;
-		this.touchHideTimer = void 0;
-		this.touchVisible = false;
+	isDisabled() {
+		const element = this.elementRef.nativeElement;
+		return element.hasAttribute("disabled") || element.getAttribute("aria-disabled") === "true";
+	}
+	menuItems() {
+		const pane = this.overlayRef?.overlayElement;
+		if (!pane) return [];
+		return Array.from(pane.querySelectorAll("button, a[href], [role=\"menuitem\"]")).filter((item) => {
+			if (item.matches(":disabled, [disabled], [aria-disabled=\"true\"]") || item.closest("[aria-disabled=\"true\"]")) return false;
+			if (item.closest("[hidden], [inert], [aria-hidden=\"true\"]")) return false;
+			if (item.tabIndex < 0 && !item.hasAttribute("tabindex")) return false;
+			const style = item.ownerDocument.defaultView?.getComputedStyle(item);
+			return !!style && style.display !== "none" && style.visibility !== "hidden" && item.getClientRects().length > 0;
+		});
+	}
+	navigateMenu(event) {
+		if (this.isEditing(event.target) || !(event.target instanceof Node) || !this.overlayRef?.overlayElement.contains(event.target)) return;
+		if (![
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) return;
+		const items = this.menuItems();
+		if (!items.length) return;
+		const current = items.indexOf(this.elementRef.nativeElement.ownerDocument.activeElement);
+		let index;
+		if (event.key === "Home") index = 0;
+		else if (event.key === "End") index = items.length - 1;
+		else if (event.key === "ArrowDown") index = current < 0 ? 0 : (current + 1) % items.length;
+		else index = current < 0 ? items.length - 1 : (current - 1 + items.length) % items.length;
+		event.preventDefault();
+		event.stopPropagation();
+		items[index].focus({ preventScroll: true });
+	}
+	isEditing(target) {
+		return target instanceof Element && !!target.closest("input, textarea, select, [contenteditable]:not([contenteditable=\"false\"]), [role=\"textbox\"]");
 	}
 	dispose() {
-		this.keyboardSubscription?.unsubscribe();
-		this.keyboardSubscription = void 0;
-		this.positionSubscription?.unsubscribe();
-		this.positionSubscription = void 0;
 		this.disconnectTheme?.();
 		this.disconnectTheme = void 0;
 		this.transition?.destroy();
-		this.transition = void 0;
+		this.transition = null;
+		this.subscriptions.unsubscribe();
 		this.overlayRef?.dispose();
 		this.overlayRef = null;
 		this.disconnectLighting?.();
 		this.disconnectLighting = void 0;
+		this.overlayId.set(null);
+		this._isOpen.set(false);
+		this._state.set("closed");
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: DropdownDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.3",
+		type: DropdownDirective,
+		isStandalone: true,
+		selector: "[bxDropdown]",
+		inputs: {
+			bxDropdown: {
+				classPropertyName: "bxDropdown",
+				publicName: "bxDropdown",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			placement: {
+				classPropertyName: "placement",
+				publicName: "placement",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			bxTransition: {
+				classPropertyName: "bxTransition",
+				publicName: "bxTransition",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			listeners: {
+				"click": "toggle($event)",
+				"keydown": "onTriggerKeydown($event)",
+				"document:click": "onDocumentClick($event)"
+			},
+			properties: {
+				"attr.aria-expanded": "isOpen()",
+				"attr.aria-haspopup": "\"menu\"",
+				"attr.aria-controls": "overlayId()"
+			}
+		},
+		exportAs: ["bxDropdown"],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: DropdownDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[bxDropdown]",
+			exportAs: "bxDropdown",
+			standalone: true,
+			host: {
+				"[attr.aria-expanded]": "isOpen()",
+				"[attr.aria-haspopup]": "\"menu\"",
+				"[attr.aria-controls]": "overlayId()"
+			}
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		bxDropdown: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "bxDropdown",
+				required: true
+			}]
+		}],
+		placement: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placement",
+				required: false
+			}]
+		}],
+		bxTransition: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "bxTransition",
+				required: false
+			}]
+		}],
+		toggle: [{
+			type: HostListener,
+			args: ["click", ["$event"]]
+		}],
+		onTriggerKeydown: [{
+			type: HostListener,
+			args: ["keydown", ["$event"]]
+		}],
+		onDocumentClick: [{
+			type: HostListener,
+			args: ["document:click", ["$event"]]
+		}]
+	}
+});
+var BxOverlayContextDirective = class BxOverlayContextDirective {
+	bxOverlayContext = input({}, ...ngDevMode ? [{ debugName: "bxOverlayContext" }] : /* istanbul ignore next */ []);
+	get useTopLayer() {
+		return this.bxOverlayContext().useTopLayer;
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.2.3",
 		ngImport: i0,
-		type: TooltipDirective,
+		type: BxOverlayContextDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.3",
+		type: BxOverlayContextDirective,
+		isStandalone: true,
+		selector: "[bxOverlayContext]",
+		inputs: { bxOverlayContext: {
+			classPropertyName: "bxOverlayContext",
+			publicName: "bxOverlayContext",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		providers: [{
+			provide: BX_OVERLAY_CONTEXT,
+			useExisting: forwardRef(() => BxOverlayContextDirective)
+		}],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: BxOverlayContextDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[bxOverlayContext]",
+			standalone: true,
+			providers: [{
+				provide: BX_OVERLAY_CONTEXT,
+				useExisting: forwardRef(() => BxOverlayContextDirective)
+			}]
+		}]
+	}],
+	propDecorators: { bxOverlayContext: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "bxOverlayContext",
+			required: false
+		}]
+	}] }
+});
+var LoadingSpinner = class LoadingSpinner {
+	i18n = inject(BX_I18N, { optional: true });
+	a11y = inject(BxA11yService);
+	resolvedLabel = computed(() => resolveText(this.label(), this.i18n), ...ngDevMode ? [{ debugName: "resolvedLabel" }] : /* istanbul ignore next */ []);
+	size = input(20, ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	decorative = input(false, ...ngDevMode ? [{ debugName: "decorative" }] : /* istanbul ignore next */ []);
+	label = input("Loading", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: LoadingSpinner,
 		deps: [],
-		target: i0.ɵɵFactoryTarget.Directive
+		target: i0.ɵɵFactoryTarget.Component
 	});
-	static ɵdir = i0.ɵɵngDeclareDirective({
+	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.1.0",
 		version: "22.2.3",
-		type: TooltipDirective,
+		type: LoadingSpinner,
 		isStandalone: true,
-		selector: "[bxTooltip]",
+		selector: "bx-loading-spinner",
 		inputs: {
-			bxTooltip: {
-				classPropertyName: "bxTooltip",
-				publicName: "bxTooltip",
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
 				isSignal: true,
-				isRequired: true,
+				isRequired: false,
 				transformFunction: null
 			},
-			placement: {
-				classPropertyName: "placement",
-				publicName: "placement",
+			decorative: {
+				classPropertyName: "decorative",
+				publicName: "decorative",
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
 			},
-			bxTooltipTouch: {
-				classPropertyName: "bxTooltipTouch",
-				publicName: "bxTooltipTouch",
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
 			}
 		},
-		host: { listeners: {
-			"pointerenter": "onEnter($event)",
-			"pointerleave": "onLeave($event)",
-			"pointerdown": "onPointerDown($event)",
-			"click": "onClick($event)",
-			"document:keydown": "onEscape($event)"
+		host: { properties: {
+			"style.--bx-spinner-size": "size() + \"px\"",
+			"attr.role": "decorative() ? null : \"status\"",
+			"attr.aria-label": "decorative() ? null : resolvedLabel()",
+			"attr.aria-hidden": "decorative() ? \"true\" : null",
+			"class.is-reduced-motion": "a11y.isReducedMotion()"
 		} },
-		ngImport: i0
+		ngImport: i0,
+		template: "<span class=\"bx-spinner-ring\"></span>\n",
+		styles: [":host{display:inline-flex;flex:0 0 auto;inline-size:var(--bx-spinner-size, 20px);block-size:var(--bx-spinner-size, 20px);color:var(--bx-spinner-color, currentColor);vertical-align:middle}.bx-spinner-ring{box-sizing:border-box;inline-size:100%;block-size:100%;border:var(--bx-spinner-stroke, 2px) solid currentcolor;border-inline-end-color:transparent;border-radius:50%;animation:bx-spinner-turn .75s linear infinite}:host(.is-reduced-motion) .bx-spinner-ring{animation:none;border-style:dotted}@keyframes bx-spinner-turn{to{transform:rotate(360deg)}}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
 	});
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
 	version: "22.2.3",
 	ngImport: i0,
-	type: TooltipDirective,
+	type: LoadingSpinner,
 	decorators: [{
-		type: Directive,
-		args: [{ selector: "[bxTooltip]" }]
+		type: Component,
+		args: [{
+			selector: "bx-loading-spinner",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				"[style.--bx-spinner-size]": "size() + \"px\"",
+				"[attr.role]": "decorative() ? null : \"status\"",
+				"[attr.aria-label]": "decorative() ? null : resolvedLabel()",
+				"[attr.aria-hidden]": "decorative() ? \"true\" : null",
+				"[class.is-reduced-motion]": "a11y.isReducedMotion()"
+			},
+			template: "<span class=\"bx-spinner-ring\"></span>\n",
+			styles: [":host{display:inline-flex;flex:0 0 auto;inline-size:var(--bx-spinner-size, 20px);block-size:var(--bx-spinner-size, 20px);color:var(--bx-spinner-color, currentColor);vertical-align:middle}.bx-spinner-ring{box-sizing:border-box;inline-size:100%;block-size:100%;border:var(--bx-spinner-stroke, 2px) solid currentcolor;border-inline-end-color:transparent;border-radius:50%;animation:bx-spinner-turn .75s linear infinite}:host(.is-reduced-motion) .bx-spinner-ring{animation:none;border-style:dotted}@keyframes bx-spinner-turn{to{transform:rotate(360deg)}}\n"]
+		}]
 	}],
-	ctorParameters: () => [],
 	propDecorators: {
-		bxTooltip: [{
+		size: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "bxTooltip",
-				required: true
+				alias: "size",
+				required: false
 			}]
 		}],
-		placement: [{
+		decorative: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "placement",
+				alias: "decorative",
 				required: false
 			}]
 		}],
-		bxTooltipTouch: [{
+		label: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "bxTooltipTouch",
+				alias: "label",
 				required: false
 			}]
-		}],
-		onEnter: [{
-			type: HostListener,
-			args: ["pointerenter", ["$event"]]
-		}],
-		onLeave: [{
-			type: HostListener,
-			args: ["pointerleave", ["$event"]]
-		}],
-		onPointerDown: [{
-			type: HostListener,
-			args: ["pointerdown", ["$event"]]
-		}],
-		onClick: [{
-			type: HostListener,
-			args: ["click", ["$event"]]
-		}],
-		onEscape: [{
-			type: HostListener,
-			args: ["document:keydown", ["$event"]]
 		}]
 	}
 });
-var DropdownDirective = class DropdownDirective {
-	elementRef = inject(ElementRef);
-	overlay = inject(Overlay);
-	positionBuilder = inject(BxOverlayPositionService);
-	overlayContext = inject(BX_OVERLAY_CONTEXT, { optional: true });
-	a11y = inject(BxA11yService);
-	zone = inject(NgZone);
-	vcr = inject(ViewContainerRef);
-	isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
-	_isOpen = signal(false, ...ngDevMode ? [{ debugName: "_isOpen" }] : /* istanbul ignore next */ []);
-	overlayId = signal(null, ...ngDevMode ? [{ debugName: "overlayId" }] : /* istanbul ignore next */ []);
-	isOpen = this._isOpen.asReadonly();
-	_state = signal("closed", ...ngDevMode ? [{ debugName: "_state" }] : /* istanbul ignore next */ []);
-	state = this._state.asReadonly();
-	bxDropdown = input.required(...ngDevMode ? [{ debugName: "bxDropdown" }] : /* istanbul ignore next */ []);
-	placement = input("bottom", ...ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []);
-	bxTransition = input("fade", ...ngDevMode ? [{ debugName: "bxTransition" }] : /* istanbul ignore next */ []);
-	overlayRef = null;
-	transition = null;
-	subscriptions = new Subscription();
-	revision = 0;
-	disconnectTheme;
-	disconnectLighting;
-	constructor() {
-		inject(DestroyRef).onDestroy(() => {
-			++this.revision;
-			this.dispose();
-		});
-		effect(() => {
-			if (this.a11y.isReducedMotion() && this.transition) {
-				++this.revision;
-				this.transition.destroy();
-				this.transition = null;
-				if (this.isOpen()) this._state.set("open");
-				else this.dispose();
-			}
-		});
-	}
-	toggle(event) {
-		if (this.isDisabled()) return;
-		event?.stopPropagation();
-		if (this.isOpen()) this.close();
-		else this.open();
-	}
-	onTriggerKeydown(event) {
-		if (this.bxTransition() === "none" || this.isDisabled() || this.isEditing(event.target)) return;
-		if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
-		event.preventDefault();
-		event.stopPropagation();
-		this.open();
-		const items = this.menuItems();
-		(event.key === "ArrowUp" ? items[items.length - 1] : items[0])?.focus({ preventScroll: true });
-	}
-	open() {
-		if (!this.isBrowser || this.isOpen() || this.isDisabled()) return;
-		const revision = ++this.revision;
-		this._isOpen.set(true);
-		this._state.set("opening");
-		if (!this.overlayRef) this.attachOverlay();
-		const overlay = this.overlayRef;
-		if (!overlay) return;
-		overlay.overlayElement.inert = false;
-		overlay.overlayElement.style.removeProperty("pointer-events");
-		if (this.bxTransition() !== "none" && !this.a11y.isReducedMotion()) {
-			const transition = this.transition ??= this.zone.runOutsideAngular(() => createGlassTransition(this.elementRef.nativeElement, overlay.overlayElement));
-			this.zone.runOutsideAngular(() => transition.enter()).then(() => {
-				if (revision === this.revision && this.isOpen()) this.zone.run(() => this._state.set("open"));
-			}).catch(() => {
-				if (revision === this.revision && this.isOpen()) {
-					this.transition?.destroy();
-					this.transition = null;
-					this._state.set("open");
-				}
-			});
-		} else this._state.set("open");
-	}
-	close(restoreFocus = false) {
-		if (!this.overlayRef || !this.isOpen()) return;
-		const revision = ++this.revision;
-		const overlay = this.overlayRef;
-		this._isOpen.set(false);
-		this._state.set("closing");
-		const source = this.elementRef.nativeElement;
-		if (restoreFocus || overlay.overlayElement.contains(source.ownerDocument.activeElement)) source.focus({ preventScroll: true });
-		overlay.overlayElement.inert = true;
-		overlay.overlayElement.style.pointerEvents = "none";
-		const transition = this.transition;
-		if (transition && !this.a11y.isReducedMotion()) this.zone.runOutsideAngular(() => transition.exit()).then(() => {
-			if (revision === this.revision && !this.isOpen()) this.zone.run(() => this.dispose());
-		}).catch(() => {
-			if (revision === this.revision && !this.isOpen()) this.dispose();
-		});
-		else this.dispose();
-	}
-	onDocumentClick(event) {
-		if (!this.overlayRef?.hasAttached() || !this.isOpen()) return;
-		const target = event.target;
-		if (!target || this.elementRef.nativeElement.contains(target)) return;
-		if (!this.overlayRef.overlayElement.contains(target) || this.bxTransition() === "none" || target instanceof Element && target.closest("button, a, [role=\"menuitem\"]")) this.close();
-	}
-	attachOverlay() {
-		const positionStrategy = this.positionBuilder.getElementStrategy(this.elementRef.nativeElement, this.placement(), 4);
-		const overlay = this.overlay.create({
-			positionStrategy,
-			scrollStrategy: this.overlay.scrollStrategies.noop(),
-			usePopover: !!this.overlayContext?.useTopLayer || !!this.elementRef.nativeElement.closest("dialog, [role=\"dialog\"], [role=\"alertdialog\"], bx-modal, bx-modal-core, [popover]"),
-			hasBackdrop: this.bxTransition() === "none",
-			backdropClass: "cdk-overlay-transparent-backdrop"
-		});
-		this.overlayRef = overlay;
-		this.overlayId.set(overlay.overlayElement.id || null);
-		this.disconnectTheme = this.zone.runOutsideAngular(() => inheritOverlayTheme(this.elementRef.nativeElement, overlay.overlayElement));
-		this.disconnectLighting = inheritGlassLighting(overlay.overlayElement, this.elementRef.nativeElement);
-		this.subscriptions = new Subscription();
-		this.subscriptions.add(this.zone.runOutsideAngular(() => trackOverlayOrigin(overlay, this.elementRef.nativeElement)));
-		this.subscriptions.add(overlay.backdropClick().subscribe(() => this.close()));
-		this.subscriptions.add(overlay.outsidePointerEvents().subscribe((event) => {
-			if (!this.elementRef.nativeElement.contains(event.target)) this.close();
-		}));
-		this.subscriptions.add(overlay.keydownEvents().subscribe((event) => {
-			if (event.key === "Escape" && this.isOpen()) {
-				event.preventDefault();
-				event.stopPropagation();
-				this.close(true);
-			} else if (!event.defaultPrevented && this.bxTransition() !== "none" && this.isOpen()) this.navigateMenu(event);
-		}));
-		this.subscriptions.add(positionStrategy.positionChanges.subscribe(() => {
-			this.zone.runOutsideAngular(() => this.transition?.refresh());
-		}));
-		overlay.attach(new TemplatePortal(this.bxDropdown(), this.vcr)).detectChanges();
-		overlay.updatePosition();
-	}
-	isDisabled() {
-		const element = this.elementRef.nativeElement;
-		return element.hasAttribute("disabled") || element.getAttribute("aria-disabled") === "true";
-	}
-	menuItems() {
-		const pane = this.overlayRef?.overlayElement;
-		if (!pane) return [];
-		return Array.from(pane.querySelectorAll("button, a[href], [role=\"menuitem\"]")).filter((item) => {
-			if (item.matches(":disabled, [disabled], [aria-disabled=\"true\"]") || item.closest("[aria-disabled=\"true\"]")) return false;
-			if (item.closest("[hidden], [inert], [aria-hidden=\"true\"]")) return false;
-			if (item.tabIndex < 0 && !item.hasAttribute("tabindex")) return false;
-			const style = item.ownerDocument.defaultView?.getComputedStyle(item);
-			return !!style && style.display !== "none" && style.visibility !== "hidden" && item.getClientRects().length > 0;
-		});
+var LoadingIndicator = class LoadingIndicator {
+	i18n = inject(BX_I18N, { optional: true });
+	resolvedLabel = computed(() => resolveText(this.label(), this.i18n), ...ngDevMode ? [{ debugName: "resolvedLabel" }] : /* istanbul ignore next */ []);
+	label = input("Loading", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	size = input(20, ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: LoadingIndicator,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.3",
+		type: LoadingIndicator,
+		isStandalone: true,
+		selector: "bx-loading-indicator",
+		inputs: {
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { attributes: {
+			"role": "status",
+			"aria-live": "polite",
+			"aria-busy": "true"
+		} },
+		ngImport: i0,
+		template: "<bx-loading-spinner [size]=\"size()\" [decorative]=\"true\" />\n<span>{{ resolvedLabel() }}</span>\n<ng-content />\n",
+		styles: [":host{display:inline-flex;align-items:center;gap:var(--bx-loading-gap, .5rem);color:var(--bx-loading-color, var(--bx-text-secondary));font:inherit;overflow-wrap:anywhere}\n"],
+		dependencies: [{
+			kind: "component",
+			type: LoadingSpinner,
+			selector: "bx-loading-spinner",
+			inputs: [
+				"size",
+				"decorative",
+				"label"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: LoadingIndicator,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "bx-loading-indicator",
+			imports: [LoadingSpinner],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				role: "status",
+				"aria-live": "polite",
+				"aria-busy": "true"
+			},
+			template: "<bx-loading-spinner [size]=\"size()\" [decorative]=\"true\" />\n<span>{{ resolvedLabel() }}</span>\n<ng-content />\n",
+			styles: [":host{display:inline-flex;align-items:center;gap:var(--bx-loading-gap, .5rem);color:var(--bx-loading-color, var(--bx-text-secondary));font:inherit;overflow-wrap:anywhere}\n"]
+		}]
+	}],
+	propDecorators: {
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}]
 	}
-	navigateMenu(event) {
-		if (this.isEditing(event.target) || !(event.target instanceof Node) || !this.overlayRef?.overlayElement.contains(event.target)) return;
-		if (![
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) return;
-		const items = this.menuItems();
-		if (!items.length) return;
-		const current = items.indexOf(this.elementRef.nativeElement.ownerDocument.activeElement);
-		let index;
-		if (event.key === "Home") index = 0;
-		else if (event.key === "End") index = items.length - 1;
-		else if (event.key === "ArrowDown") index = current < 0 ? 0 : (current + 1) % items.length;
-		else index = current < 0 ? items.length - 1 : (current - 1 + items.length) % items.length;
-		event.preventDefault();
-		event.stopPropagation();
-		items[index].focus({ preventScroll: true });
+});
+var ProgressBar = class ProgressBar {
+	i18n = inject(BX_I18N, { optional: true });
+	a11y = inject(BxA11yService);
+	resolvedLabel = computed(() => resolveText(this.label(), this.i18n), ...ngDevMode ? [{ debugName: "resolvedLabel" }] : /* istanbul ignore next */ []);
+	progress = computed(() => Number.isFinite(this.value()) ? Math.min(100, Math.max(0, this.value())) : 0, ...ngDevMode ? [{ debugName: "progress" }] : /* istanbul ignore next */ []);
+	buffer = computed(() => Math.max(this.progress(), Number.isFinite(this.bufferValue()) ? Math.min(100, Math.max(0, this.bufferValue())) : 0), ...ngDevMode ? [{ debugName: "buffer" }] : /* istanbul ignore next */ []);
+	indeterminate = computed(() => this.mode() === "indeterminate" || this.mode() === "query", ...ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []);
+	mode = input("determinate", ...ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []);
+	value = input(0, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	bufferValue = input(100, ...ngDevMode ? [{ debugName: "bufferValue" }] : /* istanbul ignore next */ []);
+	label = input("Progress", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: ProgressBar,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: ProgressBar,
+		isStandalone: true,
+		selector: "bx-progress-bar",
+		inputs: {
+			mode: {
+				classPropertyName: "mode",
+				publicName: "mode",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			bufferValue: {
+				classPropertyName: "bufferValue",
+				publicName: "bufferValue",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: {
+				"role": "progressbar",
+				"aria-valuemin": "0",
+				"aria-valuemax": "100"
+			},
+			properties: {
+				"attr.aria-valuenow": "indeterminate() ? null : progress()",
+				"attr.aria-label": "resolvedLabel()",
+				"class.is-indeterminate": "indeterminate()",
+				"class.is-reduced-motion": "a11y.isReducedMotion()",
+				"class.is-query": "mode() === \"query\""
+			}
+		},
+		ngImport: i0,
+		template: "@if (mode() === 'buffer') {\n<span class=\"bx-progress-buffer\" [style.width.%]=\"buffer()\"></span>\n}\n<span class=\"bx-progress-value\" [style.width.%]=\"indeterminate() ? 40 : progress()\"></span>\n",
+		styles: [":host{display:block;position:relative;inline-size:100%;block-size:var(--bx-progress-height, 4px);overflow:hidden;border-radius:var(--bx-progress-radius, 9999px);background:var(--bx-progress-track, var(--bx-bg-element))}.bx-progress-value,.bx-progress-buffer{display:block;position:absolute;inset-block:0;inset-inline-start:0;background:var(--bx-progress-color, var(--bx-accent))}.bx-progress-buffer{opacity:.3}:host(.is-indeterminate) .bx-progress-value{animation:bx-progress-travel 1.3s ease-in-out infinite}:host(.is-query){transform:scaleX(-1)}:host(:dir(rtl)) .bx-progress-value{animation-direction:reverse}:host(.is-reduced-motion) .bx-progress-value{animation:none}@media(forced-colors:active){:host{background:Canvas;outline:1px solid CanvasText}.bx-progress-value,.bx-progress-buffer{background:Highlight}}@keyframes bx-progress-travel{0%{inset-inline-start:-40%}to{inset-inline-start:100%}}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: ProgressBar,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "bx-progress-bar",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				role: "progressbar",
+				"aria-valuemin": "0",
+				"aria-valuemax": "100",
+				"[attr.aria-valuenow]": "indeterminate() ? null : progress()",
+				"[attr.aria-label]": "resolvedLabel()",
+				"[class.is-indeterminate]": "indeterminate()",
+				"[class.is-reduced-motion]": "a11y.isReducedMotion()",
+				"[class.is-query]": "mode() === \"query\""
+			},
+			template: "@if (mode() === 'buffer') {\n<span class=\"bx-progress-buffer\" [style.width.%]=\"buffer()\"></span>\n}\n<span class=\"bx-progress-value\" [style.width.%]=\"indeterminate() ? 40 : progress()\"></span>\n",
+			styles: [":host{display:block;position:relative;inline-size:100%;block-size:var(--bx-progress-height, 4px);overflow:hidden;border-radius:var(--bx-progress-radius, 9999px);background:var(--bx-progress-track, var(--bx-bg-element))}.bx-progress-value,.bx-progress-buffer{display:block;position:absolute;inset-block:0;inset-inline-start:0;background:var(--bx-progress-color, var(--bx-accent))}.bx-progress-buffer{opacity:.3}:host(.is-indeterminate) .bx-progress-value{animation:bx-progress-travel 1.3s ease-in-out infinite}:host(.is-query){transform:scaleX(-1)}:host(:dir(rtl)) .bx-progress-value{animation-direction:reverse}:host(.is-reduced-motion) .bx-progress-value{animation:none}@media(forced-colors:active){:host{background:Canvas;outline:1px solid CanvasText}.bx-progress-value,.bx-progress-buffer{background:Highlight}}@keyframes bx-progress-travel{0%{inset-inline-start:-40%}to{inset-inline-start:100%}}\n"]
+		}]
+	}],
+	propDecorators: {
+		mode: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "mode",
+				required: false
+			}]
+		}],
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}],
+		bufferValue: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "bufferValue",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}]
 	}
-	isEditing(target) {
-		return target instanceof Element && !!target.closest("input, textarea, select, [contenteditable]:not([contenteditable=\"false\"]), [role=\"textbox\"]");
+});
+const TAG_PALETTES = {
+	primary: {
+		text: "var(--bx-text-brand)",
+		fill: "var(--bx-primary)",
+		onFill: "var(--bx-on-primary)",
+		tonal: "var(--bx-primary-subtle)",
+		border: "var(--bx-border-brand)"
+	},
+	accent: {
+		text: "var(--bx-text-accent)",
+		fill: "var(--bx-accent)",
+		onFill: "var(--bx-on-accent)",
+		tonal: "var(--bx-accent-subtle)",
+		border: "var(--bx-border-accent)"
+	},
+	neutral: {
+		text: "var(--bx-text-primary)",
+		fill: "var(--bx-bg-element-active)",
+		onFill: "var(--bx-text-primary)",
+		tonal: "var(--bx-bg-element)",
+		border: "var(--bx-border-strong)"
+	},
+	success: {
+		text: "var(--bx-text-success)",
+		fill: "var(--bx-bg-success)",
+		onFill: "var(--bx-text-success)",
+		tonal: "var(--bx-bg-success-subtle)",
+		border: "var(--bx-border-success)"
+	},
+	danger: {
+		text: "var(--bx-text-danger)",
+		fill: "var(--bx-bg-danger)",
+		onFill: "var(--bx-text-danger)",
+		tonal: "var(--bx-bg-danger-subtle)",
+		border: "var(--bx-border-danger)"
+	},
+	info: {
+		text: "var(--bx-text-info)",
+		fill: "var(--bx-bg-info)",
+		onFill: "var(--bx-text-info)",
+		tonal: "var(--bx-bg-info-subtle)",
+		border: "var(--bx-border-info)"
+	},
+	warn: {
+		text: "var(--bx-text-warn)",
+		fill: "var(--bx-bg-warn)",
+		onFill: "var(--bx-text-warn)",
+		tonal: "var(--bx-bg-warn-subtle)",
+		border: "var(--bx-border-warn)"
 	}
-	dispose() {
-		this.disconnectTheme?.();
-		this.disconnectTheme = void 0;
-		this.transition?.destroy();
-		this.transition = null;
-		this.subscriptions.unsubscribe();
-		this.overlayRef?.dispose();
-		this.overlayRef = null;
-		this.disconnectLighting?.();
-		this.disconnectLighting = void 0;
-		this.overlayId.set(null);
-		this._isOpen.set(false);
-		this._state.set("closed");
+};
+function formatTagNumber(value, locale) {
+	if (value === void 0 || value === null) return "";
+	if (typeof value === "string") return value;
+	if (!Number.isFinite(value)) return "";
+	try {
+		return new Intl.NumberFormat(locale).format(value);
+	} catch {
+		return String(value);
 	}
+}
+var Tag = class Tag {
+	i18n = inject(BX_I18N, { optional: true });
+	textOverflow = viewChild(TruncateDirective, ...ngDevMode ? [{ debugName: "textOverflow" }] : /* istanbul ignore next */ []);
+	resolvedText = computed(() => resolveText(this.text(), this.i18n), ...ngDevMode ? [{ debugName: "resolvedText" }] : /* istanbul ignore next */ []);
+	resolvedTooltip = computed(() => {
+		const tooltip = this.tooltip() ?? this.config().tooltip;
+		return tooltip !== void 0 ? resolveText(tooltip, this.i18n) : truncatedText(this.resolvedText(), this.textOverflow()?.truncated() ?? false, this.tooltipOnTruncate() ?? this.config().tooltipOnTruncate ?? true);
+	}, ...ngDevMode ? [{ debugName: "resolvedTooltip" }] : /* istanbul ignore next */ []);
+	resolvedAriaLabel = computed(() => resolveText(this.ariaLabel(), this.i18n), ...ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : /* istanbul ignore next */ []);
+	resolvedVariant = computed(() => this.variant() ?? this.config().variant ?? "tonal", ...ngDevMode ? [{ debugName: "resolvedVariant" }] : /* istanbul ignore next */ []);
+	resolvedSize = computed(() => this.size() ?? this.config().size ?? "medium", ...ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []);
+	resolvedLeadingIcon = computed(() => this.leadingIcon() ?? this.config().leadingIcon, ...ngDevMode ? [{ debugName: "resolvedLeadingIcon" }] : /* istanbul ignore next */ []);
+	resolvedTrailingIcon = computed(() => this.trailingIcon() ?? this.config().trailingIcon, ...ngDevMode ? [{ debugName: "resolvedTrailingIcon" }] : /* istanbul ignore next */ []);
+	resolvedIconSize = computed(() => this.iconSize() ?? this.config().iconSize ?? "16", ...ngDevMode ? [{ debugName: "resolvedIconSize" }] : /* istanbul ignore next */ []);
+	resolvedLeadingNumber = computed(() => {
+		this.i18n?.version?.();
+		return formatTagNumber(this.leadingNumber() === void 0 ? this.config().leadingNumber : this.leadingNumber(), this.locale());
+	}, ...ngDevMode ? [{ debugName: "resolvedLeadingNumber" }] : /* istanbul ignore next */ []);
+	resolvedTrailingNumber = computed(() => {
+		this.i18n?.version?.();
+		return formatTagNumber(this.trailingNumber() === void 0 ? this.config().trailingNumber : this.trailingNumber(), this.locale());
+	}, ...ngDevMode ? [{ debugName: "resolvedTrailingNumber" }] : /* istanbul ignore next */ []);
+	palette = computed(() => TAG_PALETTES[this.color() ?? this.config().color ?? "accent"], ...ngDevMode ? [{ debugName: "palette" }] : /* istanbul ignore next */ []);
+	isNumberOnly = computed(() => !this.resolvedText() && !this.resolvedLeadingIcon() && !this.resolvedTrailingIcon() && !!this.resolvedLeadingNumber() !== !!this.resolvedTrailingNumber(), ...ngDevMode ? [{ debugName: "isNumberOnly" }] : /* istanbul ignore next */ []);
+	text = input(void 0, ...ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []);
+	config = input({}, ...ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []);
+	color = input(void 0, ...ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []);
+	variant = input(void 0, ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	size = input(void 0, ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	leadingIcon = input(void 0, ...ngDevMode ? [{ debugName: "leadingIcon" }] : /* istanbul ignore next */ []);
+	trailingIcon = input(void 0, ...ngDevMode ? [{ debugName: "trailingIcon" }] : /* istanbul ignore next */ []);
+	iconSize = input(void 0, ...ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []);
+	leadingNumber = input(void 0, ...ngDevMode ? [{ debugName: "leadingNumber" }] : /* istanbul ignore next */ []);
+	trailingNumber = input(void 0, ...ngDevMode ? [{ debugName: "trailingNumber" }] : /* istanbul ignore next */ []);
+	locale = input(void 0, ...ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []);
+	tooltip = input(void 0, ...ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []);
+	tooltipOnTruncate = input(void 0, ...ngDevMode ? [{ debugName: "tooltipOnTruncate" }] : /* istanbul ignore next */ []);
+	tooltipPlacement = input("top", ...ngDevMode ? [{ debugName: "tooltipPlacement" }] : /* istanbul ignore next */ []);
+	ariaLabel = input(void 0, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	focusable = input(true, ...ngDevMode ? [{ debugName: "focusable" }] : /* istanbul ignore next */ []);
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.2.3",
 		ngImport: i0,
-		type: DropdownDirective,
+		type: Tag,
 		deps: [],
-		target: i0.ɵɵFactoryTarget.Directive
+		target: i0.ɵɵFactoryTarget.Component
 	});
-	static ɵdir = i0.ɵɵngDeclareDirective({
-		minVersion: "17.1.0",
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
 		version: "22.2.3",
-		type: DropdownDirective,
+		type: Tag,
 		isStandalone: true,
-		selector: "[bxDropdown]",
+		selector: "bx-tag",
 		inputs: {
-			bxDropdown: {
-				classPropertyName: "bxDropdown",
-				publicName: "bxDropdown",
+			text: {
+				classPropertyName: "text",
+				publicName: "text",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			config: {
+				classPropertyName: "config",
+				publicName: "config",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			color: {
+				classPropertyName: "color",
+				publicName: "color",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			leadingIcon: {
+				classPropertyName: "leadingIcon",
+				publicName: "leadingIcon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			trailingIcon: {
+				classPropertyName: "trailingIcon",
+				publicName: "trailingIcon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			iconSize: {
+				classPropertyName: "iconSize",
+				publicName: "iconSize",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			leadingNumber: {
+				classPropertyName: "leadingNumber",
+				publicName: "leadingNumber",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			trailingNumber: {
+				classPropertyName: "trailingNumber",
+				publicName: "trailingNumber",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			locale: {
+				classPropertyName: "locale",
+				publicName: "locale",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			tooltip: {
+				classPropertyName: "tooltip",
+				publicName: "tooltip",
 				isSignal: true,
-				isRequired: true,
+				isRequired: false,
 				transformFunction: null
 			},
-			placement: {
-				classPropertyName: "placement",
-				publicName: "placement",
+			tooltipOnTruncate: {
+				classPropertyName: "tooltipOnTruncate",
+				publicName: "tooltipOnTruncate",
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
 			},
-			bxTransition: {
-				classPropertyName: "bxTransition",
-				publicName: "bxTransition",
+			tooltipPlacement: {
+				classPropertyName: "tooltipPlacement",
+				publicName: "tooltipPlacement",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			focusable: {
+				classPropertyName: "focusable",
+				publicName: "focusable",
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
 			}
 		},
-		host: {
-			listeners: {
-				"click": "toggle($event)",
-				"keydown": "onTriggerKeydown($event)",
-				"document:click": "onDocumentClick($event)"
+		host: { properties: {
+			"style.--bx-tag-role-text": "palette().text",
+			"style.--bx-tag-role-fill": "palette().fill",
+			"style.--bx-tag-role-on-fill": "palette().onFill",
+			"style.--bx-tag-role-tonal": "palette().tonal",
+			"style.--bx-tag-role-border": "palette().border"
+		} },
+		viewQueries: [{
+			propertyName: "textOverflow",
+			first: true,
+			predicate: TruncateDirective,
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<span class=\"bx-tag\" bxSurface [bxSurfaceInteractive]=\"false\"\n    [class.is-filled]=\"resolvedVariant() === 'filled'\" [class.is-outlined]=\"resolvedVariant() === 'outlined'\"\n    [class.is-small]=\"resolvedSize() === 'small'\" [class.is-disabled]=\"disabled()\" [class.is-number-only]=\"isNumberOnly()\"\n    [attr.aria-disabled]=\"disabled() ? 'true' : null\" [attr.role]=\"resolvedAriaLabel() ? 'group' : null\" [attr.aria-label]=\"resolvedAriaLabel() || null\"\n    [attr.tabindex]=\"resolvedTooltip() && focusable() ? 0 : null\" [bxTooltip]=\"resolvedTooltip()\" [placement]=\"tooltipPlacement()\" bxTooltipTouch=\"longpress\">\n    @if (resolvedLeadingIcon(); as icon) { <bx-icon [name]=\"icon\" [size]=\"resolvedIconSize()\" /> }\n    @if (resolvedLeadingNumber()) { <span class=\"bx-tag-number\">{{ resolvedLeadingNumber() }}</span> }\n    @if (resolvedText()) { <span class=\"bx-tag-text\" bxTruncate>{{ resolvedText() }}</span> }\n    @if (resolvedTrailingNumber()) { <span class=\"bx-tag-number\">{{ resolvedTrailingNumber() }}</span> }\n    @if (resolvedTrailingIcon(); as icon) { <bx-icon [name]=\"icon\" [size]=\"resolvedIconSize()\" /> }\n</span>\n",
+		styles: [":host{display:inline-flex;min-inline-size:0;max-inline-size:100%;vertical-align:middle}.bx-tag{--bx-glass-surface: var(--bx-tag-background, var(--bx-tag-role-tonal));--bx-glass-text: var(--bx-tag-color, var(--bx-tag-role-text));--bx-glass-edge: var(--bx-tag-border, var(--bx-tag-role-border));--bx-glass-radius: var(--bx-tag-radius, .25rem);--bx-glass-shadow: var(--bx-tag-shadow, none);position:relative;display:inline-flex;align-items:center;justify-content:center;min-inline-size:0;max-inline-size:100%;box-sizing:border-box;gap:var(--bx-tag-gap, .25rem);padding:var(--bx-tag-padding, .25rem .5rem);border:1px solid var(--bx-glass-edge);border-radius:var(--bx-glass-radius);background:var(--bx-glass-surface);color:var(--bx-glass-text);font:inherit;font-size:var(--bx-tag-font-size, .8125rem);line-height:1.4;white-space:nowrap}.bx-tag.is-filled{--bx-glass-surface: var(--bx-tag-background, var(--bx-tag-role-fill));--bx-glass-text: var(--bx-tag-color, var(--bx-tag-role-on-fill));--bx-glass-min-opacity: var(--bx-tag-fill-opacity, .85)}.bx-tag.is-outlined{--bx-glass-surface: var(--bx-tag-background, var(--bx-bg-surface));--bx-glass-opacity: var(--bx-tag-outline-opacity, .12)}.bx-tag.is-small{font-size:var(--bx-tag-font-size, .75rem);padding-block:.125rem}.bx-tag.is-disabled{opacity:var(--bx-tag-disabled-opacity, .5)}.bx-tag.is-number-only{--bx-glass-radius: 50%;inline-size:max-content;min-inline-size:var(--bx-tag-number-size, 1.875rem);aspect-ratio:1;padding:var(--bx-tag-number-padding, .35em)}.bx-tag.is-number-only.is-small{min-inline-size:var(--bx-tag-number-size, 1.5rem)}.bx-tag:focus-visible{outline:2px solid var(--bx-border-brand);outline-offset:2px}.bx-tag-number{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-inline-size:1.1em;padding-inline:.25em;border-radius:var(--bx-tag-counter-radius, .25rem);background:var(--bx-tag-counter-background, color-mix(in srgb, currentcolor 12%, transparent));font-variant-numeric:tabular-nums}.is-number-only .bx-tag-number{background:transparent;padding:0}@media(forced-colors:active){.bx-tag.is-disabled{color:GrayText;border-color:GrayText;opacity:1}}\n"],
+		dependencies: [
+			{
+				kind: "component",
+				type: Icon,
+				selector: "bx-icon",
+				inputs: [
+					"name",
+					"size",
+					"color",
+					"bgColor",
+					"strokeWidth",
+					"decorative",
+					"ariaLabel"
+				]
 			},
-			properties: {
-				"attr.aria-expanded": "isOpen()",
-				"attr.aria-haspopup": "\"menu\"",
-				"attr.aria-controls": "overlayId()"
+			{
+				kind: "directive",
+				type: TooltipDirective,
+				selector: "[bxTooltip]",
+				inputs: [
+					"bxTooltip",
+					"placement",
+					"bxTooltipTouch",
+					"bxTooltipHover"
+				]
+			},
+			{
+				kind: "directive",
+				type: TruncateDirective,
+				selector: "[bxTruncate]",
+				inputs: ["bxTruncate"],
+				outputs: ["truncatedChange"],
+				exportAs: ["bxTruncate"]
+			},
+			{
+				kind: "directive",
+				type: BxSurfaceDirective,
+				selector: "[bxSurface]",
+				inputs: [
+					"bxSurfaceInteractive",
+					"bxSurfaceGlassiness",
+					"bxSurfaceEmission",
+					"bxSurfaceFocusEmission",
+					"bxReducedTransparency"
+				],
+				exportAs: ["bxSurface"]
 			}
-		},
-		exportAs: ["bxDropdown"],
-		ngImport: i0
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
 	});
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
 	version: "22.2.3",
 	ngImport: i0,
-	type: DropdownDirective,
+	type: Tag,
 	decorators: [{
-		type: Directive,
+		type: Component,
 		args: [{
-			selector: "[bxDropdown]",
-			exportAs: "bxDropdown",
-			standalone: true,
+			selector: "bx-tag",
+			imports: [
+				Icon,
+				TooltipDirective,
+				TruncateDirective,
+				BxSurfaceDirective
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
 			host: {
-				"[attr.aria-expanded]": "isOpen()",
-				"[attr.aria-haspopup]": "\"menu\"",
-				"[attr.aria-controls]": "overlayId()"
-			}
+				"[style.--bx-tag-role-text]": "palette().text",
+				"[style.--bx-tag-role-fill]": "palette().fill",
+				"[style.--bx-tag-role-on-fill]": "palette().onFill",
+				"[style.--bx-tag-role-tonal]": "palette().tonal",
+				"[style.--bx-tag-role-border]": "palette().border"
+			},
+			template: "<span class=\"bx-tag\" bxSurface [bxSurfaceInteractive]=\"false\"\n    [class.is-filled]=\"resolvedVariant() === 'filled'\" [class.is-outlined]=\"resolvedVariant() === 'outlined'\"\n    [class.is-small]=\"resolvedSize() === 'small'\" [class.is-disabled]=\"disabled()\" [class.is-number-only]=\"isNumberOnly()\"\n    [attr.aria-disabled]=\"disabled() ? 'true' : null\" [attr.role]=\"resolvedAriaLabel() ? 'group' : null\" [attr.aria-label]=\"resolvedAriaLabel() || null\"\n    [attr.tabindex]=\"resolvedTooltip() && focusable() ? 0 : null\" [bxTooltip]=\"resolvedTooltip()\" [placement]=\"tooltipPlacement()\" bxTooltipTouch=\"longpress\">\n    @if (resolvedLeadingIcon(); as icon) { <bx-icon [name]=\"icon\" [size]=\"resolvedIconSize()\" /> }\n    @if (resolvedLeadingNumber()) { <span class=\"bx-tag-number\">{{ resolvedLeadingNumber() }}</span> }\n    @if (resolvedText()) { <span class=\"bx-tag-text\" bxTruncate>{{ resolvedText() }}</span> }\n    @if (resolvedTrailingNumber()) { <span class=\"bx-tag-number\">{{ resolvedTrailingNumber() }}</span> }\n    @if (resolvedTrailingIcon(); as icon) { <bx-icon [name]=\"icon\" [size]=\"resolvedIconSize()\" /> }\n</span>\n",
+			styles: [":host{display:inline-flex;min-inline-size:0;max-inline-size:100%;vertical-align:middle}.bx-tag{--bx-glass-surface: var(--bx-tag-background, var(--bx-tag-role-tonal));--bx-glass-text: var(--bx-tag-color, var(--bx-tag-role-text));--bx-glass-edge: var(--bx-tag-border, var(--bx-tag-role-border));--bx-glass-radius: var(--bx-tag-radius, .25rem);--bx-glass-shadow: var(--bx-tag-shadow, none);position:relative;display:inline-flex;align-items:center;justify-content:center;min-inline-size:0;max-inline-size:100%;box-sizing:border-box;gap:var(--bx-tag-gap, .25rem);padding:var(--bx-tag-padding, .25rem .5rem);border:1px solid var(--bx-glass-edge);border-radius:var(--bx-glass-radius);background:var(--bx-glass-surface);color:var(--bx-glass-text);font:inherit;font-size:var(--bx-tag-font-size, .8125rem);line-height:1.4;white-space:nowrap}.bx-tag.is-filled{--bx-glass-surface: var(--bx-tag-background, var(--bx-tag-role-fill));--bx-glass-text: var(--bx-tag-color, var(--bx-tag-role-on-fill));--bx-glass-min-opacity: var(--bx-tag-fill-opacity, .85)}.bx-tag.is-outlined{--bx-glass-surface: var(--bx-tag-background, var(--bx-bg-surface));--bx-glass-opacity: var(--bx-tag-outline-opacity, .12)}.bx-tag.is-small{font-size:var(--bx-tag-font-size, .75rem);padding-block:.125rem}.bx-tag.is-disabled{opacity:var(--bx-tag-disabled-opacity, .5)}.bx-tag.is-number-only{--bx-glass-radius: 50%;inline-size:max-content;min-inline-size:var(--bx-tag-number-size, 1.875rem);aspect-ratio:1;padding:var(--bx-tag-number-padding, .35em)}.bx-tag.is-number-only.is-small{min-inline-size:var(--bx-tag-number-size, 1.5rem)}.bx-tag:focus-visible{outline:2px solid var(--bx-border-brand);outline-offset:2px}.bx-tag-number{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-inline-size:1.1em;padding-inline:.25em;border-radius:var(--bx-tag-counter-radius, .25rem);background:var(--bx-tag-counter-background, color-mix(in srgb, currentcolor 12%, transparent));font-variant-numeric:tabular-nums}.is-number-only .bx-tag-number{background:transparent;padding:0}@media(forced-colors:active){.bx-tag.is-disabled{color:GrayText;border-color:GrayText;opacity:1}}\n"]
 		}]
 	}],
-	ctorParameters: () => [],
 	propDecorators: {
-		bxDropdown: [{
+		textOverflow: [{
+			type: i0.ViewChild,
+			args: [i0.forwardRef(() => TruncateDirective), { isSignal: true }]
+		}],
+		text: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "bxDropdown",
-				required: true
+				alias: "text",
+				required: false
 			}]
 		}],
-		placement: [{
+		config: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "placement",
+				alias: "config",
 				required: false
 			}]
 		}],
-		bxTransition: [{
+		color: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "bxTransition",
+				alias: "color",
 				required: false
 			}]
 		}],
-		toggle: [{
-			type: HostListener,
-			args: ["click", ["$event"]]
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
 		}],
-		onTriggerKeydown: [{
-			type: HostListener,
-			args: ["keydown", ["$event"]]
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
 		}],
-		onDocumentClick: [{
-			type: HostListener,
-			args: ["document:click", ["$event"]]
-		}]
-	}
-});
-var BxOverlayContextDirective = class BxOverlayContextDirective {
-	bxOverlayContext = input({}, ...ngDevMode ? [{ debugName: "bxOverlayContext" }] : /* istanbul ignore next */ []);
-	get useTopLayer() {
-		return this.bxOverlayContext().useTopLayer;
-	}
-	static ɵfac = i0.ɵɵngDeclareFactory({
-		minVersion: "12.0.0",
-		version: "22.2.3",
-		ngImport: i0,
-		type: BxOverlayContextDirective,
-		deps: [],
-		target: i0.ɵɵFactoryTarget.Directive
-	});
-	static ɵdir = i0.ɵɵngDeclareDirective({
-		minVersion: "17.1.0",
-		version: "22.2.3",
-		type: BxOverlayContextDirective,
-		isStandalone: true,
-		selector: "[bxOverlayContext]",
-		inputs: { bxOverlayContext: {
-			classPropertyName: "bxOverlayContext",
-			publicName: "bxOverlayContext",
-			isSignal: true,
-			isRequired: false,
-			transformFunction: null
-		} },
-		providers: [{
-			provide: BX_OVERLAY_CONTEXT,
-			useExisting: forwardRef(() => BxOverlayContextDirective)
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
 		}],
-		ngImport: i0
-	});
-};
-i0.ɵɵngDeclareClassMetadata({
-	minVersion: "12.0.0",
-	version: "22.2.3",
-	ngImport: i0,
-	type: BxOverlayContextDirective,
-	decorators: [{
-		type: Directive,
-		args: [{
-			selector: "[bxOverlayContext]",
-			standalone: true,
-			providers: [{
-				provide: BX_OVERLAY_CONTEXT,
-				useExisting: forwardRef(() => BxOverlayContextDirective)
+		leadingIcon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "leadingIcon",
+				required: false
+			}]
+		}],
+		trailingIcon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "trailingIcon",
+				required: false
+			}]
+		}],
+		iconSize: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "iconSize",
+				required: false
+			}]
+		}],
+		leadingNumber: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "leadingNumber",
+				required: false
+			}]
+		}],
+		trailingNumber: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "trailingNumber",
+				required: false
+			}]
+		}],
+		locale: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "locale",
+				required: false
+			}]
+		}],
+		tooltip: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tooltip",
+				required: false
+			}]
+		}],
+		tooltipOnTruncate: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tooltipOnTruncate",
+				required: false
+			}]
+		}],
+		tooltipPlacement: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tooltipPlacement",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		focusable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "focusable",
+				required: false
 			}]
 		}]
-	}],
-	propDecorators: { bxOverlayContext: [{
-		type: i0.Input,
-		args: [{
-			isSignal: true,
-			alias: "bxOverlayContext",
-			required: false
-		}]
-	}] }
+	}
 });
-export { BX_OVERLAY_CONTEXT, BxOverlayContextDirective, ContextMenuDirective, DropdownDirective, Menu, MenuItem, Tab, TabContentDirective, Tabs, Tooltip, TooltipDirective };
+export { BX_OVERLAY_CONTEXT, BxOverlayContextDirective, ContextMenuDirective, DropdownDirective, LoadingIndicator, LoadingSpinner, Menu, MenuItem, ProgressBar, Tab, TabContentDirective, Tabs, Tag, Tooltip, TooltipDirective, TruncateDirective, TruncatedTextPipe, truncatedText };
 
 //# sourceMappingURL=filip.mazev-blocks-primitives.mjs.map