@frame-kit/ui-ng 0.0.7 → 0.1.0

package/COMPONENTS.md

@@ -41,7 +41,6 @@ Organized by **purpose** (not Atomic Design) into six layers with strict depende
 - [fk-loader](#fk-loader)
 - [fk-menu-item](#fk-menu-item)
 - [fk-nav-brand](#fk-nav-brand)
-- [fk-nav-group](#fk-nav-group)
 - [fk-nav-separator](#fk-nav-separator)
 - [fk-node-tree](#fk-node-tree)
 - [fk-node-tree-breadcrumb](#fk-node-tree-breadcrumb)
@@ -49,7 +48,6 @@ Organized by **purpose** (not Atomic Design) into six layers with strict depende
 - [fk-numbered-list](#fk-numbered-list)
 - [fk-pagination](#fk-pagination)
 - [fk-progress-bar](#fk-progress-bar)
-- [fk-sidenav-link](#fk-sidenav-link)
 - [fk-tabs](#fk-tabs)
 - [fk-timeline](#fk-timeline)
 - [fk-toast](#fk-toast)
@@ -310,13 +308,6 @@ A brand/logo element used within navigation bars.
 
 ---
 
-### fk-nav-group
-
-An expandable nav group that pairs a clickable trigger row (icon + label, optionally routed) with projected child links revealed when expanded. Designed to sit inside a collapsible shell so collapsed clicks request the outer shell to open.
-[README](https://github.com/frame-kit/packages/blob/main/packages/ui-ng/ui/nav-group/README.md)
-
----
-
 ### fk-nav-separator
 
 A token-driven separator for visually dividing groups of navigation items, with vertical/horizontal orientation and decorative/semantic accessibility modes.
@@ -366,13 +357,6 @@ A token-driven progress bar for indicating how far along a single task or proces
 
 ---
 
-### fk-sidenav-link
-
-A token-driven sidebar navigation link that renders an icon and label, automatically hiding the label when the parent app-shell is collapsed.
-[README](https://github.com/frame-kit/packages/blob/main/packages/ui-ng/ui/sidenav-link/README.md)
-
----
-
 ### fk-tabs
 
 A compound component system for building accessible, keyboard-navigable tabbed interfaces. Supports underline, pill, and contained variants, controlled and uncontrolled modes, lazy rendering, closable tabs, and full WAI-ARIA Tabs pattern compliance.

package/fesm2022/frame-kit-ui-ng.mjs

@@ -34,7 +34,6 @@ export * from '@frame-kit/ui-ng/ui/list-editor';
 export * from '@frame-kit/ui-ng/ui/loader';
 export * from '@frame-kit/ui-ng/ui/menu-item';
 export * from '@frame-kit/ui-ng/ui/nav-brand';
-export * from '@frame-kit/ui-ng/ui/nav-group';
 export * from '@frame-kit/ui-ng/ui/nav-separator';
 export * from '@frame-kit/ui-ng/ui/node-tree';
 export * from '@frame-kit/ui-ng/ui/node-tree-breadcrumb';
@@ -42,7 +41,6 @@ export * from '@frame-kit/ui-ng/ui/note';
 export * from '@frame-kit/ui-ng/ui/numbered-list';
 export * from '@frame-kit/ui-ng/ui/pagination';
 export * from '@frame-kit/ui-ng/ui/progress-bar';
-export * from '@frame-kit/ui-ng/ui/sidenav-link';
 export * from '@frame-kit/ui-ng/ui/tabs';
 export * from '@frame-kit/ui-ng/ui/timeline';
 export * from '@frame-kit/ui-ng/ui/toast';

package/fesm2022/frame-kit-ui-ng.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"frame-kit-ui-ng.mjs","sources":["../../../../packages/ui-ng/frame-kit-ui-ng.ts"],"sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEG"}
+{"version":3,"file":"frame-kit-ui-ng.mjs","sources":["../../../../packages/ui-ng/frame-kit-ui-ng.ts"],"sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEG"}

package/layouts/app-shell/README.md

@@ -141,8 +141,8 @@ Sidebar pushes the main content over. Collapses to zero width when closed.
   </div>
 
   <nav appShellSidenav>
-    <fk-sidenav-link icon="chart-activity-fill" label="Overview" routerLink="/app" [exact]="true" />
-    <fk-sidenav-link icon="organization" label="Properties" />
+    <a routerLink="/app">Overview</a>
+    <a routerLink="/properties">Properties</a>
   </nav>
 
   <div appShellContent>
@@ -162,7 +162,7 @@ Sidebar slides over the content with a backdrop overlay.
   </div>
 
   <nav appShellSidenav>
-    <fk-sidenav-link icon="email" label="Notifications" />
+    <a routerLink="/notifications">Notifications</a>
   </nav>
 
   <div appShellContent>
@@ -187,13 +187,13 @@ Sidebar collapses to a narrow icon rail on desktop. On mobile, it behaves as an
     </div>
 
     <nav class="sidenav-nav" style="flex: 1; overflow-y: auto;">
-      <fk-sidenav-link icon="chart-activity-fill" label="Overview" routerLink="/app" [exact]="true" />
-      <fk-sidenav-link icon="organization" label="Properties" />
-      <fk-sidenav-link icon="email" label="Notifications" />
+      <a routerLink="/app">Overview</a>
+      <a routerLink="/properties">Properties</a>
+      <a routerLink="/notifications">Notifications</a>
     </nav>
 
     <div class="sidenav-footer">
-      <fk-sidenav-link icon="info" label="Help & Support" />
+      <a routerLink="/help">Help &amp; Support</a>
     </div>
   </div>
 
@@ -214,7 +214,7 @@ The end panel is opt-in and starts closed. The consumer provides their own toggl
   </div>
 
   <nav appShellSidenav>
-    <fk-sidenav-link icon="chart-activity-fill" label="Overview" routerLink="/app" [exact]="true" />
+    <a routerLink="/app">Overview</a>
   </nav>
 
   <div appShellContent>
@@ -242,7 +242,7 @@ Keep the icon rail visible on mobile instead of hiding the sidebar. Tapping an i
     <button (click)="shell.openSidenav()">
       <fk-icon name="menu-outline" />
     </button>
-    <fk-sidenav-link icon="home" label="Home" routerLink="/" />
+    <a routerLink="/">Home</a>
   </nav>
 
   <div appShellContent>
@@ -321,7 +321,7 @@ Keep the icon rail visible on mobile instead of hiding the sidebar. Tapping an i
 - Transitions are only enabled after explicit user interaction (toggle, open, close)
 - `dismissSidenav()` closes the mobile overlay without persisting a closed preference — on the next desktop resize the sidebar will reappear
 - `closeSidenav()` persists the closed preference across mobile/desktop transitions
-- In `icon` mode, when collapsed, the aside shrinks to `collapsedWidth` and child components (like `fk-sidenav-link`) can detect collapse state to hide labels
+- In `icon` mode, when collapsed, the aside shrinks to `collapsedWidth` and gains the `fk-app-shell--collapsed` class; sidenav content can react to it (e.g. hiding labels) via that class or the shell's `isCollapsed()` signal
 - By default, the sidebar is hidden off-screen on mobile and reachable via a toggle. Set `collapseOnMobile="true"` (icon mode only) to keep the collapsed rail visible on mobile; opening the sidenav still slides it in as a full-width overlay that can be dismissed via the backdrop
 - The mobile overlay defaults to the full viewport width (`--fk-app-shell-mobile-sidenav-width: 100%`). Override the token for a peek-style drawer. The input `sidenavWidth` only drives the desktop width
 - The end panel starts closed by default — the consumer must explicitly open it via `openEnd()` or `toggleEnd()`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frame-kit/ui-ng",
-  "version": "0.0.7",
+  "version": "0.1.0",
   "description": "Style-agnostic, token-driven Angular UI component library for FrameKit.",
   "license": "MIT",
   "repository": {
@@ -177,10 +177,6 @@
       "types": "./types/frame-kit-ui-ng-ui-nav-brand.d.ts",
       "default": "./fesm2022/frame-kit-ui-ng-ui-nav-brand.mjs"
     },
-    "./ui/nav-group": {
-      "types": "./types/frame-kit-ui-ng-ui-nav-group.d.ts",
-      "default": "./fesm2022/frame-kit-ui-ng-ui-nav-group.mjs"
-    },
     "./ui/nav-separator": {
       "types": "./types/frame-kit-ui-ng-ui-nav-separator.d.ts",
       "default": "./fesm2022/frame-kit-ui-ng-ui-nav-separator.mjs"
@@ -209,10 +205,6 @@
       "types": "./types/frame-kit-ui-ng-ui-progress-bar.d.ts",
       "default": "./fesm2022/frame-kit-ui-ng-ui-progress-bar.mjs"
     },
-    "./ui/sidenav-link": {
-      "types": "./types/frame-kit-ui-ng-ui-sidenav-link.d.ts",
-      "default": "./fesm2022/frame-kit-ui-ng-ui-sidenav-link.mjs"
-    },
     "./ui/tabs": {
       "types": "./types/frame-kit-ui-ng-ui-tabs.d.ts",
       "default": "./fesm2022/frame-kit-ui-ng-ui-tabs.mjs"

package/types/frame-kit-ui-ng.d.ts

@@ -34,7 +34,6 @@ export * from '@frame-kit/ui-ng/ui/list-editor';
 export * from '@frame-kit/ui-ng/ui/loader';
 export * from '@frame-kit/ui-ng/ui/menu-item';
 export * from '@frame-kit/ui-ng/ui/nav-brand';
-export * from '@frame-kit/ui-ng/ui/nav-group';
 export * from '@frame-kit/ui-ng/ui/nav-separator';
 export * from '@frame-kit/ui-ng/ui/node-tree';
 export * from '@frame-kit/ui-ng/ui/node-tree-breadcrumb';
@@ -42,7 +41,6 @@ export * from '@frame-kit/ui-ng/ui/note';
 export * from '@frame-kit/ui-ng/ui/numbered-list';
 export * from '@frame-kit/ui-ng/ui/pagination';
 export * from '@frame-kit/ui-ng/ui/progress-bar';
-export * from '@frame-kit/ui-ng/ui/sidenav-link';
 export * from '@frame-kit/ui-ng/ui/tabs';
 export * from '@frame-kit/ui-ng/ui/timeline';
 export * from '@frame-kit/ui-ng/ui/toast';

package/fesm2022/frame-kit-ui-ng-ui-nav-group.mjs

@@ -1,117 +0,0 @@
-import * as i0 from '@angular/core';
-import { input, model, output, computed, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
-import * as i1 from '@angular/router';
-import { RouterModule } from '@angular/router';
-import { SidenavLinkComponent } from '@frame-kit/ui-ng/ui/sidenav-link';
-
-/**
- * Expandable nav group — renders a trigger row (icon + label, optionally
- * linked) and reveals projected children when `expanded` is true. Designed
- * to sit inside a collapsible sidenav: when the outer shell is collapsed,
- * clicking the row emits `requestOpen` so the host can pop the sidenav
- * open, and the group auto-expands once it's visible.
- */
-class NavGroupComponent {
-    // ===== INPUTS =====
-    /** Primary label text shown in the group trigger row. */
-    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    /** Optional icon name shown to the leading side of the label. */
-    icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
-    /** Size of the leading icon. */
-    iconSize = input('sm', ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
-    /** Optional router path; when set, the trigger navigates on click in expanded sidenav mode. */
-    routerLink = input(null, ...(ngDevMode ? [{ debugName: "routerLink" }] : /* istanbul ignore next */ []));
-    /**
-     * True when the containing sidenav is in its collapsed rail state.
-     * In that mode, clicking the trigger BOTH navigates via
-     * `routerLink` AND emits `requestOpen` so the host can expand the
-     * outer shell — the user lands on the group's route with the
-     * sidenav already open. The trigger never expands its own children
-     * inside the rail (no horizontal room); the rail-to-expanded
-     * transition is what reveals them.
-     */
-    collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
-    /**
-     * When true and the sidenav is in its expanded state, clicking the
-     * trigger row does NOT fold the group — children stay visible.
-     * Useful when the group's children are permanent navigation rather
-     * than a collapsible disclosure (e.g. a parent nav item that should
-     * always show its sub-pages while the sidenav is open). Clicks on
-     * the trigger still navigate via `routerLink`.
-     *
-     * Has no effect in collapsed (rail) mode — clicks there still
-     * navigate via `routerLink` and emit `requestOpen`, and `expanded`
-     * stays untouched regardless of this input.
-     */
-    lockedOpen = input(false, ...(ngDevMode ? [{ debugName: "lockedOpen" }] : /* istanbul ignore next */ []));
-    /**
-     * When true, renders a chevron at the trailing edge of the trigger row
-     * that points right while collapsed and rotates to point down while
-     * expanded. Decorative (`aria-hidden`); hidden in rail mode. Off by
-     * default so existing consumers are unaffected.
-     */
-    showChevron = input(false, ...(ngDevMode ? [{ debugName: "showChevron" }] : /* istanbul ignore next */ []));
-    // ===== MODELS =====
-    /** Whether the group is currently expanded, showing projected child links. */
-    expanded = model(false, ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
-    // ===== OUTPUTS =====
-    /**
-     * Emitted when the group is clicked while the outer sidenav is
-     * collapsed. Hosts typically listen to open their collapsible shell
-     * so the projected children become visible.
-     */
-    requestOpen = output();
-    // ===== BASE PROPS =====
-    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
-    // ===== COMPUTED =====
-    classes = computed(() => {
-        return [
-            'fk-nav-group',
-            this.expanded() ? 'fk-nav-group--expanded' : '',
-            this.collapsed() ? 'fk-nav-group--collapsed' : '',
-            this.className(),
-        ]
-            .filter(Boolean)
-            .join(' ');
-    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    get hostClass() {
-        return this.classes();
-    }
-    toggle() {
-        if (this.collapsed()) {
-            // In rail mode the children must not render inside the rail —
-            // there's no horizontal room and the visual hierarchy collapses.
-            // Just ask the host to expand the sidenav; once it does and
-            // `collapsed` flips to false, the consumer's `[expanded]`
-            // binding can push true and the children render in the now-open
-            // sidenav. We DO NOT set `expanded` here, so a click in rail
-            // mode never reveals children inside the rail itself.
-            this.requestOpen.emit();
-            return;
-        }
-        // Locked-open: in expanded sidenav mode, the trigger no longer
-        // folds the group on click. Navigation via `routerLink` still
-        // fires from the inner sidenav-link; this branch just suppresses
-        // the toggle behavior so children stay visible.
-        if (this.lockedOpen()) {
-            return;
-        }
-        this.expanded.update((v) => !v);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NavGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: NavGroupComponent, isStandalone: true, selector: "fk-nav-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, lockedOpen: { classPropertyName: "lockedOpen", publicName: "lockedOpen", isSignal: true, isRequired: false, transformFunction: null }, showChevron: { classPropertyName: "showChevron", publicName: "showChevron", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange", requestOpen: "requestOpen" }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<div class=\"fk-nav-group__row\" role=\"presentation\" (click)=\"toggle()\">\n  <fk-sidenav-link\n    class=\"fk-nav-group__link\"\n    [icon]=\"icon() ?? ''\"\n    [iconSize]=\"iconSize()\"\n    [label]=\"label()\"\n    [routerLink]=\"routerLink()\"\n  />\n\n  @if (showChevron()) {\n    <span\n      class=\"fk-nav-group__chevron\"\n      [class.fk-nav-group__chevron--open]=\"expanded()\"\n      aria-hidden=\"true\"\n    >\n      <svg\n        class=\"fk-nav-group__chevron-svg\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"14\"\n        height=\"14\"\n        viewBox=\"0 0 18 18\"\n      >\n        <path\n          d=\"M4.5 6.75L9 11.25L13.5 6.75\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          fill=\"none\"\n        />\n      </svg>\n    </span>\n  }\n</div>\n\n@if (expanded()) {\n  <!--\n    Stop child clicks from bubbling to the fk-nav-group host. When a\n    consumer binds [routerLink] on <fk-nav-group>, Angular attaches the\n    RouterLink directive to the host element in addition to our input \u2014\n    so an un-stopped child click would re-navigate to the parent URL\n    after the child's own RouterLink fires. This is an event absorber,\n    not an interactive element; keyboard activation fires click events\n    that bubble through the same path, so the a11y rules don't apply.\n  -->\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n  <div class=\"fk-nav-group__children\" (click)=\"$event.stopPropagation()\">\n    <ng-content />\n  </div>\n}\n", styles: [":host{display:block}.fk-nav-group__row{display:flex;align-items:center;gap:var(--fk-nav-group-row-gap, var(--fk-rhythm-1, .25rem))}.fk-nav-group__link{flex:1;min-width:0}.fk-nav-group__chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--fk-nav-group-chevron-color, var(--fk-color-muted, #64748b));transform:rotate(-90deg);transition:transform .15s ease}.fk-nav-group__chevron--open{transform:rotate(0)}.fk-nav-group__chevron-svg{display:block}:host(.fk-nav-group--collapsed) .fk-nav-group__chevron{display:none}.fk-nav-group__children{position:relative;display:flex;flex-direction:column;gap:var(--fk-nav-group-children-gap, var(--fk-rhythm-1, .25rem));padding-left:var(--fk-nav-group-children-indent, var(--fk-rhythm-6, 1.5rem));margin-top:var(--fk-nav-group-children-offset, var(--fk-rhythm-1, .25rem))}.fk-nav-group__children:before{content:\"\";position:absolute;top:0;bottom:0;left:var(--fk-nav-group-children-border-offset, var(--fk-sidenav-link-padding-inline, var(--fk-rhythm-3, .75rem)));width:var(--fk-nav-group-children-border-width, var(--fk-border-width, 1px));background:var(--fk-nav-group-children-border-color, var(--fk-color-border, #d9e2ee))}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: SidenavLinkComponent, selector: "fk-sidenav-link", inputs: ["icon", "iconSize", "label", "routerLink", "exact"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NavGroupComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'fk-nav-group', standalone: true, imports: [RouterModule, SidenavLinkComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fk-nav-group__row\" role=\"presentation\" (click)=\"toggle()\">\n  <fk-sidenav-link\n    class=\"fk-nav-group__link\"\n    [icon]=\"icon() ?? ''\"\n    [iconSize]=\"iconSize()\"\n    [label]=\"label()\"\n    [routerLink]=\"routerLink()\"\n  />\n\n  @if (showChevron()) {\n    <span\n      class=\"fk-nav-group__chevron\"\n      [class.fk-nav-group__chevron--open]=\"expanded()\"\n      aria-hidden=\"true\"\n    >\n      <svg\n        class=\"fk-nav-group__chevron-svg\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"14\"\n        height=\"14\"\n        viewBox=\"0 0 18 18\"\n      >\n        <path\n          d=\"M4.5 6.75L9 11.25L13.5 6.75\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          fill=\"none\"\n        />\n      </svg>\n    </span>\n  }\n</div>\n\n@if (expanded()) {\n  <!--\n    Stop child clicks from bubbling to the fk-nav-group host. When a\n    consumer binds [routerLink] on <fk-nav-group>, Angular attaches the\n    RouterLink directive to the host element in addition to our input \u2014\n    so an un-stopped child click would re-navigate to the parent URL\n    after the child's own RouterLink fires. This is an event absorber,\n    not an interactive element; keyboard activation fires click events\n    that bubble through the same path, so the a11y rules don't apply.\n  -->\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n  <div class=\"fk-nav-group__children\" (click)=\"$event.stopPropagation()\">\n    <ng-content />\n  </div>\n}\n", styles: [":host{display:block}.fk-nav-group__row{display:flex;align-items:center;gap:var(--fk-nav-group-row-gap, var(--fk-rhythm-1, .25rem))}.fk-nav-group__link{flex:1;min-width:0}.fk-nav-group__chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--fk-nav-group-chevron-color, var(--fk-color-muted, #64748b));transform:rotate(-90deg);transition:transform .15s ease}.fk-nav-group__chevron--open{transform:rotate(0)}.fk-nav-group__chevron-svg{display:block}:host(.fk-nav-group--collapsed) .fk-nav-group__chevron{display:none}.fk-nav-group__children{position:relative;display:flex;flex-direction:column;gap:var(--fk-nav-group-children-gap, var(--fk-rhythm-1, .25rem));padding-left:var(--fk-nav-group-children-indent, var(--fk-rhythm-6, 1.5rem));margin-top:var(--fk-nav-group-children-offset, var(--fk-rhythm-1, .25rem))}.fk-nav-group__children:before{content:\"\";position:absolute;top:0;bottom:0;left:var(--fk-nav-group-children-border-offset, var(--fk-sidenav-link-padding-inline, var(--fk-rhythm-3, .75rem)));width:var(--fk-nav-group-children-border-width, var(--fk-border-width, 1px));background:var(--fk-nav-group-children-border-color, var(--fk-color-border, #d9e2ee))}\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], lockedOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockedOpen", required: false }] }], showChevron: [{ type: i0.Input, args: [{ isSignal: true, alias: "showChevron", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], requestOpen: [{ type: i0.Output, args: ["requestOpen"] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], hostClass: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { NavGroupComponent };
-//# sourceMappingURL=frame-kit-ui-ng-ui-nav-group.mjs.map

package/fesm2022/frame-kit-ui-ng-ui-nav-group.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"frame-kit-ui-ng-ui-nav-group.mjs","sources":["../../../../packages/ui-ng/ui/nav-group/nav-group.component.ts","../../../../packages/ui-ng/ui/nav-group/nav-group.component.html","../../../../packages/ui-ng/ui/nav-group/frame-kit-ui-ng-ui-nav-group.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  HostBinding,\n  input,\n  model,\n  output,\n} from '@angular/core';\nimport { RouterModule } from '@angular/router';\n\nimport type { IconSize } from '@frame-kit/ui-ng/core/icon';\nimport { SidenavLinkComponent } from '@frame-kit/ui-ng/ui/sidenav-link';\n\n/**\n * Expandable nav group — renders a trigger row (icon + label, optionally\n * linked) and reveals projected children when `expanded` is true. Designed\n * to sit inside a collapsible sidenav: when the outer shell is collapsed,\n * clicking the row emits `requestOpen` so the host can pop the sidenav\n * open, and the group auto-expands once it's visible.\n */\n@Component({\n  selector: 'fk-nav-group',\n  standalone: true,\n  imports: [RouterModule, SidenavLinkComponent],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './nav-group.component.html',\n  styleUrl: './nav-group.component.scss',\n})\nexport class NavGroupComponent {\n  // ===== INPUTS =====\n  /** Primary label text shown in the group trigger row. */\n  readonly label = input.required<string>();\n  /** Optional icon name shown to the leading side of the label. */\n  readonly icon = input<string | null>(null);\n  /** Size of the leading icon. */\n  readonly iconSize = input<IconSize>('sm');\n  /** Optional router path; when set, the trigger navigates on click in expanded sidenav mode. */\n  readonly routerLink = input<string | string[] | null>(null);\n\n  /**\n   * True when the containing sidenav is in its collapsed rail state.\n   * In that mode, clicking the trigger BOTH navigates via\n   * `routerLink` AND emits `requestOpen` so the host can expand the\n   * outer shell — the user lands on the group's route with the\n   * sidenav already open. The trigger never expands its own children\n   * inside the rail (no horizontal room); the rail-to-expanded\n   * transition is what reveals them.\n   */\n  readonly collapsed = input<boolean>(false);\n\n  /**\n   * When true and the sidenav is in its expanded state, clicking the\n   * trigger row does NOT fold the group — children stay visible.\n   * Useful when the group's children are permanent navigation rather\n   * than a collapsible disclosure (e.g. a parent nav item that should\n   * always show its sub-pages while the sidenav is open). Clicks on\n   * the trigger still navigate via `routerLink`.\n   *\n   * Has no effect in collapsed (rail) mode — clicks there still\n   * navigate via `routerLink` and emit `requestOpen`, and `expanded`\n   * stays untouched regardless of this input.\n   */\n  readonly lockedOpen = input<boolean>(false);\n\n  /**\n   * When true, renders a chevron at the trailing edge of the trigger row\n   * that points right while collapsed and rotates to point down while\n   * expanded. Decorative (`aria-hidden`); hidden in rail mode. Off by\n   * default so existing consumers are unaffected.\n   */\n  readonly showChevron = input<boolean>(false);\n\n  // ===== MODELS =====\n  /** Whether the group is currently expanded, showing projected child links. */\n  readonly expanded = model<boolean>(false);\n\n  // ===== OUTPUTS =====\n  /**\n   * Emitted when the group is clicked while the outer sidenav is\n   * collapsed. Hosts typically listen to open their collapsible shell\n   * so the projected children become visible.\n   */\n  readonly requestOpen = output<void>();\n\n  // ===== BASE PROPS =====\n  readonly className = input<string>('');\n\n  // ===== COMPUTED =====\n  readonly classes = computed(() => {\n    return [\n      'fk-nav-group',\n      this.expanded() ? 'fk-nav-group--expanded' : '',\n      this.collapsed() ? 'fk-nav-group--collapsed' : '',\n      this.className(),\n    ]\n      .filter(Boolean)\n      .join(' ');\n  });\n\n  @HostBinding('class')\n  get hostClass() {\n    return this.classes();\n  }\n\n  protected toggle(): void {\n    if (this.collapsed()) {\n      // In rail mode the children must not render inside the rail —\n      // there's no horizontal room and the visual hierarchy collapses.\n      // Just ask the host to expand the sidenav; once it does and\n      // `collapsed` flips to false, the consumer's `[expanded]`\n      // binding can push true and the children render in the now-open\n      // sidenav. We DO NOT set `expanded` here, so a click in rail\n      // mode never reveals children inside the rail itself.\n      this.requestOpen.emit();\n\n      return;\n    }\n\n    // Locked-open: in expanded sidenav mode, the trigger no longer\n    // folds the group on click. Navigation via `routerLink` still\n    // fires from the inner sidenav-link; this branch just suppresses\n    // the toggle behavior so children stay visible.\n    if (this.lockedOpen()) {\n      return;\n    }\n\n    this.expanded.update((v) => !v);\n  }\n}\n","<div class=\"fk-nav-group__row\" role=\"presentation\" (click)=\"toggle()\">\n  <fk-sidenav-link\n    class=\"fk-nav-group__link\"\n    [icon]=\"icon() ?? ''\"\n    [iconSize]=\"iconSize()\"\n    [label]=\"label()\"\n    [routerLink]=\"routerLink()\"\n  />\n\n  @if (showChevron()) {\n    <span\n      class=\"fk-nav-group__chevron\"\n      [class.fk-nav-group__chevron--open]=\"expanded()\"\n      aria-hidden=\"true\"\n    >\n      <svg\n        class=\"fk-nav-group__chevron-svg\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"14\"\n        height=\"14\"\n        viewBox=\"0 0 18 18\"\n      >\n        <path\n          d=\"M4.5 6.75L9 11.25L13.5 6.75\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          fill=\"none\"\n        />\n      </svg>\n    </span>\n  }\n</div>\n\n@if (expanded()) {\n  <!--\n    Stop child clicks from bubbling to the fk-nav-group host. When a\n    consumer binds [routerLink] on <fk-nav-group>, Angular attaches the\n    RouterLink directive to the host element in addition to our input —\n    so an un-stopped child click would re-navigate to the parent URL\n    after the child's own RouterLink fires. This is an event absorber,\n    not an interactive element; keyboard activation fires click events\n    that bubble through the same path, so the a11y rules don't apply.\n  -->\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n  <div class=\"fk-nav-group__children\" (click)=\"$event.stopPropagation()\">\n    <ng-content />\n  </div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/frame-kit-ui-ng-ui-sidenav-link.mjs

@@ -1,42 +0,0 @@
-import * as i0 from '@angular/core';
-import { input, inject, computed, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
-import { RouterLink, RouterLinkActive } from '@angular/router';
-import { IconComponent } from '@frame-kit/ui-ng/core/icon';
-import { TooltipDirective } from '@frame-kit/ui-ng/directives/tooltip';
-import { AppShellComponent } from '@frame-kit/ui-ng/layouts/app-shell';
-
-class SidenavLinkComponent {
-    /** Optional icon name shown to the leading side of the link label. */
-    icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
-    /** Size of the leading icon. */
-    iconSize = input('sm', ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
-    /** Link text displayed next to the icon and used as a tooltip when the sidenav is collapsed. */
-    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    /** Router path the link navigates to; when null the element renders as a non-navigable button. */
-    routerLink = input(null, ...(ngDevMode ? [{ debugName: "routerLink" }] : /* istanbul ignore next */ []));
-    /** When true, the active class is applied only on an exact route match. */
-    exact = input(false, ...(ngDevMode ? [{ debugName: "exact" }] : /* istanbul ignore next */ []));
-    shell = inject(AppShellComponent, { optional: true });
-    isCollapsed = computed(() => this.shell?.isCollapsed() ?? false, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
-    hostClass = 'fk-sidenav-link';
-    /** Dismisses the parent sidenav on mobile when the link is activated. */
-    dismiss() {
-        this.shell?.dismissSidenav();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SidenavLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SidenavLinkComponent, isStandalone: true, selector: "fk-sidenav-link", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, exact: { classPropertyName: "exact", publicName: "exact", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "@if (routerLink()) {\n  <a\n    class=\"fk-sidenav-link__anchor\"\n    [routerLink]=\"routerLink()\"\n    routerLinkActive=\"fk-sidenav-link__anchor--active\"\n    [routerLinkActiveOptions]=\"{ exact: exact() }\"\n    [attr.aria-label]=\"isCollapsed() ? label() : null\"\n    [fkTooltip]=\"label()\"\n    [fkTooltipDisabled]=\"!isCollapsed()\"\n    fkTooltipPosition=\"right\"\n    (click)=\"dismiss()\"\n  >\n    @if (icon()) {\n      <fk-icon [name]=\"icon()!\" [size]=\"iconSize()\" />\n    }\n    @if (!isCollapsed()) {\n      <span class=\"fk-sidenav-link__label\">{{ label() }}</span>\n    }\n  </a>\n} @else {\n  <button\n    class=\"fk-sidenav-link__anchor\"\n    type=\"button\"\n    [attr.aria-label]=\"isCollapsed() ? label() : null\"\n    [fkTooltip]=\"label()\"\n    [fkTooltipDisabled]=\"!isCollapsed()\"\n    fkTooltipPosition=\"right\"\n    (click)=\"dismiss()\"\n  >\n    @if (icon()) {\n      <fk-icon [name]=\"icon()!\" [size]=\"iconSize()\" />\n    }\n    @if (!isCollapsed()) {\n      <span class=\"fk-sidenav-link__label\">{{ label() }}</span>\n    }\n  </button>\n}\n", styles: [".fk-sidenav-link{display:block}.fk-sidenav-link__anchor{display:flex;align-items:center;gap:var(--fk-sidenav-link-gap, var(--fk-rhythm-2, .5rem));width:100%;padding:var(--fk-sidenav-link-padding-block, var(--fk-rhythm-2, .5rem)) var(--fk-sidenav-link-padding-inline, var(--fk-rhythm-3, .75rem));border:none;border-radius:var(--fk-sidenav-link-radius, var(--fk-radius-md, .5rem));background:var(--fk-sidenav-link-bg, transparent);font-family:var(--fk-sidenav-link-font-family, var(--fk-font-family-base));font-size:var(--fk-sidenav-link-font-size, .9375rem);color:var(--fk-sidenav-link-color, var(--fk-color-text, #1f2d3d));text-align:left;text-decoration:none;white-space:nowrap;overflow:hidden;cursor:pointer;transition:background-color .15s ease}.fk-sidenav-link__anchor:hover{background-color:var(--fk-sidenav-link-bg-hover, var(--fk-color-surface-muted, #f7f9fb));color:var(--fk-sidenav-link-color-hover, var(--fk-color-primary, #0a84ff))}.fk-sidenav-link__anchor:focus-visible{outline:none;box-shadow:var(--fk-sidenav-link-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}.fk-sidenav-link__anchor--active,.fk-sidenav-link__anchor--active:hover{font-weight:var(--fk-sidenav-link-font-weight-active, var(--fk-font-weight-semibold, 600));color:var(--fk-sidenav-link-color-active, var(--fk-color-primary, #0a84ff));background-color:var(--fk-sidenav-link-bg-active, var(--fk-color-surface-muted, #f7f9fb))}.fk-app-shell--collapsed .fk-sidenav-link__anchor{justify-content:center;padding:var(--fk-sidenav-link-collapsed-padding, var(--fk-rhythm-2, .5rem))}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: IconComponent, selector: "fk-icon", inputs: ["name", "size", "color", "className", "id", "ariaLabel", "ariaHidden"] }, { kind: "directive", type: TooltipDirective, selector: "[fkTooltip]", inputs: ["fkTooltip", "fkTooltipPosition", "fkTooltipOffset", "fkTooltipShowDelay", "fkTooltipHideDelay", "fkTooltipDisabled", "fkTooltipClassName"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SidenavLinkComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'fk-sidenav-link', standalone: true, imports: [RouterLink, RouterLinkActive, IconComponent, TooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (routerLink()) {\n  <a\n    class=\"fk-sidenav-link__anchor\"\n    [routerLink]=\"routerLink()\"\n    routerLinkActive=\"fk-sidenav-link__anchor--active\"\n    [routerLinkActiveOptions]=\"{ exact: exact() }\"\n    [attr.aria-label]=\"isCollapsed() ? label() : null\"\n    [fkTooltip]=\"label()\"\n    [fkTooltipDisabled]=\"!isCollapsed()\"\n    fkTooltipPosition=\"right\"\n    (click)=\"dismiss()\"\n  >\n    @if (icon()) {\n      <fk-icon [name]=\"icon()!\" [size]=\"iconSize()\" />\n    }\n    @if (!isCollapsed()) {\n      <span class=\"fk-sidenav-link__label\">{{ label() }}</span>\n    }\n  </a>\n} @else {\n  <button\n    class=\"fk-sidenav-link__anchor\"\n    type=\"button\"\n    [attr.aria-label]=\"isCollapsed() ? label() : null\"\n    [fkTooltip]=\"label()\"\n    [fkTooltipDisabled]=\"!isCollapsed()\"\n    fkTooltipPosition=\"right\"\n    (click)=\"dismiss()\"\n  >\n    @if (icon()) {\n      <fk-icon [name]=\"icon()!\" [size]=\"iconSize()\" />\n    }\n    @if (!isCollapsed()) {\n      <span class=\"fk-sidenav-link__label\">{{ label() }}</span>\n    }\n  </button>\n}\n", styles: [".fk-sidenav-link{display:block}.fk-sidenav-link__anchor{display:flex;align-items:center;gap:var(--fk-sidenav-link-gap, var(--fk-rhythm-2, .5rem));width:100%;padding:var(--fk-sidenav-link-padding-block, var(--fk-rhythm-2, .5rem)) var(--fk-sidenav-link-padding-inline, var(--fk-rhythm-3, .75rem));border:none;border-radius:var(--fk-sidenav-link-radius, var(--fk-radius-md, .5rem));background:var(--fk-sidenav-link-bg, transparent);font-family:var(--fk-sidenav-link-font-family, var(--fk-font-family-base));font-size:var(--fk-sidenav-link-font-size, .9375rem);color:var(--fk-sidenav-link-color, var(--fk-color-text, #1f2d3d));text-align:left;text-decoration:none;white-space:nowrap;overflow:hidden;cursor:pointer;transition:background-color .15s ease}.fk-sidenav-link__anchor:hover{background-color:var(--fk-sidenav-link-bg-hover, var(--fk-color-surface-muted, #f7f9fb));color:var(--fk-sidenav-link-color-hover, var(--fk-color-primary, #0a84ff))}.fk-sidenav-link__anchor:focus-visible{outline:none;box-shadow:var(--fk-sidenav-link-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}.fk-sidenav-link__anchor--active,.fk-sidenav-link__anchor--active:hover{font-weight:var(--fk-sidenav-link-font-weight-active, var(--fk-font-weight-semibold, 600));color:var(--fk-sidenav-link-color-active, var(--fk-color-primary, #0a84ff));background-color:var(--fk-sidenav-link-bg-active, var(--fk-color-surface-muted, #f7f9fb))}.fk-app-shell--collapsed .fk-sidenav-link__anchor{justify-content:center;padding:var(--fk-sidenav-link-collapsed-padding, var(--fk-rhythm-2, .5rem))}\n"] }]
-        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], exact: [{ type: i0.Input, args: [{ isSignal: true, alias: "exact", required: false }] }], hostClass: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { SidenavLinkComponent };
-//# sourceMappingURL=frame-kit-ui-ng-ui-sidenav-link.mjs.map

package/fesm2022/frame-kit-ui-ng-ui-sidenav-link.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"frame-kit-ui-ng-ui-sidenav-link.mjs","sources":["../../../../packages/ui-ng/ui/sidenav-link/sidenav-link.component.ts","../../../../packages/ui-ng/ui/sidenav-link/sidenav-link.component.html","../../../../packages/ui-ng/ui/sidenav-link/frame-kit-ui-ng-ui-sidenav-link.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  HostBinding,\n  inject,\n  input,\n} from '@angular/core';\nimport { RouterLink, RouterLinkActive } from '@angular/router';\n\nimport { IconComponent } from '@frame-kit/ui-ng/core/icon';\nimport type { IconSize } from '@frame-kit/ui-ng/core/icon';\nimport { TooltipDirective } from '@frame-kit/ui-ng/directives/tooltip';\nimport { AppShellComponent } from '@frame-kit/ui-ng/layouts/app-shell';\n\n@Component({\n  selector: 'fk-sidenav-link',\n  standalone: true,\n  imports: [RouterLink, RouterLinkActive, IconComponent, TooltipDirective],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './sidenav-link.component.html',\n  styleUrl: './sidenav-link.component.scss',\n})\nexport class SidenavLinkComponent {\n  /** Optional icon name shown to the leading side of the link label. */\n  readonly icon = input<string | null>(null);\n  /** Size of the leading icon. */\n  readonly iconSize = input<IconSize>('sm');\n  /** Link text displayed next to the icon and used as a tooltip when the sidenav is collapsed. */\n  readonly label = input.required<string>();\n  /** Router path the link navigates to; when null the element renders as a non-navigable button. */\n  readonly routerLink = input<string | string[] | null>(null);\n  /** When true, the active class is applied only on an exact route match. */\n  readonly exact = input<boolean>(false);\n\n  private readonly shell = inject(AppShellComponent, { optional: true });\n\n  readonly isCollapsed = computed(() => this.shell?.isCollapsed() ?? false);\n\n  @HostBinding('class')\n  readonly hostClass = 'fk-sidenav-link';\n\n  /** Dismisses the parent sidenav on mobile when the link is activated. */\n  dismiss(): void {\n    this.shell?.dismissSidenav();\n  }\n}\n","@if (routerLink()) {\n  <a\n    class=\"fk-sidenav-link__anchor\"\n    [routerLink]=\"routerLink()\"\n    routerLinkActive=\"fk-sidenav-link__anchor--active\"\n    [routerLinkActiveOptions]=\"{ exact: exact() }\"\n    [attr.aria-label]=\"isCollapsed() ? label() : null\"\n    [fkTooltip]=\"label()\"\n    [fkTooltipDisabled]=\"!isCollapsed()\"\n    fkTooltipPosition=\"right\"\n    (click)=\"dismiss()\"\n  >\n    @if (icon()) {\n      <fk-icon [name]=\"icon()!\" [size]=\"iconSize()\" />\n    }\n    @if (!isCollapsed()) {\n      <span class=\"fk-sidenav-link__label\">{{ label() }}</span>\n    }\n  </a>\n} @else {\n  <button\n    class=\"fk-sidenav-link__anchor\"\n    type=\"button\"\n    [attr.aria-label]=\"isCollapsed() ? label() : null\"\n    [fkTooltip]=\"label()\"\n    [fkTooltipDisabled]=\"!isCollapsed()\"\n    fkTooltipPosition=\"right\"\n    (click)=\"dismiss()\"\n  >\n    @if (icon()) {\n      <fk-icon [name]=\"icon()!\" [size]=\"iconSize()\" />\n    }\n    @if (!isCollapsed()) {\n      <span class=\"fk-sidenav-link__label\">{{ label() }}</span>\n    }\n  </button>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/types/frame-kit-ui-ng-ui-nav-group.d.ts

@@ -1,67 +0,0 @@
-import * as _angular_core from '@angular/core';
-import { IconSize } from '@frame-kit/ui-ng/core/icon';
-export { IconSize as NavGroupIconSize } from '@frame-kit/ui-ng/core/icon';
-
-/**
- * Expandable nav group — renders a trigger row (icon + label, optionally
- * linked) and reveals projected children when `expanded` is true. Designed
- * to sit inside a collapsible sidenav: when the outer shell is collapsed,
- * clicking the row emits `requestOpen` so the host can pop the sidenav
- * open, and the group auto-expands once it's visible.
- */
-declare class NavGroupComponent {
-    /** Primary label text shown in the group trigger row. */
-    readonly label: _angular_core.InputSignal<string>;
-    /** Optional icon name shown to the leading side of the label. */
-    readonly icon: _angular_core.InputSignal<string | null>;
-    /** Size of the leading icon. */
-    readonly iconSize: _angular_core.InputSignal<IconSize>;
-    /** Optional router path; when set, the trigger navigates on click in expanded sidenav mode. */
-    readonly routerLink: _angular_core.InputSignal<string | string[] | null>;
-    /**
-     * True when the containing sidenav is in its collapsed rail state.
-     * In that mode, clicking the trigger BOTH navigates via
-     * `routerLink` AND emits `requestOpen` so the host can expand the
-     * outer shell — the user lands on the group's route with the
-     * sidenav already open. The trigger never expands its own children
-     * inside the rail (no horizontal room); the rail-to-expanded
-     * transition is what reveals them.
-     */
-    readonly collapsed: _angular_core.InputSignal<boolean>;
-    /**
-     * When true and the sidenav is in its expanded state, clicking the
-     * trigger row does NOT fold the group — children stay visible.
-     * Useful when the group's children are permanent navigation rather
-     * than a collapsible disclosure (e.g. a parent nav item that should
-     * always show its sub-pages while the sidenav is open). Clicks on
-     * the trigger still navigate via `routerLink`.
-     *
-     * Has no effect in collapsed (rail) mode — clicks there still
-     * navigate via `routerLink` and emit `requestOpen`, and `expanded`
-     * stays untouched regardless of this input.
-     */
-    readonly lockedOpen: _angular_core.InputSignal<boolean>;
-    /**
-     * When true, renders a chevron at the trailing edge of the trigger row
-     * that points right while collapsed and rotates to point down while
-     * expanded. Decorative (`aria-hidden`); hidden in rail mode. Off by
-     * default so existing consumers are unaffected.
-     */
-    readonly showChevron: _angular_core.InputSignal<boolean>;
-    /** Whether the group is currently expanded, showing projected child links. */
-    readonly expanded: _angular_core.ModelSignal<boolean>;
-    /**
-     * Emitted when the group is clicked while the outer sidenav is
-     * collapsed. Hosts typically listen to open their collapsible shell
-     * so the projected children become visible.
-     */
-    readonly requestOpen: _angular_core.OutputEmitterRef<void>;
-    readonly className: _angular_core.InputSignal<string>;
-    readonly classes: _angular_core.Signal<string>;
-    get hostClass(): string;
-    protected toggle(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NavGroupComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NavGroupComponent, "fk-nav-group", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconSize": { "alias": "iconSize"; "required": false; "isSignal": true; }; "routerLink": { "alias": "routerLink"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "lockedOpen": { "alias": "lockedOpen"; "required": false; "isSignal": true; }; "showChevron": { "alias": "showChevron"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; }, { "expanded": "expandedChange"; "requestOpen": "requestOpen"; }, never, ["*"], true, never>;
-}
-
-export { NavGroupComponent };

package/types/frame-kit-ui-ng-ui-sidenav-link.d.ts

@@ -1,24 +0,0 @@
-import * as _angular_core from '@angular/core';
-import { IconSize } from '@frame-kit/ui-ng/core/icon';
-
-declare class SidenavLinkComponent {
-    /** Optional icon name shown to the leading side of the link label. */
-    readonly icon: _angular_core.InputSignal<string | null>;
-    /** Size of the leading icon. */
-    readonly iconSize: _angular_core.InputSignal<IconSize>;
-    /** Link text displayed next to the icon and used as a tooltip when the sidenav is collapsed. */
-    readonly label: _angular_core.InputSignal<string>;
-    /** Router path the link navigates to; when null the element renders as a non-navigable button. */
-    readonly routerLink: _angular_core.InputSignal<string | string[] | null>;
-    /** When true, the active class is applied only on an exact route match. */
-    readonly exact: _angular_core.InputSignal<boolean>;
-    private readonly shell;
-    readonly isCollapsed: _angular_core.Signal<boolean>;
-    readonly hostClass = "fk-sidenav-link";
-    /** Dismisses the parent sidenav on mobile when the link is activated. */
-    dismiss(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SidenavLinkComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SidenavLinkComponent, "fk-sidenav-link", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconSize": { "alias": "iconSize"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "routerLink": { "alias": "routerLink"; "required": false; "isSignal": true; }; "exact": { "alias": "exact"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
-}
-
-export { SidenavLinkComponent };

package/ui/nav-group/README.md

@@ -1,170 +0,0 @@
-# fk-nav-group
-
-An expandable sidenav group — renders a clickable trigger row (icon + label, optionally routed) and reveals projected child nav items when expanded. Designed to sit inside a collapsible shell so that clicks on a collapsed rail pop the shell open and auto-expand the group.
-
----
-
-## API
-
-### Inputs
-
-| Input        | Type                         | Default | Description                                                                                                                  |
-| ------------ | ---------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------- |
-| `label`      | `string`                     | —       | **Required.** Text rendered on the trigger row.                                                                              |
-| `icon`       | `string \| null`             | `null`  | Icon name rendered before the label.                                                                                         |
-| `iconSize`   | `IconSize`                   | `"sm"`  | Size passed through to the trigger's `fk-sidenav-link`.                                                                      |
-| `routerLink` | `string \| string[] \| null` | `null`  | Destination for the trigger's anchor. Active in both expanded and collapsed states.                                          |
-| `collapsed`  | `boolean`                    | `false` | Set this to `true` when the outer sidenav is in its collapsed rail state — clicks then both navigate AND emit `requestOpen`. |
-| `lockedOpen` | `boolean`                    | `false` | When `true`, clicking an expanded group's trigger no longer folds it — children stay visible (navigation via `routerLink` still fires). No effect in collapsed rail mode.   |
-| `showChevron`| `boolean`                    | `false` | Renders a trailing disclosure chevron that points right while collapsed and rotates to point down while expanded. Decorative; hidden in rail mode.                          |
-| `className`  | `string`                     | `''`    | Additional CSS classes merged onto the host element.                                                                         |
-
-### Models
-
-| Model      | Type      | Default | Description                                                                 |
-| ---------- | --------- | ------- | --------------------------------------------------------------------------- |
-| `expanded` | `boolean` | `false` | Two-way bound expansion state. Flipped by the built-in toggle on row click. |
-
-### Outputs
-
-| Output        | Type   | Description                                                                                                                                                                                                                                                               |
-| ------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `requestOpen` | `void` | Emitted only when the trigger is clicked while `collapsed` is `true`. Hosts typically listen to open their collapsible outer shell. The trigger also navigates via `routerLink` on the same click, so the user lands on the group's route with the shell already opening. |
-
-### Content
-
-`fk-nav-group` projects its child nav items into the expanded body:
-
-```html
-<fk-nav-group label="Integrations" icon="integrations">
-  <fk-sidenav-link icon="integrations" label="API Keys" routerLink="/integrations/api-keys" />
-  <fk-sidenav-link icon="integrations" label="Webhooks" routerLink="/integrations/webhooks" />
-</fk-nav-group>
-```
-
----
-
-## Features
-
-- Click-to-toggle expansion with two-way `expanded` model (suppressed by `lockedOpen`)
-- Router integration via `routerLink` — navigates in both expanded and collapsed states
-- `requestOpen` output bridges to a collapsible outer shell (`fk-app-shell` and friends) — fires alongside navigation when clicked in rail mode
-- Content projection for arbitrary child rows — `fk-sidenav-link`, section titles, custom markers
-- Token-driven spacing (`--fk-nav-group-row-gap`, `--fk-nav-group-children-gap`, `--fk-nav-group-children-indent`, `--fk-nav-group-children-offset`)
-- Section rule — a vertical line brackets the expanded children, flush-left under the icon/label, tokenized via `--fk-nav-group-children-border-{width,color,offset}` (removable)
-- Optional disclosure chevron (`showChevron`) — points right collapsed, rotates down when expanded; colour via `--fk-nav-group-chevron-color`
-
----
-
-## Quick Start
-
-```html
-<fk-nav-group label="Integrations" icon="integrations" iconSize="md" [routerLink]="['/integrations']" [collapsed]="sidenavCollapsed()" [(expanded)]="integrationsExpanded" (requestOpen)="openSidenav()">
-  <fk-sidenav-link icon="integrations" label="API Keys" [routerLink]="['/integrations/api-keys']" />
-  <fk-sidenav-link icon="integrations" label="Applications" [routerLink]="['/integrations/applications']" />
-</fk-nav-group>
-```
-
----
-
-## Import
-
-```ts
-import { NavGroupComponent } from '@frame-kit/ui-ng';
-```
-
-```ts
-@Component({
-  selector: 'app-example',
-  imports: [NavGroupComponent],
-  templateUrl: './example.component.html',
-})
-export class ExampleComponent {}
-```
-
----
-
-## Selector
-
-```html
-<fk-nav-group></fk-nav-group>
-```
-
----
-
-## Examples
-
-### Flat list with auto-expansion
-
-```html
-<fk-nav-group label="Core Concepts" icon="book-outline" [(expanded)]="expanded">
-  <fk-sidenav-link icon="book-outline" label="Authentication" routerLink="/docs/authentication" />
-  <fk-sidenav-link icon="book-outline" label="Roles" routerLink="/docs/roles" />
-  <fk-sidenav-link icon="book-outline" label="Permissions" routerLink="/docs/permissions" />
-</fk-nav-group>
-```
-
-### Inside a collapsible sidenav
-
-```html
-<fk-nav-group label="Docs" icon="book-outline" [collapsed]="shellCollapsed()" [(expanded)]="docsExpanded" (requestOpen)="shellCollapsed.set(false)">
-  <fk-sidenav-link label="Getting started" routerLink="/docs" />
-</fk-nav-group>
-```
-
----
-
-## Accessibility
-
-- Trigger row is a `role="presentation"` wrapper containing a keyboard-navigable `fk-sidenav-link` — the sidenav-link handles focus and keyboard activation
-- Expansion state is reflected through the host class `fk-nav-group--expanded`; consumers can add further ARIA attributes via `className` if needed
-- Keyboard activation (Enter on the focused trigger) follows the same path as a mouse click — navigates via `routerLink` and, when `collapsed` is `true`, also emits `requestOpen` so screen-reader users land on the destination with the rail expanding behind them
-
----
-
-## Design Tokens
-
-```scss
---fk-nav-group-row-gap;
---fk-nav-group-children-gap;
---fk-nav-group-children-indent;
---fk-nav-group-children-offset;
---fk-nav-group-children-border-width;  // section rule width (default --fk-border-width / 1px)
---fk-nav-group-children-border-color;  // section rule colour (default --fk-color-border)
---fk-nav-group-children-border-offset; // section rule x-position (see below)
---fk-nav-group-chevron-color;          // disclosure chevron colour (default --fk-color-muted)
-```
-
-The expanded children column carries a quiet vertical **section rule** by
-default — a line that brackets the nested items, aligned flush-left with the
-trigger row's content-left edge (the icon when present, the label text
-otherwise — both start at the link's inline padding, so a single offset
-covers both, independent of icon size). The colour defaults to the semantic
-`--fk-color-border`, so the rule adapts to dark mode through the fallback
-chain with no dedicated dark token.
-
-Override `--fk-nav-group-children-border-offset` to pin the line elsewhere, or
-remove the rule by zeroing the width / making the colour transparent.
-
-Override in your app stylesheet:
-
-```scss
-:root {
-  --fk-nav-group-children-indent: 1rem;
-  --fk-nav-group-children-gap: var(--fk-rhythm-2);
-}
-
-// Remove the section rule for a particular scope:
-.flat-nav {
-  --fk-nav-group-children-border-width: 0;
-}
-```
-
----
-
-## Behavior Notes
-
-- The built-in `toggle()` decides what happens to `expanded` on click: in rail mode it leaves `expanded` alone and only emits `requestOpen` (children must not render inside the rail); in expanded mode it flips `expanded` unless `lockedOpen` is `true`. Navigation via `routerLink` happens independently on the inner sidenav-link's anchor in both states. If you want custom behavior, listen to `(requestOpen)` and drive `[(expanded)]` yourself.
-- The trigger row composes `fk-sidenav-link` — you get the same active-route styling and keyboard semantics for free.
-- The section rule is an absolutely-positioned `::before` on the children column (not a `border-left`), so its x-position can anchor to the icon or text. It spans the full height of the children and sits behind them; child rows render normally on top. It only shows while the group is expanded (the children column isn't rendered otherwise).
-- No opinionated max-width — the trigger fills the row. Cap the width at the consumer level if you need it (e.g., docs shells clamp their top-level items to 18rem).

package/ui/sidenav-link/README.md

@@ -1,214 +0,0 @@
-# fk-sidenav-link
-
-A token-driven sidebar navigation link that renders an icon and label, automatically hiding the label when the parent `fk-app-shell` is collapsed.
-
----
-
-## API
-
-### Inputs
-
-| Input      | Type                             | Default | Description                                                                    |
-| ---------- | -------------------------------- | ------- | ------------------------------------------------------------------------------ |
-| icon       | `string`                         | —       | **Required.** Icon name from the icon registry                                 |
-| iconSize   | `IconSize`                       | `"sm"`  | Size of the icon (`"xs"`, `"sm"`, `"md"`, `"lg"`, `"xl"`, or custom CSS value) |
-| label      | `string`                         | —       | **Required.** Visible text label                                               |
-| routerLink | `string` \| `string[]` \| `null` | `null`  | Angular Router link — renders `<a>` when set                                   |
-| exact      | `boolean`                        | `false` | Use exact match for `routerLinkActive` highlighting                            |
-
-### Methods
-
-| Method    | Description                                                              |
-| --------- | ------------------------------------------------------------------------ |
-| dismiss() | Calls `dismissSidenav()` on the parent app-shell (closes mobile overlay) |
-
-### Computed (read-only)
-
-| Property    | Type              | Description                                        |
-| ----------- | ----------------- | -------------------------------------------------- |
-| isCollapsed | `Signal<boolean>` | Whether the parent app-shell is in collapsed state |
-
----
-
-## Features
-
-- Renders `<a>` with `routerLink` when a route is provided, `<button>` otherwise
-- `routerLinkActive` class applied automatically for active route highlighting
-- Label hides when parent `fk-app-shell` is collapsed (icon-only rail)
-- Auto-dismisses mobile sidebar overlay on click
-- Works standalone (outside an app-shell) — collapse detection gracefully defaults to `false`
-- Token-driven styling with full override capability
-
----
-
-## Quick Start
-
-```html
-<fk-sidenav-link icon="chart-activity-fill" label="Overview" routerLink="/app" [exact]="true" />
-```
-
----
-
-## Import
-
-```ts
-import { SidenavLinkComponent } from '@frame-kit/ui-ng';
-```
-
-```ts
-@Component({
-  selector: 'app-sidebar',
-  imports: [SidenavLinkComponent],
-  templateUrl: './sidebar.component.html',
-})
-export class SidebarComponent {}
-```
-
----
-
-## Selector
-
-```html
-<fk-sidenav-link />
-```
-
----
-
-## Examples
-
-### With Router Link
-
-```html
-<fk-sidenav-link icon="chart-activity-fill" label="Overview" routerLink="/app" [exact]="true" />
-```
-
-### Button Mode (no route)
-
-Renders a `<button>` instead of `<a>`. Useful for actions like opening a dialog.
-
-```html
-<fk-sidenav-link icon="email" label="Notifications" />
-```
-
-### Nav List
-
-```html
-<nav style="display: flex; flex-direction: column; gap: 0.25rem;">
-  <fk-sidenav-link icon="chart-activity-fill" label="Overview" routerLink="/app" [exact]="true" />
-  <fk-sidenav-link icon="organization" label="Properties" />
-  <fk-sidenav-link icon="email" label="Notifications" />
-  <fk-sidenav-link icon="lock" label="Compliance" />
-  <fk-sidenav-link icon="shield-alert" label="Insurance" />
-</nav>
-```
-
-### Inside App Shell
-
-```html
-<fk-app-shell mode="icon">
-  <nav appShellSidenav>
-    <fk-sidenav-link icon="chart-activity-fill" label="Overview" routerLink="/app" [exact]="true" />
-    <fk-sidenav-link icon="organization" label="Properties" />
-    <fk-sidenav-link icon="email" label="Notifications" />
-  </nav>
-
-  <div appShellSidenavFooter>
-    <fk-sidenav-link icon="info" label="Help & Support" />
-  </div>
-
-  <div appShellContent>
-    <router-outlet />
-  </div>
-</fk-app-shell>
-```
-
-When the shell is collapsed, only icons are shown. When expanded, icons and labels are both visible.
-
----
-
-## Accessibility
-
-- Renders a native `<a>` or `<button>` element — keyboard accessible by default
-- Supports Enter and Space through native element behavior
-- `focus-visible` ring applied via CSS token
-- `routerLinkActive` provides visual indication of the current route
-- When collapsed, the icon remains visible and the label is removed from the DOM (not just hidden)
-- When collapsed, the host carries `aria-label="<label>"` so screen readers still get a name for the link, and a tooltip appears to the right on hover or keyboard focus (via the `[fkTooltip]` directive). When expanded, the visible label text serves both purposes — `aria-label` is omitted and the tooltip is disabled.
-
-### Recommended
-
-Always register the icon before use:
-
-```ts
-provideIcons({
-  'chart-activity-fill': chartActivityFill,
-  organization,
-  email,
-});
-```
-
----
-
-## Design Tokens
-
-### Component Tokens
-
-```
---fk-sidenav-link-gap
---fk-sidenav-link-padding-block
---fk-sidenav-link-padding-inline
---fk-sidenav-link-radius
---fk-sidenav-link-bg
---fk-sidenav-link-bg-hover
---fk-sidenav-link-bg-active
---fk-sidenav-link-font-family
---fk-sidenav-link-font-size
---fk-sidenav-link-font-weight-active
---fk-sidenav-link-color
---fk-sidenav-link-color-hover
---fk-sidenav-link-color-active
---fk-sidenav-link-focus-ring
-```
-
-Each component token falls back to a semantic token, then a raw value. For example:
-
-```
---fk-sidenav-link-color → --fk-color-text → #1f2d3d
---fk-sidenav-link-color-hover → --fk-color-primary → #0a84ff
---fk-sidenav-link-color-active → --fk-color-primary → #0a84ff
---fk-sidenav-link-radius → --fk-radius-md → 0.5rem
---fk-sidenav-link-bg-hover → --fk-color-surface-dim → #edf1f5
-```
-
-### Customizing Tokens
-
-Override tokens at any scope:
-
-```css
-:root {
-  --fk-sidenav-link-color: #4338ca;
-  --fk-sidenav-link-bg-hover: #eef2ff;
-  --fk-sidenav-link-bg-active: #e0e7ff;
-  --fk-sidenav-link-font-weight-active: 700;
-  --fk-sidenav-link-radius: 0.25rem;
-}
-```
-
-Or scope to a specific context:
-
-```css
-.dark-theme fk-sidenav-link {
-  --fk-sidenav-link-color: #e2e8f0;
-  --fk-sidenav-link-bg-hover: #1e293b;
-  --fk-sidenav-link-bg-active: #334155;
-}
-```
-
----
-
-## Behavior Notes
-
-- When used inside `fk-app-shell`, the component injects the parent via `inject(AppShellComponent, { optional: true })` to read collapse state
-- When used outside an app-shell, `isCollapsed` is always `false` and labels are always visible
-- Clicking any link calls `dismissSidenav()` on the parent shell, which closes the mobile overlay
-- In collapsed state, the anchor centers its icon with `justify-content: center` and removes inline padding via the `.fk-app-shell--collapsed .fk-sidenav-link__anchor` rule