@akcelik/strct 5.22.0 → 5.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akcelik/strct",
-  "version": "5.22.0",
+  "version": "5.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/styles/_tokens.scss

@@ -77,7 +77,7 @@
   --b3: rgba(255, 255, 255, 0.14);
   --t1: rgba(255, 255, 255, 0.9);
   --t2: rgba(255, 255, 255, 0.52);
-  --t3: rgba(255, 255, 255, 0.47);
+  --t3: rgba(255, 255, 255, 0.49);
   --t4: rgba(255, 255, 255, 0.15);
   --inv: #0e1015;
   --acc: #7b9ec8;
@@ -207,7 +207,7 @@
   --b3: rgba(255, 235, 210, 0.14);
   --t1: rgba(255, 240, 220, 0.88);
   --t2: rgba(255, 235, 210, 0.59);
-  --t3: rgba(255, 230, 200, 0.51);
+  --t3: rgba(255, 230, 200, 0.545);
   --t4: rgba(255, 225, 195, 0.14);
   --inv: #12100d;
   --acc: #c49a6c;
@@ -272,7 +272,7 @@
   --b3: rgba(80, 50, 20, 0.16);
   --t1: rgba(50, 35, 20, 0.9);
   --t2: rgba(60, 40, 20, 0.74);
-  --t3: rgba(70, 50, 30, 0.7);
+  --t3: rgba(70, 50, 30, 0.715);
   --t4: rgba(80, 55, 30, 0.14);
   --inv: #fdfcfa;
   --acc: #7d5e3f;
@@ -337,7 +337,7 @@
   --b3: rgba(210, 240, 225, 0.14);
   --t1: rgba(220, 242, 230, 0.88);
   --t2: rgba(210, 235, 220, 0.62);
-  --t3: rgba(200, 228, 215, 0.54);
+  --t3: rgba(200, 228, 215, 0.61);
   --t4: rgba(195, 222, 210, 0.14);
   --inv: #0d1210;
   --acc: #7aab90;
@@ -402,7 +402,7 @@
   --b3: rgba(20, 60, 40, 0.16);
   --t1: rgba(18, 45, 30, 0.9);
   --t2: rgba(25, 55, 38, 0.76);
-  --t3: rgba(30, 60, 42, 0.7);
+  --t3: rgba(30, 60, 42, 0.71);
   --t4: rgba(35, 65, 45, 0.14);
   --inv: #fafcfb;
   --acc: #3f7355;

package/types/akcelik-strct.d.ts

@@ -1579,6 +1579,25 @@ interface StrctTreeNodeData {
     /** Initial expanded state. */
     expanded?: boolean;
     children?: StrctTreeNodeData[];
+    /**
+     * A quiet trailing word on the row — what `[strctTreeTrailing]` is for a
+     * projected node: "VM" on a virtual machine's own folder.
+     */
+    meta?: string;
+    /** A trailing tag instead of (or beside) `meta`. */
+    tag?: {
+        label: string;
+        status?: StrctBadgeStatus;
+    };
+    /**
+     * "It has children, they have not been read yet": the chevron and
+     * `aria-expanded` appear before `children` arrives, and expanding emits
+     * `(nodeToggled)` as usual. A node that turns out to be empty loses its
+     * chevron when `children` arrives as `[]`.
+     */
+    hasChildren?: boolean;
+    /** Its children are being read: a quiet row under it, and `aria-busy`. */
+    loading?: boolean;
     /** Arbitrary payload returned with (nodeActivated). */
     data?: unknown;
 }
