@frame-kit/ui-ng 0.1.6 → 0.1.8

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

@@ -1,27 +1,43 @@
-import * as _angular_core from '@angular/core';
-import { ElementRef } from '@angular/core';
+import * as i0 from '@angular/core';
+import { ElementRef, InjectionToken } from '@angular/core';
 
 declare class MenuItemComponent {
-    /** Optional icon name rendered to the leading side of the label. */
-    readonly icon: _angular_core.InputSignal<string | null>;
     /** When true, applies destructive (danger) color styling to the item. */
-    readonly danger: _angular_core.InputSignal<boolean>;
+    readonly danger: i0.InputSignal<boolean>;
     /** When true, prevents interaction and applies disabled styling. */
-    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly disabled: i0.InputSignal<boolean>;
     /** Fires when the user activates the item via click or keyboard. */
-    readonly itemClick: _angular_core.OutputEmitterRef<void>;
+    readonly itemClick: i0.OutputEmitterRef<void>;
     readonly elRef: ElementRef<any>;
-    readonly classes: _angular_core.Signal<string>;
+    readonly classes: i0.Signal<string>;
     get hostClass(): string;
     onClick(): void;
     onKeydown(event: KeyboardEvent): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MenuItemComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MenuItemComponent, "fk-menu-item", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "danger": { "alias": "danger"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; }, never, ["*"], true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MenuItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MenuItemComponent, "fk-menu-item", never, { "danger": { "alias": "danger"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; }, never, ["[fkMenuItemIcon]", "*"], true, never>;
+}
+
+/** Injection token for the leading-icon slot of `fk-menu-item`. */
+declare const FK_MENU_ITEM_ICON: InjectionToken<FkMenuItemIconDirective>;
+/**
+ * Marks projected content as the leading icon of an `fk-menu-item`. Project any
+ * icon element (the app owns the icon system):
+ *
+ * ```html
+ * <fk-menu-item>
+ *   <fk-icon fkMenuItemIcon name="pen-outline" />
+ *   Edit
+ * </fk-menu-item>
+ * ```
+ */
+declare class FkMenuItemIconDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<FkMenuItemIconDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<FkMenuItemIconDirective, "[fkMenuItemIcon]", never, {}, {}, never, never, true, never>;
 }
 
 declare class MenuSeparatorComponent {
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MenuSeparatorComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MenuSeparatorComponent, "fk-menu-separator", never, {}, {}, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MenuSeparatorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MenuSeparatorComponent, "fk-menu-separator", never, {}, {}, never, never, true, never>;
 }
 
-export { MenuItemComponent, MenuSeparatorComponent };
+export { FK_MENU_ITEM_ICON, FkMenuItemIconDirective, MenuItemComponent, MenuSeparatorComponent };

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

