@filip.mazev/blocks 1.4.8 → 1.4.10

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

@@ -3,11 +3,12 @@ import * as i0 from "@angular/core";
 import { ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, HostListener, InjectionToken, NgZone, PLATFORM_ID, ViewContainerRef, booleanAttribute, computed, effect, forwardRef, inject, input, output, signal } from "@angular/core";
 import { BX_I18N, BxA11yService, BxOverlayPositionService, BxShortcutService, inheritOverlayTheme, isTextWithKey, uuidv4 } from "@filip.mazev/blocks/core";
 import { Icon } from "@filip.mazev/blocks/icons";
+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 { isPlatformBrowser } from "@angular/common";
 import { Subscription } from "rxjs";
+import { isPlatformBrowser } from "@angular/common";
 var Tooltip = class Tooltip {
 	i18n = inject(BX_I18N, { optional: true });
 	a11y = inject(BxA11yService);
@@ -345,75 +346,103 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-var TooltipDirective = class TooltipDirective {
-	elementRef = inject(ElementRef);
+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);
-	id = `bx-tooltip-${uuidv4()}`;
-	bxTooltip = input.required(...ngDevMode ? [{ debugName: "bxTooltip" }] : /* istanbul ignore next */ []);
-	placement = input("bottom", ...ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []);
+	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;
-	positionSubscription;
-	keyboardSubscription;
+	subscriptions = new Subscription();
 	revision = 0;
-	hovered = false;
-	focused = false;
+	touchPress;
+	touchGuard;
+	touchGuardTimer;
+	lastPointerType = "";
 	constructor() {
-		inject(DestroyRef).onDestroy(() => 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");
-			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));
-		}
 		const source = this.elementRef.nativeElement;
-		const ids = new Set((source.getAttribute("aria-describedby") ?? "").split(/\s+/).filter(Boolean));
-		ids.add(this.id);
-		source.setAttribute("aria-describedby", [...ids].join(" "));
-		Promise.resolve(this.zone.runOutsideAngular(() => this.transition?.enter())).catch(() => {
-			if (revision === this.revision) {
-				this.transition?.destroy();
-				this.transition = void 0;
-			}
+		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();
 		});
 	}
-	hide() {
-		const revision = ++this.revision;
-		this.removeDescription();
+	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();
@@ -422,87 +451,212 @@ var TooltipDirective = class TooltipDirective {
 		});
 		else this.dispose();
 	}
-	onEnter() {
-		this.hovered = true;
-		this.show();
+	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();
 	}
-	onLeave() {
-		this.hovered = false;
-		if (!this.focused) this.hide();
+	onDocumentClick(event) {
+		const target = event.target;
+		if (target && this.overlayRef?.overlayElement.contains(target) && target.closest("button, a, [role=\"menuitem\"]")) this.close();
 	}
-	onFocus() {
-		this.focused = true;
-		this.show();
+	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]");
 	}
-	onBlur(event) {
-		if (event.relatedTarget instanceof Node && this.elementRef.nativeElement.contains(event.relatedTarget)) return;
-		this.focused = false;
-		if (!this.hovered) this.hide();
+	hasTextSelection() {
+		const source = this.elementRef.nativeElement;
+		const selection = source.ownerDocument.getSelection();
+		return !!selection && !selection.isCollapsed && (source.contains(selection.anchorNode) || source.contains(selection.focusNode));
 	}
-	onEscape(event) {
-		if (event.key === "Escape" && this.overlayRef) {
-			event.stopPropagation();
-			this.hovered = false;
-			this.focused = false;
-			this.hide();
+	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);
 	}
-	removeDescription() {
-		const source = this.elementRef.nativeElement;
-		const ids = (source.getAttribute("aria-describedby") ?? "").split(/\s+/).filter((id) => id && id !== this.id);
-		if (ids.length) source.setAttribute("aria-describedby", ids.join(" "));
-		else source.removeAttribute("aria-describedby");
+	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);
 	}
-	dispose() {
-		this.removeDescription();
-		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.disconnectLighting?.();
-		this.disconnectLighting = void 0;
+	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);
 	}
-	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
+	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: {
-			"mouseenter": "onEnter()",
-			"mouseleave": "onLeave()",
-			"focusin": "onFocus()",
-			"focusout": "onBlur($event)"
+			"contextmenu": "open($event)",
+			"keydown": "onKey($event)",
+			"document:click": "onDocumentClick($event)"
 		} },
 		ngImport: i0
 	});
@@ -511,266 +665,304 @@ i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
 	version: "22.2.3",
 	ngImport: i0,
