@threadlabs/looma 0.1.22 → 0.1.24

package/dist/{ui-tooltip.entry-G5WHQW7K.js → ui-tooltip.entry-SKFNYXPH.js}

@@ -1,38 +1,51 @@
 import {
   closeOverlay,
-  openOverlay,
-  requestTopOverlayClose
-} from "./chunk-SZJQ3NPX.js";
+  openOverlay
+} from "./chunk-TL4FIE7X.js";
 import {
   createAnchoredSurface
 } from "./chunk-YHXJC5M5.js";
+import {
+  controlledOrDefault,
+  isControlled
+} from "./chunk-HNFCGIBP.js";
 import {
   dispatchDetail
 } from "./chunk-UL7UIUJZ.js";
 import {
   Host,
+  createEvent,
   getElement,
   h,
   registerInstance
-} from "./chunk-NIPNHZ5W.js";
+} from "./chunk-IMHSPETJ.js";
 
 // dist/esm/ui-tooltip.entry.js
-var uiTooltipCss = () => `:host{position:fixed;inset:auto;margin:0;display:inline-block;border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-2);background:var(--ui-surface-elevated);color:var(--ui-text-primary);padding:var(--ui-space-2) var(--ui-space-3);font-size:var(--ui-font-size-sm);box-shadow:var(--ui-shadow-md);opacity:0;transform:translateY(4px);transition:opacity var(--ui-motion-fast) var(--ui-motion-ease),     transform var(--ui-motion-fast) var(--ui-motion-ease),     display var(--ui-motion-fast) allow-discrete,     overlay var(--ui-motion-fast) allow-discrete}:host(:popover-open){opacity:1;transform:translateY(0)}@starting-style{:host(:popover-open){opacity:0;transform:translateY(4px)}}:host([hidden]){display:none !important}@media (prefers-reduced-motion: reduce){:host{transition:none}}`;
+var uiTooltipCss = () => `:host{position:fixed;inset:auto;margin:0;display:inline-block;box-sizing:border-box;padding:0;border:0;border-radius:0;background:transparent;opacity:0;transform:translateY(4px);transition:opacity var(--ui-motion-fast) var(--ui-motion-ease),     transform var(--ui-motion-fast) var(--ui-motion-ease),     display var(--ui-motion-fast) allow-discrete,     overlay var(--ui-motion-fast) allow-discrete}.tooltip__surface{box-sizing:border-box;border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-2);background:var(--ui-surface-elevated);color:var(--ui-text-primary);padding:var(--ui-space-2) var(--ui-space-3);font-size:var(--ui-font-size-sm);box-shadow:var(--ui-shadow-md)}:host(:popover-open){opacity:1;transform:translateY(0)}@starting-style{:host(:popover-open){opacity:0;transform:translateY(4px)}}:host([hidden]){display:none !important}@media (prefers-reduced-motion: reduce){:host{transition:none}}`;
 var UITooltip = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.opened = createEvent(this, "open");
+    this.closed = createEvent(this, "close");
   }
   get host() {
     return getElement(this);
   }
   for = "";
-  open = false;
+  /** Controlled open state. Omit it to use defaultOpen and local interaction state. */
+  open;
   defaultOpen = false;
   placement = "top-start";
   /** Pointer hover intent delay in milliseconds. Keyboard focus is immediate. */
   showDelay = 500;
   /** Pointer leave grace period in milliseconds. */
   hideDelay = 100;
+  /** Click or tap pins the description; activate again to dismiss. */
+  toggleOnClick = false;
+  pinned = false;
+  focused = false;
+  opened;
+  closed;
   internalOpen = false;
   overlayId = `ui-tooltip-${Math.random().toString(36).slice(2, 11)}`;
   trigger = null;
