@threadlabs/looma 0.24.1 → 0.25.1

package/README.md

@@ -15,7 +15,7 @@ import "@threadlabs/looma/vue.css";
 import { Button, TopBar } from "@threadlabs/looma/vue";
 ```
 
-The Vue components are ordinary Vue 3.5 single-file components, compiled to JavaScript with
+The Vue components are ordinary Vue 3.5.43+ single-file components, compiled to JavaScript with
 declarations; the `.vue` sources ship beside them. They depend on Vue and Looma only.
 
 The editor is Tiptap-based and needs `@tiptap/vue-3@^2.11.5`:

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

@@ -19,7 +19,7 @@
     }
 
     /* Published to descendants: each guide multiplies its opacity by it, so none reaches them all. */
-    :host-state([guide="none"]) {
+    :host([guide="none"]) {
       --ui-affordance-scope-guide: 0;
     }
 

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

@@ -4,7 +4,7 @@ function distance(point, rect) {
   return Math.hypot(dx, dy);
 }
 
-export default function controller(host) {
+function connect(host) {
   const element = host.element;
   const owner = element.ownerDocument.defaultView;
   let anchors = [];
@@ -74,3 +74,8 @@ export default function controller(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

@@ -76,14 +76,14 @@
       text-transform: uppercase;
     }
 
-    :host-state([size="sm"]) {
+    :host([size="sm"]) {
       --_ui-default-icon-size: 1rem;
       inline-size: 1.75rem;
       block-size: 1.75rem;
       font-size: var(--ui-font-size-xs);
     }
 
-    :host-state([size="xs"]) {
+    :host([size="xs"]) {
       --_ui-default-icon-size: 0.75rem;
       inline-size: 1.25rem;
       block-size: 1.25rem;
@@ -96,13 +96,13 @@
       border-color: var(--ui-avatar-border, var(--ui-border-strong));
     }
 
-    :host-state([shape="square"]) {
+    :host([shape="square"]) {
       border-radius: var(--ui-avatar-radius, var(--ui-radius-md));
     }
 
     /* An outline, not a dot: the avatar clips its content to the circle, and an outline is drawn
        outside the box, so the ring survives the clip and the overlap in an Avatar Group. */
-    :host-state([active]) {
+    :host([active]) {
       outline: var(--ui-border-width) solid var(--ui-avatar-active-ring, var(--ui-accent-solid));
       outline-offset: var(--ui-border-width);
     }

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.
-export default function controller(host) {
+function connect(host) {
   const element = host.element;
   const managed = host.refs.image;
   let active;
@@ -51,3 +51,8 @@ export default function controller(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

@@ -81,13 +81,13 @@
       flex-shrink: 0;
     }
 
-    :host-state([size="sm"]) .overflow {
+    :host([size="sm"]) .overflow {
       margin-inline-start: -0.25rem;
       inline-size: 1.75rem;
       block-size: 1.75rem;
     }
 
-    :host-state([size="xs"]) .overflow {
+    :host([size="xs"]) .overflow {
       margin-inline-start: -0.1875rem;
       inline-size: 1.25rem;
       block-size: 1.25rem;

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.
-export default function controller(host) {
+function connect(host) {
   const element = host.element;
   const update = () => {
     const max = Number(host.props.max.value);
@@ -31,3 +31,8 @@ export default function controller(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-badge/ui-badge.html

@@ -126,7 +126,7 @@
       }
     }
 
-    :host-state([size="xs"]) {
+    :host([size="xs"]) {
       box-sizing: border-box;
       min-inline-size: 1rem;
       min-block-size: var(--ui-badge-min-block-size, 1rem);
@@ -135,61 +135,61 @@
       line-height: var(--ui-badge-line-height, 1);
     }
 
-    :host-state([tone="accent"]) {
+    :host([tone="accent"]) {
       --_badge-surface: var(--ui-accent-strong-surface, var(--ui-accent-solid));
       --_badge-border: var(--ui-accent-strong-surface, var(--ui-accent-solid));
       --_badge-text: var(--ui-accent-on-strong, var(--ui-text-on-accent));
     }
 
-    :host-state([tone="danger"]) {
+    :host([tone="danger"]) {
       --_badge-surface: var(--ui-danger-strong-surface, var(--ui-danger-solid));
       --_badge-border: var(--ui-danger-strong-surface, var(--ui-danger-solid));
       --_badge-text: var(--ui-danger-on-strong, var(--ui-text-on-accent));
     }
 
-    :host-state([tone="success"]) {
+    :host([tone="success"]) {
       --_badge-surface: var(--ui-success-strong-surface, var(--ui-success-solid));
       --_badge-border: var(--ui-success-strong-surface, var(--ui-success-solid));
       --_badge-text: var(--ui-success-on-strong, var(--ui-text-on-accent));
     }
 
-    :host-state([tone="warning"]) {
+    :host([tone="warning"]) {
       --_badge-surface: var(--ui-warning-strong-surface, var(--ui-warning-solid));
       --_badge-border: var(--ui-warning-strong-surface, var(--ui-warning-solid));
       --_badge-text: var(--ui-warning-on-strong, var(--ui-text-on-accent));
     }
 
-    :host-state([tone="info"]) {
+    :host([tone="info"]) {
       --_badge-surface: var(--ui-info-strong-surface, var(--ui-info-solid));
       --_badge-border: var(--ui-info-strong-surface, var(--ui-info-solid));
       --_badge-text: var(--ui-info-on-strong, var(--ui-text-on-accent));
     }
 
-    :host-state([variant="subtle"][tone="accent"]) {
+    :host([variant="subtle"][tone="accent"]) {
       --_badge-surface: color-mix(in srgb, var(--ui-accent-solid) 19%, var(--ui-surface-default));
       --_badge-border: color-mix(in srgb, var(--ui-accent-solid) 25%, var(--ui-surface-default));
       --_badge-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
     }
 
-    :host-state([variant="subtle"][tone="danger"]) {
+    :host([variant="subtle"][tone="danger"]) {
       --_badge-surface: color-mix(in srgb, var(--ui-danger-solid) 19%, var(--ui-surface-default));
       --_badge-border: color-mix(in srgb, var(--ui-danger-solid) 25%, var(--ui-surface-default));
       --_badge-text: var(--ui-danger-subtle-text, var(--ui-danger-solid));
     }
 
-    :host-state([variant="subtle"][tone="success"]) {
+    :host([variant="subtle"][tone="success"]) {
       --_badge-surface: color-mix(in srgb, var(--ui-success-solid) 19%, var(--ui-surface-default));
       --_badge-border: color-mix(in srgb, var(--ui-success-solid) 25%, var(--ui-surface-default));
       --_badge-text: var(--ui-success-subtle-text, var(--ui-success-solid));
     }
 
-    :host-state([variant="subtle"][tone="warning"]) {
+    :host([variant="subtle"][tone="warning"]) {
       --_badge-surface: color-mix(in srgb, var(--ui-warning-solid) 19%, var(--ui-surface-default));
       --_badge-border: color-mix(in srgb, var(--ui-warning-solid) 25%, var(--ui-surface-default));
       --_badge-text: var(--ui-warning-subtle-text, var(--ui-warning-solid));
     }
 
-    :host-state([variant="subtle"][tone="info"]) {
+    :host([variant="subtle"][tone="info"]) {
       --_badge-surface: color-mix(in srgb, var(--ui-info-solid) 19%, var(--ui-surface-default));
       --_badge-border: color-mix(in srgb, var(--ui-info-solid) 25%, var(--ui-surface-default));
       --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
@@ -197,13 +197,13 @@
 
     /* A solid colour fills with the ink. Its text is the page surface, mixed at 0% only so that it too is
        invalid while the hook is unset. */
-    :host-state([variant="solid"]) {
+    :host([variant="solid"]) {
       --_badge-color-surface: var(--_badge-color-ink);
       --_badge-color-border: var(--_badge-color-ink);
       --_badge-color-text: color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default));
     }
 
-    :host-state([variant="outline"]) {
+    :host([variant="outline"]) {
       --_badge-surface: var(--ui-surface-default);
       --_badge-border: var(--ui-border-strong);
       --_badge-text: var(--ui-text-secondary);
@@ -212,33 +212,33 @@
       --_badge-color-border: var(--_badge-color-ink);
     }
 
-    :host-state([variant="outline"][tone="accent"]) {
+    :host([variant="outline"][tone="accent"]) {
       --_badge-border: var(--ui-accent-solid);
       --_badge-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
     }
 
-    :host-state([variant="outline"][tone="danger"]) {
+    :host([variant="outline"][tone="danger"]) {
       --_badge-border: var(--ui-danger-solid);
       --_badge-text: var(--ui-danger-subtle-text, var(--ui-danger-solid));
     }
 
-    :host-state([variant="outline"][tone="success"]) {
+    :host([variant="outline"][tone="success"]) {
       --_badge-border: var(--ui-success-solid);
       --_badge-text: var(--ui-success-subtle-text, var(--ui-success-solid));
     }
 
-    :host-state([variant="outline"][tone="warning"]) {
+    :host([variant="outline"][tone="warning"]) {
       --_badge-border: var(--ui-warning-solid);
       --_badge-text: var(--ui-warning-subtle-text, var(--ui-warning-solid));
     }
 
-    :host-state([variant="outline"][tone="info"]) {
+    :host([variant="outline"][tone="info"]) {
       --_badge-border: var(--ui-info-solid);
       --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
     }
 
     /* An icon mark keeps the existing tone recipe and follows the global spacing and radius. */
-    :host-state([shape="square"]) {
+    :host([shape="square"]) {
       --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-4) * 2));
       display: inline-flex;
       box-sizing: border-box;
@@ -252,18 +252,18 @@
       text-box-trim: none;
     }
 
-    :host-state([shape="square"][size="xs"]) {
+    :host([shape="square"][size="xs"]) {
       --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-3) * 2));
     }
 
-    :host-state([shape="square"]) .label {
+    :host([shape="square"]) .label {
       display: inline-flex;
       align-items: center;
       justify-content: center;
     }
 
     /* A dot uses the badge's tone recipe; only its silhouette and visible label change. */
-    :host-state([shape="dot"]) {
+    :host([shape="dot"]) {
       position: relative;
       box-sizing: border-box;
       flex: none;
@@ -276,7 +276,7 @@
       text-box-trim: none;
     }
 
-    :host-state([shape="dot"]) .label {
+    :host([shape="dot"]) .label {
       position: absolute;
       inline-size: 1px;
       block-size: 1px;
@@ -287,7 +287,7 @@
 
     /* The clipped point needs an inset surface over an outer border-colour shape: a native border
        has no diagonal edge to follow. Keep this edge for every tag variant. */
-    :host-state([shape="tag"]) {
+    :host([shape="tag"]) {
       --_badge-point: var(--ui-badge-point, var(--ui-space-2));
 
       position: relative;
@@ -299,7 +299,7 @@
       clip-path: polygon(0 0, calc(100% - var(--_badge-point)) 0, 100% 50%, calc(100% - var(--_badge-point)) 100%, 0 100%);
     }
 
-    :host-state([shape="tag"])::before {
+    :host([shape="tag"])::before {
       content: "";
       position: absolute;
       inset: 0;
@@ -309,30 +309,30 @@
       pointer-events: none;
     }
 
-    :host-state([shape="tag"]):dir(rtl) {
+    :host([shape="tag"]):dir(rtl) {
       padding-inline-end: var(--ui-badge-padding-inline, var(--ui-space-2));
       padding-inline-start: calc(var(--ui-badge-padding-inline, var(--ui-space-2)) + var(--_badge-point));
       clip-path: polygon(var(--_badge-point) 0, 100% 0, 100% 100%, var(--_badge-point) 100%, 0 50%);
     }
 
-    :host-state([shape="tag"]):dir(rtl)::before {
+    :host([shape="tag"]):dir(rtl)::before {
       clip-path: polygon(var(--_badge-point) 0, 100% 0, 100% 100%, var(--_badge-point) 100%, 0 50%);
     }
 
     @media (forced-colors: active) {
-      :host-state([shape="dot"]) {
+      :host([shape="dot"]) {
         forced-color-adjust: none;
         border-color: CanvasText;
         background: CanvasText;
       }
 
-      :host-state([shape="tag"]) {
+      :host([shape="tag"]) {
         forced-color-adjust: none;
         background: CanvasText;
         color: CanvasText;
       }
 
-      :host-state([shape="tag"])::before {
+      :host([shape="tag"])::before {
         background: Canvas;
       }
     }

package/components/ui-breadcrumb-item/ui-breadcrumb-item.html

@@ -48,7 +48,7 @@
       text-decoration: underline;
     }
 
-    :host-state([current]) .content {
+    :host([current]) .content {
       color: var(--ui-text-primary);
       font-weight: var(--ui-font-medium);
     }

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

@@ -185,12 +185,12 @@
       color: var(--_tone-text);
     }
 
-    :host-state([align="start"]) {
+    :host([align="start"]) {
       justify-content: flex-start;
       text-align: start;
     }
 
-    :host-state([stretch]) {
+    :host([stretch]) {
       display: flex;
       inline-size: 100%;
     }
@@ -241,23 +241,23 @@
       }
     }
 
-    :host-state([size="xs"]) {
+    :host([size="xs"]) {
       min-block-size: 1.5rem;
       padding: calc(var(--ui-space-0-5) * 1.5) calc(var(--ui-space-1) * 1.25);
       font-size: var(--ui-font-size-xs);
     }
 
-    :host-state([shape="pill"]) {
+    :host([shape="pill"]) {
       border-radius: var(--ui-button-radius, var(--ui-radius-round));
     }
 
-    :host-state([size="sm"]) {
+    :host([size="sm"]) {
       min-block-size: var(--ui-control-size-sm);
       padding: var(--ui-space-1) var(--ui-space-2);
       font-size: var(--ui-font-size-sm);
     }
 
-    :host-state([size="lg"]) {
+    :host([size="lg"]) {
       min-block-size: var(--ui-control-size-lg);
       padding: var(--ui-space-3) var(--ui-space-4);
       font-size: var(--ui-font-size-md);
@@ -265,7 +265,7 @@
 
     /* Card actions inherit Button's palette and behavior; only their shared layout changes.
        The icon may contain any decorative composition. Empty icons remove their column. */
-    :host-state([variant="card"]) {
+    :host([variant="card"]) {
       display: grid;
       grid-template-columns: auto minmax(0, 1fr) auto;
       align-content: center;
@@ -278,10 +278,10 @@
       box-shadow: none;
       background-image: none;
     }
-    :host-state([variant="card"][size="lg"]) {
+    :host([variant="card"][size="lg"]) {
       min-block-size: max(var(--ui-control-min-block-size), var(--ui-control-size-lg));
     }
-    :host-state([variant="card"]):has(.card-icon:empty) {
+    :host([variant="card"]):has(.card-icon:empty) {
       grid-template-columns: minmax(0, 1fr) auto;
     }
     .card-icon {
@@ -314,19 +314,19 @@
       box-shadow: var(--ui-pressed);
     }
 
-    :host-state([variant="solid"]), :host-state([variant="danger"]) {
+    :host([variant="solid"]), :host([variant="danger"]) {
       border-color: var(--_tone);
       background-color: var(--_tone);
       color: var(--_on-tone);
       box-shadow: var(--ui-button-solid-shadow, var(--ui-raised));
     }
 
-    :is(:host-state([variant="solid"]), :host-state([variant="danger"])):hover:not(:disabled, [aria-disabled="true"]) {
+    :is(:host([variant="solid"]), :host([variant="danger"])):hover:not(:disabled, [aria-disabled="true"]) {
       background-color: var(--_tone-hover);
       border-color: var(--_tone-hover);
     }
 
-    :is(:host-state([variant="solid"]), :host-state([variant="danger"])):active:not(:disabled, [aria-disabled="true"]) {
+    :is(:host([variant="solid"]), :host([variant="danger"])):active:not(:disabled, [aria-disabled="true"]) {
       background-color: var(--_tone-active);
       border-color: var(--_tone-active);
       background-image: none;
@@ -335,7 +335,7 @@
 
     /* Tone is the colour, variant is the volume. Every pairing works: a danger outline is a
        destructive secondary action, not a special case. */
-    :host-state([tone="neutral"]) {
+    :host([tone="neutral"]) {
       --_hue: var(--ui-text);
       --_hue-hover: var(--ui-text);
       --_hue-active: var(--ui-text);
@@ -343,7 +343,7 @@
       --_on-hue: var(--ui-surface);
     }
 
-    :host-state([tone="danger"]), :host-state([variant="danger"]) {
+    :host([tone="danger"]), :host([variant="danger"]) {
       --_hue: var(--ui-danger);
       --_hue-hover: var(--ui-danger-hover);
       --_hue-active: var(--ui-danger-hover);
@@ -351,7 +351,7 @@
       --_on-hue: var(--ui-on-danger);
     }
 
-    :host-state([tone="success"]) {
+    :host([tone="success"]) {
       --_hue: var(--ui-success);
       --_hue-hover: color-mix(in srgb, var(--ui-success) 85%, #000);
       --_hue-active: color-mix(in srgb, var(--ui-success) 75%, #000);
@@ -359,7 +359,7 @@
       --_on-hue: var(--ui-surface);
     }
 
-    :host-state([tone="warning"]) {
+    :host([tone="warning"]) {
       --_hue: var(--ui-warning);
       --_hue-hover: color-mix(in srgb, var(--ui-warning) 85%, #000);
       --_hue-active: color-mix(in srgb, var(--ui-warning) 75%, #000);
@@ -367,7 +367,7 @@
       --_on-hue: var(--ui-surface);
     }
 
-    :host-state([tone="info"]) {
+    :host([tone="info"]) {
       --_hue: var(--ui-info);
       --_hue-hover: color-mix(in srgb, var(--ui-info) 85%, #000);
       --_hue-active: color-mix(in srgb, var(--ui-info) 75%, #000);
@@ -375,7 +375,7 @@
       --_on-hue: var(--ui-surface);
     }
 
-    :host-state([variant="ghost"]) {
+    :host([variant="ghost"]) {
       border-color: transparent;
       background: transparent;
       box-shadow: none;
@@ -383,14 +383,14 @@
     }
 
     /* Tints derive from the text colour, not a surface token, so hover and press show on any background. */
-    :host-state([variant="ghost"]):hover:not(:disabled, [aria-disabled="true"]) {
+    :host([variant="ghost"]):hover:not(:disabled, [aria-disabled="true"]) {
       background-color: var(--ui-button-ghost-hover-surface, oklch(from var(--_tone) l c h / 10%));
       border-color: transparent;
     }
 
     /* Pressed, or holding its menu open, a ghost button sinks slightly: a light surface with a faint
        edge and a soft inner shadow. Lighter than hover, so an open menu's trigger never reads as heavy. */
-    :host-state([variant="ghost"]):is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]) {
+    :host([variant="ghost"]):is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]) {
       background-color: var(--ui-button-ghost-active-surface, color-mix(in oklch, var(--ui-surface), var(--_tone) 3%));
       border-color: transparent;
       box-shadow: inset 0 0 0 1px oklch(from var(--_tone) l c h / 10%), inset 0 1px 2px oklch(from var(--_tone) l c h / 8%);
@@ -404,7 +404,7 @@
         var(--ui-focus-halo);
     }
 
-    :host-state([variant="solid"]):focus-visible {
+    :host([variant="solid"]):focus-visible {
       box-shadow:
         var(--ui-button-solid-shadow, var(--ui-raised)),
         var(--ui-focus-halo);
@@ -423,19 +423,19 @@
       box-shadow: none;
     }
 
-    :is(:host-state([loading]), :host-state([pending])):focus-visible {
+    :is(:host([loading]), :host([pending])):focus-visible {
       box-shadow: var(--ui-focus-halo);
     }
 
     /* Ghost keeps no border, but gains the same neutral surface as other disabled buttons. */
-    :host-state([variant="ghost"]):is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
+    :host([variant="ghost"]):is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
       background-color: var(--ui-disabled-surface);
       border-color: transparent;
     }
 
     /* The size states outrank :host, so sm is named too, or a small button would stay small. */
     @media (pointer: coarse) {
-      :host, :host-state([size="sm"]) {
+      :host, :host([size="sm"]) {
         min-block-size: var(--ui-control-min-block-size);
       }
     }
@@ -445,13 +445,13 @@
        a link-style one keeps its text size, so a standalone one ("See all" under a list) needs the
        area. xs sits inside a line of text the same way, so it keeps its size and gains the area too.
        Only these need it: a hit area on every button would reach over its neighbours. */
-    html[data-ui-input-modality="touch"] :host-state([variant="link"]),
-    html[data-ui-input-modality="touch"] :host-state([size="xs"]) {
+    html[data-ui-input-modality="touch"] :host([variant="link"]),
+    html[data-ui-input-modality="touch"] :host([size="xs"]) {
       position: relative;
     }
 
-    html[data-ui-input-modality="touch"] :host-state([variant="link"])::after,
-    html[data-ui-input-modality="touch"] :host-state([size="xs"])::after {
+    html[data-ui-input-modality="touch"] :host([variant="link"])::after,
+    html[data-ui-input-modality="touch"] :host([size="xs"])::after {
       position: absolute;
       inset: 50% auto auto 50%;
       inline-size: max(100%, var(--ui-control-min-block-size));
@@ -462,7 +462,7 @@
 
     /* Link: an inline text action. No box, padding, or minimum height (inline targets are exempt under
        WCAG 2.5.8); the inherited font; an underline that strengthens on hover; a visible focus ring. */
-    :host-state([variant="link"]) {
+    :host([variant="link"]) {
       display: inline;
       min-block-size: 0;
       padding: 0;
@@ -479,24 +479,24 @@
       transition: color var(--ui-motion-fast) var(--ui-motion-ease), text-decoration-color var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
-    :host-state([variant="link"]):hover:not(:disabled, [aria-disabled="true"]) {
+    :host([variant="link"]):hover:not(:disabled, [aria-disabled="true"]) {
       color: var(--ui-button-link-hover-text, var(--ui-text-primary));
       text-decoration-color: currentColor;
       background: none;
       transform: none;
     }
 
-    :host-state([variant="link"]):active:not(:disabled, [aria-disabled="true"]) {
+    :host([variant="link"]):active:not(:disabled, [aria-disabled="true"]) {
       background: none;
       transform: none;
     }
 
-    :host-state([variant="link"]):is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
+    :host([variant="link"]):is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
       background: none;
       border-color: transparent;
     }
 
-    :host-state([variant="link"]):focus-visible {
+    :host([variant="link"]):focus-visible {
       box-shadow: none;
       /* Fallback keeps the ring if the token is missing: an unresolved var() would void the outline. */
       outline: var(--ui-focus-width) solid var(--ui-focus-ring);

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

@@ -1,5 +1,5 @@
 // Loading actions retain focus but cannot activate, navigate, submit, or notify click consumers.
-export default function controller(host) {
+function connect(host) {
   const onClick = (event) => {
     if (!host.props.loading.value && !host.props.pending.value) return;
     event.preventDefault();
@@ -8,3 +8,8 @@ export default function controller(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-callout/ui-callout.html

@@ -136,25 +136,25 @@
       min-inline-size: 0;
     }
 
-    :host-state([tone="neutral"]), :host-state([tone="note"]) {
+    :host([tone="neutral"]), :host([tone="note"]) {
       --_callout-surface: var(--ui-surface-muted);
       --_callout-border: var(--ui-border-strong);
       --_callout-icon: var(--ui-text-secondary);
     }
 
-    :host-state([tone="warning"]) {
+    :host([tone="warning"]) {
       --_callout-surface: var(--ui-warning-soft);
       --_callout-border: var(--ui-warning-solid);
       --_callout-icon: var(--ui-warning-solid);
     }
 
-    :host-state([tone="success"]) {
+    :host([tone="success"]) {
       --_callout-surface: var(--ui-success-soft);
       --_callout-border: var(--ui-success-solid);
       --_callout-icon: var(--ui-success-solid);
     }
 
-    :host-state([tone="danger"]) {
+    :host([tone="danger"]) {
       --_callout-surface: var(--ui-danger-soft);
       --_callout-border: var(--ui-danger-solid);
       --_callout-icon: var(--ui-danger-solid);