@threadlabs/looma 0.14.8 → 0.15.1

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

@@ -1,9 +1,14 @@
 <link rel="component" href="../ui-icon/ui-icon.html">
+<link rel="component" href="../ui-editor-slash-menu-item/ui-editor-slash-menu-item.html">
+<link rel="component" href="../ui-editor-slash-menu-group/ui-editor-slash-menu-group.html">
 <template component="ui-editor-slash-menu" controller="./ui-editor-slash-menu.js">
   <defs>
     <prop name="open" type="boolean" default="false">Whether the menu is open.</prop>
     <prop name="query" type="string" default="">The text typed after the slash.</prop>
-    <prop name="items" type="list(object({ title: string, description: string, icon: string }))">The blocks the menu offers.</prop>
+    <prop name="items" type="list(object({ value?: string, title: string, description: string, icon: string }))"
+    >Integration-supplied commands. Authored Slash Menu Item children are the markup alternative.</prop>
+    <prop name="label" type="string" default="Insert block"
+    >Accessible name of the suggestion list, used unless an aria-label or aria-labelledby is authored.</prop>
     <prop name="selectedIndex" type="integer" default="0"
     >The zero-based index of the highlighted item. The menu does not handle arrow keys itself: the editor sets this as the user moves, while hovering an item
       highlights it and reports a highlight event.</prop>
@@ -13,23 +18,29 @@
     >Where the slash was typed, in viewport coordinates.</prop>
     <state name="visible" :value="false"></state>
     <state name="active" :value="0"></state>
-    <event name="highlight" type="object({ index: integer })"></event>
-    <event name="select" type="object({ index: integer })"></event>
+    <state name="rows" type="list(object({ value: string, title: string, description: string, icon: string }))" :value="[]"></state>
+    <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-label="Insert block" :hidden="not visible">
-    <div class="header" aria-hidden="true">
-      <span class="header-label">Insert</span>
-      <span $if="query" class="header-query" $value="query"></span>
-    </div>
+  <div role="listbox" :hidden="not visible">
+    <div class="header"><slot name="header"></slot></div>
     <ul class="list" role="presentation">
-      <li $each="item, index of items" class="item" class:active="index = active" role="option" :aria-selected="index = active" :data-index="index">
+      <li
+        $each="item, index of rows"
+        class="item"
+        class:active="index = active"
+        role="option"
+        :aria-selected="index = active"
+        :data-index="index"
+        :data-value="item.value"
+      >
         <span class="icon" aria-hidden="true"><ui-icon :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>
     </ul>
-    <div class="footer" aria-hidden="true">
-      <kbd>↑↓</kbd> navigate · <kbd>↵</kbd> insert · <kbd>Esc</kbd> close
-    </div>
+    <div class="empty" $ref="empty"><slot name="empty"></slot></div>
+    <div class="footer"><slot name="footer"></slot></div>
   </div>
   <style>
     :host {
@@ -66,23 +77,22 @@
       letter-spacing: 0.05em;
     }
 
+    .header:not(:has(> *)), .footer:not(:has(> *)), .empty:not(:has(> *)) {
+      display: none;
+    }
+
+    .empty {
+      padding: var(--ui-space-3);
+      color: var(--ui-text-muted);
+      font-size: var(--ui-font-size-sm);
+    }
+
     @media (max-width: 767px) {
       .header {
         display: flex;
       }
     }
 
-    .header-query {
-      background: var(--ui-surface-hover);
-      border-radius: var(--ui-radius-sm);
-      padding: 0.1em 0.4em;
-      font-family: var(--ui-font-family-mono, ui-monospace, monospace);
-      font-size: var(--ui-font-size-xs);
-      color: var(--ui-accent);
-      text-transform: none;
-      letter-spacing: 0;
-    }
-
     .list {
       list-style: none;
       margin: 0;
@@ -183,19 +193,12 @@
     }
 
     .footer {
-      display: none;
       padding: var(--ui-space-2) var(--ui-space-3);
       border-top: 1px solid var(--ui-border);
       font-size: var(--ui-font-size-xs);
       color: var(--ui-text-muted);
     }
 
