@threadlabs/looma 0.14.8 → 0.15.0

package/vanilla/UiDisclosure.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-disclosure/ui-disclosure.js";
 import "../styles/ui-disclosure.css";
 
-const definition = {...{"contract":{"tag":"ui-disclosure","props":{"density":{"type":{"enum":["comfortable","compact"]},"required":false,"target":{"attribute":"density"},"default":"comfortable"},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false},"summary":{"type":"string","required":false,"target":{"attribute":"summary"},"default":"Details"}}},"template":{"kind":"element","name":"div","attributes":[],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"class","value":"trigger"},{"kind":"literal","name":"type","value":"button"},{"kind":"attribute","name":"aria-controls","expression":"contentId","expressionPlan":{"source":"contentId","ast":{"kind":"id","name":"contentId"},"dependencies":["contentId"]}},{"kind":"attribute","name":"aria-expanded","expression":"internalOpen","expressionPlan":{"source":"internalOpen","ast":{"kind":"id","name":"internalOpen"},"dependencies":["internalOpen"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"directive","name":"value","expression":"summary","expressionPlan":{"source":"summary","ast":{"kind":"id","name":"summary"},"dependencies":["summary"]}}],"children":[]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"chevron"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]}],"ref":"trigger"},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"panel"},{"kind":"attribute","name":"id","expression":"contentId","expressionPlan":{"source":"contentId","ast":{"kind":"id","name":"contentId"},"dependencies":["contentId"]}},{"kind":"attribute","name":"inert","expression":"not internalOpen","expressionPlan":{"source":"not internalOpen","ast":{"kind":"unary","op":"not","operand":{"kind":"id","name":"internalOpen"}},"dependencies":["internalOpen"]}}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"panel-inner"}],"children":[{"kind":"slot"}]}]}]},"declarations":[{"kind":"state","name":"internalOpen","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"contentId","expression":{"source":"''","ast":{"kind":"literal","value":""},"dependencies":[]}},{"kind":"event","name":"open","type":"object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"close","type":"object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-disclosure","props":{"density":{"type":{"enum":["comfortable","compact"]},"required":false,"target":{"attribute":"density"},"default":"comfortable"},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"headingLevel":{"type":{"kind":"terminal","name":"integer"},"required":false,"target":{"attribute":"headinglevel"},"default":0},"name":{"type":"string","required":false,"target":{"attribute":"name"},"default":""},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false},"summary":{"type":"string","required":false,"target":{"attribute":"summary"},"default":"Details"}}},"template":{"kind":"element","name":"div","attributes":[],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"heading"},{"kind":"attribute","name":"role","expression":"headingRole","expressionPlan":{"source":"headingRole","ast":{"kind":"id","name":"headingRole"},"dependencies":["headingRole"]}},{"kind":"attribute","name":"aria-level","expression":"headingAriaLevel","expressionPlan":{"source":"headingAriaLevel","ast":{"kind":"id","name":"headingAriaLevel"},"dependencies":["headingAriaLevel"]}}],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"class","value":"trigger"},{"kind":"literal","name":"type","value":"button"},{"kind":"attribute","name":"aria-controls","expression":"contentId","expressionPlan":{"source":"contentId","ast":{"kind":"id","name":"contentId"},"dependencies":["contentId"]}},{"kind":"attribute","name":"aria-expanded","expression":"internalOpen","expressionPlan":{"source":"internalOpen","ast":{"kind":"id","name":"internalOpen"},"dependencies":["internalOpen"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"summary"}],"children":[{"kind":"slot","fallback":[{"kind":"element","name":"template","attributes":[{"kind":"directive","name":"value","expression":"summary","expressionPlan":{"source":"summary","ast":{"kind":"id","name":"summary"},"dependencies":["summary"]}}],"children":[]}],"name":"summary"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"chevron"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]}],"ref":"trigger"}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"panel"},{"kind":"attribute","name":"id","expression":"contentId","expressionPlan":{"source":"contentId","ast":{"kind":"id","name":"contentId"},"dependencies":["contentId"]}}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"panel-inner"}],"children":[{"kind":"slot"}]}],"ref":"panel"}]},"declarations":[{"kind":"state","name":"internalOpen","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"contentId","expression":{"source":"''","ast":{"kind":"literal","value":""},"dependencies":[]}},{"kind":"state","name":"headingRole","expression":{"source":"null","ast":{"kind":"literal","value":null},"dependencies":[]}},{"kind":"state","name":"headingAriaLevel","expression":{"source":"null","ast":{"kind":"literal","value":null},"dependencies":[]}},{"kind":"event","name":"open","type":"object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"close","type":"object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
 
 export function createUiDisclosure(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
@@ -14,33 +14,47 @@ export function createUiDisclosure(options = {}) {
     element.setAttribute(name, value === true ? "" : String(value));
   }
   element.setAttribute("data-component", "ui-disclosure");
-  const element0 = document.createElement("button");
-  element0.setAttribute("class", "trigger");
-  element0.setAttribute("type", "button");
+  const element0 = document.createElement("div");
+  element0.setAttribute("class", "heading");
+  const element1 = document.createElement("button");
+  element1.setAttribute("class", "trigger");
+  element1.setAttribute("type", "button");
   const value0 = componentProps["disabled"] === undefined ? false : componentProps["disabled"];
-  if (value0 === true) element0.setAttribute("disabled", "");
-  else element0.removeAttribute("disabled");
-  const element1 = document.createElement("span");
-  element0.append(element1);
+  if (value0 === true) element1.setAttribute("disabled", "");
+  else element1.removeAttribute("disabled");
   const element2 = document.createElement("span");
-  element2.setAttribute("class", "chevron");
-  element2.setAttribute("aria-hidden", "true");
-  element0.append(element2);
+  element2.setAttribute("class", "summary");
+  if (slots["summary"] ?? [].length > 0) {
+    for (const child of slots["summary"] ?? []) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, "summary"]);
+      element2.append(node);
+    }
+  } else {
+  const element3 = document.createElement("template");
+  element2.append(element3);
+  }
+  element1.append(element2);
+  const element4 = document.createElement("span");
+  element4.setAttribute("class", "chevron");
+  element4.setAttribute("aria-hidden", "true");
+  element1.append(element4);
+  element0.append(element1);
   element.append(element0);
