@threadlabs/looma 0.6.0 → 0.6.2

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":"--ui-editor-table-grid-rows","expression":"rows","expressionPlan":{"source":"rows","ast":{"kind":"id","name":"rows"},"dependencies":["rows"]},"target":"style"},{"kind":"attribute","name":"--ui-editor-table-grid-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"]}}],"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:""};
 
 export function createUiEditorInsertTableGrid(options = {}) {
   const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;

package/vanilla/UiEditorTableContextMenu.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-editor-table-context-menu/ui-editor-table-context-menu.js";
 import "../styles/ui-editor-table-context-menu.css";
 
-const definition = {...{"contract":{"tag":"ui-editor-table-context-menu","props":{"actions":{"type":{"kind":"list","item":{"kind":"union","members":[{"kind":"keyword","value":"align-left"},{"kind":"keyword","value":"align-center"},{"kind":"keyword","value":"align-right"},{"kind":"keyword","value":"background-none"},{"kind":"keyword","value":"background-gray"},{"kind":"keyword","value":"background-yellow"},{"kind":"keyword","value":"background-blue"},{"kind":"keyword","value":"background-green"},{"kind":"keyword","value":"background-red"},{"kind":"keyword","value":"add-row-before"},{"kind":"keyword","value":"add-row-after"},{"kind":"keyword","value":"add-column-before"},{"kind":"keyword","value":"add-column-after"},{"kind":"keyword","value":"clear-cells"},{"kind":"keyword","value":"merge-cells"},{"kind":"keyword","value":"split-cell"},{"kind":"keyword","value":"delete-row"},{"kind":"keyword","value":"delete-column"},{"kind":"keyword","value":"delete-table"}]}},"required":false,"target":{"attribute":"actions"}},"cellBackground":{"type":"string","required":false,"target":{"attribute":"cellbackground"},"default":""},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"menu"},{"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":"section"},{"kind":"literal","name":"role","value":"none"}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"heading"},{"kind":"literal","name":"role","value":"presentation"}],"children":[{"kind":"text","value":"Cell background"}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"swatches"},{"kind":"literal","name":"role","value":"group"},{"kind":"literal","name":"aria-label","value":"Cell background"}],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"class","value":"swatch-button"},{"kind":"attribute","name":"selected","expression":"swatch.selected","expressionPlan":{"source":"swatch.selected","ast":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"selected"},"dependencies":["swatch.selected"]},"target":"class"},{"kind":"literal","name":"role","value":"menuitemradio"},{"kind":"attribute","name":"aria-checked","expression":"swatch.selected","expressionPlan":{"source":"swatch.selected","ast":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"selected"},"dependencies":["swatch.selected"]}},{"kind":"attribute","name":"data-action","expression":"swatch.action","expressionPlan":{"source":"swatch.action","ast":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"action"},"dependencies":["swatch.action"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"swatch"},{"kind":"attribute","name":"default","expression":"not swatch.color","expressionPlan":{"source":"not swatch.color","ast":{"kind":"unary","op":"not","operand":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"color"}},"dependencies":["swatch.color"]},"target":"class"},{"kind":"attribute","name":"--ui-editor-table-context-swatch","expression":"swatch.color","expressionPlan":{"source":"swatch.color","ast":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"color"},"dependencies":["swatch.color"]},"target":"style"}],"children":[]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"swatch-label"},{"kind":"directive","name":"value","expression":"swatch.label","expressionPlan":{"source":"swatch.label","ast":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"label"},"dependencies":["swatch.label"]}}],"children":[]}],"flow":{"kind":"each","item":"swatch","list":"swatches","listPlan":{"source":"swatches","ast":{"kind":"id","name":"swatches"},"dependencies":["swatches"]},"key":"swatch.action","keyPlan":{"source":"swatch.action","ast":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"action"},"dependencies":["swatch.action"]}}}]}],"flow":{"kind":"if","test":"swatches","testPlan":{"source":"swatches","ast":{"kind":"id","name":"swatches"},"dependencies":["swatches"]}}},{"kind":"element","name":"template","attributes":[],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"sep"}],"children":[]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"section"},{"kind":"literal","name":"role","value":"none"}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"heading"},{"kind":"literal","name":"role","value":"presentation"},{"kind":"directive","name":"value","expression":"section.heading","expressionPlan":{"source":"section.heading","ast":{"kind":"member","object":{"kind":"id","name":"section"},"key":"heading"},"dependencies":["section.heading"]}}],"children":[]},{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"role","value":"menuitem"},{"kind":"attribute","name":"danger","expression":"item.danger","expressionPlan":{"source":"item.danger","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"danger"},"dependencies":["item.danger"]},"target":"class"},{"kind":"attribute","name":"data-action","expression":"item.action","expressionPlan":{"source":"item.action","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"action"},"dependencies":["item.action"]}}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"attribute","name":"name","expression":"item.icon","expressionPlan":{"source":"item.icon","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"icon"},"dependencies":["item.icon"]}}],"children":[]},{"kind":"element","name":"span","attributes":[{"kind":"directive","name":"value","expression":"item.label","expressionPlan":{"source":"item.label","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"label"},"dependencies":["item.label"]}}],"children":[]}],"flow":{"kind":"each","item":"item","list":"section.items","listPlan":{"source":"section.items","ast":{"kind":"member","object":{"kind":"id","name":"section"},"key":"items"},"dependencies":["section.items"]},"key":"item.action","keyPlan":{"source":"item.action","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"action"},"dependencies":["item.action"]}}}]}],"flow":{"kind":"each","item":"section","list":"sections","listPlan":{"source":"sections","ast":{"kind":"id","name":"sections"},"dependencies":["sections"]},"key":"section.heading","keyPlan":{"source":"section.heading","ast":{"kind":"member","object":{"kind":"id","name":"section"},"key":"heading"},"dependencies":["section.heading"]}}}]},"declarations":[{"kind":"state","name":"swatches","type":"list(object({ action: string, label: string, color: string, selected: boolean })) | null","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"state","name":"sections","type":"list(object({ heading: string, items: list(object({ action: string, label: string, icon: string, danger: boolean })) }))","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"event","name":"action","type":"object({ 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 | clear-cells | merge-cells | split-cell | delete-row | delete-column | delete-table })","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-table-context-menu","props":{"actions":{"type":{"kind":"list","item":{"kind":"union","members":[{"kind":"keyword","value":"align-left"},{"kind":"keyword","value":"align-center"},{"kind":"keyword","value":"align-right"},{"kind":"keyword","value":"background-none"},{"kind":"keyword","value":"background-gray"},{"kind":"keyword","value":"background-yellow"},{"kind":"keyword","value":"background-blue"},{"kind":"keyword","value":"background-green"},{"kind":"keyword","value":"background-red"},{"kind":"keyword","value":"add-row-before"},{"kind":"keyword","value":"add-row-after"},{"kind":"keyword","value":"add-column-before"},{"kind":"keyword","value":"add-column-after"},{"kind":"keyword","value":"clear-cells"},{"kind":"keyword","value":"merge-cells"},{"kind":"keyword","value":"split-cell"},{"kind":"keyword","value":"delete-row"},{"kind":"keyword","value":"delete-column"},{"kind":"keyword","value":"delete-table"}]}},"required":false,"target":{"attribute":"actions"}},"cellBackground":{"type":"string","required":false,"target":{"attribute":"cellbackground"},"default":""},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"menu"},{"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":"section"},{"kind":"literal","name":"role","value":"none"}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"heading"},{"kind":"literal","name":"role","value":"presentation"}],"children":[{"kind":"text","value":"Cell background"}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"swatches"},{"kind":"literal","name":"role","value":"group"},{"kind":"literal","name":"aria-label","value":"Cell background"}],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"class","value":"swatch-button"},{"kind":"attribute","name":"selected","expression":"swatch.selected","expressionPlan":{"source":"swatch.selected","ast":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"selected"},"dependencies":["swatch.selected"]},"target":"class"},{"kind":"literal","name":"role","value":"menuitemradio"},{"kind":"attribute","name":"aria-checked","expression":"swatch.selected","expressionPlan":{"source":"swatch.selected","ast":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"selected"},"dependencies":["swatch.selected"]}},{"kind":"attribute","name":"data-action","expression":"swatch.action","expressionPlan":{"source":"swatch.action","ast":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"action"},"dependencies":["swatch.action"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"swatch"},{"kind":"attribute","name":"default","expression":"not swatch.color","expressionPlan":{"source":"not swatch.color","ast":{"kind":"unary","op":"not","operand":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"color"}},"dependencies":["swatch.color"]},"target":"class"},{"kind":"attribute","name":"--_swatch","expression":"swatch.color","expressionPlan":{"source":"swatch.color","ast":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"color"},"dependencies":["swatch.color"]},"target":"style"}],"children":[]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"swatch-label"},{"kind":"directive","name":"value","expression":"swatch.label","expressionPlan":{"source":"swatch.label","ast":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"label"},"dependencies":["swatch.label"]}}],"children":[]}],"flow":{"kind":"each","item":"swatch","list":"swatches","listPlan":{"source":"swatches","ast":{"kind":"id","name":"swatches"},"dependencies":["swatches"]},"key":"swatch.action","keyPlan":{"source":"swatch.action","ast":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"action"},"dependencies":["swatch.action"]}}}]}],"flow":{"kind":"if","test":"swatches","testPlan":{"source":"swatches","ast":{"kind":"id","name":"swatches"},"dependencies":["swatches"]}}},{"kind":"element","name":"template","attributes":[],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"sep"}],"children":[]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"section"},{"kind":"literal","name":"role","value":"none"}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"heading"},{"kind":"literal","name":"role","value":"presentation"},{"kind":"directive","name":"value","expression":"section.heading","expressionPlan":{"source":"section.heading","ast":{"kind":"member","object":{"kind":"id","name":"section"},"key":"heading"},"dependencies":["section.heading"]}}],"children":[]},{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"role","value":"menuitem"},{"kind":"attribute","name":"danger","expression":"item.danger","expressionPlan":{"source":"item.danger","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"danger"},"dependencies":["item.danger"]},"target":"class"},{"kind":"attribute","name":"data-action","expression":"item.action","expressionPlan":{"source":"item.action","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"action"},"dependencies":["item.action"]}}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"attribute","name":"name","expression":"item.icon","expressionPlan":{"source":"item.icon","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"icon"},"dependencies":["item.icon"]}}],"children":[]},{"kind":"element","name":"span","attributes":[{"kind":"directive","name":"value","expression":"item.label","expressionPlan":{"source":"item.label","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"label"},"dependencies":["item.label"]}}],"children":[]}],"flow":{"kind":"each","item":"item","list":"section.items","listPlan":{"source":"section.items","ast":{"kind":"member","object":{"kind":"id","name":"section"},"key":"items"},"dependencies":["section.items"]},"key":"item.action","keyPlan":{"source":"item.action","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"action"},"dependencies":["item.action"]}}}]}],"flow":{"kind":"each","item":"section","list":"sections","listPlan":{"source":"sections","ast":{"kind":"id","name":"sections"},"dependencies":["sections"]},"key":"section.heading","keyPlan":{"source":"section.heading","ast":{"kind":"member","object":{"kind":"id","name":"section"},"key":"heading"},"dependencies":["section.heading"]}}}]},"declarations":[{"kind":"state","name":"swatches","type":"list(object({ action: string, label: string, color: string, selected: boolean })) | null","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"state","name":"sections","type":"list(object({ heading: string, items: list(object({ action: string, label: string, icon: string, danger: boolean })) }))","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"event","name":"action","type":"object({ 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 | clear-cells | merge-cells | split-cell | delete-row | delete-column | delete-table })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
 
 export function createUiEditorTableContextMenu(options = {}) {
   const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;

package/vanilla/UiEditorTableToolbar.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-editor-table-toolbar/ui-editor-table-toolbar.js";
 import "../styles/ui-editor-table-toolbar.css";
 
-const definition = {...{"contract":{"tag":"ui-editor-table-toolbar","props":{"actions":{"type":{"kind":"list","item":{"kind":"union","members":[{"kind":"keyword","value":"align-left"},{"kind":"keyword","value":"align-center"},{"kind":"keyword","value":"align-right"},{"kind":"keyword","value":"background-none"},{"kind":"keyword","value":"background-gray"},{"kind":"keyword","value":"background-yellow"},{"kind":"keyword","value":"background-blue"},{"kind":"keyword","value":"background-green"},{"kind":"keyword","value":"background-red"},{"kind":"keyword","value":"add-row-before"},{"kind":"keyword","value":"add-row-after"},{"kind":"keyword","value":"add-column-before"},{"kind":"keyword","value":"add-column-after"},{"kind":"keyword","value":"clear-cells"},{"kind":"keyword","value":"merge-cells"},{"kind":"keyword","value":"split-cell"},{"kind":"keyword","value":"delete-row"},{"kind":"keyword","value":"delete-column"},{"kind":"keyword","value":"delete-table"}]}},"required":false,"target":{"attribute":"actions"}},"cellAlignment":{"type":{"enum":["left","center","right"]},"required":false,"target":{"attribute":"cellalignment"},"default":"left"},"cellBackground":{"type":"string","required":false,"target":{"attribute":"cellbackground"},"default":""},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"toolbar"},{"kind":"literal","name":"aria-label","value":"Table actions"},{"kind":"attribute","name":"hidden","expression":"not open","expressionPlan":{"source":"not open","ast":{"kind":"unary","op":"not","operand":{"kind":"id","name":"open"}},"dependencies":["open"]}}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"group"},{"kind":"literal","name":"role","value":"group"},{"kind":"literal","name":"aria-label","value":"Cell alignment"}],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"class","value":"icon-button"},{"kind":"attribute","name":"active","expression":"item.active","expressionPlan":{"source":"item.active","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"active"},"dependencies":["item.active"]},"target":"class"},{"kind":"attribute","name":"data-action","expression":"item.action","expressionPlan":{"source":"item.action","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"action"},"dependencies":["item.action"]}},{"kind":"attribute","name":"aria-label","expression":"item.label","expressionPlan":{"source":"item.label","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"label"},"dependencies":["item.label"]}},{"kind":"attribute","name":"title","expression":"item.label","expressionPlan":{"source":"item.label","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"label"},"dependencies":["item.label"]}},{"kind":"attribute","name":"aria-pressed","expression":"item.active","expressionPlan":{"source":"item.active","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"active"},"dependencies":["item.active"]}}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"attribute","name":"name","expression":"item.action","expressionPlan":{"source":"item.action","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"action"},"dependencies":["item.action"]}}],"children":[]}],"flow":{"kind":"each","item":"item","list":"alignments","listPlan":{"source":"alignments","ast":{"kind":"id","name":"alignments"},"dependencies":["alignments"]},"key":"item.action","keyPlan":{"source":"item.action","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"action"},"dependencies":["item.action"]}}}],"flow":{"kind":"if","test":"alignments","testPlan":{"source":"alignments","ast":{"kind":"id","name":"alignments"},"dependencies":["alignments"]}}},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"sep"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[],"flow":{"kind":"if","test":"alignments and structure","testPlan":{"source":"alignments and structure","ast":{"kind":"binary","op":"and","left":{"kind":"id","name":"alignments"},"right":{"kind":"id","name":"structure"}},"dependencies":["alignments","structure"]}}},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"group"},{"kind":"literal","name":"role","value":"group"},{"kind":"literal","name":"aria-label","value":"Table structure"}],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"attribute","name":"data-action","expression":"item.action","expressionPlan":{"source":"item.action","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"action"},"dependencies":["item.action"]}}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"attribute","name":"name","expression":"item.icon","expressionPlan":{"source":"item.icon","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"icon"},"dependencies":["item.icon"]}}],"children":[]},{"kind":"element","name":"span","attributes":[{"kind":"directive","name":"value","expression":"item.label","expressionPlan":{"source":"item.label","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"label"},"dependencies":["item.label"]}}],"children":[]}],"flow":{"kind":"each","item":"item","list":"structure","listPlan":{"source":"structure","ast":{"kind":"id","name":"structure"},"dependencies":["structure"]},"key":"item.action","keyPlan":{"source":"item.action","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"action"},"dependencies":["item.action"]}}}],"flow":{"kind":"if","test":"structure","testPlan":{"source":"structure","ast":{"kind":"id","name":"structure"},"dependencies":["structure"]}}},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"sep"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[],"flow":{"kind":"if","test":"(alignments or structure) and hasOverflow","testPlan":{"source":"(alignments or structure) and hasOverflow","ast":{"kind":"binary","op":"and","left":{"kind":"binary","op":"or","left":{"kind":"id","name":"alignments"},"right":{"kind":"id","name":"structure"}},"right":{"kind":"id","name":"hasOverflow"}},"dependencies":["alignments","hasOverflow","structure"]}}},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"overflow"}],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"class","value":"more"},{"kind":"literal","name":"data-action","value":"toggle-overflow"},{"kind":"literal","name":"aria-haspopup","value":"menu"},{"kind":"attribute","name":"aria-expanded","expression":"overflowOpen","expressionPlan":{"source":"overflowOpen","ast":{"kind":"id","name":"overflowOpen"},"dependencies":["overflowOpen"]}}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"literal","name":"name","value":"table"}],"children":[]},{"kind":"element","name":"span","attributes":[],"children":[{"kind":"text","value":"Table options"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"chevron"}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"literal","name":"name","value":"chevron-down"}],"children":[]}]}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"menu"},{"kind":"literal","name":"role","value":"menu"},{"kind":"literal","name":"aria-label","value":"More table actions"}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"menu-section"},{"kind":"literal","name":"role","value":"none"}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"menu-heading"},{"kind":"literal","name":"role","value":"presentation"}],"children":[{"kind":"text","value":"Background"}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"swatches"},{"kind":"literal","name":"role","value":"group"},{"kind":"literal","name":"aria-label","value":"Cell background"}],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"class","value":"swatch-button"},{"kind":"attribute","name":"selected","expression":"swatch.selected","expressionPlan":{"source":"swatch.selected","ast":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"selected"},"dependencies":["swatch.selected"]},"target":"class"},{"kind":"literal","name":"role","value":"menuitemradio"},{"kind":"attribute","name":"aria-checked","expression":"swatch.selected","expressionPlan":{"source":"swatch.selected","ast":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"selected"},"dependencies":["swatch.selected"]}},{"kind":"attribute","name":"data-action","expression":"swatch.action","expressionPlan":{"source":"swatch.action","ast":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"action"},"dependencies":["swatch.action"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"swatch"},{"kind":"attribute","name":"default","expression":"not swatch.color","expressionPlan":{"source":"not swatch.color","ast":{"kind":"unary","op":"not","operand":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"color"}},"dependencies":["swatch.color"]},"target":"class"},{"kind":"attribute","name":"--ui-editor-table-toolbar-swatch","expression":"swatch.color","expressionPlan":{"source":"swatch.color","ast":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"color"},"dependencies":["swatch.color"]},"target":"style"}],"children":[]},{"kind":"element","name":"span","attributes":[{"kind":"directive","name":"value","expression":"swatch.label","expressionPlan":{"source":"swatch.label","ast":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"label"},"dependencies":["swatch.label"]}}],"children":[]}],"flow":{"kind":"each","item":"swatch","list":"swatches","listPlan":{"source":"swatches","ast":{"kind":"id","name":"swatches"},"dependencies":["swatches"]},"key":"swatch.action","keyPlan":{"source":"swatch.action","ast":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"action"},"dependencies":["swatch.action"]}}}]}],"flow":{"kind":"if","test":"swatches","testPlan":{"source":"swatches","ast":{"kind":"id","name":"swatches"},"dependencies":["swatches"]}}},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"menu-section divided"},{"kind":"literal","name":"role","value":"none"}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"menu-heading"},{"kind":"literal","name":"role","value":"presentation"},{"kind":"directive","name":"value","expression":"section.heading","expressionPlan":{"source":"section.heading","ast":{"kind":"member","object":{"kind":"id","name":"section"},"key":"heading"},"dependencies":["section.heading"]}}],"children":[]},{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"role","value":"menuitem"},{"kind":"attribute","name":"danger","expression":"item.danger","expressionPlan":{"source":"item.danger","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"danger"},"dependencies":["item.danger"]},"target":"class"},{"kind":"attribute","name":"data-action","expression":"item.action","expressionPlan":{"source":"item.action","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"action"},"dependencies":["item.action"]}}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"attribute","name":"name","expression":"item.icon","expressionPlan":{"source":"item.icon","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"icon"},"dependencies":["item.icon"]}}],"children":[]},{"kind":"element","name":"span","attributes":[{"kind":"directive","name":"value","expression":"item.label","expressionPlan":{"source":"item.label","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"label"},"dependencies":["item.label"]}}],"children":[]}],"flow":{"kind":"each","item":"item","list":"section.items","listPlan":{"source":"section.items","ast":{"kind":"member","object":{"kind":"id","name":"section"},"key":"items"},"dependencies":["section.items"]},"key":"item.action","keyPlan":{"source":"item.action","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"action"},"dependencies":["item.action"]}}}],"flow":{"kind":"each","item":"section","list":"sections","listPlan":{"source":"sections","ast":{"kind":"id","name":"sections"},"dependencies":["sections"]},"key":"section.heading","keyPlan":{"source":"section.heading","ast":{"kind":"member","object":{"kind":"id","name":"section"},"key":"heading"},"dependencies":["section.heading"]}}}],"flow":{"kind":"if","test":"overflowOpen","testPlan":{"source":"overflowOpen","ast":{"kind":"id","name":"overflowOpen"},"dependencies":["overflowOpen"]}}}],"flow":{"kind":"if","test":"hasOverflow","testPlan":{"source":"hasOverflow","ast":{"kind":"id","name":"hasOverflow"},"dependencies":["hasOverflow"]}}}]},"declarations":[{"kind":"state","name":"alignments","type":"list(object({ action: align-left | align-center | align-right, label: string, active: boolean }))","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"state","name":"structure","type":"list(object({ action: add-row-after | add-column-after, label: string, icon: string }))","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"state","name":"swatches","type":"list(object({ action: string, label: string, color: string, selected: boolean }))","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"state","name":"sections","type":"list(object({ heading: string, items: list(object({ action: string, label: string, icon: string, danger: boolean })) }))","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"state","name":"hasOverflow","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"overflowOpen","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"action","type":"object({ 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 | clear-cells | merge-cells | split-cell | delete-row | delete-column | delete-table })","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-table-toolbar","props":{"actions":{"type":{"kind":"list","item":{"kind":"union","members":[{"kind":"keyword","value":"align-left"},{"kind":"keyword","value":"align-center"},{"kind":"keyword","value":"align-right"},{"kind":"keyword","value":"background-none"},{"kind":"keyword","value":"background-gray"},{"kind":"keyword","value":"background-yellow"},{"kind":"keyword","value":"background-blue"},{"kind":"keyword","value":"background-green"},{"kind":"keyword","value":"background-red"},{"kind":"keyword","value":"add-row-before"},{"kind":"keyword","value":"add-row-after"},{"kind":"keyword","value":"add-column-before"},{"kind":"keyword","value":"add-column-after"},{"kind":"keyword","value":"clear-cells"},{"kind":"keyword","value":"merge-cells"},{"kind":"keyword","value":"split-cell"},{"kind":"keyword","value":"delete-row"},{"kind":"keyword","value":"delete-column"},{"kind":"keyword","value":"delete-table"}]}},"required":false,"target":{"attribute":"actions"}},"cellAlignment":{"type":{"enum":["left","center","right"]},"required":false,"target":{"attribute":"cellalignment"},"default":"left"},"cellBackground":{"type":"string","required":false,"target":{"attribute":"cellbackground"},"default":""},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"toolbar"},{"kind":"literal","name":"aria-label","value":"Table actions"},{"kind":"attribute","name":"hidden","expression":"not open","expressionPlan":{"source":"not open","ast":{"kind":"unary","op":"not","operand":{"kind":"id","name":"open"}},"dependencies":["open"]}}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"group"},{"kind":"literal","name":"role","value":"group"},{"kind":"literal","name":"aria-label","value":"Cell alignment"}],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"class","value":"icon-button"},{"kind":"attribute","name":"active","expression":"item.active","expressionPlan":{"source":"item.active","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"active"},"dependencies":["item.active"]},"target":"class"},{"kind":"attribute","name":"data-action","expression":"item.action","expressionPlan":{"source":"item.action","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"action"},"dependencies":["item.action"]}},{"kind":"attribute","name":"aria-label","expression":"item.label","expressionPlan":{"source":"item.label","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"label"},"dependencies":["item.label"]}},{"kind":"attribute","name":"title","expression":"item.label","expressionPlan":{"source":"item.label","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"label"},"dependencies":["item.label"]}},{"kind":"attribute","name":"aria-pressed","expression":"item.active","expressionPlan":{"source":"item.active","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"active"},"dependencies":["item.active"]}}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"attribute","name":"name","expression":"item.action","expressionPlan":{"source":"item.action","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"action"},"dependencies":["item.action"]}}],"children":[]}],"flow":{"kind":"each","item":"item","list":"alignments","listPlan":{"source":"alignments","ast":{"kind":"id","name":"alignments"},"dependencies":["alignments"]},"key":"item.action","keyPlan":{"source":"item.action","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"action"},"dependencies":["item.action"]}}}],"flow":{"kind":"if","test":"alignments","testPlan":{"source":"alignments","ast":{"kind":"id","name":"alignments"},"dependencies":["alignments"]}}},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"sep"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[],"flow":{"kind":"if","test":"alignments and structure","testPlan":{"source":"alignments and structure","ast":{"kind":"binary","op":"and","left":{"kind":"id","name":"alignments"},"right":{"kind":"id","name":"structure"}},"dependencies":["alignments","structure"]}}},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"group"},{"kind":"literal","name":"role","value":"group"},{"kind":"literal","name":"aria-label","value":"Table structure"}],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"attribute","name":"data-action","expression":"item.action","expressionPlan":{"source":"item.action","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"action"},"dependencies":["item.action"]}}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"attribute","name":"name","expression":"item.icon","expressionPlan":{"source":"item.icon","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"icon"},"dependencies":["item.icon"]}}],"children":[]},{"kind":"element","name":"span","attributes":[{"kind":"directive","name":"value","expression":"item.label","expressionPlan":{"source":"item.label","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"label"},"dependencies":["item.label"]}}],"children":[]}],"flow":{"kind":"each","item":"item","list":"structure","listPlan":{"source":"structure","ast":{"kind":"id","name":"structure"},"dependencies":["structure"]},"key":"item.action","keyPlan":{"source":"item.action","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"action"},"dependencies":["item.action"]}}}],"flow":{"kind":"if","test":"structure","testPlan":{"source":"structure","ast":{"kind":"id","name":"structure"},"dependencies":["structure"]}}},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"sep"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[],"flow":{"kind":"if","test":"(alignments or structure) and hasOverflow","testPlan":{"source":"(alignments or structure) and hasOverflow","ast":{"kind":"binary","op":"and","left":{"kind":"binary","op":"or","left":{"kind":"id","name":"alignments"},"right":{"kind":"id","name":"structure"}},"right":{"kind":"id","name":"hasOverflow"}},"dependencies":["alignments","hasOverflow","structure"]}}},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"overflow"}],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"class","value":"more"},{"kind":"literal","name":"data-action","value":"toggle-overflow"},{"kind":"literal","name":"aria-haspopup","value":"menu"},{"kind":"attribute","name":"aria-expanded","expression":"overflowOpen","expressionPlan":{"source":"overflowOpen","ast":{"kind":"id","name":"overflowOpen"},"dependencies":["overflowOpen"]}}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"literal","name":"name","value":"table"}],"children":[]},{"kind":"element","name":"span","attributes":[],"children":[{"kind":"text","value":"Table options"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"chevron"}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"literal","name":"name","value":"chevron-down"}],"children":[]}]}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"menu"},{"kind":"literal","name":"role","value":"menu"},{"kind":"literal","name":"aria-label","value":"More table actions"}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"menu-section"},{"kind":"literal","name":"role","value":"none"}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"menu-heading"},{"kind":"literal","name":"role","value":"presentation"}],"children":[{"kind":"text","value":"Background"}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"swatches"},{"kind":"literal","name":"role","value":"group"},{"kind":"literal","name":"aria-label","value":"Cell background"}],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"class","value":"swatch-button"},{"kind":"attribute","name":"selected","expression":"swatch.selected","expressionPlan":{"source":"swatch.selected","ast":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"selected"},"dependencies":["swatch.selected"]},"target":"class"},{"kind":"literal","name":"role","value":"menuitemradio"},{"kind":"attribute","name":"aria-checked","expression":"swatch.selected","expressionPlan":{"source":"swatch.selected","ast":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"selected"},"dependencies":["swatch.selected"]}},{"kind":"attribute","name":"data-action","expression":"swatch.action","expressionPlan":{"source":"swatch.action","ast":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"action"},"dependencies":["swatch.action"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"swatch"},{"kind":"attribute","name":"default","expression":"not swatch.color","expressionPlan":{"source":"not swatch.color","ast":{"kind":"unary","op":"not","operand":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"color"}},"dependencies":["swatch.color"]},"target":"class"},{"kind":"attribute","name":"--_swatch","expression":"swatch.color","expressionPlan":{"source":"swatch.color","ast":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"color"},"dependencies":["swatch.color"]},"target":"style"}],"children":[]},{"kind":"element","name":"span","attributes":[{"kind":"directive","name":"value","expression":"swatch.label","expressionPlan":{"source":"swatch.label","ast":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"label"},"dependencies":["swatch.label"]}}],"children":[]}],"flow":{"kind":"each","item":"swatch","list":"swatches","listPlan":{"source":"swatches","ast":{"kind":"id","name":"swatches"},"dependencies":["swatches"]},"key":"swatch.action","keyPlan":{"source":"swatch.action","ast":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"action"},"dependencies":["swatch.action"]}}}]}],"flow":{"kind":"if","test":"swatches","testPlan":{"source":"swatches","ast":{"kind":"id","name":"swatches"},"dependencies":["swatches"]}}},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"menu-section divided"},{"kind":"literal","name":"role","value":"none"}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"menu-heading"},{"kind":"literal","name":"role","value":"presentation"},{"kind":"directive","name":"value","expression":"section.heading","expressionPlan":{"source":"section.heading","ast":{"kind":"member","object":{"kind":"id","name":"section"},"key":"heading"},"dependencies":["section.heading"]}}],"children":[]},{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"role","value":"menuitem"},{"kind":"attribute","name":"danger","expression":"item.danger","expressionPlan":{"source":"item.danger","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"danger"},"dependencies":["item.danger"]},"target":"class"},{"kind":"attribute","name":"data-action","expression":"item.action","expressionPlan":{"source":"item.action","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"action"},"dependencies":["item.action"]}}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"attribute","name":"name","expression":"item.icon","expressionPlan":{"source":"item.icon","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"icon"},"dependencies":["item.icon"]}}],"children":[]},{"kind":"element","name":"span","attributes":[{"kind":"directive","name":"value","expression":"item.label","expressionPlan":{"source":"item.label","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"label"},"dependencies":["item.label"]}}],"children":[]}],"flow":{"kind":"each","item":"item","list":"section.items","listPlan":{"source":"section.items","ast":{"kind":"member","object":{"kind":"id","name":"section"},"key":"items"},"dependencies":["section.items"]},"key":"item.action","keyPlan":{"source":"item.action","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"action"},"dependencies":["item.action"]}}}],"flow":{"kind":"each","item":"section","list":"sections","listPlan":{"source":"sections","ast":{"kind":"id","name":"sections"},"dependencies":["sections"]},"key":"section.heading","keyPlan":{"source":"section.heading","ast":{"kind":"member","object":{"kind":"id","name":"section"},"key":"heading"},"dependencies":["section.heading"]}}}],"flow":{"kind":"if","test":"overflowOpen","testPlan":{"source":"overflowOpen","ast":{"kind":"id","name":"overflowOpen"},"dependencies":["overflowOpen"]}}}],"flow":{"kind":"if","test":"hasOverflow","testPlan":{"source":"hasOverflow","ast":{"kind":"id","name":"hasOverflow"},"dependencies":["hasOverflow"]}}}]},"declarations":[{"kind":"state","name":"alignments","type":"list(object({ action: align-left | align-center | align-right, label: string, active: boolean }))","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"state","name":"structure","type":"list(object({ action: add-row-after | add-column-after, label: string, icon: string }))","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"state","name":"swatches","type":"list(object({ action: string, label: string, color: string, selected: boolean }))","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"state","name":"sections","type":"list(object({ heading: string, items: list(object({ action: string, label: string, icon: string, danger: boolean })) }))","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"state","name":"hasOverflow","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"overflowOpen","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"action","type":"object({ 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 | clear-cells | merge-cells | split-cell | delete-row | delete-column | delete-table })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
 
 export function createUiEditorTableToolbar(options = {}) {
   const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;

package/vanilla/UiTooltip.d.ts

@@ -14,6 +14,7 @@ export interface UiTooltipProps {
   open?: boolean | null;
   placement?: string | null;
   showDelay?: number | null;
+  trigger?: "hover" | "click" | "focus" | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];
   slots?: Readonly<Record<string, readonly (string | Node)[]>>;

package/vanilla/UiTooltip.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-tooltip/ui-tooltip.js";
 import "../styles/ui-tooltip.css";
 
-const definition = {...{"contract":{"tag":"ui-tooltip","props":{"for":{"type":"string","required":false,"target":{"attribute":"for"},"default":""},"hideDelay":{"type":"number","required":false,"target":{"attribute":"hidedelay"},"default":100},"inverse":{"type":"boolean","required":false,"target":{"attribute":"inverse"},"default":false},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false},"placement":{"type":"string","required":false,"target":{"attribute":"placement"},"default":"top-start"},"showDelay":{"type":"number","required":false,"target":{"attribute":"showdelay"},"default":500}}},"template":{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"role","value":"tooltip"},{"kind":"attribute","name":"hidden","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":"surface"}],"children":[{"kind":"slot"}]}]},"declarations":[{"kind":"state","name":"internalOpen","expression":{"source":"false","ast":{"kind":"literal","value":false},"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":"span","choices":["span"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-tooltip","props":{"for":{"type":"string","required":false,"target":{"attribute":"for"},"default":""},"hideDelay":{"type":"number","required":false,"target":{"attribute":"hidedelay"},"default":100},"inverse":{"type":"boolean","required":false,"target":{"attribute":"inverse"},"default":false},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false},"placement":{"type":"string","required":false,"target":{"attribute":"placement"},"default":"top-start"},"showDelay":{"type":"number","required":false,"target":{"attribute":"showdelay"},"default":500},"trigger":{"type":{"enum":["hover","click","focus"]},"required":false,"target":{"attribute":"trigger"},"default":"hover"}}},"template":{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"role","value":"tooltip"},{"kind":"attribute","name":"hidden","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":"surface"}],"children":[{"kind":"slot"}]}]},"declarations":[{"kind":"state","name":"internalOpen","expression":{"source":"false","ast":{"kind":"literal","value":false},"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":"span","choices":["span"]}},source:{file:import.meta.url},css:""};
 
 export function createUiTooltip(options = {}) {
   const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;

package/vue/UiAvatar.vue

@@ -181,6 +181,19 @@ onBeforeUnmount(() => {
   block-size: 100%;
 }
 
+/* Centre the glyphs, not the line box: a label without descenders otherwise reads high. */
+/* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
+ * Trimming applies to block containers, so the box is a block with centred content. */
+@supports (text-box-trim: trim-both) {
+  .fallback {
+    display: block;
+    text-align: center;
+    align-content: center;
+    text-box-trim: trim-both;
+    text-box-edge: cap alphabetic;
+  }
+}
+
 [hidden] {
   display: none;
 }

package/vue/UiAvatarGroup.vue

@@ -134,6 +134,11 @@ onBeforeUnmount(() => {
 
 <style scoped>
 [data-component~="ui-avatar-group"] {
+  /* Avatars separate with a tight, crisp edge, matching Looma's 1px borders rather than the
+   * diffuse elevation overlays use. */
+  --_overlap-shadow: -2px 0 2px -1px rgba(0, 0, 0, 0.22);
+  --_edge-ring: 0 0 0 1px rgba(0, 0, 0, 0.08);
+
   display: flex;
   align-items: center;
   flex-direction: row;
@@ -164,8 +169,8 @@ onBeforeUnmount(() => {
   background: var(--ui-surface-elevated);
   color: var(--ui-text-primary);
   box-shadow:
-    var(--ui-avatar-group-overlap-shadow, -2px 0 5px -1px rgb(0 0 0 / 0.28)),
-    0 0 0 1px rgb(0 0 0 / 0.06);
+    var(--ui-avatar-group-overlap-shadow, var(--_overlap-shadow)),
+    var(--ui-avatar-group-edge-ring, var(--_edge-ring));
   font: inherit;
   font-size: 0.75rem;
   font-weight: 600;

package/vue/UiBadge.vue

@@ -55,6 +55,20 @@ const hostState = computed(() =>
   white-space: nowrap;
 }
 
+/* Centre the glyphs, not the line box: a label without descenders otherwise reads high. */
+/* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
+ * Trimming applies to block containers, so the box is a block with centred content. */
+@supports (text-box-trim: trim-both) {
+  [data-component~="ui-badge"] {
+    display: block;
+    min-block-size: var(--ui-badge-min-block-size, 1.5rem);
+    text-align: center;
+    align-content: center;
+    text-box-trim: trim-both;
+    text-box-edge: cap alphabetic;
+  }
+}
+
 [data-component~="ui-badge"][data-ui-badge-state~="tone=accent"] {
   --_badge-surface: var(--ui-accent-strong-surface, var(--ui-accent-solid));
   --_badge-border: var(--ui-accent-strong-surface, var(--ui-accent-solid));

package/vue/UiCluster.vue

@@ -30,7 +30,7 @@ const hostState = computed(() =>
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: var(--ui-layout-gap, var(--_layout-gap));
+  gap: var(--ui-cluster-gap, var(--_layout-gap));
   min-inline-size: 0;
   max-inline-size: 100%;
   margin: 0;

package/vue/UiCombobox.vue

@@ -184,6 +184,9 @@ const inputElement = useTemplateRef<HTMLElement>('input')
 const popupElement = useTemplateRef<HTMLElement>('popup')
 const listboxElement = useTemplateRef<HTMLElement>('listbox')
 const optionsElement = useTemplateRef<HTMLElement>('options')
+const internalItems = ref<
+  { id: string; value: string; label: string; group?: string; disabled?: boolean }[]
+>([])
 const raw = ref('')
 const display = ref('')
 const selected = ref<string | null>(null)
@@ -525,6 +528,7 @@ function dispatch(name: string, detail?: unknown): boolean {
 }
 
 function read(name: string): unknown {
+  if (name === 'internalItems') return internalItems.value
   if (name === 'raw') return raw.value
   if (name === 'display') return display.value
   if (name === 'selected') return selected.value
@@ -546,6 +550,10 @@ function read(name: string): unknown {
 }
 
 function write(name: string, value: unknown): boolean {
+  if (name === 'internalItems') {
+    internalItems.value = value as never
+    return true
+  }
   if (name === 'raw') {
     raw.value = value as never
     return true
@@ -727,76 +735,100 @@ defineExpose({
     <label :for="`${uid}-input`" :class="{ 'sr-only': labelVisibility === 'sr-only' }">{{ label }}
       <template v-if="required">
         *</template></label>
-    <div class="field" ref="field">
-      <slot name="start" />
-      <template v-if="multiple"><button
-          v-for="(item, index) in items"
-          :key="item.id"
-          class="item"
+    <div class="control">
+      <div class="field" ref="field">
+        <slot name="start" />
+        <template v-if="multiple"><button
+            v-for="(item, index) in internalItems"
+            :key="item.id"
+            class="item"
+            type="button"
+            tabindex="-1"
+            :data-index="index"
+            :disabled="disabled || readonly || item.disabled"
+            :aria-label="`${item.label}, press Delete or Backspace to remove`"
+          >
+            <slot :name="`item-${item.id}`"><UiBadge>{{ item.label }}</UiBadge></slot>
+          </button></template>
+        <input
+          role="combobox"
+          aria-autocomplete="list"
+          autocomplete="off"
+          :id="`${uid}-input`"
+          :aria-controls="`${uid}-listbox`"
+          :aria-expanded="expanded"
+          :aria-invalid="validationStatus === 'error'"
+          :aria-busy="validationStatus === 'pending'"
+          :value.prop="display"
+          :placeholder="placeholder"
+          :name="name"
+          :disabled="disabled"
+          :readonly="readonly"
+          :required="required"
+          ref="input"
+        >
+        <button v-if="clearable" type="button" data-combobox-action="clear" aria-label="Clear">
+          <svg
+            class="affordance-icon"
+            aria-hidden="true"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+          >
+            <path d="M7 7l10 10M17 7 7 17"></path>
+          </svg>
+        </button>
+        <button
+          v-if="disclosure"
           type="button"
+          data-combobox-action="disclosure"
           tabindex="-1"
-          :data-index="index"
-          :disabled="disabled || readonly || item.disabled"
-          :aria-label="`${item.label}, press Delete or Backspace to remove`"
+          aria-label="Show suggestions"
+          :aria-controls="`${uid}-listbox`"
         >
-          <slot :name="`item-${item.id}`"><UiBadge>{{ item.label }}</UiBadge></slot>
-        </button></template>
-      <input
-        role="combobox"
-        aria-autocomplete="list"
-        autocomplete="off"
-        :id="`${uid}-input`"
-        :aria-controls="`${uid}-listbox`"
-        :aria-expanded="expanded"
-        :aria-invalid="validationStatus === 'error'"
-        :aria-busy="validationStatus === 'pending'"
-        :value.prop="display"
-        :placeholder="placeholder"
-        :name="name"
-        :disabled="disabled"
-        :readonly="readonly"
-        :required="required"
-        ref="input"
-      >
-      <button v-if="clearable" type="button" data-combobox-action="clear" aria-label="Clear">
-        <svg
-          class="affordance-icon"
-          aria-hidden="true"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-        >
-          <path d="M7 7l10 10M17 7 7 17"></path>
-        </svg>
-      </button>
-      <button v-if="help" type="button" aria-label="Help" :id="`${uid}-help`" :disabled="disabled">
-        <span aria-hidden="true">?</span>
-      </button>
+          <svg
+            class="affordance-icon"
+            aria-hidden="true"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2.25"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="m6 9 6 6 6-6"></path>
+          </svg>
+        </button>
+      </div>
       <button
-        v-if="disclosure"
+        v-if="help"
+        class="help"
         type="button"
-        data-combobox-action="disclosure"
-        tabindex="-1"
-        aria-label="Show suggestions"
-        :aria-controls="`${uid}-listbox`"
+        aria-label="Help"
+        :id="`${uid}-help`"
+        :disabled="disabled"
       >
         <svg
-          class="affordance-icon"
+          class="help-icon"
           aria-hidden="true"
           viewBox="0 0 24 24"
           fill="none"
           stroke="currentColor"
-          stroke-width="2.25"
+          stroke-width="2"
           stroke-linecap="round"
           stroke-linejoin="round"
         >
-          <path d="m6 9 6 6 6-6"></path>
+          <circle cx="12" cy="12" r="10"></circle>
+          <path d="M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3"></path>
+          <path d="M12 17h.01"></path>
         </svg>
       </button>
     </div>
-    <UiTooltip v-if="help" :id="`${uid}-help-text`" :for="`${uid}-help`">{{ help }}</UiTooltip>
+    <UiTooltip v-if="help" trigger="click" :id="`${uid}-help-text`" :for="`${uid}-help`">{{
+      help
+    }}</UiTooltip>
     <div class="popup" :hidden="!expanded" ref="popup">
       <div
         role="listbox"
@@ -862,7 +894,17 @@ label {
   font-size: var(--ui-combobox-label-font-size, 0.875rem);
   font-weight: 500;
 }
+/* The field and anything that annotates it sit on one row; the help button is beside the box,
+   not inside it, because a control's box holds its value. */
+.control {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-2);
+  min-inline-size: 0;
+}
+
 .field {
+  flex: 1 1 auto;
   display: flex;
   min-inline-size: 0;
   border: 1px solid var(--ui-control-border, var(--ui-border-default));
@@ -879,6 +921,46 @@ label {
     var(--ui-control-inset),
     var(--ui-control-focus-halo-shadow);
 }
+/* A ghost icon button: the affordance is the mark, not a box around it. */
+.help {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--ui-control-size-sm);
+  block-size: var(--ui-control-size-sm);
+  padding: 0;
+  border: 0;
+  border-radius: var(--ui-radius-round);
+  background: transparent;
+  color: var(--ui-text-secondary);
+  cursor: pointer;
+  transition:
+    background-color var(--ui-motion-fast) var(--ui-motion-ease),
+    color var(--ui-motion-fast) var(--ui-motion-ease);
+}
+
+.help:hover:enabled,
+.help[aria-expanded="true"] {
+  background: color-mix(in srgb, currentColor 8%, transparent);
+  color: var(--ui-text-primary);
+}
+
+.help:focus-visible {
+  outline: none;
+  box-shadow: var(--ui-focus-halo);
+}
+
+.help:disabled {
+  color: var(--ui-disabled-text);
+  cursor: not-allowed;
+}
+
+.help-icon {
+  inline-size: var(--ui-icon-size-sm);
+  block-size: var(--ui-icon-size-sm);
+}
+
 input::selection {
   background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
   color: inherit;