@threadlabs/looma 0.25.7 → 0.26.1

package/vanilla/UiEditorTableOverlay.js

@@ -1,13 +1,21 @@
-// 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, checkReference, clearRegion, KeyedList, NONCONFORMING, readDeclared, readMember, readsChanged, rec, recLength, toAttribute, toText, trackContainer, truthy, visitSelected, writeAttribute, dispatchDeclared, detailCheck, formatOf, keywordFormat, acceptProps, manageProps, checkBoolean, checkInteger, checkList, checkNull, checkNumber, checkObject, checkUnion } from "@nextwebwg/html-next/generated-runtime";
 import * as controller from "../components/ui-editor-table-overlay/ui-editor-table-overlay.js";
 import "../styles/ui-editor-table-overlay.css";
 
-const definition = {...{"contract":{"tag":"ui-editor-table-overlay","props":{"geometry":{"type":{"kind":"object","fields":[{"name":"rowBoundaries","type":{"kind":"list","item":{"kind":"terminal","name":"number"}},"optional":false},{"name":"columnBoundaries","type":{"kind":"list","item":{"kind":"terminal","name":"number"}},"optional":false},{"name":"activeCell","type":{"kind":"union","members":[{"kind":"object","fields":[{"name":"left","type":{"kind":"terminal","name":"number"},"optional":false},{"name":"top","type":{"kind":"terminal","name":"number"},"optional":false},{"name":"width","type":{"kind":"terminal","name":"number"},"optional":false},{"name":"height","type":{"kind":"terminal","name":"number"},"optional":false},{"name":"rowIndex","type":{"kind":"terminal","name":"integer"},"optional":false},{"name":"columnIndex","type":{"kind":"terminal","name":"integer"},"optional":false}],"open":false},{"kind":"terminal","name":"null"}]},"optional":false},{"name":"hoveredCell","type":{"kind":"union","members":[{"kind":"object","fields":[{"name":"left","type":{"kind":"terminal","name":"number"},"optional":false},{"name":"top","type":{"kind":"terminal","name":"number"},"optional":false},{"name":"width","type":{"kind":"terminal","name":"number"},"optional":false},{"name":"height","type":{"kind":"terminal","name":"number"},"optional":false},{"name":"rowIndex","type":{"kind":"terminal","name":"integer"},"optional":false},{"name":"columnIndex","type":{"kind":"terminal","name":"integer"},"optional":false}],"open":false},{"kind":"terminal","name":"null"}]},"optional":true}],"open":false},"required":false,"target":{"attribute":"geometry"}},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"aria-label","value":"Table controls"},{"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":"rows"}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"control row"},{"kind":"attribute","name":"active","expression":"control.key = activeKey","expressionPlan":{"source":"control.key = activeKey","ast":{"kind":"binary","op":"=","left":{"kind":"member","object":{"kind":"id","name":"control"},"key":"key"},"right":{"kind":"id","name":"activeKey"}},"dependencies":["activeKey","control.key"]},"target":"class"},{"kind":"attribute","name":"top","expression":"control.offset","expressionPlan":{"source":"control.offset","ast":{"kind":"member","object":{"kind":"id","name":"control"},"key":"offset"},"dependencies":["control.offset"]},"target":"style"},{"kind":"attribute","name":"data-control-key","expression":"control.key","expressionPlan":{"source":"control.key","ast":{"kind":"member","object":{"kind":"id","name":"control"},"key":"key"},"dependencies":["control.key"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"line"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"guide"},{"kind":"literal","name":"data-ui-guide","value":""},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]},{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"class","value":"handle"},{"kind":"attribute","name":"data-ui-affordance","expression":"control.affordance","expressionPlan":{"source":"control.affordance","ast":{"kind":"member","object":{"kind":"id","name":"control"},"key":"affordance"},"dependencies":["control.affordance"]}},{"kind":"attribute","name":"data-action","expression":"control.action","expressionPlan":{"source":"control.action","ast":{"kind":"member","object":{"kind":"id","name":"control"},"key":"action"},"dependencies":["control.action"]}},{"kind":"attribute","name":"data-boundary-index","expression":"control.index","expressionPlan":{"source":"control.index","ast":{"kind":"member","object":{"kind":"id","name":"control"},"key":"index"},"dependencies":["control.index"]}},{"kind":"attribute","name":"aria-label","expression":"control.label","expressionPlan":{"source":"control.label","ast":{"kind":"member","object":{"kind":"id","name":"control"},"key":"label"},"dependencies":["control.label"]}}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"literal","name":"name","value":"plus"}],"children":[]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"tooltip"},{"kind":"literal","name":"role","value":"tooltip"}],"children":[{"kind":"text","value":"$control.label","expressionPlan":{"source":"$control.label","ast":{"kind":"member","object":{"kind":"id","name":"control"},"key":"label"},"dependencies":["control.label"]}}]}]}],"flow":{"kind":"each","item":"control","list":"rows","listPlan":{"source":"rows","ast":{"kind":"id","name":"rows"},"dependencies":["rows"]},"key":"control.key","keyPlan":{"source":"control.key","ast":{"kind":"member","object":{"kind":"id","name":"control"},"key":"key"},"dependencies":["control.key"]}}}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"cols"}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"control col"},{"kind":"attribute","name":"active","expression":"control.key = activeKey","expressionPlan":{"source":"control.key = activeKey","ast":{"kind":"binary","op":"=","left":{"kind":"member","object":{"kind":"id","name":"control"},"key":"key"},"right":{"kind":"id","name":"activeKey"}},"dependencies":["activeKey","control.key"]},"target":"class"},{"kind":"attribute","name":"left","expression":"control.offset","expressionPlan":{"source":"control.offset","ast":{"kind":"member","object":{"kind":"id","name":"control"},"key":"offset"},"dependencies":["control.offset"]},"target":"style"},{"kind":"attribute","name":"data-control-key","expression":"control.key","expressionPlan":{"source":"control.key","ast":{"kind":"member","object":{"kind":"id","name":"control"},"key":"key"},"dependencies":["control.key"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"line"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"guide"},{"kind":"literal","name":"data-ui-guide","value":""},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]},{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"class","value":"handle"},{"kind":"attribute","name":"data-ui-affordance","expression":"control.affordance","expressionPlan":{"source":"control.affordance","ast":{"kind":"member","object":{"kind":"id","name":"control"},"key":"affordance"},"dependencies":["control.affordance"]}},{"kind":"attribute","name":"data-action","expression":"control.action","expressionPlan":{"source":"control.action","ast":{"kind":"member","object":{"kind":"id","name":"control"},"key":"action"},"dependencies":["control.action"]}},{"kind":"attribute","name":"data-boundary-index","expression":"control.index","expressionPlan":{"source":"control.index","ast":{"kind":"member","object":{"kind":"id","name":"control"},"key":"index"},"dependencies":["control.index"]}},{"kind":"attribute","name":"aria-label","expression":"control.label","expressionPlan":{"source":"control.label","ast":{"kind":"member","object":{"kind":"id","name":"control"},"key":"label"},"dependencies":["control.label"]}}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"literal","name":"name","value":"plus"}],"children":[]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"tooltip"},{"kind":"literal","name":"role","value":"tooltip"}],"children":[{"kind":"text","value":"$control.label","expressionPlan":{"source":"$control.label","ast":{"kind":"member","object":{"kind":"id","name":"control"},"key":"label"},"dependencies":["control.label"]}}]}]}],"flow":{"kind":"each","item":"control","list":"cols","listPlan":{"source":"cols","ast":{"kind":"id","name":"cols"},"dependencies":["cols"]},"key":"control.key","keyPlan":{"source":"control.key","ast":{"kind":"member","object":{"kind":"id","name":"control"},"key":"key"},"dependencies":["control.key"]}}}]},{"kind":"element","name":"template","attributes":[],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"class","value":"selector row"},{"kind":"attribute","name":"top","expression":"hovered.rowOffset","expressionPlan":{"source":"hovered.rowOffset","ast":{"kind":"member","object":{"kind":"id","name":"hovered"},"key":"rowOffset"},"dependencies":["hovered.rowOffset"]},"target":"style"},{"kind":"literal","name":"data-action","value":"select-row"},{"kind":"attribute","name":"data-row-index","expression":"hovered.rowIndex","expressionPlan":{"source":"hovered.rowIndex","ast":{"kind":"member","object":{"kind":"id","name":"hovered"},"key":"rowIndex"},"dependencies":["hovered.rowIndex"]}},{"kind":"attribute","name":"data-column-index","expression":"hovered.columnIndex","expressionPlan":{"source":"hovered.columnIndex","ast":{"kind":"member","object":{"kind":"id","name":"hovered"},"key":"columnIndex"},"dependencies":["hovered.columnIndex"]}},{"kind":"literal","name":"title","value":"Drag row to reorder; click for actions"},{"kind":"literal","name":"aria-label","value":"Row actions"}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"glyph"}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"literal","name":"name","value":"grip-vertical"}],"children":[]}]}]},{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"class","value":"selector column"},{"kind":"attribute","name":"left","expression":"hovered.columnOffset","expressionPlan":{"source":"hovered.columnOffset","ast":{"kind":"member","object":{"kind":"id","name":"hovered"},"key":"columnOffset"},"dependencies":["hovered.columnOffset"]},"target":"style"},{"kind":"literal","name":"data-action","value":"select-column"},{"kind":"attribute","name":"data-row-index","expression":"hovered.rowIndex","expressionPlan":{"source":"hovered.rowIndex","ast":{"kind":"member","object":{"kind":"id","name":"hovered"},"key":"rowIndex"},"dependencies":["hovered.rowIndex"]}},{"kind":"attribute","name":"data-column-index","expression":"hovered.columnIndex","expressionPlan":{"source":"hovered.columnIndex","ast":{"kind":"member","object":{"kind":"id","name":"hovered"},"key":"columnIndex"},"dependencies":["hovered.columnIndex"]}},{"kind":"literal","name":"title","value":"Drag column to reorder; click for actions"},{"kind":"literal","name":"aria-label","value":"Column actions"}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"glyph"}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"literal","name":"name","value":"grip-horizontal"}],"children":[]}]}]}],"flow":{"kind":"if","test":"hovered","testPlan":{"source":"hovered","ast":{"kind":"id","name":"hovered"},"dependencies":["hovered"]}}},{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"class","value":"cell-menu"},{"kind":"attribute","name":"left","expression":"active.menuLeft","expressionPlan":{"source":"active.menuLeft","ast":{"kind":"member","object":{"kind":"id","name":"active"},"key":"menuLeft"},"dependencies":["active.menuLeft"]},"target":"style"},{"kind":"attribute","name":"top","expression":"active.menuTop","expressionPlan":{"source":"active.menuTop","ast":{"kind":"member","object":{"kind":"id","name":"active"},"key":"menuTop"},"dependencies":["active.menuTop"]},"target":"style"},{"kind":"literal","name":"data-action","value":"open-cell-menu"},{"kind":"attribute","name":"data-row-index","expression":"active.rowIndex","expressionPlan":{"source":"active.rowIndex","ast":{"kind":"member","object":{"kind":"id","name":"active"},"key":"rowIndex"},"dependencies":["active.rowIndex"]}},{"kind":"attribute","name":"data-column-index","expression":"active.columnIndex","expressionPlan":{"source":"active.columnIndex","ast":{"kind":"member","object":{"kind":"id","name":"active"},"key":"columnIndex"},"dependencies":["active.columnIndex"]}},{"kind":"literal","name":"title","value":"Cell actions"},{"kind":"literal","name":"aria-label","value":"Cell actions"}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"literal","name":"name","value":"chevron-down"}],"children":[]}],"flow":{"kind":"if","test":"active","testPlan":{"source":"active","ast":{"kind":"id","name":"active"},"dependencies":["active"]}}},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"drop-indicator"},{"kind":"literal","name":"data-drop-indicator","value":""},{"kind":"literal","name":"hidden","value":""},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]}]},"declarations":[{"kind":"state","name":"rows","shape":{"kind":"list","item":{"kind":"object","fields":[{"name":"key","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"index","type":{"kind":"terminal","name":"integer"},"optional":false},{"name":"offset","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"affordance","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["insert-row","insert-column"]},"optional":false},{"name":"action","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["add-row-before","add-row-after","add-column-before","add-column-after"]},"optional":false},{"name":"label","type":{"kind":"terminal","name":"string"},"optional":false}],"open":false}},"type":"list","value":"[]","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"state","name":"cols","shape":{"kind":"list","item":{"kind":"object","fields":[{"name":"key","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"index","type":{"kind":"terminal","name":"integer"},"optional":false},{"name":"offset","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"affordance","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["insert-row","insert-column"]},"optional":false},{"name":"action","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["add-row-before","add-row-after","add-column-before","add-column-after"]},"optional":false},{"name":"label","type":{"kind":"terminal","name":"string"},"optional":false}],"open":false}},"type":"list","value":"[]","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"state","name":"hovered","shape":{"kind":"object","fields":[{"name":"left","type":{"kind":"terminal","name":"number"},"optional":false},{"name":"top","type":{"kind":"terminal","name":"number"},"optional":false},{"name":"width","type":{"kind":"terminal","name":"number"},"optional":false},{"name":"height","type":{"kind":"terminal","name":"number"},"optional":false},{"name":"rowIndex","type":{"kind":"terminal","name":"integer"},"optional":false},{"name":"columnIndex","type":{"kind":"terminal","name":"integer"},"optional":false},{"name":"rowOffset","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"columnOffset","type":{"kind":"terminal","name":"string"},"optional":false}],"open":false},"type":"object"},{"kind":"state","name":"active","shape":{"kind":"object","fields":[{"name":"left","type":{"kind":"terminal","name":"number"},"optional":false},{"name":"top","type":{"kind":"terminal","name":"number"},"optional":false},{"name":"width","type":{"kind":"terminal","name":"number"},"optional":false},{"name":"height","type":{"kind":"terminal","name":"number"},"optional":false},{"name":"rowIndex","type":{"kind":"terminal","name":"integer"},"optional":false},{"name":"columnIndex","type":{"kind":"terminal","name":"integer"},"optional":false},{"name":"menuLeft","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"menuTop","type":{"kind":"terminal","name":"string"},"optional":false}],"open":false},"type":"object"},{"kind":"state","name":"activeKey","type":"string","value":"","expression":{"source":"\"\"","ast":{"kind":"literal","value":""},"dependencies":[]}},{"kind":"event","name":"add-row-before","type":"object({ boundaryIndex: integer })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"add-row-after","type":"object({ boundaryIndex: integer })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"add-column-before","type":"object({ boundaryIndex: integer })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"add-column-after","type":"object({ boundaryIndex: integer })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"select-row","type":"object({ rowIndex: integer, columnIndex: integer })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"select-column","type":"object({ rowIndex: integer, columnIndex: integer })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"reorder-row","type":"object({ fromIndex: integer, toIndex: integer })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"reorder-column","type":"object({ fromIndex: integer, toIndex: integer })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"open-cell-menu","type":"object({ rowIndex: integer, columnIndex: integer, anchor: object({ left: number, top: number, right: number, bottom: number }) })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"open-row-menu","type":"object({ rowIndex: integer, columnIndex: integer, anchor: object({ left: number, top: number, right: number, bottom: number }) })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"open-column-menu","type":"object({ rowIndex: integer, columnIndex: integer, anchor: object({ left: number, top: number, right: number, bottom: number }) })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
+const T0 = ["",[],["div",["class","rows"],2],["div",["class","cols"],2],1,1,["span",["class","drop-indicator","data-drop-indicator","","hidden","","aria-hidden","true"]]];
+const T1 = ["div",["class","control row"],["span",["class","line","aria-hidden","true"]],["span",["class","guide","data-ui-guide","","aria-hidden","true"]],["button",["type","button","class","handle"],["ui-icon",["name","plus"]],["span",["class","tooltip","role","tooltip"],0]]];
+const T2 = ["div",["class","control col"],["span",["class","line","aria-hidden","true"]],["span",["class","guide","data-ui-guide","","aria-hidden","true"]],["button",["type","button","class","handle"],["ui-icon",["name","plus"]],["span",["class","tooltip","role","tooltip"],0]]];
+const T3 = ["",[],["button",["type","button","class","selector row","data-action","select-row","title","Drag row to reorder; click for actions","aria-label","Row actions"],["span",["class","glyph"],["ui-icon",["name","grip-vertical"]]]],["button",["type","button","class","selector column","data-action","select-column","title","Drag column to reorder; click for actions","aria-label","Column actions"],["span",["class","glyph"],["ui-icon",["name","grip-horizontal"]]]]];
+const T4 = ["button",["type","button","class","cell-menu","data-action","open-cell-menu","title","Cell actions","aria-label","Cell actions"],["ui-icon",["name","chevron-down"]]];
+let P0, P1, P2, P3, P4;
+const E = new Map();
+const S = { n: ["rows","cols","hovered","active","activeKey"], t: [["l",["o",["key","s","index","i","offset","s","affordance",["p",formatOf(keywordFormat),false],"action",["p",formatOf(keywordFormat),false],"label","s"]]],["l",["o",["key","s","index","i","offset","s","affordance",["p",formatOf(keywordFormat),false],"action",["p",formatOf(keywordFormat),false],"label","s"]]],["o",["left","n","top","n","width","n","height","n","rowIndex","i","columnIndex","i","rowOffset","s","columnOffset","s"]],["o",["left","n","top","n","width","n","height","n","rowIndex","i","columnIndex","i","menuLeft","s","menuTop","s"]],"s"], f: import.meta.url, g: "ui-editor-table-overlay", d: { "add-row-before": [detailCheck(checkObject([["boundaryIndex", checkInteger, false]], false)), true, true, false], "add-row-after": [detailCheck(checkObject([["boundaryIndex", checkInteger, false]], false)), true, true, false], "add-column-before": [detailCheck(checkObject([["boundaryIndex", checkInteger, false]], false)), true, true, false], "add-column-after": [detailCheck(checkObject([["boundaryIndex", checkInteger, false]], false)), true, true, false], "select-row": [detailCheck(checkObject([["rowIndex", checkInteger, false], ["columnIndex", checkInteger, false]], false)), true, true, false], "select-column": [detailCheck(checkObject([["rowIndex", checkInteger, false], ["columnIndex", checkInteger, false]], false)), true, true, false], "reorder-row": [detailCheck(checkObject([["fromIndex", checkInteger, false], ["toIndex", checkInteger, false]], false)), true, true, false], "reorder-column": [detailCheck(checkObject([["fromIndex", checkInteger, false], ["toIndex", checkInteger, false]], false)), true, true, false], "open-cell-menu": [detailCheck(checkObject([["rowIndex", checkInteger, false], ["columnIndex", checkInteger, false], ["anchor", checkObject([["left", checkNumber, false], ["top", checkNumber, false], ["right", checkNumber, false], ["bottom", checkNumber, false]], false), false]], false)), true, true, false], "open-row-menu": [detailCheck(checkObject([["rowIndex", checkInteger, false], ["columnIndex", checkInteger, false], ["anchor", checkObject([["left", checkNumber, false], ["top", checkNumber, false], ["right", checkNumber, false], ["bottom", checkNumber, false]], false), false]], false)), true, true, false], "open-column-menu": [detailCheck(checkObject([["rowIndex", checkInteger, false], ["columnIndex", checkInteger, false], ["anchor", checkObject([["left", checkNumber, false], ["top", checkNumber, false], ["right", checkNumber, false], ["bottom", checkNumber, false]], false), false]], false)), true, true, false] }, x: dispatchDeclared };
+const D = { props: { "geometry": { "required":false, c: checkObject([["rowBoundaries", checkList(checkNumber), false], ["columnBoundaries", checkList(checkNumber), false], ["activeCell", checkUnion([checkObject([["left", checkNumber, false], ["top", checkNumber, false], ["width", checkNumber, false], ["height", checkNumber, false], ["rowIndex", checkInteger, false], ["columnIndex", checkInteger, false]], false), checkNull], "object({ left: number, top: number, width: number, height: number, rowIndex: integer, columnIndex: integer }) | null"), false], ["hoveredCell", checkUnion([checkObject([["left", checkNumber, false], ["top", checkNumber, false], ["width", checkNumber, false], ["height", checkNumber, false], ["rowIndex", checkInteger, false], ["columnIndex", checkInteger, false]], false), checkNull], "object({ left: number, top: number, width: number, height: number, rowIndex: integer, columnIndex: integer }) | null"), true]], false), j: 1, m: ["o",["rowBoundaries",["l","n"],"columnBoundaries",["l","n"],"activeCell",["u",["o",["left","n","top","n","width","n","height","n","rowIndex","i","columnIndex","i"]],"z"],"hoveredCell",["u",["o",["left","n","top","n","width","n","height","n","rowIndex","i","columnIndex","i"]],"z"]]] }, "open": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" } } };
+const C = (host) => controller.default(host);
 
-export function createUiEditorTableOverlay(options = {}) {
+export function createUiEditorTableOverlay(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;
@@ -15,109 +23,204 @@ export function createUiEditorTableOverlay(options = {}) {
   }
   if (!element.hasAttribute("aria-label")) element.setAttribute("aria-label", "Table controls");
   element.setAttribute("data-component", "ui-editor-table-overlay");
-  const element0 = document.createElement("div");
-  element0.setAttribute("class", "rows");
-  const element1 = document.createElement("div");
-  element1.setAttribute("class", "control row");
-  const element2 = document.createElement("span");
-  element2.setAttribute("class", "line");
-  element2.setAttribute("aria-hidden", "true");
-  element1.append(element2);
-  const element3 = document.createElement("span");
-  element3.setAttribute("class", "guide");
-  element3.setAttribute("data-ui-guide", "");
-  element3.setAttribute("aria-hidden", "true");
-  element1.append(element3);
-  const element4 = document.createElement("button");
-  element4.setAttribute("type", "button");
-  element4.setAttribute("class", "handle");
-  const element5 = document.createElement("ui-icon");
-  element5.setAttribute("name", "plus");
-  element4.append(element5);
-  const element6 = document.createElement("span");
-  element6.setAttribute("class", "tooltip");
-  element6.setAttribute("role", "tooltip");
-  const text7 = document.createTextNode("");
-  element6.append(text7);
-  element4.append(element6);
-  element1.append(element4);
-  element0.append(element1);
-  element.append(element0);
-  const element8 = document.createElement("div");
-  element8.setAttribute("class", "cols");
-  const element9 = document.createElement("div");
-  element9.setAttribute("class", "control col");
-  const element10 = document.createElement("span");
-  element10.setAttribute("class", "line");
-  element10.setAttribute("aria-hidden", "true");
-  element9.append(element10);
-  const element11 = document.createElement("span");
-  element11.setAttribute("class", "guide");
-  element11.setAttribute("data-ui-guide", "");
-  element11.setAttribute("aria-hidden", "true");
-  element9.append(element11);
-  const element12 = document.createElement("button");
-  element12.setAttribute("type", "button");
-  element12.setAttribute("class", "handle");
-  const element13 = document.createElement("ui-icon");
-  element13.setAttribute("name", "plus");
-  element12.append(element13);
-  const element14 = document.createElement("span");
-  element14.setAttribute("class", "tooltip");
-  element14.setAttribute("role", "tooltip");
-  const text15 = document.createTextNode("");
-  element14.append(text15);
-  element12.append(element14);
-  element9.append(element12);
-  element8.append(element9);
-  element.append(element8);
-  const element16 = document.createElement("template");
-  const element17 = document.createElement("button");
-  element17.setAttribute("type", "button");
-  element17.setAttribute("class", "selector row");
-  element17.setAttribute("data-action", "select-row");
-  element17.setAttribute("title", "Drag row to reorder; click for actions");
-  element17.setAttribute("aria-label", "Row actions");
-  const element18 = document.createElement("span");
-  element18.setAttribute("class", "glyph");
-  const element19 = document.createElement("ui-icon");
-  element19.setAttribute("name", "grip-vertical");
-  element18.append(element19);
-  element17.append(element18);
-  element16.append(element17);
-  const element20 = document.createElement("button");
-  element20.setAttribute("type", "button");
-  element20.setAttribute("class", "selector column");
-  element20.setAttribute("data-action", "select-column");
-  element20.setAttribute("title", "Drag column to reorder; click for actions");
-  element20.setAttribute("aria-label", "Column actions");
-  const element21 = document.createElement("span");
-  element21.setAttribute("class", "glyph");
-  const element22 = document.createElement("ui-icon");
-  element22.setAttribute("name", "grip-horizontal");
-  element21.append(element22);
-  element20.append(element21);
-  element16.append(element20);
-  element.append(element16);
-  const element23 = document.createElement("button");
-  element23.setAttribute("type", "button");
-  element23.setAttribute("class", "cell-menu");
-  element23.setAttribute("data-action", "open-cell-menu");
-  element23.setAttribute("title", "Cell actions");
-  element23.setAttribute("aria-label", "Cell actions");
-  const element24 = document.createElement("ui-icon");
-  element24.setAttribute("name", "chevron-down");
-  element23.append(element24);
-  element.append(element23);
-  const element25 = document.createElement("span");
-  element25.setAttribute("class", "drop-indicator");
-  element25.setAttribute("data-drop-indicator", "");
-  element25.setAttribute("hidden", "");
-  element25.setAttribute("aria-hidden", "true");
-  element.append(element25);
-  manageComponentLifecycle(element, definition, { props: componentProps, projected,
-    controller,
-  });
+  element.append((P0 ??= buildTemplate(T0)).cloneNode(true));
+  const v = [[], [], null, null, "", null, null];
+  const B = acceptProps(element, D, S.n, v, componentProps, [], html);
+  let s4 = v[4];
+  const m1 = (o, j, l) => {
+    const n = (P1 ??= buildTemplate(T1)).cloneNode(true);
+    const t0 = n.firstChild.nextSibling.nextSibling;
+    const t1 = t0.firstChild.nextSibling.firstChild;
+    const r = { k: undefined, i: o, n, x: 0, y: 0, a1: t0, a2: t1, w: 0, v0: false, v1: undefined, v2: null, v3: null, v4: null, v5: null, v6: null, v7: "" };
+    p1(r, -1, E);
+    return r;
+  };
+  const p1 = (r, c, d) => {
+    const o = r.i;
+    if (c & 1073741824) r.w = 0;
+    if (c & 1073741840) {
+      const x0 = (readMember(o, "key") === v[4]);
+      const s0 = x0;
+      if (s0 !== r.v0) r.n.classList.toggle("active", r.v0 = s0);
+    }
+    if (c & 1073741824) {
+      const x1 = trackContainer(r, readMember(o, "offset"));
+      const s1 = toText(x1);
+      if (s1 !== r.v1) r.n.style.setProperty("top", r.v1 = s1);
+      const x2 = trackContainer(r, readMember(o, "key"));
+      const s2 = toAttribute(x2, "data-control-key");
+      if (s2 !== r.v2) writeAttribute(r.n, "data-control-key", r.v2 = s2);
+      const x3 = trackContainer(r, readMember(o, "affordance"));
+      const s3 = toAttribute(x3, "data-ui-affordance");
+      if (s3 !== r.v3) writeAttribute(r.a1, "data-ui-affordance", r.v3 = s3);
+      const x4 = trackContainer(r, readMember(o, "action"));
+      const s4 = toAttribute(x4, "data-action");
+      if (s4 !== r.v4) writeAttribute(r.a1, "data-action", r.v4 = s4);
+      const x5 = trackContainer(r, readMember(o, "index"));
+      const s5 = toAttribute(x5, "data-boundary-index");
+      if (s5 !== r.v5) writeAttribute(r.a1, "data-boundary-index", r.v5 = s5);
+      const x6 = trackContainer(r, readMember(o, "label"));
+      const s6 = toAttribute(x6, "aria-label");
+      if (s6 !== r.v6) writeAttribute(r.a1, "aria-label", r.v6 = s6);
+      const s7 = toText(x6);
+      if (s7 !== r.v7) r.a2.data = r.v7 = s7;
+    }
+  };
+  const m2 = (o, j, l) => {
+    const n = (P2 ??= buildTemplate(T2)).cloneNode(true);
+    const t0 = n.firstChild.nextSibling.nextSibling;
+    const t1 = t0.firstChild.nextSibling.firstChild;
+    const r = { k: undefined, i: o, n, x: 0, y: 0, a1: t0, a2: t1, w: 0, v0: false, v1: undefined, v2: null, v3: null, v4: null, v5: null, v6: null, v7: "" };
+    p2(r, -1, E);
+    return r;
+  };
+  const p2 = (r, c, d) => {
+    const o = r.i;
+    if (c & 1073741824) r.w = 0;
+    if (c & 1073741840) {
+      const x0 = (readMember(o, "key") === v[4]);
+      const s0 = x0;
+      if (s0 !== r.v0) r.n.classList.toggle("active", r.v0 = s0);
+    }
+    if (c & 1073741824) {
+      const x1 = trackContainer(r, readMember(o, "offset"));
+      const s1 = toText(x1);
+      if (s1 !== r.v1) r.n.style.setProperty("left", r.v1 = s1);
+      const x2 = trackContainer(r, readMember(o, "key"));
+      const s2 = toAttribute(x2, "data-control-key");
+      if (s2 !== r.v2) writeAttribute(r.n, "data-control-key", r.v2 = s2);
+      const x3 = trackContainer(r, readMember(o, "affordance"));
+      const s3 = toAttribute(x3, "data-ui-affordance");
+      if (s3 !== r.v3) writeAttribute(r.a1, "data-ui-affordance", r.v3 = s3);
+      const x4 = trackContainer(r, readMember(o, "action"));
+      const s4 = toAttribute(x4, "data-action");
+      if (s4 !== r.v4) writeAttribute(r.a1, "data-action", r.v4 = s4);
+      const x5 = trackContainer(r, readMember(o, "index"));
+      const s5 = toAttribute(x5, "data-boundary-index");
+      if (s5 !== r.v5) writeAttribute(r.a1, "data-boundary-index", r.v5 = s5);
+      const x6 = trackContainer(r, readMember(o, "label"));
+      const s6 = toAttribute(x6, "aria-label");
+      if (s6 !== r.v6) writeAttribute(r.a1, "aria-label", r.v6 = s6);
+      const s7 = toText(x6);
+      if (s7 !== r.v7) r.a2.data = r.v7 = s7;
+    }
+  };
+  const m3 = (d) => {
+    const n = (P3 ??= buildTemplate(T3)).cloneNode(true);
+    const t0 = n.firstChild;
+    const t1 = t0.nextSibling;
+    const r = { n, a0: t0, a1: t1, v0: undefined, v1: null, v2: null, v3: undefined, v4: null, v5: null };
+    p3(r, -1, d);
+    return r;
+  };
+  const p3 = (r, c, d) => {
+    if (c & 1073741828) {
+      const x0 = (checkReference(S, readDeclared(v[2], ["rowOffset"]), "s", "expression:$hovered.rowOffset:hovered.rowOffset", "Reference `hovered.rowOffset` must satisfy string.") ? readMember(v[2], "rowOffset") : NONCONFORMING);
+      if (x0 !== NONCONFORMING) {
+        const s0 = toText(x0);
+        if (s0 !== r.v0) r.a0.style.setProperty("top", r.v0 = s0);
+      }
+      const x1 = (checkReference(S, readDeclared(v[2], ["rowIndex"]), "i", "expression:$hovered.rowIndex:hovered.rowIndex", "Reference `hovered.rowIndex` must satisfy integer.") ? readMember(v[2], "rowIndex") : NONCONFORMING);
+      if (x1 !== NONCONFORMING) {
+        const s1 = toAttribute(x1, "data-row-index");
+        if (s1 !== r.v1) writeAttribute(r.a0, "data-row-index", r.v1 = s1);
+      }
+      const x2 = (checkReference(S, readDeclared(v[2], ["columnIndex"]), "i", "expression:$hovered.columnIndex:hovered.columnIndex", "Reference `hovered.columnIndex` must satisfy integer.") ? readMember(v[2], "columnIndex") : NONCONFORMING);
+      if (x2 !== NONCONFORMING) {
+        const s2 = toAttribute(x2, "data-column-index");
+        if (s2 !== r.v2) writeAttribute(r.a0, "data-column-index", r.v2 = s2);
+      }
+      const x3 = (checkReference(S, readDeclared(v[2], ["columnOffset"]), "s", "expression:$hovered.columnOffset:hovered.columnOffset", "Reference `hovered.columnOffset` must satisfy string.") ? readMember(v[2], "columnOffset") : NONCONFORMING);
+      if (x3 !== NONCONFORMING) {
+        const s3 = toText(x3);
+        if (s3 !== r.v3) r.a1.style.setProperty("left", r.v3 = s3);
+      }
+      if (x1 !== NONCONFORMING) {
+        const s4 = toAttribute(x1, "data-row-index");
+        if (s4 !== r.v4) writeAttribute(r.a1, "data-row-index", r.v4 = s4);
+      }
+      if (x2 !== NONCONFORMING) {
+        const s5 = toAttribute(x2, "data-column-index");
+        if (s5 !== r.v5) writeAttribute(r.a1, "data-column-index", r.v5 = s5);
+      }
+    }
+  };
+  const m4 = (d) => {
+    const n = (P4 ??= buildTemplate(T4)).cloneNode(true);
+    const r = { n, v0: undefined, v1: undefined, v2: null, v3: null };
+    p4(r, -1, d);
+    return r;
+  };
+  const p4 = (r, c, d) => {
+    if (c & 1073741832) {
+      const x0 = (checkReference(S, readDeclared(v[3], ["menuLeft"]), "s", "expression:$active.menuLeft:active.menuLeft", "Reference `active.menuLeft` must satisfy string.") ? readMember(v[3], "menuLeft") : NONCONFORMING);
+      if (x0 !== NONCONFORMING) {
+        const s0 = toText(x0);
+        if (s0 !== r.v0) r.n.style.setProperty("left", r.v0 = s0);
+      }
+      const x1 = (checkReference(S, readDeclared(v[3], ["menuTop"]), "s", "expression:$active.menuTop:active.menuTop", "Reference `active.menuTop` must satisfy string.") ? readMember(v[3], "menuTop") : NONCONFORMING);
+      if (x1 !== NONCONFORMING) {
+        const s1 = toText(x1);
+        if (s1 !== r.v1) r.n.style.setProperty("top", r.v1 = s1);
+      }
+      const x2 = (checkReference(S, readDeclared(v[3], ["rowIndex"]), "i", "expression:$active.rowIndex:active.rowIndex", "Reference `active.rowIndex` must satisfy integer.") ? readMember(v[3], "rowIndex") : NONCONFORMING);
+      if (x2 !== NONCONFORMING) {
+        const s2 = toAttribute(x2, "data-row-index");
+        if (s2 !== r.v2) writeAttribute(r.n, "data-row-index", r.v2 = s2);
+      }
+      const x3 = (checkReference(S, readDeclared(v[3], ["columnIndex"]), "i", "expression:$active.columnIndex:active.columnIndex", "Reference `active.columnIndex` must satisfy integer.") ? readMember(v[3], "columnIndex") : NONCONFORMING);
+      if (x3 !== NONCONFORMING) {
+        const s3 = toAttribute(x3, "data-column-index");
+        if (s3 !== r.v3) writeAttribute(r.n, "data-column-index", r.v3 = s3);
+      }
+    }
+  };
+  const p0 = (r, c, d) => {
+    if (c & 64) {
+      const x0 = !truthy(v[6]);
+      const s0 = toAttribute(x0, "hidden");
+      if (s0 !== r.v0) writeAttribute(r.n, "hidden", r.v0 = s0);
+    }
+    if (c & 1073741825) r.L0.update(v[0], d, c);
+    if (c !== -1 && c & 16) visitSelected(r.L0.m, s4, v[4], p1, c);
+    if (c & 1073741826) r.L1.update(v[1], d, c);
+    if (c !== -1 && c & 16) visitSelected(r.L1.m, s4, v[4], p2, c);
+    if (c & 1073741828) {
+      const f0 = [];
+      const t2 = truthy(recLength(f0, rec(f0, v[2])));
+      if (c === -1 || c & 4 || readsChanged(r.q2, f0)) {
+        r.q2 = f0;
+        {
+          r.b2 = undefined;
+          clearRegion(r.a3, r.e2);
+          if (t2) { r.b2 = m3(d); r.e2.before(r.b2.n); }
+        }
+      } else if (r.b2 !== undefined) p3(r.b2, c, d);
+    } else if (r.b2 !== undefined) p3(r.b2, c, d);
+    if (c & 1073741832) {
+      const f1 = [];
+      const t3 = truthy(recLength(f1, rec(f1, v[3])));
+      if (c === -1 || c & 8 || readsChanged(r.q3, f1)) {
+        r.q3 = f1;
+        {
+          r.b3 = undefined;
+          clearRegion(r.a4, 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);
+    s4 = v[4];
+  };
+  const t0 = element.firstChild;
+  const t1 = t0.firstChild;
+  const t2 = t0.nextSibling;
+  const t3 = t2.firstChild;
+  const t4 = t2.nextSibling;
+  const t5 = t4.nextSibling.nextSibling;
+  const R = { n: element, v0: undefined, L0: new KeyedList(t1, t1.nextSibling, m1, p1, (o) => readMember(o, "key"), "control"), L1: new KeyedList(t3, t3.nextSibling, m2, p2, (o) => readMember(o, "key"), "control"), a3: t4, e2: t4.nextSibling, b2: undefined, q2: undefined, a4: t5, e3: t5.nextSibling, b3: undefined, q3: 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/UiEditorTableToolbar.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 UiEditorTableToolbarEventMap {
   action: CustomEvent<{ readonly action: "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" }>;
 }