fold-ng 0.11.1 → 0.12.1

package/CHANGELOG.md

@@ -8,6 +8,76 @@ All notable changes to **fold-ng** are documented here. The format follows
 
 _Nothing yet._
 
+## [0.12.1] - 2026-08-22
+
+### Fixed
+
+- **A panel body no longer crushes a child that clips its own overflow.**
+  `fold-panel-body` laid its children out as a flex column, where every child
+  may shrink and a child whose `overflow` is not `visible` has an automatic
+  minimum size of **zero**. `fold-danger-zone` clips its overflow to keep its
+  dividers flush with its rounded corners, so in a full panel it was measured
+  at **2px** — its two borders — with the destructive action, its heading and
+  its explanation all erased. The box reported barely any overflow, so there
+  was nothing to scroll to either: the panel looked finished and was not.
+
+  The body is now a single-column grid with `grid-auto-rows: max-content`:
+  rows are sized by their content and the box overflows, which is what a
+  scrolling column is for. Every child is protected, not only the ones we
+  thought of. `fold-danger-zone` also asks for its content-based minimum back
+  explicitly, so it survives a hand-rolled flex column too.
+
+## [0.12.0] - 2026-08-22
+
+### Added
+
+- **`fold-panel-body` — the scrolling middle of an imperative panel.** The
+  chrome renders a `.panel-body` for a **template** panel, but a **component**
+  panel is mounted bare and owns its own header/body/footer. Every consumer
+  therefore had to rediscover the same three rules; in one consuming app,
+  eleven panels out of twenty had copied the block, and the nine that had not
+  were quietly broken.
+
+  `flex: 1 1 auto` takes what the header and footer leave, `overflow-y: auto`
+  scrolls the rest, and — the one hand-rolled copies miss — **`min-height: 0`**.
+  A flex item's default minimum height is `min-content`, so without it a tall
+  child _grows the box_ instead of scrolling, pushing the footer past the
+  panel's bottom edge where `overflow: hidden` clips it away. It also lays its
+  children out in a column with the standard gap.
+
+### Fixed
+
+- **A component panel's footer is now actually pinned.** `fold-panel-footer`
+  documented that it "stays pinned while the body scrolls" thanks to `flex:
+none` — true for a template panel, false for a component one. The mounted
+  component's host element was a **single** flex child of the panel column, so
+  the footer was a grandchild and its `flex: none` applied to nothing: it
+  scrolled away with the body, then `overflow: hidden` clipped it. The panel
+  outlet now mounts the component with `display: contents`, so its header, body
+  and footer become the column's real children and the chrome's layout reaches
+  them as documented.
+
+  ⚠️ **A box that isn't there paints nothing.** A panel component that draws on
+  its own `:host` — background, border, padding — must move that onto an element
+  inside its template. Layout-only `:host` rules (the common case: `display:
+flex; flex-direction: column; height: 100%`) simply become redundant and can
+  be deleted in favour of `fold-panel-body`.
+
+- **A tab bar no longer inherits the consumer's leading.** `.tab-bar-item` set
+  its font size (10px `compact`, `--fold-text-sm` `comfortable`) but never its
+  `line-height`, so the label's line box was sized by whatever the host app had
+  on an ancestor. An app with a comfortable body leading gave that 10px label a
+  16–26px box: a `compact` bar that should stand ~32px tall stood ~42px, and
+  read as a slab rather than a row of tabs.
+
+  The consumer cannot fix this from outside — tuning padding fights an inflation
+  that is not theirs, and `.tab-bar-item` lives inside our template. The item now
+  sets `line-height: 1`, as `fold-menu-item` already did for the same reason;
+  the tab bar had simply been left out.
+
+  Affects `fold-tabs` and `fold-view-nav` (they share `_tab-bar.scss`). Bars in
+  apps that already had a tight leading are unchanged.
+
 ## [0.11.1] - 2026-08-14
 
 ### Fixed
@@ -1565,7 +1635,9 @@ design-token stylesheet.
   `currentColor`; `prefers-reduced-motion` + `forced-colors` are respected;
   strings localise via inputs / providers (`provideFoldPanelLabels`).
 
-[unreleased]: https://github.com/hugoheynard/fold-ng/compare/v0.11.1...HEAD
+[unreleased]: https://github.com/hugoheynard/fold-ng/compare/v0.12.1...HEAD
+[0.12.1]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.12.1
+[0.12.0]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.12.0
 [0.11.1]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.11.1
 [0.11.0]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.11.0
 [0.10.3]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.10.3

package/fesm2022/fold-ng.mjs