-  const element3 = document.createElement("div");
-  element3.setAttribute("class", "panel");
-  const element4 = document.createElement("div");
-  element4.setAttribute("class", "panel-inner");
+  const element5 = document.createElement("div");
+  element5.setAttribute("class", "panel");
+  const element6 = document.createElement("div");
+  element6.setAttribute("class", "panel-inner");
   if (children.length > 0) {
     for (const child of children) {
       const node = typeof child === "string" ? document.createTextNode(child) : child;
       projected.push([node, ""]);
-      element4.append(node);
+      element6.append(node);
     }
   } else {
   }
-  element3.append(element4);
-  element.append(element3);
+  element5.append(element6);
+  element.append(element5);
   manageComponentLifecycle(element, definition, { props: componentProps, projected,
     controller,
   });

package/vanilla/UiEditable.d.ts

@@ -10,10 +10,15 @@ export interface UiEditableElement extends HTMLDivElement {
 }
 export interface UiEditableProps {
   actions?: boolean | null;
+  cancelLabel?: string | null;
   disabled?: boolean | null;
   edit?: boolean | null;
   hint?: string | null;
   label?: string | null;
+  maxLength?: number | null;
+  placeholder?: string | null;
+  required?: boolean | null;
+  saveLabel?: string | null;
   value?: string | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];

package/vanilla/UiEditable.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-editable/ui-editable.js";
 import "../styles/ui-editable.css";
 
