@threadlabs/looma 0.1.23 → 0.1.25

package/dist/{ui-top-bar.entry-PIAWXJNV.js → ui-top-bar.entry-QKE2DLVD.js}

@@ -3,7 +3,7 @@ import {
   getElement,
   h,
   registerInstance
-} from "./chunk-GDMQKT5F.js";
+} from "./chunk-UY423IKN.js";
 
 // dist/esm/ui-top-bar.entry.js
 var uiTopBarCss = () => `:host{position:sticky;inset-block-start:0;z-index:var(--ui-top-bar-z-index, 100);display:block}.top-bar{min-block-size:calc(var(--ui-top-bar-height, 56px) + env(safe-area-inset-top));display:flex;align-items:center;gap:var(--ui-top-bar-gap, var(--ui-space-3, 0.75rem));padding-block-start:env(safe-area-inset-top);padding-inline-start:max(     var(--ui-top-bar-padding-inline, var(--ui-space-4, 1rem)),     env(safe-area-inset-left)   );padding-inline-end:max(     var(--ui-top-bar-padding-inline, var(--ui-space-4, 1rem)),     env(safe-area-inset-right)   );background:var(--ui-top-bar-bg, var(--ui-surface, #ffffff));border-block-end:1px solid var(--ui-top-bar-border, var(--ui-border, #e5e7eb))}.top-bar__leading,.top-bar__search,.top-bar__actions{display:flex;align-items:center;flex-shrink:0}.top-bar__actions{gap:var(--ui-top-bar-actions-gap, var(--ui-space-1, 0.25rem))}.top-bar__title{min-inline-size:0;flex:1}[hidden]{display:none}@media (min-width: 768px){:host{display:none}}`;
@@ -40,7 +40,7 @@ var UITopBar = class {
     this.hasActions = slotHasContent(this.actionsSlot);
   };
   render() {
-    return h(Host, { key: "730e45232ab2b86c2ac99dba773f4ca15d7c3c51" }, h("header", { key: "f94f9b4f3f5930fda950895d2eec01d3ec175479", class: "top-bar", part: "base" }, h("div", { key: "038f6a404b0f159b4b826ada73d3c920266354c8", class: "top-bar__leading", hidden: !this.hasLeading }, h("slot", { key: "2d415368310c319eca3f3eb9b2c885ef79bb4107", name: "leading", ref: (el) => this.leadingSlot = el, onSlotchange: this.syncSlots })), h("div", { key: "dfd78b02066a91e9c610e4655a70da704ad65327", class: "top-bar__title" }, h("slot", { key: "499e24a864a31f6e400fd02aab4a3f960c87e572" })), h("div", { key: "5aa94952996487651dffecd2e351548631fa29b6", class: "top-bar__search", hidden: !this.hasSearch }, h("slot", { key: "eddad95f8acf787ee0cead2a46e7961a06375d5c", name: "search", ref: (el) => this.searchSlot = el, onSlotchange: this.syncSlots })), h("div", { key: "dc69d492aa221a8beb888350bf101f8beeceede9", class: "top-bar__actions", hidden: !this.hasActions }, h("slot", { key: "7cde7e062f487da8209738a32415636c7a6b72f0", name: "actions", ref: (el) => this.actionsSlot = el, onSlotchange: this.syncSlots }))));
+    return h(Host, { key: "ef7cf644a8e8381d7d1f8d093bcfefcdc4620682" }, h("header", { key: "5055594a179d86efefd43529e070a582c51cb1d8", class: "top-bar", part: "base" }, h("div", { key: "bd6ec069ae9d7820a6992250ba1aa997b4cc6754", class: "top-bar__leading", hidden: !this.hasLeading }, h("slot", { key: "3b9b1b73fb455ad720e1db46757555eb3713c0b8", name: "leading", ref: (el) => this.leadingSlot = el, onSlotchange: this.syncSlots })), h("div", { key: "e402cc0cb7ec4418460182f8f32cb161c6139221", class: "top-bar__title" }, h("slot", { key: "fce0cfc11da269167853f591742b1369023864ae" })), h("div", { key: "6861bb04f399076378aa1fa9be24b35db277106a", class: "top-bar__search", hidden: !this.hasSearch }, h("slot", { key: "3857f37d53ec99b36a52cb7830e634afdee29d2e", name: "search", ref: (el) => this.searchSlot = el, onSlotchange: this.syncSlots })), h("div", { key: "538f6297078b6d5aa85906e902066e8809f52540", class: "top-bar__actions", hidden: !this.hasActions }, h("slot", { key: "3c45ff59c4b48673e796c6e93842cb11fceb652f", name: "actions", ref: (el) => this.actionsSlot = el, onSlotchange: this.syncSlots }))));
   }
 };
 UITopBar.style = uiTopBarCss();

