@frame-kit/ui-ng 0.0.6 → 0.1.0

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