@threadlabs/looma 0.14.8 → 0.15.0

package/components/shared/icons.js

@@ -8,10 +8,12 @@ export const icons = {
   "book-user": [["path",{"d":"M15 13a3 3 0 1 0-6 0"}],["path",{"d":"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20"}],["circle",{"cx":"12","cy":"8","r":"2"}]],
   "braces": [["path",{"d":"M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1"}],["path",{"d":"M16 21h1a2 2 0 0 0 2-2v-5c0-1.1.9-2 2-2a2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1"}]],
   "calculator": [["rect",{"width":"16","height":"20","x":"4","y":"2","rx":"2"}],["line",{"x1":"8","x2":"16","y1":"6","y2":"6"}],["line",{"x1":"16","x2":"16","y1":"14","y2":"18"}],["path",{"d":"M16 10h.01"}],["path",{"d":"M12 10h.01"}],["path",{"d":"M8 10h.01"}],["path",{"d":"M12 14h.01"}],["path",{"d":"M8 14h.01"}],["path",{"d":"M12 18h.01"}],["path",{"d":"M8 18h.01"}]],
+  "check": [["path",{"d":"M20 6 9 17l-5-5"}]],
   "chevron-down": [["path",{"d":"m6 9 6 6 6-6"}]],
   "chevron-left": [["path",{"d":"m15 18-6-6 6-6"}]],
   "chevron-right": [["path",{"d":"m9 18 6-6-6-6"}]],
   "circle-check": [["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"m9 12 2 2 4-4"}]],
+  "circle-dot": [["circle",{"cx":"12","cy":"12","r":"10"}],["circle",{"cx":"12","cy":"12","r":"1"}]],
   "circle-x": [["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"m15 9-6 6"}],["path",{"d":"m9 9 6 6"}]],
   "code-xml": [["path",{"d":"m18 16 4-4-4-4"}],["path",{"d":"m6 8-4 4 4 4"}],["path",{"d":"m14.5 4-5 16"}]],
   "columns": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M9 3v18"}],["path",{"d":"M15 3v18"}]],
@@ -31,6 +33,7 @@ export const icons = {
   "info": [["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"M12 16v-4"}],["path",{"d":"M12 8h.01"}]],
   "italic": [["line",{"x1":"19","x2":"10","y1":"4","y2":"4"}],["line",{"x1":"14","x2":"5","y1":"20","y2":"20"}],["line",{"x1":"15","x2":"9","y1":"4","y2":"20"}]],
   "layout-dashboard": [["rect",{"width":"7","height":"9","x":"3","y":"3","rx":"1"}],["rect",{"width":"7","height":"5","x":"14","y":"3","rx":"1"}],["rect",{"width":"7","height":"9","x":"14","y":"12","rx":"1"}],["rect",{"width":"7","height":"5","x":"3","y":"16","rx":"1"}]],
+  "link": [["path",{"d":"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"}],["path",{"d":"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"}]],
   "list": [["path",{"d":"M3 5h.01"}],["path",{"d":"M3 12h.01"}],["path",{"d":"M3 19h.01"}],["path",{"d":"M8 5h13"}],["path",{"d":"M8 12h13"}],["path",{"d":"M8 19h13"}]],
   "list-ordered": [["path",{"d":"M11 5h10"}],["path",{"d":"M11 12h10"}],["path",{"d":"M11 19h10"}],["path",{"d":"M4 4h1v5"}],["path",{"d":"M4 9h2"}],["path",{"d":"M6.5 20H3.4c0-1 2.6-1.925 2.6-3.5a1.5 1.5 0 0 0-2.6-1.02"}]],
   "list-todo": [["path",{"d":"M13 5h8"}],["path",{"d":"M13 12h8"}],["path",{"d":"M13 19h8"}],["path",{"d":"m3 17 2 2 4-4"}],["rect",{"x":"3","y":"4","width":"6","height":"6","rx":"1"}]],
@@ -58,5 +61,7 @@ export const icons = {
   "truck": [["path",{"d":"M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2"}],["path",{"d":"M15 18H9"}],["path",{"d":"M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14"}],["circle",{"cx":"17","cy":"18","r":"2"}],["circle",{"cx":"7","cy":"18","r":"2"}]],
   "underline": [["path",{"d":"M6 4v6a6 6 0 0 0 12 0V4"}],["line",{"x1":"4","x2":"20","y1":"20","y2":"20"}]],
   "undo": [["path",{"d":"M9 14 4 9l5-5"}],["path",{"d":"M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11"}]],
+  "user-round": [["circle",{"cx":"12","cy":"8","r":"5"}],["path",{"d":"M20 21a8 8 0 0 0-16 0"}]],
   "users": [["path",{"d":"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"}],["path",{"d":"M16 3.128a4 4 0 0 1 0 7.744"}],["path",{"d":"M22 21v-2a4 4 0 0 0-3-3.87"}],["circle",{"cx":"9","cy":"7","r":"4"}]],
+  "x": [["path",{"d":"M18 6 6 18"}],["path",{"d":"m6 6 12 12"}]],
 };

package/components/shared/menu-navigation.js

@@ -0,0 +1,49 @@
+const itemSelector = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]';
+const searches = new WeakMap();
+
+export function menuItemFrom(target) {
+  return target?.closest?.(itemSelector) ?? null;
+}
+
+export function menuItems(menu) {
+  return Array.from(menu.querySelectorAll(itemSelector)).filter((item) =>
+    item.getAttribute("aria-disabled") !== "true" && !item.hasAttribute("disabled") && !item.closest("[hidden]"));
+}
+
+function label(item) {
+  return (item.querySelector(".label")?.textContent ?? item.textContent ?? "").trim().toLocaleLowerCase();
+}
+
+/** Move within one open menu, including named groups; only enabled items receive focus. */
+export function navigateMenu(event, menu) {
+  const items = menuItems(menu);
+  if (!items.length) return false;
+  const current = menuItemFrom(event.target);
+  const index = items.indexOf(current);
+  let next = -1;
+  switch (event.key) {
+    case "ArrowDown": next = index < 0 ? 0 : (index + 1) % items.length; break;
+    case "ArrowUp": next = index < 0 ? items.length - 1 : (index - 1 + items.length) % items.length; break;
+    case "Home": next = 0; break;
+    case "End": next = items.length - 1; break;
+    default: {
+      if (event.key.length !== 1 || event.key === " " || event.altKey || event.ctrlKey || event.metaKey) return false;
+      const now = Date.now();
+      const previous = searches.get(menu);
+      const query = `${previous && now - previous.time < 700 ? previous.query : ""}${event.key.toLocaleLowerCase()}`;
+      searches.set(menu, { query, time: now });
+      const find = (prefix) => {
+        for (let offset = 1; offset <= items.length; offset += 1) {
+          const candidate = (index + offset + items.length) % items.length;
+          if (label(items[candidate]).startsWith(prefix)) return candidate;
+        }
+        return -1;
+      };
+      next = find(query);
+      if (next < 0 && query.length > 1) next = find(event.key.toLocaleLowerCase());
+    }
+  }
+  event.preventDefault();
+  if (next >= 0) items[next].focus();
+  return true;
+}

package/components/shared/overlay.js

@@ -1,6 +1,4 @@
 const stacks = new WeakMap();
-let anchorSequence = 0;
-const anchorBindings = new WeakMap();
 
 function stateFor(document) {
   let state = stacks.get(document);
@@ -18,7 +16,7 @@ function syncScrollLock(document, state) {
 
 function requestClose(document, reason, trigger) {
   const record = stateFor(document).records.at(-1);
-  if (!record || (record.dismissible === false && (reason === "escape" || reason === "light-dismiss"))) return false;
+  if (!record || (record.dismissible === false && (reason === "escape" || reason === "light-dismiss")) || record.canClose?.(reason) === false) return false;
   record.requestClose(reason, trigger);
   return true;
 }
@@ -102,25 +100,6 @@ function hide(surface) {
   surface.hidden = true;
 }
 
-function bindAnchor(anchor, name) {
-  const binding = anchorBindings.get(anchor) ?? { original: anchor.style.getPropertyValue("anchor-name"), names: new Set() };
-  binding.names.add(name);
-  anchorBindings.set(anchor, binding);
-  anchor.style.setProperty("anchor-name", [binding.original, ...binding.names].filter(Boolean).join(", "));
-}
-
-function unbindAnchor(anchor, name) {
-  const binding = anchorBindings.get(anchor);
-  if (!binding) return;
-  binding.names.delete(name);
-  if (binding.names.size) anchor.style.setProperty("anchor-name", [binding.original, ...binding.names].filter(Boolean).join(", "));
-  else {
-    if (binding.original) anchor.style.setProperty("anchor-name", binding.original);
-    else anchor.style.removeProperty("anchor-name");
-    anchorBindings.delete(anchor);
-  }
-}
-
 function viewport(owner) {
   const visual = owner.visualViewport;
   const left = visual?.offsetLeft ?? 0;
@@ -151,13 +130,33 @@ function layoutRect(surface) {
 
 function fallbackPosition(surface, anchor, placement, gap, viewportGap, surfaceRect = layoutRect(surface)) {
   const bounds = viewport(surface.ownerDocument.defaultView);
-  const preferTop = placement.startsWith("top");
-  const preferEnd = placement.endsWith("end");
-  const below = bounds.bottom - anchor.bottom - viewportGap;
-  const above = anchor.top - bounds.top - viewportGap;
-  const useTop = preferTop ? !(above < surfaceRect.height + gap && below > above) : below < surfaceRect.height + gap && above > below;
-  const top = useTop ? anchor.top - surfaceRect.height - gap : anchor.bottom + gap;
-  const left = preferEnd ? anchor.right - surfaceRect.width : anchor.left;
+  const [preferred, align = "center"] = placement.split("-");
+  const side = ["top", "bottom", "left", "right"].includes(preferred) ? preferred : "bottom";
+  const opposite = { top: "bottom", bottom: "top", left: "right", right: "left" }[side];
+  const available = {
+    top: anchor.top - bounds.top - viewportGap,
+    bottom: bounds.bottom - anchor.bottom - viewportGap,
+    left: anchor.left - bounds.left - viewportGap,
+    right: bounds.right - anchor.right - viewportGap,
+  };
+  const needed = (side === "top" || side === "bottom" ? surfaceRect.height : surfaceRect.width) + gap;
+  const actual = available[side] < needed && available[opposite] > available[side] ? opposite : side;
+  surface.dataset.uiActualPlacement = actual;
+  surface.dataset.uiActualAlign = align;
+  const rtl = getComputedStyle(surface).direction === "rtl";
+  let left;
+  let top;
+  if (actual === "top" || actual === "bottom") {
+    top = actual === "top" ? anchor.top - surfaceRect.height - gap : anchor.bottom + gap;
+    left = align === "start"
+      ? (rtl ? anchor.right - surfaceRect.width : anchor.left)
+      : align === "end"
+        ? (rtl ? anchor.left : anchor.right - surfaceRect.width)
+        : (anchor.left + anchor.right - surfaceRect.width) / 2;
+  } else {
+    left = actual === "left" ? anchor.left - surfaceRect.width - gap : anchor.right + gap;
+    top = align === "start" ? anchor.top : align === "end" ? anchor.bottom - surfaceRect.height : (anchor.top + anchor.bottom - surfaceRect.height) / 2;
+  }
   const shift = clamp({ left, top, right: left + surfaceRect.width, bottom: top + surfaceRect.height, width: surfaceRect.width, height: surfaceRect.height }, bounds, viewportGap);
   surface.style.left = `${Math.round(left + shift.x)}px`;
   surface.style.top = `${Math.round(top + shift.y)}px`;
@@ -168,10 +167,8 @@ function fallbackPosition(surface, anchor, placement, gap, viewportGap, surfaceR
 export function createAnchoredSurface(surface, options = {}) {
   const owner = surface.ownerDocument.defaultView;
   let placement = options.placement ?? "bottom-start";
-  const gap = Math.max(0, options.gap ?? 4);
+  const gap = () => Math.max(0, Number(typeof options.gap === "function" ? options.gap() : options.gap ?? 4) || 0);
   const viewportGap = Math.max(0, options.viewportGap ?? 8);
-  const nativeAnchor = owner.CSS?.supports?.("anchor-name: --ui-anchor-test") && owner.CSS.supports("position-anchor: --ui-anchor-test") && owner.CSS.supports("top: anchor(bottom)");
-  const anchorName = `--ui-anchor-${++anchorSequence}`;
   let anchor = options.anchor ?? null;
   let point = null;
   let open = false;
@@ -179,40 +176,17 @@ export function createAnchoredSurface(surface, options = {}) {
   let abort = null;
   let sizeObserver = null;
   surface.setAttribute("popover", "manual");
-  surface.dataset.uiPositioning = nativeAnchor ? "anchor" : "fallback";
   surface.style.position = "fixed";
   surface.style.margin = "0";
-  const bind = (next) => {
-    if (anchor) unbindAnchor(anchor, anchorName);
-    anchor = next;
-    if (anchor) {
-      bindAnchor(anchor, anchorName);
-      surface.style.setProperty("position-anchor", anchorName);
-    } else surface.style.removeProperty("position-anchor");
-  };
   const position = () => {
     frame = null;
     if (!open) return;
     if (point) {
-      fallbackPosition(surface, { left: point.x, right: point.x, top: point.y, bottom: point.y, width: 0, height: 0 }, "bottom-start", gap, viewportGap);
+      fallbackPosition(surface, { left: point.x, right: point.x, top: point.y, bottom: point.y, width: 0, height: 0 }, "bottom-start", gap(), viewportGap);
       return;
     }
     if (!anchor) return;
-    let rect;
-    if (nativeAnchor) {
-      const blockEnd = placement.startsWith("bottom");
-      const inlineEnd = placement.endsWith("end");
-      surface.style.top = blockEnd ? `calc(anchor(bottom) + ${gap}px)` : "auto";
-      surface.style.bottom = blockEnd ? "auto" : `calc(anchor(top) + ${gap}px)`;
-      surface.style.left = inlineEnd ? "auto" : "anchor(left)";
-      surface.style.right = inlineEnd ? "anchor(right)" : "auto";
-      surface.style.setProperty("position-try-fallbacks", "flip-block, flip-inline");
-      rect = layoutRect(surface);
-      if (!rect.width || !rect.height) return;
-      const shift = clamp(rect, viewport(owner), viewportGap);
-      if (!shift.x && !shift.y) return;
-    }
-    fallbackPosition(surface, anchor.getBoundingClientRect(), placement, gap, viewportGap, rect);
+    fallbackPosition(surface, anchor.getBoundingClientRect(), placement, gap(), viewportGap);
   };
   const schedule = () => {
     if (open && frame === null) frame = owner.requestAnimationFrame(position);
@@ -238,15 +212,14 @@ export function createAnchoredSurface(surface, options = {}) {
     sizeObserver.observe(surface);
   };
   const stopSize = () => { sizeObserver?.disconnect(); sizeObserver = null; };
-  bind(anchor);
   return {
-    setAnchor(next) { point = null; bind(next); syncListeners(); schedule(); },
+    setAnchor(next) { point = null; anchor = next; syncListeners(); schedule(); },
     setPlacement(next) { placement = next || "bottom-start"; schedule(); },
     show() { point = null; open = true; syncListeners(); show(surface); position(); schedule(); observeSize(); },
     showAtPoint(next) { point = next; open = true; syncListeners(); show(surface); position(); schedule(); observeSize(); },
     hide() { open = false; point = null; syncListeners(); stopSize(); if (frame !== null) owner.cancelAnimationFrame(frame); frame = null; hide(surface); },
     refresh: schedule,
-    destroy() { open = false; abort?.abort(); abort = null; stopSize(); if (frame !== null) owner.cancelAnimationFrame(frame); frame = null; hide(surface); bind(null); },
+    destroy() { open = false; abort?.abort(); abort = null; stopSize(); if (frame !== null) owner.cancelAnimationFrame(frame); frame = null; hide(surface); anchor = null; },
   };
 }
 

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

@@ -1,3 +1,4 @@
+<link rel="component" href="../ui-icon/ui-icon.html">
 <template component="ui-avatar" controller="./ui-avatar.js">
   <defs>
     <prop name="src" type="string"
@@ -14,17 +15,23 @@
       circle clips anything wider.</prop>
     <prop name="size" type="sm | md" default="md"
     >md is 2.5rem, for a person on their own (a profile, a comment); sm is 1.75rem with smaller initials, for a row of people in a toolbar or header.</prop>
+    <prop name="shape" type="circle | square" default="circle">Circle by default; square uses the theme's medium radius.</prop>
+    <prop name="decorative" type="boolean" default="false">Hides the avatar from assistive technology when adjacent text already identifies the person.</prop>
     <prop name="active" type="boolean" default="false"
     >Marks the person as active now, such as editing the same page: a ring in the success colour around the avatar. The ring is not announced, so say what it
       means in alt ("Ada Lovelace, editing").</prop>
     <state name="hasImage" :value="false"></state>
     <state name="hasAuthoredImage" :value="false"></state>
     <state name="initials" :value="'?'"></state>
+    <state name="showGlyph" :value="false"></state>
   </defs>
   <span>
     <slot></slot>
     <img class="image" $ref="image" :src="src" alt="" aria-hidden="true" :hidden="hasAuthoredImage or not hasImage">
-    <span class="fallback" :aria-hidden="hasImage" :hidden="hasImage" $value="initials"></span>
+    <span class="fallback" :aria-hidden="hasImage" :hidden="hasImage">
+      <span :hidden="showGlyph" $value="initials"></span>
+      <span :hidden="not showGlyph"><ui-icon name="user-round"></ui-icon></span>
+    </span>
   </span>
   <style>
     /* This component's hooks style the element they are set on, and never a nested one. */
@@ -32,6 +39,10 @@
       syntax: "*";
       inherits: false;
     }
+    @property --ui-avatar-radius {
+      syntax: "*";
+      inherits: false;
+    }
     @property --ui-avatar-surface {
       syntax: "*";
       inherits: false;
@@ -46,12 +57,13 @@
     }
 
     :host {
+      --_ui-default-icon-size: 1.25rem;
       display: inline-grid;
       place-items: center;
       overflow: hidden;
       inline-size: 2.5rem;
       block-size: 2.5rem;
-      border-radius: 999px;
+      border-radius: var(--ui-avatar-radius, var(--ui-radius-round));
       border: 1px solid var(--ui-avatar-border, var(--ui-border-strong));
       background: var(--ui-avatar-surface, var(--ui-accent-soft));
       color: var(--ui-avatar-text, var(--ui-accent-subtle-text, var(--ui-accent-solid)));
@@ -62,11 +74,16 @@
     }
 
     :host-state([size="sm"]) {
+      --_ui-default-icon-size: 1rem;
       inline-size: 1.75rem;
       block-size: 1.75rem;
       font-size: var(--ui-font-size-xs);
     }
 
+    :host-state([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]) {

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

@@ -29,11 +29,17 @@ export default function controller(host) {
       authored.hidden = !host.state.hasImage;
       element.removeAttribute("role");
       element.removeAttribute("aria-label");
-    } else {
+    } else if (!host.state.decorative) {
       element.setAttribute("role", "img");
       element.setAttribute("aria-label", host.state.alt || host.state.name || "Avatar");
     }
+    if (host.state.decorative) {
+      element.setAttribute("aria-hidden", "true");
+      element.removeAttribute("role");
+      element.removeAttribute("aria-label");
+    } else element.removeAttribute("aria-hidden");
     host.state.initials = host.state.fallback || toInitials(host.state.name || host.state.alt);
+    host.state.showGlyph = !String(host.state.name || "").trim() && !String(host.state.alt || "").trim() && !String(host.state.fallback || "").trim();
   };
   const observer = new MutationObserver(apply);
   observer.observe(element, { childList: true });

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

@@ -3,15 +3,21 @@
     <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
       the badge.</prop>
+    <prop name="total" type="integer"
+    >The true number of people when only some avatars are authored. The overflow badge counts the people beyond the visible avatars; it never counts fewer than
+      the authored avatars.</prop>
+    <prop name="overflowLabel" type="string" default="{count} more"
+    >Accessible label for the overflow badge. Replace {count} with the number of people beyond the visible avatars.</prop>
     <prop name="label" type="string" default="People"
     >The group's accessible name, announced for the set of avatars as a whole. Name who they are rather than repeating the default.</prop>
     <prop name="size" type="sm | md" default="md"
     >The size of the avatars inside, matched by the +N badge and the overlap. Give each Avatar the same size.</prop>
     <state name="overflowCount" :value="0"></state>
+    <state name="overflowAnnouncement" :value="''"></state>
   </defs>
   <div role="group" :aria-label="label">
     <slot></slot>
-    <span class="overflow" $ref="overflow" role="img" :hidden="not overflowCount" :aria-label="format('%s more', overflowCount)"><template
+    <span class="overflow" $ref="overflow" role="img" :hidden="not overflowCount" :aria-label="overflowAnnouncement"><template
         $value="format('+%s', overflowCount)"
       ></template></span>
   </div>
@@ -47,7 +53,6 @@
     :slotted(*) {
       margin-inline-start: -0.5rem;
       flex-shrink: 0;
-      border-radius: 999px;
     }
 
     :slotted(*:first-child) {
@@ -61,7 +66,7 @@
       justify-content: center;
       inline-size: 2.5rem;
       block-size: 2.5rem;
-      border-radius: 999px;
+      border-radius: var(--ui-radius-round);
       border: 1px solid var(--ui-border-strong);
       background: var(--ui-surface-elevated);
       color: var(--ui-text-primary);

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

@@ -11,13 +11,17 @@ export default function controller(host) {
     avatars.forEach((avatar, index) => {
       avatar.style.display = index >= visible ? "none" : "";
       avatar.style.marginInlineStart = index === 0 ? "0px" : overlap;
-      avatar.style.borderRadius = "999px";
       // Later avatars cast a crisp shadow back onto the one they overlap; the first overlaps nothing.
       avatar.style.boxShadow = index === 0
         ? "var(--ui-avatar-group-edge-ring, var(--_edge-ring))"
         : "var(--ui-avatar-group-overlap-shadow, var(--_overlap-shadow)), var(--ui-avatar-group-edge-ring, var(--_edge-ring))";
     });
-    host.state.overflowCount = Math.max(0, avatars.length - visible);
+    const authoredVisible = Math.min(avatars.length, visible);
+    const suppliedTotal = Number(host.state.total);
+    const total = host.state.total === undefined || !Number.isFinite(suppliedTotal) ? avatars.length : Math.max(avatars.length, suppliedTotal);
+    const count = Math.max(0, total - authoredVisible);
+    host.state.overflowCount = count;
+    host.state.overflowAnnouncement = String(host.state.overflowLabel || "{count} more").replaceAll("{count}", String(count));
   };
   const observer = new MutationObserver(update);
   observer.observe(element, { childList: true });

package/components/ui-badge/ui-badge.html

@@ -1,8 +1,8 @@
 <template component="ui-badge">
   <defs>
-    <prop name="variant" type="solid | subtle" default="subtle"
-    >Emphasis. subtle sets the text in its tone over a soft wash of it; solid fills with the tone and uses contrasting text, for a status that has to stand out.
-      The neutral tone looks the same in both.</prop>
+    <prop name="variant" type="solid | subtle | outline" default="subtle"
+    >Emphasis. subtle sets toned text over a soft wash; solid fills with the tone and uses contrasting text; outline keeps the surface with a toned edge.
+      Neutral looks the same in solid and subtle.</prop>
     <prop name="tone" type="neutral | accent | info | success | warning | danger" default="neutral"
     >Which colour the badge speaks in. neutral is a quiet grey for plain labels; accent draws the eye in the accent colour; info, success, warning, and danger
       mark a status, so match the tone to what the badge says.</prop>
@@ -58,6 +58,7 @@
       --_badge-text: var(--ui-text-secondary);
       /* Every tone's edge is its fill, so it is unseen until forced colors draw it. */
       --_badge-border: var(--ui-surface-subtle);
+      --_badge-outline-surface: var(--ui-badge-surface, var(--_badge-surface));
 
       display: inline-flex;
       align-items: center;
@@ -66,7 +67,7 @@
       padding: var(--ui-badge-padding-block, var(--ui-space-0-5)) var(--ui-badge-padding-inline, var(--ui-space-2));
       border: 1px solid var(--ui-badge-border, var(--_badge-border));
       border-radius: var(--ui-radius-round);
-      background: var(--ui-badge-surface, var(--_badge-surface));
+      background: var(--_badge-outline-surface);
       color: var(--ui-badge-text, var(--_badge-text));
       font-family: var(--ui-font-family-sans);
       font-size: var(--ui-badge-font-size, var(--ui-font-size-sm));
@@ -149,6 +150,37 @@
       --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
     }
 
+    :host-state([variant="outline"]) {
+      --_badge-surface: var(--ui-surface-default);
+      --_badge-border: var(--ui-border-strong);
+      --_badge-text: var(--ui-text-secondary);
+    }
+
+    :host-state([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"]) {
+      --_badge-border: var(--ui-danger-solid);
+      --_badge-text: var(--ui-danger-subtle-text, var(--ui-danger-solid));
+    }
+
+    :host-state([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"]) {
+      --_badge-border: var(--ui-warning-solid);
+      --_badge-text: var(--ui-warning-subtle-text, var(--ui-warning-solid));
+    }
+
+    :host-state([variant="outline"][tone="info"]) {
+      --_badge-border: var(--ui-info-solid);
+      --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
+    }
+
     /* A tag is flat at the start and points at the end. The point is cut from the box, so it has no
        outline to follow: the edge is the fill. The end padding grows by the point's depth so the
        label never runs into it. */
@@ -167,6 +199,40 @@
       clip-path: polygon(var(--_badge-point) 0, 100% 0, 100% 100%, var(--_badge-point) 100%, 0 50%);
     }
 
+    /* The tag clips its point, including the native border. Draw the outer shape in the border
+       colour and an inset inner shape in the surface colour to keep a visible diagonal edge. */
+    :host-state([variant="outline"][shape="tag"]) {
+      position: relative;
+      isolation: isolate;
+      background: var(--ui-badge-border, var(--_badge-border));
+    }
+
+    :host-state([variant="outline"][shape="tag"])::before {
+      content: "";
+      position: absolute;
+      inset: 1px;
+      z-index: -1;
+      background: var(--_badge-outline-surface);
+      clip-path: polygon(0 0, calc(100% - var(--_badge-point)) 0, 100% 50%, calc(100% - var(--_badge-point)) 100%, 0 100%);
+      pointer-events: none;
+    }
+
+    :host-state([variant="outline"][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([variant="outline"][shape="tag"]) {
+        forced-color-adjust: none;
+        background: CanvasText;
+        color: CanvasText;
+      }
+
+      :host-state([variant="outline"][shape="tag"])::before {
+        background: Canvas;
+      }
+    }
+
     /* A component that sets its display still honours the hidden attribute on its root. */
     :host[hidden] {
       display: none;

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

@@ -1,4 +1,5 @@
-<template component="ui-button">
+<link rel="component" href="../ui-spinner/ui-spinner.html">
+<template component="ui-button" controller="./ui-button.js">
   <defs>
     <prop name="variant" type="outline | solid | danger | ghost | link" 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
@@ -12,6 +13,9 @@
     <prop name="disabled" type="boolean" default="false"
     >Makes the button unavailable: it cannot be pressed, its tone fades, and it loses its raised look. A disabled link (as="a" with href) drops its href and
       states aria-disabled="true" instead, because a link has no native disabled state.</prop>
+    <prop name="pending" type="boolean" default="false"
+    >Keeps the action focusable and its label visible while work is in progress. It shows a decorative spinner, states aria-disabled and aria-busy, and prevents
+      activation or form submission until cleared.</prop>
     <prop name="align" type="center | start" default="center"
     >Content alignment. start lays the content out like a list option: from the start edge, with start-aligned text.</prop>
     <prop name="stretch" type="boolean" default="false">Fills the inline size of its container.</prop>
@@ -30,14 +34,18 @@
   <template $match>
     <a
       $when="as = 'a'"
-      :href="{ true: null, false: href }[format('%s', disabled)]"
+      :href="{ true: null, false: href }[format('%s', disabled or pending)]"
       :target="target"
       :rel="rel"
-      :aria-disabled="{ true: 'true', false: null }[format('%s', disabled and href)]"
+      :aria-disabled="{ true: 'true', false: null }[format('%s', disabled or pending)]"
+      :aria-busy="pending"
+      :tabindex="{ true: '0', false: null }[format('%s', pending and not disabled)]"
     >
+      <ui-spinner $if="pending" size="sm" class="pending-spinner"></ui-spinner>
       <slot></slot>
     </a>
-    <button $else :type="type" :disabled="disabled">
+    <button $else :type="type" :disabled="disabled" :aria-disabled="{ true: 'true', false: null }[format('%s', pending)]" :aria-busy="pending">
+      <ui-spinner $if="pending" size="sm" class="pending-spinner"></ui-spinner>
       <slot></slot>
     </button>
   </template>
@@ -148,7 +156,7 @@
       border-style: solid;
       border-width: 1px;
       border-color: var(--ui-button-border, var(--_tone));
-      border-radius: var(--ui-button-radius, var(--ui-radius-md));
+      border-radius: var(--ui-button-radius, var(--ui-action-radius, var(--ui-radius-md)));
       background-color: var(--ui-button-surface, oklch(from var(--_tone) l c h / 5%));
       color: var(--ui-button-text, var(--_tone-text));
       font: inherit;
@@ -167,6 +175,10 @@
       margin: 0;
     }
 
+    .pending-spinner {
+      margin-inline-end: var(--ui-space-2);
+    }
+
     @supports (text-box-trim: trim-both) {
       :host {
         text-box-trim: trim-both;
@@ -307,6 +319,10 @@
       box-shadow: none;
     }
 
+    :host-state([pending]):focus-visible {
+      box-shadow: var(--ui-focus-halo);
+    }
+
     /* Ghost has no hover to fall back on, so disabled is the one state it has to state outright:
        it takes a surface rather than reading as plain text. The surface is a wash of the faded tone,
        the way hover washes the live one, so it stays light in every tone. An opaque mix toward the

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

@@ -0,0 +1,10 @@
+// Pending actions retain focus but cannot activate, navigate, submit, or notify click consumers.
+export default function controller(host) {
+  const onClick = (event) => {
+    if (!host.state.pending) return;
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  };
+  host.element.addEventListener("click", onClick, true);
+  return () => host.element.removeEventListener("click", onClick, true);
+}

package/components/ui-callout/ui-callout.html

@@ -1,8 +1,8 @@
 <template component="ui-callout">
   <defs>
-    <prop name="tone" type="info | note | warning | success | danger" default="info"
-    >Which kind of message the callout carries, shown by its icon and colour: info (the default) for neutral information, note for an aside in muted grey,
-      warning for a caution, success for a confirmation, and danger for an error or a destructive consequence.</prop>
+    <prop name="tone" type="info | neutral | note | warning | success | danger" default="info"
+    >Which kind of message the callout carries, shown by its icon and colour: info (the default) for information, neutral for a muted aside, warning for a
+      caution, success for a confirmation, and danger for a harmful consequence. note remains as an alias for neutral.</prop>
   </defs>
   <div role="note">
     <span class="icon" aria-hidden="true">
@@ -11,7 +11,15 @@
         <path d="M12 16v-4"></path>
         <path d="M12 8h.01"></path>
       </svg>
-      <svg $if="tone = 'note'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <svg
+        $if="tone = 'neutral' or tone = 'note'"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
         <path d="M13.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8.5L13.5 2Z"></path>
         <path d="M13 2v7h7"></path>
         <path d="m9.5 17.5 4-4 2 2-4 4H9.5v-2Z"></path>
@@ -125,7 +133,7 @@
       min-inline-size: 0;
     }
 
-    :host-state([tone="note"]) {
+    :host-state([tone="neutral"]), :host-state([tone="note"]) {
       --_callout-surface: var(--ui-surface-muted);
       --_callout-border: var(--ui-border-strong);
       --_callout-icon: var(--ui-text-secondary);