@filip.mazev/blocks 1.4.9 → 1.4.11

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

@@ -1,12 +1,13 @@
 import { BxSurfaceDirective } from "@filip.mazev/blocks/effects";
 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 { 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 { 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 { isPlatformBrowser } from "@angular/common";
 import { Subscription } from "rxjs";
 var Tooltip = class Tooltip {
 	i18n = inject(BX_I18N, { optional: true });
@@ -43,7 +44,7 @@ var Tooltip = class Tooltip {
 		} },
 		ngImport: i0,
 		template: "<div class=\"bx-tooltip-surface\" bxSurface [class.bx-tooltip-animated]=\"isAnimated()\">\n    @if (resolvedText()) {\n    {{ resolvedText() }}\n    }\n</div>",
-		styles: [":host{display:block;pointer-events:none;z-index:600}.bx-tooltip-surface[data-bx-surface]{position:relative;padding:.25rem .5rem;border:1px solid var(--bx-glass-edge);border-radius:var(--bx-glass-radius, var(--bx-rounded-sm, .25rem));font-size:.75rem;font-family:inherit;max-width:min(22rem,100vw - 1.5rem);white-space:normal;overflow-wrap:anywhere;--bx-glass-unified-lighting: 1;--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-edge: var(--bx-border-default);--bx-glass-text: var(--bx-text-primary);--bx-glass-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);--bx-glass-min-opacity: 1;--bx-glass-decoration-opacity: 0;--bx-glass-rim-visibility: .35;-webkit-backdrop-filter:none;backdrop-filter:none}.bx-tooltip-surface[data-bx-surface]:after{content:\"\";position:absolute;z-index:2;width:.5rem;height:.5rem;box-sizing:border-box;border-radius:0;background:var(--bx-glass-surface);border:0 solid var(--bx-tooltip-arrow-edge, var(--bx-glass-edge));transform:translate(-50%,-50%) rotate(45deg);pointer-events:none}@media(prefers-contrast:more){.bx-tooltip-surface[data-bx-surface]{--bx-glass-surface: var(--bx-bg-surface);--bx-glass-edge: currentcolor}.bx-tooltip-surface[data-bx-surface]:after{border-color:currentcolor}}:host-context(.bx-overlay-pos-bottom) .bx-tooltip-surface{--bx-tooltip-arrow-edge: var(--bx-glass-lit-edge-top, var(--bx-glass-edge))}:host-context(.bx-overlay-pos-bottom) .bx-tooltip-surface:after{top:-1px;left:clamp(.75rem,var(--bx-tooltip-arrow-x, 50%),100% - .75rem);border-top-width:1px;border-left-width:1px}:host-context(.bx-overlay-pos-top) .bx-tooltip-surface{--bx-tooltip-arrow-edge: var(--bx-glass-lit-edge-bottom, var(--bx-glass-edge))}:host-context(.bx-overlay-pos-top) .bx-tooltip-surface:after{top:calc(100% + 1px);left:clamp(.75rem,var(--bx-tooltip-arrow-x, 50%),100% - .75rem);border-right-width:1px;border-bottom-width:1px}:host-context(.bx-overlay-pos-left) .bx-tooltip-surface{--bx-tooltip-arrow-edge: var(--bx-glass-lit-edge-right, var(--bx-glass-edge))}:host-context(.bx-overlay-pos-left) .bx-tooltip-surface:after{left:calc(100% + 1px);top:clamp(.5rem,var(--bx-tooltip-arrow-y, 50%),100% - .5rem);border-top-width:1px;border-right-width:1px}:host-context(.bx-overlay-pos-right) .bx-tooltip-surface{--bx-tooltip-arrow-edge: var(--bx-glass-lit-edge-left, var(--bx-glass-edge))}:host-context(.bx-overlay-pos-right) .bx-tooltip-surface:after{left:-1px;top:clamp(.5rem,var(--bx-tooltip-arrow-y, 50%),100% - .5rem);border-bottom-width:1px;border-left-width:1px}@media(forced-colors:active){.bx-tooltip-surface[data-bx-surface]:after{background:Canvas;border-color:CanvasText}}\n"],
+		styles: [":host{display:block;pointer-events:none;z-index:600}.bx-tooltip-surface[data-bx-surface]{--bx-glass-radius: var(--bx-rounded-sm, .25rem);position:relative;padding:.25rem .5rem;border:1px solid var(--bx-glass-edge);border-radius:var(--bx-glass-radius, var(--bx-rounded-sm, .25rem));font-size:.75rem;font-family:inherit;max-width:min(22rem,100vw - 1.5rem);white-space:normal;overflow-wrap:anywhere;--bx-glass-unified-lighting: 1;--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-edge: var(--bx-border-default);--bx-glass-text: var(--bx-text-primary);--bx-glass-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);--bx-glass-min-opacity: 1;--bx-glass-decoration-opacity: 0;--bx-glass-rim-visibility: .35;-webkit-backdrop-filter:none;backdrop-filter:none}.bx-tooltip-surface[data-bx-surface]:after{content:\"\";position:absolute;z-index:2;width:.5rem;height:.5rem;box-sizing:border-box;border-radius:0;background:var(--bx-glass-surface);border:0 solid var(--bx-tooltip-arrow-edge, var(--bx-glass-edge));transform:translate(-50%,-50%) rotate(45deg);pointer-events:none}@media(prefers-contrast:more){.bx-tooltip-surface[data-bx-surface]{--bx-glass-surface: var(--bx-bg-surface);--bx-glass-edge: currentcolor}.bx-tooltip-surface[data-bx-surface]:after{border-color:currentcolor}}:host-context(.bx-overlay-pos-bottom) .bx-tooltip-surface{--bx-tooltip-arrow-edge: var(--bx-glass-lit-edge-top, var(--bx-glass-edge))}:host-context(.bx-overlay-pos-bottom) .bx-tooltip-surface:after{top:-1px;left:clamp(.75rem,var(--bx-tooltip-arrow-x, 50%),100% - .75rem);border-top-width:1px;border-left-width:1px}:host-context(.bx-overlay-pos-top) .bx-tooltip-surface{--bx-tooltip-arrow-edge: var(--bx-glass-lit-edge-bottom, var(--bx-glass-edge))}:host-context(.bx-overlay-pos-top) .bx-tooltip-surface:after{top:calc(100% + 1px);left:clamp(.75rem,var(--bx-tooltip-arrow-x, 50%),100% - .75rem);border-right-width:1px;border-bottom-width:1px}:host-context(.bx-overlay-pos-left) .bx-tooltip-surface{--bx-tooltip-arrow-edge: var(--bx-glass-lit-edge-right, var(--bx-glass-edge))}:host-context(.bx-overlay-pos-left) .bx-tooltip-surface:after{left:calc(100% + 1px);top:clamp(.5rem,var(--bx-tooltip-arrow-y, 50%),100% - .5rem);border-top-width:1px;border-right-width:1px}:host-context(.bx-overlay-pos-right) .bx-tooltip-surface{--bx-tooltip-arrow-edge: var(--bx-glass-lit-edge-left, var(--bx-glass-edge))}:host-context(.bx-overlay-pos-right) .bx-tooltip-surface:after{left:-1px;top:clamp(.5rem,var(--bx-tooltip-arrow-y, 50%),100% - .5rem);border-bottom-width:1px;border-left-width:1px}@media(forced-colors:active){.bx-tooltip-surface[data-bx-surface]:after{background:Canvas;border-color:CanvasText}}\n"],
 		dependencies: [{
 			kind: "directive",
 			type: BxSurfaceDirective,
@@ -72,7 +73,7 @@ i0.ɵɵngDeclareClassMetadata({
 			imports: [BxSurfaceDirective],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			template: "<div class=\"bx-tooltip-surface\" bxSurface [class.bx-tooltip-animated]=\"isAnimated()\">\n    @if (resolvedText()) {\n    {{ resolvedText() }}\n    }\n</div>",
-			styles: [":host{display:block;pointer-events:none;z-index:600}.bx-tooltip-surface[data-bx-surface]{position:relative;padding:.25rem .5rem;border:1px solid var(--bx-glass-edge);border-radius:var(--bx-glass-radius, var(--bx-rounded-sm, .25rem));font-size:.75rem;font-family:inherit;max-width:min(22rem,100vw - 1.5rem);white-space:normal;overflow-wrap:anywhere;--bx-glass-unified-lighting: 1;--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-edge: var(--bx-border-default);--bx-glass-text: var(--bx-text-primary);--bx-glass-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);--bx-glass-min-opacity: 1;--bx-glass-decoration-opacity: 0;--bx-glass-rim-visibility: .35;-webkit-backdrop-filter:none;backdrop-filter:none}.bx-tooltip-surface[data-bx-surface]:after{content:\"\";position:absolute;z-index:2;width:.5rem;height:.5rem;box-sizing:border-box;border-radius:0;background:var(--bx-glass-surface);border:0 solid var(--bx-tooltip-arrow-edge, var(--bx-glass-edge));transform:translate(-50%,-50%) rotate(45deg);pointer-events:none}@media(prefers-contrast:more){.bx-tooltip-surface[data-bx-surface]{--bx-glass-surface: var(--bx-bg-surface);--bx-glass-edge: currentcolor}.bx-tooltip-surface[data-bx-surface]:after{border-color:currentcolor}}:host-context(.bx-overlay-pos-bottom) .bx-tooltip-surface{--bx-tooltip-arrow-edge: var(--bx-glass-lit-edge-top, var(--bx-glass-edge))}:host-context(.bx-overlay-pos-bottom) .bx-tooltip-surface:after{top:-1px;left:clamp(.75rem,var(--bx-tooltip-arrow-x, 50%),100% - .75rem);border-top-width:1px;border-left-width:1px}:host-context(.bx-overlay-pos-top) .bx-tooltip-surface{--bx-tooltip-arrow-edge: var(--bx-glass-lit-edge-bottom, var(--bx-glass-edge))}:host-context(.bx-overlay-pos-top) .bx-tooltip-surface:after{top:calc(100% + 1px);left:clamp(.75rem,var(--bx-tooltip-arrow-x, 50%),100% - .75rem);border-right-width:1px;border-bottom-width:1px}:host-context(.bx-overlay-pos-left) .bx-tooltip-surface{--bx-tooltip-arrow-edge: var(--bx-glass-lit-edge-right, var(--bx-glass-edge))}:host-context(.bx-overlay-pos-left) .bx-tooltip-surface:after{left:calc(100% + 1px);top:clamp(.5rem,var(--bx-tooltip-arrow-y, 50%),100% - .5rem);border-top-width:1px;border-right-width:1px}:host-context(.bx-overlay-pos-right) .bx-tooltip-surface{--bx-tooltip-arrow-edge: var(--bx-glass-lit-edge-left, var(--bx-glass-edge))}:host-context(.bx-overlay-pos-right) .bx-tooltip-surface:after{left:-1px;top:clamp(.5rem,var(--bx-tooltip-arrow-y, 50%),100% - .5rem);border-bottom-width:1px;border-left-width:1px}@media(forced-colors:active){.bx-tooltip-surface[data-bx-surface]:after{background:Canvas;border-color:CanvasText}}\n"]
+			styles: [":host{display:block;pointer-events:none;z-index:600}.bx-tooltip-surface[data-bx-surface]{--bx-glass-radius: var(--bx-rounded-sm, .25rem);position:relative;padding:.25rem .5rem;border:1px solid var(--bx-glass-edge);border-radius:var(--bx-glass-radius, var(--bx-rounded-sm, .25rem));font-size:.75rem;font-family:inherit;max-width:min(22rem,100vw - 1.5rem);white-space:normal;overflow-wrap:anywhere;--bx-glass-unified-lighting: 1;--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-edge: var(--bx-border-default);--bx-glass-text: var(--bx-text-primary);--bx-glass-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);--bx-glass-min-opacity: 1;--bx-glass-decoration-opacity: 0;--bx-glass-rim-visibility: .35;-webkit-backdrop-filter:none;backdrop-filter:none}.bx-tooltip-surface[data-bx-surface]:after{content:\"\";position:absolute;z-index:2;width:.5rem;height:.5rem;box-sizing:border-box;border-radius:0;background:var(--bx-glass-surface);border:0 solid var(--bx-tooltip-arrow-edge, var(--bx-glass-edge));transform:translate(-50%,-50%) rotate(45deg);pointer-events:none}@media(prefers-contrast:more){.bx-tooltip-surface[data-bx-surface]{--bx-glass-surface: var(--bx-bg-surface);--bx-glass-edge: currentcolor}.bx-tooltip-surface[data-bx-surface]:after{border-color:currentcolor}}:host-context(.bx-overlay-pos-bottom) .bx-tooltip-surface{--bx-tooltip-arrow-edge: var(--bx-glass-lit-edge-top, var(--bx-glass-edge))}:host-context(.bx-overlay-pos-bottom) .bx-tooltip-surface:after{top:-1px;left:clamp(.75rem,var(--bx-tooltip-arrow-x, 50%),100% - .75rem);border-top-width:1px;border-left-width:1px}:host-context(.bx-overlay-pos-top) .bx-tooltip-surface{--bx-tooltip-arrow-edge: var(--bx-glass-lit-edge-bottom, var(--bx-glass-edge))}:host-context(.bx-overlay-pos-top) .bx-tooltip-surface:after{top:calc(100% + 1px);left:clamp(.75rem,var(--bx-tooltip-arrow-x, 50%),100% - .75rem);border-right-width:1px;border-bottom-width:1px}:host-context(.bx-overlay-pos-left) .bx-tooltip-surface{--bx-tooltip-arrow-edge: var(--bx-glass-lit-edge-right, var(--bx-glass-edge))}:host-context(.bx-overlay-pos-left) .bx-tooltip-surface:after{left:calc(100% + 1px);top:clamp(.5rem,var(--bx-tooltip-arrow-y, 50%),100% - .5rem);border-top-width:1px;border-right-width:1px}:host-context(.bx-overlay-pos-right) .bx-tooltip-surface{--bx-tooltip-arrow-edge: var(--bx-glass-lit-edge-left, var(--bx-glass-edge))}:host-context(.bx-overlay-pos-right) .bx-tooltip-surface:after{left:-1px;top:clamp(.5rem,var(--bx-tooltip-arrow-y, 50%),100% - .5rem);border-bottom-width:1px;border-left-width:1px}@media(forced-colors:active){.bx-tooltip-surface[data-bx-surface]:after{background:Canvas;border-color:CanvasText}}\n"]
 		}]
 	}],
 	propDecorators: { text: [{
@@ -104,21 +105,8 @@ var Menu = class Menu {
 		isStandalone: true,
 		selector: "bx-menu",
 		ngImport: i0,
-		template: "<div bxSurface role=\"menu\" class=\"bx-menu-wrapper\" [class.bx-menu-animated]=\"isAnimated()\">\n    <ng-content></ng-content>\n</div>\n",
-		styles: [":host{display:block}.bx-menu-wrapper{--bx-glass-surface: var(--bx-bg-surface);--bx-glass-text: var(--bx-text-primary);--bx-glass-edge: var(--bx-border-default);--bx-glass-min-opacity: 0;--bx-glass-decoration-opacity: 1;--bx-glass-rim-visibility: 1;--bx-glass-unified-lighting: 0;--bx-glass-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);background-color:var(--bx-glass-surface);border:1px solid var(--bx-glass-edge);border-radius:var(--bx-glass-radius, var(--bx-rounded-lg, .75rem));box-shadow:0 2px 4px #0000001a,0 1px 2px -1px #0000001a;padding:.25rem;display:flex;flex-direction:column;min-width:12rem}.bx-menu-wrapper.bx-menu-animated{transition:transform .2s cubic-bezier(.25,.8,.25,1)}.bx-menu-wrapper{transform-origin:top}.bx-menu-wrapper.is-hidden{opacity:0;transform:scaleY(.95);pointer-events:none}:host([data-bx-surface]){border-radius:var(--bx-glass-radius, var(--bx-rounded-lg, .75rem));--bx-glass-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);color:var(--bx-glass-text, var(--bx-text-primary))}:host([data-bx-surface]) .bx-menu-wrapper{background:transparent;border-color:transparent;border-radius:inherit;box-shadow:none}\n"],
-		dependencies: [{
-			kind: "directive",
-			type: BxSurfaceDirective,
-			selector: "[bxSurface]",
-			inputs: [
-				"bxSurfaceInteractive",
-				"bxSurfaceGlassiness",
-				"bxSurfaceEmission",
-				"bxSurfaceFocusEmission",
-				"bxReducedTransparency"
-			],
-			exportAs: ["bxSurface"]
-		}],
+		template: "<div data-bx-surface=\"solid\" role=\"menu\" class=\"bx-menu-wrapper\" [class.bx-menu-animated]=\"isAnimated()\">\n    <ng-content></ng-content>\n</div>\n",
+		styles: [":host{display:block}.bx-menu-wrapper{--bx-glass-surface: var(--bx-bg-surface);--bx-glass-text: var(--bx-text-primary);--bx-glass-edge: var(--bx-border-default);--bx-glass-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);--bx-glass-radius: var(--bx-rounded-lg, .75rem);background-color:var(--bx-glass-surface);border:1px solid var(--bx-glass-edge);border-radius:var(--bx-glass-radius, var(--bx-rounded-lg, .75rem));box-shadow:0 2px 4px #0000001a,0 1px 2px -1px #0000001a;padding:.25rem;display:flex;flex-direction:column;min-width:12rem}.bx-menu-wrapper[data-bx-surface=solid]{background:var(--bx-glass-surface)!important;-webkit-backdrop-filter:none;backdrop-filter:none}.bx-menu-wrapper.bx-menu-animated{transition:transform .2s cubic-bezier(.25,.8,.25,1)}.bx-menu-wrapper{transform-origin:top}.bx-menu-wrapper.is-hidden{opacity:0;transform:scaleY(.95);pointer-events:none}:host([data-bx-surface]){border-radius:var(--bx-glass-radius, var(--bx-rounded-lg, .75rem));--bx-glass-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);color:var(--bx-glass-text, var(--bx-text-primary))}:host([data-bx-surface]) .bx-menu-wrapper{background:transparent;border-color:transparent;border-radius:inherit;box-shadow:none}\n"],
 		changeDetection: i0.ChangeDetectionStrategy.OnPush
 	});
 };
@@ -131,10 +119,9 @@ i0.ɵɵngDeclareClassMetadata({
 		type: Component,
 		args: [{
 			selector: "bx-menu",
-			imports: [BxSurfaceDirective],
 			changeDetection: ChangeDetectionStrategy.OnPush,
-			template: "<div bxSurface role=\"menu\" class=\"bx-menu-wrapper\" [class.bx-menu-animated]=\"isAnimated()\">\n    <ng-content></ng-content>\n</div>\n",
-			styles: [":host{display:block}.bx-menu-wrapper{--bx-glass-surface: var(--bx-bg-surface);--bx-glass-text: var(--bx-text-primary);--bx-glass-edge: var(--bx-border-default);--bx-glass-min-opacity: 0;--bx-glass-decoration-opacity: 1;--bx-glass-rim-visibility: 1;--bx-glass-unified-lighting: 0;--bx-glass-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);background-color:var(--bx-glass-surface);border:1px solid var(--bx-glass-edge);border-radius:var(--bx-glass-radius, var(--bx-rounded-lg, .75rem));box-shadow:0 2px 4px #0000001a,0 1px 2px -1px #0000001a;padding:.25rem;display:flex;flex-direction:column;min-width:12rem}.bx-menu-wrapper.bx-menu-animated{transition:transform .2s cubic-bezier(.25,.8,.25,1)}.bx-menu-wrapper{transform-origin:top}.bx-menu-wrapper.is-hidden{opacity:0;transform:scaleY(.95);pointer-events:none}:host([data-bx-surface]){border-radius:var(--bx-glass-radius, var(--bx-rounded-lg, .75rem));--bx-glass-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);color:var(--bx-glass-text, var(--bx-text-primary))}:host([data-bx-surface]) .bx-menu-wrapper{background:transparent;border-color:transparent;border-radius:inherit;box-shadow:none}\n"]
+			template: "<div data-bx-surface=\"solid\" role=\"menu\" class=\"bx-menu-wrapper\" [class.bx-menu-animated]=\"isAnimated()\">\n    <ng-content></ng-content>\n</div>\n",
+			styles: [":host{display:block}.bx-menu-wrapper{--bx-glass-surface: var(--bx-bg-surface);--bx-glass-text: var(--bx-text-primary);--bx-glass-edge: var(--bx-border-default);--bx-glass-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);--bx-glass-radius: var(--bx-rounded-lg, .75rem);background-color:var(--bx-glass-surface);border:1px solid var(--bx-glass-edge);border-radius:var(--bx-glass-radius, var(--bx-rounded-lg, .75rem));box-shadow:0 2px 4px #0000001a,0 1px 2px -1px #0000001a;padding:.25rem;display:flex;flex-direction:column;min-width:12rem}.bx-menu-wrapper[data-bx-surface=solid]{background:var(--bx-glass-surface)!important;-webkit-backdrop-filter:none;backdrop-filter:none}.bx-menu-wrapper.bx-menu-animated{transition:transform .2s cubic-bezier(.25,.8,.25,1)}.bx-menu-wrapper{transform-origin:top}.bx-menu-wrapper.is-hidden{opacity:0;transform:scaleY(.95);pointer-events:none}:host([data-bx-surface]){border-radius:var(--bx-glass-radius, var(--bx-rounded-lg, .75rem));--bx-glass-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);color:var(--bx-glass-text, var(--bx-text-primary))}:host([data-bx-surface]) .bx-menu-wrapper{background:transparent;border-color:transparent;border-radius:inherit;box-shadow:none}\n"]
 		}]
 	}]
 });
@@ -345,432 +332,1108 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-var TooltipDirective = class TooltipDirective {
-	elementRef = inject(ElementRef);
-	overlay = inject(Overlay);
-	positionBuilder = inject(BxOverlayPositionService);
-	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 */ []);
-	overlayRef = null;
-	transition;
-	disconnectTheme;
-	disconnectLighting;
-	positionSubscription;
-	keyboardSubscription;
-	revision = 0;
-	hovered = false;
-	focused = false;
-	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;
-			}
-		});
-	}
-	hide() {
-		const revision = ++this.revision;
-		this.removeDescription();
-		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() {
-		this.hovered = true;
-		this.show();
-	}
-	onLeave() {
-		this.hovered = false;
-		if (!this.focused) this.hide();
-	}
-	onFocus() {
-		this.focused = true;
-		this.show();
-	}
-	onBlur(event) {
-		if (event.relatedTarget instanceof Node && this.elementRef.nativeElement.contains(event.relatedTarget)) return;
-		this.focused = false;
-		if (!this.hovered) this.hide();
-	}
-	onEscape(event) {
-		if (event.key === "Escape" && this.overlayRef) {
-			event.stopPropagation();
-			this.hovered = false;
-			this.focused = false;
-			this.hide();
-		}
-	}
-	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");
-	}
-	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;
-	}
+const DEFAULT_TABS_VARIANT = "segmented";
+const DEFAULT_TABS_LABEL = "Tabs";
+const TAB_NAVIGATION_KEYS = /* @__PURE__ */ new Set([
+	"ArrowLeft",
+	"ArrowRight",
+	"Home",
+	"End"
+]);
+const DEFAULT_TAB_COLOR = "primary";
+const TAB_EMISSION_OPACITY = .15;
+const TAB_COLOR_TOKENS = {
+	primary: "primary",
+	accent: "accent",
+	success: "text-success",
+	danger: "text-danger",
+	info: "text-info",
+	warn: "text-warn",
+	grayscale: "text-primary"
+};
+function resolveTabText(text, adapter) {
+	adapter?.version?.();
+	return isTextWithKey(text) ? adapter?.translate(text.key) ?? text.key : text;
+}
+function resolveTabColor(color) {
+	return color ? resolveTokenToCssVar(color) : null;
+}
+var TabContentDirective = class TabContentDirective {
+	template = inject(TemplateRef);
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.2.3",
 		ngImport: i0,
-		type: TooltipDirective,
+		type: TabContentDirective,
 		deps: [],
 		target: i0.ɵɵFactoryTarget.Directive
 	});
 	static ɵdir = i0.ɵɵngDeclareDirective({
-		minVersion: "17.1.0",
+		minVersion: "14.0.0",
 		version: "22.2.3",
-		type: TooltipDirective,
+		type: TabContentDirective,
 		isStandalone: true,
-		selector: "[bxTooltip]",
+		selector: "ng-template[bxTabContent]",
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: TabContentDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "ng-template[bxTabContent]",
+			standalone: true
+		}]
+	}]
+});
+var Tab = class Tab {
+	id = uuidv4();
+	i18n = inject(BX_I18N, { optional: true });
+	projectedContent = viewChild("content", ...ngDevMode ? [{ debugName: "projectedContent" }] : /* istanbul ignore next */ []);
+	lazyContent = contentChild(TabContentDirective, ...ngDevMode ? [{ debugName: "lazyContent" }] : /* istanbul ignore next */ []);
+	label = input.required(...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	value = input(this.id, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	color = input(DEFAULT_TAB_COLOR, ...ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []);
+	textColor = input(...ngDevMode ? [void 0, { debugName: "textColor" }] : /* istanbul ignore next */ []);
+	highlightColor = input(...ngDevMode ? [void 0, { debugName: "highlightColor" }] : /* istanbul ignore next */ []);
+	contentColor = input(...ngDevMode ? [void 0, { debugName: "contentColor" }] : /* istanbul ignore next */ []);
+	icon = input(...ngDevMode ? [void 0, { debugName: "icon" }] : /* istanbul ignore next */ []);
+	endIcon = input(...ngDevMode ? [void 0, { debugName: "endIcon" }] : /* istanbul ignore next */ []);
+	triggerId = `bx-tab-${this.id}`;
+	panelId = `bx-tab-panel-${this.id}`;
+	resolvedLabel = computed(() => resolveTabText(this.label(), this.i18n), ...ngDevMode ? [{ debugName: "resolvedLabel" }] : /* istanbul ignore next */ []);
+	resolvedHighlight = computed(() => resolveTabColor(this.highlightColor() ?? TAB_COLOR_TOKENS[this.color()]), ...ngDevMode ? [{ debugName: "resolvedHighlight" }] : /* istanbul ignore next */ []);
+	resolvedEmission = computed(() => `color-mix(in srgb, ${this.resolvedHighlight()} ${TAB_EMISSION_OPACITY * 100}%, transparent)`, ...ngDevMode ? [{ debugName: "resolvedEmission" }] : /* istanbul ignore next */ []);
+	resolvedTextColor = computed(() => resolveTabColor(this.textColor()), ...ngDevMode ? [{ debugName: "resolvedTextColor" }] : /* istanbul ignore next */ []);
+	resolvedSelectedText = computed(() => this.resolvedTextColor() ?? resolveTabColor(this.color() === "primary" ? "text-brand" : this.color() === "accent" ? "text-accent" : TAB_COLOR_TOKENS[this.color()]), ...ngDevMode ? [{ debugName: "resolvedSelectedText" }] : /* istanbul ignore next */ []);
+	resolvedContentColor = computed(() => resolveTabColor(this.contentColor()), ...ngDevMode ? [{ debugName: "resolvedContentColor" }] : /* istanbul ignore next */ []);
+	template = computed(() => this.lazyContent()?.template ?? this.projectedContent(), ...ngDevMode ? [{ debugName: "template" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: Tab,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.2.3",
+		type: Tab,
+		isStandalone: true,
+		selector: "bx-tab",
 		inputs: {
-			bxTooltip: {
-				classPropertyName: "bxTooltip",
-				publicName: "bxTooltip",
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
 				isSignal: true,
 				isRequired: true,
 				transformFunction: null
 			},
-			placement: {
-				classPropertyName: "placement",
-				publicName: "placement",
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			color: {
+				classPropertyName: "color",
+				publicName: "color",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			textColor: {
+				classPropertyName: "textColor",
+				publicName: "textColor",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			highlightColor: {
+				classPropertyName: "highlightColor",
+				publicName: "highlightColor",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			contentColor: {
+				classPropertyName: "contentColor",
+				publicName: "contentColor",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			icon: {
+				classPropertyName: "icon",
+				publicName: "icon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			endIcon: {
+				classPropertyName: "endIcon",
+				publicName: "endIcon",
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
 			}
 		},
-		host: { listeners: {
-			"mouseenter": "onEnter()",
-			"mouseleave": "onLeave()",
-			"focusin": "onFocus()",
-			"focusout": "onBlur($event)"
-		} },
-		ngImport: i0
+		queries: [{
+			propertyName: "lazyContent",
+			first: true,
+			predicate: TabContentDirective,
+			descendants: true,
+			isSignal: true
+		}],
+		viewQueries: [{
+			propertyName: "projectedContent",
+			first: true,
+			predicate: ["content"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<ng-template #content><ng-content></ng-content></ng-template>\n",
+		styles: [":host{display:none}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
 	});
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
 	version: "22.2.3",
 	ngImport: i0,
-	type: TooltipDirective,
+	type: Tab,
 	decorators: [{
-		type: Directive,
-		args: [{ selector: "[bxTooltip]" }]
+		type: Component,
+		args: [{
+			selector: "bx-tab",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<ng-template #content><ng-content></ng-content></ng-template>\n",
+			styles: [":host{display:none}\n"]
+		}]
 	}],
-	ctorParameters: () => [],
 	propDecorators: {
-		bxTooltip: [{
+		projectedContent: [{
+			type: i0.ViewChild,
+			args: ["content", { isSignal: true }]
+		}],
+		lazyContent: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => TabContentDirective), { isSignal: true }]
+		}],
+		label: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "bxTooltip",
+				alias: "label",
 				required: true
 			}]
 		}],
-		placement: [{
+		value: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "placement",
+				alias: "value",
 				required: false
 			}]
 		}],
-		onEnter: [{
-			type: HostListener,
-			args: ["mouseenter"]
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
 		}],
-		onLeave: [{
-			type: HostListener,
-			args: ["mouseleave"]
+		color: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "color",
+				required: false
+			}]
 		}],
-		onFocus: [{
-			type: HostListener,
-			args: ["focusin"]
+		textColor: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "textColor",
+				required: false
+			}]
 		}],
-		onBlur: [{
-			type: HostListener,
-			args: ["focusout", ["$event"]]
-		}]
-	}
-});
-const BX_OVERLAY_CONTEXT = new InjectionToken("BX_OVERLAY_CONTEXT");
-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);
+		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;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:auto;overscroll-behavior:contain}.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;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:auto;overscroll-behavior:contain}.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 }]
+		}],
+		tabs: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => Tab), { isSignal: true }]
+		}],
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		selectedValue: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selectedValue",
+				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);
-	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 */ []);
+	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));
+		});
+		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 */ []);
-	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");
+		this.disconnectLighting = void 0;
 	}
 	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 +1445,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 +1467,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 +1490,270 @@ 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);
 	}
