@threadlabs/looma 0.19.1 → 0.20.0

package/components/ui-combobox/ui-combobox.js

@@ -10,11 +10,12 @@ let comboboxes = 0;
 function authoredOptions(container) {
   return Array.from(container.querySelectorAll("option")).map((option, index) => {
     const { description, tag, tagTone, tagColor } = option.dataset;
+    const group = option.closest("optgroup")?.label;
     return {
       id: option.id || option.value || `option-${index}`,
       value: option.value,
       label: option.label || option.textContent?.trim() || option.value,
-      group: option.closest("optgroup")?.label || undefined,
+      ...(group ? { group } : {}),
       disabled: option.disabled,
       ...(description ? { description } : {}),
       ...(tag ? { tag: { label: tag, ...(tagTone ? { tone: tagTone } : {}), ...(tagColor ? { color: tagColor } : {}) } } : {}),
@@ -141,7 +142,7 @@ export default function controller(host) {
       if (controller.signal.aborted || !alive) return;
       for (const option of options) knownOptions.set(option.value, option);
       const selectedOption = host.state.selected == null ? undefined : knownOptions.get(host.state.selected);
-      if (host.state.query === undefined && awaitingLabel === host.state.selected && selectedOption) {
+      if (host.state.query == null && awaitingLabel === host.state.selected && selectedOption) {
         host.state.raw = selectedOption.label;
         host.state.display = selectedOption.label;
         awaitingLabel = null;
@@ -193,8 +194,8 @@ export default function controller(host) {
     awaitingLabel = null;
     if (kind === "selection") lastSelection = option;
     const queryChanged = query !== host.state.raw;
-    if (host.state.value === undefined) host.state.selected = value;
-    if (host.state.query === undefined && queryChanged) {
+    if (host.state.value == null) host.state.selected = value;
+    if (host.state.query == null && queryChanged) {
       host.state.raw = query;
       host.state.display = query;
     }
@@ -208,20 +209,20 @@ export default function controller(host) {
     if (kind === "free-entry") host.dispatch("free-entry", detail);
     queueMicrotask(() => {
       if (proposedChange !== proposal) return;
-      if (host.state.value !== undefined && host.state.value !== proposal.value) syncValue();
-      if (host.state.query !== undefined && host.state.query !== proposal.query) syncQuery();
+      if (host.state.value != null && host.state.value !== proposal.value) syncValue();
+      if (host.state.query != null && host.state.query !== proposal.query) syncQuery();
       proposedChange = undefined;
     });
   };
   const emitItems = (next, trigger) => {
     if (!controlledValues()) host.state.internalItems = next;
-    host.dispatch("value-change", next);
-    // Not `values`: Vue's adapter reads a modeled prop with `in`, and every list-shaped detail (this
-    // value-change, options-change) has Array.prototype.values, so it would emit update:values wrongly.
+    host.dispatch("items-change", next);
+    // Not `values`: Vue's adapter reads a modeled prop with `in`, and list-shaped details have
+    // Array.prototype.values, so it would emit update:values wrongly.
     host.dispatch("selected-values-change", { selectedValues: next.map((item) => item.value), trigger });
   };
   const setMultiQuery = (query, trigger) => {
-    if (host.state.query === undefined) {
+    if (host.state.query == null) {
       host.state.raw = query;
       host.state.display = query;
     }
@@ -281,7 +282,7 @@ export default function controller(host) {
       ?? knownOptions.get(host.state.selected) ?? lastSelection;
     if (selectedOption && selectedOption.label === typed) return;
     const restoreDraft = (label) => {
-      if (host.state.query !== undefined || label === host.state.raw) return;
+      if (host.state.query != null || label === host.state.raw) return;
       host.state.raw = label;
       host.state.display = label;
       resetValidation();
@@ -352,9 +353,9 @@ export default function controller(host) {
     return host.state.validation;
   };
   const syncValue = () => {
-    if (host.state.multiple || host.state.value === undefined) return;
+    if (host.state.multiple || host.state.value == null) return;
     host.state.selected = host.state.value;
-    if (host.state.query === undefined) {
+    if (host.state.query == null) {
       const proposal = proposedChange;
       const option = config().options?.find((row) => row.value === host.state.selected) ?? (host.state.selected == null ? undefined : knownOptions.get(host.state.selected));
       const nextRaw = proposal?.value === host.state.selected ? proposal.query : option?.label ?? host.state.selected ?? "";
@@ -367,8 +368,8 @@ export default function controller(host) {
     resetValidation();
   };
   const syncQuery = () => {
-    if (host.state.query === undefined || host.state.query === host.state.raw) return;
-    if (host.state.value === undefined && proposedChange?.query !== host.state.query) host.state.selected = null;
+    if (host.state.query == null || host.state.query === host.state.raw) return;
+    if (host.state.value == null && proposedChange?.query !== host.state.query) host.state.selected = null;
     awaitingLabel = null;
     host.state.raw = host.state.query;
     host.state.display = host.state.query;
@@ -421,7 +422,7 @@ export default function controller(host) {
       commit(null, host.state.raw, null, "clear", "keyboard");
     }
     open();
-    queueMicrotask(() => { if (host.state.query !== undefined && host.state.query !== host.state.raw) syncQuery(); });
+    queueMicrotask(() => { if (host.state.query != null && host.state.query !== host.state.raw) syncQuery(); });
   };
   const onKeydown = (event) => {
     const item = event.target.closest?.(".item");
@@ -483,12 +484,12 @@ export default function controller(host) {
       host.state.selected = null;
       host.state.raw = host.state.query ?? "";
     } else {
-      host.state.selected = host.state.value !== undefined ? host.state.value : authoredDefaults()[0]?.value ?? null;
+      host.state.selected = host.state.value != null ? host.state.value : authoredDefaults()[0]?.value ?? null;
       host.state.raw = host.state.query ?? "";
-      if (host.state.query === undefined && !host.state.raw && host.state.selected !== null) {
+      if (host.state.query == null && !host.state.raw && host.state.selected !== null) {
         host.state.raw = config().options?.find((row) => row.value === host.state.selected)?.label ?? host.state.selected;
       }
-      if (host.state.query === undefined && host.state.selected !== null && host.state.raw === host.state.selected) awaitingLabel = host.state.selected;
+      if (host.state.query == null && host.state.selected !== null && host.state.raw === host.state.selected) awaitingLabel = host.state.selected;
     }
     host.state.display = host.state.raw;
   };
@@ -504,7 +505,7 @@ export default function controller(host) {
   // Authored options can change after mount (renamed, replaced, or arriving late). A selected value
   // then shows its current label, unless the user is editing the text.
   const relabel = () => {
-    if (host.state.multiple || host.state.query !== undefined || host.state.selected == null) return;
+    if (host.state.multiple || host.state.query != null || host.state.selected == null) return;
     if (element.ownerDocument.activeElement === input) return;
     const label = config().options?.find((row) => row.value === host.state.selected)?.label;
     if (label === undefined || label === host.state.raw) return;

package/components/ui-container/ui-container.html

@@ -1,10 +1,10 @@
 <template component="ui-container">
   <defs>
-    <prop name="measure" type="narrow | wide"
+    <prop name="measure" type="keyword" values="narrow, wide"
     >The container's maximum width, in characters of the current font: narrow is 45ch, wide is 80ch, and unset is 65ch, a comfortable reading line. The
       container centres itself when its parent is wider. The --ui-container-measure custom property, set on the container itself, overrides it; set on an
       ancestor, it does nothing.</prop>
-    <prop name="gutters" type="s | m | l"
+    <prop name="gutters" type="keyword" values="s, m, l"
     >Inline padding on both sides, which keeps content off the edges of a narrow screen: s is 0.75rem, m is 1rem (also the default), and l is 1.5rem.</prop>
   </defs>
   <div><slot></slot></div>

package/components/ui-context-menu/ui-context-menu.html

@@ -5,13 +5,25 @@
     <state name="internalOpen" :value="false"></state>
     <event
       name="open"
-      type="object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })"
-    ></event>
+      type="object"
+    >
+      <prop name="open" required type="boolean"></prop>
+      <prop name="reason" required type="keyword" values="action, programmatic, light-dismiss, escape"></prop>
+      <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
+    </event>
     <event
       name="close"
-      type="object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })"
-    ></event>
-    <event name="select" type="object({ value: string, checked?: boolean, trigger: keyboard | pointer | programmatic })"></event>
+      type="object"
+    >
+      <prop name="open" required type="boolean"></prop>
+      <prop name="reason" required type="keyword" values="action, programmatic, light-dismiss, escape"></prop>
+      <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
+    </event>
+    <event name="select" type="object">
+      <prop name="value" required type="string"></prop>
+      <prop name="checked" type="boolean"></prop>
+      <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
+    </event>
   </defs>
   <span><div class="menu" $ref="menu" role="menu" aria-orientation="vertical"><slot></slot></div></span>
   <style>

package/components/ui-cover/ui-cover.html

@@ -1,6 +1,6 @@
 <template component="ui-cover">
   <defs>
-    <prop name="size" type="screen | fill" default="screen"
+    <prop name="size" type="keyword" values="screen, fill" default="screen"
     >How tall the cover is. screen is at least the viewport's height, for a view that is one centred card, such as sign-in; fill takes the space its parent
       gives it.</prop>
   </defs>

package/components/ui-description-list/ui-description-list.html

@@ -1,12 +1,12 @@
 <template component="ui-description-list">
   <defs>
-    <prop name="layout" type="rows | stacked | grid | tiles" default="rows"
+    <prop name="layout" type="keyword" values="rows, stacked, grid, tiles" default="rows"
     >rows sets each term beside its value, one per line, for a short summary; stacked sets every term above its value, one pair per line, for a narrow space;
       grid sets the pairs, term above value, in as many columns as fit, for facts to scan across; tiles sets each pair on its own bordered tile in a grid, for
       figures to compare.</prop>
-    <prop name="columns" type="'2' | '3' | '4'"
+    <prop name="columns" type="keyword" values="2, 3, 4"
     >The most columns grid and tiles set on a wide list; a narrow list still drops to fewer. Left unset, they fit as many as the width allows.</prop>
-    <prop name="density" type="comfortable | compact" default="comfortable"
+    <prop name="density" type="keyword" values="comfortable, compact" default="comfortable"
     >How much room each pair takes. comfortable spaces the pairs apart to read; compact sets them close together, for facts inside other content such as a card
       or a table's detail row.</prop>
   </defs>

package/components/ui-dialog/ui-dialog.html

@@ -8,24 +8,32 @@
     <prop name="modeless" type="boolean" default="false"
     >Deprecated: does nothing, since dialogs are non-modal unless modal is set. Accepted so markup written for 0.15 keeps working; modal wins when both are
       set.</prop>
-    <prop name="closedby" type="any | closerequest | none"
+    <prop name="closedby" type="keyword" values="any, closerequest, none"
     >Which user close requests work: any includes outside presses, closerequest includes Escape, and none requires an action. Unset follows native dialog:
       closerequest when modal, none when not.</prop>
     <prop name="alert" type="boolean" default="false"
     >Use alert dialog semantics and require an explicit action instead of the header close button. An alert dialog is always modal.</prop>
-    <prop name="size" type="sm | md | lg | fullscreen" default="md">Choose a compact, standard, wide, or viewport-filling dialog.</prop>
+    <prop name="size" type="keyword" values="sm, md, lg, fullscreen" default="md">Choose a compact, standard, wide, or viewport-filling dialog.</prop>
     <prop name="label" type="string">Visible title in the dialog header; also its accessible name.</prop>
     <prop name="for" type="string" default="">ID of the control that opens the dialog.</prop>
     <state name="internalOpen" :value="false"></state>
     <state name="accessibleLabel" :value="'Dialog'"></state>
     <event
       name="open"
-      type="object({ open: boolean, reason: action | programmatic, trigger: keyboard | pointer | programmatic })"
-    ></event>
+      type="object"
+    >
+      <prop name="open" required type="boolean"></prop>
+      <prop name="reason" required type="keyword" values="action, programmatic"></prop>
+      <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
+    </event>
     <event
       name="close"
-      type="object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })"
-    ></event>
+      type="object"
+    >
+      <prop name="open" required type="boolean"></prop>
+      <prop name="reason" required type="keyword" values="action, programmatic, light-dismiss, escape"></prop>
+      <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
+    </event>
   </defs>
   <dialog :aria-label="accessibleLabel">
     <header>

package/components/ui-disclosure/ui-disclosure.html

@@ -1,6 +1,7 @@
 <template component="ui-disclosure" controller="./ui-disclosure.js">
   <defs>
-    <prop name="density" type="comfortable | compact" default="comfortable">Compact trades padding and type size for rows that fit more on screen.</prop>
+    <prop name="density" type="keyword" values="comfortable, compact" default="comfortable"
+    >Compact trades padding and type size for rows that fit more on screen.</prop>
     <prop name="summary" type="string" default="Details"
     >The text of the trigger row that opens and closes the disclosure. It is the trigger button's accessible name, so name what the content is.</prop>
     <prop name="open" type="boolean" default="false"
@@ -18,12 +19,20 @@
     <state name="headingAriaLevel" :value="null"></state>
     <event
       name="open"
-      type="object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })"
-    ></event>
+      type="object"
+    >
+      <prop name="open" required type="boolean"></prop>
+      <prop name="reason" required type="keyword" values="action, programmatic, light-dismiss, escape"></prop>
+      <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
+    </event>
     <event
       name="close"
-      type="object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })"
-    ></event>
+      type="object"
+    >
+      <prop name="open" required type="boolean"></prop>
+      <prop name="reason" required type="keyword" values="action, programmatic, light-dismiss, escape"></prop>
+      <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
+    </event>
   </defs>
   <div>
     <div class="heading" :role="headingRole" :aria-level="headingAriaLevel">

package/components/ui-editable/ui-editable.html

@@ -17,12 +17,23 @@
     <state name="internalEdit" :value="false"></state>
     <state name="internalValue" :value="''"></state>
     <state name="draft" :value="''"></state>
-    <event name="input" type="object({ value: string, trigger: keyboard | pointer | programmatic })"></event>
-    <event name="change" type="object({ value: string, previousValue: string, trigger: keyboard | pointer | programmatic })"></event>
+    <event name="input" type="object">
+      <prop name="value" required type="string"></prop>
+      <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
+    </event>
+    <event name="change" type="object">
+      <prop name="value" required type="string"></prop>
+      <prop name="previousValue" required type="string"></prop>
+      <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
+    </event>
     <event
       name="edit-change"
-      type="object({ edit: boolean, reason: activate | commit | cancel | light-dismiss | escape | programmatic, trigger: keyboard | pointer | programmatic })"
-    ></event>
+      type="object"
+    >
+      <prop name="edit" required type="boolean"></prop>
+      <prop name="reason" required type="keyword" values="activate, commit, cancel, light-dismiss, escape, programmatic"></prop>
+      <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
+    </event>
   </defs>
   <div>
     <div class="field">

package/components/ui-editor-mention-menu/ui-editor-mention-menu.html

@@ -12,7 +12,7 @@
     <prop name="loadingLabel" type="string" default="Searching…">Status text shown while loading an empty result list.</prop>
     <prop
       name="anchorRect"
-      type="object({ left?: number, top?: number, right?: number, bottom?: number, x?: number, y?: number, width?: number, height?: number }) | null"
+      type="object({ left?: number, top?: number, right?: number, bottom?: number, x?: number, y?: number, width?: number, height?: number })"
     >Where the @ was typed, in viewport coordinates.</prop>
     <state name="visible" :value="false"></state>
     <state name="rows" type="list(object({ id: string, label: string, detail?: string, initials: string }))" :value="[]"></state>

package/components/ui-editor-slash-menu/ui-editor-slash-menu.html

@@ -14,7 +14,7 @@
       highlights it and reports a highlight event.</prop>
     <prop
       name="anchorRect"
-      type="object({ left?: number, top?: number, right?: number, bottom?: number, x?: number, y?: number, width?: number, height?: number }) | null"
+      type="object({ left?: number, top?: number, right?: number, bottom?: number, x?: number, y?: number, width?: number, height?: number })"
     >Where the slash was typed, in viewport coordinates.</prop>
     <state name="visible" :value="false"></state>
     <state name="active" :value="0"></state>

package/components/ui-editor-table-context-menu/ui-editor-table-context-menu.html

@@ -2,15 +2,28 @@
 <template component="ui-editor-table-context-menu" controller="./ui-editor-table-context-menu.js">
   <defs>
     <prop name="open" type="boolean" default="false">Shows the menu at the position owned by the editor integration.</prop>
-    <prop name="scope" type="cell | row | column" default="cell">Keeps structure actions relevant to a cell, row handle, or column handle.</prop>
+    <prop name="scope" type="keyword" values="cell, row, column" default="cell">Keeps structure actions relevant to a cell, row handle, or column handle.</prop>
     <prop name="cellBackground" type="string" default="">Identifies the background choice that is active for the current cell.</prop>
     <prop name="headerRow" type="boolean" default="false">Whether the table's first row currently uses header cells.</prop>
     <prop name="headerColumn" type="boolean" default="false">Whether the table's first column currently uses header cells.</prop>
     <prop
       name="actions"
-      type="list(align-left | align-center | align-right | background-none | background-gray | background-yellow | background-blue | background-green | background-red | add-row-before | add-row-after | add-column-before | add-column-after | toggle-header-row | toggle-header-column | move-row-up | move-row-down | move-column-left | move-column-right | clear-cells | merge-cells | split-cell | delete-row | delete-column | delete-table)"
-    >The complete set of commands the current selection permits.</prop>
-    <state name="swatches" type="list(object({ action: string, label: string, color: string, selected: boolean })) | null" :value="[]"></state>
+      type="array"
+    >
+      <prop
+        type="keyword"
+        values="align-left, align-center, align-right, background-none, background-gray, background-yellow, background-blue, background-green, background-red, add-row-before, add-row-after, add-column-before, add-column-after, toggle-header-row, toggle-header-column, move-row-up, move-row-down, move-column-left, move-column-right, clear-cells, merge-cells, split-cell, delete-row, delete-column, delete-table"
+      ></prop>
+      The complete set of commands the current selection permits.
+    </prop>
+    <state name="swatches" type="array" :value="[]" nullable>
+      <prop type="object">
+        <prop name="action" required type="string"></prop>
+        <prop name="label" required type="string"></prop>
+        <prop name="color" required type="string"></prop>
+        <prop name="selected" required type="boolean"></prop>
+      </prop>
+    </state>
     <state
       name="sections"
       type="list(object({ heading: string, items: list(object({ action: string, label: string, icon: string, danger: boolean, checkable: boolean, checked: boolean })) }))"
@@ -18,8 +31,15 @@
     ></state>
     <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 | toggle-header-row | toggle-header-column | move-row-up | move-row-down | move-column-left | move-column-right | clear-cells | merge-cells | split-cell | delete-row | delete-column | delete-table })"
-    ></event>
+      type="object"
+    >
+      <prop
+        name="action"
+        required
+        type="keyword"
+        values="align-left, align-center, align-right, background-none, background-gray, background-yellow, background-blue, background-green, background-red, add-row-before, add-row-after, add-column-before, add-column-after, toggle-header-row, toggle-header-column, move-row-up, move-row-down, move-column-left, move-column-right, clear-cells, merge-cells, split-cell, delete-row, delete-column, delete-table"
+      ></prop>
+    </event>
   </defs>
   <div role="menu" :hidden="not open">
     <div $if="swatches" class="section" role="none">

package/components/ui-editor-table-overlay/ui-editor-table-overlay.html

@@ -4,32 +4,110 @@
     <prop name="open" type="boolean" default="false">Shows the controls after the editor has supplied current geometry.</prop>
     <prop
       name="geometry"
-      type="object({ rowBoundaries: list(number), columnBoundaries: list(number), activeCell: object({ left: number, top: number, width: number, height: number, rowIndex: integer, columnIndex: integer }) | null, hoveredCell?: object({ left: number, top: number, width: number, height: number, rowIndex: integer, columnIndex: integer }) | null }) | null"
-    >The authoritative editor-measured table boundaries and active or hovered cell rectangles.</prop>
+      type="object"
+    >
+      <prop name="rowBoundaries" required type="array">
+        <prop type="number"></prop>
+      </prop>
+      <prop name="columnBoundaries" required type="array">
+        <prop type="number"></prop>
+      </prop>
+      <prop name="activeCell" required nullable type="object">
+        <prop name="left" required type="number"></prop>
+        <prop name="top" required type="number"></prop>
+        <prop name="width" required type="number"></prop>
+        <prop name="height" required type="number"></prop>
+        <prop name="rowIndex" required type="integer"></prop>
+        <prop name="columnIndex" required type="integer"></prop>
+      </prop>
+      <prop name="hoveredCell" nullable type="object">
+        <prop name="left" required type="number"></prop>
+        <prop name="top" required type="number"></prop>
+        <prop name="width" required type="number"></prop>
+        <prop name="height" required type="number"></prop>
+        <prop name="rowIndex" required type="integer"></prop>
+        <prop name="columnIndex" required type="integer"></prop>
+      </prop>
+      The authoritative editor-measured table boundaries and active or hovered cell rectangles.
+    </prop>
     <state
       name="rows"
-      type="list(object({ key: string, index: integer, offset: string, affordance: insert-row | insert-column, action: add-row-before | add-row-after | add-column-before | add-column-after, label: string }))"
+      type="array"
       :value="[]"
-    ></state>
+    >
+      <prop type="object">
+        <prop name="key" required type="string"></prop>
+        <prop name="index" required type="integer"></prop>
+        <prop name="offset" required type="string"></prop>
+        <prop name="affordance" required type="keyword" values="insert-row, insert-column"></prop>
+        <prop name="action" required type="keyword" values="add-row-before, add-row-after, add-column-before, add-column-after"></prop>
+        <prop name="label" required type="string"></prop>
+      </prop>
+    </state>
     <state
       name="cols"
-      type="list(object({ key: string, index: integer, offset: string, affordance: insert-row | insert-column, action: add-row-before | add-row-after | add-column-before | add-column-after, label: string }))"
+      type="array"
       :value="[]"
-    ></state>
+    >
+      <prop type="object">
+        <prop name="key" required type="string"></prop>
+        <prop name="index" required type="integer"></prop>
+        <prop name="offset" required type="string"></prop>
+        <prop name="affordance" required type="keyword" values="insert-row, insert-column"></prop>
+        <prop name="action" required type="keyword" values="add-row-before, add-row-after, add-column-before, add-column-after"></prop>
+        <prop name="label" required type="string"></prop>
+      </prop>
+    </state>
     <state
       name="hovered"
-      type="object({ left: number, top: number, width: number, height: number, rowIndex: integer, columnIndex: integer, rowOffset: string, columnOffset: string }) | null"
+      type="object"
       :value="null"
-    ></state>
+      nullable
+    >
+      <prop name="left" required type="number"></prop>
+      <prop name="top" required type="number"></prop>
+      <prop name="width" required type="number"></prop>
+      <prop name="height" required type="number"></prop>
+      <prop name="rowIndex" required type="integer"></prop>
+      <prop name="columnIndex" required type="integer"></prop>
+      <prop name="rowOffset" required type="string"></prop>
+      <prop name="columnOffset" required type="string"></prop>
+    </state>
     <state
       name="active"
-      type="object({ left: number, top: number, width: number, height: number, rowIndex: integer, columnIndex: integer, menuLeft: string, menuTop: string }) | null"
+      type="object"
       :value="null"
-    ></state>
+      nullable
+    >
+      <prop name="left" required type="number"></prop>
+      <prop name="top" required type="number"></prop>
+      <prop name="width" required type="number"></prop>
+      <prop name="height" required type="number"></prop>
+      <prop name="rowIndex" required type="integer"></prop>
+      <prop name="columnIndex" required type="integer"></prop>
+      <prop name="menuLeft" required type="string"></prop>
+      <prop name="menuTop" required type="string"></prop>
+    </state>
     <state name="activeKey" :value="''"></state>
+    <event name="add-row-before" type="object({ boundaryIndex: integer })"></event>
+    <event name="add-row-after" type="object({ boundaryIndex: integer })"></event>
+    <event name="add-column-before" type="object({ boundaryIndex: integer })"></event>
+    <event name="add-column-after" type="object({ boundaryIndex: integer })"></event>
+    <event name="select-row" type="object({ rowIndex: integer, columnIndex: integer })"></event>
+    <event name="select-column" type="object({ rowIndex: integer, columnIndex: integer })"></event>
+    <event name="reorder-row" type="object({ fromIndex: integer, toIndex: integer })"></event>
+    <event name="reorder-column" type="object({ fromIndex: integer, toIndex: integer })"></event>
+    <event
+      name="open-cell-menu"
+      type="object({ rowIndex: integer, columnIndex: integer, anchor: object({ left: number, top: number, right: number, bottom: number }) })"
+    ></event>
+    <event
+      name="open-row-menu"
+      type="object({ rowIndex: integer, columnIndex: integer, anchor: object({ left: number, top: number, right: number, bottom: number }) })"
+    ></event>
     <event
-      name="action"
-      type="object({ action: add-row-before | add-row-after | add-column-before | add-column-after, boundaryIndex: integer }) | object({ action: select-row | select-column, rowIndex: integer, columnIndex: integer }) | object({ action: reorder-row | reorder-column, fromIndex: integer, toIndex: integer }) | object({ action: open-cell-menu | open-row-menu | open-column-menu, rowIndex: integer, columnIndex: integer, anchor: object({ left: number, top: number, right: number, bottom: number }) })"
+      name="open-column-menu"
+      type="object({ rowIndex: integer, columnIndex: integer, anchor: object({ left: number, top: number, right: number, bottom: number }) })"
     ></event>
   </defs>
   <div aria-label="Table controls" :hidden="not open">

package/components/ui-editor-table-overlay/ui-editor-table-overlay.js

@@ -96,7 +96,7 @@ export default function controller(host) {
     if (to === null) return;
     suppressClick = true;
     setTimeout(() => { suppressClick = false; }, 0);
-    if (to !== from) host.dispatch("action", { action: axis === "row" ? "reorder-row" : "reorder-column", fromIndex: from, toIndex: to });
+    if (to !== from) host.dispatch(axis === "row" ? "reorder-row" : "reorder-column", { fromIndex: from, toIndex: to });
   };
   const boundaries = (axis) => {
     const values = host.state.geometry?.[axis === "row" ? "rowBoundaries" : "columnBoundaries"];
@@ -141,13 +141,13 @@ export default function controller(host) {
     const action = button.dataset.action;
     const cell = { rowIndex: Number(button.dataset.rowIndex), columnIndex: Number(button.dataset.columnIndex) };
     if (action === "select-row" || action === "select-column") {
-      host.dispatch("action", { action, ...cell });
+      host.dispatch(action, cell);
       const rect = button.getBoundingClientRect();
-      host.dispatch("action", { action: action === "select-row" ? "open-row-menu" : "open-column-menu", ...cell, anchor: { left: rect.left, top: rect.top, right: rect.right, bottom: rect.bottom } });
+      host.dispatch(action === "select-row" ? "open-row-menu" : "open-column-menu", { ...cell, anchor: { left: rect.left, top: rect.top, right: rect.right, bottom: rect.bottom } });
     } else if (action === "open-cell-menu") {
       const rect = button.getBoundingClientRect();
-      host.dispatch("action", { action, ...cell, anchor: { left: rect.left, top: rect.top, right: rect.right, bottom: rect.bottom } });
-    } else host.dispatch("action", { action, boundaryIndex: Number(button.dataset.boundaryIndex) });
+      host.dispatch(action, { ...cell, anchor: { left: rect.left, top: rect.top, right: rect.right, bottom: rect.bottom } });
+    } else host.dispatch(action, { boundaryIndex: Number(button.dataset.boundaryIndex) });
   };
   const keyOf = (target) => target instanceof Element ? target.closest("[data-control-key]")?.dataset.controlKey ?? "" : "";
   const enter = (event) => { host.state.activeKey = keyOf(event.target); };

package/components/ui-editor-table-toolbar/ui-editor-table-toolbar.html

@@ -2,16 +2,35 @@
 <template component="ui-editor-table-toolbar" controller="./ui-editor-table-toolbar.js">
   <defs>
     <prop name="open" type="boolean" default="false">Shows the toolbar while a table selection is active.</prop>
-    <prop name="cellAlignment" type="left | center | right" default="left">Marks the alignment command that is active for the current cell.</prop>
+    <prop name="cellAlignment" type="keyword" values="left, center, right" default="left"
+    >Marks the alignment command that is active for the current cell.</prop>
     <prop name="cellBackground" type="string" default="">Identifies the background choice that is active for the current cell.</prop>
     <prop name="headerRow" type="boolean" default="false">Whether the table's first row currently uses header cells.</prop>
     <prop name="headerColumn" type="boolean" default="false">Whether the table's first column currently uses header cells.</prop>
     <prop
       name="actions"
-      type="list(align-left | align-center | align-right | background-none | background-gray | background-yellow | background-blue | background-green | background-red | add-row-before | add-row-after | add-column-before | add-column-after | toggle-header-row | toggle-header-column | move-row-up | move-row-down | move-column-left | move-column-right | clear-cells | merge-cells | split-cell | delete-row | delete-column | delete-table)"
-    >The complete set of commands the current selection permits.</prop>
-    <state name="alignments" type="list(object({ action: align-left | align-center | align-right, label: string, active: boolean }))" :value="[]"></state>
-    <state name="structure" type="list(object({ action: add-row-after | add-column-after, label: string, icon: string }))" :value="[]"></state>
+      type="array"
+    >
+      <prop
+        type="keyword"
+        values="align-left, align-center, align-right, background-none, background-gray, background-yellow, background-blue, background-green, background-red, add-row-before, add-row-after, add-column-before, add-column-after, toggle-header-row, toggle-header-column, move-row-up, move-row-down, move-column-left, move-column-right, clear-cells, merge-cells, split-cell, delete-row, delete-column, delete-table"
+      ></prop>
+      The complete set of commands the current selection permits.
+    </prop>
+    <state name="alignments" type="array" :value="[]">
+      <prop type="object">
+        <prop name="action" required type="keyword" values="align-left, align-center, align-right"></prop>
+        <prop name="label" required type="string"></prop>
+        <prop name="active" required type="boolean"></prop>
+      </prop>
+    </state>
+    <state name="structure" type="array" :value="[]">
+      <prop type="object">
+        <prop name="action" required type="keyword" values="add-row-after, add-column-after"></prop>
+        <prop name="label" required type="string"></prop>
+        <prop name="icon" required type="string"></prop>
+      </prop>
+    </state>
     <state name="swatches" type="list(object({ action: string, label: string, color: string, selected: boolean }))" :value="[]"></state>
     <state
       name="sections"
@@ -22,8 +41,15 @@
     <state name="overflowOpen" :value="false"></state>
     <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 | toggle-header-row | toggle-header-column | move-row-up | move-row-down | move-column-left | move-column-right | clear-cells | merge-cells | split-cell | delete-row | delete-column | delete-table })"
-    ></event>
+      type="object"
+    >
+      <prop
+        name="action"
+        required
+        type="keyword"
+        values="align-left, align-center, align-right, background-none, background-gray, background-yellow, background-blue, background-green, background-red, add-row-before, add-row-after, add-column-before, add-column-after, toggle-header-row, toggle-header-column, move-row-up, move-row-down, move-column-left, move-column-right, clear-cells, merge-cells, split-cell, delete-row, delete-column, delete-table"
+      ></prop>
+    </event>
   </defs>
   <div role="toolbar" aria-label="Table actions" :hidden="not open">
     <div $if="alignments" class="group" role="group" aria-label="Cell alignment">

package/components/ui-grid/ui-grid.html

@@ -1,9 +1,9 @@
 <template component="ui-grid">
   <defs>
-    <prop name="gap" type="xs | s | m | l | xl"
+    <prop name="gap" type="keyword" values="xs, s, m, l, xl"
     >Space between cells, on the spacing scale: xs is 0.5rem, s 0.75rem, m 1rem (also the default), l 1.5rem, and xl 2rem. The --ui-grid-gap custom property,
       set on the grid itself, overrides it; set on an ancestor, it does nothing.</prop>
-    <prop name="min" type="sm | md | lg"
+    <prop name="min" type="keyword" values="sm, md, lg"
     >The narrowest a column may get before the grid drops to fewer columns: sm is 12rem (also the default), md is 16rem, and lg is 20rem. The grid fits as many
       equal columns as its width allows, and a single column never overflows a narrower container.</prop>
     <prop name="columns" type="integer"