@threadlabs/looma 0.25.7 → 0.26.1

package/vanilla/UiTreeItem.js

@@ -1,195 +1,233 @@
-// Generated by HTML Next 1.0.0-alpha.29 for Vanilla DOM. Do not edit.
-import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
+// Generated by HTML Next 1.0.0-alpha.35 for Vanilla DOM. Do not edit.
+import { attachGeneratedController, buildTemplate, clearRegion, NONCONFORMING, readIndex, recordValue, textCall, toAttribute, toText, truthy, writeAttribute, dispatchDeclared, detailCheck, dispose, keywordFormat, hostState, acceptProps, manageProps, project, fillSlot, checkBoolean, checkConstrained, checkFormat, checkNumber, checkObject, checkString } from "@nextwebwg/html-next/generated-runtime";
 import * as controller from "../components/ui-tree-item/ui-tree-item.js";
 import "../styles/ui-tree-item.css";
 
-const definition = {...{"contract":{"tag":"ui-tree-item","props":{"accepts":{"type":"string","required":false,"target":{"attribute":"data-accepts"},"default":""},"actionsVisible":{"type":"boolean","required":false,"target":{"attribute":"actionsvisible"},"default":false},"container":{"type":"boolean","required":false,"target":{"attribute":"container"},"default":false},"disabled":{"type":"boolean","required":false,"target":{"attribute":"aria-disabled"},"default":false},"dragType":{"type":"string","required":false,"target":{"attribute":"data-drag-type"},"default":"item"},"dropDepth":{"type":"number","required":false,"target":{"attribute":"data-drop-depth"}},"dropScope":{"type":"string","required":false,"target":{"attribute":"data-drop-scope"},"default":""},"expanded":{"type":"boolean","required":false,"target":{"attribute":"expanded"},"default":false},"itemId":{"type":"string","required":false,"target":{"attribute":"data-item-id"},"default":""},"label":{"type":"string","required":false,"target":{"attribute":"aria-label"},"default":""},"lazy":{"type":"boolean","required":false,"target":{"attribute":"lazy"},"default":false},"marquee":{"type":"boolean","required":false,"target":{"attribute":"marquee"},"default":false},"selected":{"type":"boolean","required":false,"target":{"attribute":"aria-selected"},"default":false},"sortable":{"type":"boolean","required":false,"target":{"attribute":"sortable"},"default":false},"subtreeDepth":{"type":"number","required":false,"target":{"attribute":"data-subtree-depth"}}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"treeitem"},{"kind":"attribute","name":"aria-label","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}},{"kind":"attribute","name":"aria-level","expression":"structuralLevel","expressionPlan":{"source":"structuralLevel","ast":{"kind":"id","name":"structuralLevel"},"dependencies":["structuralLevel"]}},{"kind":"attribute","name":"aria-selected","expression":"selected","expressionPlan":{"source":"selected","ast":{"kind":"id","name":"selected"},"dependencies":["selected"]}},{"kind":"attribute","name":"aria-disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"data-item-id","expression":"itemId","expressionPlan":{"source":"itemId","ast":{"kind":"id","name":"itemId"},"dependencies":["itemId"]}},{"kind":"attribute","name":"data-drag-type","expression":"dragType","expressionPlan":{"source":"dragType","ast":{"kind":"id","name":"dragType"},"dependencies":["dragType"]}},{"kind":"attribute","name":"data-drop-scope","expression":"dropScope","expressionPlan":{"source":"dropScope","ast":{"kind":"id","name":"dropScope"},"dependencies":["dropScope"]}},{"kind":"attribute","name":"data-accepts","expression":"accepts","expressionPlan":{"source":"accepts","ast":{"kind":"id","name":"accepts"},"dependencies":["accepts"]}},{"kind":"attribute","name":"data-drop-depth","expression":"dropDepth","expressionPlan":{"source":"dropDepth","ast":{"kind":"id","name":"dropDepth"},"dependencies":["dropDepth"]}},{"kind":"attribute","name":"data-subtree-depth","expression":"subtreeDepth","expressionPlan":{"source":"subtreeDepth","ast":{"kind":"id","name":"subtreeDepth"},"dependencies":["subtreeDepth"]}}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"row"}],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"class","value":"drag-handle"},{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"draggable","value":"true"},{"kind":"attribute","name":"aria-label","expression":"{ true: concat('Cancel moving ', label), false: concat('Drag ', label, ' to reorder') }[concat(moving)]","expressionPlan":{"source":"{ true: concat('Cancel moving ', label), false: concat('Drag ', label, ' to reorder') }[concat(moving)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"call","fn":"concat","args":[{"kind":"literal","value":"Cancel moving "},{"kind":"id","name":"label"}]}},{"key":"false","value":{"kind":"call","fn":"concat","args":[{"kind":"literal","value":"Drag "},{"kind":"id","name":"label"},{"kind":"literal","value":" to reorder"}]}}]},"index":{"kind":"call","fn":"concat","args":[{"kind":"id","name":"moving"}]}},"dependencies":["label","moving"]}}],"children":[{"kind":"element","name":"svg","attributes":[{"kind":"literal","name":"aria-hidden","value":"true"},{"kind":"literal","name":"focusable","value":"false"},{"kind":"literal","name":"viewBox","value":"0 0 24 24"},{"kind":"literal","name":"fill","value":"none"},{"kind":"literal","name":"stroke","value":"currentColor"},{"kind":"literal","name":"stroke-width","value":"2"},{"kind":"literal","name":"stroke-linecap","value":"round"},{"kind":"literal","name":"stroke-linejoin","value":"round"}],"children":[{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"9"},{"kind":"literal","name":"cy","value":"12"},{"kind":"literal","name":"r","value":"1"}],"children":[]},{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"9"},{"kind":"literal","name":"cy","value":"5"},{"kind":"literal","name":"r","value":"1"}],"children":[]},{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"9"},{"kind":"literal","name":"cy","value":"19"},{"kind":"literal","name":"r","value":"1"}],"children":[]},{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"15"},{"kind":"literal","name":"cy","value":"12"},{"kind":"literal","name":"r","value":"1"}],"children":[]},{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"15"},{"kind":"literal","name":"cy","value":"5"},{"kind":"literal","name":"r","value":"1"}],"children":[]},{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"15"},{"kind":"literal","name":"cy","value":"19"},{"kind":"literal","name":"r","value":"1"}],"children":[]}]}],"flow":{"kind":"if","test":"sortable and not disabled","testPlan":{"source":"sortable and not disabled","ast":{"kind":"binary","op":"and","left":{"kind":"id","name":"sortable"},"right":{"kind":"unary","op":"not","operand":{"kind":"id","name":"disabled"}}},"dependencies":["disabled","sortable"]}},"ref":"dragHandle"},{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"class","value":"disclosure"},{"kind":"literal","name":"type","value":"button"},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"hidden","expression":"not isContainer","expressionPlan":{"source":"not isContainer","ast":{"kind":"unary","op":"not","operand":{"kind":"id","name":"isContainer"}},"dependencies":["isContainer"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"disclosure-icon"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]}],"ref":"disclosure"},{"kind":"element","name":"label","attributes":[{"kind":"literal","name":"class","value":"selection-hit"}],"children":[{"kind":"element","name":"input","attributes":[{"kind":"literal","name":"class","value":"selection-checkbox"},{"kind":"literal","name":"type","value":"checkbox"},{"kind":"literal","name":"tabindex","value":"-1"},{"kind":"attribute","name":"checked","expression":"selected","expressionPlan":{"source":"selected","ast":{"kind":"id","name":"selected"},"dependencies":["selected"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"aria-label","expression":"concat('Select ', label)","expressionPlan":{"source":"concat('Select ', label)","ast":{"kind":"call","fn":"concat","args":[{"kind":"literal","value":"Select "},{"kind":"id","name":"label"}]},"dependencies":["label"]}}],"children":[]}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"leading"}],"children":[{"kind":"slot","fallback":[],"name":"leading"}],"ref":"leading"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"label"}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"label-text"}],"children":[{"kind":"slot","fallback":[{"kind":"text","value":"$label","expressionPlan":{"source":"$label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}}],"name":"label"}],"ref":"labelText"}],"ref":"label"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"actions"}],"children":[{"kind":"element","name":"ui-button","attributes":[{"kind":"literal","name":"data-tree-cancel-move","value":""},{"kind":"literal","name":"variant","value":"ghost"},{"kind":"literal","name":"tone","value":"neutral"},{"kind":"literal","name":"size","value":"sm"},{"kind":"literal","name":"aria-label","value":"Cancel move"}],"children":[{"kind":"text","value":"Cancel"}],"flow":{"kind":"if","test":"moving","testPlan":{"source":"moving","ast":{"kind":"id","name":"moving"},"dependencies":["moving"]}}},{"kind":"element","name":"span","attributes":[],"children":[{"kind":"slot","fallback":[],"name":"actions"}],"flow":{"kind":"else"}}],"ref":"actions"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"drop-indicator row-drop-indicator"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]}],"ref":"row"},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"children"},{"kind":"literal","name":"role","value":"group"},{"kind":"attribute","name":"hidden","expression":"not (isContainer and internalExpanded)","expressionPlan":{"source":"not (isContainer and internalExpanded)","ast":{"kind":"unary","op":"not","operand":{"kind":"binary","op":"and","left":{"kind":"id","name":"isContainer"},"right":{"kind":"id","name":"internalExpanded"}}},"dependencies":["internalExpanded","isContainer"]}}],"children":[{"kind":"slot"}],"ref":"children"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"drop-indicator subtree-drop-indicator"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]}]},"declarations":[{"kind":"state","name":"internalExpanded","type":"boolean","value":"false","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"structuralLevel","type":"integer","value":"1","expression":{"source":"1","ast":{"kind":"literal","value":1},"dependencies":[]}},{"kind":"state","name":"tabStop","type":"boolean","value":"false","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"isContainer","type":"boolean","value":"false","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"moving","type":"boolean","value":"false","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"expand","type":"object","shape":{"kind":"object","fields":[{"name":"id","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"expanded","type":{"kind":"terminal","name":"boolean"},"optional":false},{"name":"trigger","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["keyboard","pointer","programmatic"]},"optional":false}],"open":false},"bubbles":false,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
+const T0 = ["",[],["div",["class","row"],1,["button",["class","disclosure","type","button"],["span",["class","disclosure-icon","aria-hidden","true"]]],["label",["class","selection-hit"],["input",["class","selection-checkbox","type","checkbox","tabindex","-1"]]],["span",["class","leading"],4],["span",["class","label"],["span",["class","label-text"],4]],["span",["class","actions"],1,["span",[],4]],["span",["class","drop-indicator row-drop-indicator","aria-hidden","true"]]],["div",["class","children","role","group"],4],["span",["class","drop-indicator subtree-drop-indicator","aria-hidden","true"]]];
+const T1 = ["button",["class","drag-handle","type","button","draggable","true"],["svg",["aria-hidden","true","focusable","false","viewBox","0 0 24 24","fill","none","stroke","currentColor","stroke-width","2","stroke-linecap","round","stroke-linejoin","round"],["circle",["cx","9","cy","12","r","1"]],["circle",["cx","9","cy","5","r","1"]],["circle",["cx","9","cy","19","r","1"]],["circle",["cx","15","cy","12","r","1"]],["circle",["cx","15","cy","5","r","1"]],["circle",["cx","15","cy","19","r","1"]]]];
+const T2 = ["",[]];
+const T3 = ["",[],0];
+const T4 = ["ui-button",["data-tree-cancel-move","","variant","ghost","tone","neutral","size","sm","aria-label","Cancel move"],"Cancel"];
+const T5 = ["",[]];
+const T6 = ["",[]];
+let P0, P1, P2, P3, P4, P5, P6;
+const S = { n: ["internalExpanded","structuralLevel","tabStop","isContainer","moving"], t: ["b","i","b","b","b"], f: import.meta.url, g: "ui-tree-item", d: { "expand": [detailCheck(checkObject([["id", checkString, false], ["expanded", checkBoolean, false], ["trigger", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["keyboard","pointer","programmatic"]}), false]], false)), false, true, false] }, x: dispatchDeclared };
+const D = { props: { "accepts": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "actionsVisible": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "container": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "disabled": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "dragType": { "required":false,"default":"item", c: checkString, t: "string", j: 0, m: "s" }, "dropDepth": { "required":false, c: checkNumber, t: "number", j: 0, m: "n" }, "dropScope": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "expanded": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "itemId": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "label": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "lazy": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "marquee": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "selected": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "sortable": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "subtreeDepth": { "required":false, c: checkNumber, t: "number", j: 0, m: "n" } } };
+const C = (host) => controller.default(host);
 
