@threadlabs/looma 0.30.9 → 0.31.0

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

@@ -11,7 +11,7 @@ function descriptionIds(input) {
   return Array.from(new Set((input.getAttribute("aria-describedby") ?? "").split(/\s+/).filter(Boolean)));
 }
 
-function connect(host) {
+export function connect(host) {
   const element = host.element;
   let activeInput = null;
   let owned = new Set();
@@ -74,8 +74,3 @@ function connect(host) {
     removeOwned(activeInput);
   };
 }
-
-/** 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-icon-button/ui-icon-button.html

@@ -1,5 +1,5 @@
 <link rel="component" href="../ui-spinner/ui-spinner.html">
-<template component="ui-icon-button" controller="./ui-icon-button.js">
+<template component="ui-icon-button" module="./ui-icon-button.js">
   <defs>
     <prop name="disabled" type="boolean" default="false"
     >Disables the button, so it cannot be pressed or focused, and gives it a flat neutral surface and muted icon.</prop>

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

@@ -1,5 +1,5 @@
 // Marks an anticipatory button for the enclosing ui-affordance-scope, which reveals it on proximity.
-function connect(host) {
+export function connect(host) {
   const stop = host.effect(() => {
     if (host.props.anticipatory.value) host.element.setAttribute("data-ui-affordance", "button");
     else host.element.removeAttribute("data-ui-affordance");
@@ -15,8 +15,3 @@ function connect(host) {
     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-image/ui-image.html

@@ -1,4 +1,4 @@
-<template component="ui-image" controller="./ui-image.js">
+<template component="ui-image" module="./ui-image.js">
   <defs>
     <prop name="src" type="string" default="">The image source, used by the default media.</prop>
     <prop name="alt" type="string" default="">A text alternative for the image.</prop>

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

@@ -2,7 +2,7 @@
  * @lifecycle Pointer capture ends on release, Escape, cancellation, or teardown.
  * Only release commits a drag, so consumers can make it one undo operation.
  */
-function connect(host) {
+export function connect(host) {
   const root = host.element;
   const frame = host.refs.frame;
   const document = root.ownerDocument;
@@ -105,8 +105,3 @@ function connect(host) {
     document.removeEventListener("keydown", onEscape, 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-input/ui-input.html

@@ -1,4 +1,4 @@
-<template component="ui-input" controller="./ui-input.js">
+<template component="ui-input" module="./ui-input.js">
   <defs>
     <prop
       name="type"

package/components/ui-input/ui-input.js

@@ -1,6 +1,6 @@
 // The value attribute only sets the default; a controlled value is applied to the live input. The
 // value is also made the native default, so a form reset returns to it.
-function connect(host) {
+export function connect(host) {
   return host.effect(() => {
     const value = host.props.value.value;
     if (value === undefined || value === null) return;
@@ -14,8 +14,3 @@ function connect(host) {
     input.value = text;
   });
 }
-
-/** 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-input-group/ui-input-group.html

@@ -1,4 +1,4 @@
-<template component="ui-input-group" controller="./ui-input-group.js">
+<template component="ui-input-group" module="./ui-input-group.js">
   <defs>
     <prop name="variant" type="keyword" values="outline, subtle" default="outline"
     >outline uses the standard field edge and surface. subtle uses a quiet decorative edge and muted surface for a multiline composer. Both retain the same

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

@@ -15,7 +15,7 @@ const affixProblem = (affix) =>
 // instead, so the input's name stays its label and the affix is read once, with the input. The
 // consumer's own aria-describedby (or a Form Field's) is kept. A press on an affix, or anywhere in
 // the box outside the input, focuses the input without moving its caret or selecting the affix.
-function connect(host) {
+export function connect(host) {
   const element = host.element;
   let owned = [];
   let described = null;
@@ -82,8 +82,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-listbox/ui-listbox.html

@@ -1,5 +1,5 @@
 <link rel="component" href="../ui-scroll-area/ui-scroll-area.html">
-<template component="ui-listbox" controller="./ui-listbox.js">
+<template component="ui-listbox" module="./ui-listbox.js">
   <defs>
     <prop name="rows" type="number" default="5">The maximum number of choices visible before the list scrolls. Use at least two.</prop>
     <prop name="multiple" type="boolean" default="false">Allows several choices, each shown with a checkmark when selected.</prop>

package/components/ui-listbox/ui-listbox.js

@@ -13,7 +13,7 @@ function readOptions(container) {
   }));
 }
 
-function connect(host) {
+export function connect(host) {
   const element = host.element;
   const { options: authored, validity } = host.refs;
   const form = element.closest("form");
@@ -169,8 +169,3 @@ function connect(host) {
     validity.removeEventListener("invalid", onInvalid);
   };
 }
-
-/** 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-menu/ui-menu.html

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

@@ -11,7 +11,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 overlayId = `ui-menu-${Math.random().toString(36).slice(2, 11)}`;
@@ -139,8 +139,3 @@ function connect(host) {
     releaseAnchor();
   };
 }
-
-/** 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-menu-item/ui-menu-item.html

@@ -1,5 +1,5 @@
 <link rel="component" href="../ui-icon/ui-icon.html">
-<template component="ui-menu-item" controller="./ui-menu-item.js">
+<template component="ui-menu-item" module="./ui-menu-item.js">
   <defs>
     <prop name="disabled" type="boolean" default="false"
     >Makes the item unavailable: it is faded, skipped by the arrow keys, and choosing it does nothing. It stays visible and is announced as disabled.</prop>

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

@@ -2,7 +2,7 @@ function radioScope(item) {
   return item.closest('[role="group"]') ?? item.closest('[role="menu"]');
 }
 
-function connect(host) {
+export function connect(host) {
   const item = host.element;
   let external = Boolean(host.props.checked.value);
   host.state.internalChecked = external;
@@ -45,8 +45,3 @@ function connect(host) {
     item.removeEventListener("ui-menu-item-clear", onClear);
   };
 }
-
-/** 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-popover/ui-popover.html

@@ -1,4 +1,4 @@
-<template component="ui-popover" controller="./ui-popover.js">
+<template component="ui-popover" module="./ui-popover.js">
   <defs>
     <prop name="size" type="keyword" values="content, sm, md, lg" default="content"
     >Optional size preset. content keeps the existing intrinsic sizing; the other sizes constrain the surface for compact, medium, or large content.</prop>

package/components/ui-popover/ui-popover.js

@@ -1,6 +1,6 @@
 import { closeOverlay, createAnchoredSurface, createIdResolver, openOverlay, requestTopOverlayClose } from "../shared/overlay.js";
 
-function connect(host) {
+export function connect(host) {
   const element = host.element;
   const document = element.ownerDocument;
   const offset = () => {
@@ -100,8 +100,3 @@ function connect(host) {
     releaseAnchor();
   };
 }
-
-/** 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-radio/ui-radio.html

@@ -1,4 +1,4 @@
-<template component="ui-radio" controller="./ui-radio.js">
+<template component="ui-radio" module="./ui-radio.js">
   <defs>
     <prop name="checked" type="boolean" default="false"
     >Whether the radio is checked initially or when set externally. A form reset returns it to this. Inside a ui-radio-group the group's value decides

package/components/ui-radio/ui-radio.js

@@ -6,7 +6,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);
@@ -40,8 +40,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-radio-group/ui-radio-group.html

@@ -1,4 +1,4 @@
-<template component="ui-radio-group" controller="./ui-radio-group.js">
+<template component="ui-radio-group" module="./ui-radio-group.js">
   <defs>
     <prop name="value" type="string" default=""
     >The value of the checked radio, initially or when set externally; empty checks none. The user's choice updates it from there and is reported as select and

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

@@ -7,7 +7,7 @@ let groups = 0;
 // Native radios that share a name already move and check with the arrow keys. The group gives its
 // radios that name, applies a controlled value, and reports the user's choice. Its fieldset disables
 // them, so a radio's own disabled is never overwritten.
-function connect(host) {
+export function connect(host) {
   const element = host.element;
   const name = String(host.props.name.value || `ui-radio-group-${++groups}`);
   const [trigger, stopTracking] = trackTrigger(host);
@@ -60,8 +60,3 @@ function connect(host) {
     element.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-scroll-area/ui-scroll-area.html

@@ -1,4 +1,4 @@
-<template component="ui-scroll-area" controller="./ui-scroll-area.js">
+<template component="ui-scroll-area" module="./ui-scroll-area.js">
   <defs>
     <prop name="fill" type="boolean" default="false">Grows into remaining space within a flex layout while keeping content independently scrollable.</prop>
     <prop name="size" type="keyword" values="content, sm, md, lg" default="content"

package/components/ui-scroll-area/ui-scroll-area.js

@@ -1,4 +1,4 @@
-function connect(host) {
+export function connect(host) {
   const area = host.element;
   let frame = 0;
 
@@ -30,8 +30,3 @@ function connect(host) {
     if (frame) cancelAnimationFrame(frame);
   };
 }
-
-/** 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-search-shell/ui-search-shell.html

@@ -1,4 +1,4 @@
-<template component="ui-search-shell" controller="./ui-search-shell.js">
+<template component="ui-search-shell" module="./ui-search-shell.js">
   <defs>
     <prop name="open" type="boolean" default="false">Shows the search surface.</prop>
     <prop name="modal" type="boolean" default="false">Makes the rest of the page inert while the search surface is open.</prop>

package/components/ui-search-shell/ui-search-shell.js

@@ -2,7 +2,7 @@ import { closeDialog, closeOverlay, openOverlay, showDialog } from "../shared/ov
 import { trackTrigger } from "../shared/trigger.js";
 
 /** Owns native dialog state while leaving query and result state to the application. */
-function connect(host) {
+export function connect(host) {
   const dialog = host.refs.dialog;
   const document = dialog.ownerDocument;
   const overlayId = `ui-search-shell-${Math.random().toString(36).slice(2, 11)}`;
@@ -93,8 +93,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-select/ui-select.html

@@ -1,4 +1,4 @@
-<template component="ui-select" controller="./ui-select.js">
+<template component="ui-select" module="./ui-select.js">
   <defs>
     <prop name="value" type="string"
     >The value of the selected option, initially or when set externally. It is also the default, so a form reset returns to it rather than to the first

package/components/ui-select/ui-select.js

@@ -1,7 +1,7 @@
 // A controlled value can arrive before its projected <option> elements, so it is applied again
 // whenever the options change. The value's option is also marked the native default, so a form
 // reset returns to it rather than to the first option.
-function connect(host) {
+export function connect(host) {
   const select = host.element;
   const apply = () => {
     const value = host.props.value.value;
@@ -17,8 +17,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-sidebar/ui-sidebar.html

@@ -1,4 +1,4 @@
-<template component="ui-sidebar" controller="./ui-sidebar.js">
+<template component="ui-sidebar" module="./ui-sidebar.js">
   <defs>
     <prop name="side" type="keyword" values="start, end" default="start">The edge the sidebar sits on. The page places it beside its main content.</prop>
     <prop name="width" type="number" default="0">Docked width in pixels. 0 uses --ui-sidebar-width (280px by default); dragging the handle updates it.</prop>

package/components/ui-sidebar/ui-sidebar.js

@@ -12,7 +12,7 @@ function positive(value, fallback) {
  * off-canvas drawer (a popover). A button toggles it with the platform's invoker commands:
  * `<button commandfor="nav" command="--toggle">`.
  */
-function connect(host) {
+export function connect(host) {
   const element = host.element;
   const document = element.ownerDocument;
   const view = document.defaultView;
@@ -188,8 +188,3 @@ function connect(host) {
     document.removeEventListener("click", onDocumentClick);
   };
 }
-
-/** 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-switch/ui-switch.html

@@ -1,4 +1,4 @@
-<template component="ui-switch" controller="./ui-switch.js">
+<template component="ui-switch" module="./ui-switch.js">
   <defs>
     <prop name="checked" type="boolean" default="false">Whether the switch is checked initially or when set externally. A form reset returns it to this.</prop>
     <prop name="disabled" type="boolean" default="false">Disables the native switch, so it cannot be toggled or focused.</prop>

package/components/ui-switch/ui-switch.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-switcher/ui-switcher.html

@@ -1,4 +1,4 @@
-<template component="ui-switcher" controller="./ui-switcher.js">
+<template component="ui-switcher" module="./ui-switcher.js">
   <defs>
     <prop name="gap" type="keyword" values="xs, s, m, l, xl"
     >Space between items, on the spacing scale: xs is 0.5rem, s 0.75rem, m 1rem (also the default), l 1.5rem, and xl 2rem. The --ui-switcher-gap custom

package/components/ui-switcher/ui-switcher.js

@@ -1,5 +1,5 @@
 /** Stack the group when the authored child count exceeds the optional row limit. */
-function connect(host) {
+export function connect(host) {
   const element = host.element;
   const update = () => {
     const limit = Number(host.props.limit.value);
@@ -13,8 +13,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-table/ui-table.html

@@ -1,4 +1,4 @@
-<template component="ui-table" controller="./ui-table.js">
+<template component="ui-table" module="./ui-table.js">
   <defs>
     <prop name="density" type="keyword" values="comfortable, compact" default="comfortable"
     >How tall each row is. Every row is at least one control tall, so a row holding a control lines up with the rows around it. comfortable fits a control of

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

@@ -3,7 +3,7 @@
 // the table fits, the root is plain again, so it is not an empty stop in the tab order.
 let captions = 0;
 
-function connect(host) {
+export function connect(host) {
   const element = host.element;
   const authored = element.hasAttribute("tabindex") || element.hasAttribute("role");
   if (authored) return undefined;
@@ -53,8 +53,3 @@ function connect(host) {
     plain();
   };
 }
-
-/** 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-tabs/ui-tabs.html

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

@@ -13,7 +13,7 @@ function writeStored(group, label) {
 }
 
 /** Lists the authored panels (each labelled by its aria-label) as tabs and shows the selected one. */
-function connect(host) {
+export function connect(host) {
   const { list, panels: container } = host.refs;
   const [trigger, stopTracking] = trackTrigger(host);
   const panels = () => Array.from(container.children).filter((child) => child instanceof HTMLElement);
@@ -156,8 +156,3 @@ function connect(host) {
     list.removeEventListener("wheel", onWheel);
   };
 }
-
-/** 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-textarea/ui-textarea.html

@@ -1,4 +1,4 @@
-<template component="ui-textarea" controller="./ui-textarea.js">
+<template component="ui-textarea" module="./ui-textarea.js">
   <defs>
     <prop name="value" type="string"
     >The textarea's text. Setting or changing it replaces the live text; between changes the user's typing stands, so follow input events to keep it in step. It

package/components/ui-textarea/ui-textarea.js

@@ -1,6 +1,6 @@
 // The value attribute only sets the default; a controlled value is applied to the live textarea. The
 // value is also made the native default, so a form reset returns to it.
-function connect(host) {
+export function connect(host) {
   return host.effect(() => {
     const value = host.props.value.value;
     if (value === undefined || value === null) return;
@@ -8,8 +8,3 @@ function connect(host) {
     if (host.element.value !== String(value)) host.element.value = String(value);
   });
 }
-
-/** 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-toast/ui-toast.html

@@ -1,6 +1,6 @@
 <link rel="component" href="../ui-icon-button/ui-icon-button.html">
 <link rel="component" href="../ui-icon/ui-icon.html">
-<template component="ui-toast" controller="./ui-toast.js">
+<template component="ui-toast" module="./ui-toast.js">
   <defs>
     <prop name="tone" type="keyword" values="neutral, info, success, warning, danger" default="neutral"
     >Semantic accent for this message. Danger uses an assertive alert role; the other tones use polite status semantics.</prop>

package/components/ui-toast/ui-toast.js

@@ -5,7 +5,7 @@ function inputFor(event) {
 }
 
 /** An authored toast hides itself when dismissed, like a dialog closing; clearing hidden shows it again. */
-function connect(host) {
+export function connect(host) {
   const element = host.element;
   const { action } = host.refs;
   if (!element.id) element.id = `ui-toast-authored-${++toastSequence}`;
@@ -82,8 +82,3 @@ function connect(host) {
     element.removeEventListener("focusout", onFocusOut);
   };
 }
-
-/** 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-toast-region/ui-toast-region.html

@@ -1,6 +1,6 @@
 <link rel="component" href="../ui-icon-button/ui-icon-button.html">
 <link rel="component" href="../ui-icon/ui-icon.html">
-<template component="ui-toast-region" controller="./ui-toast-region.js">
+<template component="ui-toast-region" module="./ui-toast-region.js">
   <defs>
     <prop name="duration" type="number" default="0"
     >Default milliseconds for toasts added with the show-toast event or command; 0 keeps each until dismissed. Hover or focus pauses a timer.</prop>

package/components/ui-toast-region/ui-toast-region.js

@@ -7,7 +7,7 @@ let toastIds = 0;
  * Shows the region while it has authored or generated messages. Generated messages dismiss by
  * action or timeout; authored ui-toast children hide themselves, and a hidden one does not count.
  */
-function connect(host) {
+export function connect(host) {
   const element = host.element;
   const [trigger, stopTracking] = trackTrigger(host);
   const toasts = () => host.state.toasts ?? [];
@@ -119,8 +119,3 @@ function connect(host) {
     if (element.matches(":popover-open")) element.hidePopover();
   };
 }
-
-/** 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-tooltip/ui-tooltip.html

@@ -1,4 +1,4 @@
-<template component="ui-tooltip" controller="./ui-tooltip.js">
+<template component="ui-tooltip" module="./ui-tooltip.js">
   <defs>
     <prop name="for" type="string" default="">ID of the control described and visually anchored by the tooltip.</prop>
     <prop name="open" type="boolean" default="false">Whether the tooltip is open initially or when set externally.</prop>

package/components/ui-tooltip/ui-tooltip.js

@@ -2,7 +2,7 @@ import { closeOverlay, createAnchoredSurface, createIdResolver, onOverlayOpen, o
 
 const warmTooltips = new WeakMap();
 
-function connect(host) {
+export function connect(host) {
   const element = host.element;
   const document = element.ownerDocument;
   const warm = warmTooltips.get(document) ?? { active: 0, until: 0 };
@@ -212,8 +212,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-tree/ui-tree.html

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

@@ -16,7 +16,7 @@ function parentItem(item, tree) {
   return parent && tree.contains(parent) ? parent : null;
 }
 
-function connect(host) {
+export function connect(host) {
   const element = host.element;
   const document = element.ownerDocument;
   const itemSelector = '[role="treeitem"]';
@@ -483,8 +483,3 @@ function connect(host) {
     element.removeEventListener("click", onMoveClick, 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-tree-item/ui-tree-item.html

@@ -1,5 +1,5 @@
 <link rel="component" href="../ui-button/ui-button.html">
-<template component="ui-tree-item" controller="./ui-tree-item.js">
+<template component="ui-tree-item" module="./ui-tree-item.js">
   <defs>
     <prop name="itemId" type="string" default=""
     >The item's identifier, reported as sourceId and targetId in the tree's reorder events and as id in its expand event. A sortable item needs one to be