package/dist/ui-tree-item.entry-TC6YWIC6.js

@@ -0,0 +1,145 @@
+import {
+  loomaIconMarkup
+} from "./chunk-NB6DBRXQ.js";
+import {
+  dispatchDetail,
+  eventToTrigger
+} from "./chunk-UL7UIUJZ.js";
+import {
+  Host,
+  getElement,
+  h,
+  registerInstance
+} from "./chunk-UY423IKN.js";
+
+// dist/esm/ui-tree-item.entry.js
+var uiTreeItemCss = () => `:host{--ui-tree-indent:16px;--ui-tree-row-min-height:32px;--ui-tree-drop-color:var(--ui-accent-solid);position:relative;display:block;min-inline-size:0;margin-inline-start:calc(var(--ui-tree-item-depth, 0) * var(--ui-tree-indent))}.row{position:relative;display:grid;grid-template-columns:20px auto minmax(0, 1fr) auto;align-items:center;min-block-size:var(--ui-tree-row-min-height);min-inline-size:0;font-size:var(--ui-tree-font-size, var(--ui-font-size-ui, 0.9375rem));border-radius:var(--ui-radius-md);color:var(--ui-text-secondary);transition:background-color var(--ui-motion-fast) var(--ui-motion-ease),     color var(--ui-motion-fast) var(--ui-motion-ease),     opacity var(--ui-motion-fast) var(--ui-motion-ease),     box-shadow var(--ui-motion-fast) var(--ui-motion-ease),     min-block-size var(--ui-motion-base) var(--ui-motion-ease)}.row:hover,:host([data-selected]) .row,.row:focus-within{color:var(--ui-text-primary);background:var(--ui-surface-muted)}:host([data-disabled]) .row{opacity:0.55}:host([data-dragging]) .row{opacity:0.42}:host(:focus){outline:none}:host(:focus-visible) .row{box-shadow:0 0 0 2px var(--ui-focus-ring)}:host([data-drop-position='inside']) .row{background:var(--ui-accent-subtle);box-shadow:inset 0 0 0 1px var(--ui-tree-drop-color)}.disclosure,.disclosure-spacer{grid-column:1;grid-row:1;inline-size:20px;block-size:28px}.disclosure{display:grid;place-items:center;padding:0;color:var(--ui-text-muted);background:transparent;border:0;border-radius:var(--ui-radius-sm);cursor:pointer}.disclosure:hover{color:var(--ui-text-primary);background:var(--ui-surface-elevated)}.disclosure-icon{display:block;inline-size:14px;block-size:14px;transform:rotate(-90deg);transition:transform var(--ui-motion-fast) var(--ui-motion-ease)}.disclosure-icon--expanded{transform:rotate(0deg)}.disclosure-icon :is(svg),.drag-handle :is(svg){display:block;inline-size:100%;block-size:100%}.leading{display:none}.leading:has(*){display:inline-grid;place-items:center;grid-column:2;grid-row:1;inline-size:16px;block-size:16px;margin-inline-start:var(--ui-space-1)}.label{grid-column:3;grid-row:1;min-inline-size:0;padding:var(--ui-space-1) var(--ui-space-2)}.actions{grid-column:4;grid-row:1;display:inline-flex;align-items:center;min-inline-size:0}.drag-handle{position:absolute;z-index:2;inset-block-start:50%;inset-inline-start:-22px;inline-size:20px;block-size:32px;display:grid;place-items:center;padding:7px 3px;color:var(--ui-text-muted);background:var(--ui-surface-elevated);border:1px solid transparent;border-radius:var(--ui-radius-sm);cursor:grab;opacity:0;pointer-events:none;transform:translateY(-50%);transition:opacity var(--ui-motion-fast) var(--ui-motion-ease)}.row:hover .drag-handle,.drag-handle:focus-visible,:host([data-dragging]) .drag-handle{opacity:1;pointer-events:auto}.drag-handle:active{cursor:grabbing}.drop-indicator{position:absolute;z-index:3;inset-inline:1px;display:none;block-size:2px;border-radius:999px;background:var(--ui-tree-drop-color);pointer-events:none}.drop-indicator::before,.drop-indicator::after{content:'';position:absolute;inset-block-start:50%;inline-size:7px;block-size:7px;border:2px solid var(--ui-tree-drop-color);border-radius:999px;background:var(--ui-surface-elevated);transform:translateY(-50%)}.drop-indicator::before{inset-inline-start:-1px}.drop-indicator::after{inset-inline-end:-1px}:host([data-drop-position='before']) .row-drop-indicator{display:block;inset-block-start:-1px}:host([data-drop-position='after']) .subtree-drop-indicator{display:block;inset-block-end:-1px}.children[hidden]{display:none}:host-context(html[data-ui-input-modality='touch']){--ui-tree-row-min-height:44px}:host-context(html[data-ui-input-modality='touch']) .drag-handle{display:none}@media (prefers-reduced-motion: reduce){.row,.disclosure-icon,.drag-handle{transition:none}}`;
+var UITreeItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  get host() {
+    return getElement(this);
+  }
+  /** Stable application identifier emitted by tree interaction events. */
+  itemId = "";
+  /** Accessible name used by the disclosure and drag handle. */
+  label = "";
+  /** Application hierarchy depth override used for drop constraints. Defaults to structural nesting. */
+  dropDepth;
+  /** Virtualized-tree descendant-depth override for the tree's max-depth drop constraint. */
+  subtreeDepth;
+  /** Whether this item accepts children and exposes disclosure behavior. */
+  container = false;
+  /** Whether this item participates in pointer drag and drop. */
+  sortable = false;
+  /** Application-defined kind used to reject incompatible sibling drops. */
+  dragType = "item";
+  /** Application-defined parent/list identity included with reorder events. */
+  dropScope = "";
+  /** Comma-separated drag kinds accepted as children. Empty accepts every kind. */
+  accepts = "";
+  /** Controlled expansion value. When omitted, `default-expanded` initializes uncontrolled state. */
+  expanded;
+  /** Initial uncontrolled expansion value. */
+  defaultExpanded = false;
+  selected = false;
+  disabled = false;
+  internalExpanded = false;
+  structuralLevel = 1;
+  tabStop = false;
+  syncExpandedFromProp() {
+    if (this.expanded !== void 0)
+      this.internalExpanded = this.expanded;
+  }
+  componentWillLoad() {
+    this.internalExpanded = this.expanded ?? this.defaultExpanded;
+    this.updateStructuralLevel();
+  }
+  connectedCallback() {
+    this.host.addEventListener("ui-tree-auto-expand", this.onAutoExpand);
+    this.host.addEventListener("ui-tree-structure-sync", this.updateStructuralLevel);
+    this.host.addEventListener("ui-tree-roving-tab-stop", this.onRovingTabStop);
+    this.host.addEventListener("ui-tree-request-expanded", this.onExpansionRequest);
+  }
+  disconnectedCallback() {
+    this.host.removeEventListener("ui-tree-auto-expand", this.onAutoExpand);
+    this.host.removeEventListener("ui-tree-structure-sync", this.updateStructuralLevel);
+    this.host.removeEventListener("ui-tree-roving-tab-stop", this.onRovingTabStop);
+    this.host.removeEventListener("ui-tree-request-expanded", this.onExpansionRequest);
+  }
+  updateStructuralLevel = () => {
+    const tree = this.host.closest("ui-tree");
+    let ancestor = this.host.parentElement?.closest("ui-tree-item") ?? null;
+    let level = 1;
+    while (ancestor && tree?.contains(ancestor)) {
+      level += 1;
+      ancestor = ancestor.parentElement?.closest("ui-tree-item") ?? null;
+    }
+    if (this.structuralLevel !== level)
+      this.structuralLevel = level;
+  };
+  setExpanded(expanded, trigger) {
+    const current = this.isExpanded();
+    if (!this.container || this.disabled || current === expanded)
+      return;
+    if (this.expanded === void 0)
+      this.internalExpanded = expanded;
+    dispatchDetail(this.host, "expand", { id: this.itemId, expanded, trigger });
+    this.host.dispatchEvent(new CustomEvent("ui-tree-expansion-change"));
+  }
+  isExpanded() {
+    return this.expanded ?? this.internalExpanded;
+  }
+  onAutoExpand = () => {
+    this.setExpanded(true, "pointer");
+  };
+  onRovingTabStop = (event) => {
+    this.tabStop = Boolean(event.detail?.active) && !this.disabled;
+  };
+  onExpansionRequest = (event) => {
+    const detail = event.detail;
+    if (typeof detail?.expanded === "boolean")
+      this.setExpanded(detail.expanded, detail.trigger ?? "keyboard");
+  };
+  onDisclosureClick = (event) => {
+    event.stopPropagation();
+    this.setExpanded(!this.isExpanded(), eventToTrigger(event));
+  };
+  onDisclosureKeydown = (event) => {
+    if (event.key !== "ArrowRight" && event.key !== "ArrowLeft")
+      return;
+    event.preventDefault();
+    event.stopPropagation();
+    this.setExpanded(event.key === "ArrowRight", "keyboard");
+  };
+  onRowClick = (event) => {
+    if (!this.container || this.disabled)
+      return;
+    const path = event.composedPath();
+    const interactive = path.some((node) => node instanceof HTMLElement && (node.matches('a, button, input, select, textarea, [role="button"], [role="link"]') || node.getAttribute("slot") === "actions"));
+    if (!interactive)
+      this.setExpanded(!this.isExpanded(), eventToTrigger(event));
+  };
+  render() {
+    const level = this.structuralLevel;
+    const expanded = this.isExpanded();
+    const disclosureLabel = `${expanded ? "Collapse" : "Expand"} ${this.label || "item"}`;
+    const dragLabel = `Drag ${this.label || "item"} to reorder`;
+    return h(Host, { key: "f092fa9586a39aba1a9629ba42e52f8fbc10de05", role: "treeitem", "aria-label": this.label || void 0, "aria-level": String(level), "aria-expanded": this.container ? String(expanded) : void 0, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? "true" : void 0, "data-container": this.container ? "" : void 0, "data-selected": this.selected ? "" : void 0, "data-disabled": this.disabled ? "" : void 0, "data-drag-type": this.dragType || "item", "data-drop-scope": this.dropScope || void 0, "data-accepts": this.accepts || void 0, tabIndex: this.disabled || !this.tabStop ? -1 : 0, style: {
+      "--ui-tree-item-depth": String(level - 1),
+      "margin-inline-start": level > 1 ? "var(--ui-tree-indent, 16px)" : "0px"
+    } }, h("div", { key: "2f16d97219ba9ec9e37688d97ad9144508aa1ed5", class: "row", part: "row", onClick: this.onRowClick }, this.sortable && !this.disabled ? h("button", { class: "drag-handle", part: "drag-handle", type: "button", draggable: true, "aria-label": dragLabel, title: dragLabel }, h("span", { innerHTML: loomaIconMarkup("grip-vertical") })) : null, this.container ? h("button", { class: "disclosure", part: "disclosure", type: "button", "aria-label": disclosureLabel, "aria-expanded": String(expanded), disabled: this.disabled, onClick: this.onDisclosureClick, onKeyDown: this.onDisclosureKeydown }, h("span", { class: { "disclosure-icon": true, "disclosure-icon--expanded": expanded }, innerHTML: loomaIconMarkup("chevron-down") })) : h("span", { class: "disclosure-spacer", "aria-hidden": "true" }), h("span", { key: "d984631c891df304edb3e1dc5bcd19af3ad8e20d", class: "leading", part: "leading" }, h("slot", { key: "81a0e055859df5d4daaa6dac39013b23dcc2831b", name: "leading" })), h("span", { key: "3ae295523d5a3b9feaa9bfaa16d807349e37d78b", class: "label", part: "label" }, h("slot", { key: "db8503a41d087d283074a41e76fa872ff4b2a707" })), h("span", { key: "ac5b5db7128b31a9263b912bd64cd90ac640eaeb", class: "actions", part: "actions" }, h("slot", { key: "c8842a5d80215ec297688c86f6bfe9b4d9bed333", name: "actions" })), h("span", { key: "b7f239bc16867678291850ad61a5cd752d6a7425", class: "drop-indicator row-drop-indicator", part: "drop-indicator", "aria-hidden": "true" })), this.container ? h("div", { class: "children", part: "children", role: "group", hidden: !expanded }, h("slot", { name: "children" })) : null, h("span", { key: "2a5f448db2f4f363a34a1a950785e0ee12cc9938", class: "drop-indicator subtree-drop-indicator", part: "drop-indicator", "aria-hidden": "true" }));
+  }
+  static get watchers() {
+    return {
+      "expanded": [{
+        "syncExpandedFromProp": 0
+      }]
+    };
+  }
+};
+UITreeItem.style = uiTreeItemCss();
+export {
+  UITreeItem as ui_tree_item
+};