-export function createUiTreeItem(options = {}) {
+export function createUiTreeItem(options = {}, html) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
-  const projected = [];
   const element = document.createElement("div");
   for (const [name, value] of Object.entries(attributes)) {
     if (value === null || value === undefined || value === false) continue;
     element.setAttribute(name, value === true ? "" : String(value));
   }
   if (!element.hasAttribute("role")) element.setAttribute("role", "treeitem");
-  const value0 = componentProps["label"] === undefined ? "" : componentProps["label"];
-  if (value0 === null || value0 === undefined) element.removeAttribute("aria-label");
-  else element.setAttribute("aria-label", String(value0));
-  const value1 = componentProps["selected"] === undefined ? false : componentProps["selected"];
-  if (typeof value1 === "boolean") element.setAttribute("aria-selected", String(value1));
-  else element.removeAttribute("aria-selected");
-  const value2 = componentProps["disabled"] === undefined ? false : componentProps["disabled"];
-  if (typeof value2 === "boolean") element.setAttribute("aria-disabled", String(value2));
-  else element.removeAttribute("aria-disabled");
-  const value3 = componentProps["itemId"] === undefined ? "" : componentProps["itemId"];
-  if (value3 === null || value3 === undefined) element.removeAttribute("data-item-id");
-  else element.setAttribute("data-item-id", String(value3));
-  const value4 = componentProps["dragType"] === undefined ? "item" : componentProps["dragType"];
-  if (value4 === null || value4 === undefined) element.removeAttribute("data-drag-type");
-  else element.setAttribute("data-drag-type", String(value4));
-  const value5 = componentProps["dropScope"] === undefined ? "" : componentProps["dropScope"];
-  if (value5 === null || value5 === undefined) element.removeAttribute("data-drop-scope");
-  else element.setAttribute("data-drop-scope", String(value5));
-  const value6 = componentProps["accepts"] === undefined ? "" : componentProps["accepts"];
-  if (value6 === null || value6 === undefined) element.removeAttribute("data-accepts");
-  else element.setAttribute("data-accepts", String(value6));
-  const value7 = componentProps["dropDepth"] === undefined ? null : componentProps["dropDepth"];
-  if (value7 === null || value7 === undefined) element.removeAttribute("data-drop-depth");
-  else element.setAttribute("data-drop-depth", String(value7));
-  const value8 = componentProps["subtreeDepth"] === undefined ? null : componentProps["subtreeDepth"];
-  if (value8 === null || value8 === undefined) element.removeAttribute("data-subtree-depth");
-  else element.setAttribute("data-subtree-depth", String(value8));
   element.setAttribute("data-component", "ui-tree-item");
-  const element0 = document.createElement("div");
-  element0.setAttribute("class", "row");
-  const element1 = document.createElement("button");
-  element1.setAttribute("class", "drag-handle");
-  element1.setAttribute("type", "button");
-  element1.setAttribute("draggable", "true");
-  const element2 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-  element2.setAttribute("aria-hidden", "true");
-  element2.setAttribute("focusable", "false");
-  element2.setAttribute("viewBox", "0 0 24 24");
-  element2.setAttribute("fill", "none");
-  element2.setAttribute("stroke", "currentColor");
-  element2.setAttribute("stroke-width", "2");
-  element2.setAttribute("stroke-linecap", "round");
-  element2.setAttribute("stroke-linejoin", "round");
-  const element3 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
-  element3.setAttribute("cx", "9");
-  element3.setAttribute("cy", "12");
-  element3.setAttribute("r", "1");
-  element2.append(element3);
-  const element4 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
-  element4.setAttribute("cx", "9");
-  element4.setAttribute("cy", "5");
-  element4.setAttribute("r", "1");
-  element2.append(element4);
-  const element5 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
-  element5.setAttribute("cx", "9");
-  element5.setAttribute("cy", "19");
-  element5.setAttribute("r", "1");
-  element2.append(element5);
-  const element6 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
-  element6.setAttribute("cx", "15");
-  element6.setAttribute("cy", "12");
-  element6.setAttribute("r", "1");
-  element2.append(element6);
-  const element7 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
-  element7.setAttribute("cx", "15");
-  element7.setAttribute("cy", "5");
-  element7.setAttribute("r", "1");
-  element2.append(element7);
-  const element8 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
-  element8.setAttribute("cx", "15");
-  element8.setAttribute("cy", "19");
-  element8.setAttribute("r", "1");
-  element2.append(element8);
-  element1.append(element2);
-  element0.append(element1);
-  const element9 = document.createElement("button");
-  element9.setAttribute("class", "disclosure");
-  element9.setAttribute("type", "button");
-  const value9 = componentProps["disabled"] === undefined ? false : componentProps["disabled"];
-  if (value9 === true) element9.setAttribute("disabled", "");
-  else element9.removeAttribute("disabled");
-  const element10 = document.createElement("span");
-  element10.setAttribute("class", "disclosure-icon");
-  element10.setAttribute("aria-hidden", "true");
-  element9.append(element10);
-  element0.append(element9);
-  const element11 = document.createElement("label");
-  element11.setAttribute("class", "selection-hit");
-  const element12 = document.createElement("input");
-  element12.setAttribute("class", "selection-checkbox");
-  element12.setAttribute("type", "checkbox");
-  element12.setAttribute("tabindex", "-1");
-  const value10 = componentProps["selected"] === undefined ? false : componentProps["selected"];
-  if (value10 === true) element12.setAttribute("checked", "");
-  else element12.removeAttribute("checked");
-  const value11 = componentProps["disabled"] === undefined ? false : componentProps["disabled"];
-  if (value11 === true) element12.setAttribute("disabled", "");
-  else element12.removeAttribute("disabled");
-  element11.append(element12);
-  element0.append(element11);
-  const element13 = document.createElement("span");
-  element13.setAttribute("class", "leading");
-  if (slots["leading"] ?? [].length > 0) {
-    for (const child of slots["leading"] ?? []) {
-      const node = typeof child === "string" ? document.createTextNode(child) : child;
-      if (node.nodeType === 1) node.setAttribute("data-slotted", "");
-      projected.push([node, "leading"]);
-      element13.append(node);
-    }
-  } else {
-  }
-  element0.append(element13);
-  const element14 = document.createElement("span");
-  element14.setAttribute("class", "label");
-  const element15 = document.createElement("span");
-  element15.setAttribute("class", "label-text");
-  if (slots["label"] ?? [].length > 0) {
-    for (const child of slots["label"] ?? []) {
-      const node = typeof child === "string" ? document.createTextNode(child) : child;
-      if (node.nodeType === 1) node.setAttribute("data-slotted", "");
-      projected.push([node, "label"]);
-      element15.append(node);
-    }
-  } else {
-  const text16 = document.createTextNode("");
-  element15.append(text16);
-  }
-  element14.append(element15);
-  element0.append(element14);
-  const element17 = document.createElement("span");
-  element17.setAttribute("class", "actions");
-  const element18 = document.createElement("ui-button");
-  element18.setAttribute("data-tree-cancel-move", "");
-  element18.setAttribute("variant", "ghost");
-  element18.setAttribute("tone", "neutral");
-  element18.setAttribute("size", "sm");
-  element18.setAttribute("aria-label", "Cancel move");
-  element18.append("Cancel");
-  element17.append(element18);
-  const element19 = document.createElement("span");
-  if (slots["actions"] ?? [].length > 0) {
-    for (const child of slots["actions"] ?? []) {
-      const node = typeof child === "string" ? document.createTextNode(child) : child;
-      if (node.nodeType === 1) node.setAttribute("data-slotted", "");
-      projected.push([node, "actions"]);
-      element19.append(node);
-    }
-  } else {
-  }
-  element17.append(element19);
-  element0.append(element17);
-  const element20 = document.createElement("span");
-  element20.setAttribute("class", "drop-indicator row-drop-indicator");
-  element20.setAttribute("aria-hidden", "true");
-  element0.append(element20);
-  element.append(element0);
-  const element21 = document.createElement("div");
-  element21.setAttribute("class", "children");
-  element21.setAttribute("role", "group");
-  if (children.length > 0) {
-    for (const child of children) {
-      const node = typeof child === "string" ? document.createTextNode(child) : child;
-      if (node.nodeType === 1) node.setAttribute("data-slotted", "");
-      projected.push([node, ""]);
-      element21.append(node);
-    }
-  } else {
-  }
-  element.append(element21);
-  const element22 = document.createElement("span");
-  element22.setAttribute("class", "drop-indicator subtree-drop-indicator");
-  element22.setAttribute("aria-hidden", "true");
-  element.append(element22);
-  manageComponentLifecycle(element, definition, { props: componentProps, projected,
-    controller,
-  });
+  element.append((P0 ??= buildTemplate(T0)).cloneNode(true));
+  const v = [false, 1, false, false, false, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null];
+  const B = acceptProps(element, D, S.n, v, componentProps, ["accepts","dragType","dropDepth","dropScope","itemId","subtreeDepth"], html);
+  const m1 = (d) => {
+    const n = (P1 ??= buildTemplate(T1)).cloneNode(true);
+    const r = { n, v0: null };
+    I.r["dragHandle"] = n;
+    p1(r, -1, d);
+    return r;
+  };
+  const p1 = (r, c, d) => {
+    if (c & 1073758224) {
+      const x0 = readIndex(recordValue(["true","false"], [textCall("concat", ["Cancel moving ", v[14]]), textCall("concat", ["Drag ", v[14], " to reorder"])]), textCall("concat", [v[4]]));
+      if (x0 !== NONCONFORMING) {
+        const s0 = toAttribute(x0, "aria-label");
+        if (s0 !== r.v0) writeAttribute(r.n, "aria-label", r.v0 = s0);
+      }
+    }
+  };
+  const m2 = (d) => {
+    const n = (P2 ??= buildTemplate(T2)).cloneNode(true);
+    const r = { n };
+    p2(r, -1, d);
+    return r;
+  };
+  const p2 = (r, c, d) => {
+  };
+  const m3 = (d) => {
+    const n = (P3 ??= buildTemplate(T3)).cloneNode(true);
+    const t0 = n.firstChild;
+    const r = { n, a0: t0, v0: "" };
+    p3(r, -1, d);
+    return r;
+  };
+  const p3 = (r, c, d) => {
+    if (c & 16384) {
+      const x0 = v[14];
+      const s0 = toText(x0);
+      if (s0 !== r.v0) r.a0.data = r.v0 = s0;
+    }
+  };
+  const m4 = (d) => {
+    const n = (P4 ??= buildTemplate(T4)).cloneNode(true);
+    const r = { n };
+    p4(r, -1, d);
+    return r;
+  };
+  const p4 = (r, c, d) => {
+  };
+  const m5 = (d) => {
+    const n = (P5 ??= buildTemplate(T5)).cloneNode(true);
+    const r = { n };
+    p5(r, -1, d);
+    return r;
+  };
+  const p5 = (r, c, d) => {
+  };
+  const m6 = (d) => {
+    const n = (P6 ??= buildTemplate(T6)).cloneNode(true);
+    const r = { n };
+    p6(r, -1, d);
+    return r;
+  };
+  const p6 = (r, c, d) => {
+  };
+  const p0 = (r, c, d) => {
+    if (c & 16384) {
+      const x0 = v[14];
+      const s0 = toAttribute(x0, "aria-label");
+      if (s0 !== r.v0) writeAttribute(r.n, "aria-label", r.v0 = s0);
+    }
+    if (c & 2) {
+      const x1 = v[1];
+      const s1 = toAttribute(x1, "aria-level");
+      if (s1 !== r.v1) writeAttribute(r.n, "aria-level", r.v1 = s1);
+    }
+    if (c & 131072) {
+      const x2 = v[17];
+      const s2 = toAttribute(x2, "aria-selected");
+      if (s2 !== r.v2) writeAttribute(r.n, "aria-selected", r.v2 = s2);
+      const s12 = toAttribute(x2, "checked");
+      if (s12 !== r.v12) writeAttribute(r.a4, "checked", r.v12 = s12);
+    }
+    if (c & 256) {
+      const x3 = v[8];
+      const s3 = toAttribute(x3, "aria-disabled");
+      if (s3 !== r.v3) writeAttribute(r.n, "aria-disabled", r.v3 = s3);
+      const s10 = toAttribute(x3, "disabled");
+      if (s10 !== r.v10) writeAttribute(r.a3, "disabled", r.v10 = s10);
+      const s13 = toAttribute(x3, "disabled");
+      if (s13 !== r.v13) writeAttribute(r.a4, "disabled", r.v13 = s13);
+    }
+    if (c & 8192) {
+      const x4 = v[13];
+      const s4 = toAttribute(x4, "data-item-id");
+      if (s4 !== r.v4) writeAttribute(r.n, "data-item-id", r.v4 = s4);
+    }
+    if (c & 512) {
+      const x5 = v[9];
+      const s5 = toAttribute(x5, "data-drag-type");
+      if (s5 !== r.v5) writeAttribute(r.n, "data-drag-type", r.v5 = s5);
+    }
+    if (c & 2048) {
+      const x6 = v[11];
+      const s6 = toAttribute(x6, "data-drop-scope");
+      if (s6 !== r.v6) writeAttribute(r.n, "data-drop-scope", r.v6 = s6);
+    }
+    if (c & 32) {
+      const x7 = v[5];
+      const s7 = toAttribute(x7, "data-accepts");
+      if (s7 !== r.v7) writeAttribute(r.n, "data-accepts", r.v7 = s7);
+    }
+    if (c & 1024) {
+      const x8 = v[10];
+      const s8 = toAttribute(x8, "data-drop-depth");
+      if (s8 !== r.v8) writeAttribute(r.n, "data-drop-depth", r.v8 = s8);
+    }
+    if (c & 524288) {
+      const x9 = v[19];
+      const s9 = toAttribute(x9, "data-subtree-depth");
+      if (s9 !== r.v9) writeAttribute(r.n, "data-subtree-depth", r.v9 = s9);
+    }
+    if (c & 8) {
+      const x10 = !v[3];
+      const s11 = toAttribute(x10, "hidden");
+      if (s11 !== r.v11) writeAttribute(r.a3, "hidden", r.v11 = s11);
+    }
+    if (c & 16384) {
+      const x11 = textCall("concat", ["Select ", v[14]]);
+      if (x11 !== NONCONFORMING) {
+        const s14 = toAttribute(x11, "aria-label");
+        if (s14 !== r.v14) writeAttribute(r.a4, "aria-label", r.v14 = s14);
+      }
+    }
+    if (c & 9) {
+      const x12 = !(v[3] && v[0]);
+      const s15 = toAttribute(x12, "hidden");
+      if (s15 !== r.v15) writeAttribute(r.a13, "hidden", r.v15 = s15);
+    }
+    if (c & 131400) {
+      const x13 = hostState(["selected","disabled","actionsVisible","isContainer"], [v[17], v[8], v[6], v[3]]);
+      const s16 = x13;
+      if (s16 !== r.v16) writeAttribute(r.n, "data-ui-tree-item-state", (r.v16 = s16) === "" ? null : s16);
+    }
+    if (c & 262400) {
+      const t0 = (truthy(v[18]) && !truthy(v[8]));
+      if (true) {
+        {
+          r.b0 = undefined;
+          clearRegion(r.a2, r.e0);
+          if (t0) { r.b0 = m1(d); r.e0.before(r.b0.n); }
+        }
+      } else if (r.b0 !== undefined) p1(r.b0, c, d);
+    } else if (r.b0 !== undefined) p1(r.b0, c, d);
+    if (c & 16) {
+      const t3 = v[4];
+      if (true) {
+        {
+          r.b3 = undefined;
+          clearRegion(r.a11, r.e3);
+          if (t3) { r.b3 = m4(d); r.e3.before(r.b3.n); }
+        }
+      } else if (r.b3 !== undefined) p4(r.b3, c, d);
+    } else if (r.b3 !== undefined) p4(r.b3, c, d);
+    if (r.f1 === undefined) { r.f1 = 1; const at = fillSlot(r.a6, r.e1, "leading", J, false, undefined, d);
+      if (Array.isArray(at)) (r.z ??= []).push(() => { at[0].l.delete(at[1]); dispose(at[1]); }); else if (at !== undefined) { r.b1 = m2(d); at.before(r.b1.n); } }
+    else if (r.b1 !== undefined) p2(r.b1, c, d);
+    if (r.f2 === undefined) { r.f2 = 1; const at = fillSlot(r.a9, r.e2, "label", J, true, undefined, d);
+      if (Array.isArray(at)) (r.z ??= []).push(() => { at[0].l.delete(at[1]); dispose(at[1]); }); else if (at !== undefined) { r.b2 = m3(d); at.before(r.b2.n); } }
+    else if (r.b2 !== undefined) p3(r.b2, c, d);
+    if (r.f4 === undefined) { r.f4 = 1; const at = fillSlot(r.a12, r.e4, "actions", J, false, undefined, d);
+      if (Array.isArray(at)) (r.z ??= []).push(() => { at[0].l.delete(at[1]); dispose(at[1]); }); else if (at !== undefined) { r.b4 = m5(d); at.before(r.b4.n); } }
+    else if (r.b4 !== undefined) p5(r.b4, c, d);
+    if (r.f5 === undefined) { r.f5 = 1; const at = fillSlot(r.a14, r.e5, "", J, false, undefined, d);
+      if (Array.isArray(at)) (r.z ??= []).push(() => { at[0].l.delete(at[1]); dispose(at[1]); }); else if (at !== undefined) { r.b5 = m6(d); at.before(r.b5.n); } }
+    else if (r.b5 !== undefined) p6(r.b5, c, d);
+  };
+  const t0 = element.firstChild;
+  const t1 = t0.firstChild;
+  const t2 = t1.nextSibling.nextSibling;
+  const t3 = t2.nextSibling;
+  const t4 = t3.firstChild;
+  const t5 = t3.nextSibling;
+  const t6 = t5.firstChild;
+  const t7 = t5.nextSibling;
+  const t8 = t7.firstChild;
+  const t9 = t8.firstChild;
+  const t10 = t7.nextSibling;
+  const t11 = t10.firstChild;
+  const t12 = t11.nextSibling.nextSibling.firstChild;
+  const t13 = t0.nextSibling;
+  const t14 = t13.firstChild;
+  const R = { n: element, a3: t2, a4: t4, a13: t13, v0: undefined, v1: undefined, v2: undefined, v3: undefined, v4: undefined, v5: undefined, v6: undefined, v7: undefined, v8: undefined, v9: undefined, v10: null, v11: null, v12: null, v13: null, v14: null, v15: null, v16: undefined, a2: t1, e0: t1.nextSibling, b0: undefined, a6: t6, e1: t6.nextSibling, b1: undefined, f1: undefined, a9: t9, e2: t9.nextSibling, b2: undefined, f2: undefined, a11: t11, e3: t11.nextSibling, b3: undefined, a12: t12, e4: t12.nextSibling, b4: undefined, f4: undefined, a14: t14, e5: t14.nextSibling, b5: undefined, f5: undefined };
+  const I = { B };
+  const J = project(I, children, slots);
+  I.R = new Set();
+  attachGeneratedController(element, S, v, (c, d) => { ((c, d) => p0(R, c, d))(c, d); for (const f of I.R) f(c, d); }, C, undefined, I);
+  manageProps(I);
+  I.r["row"] = t0;
+  I.r["disclosure"] = t2;
+  I.r["leading"] = t5;
+  I.r["label"] = t7;
+  I.r["labelText"] = t8;
+  I.r["actions"] = t10;
+  I.r["children"] = t13;
   return element;
 }