-const definition = {...{"contract":{"tag":"ui-editable","props":{"actions":{"type":"boolean","required":false,"target":{"attribute":"actions"},"default":false},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"edit":{"type":"boolean","required":false,"target":{"attribute":"edit"},"default":false},"hint":{"type":"string","required":false,"target":{"attribute":"hint"},"default":""},"label":{"type":"string","required":false,"target":{"attribute":"aria-label"},"default":"Edit value"},"value":{"type":"string","required":false,"target":{"attribute":"value"},"default":""}}},"template":{"kind":"element","name":"div","attributes":[],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"field"}],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"class","value":"preview"},{"kind":"literal","name":"type","value":"button"},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"text"},{"kind":"directive","name":"value","expression":"internalValue","expressionPlan":{"source":"internalValue","ast":{"kind":"id","name":"internalValue"},"dependencies":["internalValue"]}}],"children":[]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"hint"},{"kind":"literal","name":"aria-hidden","value":"true"},{"kind":"directive","name":"value","expression":"hint","expressionPlan":{"source":"hint","ast":{"kind":"id","name":"hint"},"dependencies":["hint"]}}],"children":[],"flow":{"kind":"if","test":"hint","testPlan":{"source":"hint","ast":{"kind":"id","name":"hint"},"dependencies":["hint"]}}}],"ref":"preview"},{"kind":"element","name":"input","attributes":[{"kind":"literal","name":"class","value":"input"},{"kind":"literal","name":"type","value":"text"},{"kind":"property","key":"value","name":"value","expression":"draft","expressionPlan":{"source":"draft","ast":{"kind":"id","name":"draft"},"dependencies":["draft"]}},{"kind":"attribute","name":"aria-label","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}},{"kind":"attribute","name":"disabled","expression":"disabled or not internalEdit","expressionPlan":{"source":"disabled or not internalEdit","ast":{"kind":"binary","op":"or","left":{"kind":"id","name":"disabled"},"right":{"kind":"unary","op":"not","operand":{"kind":"id","name":"internalEdit"}}},"dependencies":["disabled","internalEdit"]}}],"children":[],"ref":"input"}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"actions"}],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"class","value":"save"},{"kind":"literal","name":"type","value":"button"}],"children":[{"kind":"text","value":"Save"}]},{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"class","value":"cancel"},{"kind":"literal","name":"type","value":"button"}],"children":[{"kind":"text","value":"Cancel"}]}],"flow":{"kind":"if","test":"actions","testPlan":{"source":"actions","ast":{"kind":"id","name":"actions"},"dependencies":["actions"]}}}]},"declarations":[{"kind":"state","name":"internalEdit","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"internalValue","expression":{"source":"''","ast":{"kind":"literal","value":""},"dependencies":[]}},{"kind":"state","name":"draft","expression":{"source":"''","ast":{"kind":"literal","value":""},"dependencies":[]}},{"kind":"event","name":"input","type":"object({ value: string, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"change","type":"object({ value: string, previousValue: string, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"edit-change","type":"object({ edit: boolean, reason: activate | commit | cancel | light-dismiss | escape | programmatic, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-editable","props":{"actions":{"type":"boolean","required":false,"target":{"attribute":"actions"},"default":false},"cancelLabel":{"type":"string","required":false,"target":{"attribute":"cancellabel"},"default":"Cancel"},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"edit":{"type":"boolean","required":false,"target":{"attribute":"edit"},"default":false},"hint":{"type":"string","required":false,"target":{"attribute":"hint"},"default":""},"label":{"type":"string","required":false,"target":{"attribute":"aria-label"},"default":"Edit value"},"maxLength":{"type":"number","required":false,"target":{"attribute":"maxlength"},"default":0},"placeholder":{"type":"string","required":false,"target":{"attribute":"placeholder"},"default":""},"required":{"type":"boolean","required":false,"target":{"attribute":"required"},"default":false},"saveLabel":{"type":"string","required":false,"target":{"attribute":"savelabel"},"default":"Save"},"value":{"type":"string","required":false,"target":{"attribute":"value"},"default":""}}},"template":{"kind":"element","name":"div","attributes":[],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"field"}],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"class","value":"preview"},{"kind":"literal","name":"type","value":"button"},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"text"},{"kind":"directive","name":"value","expression":"internalValue","expressionPlan":{"source":"internalValue","ast":{"kind":"id","name":"internalValue"},"dependencies":["internalValue"]}}],"children":[]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"hint"},{"kind":"literal","name":"aria-hidden","value":"true"},{"kind":"directive","name":"value","expression":"hint","expressionPlan":{"source":"hint","ast":{"kind":"id","name":"hint"},"dependencies":["hint"]}}],"children":[],"flow":{"kind":"if","test":"hint","testPlan":{"source":"hint","ast":{"kind":"id","name":"hint"},"dependencies":["hint"]}}}],"ref":"preview"},{"kind":"element","name":"input","attributes":[{"kind":"literal","name":"class","value":"input"},{"kind":"literal","name":"type","value":"text"},{"kind":"property","key":"value","name":"value","expression":"draft","expressionPlan":{"source":"draft","ast":{"kind":"id","name":"draft"},"dependencies":["draft"]}},{"kind":"attribute","name":"aria-label","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}},{"kind":"attribute","name":"placeholder","expression":"placeholder","expressionPlan":{"source":"placeholder","ast":{"kind":"id","name":"placeholder"},"dependencies":["placeholder"]}},{"kind":"attribute","name":"required","expression":"required","expressionPlan":{"source":"required","ast":{"kind":"id","name":"required"},"dependencies":["required"]}},{"kind":"attribute","name":"disabled","expression":"disabled or not internalEdit","expressionPlan":{"source":"disabled or not internalEdit","ast":{"kind":"binary","op":"or","left":{"kind":"id","name":"disabled"},"right":{"kind":"unary","op":"not","operand":{"kind":"id","name":"internalEdit"}}},"dependencies":["disabled","internalEdit"]}}],"children":[],"ref":"input"}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"actions"}],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"class","value":"save"},{"kind":"literal","name":"type","value":"button"},{"kind":"directive","name":"value","expression":"saveLabel","expressionPlan":{"source":"saveLabel","ast":{"kind":"id","name":"saveLabel"},"dependencies":["saveLabel"]}}],"children":[]},{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"class","value":"cancel"},{"kind":"literal","name":"type","value":"button"},{"kind":"directive","name":"value","expression":"cancelLabel","expressionPlan":{"source":"cancelLabel","ast":{"kind":"id","name":"cancelLabel"},"dependencies":["cancelLabel"]}}],"children":[]}],"flow":{"kind":"if","test":"actions","testPlan":{"source":"actions","ast":{"kind":"id","name":"actions"},"dependencies":["actions"]}}}]},"declarations":[{"kind":"state","name":"internalEdit","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"internalValue","expression":{"source":"''","ast":{"kind":"literal","value":""},"dependencies":[]}},{"kind":"state","name":"draft","expression":{"source":"''","ast":{"kind":"literal","value":""},"dependencies":[]}},{"kind":"event","name":"input","type":"object({ value: string, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"change","type":"object({ value: string, previousValue: string, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"edit-change","type":"object({ edit: boolean, reason: activate | commit | cancel | light-dismiss | escape | programmatic, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
 
 export function createUiEditable(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
@@ -36,6 +36,12 @@ export function createUiEditable(options = {}) {
   const value1 = componentProps["label"] === undefined ? "Edit value" : componentProps["label"];
   if (value1 === null || value1 === undefined) element4.removeAttribute("aria-label");
   else element4.setAttribute("aria-label", String(value1));
+  const value2 = componentProps["placeholder"] === undefined ? "" : componentProps["placeholder"];
+  if (value2 === null || value2 === undefined) element4.removeAttribute("placeholder");
+  else element4.setAttribute("placeholder", String(value2));
+  const value3 = componentProps["required"] === undefined ? false : componentProps["required"];
+  if (value3 === true) element4.setAttribute("required", "");
+  else element4.removeAttribute("required");
   element0.append(element4);
   element.append(element0);
   const element5 = document.createElement("div");
@@ -43,12 +49,10 @@ export function createUiEditable(options = {}) {
   const element6 = document.createElement("button");
   element6.setAttribute("class", "save");
   element6.setAttribute("type", "button");
-  element6.append("Save");
   element5.append(element6);
   const element7 = document.createElement("button");
   element7.setAttribute("class", "cancel");
   element7.setAttribute("type", "button");
-  element7.append("Cancel");
   element5.append(element7);
   element.append(element5);
   manageComponentLifecycle(element, definition, { props: componentProps, projected,

package/vanilla/UiEditorInsertTableGrid.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-editor-insert-table-grid/ui-editor-insert-table-grid.js";
 import "../styles/ui-editor-insert-table-grid.css";
 
-const definition = {...{"contract":{"tag":"ui-editor-insert-table-grid","props":{"headerRow":{"type":"boolean","required":false,"target":{"attribute":"headerrow"},"default":false},"maxCols":{"type":{"kind":"terminal","name":"integer"},"required":false,"target":{"attribute":"maxcols"},"default":8},"maxRows":{"type":{"kind":"terminal","name":"integer"},"required":false,"target":{"attribute":"maxrows"},"default":8},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false}}},"template":{"kind":"element","name":"div","attributes":[{"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":"p","attributes":[{"kind":"literal","name":"class","value":"hint"},{"kind":"directive","name":"value","expression":"hint","expressionPlan":{"source":"hint","ast":{"kind":"id","name":"hint"},"dependencies":["hint"]}}],"children":[]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"grid"},{"kind":"literal","name":"role","value":"group"},{"kind":"literal","name":"aria-label","value":"Table dimensions"},{"kind":"attribute","name":"--_rows","expression":"rows","expressionPlan":{"source":"rows","ast":{"kind":"id","name":"rows"},"dependencies":["rows"]},"target":"style"},{"kind":"attribute","name":"--_cols","expression":"cols","expressionPlan":{"source":"cols","ast":{"kind":"id","name":"cols"},"dependencies":["cols"]},"target":"style"}],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"class","value":"cell"},{"kind":"attribute","name":"selected","expression":"cell.selected","expressionPlan":{"source":"cell.selected","ast":{"kind":"member","object":{"kind":"id","name":"cell"},"key":"selected"},"dependencies":["cell.selected"]},"target":"class"},{"kind":"attribute","name":"data-row","expression":"cell.row","expressionPlan":{"source":"cell.row","ast":{"kind":"member","object":{"kind":"id","name":"cell"},"key":"row"},"dependencies":["cell.row"]}},{"kind":"attribute","name":"data-col","expression":"cell.col","expressionPlan":{"source":"cell.col","ast":{"kind":"member","object":{"kind":"id","name":"cell"},"key":"col"},"dependencies":["cell.col"]}},{"kind":"attribute","name":"aria-label","expression":"cell.label","expressionPlan":{"source":"cell.label","ast":{"kind":"member","object":{"kind":"id","name":"cell"},"key":"label"},"dependencies":["cell.label"]}},{"kind":"attribute","name":"aria-pressed","expression":"cell.selected","expressionPlan":{"source":"cell.selected","ast":{"kind":"member","object":{"kind":"id","name":"cell"},"key":"selected"},"dependencies":["cell.selected"]}}],"children":[],"flow":{"kind":"each","item":"cell","list":"cells","listPlan":{"source":"cells","ast":{"kind":"id","name":"cells"},"dependencies":["cells"]},"key":"cell.key","keyPlan":{"source":"cell.key","ast":{"kind":"member","object":{"kind":"id","name":"cell"},"key":"key"},"dependencies":["cell.key"]}}}]},{"kind":"element","name":"label","attributes":[{"kind":"literal","name":"class","value":"header"}],"children":[{"kind":"element","name":"input","attributes":[{"kind":"literal","name":"type","value":"checkbox"},{"kind":"property","key":"checked","name":"checked","expression":"withHeaderRow","expressionPlan":{"source":"withHeaderRow","ast":{"kind":"id","name":"withHeaderRow"},"dependencies":["withHeaderRow"]}}],"children":[],"ref":"header"},{"kind":"text","value":" Header row"}]},{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"class","value":"insert"}],"children":[{"kind":"text","value":"Insert table"}],"ref":"insert"}]},"declarations":[{"kind":"state","name":"cells","type":"list(object({ key: string, row: integer, col: integer, label: string, selected: boolean }))","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"state","name":"rows","expression":{"source":"8","ast":{"kind":"literal","value":8},"dependencies":[]}},{"kind":"state","name":"cols","expression":{"source":"8","ast":{"kind":"literal","value":8},"dependencies":[]}},{"kind":"state","name":"hint","expression":{"source":"''","ast":{"kind":"literal","value":""},"dependencies":[]}},{"kind":"state","name":"withHeaderRow","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"insert","type":"object({ rows: integer, cols: integer, withHeaderRow: boolean })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-editor-insert-table-grid","props":{"headerRow":{"type":"boolean","required":false,"target":{"attribute":"headerrow"},"default":false},"maxCols":{"type":{"kind":"terminal","name":"integer"},"required":false,"target":{"attribute":"maxcols"},"default":8},"maxRows":{"type":{"kind":"terminal","name":"integer"},"required":false,"target":{"attribute":"maxrows"},"default":8},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false}}},"template":{"kind":"element","name":"div","attributes":[{"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":"p","attributes":[{"kind":"literal","name":"class","value":"hint"},{"kind":"directive","name":"value","expression":"hint","expressionPlan":{"source":"hint","ast":{"kind":"id","name":"hint"},"dependencies":["hint"]}}],"children":[]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"grid"},{"kind":"literal","name":"role","value":"group"},{"kind":"literal","name":"aria-label","value":"Table dimensions"},{"kind":"attribute","name":"--_rows","expression":"rows","expressionPlan":{"source":"rows","ast":{"kind":"id","name":"rows"},"dependencies":["rows"]},"target":"style"},{"kind":"attribute","name":"--_cols","expression":"cols","expressionPlan":{"source":"cols","ast":{"kind":"id","name":"cols"},"dependencies":["cols"]},"target":"style"}],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"class","value":"cell"},{"kind":"attribute","name":"selected","expression":"cell.selected","expressionPlan":{"source":"cell.selected","ast":{"kind":"member","object":{"kind":"id","name":"cell"},"key":"selected"},"dependencies":["cell.selected"]},"target":"class"},{"kind":"attribute","name":"data-row","expression":"cell.row","expressionPlan":{"source":"cell.row","ast":{"kind":"member","object":{"kind":"id","name":"cell"},"key":"row"},"dependencies":["cell.row"]}},{"kind":"attribute","name":"data-col","expression":"cell.col","expressionPlan":{"source":"cell.col","ast":{"kind":"member","object":{"kind":"id","name":"cell"},"key":"col"},"dependencies":["cell.col"]}},{"kind":"attribute","name":"aria-label","expression":"cell.label","expressionPlan":{"source":"cell.label","ast":{"kind":"member","object":{"kind":"id","name":"cell"},"key":"label"},"dependencies":["cell.label"]}},{"kind":"attribute","name":"aria-pressed","expression":"cell.selected","expressionPlan":{"source":"cell.selected","ast":{"kind":"member","object":{"kind":"id","name":"cell"},"key":"selected"},"dependencies":["cell.selected"]}},{"kind":"attribute","name":"tabindex","expression":"cell.tabIndex","expressionPlan":{"source":"cell.tabIndex","ast":{"kind":"member","object":{"kind":"id","name":"cell"},"key":"tabIndex"},"dependencies":["cell.tabIndex"]}}],"children":[],"flow":{"kind":"each","item":"cell","list":"cells","listPlan":{"source":"cells","ast":{"kind":"id","name":"cells"},"dependencies":["cells"]},"key":"cell.key","keyPlan":{"source":"cell.key","ast":{"kind":"member","object":{"kind":"id","name":"cell"},"key":"key"},"dependencies":["cell.key"]}}}],"ref":"grid"},{"kind":"element","name":"label","attributes":[{"kind":"literal","name":"class","value":"header"}],"children":[{"kind":"element","name":"input","attributes":[{"kind":"literal","name":"type","value":"checkbox"},{"kind":"property","key":"checked","name":"checked","expression":"withHeaderRow","expressionPlan":{"source":"withHeaderRow","ast":{"kind":"id","name":"withHeaderRow"},"dependencies":["withHeaderRow"]}}],"children":[],"ref":"header"},{"kind":"text","value":" Header row"}]}]},"declarations":[{"kind":"state","name":"cells","type":"list(object({ key: string, row: integer, col: integer, label: string, selected: boolean, tabIndex: integer }))","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"state","name":"rows","expression":{"source":"8","ast":{"kind":"literal","value":8},"dependencies":[]}},{"kind":"state","name":"cols","expression":{"source":"8","ast":{"kind":"literal","value":8},"dependencies":[]}},{"kind":"state","name":"hint","expression":{"source":"''","ast":{"kind":"literal","value":""},"dependencies":[]}},{"kind":"state","name":"withHeaderRow","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"insert","type":"object({ rows: integer, cols: integer, withHeaderRow: boolean })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
 
 export function createUiEditorInsertTableGrid(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
@@ -33,11 +33,6 @@ export function createUiEditorInsertTableGrid(options = {}) {
   element3.append(element4);
   element3.append(" Header row");
   element.append(element3);
-  const element5 = document.createElement("button");
-  element5.setAttribute("type", "button");
-  element5.setAttribute("class", "insert");
-  element5.append("Insert table");
-  element.append(element5);
   manageComponentLifecycle(element, definition, { props: componentProps, projected,
     controller,
   });

package/vanilla/UiEditorMentionMenu.d.ts

@@ -1,7 +1,7 @@
 // Generated by HTML Next 1.0.0-alpha.7 for Vanilla DOM. Do not edit.
 export interface UiEditorMentionMenuEventMap {
-  highlight: CustomEvent<{ readonly index: number }>;
-  select: CustomEvent<{ readonly index: number }>;
+  highlight: CustomEvent<{ readonly index: number; readonly value: string }>;
+  select: CustomEvent<{ readonly index: number; readonly value: string }>;
 }
 export interface UiEditorMentionMenuElement extends HTMLDivElement {
   addEventListener<K extends keyof UiEditorMentionMenuEventMap>(type: K, listener: (this: UiEditorMentionMenuElement, event: UiEditorMentionMenuEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
@@ -10,7 +10,9 @@ export interface UiEditorMentionMenuElement extends HTMLDivElement {
 export interface UiEditorMentionMenuProps {
   anchorRect?: { readonly left?: number; readonly top?: number; readonly right?: number; readonly bottom?: number; readonly x?: number; readonly y?: number; readonly width?: number; readonly height?: number } | null;
   items?: readonly ({ readonly id: string; readonly label: string; readonly detail?: string; readonly initials?: string })[] | null;
+  label?: string | null;
   loading?: boolean | null;
+  loadingLabel?: string | null;
   open?: boolean | null;
   query?: string | null;
   selectedIndex?: number | null;

package/vanilla/UiEditorMentionMenu.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-editor-mention-menu/ui-editor-mention-menu.js";
 import "../styles/ui-editor-mention-menu.css";
 
-const definition = {...{"contract":{"tag":"ui-editor-mention-menu","props":{"anchorRect":{"type":{"kind":"union","members":[{"kind":"object","fields":[{"name":"left","type":{"kind":"terminal","name":"number"},"optional":true},{"name":"top","type":{"kind":"terminal","name":"number"},"optional":true},{"name":"right","type":{"kind":"terminal","name":"number"},"optional":true},{"name":"bottom","type":{"kind":"terminal","name":"number"},"optional":true},{"name":"x","type":{"kind":"terminal","name":"number"},"optional":true},{"name":"y","type":{"kind":"terminal","name":"number"},"optional":true},{"name":"width","type":{"kind":"terminal","name":"number"},"optional":true},{"name":"height","type":{"kind":"terminal","name":"number"},"optional":true}],"open":false},{"kind":"terminal","name":"null"}]},"required":false,"target":{"attribute":"anchorrect"}},"items":{"type":{"kind":"list","item":{"kind":"object","fields":[{"name":"id","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"label","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"detail","type":{"kind":"terminal","name":"string"},"optional":true},{"name":"initials","type":{"kind":"terminal","name":"string"},"optional":true}],"open":false}},"required":false,"target":{"attribute":"items"}},"loading":{"type":"boolean","required":false,"target":{"attribute":"aria-busy"},"default":false},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false},"query":{"type":"string","required":false,"target":{"attribute":"query"},"default":""},"selectedIndex":{"type":{"kind":"terminal","name":"integer"},"required":false,"target":{"attribute":"selectedindex"},"default":0}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"listbox"},{"kind":"literal","name":"aria-label","value":"Mention a person"},{"kind":"attribute","name":"aria-busy","expression":"loading","expressionPlan":{"source":"loading","ast":{"kind":"id","name":"loading"},"dependencies":["loading"]}},{"kind":"attribute","name":"hidden","expression":"not visible","expressionPlan":{"source":"not visible","ast":{"kind":"unary","op":"not","operand":{"kind":"id","name":"visible"}},"dependencies":["visible"]}}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"header"}],"children":[{"kind":"element","name":"span","attributes":[],"children":[{"kind":"text","value":"People"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"hint"}],"children":[{"kind":"text","value":"Type after @ to search"}]}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"loading"},{"kind":"literal","name":"role","value":"status"}],"children":[{"kind":"text","value":"Searching…"}],"flow":{"kind":"if","test":"searching","testPlan":{"source":"searching","ast":{"kind":"id","name":"searching"},"dependencies":["searching"]}}},{"kind":"element","name":"ul","attributes":[{"kind":"literal","name":"class","value":"list"},{"kind":"literal","name":"role","value":"presentation"}],"children":[{"kind":"element","name":"li","attributes":[{"kind":"attribute","name":"id","expression":"format('%s-option-%s', prefix, index)","expressionPlan":{"source":"format('%s-option-%s', prefix, index)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s-option-%s"},{"kind":"id","name":"prefix"},{"kind":"id","name":"index"}]},"dependencies":["index","prefix"]}},{"kind":"literal","name":"class","value":"item"},{"kind":"attribute","name":"active","expression":"index = active","expressionPlan":{"source":"index = active","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"index"},"right":{"kind":"id","name":"active"}},"dependencies":["active","index"]},"target":"class"},{"kind":"literal","name":"role","value":"option"},{"kind":"attribute","name":"aria-selected","expression":"index = active","expressionPlan":{"source":"index = active","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"index"},"right":{"kind":"id","name":"active"}},"dependencies":["active","index"]}},{"kind":"attribute","name":"data-index","expression":"index","expressionPlan":{"source":"index","ast":{"kind":"id","name":"index"},"dependencies":["index"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"avatar"},{"kind":"literal","name":"aria-hidden","value":"true"},{"kind":"directive","name":"value","expression":"row.initials","expressionPlan":{"source":"row.initials","ast":{"kind":"member","object":{"kind":"id","name":"row"},"key":"initials"},"dependencies":["row.initials"]}}],"children":[]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"body"}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"label"},{"kind":"directive","name":"value","expression":"row.label","expressionPlan":{"source":"row.label","ast":{"kind":"member","object":{"kind":"id","name":"row"},"key":"label"},"dependencies":["row.label"]}}],"children":[]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"detail"},{"kind":"directive","name":"value","expression":"row.detail","expressionPlan":{"source":"row.detail","ast":{"kind":"member","object":{"kind":"id","name":"row"},"key":"detail"},"dependencies":["row.detail"]}}],"children":[],"flow":{"kind":"if","test":"row.detail","testPlan":{"source":"row.detail","ast":{"kind":"member","object":{"kind":"id","name":"row"},"key":"detail"},"dependencies":["row.detail"]}}}]}],"flow":{"kind":"each","item":"row","list":"rows","listPlan":{"source":"rows","ast":{"kind":"id","name":"rows"},"dependencies":["rows"]},"index":"index"}}],"flow":{"kind":"if","test":"not searching","testPlan":{"source":"not searching","ast":{"kind":"unary","op":"not","operand":{"kind":"id","name":"searching"}},"dependencies":["searching"]}}}]},"declarations":[{"kind":"state","name":"visible","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"rows","type":"list(object({ id: string, label: string, detail?: string, initials: string }))","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"state","name":"searching","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"active","expression":{"source":"0","ast":{"kind":"literal","value":0},"dependencies":[]}},{"kind":"state","name":"prefix","expression":{"source":"'ui-editor-mention-menu'","ast":{"kind":"literal","value":"ui-editor-mention-menu"},"dependencies":[]}},{"kind":"event","name":"highlight","type":"object({ index: integer })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"select","type":"object({ index: integer })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-editor-mention-menu","props":{"anchorRect":{"type":{"kind":"union","members":[{"kind":"object","fields":[{"name":"left","type":{"kind":"terminal","name":"number"},"optional":true},{"name":"top","type":{"kind":"terminal","name":"number"},"optional":true},{"name":"right","type":{"kind":"terminal","name":"number"},"optional":true},{"name":"bottom","type":{"kind":"terminal","name":"number"},"optional":true},{"name":"x","type":{"kind":"terminal","name":"number"},"optional":true},{"name":"y","type":{"kind":"terminal","name":"number"},"optional":true},{"name":"width","type":{"kind":"terminal","name":"number"},"optional":true},{"name":"height","type":{"kind":"terminal","name":"number"},"optional":true}],"open":false},{"kind":"terminal","name":"null"}]},"required":false,"target":{"attribute":"anchorrect"}},"items":{"type":{"kind":"list","item":{"kind":"object","fields":[{"name":"id","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"label","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"detail","type":{"kind":"terminal","name":"string"},"optional":true},{"name":"initials","type":{"kind":"terminal","name":"string"},"optional":true}],"open":false}},"required":false,"target":{"attribute":"items"}},"label":{"type":"string","required":false,"target":{"attribute":"label"},"default":"Mentions"},"loading":{"type":"boolean","required":false,"target":{"attribute":"aria-busy"},"default":false},"loadingLabel":{"type":"string","required":false,"target":{"attribute":"loadinglabel"},"default":"Searching…"},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false},"query":{"type":"string","required":false,"target":{"attribute":"query"},"default":""},"selectedIndex":{"type":{"kind":"terminal","name":"integer"},"required":false,"target":{"attribute":"selectedindex"},"default":0}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"listbox"},{"kind":"attribute","name":"aria-busy","expression":"loading","expressionPlan":{"source":"loading","ast":{"kind":"id","name":"loading"},"dependencies":["loading"]}},{"kind":"attribute","name":"hidden","expression":"not visible","expressionPlan":{"source":"not visible","ast":{"kind":"unary","op":"not","operand":{"kind":"id","name":"visible"}},"dependencies":["visible"]}}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"header"}],"children":[{"kind":"slot","fallback":[],"name":"header"}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"loading"},{"kind":"literal","name":"role","value":"status"},{"kind":"directive","name":"value","expression":"loadingLabel","expressionPlan":{"source":"loadingLabel","ast":{"kind":"id","name":"loadingLabel"},"dependencies":["loadingLabel"]}}],"children":[],"flow":{"kind":"if","test":"searching","testPlan":{"source":"searching","ast":{"kind":"id","name":"searching"},"dependencies":["searching"]}}},{"kind":"element","name":"ul","attributes":[{"kind":"literal","name":"class","value":"list"},{"kind":"literal","name":"role","value":"presentation"}],"children":[{"kind":"element","name":"li","attributes":[{"kind":"attribute","name":"id","expression":"format('%s-option-%s', prefix, index)","expressionPlan":{"source":"format('%s-option-%s', prefix, index)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s-option-%s"},{"kind":"id","name":"prefix"},{"kind":"id","name":"index"}]},"dependencies":["index","prefix"]}},{"kind":"literal","name":"class","value":"item"},{"kind":"attribute","name":"active","expression":"index = active","expressionPlan":{"source":"index = active","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"index"},"right":{"kind":"id","name":"active"}},"dependencies":["active","index"]},"target":"class"},{"kind":"literal","name":"role","value":"option"},{"kind":"attribute","name":"aria-selected","expression":"index = active","expressionPlan":{"source":"index = active","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"index"},"right":{"kind":"id","name":"active"}},"dependencies":["active","index"]}},{"kind":"attribute","name":"data-index","expression":"index","expressionPlan":{"source":"index","ast":{"kind":"id","name":"index"},"dependencies":["index"]}},{"kind":"attribute","name":"data-value","expression":"row.id","expressionPlan":{"source":"row.id","ast":{"kind":"member","object":{"kind":"id","name":"row"},"key":"id"},"dependencies":["row.id"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"avatar"},{"kind":"literal","name":"aria-hidden","value":"true"},{"kind":"directive","name":"value","expression":"row.initials","expressionPlan":{"source":"row.initials","ast":{"kind":"member","object":{"kind":"id","name":"row"},"key":"initials"},"dependencies":["row.initials"]}}],"children":[]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"body"}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"label"},{"kind":"directive","name":"value","expression":"row.label","expressionPlan":{"source":"row.label","ast":{"kind":"member","object":{"kind":"id","name":"row"},"key":"label"},"dependencies":["row.label"]}}],"children":[]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"detail"},{"kind":"directive","name":"value","expression":"row.detail","expressionPlan":{"source":"row.detail","ast":{"kind":"member","object":{"kind":"id","name":"row"},"key":"detail"},"dependencies":["row.detail"]}}],"children":[],"flow":{"kind":"if","test":"row.detail","testPlan":{"source":"row.detail","ast":{"kind":"member","object":{"kind":"id","name":"row"},"key":"detail"},"dependencies":["row.detail"]}}}]}],"flow":{"kind":"each","item":"row","list":"rows","listPlan":{"source":"rows","ast":{"kind":"id","name":"rows"},"dependencies":["rows"]},"index":"index"}},{"kind":"slot"}],"flow":{"kind":"if","test":"not searching","testPlan":{"source":"not searching","ast":{"kind":"unary","op":"not","operand":{"kind":"id","name":"searching"}},"dependencies":["searching"]}}},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"empty"}],"children":[{"kind":"slot","fallback":[],"name":"empty"}],"ref":"empty"}]},"declarations":[{"kind":"state","name":"visible","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"rows","type":"list(object({ id: string, label: string, detail?: string, initials: string }))","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"state","name":"searching","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"active","expression":{"source":"0","ast":{"kind":"literal","value":0},"dependencies":[]}},{"kind":"state","name":"prefix","expression":{"source":"'ui-editor-mention-menu'","ast":{"kind":"literal","value":"ui-editor-mention-menu"},"dependencies":[]}},{"kind":"event","name":"highlight","type":"object({ index: integer, value: string })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"select","type":"object({ index: integer, value: string })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
 
 export function createUiEditorMentionMenu(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
@@ -14,47 +14,65 @@ export function createUiEditorMentionMenu(options = {}) {
     element.setAttribute(name, value === true ? "" : String(value));
   }
   if (!element.hasAttribute("role")) element.setAttribute("role", "listbox");
-  if (!element.hasAttribute("aria-label")) element.setAttribute("aria-label", "Mention a person");
   const value0 = componentProps["loading"] === undefined ? false : componentProps["loading"];
   if (typeof value0 === "boolean") element.setAttribute("aria-busy", String(value0));
   else element.removeAttribute("aria-busy");
   element.setAttribute("data-component", "ui-editor-mention-menu");
   const element0 = document.createElement("div");
   element0.setAttribute("class", "header");
-  const element1 = document.createElement("span");
-  element1.append("People");
-  element0.append(element1);
-  const element2 = document.createElement("span");
-  element2.setAttribute("class", "hint");
-  element2.append("Type after @ to search");
-  element0.append(element2);
+  if (slots["header"] ?? [].length > 0) {
+    for (const child of slots["header"] ?? []) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, "header"]);
+      element0.append(node);
+    }
+  } else {
+  }
   element.append(element0);