-    @media (min-width: 768px) {
-      .footer {
-        display: block;
-      }
-    }
-
     :host kbd {
       display: inline-flex;
       align-items: center;

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

@@ -3,27 +3,60 @@ import { normalizeAnchor, positionMenu } from "../shared/editor.js";
 // Places the menu at the slash and tracks the highlighted item; the template renders the items.
 export default function controller(host) {
   const element = host.element;
+  const authoredLabel = element.hasAttribute("aria-label") || element.hasAttribute("aria-labelledby");
   const place = () => {
     if (host.state.visible) positionMenu(element, normalizeAnchor(host.state.anchorRect), 280);
   };
+  const options = () => Array.from(element.querySelectorAll('[role="option"]'));
+  const syncOptions = () => {
+    const query = String(host.state.query || "").trim().toLocaleLowerCase();
+    const generated = host.state.rows.length > 0;
+    for (const row of options()) {
+      if (generated) break;
+      const title = row.querySelector(".title")?.textContent ?? row.textContent ?? "";
+      const terms = `${title} ${row.dataset.keywords ?? ""}`.toLocaleLowerCase();
+      row.hidden = Boolean(query && !terms.includes(query));
+    }
+    for (const group of element.querySelectorAll('[role="group"]')) {
+      group.closest('[role="presentation"]')?.toggleAttribute("hidden", !group.querySelector('[role="option"]:not([hidden])'));
+    }
+    const rows = options().filter((row) => !row.hidden && !row.closest('[role="presentation"][hidden]')
+      && row.getAttribute("aria-disabled") !== "true");
+    const active = Math.min(Math.max(0, Number(host.state.active) || 0), Math.max(0, rows.length - 1));
+    rows.forEach((row, index) => {
+      row.dataset.index = String(index);
+      row.setAttribute("aria-selected", String(index === active));
+    });
+    host.refs.empty.hidden = rows.length > 0;
+    const visible = Boolean(host.state.open && normalizeAnchor(host.state.anchorRect)
+      && (rows.length > 0 || host.refs.empty.children.length));
+    if (host.state.visible !== visible) host.state.visible = visible;
+    place();
+  };
   const stop = host.effect(() => {
     const items = Array.isArray(host.state.items) ? host.state.items : [];
+    if (!authoredLabel) element.setAttribute("aria-label", String(host.state.label || "Insert block"));
+    host.state.rows = items.map((item) => ({ ...item, value: String(item.value ?? item.title) }));
     host.state.active = Number(host.state.selectedIndex ?? 0);
-    host.state.visible = Boolean(host.state.open && items.length > 0 && normalizeAnchor(host.state.anchorRect));
-    place();
+    queueMicrotask(syncOptions);
   });
-  const indexOf = (event) => Number(event.target.closest?.("[data-index]")?.dataset.index);
+  const rowOf = (event) => event.target.closest?.('[role="option"]');
   const onMousedown = (event) => event.preventDefault();
   const onClick = (event) => {
-    const index = indexOf(event);
-    if (Number.isFinite(index)) host.dispatch("select", { index });
+    const row = rowOf(event);
+    if (row && !row.hidden && row.getAttribute("aria-disabled") !== "true") host.dispatch("select", { index: Number(row.dataset.index), value: row.dataset.value ?? "" });
   };
   const onMouseover = (event) => {
-    const index = indexOf(event);
-    if (!Number.isFinite(index) || index === host.state.active) return;
+    const row = rowOf(event);
+    if (!row || row.hidden || row.getAttribute("aria-disabled") === "true") return;
+    const index = Number(row.dataset.index);
+    if (index === host.state.active) return;
     host.state.active = index;
-    host.dispatch("highlight", { index });
+    syncOptions();
+    host.dispatch("highlight", { index, value: row.dataset.value ?? "" });
   };
+  const observer = new MutationObserver(syncOptions);
+  observer.observe(element, { childList: true, subtree: true });
   element.addEventListener("mousedown", onMousedown);
   element.addEventListener("click", onClick);
   element.addEventListener("mouseover", onMouseover);
@@ -33,6 +66,7 @@ export default function controller(host) {
   window.visualViewport?.addEventListener("scroll", place);
   return () => {
     stop();
+    observer.disconnect();
     element.removeEventListener("mousedown", onMousedown);
     element.removeEventListener("click", onClick);
     element.removeEventListener("mouseover", onMouseover);

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

@@ -0,0 +1,31 @@
+<template component="ui-editor-slash-menu-group">
+  <defs>
+    <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 class="heading" $value="label"></div>
+      <ul role="presentation"><slot></slot></ul>
+    </div>
+  </li>
+  <style>
+    :host {
+      display: block;
+      list-style: none;
+    }
+    .heading {
+      padding: var(--ui-space-2) var(--ui-space-3) var(--ui-space-1);
+      color: var(--ui-text-muted);
+      font-size: var(--ui-font-size-xs);
+      font-weight: var(--ui-font-semibold);
+    }
+    ul {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+    :host[hidden] {
+      display: none;
+    }
+  </style>
+</template>

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

@@ -0,0 +1,75 @@
+<link rel="component" href="../ui-icon/ui-icon.html">
+<template component="ui-editor-slash-menu-item">
+  <defs>
+    <prop name="value" type="string" default="">Stable identifier reported by the containing Slash Menu when this command is chosen.</prop>
+    <prop name="icon" type="string" default="">A Lucide icon name for the leading symbol.</prop>
+    <prop name="description" type="string" default="">One line explaining the command.</prop>
+    <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>
+    <span class="body"><span class="title"><slot></slot></span><span $if="description" class="description" $value="description"></span></span>
+  </li>
+  <style>
+    :host {
+      display: flex;
+      align-items: center;
+      gap: var(--ui-space-3);
+      min-block-size: 44px;
+      padding: var(--ui-space-2) var(--ui-space-3);
+      cursor: pointer;
+      list-style: none;
+    }
+
+    :host[aria-selected="true"] {
+      background: var(--ui-accent-subtle);
+    }
+    :host[aria-disabled="true"] {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+
+    .icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      inline-size: 32px;
+      block-size: 32px;
+      flex: 0 0 auto;
+      color: var(--ui-text-secondary);
+      background: var(--ui-surface-hover);
+      border: 1px solid var(--ui-border);
+      border-radius: var(--ui-radius-md);
+    }
+
+    .icon {
+      --_ui-default-icon-size: 1rem;
+    }
+
+    .body {
+      display: flex;
+      min-inline-size: 0;
+      flex-direction: column;
+      gap: 1px;
+    }
+    .title, .description {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .title {
+      color: var(--ui-text-primary);
+      font-size: var(--ui-font-size-sm);
+      font-weight: var(--ui-font-medium);
+    }
+    .description {
+      color: var(--ui-text-muted);
+      font-size: var(--ui-font-size-xs);
+    }
+
+    :host[hidden] {
+      display: none;
+    }
+  </style>
+</template>

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

@@ -2,20 +2,23 @@
 <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="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 | clear-cells | merge-cells | split-cell | delete-row | delete-column | delete-table)"
+      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>
     <state
       name="sections"
-      type="list(object({ heading: string, items: list(object({ action: string, label: string, icon: string, danger: boolean })) }))"
+      type="list(object({ heading: string, items: list(object({ action: string, label: string, icon: string, danger: boolean, checkable: boolean, checked: boolean })) }))"
       :value="[]"
     ></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 | clear-cells | merge-cells | split-cell | delete-row | delete-column | delete-table })"
+      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>
   </defs>
   <div role="menu" :hidden="not open">
@@ -41,7 +44,15 @@
       <div class="sep"></div>
       <div class="section" role="none">
         <div class="heading" role="presentation" $value="section.heading"></div>
-        <button $each="item of section.items" $key="item.action" type="button" role="menuitem" class:danger="item.danger" :data-action="item.action">
+        <button
+          $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)]"
+          class:danger="item.danger"
+          :data-action="item.action"
+        >
           <ui-icon :name="item.icon"></ui-icon>
           <span $value="item.label"></span>
         </button>
@@ -123,7 +134,7 @@
       display: inline-flex;
       width: 1rem;
       height: 1rem;
-      border-radius: 999px;
+      border-radius: var(--ui-radius-round);
       border: 1px solid var(--ui-border);
       background: var(--_swatch, #fff);
       box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.35);

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

@@ -6,6 +6,12 @@ const sections = [
     ["add-row-after", "Add row below", "panel-bottom"],
     ["add-column-before", "Add column left", "panel-left"],
     ["add-column-after", "Add column right", "panel-right"],
+    ["toggle-header-row", "Header row", "rows"],
+    ["toggle-header-column", "Header column", "columns"],
+    ["move-row-up", "Move row up", "rows"],
+    ["move-row-down", "Move row down", "rows"],
+    ["move-column-left", "Move column left", "columns"],
+    ["move-column-right", "Move column right", "columns"],
   ]],
   ["Cells", [
     ["clear-cells", "Clear selected cells", "eraser"],
@@ -42,7 +48,9 @@ export default function controller(host) {
     frame = requestAnimationFrame(nudge);
   };
   const stop = host.effect(() => {
-    const enabled = new Set(Array.isArray(host.state.actions) ? host.state.actions : []);
+    const scope = String(host.state.scope || "cell");
+    const enabled = new Set((Array.isArray(host.state.actions) ? host.state.actions : []).filter((action) =>
+      scope === "cell" || (scope === "row" ? !action.includes("column") : !action.includes("row"))));
     const background = String(host.state.cellBackground ?? "");
     const swatches = backgrounds.filter(([action]) => enabled.has(action))
       .map(([action, label, color]) => ({ action, label, color, selected: color === background }));
@@ -51,7 +59,7 @@ export default function controller(host) {
       .map(([heading, items]) => ({
         heading,
         items: items.filter(([action]) => enabled.has(action))
-          .map(([action, label, icon, tone]) => ({ action, label, icon, danger: tone === "danger" })),
+          .map(([action, label, icon, tone]) => ({ action, label, icon, danger: tone === "danger", checkable: action.startsWith("toggle-header-"), checked: action === "toggle-header-row" ? Boolean(host.state.headerRow) : action === "toggle-header-column" ? Boolean(host.state.headerColumn) : false })),
       }))
       .filter((section) => section.items.length);
     if (host.state.open) schedule();

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

@@ -29,7 +29,7 @@
     <state name="activeKey" :value="''"></state>
     <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: open-cell-menu, rowIndex: integer, columnIndex: integer, anchor: object({ left: number, top: number, right: number, bottom: number }) })"
+      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: open-cell-menu | open-row-menu | open-column-menu, rowIndex: integer, columnIndex: integer, anchor: object({ left: number, top: number, right: number, bottom: number }) })"
     ></event>
   </defs>
   <div aria-label="Table controls" :hidden="not open">
@@ -89,8 +89,8 @@
         data-action="select-row"
         :data-row-index="hovered.rowIndex"
         :data-column-index="hovered.columnIndex"
-        title="Select row"
-        aria-label="Select row"
+        title="Row actions"
+        aria-label="Row actions"
       >
         <span class="glyph"><ui-icon name="grip-vertical"></ui-icon></span>
       </button>
@@ -101,8 +101,8 @@
         data-action="select-column"
         :data-row-index="hovered.rowIndex"
         :data-column-index="hovered.columnIndex"
-        title="Select column"
-        aria-label="Select column"
+        title="Column actions"
+        aria-label="Column actions"
       >
         <span class="glyph"><ui-icon name="grip-horizontal"></ui-icon></span>
       </button>

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

@@ -93,8 +93,11 @@ export default function controller(host) {
     if (!button) return;
     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 });
-    else if (action === "open-cell-menu") {
+    if (action === "select-row" || action === "select-column") {
+      host.dispatch("action", { 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 } });
+    } 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) });

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