-	type: TooltipDirective,
+	type: ContextMenuDirective,
 	decorators: [{
 		type: Directive,
-		args: [{ selector: "[bxTooltip]" }]
+		args: [{ selector: "[bxContextMenu]" }]
 	}],
 	ctorParameters: () => [],
 	propDecorators: {
-		bxTooltip: [{
+		bxContextMenu: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "bxTooltip",
+				alias: "bxContextMenu",
 				required: true
 			}]
 		}],
-		placement: [{
+		bxContextMenuLongPress: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "placement",
+				alias: "bxContextMenuLongPress",
 				required: false
 			}]
 		}],
-		onEnter: [{
-			type: HostListener,
-			args: ["mouseenter"]
-		}],
-		onLeave: [{
+		open: [{
 			type: HostListener,
-			args: ["mouseleave"]
+			args: ["contextmenu", ["$event"]]
 		}],
-		onFocus: [{
+		onKey: [{
 			type: HostListener,
-			args: ["focusin"]
+			args: ["keydown", ["$event"]]
 		}],
-		onBlur: [{
+		onDocumentClick: [{
 			type: HostListener,
-			args: ["focusout", ["$event"]]
+			args: ["document:click", ["$event"]]
 		}]
 	}
 });
-const BX_OVERLAY_CONTEXT = new InjectionToken("BX_OVERLAY_CONTEXT");
-var DropdownDirective = class DropdownDirective {
+var TooltipDirective = class TooltipDirective {
 	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 */ []);
+	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 */ []);
-	bxTransition = input("fade", ...ngDevMode ? [{ debugName: "bxTransition" }] : /* istanbul ignore next */ []);
+	bxTooltipTouch = input("none", ...ngDevMode ? [{ debugName: "bxTooltipTouch" }] : /* istanbul ignore next */ []);
 	overlayRef = null;
-	transition = null;
-	subscriptions = new Subscription();
-	revision = 0;
+	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) 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();
 		});
-		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;
+	show() {
+		if (!this.bxTooltip()) 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");
-				}
+		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"
 			});
-		} else this._state.set("open");
+			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;
+			}
+		});
 	}
-	close(restoreFocus = false) {
-		if (!this.overlayRef || !this.isOpen()) return;
+	hide() {
+		this.clearTouchInteraction();
 		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";
+		if (!this.overlayRef) return;
 		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());
+			if (revision === this.revision) this.dispose();
 		}).catch(() => {
-			if (revision === this.revision && !this.isOpen()) this.dispose();
+			if (revision === this.revision) 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();
+	onEnter(event) {
+		if (event.pointerType !== "mouse") return;
+		this.clearTouchInteraction();
+		this.hovered = true;
+		this.show();
 	}
-	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.trackScroll(overlay, positionStrategy);
-		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();
+	onLeave(event) {
+		if (event.pointerType !== "mouse") return;
+		this.hovered = false;
+		if (!this.focused) this.hide();
 	}
-	trackScroll(overlay, positionStrategy) {
-		const source = this.elementRef.nativeElement;
-		const view = source.ownerDocument.defaultView;
-		if (!view) return;
-		this.zone.runOutsideAngular(() => {
-			const reposition = (event) => {
-				const target = event.target;
-				if (overlay.hasAttached() && (target === view || target instanceof Node && target.contains(source))) positionStrategy.reapplyLastPosition();
-			};
-			view.addEventListener("scroll", reposition, {
-				capture: true,
-				passive: true
-			});
-			this.subscriptions.add(() => view.removeEventListener("scroll", reposition, true));
-		});
+	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));
 	}
-	isDisabled() {
-		const element = this.elementRef.nativeElement;
-		return element.hasAttribute("disabled") || element.getAttribute("aria-disabled") === "true";
+	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());
 	}
-	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;
-		});
+	onEscape(event) {
+		if (event.key === "Escape" && this.overlayRef) {
+			event.stopPropagation();
+			this.hovered = false;
+			this.focused = false;
+			this.hide();
+		}
 	}
-	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 });
+	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")));
 	}