-  const element3 = document.createElement("div");
-  element3.setAttribute("class", "loading");
-  element3.setAttribute("role", "status");
-  element3.append("Searching…");
-  element.append(element3);
-  const element4 = document.createElement("ul");
-  element4.setAttribute("class", "list");
-  element4.setAttribute("role", "presentation");
-  const element5 = document.createElement("li");
-  element5.setAttribute("class", "item");
-  element5.setAttribute("role", "option");
+  const element1 = document.createElement("div");
+  element1.setAttribute("class", "loading");
+  element1.setAttribute("role", "status");
+  element.append(element1);
+  const element2 = document.createElement("ul");
+  element2.setAttribute("class", "list");
+  element2.setAttribute("role", "presentation");
+  const element3 = document.createElement("li");
+  element3.setAttribute("class", "item");
+  element3.setAttribute("role", "option");
+  const element4 = document.createElement("span");
+  element4.setAttribute("class", "avatar");
+  element4.setAttribute("aria-hidden", "true");
+  element3.append(element4);
+  const element5 = document.createElement("span");
+  element5.setAttribute("class", "body");
   const element6 = document.createElement("span");
-  element6.setAttribute("class", "avatar");
-  element6.setAttribute("aria-hidden", "true");
+  element6.setAttribute("class", "label");
   element5.append(element6);
   const element7 = document.createElement("span");
