@threadlabs/looma 0.30.9 → 0.31.0

package/components/ui-affordance-scope/ui-affordance-scope.html

@@ -1,4 +1,4 @@
-<template component="ui-affordance-scope" controller="./ui-affordance-scope.js">
+<template component="ui-affordance-scope" module="./ui-affordance-scope.js">
   <defs>
     <prop name="nearRadius" type="number" default="16">How close, in pixels, the pointer must come to reveal an affordance.</prop>
     <prop name="guide" type="keyword" values="dot, none" default="dot"

package/components/ui-affordance-scope/ui-affordance-scope.js

@@ -6,7 +6,7 @@ function distance(point, rect) {
   return Math.hypot(dx, dy);
 }
 
-function connect(host) {
+export function connect(host) {
   const element = host.element;
   const owner = element.ownerDocument.defaultView;
   let anchors = [];
@@ -70,8 +70,3 @@ function connect(host) {
     clear();
   };
 }
-
-/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-export default function controller(host) {
-  host.on("connect", () => connect(host));
-}

package/components/ui-avatar/ui-avatar.html

@@ -1,5 +1,5 @@
 <link rel="component" href="../ui-icon/ui-icon.html">
-<template component="ui-avatar" controller="./ui-avatar.js">
+<template component="ui-avatar" module="./ui-avatar.js">
   <defs>
     <prop name="src" type="string"
     >The image to show, cropped to fill the circle. Until it loads, or if it fails, the avatar shows initials instead. An img element authored inside the avatar

package/components/ui-avatar/ui-avatar.js

@@ -6,7 +6,7 @@ function toInitials(value) {
 }
 
 // Shows an authored <img>, else the `src` image, else initials, and tracks whether the image loaded.
-function connect(host) {
+export function connect(host) {
   const element = host.element;
   const managed = host.refs.image;
   let active;
@@ -51,8 +51,3 @@ function connect(host) {
     active?.removeEventListener("error", onError);
   };
 }
-
-/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-export default function controller(host) {
-  host.on("connect", () => connect(host));
-}

package/components/ui-avatar-group/ui-avatar-group.html

@@ -1,4 +1,4 @@
-<template component="ui-avatar-group" controller="./ui-avatar-group.js">
+<template component="ui-avatar-group" module="./ui-avatar-group.js">
   <defs>
     <prop name="max" type="number" default="5"
     >How many avatars to show. The rest are hidden and counted in a +N badge after the last visible one. Fractions round down, and 0 hides every avatar behind

package/components/ui-avatar-group/ui-avatar-group.js

@@ -1,6 +1,6 @@
 // Hides avatars beyond `max`, counts them into the "+N" badge, and overlaps the rest. Projected
 // avatars are component roots, which this component's styles do not reach, so the overlap is inline.
-function connect(host) {
+export function connect(host) {
   const element = host.element;
   const update = () => {
     const max = Number(host.props.max.value);
@@ -31,8 +31,3 @@ function connect(host) {
     observer.disconnect();
   };
 }
-
-/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-export default function controller(host) {
-  host.on("connect", () => connect(host));
-}

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

@@ -1,6 +1,6 @@
 <link rel="component" href="../ui-spinner/ui-spinner.html">
 <link rel="component" href="../ui-icon/ui-icon.html">
-<template component="ui-button" controller="./ui-button.js">
+<template component="ui-button" module="./ui-button.js">
   <defs>
     <prop name="variant" type="keyword" values="outline, solid, danger, ghost, link, card, field" default="outline"
     >Emphasis: how loudly the button asks. solid fills with its tone, outline draws its tone at the edge over a wash of it, ghost carries only text until it is

package/components/ui-button/ui-button.js

@@ -1,5 +1,5 @@
 // Loading actions retain focus but cannot activate, navigate, submit, or notify click consumers.
-function connect(host) {
+export function connect(host) {
   const onClick = (event) => {
     if (!host.props.loading.value && !host.props.pending.value) return;
     event.preventDefault();
@@ -8,8 +8,3 @@ function connect(host) {
   host.element.addEventListener("click", onClick, true);
   return () => host.element.removeEventListener("click", onClick, true);
 }
-
-/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-export default function controller(host) {
-  host.on("connect", () => connect(host));
-}

package/components/ui-checkbox/ui-checkbox.html

@@ -1,4 +1,4 @@
-<template component="ui-checkbox" controller="./ui-checkbox.js">
+<template component="ui-checkbox" module="./ui-checkbox.js">
   <defs>
     <prop name="label" type="string" default="">An accessible name for a checkbox without a visible label slot. It names the native input.</prop>
     <prop name="checked" type="boolean" default="false"

package/components/ui-checkbox/ui-checkbox.js

@@ -5,7 +5,7 @@ import { trackTrigger } from "../shared/trigger.js";
 // `checked` sets the control initially and whenever it changes; the user's changes update the state.
 // A form reset returns the control to `checked`. Vue writes the checked attribute on every render, so
 // the native default alone cannot hold it there.
-function connect(host) {
+export function connect(host) {
   const input = host.refs.input;
   describeInput(input, host.refs.description);
   const [trigger, stopTracking] = trackTrigger(host);
@@ -33,8 +33,3 @@ function connect(host) {
     input.removeEventListener("change", onChange);
   };
 }
-
-/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-export default function controller(host) {
-  host.on("connect", () => connect(host));
-}

package/components/ui-combobox/ui-combobox.html

@@ -1,6 +1,6 @@
 <link rel="component" href="../ui-badge/ui-badge.html">
 <link rel="component" href="../ui-tooltip/ui-tooltip.html">
-<template component="ui-combobox" controller="./ui-combobox.js">
+<template component="ui-combobox" module="./ui-combobox.js">
   <defs>
     <prop name="label" type="string" default=""
     >The field's label, tied to its input and shown above it; required adds an asterisk. It also names the suggestion list. Pair it with

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

@@ -21,7 +21,7 @@ function authoredOptions(container) {
   });
 }
 
-function connect(host) {
+export function connect(host) {
   const element = host.element;
   const document = element.ownerDocument;
   const uid = `ui-combobox-${++comboboxes}`;
@@ -580,8 +580,3 @@ function connect(host) {
     surface.destroy();
   };
 }
-
-/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-export default function controller(host) {
-  host.on("connect", () => connect(host));
-}

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

@@ -1,4 +1,4 @@
-<template component="ui-context-menu" controller="./ui-context-menu.js">
+<template component="ui-context-menu" module="./ui-context-menu.js">
   <defs>
     <prop name="open" type="boolean" default="false">Whether the context menu is open initially or when set externally.</prop>
     <prop name="for" type="string" default="">ID of the element whose context click (right-click, long-press, Shift+F10, or the Menu key) opens the menu.</prop>

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

@@ -5,7 +5,7 @@ function disabled(item) {
   return item.getAttribute("aria-disabled") === "true" || item.hasAttribute("disabled") || item.getAttribute("disabled") === "true";
 }
 
-function connect(host) {
+export function connect(host) {
   const element = host.element;
   const document = element.ownerDocument;
   const menuSurface = host.refs.menu;
@@ -157,8 +157,3 @@ function connect(host) {
     closeOverlay(document, overlayId);
   };
 }
-
-/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-export default function controller(host) {
-  host.on("connect", () => connect(host));
-}

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

@@ -1,5 +1,5 @@
 <link rel="component" href="../ui-scroll-area/ui-scroll-area.html">
-<template component="ui-dialog" controller="./ui-dialog.js">
+<template component="ui-dialog" module="./ui-dialog.js">
   <defs>
     <prop name="open" type="boolean" default="false">Whether the dialog is open initially or when set externally.</prop>
     <prop name="modal" type="boolean" default="false"

package/components/ui-dialog/ui-dialog.js

@@ -54,7 +54,7 @@ function observeContentHeight(dialog, refs) {
   return { reset, destroy() { reset(); observer.disconnect(); motion.removeEventListener("change", onMotionChange); } };
 }
 
-function connect(host) {
+export function connect(host) {
   const element = host.element;
   const document = element.ownerDocument;
   const dialog = element.localName === "dialog" ? element : element.querySelector("dialog");
@@ -186,8 +186,3 @@ function connect(host) {
     closeOverlay(document, overlayId);
   };
 }
-
-/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-export default function controller(host) {
-  host.on("connect", () => connect(host));
-}

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

@@ -1,4 +1,4 @@
-<template component="ui-disclosure" controller="./ui-disclosure.js">
+<template component="ui-disclosure" module="./ui-disclosure.js">
   <defs>
     <prop name="density" type="keyword" values="comfortable, compact" default="comfortable"
     >Compact trades padding and type size for rows that fit more on screen.</prop>

package/components/ui-disclosure/ui-disclosure.js

@@ -34,7 +34,7 @@ function leaveGroup(document, name, member) {
 }
 
 // `open` sets the disclosure initially and whenever it changes; the trigger toggles the state.
-function connect(host) {
+export function connect(host) {
   const document = host.element.ownerDocument;
   const [trigger, stopTracking] = trackTrigger(host);
   host.state.contentId = `ui-disclosure-${++disclosures}`;
@@ -119,8 +119,3 @@ function connect(host) {
     host.refs.panel.removeEventListener("beforematch", onBeforematch);
   };
 }
-
-/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-export default function controller(host) {
-  host.on("connect", () => connect(host));
-}

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

@@ -1,4 +1,4 @@
-<template component="ui-editable" controller="./ui-editable.js">
+<template component="ui-editable" module="./ui-editable.js">
   <defs>
     <prop name="value" type="string" default=""
     >The displayed value, and the text the editor starts from. It is not a form field: nothing is submitted with a form, so a form that needs the value copies

package/components/ui-editable/ui-editable.js

@@ -3,7 +3,7 @@ function triggerFor(event) {
 }
 
 /** Owns the display/edit transition so authors only provide value and label. */
-function connect(host) {
+export function connect(host) {
   const element = host.element;
   const document = element.ownerDocument;
   const { preview, input } = host.refs;
@@ -119,8 +119,3 @@ function connect(host) {
     document.removeEventListener("pointerdown", onDocumentPointerdown, true);
   };
 }
-
-/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-export default function controller(host) {
-  host.on("connect", () => connect(host));
-}

package/components/ui-editor-block-actions/ui-editor-block-actions.html

@@ -1,6 +1,6 @@
 <link rel="component" href="../ui-menu/ui-menu.html">
 <link rel="component" href="../ui-menu-item/ui-menu-item.html">
-<template component="ui-editor-block-actions" controller="./ui-editor-block-actions.js">
+<template component="ui-editor-block-actions" module="./ui-editor-block-actions.js">
   <defs>
     <prop name="for" type="string" default="">The id of the button that opens the menu and anchors it.</prop>
     <prop name="placement" type="keyword" values="bottom-start, top-start" default="bottom-start"

package/components/ui-editor-block-actions/ui-editor-block-actions.js

@@ -1,5 +1,5 @@
 // Reports the menu's choice as a block action.
-function connect(host) {
+export function connect(host) {
   const element = host.element;
   const onSelect = (event) => {
     if (event.target !== element && element.contains(event.target)) host.dispatch("action", { action: event.detail.value });
@@ -7,8 +7,3 @@ function connect(host) {
   element.addEventListener("select", onSelect);
   return () => element.removeEventListener("select", onSelect);
 }
-
-/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-export default function controller(host) {
-  host.on("connect", () => connect(host));
-}

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

@@ -2,7 +2,7 @@
 <link rel="component" href="../ui-input/ui-input.html">
 <link rel="component" href="../ui-radio-group/ui-radio-group.html">
 <link rel="component" href="../ui-swatch/ui-swatch.html">
-<template component="ui-editor-chip-editor" controller="./ui-editor-chip-editor.js">
+<template component="ui-editor-chip-editor" module="./ui-editor-chip-editor.js">
   <defs>
     <prop name="label" type="string" default="">The chip's text, shown in the field as the reader edits it.</prop>
     <prop name="color" type="keyword" values="neutral, blue, green, yellow, red, purple" default="neutral">The chip's colour, checked among the swatches.</prop>

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

@@ -1,6 +1,6 @@
 // Reports the chip's text and colour as they change, and Enter or Escape in the text field as done.
 // A colour chosen with the pointer returns focus to the text; the arrow keys stay among the swatches.
-function connect(host) {
+export function connect(host) {
   const element = host.element;
   const text = () => element.querySelector("[data-chip-label]");
   const onInput = (event) => {
@@ -26,8 +26,3 @@ function connect(host) {
     element.removeEventListener("keydown", onKeyDown);
   };
 }
-
-/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-export default function controller(host) {
-  host.on("connect", () => connect(host));
-}

package/components/ui-editor-code-language/ui-editor-code-language.html

@@ -1,5 +1,5 @@
 <link rel="component" href="../ui-combobox/ui-combobox.html">
-<template component="ui-editor-code-language" controller="./ui-editor-code-language.js">
+<template component="ui-editor-code-language" module="./ui-editor-code-language.js">
   <defs>
     <prop name="value" type="string" default="auto">The code block's language, or auto to detect it.</prop>
     <prop name="languages" type="list(object({ value: string, label: string }))"

package/components/ui-editor-code-language/ui-editor-code-language.js

@@ -1,5 +1,5 @@
 // Reports a chosen language; typing a filter is not a choice.
-function connect(host) {
+export function connect(host) {
   const element = host.element;
   const onValueChange = (event) => {
     if (event.target !== element && event.detail?.kind === "selection" && event.detail.value) host.dispatch("language", { value: event.detail.value });
@@ -7,8 +7,3 @@ function connect(host) {
   element.addEventListener("value-change", onValueChange);
   return () => element.removeEventListener("value-change", onValueChange);
 }
-
-/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-export default function controller(host) {
-  host.on("connect", () => connect(host));
-}

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

@@ -9,7 +9,7 @@
 <link rel="component" href="../ui-input/ui-input.html">
 <link rel="component" href="../ui-cluster/ui-cluster.html">
 <link rel="component" href="../ui-button/ui-button.html">
-<template component="ui-editor-image-toolbar" controller="./ui-editor-image-toolbar.js">
+<template component="ui-editor-image-toolbar" module="./ui-editor-image-toolbar.js">
   <defs>
     <prop name="placement" type="keyword" values="block, center, wrap-left, wrap-right" default="block"
     >How the selected image sits in the text; its command shows as pressed.</prop>

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

@@ -1,6 +1,6 @@
 // Gives each toolbar its own ids for its tooltips and description popover, reports placement,
 // description, and delete requests, and keeps the description draft tied to the image it opened for.
-function connect(host) {
+export function connect(host) {
   const element = host.element;
   if (host.state.base === "ui-editor-image-toolbar") host.state.base = `ui-editor-image-toolbar-${Math.random().toString(36).slice(2, 11)}`;
   let target = null;
@@ -48,8 +48,3 @@ function connect(host) {
     element.removeEventListener("submit", onSubmit);
   };
 }
-
-/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-export default function controller(host) {
-  host.on("connect", () => connect(host));
-}

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

@@ -1,4 +1,4 @@
-<template component="ui-editor-insert-table-grid" controller="./ui-editor-insert-table-grid.js">
+<template component="ui-editor-insert-table-grid" module="./ui-editor-insert-table-grid.js">
   <defs>
     <prop name="open" type="boolean" default="false">Whether the grid is shown.</prop>
     <prop name="maxRows" type="integer" default="8">The most rows the grid offers (at most 10).</prop>

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

@@ -4,7 +4,7 @@ function bounded(value, fallback) {
 }
 
 // Lays out the grid cells and inserts the chosen size by pointer or keyboard.
-function connect(host) {
+export function connect(host) {
   const element = host.element;
   let selected = { rows: 3, cols: 3 };
   let preview = null;
@@ -103,8 +103,3 @@ function connect(host) {
     host.refs.header.removeEventListener("change", onChange);
   };
 }
-
-/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-export default function controller(host) {
-  host.on("connect", () => connect(host));
-}

package/components/ui-editor-link-card/ui-editor-link-card.html

@@ -6,7 +6,7 @@
 <link rel="component" href="../ui-button/ui-button.html">
 <link rel="component" href="../ui-icon-button/ui-icon-button.html">
 <link rel="component" href="../ui-tooltip/ui-tooltip.html">
-<template component="ui-editor-link-card" controller="./ui-editor-link-card.js">
+<template component="ui-editor-link-card" module="./ui-editor-link-card.js">
   <defs>
     <prop name="href" type="string" default="">The link's destination, shown when there is no label.</prop>
     <prop name="openHref" type="string" default=""

package/components/ui-editor-link-card/ui-editor-link-card.js

@@ -1,6 +1,6 @@
 // Gives each card its own tooltip ids and reports edit and remove requests without taking focus
 // from the editor.
-function connect(host) {
+export function connect(host) {
   const element = host.element;
   if (host.state.base === "ui-editor-link-card") host.state.base = `ui-editor-link-card-${Math.random().toString(36).slice(2, 11)}`;
   const action = (event) => {
@@ -20,8 +20,3 @@ function connect(host) {
     element.removeEventListener("click", onClick);
   };
 }
-
-/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-export default function controller(host) {
-  host.on("connect", () => connect(host));
-}

package/components/ui-editor-link-form/ui-editor-link-form.html

@@ -8,7 +8,7 @@
 <link rel="component" href="../ui-scroll-area/ui-scroll-area.html">
 <link rel="component" href="../ui-search-result-row/ui-search-result-row.html">
 <link rel="component" href="../ui-checkbox/ui-checkbox.html">
-<template component="ui-editor-link-form" controller="./ui-editor-link-form.js">
+<template component="ui-editor-link-form" module="./ui-editor-link-form.js">
   <defs>
     <prop name="existing" type="boolean" default="false">Whether the link already exists, so the heading reads Edit link rather than Add link.</prop>
     <prop name="searchable" type="boolean" default="false"

package/components/ui-editor-link-form/ui-editor-link-form.js

@@ -1,6 +1,6 @@
 // Gives each form its own field ids, reports field changes and choices, saves on Enter in a field,
 // closes on Escape, and moves between the search field and its results with the arrow keys.
-function connect(host) {
+export function connect(host) {
   const element = host.element;
   if (host.state.base === "ui-editor-link-form") host.state.base = `ui-editor-link-form-${Math.random().toString(36).slice(2, 11)}`;
   const within = (event, selector) => {
@@ -64,8 +64,3 @@ function connect(host) {
     element.removeEventListener("submit", onSubmit);
   };
 }
-
-/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-export default function controller(host) {
-  host.on("connect", () => connect(host));
-}

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

@@ -1,5 +1,5 @@
 <link rel="component" href="../ui-editor-mention-menu-item/ui-editor-mention-menu-item.html">
-<template component="ui-editor-mention-menu" controller="./ui-editor-mention-menu.js">
+<template component="ui-editor-mention-menu" module="./ui-editor-mention-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 @.</prop>

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

@@ -2,7 +2,7 @@ import { createViewportSurface } from "../shared/overlay.js";
 import { normalizeAnchor, positionMenu } from "../shared/editor.js";
 
 // Places the menu at the @ and derives its rows; the template renders them.
-function connect(host) {
+export function connect(host) {
   const element = host.element;
   const authoredLabel = element.hasAttribute("aria-label") || element.hasAttribute("aria-labelledby");
   const place = () => {
@@ -66,8 +66,3 @@ function connect(host) {
     element.removeEventListener("mouseover", onMouseover);
   };
 }
-
-/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-export default function controller(host) {
-  host.on("connect", () => connect(host));
-}

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

@@ -1,7 +1,7 @@
 <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">
+<template component="ui-editor-slash-menu" module="./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>

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

@@ -2,7 +2,7 @@ import { createViewportSurface } from "../shared/overlay.js";
 import { normalizeAnchor, positionMenu } from "../shared/editor.js";
 
 // Places the menu at the slash and tracks the highlighted item; the template renders the items.
-function connect(host) {
+export function connect(host) {
   const element = host.element;
   const authoredLabel = element.hasAttribute("aria-label") || element.hasAttribute("aria-labelledby");
   const place = () => {
@@ -72,8 +72,3 @@ function connect(host) {
     element.removeEventListener("mouseover", onMouseover);
   };
 }
-
-/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-export default function controller(host) {
-  host.on("connect", () => connect(host));
-}

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

@@ -1,5 +1,5 @@
 <link rel="component" href="../ui-icon/ui-icon.html">
-<template component="ui-editor-table-context-menu" controller="./ui-editor-table-context-menu.js">
+<template component="ui-editor-table-context-menu" module="./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="keyword" values="cell, row, column" default="cell">Keeps structure actions relevant to a cell, row handle, or column handle.</prop>

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

@@ -28,7 +28,7 @@ const sections = [
 
 // Shows the menu at the place it is written, keeping one in a floating box inside the viewport, and lists
 // the actions the selection permits.
-function connect(host) {
+export function connect(host) {
   const element = host.element;
   let place = null;
   const nudge = () => {
@@ -109,8 +109,3 @@ function connect(host) {
     element.removeEventListener("click", onClick);
   };
 }
-
-/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-export default function controller(host) {
-  host.on("connect", () => connect(host));
-}

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

@@ -1,5 +1,5 @@
 <link rel="component" href="../ui-icon/ui-icon.html">
-<template component="ui-editor-table-overlay" controller="./ui-editor-table-overlay.js">
+<template component="ui-editor-table-overlay" module="./ui-editor-table-overlay.js">
   <defs>
     <prop name="open" type="boolean" default="false">Shows the controls after the editor has supplied current geometry.</prop>
     <prop

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

@@ -47,7 +47,7 @@ function createProximity(scope, selector = ".handle[data-ui-affordance]", radius
   } };
 }
 
-function connect(host) {
+export function connect(host) {
   const element = host.element;
   const proximity = createProximity(element);
   let drag = null;
@@ -173,8 +173,3 @@ function connect(host) {
     element.removeEventListener("focusout", leave);
   };
 }
-
-/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-export default function controller(host) {
-  host.on("connect", () => connect(host));
-}

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

@@ -1,5 +1,5 @@
 <link rel="component" href="../ui-icon/ui-icon.html">
-<template component="ui-editor-table-toolbar" controller="./ui-editor-table-toolbar.js">
+<template component="ui-editor-table-toolbar" module="./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="keyword" values="left, center, right" default="left"

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

@@ -8,7 +8,7 @@ const overflowSections = [
 ];
 
 // Lists the actions the table selection permits; the overflow menu opens and closes here.
-function connect(host) {
+export function connect(host) {
   const element = host.element;
   let alive = true;
   let menu = null;
@@ -93,8 +93,3 @@ function connect(host) {
     element.removeEventListener("click", onClick);
   };
 }
-
-/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-export default function controller(host) {
-  host.on("connect", () => connect(host));
-}

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

@@ -1,4 +1,4 @@
-<template component="ui-editor-toolbar" controller="./ui-editor-toolbar.js">
+<template component="ui-editor-toolbar" module="./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

@@ -1,7 +1,7 @@
 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. */
-function connect(host) {
+export function connect(host) {
   const strip = host.refs.strip;
   let current = null;
   const controls = () => Array.from(strip.querySelectorAll(selector)).filter((element) =>
@@ -44,8 +44,3 @@ function connect(host) {
     strip.removeEventListener("keydown", onKeydown);
   };
 }
-
-/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-export default function controller(host) {
-  host.on("connect", () => connect(host));
-}

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

@@ -1,4 +1,4 @@
-<template component="ui-form-field" controller="./ui-form-field.js">
+<template component="ui-form-field" module="./ui-form-field.js">
   <defs>
     <prop name="invalid" type="boolean" default="false"
     >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