-	isEditing(target) {
-		return target instanceof Element && !!target.closest("input, textarea, select, [contenteditable]:not([contenteditable=\"false\"]), [role=\"textbox\"]");
+	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 = null;
-		this.subscriptions.unsubscribe();
+		this.transition = void 0;
 		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,
+		type: TooltipDirective,
 		deps: [],
 		target: i0.ɵɵFactoryTarget.Directive
 	});
 	static ɵdir = i0.ɵɵngDeclareDirective({
 		minVersion: "17.1.0",
 		version: "22.2.3",
-		type: DropdownDirective,
+		type: TooltipDirective,
 		isStandalone: true,
-		selector: "[bxDropdown]",
+		selector: "[bxTooltip]",
 		inputs: {
-			bxDropdown: {
-				classPropertyName: "bxDropdown",
-				publicName: "bxDropdown",
+			bxTooltip: {
+				classPropertyName: "bxTooltip",
+				publicName: "bxTooltip",
 				isSignal: true,
 				isRequired: true,
 				transformFunction: null
@@ -782,27 +974,21 @@ var DropdownDirective = class DropdownDirective {
 				isRequired: false,
 				transformFunction: null
 			},
-			bxTransition: {
-				classPropertyName: "bxTransition",
-				publicName: "bxTransition",
+			bxTooltipTouch: {
+				classPropertyName: "bxTooltipTouch",
+				publicName: "bxTooltipTouch",
 				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"],
+		host: { listeners: {
+			"pointerenter": "onEnter($event)",
+			"pointerleave": "onLeave($event)",
+			"pointerdown": "onPointerDown($event)",
+			"click": "onClick($event)",
+			"document:keydown": "onEscape($event)"
+		} },
 		ngImport: i0
 	});
 };
@@ -810,27 +996,18 @@ i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
 	version: "22.2.3",
 	ngImport: i0,
-	type: DropdownDirective,
+	type: TooltipDirective,
 	decorators: [{
 		type: Directive,
-		args: [{
-			selector: "[bxDropdown]",
-			exportAs: "bxDropdown",
-			standalone: true,
-			host: {
-				"[attr.aria-expanded]": "isOpen()",
-				"[attr.aria-haspopup]": "\"menu\"",
-				"[attr.aria-controls]": "overlayId()"
-			}
-		}]
+		args: [{ selector: "[bxTooltip]" }]
 	}],
 	ctorParameters: () => [],
 	propDecorators: {
-		bxDropdown: [{
+		bxTooltip: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "bxDropdown",
+				alias: "bxTooltip",
 				required: true
 			}]
 		}],
@@ -842,339 +1019,286 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
-		bxTransition: [{
+		bxTooltipTouch: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "bxTransition",
+				alias: "bxTooltipTouch",
 				required: false
 			}]
 		}],
-		toggle: [{
+		onEnter: [{
 			type: HostListener,
-			args: ["click", ["$event"]]
+			args: ["pointerenter", ["$event"]]
 		}],
-		onTriggerKeydown: [{
+		onLeave: [{
 			type: HostListener,
-			args: ["keydown", ["$event"]]
+			args: ["pointerleave", ["$event"]]
 		}],
-		onDocumentClick: [{
+		onPointerDown: [{
 			type: HostListener,
-			args: ["document:click", ["$event"]]
+			args: ["pointerdown", ["$event"]]
+		}],
+		onClick: [{
+			type: HostListener,
+			args: ["click", ["$event"]]
+		}],
+		onEscape: [{
+			type: HostListener,
+			args: ["document:keydown", ["$event"]]
 		}]
 	}
 });
-var ContextMenuDirective = class ContextMenuDirective {
+var DropdownDirective = class DropdownDirective {
+	elementRef = inject(ElementRef);
 	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);
-	};
+	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;
-	point;
-	disconnectTheme;
-	disconnectLighting;
+	transition = null;
 	subscriptions = new Subscription();
 	revision = 0;
-	touchPress;
-	touchGuard;
-	touchGuardTimer;
-	lastPointerType = "";
+	disconnectTheme;
+	disconnectLighting;
 	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;
+		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();
 			}
-			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);
+	toggle(event) {
+		if (this.isDisabled()) return;
+		event?.stopPropagation();
+		if (this.isOpen()) this.close();
+		else this.open();
 	}
-	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);
+	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 });
 	}
-	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
+	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();
 		});
-		doc.addEventListener("keydown", () => this.clearTouchGuard(), options);
+		else this.dispose();
 	}
-	clearTouchGuard() {
-		this.touchGuard?.abort();
-		this.touchGuard = void 0;
-		this.elementRef.nativeElement.ownerDocument.defaultView?.clearTimeout(this.touchGuardTimer);
-		this.touchGuardTimer = void 0;
+	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();
 	}
