@deepfuture/dui-components 1.2.1 → 1.3.0

package/all.d.ts

@@ -44,6 +44,7 @@ import "./textarea/index.js";
 import "./toggle/index.js";
 import "./toolbar/index.js";
 import "./tooltip/index.js";
+import "./tree/index.js";
 import "./trunc/index.js";
 export { DuiAccordion } from "./accordion/index.js";
 export { DuiAccordionItem } from "./accordion/index.js";
@@ -133,6 +134,8 @@ export { DuiToolbar } from "./toolbar/index.js";
 export { DuiTooltip } from "./tooltip/index.js";
 export { DuiTooltipPopup } from "./tooltip/index.js";
 export { DuiTooltipTrigger } from "./tooltip/index.js";
+export { DuiTree } from "./tree/index.js";
+export { DuiTreeItem } from "./tree/index.js";
 export { DuiTrunc } from "./trunc/index.js";
 export type { AccordionContext } from "@deepfuture/dui-primitives/accordion";
 export type { AlertDialogOpenChangeDetail } from "@deepfuture/dui-primitives/alert-dialog";
@@ -159,3 +162,4 @@ export type { TextareaResize } from "@deepfuture/dui-primitives/textarea";
 export type { ToggleGroupContext } from "@deepfuture/dui-primitives/toggle";
 export type { TooltipOpenChangeDetail } from "@deepfuture/dui-primitives/tooltip";
 export type { TooltipContext, TooltipSide } from "@deepfuture/dui-primitives/tooltip";
+export type { SelectionMode, TreeContext } from "@deepfuture/dui-primitives/tree";

package/all.js

@@ -44,6 +44,7 @@ import "./textarea/index.js";
 import "./toggle/index.js";
 import "./toolbar/index.js";
 import "./tooltip/index.js";
+import "./tree/index.js";
 import "./trunc/index.js";
 export { DuiAccordion } from "./accordion/index.js";
 export { DuiAccordionItem } from "./accordion/index.js";
@@ -133,4 +134,6 @@ export { DuiToolbar } from "./toolbar/index.js";
 export { DuiTooltip } from "./tooltip/index.js";
 export { DuiTooltipPopup } from "./tooltip/index.js";
 export { DuiTooltipTrigger } from "./tooltip/index.js";
+export { DuiTree } from "./tree/index.js";
+export { DuiTreeItem } from "./tree/index.js";
 export { DuiTrunc } from "./trunc/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deepfuture/dui-components",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "DUI styled web components — extends dui-primitives with design tokens and variant CSS",
   "type": "module",
   "license": "MIT",
@@ -186,6 +186,10 @@
       "import": "./tooltip/index.js",
       "types": "./tooltip/index.d.ts"
     },
+    "./tree": {
+      "import": "./tree/index.js",
+      "types": "./tree/index.d.ts"
+    },
     "./tokens": {
       "import": "./tokens/tokens.js",
       "types": "./tokens/tokens.d.ts"
@@ -210,7 +214,7 @@
     "README.md"
   ],
   "dependencies": {
-    "@deepfuture/dui-primitives": "1.1.0",
+    "@deepfuture/dui-primitives": "1.3.0",
     "lit": "^3.3.2",
     "@lit/context": "^1.1.3"
   },

package/tree/index.d.ts

@@ -0,0 +1,6 @@
+import "./tree.js";
+import "./tree-item.js";
+export { DuiTree } from "./tree.js";
+export { DuiTreeItem } from "./tree-item.js";
+export type { SelectionMode, TreeContext } from "@deepfuture/dui-primitives/tree";
+export { actionEvent, expandedChangeEvent, loadChildrenEvent, selectionChangeEvent, } from "@deepfuture/dui-primitives/tree";

package/tree/index.js

@@ -0,0 +1,5 @@
+import "./tree.js";
+import "./tree-item.js";
+export { DuiTree } from "./tree.js";
+export { DuiTreeItem } from "./tree-item.js";
+export { actionEvent, expandedChangeEvent, loadChildrenEvent, selectionChangeEvent, } from "@deepfuture/dui-primitives/tree";