-

package/vue/UiActionBar.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.29 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.35 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { getCurrentInstance } from 'vue'
 

package/vue/UiAffordanceScope.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.29 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.35 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiAvatar.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.29 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.35 for Vue 3.5. Do not edit. -->
 <script lang="ts">
 const htmlNextAuthoredCheck2Reported = new Set<string>()
 function htmlNextAuthoredCheck2(accepted: boolean, location: string, message: string): boolean {
@@ -215,12 +215,12 @@ const guarded = computed(() => {
   if (
     !(htmlNextAuthoredCheck2(
       hasAuthoredImage.value == null || typeof hasAuthoredImage.value === 'boolean',
-      'hasAuthoredImage or not hasImage:hasAuthoredImage',
+      '$hasAuthoredImage or not $hasImage:hasAuthoredImage',
       './components/ui-avatar/ui-avatar.html: HR007: Reference hasAuthoredImage does not satisfy its declared type.',
     )
       && htmlNextAuthoredCheck2(
         hasImage.value == null || typeof hasImage.value === 'boolean',
-        'hasAuthoredImage or not hasImage:hasImage',
+        '$hasAuthoredImage or not $hasImage:hasImage',
         './components/ui-avatar/ui-avatar.html: HR007: Reference hasImage does not satisfy its declared type.',
       ))
   ) return guardedPrevious
@@ -231,7 +231,7 @@ const guardedBinding = computed(() => {
   if (
     !(htmlNextAuthoredCheck2(
       hasImage.value == null || typeof hasImage.value === 'boolean',
-      'hasImage:hasImage',
+      '$hasImage:hasImage',
       './components/ui-avatar/ui-avatar.html: HR007: Reference hasImage does not satisfy its declared type.',
     ))
   ) return guardedBindingPrevious
@@ -242,7 +242,7 @@ const guardedBinding2 = computed(() => {
   if (
     !(htmlNextAuthoredCheck2(
       hasImage.value == null || typeof hasImage.value === 'boolean',
-      'hasImage:hasImage',
+      '$hasImage:hasImage',
       './components/ui-avatar/ui-avatar.html: HR007: Reference hasImage does not satisfy its declared type.',
     ))
   ) return guardedBinding2Previous
@@ -253,7 +253,7 @@ const guardedBinding3 = computed(() => {
   if (
     !(htmlNextAuthoredCheck2(
       showGlyph.value == null || typeof showGlyph.value === 'boolean',
-      'showGlyph:showGlyph',
+      '$showGlyph:showGlyph',
       './components/ui-avatar/ui-avatar.html: HR007: Reference showGlyph does not satisfy its declared type.',
     ))
   ) return guardedBinding3Previous
@@ -275,7 +275,7 @@ const guardedBinding5 = computed(() => {
   if (
     !(htmlNextAuthoredCheck2(
       showGlyph.value == null || typeof showGlyph.value === 'boolean',
-      'not showGlyph:showGlyph',
+      'not $showGlyph:showGlyph',
       './components/ui-avatar/ui-avatar.html: HR007: Reference showGlyph does not satisfy its declared type.',
     ))
   ) return guardedBinding5Previous

package/vue/UiAvatarGroup.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.29 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.35 for Vue 3.5. Do not edit. -->
 <script lang="ts">
 const htmlNextAuthoredCheck2Reported = new Set<string>()
 function htmlNextAuthoredCheck2(accepted: boolean, location: string, message: string): boolean {
@@ -161,7 +161,7 @@ const guarded = computed(() => {
   if (
     !(htmlNextAuthoredCheck2(
       overflowCount.value == null || Number.isInteger(overflowCount.value),
-      'not overflowCount:overflowCount',
+      'not $overflowCount:overflowCount',
       './components/ui-avatar-group/ui-avatar-group.html: HR007: Reference overflowCount does not satisfy its declared type.',
     ))
   ) return guardedPrevious
@@ -172,7 +172,7 @@ const guardedBinding = computed(() => {
   if (
     !(htmlNextAuthoredCheck2(
       overflowAnnouncement.value == null || typeof overflowAnnouncement.value === 'string',
-      'overflowAnnouncement:overflowAnnouncement',
+      '$overflowAnnouncement:overflowAnnouncement',
       './components/ui-avatar-group/ui-avatar-group.html: HR007: Reference overflowAnnouncement does not satisfy its declared type.',
     ))
   ) return guardedBindingPrevious

package/vue/UiBadge.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.29 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.35 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiBreadcrumbItem.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.29 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.35 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiBreadcrumbs.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.29 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.35 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiButton.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.29 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.35 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiCallout.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.29 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.35 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiCard.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.29 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.35 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'