-	openAt(x, y) {
-		this.dispose();
-		++this.revision;
-		const source = this.elementRef.nativeElement;
-		this.overlayRef = this.overlay.create({
-			positionStrategy: this.positionBuilder.getCoordinateStrategy(x, y),
+	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 || !!source.closest("dialog, [role=\"dialog\"], [role=\"alertdialog\"], bx-modal, bx-modal-core, [popover]"),
-			hasBackdrop: true,
+			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();
-		const win = source.ownerDocument.defaultView;
-		if (win) this.zone.runOutsideAngular(() => {
-			const closeOnScroll = (event) => {
+		this.trackScroll(overlay, positionStrategy);
+		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();
+	}
+	trackScroll(overlay, positionStrategy) {
+		const source = this.elementRef.nativeElement;
+		const view = source.ownerDocument.defaultView;
+		if (!view) return;
+		this.zone.runOutsideAngular(() => {
+			const reposition = (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());
+				if (overlay.hasAttached() && (target === view || target instanceof Node && target.contains(source))) positionStrategy.reapplyLastPosition();
 			};
-			win.addEventListener("scroll", closeOnScroll, {
+			view.addEventListener("scroll", reposition, {
 				capture: true,
 				passive: true
 			});
-			this.subscriptions.add(() => win.removeEventListener("scroll", closeOnScroll, true));
+			this.subscriptions.add(() => view.removeEventListener("scroll", reposition, 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]"));
+	isDisabled() {
+		const element = this.elementRef.nativeElement;
+		return element.hasAttribute("disabled") || element.getAttribute("aria-disabled") === "true";
 	}
-	onMenuKey(event) {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			this.close(true);
-			return;
-		}
-		if (event.target?.closest("input,textarea,[contenteditable=\"true\"]")) return;
+	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.items();
+		const items = this.menuItems();
 		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();
+		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.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.transition = null;
+		this.subscriptions.unsubscribe();
+		this.overlayRef?.dispose();
 		this.overlayRef = null;
-		overlay?.dispose();
 		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: ContextMenuDirective,
+		type: DropdownDirective,
 		deps: [],
 		target: i0.ɵɵFactoryTarget.Directive
 	});
 	static ɵdir = i0.ɵɵngDeclareDirective({
 		minVersion: "17.1.0",
 		version: "22.2.3",
-		type: ContextMenuDirective,
+		type: DropdownDirective,
 		isStandalone: true,
-		selector: "[bxContextMenu]",
+		selector: "[bxDropdown]",
 		inputs: {
-			bxContextMenu: {
-				classPropertyName: "bxContextMenu",
-				publicName: "bxContextMenu",
+			bxDropdown: {
+				classPropertyName: "bxDropdown",
+				publicName: "bxDropdown",
 				isSignal: true,
 				isRequired: true,
 				transformFunction: null
 			},
-			bxContextMenuLongPress: {
-				classPropertyName: "bxContextMenuLongPress",
-				publicName: "bxContextMenuLongPress",
+			placement: {
+				classPropertyName: "placement",
+				publicName: "placement",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			bxTransition: {
+				classPropertyName: "bxTransition",
+				publicName: "bxTransition",
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
 			}
 		},
-		host: { listeners: {
-			"contextmenu": "open($event)",
-			"keydown": "onKey($event)",
-			"document:click": "onDocumentClick($event)"
-		} },
+		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
 	});
 };
@@ -1182,34 +1306,51 @@ i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
 	version: "22.2.3",
 	ngImport: i0,
-	type: ContextMenuDirective,
+	type: DropdownDirective,
 	decorators: [{
 		type: Directive,
-		args: [{ selector: "[bxContextMenu]" }]
+		args: [{
+			selector: "[bxDropdown]",
+			exportAs: "bxDropdown",
+			standalone: true,
+			host: {
+				"[attr.aria-expanded]": "isOpen()",
+				"[attr.aria-haspopup]": "\"menu\"",
+				"[attr.aria-controls]": "overlayId()"
+			}
+		}]
 	}],
 	ctorParameters: () => [],
 	propDecorators: {
-		bxContextMenu: [{
+		bxDropdown: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "bxContextMenu",
+				alias: "bxDropdown",
 				required: true
 			}]
 		}],
-		bxContextMenuLongPress: [{
+		placement: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "bxContextMenuLongPress",
+				alias: "placement",
 				required: false
 			}]
 		}],
-		open: [{
+		bxTransition: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "bxTransition",
+				required: false
+			}]
+		}],
+		toggle: [{
 			type: HostListener,
-			args: ["contextmenu", ["$event"]]
+			args: ["click", ["$event"]]
 		}],
-		onKey: [{
+		onTriggerKeydown: [{
 			type: HostListener,
 			args: ["keydown", ["$event"]]
 		}],