@@ -55,6 +55,11 @@ declare class FkNodeTreeComponent {
     readonly selectedNodeId: _angular_core.InputSignal<string | undefined>;
     /** Controlled set of expanded node IDs; when undefined the tree manages expansion internally. */
     readonly expandedNodeIds: _angular_core.InputSignal<string[] | undefined>;
+    /** Optional template rendering each row's leading icon (the app owns the icon
+     *  system). Receives the node as `$implicit`; render it from `node.icon`. */
+    readonly iconTemplate: _angular_core.InputSignal<TemplateRef<{
+        $implicit: FlatNode;
+    }> | undefined>;
     /** When true, rows can be dragged to reorder or reparent nodes. */
     readonly draggable: _angular_core.InputSignal<boolean>;
     /** Optional guard called during drag to determine whether a drop at a given position is allowed. */
@@ -90,7 +95,7 @@ declare class FkNodeTreeComponent {
     private clearAutoExpand;
     private resetDragState;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FkNodeTreeComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FkNodeTreeComponent, "fk-node-tree", never, { "className": { "alias": "className"; "required": false; "isSignal": true; }; "nodes": { "alias": "nodes"; "required": true; "isSignal": true; }; "selectedNodeId": { "alias": "selectedNodeId"; "required": false; "isSignal": true; }; "expandedNodeIds": { "alias": "expandedNodeIds"; "required": false; "isSignal": true; }; "draggable": { "alias": "draggable"; "required": false; "isSignal": true; }; "canDrop": { "alias": "canDrop"; "required": false; "isSignal": true; }; }, { "nodeSelect": "nodeSelect"; "nodeExpand": "nodeExpand"; "nodeDrop": "nodeDrop"; }, ["rowTemplate"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FkNodeTreeComponent, "fk-node-tree", never, { "className": { "alias": "className"; "required": false; "isSignal": true; }; "nodes": { "alias": "nodes"; "required": true; "isSignal": true; }; "selectedNodeId": { "alias": "selectedNodeId"; "required": false; "isSignal": true; }; "expandedNodeIds": { "alias": "expandedNodeIds"; "required": false; "isSignal": true; }; "iconTemplate": { "alias": "iconTemplate"; "required": false; "isSignal": true; }; "draggable": { "alias": "draggable"; "required": false; "isSignal": true; }; "canDrop": { "alias": "canDrop"; "required": false; "isSignal": true; }; }, { "nodeSelect": "nodeSelect"; "nodeExpand": "nodeExpand"; "nodeDrop": "nodeDrop"; }, ["rowTemplate"], never, true, never>;
 }
 
 declare function isDescendantOf(nodeId: string, ancestorId: string, childrenMap: Map<string | null, TreeNode[]>): boolean;
@@ -111,6 +116,11 @@ declare class FkNodeTreeRowComponent {
     readonly showDragHandle: _angular_core.InputSignal<boolean>;
     /** Optional custom template used to render the row content. */
     readonly customTemplate: _angular_core.InputSignal<TemplateRef<NodeTreeRowContext> | undefined>;
+    /** Optional template rendering the row's leading icon (the app owns the icon).
+     *  Receives the node as `$implicit`; render it from `node.icon`. */
+    readonly iconTemplate: _angular_core.InputSignal<TemplateRef<{
+        $implicit: FlatNode;
+    }> | undefined>;
     /** Fires when the user clicks the expand/collapse chevron. */
     readonly toggleNode: _angular_core.OutputEmitterRef<void>;
     /** Fires when the user clicks the row body to select the node. */
@@ -128,7 +138,7 @@ declare class FkNodeTreeRowComponent {
     onClick(): void;
     onToggleClick(event: MouseEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FkNodeTreeRowComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FkNodeTreeRowComponent, "fk-node-tree-row", never, { "className": { "alias": "className"; "required": false; "isSignal": true; }; "node": { "alias": "node"; "required": true; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "dropPosition": { "alias": "dropPosition"; "required": false; "isSignal": true; }; "isDragSource": { "alias": "isDragSource"; "required": false; "isSignal": true; }; "showDragHandle": { "alias": "showDragHandle"; "required": false; "isSignal": true; }; "customTemplate": { "alias": "customTemplate"; "required": false; "isSignal": true; }; }, { "toggleNode": "toggleNode"; "selectNode": "selectNode"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FkNodeTreeRowComponent, "fk-node-tree-row", never, { "className": { "alias": "className"; "required": false; "isSignal": true; }; "node": { "alias": "node"; "required": true; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "dropPosition": { "alias": "dropPosition"; "required": false; "isSignal": true; }; "isDragSource": { "alias": "isDragSource"; "required": false; "isSignal": true; }; "showDragHandle": { "alias": "showDragHandle"; "required": false; "isSignal": true; }; "customTemplate": { "alias": "customTemplate"; "required": false; "isSignal": true; }; "iconTemplate": { "alias": "iconTemplate"; "required": false; "isSignal": true; }; }, { "toggleNode": "toggleNode"; "selectNode": "selectNode"; }, never, ["*"], true, never>;
 }
 
 export { FkNodeTreeComponent, FkNodeTreeRowComponent, FkNodeTreeRowDirective, buildChildrenMap, flattenTree, isDescendantOf };

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

@@ -1,4 +1,5 @@
 import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
 
 type TimelineOrientation = 'vertical' | 'horizontal';
 type TimelineAlign = 'start' | 'end' | 'alternate';
@@ -16,6 +17,11 @@ interface TimelineItemData {
 declare class TimelineComponent {
     /** Array of timeline item data objects rendered in order. */
     readonly items: _angular_core.InputSignal<TimelineItemData[]>;
+    /** Optional template rendering each item's marker icon (the app owns the icon
+     *  system). Receives the item as `$implicit`; render it from `item.icon`. */
+    readonly iconTemplate: _angular_core.InputSignal<TemplateRef<{
+        $implicit: TimelineItemData;
+    }> | undefined>;
     /** Direction the timeline runs — vertical stacks items top-to-bottom, horizontal left-to-right. */
     readonly orientation: _angular_core.InputSignal<TimelineOrientation>;
     /** Alignment of the item content relative to the connector line. */
@@ -35,7 +41,7 @@ declare class TimelineComponent {
     get hostAriaOrientation(): TimelineOrientation;
     get hostId(): string | null;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TimelineComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TimelineComponent, "fk-timeline", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "reverse": { "alias": "reverse"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TimelineComponent, "fk-timeline", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "iconTemplate": { "alias": "iconTemplate"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "reverse": { "alias": "reverse"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 export { TimelineComponent };

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

@@ -1,10 +1,17 @@
 import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
 import { AvatarStatus, AvatarSize } from '@frame-kit/ui-ng/ui/avatar';
 import { DropdownMenuComponent } from '@frame-kit/ui-ng/ui/dropdown-menu';
 
 interface MenuItem {
     label: string;
     value: string;
+    /**
+     * Icon identifier for this item. The widget does **not** render it directly
+     * (ui-ng is icon-agnostic) — pass an `iconTemplate` to `fk-user-menu` that
+     * reads this field and renders your own icon. Items render without an icon
+     * when no `iconTemplate` is supplied.
+     */
     icon?: string;
     disabled?: boolean;
     danger?: boolean;
@@ -31,6 +38,14 @@ declare class UserMenuComponent {
     readonly showStatus: _angular_core.InputSignal<boolean>;
     /** Array of menu item configurations rendered in the dropdown. */
     readonly menuItems: _angular_core.InputSignal<MenuItem[]>;
+    /**
+     * Optional template used to render each item's leading icon (the app owns the
+     * icon system). Receives the `MenuItem` as `$implicit`; render the icon from
+     * `item.icon`. When omitted, items render without an icon.
+     */
+    readonly iconTemplate: _angular_core.InputSignal<TemplateRef<{
+        $implicit: MenuItem;
+    }> | null>;
     /** Preferred placement of the dropdown panel relative to the trigger. */
     readonly placement: _angular_core.InputSignal<MenuPlacement>;
     /** Size of the avatar trigger. */
@@ -80,7 +95,7 @@ declare class UserMenuComponent {
     /** Toggles the user-menu dropdown programmatically. */
     toggle(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UserMenuComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UserMenuComponent, "fk-user-menu", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "email": { "alias": "email"; "required": false; "isSignal": true; }; "avatarUrl": { "alias": "avatarUrl"; "required": false; "isSignal": true; }; "initials": { "alias": "initials"; "required": false; "isSignal": true; }; "userId": { "alias": "userId"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "showStatus": { "alias": "showStatus"; "required": false; "isSignal": true; }; "menuItems": { "alias": "menuItems"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "showName": { "alias": "showName"; "required": false; "isSignal": true; }; "showEmail": { "alias": "showEmail"; "required": false; "isSignal": true; }; "showChevron": { "alias": "showChevron"; "required": false; "isSignal": true; }; "infoPlacement": { "alias": "infoPlacement"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "avatarClick": "avatarClick"; "menuOpen": "menuOpen"; "menuClose": "menuClose"; "menuItemClick": "menuItemClick"; "logoutClick": "logoutClick"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UserMenuComponent, "fk-user-menu", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "email": { "alias": "email"; "required": false; "isSignal": true; }; "avatarUrl": { "alias": "avatarUrl"; "required": false; "isSignal": true; }; "initials": { "alias": "initials"; "required": false; "isSignal": true; }; "userId": { "alias": "userId"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "showStatus": { "alias": "showStatus"; "required": false; "isSignal": true; }; "menuItems": { "alias": "menuItems"; "required": false; "isSignal": true; }; "iconTemplate": { "alias": "iconTemplate"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "showName": { "alias": "showName"; "required": false; "isSignal": true; }; "showEmail": { "alias": "showEmail"; "required": false; "isSignal": true; }; "showChevron": { "alias": "showChevron"; "required": false; "isSignal": true; }; "infoPlacement": { "alias": "infoPlacement"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "avatarClick": "avatarClick"; "menuOpen": "menuOpen"; "menuClose": "menuClose"; "menuItemClick": "menuItemClick"; "logoutClick": "logoutClick"; }, never, never, true, never>;
 }
 
 export { UserMenuComponent };

package/ui/dropdown-menu/README.md

@@ -52,17 +52,16 @@ Applied to an `<ng-template>` that contains menu items. The template is rendered
 
 ### fk-menu-item
 
-| Input      | Type             | Default | Description                               |
-| ---------- | ---------------- | ------- | ----------------------------------------- |
-| `icon`     | `string \| null` | `null`  | Optional icon name shown before the label |
-| `danger`   | `boolean`        | `false` | Applies destructive/danger styling        |
-| `disabled` | `boolean`        | `false` | Disables the item                         |
+| Input      | Type      | Default | Description                        |
+| ---------- | --------- | ------- | ---------------------------------- |
+| `danger`   | `boolean` | `false` | Applies destructive/danger styling |
+| `disabled` | `boolean` | `false` | Disables the item                  |
 
 | Output      | Type   | Description                        |
 | ----------- | ------ | ---------------------------------- |
 | `itemClick` | `void` | Emitted when the item is activated |
 
-The item label is provided through content projection.
+The item label is the default projected content; a leading icon is projected via the `[fkMenuItemIcon]` slot (project your own `fk-icon`). See the `fk-menu-item` README.
 
 ### fk-menu-separator
 
@@ -90,10 +89,10 @@ A visual divider between menu item groups. No inputs or outputs.
 <fk-dropdown-menu>
   <button fkDropdownTrigger>Actions</button>
   <ng-template fkDropdownPanel>
-    <fk-menu-item icon="eye">View</fk-menu-item>
-    <fk-menu-item icon="gear-outline">Settings</fk-menu-item>
+    <fk-menu-item><fk-icon fkMenuItemIcon name="eye" size="sm" />View</fk-menu-item>
+    <fk-menu-item><fk-icon fkMenuItemIcon name="gear-outline" size="sm" />Settings</fk-menu-item>
     <fk-menu-separator />
-    <fk-menu-item icon="open-rect-arrow-out-fill" [danger]="true">Delete</fk-menu-item>
+    <fk-menu-item [danger]="true"><fk-icon fkMenuItemIcon name="open-rect-arrow-out-fill" size="sm" />Delete</fk-menu-item>
   </ng-template>
 </fk-dropdown-menu>
 ```
@@ -153,10 +152,10 @@ Directives:
 <fk-dropdown-menu>
   <button fkDropdownTrigger>Options</button>
   <ng-template fkDropdownPanel>
-    <fk-menu-item icon="eye">View</fk-menu-item>
-    <fk-menu-item icon="gear-outline" [disabled]="true">Settings (locked)</fk-menu-item>
+    <fk-menu-item><fk-icon fkMenuItemIcon name="eye" size="sm" />View</fk-menu-item>
+    <fk-menu-item [disabled]="true"><fk-icon fkMenuItemIcon name="gear-outline" size="sm" />Settings (locked)</fk-menu-item>
     <fk-menu-separator />
-    <fk-menu-item icon="info">Help</fk-menu-item>
+    <fk-menu-item><fk-icon fkMenuItemIcon name="info" size="sm" />Help</fk-menu-item>
   </ng-template>
 </fk-dropdown-menu>
 ```
@@ -167,9 +166,9 @@ Directives:
 <fk-dropdown-menu>
   <button fkDropdownTrigger>Manage</button>
   <ng-template fkDropdownPanel>
-    <fk-menu-item icon="eye">View</fk-menu-item>
+    <fk-menu-item><fk-icon fkMenuItemIcon name="eye" size="sm" />View</fk-menu-item>
     <fk-menu-separator />
-    <fk-menu-item icon="open-rect-arrow-out-fill" [danger]="true">Remove</fk-menu-item>
+    <fk-menu-item [danger]="true"><fk-icon fkMenuItemIcon name="open-rect-arrow-out-fill" size="sm" />Remove</fk-menu-item>
   </ng-template>
 </fk-dropdown-menu>
 ```

package/ui/menu-item/README.md

@@ -10,11 +10,10 @@ Atom-level menu primitives for rendering actionable items and visual dividers in
 
 #### Inputs
 
-| Input      | Type             | Default | Description                               |
-| ---------- | ---------------- | ------- | ----------------------------------------- |
-| `icon`     | `string \| null` | `null`  | Optional icon name shown before the label |
-| `danger`   | `boolean`        | `false` | Applies destructive/danger styling        |
-| `disabled` | `boolean`        | `false` | Disables the item                         |
+| Input      | Type      | Default | Description                        |
+| ---------- | --------- | ------- | ---------------------------------- |
+| `danger`   | `boolean` | `false` | Applies destructive/danger styling |
+| `disabled` | `boolean` | `false` | Disables the item                  |
 
 #### Outputs
 
@@ -24,12 +23,17 @@ Atom-level menu primitives for rendering actionable items and visual dividers in
 
 #### Content
 
-The item label is provided through content projection.
+The item label is the default projected content. A leading icon is projected via the `[fkMenuItemIcon]` slot — the app owns the icon system, so project your own `fk-icon` (or any element):
 
 ```html
-<fk-menu-item>Save Changes</fk-menu-item>
+<fk-menu-item>
+  <fk-icon fkMenuItemIcon name="eye" size="sm" />
+  View Details
+</fk-menu-item>
 ```
 
+`FkMenuItemIconDirective` (the `[fkMenuItemIcon]` marker) is exported from `@frame-kit/ui-ng`.
+
 ### fk-menu-separator
 
 A visual divider between menu item groups. No inputs or outputs.
@@ -42,7 +46,7 @@ A visual divider between menu item groups. No inputs or outputs.
 
 ## Features
 
-- Icon + label layout with flexible content projection
+- Label + optional leading-icon slot (`[fkMenuItemIcon]`) via content projection
 - Danger variant for destructive actions
 - Disabled state with `aria-disabled` and keyboard exclusion
 - Keyboard activation via Enter and Space
@@ -55,9 +59,15 @@ A visual divider between menu item groups. No inputs or outputs.
 ## Quick Start
 
 ```html
-<fk-menu-item icon="eye" (itemClick)="onView()">View Details</fk-menu-item>
+<fk-menu-item (itemClick)="onView()">
+  <fk-icon fkMenuItemIcon name="eye" size="sm" />
+  View Details
+</fk-menu-item>
 <fk-menu-separator />
-<fk-menu-item icon="gear-outline" [disabled]="true">Settings</fk-menu-item>
+<fk-menu-item [disabled]="true">
+  <fk-icon fkMenuItemIcon name="gear-outline" size="sm" />
+  Settings
+</fk-menu-item>
 <fk-menu-item [danger]="true" (itemClick)="onDelete()">Delete</fk-menu-item>
 ```
 
@@ -93,7 +103,10 @@ export class ExampleComponent {}
 ### With icon
 
 ```html
-<fk-menu-item icon="eye">View</fk-menu-item>
+<fk-menu-item>
+  <fk-icon fkMenuItemIcon name="eye" size="sm" />
+  View
+</fk-menu-item>
 ```
 
 ### Without icon
@@ -117,10 +130,10 @@ export class ExampleComponent {}
 ### With separator
 
 ```html
-<fk-menu-item icon="eye">View</fk-menu-item>
-<fk-menu-item icon="gear-outline">Edit</fk-menu-item>
+<fk-menu-item><fk-icon fkMenuItemIcon name="eye" size="sm" />View</fk-menu-item>
+<fk-menu-item><fk-icon fkMenuItemIcon name="gear-outline" size="sm" />Edit</fk-menu-item>
 <fk-menu-separator />
-<fk-menu-item icon="open-rect-arrow-out-fill" [danger]="true">Delete</fk-menu-item>
+<fk-menu-item [danger]="true"> <fk-icon fkMenuItemIcon name="open-rect-arrow-out-fill" size="sm" />Delete </fk-menu-item>
 ```
 
 ### Handling clicks

package/ui/node-tree/README.md

@@ -8,14 +8,15 @@ A token-driven, hierarchical tree component for Angular with expand/collapse, se
 
 ### Inputs
 
-| Input             | Type                     | Default     | Description                                                         |
-| ----------------- | ------------------------ | ----------- | ------------------------------------------------------------------- |
-| `nodes`           | `TreeNode[]`             | _required_  | Flat array of tree nodes; parent-child relationships via `parentId` |
-| `selectedNodeId`  | `string \| undefined`    | `undefined` | Currently selected node ID                                          |
-| `expandedNodeIds` | `string[] \| undefined`  | `undefined` | Controlled expanded state; `undefined` uses internal state          |
-| `draggable`       | `boolean`                | `false`     | Enables drag-and-drop with drag handles                             |
-| `canDrop`         | `CanDropFn \| undefined` | `undefined` | Consumer callback to validate drop targets                          |
-| `className`       | `string`                 | `''`        | Additional CSS classes for the host                                 |
+| Input             | Type                                                  | Default     | Description                                                                                                             |
+| ----------------- | ----------------------------------------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------- |
+| `nodes`           | `TreeNode[]`                                          | _required_  | Flat array of tree nodes; parent-child relationships via `parentId`                                                     |
+| `selectedNodeId`  | `string \| undefined`                                 | `undefined` | Currently selected node ID                                                                                              |
+| `expandedNodeIds` | `string[] \| undefined`                               | `undefined` | Controlled expanded state; `undefined` uses internal state                                                              |
+| `draggable`       | `boolean`                                             | `false`     | Enables drag-and-drop with drag handles                                                                                 |
+| `canDrop`         | `CanDropFn \| undefined`                              | `undefined` | Consumer callback to validate drop targets                                                                              |
+| `iconTemplate`    | `TemplateRef<{ $implicit: FlatNode }>` \| `undefined` | `undefined` | Template rendering each row's leading icon (receives the node as `$implicit`); default rows render no icon when omitted |
+| `className`       | `string`                                              | `''`        | Additional CSS classes for the host                                                                                     |
 
 ### Outputs
 
@@ -31,7 +32,7 @@ A token-driven, hierarchical tree component for Angular with expand/collapse, se
 interface TreeNode<T = unknown> {
   id: string;
   label: string;
-  icon?: string;
+  icon?: string; // rendered only via [iconTemplate] — the tree is icon-agnostic
   parentId?: string | null;
   draggable?: boolean;
   data?: T;
@@ -55,14 +56,28 @@ interface NodeDropEvent {
 type CanDropFn = (draggedNode: FlatNode, targetNode: FlatNode, position: DropPosition) => boolean;
 ```
 
+### Row icons
+
+The tree is icon-agnostic: `node.icon` is only rendered if you supply an `iconTemplate` that reads it (the app owns the icon system). Default rows show no icon without it:
+
+```html
+<ng-template #nodeIcon let-node>
+  <fk-icon [name]="node.icon" size="sm" />
+</ng-template>
+
+<fk-node-tree [nodes]="nodes" [iconTemplate]="nodeIcon" />
+```
+
 ### Content Projection
 
-Custom row templates use the `fkNodeTreeRow` structural directive:
+For full control of the row, use the `fkNodeTreeRow` structural directive instead — it replaces the whole row (icon included), so you render your own icon in the template:
 
 ```html
 <fk-node-tree [nodes]="nodes">
   <ng-template fkNodeTreeRow let-node>
+    @if (node.icon) {
     <fk-icon [name]="node.icon" size="sm" />
+    }
     <span>{{ node.label }}</span>
   </ng-template>
 </fk-node-tree>

package/ui/timeline/README.md

@@ -8,16 +8,17 @@ A token-driven timeline component for displaying ordered steps, resolution chain
 
 ### Inputs
 
-| Input         | Type                              | Default      | Description                                  |
-| ------------- | --------------------------------- | ------------ | -------------------------------------------- |
-| `items`       | `TimelineItemData[]`              | `[]`         | Declarative data for timeline entries        |
-| `orientation` | `'vertical' \| 'horizontal'`      | `'vertical'` | Layout direction                             |
-| `align`       | `'start' \| 'end' \| 'alternate'` | `'start'`    | Content alignment relative to connector line |
-| `size`        | `'sm' \| 'md' \| 'lg'`            | `'md'`       | Marker and connector sizing                  |
-| `reverse`     | `boolean`                         | `false`      | Reverse item order                           |
-| `ariaLabel`   | `string \| null`                  | `null`       | Accessible label                             |
-| `id`          | `string \| null`                  | `null`       | Element ID                                   |
-| `className`   | `string`                          | `''`         | Additional CSS classes merged onto the host  |
+| Input          | Type                                                          | Default      | Description                                                                                                      |
+| -------------- | ------------------------------------------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------- |
+| `items`        | `TimelineItemData[]`                                          | `[]`         | Declarative data for timeline entries                                                                            |
+| `iconTemplate` | `TemplateRef<{ $implicit: TimelineItemData }>` \| `undefined` | `undefined`  | Template rendering each item's marker icon (receives the item as `$implicit`); items render no icon when omitted |
+| `orientation`  | `'vertical' \| 'horizontal'`                                  | `'vertical'` | Layout direction                                                                                                 |
+| `align`        | `'start' \| 'end' \| 'alternate'`                             | `'start'`    | Content alignment relative to connector line                                                                     |
+| `size`         | `'sm' \| 'md' \| 'lg'`                                        | `'md'`       | Marker and connector sizing                                                                                      |
+| `reverse`      | `boolean`                                                     | `false`      | Reverse item order                                                                                               |
+| `ariaLabel`    | `string \| null`                                              | `null`       | Accessible label                                                                                                 |
+| `id`           | `string \| null`                                              | `null`       | Element ID                                                                                                       |
+| `className`    | `string`                                                      | `''`         | Additional CSS classes merged onto the host                                                                      |
 
 ### Types
 
@@ -27,7 +28,7 @@ interface TimelineItemData {
   title?: string;
   description?: string;
   timestamp?: string;
-  icon?: string;
+  icon?: string; // rendered only via [iconTemplate] — the timeline is icon-agnostic
   status?: TimelineItemStatus;
 }
 
@@ -49,7 +50,7 @@ None.
 - Three alignment modes (start, end, alternate)
 - Three size presets (sm, md, lg)
 - Five status variants (default, active, completed, error, warning)
-- Custom icon support per item
+- Per-item marker icons via a consumer-supplied `iconTemplate`
 - Optional timestamp display
 - Reversible item order
 - Content projection for complex custom items
@@ -142,8 +143,15 @@ export class ExampleComponent {}
 
 ### With icons
 
+Supply an `iconTemplate` that reads `item.icon` — the timeline never renders `fk-icon` itself:
+
 ```html
+<ng-template #marker let-item>
+  <fk-icon [name]="item.icon" size="xs" />
+</ng-template>
+
 <fk-timeline
+  [iconTemplate]="marker"
   [items]="[
     { title: 'Submitted', icon: 'circle-check-outline', status: 'completed' },
     { title: 'In Review', icon: 'shield-alert', status: 'active' },

package/ui/user-menu/README.md

@@ -8,29 +8,30 @@ A token-driven user menu molecule that composes an avatar trigger with a dropdow
 
 ### Inputs
 
-| Input         | Type                                                        | Default        | Description                                                                    |
-| ------------- | ----------------------------------------------------------- | -------------- | ------------------------------------------------------------------------------ |
-| name          | `string`                                                    | —              | **Required.** User's display name                                              |
-| email         | `string` \| `null`                                          | `null`         | User's email address                                                           |
-| avatarUrl     | `string` \| `null`                                          | `null`         | URL to the user's avatar image                                                 |
-| initials      | `string` \| `null`                                          | `null`         | Custom initials — auto-derived from `name` if absent                           |
-| userId        | `string` \| `null`                                          | `null`         | Optional user identifier                                                       |
-| status        | `"online"` \| `"offline"` \| `"away"` \| `"busy"` \| `null` | `null`         | Presence status passed to the avatar                                           |
-| showStatus    | `boolean`                                                   | `false`        | Show the status indicator on the avatar                                        |
-| menuItems     | `MenuItem[]`                                                | `[]`           | Configurable list of menu actions                                              |
-| placement     | `"bottom-start"` \| `"bottom-end"`                          | `"bottom-end"` | Preferred panel alignment — auto-flips and shifts to stay within the viewport  |
-| size          | `"sm"` \| `"md"` \| `"lg"`                                  | `"md"`         | Avatar size                                                                    |
-| variant       | `"dropdown"` \| `"popover"`                                 | `"dropdown"`   | `"popover"` adds a user header inside the panel                                |
-| showName      | `boolean`                                                   | `false`        | Show user name next to the avatar in the trigger                               |
-| showEmail     | `boolean`                                                   | `false`        | Show email next to the avatar in the trigger                                   |
-| showChevron   | `boolean`                                                   | `true`         | Show a chevron indicator on the trigger                                        |
-| infoPlacement | `"start"` \| `"end"`                                        | `"end"`        | Position name/email relative to the avatar — `"start"` places text on the left |
-| badge         | `string` \| `null`                                          | `null`         | Badge label (e.g. "Admin", "Pro")                                              |
-| disabled      | `boolean`                                                   | `false`        | Disable the trigger                                                            |
-| loading       | `boolean`                                                   | `false`        | Disable the trigger during loading                                             |
-| className     | `string`                                                    | `""`           | Additional CSS classes merged with hook classes                                |
-| id            | `string` \| `null`                                          | `null`         | Sets the host `id` attribute                                                   |
-| ariaLabel     | `string` \| `null`                                          | `null`         | Custom `aria-label` (defaults to "User menu for {name}")                       |
+| Input         | Type                                                        | Default        | Description                                                                                                               |
+| ------------- | ----------------------------------------------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------- |
+| name          | `string`                                                    | —              | **Required.** User's display name                                                                                         |
+| email         | `string` \| `null`                                          | `null`         | User's email address                                                                                                      |
+| avatarUrl     | `string` \| `null`                                          | `null`         | URL to the user's avatar image                                                                                            |
+| initials      | `string` \| `null`                                          | `null`         | Custom initials — auto-derived from `name` if absent                                                                      |
+| userId        | `string` \| `null`                                          | `null`         | Optional user identifier                                                                                                  |
+| status        | `"online"` \| `"offline"` \| `"away"` \| `"busy"` \| `null` | `null`         | Presence status passed to the avatar                                                                                      |
+| showStatus    | `boolean`                                                   | `false`        | Show the status indicator on the avatar                                                                                   |
+| menuItems     | `MenuItem[]`                                                | `[]`           | Configurable list of menu actions                                                                                         |
+| iconTemplate  | `TemplateRef<{ $implicit: MenuItem }>` \| `undefined`       | `undefined`    | Template rendering each item's leading icon (receives the item as `$implicit`); items render without an icon when omitted |
+| placement     | `"bottom-start"` \| `"bottom-end"`                          | `"bottom-end"` | Preferred panel alignment — auto-flips and shifts to stay within the viewport                                             |
+| size          | `"sm"` \| `"md"` \| `"lg"`                                  | `"md"`         | Avatar size                                                                                                               |
+| variant       | `"dropdown"` \| `"popover"`                                 | `"dropdown"`   | `"popover"` adds a user header inside the panel                                                                           |
+| showName      | `boolean`                                                   | `false`        | Show user name next to the avatar in the trigger                                                                          |
+| showEmail     | `boolean`                                                   | `false`        | Show email next to the avatar in the trigger                                                                              |
+| showChevron   | `boolean`                                                   | `true`         | Show a chevron indicator on the trigger                                                                                   |
+| infoPlacement | `"start"` \| `"end"`                                        | `"end"`        | Position name/email relative to the avatar — `"start"` places text on the left                                            |
+| badge         | `string` \| `null`                                          | `null`         | Badge label (e.g. "Admin", "Pro")                                                                                         |
+| disabled      | `boolean`                                                   | `false`        | Disable the trigger                                                                                                       |
+| loading       | `boolean`                                                   | `false`        | Disable the trigger during loading                                                                                        |
+| className     | `string`                                                    | `""`           | Additional CSS classes merged with hook classes                                                                           |
+| id            | `string` \| `null`                                          | `null`         | Sets the host `id` attribute                                                                                              |
+| ariaLabel     | `string` \| `null`                                          | `null`         | Custom `aria-label` (defaults to "User menu for {name}")                                                                  |
 
 ### Outputs
 
@@ -48,7 +49,7 @@ A token-driven user menu molecule that composes an avatar trigger with a dropdow
 interface MenuItem {
   label: string;
   value: string;
-  icon?: string;
+  icon?: string; // rendered only via [iconTemplate] — see below
   disabled?: boolean;
   danger?: boolean;
   separator?: boolean;
@@ -57,12 +58,14 @@ interface MenuItem {
 
 When `separator` is `true`, the item renders as a horizontal divider instead of a button.
 
+`fk-user-menu` is icon-agnostic: `icon` is just a string your `iconTemplate` reads — the widget never renders `fk-icon` itself. Without an `iconTemplate`, items show no icon.
+
 ---
 
 ## Features
 
 - Composes `fk-avatar` for the trigger display
-- Configurable menu items with icons, danger styling, disabled state, and separators
+- Configurable menu items with danger styling, disabled state, separators, and consumer-supplied icons (via `iconTemplate`)
 - Two variants: `dropdown` (items only) and `popover` (user header + items)
 - Optional name, email, badge, and chevron in the trigger with configurable info placement (`start` or `end`)
 - Viewport-aware positioning — panel auto-flips vertically and shifts horizontally to avoid clipping
@@ -75,7 +78,12 @@ When `separator` is `true`, the item renders as a horizontal divider instead of
 ## Quick Start
 
 ```html
-<fk-user-menu name="Jane Doe" [menuItems]="menuItems" (menuItemClick)="onMenuItem($event)" (logoutClick)="onLogout()" />
+<!-- Supply an icon template that reads item.icon; the app owns the icon system. -->
+<ng-template #menuIcon let-item>
+  <fk-icon [name]="item.icon" size="sm" />
+</ng-template>
+
+<fk-user-menu name="Jane Doe" [menuItems]="menuItems" [iconTemplate]="menuIcon" (menuItemClick)="onMenuItem($event)" (logoutClick)="onLogout()" />
 ```
 
 ```ts
@@ -87,6 +95,8 @@ menuItems: MenuItem[] = [
 ];
 ```
 
+Omit `[iconTemplate]` (and the `icon` fields) if you don't need icons.
+
 ---
 
 ## Import