@@ -1680,6 +1699,8 @@ declare class StrctTreeNode {
     rowEl(): HTMLElement | null;
     /** Roving tabindex: inside a tree only the active row is tabbable. */
     protected readonly rowTabindex: _angular_core.Signal<0 | -1>;
+    /** Wording of the "children are being read" row (from the owning tree). */
+    protected readonly loadingLabel: _angular_core.Signal<string>;
     /** Accessible label of the chevron toggle (factory from the owning tree). */
     protected readonly chevronAriaLabel: _angular_core.Signal<string>;
     protected onRowFocus(): void;
@@ -1732,6 +1753,8 @@ declare class StrctTree {
     readonly dragExpandDelay: _angular_core.InputSignal<number>;
     /** Emitted for an accepted drop only. */
     readonly nodeDrop: _angular_core.OutputEmitterRef<StrctTreeDropEvent>;
+    /** Wording of the row shown under a node whose children are being read (`node.loading`). */
+    readonly loadingLabel: _angular_core.InputSignal<string>;
     /** Accessible label of each node's chevron toggle; receives the expanded state and the node label. */
     readonly chevronAriaLabel: _angular_core.InputSignal<(expanded: boolean, label: string) => string>;
     /** Emitted when any data-driven node is clicked. */
@@ -1829,7 +1852,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; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; "framed": { "alias": "framed"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "nodeMenu": { "alias": "nodeMenu"; "required": false; "isSignal": true; }; "canDrag": { "alias": "canDrag"; "required": false; "isSignal": true; }; "canDrop": { "alias": "canDrop"; "required": false; "isSignal": true; }; "dragExpandDelay": { "alias": "dragExpandDelay"; "required": false; "isSignal": true; }; "chevronAriaLabel": { "alias": "chevronAriaLabel"; "required": false; "isSignal": true; }; "expandedIds": { "alias": "expandedIds"; "required": false; "isSignal": true; }; }, { "nodeDrop": "nodeDrop"; "nodeActivated": "nodeActivated"; "nodeMenuSelect": "nodeMenuSelect"; "expandedIds": "expandedIdsChange"; "expandedChange": "expandedChange"; "nodeToggled": "nodeToggled"; }, ["projectedNodes"], ["*"], 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; }; "framed": { "alias": "framed"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "nodeMenu": { "alias": "nodeMenu"; "required": false; "isSignal": true; }; "canDrag": { "alias": "canDrag"; "required": false; "isSignal": true; }; "canDrop": { "alias": "canDrop"; "required": false; "isSignal": true; }; "dragExpandDelay": { "alias": "dragExpandDelay"; "required": false; "isSignal": true; }; "loadingLabel": { "alias": "loadingLabel"; "required": false; "isSignal": true; }; "chevronAriaLabel": { "alias": "chevronAriaLabel"; "required": false; "isSignal": true; }; "expandedIds": { "alias": "expandedIds"; "required": false; "isSignal": true; }; }, { "nodeDrop": "nodeDrop"; "nodeActivated": "nodeActivated"; "nodeMenuSelect": "nodeMenuSelect"; "expandedIds": "expandedIdsChange"; "expandedChange": "expandedChange"; "nodeToggled": "nodeToggled"; }, ["projectedNodes"], ["*"], true, never>;
 }
 
 /** Fixed modal width presets: sm 480 · md 640 · lg 860 · xl 1080 (px). */
@@ -2711,6 +2734,11 @@ declare class StrctSearchbox implements ControlValueAccessor {
     protected onTouched: () => void;
     protected onInput(event: Event): void;
     /** Clear the text (Escape / the × button). */
+    /**
+     * An Escape that clears a value is used: a modal around this box takes an
+     * unhandled Escape as "close me", and the same keystroke did both.
+     */
+    protected onEscape(event: Event): void;
     clear(): void;
     /** Focus the input programmatically (e.g. from a global shortcut). */
     focus(): void;
@@ -8630,8 +8658,15 @@ interface StrctProductItem {
     description?: string;
     /** The dot beside that line. */
     status?: StrctStatus;
-    /** The product's own colour (a token or value): the icons take it. */
+    /** The product's own colour (a token or value): the row's icon takes it. */
     tone?: string;
+    /**
+     * The chip's own shade. The chip sits on `--hdr`, which is dark in every
+     * scheme, and the menu rows on `--bg-1`: one colour measured 2.45–2.93 : 1
+     * on one of the two, under the 3 : 1 a graphical object owes. Falls back to
+     * `tone`.
+     */
+    headerTone?: string;
     /** Render the row as a real router link (middle-click, a new tab). */
     routerLink?: string | unknown[];
     /** Render the row as a plain link. */