@foxeltech/angular-ui 0.7.131 → 0.7.133

package/fesm2022/foxeltech-angular-ui.mjs

@@ -4147,7 +4147,7 @@ class DrawerComponent {
         return this.isExpanded ? 'expanded' : 'collapsed';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: DrawerComponent, deps: [{ token: i2$1.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: DrawerComponent, isStandalone: true, selector: "fx-ui-drawer", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, footerItems: { classPropertyName: "footerItems", publicName: "footerItems", isSignal: true, isRequired: false, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: false, isRequired: false, transformFunction: null }, logo: { classPropertyName: "logo", publicName: "logo", isSignal: false, isRequired: false, transformFunction: null }, logoText: { classPropertyName: "logoText", publicName: "logoText", isSignal: false, isRequired: false, transformFunction: null }, logoSubtext: { classPropertyName: "logoSubtext", publicName: "logoSubtext", isSignal: false, isRequired: false, transformFunction: null }, version: { classPropertyName: "version", publicName: "version", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { toggleExpanded: "toggleExpanded", itemClicked: "itemClicked" }, ngImport: i0, template: "<div class=\"drawer-host-wrapper\">\n  <a href=\"/\" class=\"drawer-brand\" [class.is-collapsed]=\"!isExpanded\">\n    <!-- Logo sits in its own sunken tile (reference `.sb-logo`, measured 16/09):\n         the tile is what carries the hover border, so the mark keeps its own\n         size and nothing shifts by a pixel when that border appears. -->\n    <span class=\"drawer-brand-logo\">\n      @if (logo) {\n        <img [src]=\"logo\" alt=\"Home\" class=\"drawer-brand-mark\" />\n      } @else {\n        <span class=\"drawer-brand-mark\"></span>\n      }\n    </span>\n    @if (isExpanded && (logoText || logoSubtext)) {\n      <span class=\"drawer-brand-copy\">\n        @if (logoText) {\n          <span class=\"drawer-brand-text\">{{ logoText }}</span>\n        }\n        @if (logoSubtext) {\n          <span class=\"drawer-brand-subtext\">{{ logoSubtext }}</span>\n        }\n      </span>\n    }\n  </a>\n  <div class=\"drawer-container\" [@drawerExpand]=\"getDrawerState()\">\n    <!-- Navigation Items -->\n    <nav class=\"drawer-nav\">\n      @for (item of items(); track item) {\n        <ng-container\n          *ngTemplateOutlet=\"drawerItem; context: { $implicit: item, level: 0 }\"\n        ></ng-container>\n      }\n    </nav>\n\n    <!-- V2: bottom section (Administration group, user block, \u2026) -->\n    <div class=\"mt-auto\">\n      @if (footerItems().length) {\n        <nav class=\"drawer-footer-nav\">\n          @for (item of footerItems(); track item) {\n            <ng-container\n              *ngTemplateOutlet=\"drawerItem; context: { $implicit: item, level: 0 }\"\n            ></ng-container>\n          }\n        </nav>\n      }\n      <ng-content select=\"[drawerFooter]\"></ng-content>\n    </div>\n\n    <!-- Version -->\n    @if (version) {\n      <div class=\"drawer-version\" [matTooltip]=\"!isExpanded ? version : ''\" matTooltipPosition=\"right\">\n        @if (isExpanded) {\n          <span>{{ version }}</span>\n        }\n        @if (!isExpanded) {\n          <span class=\"drawer-version-dot\"></span>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Floating Toggle Button on right border -->\n  <button\n    type=\"button\"\n    class=\"toggle-btn\"\n    [attr.aria-label]=\"isExpanded ? 'Collapse navigation' : 'Expand navigation'\"\n    [attr.aria-expanded]=\"isExpanded\"\n    (click)=\"toggleDrawer()\"\n    [matTooltip]=\"isExpanded ? 'Collapse' : 'Expand'\"\n    matTooltipClass=\"text-text-primary text-xs font-semibold\"\n    matTooltipPosition=\"right\"\n    >\n    <fx-ui-hero-icon\n      [icon]=\"isExpanded ? 'chevron-left' : 'chevron-right'\"\n      [size]=\"16\"\n      class=\"text-text-primary\"\n    ></fx-ui-hero-icon>\n  </button>\n</div>\n\n<!-- Recursive Template for Drawer Items -->\n<ng-template #drawerItem let-item let-level=\"level\">\n  @if (item.heading) {\n    @if (isExpanded) {\n      <div class=\"drawer-section-label\">{{ item.label }}</div>\n    } @else {\n      <div class=\"drawer-section-rule\"></div>\n    }\n  } @else {\n  <div class=\"drawer-item-wrapper\">\n    <!-- Item Button/Link -->\n    @if (item.route && !item.children) {\n      <a\n        [routerLink]=\"item.route\"\n        class=\"drawer-item\"\n        [class.is-collapsed]=\"!isExpanded\"\n        [class.active]=\"isActiveRoute(item.route)\"\n        [class.has-children]=\"item.children && item.children.length > 0\"\n        [style.paddingLeft.px]=\"isExpanded ? 8 + level * 16 : 16\"\n        [matTooltip]=\"!isExpanded ? item.label : ''\"\n        matTooltipPosition=\"right\"\n        matTooltipClass=\"text-text-primary text-xs font-semibold\"\n        (click)=\"onItemClick(item, $event)\"\n        >\n        <div class=\"item-content\">\n          @if (item.iconData) {\n            <lucide-icon\n              [img]=\"item.iconData\"\n              [size]=\"isExpanded ? 13 : 18\"\n              class=\"item-icon\"\n              [class.item-icon--solid]=\"item.iconSolid\"\n            />\n          } @else {\n            <fx-ui-hero-icon [icon]=\"item.icon\" [size]=\"isExpanded ? 13 : 18\" class=\"item-icon\"></fx-ui-hero-icon>\n          }\n          @if (isExpanded) {\n            <span class=\"item-label\">{{ item.label }}</span>\n          }\n        </div>\n      </a>\n    }\n\n    @if (!item.route || item.children) {\n      <button\n        type=\"button\"\n        class=\"drawer-item\"\n        [class.is-collapsed]=\"!isExpanded\"\n        [class.active]=\"isActiveRoute(item.route)\"\n        [class.has-children]=\"item.children && item.children.length > 0\"\n        [style.paddingLeft.px]=\"isExpanded ? 8 + level * 16 : 16\"\n        [matTooltip]=\"!isExpanded ? item.label : ''\"\n        matTooltipPosition=\"right\"\n        matTooltipClass=\"text-text-primary text-sm font-semibold\"\n        (click)=\"onItemClick(item, $event)\"\n        >\n        <div class=\"item-content\">\n          @if (item.iconData) {\n            <lucide-icon\n              [img]=\"item.iconData\"\n              [size]=\"isExpanded ? 13 : 18\"\n              class=\"item-icon\"\n              [class.item-icon--solid]=\"item.iconSolid\"\n            />\n          } @else {\n            <fx-ui-hero-icon [icon]=\"item.icon\" [size]=\"isExpanded ? 13 : 18\" class=\"item-icon\"></fx-ui-hero-icon>\n          }\n          @if (isExpanded) {\n            <span class=\"item-label\">{{ item.label }}</span>\n          }\n          @if (isExpanded && item.children && item.children.length > 0) {\n            <fx-ui-hero-icon\n              [icon]=\"'chevron-down'\"\n              [size]=\"16\"\n              class=\"chevron-icon\"\n              [class.rotated]=\"isAccordionExpanded(item.id)\"\n            ></fx-ui-hero-icon>\n          }\n        </div>\n      </button>\n    }\n\n    <!-- Accordion Children -->\n    @if (item.children && item.children.length > 0) {\n      <div\n        class=\"accordion-children\"\n        [@accordionExpand]=\"getAccordionState(item.id)\"\n        >\n        @for (child of item.children; track child) {\n          <ng-container\n            *ngTemplateOutlet=\"drawerItem; context: { $implicit: child, level: level + 1 }\"\n          ></ng-container>\n        }\n      </div>\n    }\n  </div>\n  }\n</ng-template>\n", styles: ["@charset \"UTF-8\";@layer properties;:host{display:block;height:100%}.drawer-host-wrapper{position:relative;display:flex;height:100%;flex-direction:column;background:rgb(var(--og-surface-sunken));border-right:1px solid rgb(var(--og-border-subtle))}.drawer-brand{display:flex;height:60px;flex-shrink:0;align-items:center;gap:10px;overflow:hidden;text-decoration-line:none;padding-left:16px;padding-right:8px;transition:padding .3s cubic-bezier(.4,0,.2,1);max-width:260px}.drawer-brand.is-collapsed{justify-content:center;padding-left:0;padding-right:0;max-width:70px}.drawer-brand-logo{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding:6px;border-radius:var(--og-radius-control);background:rgb(var(--og-surface-sunken));border:1px solid transparent;transition:padding .22s cubic-bezier(.4,0,.2,1),border-color .15s ease}.drawer-brand:hover .drawer-brand-logo{border-color:rgb(var(--og-border))}.drawer-brand.is-collapsed .drawer-brand-logo{padding:4px}.drawer-brand-mark{height:21px;width:auto;flex-shrink:0}.drawer-brand.is-collapsed .drawer-brand-mark{height:19px}.drawer-brand-copy{display:flex;min-width:0px;flex-direction:column;--tw-leading: var(--leading-tight, 1.25);line-height:var(--leading-tight, 1.25)}.drawer-brand-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--og-fs-lg);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgb(var(--text-primary));-webkit-user-select:none;user-select:none;font-family:var(--og-font-display);letter-spacing:-.015em;line-height:1}.drawer-brand-subtext{margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px;--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);-webkit-user-select:none;user-select:none;color:rgb(var(--og-text-muted));letter-spacing:.02em;line-height:1.2}.drawer-container{display:flex;min-height:0px;flex:1;flex-direction:column;overflow:hidden;padding-inline:calc(var(--spacing, .25rem) * 2);transition:width .3s cubic-bezier(.4,0,.2,1)}.toggle-btn{position:absolute;top:50%;z-index:50;display:flex;height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 6);--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;border-color:rgb(var(--border-default));background-color:rgb(var(--bg-primary));--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(var(--shadow-color) / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);right:-12px;transition:background-color .2s ease,box-shadow .2s ease}.toggle-btn:before{content:\"\";position:absolute;inset:-8px;border-radius:9999px}.toggle-btn:hover{background-color:rgb(var(--bg-primary-hover));--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(var(--shadow-color) / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(var(--shadow-color) / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.toggle-btn:active{background-color:rgb(var(--bg-primary-hover))}.toggle-btn:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgb(var(--primary))}.drawer-footer-nav{border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgb(var(--border-default));padding-inline:0px;padding-top:calc(var(--spacing, .25rem) * 2);padding-bottom:var(--spacing, .25rem)}.drawer-nav{flex:1;overflow-x:hidden;overflow-y:auto;padding-block:calc(var(--spacing, .25rem) * 2)}.drawer-nav::-webkit-scrollbar{width:calc(var(--spacing, .25rem) * 1.5)}.drawer-nav::-webkit-scrollbar-track{background-color:transparent}.drawer-nav::-webkit-scrollbar-thumb{border-radius:var(--og-radius-control);background-color:rgb(var(--border-default))}.drawer-nav::-webkit-scrollbar-thumb:hover{background-color:rgb(var(--text-placeholder))}.drawer-section-label{padding-inline:1rem;padding-top:calc(var(--spacing, .25rem) * 4);padding-bottom:var(--spacing, .25rem);font-size:10.5px;line-height:1.4;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgb(var(--og-text-faint));-webkit-user-select:none;user-select:none;letter-spacing:var(--og-tracking-label)}.drawer-section-rule{margin-inline:calc(var(--spacing, .25rem) * 3);margin-block:calc(var(--spacing, .25rem) * 3);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgb(var(--border-default))}.drawer-item-wrapper{position:relative}.drawer-item{position:relative;display:flex;width:100%;cursor:pointer;align-items:center;--tw-border-style: none;border-style:none;background-color:transparent;text-decoration-line:none;margin-top:1px;min-height:30px;padding:6px 8px;font-size:var(--og-fs-sm);color:rgb(var(--og-text-body));border-radius:var(--og-radius-control);transition:background-color .13s ease,color .13s ease}.drawer-item:hover{color:rgb(var(--og-text));background:rgb(var(--og-text))}@supports (color: color-mix(in lab,red,red)){.drawer-item:hover{background:color-mix(in srgb,rgb(var(--og-text)) 8%,transparent)}}.drawer-item.active{color:rgb(var(--og-text));font-weight:500;background:rgb(var(--og-text));box-shadow:inset 0 0 0 1px rgb(var(--og-text))}@supports (color: color-mix(in lab,red,red)){.drawer-item.active{background:color-mix(in srgb,rgb(var(--og-text)) 6%,transparent)}}@supports (color: color-mix(in lab,red,red)){.drawer-item.active{box-shadow:inset 0 0 0 1px color-mix(in srgb,rgb(var(--og-text)) 7%,transparent)}}.drawer-item.active:hover{background:rgb(var(--og-text))}@supports (color: color-mix(in lab,red,red)){.drawer-item.active:hover{background:color-mix(in srgb,rgb(var(--og-text)) 9%,transparent)}}.drawer-item:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgb(var(--primary))}.drawer-item{-webkit-tap-highlight-color:transparent;--tw-outline-style: none;outline-style:none}.item-content{display:flex;width:100%;align-items:center;gap:9px;overflow:hidden}.drawer-item.is-collapsed .item-icon{width:18px;height:18px;margin-right:0}.item-icon--solid{fill:currentColor}:host ::ng-deep .item-icon--solid svg,:host ::ng-deep .item-icon--solid path,:host ::ng-deep .item-icon--solid polygon{fill:currentColor}.item-icon{flex-shrink:0;color:inherit;width:13px;height:13px;margin-right:5px}.item-label{flex:1;overflow:hidden;text-align:left;--tw-leading: 18px;line-height:18px;text-overflow:ellipsis;white-space:nowrap;font-size:inherit}.chevron-icon{margin-left:auto;flex-shrink:0;color:rgb(var(--text-primary));transition:transform .3s cubic-bezier(.4,0,.2,1)}.chevron-icon.rotated{transform:rotate(180deg)}.accordion-children{overflow:hidden}.drawer-version{display:flex;align-items:center;justify-content:center;border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgb(var(--border-default));padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3);font-size:11px;color:rgb(var(--text-placeholder));-webkit-user-select:none;user-select:none;font-family:var(--og-font-mono)}.drawer-version-dot{display:block;height:calc(var(--spacing, .25rem) * 1.5);width:calc(var(--spacing, .25rem) * 1.5);border-radius:calc(infinity * 1px);background-color:rgb(var(--text-placeholder))}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-translate-x{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-y{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-z{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-font-weight: initial;--tw-translate-x: 0;--tw-translate-y: 0;--tw-translate-z: 0;--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-outline-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }, { kind: "ngmodule", type: FxLucideModule }, { kind: "component", type: i1$4.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], animations: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: DrawerComponent, isStandalone: true, selector: "fx-ui-drawer", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, footerItems: { classPropertyName: "footerItems", publicName: "footerItems", isSignal: true, isRequired: false, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: false, isRequired: false, transformFunction: null }, logo: { classPropertyName: "logo", publicName: "logo", isSignal: false, isRequired: false, transformFunction: null }, logoText: { classPropertyName: "logoText", publicName: "logoText", isSignal: false, isRequired: false, transformFunction: null }, logoSubtext: { classPropertyName: "logoSubtext", publicName: "logoSubtext", isSignal: false, isRequired: false, transformFunction: null }, version: { classPropertyName: "version", publicName: "version", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { toggleExpanded: "toggleExpanded", itemClicked: "itemClicked" }, ngImport: i0, template: "<div class=\"drawer-host-wrapper\">\n  <a href=\"/\" class=\"drawer-brand\" [class.is-collapsed]=\"!isExpanded\">\n    <!-- Logo sits in its own sunken tile (reference `.sb-logo`, measured 16/09):\n         the tile is what carries the hover border, so the mark keeps its own\n         size and nothing shifts by a pixel when that border appears. -->\n    <span class=\"drawer-brand-logo\">\n      @if (logo) {\n        <img [src]=\"logo\" alt=\"Home\" class=\"drawer-brand-mark\" />\n      } @else {\n        <span class=\"drawer-brand-mark\"></span>\n      }\n    </span>\n    @if (isExpanded && (logoText || logoSubtext)) {\n      <span class=\"drawer-brand-copy\">\n        @if (logoText) {\n          <span class=\"drawer-brand-text\">{{ logoText }}</span>\n        }\n        @if (logoSubtext) {\n          <span class=\"drawer-brand-subtext\">{{ logoSubtext }}</span>\n        }\n      </span>\n    }\n  </a>\n  <div class=\"drawer-container\" [@drawerExpand]=\"getDrawerState()\">\n    <!-- Navigation Items -->\n    <nav class=\"drawer-nav\">\n      @for (item of items(); track item) {\n        <ng-container\n          *ngTemplateOutlet=\"drawerItem; context: { $implicit: item, level: 0 }\"\n        ></ng-container>\n      }\n    </nav>\n\n    <!-- V2: bottom section (Administration group, user block, \u2026) -->\n    <div class=\"mt-auto\">\n      @if (footerItems().length) {\n        <nav class=\"drawer-footer-nav\">\n          @for (item of footerItems(); track item) {\n            <ng-container\n              *ngTemplateOutlet=\"drawerItem; context: { $implicit: item, level: 0 }\"\n            ></ng-container>\n          }\n        </nav>\n      }\n      <ng-content select=\"[drawerFooter]\"></ng-content>\n    </div>\n\n    <!-- Version -->\n    @if (version) {\n      <div class=\"drawer-version\" [matTooltip]=\"!isExpanded ? version : ''\" matTooltipPosition=\"right\">\n        @if (isExpanded) {\n          <span>{{ version }}</span>\n        }\n        @if (!isExpanded) {\n          <span class=\"drawer-version-dot\"></span>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Floating Toggle Button on right border -->\n  <button\n    type=\"button\"\n    class=\"toggle-btn\"\n    [attr.aria-label]=\"isExpanded ? 'Collapse navigation' : 'Expand navigation'\"\n    [attr.aria-expanded]=\"isExpanded\"\n    (click)=\"toggleDrawer()\"\n    [matTooltip]=\"isExpanded ? 'Collapse' : 'Expand'\"\n    matTooltipClass=\"text-text-primary text-xs font-semibold\"\n    matTooltipPosition=\"right\"\n    >\n    <fx-ui-hero-icon\n      [icon]=\"isExpanded ? 'chevron-left' : 'chevron-right'\"\n      [size]=\"16\"\n      class=\"text-text-primary\"\n    ></fx-ui-hero-icon>\n  </button>\n</div>\n\n<!-- Recursive Template for Drawer Items -->\n<ng-template #drawerItem let-item let-level=\"level\">\n  @if (item.heading) {\n    @if (isExpanded) {\n      <div class=\"drawer-section-label\">{{ item.label }}</div>\n    } @else {\n      <div class=\"drawer-section-rule\"></div>\n    }\n  } @else {\n  <div class=\"drawer-item-wrapper\">\n    <!-- Item Button/Link -->\n    @if (item.route && !item.children) {\n      <a\n        [routerLink]=\"item.route\"\n        class=\"drawer-item\"\n        [class.is-collapsed]=\"!isExpanded\"\n        [class.active]=\"isActiveRoute(item.route)\"\n        [class.has-children]=\"item.children && item.children.length > 0\"\n        [style.paddingLeft.px]=\"isExpanded ? 8 + level * 16 : 16\"\n        [matTooltip]=\"!isExpanded ? item.label : ''\"\n        matTooltipPosition=\"right\"\n        matTooltipClass=\"text-text-primary text-xs font-semibold\"\n        (click)=\"onItemClick(item, $event)\"\n        >\n        <div class=\"item-content\">\n          @if (item.iconData) {\n            <lucide-icon\n              [img]=\"item.iconData\"\n              [size]=\"isExpanded ? 15 : 20\"\n              class=\"item-icon\"\n              [class.item-icon--solid]=\"item.iconSolid\"\n            />\n          } @else {\n            <fx-ui-hero-icon [icon]=\"item.icon\" [size]=\"isExpanded ? 15 : 20\" class=\"item-icon\"></fx-ui-hero-icon>\n          }\n          @if (isExpanded) {\n            <span class=\"item-label\">{{ item.label }}</span>\n          }\n        </div>\n      </a>\n    }\n\n    @if (!item.route || item.children) {\n      <button\n        type=\"button\"\n        class=\"drawer-item\"\n        [class.is-collapsed]=\"!isExpanded\"\n        [class.active]=\"isActiveRoute(item.route)\"\n        [class.has-children]=\"item.children && item.children.length > 0\"\n        [style.paddingLeft.px]=\"isExpanded ? 8 + level * 16 : 16\"\n        [matTooltip]=\"!isExpanded ? item.label : ''\"\n        matTooltipPosition=\"right\"\n        matTooltipClass=\"text-text-primary text-sm font-semibold\"\n        (click)=\"onItemClick(item, $event)\"\n        >\n        <div class=\"item-content\">\n          @if (item.iconData) {\n            <lucide-icon\n              [img]=\"item.iconData\"\n              [size]=\"isExpanded ? 15 : 20\"\n              class=\"item-icon\"\n              [class.item-icon--solid]=\"item.iconSolid\"\n            />\n          } @else {\n            <fx-ui-hero-icon [icon]=\"item.icon\" [size]=\"isExpanded ? 15 : 20\" class=\"item-icon\"></fx-ui-hero-icon>\n          }\n          @if (isExpanded) {\n            <span class=\"item-label\">{{ item.label }}</span>\n          }\n          @if (isExpanded && item.children && item.children.length > 0) {\n            <fx-ui-hero-icon\n              [icon]=\"'chevron-down'\"\n              [size]=\"16\"\n              class=\"chevron-icon\"\n              [class.rotated]=\"isAccordionExpanded(item.id)\"\n            ></fx-ui-hero-icon>\n          }\n        </div>\n      </button>\n    }\n\n    <!-- Accordion Children -->\n    @if (item.children && item.children.length > 0) {\n      <div\n        class=\"accordion-children\"\n        [@accordionExpand]=\"getAccordionState(item.id)\"\n        >\n        @for (child of item.children; track child) {\n          <ng-container\n            *ngTemplateOutlet=\"drawerItem; context: { $implicit: child, level: level + 1 }\"\n          ></ng-container>\n        }\n      </div>\n    }\n  </div>\n  }\n</ng-template>\n", styles: ["@charset \"UTF-8\";@layer properties;:host{display:block;height:100%}.drawer-host-wrapper{position:relative;display:flex;height:100%;flex-direction:column;background:rgb(var(--og-surface-sunken));border-right:1px solid rgb(var(--og-border-subtle))}.drawer-brand{display:flex;height:60px;flex-shrink:0;align-items:center;gap:10px;overflow:hidden;text-decoration-line:none;padding-left:16px;padding-right:8px;transition:padding .3s cubic-bezier(.4,0,.2,1);max-width:260px}.drawer-brand.is-collapsed{justify-content:center;padding-left:0;padding-right:0;max-width:70px}.drawer-brand-logo{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding:6px;border-radius:var(--og-radius-control);background:rgb(var(--og-surface-sunken));border:1px solid transparent;transition:padding .22s cubic-bezier(.4,0,.2,1),border-color .15s ease}.drawer-brand:hover .drawer-brand-logo{border-color:rgb(var(--og-border))}.drawer-brand.is-collapsed .drawer-brand-logo{padding:4px}.drawer-brand-mark{height:21px;width:auto;flex-shrink:0}.drawer-brand.is-collapsed .drawer-brand-mark{height:19px}.drawer-brand-copy{display:flex;min-width:0px;flex-direction:column;--tw-leading: var(--leading-tight, 1.25);line-height:var(--leading-tight, 1.25)}.drawer-brand-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--og-fs-lg);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgb(var(--text-primary));-webkit-user-select:none;user-select:none;font-family:var(--og-font-display);letter-spacing:-.015em;line-height:1}.drawer-brand-subtext{margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px;--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);-webkit-user-select:none;user-select:none;color:rgb(var(--og-text-muted));letter-spacing:.02em;line-height:1.2}.drawer-container{display:flex;min-height:0px;flex:1;flex-direction:column;overflow:hidden;padding-inline:calc(var(--spacing, .25rem) * 2);transition:width .3s cubic-bezier(.4,0,.2,1)}.toggle-btn{position:absolute;top:50%;z-index:50;display:flex;height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 6);--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;border-color:rgb(var(--border-default));background-color:rgb(var(--bg-primary));--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(var(--shadow-color) / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);right:-12px;transition:background-color .2s ease,box-shadow .2s ease}.toggle-btn:before{content:\"\";position:absolute;inset:-8px;border-radius:9999px}.toggle-btn:hover{background-color:rgb(var(--bg-primary-hover));--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(var(--shadow-color) / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(var(--shadow-color) / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.toggle-btn:active{background-color:rgb(var(--bg-primary-hover))}.toggle-btn:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgb(var(--primary))}.drawer-footer-nav{border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgb(var(--border-default));padding-inline:0px;padding-top:calc(var(--spacing, .25rem) * 2);padding-bottom:var(--spacing, .25rem)}.drawer-nav{flex:1;overflow-x:hidden;overflow-y:auto;padding-block:calc(var(--spacing, .25rem) * 2)}.drawer-nav::-webkit-scrollbar{width:calc(var(--spacing, .25rem) * 1.5)}.drawer-nav::-webkit-scrollbar-track{background-color:transparent}.drawer-nav::-webkit-scrollbar-thumb{border-radius:var(--og-radius-control);background-color:rgb(var(--border-default))}.drawer-nav::-webkit-scrollbar-thumb:hover{background-color:rgb(var(--text-placeholder))}.drawer-section-label{padding-inline:1rem;padding-top:calc(var(--spacing, .25rem) * 4);padding-bottom:var(--spacing, .25rem);font-size:var(--og-fs-xs);line-height:1.4;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgb(var(--og-text-faint));-webkit-user-select:none;user-select:none;letter-spacing:var(--og-tracking-label)}.drawer-section-rule{margin-inline:calc(var(--spacing, .25rem) * 3);margin-block:calc(var(--spacing, .25rem) * 3);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgb(var(--border-default))}.drawer-item-wrapper{position:relative}.drawer-item{position:relative;display:flex;width:100%;cursor:pointer;align-items:center;--tw-border-style: none;border-style:none;background-color:transparent;text-decoration-line:none;margin-top:1px;min-height:34px;padding:7px 8px;font-size:14px;color:rgb(var(--og-text-body));border-radius:var(--og-radius-control);transition:background-color .13s ease,color .13s ease}.drawer-item:hover{color:rgb(var(--og-text));background:rgb(var(--og-text))}@supports (color: color-mix(in lab,red,red)){.drawer-item:hover{background:color-mix(in srgb,rgb(var(--og-text)) 8%,transparent)}}.drawer-item.active{color:rgb(var(--og-text));font-weight:500;background:rgb(var(--og-text));box-shadow:inset 0 0 0 1px rgb(var(--og-text))}@supports (color: color-mix(in lab,red,red)){.drawer-item.active{background:color-mix(in srgb,rgb(var(--og-text)) 6%,transparent)}}@supports (color: color-mix(in lab,red,red)){.drawer-item.active{box-shadow:inset 0 0 0 1px color-mix(in srgb,rgb(var(--og-text)) 7%,transparent)}}.drawer-item.active:hover{background:rgb(var(--og-text))}@supports (color: color-mix(in lab,red,red)){.drawer-item.active:hover{background:color-mix(in srgb,rgb(var(--og-text)) 9%,transparent)}}.drawer-item:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgb(var(--primary))}.drawer-item{-webkit-tap-highlight-color:transparent;--tw-outline-style: none;outline-style:none}.item-content{display:flex;width:100%;align-items:center;gap:9px;overflow:hidden}.drawer-item.is-collapsed .item-icon{width:20px;height:20px;margin-right:0}.item-icon--solid{fill:currentColor}:host ::ng-deep .item-icon--solid svg,:host ::ng-deep .item-icon--solid path,:host ::ng-deep .item-icon--solid polygon{fill:currentColor}.item-icon{flex-shrink:0;color:inherit;width:15px;height:15px;margin-right:6px}.item-label{flex:1;overflow:hidden;text-align:left;--tw-leading: 20px;line-height:20px;text-overflow:ellipsis;white-space:nowrap;font-size:inherit}.chevron-icon{margin-left:auto;flex-shrink:0;color:rgb(var(--text-primary));transition:transform .3s cubic-bezier(.4,0,.2,1)}.chevron-icon.rotated{transform:rotate(180deg)}.accordion-children{overflow:hidden}.drawer-version{display:flex;align-items:center;justify-content:center;border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgb(var(--border-default));padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3);font-size:12px;color:rgb(var(--text-placeholder));-webkit-user-select:none;user-select:none;font-family:var(--og-font-mono)}.drawer-version-dot{display:block;height:calc(var(--spacing, .25rem) * 1.5);width:calc(var(--spacing, .25rem) * 1.5);border-radius:calc(infinity * 1px);background-color:rgb(var(--text-placeholder))}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-translate-x{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-y{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-z{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-font-weight: initial;--tw-translate-x: 0;--tw-translate-y: 0;--tw-translate-z: 0;--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-outline-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }, { kind: "ngmodule", type: FxLucideModule }, { kind: "component", type: i1$4.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], animations: [
             trigger('drawerExpand', [
                 state('collapsed', style({ width: '70px' })),
                 state('expanded', style({ width: '260px' })),
@@ -4179,7 +4179,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
                         HeroIconComponent,
                         FxLucideModule,
                         RouterLink,
-                    ], template: "<div class=\"drawer-host-wrapper\">\n  <a href=\"/\" class=\"drawer-brand\" [class.is-collapsed]=\"!isExpanded\">\n    <!-- Logo sits in its own sunken tile (reference `.sb-logo`, measured 16/09):\n         the tile is what carries the hover border, so the mark keeps its own\n         size and nothing shifts by a pixel when that border appears. -->\n    <span class=\"drawer-brand-logo\">\n      @if (logo) {\n        <img [src]=\"logo\" alt=\"Home\" class=\"drawer-brand-mark\" />\n      } @else {\n        <span class=\"drawer-brand-mark\"></span>\n      }\n    </span>\n    @if (isExpanded && (logoText || logoSubtext)) {\n      <span class=\"drawer-brand-copy\">\n        @if (logoText) {\n          <span class=\"drawer-brand-text\">{{ logoText }}</span>\n        }\n        @if (logoSubtext) {\n          <span class=\"drawer-brand-subtext\">{{ logoSubtext }}</span>\n        }\n      </span>\n    }\n  </a>\n  <div class=\"drawer-container\" [@drawerExpand]=\"getDrawerState()\">\n    <!-- Navigation Items -->\n    <nav class=\"drawer-nav\">\n      @for (item of items(); track item) {\n        <ng-container\n          *ngTemplateOutlet=\"drawerItem; context: { $implicit: item, level: 0 }\"\n        ></ng-container>\n      }\n    </nav>\n\n    <!-- V2: bottom section (Administration group, user block, \u2026) -->\n    <div class=\"mt-auto\">\n      @if (footerItems().length) {\n        <nav class=\"drawer-footer-nav\">\n          @for (item of footerItems(); track item) {\n            <ng-container\n              *ngTemplateOutlet=\"drawerItem; context: { $implicit: item, level: 0 }\"\n            ></ng-container>\n          }\n        </nav>\n      }\n      <ng-content select=\"[drawerFooter]\"></ng-content>\n    </div>\n\n    <!-- Version -->\n    @if (version) {\n      <div class=\"drawer-version\" [matTooltip]=\"!isExpanded ? version : ''\" matTooltipPosition=\"right\">\n        @if (isExpanded) {\n          <span>{{ version }}</span>\n        }\n        @if (!isExpanded) {\n          <span class=\"drawer-version-dot\"></span>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Floating Toggle Button on right border -->\n  <button\n    type=\"button\"\n    class=\"toggle-btn\"\n    [attr.aria-label]=\"isExpanded ? 'Collapse navigation' : 'Expand navigation'\"\n    [attr.aria-expanded]=\"isExpanded\"\n    (click)=\"toggleDrawer()\"\n    [matTooltip]=\"isExpanded ? 'Collapse' : 'Expand'\"\n    matTooltipClass=\"text-text-primary text-xs font-semibold\"\n    matTooltipPosition=\"right\"\n    >\n    <fx-ui-hero-icon\n      [icon]=\"isExpanded ? 'chevron-left' : 'chevron-right'\"\n      [size]=\"16\"\n      class=\"text-text-primary\"\n    ></fx-ui-hero-icon>\n  </button>\n</div>\n\n<!-- Recursive Template for Drawer Items -->\n<ng-template #drawerItem let-item let-level=\"level\">\n  @if (item.heading) {\n    @if (isExpanded) {\n      <div class=\"drawer-section-label\">{{ item.label }}</div>\n    } @else {\n      <div class=\"drawer-section-rule\"></div>\n    }\n  } @else {\n  <div class=\"drawer-item-wrapper\">\n    <!-- Item Button/Link -->\n    @if (item.route && !item.children) {\n      <a\n        [routerLink]=\"item.route\"\n        class=\"drawer-item\"\n        [class.is-collapsed]=\"!isExpanded\"\n        [class.active]=\"isActiveRoute(item.route)\"\n        [class.has-children]=\"item.children && item.children.length > 0\"\n        [style.paddingLeft.px]=\"isExpanded ? 8 + level * 16 : 16\"\n        [matTooltip]=\"!isExpanded ? item.label : ''\"\n        matTooltipPosition=\"right\"\n        matTooltipClass=\"text-text-primary text-xs font-semibold\"\n        (click)=\"onItemClick(item, $event)\"\n        >\n        <div class=\"item-content\">\n          @if (item.iconData) {\n            <lucide-icon\n              [img]=\"item.iconData\"\n              [size]=\"isExpanded ? 13 : 18\"\n              class=\"item-icon\"\n              [class.item-icon--solid]=\"item.iconSolid\"\n            />\n          } @else {\n            <fx-ui-hero-icon [icon]=\"item.icon\" [size]=\"isExpanded ? 13 : 18\" class=\"item-icon\"></fx-ui-hero-icon>\n          }\n          @if (isExpanded) {\n            <span class=\"item-label\">{{ item.label }}</span>\n          }\n        </div>\n      </a>\n    }\n\n    @if (!item.route || item.children) {\n      <button\n        type=\"button\"\n        class=\"drawer-item\"\n        [class.is-collapsed]=\"!isExpanded\"\n        [class.active]=\"isActiveRoute(item.route)\"\n        [class.has-children]=\"item.children && item.children.length > 0\"\n        [style.paddingLeft.px]=\"isExpanded ? 8 + level * 16 : 16\"\n        [matTooltip]=\"!isExpanded ? item.label : ''\"\n        matTooltipPosition=\"right\"\n        matTooltipClass=\"text-text-primary text-sm font-semibold\"\n        (click)=\"onItemClick(item, $event)\"\n        >\n        <div class=\"item-content\">\n          @if (item.iconData) {\n            <lucide-icon\n              [img]=\"item.iconData\"\n              [size]=\"isExpanded ? 13 : 18\"\n              class=\"item-icon\"\n              [class.item-icon--solid]=\"item.iconSolid\"\n            />\n          } @else {\n            <fx-ui-hero-icon [icon]=\"item.icon\" [size]=\"isExpanded ? 13 : 18\" class=\"item-icon\"></fx-ui-hero-icon>\n          }\n          @if (isExpanded) {\n            <span class=\"item-label\">{{ item.label }}</span>\n          }\n          @if (isExpanded && item.children && item.children.length > 0) {\n            <fx-ui-hero-icon\n              [icon]=\"'chevron-down'\"\n              [size]=\"16\"\n              class=\"chevron-icon\"\n              [class.rotated]=\"isAccordionExpanded(item.id)\"\n            ></fx-ui-hero-icon>\n          }\n        </div>\n      </button>\n    }\n\n    <!-- Accordion Children -->\n    @if (item.children && item.children.length > 0) {\n      <div\n        class=\"accordion-children\"\n        [@accordionExpand]=\"getAccordionState(item.id)\"\n        >\n        @for (child of item.children; track child) {\n          <ng-container\n            *ngTemplateOutlet=\"drawerItem; context: { $implicit: child, level: level + 1 }\"\n          ></ng-container>\n        }\n      </div>\n    }\n  </div>\n  }\n</ng-template>\n", styles: ["@charset \"UTF-8\";@layer properties;:host{display:block;height:100%}.drawer-host-wrapper{position:relative;display:flex;height:100%;flex-direction:column;background:rgb(var(--og-surface-sunken));border-right:1px solid rgb(var(--og-border-subtle))}.drawer-brand{display:flex;height:60px;flex-shrink:0;align-items:center;gap:10px;overflow:hidden;text-decoration-line:none;padding-left:16px;padding-right:8px;transition:padding .3s cubic-bezier(.4,0,.2,1);max-width:260px}.drawer-brand.is-collapsed{justify-content:center;padding-left:0;padding-right:0;max-width:70px}.drawer-brand-logo{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding:6px;border-radius:var(--og-radius-control);background:rgb(var(--og-surface-sunken));border:1px solid transparent;transition:padding .22s cubic-bezier(.4,0,.2,1),border-color .15s ease}.drawer-brand:hover .drawer-brand-logo{border-color:rgb(var(--og-border))}.drawer-brand.is-collapsed .drawer-brand-logo{padding:4px}.drawer-brand-mark{height:21px;width:auto;flex-shrink:0}.drawer-brand.is-collapsed .drawer-brand-mark{height:19px}.drawer-brand-copy{display:flex;min-width:0px;flex-direction:column;--tw-leading: var(--leading-tight, 1.25);line-height:var(--leading-tight, 1.25)}.drawer-brand-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--og-fs-lg);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgb(var(--text-primary));-webkit-user-select:none;user-select:none;font-family:var(--og-font-display);letter-spacing:-.015em;line-height:1}.drawer-brand-subtext{margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px;--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);-webkit-user-select:none;user-select:none;color:rgb(var(--og-text-muted));letter-spacing:.02em;line-height:1.2}.drawer-container{display:flex;min-height:0px;flex:1;flex-direction:column;overflow:hidden;padding-inline:calc(var(--spacing, .25rem) * 2);transition:width .3s cubic-bezier(.4,0,.2,1)}.toggle-btn{position:absolute;top:50%;z-index:50;display:flex;height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 6);--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;border-color:rgb(var(--border-default));background-color:rgb(var(--bg-primary));--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(var(--shadow-color) / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);right:-12px;transition:background-color .2s ease,box-shadow .2s ease}.toggle-btn:before{content:\"\";position:absolute;inset:-8px;border-radius:9999px}.toggle-btn:hover{background-color:rgb(var(--bg-primary-hover));--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(var(--shadow-color) / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(var(--shadow-color) / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.toggle-btn:active{background-color:rgb(var(--bg-primary-hover))}.toggle-btn:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgb(var(--primary))}.drawer-footer-nav{border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgb(var(--border-default));padding-inline:0px;padding-top:calc(var(--spacing, .25rem) * 2);padding-bottom:var(--spacing, .25rem)}.drawer-nav{flex:1;overflow-x:hidden;overflow-y:auto;padding-block:calc(var(--spacing, .25rem) * 2)}.drawer-nav::-webkit-scrollbar{width:calc(var(--spacing, .25rem) * 1.5)}.drawer-nav::-webkit-scrollbar-track{background-color:transparent}.drawer-nav::-webkit-scrollbar-thumb{border-radius:var(--og-radius-control);background-color:rgb(var(--border-default))}.drawer-nav::-webkit-scrollbar-thumb:hover{background-color:rgb(var(--text-placeholder))}.drawer-section-label{padding-inline:1rem;padding-top:calc(var(--spacing, .25rem) * 4);padding-bottom:var(--spacing, .25rem);font-size:10.5px;line-height:1.4;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgb(var(--og-text-faint));-webkit-user-select:none;user-select:none;letter-spacing:var(--og-tracking-label)}.drawer-section-rule{margin-inline:calc(var(--spacing, .25rem) * 3);margin-block:calc(var(--spacing, .25rem) * 3);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgb(var(--border-default))}.drawer-item-wrapper{position:relative}.drawer-item{position:relative;display:flex;width:100%;cursor:pointer;align-items:center;--tw-border-style: none;border-style:none;background-color:transparent;text-decoration-line:none;margin-top:1px;min-height:30px;padding:6px 8px;font-size:var(--og-fs-sm);color:rgb(var(--og-text-body));border-radius:var(--og-radius-control);transition:background-color .13s ease,color .13s ease}.drawer-item:hover{color:rgb(var(--og-text));background:rgb(var(--og-text))}@supports (color: color-mix(in lab,red,red)){.drawer-item:hover{background:color-mix(in srgb,rgb(var(--og-text)) 8%,transparent)}}.drawer-item.active{color:rgb(var(--og-text));font-weight:500;background:rgb(var(--og-text));box-shadow:inset 0 0 0 1px rgb(var(--og-text))}@supports (color: color-mix(in lab,red,red)){.drawer-item.active{background:color-mix(in srgb,rgb(var(--og-text)) 6%,transparent)}}@supports (color: color-mix(in lab,red,red)){.drawer-item.active{box-shadow:inset 0 0 0 1px color-mix(in srgb,rgb(var(--og-text)) 7%,transparent)}}.drawer-item.active:hover{background:rgb(var(--og-text))}@supports (color: color-mix(in lab,red,red)){.drawer-item.active:hover{background:color-mix(in srgb,rgb(var(--og-text)) 9%,transparent)}}.drawer-item:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgb(var(--primary))}.drawer-item{-webkit-tap-highlight-color:transparent;--tw-outline-style: none;outline-style:none}.item-content{display:flex;width:100%;align-items:center;gap:9px;overflow:hidden}.drawer-item.is-collapsed .item-icon{width:18px;height:18px;margin-right:0}.item-icon--solid{fill:currentColor}:host ::ng-deep .item-icon--solid svg,:host ::ng-deep .item-icon--solid path,:host ::ng-deep .item-icon--solid polygon{fill:currentColor}.item-icon{flex-shrink:0;color:inherit;width:13px;height:13px;margin-right:5px}.item-label{flex:1;overflow:hidden;text-align:left;--tw-leading: 18px;line-height:18px;text-overflow:ellipsis;white-space:nowrap;font-size:inherit}.chevron-icon{margin-left:auto;flex-shrink:0;color:rgb(var(--text-primary));transition:transform .3s cubic-bezier(.4,0,.2,1)}.chevron-icon.rotated{transform:rotate(180deg)}.accordion-children{overflow:hidden}.drawer-version{display:flex;align-items:center;justify-content:center;border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgb(var(--border-default));padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3);font-size:11px;color:rgb(var(--text-placeholder));-webkit-user-select:none;user-select:none;font-family:var(--og-font-mono)}.drawer-version-dot{display:block;height:calc(var(--spacing, .25rem) * 1.5);width:calc(var(--spacing, .25rem) * 1.5);border-radius:calc(infinity * 1px);background-color:rgb(var(--text-placeholder))}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-translate-x{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-y{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-z{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-font-weight: initial;--tw-translate-x: 0;--tw-translate-y: 0;--tw-translate-z: 0;--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-outline-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], template: "<div class=\"drawer-host-wrapper\">\n  <a href=\"/\" class=\"drawer-brand\" [class.is-collapsed]=\"!isExpanded\">\n    <!-- Logo sits in its own sunken tile (reference `.sb-logo`, measured 16/09):\n         the tile is what carries the hover border, so the mark keeps its own\n         size and nothing shifts by a pixel when that border appears. -->\n    <span class=\"drawer-brand-logo\">\n      @if (logo) {\n        <img [src]=\"logo\" alt=\"Home\" class=\"drawer-brand-mark\" />\n      } @else {\n        <span class=\"drawer-brand-mark\"></span>\n      }\n    </span>\n    @if (isExpanded && (logoText || logoSubtext)) {\n      <span class=\"drawer-brand-copy\">\n        @if (logoText) {\n          <span class=\"drawer-brand-text\">{{ logoText }}</span>\n        }\n        @if (logoSubtext) {\n          <span class=\"drawer-brand-subtext\">{{ logoSubtext }}</span>\n        }\n      </span>\n    }\n  </a>\n  <div class=\"drawer-container\" [@drawerExpand]=\"getDrawerState()\">\n    <!-- Navigation Items -->\n    <nav class=\"drawer-nav\">\n      @for (item of items(); track item) {\n        <ng-container\n          *ngTemplateOutlet=\"drawerItem; context: { $implicit: item, level: 0 }\"\n        ></ng-container>\n      }\n    </nav>\n\n    <!-- V2: bottom section (Administration group, user block, \u2026) -->\n    <div class=\"mt-auto\">\n      @if (footerItems().length) {\n        <nav class=\"drawer-footer-nav\">\n          @for (item of footerItems(); track item) {\n            <ng-container\n              *ngTemplateOutlet=\"drawerItem; context: { $implicit: item, level: 0 }\"\n            ></ng-container>\n          }\n        </nav>\n      }\n      <ng-content select=\"[drawerFooter]\"></ng-content>\n    </div>\n\n    <!-- Version -->\n    @if (version) {\n      <div class=\"drawer-version\" [matTooltip]=\"!isExpanded ? version : ''\" matTooltipPosition=\"right\">\n        @if (isExpanded) {\n          <span>{{ version }}</span>\n        }\n        @if (!isExpanded) {\n          <span class=\"drawer-version-dot\"></span>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Floating Toggle Button on right border -->\n  <button\n    type=\"button\"\n    class=\"toggle-btn\"\n    [attr.aria-label]=\"isExpanded ? 'Collapse navigation' : 'Expand navigation'\"\n    [attr.aria-expanded]=\"isExpanded\"\n    (click)=\"toggleDrawer()\"\n    [matTooltip]=\"isExpanded ? 'Collapse' : 'Expand'\"\n    matTooltipClass=\"text-text-primary text-xs font-semibold\"\n    matTooltipPosition=\"right\"\n    >\n    <fx-ui-hero-icon\n      [icon]=\"isExpanded ? 'chevron-left' : 'chevron-right'\"\n      [size]=\"16\"\n      class=\"text-text-primary\"\n    ></fx-ui-hero-icon>\n  </button>\n</div>\n\n<!-- Recursive Template for Drawer Items -->\n<ng-template #drawerItem let-item let-level=\"level\">\n  @if (item.heading) {\n    @if (isExpanded) {\n      <div class=\"drawer-section-label\">{{ item.label }}</div>\n    } @else {\n      <div class=\"drawer-section-rule\"></div>\n    }\n  } @else {\n  <div class=\"drawer-item-wrapper\">\n    <!-- Item Button/Link -->\n    @if (item.route && !item.children) {\n      <a\n        [routerLink]=\"item.route\"\n        class=\"drawer-item\"\n        [class.is-collapsed]=\"!isExpanded\"\n        [class.active]=\"isActiveRoute(item.route)\"\n        [class.has-children]=\"item.children && item.children.length > 0\"\n        [style.paddingLeft.px]=\"isExpanded ? 8 + level * 16 : 16\"\n        [matTooltip]=\"!isExpanded ? item.label : ''\"\n        matTooltipPosition=\"right\"\n        matTooltipClass=\"text-text-primary text-xs font-semibold\"\n        (click)=\"onItemClick(item, $event)\"\n        >\n        <div class=\"item-content\">\n          @if (item.iconData) {\n            <lucide-icon\n              [img]=\"item.iconData\"\n              [size]=\"isExpanded ? 15 : 20\"\n              class=\"item-icon\"\n              [class.item-icon--solid]=\"item.iconSolid\"\n            />\n          } @else {\n            <fx-ui-hero-icon [icon]=\"item.icon\" [size]=\"isExpanded ? 15 : 20\" class=\"item-icon\"></fx-ui-hero-icon>\n          }\n          @if (isExpanded) {\n            <span class=\"item-label\">{{ item.label }}</span>\n          }\n        </div>\n      </a>\n    }\n\n    @if (!item.route || item.children) {\n      <button\n        type=\"button\"\n        class=\"drawer-item\"\n        [class.is-collapsed]=\"!isExpanded\"\n        [class.active]=\"isActiveRoute(item.route)\"\n        [class.has-children]=\"item.children && item.children.length > 0\"\n        [style.paddingLeft.px]=\"isExpanded ? 8 + level * 16 : 16\"\n        [matTooltip]=\"!isExpanded ? item.label : ''\"\n        matTooltipPosition=\"right\"\n        matTooltipClass=\"text-text-primary text-sm font-semibold\"\n        (click)=\"onItemClick(item, $event)\"\n        >\n        <div class=\"item-content\">\n          @if (item.iconData) {\n            <lucide-icon\n              [img]=\"item.iconData\"\n              [size]=\"isExpanded ? 15 : 20\"\n              class=\"item-icon\"\n              [class.item-icon--solid]=\"item.iconSolid\"\n            />\n          } @else {\n            <fx-ui-hero-icon [icon]=\"item.icon\" [size]=\"isExpanded ? 15 : 20\" class=\"item-icon\"></fx-ui-hero-icon>\n          }\n          @if (isExpanded) {\n            <span class=\"item-label\">{{ item.label }}</span>\n          }\n          @if (isExpanded && item.children && item.children.length > 0) {\n            <fx-ui-hero-icon\n              [icon]=\"'chevron-down'\"\n              [size]=\"16\"\n              class=\"chevron-icon\"\n              [class.rotated]=\"isAccordionExpanded(item.id)\"\n            ></fx-ui-hero-icon>\n          }\n        </div>\n      </button>\n    }\n\n    <!-- Accordion Children -->\n    @if (item.children && item.children.length > 0) {\n      <div\n        class=\"accordion-children\"\n        [@accordionExpand]=\"getAccordionState(item.id)\"\n        >\n        @for (child of item.children; track child) {\n          <ng-container\n            *ngTemplateOutlet=\"drawerItem; context: { $implicit: child, level: level + 1 }\"\n          ></ng-container>\n        }\n      </div>\n    }\n  </div>\n  }\n</ng-template>\n", styles: ["@charset \"UTF-8\";@layer properties;:host{display:block;height:100%}.drawer-host-wrapper{position:relative;display:flex;height:100%;flex-direction:column;background:rgb(var(--og-surface-sunken));border-right:1px solid rgb(var(--og-border-subtle))}.drawer-brand{display:flex;height:60px;flex-shrink:0;align-items:center;gap:10px;overflow:hidden;text-decoration-line:none;padding-left:16px;padding-right:8px;transition:padding .3s cubic-bezier(.4,0,.2,1);max-width:260px}.drawer-brand.is-collapsed{justify-content:center;padding-left:0;padding-right:0;max-width:70px}.drawer-brand-logo{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding:6px;border-radius:var(--og-radius-control);background:rgb(var(--og-surface-sunken));border:1px solid transparent;transition:padding .22s cubic-bezier(.4,0,.2,1),border-color .15s ease}.drawer-brand:hover .drawer-brand-logo{border-color:rgb(var(--og-border))}.drawer-brand.is-collapsed .drawer-brand-logo{padding:4px}.drawer-brand-mark{height:21px;width:auto;flex-shrink:0}.drawer-brand.is-collapsed .drawer-brand-mark{height:19px}.drawer-brand-copy{display:flex;min-width:0px;flex-direction:column;--tw-leading: var(--leading-tight, 1.25);line-height:var(--leading-tight, 1.25)}.drawer-brand-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--og-fs-lg);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgb(var(--text-primary));-webkit-user-select:none;user-select:none;font-family:var(--og-font-display);letter-spacing:-.015em;line-height:1}.drawer-brand-subtext{margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px;--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);-webkit-user-select:none;user-select:none;color:rgb(var(--og-text-muted));letter-spacing:.02em;line-height:1.2}.drawer-container{display:flex;min-height:0px;flex:1;flex-direction:column;overflow:hidden;padding-inline:calc(var(--spacing, .25rem) * 2);transition:width .3s cubic-bezier(.4,0,.2,1)}.toggle-btn{position:absolute;top:50%;z-index:50;display:flex;height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 6);--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;border-color:rgb(var(--border-default));background-color:rgb(var(--bg-primary));--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(var(--shadow-color) / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);right:-12px;transition:background-color .2s ease,box-shadow .2s ease}.toggle-btn:before{content:\"\";position:absolute;inset:-8px;border-radius:9999px}.toggle-btn:hover{background-color:rgb(var(--bg-primary-hover));--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(var(--shadow-color) / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(var(--shadow-color) / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.toggle-btn:active{background-color:rgb(var(--bg-primary-hover))}.toggle-btn:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgb(var(--primary))}.drawer-footer-nav{border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgb(var(--border-default));padding-inline:0px;padding-top:calc(var(--spacing, .25rem) * 2);padding-bottom:var(--spacing, .25rem)}.drawer-nav{flex:1;overflow-x:hidden;overflow-y:auto;padding-block:calc(var(--spacing, .25rem) * 2)}.drawer-nav::-webkit-scrollbar{width:calc(var(--spacing, .25rem) * 1.5)}.drawer-nav::-webkit-scrollbar-track{background-color:transparent}.drawer-nav::-webkit-scrollbar-thumb{border-radius:var(--og-radius-control);background-color:rgb(var(--border-default))}.drawer-nav::-webkit-scrollbar-thumb:hover{background-color:rgb(var(--text-placeholder))}.drawer-section-label{padding-inline:1rem;padding-top:calc(var(--spacing, .25rem) * 4);padding-bottom:var(--spacing, .25rem);font-size:var(--og-fs-xs);line-height:1.4;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgb(var(--og-text-faint));-webkit-user-select:none;user-select:none;letter-spacing:var(--og-tracking-label)}.drawer-section-rule{margin-inline:calc(var(--spacing, .25rem) * 3);margin-block:calc(var(--spacing, .25rem) * 3);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgb(var(--border-default))}.drawer-item-wrapper{position:relative}.drawer-item{position:relative;display:flex;width:100%;cursor:pointer;align-items:center;--tw-border-style: none;border-style:none;background-color:transparent;text-decoration-line:none;margin-top:1px;min-height:34px;padding:7px 8px;font-size:14px;color:rgb(var(--og-text-body));border-radius:var(--og-radius-control);transition:background-color .13s ease,color .13s ease}.drawer-item:hover{color:rgb(var(--og-text));background:rgb(var(--og-text))}@supports (color: color-mix(in lab,red,red)){.drawer-item:hover{background:color-mix(in srgb,rgb(var(--og-text)) 8%,transparent)}}.drawer-item.active{color:rgb(var(--og-text));font-weight:500;background:rgb(var(--og-text));box-shadow:inset 0 0 0 1px rgb(var(--og-text))}@supports (color: color-mix(in lab,red,red)){.drawer-item.active{background:color-mix(in srgb,rgb(var(--og-text)) 6%,transparent)}}@supports (color: color-mix(in lab,red,red)){.drawer-item.active{box-shadow:inset 0 0 0 1px color-mix(in srgb,rgb(var(--og-text)) 7%,transparent)}}.drawer-item.active:hover{background:rgb(var(--og-text))}@supports (color: color-mix(in lab,red,red)){.drawer-item.active:hover{background:color-mix(in srgb,rgb(var(--og-text)) 9%,transparent)}}.drawer-item:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgb(var(--primary))}.drawer-item{-webkit-tap-highlight-color:transparent;--tw-outline-style: none;outline-style:none}.item-content{display:flex;width:100%;align-items:center;gap:9px;overflow:hidden}.drawer-item.is-collapsed .item-icon{width:20px;height:20px;margin-right:0}.item-icon--solid{fill:currentColor}:host ::ng-deep .item-icon--solid svg,:host ::ng-deep .item-icon--solid path,:host ::ng-deep .item-icon--solid polygon{fill:currentColor}.item-icon{flex-shrink:0;color:inherit;width:15px;height:15px;margin-right:6px}.item-label{flex:1;overflow:hidden;text-align:left;--tw-leading: 20px;line-height:20px;text-overflow:ellipsis;white-space:nowrap;font-size:inherit}.chevron-icon{margin-left:auto;flex-shrink:0;color:rgb(var(--text-primary));transition:transform .3s cubic-bezier(.4,0,.2,1)}.chevron-icon.rotated{transform:rotate(180deg)}.accordion-children{overflow:hidden}.drawer-version{display:flex;align-items:center;justify-content:center;border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgb(var(--border-default));padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3);font-size:12px;color:rgb(var(--text-placeholder));-webkit-user-select:none;user-select:none;font-family:var(--og-font-mono)}.drawer-version-dot{display:block;height:calc(var(--spacing, .25rem) * 1.5);width:calc(var(--spacing, .25rem) * 1.5);border-radius:calc(infinity * 1px);background-color:rgb(var(--text-placeholder))}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-translate-x{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-y{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-z{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-font-weight: initial;--tw-translate-x: 0;--tw-translate-y: 0;--tw-translate-z: 0;--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-outline-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [{ type: i2$1.Router }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], footerItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerItems", required: false }] }], isExpanded: [{
                 type: Input
             }], logo: [{
@@ -4367,7 +4367,7 @@ class StatCardsComponent {
         return card.subTone ? toneText(card.subTone) : 'text-text-secondary';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: StatCardsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: StatCardsComponent, isStandalone: true, selector: "fx-ui-stat-cards", inputs: { cards: { classPropertyName: "cards", publicName: "cards", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, cols: { classPropertyName: "cols", publicName: "cols", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- variant=\"figure\" is ONE ruled panel, not N cards: the reference draws the\n     KPI strip as a single bordered box divided by hairlines (`.og-statgrid\n     --ruled`, measured 16/09). It was four separate `card-common` boxes with an\n     8px gap, which read as four objects where the design has one. The other\n     variant keeps its own cards. -->\n<div\n  class=\"fx-stat-grid grid\"\n  [class.fx-stat-grid--ruled]=\"variant() === 'figure'\"\n  [class.gap-normal]=\"variant() !== 'figure'\"\n  [ngStyle]=\"{ 'grid-template-columns': gridColumns }\"\n>\n  @for (card of cards(); track card.label; let last = $last) {\n    @if (variant() === 'figure') {\n      <div class=\"fx-stat-cell flex flex-col min-w-0\" [class.fx-stat-cell--last]=\"last\">\n        <span class=\"fx-stat-cell__label truncate\">{{ card.label }}</span>\n        <span\n          class=\"fx-stat-cell__figure\"\n          [ngClass]=\"numClass(card)\"\n          ><span [fxCountUp]=\"card.value\"></span></span\n        >\n        @if (card.sub) {\n          <span class=\"fx-stat-cell__sub\" [ngClass]=\"subClass(card)\">{{ card.sub }}</span>\n        }\n        @if (card.spark?.length) {\n          <fx-ui-sparkbar class=\"mt-xs\" [values]=\"card.spark!\" [height]=\"16\" [tone]=\"card.tone ?? null\" />\n        }\n      </div>\n    } @else {\n      <div class=\"card-common flex items-center gap-normal\">\n        @if (card.icon) {\n          <div\n            class=\"w-10 h-10 rounded-lg flex items-center justify-center shrink-0\"\n            [ngClass]=\"boxClass(card)\"\n          >\n            <fx-ui-hero-icon [icon]=\"card.icon\" [size]=\"20\"></fx-ui-hero-icon>\n          </div>\n        }\n        <div class=\"flex flex-col min-w-0 flex-1\">\n          <div class=\"flex items-baseline gap-small\">\n            <span\n              class=\"txt-heading-04\"\n              [ngClass]=\"numClass(card)\"\n              style=\"font-family: var(--og-font-figure)\"\n              ><span [fxCountUp]=\"card.value\"></span></span\n            >\n            @if (card.delta) {\n              <span class=\"text-xs font-semibold\" [ngClass]=\"deltaClass(card)\">\n                {{ card.delta.direction === 'up' ? '\u25B2' : '\u25BC' }} {{ card.delta.value }}\n              </span>\n            }\n          </div>\n          <span class=\"txt-utility-caption text-text-secondary truncate\">{{ card.label }}</span>\n          @if (card.spark?.length) {\n            <fx-ui-sparkbar class=\"mt-xs\" [values]=\"card.spark!\" [height]=\"16\" [tone]=\"card.tone ?? null\" />\n          }\n        </div>\n      </div>\n    }\n  }\n</div>\n", styles: [":host{display:block;container-type:inline-size}@container (width < 720px){.fx-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}@container (width < 360px){.fx-stat-grid{grid-template-columns:minmax(0,1fr)!important}}.fx-stat-grid--ruled{gap:0;border:1px solid rgb(var(--og-border));border-radius:var(--og-radius-control);background:rgb(var(--og-surface));box-shadow:0 1px 2px #0000000a,0 3px 8px #0000000d;overflow:hidden}.fx-stat-grid--ruled .fx-stat-cell{padding:10px 12px;border-right:1px solid rgb(var(--og-border))}.fx-stat-grid--ruled .fx-stat-cell--last{border-right:0}.fx-stat-cell__label{font-size:var(--og-fs-2xs);font-weight:400;color:rgb(var(--og-text-faint))}.fx-stat-cell__figure{font-family:var(--og-font-figure);font-size:32px;font-weight:400;line-height:1.1;color:rgb(var(--og-text));margin-top:6px}.fx-stat-cell__sub{font-size:var(--og-fs-xs);font-weight:400;color:rgb(var(--og-text-muted));margin-top:4px}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }, { kind: "component", type: SparkbarComponent, selector: "fx-ui-sparkbar", inputs: ["values", "tone", "height"] }, { kind: "directive", type: FxCountUpDirective, selector: "[fxCountUp]", inputs: ["fxCountUp"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: StatCardsComponent, isStandalone: true, selector: "fx-ui-stat-cards", inputs: { cards: { classPropertyName: "cards", publicName: "cards", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, cols: { classPropertyName: "cols", publicName: "cols", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- variant=\"figure\" is ONE ruled panel, not N cards: the reference draws the\n     KPI strip as a single bordered box divided by hairlines (`.og-statgrid\n     --ruled`, measured 16/09). It was four separate `card-common` boxes with an\n     8px gap, which read as four objects where the design has one. The other\n     variant keeps its own cards. -->\n<div\n  class=\"fx-stat-grid grid\"\n  [class.fx-stat-grid--ruled]=\"variant() === 'figure'\"\n  [class.gap-normal]=\"variant() !== 'figure'\"\n  [ngStyle]=\"{ 'grid-template-columns': gridColumns }\"\n>\n  @for (card of cards(); track card.label; let last = $last) {\n    @if (variant() === 'figure') {\n      <div class=\"fx-stat-cell flex flex-col min-w-0\" [class.fx-stat-cell--last]=\"last\">\n        <span class=\"fx-stat-cell__label truncate\">{{ card.label }}</span>\n        <span\n          class=\"fx-stat-cell__figure\"\n          [ngClass]=\"numClass(card)\"\n          ><span [fxCountUp]=\"card.value\"></span></span\n        >\n        @if (card.sub) {\n          <span class=\"fx-stat-cell__sub\" [ngClass]=\"subClass(card)\">{{ card.sub }}</span>\n        }\n        @if (card.spark?.length) {\n          <fx-ui-sparkbar class=\"mt-xs\" [values]=\"card.spark!\" [height]=\"16\" [tone]=\"card.tone ?? null\" />\n        }\n      </div>\n    } @else {\n      <div class=\"card-common flex items-center gap-normal\">\n        @if (card.icon) {\n          <div\n            class=\"w-10 h-10 rounded-lg flex items-center justify-center shrink-0\"\n            [ngClass]=\"boxClass(card)\"\n          >\n            <fx-ui-hero-icon [icon]=\"card.icon\" [size]=\"20\"></fx-ui-hero-icon>\n          </div>\n        }\n        <div class=\"flex flex-col min-w-0 flex-1\">\n          <div class=\"flex items-baseline gap-small\">\n            <span\n              class=\"txt-heading-04\"\n              [ngClass]=\"numClass(card)\"\n              style=\"font-family: var(--og-font-figure)\"\n              ><span [fxCountUp]=\"card.value\"></span></span\n            >\n            @if (card.delta) {\n              <span class=\"text-xs font-semibold\" [ngClass]=\"deltaClass(card)\">\n                {{ card.delta.direction === 'up' ? '\u25B2' : '\u25BC' }} {{ card.delta.value }}\n              </span>\n            }\n          </div>\n          <span class=\"txt-utility-caption text-text-secondary truncate\">{{ card.label }}</span>\n          @if (card.spark?.length) {\n            <fx-ui-sparkbar class=\"mt-xs\" [values]=\"card.spark!\" [height]=\"16\" [tone]=\"card.tone ?? null\" />\n          }\n        </div>\n      </div>\n    }\n  }\n</div>\n", styles: [":host{display:block;container-type:inline-size}@container (width < 720px){.fx-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}@container (width < 360px){.fx-stat-grid{grid-template-columns:minmax(0,1fr)!important}}.fx-stat-grid--ruled{gap:0;border:1px solid rgb(var(--og-border));border-radius:var(--og-radius-control);background:rgb(var(--og-surface));box-shadow:0 1px 2px #0000000a,0 3px 8px #0000000d;overflow:hidden}.fx-stat-grid--ruled .fx-stat-cell{padding:10px 12px;border-right:1px solid rgb(var(--og-border))}.fx-stat-grid--ruled .fx-stat-cell--last{border-right:0}.fx-stat-cell__label{font-size:var(--og-fs-2xs);font-weight:400;color:rgb(var(--og-text-faint))}.fx-stat-cell__figure{font-family:var(--og-font-figure);font-size:32px;font-weight:400;line-height:1.1;color:rgb(var(--og-text));margin-top:6px}@container (width < 720px){.fx-stat-cell__figure{font-size:22px;margin-top:4px}}@container (width < 360px){.fx-stat-cell__figure{font-size:20px}}.fx-stat-cell__sub{font-size:var(--og-fs-xs);font-weight:400;color:rgb(var(--og-text-muted));margin-top:4px}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }, { kind: "component", type: SparkbarComponent, selector: "fx-ui-sparkbar", inputs: ["values", "tone", "height"] }, { kind: "directive", type: FxCountUpDirective, selector: "[fxCountUp]", inputs: ["fxCountUp"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: StatCardsComponent, decorators: [{
             type: Component,
@@ -4377,7 +4377,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
                         HeroIconComponent,
                         SparkbarComponent,
                         FxCountUpDirective,
-                    ], template: "<!-- variant=\"figure\" is ONE ruled panel, not N cards: the reference draws the\n     KPI strip as a single bordered box divided by hairlines (`.og-statgrid\n     --ruled`, measured 16/09). It was four separate `card-common` boxes with an\n     8px gap, which read as four objects where the design has one. The other\n     variant keeps its own cards. -->\n<div\n  class=\"fx-stat-grid grid\"\n  [class.fx-stat-grid--ruled]=\"variant() === 'figure'\"\n  [class.gap-normal]=\"variant() !== 'figure'\"\n  [ngStyle]=\"{ 'grid-template-columns': gridColumns }\"\n>\n  @for (card of cards(); track card.label; let last = $last) {\n    @if (variant() === 'figure') {\n      <div class=\"fx-stat-cell flex flex-col min-w-0\" [class.fx-stat-cell--last]=\"last\">\n        <span class=\"fx-stat-cell__label truncate\">{{ card.label }}</span>\n        <span\n          class=\"fx-stat-cell__figure\"\n          [ngClass]=\"numClass(card)\"\n          ><span [fxCountUp]=\"card.value\"></span></span\n        >\n        @if (card.sub) {\n          <span class=\"fx-stat-cell__sub\" [ngClass]=\"subClass(card)\">{{ card.sub }}</span>\n        }\n        @if (card.spark?.length) {\n          <fx-ui-sparkbar class=\"mt-xs\" [values]=\"card.spark!\" [height]=\"16\" [tone]=\"card.tone ?? null\" />\n        }\n      </div>\n    } @else {\n      <div class=\"card-common flex items-center gap-normal\">\n        @if (card.icon) {\n          <div\n            class=\"w-10 h-10 rounded-lg flex items-center justify-center shrink-0\"\n            [ngClass]=\"boxClass(card)\"\n          >\n            <fx-ui-hero-icon [icon]=\"card.icon\" [size]=\"20\"></fx-ui-hero-icon>\n          </div>\n        }\n        <div class=\"flex flex-col min-w-0 flex-1\">\n          <div class=\"flex items-baseline gap-small\">\n            <span\n              class=\"txt-heading-04\"\n              [ngClass]=\"numClass(card)\"\n              style=\"font-family: var(--og-font-figure)\"\n              ><span [fxCountUp]=\"card.value\"></span></span\n            >\n            @if (card.delta) {\n              <span class=\"text-xs font-semibold\" [ngClass]=\"deltaClass(card)\">\n                {{ card.delta.direction === 'up' ? '\u25B2' : '\u25BC' }} {{ card.delta.value }}\n              </span>\n            }\n          </div>\n          <span class=\"txt-utility-caption text-text-secondary truncate\">{{ card.label }}</span>\n          @if (card.spark?.length) {\n            <fx-ui-sparkbar class=\"mt-xs\" [values]=\"card.spark!\" [height]=\"16\" [tone]=\"card.tone ?? null\" />\n          }\n        </div>\n      </div>\n    }\n  }\n</div>\n", styles: [":host{display:block;container-type:inline-size}@container (width < 720px){.fx-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}@container (width < 360px){.fx-stat-grid{grid-template-columns:minmax(0,1fr)!important}}.fx-stat-grid--ruled{gap:0;border:1px solid rgb(var(--og-border));border-radius:var(--og-radius-control);background:rgb(var(--og-surface));box-shadow:0 1px 2px #0000000a,0 3px 8px #0000000d;overflow:hidden}.fx-stat-grid--ruled .fx-stat-cell{padding:10px 12px;border-right:1px solid rgb(var(--og-border))}.fx-stat-grid--ruled .fx-stat-cell--last{border-right:0}.fx-stat-cell__label{font-size:var(--og-fs-2xs);font-weight:400;color:rgb(var(--og-text-faint))}.fx-stat-cell__figure{font-family:var(--og-font-figure);font-size:32px;font-weight:400;line-height:1.1;color:rgb(var(--og-text));margin-top:6px}.fx-stat-cell__sub{font-size:var(--og-fs-xs);font-weight:400;color:rgb(var(--og-text-muted));margin-top:4px}\n"] }]
+                    ], template: "<!-- variant=\"figure\" is ONE ruled panel, not N cards: the reference draws the\n     KPI strip as a single bordered box divided by hairlines (`.og-statgrid\n     --ruled`, measured 16/09). It was four separate `card-common` boxes with an\n     8px gap, which read as four objects where the design has one. The other\n     variant keeps its own cards. -->\n<div\n  class=\"fx-stat-grid grid\"\n  [class.fx-stat-grid--ruled]=\"variant() === 'figure'\"\n  [class.gap-normal]=\"variant() !== 'figure'\"\n  [ngStyle]=\"{ 'grid-template-columns': gridColumns }\"\n>\n  @for (card of cards(); track card.label; let last = $last) {\n    @if (variant() === 'figure') {\n      <div class=\"fx-stat-cell flex flex-col min-w-0\" [class.fx-stat-cell--last]=\"last\">\n        <span class=\"fx-stat-cell__label truncate\">{{ card.label }}</span>\n        <span\n          class=\"fx-stat-cell__figure\"\n          [ngClass]=\"numClass(card)\"\n          ><span [fxCountUp]=\"card.value\"></span></span\n        >\n        @if (card.sub) {\n          <span class=\"fx-stat-cell__sub\" [ngClass]=\"subClass(card)\">{{ card.sub }}</span>\n        }\n        @if (card.spark?.length) {\n          <fx-ui-sparkbar class=\"mt-xs\" [values]=\"card.spark!\" [height]=\"16\" [tone]=\"card.tone ?? null\" />\n        }\n      </div>\n    } @else {\n      <div class=\"card-common flex items-center gap-normal\">\n        @if (card.icon) {\n          <div\n            class=\"w-10 h-10 rounded-lg flex items-center justify-center shrink-0\"\n            [ngClass]=\"boxClass(card)\"\n          >\n            <fx-ui-hero-icon [icon]=\"card.icon\" [size]=\"20\"></fx-ui-hero-icon>\n          </div>\n        }\n        <div class=\"flex flex-col min-w-0 flex-1\">\n          <div class=\"flex items-baseline gap-small\">\n            <span\n              class=\"txt-heading-04\"\n              [ngClass]=\"numClass(card)\"\n              style=\"font-family: var(--og-font-figure)\"\n              ><span [fxCountUp]=\"card.value\"></span></span\n            >\n            @if (card.delta) {\n              <span class=\"text-xs font-semibold\" [ngClass]=\"deltaClass(card)\">\n                {{ card.delta.direction === 'up' ? '\u25B2' : '\u25BC' }} {{ card.delta.value }}\n              </span>\n            }\n          </div>\n          <span class=\"txt-utility-caption text-text-secondary truncate\">{{ card.label }}</span>\n          @if (card.spark?.length) {\n            <fx-ui-sparkbar class=\"mt-xs\" [values]=\"card.spark!\" [height]=\"16\" [tone]=\"card.tone ?? null\" />\n          }\n        </div>\n      </div>\n    }\n  }\n</div>\n", styles: [":host{display:block;container-type:inline-size}@container (width < 720px){.fx-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}@container (width < 360px){.fx-stat-grid{grid-template-columns:minmax(0,1fr)!important}}.fx-stat-grid--ruled{gap:0;border:1px solid rgb(var(--og-border));border-radius:var(--og-radius-control);background:rgb(var(--og-surface));box-shadow:0 1px 2px #0000000a,0 3px 8px #0000000d;overflow:hidden}.fx-stat-grid--ruled .fx-stat-cell{padding:10px 12px;border-right:1px solid rgb(var(--og-border))}.fx-stat-grid--ruled .fx-stat-cell--last{border-right:0}.fx-stat-cell__label{font-size:var(--og-fs-2xs);font-weight:400;color:rgb(var(--og-text-faint))}.fx-stat-cell__figure{font-family:var(--og-font-figure);font-size:32px;font-weight:400;line-height:1.1;color:rgb(var(--og-text));margin-top:6px}@container (width < 720px){.fx-stat-cell__figure{font-size:22px;margin-top:4px}}@container (width < 360px){.fx-stat-cell__figure{font-size:20px}}.fx-stat-cell__sub{font-size:var(--og-fs-xs);font-weight:400;color:rgb(var(--og-text-muted));margin-top:4px}\n"] }]
         }], propDecorators: { cards: [{ type: i0.Input, args: [{ isSignal: true, alias: "cards", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], cols: [{
                 type: Input
             }] } });