@filip.mazev/blocks 1.4.10 → 1.4.12

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

@@ -1,14 +1,14 @@
 import { BxSurfaceDirective } from "@filip.mazev/blocks/effects";
 import * as i0 from "@angular/core";
-import { ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, HostListener, InjectionToken, NgZone, PLATFORM_ID, 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 { Subscription } from "rxjs";
-import { isPlatformBrowser } from "@angular/common";
 var Tooltip = class Tooltip {
 	i18n = inject(BX_I18N, { optional: true });
 	a11y = inject(BxA11yService);
@@ -44,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,
@@ -73,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: [{
@@ -105,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
 	});
 };
@@ -132,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"]
 		}]
 	}]
 });
@@ -346,6 +332,491 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
+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: TabContentDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.3",
+		type: TabContentDirective,
+		isStandalone: true,
+		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: {
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			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
+			}
+		},
+		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: Tab,
+	decorators: [{
+		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"]
+		}]
+	}],
+	propDecorators: {
+		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: "label",
+				required: true
+			}]
+		}],
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		color: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "color",
+				required: false
+			}]
+		}],
+		textColor: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "textColor",
+				required: false
+			}]
+		}],
+		highlightColor: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "highlightColor",
+				required: false
+			}]
+		}],
+		contentColor: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "contentColor",
+				required: false
+			}]
+		}],
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: false
+			}]
+		}],
+		endIcon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "endIcon",
+				required: false
+			}]
+		}]
+	}
+});
+var Tabs = class Tabs {
+	i18n = inject(BX_I18N, { optional: true });
+	triggers = viewChildren("trigger", ...ngDevMode ? [{ debugName: "triggers" }] : /* istanbul ignore next */ []);
+	a11y = inject(BxA11yService);
+	hasRendered = signal(false, ...ngDevMode ? [{ debugName: "hasRendered" }] : /* istanbul ignore next */ []);
+	tabs = contentChildren(Tab, ...ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []);
+	activeTab = computed(() => {
+		const enabled = this.tabs().filter((tab) => !tab.disabled());
+		return enabled.find((tab) => tab.value() === this.selectedValue()) ?? enabled[0];
+	}, ...ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []);
+	resolvedLabel = computed(() => resolveTabText(this.ariaLabel(), this.i18n), ...ngDevMode ? [{ debugName: "resolvedLabel" }] : /* istanbul ignore next */ []);
+	variant = input(DEFAULT_TABS_VARIANT, ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	ariaLabel = input(DEFAULT_TABS_LABEL, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	selectedValue = model(null, ...ngDevMode ? [{ debugName: "selectedValue" }] : /* istanbul ignore next */ []);
+	constructor() {
+		afterNextRender(() => this.hasRendered.set(true));
+		afterRenderEffect(() => {
+			const value = this.activeTab()?.value() ?? null;
+			if (this.selectedValue() !== value) this.selectedValue.set(value);
+		});
+	}
+	select(value) {
+		if (this.tabs().find((item) => item.value() === value && !item.disabled())) this.selectedValue.set(value);
+	}
+	onTabKey(event, tab) {
+		if (event.altKey || event.ctrlKey || event.metaKey || !TAB_NAVIGATION_KEYS.has(event.key)) return;
+		const enabled = this.tabs().filter((item) => !item.disabled());
+		const current = enabled.indexOf(tab);
+		if (current < 0) return;
+		event.preventDefault();
+		event.stopPropagation();
+		const button = event.currentTarget;
+		const rtl = button.ownerDocument.defaultView?.getComputedStyle(button).direction === "rtl";
+		const direction = (event.key === "ArrowRight" ? 1 : -1) * (rtl ? -1 : 1);
+		const next = enabled[event.key === "Home" ? 0 : event.key === "End" ? enabled.length - 1 : (current + direction + enabled.length) % enabled.length];
+		this.select(next.value());
+		const trigger = this.triggers().find((item) => item.nativeElement.id === next.triggerId)?.nativeElement;
+		trigger?.focus({ preventScroll: true });
+		trigger?.scrollIntoView({
+			block: "nearest",
+			inline: "nearest"
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: Tabs,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: Tabs,
+		isStandalone: true,
+		selector: "bx-tabs",
+		inputs: {
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			selectedValue: {
+				classPropertyName: "selectedValue",
+				publicName: "selectedValue",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { selectedValue: "selectedValueChange" },
+		host: { properties: {
+			"class.bx-tabs-underline": "variant() === \"underline\"",
+			"class.bx-tabs-animated": "hasRendered() && !a11y.isReducedMotion()"
+		} },
+		queries: [{
+			propertyName: "tabs",
+			predicate: Tab,
+			isSignal: true
+		}],
+		viewQueries: [{
+			propertyName: "triggers",
+			predicate: ["trigger"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<ng-content select=\"bx-tab\"></ng-content>\n\n<div bxSurface data-bx-surface=\"glass\" class=\"bx-tab-header\" role=\"tablist\" [attr.aria-label]=\"resolvedLabel()\" aria-orientation=\"horizontal\">\n<div class=\"bx-tab-list\">\n    @for (tab of tabs(); track tab) {\n    <button #trigger bxSurface data-bx-surface=\"glass\" class=\"bx-tab-trigger\" type=\"button\" role=\"tab\"\n        [bxSurfaceEmission]=\"tab.resolvedEmission()\"\n        [style.--bx-tab-highlight]=\"tab.resolvedHighlight()\" [style.--bx-tab-text]=\"tab.resolvedTextColor()\"\n        [style.--bx-tab-selected-text]=\"tab.resolvedSelectedText()\"\n        [id]=\"tab.triggerId\" [attr.aria-controls]=\"tab.panelId\" [attr.aria-selected]=\"tab === activeTab()\"\n        [attr.tabindex]=\"tab === activeTab() ? 0 : -1\" [disabled]=\"tab.disabled()\"\n        [class.is-selected]=\"tab === activeTab()\" (click)=\"select(tab.value())\" (keydown)=\"onTabKey($event, tab)\">\n        @if (tab.icon()) { <bx-icon [name]=\"tab.icon()!\" size=\"16\" /> }\n        <span>{{ tab.resolvedLabel() }}</span>\n        @if (tab.endIcon()) { <bx-icon [name]=\"tab.endIcon()!\" size=\"16\" /> }\n    </button>\n    }\n</div>\n</div>\n\n<div class=\"bx-tab-panels\">\n    @for (tab of tabs(); track tab) {\n    <div class=\"bx-tab-panel\" role=\"tabpanel\" tabindex=\"0\" [id]=\"tab.panelId\"\n        [style.color]=\"tab.resolvedContentColor()\"\n        [attr.aria-labelledby]=\"tab.triggerId\" [hidden]=\"tab !== activeTab()\">\n        @if (tab === activeTab()) {\n        <ng-container [ngTemplateOutlet]=\"tab.template()\"></ng-container>\n        }\n    </div>\n    }\n</div>\n",
+		styles: [":host{display:flex;flex-direction:column;min-width:0;min-height:0;box-sizing:border-box;width:100%;max-width:100%;gap:var(--bx-tabs-panel-gap, 1.5rem)}.bx-tab-header{--bx-glass-surface: var(--bx-bg-surface-alt);--bx-glass-edge: var(--bx-border-default);--bx-glass-shadow: none;--bx-glass-opacity: calc(.1 + .25 * var(--bx-glassiness, .5));--bx-glass-radius: .5rem;display:flex;align-self:flex-start;flex:none;box-sizing:border-box;width:fit-content;max-width:100%;padding:.25rem;border:1px solid var(--bx-border-default);border-radius:.5rem}.bx-tab-list{display:flex;flex:1 1 auto;gap:.25rem;min-width:0;padding:1px;overflow:auto hidden;overscroll-behavior-x:contain;scrollbar-width:thin}.bx-tab-trigger{--bx-glass-surface: var(--bx-bg-surface);--bx-glass-text: var(--bx-tab-text, var(--bx-text-secondary));--bx-glass-edge: transparent;--bx-glass-radius: .25rem;--bx-glass-opacity: 0;--bx-glass-decoration-opacity: 0;--bx-glass-rim-visibility: 0;--bx-glass-shadow: none;display:inline-flex;align-items:center;gap:.5rem;flex:none;padding:.5rem .75rem;border:1px solid transparent;border-radius:.25rem;font:inherit;font-size:.875rem;white-space:nowrap;cursor:pointer}.bx-tab-trigger:hover:not(:disabled,.is-selected){--bx-glass-text: var(--bx-tab-text, var(--bx-text-primary));--bx-glass-opacity: .15}.bx-tab-trigger.is-selected{--bx-glass-surface: color-mix( in srgb, var(--bx-tab-highlight, var(--bx-primary)) 35%, var(--bx-bg-surface) );--bx-glass-text: var(--bx-tab-selected-text, var(--bx-text-brand));--bx-glass-edge: color-mix( in srgb, var(--bx-tab-highlight, var(--bx-primary)) 35%, transparent );--bx-glass-opacity: .45;--bx-glass-decoration-opacity: .5;--bx-glass-rim-visibility: .65;--bx-glass-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1)}.bx-tab-trigger:disabled{opacity:.4;cursor:not-allowed}.bx-tab-trigger:focus-visible{outline:2px solid var(--bx-tab-highlight, var(--bx-border-brand));outline-offset:-2px}.bx-tab-panels{flex:1 1 auto;min-width:0;min-height:0;max-height:var(--bx-tabs-max-panel-height, none);overflow:var(--bx-tabs-panel-overflow, visible)}.bx-tab-panel{min-width:0}.bx-tab-panel:focus-visible{outline:2px solid var(--bx-border-brand);outline-offset:-2px}:host(.bx-tabs-animated) .bx-tab-trigger{transition:background-color .1s ease-in-out,color .1s ease-in-out,box-shadow .1s ease-in-out}:host(.bx-tabs-underline){gap:var(--bx-tabs-panel-gap, 0)}:host(.bx-tabs-underline) .bx-tab-header{align-self:stretch;width:auto;padding:0;border:0;border-bottom:1px solid var(--bx-border-default);border-radius:0}:host(.bx-tabs-underline) .bx-tab-list{gap:0}:host(.bx-tabs-underline) .bx-tab-trigger{padding:.75rem 1rem;border-inline-end:1px solid var(--bx-border-default);border-radius:0;font-size:.8rem}:host(.bx-tabs-underline) .bx-tab-trigger.is-selected{--bx-glass-shadow: inset 0 -2px 0 var(--bx-tab-highlight, var(--bx-border-brand))}@media(forced-colors:active){.bx-tab-trigger.is-selected{outline:2px solid Highlight;outline-offset:-2px}}\n"],
+		dependencies: [
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "directive",
+				type: BxSurfaceDirective,
+				selector: "[bxSurface]",
+				inputs: [
+					"bxSurfaceInteractive",
+					"bxSurfaceGlassiness",
+					"bxSurfaceEmission",
+					"bxSurfaceFocusEmission",
+					"bxReducedTransparency"
+				],
+				exportAs: ["bxSurface"]
+			},
+			{
+				kind: "component",
+				type: Icon,
+				selector: "bx-icon",
+				inputs: [
+					"name",
+					"size",
+					"color",
+					"bgColor",
+					"strokeWidth",
+					"decorative",
+					"ariaLabel"
+				]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: Tabs,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "bx-tabs",
+			standalone: true,
+			imports: [
+				NgTemplateOutlet,
+				BxSurfaceDirective,
+				Icon
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				"[class.bx-tabs-underline]": "variant() === \"underline\"",
+				"[class.bx-tabs-animated]": "hasRendered() && !a11y.isReducedMotion()"
+			},
+			template: "<ng-content select=\"bx-tab\"></ng-content>\n\n<div bxSurface data-bx-surface=\"glass\" class=\"bx-tab-header\" role=\"tablist\" [attr.aria-label]=\"resolvedLabel()\" aria-orientation=\"horizontal\">\n<div class=\"bx-tab-list\">\n    @for (tab of tabs(); track tab) {\n    <button #trigger bxSurface data-bx-surface=\"glass\" class=\"bx-tab-trigger\" type=\"button\" role=\"tab\"\n        [bxSurfaceEmission]=\"tab.resolvedEmission()\"\n        [style.--bx-tab-highlight]=\"tab.resolvedHighlight()\" [style.--bx-tab-text]=\"tab.resolvedTextColor()\"\n        [style.--bx-tab-selected-text]=\"tab.resolvedSelectedText()\"\n        [id]=\"tab.triggerId\" [attr.aria-controls]=\"tab.panelId\" [attr.aria-selected]=\"tab === activeTab()\"\n        [attr.tabindex]=\"tab === activeTab() ? 0 : -1\" [disabled]=\"tab.disabled()\"\n        [class.is-selected]=\"tab === activeTab()\" (click)=\"select(tab.value())\" (keydown)=\"onTabKey($event, tab)\">\n        @if (tab.icon()) { <bx-icon [name]=\"tab.icon()!\" size=\"16\" /> }\n        <span>{{ tab.resolvedLabel() }}</span>\n        @if (tab.endIcon()) { <bx-icon [name]=\"tab.endIcon()!\" size=\"16\" /> }\n    </button>\n    }\n</div>\n</div>\n\n<div class=\"bx-tab-panels\">\n    @for (tab of tabs(); track tab) {\n    <div class=\"bx-tab-panel\" role=\"tabpanel\" tabindex=\"0\" [id]=\"tab.panelId\"\n        [style.color]=\"tab.resolvedContentColor()\"\n        [attr.aria-labelledby]=\"tab.triggerId\" [hidden]=\"tab !== activeTab()\">\n        @if (tab === activeTab()) {\n        <ng-container [ngTemplateOutlet]=\"tab.template()\"></ng-container>\n        }\n    </div>\n    }\n</div>\n",
+			styles: [":host{display:flex;flex-direction:column;min-width:0;min-height:0;box-sizing:border-box;width:100%;max-width:100%;gap:var(--bx-tabs-panel-gap, 1.5rem)}.bx-tab-header{--bx-glass-surface: var(--bx-bg-surface-alt);--bx-glass-edge: var(--bx-border-default);--bx-glass-shadow: none;--bx-glass-opacity: calc(.1 + .25 * var(--bx-glassiness, .5));--bx-glass-radius: .5rem;display:flex;align-self:flex-start;flex:none;box-sizing:border-box;width:fit-content;max-width:100%;padding:.25rem;border:1px solid var(--bx-border-default);border-radius:.5rem}.bx-tab-list{display:flex;flex:1 1 auto;gap:.25rem;min-width:0;padding:1px;overflow:auto hidden;overscroll-behavior-x:contain;scrollbar-width:thin}.bx-tab-trigger{--bx-glass-surface: var(--bx-bg-surface);--bx-glass-text: var(--bx-tab-text, var(--bx-text-secondary));--bx-glass-edge: transparent;--bx-glass-radius: .25rem;--bx-glass-opacity: 0;--bx-glass-decoration-opacity: 0;--bx-glass-rim-visibility: 0;--bx-glass-shadow: none;display:inline-flex;align-items:center;gap:.5rem;flex:none;padding:.5rem .75rem;border:1px solid transparent;border-radius:.25rem;font:inherit;font-size:.875rem;white-space:nowrap;cursor:pointer}.bx-tab-trigger:hover:not(:disabled,.is-selected){--bx-glass-text: var(--bx-tab-text, var(--bx-text-primary));--bx-glass-opacity: .15}.bx-tab-trigger.is-selected{--bx-glass-surface: color-mix( in srgb, var(--bx-tab-highlight, var(--bx-primary)) 35%, var(--bx-bg-surface) );--bx-glass-text: var(--bx-tab-selected-text, var(--bx-text-brand));--bx-glass-edge: color-mix( in srgb, var(--bx-tab-highlight, var(--bx-primary)) 35%, transparent );--bx-glass-opacity: .45;--bx-glass-decoration-opacity: .5;--bx-glass-rim-visibility: .65;--bx-glass-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1)}.bx-tab-trigger:disabled{opacity:.4;cursor:not-allowed}.bx-tab-trigger:focus-visible{outline:2px solid var(--bx-tab-highlight, var(--bx-border-brand));outline-offset:-2px}.bx-tab-panels{flex:1 1 auto;min-width:0;min-height:0;max-height:var(--bx-tabs-max-panel-height, none);overflow:var(--bx-tabs-panel-overflow, visible)}.bx-tab-panel{min-width:0}.bx-tab-panel:focus-visible{outline:2px solid var(--bx-border-brand);outline-offset:-2px}:host(.bx-tabs-animated) .bx-tab-trigger{transition:background-color .1s ease-in-out,color .1s ease-in-out,box-shadow .1s ease-in-out}:host(.bx-tabs-underline){gap:var(--bx-tabs-panel-gap, 0)}:host(.bx-tabs-underline) .bx-tab-header{align-self:stretch;width:auto;padding:0;border:0;border-bottom:1px solid var(--bx-border-default);border-radius:0}:host(.bx-tabs-underline) .bx-tab-list{gap:0}:host(.bx-tabs-underline) .bx-tab-trigger{padding:.75rem 1rem;border-inline-end:1px solid var(--bx-border-default);border-radius:0;font-size:.8rem}:host(.bx-tabs-underline) .bx-tab-trigger.is-selected{--bx-glass-shadow: inset 0 -2px 0 var(--bx-tab-highlight, var(--bx-border-brand))}@media(forced-colors:active){.bx-tab-trigger.is-selected{outline:2px solid Highlight;outline-offset:-2px}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		triggers: [{
+			type: i0.ViewChildren,
+			args: ["trigger", { isSignal: true }]
+		}],
+		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);
@@ -1163,7 +1634,7 @@ var DropdownDirective = class DropdownDirective {
 		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(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();
@@ -1181,22 +1652,6 @@ var DropdownDirective = class DropdownDirective {
 		overlay.attach(new TemplatePortal(this.bxDropdown(), this.vcr)).detectChanges();
 		overlay.updatePosition();
 	}
-	trackScroll(overlay, positionStrategy) {
-		const source = this.elementRef.nativeElement;
-		const view = source.ownerDocument.defaultView;
-		if (!view) return;
-		this.zone.runOutsideAngular(() => {
-			const reposition = (event) => {
-				const target = event.target;
-				if (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));
-		});
-	}
 	isDisabled() {
 		const element = this.elementRef.nativeElement;
 		return element.hasAttribute("disabled") || element.getAttribute("aria-disabled") === "true";
@@ -1418,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