@@ -3296,7 +3296,7 @@ class FoldDangerZoneComponent {
     /** Stable id the host's `aria-labelledby` points at. */
     titleId = this.ids.next("fold-danger-zone");
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldDangerZoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldDangerZoneComponent, isStandalone: true, selector: "fold-danger-zone", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null }, confirmPhrase: { classPropertyName: "confirmPhrase", publicName: "confirmPhrase", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, intent: { classPropertyName: "intent", publicName: "intent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirmed: "confirmed" }, host: { attributes: { "role": "group" }, properties: { "attr.data-appearance": "appearance()", "attr.aria-labelledby": "titleId" } }, ngImport: i0, template: "<div class=\"dz-head\">\n  <fold-icon name=\"warning\" size=\"sm\" class=\"dz-icon\" aria-hidden=\"true\" />\n  <h3 class=\"dz-title\" [id]=\"titleId\">{{ title() }}</h3>\n</div>\n\n<div class=\"dz-body\">\n  <ng-content />\n</div>\n\n@if (actionLabel(); as label) {\n  <div class=\"dz-actions\">\n    <fold-inline-confirm\n      [match]=\"confirmPhrase() ?? ''\"\n      [message]=\"message() ?? ''\"\n      [intent]=\"intent()\"\n      (confirmed)=\"confirmed.emit($event)\"\n    >\n      <button foldButton emphasis=\"solid\" [intent]=\"intent()\">\n        {{ label }}\n      </button>\n    </fold-inline-confirm>\n  </div>\n}\n", styles: [":host{display:block;border:1px solid var(--fold-color-alert-border);border-radius:var(--fold-radius-md, 10px);overflow:hidden}:host([data-appearance=filled]){background:var(--fold-color-alert-surface)}:host([data-appearance=section]){background:var(--fold-color-surface-card)}.dz-head{display:flex;align-items:center;gap:.5rem;padding:var(--fold-space-lg) var(--fold-space-lg) var(--fold-space-sm);color:var(--fold-color-alert-text)}.dz-icon{flex:none}.dz-title{margin:0;font-size:var(--fold-text-md, 1rem);font-weight:600}.dz-body{padding:0 var(--fold-space-lg) var(--fold-space-md);color:var(--fold-color-text-secondary);font-size:var(--fold-text-sm, .875rem);line-height:1.5}.dz-body:empty{display:none}.dz-body :first-child{margin-top:0}.dz-body :last-child{margin-bottom:0}.dz-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--fold-space-sm);padding:var(--fold-space-md) var(--fold-space-lg)}:host([data-appearance=section]) .dz-actions{border-top:1px solid var(--fold-color-border-subtle);background:var(--fold-color-surface-sunken)}@media(forced-colors:active){:host{border-color:CanvasText}:host([data-appearance=section]) .dz-actions{border-top-color:CanvasText}}\n"], dependencies: [{ kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }, { kind: "component", type: FoldButtonComponent, selector: "button[foldButton], a[foldButton]", inputs: ["emphasis", "intent", "size", "shape", "block", "icon", "iconTrailing", "type", "disabled", "loading"] }, { kind: "component", type: FoldInlineConfirmComponent, selector: "fold-inline-confirm", inputs: ["intent", "message", "match", "password", "placeholder", "loading", "size", "confirmIcon", "cancelIcon", "keepOpenOnConfirm", "labels", "open"], outputs: ["confirmed", "cancelled", "openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldDangerZoneComponent, isStandalone: true, selector: "fold-danger-zone", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null }, confirmPhrase: { classPropertyName: "confirmPhrase", publicName: "confirmPhrase", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, intent: { classPropertyName: "intent", publicName: "intent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirmed: "confirmed" }, host: { attributes: { "role": "group" }, properties: { "attr.data-appearance": "appearance()", "attr.aria-labelledby": "titleId" } }, ngImport: i0, template: "<div class=\"dz-head\">\n  <fold-icon name=\"warning\" size=\"sm\" class=\"dz-icon\" aria-hidden=\"true\" />\n  <h3 class=\"dz-title\" [id]=\"titleId\">{{ title() }}</h3>\n</div>\n\n<div class=\"dz-body\">\n  <ng-content />\n</div>\n\n@if (actionLabel(); as label) {\n  <div class=\"dz-actions\">\n    <fold-inline-confirm\n      [match]=\"confirmPhrase() ?? ''\"\n      [message]=\"message() ?? ''\"\n      [intent]=\"intent()\"\n      (confirmed)=\"confirmed.emit($event)\"\n    >\n      <button foldButton emphasis=\"solid\" [intent]=\"intent()\">\n        {{ label }}\n      </button>\n    </fold-inline-confirm>\n  </div>\n}\n", styles: [":host{display:block;border:1px solid var(--fold-color-alert-border);border-radius:var(--fold-radius-md, 10px);overflow:hidden;min-height:min-content}:host([data-appearance=filled]){background:var(--fold-color-alert-surface)}:host([data-appearance=section]){background:var(--fold-color-surface-card)}.dz-head{display:flex;align-items:center;gap:.5rem;padding:var(--fold-space-lg) var(--fold-space-lg) var(--fold-space-sm);color:var(--fold-color-alert-text)}.dz-icon{flex:none}.dz-title{margin:0;font-size:var(--fold-text-md, 1rem);font-weight:600}.dz-body{padding:0 var(--fold-space-lg) var(--fold-space-md);color:var(--fold-color-text-secondary);font-size:var(--fold-text-sm, .875rem);line-height:1.5}.dz-body:empty{display:none}.dz-body :first-child{margin-top:0}.dz-body :last-child{margin-bottom:0}.dz-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--fold-space-sm);padding:var(--fold-space-md) var(--fold-space-lg)}:host([data-appearance=section]) .dz-actions{border-top:1px solid var(--fold-color-border-subtle);background:var(--fold-color-surface-sunken)}@media(forced-colors:active){:host{border-color:CanvasText}:host([data-appearance=section]) .dz-actions{border-top-color:CanvasText}}\n"], dependencies: [{ kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }, { kind: "component", type: FoldButtonComponent, selector: "button[foldButton], a[foldButton]", inputs: ["emphasis", "intent", "size", "shape", "block", "icon", "iconTrailing", "type", "disabled", "loading"] }, { kind: "component", type: FoldInlineConfirmComponent, selector: "fold-inline-confirm", inputs: ["intent", "message", "match", "password", "placeholder", "loading", "size", "confirmIcon", "cancelIcon", "keepOpenOnConfirm", "labels", "open"], outputs: ["confirmed", "cancelled", "openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldDangerZoneComponent, decorators: [{
             type: Component,
@@ -3304,7 +3304,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         role: "group",
                         "[attr.data-appearance]": "appearance()",
                         "[attr.aria-labelledby]": "titleId",
-                    }, template: "<div class=\"dz-head\">\n  <fold-icon name=\"warning\" size=\"sm\" class=\"dz-icon\" aria-hidden=\"true\" />\n  <h3 class=\"dz-title\" [id]=\"titleId\">{{ title() }}</h3>\n</div>\n\n<div class=\"dz-body\">\n  <ng-content />\n</div>\n\n@if (actionLabel(); as label) {\n  <div class=\"dz-actions\">\n    <fold-inline-confirm\n      [match]=\"confirmPhrase() ?? ''\"\n      [message]=\"message() ?? ''\"\n      [intent]=\"intent()\"\n      (confirmed)=\"confirmed.emit($event)\"\n    >\n      <button foldButton emphasis=\"solid\" [intent]=\"intent()\">\n        {{ label }}\n      </button>\n    </fold-inline-confirm>\n  </div>\n}\n", styles: [":host{display:block;border:1px solid var(--fold-color-alert-border);border-radius:var(--fold-radius-md, 10px);overflow:hidden}:host([data-appearance=filled]){background:var(--fold-color-alert-surface)}:host([data-appearance=section]){background:var(--fold-color-surface-card)}.dz-head{display:flex;align-items:center;gap:.5rem;padding:var(--fold-space-lg) var(--fold-space-lg) var(--fold-space-sm);color:var(--fold-color-alert-text)}.dz-icon{flex:none}.dz-title{margin:0;font-size:var(--fold-text-md, 1rem);font-weight:600}.dz-body{padding:0 var(--fold-space-lg) var(--fold-space-md);color:var(--fold-color-text-secondary);font-size:var(--fold-text-sm, .875rem);line-height:1.5}.dz-body:empty{display:none}.dz-body :first-child{margin-top:0}.dz-body :last-child{margin-bottom:0}.dz-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--fold-space-sm);padding:var(--fold-space-md) var(--fold-space-lg)}:host([data-appearance=section]) .dz-actions{border-top:1px solid var(--fold-color-border-subtle);background:var(--fold-color-surface-sunken)}@media(forced-colors:active){:host{border-color:CanvasText}:host([data-appearance=section]) .dz-actions{border-top-color:CanvasText}}\n"] }]
+                    }, template: "<div class=\"dz-head\">\n  <fold-icon name=\"warning\" size=\"sm\" class=\"dz-icon\" aria-hidden=\"true\" />\n  <h3 class=\"dz-title\" [id]=\"titleId\">{{ title() }}</h3>\n</div>\n\n<div class=\"dz-body\">\n  <ng-content />\n</div>\n\n@if (actionLabel(); as label) {\n  <div class=\"dz-actions\">\n    <fold-inline-confirm\n      [match]=\"confirmPhrase() ?? ''\"\n      [message]=\"message() ?? ''\"\n      [intent]=\"intent()\"\n      (confirmed)=\"confirmed.emit($event)\"\n    >\n      <button foldButton emphasis=\"solid\" [intent]=\"intent()\">\n        {{ label }}\n      </button>\n    </fold-inline-confirm>\n  </div>\n}\n", styles: [":host{display:block;border:1px solid var(--fold-color-alert-border);border-radius:var(--fold-radius-md, 10px);overflow:hidden;min-height:min-content}:host([data-appearance=filled]){background:var(--fold-color-alert-surface)}:host([data-appearance=section]){background:var(--fold-color-surface-card)}.dz-head{display:flex;align-items:center;gap:.5rem;padding:var(--fold-space-lg) var(--fold-space-lg) var(--fold-space-sm);color:var(--fold-color-alert-text)}.dz-icon{flex:none}.dz-title{margin:0;font-size:var(--fold-text-md, 1rem);font-weight:600}.dz-body{padding:0 var(--fold-space-lg) var(--fold-space-md);color:var(--fold-color-text-secondary);font-size:var(--fold-text-sm, .875rem);line-height:1.5}.dz-body:empty{display:none}.dz-body :first-child{margin-top:0}.dz-body :last-child{margin-bottom:0}.dz-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--fold-space-sm);padding:var(--fold-space-md) var(--fold-space-lg)}:host([data-appearance=section]) .dz-actions{border-top:1px solid var(--fold-color-border-subtle);background:var(--fold-color-surface-sunken)}@media(forced-colors:active){:host{border-color:CanvasText}:host([data-appearance=section]) .dz-actions{border-top-color:CanvasText}}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], actionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionLabel", required: false }] }], confirmPhrase: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmPhrase", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], intent: [{ type: i0.Input, args: [{ isSignal: true, alias: "intent", required: false }] }], confirmed: [{ type: i0.Output, args: ["confirmed"] }] } });
 
 /**
@@ -11311,7 +11311,7 @@ class FoldViewNavComponent {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resolvedDirection" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldViewNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldViewNavComponent, isStandalone: true, selector: "fold-view-nav", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, activeKey: { classPropertyName: "activeKey", publicName: "activeKey", isSignal: true, isRequired: false, transformFunction: null }, activeStyle: { classPropertyName: "activeStyle", publicName: "activeStyle", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeKey: "activeKeyChange" }, host: { properties: { "class.is-standalone": "isStandalone()", "class.is-horizontal": "resolvedDirection() === 'horizontal'", "class.is-sticky": "sticky()" } }, ngImport: i0, template: "<nav\n  class=\"tab-bar\"\n  [class.style-underline]=\"activeStyle() === 'underline'\"\n  [class.style-fill]=\"activeStyle() === 'fill'\"\n  [class.dir-vertical]=\"resolvedDirection() === 'vertical'\"\n  [class.size-comfortable]=\"size() === 'comfortable'\"\n  [class.is-collapsed]=\"collapsed()\"\n  [class.bg-surface]=\"background() === 'surface'\"\n>\n  @for (item of items(); track item.key) {\n    @if (item.disabled) {\n      <button\n        type=\"button\"\n        class=\"tab-bar-item is-disabled\"\n        disabled\n        aria-disabled=\"true\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"body\"\n          [ngTemplateOutletContext]=\"{ $implicit: item, active: false }\"\n        />\n      </button>\n    } @else if (item.link !== undefined) {\n      <a\n        class=\"tab-bar-item\"\n        [routerLink]=\"item.link\"\n        routerLinkActive=\"is-active\"\n        #rla=\"routerLinkActive\"\n        [attr.aria-current]=\"rla.isActive ? 'page' : null\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"body\"\n          [ngTemplateOutletContext]=\"{ $implicit: item, active: rla.isActive }\"\n        />\n      </a>\n    } @else if (item.href !== undefined) {\n      <a\n        class=\"tab-bar-item\"\n        [href]=\"item.href\"\n        [class.is-active]=\"activeKey() === item.key\"\n        [attr.aria-current]=\"activeKey() === item.key ? 'page' : null\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"body\"\n          [ngTemplateOutletContext]=\"{\n            $implicit: item,\n            active: activeKey() === item.key,\n          }\"\n        />\n      </a>\n    } @else {\n      <button\n        type=\"button\"\n        class=\"tab-bar-item\"\n        [class.is-active]=\"activeKey() === item.key\"\n        [attr.aria-current]=\"activeKey() === item.key ? 'page' : null\"\n        (click)=\"activeKey.set(item.key)\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"body\"\n          [ngTemplateOutletContext]=\"{\n            $implicit: item,\n            active: activeKey() === item.key,\n          }\"\n        />\n      </button>\n    }\n  }\n</nav>\n\n<!-- One item's inner content, shared by the link / button branches. -->\n<ng-template #body let-item let-active=\"active\">\n  @if (item.icon; as ic) {\n    <fold-icon class=\"tab-bar-icon\" [name]=\"ic\" size=\"sm\" />\n  } @else if (collapsed()) {\n    <!-- Collapsed needs a fixed glyph; an icon-less item falls back to its\n         initial so the rail stays icon-width and the label still tooltips. -->\n    <span class=\"tab-bar-icon tab-bar-initial\" aria-hidden=\"true\">{{\n      item.label.charAt(0)\n    }}</span>\n  }\n  <span class=\"tab-bar-label\">{{ item.label }}</span>\n  @if (item.badge !== undefined && item.badge !== null) {\n    <fold-badge\n      class=\"tab-bar-badge\"\n      [content]=\"item.badge + ''\"\n      [variant]=\"active ? 'accent' : 'neutral'\"\n    />\n  }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:flex;width:100%;max-width:100%;overflow:hidden}:host(.is-sticky){position:sticky;top:0;z-index:2}:host:has(.tab-bar:not(.dir-vertical):not(.is-collapsed)){overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;overscroll-behavior-x:contain}:host:has(.tab-bar:not(.dir-vertical):not(.is-collapsed)) .tab-bar{min-width:max-content;max-width:none}.tab-bar{flex:1;display:flex;max-width:100%;gap:2px;-webkit-user-select:none;user-select:none}.bg-surface{background:linear-gradient(var(--fold-color-bg-rail-tertiary),var(--fold-color-bg-rail-tertiary)),var(--fold-color-bg-page);padding:var(--fold-space-xs) var(--fold-space-sm) 0}.bg-surface.dir-vertical{padding:var(--fold-space-md) var(--fold-space-sm)}.tab-bar-item{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--fold-space-sm);padding:var(--fold-space-sm) var(--fold-space-sm);background:none;border:none;color:var(--fold-color-text-muted);font-family:inherit;font-size:10px;font-weight:600;cursor:pointer;text-align:center;text-decoration:none;transition:color .1s ease,background .1s ease,border-color .1s ease;white-space:nowrap}.tab-bar-item:hover{color:var(--fold-color-text-secondary)}.tab-bar-item.is-disabled{opacity:.5;cursor:default;pointer-events:none}.size-comfortable .tab-bar-item{flex:0 1 auto;gap:var(--fold-space-sm);padding:var(--fold-space-md) var(--fold-space-lg);font-size:var(--fold-text-sm)}.dir-vertical.size-comfortable .tab-bar-item{padding:var(--fold-space-md) var(--fold-space-md);font-size:var(--fold-text-md)}.style-underline{border-bottom:1px solid var(--fold-color-border)}.style-underline .tab-bar-item{border-bottom:2px solid transparent;margin-bottom:-1px}.style-underline .tab-bar-item.is-active{color:var(--fold-color-text);border-bottom-color:var(--fold-color-primary)}.style-fill .tab-bar-item{border-radius:var(--fold-radius-sm);border:1px solid transparent}.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.style-fill .tab-bar-item:hover:not(.is-active){background:var(--fold-color-surface-hover);color:var(--fold-color-text)}.dir-vertical{flex-direction:column}.dir-vertical .tab-bar-item{flex:none;justify-content:flex-start;text-align:left;padding:var(--fold-space-sm) var(--fold-space-md);gap:var(--fold-space-sm);border-radius:var(--fold-radius-sm);font-size:var(--fold-text-sm);font-weight:500}.dir-vertical.style-underline{border-bottom:none;border-right:1px solid var(--fold-color-border)}.dir-vertical.style-underline .tab-bar-item{border-bottom:none;border-left:2px solid transparent;margin-bottom:0;margin-right:-1px}.dir-vertical.style-underline .tab-bar-item.is-active{border-left-color:var(--fold-color-primary)}.dir-vertical.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.is-collapsed .tab-bar-item{position:relative;flex:0 0 auto;gap:0}.is-collapsed .tab-bar-item:not(.is-active) .tab-bar-badge{display:none}.is-collapsed .tab-bar-item.is-active{flex:1 1 auto;min-width:0;gap:var(--fold-space-sm)}.is-collapsed .tab-bar-item.is-active .tab-bar-label{overflow:hidden;text-overflow:ellipsis}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{position:absolute;padding:var(--fold-space-xs) var(--fold-space-sm);border-radius:var(--fold-radius-sm);background:var(--fold-color-glass);border:1px solid var(--fold-color-glass-border);color:var(--fold-color-text);font-size:var(--fold-text-xs);font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;box-shadow:var(--fold-shadow-md);transition:opacity var(--fold-motion-fast);z-index:100}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{top:calc(100% + 6px);left:50%;transform:translate(-50%)}.dir-vertical.is-collapsed .tab-bar-item:hover .tab-bar-icon~.tab-bar-label,.dir-vertical.is-collapsed .tab-bar-item:focus-visible .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):hover .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):focus-visible .tab-bar-icon~.tab-bar-label{opacity:1}.dir-vertical.is-collapsed{align-items:center}.dir-vertical.is-collapsed .tab-bar-item,.dir-vertical.is-collapsed .tab-bar-item.is-active{justify-content:center;gap:0}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-badge{display:block;position:absolute;top:-2px;right:-2px;transform:scale(.85);transform-origin:top right;pointer-events:none}:host:has(.is-collapsed){overflow:visible}.tab-bar-icon{flex-shrink:0}.tab-bar-initial{display:grid;place-items:center;width:18px;height:18px;border-radius:var(--fold-radius-sm);font-size:11px;font-weight:700;line-height:1;text-transform:uppercase}.tab-bar-badge{flex-shrink:0;font-variant-numeric:tabular-nums}.tab-bar-item:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:-2px;border-radius:var(--fold-radius-sm)}:host(.is-standalone.is-horizontal){margin-block-end:var(--fold-nav-layout-gap, var(--fold-space-lg, 16px))}@media(max-width:640px){:host(.is-standalone.is-horizontal){margin-block-end:var(--fold-nav-layout-gap, var(--fold-space-xs, 4px))}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }, { kind: "component", type: FoldBadgeComponent, selector: "fold-badge", inputs: ["content", "radius", "variant"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldViewNavComponent, isStandalone: true, selector: "fold-view-nav", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, activeKey: { classPropertyName: "activeKey", publicName: "activeKey", isSignal: true, isRequired: false, transformFunction: null }, activeStyle: { classPropertyName: "activeStyle", publicName: "activeStyle", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeKey: "activeKeyChange" }, host: { properties: { "class.is-standalone": "isStandalone()", "class.is-horizontal": "resolvedDirection() === 'horizontal'", "class.is-sticky": "sticky()" } }, ngImport: i0, template: "<nav\n  class=\"tab-bar\"\n  [class.style-underline]=\"activeStyle() === 'underline'\"\n  [class.style-fill]=\"activeStyle() === 'fill'\"\n  [class.dir-vertical]=\"resolvedDirection() === 'vertical'\"\n  [class.size-comfortable]=\"size() === 'comfortable'\"\n  [class.is-collapsed]=\"collapsed()\"\n  [class.bg-surface]=\"background() === 'surface'\"\n>\n  @for (item of items(); track item.key) {\n    @if (item.disabled) {\n      <button\n        type=\"button\"\n        class=\"tab-bar-item is-disabled\"\n        disabled\n        aria-disabled=\"true\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"body\"\n          [ngTemplateOutletContext]=\"{ $implicit: item, active: false }\"\n        />\n      </button>\n    } @else if (item.link !== undefined) {\n      <a\n        class=\"tab-bar-item\"\n        [routerLink]=\"item.link\"\n        routerLinkActive=\"is-active\"\n        #rla=\"routerLinkActive\"\n        [attr.aria-current]=\"rla.isActive ? 'page' : null\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"body\"\n          [ngTemplateOutletContext]=\"{ $implicit: item, active: rla.isActive }\"\n        />\n      </a>\n    } @else if (item.href !== undefined) {\n      <a\n        class=\"tab-bar-item\"\n        [href]=\"item.href\"\n        [class.is-active]=\"activeKey() === item.key\"\n        [attr.aria-current]=\"activeKey() === item.key ? 'page' : null\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"body\"\n          [ngTemplateOutletContext]=\"{\n            $implicit: item,\n            active: activeKey() === item.key,\n          }\"\n        />\n      </a>\n    } @else {\n      <button\n        type=\"button\"\n        class=\"tab-bar-item\"\n        [class.is-active]=\"activeKey() === item.key\"\n        [attr.aria-current]=\"activeKey() === item.key ? 'page' : null\"\n        (click)=\"activeKey.set(item.key)\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"body\"\n          [ngTemplateOutletContext]=\"{\n            $implicit: item,\n            active: activeKey() === item.key,\n          }\"\n        />\n      </button>\n    }\n  }\n</nav>\n\n<!-- One item's inner content, shared by the link / button branches. -->\n<ng-template #body let-item let-active=\"active\">\n  @if (item.icon; as ic) {\n    <fold-icon class=\"tab-bar-icon\" [name]=\"ic\" size=\"sm\" />\n  } @else if (collapsed()) {\n    <!-- Collapsed needs a fixed glyph; an icon-less item falls back to its\n         initial so the rail stays icon-width and the label still tooltips. -->\n    <span class=\"tab-bar-icon tab-bar-initial\" aria-hidden=\"true\">{{\n      item.label.charAt(0)\n    }}</span>\n  }\n  <span class=\"tab-bar-label\">{{ item.label }}</span>\n  @if (item.badge !== undefined && item.badge !== null) {\n    <fold-badge\n      class=\"tab-bar-badge\"\n      [content]=\"item.badge + ''\"\n      [variant]=\"active ? 'accent' : 'neutral'\"\n    />\n  }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:flex;width:100%;max-width:100%;overflow:hidden}:host(.is-sticky){position:sticky;top:0;z-index:2}:host:has(.tab-bar:not(.dir-vertical):not(.is-collapsed)){overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;overscroll-behavior-x:contain}:host:has(.tab-bar:not(.dir-vertical):not(.is-collapsed)) .tab-bar{min-width:max-content;max-width:none}.tab-bar{flex:1;display:flex;max-width:100%;gap:2px;-webkit-user-select:none;user-select:none}.bg-surface{background:linear-gradient(var(--fold-color-bg-rail-tertiary),var(--fold-color-bg-rail-tertiary)),var(--fold-color-bg-page);padding:var(--fold-space-xs) var(--fold-space-sm) 0}.bg-surface.dir-vertical{padding:var(--fold-space-md) var(--fold-space-sm)}.tab-bar-item{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--fold-space-sm);padding:var(--fold-space-sm) var(--fold-space-sm);background:none;border:none;color:var(--fold-color-text-muted);font-family:inherit;font-size:10px;font-weight:600;line-height:1;cursor:pointer;text-align:center;text-decoration:none;transition:color .1s ease,background .1s ease,border-color .1s ease;white-space:nowrap}.tab-bar-item:hover{color:var(--fold-color-text-secondary)}.tab-bar-item.is-disabled{opacity:.5;cursor:default;pointer-events:none}.size-comfortable .tab-bar-item{flex:0 1 auto;gap:var(--fold-space-sm);padding:var(--fold-space-md) var(--fold-space-lg);font-size:var(--fold-text-sm)}.dir-vertical.size-comfortable .tab-bar-item{padding:var(--fold-space-md) var(--fold-space-md);font-size:var(--fold-text-md)}.style-underline{border-bottom:1px solid var(--fold-color-border)}.style-underline .tab-bar-item{border-bottom:2px solid transparent;margin-bottom:-1px}.style-underline .tab-bar-item.is-active{color:var(--fold-color-text);border-bottom-color:var(--fold-color-primary)}.style-fill .tab-bar-item{border-radius:var(--fold-radius-sm);border:1px solid transparent}.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.style-fill .tab-bar-item:hover:not(.is-active){background:var(--fold-color-surface-hover);color:var(--fold-color-text)}.dir-vertical{flex-direction:column}.dir-vertical .tab-bar-item{flex:none;justify-content:flex-start;text-align:left;padding:var(--fold-space-sm) var(--fold-space-md);gap:var(--fold-space-sm);border-radius:var(--fold-radius-sm);font-size:var(--fold-text-sm);font-weight:500}.dir-vertical.style-underline{border-bottom:none;border-right:1px solid var(--fold-color-border)}.dir-vertical.style-underline .tab-bar-item{border-bottom:none;border-left:2px solid transparent;margin-bottom:0;margin-right:-1px}.dir-vertical.style-underline .tab-bar-item.is-active{border-left-color:var(--fold-color-primary)}.dir-vertical.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.is-collapsed .tab-bar-item{position:relative;flex:0 0 auto;gap:0}.is-collapsed .tab-bar-item:not(.is-active) .tab-bar-badge{display:none}.is-collapsed .tab-bar-item.is-active{flex:1 1 auto;min-width:0;gap:var(--fold-space-sm)}.is-collapsed .tab-bar-item.is-active .tab-bar-label{overflow:hidden;text-overflow:ellipsis}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{position:absolute;padding:var(--fold-space-xs) var(--fold-space-sm);border-radius:var(--fold-radius-sm);background:var(--fold-color-glass);border:1px solid var(--fold-color-glass-border);color:var(--fold-color-text);font-size:var(--fold-text-xs);font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;box-shadow:var(--fold-shadow-md);transition:opacity var(--fold-motion-fast);z-index:100}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{top:calc(100% + 6px);left:50%;transform:translate(-50%)}.dir-vertical.is-collapsed .tab-bar-item:hover .tab-bar-icon~.tab-bar-label,.dir-vertical.is-collapsed .tab-bar-item:focus-visible .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):hover .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):focus-visible .tab-bar-icon~.tab-bar-label{opacity:1}.dir-vertical.is-collapsed{align-items:center}.dir-vertical.is-collapsed .tab-bar-item,.dir-vertical.is-collapsed .tab-bar-item.is-active{justify-content:center;gap:0}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-badge{display:block;position:absolute;top:-2px;right:-2px;transform:scale(.85);transform-origin:top right;pointer-events:none}:host:has(.is-collapsed){overflow:visible}.tab-bar-icon{flex-shrink:0}.tab-bar-initial{display:grid;place-items:center;width:18px;height:18px;border-radius:var(--fold-radius-sm);font-size:11px;font-weight:700;line-height:1;text-transform:uppercase}.tab-bar-badge{flex-shrink:0;font-variant-numeric:tabular-nums}.tab-bar-item:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:-2px;border-radius:var(--fold-radius-sm)}:host(.is-standalone.is-horizontal){margin-block-end:var(--fold-nav-layout-gap, var(--fold-space-lg, 16px))}@media(max-width:640px){:host(.is-standalone.is-horizontal){margin-block-end:var(--fold-nav-layout-gap, var(--fold-space-xs, 4px))}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }, { kind: "component", type: FoldBadgeComponent, selector: "fold-badge", inputs: ["content", "radius", "variant"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldViewNavComponent, decorators: [{
             type: Component,
@@ -11329,7 +11329,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         "[class.is-standalone]": "isStandalone()",
                         "[class.is-horizontal]": "resolvedDirection() === 'horizontal'",
                         "[class.is-sticky]": "sticky()",
-                    }, template: "<nav\n  class=\"tab-bar\"\n  [class.style-underline]=\"activeStyle() === 'underline'\"\n  [class.style-fill]=\"activeStyle() === 'fill'\"\n  [class.dir-vertical]=\"resolvedDirection() === 'vertical'\"\n  [class.size-comfortable]=\"size() === 'comfortable'\"\n  [class.is-collapsed]=\"collapsed()\"\n  [class.bg-surface]=\"background() === 'surface'\"\n>\n  @for (item of items(); track item.key) {\n    @if (item.disabled) {\n      <button\n        type=\"button\"\n        class=\"tab-bar-item is-disabled\"\n        disabled\n        aria-disabled=\"true\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"body\"\n          [ngTemplateOutletContext]=\"{ $implicit: item, active: false }\"\n        />\n      </button>\n    } @else if (item.link !== undefined) {\n      <a\n        class=\"tab-bar-item\"\n        [routerLink]=\"item.link\"\n        routerLinkActive=\"is-active\"\n        #rla=\"routerLinkActive\"\n        [attr.aria-current]=\"rla.isActive ? 'page' : null\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"body\"\n          [ngTemplateOutletContext]=\"{ $implicit: item, active: rla.isActive }\"\n        />\n      </a>\n    } @else if (item.href !== undefined) {\n      <a\n        class=\"tab-bar-item\"\n        [href]=\"item.href\"\n        [class.is-active]=\"activeKey() === item.key\"\n        [attr.aria-current]=\"activeKey() === item.key ? 'page' : null\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"body\"\n          [ngTemplateOutletContext]=\"{\n            $implicit: item,\n            active: activeKey() === item.key,\n          }\"\n        />\n      </a>\n    } @else {\n      <button\n        type=\"button\"\n        class=\"tab-bar-item\"\n        [class.is-active]=\"activeKey() === item.key\"\n        [attr.aria-current]=\"activeKey() === item.key ? 'page' : null\"\n        (click)=\"activeKey.set(item.key)\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"body\"\n          [ngTemplateOutletContext]=\"{\n            $implicit: item,\n            active: activeKey() === item.key,\n          }\"\n        />\n      </button>\n    }\n  }\n</nav>\n\n<!-- One item's inner content, shared by the link / button branches. -->\n<ng-template #body let-item let-active=\"active\">\n  @if (item.icon; as ic) {\n    <fold-icon class=\"tab-bar-icon\" [name]=\"ic\" size=\"sm\" />\n  } @else if (collapsed()) {\n    <!-- Collapsed needs a fixed glyph; an icon-less item falls back to its\n         initial so the rail stays icon-width and the label still tooltips. -->\n    <span class=\"tab-bar-icon tab-bar-initial\" aria-hidden=\"true\">{{\n      item.label.charAt(0)\n    }}</span>\n  }\n  <span class=\"tab-bar-label\">{{ item.label }}</span>\n  @if (item.badge !== undefined && item.badge !== null) {\n    <fold-badge\n      class=\"tab-bar-badge\"\n      [content]=\"item.badge + ''\"\n      [variant]=\"active ? 'accent' : 'neutral'\"\n    />\n  }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:flex;width:100%;max-width:100%;overflow:hidden}:host(.is-sticky){position:sticky;top:0;z-index:2}:host:has(.tab-bar:not(.dir-vertical):not(.is-collapsed)){overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;overscroll-behavior-x:contain}:host:has(.tab-bar:not(.dir-vertical):not(.is-collapsed)) .tab-bar{min-width:max-content;max-width:none}.tab-bar{flex:1;display:flex;max-width:100%;gap:2px;-webkit-user-select:none;user-select:none}.bg-surface{background:linear-gradient(var(--fold-color-bg-rail-tertiary),var(--fold-color-bg-rail-tertiary)),var(--fold-color-bg-page);padding:var(--fold-space-xs) var(--fold-space-sm) 0}.bg-surface.dir-vertical{padding:var(--fold-space-md) var(--fold-space-sm)}.tab-bar-item{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--fold-space-sm);padding:var(--fold-space-sm) var(--fold-space-sm);background:none;border:none;color:var(--fold-color-text-muted);font-family:inherit;font-size:10px;font-weight:600;cursor:pointer;text-align:center;text-decoration:none;transition:color .1s ease,background .1s ease,border-color .1s ease;white-space:nowrap}.tab-bar-item:hover{color:var(--fold-color-text-secondary)}.tab-bar-item.is-disabled{opacity:.5;cursor:default;pointer-events:none}.size-comfortable .tab-bar-item{flex:0 1 auto;gap:var(--fold-space-sm);padding:var(--fold-space-md) var(--fold-space-lg);font-size:var(--fold-text-sm)}.dir-vertical.size-comfortable .tab-bar-item{padding:var(--fold-space-md) var(--fold-space-md);font-size:var(--fold-text-md)}.style-underline{border-bottom:1px solid var(--fold-color-border)}.style-underline .tab-bar-item{border-bottom:2px solid transparent;margin-bottom:-1px}.style-underline .tab-bar-item.is-active{color:var(--fold-color-text);border-bottom-color:var(--fold-color-primary)}.style-fill .tab-bar-item{border-radius:var(--fold-radius-sm);border:1px solid transparent}.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.style-fill .tab-bar-item:hover:not(.is-active){background:var(--fold-color-surface-hover);color:var(--fold-color-text)}.dir-vertical{flex-direction:column}.dir-vertical .tab-bar-item{flex:none;justify-content:flex-start;text-align:left;padding:var(--fold-space-sm) var(--fold-space-md);gap:var(--fold-space-sm);border-radius:var(--fold-radius-sm);font-size:var(--fold-text-sm);font-weight:500}.dir-vertical.style-underline{border-bottom:none;border-right:1px solid var(--fold-color-border)}.dir-vertical.style-underline .tab-bar-item{border-bottom:none;border-left:2px solid transparent;margin-bottom:0;margin-right:-1px}.dir-vertical.style-underline .tab-bar-item.is-active{border-left-color:var(--fold-color-primary)}.dir-vertical.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.is-collapsed .tab-bar-item{position:relative;flex:0 0 auto;gap:0}.is-collapsed .tab-bar-item:not(.is-active) .tab-bar-badge{display:none}.is-collapsed .tab-bar-item.is-active{flex:1 1 auto;min-width:0;gap:var(--fold-space-sm)}.is-collapsed .tab-bar-item.is-active .tab-bar-label{overflow:hidden;text-overflow:ellipsis}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{position:absolute;padding:var(--fold-space-xs) var(--fold-space-sm);border-radius:var(--fold-radius-sm);background:var(--fold-color-glass);border:1px solid var(--fold-color-glass-border);color:var(--fold-color-text);font-size:var(--fold-text-xs);font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;box-shadow:var(--fold-shadow-md);transition:opacity var(--fold-motion-fast);z-index:100}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{top:calc(100% + 6px);left:50%;transform:translate(-50%)}.dir-vertical.is-collapsed .tab-bar-item:hover .tab-bar-icon~.tab-bar-label,.dir-vertical.is-collapsed .tab-bar-item:focus-visible .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):hover .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):focus-visible .tab-bar-icon~.tab-bar-label{opacity:1}.dir-vertical.is-collapsed{align-items:center}.dir-vertical.is-collapsed .tab-bar-item,.dir-vertical.is-collapsed .tab-bar-item.is-active{justify-content:center;gap:0}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-badge{display:block;position:absolute;top:-2px;right:-2px;transform:scale(.85);transform-origin:top right;pointer-events:none}:host:has(.is-collapsed){overflow:visible}.tab-bar-icon{flex-shrink:0}.tab-bar-initial{display:grid;place-items:center;width:18px;height:18px;border-radius:var(--fold-radius-sm);font-size:11px;font-weight:700;line-height:1;text-transform:uppercase}.tab-bar-badge{flex-shrink:0;font-variant-numeric:tabular-nums}.tab-bar-item:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:-2px;border-radius:var(--fold-radius-sm)}:host(.is-standalone.is-horizontal){margin-block-end:var(--fold-nav-layout-gap, var(--fold-space-lg, 16px))}@media(max-width:640px){:host(.is-standalone.is-horizontal){margin-block-end:var(--fold-nav-layout-gap, var(--fold-space-xs, 4px))}}\n"] }]
+                    }, template: "<nav\n  class=\"tab-bar\"\n  [class.style-underline]=\"activeStyle() === 'underline'\"\n  [class.style-fill]=\"activeStyle() === 'fill'\"\n  [class.dir-vertical]=\"resolvedDirection() === 'vertical'\"\n  [class.size-comfortable]=\"size() === 'comfortable'\"\n  [class.is-collapsed]=\"collapsed()\"\n  [class.bg-surface]=\"background() === 'surface'\"\n>\n  @for (item of items(); track item.key) {\n    @if (item.disabled) {\n      <button\n        type=\"button\"\n        class=\"tab-bar-item is-disabled\"\n        disabled\n        aria-disabled=\"true\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"body\"\n          [ngTemplateOutletContext]=\"{ $implicit: item, active: false }\"\n        />\n      </button>\n    } @else if (item.link !== undefined) {\n      <a\n        class=\"tab-bar-item\"\n        [routerLink]=\"item.link\"\n        routerLinkActive=\"is-active\"\n        #rla=\"routerLinkActive\"\n        [attr.aria-current]=\"rla.isActive ? 'page' : null\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"body\"\n          [ngTemplateOutletContext]=\"{ $implicit: item, active: rla.isActive }\"\n        />\n      </a>\n    } @else if (item.href !== undefined) {\n      <a\n        class=\"tab-bar-item\"\n        [href]=\"item.href\"\n        [class.is-active]=\"activeKey() === item.key\"\n        [attr.aria-current]=\"activeKey() === item.key ? 'page' : null\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"body\"\n          [ngTemplateOutletContext]=\"{\n            $implicit: item,\n            active: activeKey() === item.key,\n          }\"\n        />\n      </a>\n    } @else {\n      <button\n        type=\"button\"\n        class=\"tab-bar-item\"\n        [class.is-active]=\"activeKey() === item.key\"\n        [attr.aria-current]=\"activeKey() === item.key ? 'page' : null\"\n        (click)=\"activeKey.set(item.key)\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"body\"\n          [ngTemplateOutletContext]=\"{\n            $implicit: item,\n            active: activeKey() === item.key,\n          }\"\n        />\n      </button>\n    }\n  }\n</nav>\n\n<!-- One item's inner content, shared by the link / button branches. -->\n<ng-template #body let-item let-active=\"active\">\n  @if (item.icon; as ic) {\n    <fold-icon class=\"tab-bar-icon\" [name]=\"ic\" size=\"sm\" />\n  } @else if (collapsed()) {\n    <!-- Collapsed needs a fixed glyph; an icon-less item falls back to its\n         initial so the rail stays icon-width and the label still tooltips. -->\n    <span class=\"tab-bar-icon tab-bar-initial\" aria-hidden=\"true\">{{\n      item.label.charAt(0)\n    }}</span>\n  }\n  <span class=\"tab-bar-label\">{{ item.label }}</span>\n  @if (item.badge !== undefined && item.badge !== null) {\n    <fold-badge\n      class=\"tab-bar-badge\"\n      [content]=\"item.badge + ''\"\n      [variant]=\"active ? 'accent' : 'neutral'\"\n    />\n  }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:flex;width:100%;max-width:100%;overflow:hidden}:host(.is-sticky){position:sticky;top:0;z-index:2}:host:has(.tab-bar:not(.dir-vertical):not(.is-collapsed)){overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;overscroll-behavior-x:contain}:host:has(.tab-bar:not(.dir-vertical):not(.is-collapsed)) .tab-bar{min-width:max-content;max-width:none}.tab-bar{flex:1;display:flex;max-width:100%;gap:2px;-webkit-user-select:none;user-select:none}.bg-surface{background:linear-gradient(var(--fold-color-bg-rail-tertiary),var(--fold-color-bg-rail-tertiary)),var(--fold-color-bg-page);padding:var(--fold-space-xs) var(--fold-space-sm) 0}.bg-surface.dir-vertical{padding:var(--fold-space-md) var(--fold-space-sm)}.tab-bar-item{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--fold-space-sm);padding:var(--fold-space-sm) var(--fold-space-sm);background:none;border:none;color:var(--fold-color-text-muted);font-family:inherit;font-size:10px;font-weight:600;line-height:1;cursor:pointer;text-align:center;text-decoration:none;transition:color .1s ease,background .1s ease,border-color .1s ease;white-space:nowrap}.tab-bar-item:hover{color:var(--fold-color-text-secondary)}.tab-bar-item.is-disabled{opacity:.5;cursor:default;pointer-events:none}.size-comfortable .tab-bar-item{flex:0 1 auto;gap:var(--fold-space-sm);padding:var(--fold-space-md) var(--fold-space-lg);font-size:var(--fold-text-sm)}.dir-vertical.size-comfortable .tab-bar-item{padding:var(--fold-space-md) var(--fold-space-md);font-size:var(--fold-text-md)}.style-underline{border-bottom:1px solid var(--fold-color-border)}.style-underline .tab-bar-item{border-bottom:2px solid transparent;margin-bottom:-1px}.style-underline .tab-bar-item.is-active{color:var(--fold-color-text);border-bottom-color:var(--fold-color-primary)}.style-fill .tab-bar-item{border-radius:var(--fold-radius-sm);border:1px solid transparent}.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.style-fill .tab-bar-item:hover:not(.is-active){background:var(--fold-color-surface-hover);color:var(--fold-color-text)}.dir-vertical{flex-direction:column}.dir-vertical .tab-bar-item{flex:none;justify-content:flex-start;text-align:left;padding:var(--fold-space-sm) var(--fold-space-md);gap:var(--fold-space-sm);border-radius:var(--fold-radius-sm);font-size:var(--fold-text-sm);font-weight:500}.dir-vertical.style-underline{border-bottom:none;border-right:1px solid var(--fold-color-border)}.dir-vertical.style-underline .tab-bar-item{border-bottom:none;border-left:2px solid transparent;margin-bottom:0;margin-right:-1px}.dir-vertical.style-underline .tab-bar-item.is-active{border-left-color:var(--fold-color-primary)}.dir-vertical.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.is-collapsed .tab-bar-item{position:relative;flex:0 0 auto;gap:0}.is-collapsed .tab-bar-item:not(.is-active) .tab-bar-badge{display:none}.is-collapsed .tab-bar-item.is-active{flex:1 1 auto;min-width:0;gap:var(--fold-space-sm)}.is-collapsed .tab-bar-item.is-active .tab-bar-label{overflow:hidden;text-overflow:ellipsis}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{position:absolute;padding:var(--fold-space-xs) var(--fold-space-sm);border-radius:var(--fold-radius-sm);background:var(--fold-color-glass);border:1px solid var(--fold-color-glass-border);color:var(--fold-color-text);font-size:var(--fold-text-xs);font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;box-shadow:var(--fold-shadow-md);transition:opacity var(--fold-motion-fast);z-index:100}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{top:calc(100% + 6px);left:50%;transform:translate(-50%)}.dir-vertical.is-collapsed .tab-bar-item:hover .tab-bar-icon~.tab-bar-label,.dir-vertical.is-collapsed .tab-bar-item:focus-visible .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):hover .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):focus-visible .tab-bar-icon~.tab-bar-label{opacity:1}.dir-vertical.is-collapsed{align-items:center}.dir-vertical.is-collapsed .tab-bar-item,.dir-vertical.is-collapsed .tab-bar-item.is-active{justify-content:center;gap:0}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-badge{display:block;position:absolute;top:-2px;right:-2px;transform:scale(.85);transform-origin:top right;pointer-events:none}:host:has(.is-collapsed){overflow:visible}.tab-bar-icon{flex-shrink:0}.tab-bar-initial{display:grid;place-items:center;width:18px;height:18px;border-radius:var(--fold-radius-sm);font-size:11px;font-weight:700;line-height:1;text-transform:uppercase}.tab-bar-badge{flex-shrink:0;font-variant-numeric:tabular-nums}.tab-bar-item:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:-2px;border-radius:var(--fold-radius-sm)}:host(.is-standalone.is-horizontal){margin-block-end:var(--fold-nav-layout-gap, var(--fold-space-lg, 16px))}@media(max-width:640px){:host(.is-standalone.is-horizontal){margin-block-end:var(--fold-nav-layout-gap, var(--fold-space-xs, 4px))}}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], activeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeKey", required: false }] }, { type: i0.Output, args: ["activeKeyChange"] }], activeStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeStyle", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }] } });
 
 /**
@@ -11552,11 +11552,11 @@ class FoldTabsComponent {
         this.tabButtons()[target]?.nativeElement.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldTabsComponent, isStandalone: true, selector: "fold-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, activeKey: { classPropertyName: "activeKey", publicName: "activeKey", isSignal: true, isRequired: true, transformFunction: null }, activeStyle: { classPropertyName: "activeStyle", publicName: "activeStyle", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeKey: "activeKeyChange" }, host: { properties: { "class.is-sticky": "sticky()" } }, viewQueries: [{ propertyName: "tabButtons", predicate: ["tabBtn"], descendants: true, isSignal: true }], exportAs: ["foldTabs"], ngImport: i0, template: "<div\n  class=\"tab-bar\"\n  role=\"tablist\"\n  [attr.aria-orientation]=\"\n    resolvedDirection() === 'vertical' ? 'vertical' : 'horizontal'\n  \"\n  [class.style-underline]=\"activeStyle() === 'underline'\"\n  [class.style-fill]=\"activeStyle() === 'fill'\"\n  [class.dir-vertical]=\"resolvedDirection() === 'vertical'\"\n  [class.size-comfortable]=\"size() === 'comfortable'\"\n  [class.is-collapsed]=\"collapsed()\"\n  [class.bg-surface]=\"background() === 'surface'\"\n  (keydown)=\"onKeydown($event)\"\n>\n  @for (tab of tabs(); track tab.key) {\n    <button\n      #tabBtn\n      type=\"button\"\n      role=\"tab\"\n      class=\"tab-bar-item\"\n      [id]=\"tabId(tab.key)\"\n      [class.is-active]=\"activeKey() === tab.key\"\n      [attr.aria-selected]=\"activeKey() === tab.key\"\n      [attr.aria-controls]=\"panelId(tab.key)\"\n      [tabindex]=\"activeKey() === tab.key ? 0 : -1\"\n      (click)=\"select(tab.key)\"\n    >\n      @if (tab.icon; as ic) {\n        <fold-icon class=\"tab-bar-icon\" [name]=\"ic\" size=\"sm\" />\n      } @else if (collapsed()) {\n        <span class=\"tab-bar-icon tab-bar-initial\" aria-hidden=\"true\">{{\n          tab.label.charAt(0)\n        }}</span>\n      }\n      <span class=\"tab-bar-label\">{{ tab.label }}</span>\n      @if (tab.badge !== undefined && tab.badge !== null) {\n        <fold-badge\n          class=\"tab-bar-badge\"\n          [content]=\"tab.badge + ''\"\n          [variant]=\"activeKey() === tab.key ? 'accent' : 'neutral'\"\n        />\n      }\n    </button>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;width:100%;max-width:100%;overflow:hidden}:host(.is-sticky){position:sticky;top:0;z-index:2}:host:has(.tab-bar:not(.dir-vertical):not(.is-collapsed)){overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;overscroll-behavior-x:contain}:host:has(.tab-bar:not(.dir-vertical):not(.is-collapsed)) .tab-bar{min-width:max-content;max-width:none}.tab-bar{flex:1;display:flex;max-width:100%;gap:2px;-webkit-user-select:none;user-select:none}.bg-surface{background:linear-gradient(var(--fold-color-bg-rail-tertiary),var(--fold-color-bg-rail-tertiary)),var(--fold-color-bg-page);padding:var(--fold-space-xs) var(--fold-space-sm) 0}.bg-surface.dir-vertical{padding:var(--fold-space-md) var(--fold-space-sm)}.tab-bar-item{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--fold-space-sm);padding:var(--fold-space-sm) var(--fold-space-sm);background:none;border:none;color:var(--fold-color-text-muted);font-family:inherit;font-size:10px;font-weight:600;cursor:pointer;text-align:center;text-decoration:none;transition:color .1s ease,background .1s ease,border-color .1s ease;white-space:nowrap}.tab-bar-item:hover{color:var(--fold-color-text-secondary)}.tab-bar-item.is-disabled{opacity:.5;cursor:default;pointer-events:none}.size-comfortable .tab-bar-item{flex:0 1 auto;gap:var(--fold-space-sm);padding:var(--fold-space-md) var(--fold-space-lg);font-size:var(--fold-text-sm)}.dir-vertical.size-comfortable .tab-bar-item{padding:var(--fold-space-md) var(--fold-space-md);font-size:var(--fold-text-md)}.style-underline{border-bottom:1px solid var(--fold-color-border)}.style-underline .tab-bar-item{border-bottom:2px solid transparent;margin-bottom:-1px}.style-underline .tab-bar-item.is-active{color:var(--fold-color-text);border-bottom-color:var(--fold-color-primary)}.style-fill .tab-bar-item{border-radius:var(--fold-radius-sm);border:1px solid transparent}.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.style-fill .tab-bar-item:hover:not(.is-active){background:var(--fold-color-surface-hover);color:var(--fold-color-text)}.dir-vertical{flex-direction:column}.dir-vertical .tab-bar-item{flex:none;justify-content:flex-start;text-align:left;padding:var(--fold-space-sm) var(--fold-space-md);gap:var(--fold-space-sm);border-radius:var(--fold-radius-sm);font-size:var(--fold-text-sm);font-weight:500}.dir-vertical.style-underline{border-bottom:none;border-right:1px solid var(--fold-color-border)}.dir-vertical.style-underline .tab-bar-item{border-bottom:none;border-left:2px solid transparent;margin-bottom:0;margin-right:-1px}.dir-vertical.style-underline .tab-bar-item.is-active{border-left-color:var(--fold-color-primary)}.dir-vertical.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.is-collapsed .tab-bar-item{position:relative;flex:0 0 auto;gap:0}.is-collapsed .tab-bar-item:not(.is-active) .tab-bar-badge{display:none}.is-collapsed .tab-bar-item.is-active{flex:1 1 auto;min-width:0;gap:var(--fold-space-sm)}.is-collapsed .tab-bar-item.is-active .tab-bar-label{overflow:hidden;text-overflow:ellipsis}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{position:absolute;padding:var(--fold-space-xs) var(--fold-space-sm);border-radius:var(--fold-radius-sm);background:var(--fold-color-glass);border:1px solid var(--fold-color-glass-border);color:var(--fold-color-text);font-size:var(--fold-text-xs);font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;box-shadow:var(--fold-shadow-md);transition:opacity var(--fold-motion-fast);z-index:100}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{top:calc(100% + 6px);left:50%;transform:translate(-50%)}.dir-vertical.is-collapsed .tab-bar-item:hover .tab-bar-icon~.tab-bar-label,.dir-vertical.is-collapsed .tab-bar-item:focus-visible .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):hover .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):focus-visible .tab-bar-icon~.tab-bar-label{opacity:1}.dir-vertical.is-collapsed{align-items:center}.dir-vertical.is-collapsed .tab-bar-item,.dir-vertical.is-collapsed .tab-bar-item.is-active{justify-content:center;gap:0}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-badge{display:block;position:absolute;top:-2px;right:-2px;transform:scale(.85);transform-origin:top right;pointer-events:none}:host:has(.is-collapsed){overflow:visible}.tab-bar-icon{flex-shrink:0}.tab-bar-initial{display:grid;place-items:center;width:18px;height:18px;border-radius:var(--fold-radius-sm);font-size:11px;font-weight:700;line-height:1;text-transform:uppercase}.tab-bar-badge{flex-shrink:0;font-variant-numeric:tabular-nums}.tab-bar-item:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:-2px;border-radius:var(--fold-radius-sm)}\n"], dependencies: [{ kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }, { kind: "component", type: FoldBadgeComponent, selector: "fold-badge", inputs: ["content", "radius", "variant"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldTabsComponent, isStandalone: true, selector: "fold-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, activeKey: { classPropertyName: "activeKey", publicName: "activeKey", isSignal: true, isRequired: true, transformFunction: null }, activeStyle: { classPropertyName: "activeStyle", publicName: "activeStyle", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeKey: "activeKeyChange" }, host: { properties: { "class.is-sticky": "sticky()" } }, viewQueries: [{ propertyName: "tabButtons", predicate: ["tabBtn"], descendants: true, isSignal: true }], exportAs: ["foldTabs"], ngImport: i0, template: "<div\n  class=\"tab-bar\"\n  role=\"tablist\"\n  [attr.aria-orientation]=\"\n    resolvedDirection() === 'vertical' ? 'vertical' : 'horizontal'\n  \"\n  [class.style-underline]=\"activeStyle() === 'underline'\"\n  [class.style-fill]=\"activeStyle() === 'fill'\"\n  [class.dir-vertical]=\"resolvedDirection() === 'vertical'\"\n  [class.size-comfortable]=\"size() === 'comfortable'\"\n  [class.is-collapsed]=\"collapsed()\"\n  [class.bg-surface]=\"background() === 'surface'\"\n  (keydown)=\"onKeydown($event)\"\n>\n  @for (tab of tabs(); track tab.key) {\n    <button\n      #tabBtn\n      type=\"button\"\n      role=\"tab\"\n      class=\"tab-bar-item\"\n      [id]=\"tabId(tab.key)\"\n      [class.is-active]=\"activeKey() === tab.key\"\n      [attr.aria-selected]=\"activeKey() === tab.key\"\n      [attr.aria-controls]=\"panelId(tab.key)\"\n      [tabindex]=\"activeKey() === tab.key ? 0 : -1\"\n      (click)=\"select(tab.key)\"\n    >\n      @if (tab.icon; as ic) {\n        <fold-icon class=\"tab-bar-icon\" [name]=\"ic\" size=\"sm\" />\n      } @else if (collapsed()) {\n        <span class=\"tab-bar-icon tab-bar-initial\" aria-hidden=\"true\">{{\n          tab.label.charAt(0)\n        }}</span>\n      }\n      <span class=\"tab-bar-label\">{{ tab.label }}</span>\n      @if (tab.badge !== undefined && tab.badge !== null) {\n        <fold-badge\n          class=\"tab-bar-badge\"\n          [content]=\"tab.badge + ''\"\n          [variant]=\"activeKey() === tab.key ? 'accent' : 'neutral'\"\n        />\n      }\n    </button>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;width:100%;max-width:100%;overflow:hidden}:host(.is-sticky){position:sticky;top:0;z-index:2}:host:has(.tab-bar:not(.dir-vertical):not(.is-collapsed)){overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;overscroll-behavior-x:contain}:host:has(.tab-bar:not(.dir-vertical):not(.is-collapsed)) .tab-bar{min-width:max-content;max-width:none}.tab-bar{flex:1;display:flex;max-width:100%;gap:2px;-webkit-user-select:none;user-select:none}.bg-surface{background:linear-gradient(var(--fold-color-bg-rail-tertiary),var(--fold-color-bg-rail-tertiary)),var(--fold-color-bg-page);padding:var(--fold-space-xs) var(--fold-space-sm) 0}.bg-surface.dir-vertical{padding:var(--fold-space-md) var(--fold-space-sm)}.tab-bar-item{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--fold-space-sm);padding:var(--fold-space-sm) var(--fold-space-sm);background:none;border:none;color:var(--fold-color-text-muted);font-family:inherit;font-size:10px;font-weight:600;line-height:1;cursor:pointer;text-align:center;text-decoration:none;transition:color .1s ease,background .1s ease,border-color .1s ease;white-space:nowrap}.tab-bar-item:hover{color:var(--fold-color-text-secondary)}.tab-bar-item.is-disabled{opacity:.5;cursor:default;pointer-events:none}.size-comfortable .tab-bar-item{flex:0 1 auto;gap:var(--fold-space-sm);padding:var(--fold-space-md) var(--fold-space-lg);font-size:var(--fold-text-sm)}.dir-vertical.size-comfortable .tab-bar-item{padding:var(--fold-space-md) var(--fold-space-md);font-size:var(--fold-text-md)}.style-underline{border-bottom:1px solid var(--fold-color-border)}.style-underline .tab-bar-item{border-bottom:2px solid transparent;margin-bottom:-1px}.style-underline .tab-bar-item.is-active{color:var(--fold-color-text);border-bottom-color:var(--fold-color-primary)}.style-fill .tab-bar-item{border-radius:var(--fold-radius-sm);border:1px solid transparent}.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.style-fill .tab-bar-item:hover:not(.is-active){background:var(--fold-color-surface-hover);color:var(--fold-color-text)}.dir-vertical{flex-direction:column}.dir-vertical .tab-bar-item{flex:none;justify-content:flex-start;text-align:left;padding:var(--fold-space-sm) var(--fold-space-md);gap:var(--fold-space-sm);border-radius:var(--fold-radius-sm);font-size:var(--fold-text-sm);font-weight:500}.dir-vertical.style-underline{border-bottom:none;border-right:1px solid var(--fold-color-border)}.dir-vertical.style-underline .tab-bar-item{border-bottom:none;border-left:2px solid transparent;margin-bottom:0;margin-right:-1px}.dir-vertical.style-underline .tab-bar-item.is-active{border-left-color:var(--fold-color-primary)}.dir-vertical.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.is-collapsed .tab-bar-item{position:relative;flex:0 0 auto;gap:0}.is-collapsed .tab-bar-item:not(.is-active) .tab-bar-badge{display:none}.is-collapsed .tab-bar-item.is-active{flex:1 1 auto;min-width:0;gap:var(--fold-space-sm)}.is-collapsed .tab-bar-item.is-active .tab-bar-label{overflow:hidden;text-overflow:ellipsis}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{position:absolute;padding:var(--fold-space-xs) var(--fold-space-sm);border-radius:var(--fold-radius-sm);background:var(--fold-color-glass);border:1px solid var(--fold-color-glass-border);color:var(--fold-color-text);font-size:var(--fold-text-xs);font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;box-shadow:var(--fold-shadow-md);transition:opacity var(--fold-motion-fast);z-index:100}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{top:calc(100% + 6px);left:50%;transform:translate(-50%)}.dir-vertical.is-collapsed .tab-bar-item:hover .tab-bar-icon~.tab-bar-label,.dir-vertical.is-collapsed .tab-bar-item:focus-visible .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):hover .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):focus-visible .tab-bar-icon~.tab-bar-label{opacity:1}.dir-vertical.is-collapsed{align-items:center}.dir-vertical.is-collapsed .tab-bar-item,.dir-vertical.is-collapsed .tab-bar-item.is-active{justify-content:center;gap:0}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-badge{display:block;position:absolute;top:-2px;right:-2px;transform:scale(.85);transform-origin:top right;pointer-events:none}:host:has(.is-collapsed){overflow:visible}.tab-bar-icon{flex-shrink:0}.tab-bar-initial{display:grid;place-items:center;width:18px;height:18px;border-radius:var(--fold-radius-sm);font-size:11px;font-weight:700;line-height:1;text-transform:uppercase}.tab-bar-badge{flex-shrink:0;font-variant-numeric:tabular-nums}.tab-bar-item:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:-2px;border-radius:var(--fold-radius-sm)}\n"], dependencies: [{ kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }, { kind: "component", type: FoldBadgeComponent, selector: "fold-badge", inputs: ["content", "radius", "variant"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldTabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: "fold-tabs", standalone: true, exportAs: "foldTabs", imports: [FoldIconComponent, FoldBadgeComponent], host: { "[class.is-sticky]": "sticky()" }, template: "<div\n  class=\"tab-bar\"\n  role=\"tablist\"\n  [attr.aria-orientation]=\"\n    resolvedDirection() === 'vertical' ? 'vertical' : 'horizontal'\n  \"\n  [class.style-underline]=\"activeStyle() === 'underline'\"\n  [class.style-fill]=\"activeStyle() === 'fill'\"\n  [class.dir-vertical]=\"resolvedDirection() === 'vertical'\"\n  [class.size-comfortable]=\"size() === 'comfortable'\"\n  [class.is-collapsed]=\"collapsed()\"\n  [class.bg-surface]=\"background() === 'surface'\"\n  (keydown)=\"onKeydown($event)\"\n>\n  @for (tab of tabs(); track tab.key) {\n    <button\n      #tabBtn\n      type=\"button\"\n      role=\"tab\"\n      class=\"tab-bar-item\"\n      [id]=\"tabId(tab.key)\"\n      [class.is-active]=\"activeKey() === tab.key\"\n      [attr.aria-selected]=\"activeKey() === tab.key\"\n      [attr.aria-controls]=\"panelId(tab.key)\"\n      [tabindex]=\"activeKey() === tab.key ? 0 : -1\"\n      (click)=\"select(tab.key)\"\n    >\n      @if (tab.icon; as ic) {\n        <fold-icon class=\"tab-bar-icon\" [name]=\"ic\" size=\"sm\" />\n      } @else if (collapsed()) {\n        <span class=\"tab-bar-icon tab-bar-initial\" aria-hidden=\"true\">{{\n          tab.label.charAt(0)\n        }}</span>\n      }\n      <span class=\"tab-bar-label\">{{ tab.label }}</span>\n      @if (tab.badge !== undefined && tab.badge !== null) {\n        <fold-badge\n          class=\"tab-bar-badge\"\n          [content]=\"tab.badge + ''\"\n          [variant]=\"activeKey() === tab.key ? 'accent' : 'neutral'\"\n        />\n      }\n    </button>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;width:100%;max-width:100%;overflow:hidden}:host(.is-sticky){position:sticky;top:0;z-index:2}:host:has(.tab-bar:not(.dir-vertical):not(.is-collapsed)){overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;overscroll-behavior-x:contain}:host:has(.tab-bar:not(.dir-vertical):not(.is-collapsed)) .tab-bar{min-width:max-content;max-width:none}.tab-bar{flex:1;display:flex;max-width:100%;gap:2px;-webkit-user-select:none;user-select:none}.bg-surface{background:linear-gradient(var(--fold-color-bg-rail-tertiary),var(--fold-color-bg-rail-tertiary)),var(--fold-color-bg-page);padding:var(--fold-space-xs) var(--fold-space-sm) 0}.bg-surface.dir-vertical{padding:var(--fold-space-md) var(--fold-space-sm)}.tab-bar-item{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--fold-space-sm);padding:var(--fold-space-sm) var(--fold-space-sm);background:none;border:none;color:var(--fold-color-text-muted);font-family:inherit;font-size:10px;font-weight:600;cursor:pointer;text-align:center;text-decoration:none;transition:color .1s ease,background .1s ease,border-color .1s ease;white-space:nowrap}.tab-bar-item:hover{color:var(--fold-color-text-secondary)}.tab-bar-item.is-disabled{opacity:.5;cursor:default;pointer-events:none}.size-comfortable .tab-bar-item{flex:0 1 auto;gap:var(--fold-space-sm);padding:var(--fold-space-md) var(--fold-space-lg);font-size:var(--fold-text-sm)}.dir-vertical.size-comfortable .tab-bar-item{padding:var(--fold-space-md) var(--fold-space-md);font-size:var(--fold-text-md)}.style-underline{border-bottom:1px solid var(--fold-color-border)}.style-underline .tab-bar-item{border-bottom:2px solid transparent;margin-bottom:-1px}.style-underline .tab-bar-item.is-active{color:var(--fold-color-text);border-bottom-color:var(--fold-color-primary)}.style-fill .tab-bar-item{border-radius:var(--fold-radius-sm);border:1px solid transparent}.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.style-fill .tab-bar-item:hover:not(.is-active){background:var(--fold-color-surface-hover);color:var(--fold-color-text)}.dir-vertical{flex-direction:column}.dir-vertical .tab-bar-item{flex:none;justify-content:flex-start;text-align:left;padding:var(--fold-space-sm) var(--fold-space-md);gap:var(--fold-space-sm);border-radius:var(--fold-radius-sm);font-size:var(--fold-text-sm);font-weight:500}.dir-vertical.style-underline{border-bottom:none;border-right:1px solid var(--fold-color-border)}.dir-vertical.style-underline .tab-bar-item{border-bottom:none;border-left:2px solid transparent;margin-bottom:0;margin-right:-1px}.dir-vertical.style-underline .tab-bar-item.is-active{border-left-color:var(--fold-color-primary)}.dir-vertical.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.is-collapsed .tab-bar-item{position:relative;flex:0 0 auto;gap:0}.is-collapsed .tab-bar-item:not(.is-active) .tab-bar-badge{display:none}.is-collapsed .tab-bar-item.is-active{flex:1 1 auto;min-width:0;gap:var(--fold-space-sm)}.is-collapsed .tab-bar-item.is-active .tab-bar-label{overflow:hidden;text-overflow:ellipsis}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{position:absolute;padding:var(--fold-space-xs) var(--fold-space-sm);border-radius:var(--fold-radius-sm);background:var(--fold-color-glass);border:1px solid var(--fold-color-glass-border);color:var(--fold-color-text);font-size:var(--fold-text-xs);font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;box-shadow:var(--fold-shadow-md);transition:opacity var(--fold-motion-fast);z-index:100}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{top:calc(100% + 6px);left:50%;transform:translate(-50%)}.dir-vertical.is-collapsed .tab-bar-item:hover .tab-bar-icon~.tab-bar-label,.dir-vertical.is-collapsed .tab-bar-item:focus-visible .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):hover .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):focus-visible .tab-bar-icon~.tab-bar-label{opacity:1}.dir-vertical.is-collapsed{align-items:center}.dir-vertical.is-collapsed .tab-bar-item,.dir-vertical.is-collapsed .tab-bar-item.is-active{justify-content:center;gap:0}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-badge{display:block;position:absolute;top:-2px;right:-2px;transform:scale(.85);transform-origin:top right;pointer-events:none}:host:has(.is-collapsed){overflow:visible}.tab-bar-icon{flex-shrink:0}.tab-bar-initial{display:grid;place-items:center;width:18px;height:18px;border-radius:var(--fold-radius-sm);font-size:11px;font-weight:700;line-height:1;text-transform:uppercase}.tab-bar-badge{flex-shrink:0;font-variant-numeric:tabular-nums}.tab-bar-item:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:-2px;border-radius:var(--fold-radius-sm)}\n"] }]
+            args: [{ selector: "fold-tabs", standalone: true, exportAs: "foldTabs", imports: [FoldIconComponent, FoldBadgeComponent], host: { "[class.is-sticky]": "sticky()" }, template: "<div\n  class=\"tab-bar\"\n  role=\"tablist\"\n  [attr.aria-orientation]=\"\n    resolvedDirection() === 'vertical' ? 'vertical' : 'horizontal'\n  \"\n  [class.style-underline]=\"activeStyle() === 'underline'\"\n  [class.style-fill]=\"activeStyle() === 'fill'\"\n  [class.dir-vertical]=\"resolvedDirection() === 'vertical'\"\n  [class.size-comfortable]=\"size() === 'comfortable'\"\n  [class.is-collapsed]=\"collapsed()\"\n  [class.bg-surface]=\"background() === 'surface'\"\n  (keydown)=\"onKeydown($event)\"\n>\n  @for (tab of tabs(); track tab.key) {\n    <button\n      #tabBtn\n      type=\"button\"\n      role=\"tab\"\n      class=\"tab-bar-item\"\n      [id]=\"tabId(tab.key)\"\n      [class.is-active]=\"activeKey() === tab.key\"\n      [attr.aria-selected]=\"activeKey() === tab.key\"\n      [attr.aria-controls]=\"panelId(tab.key)\"\n      [tabindex]=\"activeKey() === tab.key ? 0 : -1\"\n      (click)=\"select(tab.key)\"\n    >\n      @if (tab.icon; as ic) {\n        <fold-icon class=\"tab-bar-icon\" [name]=\"ic\" size=\"sm\" />\n      } @else if (collapsed()) {\n        <span class=\"tab-bar-icon tab-bar-initial\" aria-hidden=\"true\">{{\n          tab.label.charAt(0)\n        }}</span>\n      }\n      <span class=\"tab-bar-label\">{{ tab.label }}</span>\n      @if (tab.badge !== undefined && tab.badge !== null) {\n        <fold-badge\n          class=\"tab-bar-badge\"\n          [content]=\"tab.badge + ''\"\n          [variant]=\"activeKey() === tab.key ? 'accent' : 'neutral'\"\n        />\n      }\n    </button>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;width:100%;max-width:100%;overflow:hidden}:host(.is-sticky){position:sticky;top:0;z-index:2}:host:has(.tab-bar:not(.dir-vertical):not(.is-collapsed)){overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;overscroll-behavior-x:contain}:host:has(.tab-bar:not(.dir-vertical):not(.is-collapsed)) .tab-bar{min-width:max-content;max-width:none}.tab-bar{flex:1;display:flex;max-width:100%;gap:2px;-webkit-user-select:none;user-select:none}.bg-surface{background:linear-gradient(var(--fold-color-bg-rail-tertiary),var(--fold-color-bg-rail-tertiary)),var(--fold-color-bg-page);padding:var(--fold-space-xs) var(--fold-space-sm) 0}.bg-surface.dir-vertical{padding:var(--fold-space-md) var(--fold-space-sm)}.tab-bar-item{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--fold-space-sm);padding:var(--fold-space-sm) var(--fold-space-sm);background:none;border:none;color:var(--fold-color-text-muted);font-family:inherit;font-size:10px;font-weight:600;line-height:1;cursor:pointer;text-align:center;text-decoration:none;transition:color .1s ease,background .1s ease,border-color .1s ease;white-space:nowrap}.tab-bar-item:hover{color:var(--fold-color-text-secondary)}.tab-bar-item.is-disabled{opacity:.5;cursor:default;pointer-events:none}.size-comfortable .tab-bar-item{flex:0 1 auto;gap:var(--fold-space-sm);padding:var(--fold-space-md) var(--fold-space-lg);font-size:var(--fold-text-sm)}.dir-vertical.size-comfortable .tab-bar-item{padding:var(--fold-space-md) var(--fold-space-md);font-size:var(--fold-text-md)}.style-underline{border-bottom:1px solid var(--fold-color-border)}.style-underline .tab-bar-item{border-bottom:2px solid transparent;margin-bottom:-1px}.style-underline .tab-bar-item.is-active{color:var(--fold-color-text);border-bottom-color:var(--fold-color-primary)}.style-fill .tab-bar-item{border-radius:var(--fold-radius-sm);border:1px solid transparent}.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.style-fill .tab-bar-item:hover:not(.is-active){background:var(--fold-color-surface-hover);color:var(--fold-color-text)}.dir-vertical{flex-direction:column}.dir-vertical .tab-bar-item{flex:none;justify-content:flex-start;text-align:left;padding:var(--fold-space-sm) var(--fold-space-md);gap:var(--fold-space-sm);border-radius:var(--fold-radius-sm);font-size:var(--fold-text-sm);font-weight:500}.dir-vertical.style-underline{border-bottom:none;border-right:1px solid var(--fold-color-border)}.dir-vertical.style-underline .tab-bar-item{border-bottom:none;border-left:2px solid transparent;margin-bottom:0;margin-right:-1px}.dir-vertical.style-underline .tab-bar-item.is-active{border-left-color:var(--fold-color-primary)}.dir-vertical.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.is-collapsed .tab-bar-item{position:relative;flex:0 0 auto;gap:0}.is-collapsed .tab-bar-item:not(.is-active) .tab-bar-badge{display:none}.is-collapsed .tab-bar-item.is-active{flex:1 1 auto;min-width:0;gap:var(--fold-space-sm)}.is-collapsed .tab-bar-item.is-active .tab-bar-label{overflow:hidden;text-overflow:ellipsis}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{position:absolute;padding:var(--fold-space-xs) var(--fold-space-sm);border-radius:var(--fold-radius-sm);background:var(--fold-color-glass);border:1px solid var(--fold-color-glass-border);color:var(--fold-color-text);font-size:var(--fold-text-xs);font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;box-shadow:var(--fold-shadow-md);transition:opacity var(--fold-motion-fast);z-index:100}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{top:calc(100% + 6px);left:50%;transform:translate(-50%)}.dir-vertical.is-collapsed .tab-bar-item:hover .tab-bar-icon~.tab-bar-label,.dir-vertical.is-collapsed .tab-bar-item:focus-visible .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):hover .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):focus-visible .tab-bar-icon~.tab-bar-label{opacity:1}.dir-vertical.is-collapsed{align-items:center}.dir-vertical.is-collapsed .tab-bar-item,.dir-vertical.is-collapsed .tab-bar-item.is-active{justify-content:center;gap:0}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-badge{display:block;position:absolute;top:-2px;right:-2px;transform:scale(.85);transform-origin:top right;pointer-events:none}:host:has(.is-collapsed){overflow:visible}.tab-bar-icon{flex-shrink:0}.tab-bar-initial{display:grid;place-items:center;width:18px;height:18px;border-radius:var(--fold-radius-sm);font-size:11px;font-weight:700;line-height:1;text-transform:uppercase}.tab-bar-badge{flex-shrink:0;font-variant-numeric:tabular-nums}.tab-bar-item:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:-2px;border-radius:var(--fold-radius-sm)}\n"] }]
         }], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], activeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeKey", required: true }] }, { type: i0.Output, args: ["activeKeyChange"] }], activeStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeStyle", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], tabButtons: [{ type: i0.ViewChildren, args: ["tabBtn", { isSignal: true }] }] } });
 
 /**
@@ -11872,10 +11872,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * Mounts an imperatively-opened panel component inside the host: creates it with
  * the descriptor's injector (which provides its `FoldPanelRef`) and pushes the typed
  * `data` in via `setInput`. The component owns its own header/body/footer.
+ *
+ * ## The mounted host takes `display: contents`
+ *
+ * Without it the component's host element is a **single** flex child of the
+ * panel column, so a projected `fold-panel-footer` is a grandchild — and its
+ * `flex: none` ("stays pinned while the body scrolls") applied to nothing. The
+ * footer scrolled away with the body and the panel's `overflow: hidden` clipped
+ * it. Every consumer had to rediscover that its component must itself be a
+ * full-height flex column; in one app, eleven panels out of twenty had, and the
+ * nine that had not were quietly broken.
+ *
+ * `display: contents` removes that intermediate box, so the component's header,
+ * body and footer become the panel column's **real** children and the chrome's
+ * layout applies to them as documented.
+ *
+ * ⚠️ A box that isn't there paints nothing: a panel component that draws on its
+ * own `:host` (background, border, padding) must move that onto an element
+ * inside its template. Layout-only `:host` rules — the common case — simply
+ * become redundant.
  */
 class FoldPanelComponentOutletDirective {
     descriptor = input.required({ ...(ngDevMode ? { debugName: "descriptor" } : /* istanbul ignore next */ {}), alias: "foldPanelComponentOutlet" });
     viewContainer = inject(ViewContainerRef);
+    renderer = inject(Renderer2);
     constructor() {
         effect(() => {
             const descriptor = this.descriptor();
@@ -11883,6 +11903,10 @@ class FoldPanelComponentOutletDirective {
             const ref = this.viewContainer.createComponent(descriptor.component, {
                 injector: descriptor.injector,
             });
+            // Via Renderer2 rather than `nativeElement.style` so this also runs where
+            // there is no DOM (SSR): the panel is rendered server-side like anything
+            // else, and a direct style write would throw there.
+            this.renderer.setStyle(ref.location.nativeElement, "display", "contents");
             if (descriptor.data !== undefined) {
                 ref.setInput("data", descriptor.data);
             }
@@ -12402,6 +12426,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 args: ["document:keydown.escape"]
             }] } });
 
