@akcelik/strct 0.22.0 → 0.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akcelik/strct",
-  "version": "0.22.0",
+  "version": "0.24.0",
   "description": "UIStruct — a standalone Angular component library with a tokenised, multi-palette theme system, built for datacenter / infrastructure management UIs.",
   "author": "Serkan Akcelik <serkan.akcelik@gmail.com>",
   "license": "MIT",

package/types/akcelik-strct.d.ts

@@ -450,20 +450,51 @@ declare class StrctSpeedDial {
 
 /**
  * Surface container. Compose with the header / block / footer pieces:
- *   <strct-card>
- *     <strct-card-header>Title</strct-card-header>
- *     <strct-card-block>...</strct-card-block>
+ *
+ *   <strct-card status="warning" collapsible [(collapsed)]="hidden">
+ *     <strct-card-header icon="host">Host hv-02</strct-card-header>
+ *     <strct-card-block>…</strct-card-block>
  *     <strct-card-footer><button strct-button>OK</button></strct-card-footer>
  *   </strct-card>
+ *
+ * Rich options (all opt-in; defaults preserve the plain card):
+ * - `status` — tone rail on the leading edge (same language as alert / hero).
+ * - `interactive` — hover lift + accent border for clickable cards.
+ * - `selected` — accent ring for picker layouts.
+ * - `dense` — tighter paddings for dashboards.
+ * - `loading` — indeterminate top bar + `aria-busy` (reduced-motion safe).
+ * - `collapsible` + two-way `collapsed` — the header gains a chevron toggle;
+ *   block and footer hide while collapsed.
  */
 declare class StrctCard {
+    /** Tone rail on the leading edge. */
+    readonly status: _angular_core.InputSignal<StrctStatus>;
+    /** Hover lift + accent border for clickable cards (style-only affordance). */
+    readonly interactive: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Accent ring — for picker / multi-select card layouts. */
+    readonly selected: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Tighter paddings for dense dashboards. */
+    readonly dense: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Indeterminate top bar + aria-busy; body/footer dim and ignore input. */
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Allow collapsing to just the header (a chevron appears in the header). */
+    readonly collapsible: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Collapsed state (two-way; only meaningful with `collapsible`). */
+    readonly collapsed: _angular_core.ModelSignal<boolean>;
+    toggle(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctCard, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctCard, "strct-card", never, {}, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctCard, "strct-card", never, { "status": { "alias": "status"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "dense": { "alias": "dense"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; }, never, ["*"], true, never>;
 }
 /** Header section of a {@link StrctCard}. */
 declare class StrctCardHeader {
+    /** Optional leading icon (StrctIcon set). */
+    readonly icon: _angular_core.InputSignal<string>;
+    /** Accessible labels for the collapse toggle (localizable). */
+    readonly collapseLabel: _angular_core.InputSignal<string>;
+    readonly expandLabel: _angular_core.InputSignal<string>;
+    protected readonly card: StrctCard | null;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctCardHeader, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctCardHeader, "strct-card-header", never, {}, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctCardHeader, "strct-card-header", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "collapseLabel": { "alias": "collapseLabel"; "required": false; "isSignal": true; }; "expandLabel": { "alias": "expandLabel"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 /** Body section of a {@link StrctCard}. */
 declare class StrctCardBlock {
@@ -687,6 +718,8 @@ declare class StrctTreeNode {
     protected readonly menuItems: _angular_core.Signal<StrctMenuItem[]>;
     /** The owning `<strct-tree>` (null only for standalone nodes outside a tree). */
     protected readonly tree: StrctTree | null;
+    /** Node icon scales with the owning tree's density (16 native → 18 comfortable). */
+    protected readonly iconSize: _angular_core.Signal<16 | 18>;
     /** Parent tree node (element-injector ancestor); drives aria-level + ArrowLeft. */
     readonly parent: StrctTreeNode | null;
     /** 1-based depth, exposed as aria-level. */
@@ -722,6 +755,12 @@ declare class StrctTreeNode {
 declare class StrctTree {
     /** Data-driven node list; when set, projected content is ignored. */
     readonly nodes: _angular_core.InputSignal<StrctTreeNodeData[] | null>;
+    /**
+     * Row density. `compact` (default) is the dense inventory layout —
+     * 13px text / 16px icons; `comfortable` relaxes to 14px text / 18px icons
+     * with taller rows for touch-friendly or low-density consoles.
+     */
+    readonly density: _angular_core.InputSignal<"compact" | "comfortable">;
     /** Per-node right-click menu resolver. */
     readonly nodeMenu: _angular_core.InputSignal<StrctTreeNodeMenuFn | null>;
     /** Emitted when any data-driven node is clicked. */
@@ -768,7 +807,7 @@ declare class StrctTree {
     /** Toggle a node's expansion, updating state and emitting outputs. */
     toggleNode(node: StrctTreeNodeData): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctTree, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctTree, "strct-tree", never, { "nodes": { "alias": "nodes"; "required": false; "isSignal": true; }; "nodeMenu": { "alias": "nodeMenu"; "required": false; "isSignal": true; }; "expandedIds": { "alias": "expandedIds"; "required": false; "isSignal": true; }; }, { "nodeActivated": "nodeActivated"; "nodeMenuSelect": "nodeMenuSelect"; "expandedIds": "expandedIdsChange"; "expandedChange": "expandedChange"; "nodeToggled": "nodeToggled"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctTree, "strct-tree", never, { "nodes": { "alias": "nodes"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; "nodeMenu": { "alias": "nodeMenu"; "required": false; "isSignal": true; }; "expandedIds": { "alias": "expandedIds"; "required": false; "isSignal": true; }; }, { "nodeActivated": "nodeActivated"; "nodeMenuSelect": "nodeMenuSelect"; "expandedIds": "expandedIdsChange"; "expandedChange": "expandedChange"; "nodeToggled": "nodeToggled"; }, never, ["*"], true, never>;
 }
 
 /** Fixed modal width presets: sm 480 · md 640 · lg 860 · xl 1080 (px). */