@@ -41,7 +54,8 @@ var UITooltip = class {
   hideTimer = null;
   syncFromProp() {
     this.clearTimers();
-    this.internalOpen = this.open;
+    if (isControlled(this.open))
+      this.internalOpen = this.open;
   }
   resetSurface() {
     this.syncTrigger();
@@ -65,11 +79,13 @@ var UITooltip = class {
     }
   }
   componentDidLoad() {
-    this.syncFromProp();
-    this.internalOpen = this.internalOpen || this.defaultOpen;
+    if (!this.host.id)
+      this.host.id = this.overlayId;
+    this.internalOpen = controlledOrDefault(this.open, this.defaultOpen);
     this.syncTrigger();
     this.setupSurface();
-    this.host.addEventListener("keydown", this.onKeydown);
+    this.host.addEventListener("pointerenter", this.onSurfaceEnter);
+    this.host.addEventListener("pointerleave", this.onTriggerLeave);
     this.syncOverlay();
   }
   componentDidUpdate() {
@@ -80,11 +96,12 @@ var UITooltip = class {
     this.detachTriggerListeners();
     this.surface?.destroy();
     this.surface = null;
-    this.host.removeEventListener("keydown", this.onKeydown);
+    this.host.removeEventListener("pointerenter", this.onSurfaceEnter);
+    this.host.removeEventListener("pointerleave", this.onTriggerLeave);
     closeOverlay(this.overlayId);
   }
   syncTrigger() {
-    const next = this.for ? this.host.ownerDocument.getElementById(this.for) : this.host.previousElementSibling;
+    const next = this.for ? this.host.getRootNode().getElementById(this.for) : this.host.previousElementSibling;
     if (next === this.trigger)
       return;
     this.detachTriggerListeners();
@@ -103,6 +120,11 @@ var UITooltip = class {
     this.detachTriggerListeners();
     if (!this.trigger)
       return;
+    const ids = new Set((this.trigger.getAttribute("aria-describedby") || "").split(/\s+/).filter(Boolean));
+    ids.add(this.host.id);
+    this.trigger.setAttribute("aria-describedby", [...ids].join(" "));
+    this.trigger.addEventListener("click", this.onTriggerClick);
+    this.trigger.addEventListener("keydown", this.onTriggerKeydown);
     this.trigger.addEventListener("pointerenter", this.onTriggerEnter);
     this.trigger.addEventListener("pointerleave", this.onTriggerLeave);
     this.trigger.addEventListener("focusin", this.onTriggerFocusIn);
@@ -111,6 +133,13 @@ var UITooltip = class {
   detachTriggerListeners() {
     if (!this.trigger)
       return;
+    const ids = (this.trigger.getAttribute("aria-describedby") || "").split(/\s+/).filter((id) => id && id !== this.host.id);
+    if (ids.length)
+      this.trigger.setAttribute("aria-describedby", ids.join(" "));
+    else
+      this.trigger.removeAttribute("aria-describedby");
+    this.trigger.removeEventListener("click", this.onTriggerClick);
+    this.trigger.removeEventListener("keydown", this.onTriggerKeydown);
     this.trigger.removeEventListener("pointerenter", this.onTriggerEnter);
     this.trigger.removeEventListener("pointerleave", this.onTriggerLeave);
     this.trigger.removeEventListener("focusin", this.onTriggerFocusIn);
@@ -135,14 +164,29 @@ var UITooltip = class {
   setInteractionOpen(nextOpen, trigger) {
     if (this.internalOpen === nextOpen)
       return;
-    this.internalOpen = nextOpen;
+    if (!isControlled(this.open))
+      this.internalOpen = nextOpen;
     dispatchDetail(this.host, nextOpen ? "open" : "close", {
       open: nextOpen,
       reason: "action",
       trigger
     });
   }
-  onTriggerEnter = () => {
+  onSurfaceEnter = () => this.clearHideTimer();
+  onTriggerClick = (event) => {
+    if (!this.toggleOnClick)
+      return;
+    this.clearTimers();
+    this.pinned = !this.pinned;
+    this.setInteractionOpen(this.pinned, event.detail === 0 ? "keyboard" : "pointer");
+  };
+  onTriggerKeydown = (event) => {
+    if (event.key === "Escape")
+      this.clearTimers();
+  };
+  onTriggerEnter = (event) => {
+    if (event.pointerType === "touch")
+      return;
     this.clearHideTimer();
     if (this.internalOpen || this.showTimer !== null)
       return;
@@ -153,7 +197,7 @@ var UITooltip = class {
   };
   onTriggerLeave = () => {
     this.clearShowTimer();
-    if (!this.internalOpen || this.hideTimer !== null)
+    if (this.focused || this.pinned || !this.internalOpen || this.hideTimer !== null)
       return;
     this.hideTimer = setTimeout(() => {
       this.hideTimer = null;
@@ -161,6 +205,7 @@ var UITooltip = class {
     }, Math.max(0, this.hideDelay));
   };
   onTriggerFocusIn = () => {
+    this.focused = true;
     this.clearTimers();
     this.setInteractionOpen(true, "keyboard");
   };
@@ -168,28 +213,26 @@ var UITooltip = class {
     const related = e.relatedTarget;
     if (related && this.host.contains(related))
       return;
+    this.focused = false;
+    this.pinned = false;
     this.clearTimers();
     this.setInteractionOpen(false, "keyboard");
   };
   handleRequestClose(reason, trigger) {
-    if (reason === "escape") {
+    if (reason === "escape" || reason === "light-dismiss" && this.toggleOnClick) {
+      this.pinned = false;
       this.clearTimers();
-      this.internalOpen = false;
+      if (!isControlled(this.open))
+        this.internalOpen = false;
       dispatchDetail(this.host, "close", {
         open: false,
-        reason: "escape",
+        reason,
         trigger
       });
-      this.trigger?.focus();
     }
   }
-  onKeydown = (e) => {
-    if (e.key === "Escape") {
-      requestTopOverlayClose("escape", "keyboard");
-    }
-  };
   render() {
-    return h(Host, { key: "4c3890a7371508ede06a5b370d1cec32db25280f", role: "tooltip", hidden: !this.internalOpen, "data-open": this.internalOpen ? "" : void 0, onKeyDown: this.onKeydown }, h("slot", { key: "2e3bcd0dc69b0c3e3376d73dc4efc82e4f4cfaaa" }));
+    return h(Host, { key: "ce34c51bc3a9c9f7f31b7f0d329175df0cee1ab3", role: "tooltip", hidden: !this.internalOpen, "data-open": this.internalOpen ? "" : void 0 }, h("div", { key: "e5bb2bcb146fe8ec3b4e9a6abb550961181e3c06", class: "tooltip__surface" }, h("slot", { key: "bdb71bfcb0f72c212cbb5c64fb69510fdded4afb" })));
   }
   static get watchers() {
     return {

package/dist/{ui-top-bar.entry-3NCHFC4Y.js → ui-top-bar.entry-S3YP52EA.js}

@@ -3,7 +3,7 @@ import {
   getElement,
   h,
   registerInstance
-} from "./chunk-NIPNHZ5W.js";
+} from "./chunk-IMHSPETJ.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: "15c840c082724df0ec39ab6ad4e55f99192df5be" }, h("header", { key: "790afaeecdb3e598b8365391f57ee1e2d8ca69a2", class: "top-bar", part: "base" }, h("div", { key: "fab822f5875c7e3b8e267be42c075597d79374fa", class: "top-bar__leading", hidden: !this.hasLeading }, h("slot", { key: "0723013c4b674964e4029442b715daa9eb0036db", name: "leading", ref: (el) => this.leadingSlot = el, onSlotchange: this.syncSlots })), h("div", { key: "77fc006257b7fa6a191191d9969ea66445b8bc3e", class: "top-bar__title" }, h("slot", { key: "e8a07f1f767c1c0fa1244abcf3bb0e697e36a4fe" })), h("div", { key: "bde5cdf797ae898f68eddeab362b8395f89bdf28", class: "top-bar__search", hidden: !this.hasSearch }, h("slot", { key: "8b059d6123e94f3b7e18c15c88828ee9c6436136", name: "search", ref: (el) => this.searchSlot = el, onSlotchange: this.syncSlots })), h("div", { key: "c262446cf29873903530ea3f840de4de9db3de82", class: "top-bar__actions", hidden: !this.hasActions }, h("slot", { key: "f417dbc8cc0115a455a72ce0feb5f32b323ce68f", name: "actions", ref: (el) => this.actionsSlot = el, onSlotchange: this.syncSlots }))));
+    return h(Host, { key: "b92aa4e03475b3e623212a1e98f45d5532860b51" }, h("header", { key: "a3552708b0e424e762e100ee55fc6bfac4cd830a", class: "top-bar", part: "base" }, h("div", { key: "4c8a9e3a04ff23a615bf09e368f4212dd5b38157", class: "top-bar__leading", hidden: !this.hasLeading }, h("slot", { key: "64ecc99672b8fd37305810e0776a24bf87ea6f08", name: "leading", ref: (el) => this.leadingSlot = el, onSlotchange: this.syncSlots })), h("div", { key: "37fc003aba2b87f7c8c0e654cd6810d7f231f365", class: "top-bar__title" }, h("slot", { key: "e6c901c15852e83340ca8ad1e264fd5e35445e84" })), h("div", { key: "37b1ac319367eeded4182ada401a31e0b9c2555a", class: "top-bar__search", hidden: !this.hasSearch }, h("slot", { key: "0a8b5ef500dd843909bb35a1133be548411f3b71", name: "search", ref: (el) => this.searchSlot = el, onSlotchange: this.syncSlots })), h("div", { key: "7e5054a3ed6ecfe8d9d8b1b36992843aa0fb62eb", class: "top-bar__actions", hidden: !this.hasActions }, h("slot", { key: "19fe59c5ba4da7f0ceda764948f1288bfaa2a41d", name: "actions", ref: (el) => this.actionsSlot = el, onSlotchange: this.syncSlots }))));
   }
 };
 UITopBar.style = uiTopBarCss();

package/dist/ui-tree-item.entry-LWYIPYLC.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-IMHSPETJ.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: "36ad9eac3e0fe2a606e63294891b1c0697034b46", 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: "e92f5bc73accef3b348559ea144e0b769c98c721", 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: "dd2d0550d6846d0a4f80a4108968bfc32c18658f", class: "leading", part: "leading" }, h("slot", { key: "622d449a338dce57bc2e64aaf776471e8d3ce1b4", name: "leading" })), h("span", { key: "29c3e6ace4838ab941ada2547356288358faaeb2", class: "label", part: "label" }, h("slot", { key: "f1594c11fa0b9fbe8a3c20df6edce19421cab148" })), h("span", { key: "e4a6408f86b58a325145e713d116fc09322bb0d3", class: "actions", part: "actions" }, h("slot", { key: "ff3afaf1089426e19ee1fc39c6567c3d40ca4272", name: "actions" })), h("span", { key: "efcf23f7aad6c4353fa24bfe2a81001122335f72", 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: "21bfc8a6ad6e487cd044b5a3cbd7e8f900f2d1e1", 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
+};