package/tree/tree-item.d.ts

@@ -0,0 +1,5 @@
+import { DuiTreeItemPrimitive } from "@deepfuture/dui-primitives/tree";
+import "../_install.js";
+export declare class DuiTreeItem extends DuiTreeItemPrimitive {
+    static styles: import("lit").CSSResult[];
+}

package/tree/tree-item.js

@@ -0,0 +1,144 @@
+import { css, unsafeCSS } from "lit";
+import { DuiTreeItemPrimitive } from "@deepfuture/dui-primitives/tree";
+import "../_install.js";
+// Lucide chevron-right, encoded for use as a CSS mask
+const chevronMask = unsafeCSS(`url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E")`);
+// Lucide loader-2 (rotating arc), used as a spinner mask while loading
+const spinnerMask = unsafeCSS(`url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-6.219-8.56'/%3E%3C/svg%3E")`);
+const styles = css `
+  /* ── Row container ─────────────────────────────────────────────────── */
+
+  /*
+  * IMPORTANT: All visual styling lives on [part="content"], NOT [part="root"].
+  * [part="root"] wraps both the row and the children group, so :hover on it
+  * would bleed onto descendant rows. See the hover-bleed regression demo.
+  */
+  [part="content"] {
+    height: var(--dui-tree-row-height);
+    padding-inline-start: calc(
+      var(--_tree-row-px) +
+        (var(--dui-tree-level, 1) - 1) * var(--dui-tree-indent)
+      );
+      padding-inline-end: var(--_tree-row-px);
+      margin-block: calc(var(--dui-tree-row-spacing) / 2);
+      margin-inline: var(--space-1);
+      border-radius: var(--dui-tree-row-radius);
+      gap: var(--_tree-inline-gap);
+      color: var(--text-1);
+      font-family: var(--font-sans);
+      font-size: var(--_tree-label-font-size);
+      line-height: var(--_tree-label-line-height);
+      cursor: pointer;
+      transition-property: background, box-shadow, color;
+      transition-duration: var(--duration-faster);
+      transition-timing-function: var(--ease-out-3);
+      /* Allow children to truncate */
+      min-width: 0;
+    }
+
+    @media (hover: hover) {
+      [part="content"]:hover {
+        background: var(--dui-tree-hover-bg);
+      }
+    }
+
+    :host([data-selected]) [part="content"] {
+      background: var(--dui-tree-selected-bg);
+    }
+
+    :host([data-disabled]) [part="content"] {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    /* ── Focus ring ─────────────────────────────────────────────────────── */
+
+    [part="root"]:focus-visible {
+      outline: none;
+    }
+
+    [part="root"]:focus-visible [part="content"] {
+      box-shadow:
+        0 0 0 var(--focus-ring-offset) var(--background),
+        0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width))
+        var(--focus-ring-color);
+      /* Keep the highlighted row above siblings so the ring isn't clipped. */
+      position: relative;
+      z-index: 1;
+    }
+
+    /* ── Indicator (chevron / spinner / leaf placeholder) ─────────────── */
+
+    [part="indicator"] {
+      width: var(--_tree-indicator-size);
+      height: var(--_tree-indicator-size);
+      color: var(--text-2);
+    }
+
+    /* Branch chevron */
+    :host([data-branch]) [part="indicator"]::before {
+      content: "";
+      display: block;
+      width: 100%;
+      height: 100%;
+      background: currentColor;
+      -webkit-mask: ${chevronMask} center / contain no-repeat;
+      mask: ${chevronMask} center / contain no-repeat;
+      transition-property: transform;
+      transition-duration: var(--duration-fast);
+      transition-timing-function: var(--ease-out-3);
+    }
+
+    :host([data-expanded]) [part="indicator"]::before {
+      transform: rotate(90deg);
+    }
+
+    /* Loading spinner replaces the chevron in-place */
+    :host([data-loading]) [part="indicator"]::before {
+      -webkit-mask: ${spinnerMask} center / contain no-repeat;
+      mask: ${spinnerMask} center / contain no-repeat;
+      transform: none;
+      animation: dui-tree-spin 0.9s linear infinite;
+    }
+
+    @keyframes dui-tree-spin {
+      from {
+        transform: rotate(0deg);
+      }
+      to {
+        transform: rotate(360deg);
+      }
+    }
+
+    /* ── Slotted content ────────────────────────────────────────────────── */
+
+    ::slotted([slot="label"]) {
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    ::slotted([slot="end"]) {
+      flex-shrink: 0;
+      color: var(--text-2);
+      font-size: var(--_tree-end-font-size);
+      line-height: var(--_tree-end-line-height);
+    }
+
+    /* ── Reduced motion ────────────────────────────────────────────────── */
+
+    @media (prefers-reduced-motion: reduce) {
+      [part="content"],
+      :host([data-branch]) [part="indicator"]::before {
+        transition-duration: 0s;
+      }
+      :host([data-loading]) [part="indicator"]::before {
+        animation: none;
+      }
+    }
+  `;
+export class DuiTreeItem extends DuiTreeItemPrimitive {
+    static styles = [...DuiTreeItemPrimitive.styles, styles];
+}
+customElements.define(DuiTreeItem.tagName, DuiTreeItem);