-  element7.setAttribute("class", "body");
-  const element8 = document.createElement("span");
-  element8.setAttribute("class", "label");
-  element7.append(element8);
-  const element9 = document.createElement("span");
-  element9.setAttribute("class", "detail");
-  element7.append(element9);
+  element7.setAttribute("class", "detail");
   element5.append(element7);
-  element4.append(element5);
-  element.append(element4);
+  element3.append(element5);
+  element2.append(element3);
+  if (children.length > 0) {
+    for (const child of children) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, ""]);
+      element2.append(node);
+    }
+  } else {
+  }
+  element.append(element2);
+  const element8 = document.createElement("div");
+  element8.setAttribute("class", "empty");
+  if (slots["empty"] ?? [].length > 0) {
+    for (const child of slots["empty"] ?? []) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, "empty"]);
+      element8.append(node);
+    }
+  } else {
+  }
+  element.append(element8);
   manageComponentLifecycle(element, definition, { props: componentProps, projected,
     controller,
   });

package/vanilla/UiEditorMentionMenuItem.d.ts

@@ -0,0 +1,16 @@
+// Generated by HTML Next 1.0.0-alpha.7 for Vanilla DOM. Do not edit.
+export interface UiEditorMentionMenuItemEventMap {
+}
+export interface UiEditorMentionMenuItemElement extends HTMLLIElement {
+  addEventListener<K extends keyof UiEditorMentionMenuItemEventMap>(type: K, listener: (this: UiEditorMentionMenuItemElement, event: UiEditorMentionMenuItemEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiEditorMentionMenuItemEventMap>(type: K, listener: (this: UiEditorMentionMenuItemElement, event: UiEditorMentionMenuItemEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+}
+export interface UiEditorMentionMenuItemProps {
+  detail?: string | null;
+  initials?: string | null;
+  value?: string | null;
+  attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
+  children?: readonly (string | Node)[];
+  slots?: Readonly<Record<string, readonly (string | Node)[]>>;
+}
+export declare function createUiEditorMentionMenuItem(props?: UiEditorMentionMenuItemProps): UiEditorMentionMenuItemElement;

package/vanilla/UiEditorMentionMenuItem.js

@@ -0,0 +1,56 @@
+// Generated by HTML Next 1.0.0-alpha.7 for Vanilla DOM. Do not edit.
+import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
+import "../styles/ui-editor-mention-menu-item.css";
+
+const definition = {...{"contract":{"tag":"ui-editor-mention-menu-item","props":{"detail":{"type":"string","required":false,"target":{"attribute":"detail"},"default":""},"initials":{"type":"string","required":false,"target":{"attribute":"initials"},"default":""},"value":{"type":"string","required":false,"target":{"attribute":"data-value"},"default":""}}},"template":{"kind":"element","name":"li","attributes":[{"kind":"literal","name":"role","value":"option"},{"kind":"literal","name":"tabindex","value":"-1"},{"kind":"attribute","name":"data-value","expression":"value","expressionPlan":{"source":"value","ast":{"kind":"id","name":"value"},"dependencies":["value"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"avatar"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[{"kind":"slot","fallback":[{"kind":"element","name":"template","attributes":[{"kind":"directive","name":"value","expression":"initials","expressionPlan":{"source":"initials","ast":{"kind":"id","name":"initials"},"dependencies":["initials"]}}],"children":[]}],"name":"start"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"body"}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"label"}],"children":[{"kind":"slot"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"detail"},{"kind":"directive","name":"value","expression":"detail","expressionPlan":{"source":"detail","ast":{"kind":"id","name":"detail"},"dependencies":["detail"]}}],"children":[],"flow":{"kind":"if","test":"detail","testPlan":{"source":"detail","ast":{"kind":"id","name":"detail"},"dependencies":["detail"]}}}]}]},"declarations":[],"root":{"kind":"native","element":"li","choices":["li"]}},source:{file:import.meta.url},css:""};
+
+export function createUiEditorMentionMenuItem(options = {}) {
+  const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
+  const projected = [];
+  const element = document.createElement("li");
+  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", "option");
+  if (!element.hasAttribute("tabindex")) element.setAttribute("tabindex", "-1");
+  const value0 = componentProps["value"] === undefined ? "" : componentProps["value"];
+  if (value0 === null || value0 === undefined) element.removeAttribute("data-value");
+  else element.setAttribute("data-value", String(value0));
+  element.setAttribute("data-component", "ui-editor-mention-menu-item");
+  const element0 = document.createElement("span");
+  element0.setAttribute("class", "avatar");
+  element0.setAttribute("aria-hidden", "true");
+  if (slots["start"] ?? [].length > 0) {
+    for (const child of slots["start"] ?? []) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, "start"]);
+      element0.append(node);
+    }
+  } else {
+  const element1 = document.createElement("template");
+  element0.append(element1);
+  }
+  element.append(element0);
+  const element2 = document.createElement("span");
+  element2.setAttribute("class", "body");
+  const element3 = document.createElement("span");
+  element3.setAttribute("class", "label");
+  if (children.length > 0) {
+    for (const child of children) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, ""]);
+      element3.append(node);
+    }
+  } else {
+  }
+  element2.append(element3);
+  const element4 = document.createElement("span");
+  element4.setAttribute("class", "detail");
+  element2.append(element4);
+  element.append(element2);
+  manageComponentLifecycle(element, definition, { props: componentProps, projected,
+  });
+  return element;
+}
+

