@threadlabs/looma 0.25.7 → 0.26.1

package/vanilla/UiEditorTableToolbar.js

@@ -1,13 +1,29 @@
-// 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, KeyedList, NONCONFORMING, readIndex, readMember, readsChanged, rec, recLength, textCall, toAttribute, toText, trackContainer, truthy, writeAttribute, dispatchDeclared, detailCheck, formatOf, keywordFormat, acceptProps, manageProps, checkBoolean, checkConstrained, checkFormat, checkList, checkObject, checkString } from "@nextwebwg/html-next/generated-runtime";
 import * as controller from "../components/ui-editor-table-toolbar/ui-editor-table-toolbar.js";
 import "../styles/ui-editor-table-toolbar.css";
 
-const definition = {...{"contract":{"tag":"ui-editor-table-toolbar","props":{"actions":{"type":{"kind":"list","item":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["align-left","align-center","align-right","background-none","background-gray","background-yellow","background-blue","background-green","background-red","add-row-before","add-row-after","add-column-before","add-column-after","toggle-header-row","toggle-header-column","move-row-up","move-row-down","move-column-left","move-column-right","clear-cells","merge-cells","split-cell","delete-row","delete-column","delete-table"]}},"required":false,"target":{"attribute":"actions"}},"cellAlignment":{"type":{"kind":"terminal","name":"keyword"},"values":["left","center","right"],"required":false,"target":{"attribute":"cellalignment"},"default":"left"},"cellBackground":{"type":"string","required":false,"target":{"attribute":"cellbackground"},"default":""},"headerColumn":{"type":"boolean","required":false,"target":{"attribute":"headercolumn"},"default":false},"headerRow":{"type":"boolean","required":false,"target":{"attribute":"headerrow"},"default":false},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"toolbar"},{"kind":"literal","name":"aria-label","value":"Table actions"},{"kind":"attribute","name":"hidden","expression":"not open","expressionPlan":{"source":"not open","ast":{"kind":"unary","op":"not","operand":{"kind":"id","name":"open"}},"dependencies":["open"]}}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"group"},{"kind":"literal","name":"role","value":"group"},{"kind":"literal","name":"aria-label","value":"Cell alignment"}],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"class","value":"icon-button"},{"kind":"attribute","name":"active","expression":"item.active","expressionPlan":{"source":"item.active","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"active"},"dependencies":["item.active"]},"target":"class"},{"kind":"attribute","name":"data-action","expression":"item.action","expressionPlan":{"source":"item.action","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"action"},"dependencies":["item.action"]}},{"kind":"attribute","name":"aria-label","expression":"item.label","expressionPlan":{"source":"item.label","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"label"},"dependencies":["item.label"]}},{"kind":"attribute","name":"title","expression":"item.label","expressionPlan":{"source":"item.label","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"label"},"dependencies":["item.label"]}},{"kind":"attribute","name":"aria-pressed","expression":"item.active","expressionPlan":{"source":"item.active","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"active"},"dependencies":["item.active"]}}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"attribute","name":"name","expression":"item.action","expressionPlan":{"source":"item.action","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"action"},"dependencies":["item.action"]}}],"children":[]}],"flow":{"kind":"each","item":"item","list":"alignments","listPlan":{"source":"alignments","ast":{"kind":"id","name":"alignments"},"dependencies":["alignments"]},"key":"item.action","keyPlan":{"source":"item.action","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"action"},"dependencies":["item.action"]}}}],"flow":{"kind":"if","test":"alignments","testPlan":{"source":"alignments","ast":{"kind":"id","name":"alignments"},"dependencies":["alignments"]}}},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"sep"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[],"flow":{"kind":"if","test":"alignments and structure","testPlan":{"source":"alignments and structure","ast":{"kind":"binary","op":"and","left":{"kind":"id","name":"alignments"},"right":{"kind":"id","name":"structure"}},"dependencies":["alignments","structure"]}}},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"group"},{"kind":"literal","name":"role","value":"group"},{"kind":"literal","name":"aria-label","value":"Table structure"}],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"attribute","name":"data-action","expression":"item.action","expressionPlan":{"source":"item.action","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"action"},"dependencies":["item.action"]}}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"attribute","name":"name","expression":"item.icon","expressionPlan":{"source":"item.icon","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"icon"},"dependencies":["item.icon"]}}],"children":[]},{"kind":"element","name":"span","attributes":[],"children":[{"kind":"text","value":"$item.label","expressionPlan":{"source":"$item.label","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"label"},"dependencies":["item.label"]}}]}],"flow":{"kind":"each","item":"item","list":"structure","listPlan":{"source":"structure","ast":{"kind":"id","name":"structure"},"dependencies":["structure"]},"key":"item.action","keyPlan":{"source":"item.action","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"action"},"dependencies":["item.action"]}}}],"flow":{"kind":"if","test":"structure","testPlan":{"source":"structure","ast":{"kind":"id","name":"structure"},"dependencies":["structure"]}}},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"sep"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[],"flow":{"kind":"if","test":"(alignments or structure) and hasOverflow","testPlan":{"source":"(alignments or structure) and hasOverflow","ast":{"kind":"binary","op":"and","left":{"kind":"binary","op":"or","left":{"kind":"id","name":"alignments"},"right":{"kind":"id","name":"structure"}},"right":{"kind":"id","name":"hasOverflow"}},"dependencies":["alignments","hasOverflow","structure"]}}},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"overflow"}],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"class","value":"more"},{"kind":"literal","name":"data-action","value":"toggle-overflow"},{"kind":"literal","name":"aria-haspopup","value":"menu"},{"kind":"attribute","name":"aria-expanded","expression":"overflowOpen","expressionPlan":{"source":"overflowOpen","ast":{"kind":"id","name":"overflowOpen"},"dependencies":["overflowOpen"]}}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"literal","name":"name","value":"table"}],"children":[]},{"kind":"element","name":"span","attributes":[],"children":[{"kind":"text","value":"Table options"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"chevron"}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"literal","name":"name","value":"chevron-down"}],"children":[]}]}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"menu"},{"kind":"literal","name":"role","value":"menu"},{"kind":"literal","name":"aria-label","value":"More table actions"}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"menu-section"},{"kind":"literal","name":"role","value":"none"}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"menu-heading"},{"kind":"literal","name":"role","value":"presentation"}],"children":[{"kind":"text","value":"Background"}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"swatches"},{"kind":"literal","name":"role","value":"group"},{"kind":"literal","name":"aria-label","value":"Cell background"}],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"class","value":"swatch-button"},{"kind":"attribute","name":"selected","expression":"swatch.selected","expressionPlan":{"source":"swatch.selected","ast":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"selected"},"dependencies":["swatch.selected"]},"target":"class"},{"kind":"literal","name":"role","value":"menuitemradio"},{"kind":"attribute","name":"aria-checked","expression":"swatch.selected","expressionPlan":{"source":"swatch.selected","ast":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"selected"},"dependencies":["swatch.selected"]}},{"kind":"attribute","name":"data-action","expression":"swatch.action","expressionPlan":{"source":"swatch.action","ast":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"action"},"dependencies":["swatch.action"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"swatch"},{"kind":"attribute","name":"default","expression":"not swatch.color","expressionPlan":{"source":"not swatch.color","ast":{"kind":"unary","op":"not","operand":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"color"}},"dependencies":["swatch.color"]},"target":"class"},{"kind":"attribute","name":"--_swatch","expression":"swatch.color","expressionPlan":{"source":"swatch.color","ast":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"color"},"dependencies":["swatch.color"]},"target":"style"}],"children":[]},{"kind":"element","name":"span","attributes":[],"children":[{"kind":"text","value":"$swatch.label","expressionPlan":{"source":"$swatch.label","ast":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"label"},"dependencies":["swatch.label"]}}]}],"flow":{"kind":"each","item":"swatch","list":"swatches","listPlan":{"source":"swatches","ast":{"kind":"id","name":"swatches"},"dependencies":["swatches"]},"key":"swatch.action","keyPlan":{"source":"swatch.action","ast":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"action"},"dependencies":["swatch.action"]}}}]}],"flow":{"kind":"if","test":"swatches","testPlan":{"source":"swatches","ast":{"kind":"id","name":"swatches"},"dependencies":["swatches"]}}},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"menu-section divided"},{"kind":"literal","name":"role","value":"none"}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"menu-heading"},{"kind":"literal","name":"role","value":"presentation"}],"children":[{"kind":"text","value":"$section.heading","expressionPlan":{"source":"$section.heading","ast":{"kind":"member","object":{"kind":"id","name":"section"},"key":"heading"},"dependencies":["section.heading"]}}]},{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"attribute","name":"role","expression":"{ true: 'menuitemcheckbox', false: 'menuitem' }[concat(item.checkable)]","expressionPlan":{"source":"{ true: 'menuitemcheckbox', false: 'menuitem' }[concat(item.checkable)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":"menuitemcheckbox"}},{"key":"false","value":{"kind":"literal","value":"menuitem"}}]},"index":{"kind":"call","fn":"concat","args":[{"kind":"member","object":{"kind":"id","name":"item"},"key":"checkable"}]}},"dependencies":["item.checkable"]}},{"kind":"attribute","name":"aria-checked","expression":"{ true: item.checked, false: null }[concat(item.checkable)]","expressionPlan":{"source":"{ true: item.checked, false: null }[concat(item.checkable)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"member","object":{"kind":"id","name":"item"},"key":"checked"}},{"key":"false","value":{"kind":"literal","value":null}}]},"index":{"kind":"call","fn":"concat","args":[{"kind":"member","object":{"kind":"id","name":"item"},"key":"checkable"}]}},"dependencies":["item.checkable","item.checked"]}},{"kind":"attribute","name":"danger","expression":"item.danger","expressionPlan":{"source":"item.danger","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"danger"},"dependencies":["item.danger"]},"target":"class"},{"kind":"attribute","name":"data-action","expression":"item.action","expressionPlan":{"source":"item.action","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"action"},"dependencies":["item.action"]}}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"attribute","name":"name","expression":"item.icon","expressionPlan":{"source":"item.icon","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"icon"},"dependencies":["item.icon"]}}],"children":[]},{"kind":"element","name":"span","attributes":[],"children":[{"kind":"text","value":"$item.label","expressionPlan":{"source":"$item.label","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"label"},"dependencies":["item.label"]}}]}],"flow":{"kind":"each","item":"item","list":"section.items","listPlan":{"source":"section.items","ast":{"kind":"member","object":{"kind":"id","name":"section"},"key":"items"},"dependencies":["section.items"]},"key":"item.action","keyPlan":{"source":"item.action","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"action"},"dependencies":["item.action"]}}}],"flow":{"kind":"each","item":"section","list":"sections","listPlan":{"source":"sections","ast":{"kind":"id","name":"sections"},"dependencies":["sections"]},"key":"section.heading","keyPlan":{"source":"section.heading","ast":{"kind":"member","object":{"kind":"id","name":"section"},"key":"heading"},"dependencies":["section.heading"]}}}],"flow":{"kind":"if","test":"overflowOpen","testPlan":{"source":"overflowOpen","ast":{"kind":"id","name":"overflowOpen"},"dependencies":["overflowOpen"]}}}],"flow":{"kind":"if","test":"hasOverflow","testPlan":{"source":"hasOverflow","ast":{"kind":"id","name":"hasOverflow"},"dependencies":["hasOverflow"]}}}]},"declarations":[{"kind":"state","name":"alignments","shape":{"kind":"list","item":{"kind":"object","fields":[{"name":"action","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["align-left","align-center","align-right"]},"optional":false},{"name":"label","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"active","type":{"kind":"terminal","name":"boolean"},"optional":false}],"open":false}},"type":"list","value":"[]","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"state","name":"structure","shape":{"kind":"list","item":{"kind":"object","fields":[{"name":"action","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["add-row-after","add-column-after"]},"optional":false},{"name":"label","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"icon","type":{"kind":"terminal","name":"string"},"optional":false}],"open":false}},"type":"list","value":"[]","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"state","name":"swatches","type":"list(object({ action: string, label: string, color: string, selected: boolean }))","value":"[]","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"state","name":"sections","type":"list(object({ heading: string, items: list(object({ action: string, label: string, icon: string, danger: boolean, checkable: boolean, checked: boolean })) }))","value":"[]","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"state","name":"hasOverflow","type":"boolean","value":"false","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"overflowOpen","type":"boolean","value":"false","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"action","type":"object","shape":{"kind":"object","fields":[{"name":"action","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["align-left","align-center","align-right","background-none","background-gray","background-yellow","background-blue","background-green","background-red","add-row-before","add-row-after","add-column-before","add-column-after","toggle-header-row","toggle-header-column","move-row-up","move-row-down","move-column-left","move-column-right","clear-cells","merge-cells","split-cell","delete-row","delete-column","delete-table"]},"optional":false}],"open":false},"bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
+const T0 = ["",[],1,1,1,1,1];
+const T1 = ["div",["class","group","role","group","aria-label","Cell alignment"],2];
+const T2 = ["button",["type","button","class","icon-button"],["ui-icon",[]]];
+const T3 = ["div",["class","sep","aria-hidden","true"]];
+const T4 = ["div",["class","group","role","group","aria-label","Table structure"],2];
+const T5 = ["button",["type","button"],["ui-icon",[]],["span",[],0]];
+const T6 = ["div",["class","sep","aria-hidden","true"]];
+const T7 = ["div",["class","overflow"],["button",["type","button","class","more","data-action","toggle-overflow","aria-haspopup","menu"],["ui-icon",["name","table"]],["span",[],"Table options"],["span",["class","chevron"],["ui-icon",["name","chevron-down"]]]],1];
+const T8 = ["div",["class","menu","role","menu","aria-label","More table actions"],1,2];
+const T9 = ["div",["class","menu-section","role","none"],["div",["class","menu-heading","role","presentation"],"Background"],["div",["class","swatches","role","group","aria-label","Cell background"],2]];
+const T10 = ["button",["type","button","class","swatch-button","role","menuitemradio"],["span",["class","swatch"]],["span",[],0]];
+const T11 = ["div",["class","menu-section divided","role","none"],["div",["class","menu-heading","role","presentation"],0],2];
+const T12 = ["button",["type","button"],["ui-icon",[]],["span",[],0]];
+let P0, P1, P2, P3, P4, P5, P6, P7, P8, P9, P10, P11, P12;
+const E = new Map();
+const S = { n: ["alignments","structure","swatches","sections","hasOverflow","overflowOpen"], t: [["l",["o",["action",["p",formatOf(keywordFormat),false],"label","s","active","b"]]],["l",["o",["action",["p",formatOf(keywordFormat),false],"label","s","icon","s"]]],["l",["o",["action","s","label","s","color","s","selected","b"]]],["l",["o",["heading","s","items",["l",["o",["action","s","label","s","icon","s","danger","b","checkable","b","checked","b"]]]]]],"b","b"], f: import.meta.url, g: "ui-editor-table-toolbar", d: { "action": [detailCheck(checkObject([["action", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["align-left","align-center","align-right","background-none","background-gray","background-yellow","background-blue","background-green","background-red","add-row-before","add-row-after","add-column-before","add-column-after","toggle-header-row","toggle-header-column","move-row-up","move-row-down","move-column-left","move-column-right","clear-cells","merge-cells","split-cell","delete-row","delete-column","delete-table"]}), false]], false)), true, true, false] }, x: dispatchDeclared };
+const D = { props: { "actions": { "required":false, c: checkList(checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["align-left","align-center","align-right","background-none","background-gray","background-yellow","background-blue","background-green","background-red","add-row-before","add-row-after","add-column-before","add-column-after","toggle-header-row","toggle-header-column","move-row-up","move-row-down","move-column-left","move-column-right","clear-cells","merge-cells","split-cell","delete-row","delete-column","delete-table"]})), j: 1, m: ["l",["p",formatOf(keywordFormat),false]] }, "cellAlignment": { "required":false,"values":["left","center","right"],"default":"left", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "cellBackground": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "headerColumn": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "headerRow": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "open": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" } } };
+const C = (host) => controller.default(host);
 
-export function createUiEditorTableToolbar(options = {}) {
+export function createUiEditorTableToolbar(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;
@@ -16,113 +32,314 @@ export function createUiEditorTableToolbar(options = {}) {
   if (!element.hasAttribute("role")) element.setAttribute("role", "toolbar");
   if (!element.hasAttribute("aria-label")) element.setAttribute("aria-label", "Table actions");
   element.setAttribute("data-component", "ui-editor-table-toolbar");
-  const element0 = document.createElement("div");
-  element0.setAttribute("class", "group");
-  element0.setAttribute("role", "group");
-  element0.setAttribute("aria-label", "Cell alignment");
-  const element1 = document.createElement("button");
-  element1.setAttribute("type", "button");
-  element1.setAttribute("class", "icon-button");
-  const element2 = document.createElement("ui-icon");
-  element1.append(element2);
-  element0.append(element1);
-  element.append(element0);
-  const element3 = document.createElement("div");
-  element3.setAttribute("class", "sep");
-  element3.setAttribute("aria-hidden", "true");
-  element.append(element3);
-  const element4 = document.createElement("div");
-  element4.setAttribute("class", "group");
-  element4.setAttribute("role", "group");
-  element4.setAttribute("aria-label", "Table structure");
-  const element5 = document.createElement("button");
-  element5.setAttribute("type", "button");
-  const element6 = document.createElement("ui-icon");
-  element5.append(element6);
-  const element7 = document.createElement("span");
-  const text8 = document.createTextNode("");
-  element7.append(text8);
-  element5.append(element7);
-  element4.append(element5);
-  element.append(element4);
-  const element9 = document.createElement("div");
-  element9.setAttribute("class", "sep");
-  element9.setAttribute("aria-hidden", "true");
-  element.append(element9);
-  const element10 = document.createElement("div");
-  element10.setAttribute("class", "overflow");
-  const element11 = document.createElement("button");
-  element11.setAttribute("type", "button");
-  element11.setAttribute("class", "more");
-  element11.setAttribute("data-action", "toggle-overflow");
-  element11.setAttribute("aria-haspopup", "menu");
-  const element12 = document.createElement("ui-icon");
-  element12.setAttribute("name", "table");
-  element11.append(element12);
-  const element13 = document.createElement("span");
-  element13.append("Table options");
-  element11.append(element13);
-  const element14 = document.createElement("span");
-  element14.setAttribute("class", "chevron");
-  const element15 = document.createElement("ui-icon");
-  element15.setAttribute("name", "chevron-down");
-  element14.append(element15);
-  element11.append(element14);
-  element10.append(element11);
-  const element16 = document.createElement("div");
-  element16.setAttribute("class", "menu");
-  element16.setAttribute("role", "menu");
-  element16.setAttribute("aria-label", "More table actions");
-  const element17 = document.createElement("div");
-  element17.setAttribute("class", "menu-section");
-  element17.setAttribute("role", "none");
-  const element18 = document.createElement("div");
-  element18.setAttribute("class", "menu-heading");
-  element18.setAttribute("role", "presentation");
-  element18.append("Background");
-  element17.append(element18);
-  const element19 = document.createElement("div");
-  element19.setAttribute("class", "swatches");
-  element19.setAttribute("role", "group");
-  element19.setAttribute("aria-label", "Cell background");
-  const element20 = document.createElement("button");
-  element20.setAttribute("type", "button");
-  element20.setAttribute("class", "swatch-button");
-  element20.setAttribute("role", "menuitemradio");
-  const element21 = document.createElement("span");
-  element21.setAttribute("class", "swatch");
-  element20.append(element21);
-  const element22 = document.createElement("span");
-  const text23 = document.createTextNode("");
-  element22.append(text23);
-  element20.append(element22);
-  element19.append(element20);
-  element17.append(element19);
-  element16.append(element17);
-  const element24 = document.createElement("div");
-  element24.setAttribute("class", "menu-section divided");
-  element24.setAttribute("role", "none");
-  const element25 = document.createElement("div");
-  element25.setAttribute("class", "menu-heading");
-  element25.setAttribute("role", "presentation");
-  const text26 = document.createTextNode("");
-  element25.append(text26);
-  element24.append(element25);
-  const element27 = document.createElement("button");
-  element27.setAttribute("type", "button");
-  const element28 = document.createElement("ui-icon");
-  element27.append(element28);
-  const element29 = document.createElement("span");
-  const text30 = document.createTextNode("");
-  element29.append(text30);
-  element27.append(element29);
-  element24.append(element27);
-  element16.append(element24);
-  element10.append(element16);
-  element.append(element10);
-  manageComponentLifecycle(element, definition, { props: componentProps, projected,
-    controller,
-  });
+  element.append((P0 ??= buildTemplate(T0)).cloneNode(true));
+  const v = [[], [], [], [], false, false, null, null, null, null, null, null];
+  const B = acceptProps(element, D, S.n, v, componentProps, [], html);
+  const m1 = (d) => {
+    const n = (P1 ??= buildTemplate(T1)).cloneNode(true);
+    const t0 = n.firstChild;
+    const r = { n, L0: new KeyedList(t0, t0.nextSibling, m2, p2, (o) => readMember(o, "action"), "item") };
+    p1(r, -1, d);
+    return r;
+  };
+  const p1 = (r, c, d) => {
+    if (c & 1073741825) r.L0.update(v[0], d, c);
+  };
+  const m2 = (o, j, l) => {
+    const n = (P2 ??= buildTemplate(T2)).cloneNode(true);
+    const t0 = n.firstChild;
+    const r = { k: undefined, i: o, n, x: 0, y: 0, a1: t0, w: 0, v0: false, v1: null, v2: null, v3: null, v4: null, v5: null };
+    p2(r, -1, E);
+    return r;
+  };
+  const p2 = (r, c, d) => {
+    const o = r.i;
+    if (c & 1073741824) {
+      r.w = 0;
+      const x0 = trackContainer(r, readMember(o, "active"));
+      const s0 = truthy(x0);
+      if (s0 !== r.v0) r.n.classList.toggle("active", r.v0 = s0);
+      const x1 = trackContainer(r, readMember(o, "action"));
+      const s1 = toAttribute(x1, "data-action");
+      if (s1 !== r.v1) writeAttribute(r.n, "data-action", r.v1 = s1);
+      const x2 = trackContainer(r, readMember(o, "label"));
+      const s2 = toAttribute(x2, "aria-label");
+      if (s2 !== r.v2) writeAttribute(r.n, "aria-label", r.v2 = s2);
+      const s3 = toAttribute(x2, "title");
+      if (s3 !== r.v3) writeAttribute(r.n, "title", r.v3 = s3);
+      const s4 = toAttribute(x0, "aria-pressed");
+      if (s4 !== r.v4) writeAttribute(r.n, "aria-pressed", r.v4 = s4);
+      const s5 = toAttribute(x1, "name");
+      if (s5 !== r.v5) writeAttribute(r.a1, "name", r.v5 = s5);
+    }
+  };
+  const m3 = (d) => {
+    const n = (P3 ??= buildTemplate(T3)).cloneNode(true);
+    const r = { n };
+    p3(r, -1, d);
+    return r;
+  };
+  const p3 = (r, c, d) => {
+  };
+  const m4 = (d) => {
+    const n = (P4 ??= buildTemplate(T4)).cloneNode(true);
+    const t0 = n.firstChild;
+    const r = { n, L0: new KeyedList(t0, t0.nextSibling, m5, p5, (o) => readMember(o, "action"), "item") };
+    p4(r, -1, d);
+    return r;
+  };
+  const p4 = (r, c, d) => {
+    if (c & 1073741826) r.L0.update(v[1], d, c);
+  };
+  const m5 = (o, j, l) => {
+    const n = (P5 ??= buildTemplate(T5)).cloneNode(true);
+    const t0 = n.firstChild;
+    const t1 = t0.nextSibling.firstChild;
+    const r = { k: undefined, i: o, n, x: 0, y: 0, a1: t0, a2: t1, w: 0, v0: null, v1: null, v2: "" };
+    p5(r, -1, E);
+    return r;
+  };
+  const p5 = (r, c, d) => {
+    const o = r.i;
+    if (c & 1073741824) {
+      r.w = 0;
+      const x0 = trackContainer(r, readMember(o, "action"));
+      const s0 = toAttribute(x0, "data-action");
+      if (s0 !== r.v0) writeAttribute(r.n, "data-action", r.v0 = s0);
+      const x1 = trackContainer(r, readMember(o, "icon"));
+      const s1 = toAttribute(x1, "name");
+      if (s1 !== r.v1) writeAttribute(r.a1, "name", r.v1 = s1);
+      const x2 = trackContainer(r, readMember(o, "label"));
+      const s2 = toText(x2);
+      if (s2 !== r.v2) r.a2.data = r.v2 = s2;
+    }
+  };
+  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 m7 = (d) => {
+    const n = (P7 ??= buildTemplate(T7)).cloneNode(true);
+    const t0 = n.firstChild;
+    const t1 = t0.nextSibling;
+    const r = { n, a0: t0, v0: null, a1: t1, e0: t1.nextSibling, b0: undefined };
+    p7(r, -1, d);
+    return r;
+  };
+  const p7 = (r, c, d) => {
+    if (c & 32) {
+      const x0 = v[5];
+      const s0 = toAttribute(x0, "aria-expanded");
+      if (s0 !== r.v0) writeAttribute(r.a0, "aria-expanded", r.v0 = s0);
+    }
+    if (c & 32) {
+      const t0 = v[5];
+      if (true) {
+        {
+          r.b0 = undefined;
+          clearRegion(r.a1, r.e0);
+          if (t0) { r.b0 = m8(d); r.e0.before(r.b0.n); }
+        }
+      } else if (r.b0 !== undefined) p8(r.b0, c, d);
+    } else if (r.b0 !== undefined) p8(r.b0, c, d);
+  };
+  const m8 = (d) => {
+    const n = (P8 ??= buildTemplate(T8)).cloneNode(true);
+    const t0 = n.firstChild;
+    const t1 = t0.nextSibling.nextSibling;
+    const r = { n, a0: t0, e0: t0.nextSibling, b0: undefined, q0: undefined, L1: new KeyedList(t1, t1.nextSibling, m11, p11, (o) => readMember(o, "heading"), "section") };
+    p8(r, -1, d);
+    return r;
+  };
+  const p8 = (r, c, d) => {
+    if (c & 1073741828) {
+      const f4 = [];
+      const t0 = truthy(recLength(f4, rec(f4, v[2])));
+      if (c === -1 || c & 4 || readsChanged(r.q0, f4)) {
+        r.q0 = f4;
+        {
+          r.b0 = undefined;
+          clearRegion(r.a0, r.e0);
+          if (t0) { r.b0 = m9(d); r.e0.before(r.b0.n); }
+        }
+      } else if (r.b0 !== undefined) p9(r.b0, c, d);
+    } else if (r.b0 !== undefined) p9(r.b0, c, d);
+    if (c & 1073741832) r.L1.update(v[3], d, c);
+  };
+  const m9 = (d) => {
+    const n = (P9 ??= buildTemplate(T9)).cloneNode(true);
+    const t0 = n.firstChild.nextSibling.firstChild;
+    const r = { n, L0: new KeyedList(t0, t0.nextSibling, m10, p10, (o) => readMember(o, "action"), "swatch") };
+    p9(r, -1, d);
+    return r;
+  };
+  const p9 = (r, c, d) => {
+    if (c & 1073741828) r.L0.update(v[2], d, c);
+  };
+  const m10 = (o, j, l) => {
+    const n = (P10 ??= buildTemplate(T10)).cloneNode(true);
+    const t0 = n.firstChild;
+    const t1 = t0.nextSibling.firstChild;
+    const r = { k: undefined, i: o, n, x: 0, y: 0, a1: t0, a2: t1, w: 0, v0: false, v1: null, v2: null, v3: false, v4: undefined, v5: "" };
+    p10(r, -1, E);
+    return r;
+  };
+  const p10 = (r, c, d) => {
+    const o = r.i;
+    if (c & 1073741824) {
+      r.w = 0;
+      const x0 = trackContainer(r, readMember(o, "selected"));
+      const s0 = truthy(x0);
+      if (s0 !== r.v0) r.n.classList.toggle("selected", r.v0 = s0);
+      const s1 = toAttribute(x0, "aria-checked");
+      if (s1 !== r.v1) writeAttribute(r.n, "aria-checked", r.v1 = s1);
+      const x1 = trackContainer(r, readMember(o, "action"));
+      const s2 = toAttribute(x1, "data-action");
+      if (s2 !== r.v2) writeAttribute(r.n, "data-action", r.v2 = s2);
+      const x2 = !truthy(trackContainer(r, readMember(o, "color")));
+      const s3 = x2;
+      if (s3 !== r.v3) r.a1.classList.toggle("default", r.v3 = s3);
+      const x3 = trackContainer(r, readMember(o, "color"));
+      const s4 = toText(x3);
+      if (s4 !== r.v4) r.a1.style.setProperty("--_swatch", r.v4 = s4);
+      const x4 = trackContainer(r, readMember(o, "label"));
+      const s5 = toText(x4);
+      if (s5 !== r.v5) r.a2.data = r.v5 = s5;
+    }
+  };
+  const m11 = (o, j, l) => {
+    const n = (P11 ??= buildTemplate(T11)).cloneNode(true);
+    const t0 = n.firstChild;
+    const t1 = t0.firstChild;
+    const t2 = t0.nextSibling;
+    const r = { k: undefined, i: o, n, x: 0, y: 0, a0: t1, w: 0, v0: "", L0: new KeyedList(t2, t2.nextSibling, m12, p12, (o) => readMember(o, "action"), "item") };
+    p11(r, -1, E);
+    return r;
+  };
+  const p11 = (r, c, d) => {
+    const o = r.i;
+    if (c & 1073741824) {
+      r.w = 0;
+      const x0 = trackContainer(r, readMember(o, "heading"));
+      const s0 = toText(x0);
+      if (s0 !== r.v0) r.a0.data = r.v0 = s0;
+    }
+    if (c & 1073741824) r.L0.update(readMember(o, "items"), d, c);
+  };
+  const m12 = (o, j, l) => {
+    const n = (P12 ??= buildTemplate(T12)).cloneNode(true);
+    const t0 = n.firstChild;
+    const t1 = t0.nextSibling.firstChild;
+    const r = { k: undefined, i: o, n, x: 0, y: 0, a1: t0, a2: t1, w: 0, v0: null, v1: null, v2: false, v3: null, v4: null, v5: "" };
+    p12(r, -1, E);
+    return r;
+  };
+  const p12 = (r, c, d) => {
+    const o = r.i;
+    if (c & 1073741824) {
+      r.w = 0;
+      const x0 = trackContainer(r, readIndex({ "true": "menuitemcheckbox", "false": "menuitem" }, textCall("concat", [trackContainer(r, readMember(o, "checkable"))])));
+      if (x0 !== NONCONFORMING) {
+        const s0 = toAttribute(x0, "role");
+        if (s0 !== r.v0) writeAttribute(r.n, "role", r.v0 = s0);
+      }
+      const x1 = trackContainer(r, readIndex({ "true": readMember(o, "checked"), "false": null }, textCall("concat", [trackContainer(r, readMember(o, "checkable"))])));
+      if (x1 !== NONCONFORMING) {
+        const s1 = toAttribute(x1, "aria-checked");
+        if (s1 !== r.v1) writeAttribute(r.n, "aria-checked", r.v1 = s1);
+      }
+      const x2 = trackContainer(r, readMember(o, "danger"));
+      const s2 = truthy(x2);
+      if (s2 !== r.v2) r.n.classList.toggle("danger", r.v2 = s2);
+      const x3 = trackContainer(r, readMember(o, "action"));
+      const s3 = toAttribute(x3, "data-action");
+      if (s3 !== r.v3) writeAttribute(r.n, "data-action", r.v3 = s3);
+      const x4 = trackContainer(r, readMember(o, "icon"));
+      const s4 = toAttribute(x4, "name");
+      if (s4 !== r.v4) writeAttribute(r.a1, "name", r.v4 = s4);
+      const x5 = trackContainer(r, readMember(o, "label"));
+      const s5 = toText(x5);
+      if (s5 !== r.v5) r.a2.data = r.v5 = s5;
+    }
+  };
+  const p0 = (r, c, d) => {
+    if (c & 2048) {
+      const x0 = !truthy(v[11]);
+      const s0 = toAttribute(x0, "hidden");
+      if (s0 !== r.v0) writeAttribute(r.n, "hidden", r.v0 = s0);
+    }
+    if (c & 1073741825) {
+      const f0 = [];
+      const t0 = truthy(recLength(f0, rec(f0, v[0])));
+      if (c === -1 || c & 1 || readsChanged(r.q0, f0)) {
+        r.q0 = f0;
+        {
+          r.b0 = undefined;
+          clearRegion(r.a1, 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 & 1073741827) {
+      const f1 = [];
+      const t1 = (truthy(recLength(f1, rec(f1, v[0]))) && truthy(recLength(f1, rec(f1, v[1]))));
+      if (c === -1 || c & 3 || readsChanged(r.q1, f1)) {
+        r.q1 = f1;
+        {
+          r.b1 = undefined;
+          clearRegion(r.a2, r.e1);
+          if (t1) { r.b1 = m3(d); r.e1.before(r.b1.n); }
+        }
+      } else if (r.b1 !== undefined) p3(r.b1, c, d);
+    } else if (r.b1 !== undefined) p3(r.b1, c, d);
+    if (c & 1073741826) {
+      const f2 = [];
+      const t2 = truthy(recLength(f2, rec(f2, v[1])));
+      if (c === -1 || c & 2 || readsChanged(r.q2, f2)) {
+        r.q2 = f2;
+        {
+          r.b2 = undefined;
+          clearRegion(r.a3, r.e2);
+          if (t2) { r.b2 = m4(d); r.e2.before(r.b2.n); }
+        }
+      } else if (r.b2 !== undefined) p4(r.b2, c, d);
+    } else if (r.b2 !== undefined) p4(r.b2, c, d);
+    if (c & 1073741843) {
+      const f3 = [];
+      const t3 = ((truthy(recLength(f3, rec(f3, v[0]))) || truthy(recLength(f3, rec(f3, v[1])))) && rec(f3, v[4]));
+      if (c === -1 || c & 19 || readsChanged(r.q3, f3)) {
+        r.q3 = f3;
+        {
+          r.b3 = undefined;
+          clearRegion(r.a4, r.e3);
+          if (t3) { r.b3 = m6(d); r.e3.before(r.b3.n); }
+        }
+      } else if (r.b3 !== undefined) p6(r.b3, c, d);
+    } else if (r.b3 !== undefined) p6(r.b3, c, d);
+    if (c & 16) {
+      const t4 = v[4];
+      if (true) {
+        {
+          r.b4 = undefined;
+          clearRegion(r.a5, r.e4);
+          if (t4) { r.b4 = m7(d); r.e4.before(r.b4.n); }
+        }
+      } else if (r.b4 !== undefined) p7(r.b4, c, d);
+    } else if (r.b4 !== undefined) p7(r.b4, c, d);
+  };
+  const t0 = element.firstChild;
+  const t1 = t0.nextSibling.nextSibling;
+  const t2 = t1.nextSibling.nextSibling;
+  const t3 = t2.nextSibling.nextSibling;
+  const t4 = t3.nextSibling.nextSibling;
+  const R = { n: element, v0: undefined, a1: t0, e0: t0.nextSibling, b0: undefined, q0: undefined, a2: t1, e1: t1.nextSibling, b1: undefined, q1: undefined, a3: t2, e2: t2.nextSibling, b2: undefined, q2: undefined, a4: t3, e3: t3.nextSibling, b3: undefined, q3: undefined, a5: t4, e4: t4.nextSibling, b4: undefined };
+  const I = { B };
+  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);
   return element;
 }
-

package/vanilla/UiEditorToolbar.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.29 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.35 for Vanilla DOM. Do not edit.
 export interface UiEditorToolbarEventMap {
 }
 export interface UiEditorToolbarElement extends HTMLDivElement {

package/vanilla/UiEditorToolbar.js

@@ -1,13 +1,17 @@
-// 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, writeAttribute, dispose, hostState, acceptProps, manageProps, project, fillSlot, checkBoolean } from "@nextwebwg/html-next/generated-runtime";
 import * as controller from "../components/ui-editor-toolbar/ui-editor-toolbar.js";
 import "../styles/ui-editor-toolbar.css";
 
-const definition = {...{"contract":{"tag":"ui-editor-toolbar","props":{"floating":{"type":"boolean","required":false,"target":{"attribute":"floating"},"default":false}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"toolbar"},{"kind":"literal","name":"aria-label","value":"Editor toolbar"}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"strip"}],"children":[{"kind":"slot"}],"ref":"strip"}]},"declarations":[],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
+const T0 = ["",[],["div",["class","strip"],4]];
+const T1 = ["",[]];
+let P0, P1;
+const S = { n: [], t: [], f: import.meta.url, g: "ui-editor-toolbar" };
+const D = { props: { "floating": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" } } };
+const C = (host) => controller.default(host);
 
-export function createUiEditorToolbar(options = {}) {
+export function createUiEditorToolbar(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;
@@ -16,21 +20,34 @@ export function createUiEditorToolbar(options = {}) {
   if (!element.hasAttribute("role")) element.setAttribute("role", "toolbar");
   if (!element.hasAttribute("aria-label")) element.setAttribute("aria-label", "Editor toolbar");
   element.setAttribute("data-component", "ui-editor-toolbar");
-  const element0 = document.createElement("div");
-  element0.setAttribute("class", "strip");
-  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, ""]);
-      element0.append(node);
+  element.append((P0 ??= buildTemplate(T0)).cloneNode(true));
+  const v = [null];
+  const B = acceptProps(element, D, S.n, v, componentProps, [], html);
+  const m1 = (d) => {
+    const n = (P1 ??= buildTemplate(T1)).cloneNode(true);
+    const r = { n };
+    p1(r, -1, d);
+    return r;
+  };
+  const p1 = (r, c, d) => {
+  };
+  const p0 = (r, c, d) => {
+    if (c & 1) {
+      const x0 = hostState(["floating"], [v[0]]);
+      const s0 = x0;
+      if (s0 !== r.v0) writeAttribute(r.n, "data-ui-editor-toolbar-state", (r.v0 = s0) === "" ? null : s0);
     }
-  } else {
-  }
-  element.append(element0);
-  manageComponentLifecycle(element, definition, { props: componentProps, projected,
-    controller,
-  });
+    if (r.f0 === undefined) { r.f0 = 1; const at = fillSlot(r.a1, r.e0, "", 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.b0 = m1(d); at.before(r.b0.n); } }
+    else if (r.b0 !== undefined) p1(r.b0, c, d);
+  };
+  const t0 = element.firstChild;
+  const t1 = t0.firstChild;
+  const R = { n: element, v0: undefined, a1: t1, e0: t1.nextSibling, b0: undefined, f0: undefined };
+  const I = { B };
+  const J = project(I, children, slots);
+  attachGeneratedController(element, S, v, ((c, d) => p0(R, c, d)), C, undefined, I);
+  manageProps(I);
+  I.r["strip"] = t0;
   return element;
 }
-

package/vanilla/UiFloatingActionButton.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.29 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.35 for Vanilla DOM. Do not edit.
 export interface UiFloatingActionButtonEventMap {
 }
 export interface UiFloatingActionButtonElement extends HTMLButtonElement {