-	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);
+	toggle(event) {
+		if (this.isDisabled()) return;
+		event?.stopPropagation();
+		if (this.isOpen()) this.close();
+		else this.open();
 	}
-	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);
+	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 });
 	}
-	clearTouchGuard() {
-		this.touchGuard?.abort();
-		this.touchGuard = void 0;
-		this.elementRef.nativeElement.ownerDocument.defaultView?.clearTimeout(this.touchGuardTimer);
-		this.touchGuardTimer = void 0;
+	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");
 	}
-	openAt(x, y) {
-		this.dispose();
-		++this.revision;
+	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;
-		this.overlayRef = this.overlay.create({
-			positionStrategy: this.positionBuilder.getCoordinateStrategy(x, y),
+		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 || !!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) => {
-				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;
-			});
-		}
+		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();
 	}
-	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 +1761,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"]]
 		}],
@@ -1277,6 +1873,6 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}] }
 });
-export { BX_OVERLAY_CONTEXT, BxOverlayContextDirective, ContextMenuDirective, DropdownDirective, Menu, MenuItem, Tooltip, TooltipDirective };
+export { BX_OVERLAY_CONTEXT, BxOverlayContextDirective, ContextMenuDirective, DropdownDirective, Menu, MenuItem, Tab, TabContentDirective, Tabs, Tooltip, TooltipDirective };
 
 //# sourceMappingURL=filip.mazev-blocks-primitives.mjs.map