package/vanilla/UiEditorSlashMenu.d.ts

@@ -1,7 +1,7 @@
 // Generated by HTML Next 1.0.0-alpha.7 for Vanilla DOM. Do not edit.
 export interface UiEditorSlashMenuEventMap {
-  highlight: CustomEvent<{ readonly index: number }>;
-  select: CustomEvent<{ readonly index: number }>;
+  highlight: CustomEvent<{ readonly index: number; readonly value: string }>;
+  select: CustomEvent<{ readonly index: number; readonly value: string }>;
 }
 export interface UiEditorSlashMenuElement extends HTMLDivElement {
   addEventListener<K extends keyof UiEditorSlashMenuEventMap>(type: K, listener: (this: UiEditorSlashMenuElement, event: UiEditorSlashMenuEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
@@ -9,7 +9,8 @@ export interface UiEditorSlashMenuElement extends HTMLDivElement {
 }
 export interface UiEditorSlashMenuProps {
   anchorRect?: { readonly left?: number; readonly top?: number; readonly right?: number; readonly bottom?: number; readonly x?: number; readonly y?: number; readonly width?: number; readonly height?: number } | null;
-  items?: readonly ({ readonly title: string; readonly description: string; readonly icon: string })[] | null;
+  items?: readonly ({ readonly value?: string; readonly title: string; readonly description: string; readonly icon: string })[] | null;
+  label?: string | null;
   open?: boolean | null;
   query?: string | null;
   selectedIndex?: number | null;