@shival99/z-ui 2.3.11 → 2.4.1

package/fesm2022/shival99-z-ui-components-z-tabs.mjs

@@ -439,13 +439,22 @@ class ZTabsComponent {
     ...(ngDevMode ? [{ debugName: "verticalTabsScrollable" }] : /* istanbul ignore next */ []));
     navClasses = computed(() => zMergeClasses('z-tabs-nav flex items-center gap-1.5', this.zClassContent()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "navClasses" }] : /* istanbul ignore next */ []));
-    getTabItemClasses(_tab) {
-        return zMergeClasses(zTabItemVariants({
-            zType: this.zType(),
-            zSize: this.zSize(),
-            zOrientation: this.zOrientation(),
+    tabItems = computed(() => {
+        const activeValue = this.activeTab();
+        const classes = this._tabItemClasses();
+        return this.zTabs().map(tab => ({
+            tab,
+            classes,
+            isActive: activeValue === tab.value,
         }));
-    }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabItems" }] : /* istanbul ignore next */ []));
+    _tabItemClasses = computed(() => zMergeClasses(zTabItemVariants({
+        zType: this.zType(),
+        zSize: this.zSize(),
+        zOrientation: this.zOrientation(),
+    })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_tabItemClasses" }] : /* istanbul ignore next */ []));
     selectTab(tab, scrollToView = true) {
         if (tab.disabled) {
             return;
@@ -492,9 +501,6 @@ class ZTabsComponent {
             });
         }
     }
-    isTabActive(tab) {
-        return this.activeTab() === tab.value;
-    }
     onTabKeydown(event, currentIndex) {
         const tabs = this.zTabs().filter(t => !t.disabled);
         const currentTab = tabs[currentIndex];
@@ -771,7 +777,7 @@ class ZTabsComponent {
         }, 150);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: ZTabsComponent, isStandalone: true, selector: "z-tabs", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zTabs: { classPropertyName: "zTabs", publicName: "zTabs", isSignal: true, isRequired: true, transformFunction: null }, zType: { classPropertyName: "zType", publicName: "zType", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zOrientation: { classPropertyName: "zOrientation", publicName: "zOrientation", isSignal: true, isRequired: false, transformFunction: null }, zContentFit: { classPropertyName: "zContentFit", publicName: "zContentFit", isSignal: true, isRequired: false, transformFunction: null }, zLazy: { classPropertyName: "zLazy", publicName: "zLazy", isSignal: true, isRequired: false, transformFunction: null }, zTabsOnly: { classPropertyName: "zTabsOnly", publicName: "zTabsOnly", isSignal: true, isRequired: false, transformFunction: null }, zShowNavWrapper: { classPropertyName: "zShowNavWrapper", publicName: "zShowNavWrapper", isSignal: true, isRequired: false, transformFunction: null }, zNavFullWidth: { classPropertyName: "zNavFullWidth", publicName: "zNavFullWidth", isSignal: true, isRequired: false, transformFunction: null }, zClassContent: { classPropertyName: "zClassContent", publicName: "zClassContent", isSignal: true, isRequired: false, transformFunction: null }, zShowContentWrapper: { classPropertyName: "zShowContentWrapper", publicName: "zShowContentWrapper", isSignal: true, isRequired: false, transformFunction: null }, zReloadable: { classPropertyName: "zReloadable", publicName: "zReloadable", isSignal: true, isRequired: false, transformFunction: null }, zEmitOnActiveClick: { classPropertyName: "zEmitOnActiveClick", publicName: "zEmitOnActiveClick", isSignal: true, isRequired: false, transformFunction: null }, zCache: { classPropertyName: "zCache", publicName: "zCache", isSignal: true, isRequired: false, transformFunction: null }, zCacheKey: { classPropertyName: "zCacheKey", publicName: "zCacheKey", isSignal: true, isRequired: false, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTab: "activeTabChange", zTabChange: "zTabChange" }, host: { classAttribute: "z-tabs-wrapper block" }, queries: [{ propertyName: "tabPanels", predicate: ZTabPanelDirective, isSignal: true }], viewQueries: [{ propertyName: "tabsListContainer", first: true, predicate: ["tabsListContainer"], descendants: true, isSignal: true }, { propertyName: "tabButtons", predicate: ["tabButton"], descendants: true, isSignal: true }, { propertyName: "glideIndicator", first: true, predicate: ["glideIndicator"], descendants: true, isSignal: true }, { propertyName: "panelHost", first: true, predicate: ["panelHost"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<div\n  class=\"z-tabs-container flex gap-1\"\n  [attr.data-type]=\"zType()\"\n  [attr.data-orientation]=\"zOrientation()\"\n  [attr.data-content-fit]=\"zContentFit()\"\n  [class.flex-col]=\"!zTabsOnly()\"\n  [class.flex-row]=\"zOrientation() === 'vertical'\"\n  [class.gap-4]=\"zOrientation() === 'vertical'\">\n  <!-- Tabs Navigation (Left/Scroll/Tabs/Right/Dropdown) -->\n  <div\n    [class]=\"navClasses()\"\n    [class.z-tabs-nav-surface]=\"zShowNavWrapper() && isGlideType()\"\n    [class.w-full]=\"zOrientation() === 'horizontal' && (!zShowNavWrapper() || zNavFullWidth())\"\n    [class.w-fit]=\"zOrientation() === 'horizontal' && zShowNavWrapper() && !zNavFullWidth()\"\n    [class.max-w-full]=\"zOrientation() === 'horizontal' && zShowNavWrapper() && !zNavFullWidth()\"\n    [class.w-auto]=\"zOrientation() === 'vertical'\"\n    [class.shrink-0]=\"zOrientation() === 'vertical'\">\n    <!-- Scroll Left Button -->\n    @if (canScrollLeft() && zOrientation() === 'horizontal') {\n      <z-button\n        zType=\"ghost\"\n        zSize=\"sm\"\n        zIconOnly=\"true\"\n        [zWave]=\"false\"\n        class=\"z-tabs-nav-control shrink-0\"\n        (click)=\"scrollLeft()\"\n        aria-label=\"Scroll left\">\n        <z-icon zType=\"lucideChevronLeft\" zSize=\"16\" />\n      </z-button>\n    }\n\n    <!-- Tabs List Container with Scroll + Fade -->\n    <div\n      class=\"z-tabs-scroll-container relative min-w-0 flex-1\"\n      [class.z-tabs-scroll-container-surface]=\"canScrollLeft() || canScrollRight()\"\n      [attr.data-type]=\"zType()\">\n      @if (zOrientation() === 'vertical') {\n        <ng-scrollbar\n          class=\"z-tabs-scroll-wrapper z-tabs-scrollbar vertical\"\n          [class.z-tabs-scroll-wrapper-limited]=\"verticalTabsScrollable()\"\n          track=\"vertical\"\n          orientation=\"vertical\"\n          appearance=\"compact\"\n          visibility=\"hover\">\n          <ng-container *ngTemplateOutlet=\"tabsListTpl\" />\n        </ng-scrollbar>\n      } @else {\n        <div\n          #tabsListContainer\n          class=\"z-tabs-scroll-wrapper\"\n          [class.z-tabs-scroll-wrapper-scrollable]=\"canScrollLeft() || canScrollRight()\"\n          [class.z-tabs-scroll-wrapper-fade-left]=\"canScrollLeft()\"\n          [class.z-tabs-scroll-wrapper-fade-right]=\"canScrollRight()\"\n          (scroll)=\"onTabsScroll()\">\n          <ng-container *ngTemplateOutlet=\"tabsListTpl\" />\n        </div>\n      }\n    </div>\n\n    <!-- Scroll Right Button -->\n    @if (canScrollRight() && zOrientation() === 'horizontal') {\n      <z-button\n        zType=\"ghost\"\n        zSize=\"sm\"\n        zIconOnly=\"true\"\n        class=\"z-tabs-nav-control shrink-0\"\n        (click)=\"scrollRight()\"\n        [zWave]=\"false\"\n        aria-label=\"Scroll right\">\n        <z-icon zType=\"lucideChevronRight\" zSize=\"16\" />\n      </z-button>\n    }\n\n    <!-- Dropdown Button (Mobile or Overflow) -->\n    @if (zOrientation() === 'horizontal' && (canScrollLeft() || canScrollRight())) {\n      <z-button\n        zType=\"ghost\"\n        zSize=\"sm\"\n        zIconOnly=\"true\"\n        class=\"z-tabs-nav-control shrink-0\"\n        z-popover\n        [zPopoverContent]=\"dropdownTpl\"\n        zPosition=\"bottom-right\"\n        [zWave]=\"false\"\n        zClass=\"min-w-[6.25rem] max-w-[12.5rem]\"\n        (zShow)=\"scrollToActiveDropdownItem()\"\n        aria-label=\"Select tab\">\n        <z-icon zType=\"lucideChevronDown\" zSize=\"16\" />\n      </z-button>\n    }\n  </div>\n\n  <ng-template #tabsListTpl>\n    <!-- Tab List -->\n    <div\n      [class]=\"tabsClasses()\"\n      [class.pb-0.5]=\"tabsListHasBottomPadding()\"\n      role=\"tablist\"\n      [attr.aria-orientation]=\"zOrientation()\"\n      [attr.data-type]=\"zType()\">\n      @if (isGlideType()) {\n        <div\n          #glideIndicator\n          class=\"z-tabs-glide-indicator pointer-events-none absolute top-0 left-0 z-[6]\"\n          [attr.data-type]=\"zType()\"\n          aria-hidden=\"true\"></div>\n      }\n      @for (tab of zTabs(); track tab.value; let idx = $index; let last = $last) {\n        <button\n          #tabButton\n          type=\"button\"\n          role=\"tab\"\n          [class]=\"getTabItemClasses(tab)\"\n          [attr.data-active]=\"isTabActive(tab)\"\n          [attr.data-state]=\"isTabActive(tab) ? 'active' : 'inactive'\"\n          [attr.data-type]=\"zType()\"\n          [attr.data-orientation]=\"zOrientation()\"\n          [attr.data-last]=\"last\"\n          [attr.aria-selected]=\"isTabActive(tab)\"\n          [attr.aria-controls]=\"'panel-' + tab.value\"\n          [disabled]=\"tab.disabled\"\n          [tabindex]=\"isTabActive(tab) ? 0 : -1\"\n          z-tooltip\n          [zContent]=\"zOrientation() === 'vertical' ? (tab.label | translate) : ''\"\n          zPosition=\"top\"\n          [zHideDelay]=\"0\"\n          [zOffset]=\"5\"\n          [zArrow]=\"false\"\n          (click)=\"selectTab(tab)\"\n          (keydown)=\"onTabKeydown($event, idx)\">\n          @if (tab.icon) {\n            <z-icon\n              [zType]=\"tab.icon\"\n              zSize=\"16\"\n              class=\"shrink-0\"\n              [class.z-tab-icon-bounce]=\"isGlideType() && bouncingTab() === tab.value\" />\n          }\n          <span\n            class=\"z-tab-item-label min-w-0 flex-1 truncate text-left\"\n            [class.z-tab-icon-bounce]=\"isGlideType() && bouncingTab() === tab.value\">\n            {{ tab.label | translate }}\n          </span>\n          @if (tab.badge) {\n            <span\n              class=\"ring-background ml-1.5 inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs font-semibold ring-2\"\n              [class.bg-primary]=\"zType() !== 'badge'\"\n              [class.text-primary-foreground]=\"zType() !== 'badge'\"\n              [class.bg-primary!]=\"zType() === 'badge'\"\n              [class.text-primary-foreground!]=\"zType() === 'badge'\">\n              {{ tab.badge }}\n            </span>\n          }\n        </button>\n      }\n    </div>\n  </ng-template>\n\n  <!-- Tab Panels -->\n  @if (!zTabsOnly()) {\n    <div\n      class=\"z-tabs-panels min-h-0\"\n      [class.flex-1]=\"zOrientation() === 'vertical'\"\n      [class.shadow-xs]=\"contentWrapperFramed()\"\n      [class.z-tabs-panels-unwrapped]=\"!contentWrapperFramed()\">\n      @if (!zLazy()) {\n        @for (panel of tabPanels(); track panel.zTabPanel()) {\n          <div\n            role=\"tabpanel\"\n            [id]=\"'panel-' + panel.zTabPanel()\"\n            [attr.aria-labelledby]=\"panel.zTabPanel()\"\n            [attr.data-state]=\"activeTab() === panel.zTabPanel() ? 'active' : 'inactive'\"\n            [attr.inert]=\"activeTab() === panel.zTabPanel() ? null : ''\">\n            <ng-container *ngTemplateOutlet=\"panel.template\" />\n          </div>\n        }\n      } @else if (renderedTab()) {\n        <div role=\"tabpanel\" [id]=\"'panel-' + renderedTab()\" [attr.aria-labelledby]=\"renderedTab()\" data-state=\"active\">\n          <ng-container #panelHost />\n        </div>\n      }\n    </div>\n  }\n</div>\n\n<!-- Dropdown Menu Template -->\n<ng-template #dropdownTpl let-close=\"close\">\n  <div\n    class=\"z-tabs-dropdown-menu flex max-h-[18.75rem] max-w-[12.5rem] min-w-[6.25rem] flex-col gap-0.5 overflow-y-auto p-1\">\n    @for (tab of zTabs(); track tab.value) {\n      <button\n        #dropdownItem\n        type=\"button\"\n        class=\"flex w-full cursor-pointer items-center justify-start gap-2 rounded-sm px-2 py-1.5 text-left text-sm font-medium transition-colors outline-none disabled:pointer-events-none disabled:opacity-50\"\n        [class.hover:text-foreground]=\"!isTabActive(tab)\"\n        [class.focus:bg-primary/10]=\"!isTabActive(tab)\"\n        [class.bg-primary/15]=\"isTabActive(tab)\"\n        [class.text-primary]=\"isTabActive(tab)\"\n        [disabled]=\"tab.disabled\"\n        (click)=\"selectTab(tab, true); close()\">\n        @if (tab.icon) {\n          <z-icon [zType]=\"tab.icon\" zSize=\"16\" class=\"text-muted-foreground shrink-0\" />\n        }\n        <span\n          class=\"min-w-0 flex-1 truncate\"\n          z-tooltip\n          [zContent]=\"tab.label | translate\"\n          zPosition=\"top\"\n          [zHideDelay]=\"0\"\n          [zOffset]=\"5\"\n          [zArrow]=\"false\"\n          [zTriggerElement]=\"dropdownItem\">\n          {{ tab.label | translate }}\n        </span>\n        @if (tab.badge) {\n          <span\n            class=\"bg-primary text-primary-foreground inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs font-semibold\">\n            {{ tab.badge }}\n          </span>\n        }\n        @if (isTabActive(tab)) {\n          <z-icon zType=\"lucideCheck\" zSize=\"16\" class=\"text-primary shink-0\" />\n        }\n      </button>\n    }\n  </div>\n</ng-template>\n", styles: [".z-tabs-scroll-wrapper{overflow-x:clip;overflow-y:visible;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}.z-tabs-scroll-wrapper::-webkit-scrollbar{display:none}.z-tabs-scroll-wrapper.vertical{max-height:var(--z-tabs-vertical-max-height, min(22rem, 60vh));overflow:hidden auto}.z-tabs-scroll-wrapper.vertical.z-tabs-scroll-wrapper-limited{height:var(--z-tabs-vertical-max-height, min(22rem, 60vh));overflow:hidden auto}.z-tabs-scroll-wrapper.z-tabs-scroll-wrapper-scrollable{overflow-x:auto}.z-tabs-scroll-wrapper.z-tabs-scroll-wrapper-fade-left{mask-image:linear-gradient(to right,transparent 0,black var(--z-tabs-fade-width),black 100%);-webkit-mask-image:linear-gradient(to right,transparent 0,black var(--z-tabs-fade-width),black 100%)}.z-tabs-scroll-wrapper.z-tabs-scroll-wrapper-fade-right{mask-image:linear-gradient(to left,transparent 0,black var(--z-tabs-fade-width),black 100%);-webkit-mask-image:linear-gradient(to left,transparent 0,black var(--z-tabs-fade-width),black 100%)}.z-tabs-scroll-wrapper.z-tabs-scroll-wrapper-fade-left.z-tabs-scroll-wrapper-fade-right{mask-image:linear-gradient(to right,transparent 0,black var(--z-tabs-fade-width),black calc(100% - var(--z-tabs-fade-width)),transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0,black var(--z-tabs-fade-width),black calc(100% - var(--z-tabs-fade-width)),transparent 100%)}.z-tabs-scrollbar{--scrollbar-padding: .125rem;--z-tabs-scrollbar-gutter: .75rem;--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in oklab, var(--muted-foreground) 35%, transparent);--scrollbar-thumb-hover-color: color-mix(in oklab, var(--muted-foreground) 55%, transparent);--scrollbar-size: .375rem;display:block}.z-tabs-scrollbar .ng-scroll-viewport,.z-tabs-scrollbar .ng-scroll-content{max-width:100%}.z-tabs-scrollbar.z-tabs-scroll-wrapper-limited .ng-scroll-viewport{height:100%;max-height:100%}.z-tabs-scrollbar .ng-scroll-content{box-sizing:border-box;padding-right:var(--z-tabs-scrollbar-gutter)}.z-tabs-scroll-container{isolation:isolate;--z-tabs-fade-width: 2rem}.z-tabs-container:is([data-type=segment],[data-type=segment-solid],[data-type=pill-solid],[data-type=pill-blur]) .z-tabs-scroll-container-surface{background:color-mix(in oklab,var(--background) 72%,var(--muted));border:.0625rem solid color-mix(in oklab,var(--background) 88%,var(--border));box-shadow:0 .0625rem .1875rem #0000000f,0 .125rem .5rem #00000014;backdrop-filter:blur(.75rem) saturate(140%);-webkit-backdrop-filter:blur(.75rem) saturate(140%)}.z-tabs-container:is([data-type=segment],[data-type=segment-solid],[data-type=pill-solid],[data-type=pill-blur]) .z-tabs-scroll-container-surface .z-tabs{background:transparent}.z-tabs-container:is([data-type=segment],[data-type=segment-solid]) .z-tabs-scroll-container-surface{border-radius:.5rem;overflow:hidden}.z-tabs-container:is([data-type=pill-solid],[data-type=pill-blur]) .z-tabs-scroll-container-surface{border-radius:9999px;overflow:hidden}.dark .z-tabs-container:is([data-type=segment],[data-type=segment-solid],[data-type=pill-solid],[data-type=pill-blur]) .z-tabs-scroll-container-surface{background:color-mix(in oklab,var(--muted) 35%,transparent);border-color:color-mix(in oklab,var(--border) 65%,transparent);box-shadow:0 .0625rem .1875rem #0000002e,0 .125rem .5rem #0000003d}.z-tabs{align-items:stretch;min-height:2.5rem}.z-tabs.flex-col{width:100%}.z-tabs.flex-col.border-r{border-right:.0625rem solid hsl(var(--border));padding-right:.5rem}.z-tabs-nav-control{transition:color .2s ease,background-color .2s ease,border-color .2s ease}.z-tabs-nav-surface{background:color-mix(in oklab,var(--background) 72%,var(--muted));border:.0625rem solid color-mix(in oklab,oklch(95% 0 0deg) 88%,var(--border));border-radius:.5rem;padding:.125rem;box-shadow:0 .0625rem .1875rem #0000000f,0 .125rem .5rem #00000014;backdrop-filter:blur(.75rem) saturate(140%);-webkit-backdrop-filter:blur(.75rem) saturate(140%)}.z-tabs-nav-surface .z-tabs{background:transparent}.z-tabs-container:is([data-type=pill-solid],[data-type=pill-blur]) .z-tabs-nav-surface{border-radius:9999px}.dark .z-tabs-nav-surface{background:color-mix(in oklab,var(--muted) 35%,transparent);border-color:color-mix(in oklab,var(--border) 65%,transparent);box-shadow:0 .0625rem .1875rem #0000002e,0 .125rem .5rem #0000003d}.z-tab-item{-webkit-tap-highlight-color:transparent;position:relative}.z-tab-item[data-active=true]{position:relative}.z-tab-item:disabled{pointer-events:none}.z-tabs-panels{border:.0625rem solid var(--border);border-radius:var(--radius-xs);padding:1rem}.z-tabs-panels [role=tabpanel][data-state=active]{animation:z-tabs-fade-in .18s ease-out}.z-tabs-panels [role=tabpanel][data-state=inactive]{content-visibility:hidden}@supports not (content-visibility: hidden){.z-tabs-panels [role=tabpanel][data-state=inactive]{display:none}}.z-tabs-panels-unwrapped{border:0;border-radius:0;padding:0}.z-tabs-wrapper .z-tabs.flex-row+.z-tabs-panels{margin-top:.875rem}.z-tabs-wrapper .z-tabs.flex-col+.z-tabs-panels{margin-top:0;margin-left:0}.z-tabs-container[data-orientation=horizontal]{gap:0}.z-tabs-container[data-orientation=horizontal] .z-tabs-scroll-container{z-index:1}.z-tabs-container[data-orientation=horizontal] .z-tabs-panels{margin-top:0}.z-tabs-container[data-content-fit=screen]{height:var(--z-tabs-screen-height, calc(100dvh - var(--z-tabs-screen-offset, 0rem)));max-height:var(--z-tabs-screen-height, calc(100dvh - var(--z-tabs-screen-offset, 0rem)));min-height:0;overflow:hidden}.z-tabs-container[data-content-fit=screen] .z-tabs-nav{flex:none;min-height:0}.z-tabs-container[data-content-fit=screen] .z-tabs-panels{flex:1 1 auto;min-height:0;overflow:auto}.z-tabs-container[data-content-fit=screen] [role=tabpanel]{min-height:0}.z-tabs-container[data-type=line][data-orientation=horizontal] .z-tabs{isolation:isolate;position:relative}.z-tabs-container[data-type=line][data-orientation=horizontal] .z-tabs .z-tab-item[data-active=true]{z-index:1}.z-tabs-container[data-type=line][data-orientation=horizontal] .z-tabs .z-tab-item[data-active=true]:after{z-index:1}.z-tabs-container[data-type=line][data-orientation=horizontal] .z-tabs:after{content:\"\";position:absolute;right:0;bottom:0;left:0;height:.0625rem;background:color-mix(in oklab,var(--border) 80%,transparent);pointer-events:none;z-index:0}.z-tabs-container:is([data-type=outline],[data-type=soft],[data-type=segment],[data-type=folder],[data-type=folder-soft],[data-type=folder-solid],[data-type=underline],[data-type=underlined],[data-type=badge],[data-type=sharp],[data-type=sharp-line],[data-type=sharp-line-filled],[data-type=square],[data-type=code-line])[data-orientation=horizontal] .z-tabs-scroll-wrapper{padding-inline:0}.z-tabs-container:is([data-type=outline],[data-type=soft],[data-type=segment],[data-type=folder],[data-type=folder-soft],[data-type=folder-solid],[data-type=underline],[data-type=underlined],[data-type=badge],[data-type=sharp],[data-type=sharp-line],[data-type=sharp-line-filled],[data-type=square],[data-type=code-line])[data-orientation=horizontal] .z-tabs-panels{border-radius:0 0 var(--radius-xs) var(--radius-xs)}.z-tabs-container:is([data-type=outline],[data-type=soft],[data-type=segment],[data-type=folder],[data-type=folder-soft],[data-type=folder-solid],[data-type=underline],[data-type=underlined],[data-type=badge],[data-type=sharp],[data-type=sharp-line],[data-type=sharp-line-filled],[data-type=square],[data-type=code-line])[data-orientation=horizontal] .z-tabs-panels-unwrapped{border:0;border-radius:0}.z-tabs-container:is([data-type=folder],[data-type=folder-soft],[data-type=folder-solid])[data-orientation=horizontal] .z-tabs-nav{position:relative}.z-tabs-container:is([data-type=folder],[data-type=folder-soft],[data-type=folder-solid])[data-orientation=horizontal] .z-tabs-nav:after{content:\"\";position:absolute;right:0;bottom:0;left:0;height:.0625rem;background:var(--border);pointer-events:none;z-index:0}.z-tabs-container:is([data-type=folder],[data-type=folder-soft],[data-type=folder-solid])[data-orientation=horizontal] .z-tabs-panels{border-top:0}.z-tabs-container[data-type=folder-solid][data-orientation=horizontal] .z-tab-item[data-active=true][data-last=true]{box-shadow:inset .0625rem 0 0 var(--primary),inset -.0625rem 0 0 var(--border),inset 0 .0625rem 0 var(--primary)}.z-tabs-container:is([data-type=segment],[data-type=segment-solid],[data-type=pill-solid],[data-type=pill-blur]) .z-tabs{align-items:center}.z-tabs-glide-indicator{transition:none;transform-origin:0 0;opacity:0;will-change:transform}.z-tabs-glide-indicator[data-type=segment],.z-tabs-glide-indicator[data-type=segment-solid]{border-radius:.3125rem;overflow:hidden;background:var(--background);box-shadow:0 .0625rem .1875rem #00000014,0 .0625rem .125rem #0000000f}.z-tabs-glide-indicator[data-type=pill-solid],.z-tabs-glide-indicator[data-type=pill-blur]{border-radius:9999px;overflow:hidden}.z-tabs-glide-indicator[data-type=pill-solid]{background:var(--background);box-shadow:0 .0625rem .1875rem #00000014,0 .0625rem .125rem #0000000f}.z-tabs-glide-indicator[data-type=segment-solid]{background:var(--primary)}.z-tabs-glide-indicator[data-type=pill-blur]{background:linear-gradient(to bottom,color-mix(in oklab,white 22%,transparent) 0%,color-mix(in oklab,white 6%,transparent) 45%,transparent 100%),color-mix(in oklab,var(--background) 55%,transparent);box-shadow:inset 0 0 0 1px color-mix(in oklab,white 25%,transparent),inset 0 .0625rem color-mix(in oklab,white 45%,transparent),0 .125rem .5rem #0000001a,0 .0625rem .125rem #0000000f;backdrop-filter:blur(.75rem) saturate(180%);-webkit-backdrop-filter:blur(.75rem) saturate(180%)}.dark .z-tabs-glide-indicator[data-type=pill-blur]{background:linear-gradient(to bottom,color-mix(in oklab,white 12%,transparent) 0%,color-mix(in oklab,white 3%,transparent) 45%,transparent 100%),color-mix(in oklab,var(--background) 45%,transparent);box-shadow:inset 0 0 0 1px color-mix(in oklab,white 10%,transparent),inset 0 .0625rem color-mix(in oklab,white 16%,transparent),0 .125rem .5rem #00000059,0 .0625rem .125rem #0003}@keyframes z-tab-icon-bounce{0%{transform:scale(1)}35%{transform:scale(.97)}to{transform:scale(1)}}.z-tab-icon-bounce{animation:z-tab-icon-bounce .32s cubic-bezier(.34,1.56,.64,1)}.z-tabs-container[data-orientation=vertical] .z-tabs-nav{align-items:stretch}.z-tabs-container[data-orientation=vertical] .z-tabs-scroll-container{width:min(12rem,40vw);flex:none}.z-tabs-container[data-orientation=vertical] .z-tabs-panels,.z-tabs-container[data-orientation=vertical] .z-tab-item{min-width:0}@media(prefers-reduced-motion:reduce){.z-tab-item,.z-tabs-nav-control{transition:none!important}.z-tabs-scroll-wrapper{scroll-behavior:auto}.z-tabs-panels [role=tabpanel][data-state=active],.z-tab-icon-bounce{animation:none!important}}@keyframes z-tabs-fade-in{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zAnimatedTypeIcon", "zAnimateIcon", "zAnimationTriggerIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTooltipPosition", "zTrigger", "zTooltipTrigger", "zTooltipType", "zTooltipSize", "zClass", "zTooltipClass", "zShowDelay", "zTooltipShowDelay", "zHideDelay", "zTooltipHideDelay", "zArrow", "zTooltipArrow", "zDisabled", "zTooltipDisabled", "zOffset", "zTooltipOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ZPopoverDirective, selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zPopoverTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zTriggerRef", "zManualClose", "zOutsideClickClose", "zScrollClose", "zSticky", "zShowArrow", "zKeyboardSafe"], outputs: ["zShow", "zHide", "zHideStart", "zControl", "zPositionChange", "zOutsideClick"], exportAs: ["zPopover"] }, { kind: "component", type: NgScrollbar, selector: "ng-scrollbar:not([externalViewport]), [ngScrollbar]", exportAs: ["ngScrollbar"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: ZTabsComponent, isStandalone: true, selector: "z-tabs", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zTabs: { classPropertyName: "zTabs", publicName: "zTabs", isSignal: true, isRequired: true, transformFunction: null }, zType: { classPropertyName: "zType", publicName: "zType", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zOrientation: { classPropertyName: "zOrientation", publicName: "zOrientation", isSignal: true, isRequired: false, transformFunction: null }, zContentFit: { classPropertyName: "zContentFit", publicName: "zContentFit", isSignal: true, isRequired: false, transformFunction: null }, zLazy: { classPropertyName: "zLazy", publicName: "zLazy", isSignal: true, isRequired: false, transformFunction: null }, zTabsOnly: { classPropertyName: "zTabsOnly", publicName: "zTabsOnly", isSignal: true, isRequired: false, transformFunction: null }, zShowNavWrapper: { classPropertyName: "zShowNavWrapper", publicName: "zShowNavWrapper", isSignal: true, isRequired: false, transformFunction: null }, zNavFullWidth: { classPropertyName: "zNavFullWidth", publicName: "zNavFullWidth", isSignal: true, isRequired: false, transformFunction: null }, zClassContent: { classPropertyName: "zClassContent", publicName: "zClassContent", isSignal: true, isRequired: false, transformFunction: null }, zShowContentWrapper: { classPropertyName: "zShowContentWrapper", publicName: "zShowContentWrapper", isSignal: true, isRequired: false, transformFunction: null }, zReloadable: { classPropertyName: "zReloadable", publicName: "zReloadable", isSignal: true, isRequired: false, transformFunction: null }, zEmitOnActiveClick: { classPropertyName: "zEmitOnActiveClick", publicName: "zEmitOnActiveClick", isSignal: true, isRequired: false, transformFunction: null }, zCache: { classPropertyName: "zCache", publicName: "zCache", isSignal: true, isRequired: false, transformFunction: null }, zCacheKey: { classPropertyName: "zCacheKey", publicName: "zCacheKey", isSignal: true, isRequired: false, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTab: "activeTabChange", zTabChange: "zTabChange" }, host: { classAttribute: "z-tabs-wrapper block" }, queries: [{ propertyName: "tabPanels", predicate: ZTabPanelDirective, isSignal: true }], viewQueries: [{ propertyName: "tabsListContainer", first: true, predicate: ["tabsListContainer"], descendants: true, isSignal: true }, { propertyName: "tabButtons", predicate: ["tabButton"], descendants: true, isSignal: true }, { propertyName: "glideIndicator", first: true, predicate: ["glideIndicator"], descendants: true, isSignal: true }, { propertyName: "panelHost", first: true, predicate: ["panelHost"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<div\n  class=\"z-tabs-container flex gap-1\"\n  [attr.data-type]=\"zType()\"\n  [attr.data-orientation]=\"zOrientation()\"\n  [attr.data-content-fit]=\"zContentFit()\"\n  [class.flex-col]=\"!zTabsOnly()\"\n  [class.flex-row]=\"zOrientation() === 'vertical'\"\n  [class.gap-4]=\"zOrientation() === 'vertical'\">\n  <!-- Tabs Navigation (Left/Scroll/Tabs/Right/Dropdown) -->\n  <div\n    [class]=\"navClasses()\"\n    [class.z-tabs-nav-surface]=\"zShowNavWrapper() && isGlideType()\"\n    [class.w-full]=\"zOrientation() === 'horizontal' && (!zShowNavWrapper() || zNavFullWidth())\"\n    [class.w-fit]=\"zOrientation() === 'horizontal' && zShowNavWrapper() && !zNavFullWidth()\"\n    [class.max-w-full]=\"zOrientation() === 'horizontal' && zShowNavWrapper() && !zNavFullWidth()\"\n    [class.w-auto]=\"zOrientation() === 'vertical'\"\n    [class.shrink-0]=\"zOrientation() === 'vertical'\">\n    <!-- Scroll Left Button -->\n    @if (canScrollLeft() && zOrientation() === 'horizontal') {\n      <z-button\n        zType=\"ghost\"\n        zSize=\"sm\"\n        zIconOnly=\"true\"\n        [zWave]=\"false\"\n        class=\"z-tabs-nav-control shrink-0\"\n        (click)=\"scrollLeft()\"\n        aria-label=\"Scroll left\">\n        <z-icon zType=\"lucideChevronLeft\" zSize=\"16\" />\n      </z-button>\n    }\n\n    <!-- Tabs List Container with Scroll + Fade -->\n    <div\n      class=\"z-tabs-scroll-container relative min-w-0 flex-1\"\n      [class.z-tabs-scroll-container-surface]=\"canScrollLeft() || canScrollRight()\"\n      [attr.data-type]=\"zType()\">\n      @if (zOrientation() === 'vertical') {\n        <ng-scrollbar\n          class=\"z-tabs-scroll-wrapper z-tabs-scrollbar vertical\"\n          [class.z-tabs-scroll-wrapper-limited]=\"verticalTabsScrollable()\"\n          track=\"vertical\"\n          orientation=\"vertical\"\n          appearance=\"compact\"\n          visibility=\"hover\">\n          <ng-container *ngTemplateOutlet=\"tabsListTpl\" />\n        </ng-scrollbar>\n      } @else {\n        <div\n          #tabsListContainer\n          class=\"z-tabs-scroll-wrapper\"\n          [class.z-tabs-scroll-wrapper-scrollable]=\"canScrollLeft() || canScrollRight()\"\n          [class.z-tabs-scroll-wrapper-fade-left]=\"canScrollLeft()\"\n          [class.z-tabs-scroll-wrapper-fade-right]=\"canScrollRight()\"\n          (scroll)=\"onTabsScroll()\">\n          <ng-container *ngTemplateOutlet=\"tabsListTpl\" />\n        </div>\n      }\n    </div>\n\n    <!-- Scroll Right Button -->\n    @if (canScrollRight() && zOrientation() === 'horizontal') {\n      <z-button\n        zType=\"ghost\"\n        zSize=\"sm\"\n        zIconOnly=\"true\"\n        class=\"z-tabs-nav-control shrink-0\"\n        (click)=\"scrollRight()\"\n        [zWave]=\"false\"\n        aria-label=\"Scroll right\">\n        <z-icon zType=\"lucideChevronRight\" zSize=\"16\" />\n      </z-button>\n    }\n\n    <!-- Dropdown Button (Mobile or Overflow) -->\n    @if (zOrientation() === 'horizontal' && (canScrollLeft() || canScrollRight())) {\n      <z-button\n        zType=\"ghost\"\n        zSize=\"sm\"\n        zIconOnly=\"true\"\n        class=\"z-tabs-nav-control shrink-0\"\n        z-popover\n        [zPopoverContent]=\"dropdownTpl\"\n        zPosition=\"bottom-right\"\n        [zWave]=\"false\"\n        zClass=\"min-w-[6.25rem] max-w-[12.5rem]\"\n        (zShow)=\"scrollToActiveDropdownItem()\"\n        aria-label=\"Select tab\">\n        <z-icon zType=\"lucideChevronDown\" zSize=\"16\" />\n      </z-button>\n    }\n  </div>\n\n  <ng-template #tabsListTpl>\n    <!-- Tab List -->\n    <div\n      [class]=\"tabsClasses()\"\n      [class.pb-0.5]=\"tabsListHasBottomPadding()\"\n      role=\"tablist\"\n      [attr.aria-orientation]=\"zOrientation()\"\n      [attr.data-type]=\"zType()\">\n      @if (isGlideType()) {\n        <div\n          #glideIndicator\n          class=\"z-tabs-glide-indicator pointer-events-none absolute top-0 left-0 z-[6]\"\n          [attr.data-type]=\"zType()\"\n          aria-hidden=\"true\"></div>\n      }\n      @for (item of tabItems(); track item.tab.value; let idx = $index; let last = $last) {\n        <button\n          #tabButton\n          type=\"button\"\n          role=\"tab\"\n          [class]=\"item.classes\"\n          [attr.data-active]=\"item.isActive\"\n          [attr.data-state]=\"item.isActive ? 'active' : 'inactive'\"\n          [attr.data-type]=\"zType()\"\n          [attr.data-orientation]=\"zOrientation()\"\n          [attr.data-last]=\"last\"\n          [attr.aria-selected]=\"item.isActive\"\n          [attr.aria-controls]=\"'panel-' + item.tab.value\"\n          [disabled]=\"item.tab.disabled\"\n          [tabindex]=\"item.isActive ? 0 : -1\"\n          z-tooltip\n          [zContent]=\"zOrientation() === 'vertical' ? (item.tab.label | translate) : ''\"\n          zPosition=\"top\"\n          [zHideDelay]=\"0\"\n          [zOffset]=\"5\"\n          [zArrow]=\"false\"\n          (click)=\"selectTab(item.tab)\"\n          (keydown)=\"onTabKeydown($event, idx)\">\n          @if (item.tab.icon) {\n            <z-icon\n              [zType]=\"item.tab.icon\"\n              zSize=\"16\"\n              class=\"shrink-0\"\n              [class.z-tab-icon-bounce]=\"isGlideType() && bouncingTab() === item.tab.value\" />\n          }\n          <span\n            class=\"z-tab-item-label min-w-0 flex-1 truncate text-left\"\n            [class.z-tab-icon-bounce]=\"isGlideType() && bouncingTab() === item.tab.value\">\n            {{ item.tab.label | translate }}\n          </span>\n          @if (item.tab.badge) {\n            <span\n              class=\"ring-background ml-1.5 inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs font-semibold ring-2\"\n              [class.bg-primary]=\"zType() !== 'badge'\"\n              [class.text-primary-foreground]=\"zType() !== 'badge'\"\n              [class.bg-primary!]=\"zType() === 'badge'\"\n              [class.text-primary-foreground!]=\"zType() === 'badge'\">\n              {{ item.tab.badge }}\n            </span>\n          }\n        </button>\n      }\n    </div>\n  </ng-template>\n\n  <!-- Tab Panels -->\n  @if (!zTabsOnly()) {\n    <div\n      class=\"z-tabs-panels min-h-0\"\n      [class.flex-1]=\"zOrientation() === 'vertical'\"\n      [class.shadow-xs]=\"contentWrapperFramed()\"\n      [class.z-tabs-panels-unwrapped]=\"!contentWrapperFramed()\">\n      @if (!zLazy()) {\n        @for (panel of tabPanels(); track panel.zTabPanel()) {\n          <div\n            role=\"tabpanel\"\n            [id]=\"'panel-' + panel.zTabPanel()\"\n            [attr.aria-labelledby]=\"panel.zTabPanel()\"\n            [attr.data-state]=\"activeTab() === panel.zTabPanel() ? 'active' : 'inactive'\"\n            [attr.inert]=\"activeTab() === panel.zTabPanel() ? null : ''\">\n            <ng-container *ngTemplateOutlet=\"panel.template\" />\n          </div>\n        }\n      } @else if (renderedTab()) {\n        <div role=\"tabpanel\" [id]=\"'panel-' + renderedTab()\" [attr.aria-labelledby]=\"renderedTab()\" data-state=\"active\">\n          <ng-container #panelHost />\n        </div>\n      }\n    </div>\n  }\n</div>\n\n<!-- Dropdown Menu Template -->\n<ng-template #dropdownTpl let-close=\"close\">\n  <div\n    class=\"z-tabs-dropdown-menu flex max-h-[18.75rem] max-w-[12.5rem] min-w-[6.25rem] flex-col gap-0.5 overflow-y-auto p-1\">\n    @for (item of tabItems(); track item.tab.value) {\n      <button\n        #dropdownItem\n        type=\"button\"\n        class=\"flex w-full cursor-pointer items-center justify-start gap-2 rounded-sm px-2 py-1.5 text-left text-sm font-medium transition-colors outline-none disabled:pointer-events-none disabled:opacity-50\"\n        [class.hover:text-foreground]=\"!item.isActive\"\n        [class.focus:bg-primary/10]=\"!item.isActive\"\n        [class.bg-primary/15]=\"item.isActive\"\n        [class.text-primary]=\"item.isActive\"\n        [disabled]=\"item.tab.disabled\"\n        (click)=\"selectTab(item.tab, true); close()\">\n        @if (item.tab.icon) {\n          <z-icon [zType]=\"item.tab.icon\" zSize=\"16\" class=\"text-muted-foreground shrink-0\" />\n        }\n        <span\n          class=\"min-w-0 flex-1 truncate\"\n          z-tooltip\n          [zContent]=\"item.tab.label | translate\"\n          zPosition=\"top\"\n          [zHideDelay]=\"0\"\n          [zOffset]=\"5\"\n          [zArrow]=\"false\"\n          [zTriggerElement]=\"dropdownItem\">\n          {{ item.tab.label | translate }}\n        </span>\n        @if (item.tab.badge) {\n          <span\n            class=\"bg-primary text-primary-foreground inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs font-semibold\">\n            {{ item.tab.badge }}\n          </span>\n        }\n        @if (item.isActive) {\n          <z-icon zType=\"lucideCheck\" zSize=\"16\" class=\"text-primary shink-0\" />\n        }\n      </button>\n    }\n  </div>\n</ng-template>\n", styles: [".z-tabs-scroll-wrapper{overflow-x:clip;overflow-y:visible;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}.z-tabs-scroll-wrapper::-webkit-scrollbar{display:none}.z-tabs-scroll-wrapper.vertical{max-height:var(--z-tabs-vertical-max-height, min(22rem, 60vh));overflow:hidden auto}.z-tabs-scroll-wrapper.vertical.z-tabs-scroll-wrapper-limited{height:var(--z-tabs-vertical-max-height, min(22rem, 60vh));overflow:hidden auto}.z-tabs-scroll-wrapper.z-tabs-scroll-wrapper-scrollable{overflow-x:auto}.z-tabs-scroll-wrapper.z-tabs-scroll-wrapper-fade-left{mask-image:linear-gradient(to right,transparent 0,black var(--z-tabs-fade-width),black 100%);-webkit-mask-image:linear-gradient(to right,transparent 0,black var(--z-tabs-fade-width),black 100%)}.z-tabs-scroll-wrapper.z-tabs-scroll-wrapper-fade-right{mask-image:linear-gradient(to left,transparent 0,black var(--z-tabs-fade-width),black 100%);-webkit-mask-image:linear-gradient(to left,transparent 0,black var(--z-tabs-fade-width),black 100%)}.z-tabs-scroll-wrapper.z-tabs-scroll-wrapper-fade-left.z-tabs-scroll-wrapper-fade-right{mask-image:linear-gradient(to right,transparent 0,black var(--z-tabs-fade-width),black calc(100% - var(--z-tabs-fade-width)),transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0,black var(--z-tabs-fade-width),black calc(100% - var(--z-tabs-fade-width)),transparent 100%)}.z-tabs-scrollbar{--scrollbar-padding: .125rem;--z-tabs-scrollbar-gutter: .75rem;--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in oklab, var(--muted-foreground) 35%, transparent);--scrollbar-thumb-hover-color: color-mix(in oklab, var(--muted-foreground) 55%, transparent);--scrollbar-size: .375rem;display:block}.z-tabs-scrollbar .ng-scroll-viewport,.z-tabs-scrollbar .ng-scroll-content{max-width:100%}.z-tabs-scrollbar.z-tabs-scroll-wrapper-limited .ng-scroll-viewport{height:100%;max-height:100%}.z-tabs-scrollbar .ng-scroll-content{box-sizing:border-box;padding-right:var(--z-tabs-scrollbar-gutter)}.z-tabs-scroll-container{isolation:isolate;--z-tabs-fade-width: 2rem}.z-tabs-container:is([data-type=segment],[data-type=segment-solid],[data-type=pill-solid],[data-type=pill-blur]) .z-tabs-scroll-container-surface{background:color-mix(in oklab,var(--background) 72%,var(--muted));border:.0625rem solid color-mix(in oklab,var(--background) 88%,var(--border));box-shadow:0 .0625rem .1875rem #0000000f,0 .125rem .5rem #00000014;backdrop-filter:blur(.75rem) saturate(140%);-webkit-backdrop-filter:blur(.75rem) saturate(140%)}.z-tabs-container:is([data-type=segment],[data-type=segment-solid],[data-type=pill-solid],[data-type=pill-blur]) .z-tabs-scroll-container-surface .z-tabs{background:transparent}.z-tabs-container:is([data-type=segment],[data-type=segment-solid]) .z-tabs-scroll-container-surface{border-radius:.5rem;overflow:hidden}.z-tabs-container:is([data-type=pill-solid],[data-type=pill-blur]) .z-tabs-scroll-container-surface{border-radius:9999px;overflow:hidden}.dark .z-tabs-container:is([data-type=segment],[data-type=segment-solid],[data-type=pill-solid],[data-type=pill-blur]) .z-tabs-scroll-container-surface{background:color-mix(in oklab,var(--muted) 35%,transparent);border-color:color-mix(in oklab,var(--border) 65%,transparent);box-shadow:0 .0625rem .1875rem #0000002e,0 .125rem .5rem #0000003d}.z-tabs{align-items:stretch;min-height:2.5rem}.z-tabs.flex-col{width:100%}.z-tabs.flex-col.border-r{border-right:.0625rem solid hsl(var(--border));padding-right:.5rem}.z-tabs-nav-control{transition:color .2s ease,background-color .2s ease,border-color .2s ease}.z-tabs-nav-surface{background:color-mix(in oklab,var(--background) 72%,var(--muted));border:.0625rem solid color-mix(in oklab,oklch(95% 0 0deg) 88%,var(--border));border-radius:.5rem;padding:.125rem;box-shadow:0 .0625rem .1875rem #0000000f,0 .125rem .5rem #00000014;backdrop-filter:blur(.75rem) saturate(140%);-webkit-backdrop-filter:blur(.75rem) saturate(140%)}.z-tabs-nav-surface .z-tabs{background:transparent}.z-tabs-container:is([data-type=pill-solid],[data-type=pill-blur]) .z-tabs-nav-surface{border-radius:9999px}.dark .z-tabs-nav-surface{background:color-mix(in oklab,var(--muted) 35%,transparent);border-color:color-mix(in oklab,var(--border) 65%,transparent);box-shadow:0 .0625rem .1875rem #0000002e,0 .125rem .5rem #0000003d}.z-tab-item{-webkit-tap-highlight-color:transparent;position:relative}.z-tab-item[data-active=true]{position:relative}.z-tab-item:disabled{pointer-events:none}.z-tabs-panels{border:.0625rem solid var(--border);border-radius:var(--radius-xs);padding:1rem}.z-tabs-panels [role=tabpanel][data-state=active]{animation:z-tabs-fade-in .18s ease-out}.z-tabs-panels [role=tabpanel][data-state=inactive]{content-visibility:hidden}@supports not (content-visibility: hidden){.z-tabs-panels [role=tabpanel][data-state=inactive]{display:none}}.z-tabs-panels-unwrapped{border:0;border-radius:0;padding:0}.z-tabs-wrapper .z-tabs.flex-row+.z-tabs-panels{margin-top:.875rem}.z-tabs-wrapper .z-tabs.flex-col+.z-tabs-panels{margin-top:0;margin-left:0}.z-tabs-container[data-orientation=horizontal]{gap:0}.z-tabs-container[data-orientation=horizontal] .z-tabs-scroll-container{z-index:1}.z-tabs-container[data-orientation=horizontal] .z-tabs-panels{margin-top:0}.z-tabs-container[data-content-fit=screen]{height:var(--z-tabs-screen-height, calc(100dvh - var(--z-tabs-screen-offset, 0rem)));max-height:var(--z-tabs-screen-height, calc(100dvh - var(--z-tabs-screen-offset, 0rem)));min-height:0;overflow:hidden}.z-tabs-container[data-content-fit=screen] .z-tabs-nav{flex:none;min-height:0}.z-tabs-container[data-content-fit=screen] .z-tabs-panels{flex:1 1 auto;min-height:0;overflow:auto}.z-tabs-container[data-content-fit=screen] [role=tabpanel]{min-height:0}.z-tabs-container[data-type=line][data-orientation=horizontal] .z-tabs{isolation:isolate;position:relative}.z-tabs-container[data-type=line][data-orientation=horizontal] .z-tabs .z-tab-item[data-active=true]{z-index:1}.z-tabs-container[data-type=line][data-orientation=horizontal] .z-tabs .z-tab-item[data-active=true]:after{z-index:1}.z-tabs-container[data-type=line][data-orientation=horizontal] .z-tabs:after{content:\"\";position:absolute;right:0;bottom:0;left:0;height:.0625rem;background:color-mix(in oklab,var(--border) 80%,transparent);pointer-events:none;z-index:0}.z-tabs-container:is([data-type=outline],[data-type=soft],[data-type=segment],[data-type=folder],[data-type=folder-soft],[data-type=folder-solid],[data-type=underline],[data-type=underlined],[data-type=badge],[data-type=sharp],[data-type=sharp-line],[data-type=sharp-line-filled],[data-type=square],[data-type=code-line])[data-orientation=horizontal] .z-tabs-scroll-wrapper{padding-inline:0}.z-tabs-container:is([data-type=outline],[data-type=soft],[data-type=segment],[data-type=folder],[data-type=folder-soft],[data-type=folder-solid],[data-type=underline],[data-type=underlined],[data-type=badge],[data-type=sharp],[data-type=sharp-line],[data-type=sharp-line-filled],[data-type=square],[data-type=code-line])[data-orientation=horizontal] .z-tabs-panels{border-radius:0 0 var(--radius-xs) var(--radius-xs)}.z-tabs-container:is([data-type=outline],[data-type=soft],[data-type=segment],[data-type=folder],[data-type=folder-soft],[data-type=folder-solid],[data-type=underline],[data-type=underlined],[data-type=badge],[data-type=sharp],[data-type=sharp-line],[data-type=sharp-line-filled],[data-type=square],[data-type=code-line])[data-orientation=horizontal] .z-tabs-panels-unwrapped{border:0;border-radius:0}.z-tabs-container:is([data-type=folder],[data-type=folder-soft],[data-type=folder-solid])[data-orientation=horizontal] .z-tabs-nav{position:relative}.z-tabs-container:is([data-type=folder],[data-type=folder-soft],[data-type=folder-solid])[data-orientation=horizontal] .z-tabs-nav:after{content:\"\";position:absolute;right:0;bottom:0;left:0;height:.0625rem;background:var(--border);pointer-events:none;z-index:0}.z-tabs-container:is([data-type=folder],[data-type=folder-soft],[data-type=folder-solid])[data-orientation=horizontal] .z-tabs-panels{border-top:0}.z-tabs-container[data-type=folder-solid][data-orientation=horizontal] .z-tab-item[data-active=true][data-last=true]{box-shadow:inset .0625rem 0 0 var(--primary),inset -.0625rem 0 0 var(--border),inset 0 .0625rem 0 var(--primary)}.z-tabs-container:is([data-type=segment],[data-type=segment-solid],[data-type=pill-solid],[data-type=pill-blur]) .z-tabs{align-items:center}.z-tabs-glide-indicator{transition:none;transform-origin:0 0;opacity:0;will-change:transform}.z-tabs-glide-indicator[data-type=segment],.z-tabs-glide-indicator[data-type=segment-solid]{border-radius:.3125rem;overflow:hidden;background:var(--background);box-shadow:0 .0625rem .1875rem #00000014,0 .0625rem .125rem #0000000f}.z-tabs-glide-indicator[data-type=pill-solid],.z-tabs-glide-indicator[data-type=pill-blur]{border-radius:9999px;overflow:hidden}.z-tabs-glide-indicator[data-type=pill-solid]{background:var(--background);box-shadow:0 .0625rem .1875rem #00000014,0 .0625rem .125rem #0000000f}.z-tabs-glide-indicator[data-type=segment-solid]{background:var(--primary)}.z-tabs-glide-indicator[data-type=pill-blur]{background:linear-gradient(to bottom,color-mix(in oklab,white 22%,transparent) 0%,color-mix(in oklab,white 6%,transparent) 45%,transparent 100%),color-mix(in oklab,var(--background) 55%,transparent);box-shadow:inset 0 0 0 1px color-mix(in oklab,white 25%,transparent),inset 0 .0625rem color-mix(in oklab,white 45%,transparent),0 .125rem .5rem #0000001a,0 .0625rem .125rem #0000000f;backdrop-filter:blur(.75rem) saturate(180%);-webkit-backdrop-filter:blur(.75rem) saturate(180%)}.dark .z-tabs-glide-indicator[data-type=pill-blur]{background:linear-gradient(to bottom,color-mix(in oklab,white 12%,transparent) 0%,color-mix(in oklab,white 3%,transparent) 45%,transparent 100%),color-mix(in oklab,var(--background) 45%,transparent);box-shadow:inset 0 0 0 1px color-mix(in oklab,white 10%,transparent),inset 0 .0625rem color-mix(in oklab,white 16%,transparent),0 .125rem .5rem #00000059,0 .0625rem .125rem #0003}@keyframes z-tab-icon-bounce{0%{transform:scale(1)}35%{transform:scale(.97)}to{transform:scale(1)}}.z-tab-icon-bounce{animation:z-tab-icon-bounce .32s cubic-bezier(.34,1.56,.64,1)}.z-tabs-container[data-orientation=vertical] .z-tabs-nav{align-items:stretch}.z-tabs-container[data-orientation=vertical] .z-tabs-scroll-container{width:min(12rem,40vw);flex:none}.z-tabs-container[data-orientation=vertical] .z-tabs-panels,.z-tabs-container[data-orientation=vertical] .z-tab-item{min-width:0}@media(prefers-reduced-motion:reduce){.z-tab-item,.z-tabs-nav-control{transition:none!important}.z-tabs-scroll-wrapper{scroll-behavior:auto}.z-tabs-panels [role=tabpanel][data-state=active],.z-tab-icon-bounce{animation:none!important}}@keyframes z-tabs-fade-in{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zAnimatedTypeIcon", "zAnimateIcon", "zAnimationTriggerIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTooltipPosition", "zTrigger", "zTooltipTrigger", "zTooltipType", "zTooltipSize", "zClass", "zTooltipClass", "zShowDelay", "zTooltipShowDelay", "zHideDelay", "zTooltipHideDelay", "zArrow", "zTooltipArrow", "zDisabled", "zTooltipDisabled", "zOffset", "zTooltipOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ZPopoverDirective, selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zPopoverTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zTriggerRef", "zManualClose", "zOutsideClickClose", "zScrollClose", "zSticky", "zShowArrow", "zKeyboardSafe"], outputs: ["zShow", "zHide", "zHideStart", "zControl", "zPositionChange", "zOutsideClick"], exportAs: ["zPopover"] }, { kind: "component", type: NgScrollbar, selector: "ng-scrollbar:not([externalViewport]), [ngScrollbar]", exportAs: ["ngScrollbar"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZTabsComponent, decorators: [{
             type: Component,
@@ -785,7 +791,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                         NgScrollbar,
                     ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'z-tabs-wrapper block',
-                    }, template: "<div\n  class=\"z-tabs-container flex gap-1\"\n  [attr.data-type]=\"zType()\"\n  [attr.data-orientation]=\"zOrientation()\"\n  [attr.data-content-fit]=\"zContentFit()\"\n  [class.flex-col]=\"!zTabsOnly()\"\n  [class.flex-row]=\"zOrientation() === 'vertical'\"\n  [class.gap-4]=\"zOrientation() === 'vertical'\">\n  <!-- Tabs Navigation (Left/Scroll/Tabs/Right/Dropdown) -->\n  <div\n    [class]=\"navClasses()\"\n    [class.z-tabs-nav-surface]=\"zShowNavWrapper() && isGlideType()\"\n    [class.w-full]=\"zOrientation() === 'horizontal' && (!zShowNavWrapper() || zNavFullWidth())\"\n    [class.w-fit]=\"zOrientation() === 'horizontal' && zShowNavWrapper() && !zNavFullWidth()\"\n    [class.max-w-full]=\"zOrientation() === 'horizontal' && zShowNavWrapper() && !zNavFullWidth()\"\n    [class.w-auto]=\"zOrientation() === 'vertical'\"\n    [class.shrink-0]=\"zOrientation() === 'vertical'\">\n    <!-- Scroll Left Button -->\n    @if (canScrollLeft() && zOrientation() === 'horizontal') {\n      <z-button\n        zType=\"ghost\"\n        zSize=\"sm\"\n        zIconOnly=\"true\"\n        [zWave]=\"false\"\n        class=\"z-tabs-nav-control shrink-0\"\n        (click)=\"scrollLeft()\"\n        aria-label=\"Scroll left\">\n        <z-icon zType=\"lucideChevronLeft\" zSize=\"16\" />\n      </z-button>\n    }\n\n    <!-- Tabs List Container with Scroll + Fade -->\n    <div\n      class=\"z-tabs-scroll-container relative min-w-0 flex-1\"\n      [class.z-tabs-scroll-container-surface]=\"canScrollLeft() || canScrollRight()\"\n      [attr.data-type]=\"zType()\">\n      @if (zOrientation() === 'vertical') {\n        <ng-scrollbar\n          class=\"z-tabs-scroll-wrapper z-tabs-scrollbar vertical\"\n          [class.z-tabs-scroll-wrapper-limited]=\"verticalTabsScrollable()\"\n          track=\"vertical\"\n          orientation=\"vertical\"\n          appearance=\"compact\"\n          visibility=\"hover\">\n          <ng-container *ngTemplateOutlet=\"tabsListTpl\" />\n        </ng-scrollbar>\n      } @else {\n        <div\n          #tabsListContainer\n          class=\"z-tabs-scroll-wrapper\"\n          [class.z-tabs-scroll-wrapper-scrollable]=\"canScrollLeft() || canScrollRight()\"\n          [class.z-tabs-scroll-wrapper-fade-left]=\"canScrollLeft()\"\n          [class.z-tabs-scroll-wrapper-fade-right]=\"canScrollRight()\"\n          (scroll)=\"onTabsScroll()\">\n          <ng-container *ngTemplateOutlet=\"tabsListTpl\" />\n        </div>\n      }\n    </div>\n\n    <!-- Scroll Right Button -->\n    @if (canScrollRight() && zOrientation() === 'horizontal') {\n      <z-button\n        zType=\"ghost\"\n        zSize=\"sm\"\n        zIconOnly=\"true\"\n        class=\"z-tabs-nav-control shrink-0\"\n        (click)=\"scrollRight()\"\n        [zWave]=\"false\"\n        aria-label=\"Scroll right\">\n        <z-icon zType=\"lucideChevronRight\" zSize=\"16\" />\n      </z-button>\n    }\n\n    <!-- Dropdown Button (Mobile or Overflow) -->\n    @if (zOrientation() === 'horizontal' && (canScrollLeft() || canScrollRight())) {\n      <z-button\n        zType=\"ghost\"\n        zSize=\"sm\"\n        zIconOnly=\"true\"\n        class=\"z-tabs-nav-control shrink-0\"\n        z-popover\n        [zPopoverContent]=\"dropdownTpl\"\n        zPosition=\"bottom-right\"\n        [zWave]=\"false\"\n        zClass=\"min-w-[6.25rem] max-w-[12.5rem]\"\n        (zShow)=\"scrollToActiveDropdownItem()\"\n        aria-label=\"Select tab\">\n        <z-icon zType=\"lucideChevronDown\" zSize=\"16\" />\n      </z-button>\n    }\n  </div>\n\n  <ng-template #tabsListTpl>\n    <!-- Tab List -->\n    <div\n      [class]=\"tabsClasses()\"\n      [class.pb-0.5]=\"tabsListHasBottomPadding()\"\n      role=\"tablist\"\n      [attr.aria-orientation]=\"zOrientation()\"\n      [attr.data-type]=\"zType()\">\n      @if (isGlideType()) {\n        <div\n          #glideIndicator\n          class=\"z-tabs-glide-indicator pointer-events-none absolute top-0 left-0 z-[6]\"\n          [attr.data-type]=\"zType()\"\n          aria-hidden=\"true\"></div>\n      }\n      @for (tab of zTabs(); track tab.value; let idx = $index; let last = $last) {\n        <button\n          #tabButton\n          type=\"button\"\n          role=\"tab\"\n          [class]=\"getTabItemClasses(tab)\"\n          [attr.data-active]=\"isTabActive(tab)\"\n          [attr.data-state]=\"isTabActive(tab) ? 'active' : 'inactive'\"\n          [attr.data-type]=\"zType()\"\n          [attr.data-orientation]=\"zOrientation()\"\n          [attr.data-last]=\"last\"\n          [attr.aria-selected]=\"isTabActive(tab)\"\n          [attr.aria-controls]=\"'panel-' + tab.value\"\n          [disabled]=\"tab.disabled\"\n          [tabindex]=\"isTabActive(tab) ? 0 : -1\"\n          z-tooltip\n          [zContent]=\"zOrientation() === 'vertical' ? (tab.label | translate) : ''\"\n          zPosition=\"top\"\n          [zHideDelay]=\"0\"\n          [zOffset]=\"5\"\n          [zArrow]=\"false\"\n          (click)=\"selectTab(tab)\"\n          (keydown)=\"onTabKeydown($event, idx)\">\n          @if (tab.icon) {\n            <z-icon\n              [zType]=\"tab.icon\"\n              zSize=\"16\"\n              class=\"shrink-0\"\n              [class.z-tab-icon-bounce]=\"isGlideType() && bouncingTab() === tab.value\" />\n          }\n          <span\n            class=\"z-tab-item-label min-w-0 flex-1 truncate text-left\"\n            [class.z-tab-icon-bounce]=\"isGlideType() && bouncingTab() === tab.value\">\n            {{ tab.label | translate }}\n          </span>\n          @if (tab.badge) {\n            <span\n              class=\"ring-background ml-1.5 inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs font-semibold ring-2\"\n              [class.bg-primary]=\"zType() !== 'badge'\"\n              [class.text-primary-foreground]=\"zType() !== 'badge'\"\n              [class.bg-primary!]=\"zType() === 'badge'\"\n              [class.text-primary-foreground!]=\"zType() === 'badge'\">\n              {{ tab.badge }}\n            </span>\n          }\n        </button>\n      }\n    </div>\n  </ng-template>\n\n  <!-- Tab Panels -->\n  @if (!zTabsOnly()) {\n    <div\n      class=\"z-tabs-panels min-h-0\"\n      [class.flex-1]=\"zOrientation() === 'vertical'\"\n      [class.shadow-xs]=\"contentWrapperFramed()\"\n      [class.z-tabs-panels-unwrapped]=\"!contentWrapperFramed()\">\n      @if (!zLazy()) {\n        @for (panel of tabPanels(); track panel.zTabPanel()) {\n          <div\n            role=\"tabpanel\"\n            [id]=\"'panel-' + panel.zTabPanel()\"\n            [attr.aria-labelledby]=\"panel.zTabPanel()\"\n            [attr.data-state]=\"activeTab() === panel.zTabPanel() ? 'active' : 'inactive'\"\n            [attr.inert]=\"activeTab() === panel.zTabPanel() ? null : ''\">\n            <ng-container *ngTemplateOutlet=\"panel.template\" />\n          </div>\n        }\n      } @else if (renderedTab()) {\n        <div role=\"tabpanel\" [id]=\"'panel-' + renderedTab()\" [attr.aria-labelledby]=\"renderedTab()\" data-state=\"active\">\n          <ng-container #panelHost />\n        </div>\n      }\n    </div>\n  }\n</div>\n\n<!-- Dropdown Menu Template -->\n<ng-template #dropdownTpl let-close=\"close\">\n  <div\n    class=\"z-tabs-dropdown-menu flex max-h-[18.75rem] max-w-[12.5rem] min-w-[6.25rem] flex-col gap-0.5 overflow-y-auto p-1\">\n    @for (tab of zTabs(); track tab.value) {\n      <button\n        #dropdownItem\n        type=\"button\"\n        class=\"flex w-full cursor-pointer items-center justify-start gap-2 rounded-sm px-2 py-1.5 text-left text-sm font-medium transition-colors outline-none disabled:pointer-events-none disabled:opacity-50\"\n        [class.hover:text-foreground]=\"!isTabActive(tab)\"\n        [class.focus:bg-primary/10]=\"!isTabActive(tab)\"\n        [class.bg-primary/15]=\"isTabActive(tab)\"\n        [class.text-primary]=\"isTabActive(tab)\"\n        [disabled]=\"tab.disabled\"\n        (click)=\"selectTab(tab, true); close()\">\n        @if (tab.icon) {\n          <z-icon [zType]=\"tab.icon\" zSize=\"16\" class=\"text-muted-foreground shrink-0\" />\n        }\n        <span\n          class=\"min-w-0 flex-1 truncate\"\n          z-tooltip\n          [zContent]=\"tab.label | translate\"\n          zPosition=\"top\"\n          [zHideDelay]=\"0\"\n          [zOffset]=\"5\"\n          [zArrow]=\"false\"\n          [zTriggerElement]=\"dropdownItem\">\n          {{ tab.label | translate }}\n        </span>\n        @if (tab.badge) {\n          <span\n            class=\"bg-primary text-primary-foreground inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs font-semibold\">\n            {{ tab.badge }}\n          </span>\n        }\n        @if (isTabActive(tab)) {\n          <z-icon zType=\"lucideCheck\" zSize=\"16\" class=\"text-primary shink-0\" />\n        }\n      </button>\n    }\n  </div>\n</ng-template>\n", styles: [".z-tabs-scroll-wrapper{overflow-x:clip;overflow-y:visible;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}.z-tabs-scroll-wrapper::-webkit-scrollbar{display:none}.z-tabs-scroll-wrapper.vertical{max-height:var(--z-tabs-vertical-max-height, min(22rem, 60vh));overflow:hidden auto}.z-tabs-scroll-wrapper.vertical.z-tabs-scroll-wrapper-limited{height:var(--z-tabs-vertical-max-height, min(22rem, 60vh));overflow:hidden auto}.z-tabs-scroll-wrapper.z-tabs-scroll-wrapper-scrollable{overflow-x:auto}.z-tabs-scroll-wrapper.z-tabs-scroll-wrapper-fade-left{mask-image:linear-gradient(to right,transparent 0,black var(--z-tabs-fade-width),black 100%);-webkit-mask-image:linear-gradient(to right,transparent 0,black var(--z-tabs-fade-width),black 100%)}.z-tabs-scroll-wrapper.z-tabs-scroll-wrapper-fade-right{mask-image:linear-gradient(to left,transparent 0,black var(--z-tabs-fade-width),black 100%);-webkit-mask-image:linear-gradient(to left,transparent 0,black var(--z-tabs-fade-width),black 100%)}.z-tabs-scroll-wrapper.z-tabs-scroll-wrapper-fade-left.z-tabs-scroll-wrapper-fade-right{mask-image:linear-gradient(to right,transparent 0,black var(--z-tabs-fade-width),black calc(100% - var(--z-tabs-fade-width)),transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0,black var(--z-tabs-fade-width),black calc(100% - var(--z-tabs-fade-width)),transparent 100%)}.z-tabs-scrollbar{--scrollbar-padding: .125rem;--z-tabs-scrollbar-gutter: .75rem;--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in oklab, var(--muted-foreground) 35%, transparent);--scrollbar-thumb-hover-color: color-mix(in oklab, var(--muted-foreground) 55%, transparent);--scrollbar-size: .375rem;display:block}.z-tabs-scrollbar .ng-scroll-viewport,.z-tabs-scrollbar .ng-scroll-content{max-width:100%}.z-tabs-scrollbar.z-tabs-scroll-wrapper-limited .ng-scroll-viewport{height:100%;max-height:100%}.z-tabs-scrollbar .ng-scroll-content{box-sizing:border-box;padding-right:var(--z-tabs-scrollbar-gutter)}.z-tabs-scroll-container{isolation:isolate;--z-tabs-fade-width: 2rem}.z-tabs-container:is([data-type=segment],[data-type=segment-solid],[data-type=pill-solid],[data-type=pill-blur]) .z-tabs-scroll-container-surface{background:color-mix(in oklab,var(--background) 72%,var(--muted));border:.0625rem solid color-mix(in oklab,var(--background) 88%,var(--border));box-shadow:0 .0625rem .1875rem #0000000f,0 .125rem .5rem #00000014;backdrop-filter:blur(.75rem) saturate(140%);-webkit-backdrop-filter:blur(.75rem) saturate(140%)}.z-tabs-container:is([data-type=segment],[data-type=segment-solid],[data-type=pill-solid],[data-type=pill-blur]) .z-tabs-scroll-container-surface .z-tabs{background:transparent}.z-tabs-container:is([data-type=segment],[data-type=segment-solid]) .z-tabs-scroll-container-surface{border-radius:.5rem;overflow:hidden}.z-tabs-container:is([data-type=pill-solid],[data-type=pill-blur]) .z-tabs-scroll-container-surface{border-radius:9999px;overflow:hidden}.dark .z-tabs-container:is([data-type=segment],[data-type=segment-solid],[data-type=pill-solid],[data-type=pill-blur]) .z-tabs-scroll-container-surface{background:color-mix(in oklab,var(--muted) 35%,transparent);border-color:color-mix(in oklab,var(--border) 65%,transparent);box-shadow:0 .0625rem .1875rem #0000002e,0 .125rem .5rem #0000003d}.z-tabs{align-items:stretch;min-height:2.5rem}.z-tabs.flex-col{width:100%}.z-tabs.flex-col.border-r{border-right:.0625rem solid hsl(var(--border));padding-right:.5rem}.z-tabs-nav-control{transition:color .2s ease,background-color .2s ease,border-color .2s ease}.z-tabs-nav-surface{background:color-mix(in oklab,var(--background) 72%,var(--muted));border:.0625rem solid color-mix(in oklab,oklch(95% 0 0deg) 88%,var(--border));border-radius:.5rem;padding:.125rem;box-shadow:0 .0625rem .1875rem #0000000f,0 .125rem .5rem #00000014;backdrop-filter:blur(.75rem) saturate(140%);-webkit-backdrop-filter:blur(.75rem) saturate(140%)}.z-tabs-nav-surface .z-tabs{background:transparent}.z-tabs-container:is([data-type=pill-solid],[data-type=pill-blur]) .z-tabs-nav-surface{border-radius:9999px}.dark .z-tabs-nav-surface{background:color-mix(in oklab,var(--muted) 35%,transparent);border-color:color-mix(in oklab,var(--border) 65%,transparent);box-shadow:0 .0625rem .1875rem #0000002e,0 .125rem .5rem #0000003d}.z-tab-item{-webkit-tap-highlight-color:transparent;position:relative}.z-tab-item[data-active=true]{position:relative}.z-tab-item:disabled{pointer-events:none}.z-tabs-panels{border:.0625rem solid var(--border);border-radius:var(--radius-xs);padding:1rem}.z-tabs-panels [role=tabpanel][data-state=active]{animation:z-tabs-fade-in .18s ease-out}.z-tabs-panels [role=tabpanel][data-state=inactive]{content-visibility:hidden}@supports not (content-visibility: hidden){.z-tabs-panels [role=tabpanel][data-state=inactive]{display:none}}.z-tabs-panels-unwrapped{border:0;border-radius:0;padding:0}.z-tabs-wrapper .z-tabs.flex-row+.z-tabs-panels{margin-top:.875rem}.z-tabs-wrapper .z-tabs.flex-col+.z-tabs-panels{margin-top:0;margin-left:0}.z-tabs-container[data-orientation=horizontal]{gap:0}.z-tabs-container[data-orientation=horizontal] .z-tabs-scroll-container{z-index:1}.z-tabs-container[data-orientation=horizontal] .z-tabs-panels{margin-top:0}.z-tabs-container[data-content-fit=screen]{height:var(--z-tabs-screen-height, calc(100dvh - var(--z-tabs-screen-offset, 0rem)));max-height:var(--z-tabs-screen-height, calc(100dvh - var(--z-tabs-screen-offset, 0rem)));min-height:0;overflow:hidden}.z-tabs-container[data-content-fit=screen] .z-tabs-nav{flex:none;min-height:0}.z-tabs-container[data-content-fit=screen] .z-tabs-panels{flex:1 1 auto;min-height:0;overflow:auto}.z-tabs-container[data-content-fit=screen] [role=tabpanel]{min-height:0}.z-tabs-container[data-type=line][data-orientation=horizontal] .z-tabs{isolation:isolate;position:relative}.z-tabs-container[data-type=line][data-orientation=horizontal] .z-tabs .z-tab-item[data-active=true]{z-index:1}.z-tabs-container[data-type=line][data-orientation=horizontal] .z-tabs .z-tab-item[data-active=true]:after{z-index:1}.z-tabs-container[data-type=line][data-orientation=horizontal] .z-tabs:after{content:\"\";position:absolute;right:0;bottom:0;left:0;height:.0625rem;background:color-mix(in oklab,var(--border) 80%,transparent);pointer-events:none;z-index:0}.z-tabs-container:is([data-type=outline],[data-type=soft],[data-type=segment],[data-type=folder],[data-type=folder-soft],[data-type=folder-solid],[data-type=underline],[data-type=underlined],[data-type=badge],[data-type=sharp],[data-type=sharp-line],[data-type=sharp-line-filled],[data-type=square],[data-type=code-line])[data-orientation=horizontal] .z-tabs-scroll-wrapper{padding-inline:0}.z-tabs-container:is([data-type=outline],[data-type=soft],[data-type=segment],[data-type=folder],[data-type=folder-soft],[data-type=folder-solid],[data-type=underline],[data-type=underlined],[data-type=badge],[data-type=sharp],[data-type=sharp-line],[data-type=sharp-line-filled],[data-type=square],[data-type=code-line])[data-orientation=horizontal] .z-tabs-panels{border-radius:0 0 var(--radius-xs) var(--radius-xs)}.z-tabs-container:is([data-type=outline],[data-type=soft],[data-type=segment],[data-type=folder],[data-type=folder-soft],[data-type=folder-solid],[data-type=underline],[data-type=underlined],[data-type=badge],[data-type=sharp],[data-type=sharp-line],[data-type=sharp-line-filled],[data-type=square],[data-type=code-line])[data-orientation=horizontal] .z-tabs-panels-unwrapped{border:0;border-radius:0}.z-tabs-container:is([data-type=folder],[data-type=folder-soft],[data-type=folder-solid])[data-orientation=horizontal] .z-tabs-nav{position:relative}.z-tabs-container:is([data-type=folder],[data-type=folder-soft],[data-type=folder-solid])[data-orientation=horizontal] .z-tabs-nav:after{content:\"\";position:absolute;right:0;bottom:0;left:0;height:.0625rem;background:var(--border);pointer-events:none;z-index:0}.z-tabs-container:is([data-type=folder],[data-type=folder-soft],[data-type=folder-solid])[data-orientation=horizontal] .z-tabs-panels{border-top:0}.z-tabs-container[data-type=folder-solid][data-orientation=horizontal] .z-tab-item[data-active=true][data-last=true]{box-shadow:inset .0625rem 0 0 var(--primary),inset -.0625rem 0 0 var(--border),inset 0 .0625rem 0 var(--primary)}.z-tabs-container:is([data-type=segment],[data-type=segment-solid],[data-type=pill-solid],[data-type=pill-blur]) .z-tabs{align-items:center}.z-tabs-glide-indicator{transition:none;transform-origin:0 0;opacity:0;will-change:transform}.z-tabs-glide-indicator[data-type=segment],.z-tabs-glide-indicator[data-type=segment-solid]{border-radius:.3125rem;overflow:hidden;background:var(--background);box-shadow:0 .0625rem .1875rem #00000014,0 .0625rem .125rem #0000000f}.z-tabs-glide-indicator[data-type=pill-solid],.z-tabs-glide-indicator[data-type=pill-blur]{border-radius:9999px;overflow:hidden}.z-tabs-glide-indicator[data-type=pill-solid]{background:var(--background);box-shadow:0 .0625rem .1875rem #00000014,0 .0625rem .125rem #0000000f}.z-tabs-glide-indicator[data-type=segment-solid]{background:var(--primary)}.z-tabs-glide-indicator[data-type=pill-blur]{background:linear-gradient(to bottom,color-mix(in oklab,white 22%,transparent) 0%,color-mix(in oklab,white 6%,transparent) 45%,transparent 100%),color-mix(in oklab,var(--background) 55%,transparent);box-shadow:inset 0 0 0 1px color-mix(in oklab,white 25%,transparent),inset 0 .0625rem color-mix(in oklab,white 45%,transparent),0 .125rem .5rem #0000001a,0 .0625rem .125rem #0000000f;backdrop-filter:blur(.75rem) saturate(180%);-webkit-backdrop-filter:blur(.75rem) saturate(180%)}.dark .z-tabs-glide-indicator[data-type=pill-blur]{background:linear-gradient(to bottom,color-mix(in oklab,white 12%,transparent) 0%,color-mix(in oklab,white 3%,transparent) 45%,transparent 100%),color-mix(in oklab,var(--background) 45%,transparent);box-shadow:inset 0 0 0 1px color-mix(in oklab,white 10%,transparent),inset 0 .0625rem color-mix(in oklab,white 16%,transparent),0 .125rem .5rem #00000059,0 .0625rem .125rem #0003}@keyframes z-tab-icon-bounce{0%{transform:scale(1)}35%{transform:scale(.97)}to{transform:scale(1)}}.z-tab-icon-bounce{animation:z-tab-icon-bounce .32s cubic-bezier(.34,1.56,.64,1)}.z-tabs-container[data-orientation=vertical] .z-tabs-nav{align-items:stretch}.z-tabs-container[data-orientation=vertical] .z-tabs-scroll-container{width:min(12rem,40vw);flex:none}.z-tabs-container[data-orientation=vertical] .z-tabs-panels,.z-tabs-container[data-orientation=vertical] .z-tab-item{min-width:0}@media(prefers-reduced-motion:reduce){.z-tab-item,.z-tabs-nav-control{transition:none!important}.z-tabs-scroll-wrapper{scroll-behavior:auto}.z-tabs-panels [role=tabpanel][data-state=active],.z-tab-icon-bounce{animation:none!important}}@keyframes z-tabs-fade-in{0%{opacity:0}to{opacity:1}}\n"] }]
+                    }, template: "<div\n  class=\"z-tabs-container flex gap-1\"\n  [attr.data-type]=\"zType()\"\n  [attr.data-orientation]=\"zOrientation()\"\n  [attr.data-content-fit]=\"zContentFit()\"\n  [class.flex-col]=\"!zTabsOnly()\"\n  [class.flex-row]=\"zOrientation() === 'vertical'\"\n  [class.gap-4]=\"zOrientation() === 'vertical'\">\n  <!-- Tabs Navigation (Left/Scroll/Tabs/Right/Dropdown) -->\n  <div\n    [class]=\"navClasses()\"\n    [class.z-tabs-nav-surface]=\"zShowNavWrapper() && isGlideType()\"\n    [class.w-full]=\"zOrientation() === 'horizontal' && (!zShowNavWrapper() || zNavFullWidth())\"\n    [class.w-fit]=\"zOrientation() === 'horizontal' && zShowNavWrapper() && !zNavFullWidth()\"\n    [class.max-w-full]=\"zOrientation() === 'horizontal' && zShowNavWrapper() && !zNavFullWidth()\"\n    [class.w-auto]=\"zOrientation() === 'vertical'\"\n    [class.shrink-0]=\"zOrientation() === 'vertical'\">\n    <!-- Scroll Left Button -->\n    @if (canScrollLeft() && zOrientation() === 'horizontal') {\n      <z-button\n        zType=\"ghost\"\n        zSize=\"sm\"\n        zIconOnly=\"true\"\n        [zWave]=\"false\"\n        class=\"z-tabs-nav-control shrink-0\"\n        (click)=\"scrollLeft()\"\n        aria-label=\"Scroll left\">\n        <z-icon zType=\"lucideChevronLeft\" zSize=\"16\" />\n      </z-button>\n    }\n\n    <!-- Tabs List Container with Scroll + Fade -->\n    <div\n      class=\"z-tabs-scroll-container relative min-w-0 flex-1\"\n      [class.z-tabs-scroll-container-surface]=\"canScrollLeft() || canScrollRight()\"\n      [attr.data-type]=\"zType()\">\n      @if (zOrientation() === 'vertical') {\n        <ng-scrollbar\n          class=\"z-tabs-scroll-wrapper z-tabs-scrollbar vertical\"\n          [class.z-tabs-scroll-wrapper-limited]=\"verticalTabsScrollable()\"\n          track=\"vertical\"\n          orientation=\"vertical\"\n          appearance=\"compact\"\n          visibility=\"hover\">\n          <ng-container *ngTemplateOutlet=\"tabsListTpl\" />\n        </ng-scrollbar>\n      } @else {\n        <div\n          #tabsListContainer\n          class=\"z-tabs-scroll-wrapper\"\n          [class.z-tabs-scroll-wrapper-scrollable]=\"canScrollLeft() || canScrollRight()\"\n          [class.z-tabs-scroll-wrapper-fade-left]=\"canScrollLeft()\"\n          [class.z-tabs-scroll-wrapper-fade-right]=\"canScrollRight()\"\n          (scroll)=\"onTabsScroll()\">\n          <ng-container *ngTemplateOutlet=\"tabsListTpl\" />\n        </div>\n      }\n    </div>\n\n    <!-- Scroll Right Button -->\n    @if (canScrollRight() && zOrientation() === 'horizontal') {\n      <z-button\n        zType=\"ghost\"\n        zSize=\"sm\"\n        zIconOnly=\"true\"\n        class=\"z-tabs-nav-control shrink-0\"\n        (click)=\"scrollRight()\"\n        [zWave]=\"false\"\n        aria-label=\"Scroll right\">\n        <z-icon zType=\"lucideChevronRight\" zSize=\"16\" />\n      </z-button>\n    }\n\n    <!-- Dropdown Button (Mobile or Overflow) -->\n    @if (zOrientation() === 'horizontal' && (canScrollLeft() || canScrollRight())) {\n      <z-button\n        zType=\"ghost\"\n        zSize=\"sm\"\n        zIconOnly=\"true\"\n        class=\"z-tabs-nav-control shrink-0\"\n        z-popover\n        [zPopoverContent]=\"dropdownTpl\"\n        zPosition=\"bottom-right\"\n        [zWave]=\"false\"\n        zClass=\"min-w-[6.25rem] max-w-[12.5rem]\"\n        (zShow)=\"scrollToActiveDropdownItem()\"\n        aria-label=\"Select tab\">\n        <z-icon zType=\"lucideChevronDown\" zSize=\"16\" />\n      </z-button>\n    }\n  </div>\n\n  <ng-template #tabsListTpl>\n    <!-- Tab List -->\n    <div\n      [class]=\"tabsClasses()\"\n      [class.pb-0.5]=\"tabsListHasBottomPadding()\"\n      role=\"tablist\"\n      [attr.aria-orientation]=\"zOrientation()\"\n      [attr.data-type]=\"zType()\">\n      @if (isGlideType()) {\n        <div\n          #glideIndicator\n          class=\"z-tabs-glide-indicator pointer-events-none absolute top-0 left-0 z-[6]\"\n          [attr.data-type]=\"zType()\"\n          aria-hidden=\"true\"></div>\n      }\n      @for (item of tabItems(); track item.tab.value; let idx = $index; let last = $last) {\n        <button\n          #tabButton\n          type=\"button\"\n          role=\"tab\"\n          [class]=\"item.classes\"\n          [attr.data-active]=\"item.isActive\"\n          [attr.data-state]=\"item.isActive ? 'active' : 'inactive'\"\n          [attr.data-type]=\"zType()\"\n          [attr.data-orientation]=\"zOrientation()\"\n          [attr.data-last]=\"last\"\n          [attr.aria-selected]=\"item.isActive\"\n          [attr.aria-controls]=\"'panel-' + item.tab.value\"\n          [disabled]=\"item.tab.disabled\"\n          [tabindex]=\"item.isActive ? 0 : -1\"\n          z-tooltip\n          [zContent]=\"zOrientation() === 'vertical' ? (item.tab.label | translate) : ''\"\n          zPosition=\"top\"\n          [zHideDelay]=\"0\"\n          [zOffset]=\"5\"\n          [zArrow]=\"false\"\n          (click)=\"selectTab(item.tab)\"\n          (keydown)=\"onTabKeydown($event, idx)\">\n          @if (item.tab.icon) {\n            <z-icon\n              [zType]=\"item.tab.icon\"\n              zSize=\"16\"\n              class=\"shrink-0\"\n              [class.z-tab-icon-bounce]=\"isGlideType() && bouncingTab() === item.tab.value\" />\n          }\n          <span\n            class=\"z-tab-item-label min-w-0 flex-1 truncate text-left\"\n            [class.z-tab-icon-bounce]=\"isGlideType() && bouncingTab() === item.tab.value\">\n            {{ item.tab.label | translate }}\n          </span>\n          @if (item.tab.badge) {\n            <span\n              class=\"ring-background ml-1.5 inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs font-semibold ring-2\"\n              [class.bg-primary]=\"zType() !== 'badge'\"\n              [class.text-primary-foreground]=\"zType() !== 'badge'\"\n              [class.bg-primary!]=\"zType() === 'badge'\"\n              [class.text-primary-foreground!]=\"zType() === 'badge'\">\n              {{ item.tab.badge }}\n            </span>\n          }\n        </button>\n      }\n    </div>\n  </ng-template>\n\n  <!-- Tab Panels -->\n  @if (!zTabsOnly()) {\n    <div\n      class=\"z-tabs-panels min-h-0\"\n      [class.flex-1]=\"zOrientation() === 'vertical'\"\n      [class.shadow-xs]=\"contentWrapperFramed()\"\n      [class.z-tabs-panels-unwrapped]=\"!contentWrapperFramed()\">\n      @if (!zLazy()) {\n        @for (panel of tabPanels(); track panel.zTabPanel()) {\n          <div\n            role=\"tabpanel\"\n            [id]=\"'panel-' + panel.zTabPanel()\"\n            [attr.aria-labelledby]=\"panel.zTabPanel()\"\n            [attr.data-state]=\"activeTab() === panel.zTabPanel() ? 'active' : 'inactive'\"\n            [attr.inert]=\"activeTab() === panel.zTabPanel() ? null : ''\">\n            <ng-container *ngTemplateOutlet=\"panel.template\" />\n          </div>\n        }\n      } @else if (renderedTab()) {\n        <div role=\"tabpanel\" [id]=\"'panel-' + renderedTab()\" [attr.aria-labelledby]=\"renderedTab()\" data-state=\"active\">\n          <ng-container #panelHost />\n        </div>\n      }\n    </div>\n  }\n</div>\n\n<!-- Dropdown Menu Template -->\n<ng-template #dropdownTpl let-close=\"close\">\n  <div\n    class=\"z-tabs-dropdown-menu flex max-h-[18.75rem] max-w-[12.5rem] min-w-[6.25rem] flex-col gap-0.5 overflow-y-auto p-1\">\n    @for (item of tabItems(); track item.tab.value) {\n      <button\n        #dropdownItem\n        type=\"button\"\n        class=\"flex w-full cursor-pointer items-center justify-start gap-2 rounded-sm px-2 py-1.5 text-left text-sm font-medium transition-colors outline-none disabled:pointer-events-none disabled:opacity-50\"\n        [class.hover:text-foreground]=\"!item.isActive\"\n        [class.focus:bg-primary/10]=\"!item.isActive\"\n        [class.bg-primary/15]=\"item.isActive\"\n        [class.text-primary]=\"item.isActive\"\n        [disabled]=\"item.tab.disabled\"\n        (click)=\"selectTab(item.tab, true); close()\">\n        @if (item.tab.icon) {\n          <z-icon [zType]=\"item.tab.icon\" zSize=\"16\" class=\"text-muted-foreground shrink-0\" />\n        }\n        <span\n          class=\"min-w-0 flex-1 truncate\"\n          z-tooltip\n          [zContent]=\"item.tab.label | translate\"\n          zPosition=\"top\"\n          [zHideDelay]=\"0\"\n          [zOffset]=\"5\"\n          [zArrow]=\"false\"\n          [zTriggerElement]=\"dropdownItem\">\n          {{ item.tab.label | translate }}\n        </span>\n        @if (item.tab.badge) {\n          <span\n            class=\"bg-primary text-primary-foreground inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs font-semibold\">\n            {{ item.tab.badge }}\n          </span>\n        }\n        @if (item.isActive) {\n          <z-icon zType=\"lucideCheck\" zSize=\"16\" class=\"text-primary shink-0\" />\n        }\n      </button>\n    }\n  </div>\n</ng-template>\n", styles: [".z-tabs-scroll-wrapper{overflow-x:clip;overflow-y:visible;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}.z-tabs-scroll-wrapper::-webkit-scrollbar{display:none}.z-tabs-scroll-wrapper.vertical{max-height:var(--z-tabs-vertical-max-height, min(22rem, 60vh));overflow:hidden auto}.z-tabs-scroll-wrapper.vertical.z-tabs-scroll-wrapper-limited{height:var(--z-tabs-vertical-max-height, min(22rem, 60vh));overflow:hidden auto}.z-tabs-scroll-wrapper.z-tabs-scroll-wrapper-scrollable{overflow-x:auto}.z-tabs-scroll-wrapper.z-tabs-scroll-wrapper-fade-left{mask-image:linear-gradient(to right,transparent 0,black var(--z-tabs-fade-width),black 100%);-webkit-mask-image:linear-gradient(to right,transparent 0,black var(--z-tabs-fade-width),black 100%)}.z-tabs-scroll-wrapper.z-tabs-scroll-wrapper-fade-right{mask-image:linear-gradient(to left,transparent 0,black var(--z-tabs-fade-width),black 100%);-webkit-mask-image:linear-gradient(to left,transparent 0,black var(--z-tabs-fade-width),black 100%)}.z-tabs-scroll-wrapper.z-tabs-scroll-wrapper-fade-left.z-tabs-scroll-wrapper-fade-right{mask-image:linear-gradient(to right,transparent 0,black var(--z-tabs-fade-width),black calc(100% - var(--z-tabs-fade-width)),transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0,black var(--z-tabs-fade-width),black calc(100% - var(--z-tabs-fade-width)),transparent 100%)}.z-tabs-scrollbar{--scrollbar-padding: .125rem;--z-tabs-scrollbar-gutter: .75rem;--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in oklab, var(--muted-foreground) 35%, transparent);--scrollbar-thumb-hover-color: color-mix(in oklab, var(--muted-foreground) 55%, transparent);--scrollbar-size: .375rem;display:block}.z-tabs-scrollbar .ng-scroll-viewport,.z-tabs-scrollbar .ng-scroll-content{max-width:100%}.z-tabs-scrollbar.z-tabs-scroll-wrapper-limited .ng-scroll-viewport{height:100%;max-height:100%}.z-tabs-scrollbar .ng-scroll-content{box-sizing:border-box;padding-right:var(--z-tabs-scrollbar-gutter)}.z-tabs-scroll-container{isolation:isolate;--z-tabs-fade-width: 2rem}.z-tabs-container:is([data-type=segment],[data-type=segment-solid],[data-type=pill-solid],[data-type=pill-blur]) .z-tabs-scroll-container-surface{background:color-mix(in oklab,var(--background) 72%,var(--muted));border:.0625rem solid color-mix(in oklab,var(--background) 88%,var(--border));box-shadow:0 .0625rem .1875rem #0000000f,0 .125rem .5rem #00000014;backdrop-filter:blur(.75rem) saturate(140%);-webkit-backdrop-filter:blur(.75rem) saturate(140%)}.z-tabs-container:is([data-type=segment],[data-type=segment-solid],[data-type=pill-solid],[data-type=pill-blur]) .z-tabs-scroll-container-surface .z-tabs{background:transparent}.z-tabs-container:is([data-type=segment],[data-type=segment-solid]) .z-tabs-scroll-container-surface{border-radius:.5rem;overflow:hidden}.z-tabs-container:is([data-type=pill-solid],[data-type=pill-blur]) .z-tabs-scroll-container-surface{border-radius:9999px;overflow:hidden}.dark .z-tabs-container:is([data-type=segment],[data-type=segment-solid],[data-type=pill-solid],[data-type=pill-blur]) .z-tabs-scroll-container-surface{background:color-mix(in oklab,var(--muted) 35%,transparent);border-color:color-mix(in oklab,var(--border) 65%,transparent);box-shadow:0 .0625rem .1875rem #0000002e,0 .125rem .5rem #0000003d}.z-tabs{align-items:stretch;min-height:2.5rem}.z-tabs.flex-col{width:100%}.z-tabs.flex-col.border-r{border-right:.0625rem solid hsl(var(--border));padding-right:.5rem}.z-tabs-nav-control{transition:color .2s ease,background-color .2s ease,border-color .2s ease}.z-tabs-nav-surface{background:color-mix(in oklab,var(--background) 72%,var(--muted));border:.0625rem solid color-mix(in oklab,oklch(95% 0 0deg) 88%,var(--border));border-radius:.5rem;padding:.125rem;box-shadow:0 .0625rem .1875rem #0000000f,0 .125rem .5rem #00000014;backdrop-filter:blur(.75rem) saturate(140%);-webkit-backdrop-filter:blur(.75rem) saturate(140%)}.z-tabs-nav-surface .z-tabs{background:transparent}.z-tabs-container:is([data-type=pill-solid],[data-type=pill-blur]) .z-tabs-nav-surface{border-radius:9999px}.dark .z-tabs-nav-surface{background:color-mix(in oklab,var(--muted) 35%,transparent);border-color:color-mix(in oklab,var(--border) 65%,transparent);box-shadow:0 .0625rem .1875rem #0000002e,0 .125rem .5rem #0000003d}.z-tab-item{-webkit-tap-highlight-color:transparent;position:relative}.z-tab-item[data-active=true]{position:relative}.z-tab-item:disabled{pointer-events:none}.z-tabs-panels{border:.0625rem solid var(--border);border-radius:var(--radius-xs);padding:1rem}.z-tabs-panels [role=tabpanel][data-state=active]{animation:z-tabs-fade-in .18s ease-out}.z-tabs-panels [role=tabpanel][data-state=inactive]{content-visibility:hidden}@supports not (content-visibility: hidden){.z-tabs-panels [role=tabpanel][data-state=inactive]{display:none}}.z-tabs-panels-unwrapped{border:0;border-radius:0;padding:0}.z-tabs-wrapper .z-tabs.flex-row+.z-tabs-panels{margin-top:.875rem}.z-tabs-wrapper .z-tabs.flex-col+.z-tabs-panels{margin-top:0;margin-left:0}.z-tabs-container[data-orientation=horizontal]{gap:0}.z-tabs-container[data-orientation=horizontal] .z-tabs-scroll-container{z-index:1}.z-tabs-container[data-orientation=horizontal] .z-tabs-panels{margin-top:0}.z-tabs-container[data-content-fit=screen]{height:var(--z-tabs-screen-height, calc(100dvh - var(--z-tabs-screen-offset, 0rem)));max-height:var(--z-tabs-screen-height, calc(100dvh - var(--z-tabs-screen-offset, 0rem)));min-height:0;overflow:hidden}.z-tabs-container[data-content-fit=screen] .z-tabs-nav{flex:none;min-height:0}.z-tabs-container[data-content-fit=screen] .z-tabs-panels{flex:1 1 auto;min-height:0;overflow:auto}.z-tabs-container[data-content-fit=screen] [role=tabpanel]{min-height:0}.z-tabs-container[data-type=line][data-orientation=horizontal] .z-tabs{isolation:isolate;position:relative}.z-tabs-container[data-type=line][data-orientation=horizontal] .z-tabs .z-tab-item[data-active=true]{z-index:1}.z-tabs-container[data-type=line][data-orientation=horizontal] .z-tabs .z-tab-item[data-active=true]:after{z-index:1}.z-tabs-container[data-type=line][data-orientation=horizontal] .z-tabs:after{content:\"\";position:absolute;right:0;bottom:0;left:0;height:.0625rem;background:color-mix(in oklab,var(--border) 80%,transparent);pointer-events:none;z-index:0}.z-tabs-container:is([data-type=outline],[data-type=soft],[data-type=segment],[data-type=folder],[data-type=folder-soft],[data-type=folder-solid],[data-type=underline],[data-type=underlined],[data-type=badge],[data-type=sharp],[data-type=sharp-line],[data-type=sharp-line-filled],[data-type=square],[data-type=code-line])[data-orientation=horizontal] .z-tabs-scroll-wrapper{padding-inline:0}.z-tabs-container:is([data-type=outline],[data-type=soft],[data-type=segment],[data-type=folder],[data-type=folder-soft],[data-type=folder-solid],[data-type=underline],[data-type=underlined],[data-type=badge],[data-type=sharp],[data-type=sharp-line],[data-type=sharp-line-filled],[data-type=square],[data-type=code-line])[data-orientation=horizontal] .z-tabs-panels{border-radius:0 0 var(--radius-xs) var(--radius-xs)}.z-tabs-container:is([data-type=outline],[data-type=soft],[data-type=segment],[data-type=folder],[data-type=folder-soft],[data-type=folder-solid],[data-type=underline],[data-type=underlined],[data-type=badge],[data-type=sharp],[data-type=sharp-line],[data-type=sharp-line-filled],[data-type=square],[data-type=code-line])[data-orientation=horizontal] .z-tabs-panels-unwrapped{border:0;border-radius:0}.z-tabs-container:is([data-type=folder],[data-type=folder-soft],[data-type=folder-solid])[data-orientation=horizontal] .z-tabs-nav{position:relative}.z-tabs-container:is([data-type=folder],[data-type=folder-soft],[data-type=folder-solid])[data-orientation=horizontal] .z-tabs-nav:after{content:\"\";position:absolute;right:0;bottom:0;left:0;height:.0625rem;background:var(--border);pointer-events:none;z-index:0}.z-tabs-container:is([data-type=folder],[data-type=folder-soft],[data-type=folder-solid])[data-orientation=horizontal] .z-tabs-panels{border-top:0}.z-tabs-container[data-type=folder-solid][data-orientation=horizontal] .z-tab-item[data-active=true][data-last=true]{box-shadow:inset .0625rem 0 0 var(--primary),inset -.0625rem 0 0 var(--border),inset 0 .0625rem 0 var(--primary)}.z-tabs-container:is([data-type=segment],[data-type=segment-solid],[data-type=pill-solid],[data-type=pill-blur]) .z-tabs{align-items:center}.z-tabs-glide-indicator{transition:none;transform-origin:0 0;opacity:0;will-change:transform}.z-tabs-glide-indicator[data-type=segment],.z-tabs-glide-indicator[data-type=segment-solid]{border-radius:.3125rem;overflow:hidden;background:var(--background);box-shadow:0 .0625rem .1875rem #00000014,0 .0625rem .125rem #0000000f}.z-tabs-glide-indicator[data-type=pill-solid],.z-tabs-glide-indicator[data-type=pill-blur]{border-radius:9999px;overflow:hidden}.z-tabs-glide-indicator[data-type=pill-solid]{background:var(--background);box-shadow:0 .0625rem .1875rem #00000014,0 .0625rem .125rem #0000000f}.z-tabs-glide-indicator[data-type=segment-solid]{background:var(--primary)}.z-tabs-glide-indicator[data-type=pill-blur]{background:linear-gradient(to bottom,color-mix(in oklab,white 22%,transparent) 0%,color-mix(in oklab,white 6%,transparent) 45%,transparent 100%),color-mix(in oklab,var(--background) 55%,transparent);box-shadow:inset 0 0 0 1px color-mix(in oklab,white 25%,transparent),inset 0 .0625rem color-mix(in oklab,white 45%,transparent),0 .125rem .5rem #0000001a,0 .0625rem .125rem #0000000f;backdrop-filter:blur(.75rem) saturate(180%);-webkit-backdrop-filter:blur(.75rem) saturate(180%)}.dark .z-tabs-glide-indicator[data-type=pill-blur]{background:linear-gradient(to bottom,color-mix(in oklab,white 12%,transparent) 0%,color-mix(in oklab,white 3%,transparent) 45%,transparent 100%),color-mix(in oklab,var(--background) 45%,transparent);box-shadow:inset 0 0 0 1px color-mix(in oklab,white 10%,transparent),inset 0 .0625rem color-mix(in oklab,white 16%,transparent),0 .125rem .5rem #00000059,0 .0625rem .125rem #0003}@keyframes z-tab-icon-bounce{0%{transform:scale(1)}35%{transform:scale(.97)}to{transform:scale(1)}}.z-tab-icon-bounce{animation:z-tab-icon-bounce .32s cubic-bezier(.34,1.56,.64,1)}.z-tabs-container[data-orientation=vertical] .z-tabs-nav{align-items:stretch}.z-tabs-container[data-orientation=vertical] .z-tabs-scroll-container{width:min(12rem,40vw);flex:none}.z-tabs-container[data-orientation=vertical] .z-tabs-panels,.z-tabs-container[data-orientation=vertical] .z-tab-item{min-width:0}@media(prefers-reduced-motion:reduce){.z-tab-item,.z-tabs-nav-control{transition:none!important}.z-tabs-scroll-wrapper{scroll-behavior:auto}.z-tabs-panels [role=tabpanel][data-state=active],.z-tab-icon-bounce{animation:none!important}}@keyframes z-tabs-fade-in{0%{opacity:0}to{opacity:1}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { tabPanels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ZTabPanelDirective), { isSignal: true }] }], tabsListContainer: [{ type: i0.ViewChild, args: ['tabsListContainer', { isSignal: true }] }], tabButtons: [{ type: i0.ViewChildren, args: ['tabButton', { isSignal: true }] }], glideIndicator: [{ type: i0.ViewChild, args: ['glideIndicator', { isSignal: true }] }], panelHost: [{ type: i0.ViewChild, args: ['panelHost', { ...{ read: ViewContainerRef }, isSignal: true }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zTabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTabs", required: true }] }], zType: [{ type: i0.Input, args: [{ isSignal: true, alias: "zType", required: false }] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zOrientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOrientation", required: false }] }], zContentFit: [{ type: i0.Input, args: [{ isSignal: true, alias: "zContentFit", required: false }] }], zLazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLazy", required: false }] }], zTabsOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTabsOnly", required: false }] }], zShowNavWrapper: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowNavWrapper", required: false }] }], zNavFullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "zNavFullWidth", required: false }] }], zClassContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "zClassContent", required: false }] }], zShowContentWrapper: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowContentWrapper", required: false }] }], zReloadable: [{ type: i0.Input, args: [{ isSignal: true, alias: "zReloadable", required: false }] }], zEmitOnActiveClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "zEmitOnActiveClick", required: false }] }], zCache: [{ type: i0.Input, args: [{ isSignal: true, alias: "zCache", required: false }] }], zCacheKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "zCacheKey", required: false }] }], activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: false }] }, { type: i0.Output, args: ["activeTabChange"] }], zTabChange: [{ type: i0.Output, args: ["zTabChange"] }] } });
 
 /**