package/tree/tree.d.ts

@@ -0,0 +1,5 @@
+import { DuiTreePrimitive } from "@deepfuture/dui-primitives/tree";
+import "../_install.js";
+export declare class DuiTree extends DuiTreePrimitive {
+    static styles: import("lit").CSSResult[];
+}

package/tree/tree.js

@@ -0,0 +1,51 @@
+import { css } from "lit";
+import { DuiTreePrimitive } from "@deepfuture/dui-primitives/tree";
+import "../_install.js";
+const styles = css `
+  /* ── Sizes — write to public tokens on :host so consumer overrides win ── */
+
+  :host {
+    /* Default = sm */
+    --dui-tree-row-height: var(--component-height-sm);
+    --dui-tree-indent: var(--space-4);
+    --dui-tree-row-spacing: 0;
+    --dui-tree-row-radius: var(--radius-sm);
+    --dui-tree-hover-bg: oklch(from var(--foreground) l c h / 0.05);
+    --dui-tree-selected-bg: oklch(from var(--foreground) l c h / 0.10);
+
+    /* Internal-only (not part of public token surface) */
+    --_tree-label-font-size: var(--text-xs);
+    --_tree-label-line-height: var(--text-xs--line-height);
+    --_tree-end-font-size: var(--text-2xs);
+    --_tree-end-line-height: var(--text-2xs--line-height);
+    --_tree-indicator-size: 14px;
+    --_tree-row-px: var(--space-2);
+    --_tree-inline-gap: var(--space-2);
+  }
+
+  :host([size="md"]) {
+    --dui-tree-row-height: var(--component-height-md);
+    --dui-tree-indent: var(--space-5);
+    --_tree-label-font-size: var(--text-sm);
+    --_tree-label-line-height: var(--text-sm--line-height);
+    --_tree-end-font-size: var(--text-xs);
+    --_tree-end-line-height: var(--text-xs--line-height);
+    --_tree-indicator-size: var(--space-4);
+    --_tree-inline-gap: var(--space-2);
+  }
+
+  :host([size="lg"]) {
+    --dui-tree-row-height: var(--component-height-lg);
+    --dui-tree-indent: var(--space-6);
+    --_tree-label-font-size: var(--text-sm);
+    --_tree-label-line-height: var(--text-sm--line-height);
+    --_tree-end-font-size: var(--text-xs);
+    --_tree-end-line-height: var(--text-xs--line-height);
+    --_tree-indicator-size: var(--space-4);
+    --_tree-inline-gap: var(--space-2_5);
+  }
+`;
+export class DuiTree extends DuiTreePrimitive {
+    static styles = [...DuiTreePrimitive.styles, styles];
+}
+customElements.define(DuiTree.tagName, DuiTree);