@threadlabs/looma 0.19.1 → 0.21.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,26 +8,34 @@
     <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">
+  <dialog from:aria-label="accessibleLabel">
     <header>
       <h2 class="title" $if="label" $value="label"></h2>
       <button class="close" $ref="close" type="button" aria-label="Close"></button>

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,21 +19,29 @@
     <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">
-      <button class="trigger" type="button" $ref="trigger" :aria-controls="contentId" :aria-expanded="internalOpen" :disabled="disabled">
+    <div class="heading" from:role="headingRole" from:aria-level="headingAriaLevel">
+      <button class="trigger" type="button" $ref="trigger" from:aria-controls="contentId" from:aria-expanded="internalOpen" from:disabled="disabled">
         <span class="summary"><slot name="summary"><template $value="summary"></template></slot></span>
         <span class="chevron" aria-hidden="true"></span>
       </button>
     </div>
-    <div class="panel" $ref="panel" :id="contentId"><div class="panel-inner"><slot></slot></div></div>
+    <div class="panel" $ref="panel" from:id="contentId"><div class="panel-inner"><slot></slot></div></div>
   </div>
   <style>
     /* This component's hooks style the element they are set on, and never a nested one. */

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

@@ -17,16 +17,27 @@
     <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">
-      <button class="preview" $ref="preview" type="button" :disabled="disabled">
+      <button class="preview" $ref="preview" type="button" from:disabled="disabled">
         <span class="text" $value="internalValue"></span>
         <span $if="hint" class="hint" aria-hidden="true" $value="hint"></span>
       </button>
@@ -35,10 +46,10 @@
         $ref="input"
         type="text"
         .value="draft"
-        :aria-label="label"
-        :placeholder="placeholder"
-        :required="required"
-        :disabled="disabled or not internalEdit"
+        from:aria-label="label"
+        from:placeholder="placeholder"
+        from:required="required"
+        from:disabled="disabled or not internalEdit"
       >
     </div>
     <div $if="actions" class="actions">

package/components/ui-editor-insert-table-grid/ui-editor-insert-table-grid.html

@@ -15,7 +15,7 @@
     <state name="withHeaderRow" :value="false"></state>
     <event name="insert" type="object({ rows: integer, cols: integer, withHeaderRow: boolean })"></event>
   </defs>
-  <div :hidden="not open">
+  <div from:hidden="not open">
     <p class="hint" $value="hint"></p>
     <div class="grid" $ref="grid" role="group" aria-label="Table dimensions" style:--_rows="rows" style:--_cols="cols">
       <button
@@ -24,11 +24,11 @@
         type="button"
         class="cell"
         class:selected="cell.selected"
-        :data-row="cell.row"
-        :data-col="cell.col"
-        :aria-label="cell.label"
-        :aria-pressed="cell.selected"
-        :tabindex="cell.tabIndex"
+        from:data-row="cell.row"
+        from:data-col="cell.col"
+        from:aria-label="cell.label"
+        from:aria-pressed="cell.selected"
+        from:tabindex="cell.tabIndex"
       >
       </button>
     </div>

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>
@@ -22,19 +22,19 @@
     <event name="highlight" type="object({ index: integer, value: string })"></event>
     <event name="select" type="object({ index: integer, value: string })"></event>
   </defs>
-  <div role="listbox" :aria-busy="loading" :hidden="not visible">
+  <div role="listbox" from:aria-busy="loading" from:hidden="not visible">
     <div class="header"><slot name="header"></slot></div>
     <div $if="searching" class="loading" role="status" $value="loadingLabel"></div>
     <ul $if="not searching" class="list" role="presentation">
       <li
         $each="row, index of rows"
-        :id="format('%s-option-%s', prefix, index)"
+        from:id="format('%s-option-%s', prefix, index)"
         class="item"
         class:active="index = active"
         role="option"
-        :aria-selected="index = active"
-        :data-index="index"
-        :data-value="row.id"
+        from:aria-selected="index = active"
+        from:data-index="index"
+        from:data-value="row.id"
       >
         <span class="avatar" aria-hidden="true" $value="row.initials"></span>
         <span class="body"><span class="label" $value="row.label"></span><span $if="row.detail" class="detail" $value="row.detail"></span></span>

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

