@dataworkz/crystal 0.1.0-beta.8 → 0.1.0-beta.9

package/index.d.ts

@@ -2951,7 +2951,8 @@ declare class DwTreeNodeDirective {
  * commands receiving the node.
  *
  * The tree has no box of its own and sits on its container; `framed` gives it a border and padding, and
- * `scrollHeight` a height after which it scrolls. `.dw-tree` (no `-view`) is the markup-only guide-line tree for
+ * `scrollHeight` a height after which it scrolls. `size="sm"` makes rows compact (a smaller toggle and type), for a
+ * sidebar or a narrow panel; `marker` adds an accent bar to the selected row, as on `dw-nav-list`. `.dw-tree` (no `-view`) is the markup-only guide-line tree for
  * hand-built lists.
  *
  * ```html
@@ -2981,6 +2982,10 @@ declare class DwTreeComponent<T = unknown> {
     readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
     /** A border, radius and padding around the tree, for one that is not already inside a framed surface. */
     readonly framed: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** `sm`: compact rows (smaller toggle, padding and type), for a sidebar or a narrow panel. */
+    readonly size: _angular_core.InputSignal<"sm" | "md">;
+    /** An accent bar at the start of the selected row (or rows), as `dw-nav-list`'s `marker`. */
+    readonly marker: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** A `dw-menu` (`trigger="none"`) opened at the pointer when a node is right-clicked; its commands get the node. */
     readonly contextMenu: _angular_core.InputSignal<DwMenuComponent<DwTreeNode<T>> | undefined>;
     readonly nodeSelect: _angular_core.OutputEmitterRef<DwTreeNodeEvent<T>>;
@@ -3001,7 +3006,7 @@ declare class DwTreeComponent<T = unknown> {
     } | undefined>;
     protected openMenu(event: DwTreeNodeEvent<T>): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DwTreeComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DwTreeComponent<any>, "dw-tree", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "propagateSelection": { "alias": "propagateSelection"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "loadingMode": { "alias": "loadingMode"; "required": false; "isSignal": true; }; "scrollHeight": { "alias": "scrollHeight"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "framed": { "alias": "framed"; "required": false; "isSignal": true; }; "contextMenu": { "alias": "contextMenu"; "required": false; "isSignal": true; }; }, { "selection": "selectionChange"; "nodeSelect": "nodeSelect"; "nodeUnselect": "nodeUnselect"; "nodeExpand": "nodeExpand"; "nodeCollapse": "nodeCollapse"; "nodeContextMenu": "nodeContextMenu"; }, ["nodeTemplate"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DwTreeComponent<any>, "dw-tree", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "propagateSelection": { "alias": "propagateSelection"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "loadingMode": { "alias": "loadingMode"; "required": false; "isSignal": true; }; "scrollHeight": { "alias": "scrollHeight"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "framed": { "alias": "framed"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "marker": { "alias": "marker"; "required": false; "isSignal": true; }; "contextMenu": { "alias": "contextMenu"; "required": false; "isSignal": true; }; }, { "selection": "selectionChange"; "nodeSelect": "nodeSelect"; "nodeUnselect": "nodeUnselect"; "nodeExpand": "nodeExpand"; "nodeCollapse": "nodeCollapse"; "nodeContextMenu": "nodeContextMenu"; }, ["nodeTemplate"], never, true, never>;
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataworkz/crystal",
-  "version": "0.1.0-beta.8",
+  "version": "0.1.0-beta.9",
   "description": "Dataworkz core UI for Angular: dw-* components, icons, toasts, design tokens, theme CSS and bundled fonts.",
   "license": "MIT",
   "author": "Dataworkz",

package/styles/components/data.css

@@ -149,6 +149,17 @@ body .p-treetable .p-treetable-tbody > tr.p-treetable-row-selected {
   background: var(--dw-surface);
 }
 .dw-tree-view .p-tree-node-label { flex: 1 1 auto; min-width: 0; }
+/* --sm: compact rows, through PrimeNG's own tree variables (row ~28px instead of ~36px). */
+.dw-tree-view.dw-tree-view--sm {
+  --p-tree-node-padding: var(--dw-space-1) var(--dw-space-2);
+  --p-tree-node-gap: var(--dw-space-1);
+  --p-tree-node-toggle-button-size: var(--dw-space-5);
+  --p-tree-gap: 0;
+  font-size: var(--dw-font-size-13);
+}
+/* --marker: the selected row's accent bar, as dw-nav-list [marker] (an inset shadow, so nothing shifts). Specific
+   enough to outlast PrimeNG's focus styles, which it loads after crystal. */
+.dw-tree-view.dw-tree-view--marker .p-tree-node-content.p-tree-node-selected { box-shadow: inset 3px 0 0 var(--dw-accent); }
 
 /* ── Skeleton ── */
 .dw-skeleton {

package/styles/components/navigation.css

@@ -215,7 +215,7 @@
 }
 
 /* Selected marker: an accent left border that follows the item's rounded corners. Only the agents
-   list page's sidebar has it (dw-nav-list [marker], and its tags tree: dw-selected-marker); every
+   list page's sidebar has it (dw-nav-list [marker], and its tags tree: dw-tree [marker]); every
    other selection is the plain selected fill. An inset shadow, not a border, so the item's content
    does not shift when it is selected. */
 .dw-nav-list--marker .dw-nav-item.is-active,