+/**
+ * `<fold-panel-body>` — the **scrolling middle** of an imperative panel, between
+ * {@link FoldPanelHeaderComponent} and {@link FoldPanelFooterComponent}.
+ *
+ * ## Why this exists
+ *
+ * The chrome renders a `.panel-body` for a **template** panel, but a
+ * **component** panel is mounted bare: its host element becomes a single flex
+ * child of the panel column, and the component owns its own header/body/footer.
+ * That left every consumer to rediscover the same two rules — and the footer's
+ * documented `flex: none` promise ("it stays pinned while the body scrolls") to
+ * be silently false until they did. In one consuming app, eleven panels out of
+ * twenty had copied the block; the nine that had not scrolled their footer out
+ * of view, where the panel's `overflow: hidden` then clipped it.
+ *
+ * ## What it does, and the part that is easy to get wrong
+ *
+ * `flex: 1 1 auto` takes the space the header and footer leave; `overflow-y:
+ * auto` scrolls what does not fit. The third rule is the one hand-rolled copies
+ * miss: **`min-height: 0`**. A flex item's default minimum height is
+ * `min-content`, so without it a tall child *grows the box* instead of
+ * scrolling, pushing the footer past the panel's bottom edge — the exact
+ * failure this component prevents.
+ *
+ * It also lays its children out in a column with the standard gap, so a panel
+ * stops setting a margin on every field. That column is a **grid**, not a flex
+ * column, for a reason worth stating: in a flex column every child may shrink,
+ * and a child whose `overflow` is not `visible` has an automatic minimum size
+ * of **zero** — it is crushed to its borders rather than allowed to overflow.
+ * A `fold-danger-zone` (rounded corners, so `overflow: hidden`) measured 2px in
+ * a full panel: a destructive-action block erased, with almost no overflow left
+ * to scroll to either. `grid-auto-rows: max-content` sizes each row to its
+ * content and lets the box overflow, which is what a scrolling column is for.
+ *
+ * ```html
+ * <fold-panel-header title="Réglage" />
+ * <fold-panel-body>
+ *   <fold-input label="Nom" />
+ *   <fold-danger-zone title="Supprimer" actionLabel="Supprimer" />
+ * </fold-panel-body>
+ * <fold-panel-footer>
+ *   <button foldButton emphasis="outline" intent="neutral">Annuler</button>
+ *   <button foldButton>Enregistrer</button>
+ * </fold-panel-footer>
+ * ```
+ *
+ * @selector `fold-panel-body`
+ */
+class FoldPanelBodyComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldPanelBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: FoldPanelBodyComponent, isStandalone: true, selector: "fold-panel-body", ngImport: i0, template: "<ng-content />", isInline: true, styles: [":host{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:max-content;align-content:start;flex:1 1 auto;gap:var(--fold-space-md);min-height:0;overflow-y:auto;padding:var(--fold-space-lg)}@container (max-width: 640px){:host{padding:var(--fold-space-md)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldPanelBodyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "fold-panel-body", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content />", styles: [":host{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:max-content;align-content:start;flex:1 1 auto;gap:var(--fold-space-md);min-height:0;overflow-y:auto;padding:var(--fold-space-lg)}@container (max-width: 640px){:host{padding:var(--fold-space-md)}}\n"] }]
+        }] });
+
 /**
  * `<fold-panel-footer>` — the action bar that pairs with {@link
  * FoldPanelHeaderComponent} at the bottom of an imperative panel (or a future
@@ -13257,5 +13338,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { FOLD_AUTO_PALETTES, FOLD_BLUR_TOKENS, FOLD_BUILTIN_ICONS, FOLD_BUILTIN_ICON_CATEGORIES, FOLD_CALENDAR_DEFAULT_LABELS, FOLD_CALENDAR_FORMATS, FOLD_CALENDAR_LABELS, FOLD_COMMON_DEFAULT_LABELS, FOLD_COMMON_LABELS, FOLD_DATA_TABLE_DEFAULT_LABELS, FOLD_DATA_TABLE_LABELS, FOLD_DEFAULT_WEEKEND_DAYS, FOLD_FALLBACK_WEEK_INFO, FOLD_INLINE_CONFIRM_DEFAULT_LABELS, FOLD_INLINE_CONFIRM_LABELS, FOLD_MINUTES_PER_DAY, FOLD_MOTION_TOKENS, FOLD_PAGINATOR_DEFAULT_LABELS, FOLD_PAGINATOR_LABELS, FOLD_PALETTE_DEFAULT, FOLD_PANEL_CLOSE_LABEL, FOLD_PANEL_DEFAULTS, FOLD_RADIUS_TOKENS, FOLD_SEMANTIC_COLOR_TOKENS, FOLD_SHADOW_TOKENS, FOLD_SPACE_TOKENS, FOLD_TEXT_TOKENS, FOLD_TOAST_CONFIG, FoldAppShellComponent, FoldAsideLayoutComponent, FoldAvatarComponent, FoldAvatarDetailComponent, FoldAvatarListComponent, FoldBackLinkComponent, FoldBadgeComponent, FoldBreadcrumbComponent, FoldButtonComponent, FoldButtonIconComponent, FoldCalendarAgendaComponent, FoldCalendarChromeDirective, FoldCalendarDayComponent, FoldCalendarDayDirective, FoldCalendarEventDirective, FoldCalendarHeadingDirective, FoldCalendarListComponent, FoldCalendarMonthComponent, FoldCalendarOverflowDirective, FoldCalendarSourceFilterComponent, FoldCalendarTimegridComponent, FoldCalendarTitleDirective, FoldCalendarToolbarComponent, FoldCalendarWeekComponent, FoldCalloutComponent, FoldCardComponent, FoldCheckboxComponent, FoldChoiceRowComponent, FoldContextCardComponent, FoldDangerZoneComponent, FoldDataTableCellDirective, FoldDataTableComponent, FoldDataTableRowCardDirective, FoldDateComponent, FoldDisclosureComponent, FoldDropdownComponent, FoldDropdownItemComponent, FoldElementTitleComponent, FoldElevatedDirective, FoldEmptyStateComponent, FoldFieldComponent, FoldFieldIdDirective, FoldFieldListComponent, FoldFileDropzoneComponent, FoldHeroCardComponent, FoldHeroSectionComponent, FoldIconComponent, FoldIconRegistry, FoldIdService, FoldInfoComponent, FoldInlineConfirmComponent, FoldInputComponent, FoldLinkComponent, FoldListboxComponent, FoldLoadingStateComponent, FoldMenuComponent, FoldMenuItemComponent, FoldMenuSectionComponent, FoldMenuSeparatorComponent, FoldMultiselectComponent, FoldNavLauncherComponent, FoldNavLayoutComponent, FoldNavTileComponent, FoldNumberInputComponent, FoldOptgroupComponent, FoldOptionComponent, FoldPageLayoutComponent, FoldPageSectionComponent, FoldPageTitleDirective, FoldPaginatorComponent, FoldPaletteRegistry, FoldPanelComponentOutletDirective, FoldPanelFooterComponent, FoldPanelHeaderComponent, FoldPanelHostComponent, FoldPanelHostService, FoldPanelRef, FoldPanelToggle, FoldPasswordFieldComponent, FoldPopoverComponent, FoldPopoverTriggerDirective, FoldRangeSliderComponent, FoldRepeatPressDirective, FoldScrollRegionDirective, FoldSearchComponent, FoldSelectComponent, FoldSliderComponent, FoldSpinnerComponent, FoldStatusBadgeComponent, FoldStickyColumnDirective, FoldSurfaceDirective, FoldTabPanelComponent, FoldTabsComponent, FoldTextareaComponent, FoldTimeComponent, FoldTimelineComponent, FoldToastComponent, FoldToastContainerComponent, FoldToastService, FoldToggleIconComponent, FoldViewNavComponent, FoldViewToggleComponent, ScrollRegionRegistry, autoUpdate, computePlacement, foldAddDays, foldAddMinutes, foldAddMonths, foldBlurVar, foldBuildAgenda, foldBuildDay, foldBuildMonthGrid, foldBuildTimeGrid, foldBuildWeek, foldCalendarNextFocus, foldCardBandChrome, foldColorProperty, foldColorVar, foldCountActionable, foldDaysBetween, foldDefaultPasswordRules, foldEndOfMonth, foldEventsInRange, foldEventsOnDay, foldFilterBySource, foldFromMinutes, foldFromNativeDate, foldFromTemporal, foldHashSeed, foldIsActionable, foldIsCalendarDate, foldIsCalendarTime, foldIsTimed, foldIsWeekend, foldIsoWeek, foldIsoWeekYear, foldLayOutOverlaps, foldLocaleWeekInfo, foldMotionVar, foldRadiusVar, foldRangeForView, foldRegexRule, foldResolvePalette, foldShadowVar, foldShiftDate, foldSpaceVar, foldStartOfMonth, foldStartOfWeek, foldTextVar, foldToMinutes, foldToNativeDate, foldToday, foldViewTitle, foldWeekdayIndex, foldWeekdayOf, isFoldSelectOptionGroup, observeElementWidth, provideFoldCalendarLabels, provideFoldCommonLabels, provideFoldDataTableLabels, provideFoldIcons, provideFoldInlineConfirmLabels, provideFoldPaginatorLabels, provideFoldPalette, provideFoldPanelDefaults, provideFoldPanelLabels, provideFoldToasts };
+export { FOLD_AUTO_PALETTES, FOLD_BLUR_TOKENS, FOLD_BUILTIN_ICONS, FOLD_BUILTIN_ICON_CATEGORIES, FOLD_CALENDAR_DEFAULT_LABELS, FOLD_CALENDAR_FORMATS, FOLD_CALENDAR_LABELS, FOLD_COMMON_DEFAULT_LABELS, FOLD_COMMON_LABELS, FOLD_DATA_TABLE_DEFAULT_LABELS, FOLD_DATA_TABLE_LABELS, FOLD_DEFAULT_WEEKEND_DAYS, FOLD_FALLBACK_WEEK_INFO, FOLD_INLINE_CONFIRM_DEFAULT_LABELS, FOLD_INLINE_CONFIRM_LABELS, FOLD_MINUTES_PER_DAY, FOLD_MOTION_TOKENS, FOLD_PAGINATOR_DEFAULT_LABELS, FOLD_PAGINATOR_LABELS, FOLD_PALETTE_DEFAULT, FOLD_PANEL_CLOSE_LABEL, FOLD_PANEL_DEFAULTS, FOLD_RADIUS_TOKENS, FOLD_SEMANTIC_COLOR_TOKENS, FOLD_SHADOW_TOKENS, FOLD_SPACE_TOKENS, FOLD_TEXT_TOKENS, FOLD_TOAST_CONFIG, FoldAppShellComponent, FoldAsideLayoutComponent, FoldAvatarComponent, FoldAvatarDetailComponent, FoldAvatarListComponent, FoldBackLinkComponent, FoldBadgeComponent, FoldBreadcrumbComponent, FoldButtonComponent, FoldButtonIconComponent, FoldCalendarAgendaComponent, FoldCalendarChromeDirective, FoldCalendarDayComponent, FoldCalendarDayDirective, FoldCalendarEventDirective, FoldCalendarHeadingDirective, FoldCalendarListComponent, FoldCalendarMonthComponent, FoldCalendarOverflowDirective, FoldCalendarSourceFilterComponent, FoldCalendarTimegridComponent, FoldCalendarTitleDirective, FoldCalendarToolbarComponent, FoldCalendarWeekComponent, FoldCalloutComponent, FoldCardComponent, FoldCheckboxComponent, FoldChoiceRowComponent, FoldContextCardComponent, FoldDangerZoneComponent, FoldDataTableCellDirective, FoldDataTableComponent, FoldDataTableRowCardDirective, FoldDateComponent, FoldDisclosureComponent, FoldDropdownComponent, FoldDropdownItemComponent, FoldElementTitleComponent, FoldElevatedDirective, FoldEmptyStateComponent, FoldFieldComponent, FoldFieldIdDirective, FoldFieldListComponent, FoldFileDropzoneComponent, FoldHeroCardComponent, FoldHeroSectionComponent, FoldIconComponent, FoldIconRegistry, FoldIdService, FoldInfoComponent, FoldInlineConfirmComponent, FoldInputComponent, FoldLinkComponent, FoldListboxComponent, FoldLoadingStateComponent, FoldMenuComponent, FoldMenuItemComponent, FoldMenuSectionComponent, FoldMenuSeparatorComponent, FoldMultiselectComponent, FoldNavLauncherComponent, FoldNavLayoutComponent, FoldNavTileComponent, FoldNumberInputComponent, FoldOptgroupComponent, FoldOptionComponent, FoldPageLayoutComponent, FoldPageSectionComponent, FoldPageTitleDirective, FoldPaginatorComponent, FoldPaletteRegistry, FoldPanelBodyComponent, FoldPanelComponentOutletDirective, FoldPanelFooterComponent, FoldPanelHeaderComponent, FoldPanelHostComponent, FoldPanelHostService, FoldPanelRef, FoldPanelToggle, FoldPasswordFieldComponent, FoldPopoverComponent, FoldPopoverTriggerDirective, FoldRangeSliderComponent, FoldRepeatPressDirective, FoldScrollRegionDirective, FoldSearchComponent, FoldSelectComponent, FoldSliderComponent, FoldSpinnerComponent, FoldStatusBadgeComponent, FoldStickyColumnDirective, FoldSurfaceDirective, FoldTabPanelComponent, FoldTabsComponent, FoldTextareaComponent, FoldTimeComponent, FoldTimelineComponent, FoldToastComponent, FoldToastContainerComponent, FoldToastService, FoldToggleIconComponent, FoldViewNavComponent, FoldViewToggleComponent, ScrollRegionRegistry, autoUpdate, computePlacement, foldAddDays, foldAddMinutes, foldAddMonths, foldBlurVar, foldBuildAgenda, foldBuildDay, foldBuildMonthGrid, foldBuildTimeGrid, foldBuildWeek, foldCalendarNextFocus, foldCardBandChrome, foldColorProperty, foldColorVar, foldCountActionable, foldDaysBetween, foldDefaultPasswordRules, foldEndOfMonth, foldEventsInRange, foldEventsOnDay, foldFilterBySource, foldFromMinutes, foldFromNativeDate, foldFromTemporal, foldHashSeed, foldIsActionable, foldIsCalendarDate, foldIsCalendarTime, foldIsTimed, foldIsWeekend, foldIsoWeek, foldIsoWeekYear, foldLayOutOverlaps, foldLocaleWeekInfo, foldMotionVar, foldRadiusVar, foldRangeForView, foldRegexRule, foldResolvePalette, foldShadowVar, foldShiftDate, foldSpaceVar, foldStartOfMonth, foldStartOfWeek, foldTextVar, foldToMinutes, foldToNativeDate, foldToday, foldViewTitle, foldWeekdayIndex, foldWeekdayOf, isFoldSelectOptionGroup, observeElementWidth, provideFoldCalendarLabels, provideFoldCommonLabels, provideFoldDataTableLabels, provideFoldIcons, provideFoldInlineConfirmLabels, provideFoldPaginatorLabels, provideFoldPalette, provideFoldPanelDefaults, provideFoldPanelLabels, provideFoldToasts };
 //# sourceMappingURL=fold-ng.mjs.map