@@ -4,7 +4,7 @@
     <prop name="detail" type="string" default="">Secondary text, such as a team or role.</prop>
     <prop name="initials" type="string" default="">Text fallback for the start slot when no avatar is supplied.</prop>
   </defs>
-  <li role="option" tabindex="-1" :data-value="value">
+  <li role="option" tabindex="-1" from:data-value="value">
     <span class="avatar" aria-hidden="true"><slot name="start"><template $value="initials"></template></slot></span>
     <span class="body"><span class="label"><slot></slot></span><span $if="detail" class="detail" $value="detail"></span></span>
   </li>

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>
@@ -22,7 +22,7 @@
     <event name="highlight" type="object({ index: integer, value: string })"></event>
     <event name="select" type="object({ index: integer, value: string })"></event>
   </defs>
-  <div role="listbox" :hidden="not visible">
+  <div role="listbox" from:hidden="not visible">
     <div class="header"><slot name="header"></slot></div>
     <ul class="list" role="presentation">
       <li
@@ -30,11 +30,11 @@
         class="item"
         class:active="index = active"
         role="option"
-        :aria-selected="index = active"
-        :data-index="index"
-        :data-value="item.value"
+        from:aria-selected="index = active"
+        from:data-index="index"
+        from:data-value="item.value"
       >
-        <span class="icon" aria-hidden="true"><ui-icon :name="item.icon"></ui-icon></span>
+        <span class="icon" aria-hidden="true"><ui-icon from:name="item.icon"></ui-icon></span>
         <span class="body"><span class="title" $value="item.title"></span><span class="description" $value="item.description"></span></span>
       </li>
       <slot></slot>

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

@@ -3,7 +3,7 @@
     <prop name="label" type="string" default="">Names this group of related slash commands.</prop>
   </defs>
   <li role="presentation">
-    <div role="group" :aria-label="label">
+    <div role="group" from:aria-label="label">
       <div class="heading" $value="label"></div>
       <ul role="presentation"><slot></slot></ul>
     </div>

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

@@ -7,8 +7,8 @@
     <prop name="keywords" type="string" default="">Additional space-separated search terms matched by the containing Slash Menu.</prop>
     <prop name="disabled" type="boolean" default="false">Keeps the command visible but unavailable for selection.</prop>
   </defs>
-  <li role="option" tabindex="-1" :aria-disabled="disabled" :data-value="value" :data-keywords="keywords">
-    <span $if="icon" class="icon" aria-hidden="true"><ui-icon :name="icon"></ui-icon></span>
+  <li role="option" tabindex="-1" from:aria-disabled="disabled" from:data-value="value" from:data-keywords="keywords">
+    <span $if="icon" class="icon" aria-hidden="true"><ui-icon from:name="icon"></ui-icon></span>
     <span class="body"><span class="title"><slot></slot></span><span $if="description" class="description" $value="description"></span></span>
   </li>
   <style>

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,10 +31,17 @@
     ></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 role="menu" from:hidden="not open">
     <div $if="swatches" class="section" role="none">
       <div class="heading" role="presentation">Cell background</div>
       <div class="swatches" role="group" aria-label="Cell background">
@@ -32,8 +52,8 @@
           class="swatch-button"
           class:selected="swatch.selected"
           role="menuitemradio"
-          :aria-checked="swatch.selected"
-          :data-action="swatch.action"
+          from:aria-checked="swatch.selected"
+          from:data-action="swatch.action"
         >
           <span class="swatch" class:default="not swatch.color" style:--_swatch="swatch.color"></span>
           <span class="swatch-label" $value="swatch.label"></span>
@@ -48,12 +68,12 @@
           $each="item of section.items"
           $key="item.action"
           type="button"
-          :role="{ true: 'menuitemcheckbox', false: 'menuitem' }[format('%s', item.checkable)]"
-          :aria-checked="{ true: item.checked, false: null }[format('%s', item.checkable)]"
+          from:role="{ true: 'menuitemcheckbox', false: 'menuitem' }[format('%s', item.checkable)]"
+          from:aria-checked="{ true: item.checked, false: null }[format('%s', item.checkable)]"
           class:danger="item.danger"
-          :data-action="item.action"
+          from:data-action="item.action"
         >
-          <ui-icon :name="item.icon"></ui-icon>
+          <ui-icon from:name="item.icon"></ui-icon>
           <span $value="item.label"></span>
         </button>
       </div>