@@ -4,23 +4,25 @@
     <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="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 | clear-cells | merge-cells | split-cell | delete-row | delete-column | delete-table)"
+      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>
     <state name="swatches" type="list(object({ action: string, label: string, color: string, selected: boolean }))" :value="[]"></state>
     <state
       name="sections"
-      type="list(object({ heading: string, items: list(object({ action: string, label: string, icon: string, danger: boolean })) }))"
+      type="list(object({ heading: string, items: list(object({ action: string, label: string, icon: string, danger: boolean, checkable: boolean, checked: boolean })) }))"
       :value="[]"
     ></state>
     <state name="hasOverflow" :value="false"></state>
     <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 | clear-cells | merge-cells | split-cell | delete-row | delete-column | delete-table })"
+      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>
   </defs>
   <div role="toolbar" aria-label="Table actions" :hidden="not open">
@@ -74,7 +76,15 @@
         </div>
         <div $each="section of sections" $key="section.heading" class="menu-section divided" role="none">
           <div class="menu-heading" role="presentation" $value="section.heading"></div>
-          <button $each="item of section.items" $key="item.action" type="button" role="menuitem" class:danger="item.danger" :data-action="item.action">
+          <button
+            $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)]"
+            class:danger="item.danger"
+            :data-action="item.action"
+          >
             <ui-icon :name="item.icon"></ui-icon>
             <span $value="item.label"></span>
           </button>

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