package/dist/{ui-tree.entry-XYI3ZFAZ.js → ui-tree.entry-UL6UHCUT.js}

@@ -6,7 +6,7 @@ import {
   getElement,
   h,
   registerInstance
-} from "./chunk-GDMQKT5F.js";
+} from "./chunk-UY423IKN.js";
 
 // dist/esm/ui-tree.entry.js
 function classifyDropPosition(rect, clientY, acceptsChildren) {
@@ -52,7 +52,7 @@ function createHoverIntent(delay, onIntent) {
     destroy: cancel
   };
 }
-var uiTreeCss = () => `:host{--ui-tree-indent:16px;display:block;min-inline-size:0;padding-inline-start:var(--ui-tree-gutter, 22px)}::slotted(ui-tree-item){--ui-tree-indent:inherit}`;
+var uiTreeCss = () => `:host{--ui-tree-indent:16px;--ui-tree-gutter:0px;display:block;min-inline-size:0;padding-inline-start:var(--ui-tree-gutter)}::slotted(ui-tree-item){--ui-tree-indent:inherit}`;
 var UITree = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -71,6 +71,8 @@ var UITree = class {
   rejectedPosition = null;
   rejection = null;
   hoverIntent = null;
+  structureObserver = null;
+  tabStop = null;
   componentDidLoad() {
     this.hoverIntent = createHoverIntent(this.hoverExpandDelay, this.expandTarget);
     this.host.addEventListener("dragstart", this.onDragStart);
@@ -81,6 +83,11 @@ var UITree = class {
     this.host.addEventListener("drop", this.onDrop);
     this.host.addEventListener("dragend", this.onDragEnd);
     this.host.addEventListener("keydown", this.onKeyDown);
+    this.host.addEventListener("focusin", this.onFocusIn);
+    this.host.addEventListener("ui-tree-expansion-change", this.onExpansionChange);
+    this.syncStructuralLevels();
+    this.structureObserver = new MutationObserver(this.syncStructuralLevels);
+    this.structureObserver.observe(this.host, { childList: true, subtree: true });
   }
   disconnectedCallback() {
     this.hoverIntent?.destroy();
@@ -92,10 +99,40 @@ var UITree = class {
     this.host.removeEventListener("drop", this.onDrop);
     this.host.removeEventListener("dragend", this.onDragEnd);
     this.host.removeEventListener("keydown", this.onKeyDown);
+    this.host.removeEventListener("focusin", this.onFocusIn);
+    this.host.removeEventListener("ui-tree-expansion-change", this.onExpansionChange);
+    this.structureObserver?.disconnect();
+    this.structureObserver = null;
+  }
+  syncStructuralLevels = () => {
+    for (const item of Array.from(this.host.querySelectorAll("ui-tree-item"))) {
+      item.dispatchEvent(new CustomEvent("ui-tree-structure-sync"));
+    }
+    this.syncTabStop();
+  };
+  syncTabStop(preferred) {
+    const items = this.visibleItems();
+    const next = preferred && items.includes(preferred) ? preferred : this.tabStop && items.includes(this.tabStop) ? this.tabStop : items[0] ?? null;
+    this.tabStop = next;
+    for (const item of items) {
+      item.dispatchEvent(new CustomEvent("ui-tree-roving-tab-stop", {
+        detail: { active: item === next }
+      }));
+    }
   }
   itemFromEvent(event) {
     return event.composedPath().find((node) => node instanceof HTMLElement && node.localName === "ui-tree-item") ?? null;
   }
+  eventTargetsInteractiveContent(event) {
+    for (const node of event.composedPath()) {
+      if (node instanceof HTMLElement && node.localName === "ui-tree-item")
+        break;
+      if (node instanceof HTMLElement && node.matches('a, button, input, select, textarea, [role="button"], [role="link"]')) {
+        return true;
+      }
+    }
+    return false;
+  }
   itemId(item) {
     return item.itemId || item.getAttribute("item-id") || "";
   }
@@ -139,9 +176,23 @@ var UITree = class {
     const dropDepth = item.getAttribute("drop-depth");
     if (dropDepth !== null)
       return Number(dropDepth);
-    if (item.depth !== void 0)
-      return item.depth;
-    return Number(item.getAttribute("depth")) || 1;
+    return Number(item.getAttribute("aria-level")) || 1;
+  }
+  subtreeDepth(item) {
+    if (item.subtreeDepth !== void 0)
+      return Math.max(0, Math.floor(item.subtreeDepth));
+    const override = item.getAttribute("subtree-depth");
+    if (override !== null)
+      return Math.max(0, Math.floor(Number(override)));
+    return Array.from(item.querySelectorAll("ui-tree-item")).reduce((deepest, descendant) => {
+      let nesting = 0;
+      let ancestor = descendant.parentElement?.closest("ui-tree-item") ?? null;
+      while (ancestor && ancestor !== item) {
+        nesting += 1;
+        ancestor = ancestor.parentElement?.closest("ui-tree-item") ?? null;
+      }
+      return ancestor === item ? Math.max(deepest, nesting + 1) : deepest;
+    }, 0);
   }
   dropRejection(source, target, position) {
     if (source.contains(target))
@@ -156,9 +207,9 @@ var UITree = class {
       return { reason: "incompatible" };
     }
     const maxDepth = Math.max(0, Math.floor(this.maxDepth));
-    if (maxDepth > 0 && source.subtreeDepth !== void 0) {
+    if (maxDepth > 0) {
       const targetDepth = Math.max(0, Math.floor(this.constraintDepth(target)));
-      const subtreeDepth = Math.max(0, Math.floor(source.subtreeDepth));
+      const subtreeDepth = this.subtreeDepth(source);
       const resultingDepth = targetDepth + (position === "inside" ? 1 : 0) + subtreeDepth;
       if (resultingDepth > maxDepth)
         return { reason: "max-depth", maxDepth, resultingDepth };
@@ -344,7 +395,35 @@ var UITree = class {
   visibleItems() {
     return Array.from(this.host.querySelectorAll("ui-tree-item")).filter((item) => item.getClientRects().length > 0 && !item.hasAttribute("disabled"));
   }
+  parentItem(item) {
+    const parent = item.parentElement?.closest("ui-tree-item") ?? null;
+    return parent && this.host.contains(parent) ? parent : null;
+  }
+  firstVisibleChild(item, items) {
+    return items.find((candidate) => this.parentItem(candidate) === item) ?? null;
+  }
+  focusItem(item) {
+    this.syncTabStop(item);
+    item.focus();
+  }
+  requestExpansion(item, expanded) {
+    item.dispatchEvent(new CustomEvent("ui-tree-request-expanded", {
+      detail: { expanded, trigger: "keyboard" }
+    }));
+  }
+  onFocusIn = (event) => {
+    if (this.eventTargetsInteractiveContent(event))
+      return;
+    const item = this.itemFromEvent(event);
+    if (item)
+      this.syncTabStop(item);
+  };
+  onExpansionChange = () => {
+    requestAnimationFrame(() => this.syncTabStop());
+  };
   onKeyDown = (event) => {
+    if (this.eventTargetsInteractiveContent(event))
+      return;
     const current = this.itemFromEvent(event);
     if (!current)
       return;
@@ -352,14 +431,37 @@ var UITree = class {
     const index = items.indexOf(current);
     if (index < 0)
       return;
-    const next = event.key === "ArrowDown" ? items[index + 1] : event.key === "ArrowUp" ? items[index - 1] : null;
-    if (!next)
+    const next = event.key === "ArrowDown" ? items[index + 1] : event.key === "ArrowUp" ? items[index - 1] : event.key === "Home" ? items[0] : event.key === "End" ? items.at(-1) : null;
+    if (next) {
+      event.preventDefault();
+      this.focusItem(next);
       return;
-    event.preventDefault();
-    next.focus();
+    }
+    if (event.key === "ArrowLeft") {
+      if (current.getAttribute("aria-expanded") === "true") {
+        event.preventDefault();
+        this.requestExpansion(current, false);
+      } else if (this.parentItem(current)) {
+        event.preventDefault();
+        this.focusItem(this.parentItem(current));
+      }
+      return;
+    }
+    if (event.key === "ArrowRight") {
+      if (current.getAttribute("aria-expanded") === "false") {
+        event.preventDefault();
+        this.requestExpansion(current, true);
+      } else if (current.getAttribute("aria-expanded") === "true") {
+        const child = this.firstVisibleChild(current, items);
+        if (child) {
+          event.preventDefault();
+          this.focusItem(child);
+        }
+      }
+    }
   };
   render() {
-    return h(Host, { key: "474c2154d2abe3c76eee9c36bf552390089df6e8", role: "tree", "aria-label": this.label || "Tree" }, h("slot", { key: "93aedd02f984dd33b5efc811fef417d1199917bd" }));
+    return h(Host, { key: "7efbf793fe63471006df57f0045a5fe995c81440", role: "tree", "aria-label": this.label || "Tree" }, h("slot", { key: "1804e391796e7451c93cb58258e0e23ec3ad98c7" }));
   }
 };
 UITree.style = uiTreeCss();