@@ -1,7 +1,7 @@
 import { backgrounds } from "../shared/editor.js";
 
 const overflowSections = [
-  ["Structure", [["add-row-before", "Add row above", "panel-top"], ["add-column-before", "Add column left", "panel-left"]]],
+  ["Structure", [["add-row-before", "Add row above", "panel-top"], ["add-column-before", "Add column left", "panel-left"], ["toggle-header-row", "Header row", "rows"], ["toggle-header-column", "Header column", "columns"], ["move-row-up", "Move row up", "rows"], ["move-row-down", "Move row down", "rows"], ["move-column-left", "Move column left", "columns"], ["move-column-right", "Move column right", "columns"]]],
   ["Cells", [["clear-cells", "Clear selected cells", "eraser"], ["merge-cells", "Merge selected cells", "merge"], ["split-cell", "Split merged cell", "split"]]],
   ["Table", [["delete-row", "Delete row", "trash", "danger"], ["delete-column", "Delete column", "trash", "danger"], ["delete-table", "Delete table", "trash", "danger"]]],
 ];
@@ -25,7 +25,7 @@ export default function controller(host) {
       .map(([heading, items]) => ({
         heading,
         items: items.filter(([action]) => enabled.has(action))
-          .map(([action, label, icon, tone]) => ({ action, label, icon, danger: tone === "danger" })),
+          .map(([action, label, icon, tone]) => ({ action, label, icon, danger: tone === "danger", checkable: action.startsWith("toggle-header-"), checked: action === "toggle-header-row" ? Boolean(host.state.headerRow) : action === "toggle-header-column" ? Boolean(host.state.headerColumn) : false })),
       }))
       .filter((section) => section.items.length);
     host.state.hasOverflow = host.state.swatches.length > 0 || host.state.sections.length > 0;

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

@@ -1,4 +1,4 @@
-<template component="ui-editor-toolbar">
+<template component="ui-editor-toolbar" controller="./ui-editor-toolbar.js">
   <defs>
     <prop name="floating" type="boolean" default="false">Shows the toolbar as a floating bar beside the selection rather than pinned to the editor.</prop>
   </defs>

package/components/ui-editor-toolbar/ui-editor-toolbar.js

@@ -0,0 +1,46 @@
+const selector = 'button, a[href], [role="button"], select, input:not([type="hidden"])';
+
+/** Keep one Tab stop in the toolbar; arrow keys move among its enabled authored controls. */
+export default function controller(host) {
+  const strip = host.refs.strip;
+  let current = null;
+  const controls = () => Array.from(strip.querySelectorAll(selector)).filter((element) =>
+    !element.disabled && element.getAttribute("aria-disabled") !== "true"
+    && !element.closest("[hidden], [inert], [role='menu'], [role='listbox']")
+    && element.getClientRects().length > 0);
+  const sync = () => {
+    const items = controls();
+    if (!items.includes(current)) current = items.find((item) => item.tabIndex === 0) ?? items[0] ?? null;
+    for (const item of items) item.tabIndex = item === current ? 0 : -1;
+  };
+  const onFocusin = (event) => {
+    const item = event.target.closest?.(selector);
+    if (!controls().includes(item)) return;
+    current = item;
+    sync();
+  };
+  const onKeydown = (event) => {
+    const items = controls();
+    const index = items.indexOf(event.target.closest?.(selector));
+    if (index < 0) return;
+    const rtl = getComputedStyle(strip).direction === "rtl";
+    let next;
+    if (event.key === "ArrowRight") next = (index + (rtl ? -1 : 1) + items.length) % items.length;
+    else if (event.key === "ArrowLeft") next = (index + (rtl ? 1 : -1) + items.length) % items.length;
+    else if (event.key === "Home") next = 0;
+    else if (event.key === "End") next = items.length - 1;
+    else return;
+    event.preventDefault();
+    items[next]?.focus();
+  };
+  const observer = new MutationObserver(sync);
+  observer.observe(strip, { childList: true, subtree: true, attributes: true, attributeFilter: ["disabled", "hidden", "aria-disabled"] });
+  strip.addEventListener("focusin", onFocusin);
+  strip.addEventListener("keydown", onKeydown);
+  sync();
+  return () => {
+    observer.disconnect();
+    strip.removeEventListener("focusin", onFocusin);
+    strip.removeEventListener("keydown", onKeydown);
+  };
+}

package/components/ui-floating-action-button/ui-floating-action-button.html

@@ -38,7 +38,7 @@
     :host {
       appearance: none;
       border: none;
-      border-radius: 999px;
+      border-radius: var(--ui-radius-round);
       margin: 0;
       padding: 0;
       display: inline-flex;

package/components/ui-form-field/ui-form-field.html

@@ -1,8 +1,8 @@
 <template component="ui-form-field" controller="./ui-form-field.js">
   <defs>
     <prop name="invalid" type="boolean" default="false"
-    >Marks the field's control invalid by setting aria-invalid on it. Pair it with content in the error slot, which the field already links to the control as
-      its description.</prop>
+    >Marks the field's control invalid by setting aria-invalid on it. Only while invalid, the error slot appears and becomes part of the control's
+      description.</prop>
     <prop name="disabled" type="boolean" default="false"
     >Disables the field's control: the first input, textarea, or select inside it. The field writes this to the control whenever it updates, so set it here
       rather than on the control.</prop>
@@ -18,6 +18,10 @@
   </div>
   <style>
     /* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-form-field-danger {
+      syntax: "*";
+      inherits: false;
+    }
     @property --ui-form-field-help-min-block-size {
       syntax: "*";
       inherits: false;
@@ -25,6 +29,7 @@
 
     :host {
       /* Hooks do not inherit, so the parts below read them from the root. */
+      --_ui-form-field-danger: var(--ui-form-field-danger);
       --_ui-form-field-help-min-block-size: var(--ui-form-field-help-min-block-size);
 
       display: grid;
@@ -57,10 +62,18 @@
       min-block-size: var(--_ui-form-field-help-min-block-size, 0);
     }
 
+    .error {
+      display: none;
+    }
+
+    :host-state([invalid]) .error {
+      display: contents;
+    }
+
     /* An error reads in the danger colour, the one the invalid control's border takes. */
     .error,
     :slotted([role="alert"]) {
-      color: var(--ui-danger);
+      color: var(--_ui-form-field-danger, var(--ui-field-danger, var(--ui-danger)));
       font-size: var(--ui-font-size-sm);
     }
 

package/components/ui-form-field/ui-form-field.js

@@ -44,7 +44,7 @@ export default function controller(host) {
       if (!help.id) help.id = id("form-field-help");
       described.push(help.id);
     }
-    if (error) {
+    if (error && host.state.invalid) {
       if (!error.id) error.id = id("form-field-error");
       described.push(error.id);
     }