@threadlabs/looma 0.39.1 → 0.39.3

package/styles/ui-light-editor.css

@@ -121,3 +121,114 @@
 @media (forced-colors: active) {
     }
 }
+@scope ([data-slotted~="ui-light-editor"]:not([data-component])) to ([data-component], [data-slotted]) {
+:where([data-component~="ui-light-editor"]):where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-light-editor"]))) {
+      display: grid !important;
+      gap: var(--ui-space-3) !important;
+      min-inline-size: 0;
+      padding: 0 !important;
+      margin: 0 !important;
+    }
+    .stage:where(:scope, :scope *) {
+      box-sizing: border-box !important;
+      display: block !important;
+      block-size: 13rem;
+      padding: calc(var(--ui-control-min-block-size) / 2) !important;
+      border: var(--ui-border-width) solid var(--ui-control-border);
+      border-radius: var(--ui-field-radius, var(--ui-radius-md));
+      background: var(--ui-neutral-surface, var(--ui-surface));
+    }
+    .plane:where(:scope, :scope *) {
+      position: relative;
+      display: block !important;
+      inline-size: 100%;
+      block-size: 100%;
+    }
+    svg:where(:scope, :scope *) {
+      inline-size: 100%;
+      block-size: 100%;
+      overflow: visible;
+    }
+    path:where(:scope, :scope *) {
+      fill: none;
+      stroke: var(--ui-border);
+      stroke-width: 1;
+      vector-effect: non-scaling-stroke;
+    }
+    .specimen:where(:scope, :scope *) {
+      position: absolute;
+      inset: 0;
+      display: grid !important;
+      place-items: center !important;
+    }
+    .source:where(:scope, :scope *) {
+      position: absolute;
+      left: 50%;
+      top: 0;
+      translate: -50% -50%;
+      display: grid !important;
+      place-items: center !important;
+      inline-size: max(2rem, var(--ui-control-min-block-size));
+      block-size: max(2rem, var(--ui-control-min-block-size));
+      padding: 0 !important;
+      margin: 0 !important;
+      border: 0;
+      border-radius: 50%;
+      background: transparent;
+      cursor: grab;
+      touch-action: none;
+    }
+    .source-glyph:where(:scope, :scope *) {
+      position: relative;
+      z-index: 1;
+      display: inline-flex !important;
+      color: var(--ui-accent);
+      font-size: var(--ui-font-size-lg);
+    }
+    .source:where(:not([data-component], [data-slotted]:not([data-slotted~="ui-light-editor"]))):where(:scope, :scope *)::after {
+      content: "";
+      position: absolute;
+      inline-size: 2rem;
+      block-size: 2rem;
+      border: var(--ui-border-width) solid var(--ui-accent);
+      border-radius: 50%;
+      background: var(--ui-surface-raised);
+      box-shadow: 0 0 0 var(--ui-space-2) color-mix(in srgb, var(--ui-accent) 12%, transparent), var(--ui-shadow-sm);
+    }
+    .source:active:where(:scope, :scope *) {
+      cursor: grabbing;
+    }
+    .source:focus-visible:where(:scope, :scope *) {
+      outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+      outline-offset: var(--ui-space-1);
+    }
+    .source:disabled:where(:scope, :scope *) {
+      cursor: not-allowed;
+    }
+    .source:disabled:where(:not([data-component], [data-slotted]:not([data-slotted~="ui-light-editor"]))):where(:scope, :scope *)::after {
+      background: var(--ui-disabled-surface);
+      border-color: var(--ui-disabled-border);
+      box-shadow: none;
+    }
+    .coordinates:where(:scope, :scope *) {
+      display: grid !important;
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+      gap: var(--ui-space-2) !important;
+    }
+    .hint:where(:scope, :scope *) {
+      font-size: var(--ui-font-size-sm);
+      color: var(--ui-text-secondary);
+    }
+    @media (forced-colors: active) {
+      .source-glyph:where(:scope, :scope *) {
+        color: CanvasText;
+      }
+      .source:where(:not([data-component], [data-slotted]:not([data-slotted~="ui-light-editor"]))):where(:scope, :scope *)::after {
+        background: Canvas;
+        border-color: CanvasText;
+      }
+      .source:focus-visible:where(:scope, :scope *) {
+        outline-color: Highlight;
+      }
+    }
+}

package/styles/ui-select.css

@@ -50,13 +50,16 @@
     }
 
     :scope:where([data-component~="ui-select"]) {
+      --_ui-select-size: var(--ui-control-size-md);
+      --_ui-select-inset-block: var(--ui-control-inset-block-md, var(--ui-space-2));
       box-sizing: border-box !important;
       display: inline-block !important;
       inline-size: var(--ui-select-inline-size, 100%);
       min-inline-size: 0;
+      max-block-size: max(var(--_ui-select-size), calc(1em * var(--ui-line-height-tight) + 2 * var(--_ui-select-inset-block) + 2 * var(--ui-border-width)));
       min-block-size: var(--ui-control-size-md);
       margin: 0 !important;
-      padding: var(--ui-control-inset-block-md, var(--ui-space-2)) var(--ui-space-3) !important;
+      padding: var(--_ui-select-inset-block) var(--ui-space-3) !important;
       border: var(--ui-border-width) solid var(--ui-select-border, var(--ui-control-border, var(--ui-border-strong)));
       border-radius: var(--ui-select-radius, var(--ui-field-radius, var(--ui-radius-md)));
       background-color: var(--ui-select-surface, var(--ui-control-surface, var(--ui-surface-elevated)));
@@ -129,8 +132,10 @@
     }
 
     :scope:where([data-component~="ui-select"])[data-ui-select-state~="size=sm"] {
+      --_ui-select-size: var(--ui-control-size-sm);
+      --_ui-select-inset-block: var(--ui-control-inset-block-sm, var(--ui-space-1));
       min-block-size: var(--ui-control-size-sm);
-      padding: var(--ui-control-inset-block-sm, var(--ui-space-1)) var(--ui-space-2) !important;
+      padding: var(--_ui-select-inset-block) var(--ui-space-2) !important;
       padding-inline-end: calc(var(--ui-space-2) + var(--ui-icon-size-sm) + var(--ui-space-1)) !important;
       background-position: right var(--ui-space-2) center, center;
       background-size:
@@ -140,8 +145,10 @@
     }
 
     :scope:where([data-component~="ui-select"])[data-ui-select-state~="size=lg"] {
+      --_ui-select-size: var(--ui-control-size-lg);
+      --_ui-select-inset-block: var(--ui-control-inset-block-lg, var(--ui-space-3));
       min-block-size: var(--ui-control-size-lg);
-      padding: var(--ui-control-inset-block-lg, var(--ui-space-3)) var(--ui-space-4) !important;
+      padding: var(--_ui-select-inset-block) var(--ui-space-4) !important;
       padding-inline-end: calc(var(--ui-space-4) + 1.5rem) !important;
       background-position: right var(--ui-space-4) center, center;
       font-size: var(--ui-font-size-md);

package/theme-system.css

@@ -8,11 +8,14 @@
 /* Keep the root font seed unregistered: a registered rem length used by root
    font-size creates a dependency cycle (CSS Properties and Values API 2.7.2). */
 @property --ui-control-size { syntax: "<length>"; inherits: true; initial-value: 40px; }
+@property --_ui-root-font-unit { syntax: "<length>"; inherits: true; initial-value: 16px; }
 @property --ui-radius-md { syntax: "<length>"; inherits: true; initial-value: 8px; }
 @property --ui-border-width { syntax: "<length>"; inherits: true; initial-value: 1px; }
 
 @layer theme {
   :root {
+    /* Resolve once on the root: WebKit can resolve registered rem lengths against the initial font size. */
+    --_ui-root-font-unit: 1em;
     --ui-spacing: 1;
     --ui-rhythm: 1;
     --ui-control-roominess: 2.5;
@@ -35,7 +38,7 @@
   :where(:root, [data-theme], [data-contrast]) {
     /* Controls use a ratio. Spacing uses an independent curve, so increasing the size
        contrast cannot unexpectedly turn linear spacing into quadratic spacing. */
-    --ui-control-size: calc(1rem * var(--ui-control-roominess));
+    --ui-control-size: calc(var(--_ui-root-font-unit) * var(--ui-control-roominess));
     --_ui-theme-ratio: max(1, var(--ui-scale-ratio));
     --_ui-theme-unit: calc(1rem * 0.25 * max(0, var(--ui-spacing)) * clamp(0.75, var(--ui-rhythm), 1.5));
     --ui-line-height-tight: clamp(1.1, calc(1.2 + (var(--ui-rhythm) - 1) * 0.2), 1.3);

package/tokens.css

@@ -353,9 +353,12 @@
   }
 
   [data-ui-choice-option]:is(:hover, .active) {
-    background: var(--ui-surface-muted);
+    background: var(--ui-accent-subtle);
+  }
+
+  [data-ui-choice-option]:focus-visible {
     outline: var(--ui-focus-width) solid var(--ui-focus-ring);
-    outline-offset: calc(-1 * var(--ui-border-width));
+    outline-offset: calc(-1 * var(--ui-focus-width));
   }
 
   [data-ui-choice-option][aria-disabled="true"],
@@ -403,6 +406,10 @@
   }
 
   @media (forced-colors: active) {
+    [data-ui-choice-option].active {
+      outline: var(--ui-focus-width) solid Highlight;
+      outline-offset: calc(-1 * var(--ui-focus-width));
+    }
     [data-ui-choice-option][aria-selected="true"]:not([aria-disabled="true"]):not(.active) {
       outline: var(--ui-focus-width) solid Highlight;
       outline-offset: calc(-1 * var(--ui-border-width));

package/vanilla/UiButton.js

@@ -15,11 +15,11 @@ const T8 = ["",[],4];
 const T9 = ["",[]];
 const T10 = ["",[]];
 const T11 = ["",[],["ui-icon",["name","chevron-right","aria-hidden","true"]]];
-const T12 = ["",[],"\n      ",1,"\n      ",4,"\n      ",["span",["class","badge"],4],"\n    "];
+const T12 = ["",[],"\n      ",1,"\n      ",["span",["class","label"],4],"\n      ",["span",["class","badge"],4],"\n    "];
 const T13 = ["span",["class","spinner-wrap"],["ui-spinner",["size","sm"]]];
 const T14 = ["",[]];
 const T15 = ["",[]];
-const T16 = ["",[],"\n      ",1,"\n      ",4,"\n      ",["span",["class","badge"],4],"\n    "];
+const T16 = ["",[],"\n      ",1,"\n      ",["span",["class","label"],4],"\n      ",["span",["class","badge"],4],"\n    "];
 const T17 = ["span",["class","spinner-wrap"],["ui-spinner",["size","sm"]]];
 const T18 = ["",[]];
 const T19 = ["",[]];
@@ -373,8 +373,9 @@ export function createUiButton(options = {}, html) {
     n.append((P12 ??= buildTemplate(T12)).cloneNode(true));
     const t0 = n.firstChild.nextSibling;
     const t1 = t0.nextSibling.nextSibling.nextSibling;
-    const t2 = t1.nextSibling.nextSibling.nextSibling.firstChild;
-    const r = { n, v0: undefined, v1: undefined, v2: undefined, v3: undefined, v4: undefined, v5: undefined, v6: undefined, v7: undefined, v8: undefined, a1: t0, e0: t0.nextSibling, b0: undefined, a2: t1, e1: t1.nextSibling, b1: undefined, f1: undefined, a3: t2, e2: t2.nextSibling, b2: undefined, f2: undefined };
+    const t2 = t1.firstChild;
+    const t3 = t1.nextSibling.nextSibling.firstChild;
+    const r = { n, v0: undefined, v1: undefined, v2: undefined, v3: undefined, v4: undefined, v5: undefined, v6: undefined, v7: undefined, v8: undefined, a1: t0, e0: t0.nextSibling, b0: undefined, a2: t2, e1: t2.nextSibling, b1: undefined, f1: undefined, a3: t3, e2: t3.nextSibling, b2: undefined, f2: undefined };
     p12(r, -1, d);
     return r;
   };
@@ -436,19 +437,20 @@ export function createUiButton(options = {}, html) {
       if (r.b0) { r.b0 = undefined; clearRegion(r.a1, r.e0); }
       else { r.b0 = m13(d); r.e0.before(r.b0.n); }
     } else if (r.b0 !== undefined) p13(r.b0, c, d);
-    if (r.f2 === undefined) { r.f2 = 1; const at = fillSlot(r.a3, r.e2, "badge", J, false, undefined, d);
-      if (Array.isArray(at)) (r.z ??= []).push(() => { at[0].l.delete(at[1]); dispose(at[1]); }); else if (at !== undefined) { r.b2 = m15(d); at.before(r.b2.n); } }
-    else if (r.b2 !== undefined) p15(r.b2, c, d);
     if (r.f1 === undefined) { r.f1 = 1; const at = fillSlot(r.a2, r.e1, "", J, false, undefined, d);
       if (Array.isArray(at)) (r.z ??= []).push(() => { at[0].l.delete(at[1]); dispose(at[1]); }); else if (at !== undefined) { r.b1 = m14(d); at.before(r.b1.n); } }
     else if (r.b1 !== undefined) p14(r.b1, c, d);
+    if (r.f2 === undefined) { r.f2 = 1; const at = fillSlot(r.a3, r.e2, "badge", J, false, undefined, d);
+      if (Array.isArray(at)) (r.z ??= []).push(() => { at[0].l.delete(at[1]); dispose(at[1]); }); else if (at !== undefined) { r.b2 = m15(d); at.before(r.b2.n); } }
+    else if (r.b2 !== undefined) p15(r.b2, c, d);
   };
   const m16 = (n, d) => {
     n.append((P16 ??= buildTemplate(T16)).cloneNode(true));
     const t0 = n.firstChild.nextSibling;
     const t1 = t0.nextSibling.nextSibling.nextSibling;
-    const t2 = t1.nextSibling.nextSibling.nextSibling.firstChild;
-    const r = { n, v0: undefined, v1: undefined, v2: undefined, v3: undefined, v4: undefined, v5: undefined, v6: undefined, a1: t0, e0: t0.nextSibling, b0: undefined, a2: t1, e1: t1.nextSibling, b1: undefined, f1: undefined, a3: t2, e2: t2.nextSibling, b2: undefined, f2: undefined };
+    const t2 = t1.firstChild;
+    const t3 = t1.nextSibling.nextSibling.firstChild;
+    const r = { n, v0: undefined, v1: undefined, v2: undefined, v3: undefined, v4: undefined, v5: undefined, v6: undefined, a1: t0, e0: t0.nextSibling, b0: undefined, a2: t2, e1: t2.nextSibling, b1: undefined, f1: undefined, a3: t3, e2: t3.nextSibling, b2: undefined, f2: undefined };
     p16(r, -1, d);
     return r;
   };
@@ -496,12 +498,12 @@ export function createUiButton(options = {}, html) {
       if (r.b0) { r.b0 = undefined; clearRegion(r.a1, r.e0); }
       else { r.b0 = m17(d); r.e0.before(r.b0.n); }
     } else if (r.b0 !== undefined) p17(r.b0, c, d);
-    if (r.f2 === undefined) { r.f2 = 1; const at = fillSlot(r.a3, r.e2, "badge", J, false, undefined, d);
-      if (Array.isArray(at)) (r.z ??= []).push(() => { at[0].l.delete(at[1]); dispose(at[1]); }); else if (at !== undefined) { r.b2 = m19(d); at.before(r.b2.n); } }
-    else if (r.b2 !== undefined) p19(r.b2, c, d);
     if (r.f1 === undefined) { r.f1 = 1; const at = fillSlot(r.a2, r.e1, "", J, false, undefined, d);
       if (Array.isArray(at)) (r.z ??= []).push(() => { at[0].l.delete(at[1]); dispose(at[1]); }); else if (at !== undefined) { r.b1 = m18(d); at.before(r.b1.n); } }
     else if (r.b1 !== undefined) p18(r.b1, c, d);
+    if (r.f2 === undefined) { r.f2 = 1; const at = fillSlot(r.a3, r.e2, "badge", J, false, undefined, d);
+      if (Array.isArray(at)) (r.z ??= []).push(() => { at[0].l.delete(at[1]); dispose(at[1]); }); else if (at !== undefined) { r.b2 = m19(d); at.before(r.b2.n); } }
+    else if (r.b2 !== undefined) p19(r.b2, c, d);
   };
   const M = [m0, m6, m12, m16], N = [p0, p6, p12, p16];
   let R;

package/vanilla/UiDialog.js

@@ -3,7 +3,7 @@ import { attachGeneratedController, buildTemplate, clearRegion, toAttribute, toT
 import * as controller from "../components/ui-dialog/ui-dialog.js";
 import "../styles/ui-dialog.css";
 
-const T0 = ["",[],"\n    ",["header",[],"\n      ",1,"\n      ",["button",["class","close","type","button","aria-label","Close"]],"\n    "],"\n    ",["div",["class","body"],["ui-scroll-area",[],4]],"\n    ",["footer",[],4],"\n  "];
+const T0 = ["",[],"\n    ",["header",[],"\n      ",1,"\n      ",["div",["class","close"],["ui-icon-button",["size","sm","round","","label","Close"],["ui-icon",["name","x"]]]],"\n    "],"\n    ",["div",["class","body"],["ui-scroll-area",[],4]],"\n    ",["footer",[],4],"\n  "];
 const T1 = ["h2",["class","title"],0];
 const T2 = ["",[]];
 const T3 = ["",[]];
@@ -82,7 +82,7 @@ export function createUiDialog(options = {}, html) {
   };
   const t0 = element.firstChild.nextSibling;
   const t1 = t0.firstChild.nextSibling;
-  const t2 = t1.nextSibling.nextSibling.nextSibling;
+  const t2 = t1.nextSibling.nextSibling.nextSibling.firstChild;
   const t3 = t0.nextSibling.nextSibling;
   const t4 = t3.firstChild;
   const t5 = t4.firstChild;

package/vanilla/UiLightEditor.js

@@ -3,7 +3,7 @@ import { attachGeneratedController, buildTemplate, NONCONFORMING, textCall, toAt
 import * as controller from "../components/ui-light-editor/ui-light-editor.js";
 import "../styles/ui-light-editor.css";
 
-const T0 = ["",[],"\n    ",["span",["class","stage","role","group"],"\n      ",["span",["class","plane"],"\n        ",["svg",["viewBox","0 0 100 60","preserveAspectRatio","none","aria-hidden","true"],["path",["d","M0 30 H100 M50 0 V60"]]],"\n        ",["span",["class","specimen"],4],"\n        ",["button",["type","button","class","source"],"\n          ",["span",["class","source-glyph"],["ui-icon",["name","lightbulb"]]],"\n        "],"\n      "],"\n    "],"\n    ",["span",["class","coordinates"],"\n      ",["ui-number-input",["data-coordinate","x","min","0","max","100","step","1","unit","%","label","Light horizontal position"]],"\n      ",["ui-number-input",["data-coordinate","y","min","0","max","100","step","1","unit","%","label","Light vertical position"]],"\n    "],"\n    ",["span",["class","hint"],"Drag the light, tap the background, use arrow keys, or enter its position. Escape cancels a drag. Top centre is 50%, 0%."],"\n  "];
+const T0 = ["",[],"\n    ",["span",["class","stage","role","group"],"\n      ",["span",["class","plane"],"\n        ",["svg",["viewBox","0 0 100 60","preserveAspectRatio","none","aria-hidden","true"],["path",["d","M0 30 H100 M50 0 V60"]]],"\n        ",["span",["class","specimen"],4],"\n        ",["button",["type","button","class","source"],"\n          ",["span",["class","source-glyph"],["ui-icon",["name","lightbulb"]]],"\n        "],"\n      "],"\n    "],"\n    ",["span",["class","hint"],"Drag or tap to move the light. Arrow keys adjust; Escape cancels."],"\n    ",["ui-disclosure",["summary","Exact position"],["span",["class","coordinates","data-slotted","ui-light-editor"],"\n        ",["ui-number-input",["data-coordinate","x","min","0","max","100","step","1","unit","%","label","Light horizontal position"]],"\n        ",["ui-number-input",["data-coordinate","y","min","0","max","100","step","1","unit","%","label","Light vertical position"]],"\n      "]],"\n  "];
 const T1 = ["",[]];
 let P0, P1;
 const S = { n: ["horizontal","vertical"], t: ["s","s"], f: import.meta.url, g: "ui-light-editor", d: { "input": [detailCheck(checkObject([["x", checkNumber, false], ["y", checkNumber, false]], false)), true, true, false], "change": [detailCheck(checkObject([["x", checkNumber, false], ["y", checkNumber, false]], false)), true, true, false], "cancel": [detailCheck(checkObject([["x", checkNumber, false], ["y", checkNumber, false]], false)), true, true, false] }, x: dispatchDeclared, a: (host, I) => C(host, I), b: generatedInputs, i: ["50", "0"] };
@@ -86,7 +86,7 @@ export function createUiLightEditor(options = {}, html) {
   const t2 = t1.firstChild.nextSibling.nextSibling.nextSibling;
   const t3 = t2.firstChild;
   const t4 = t2.nextSibling.nextSibling;
-  const t5 = t0.nextSibling.nextSibling;
+  const t5 = t0.nextSibling.nextSibling.nextSibling.nextSibling.firstChild;
   const t6 = t5.firstChild.nextSibling;
   const t7 = t6.nextSibling.nextSibling;
   const R = { a0: t0, a3: t4, a4: t6, a5: t7, v0: null, v1: null, v2: null, v3: null, v4: null, v5: null, v6: null, v7: null, v8: null, a2: t3, e0: t3.nextSibling, b0: undefined, f0: undefined };

package/vue/UiButton.vue

@@ -904,10 +904,10 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
       v-if="checkedProps.loading || checkedProps.pending"
       class="spinner-wrap"
       data-hn-ui-button
-    ><UiSpinner class="ui-spinner" size="sm" /></span>{{ ' ' }}<slot />{{ ' ' }}<span
-      class="badge"
+    ><UiSpinner class="ui-spinner" size="sm" /></span>{{ ' ' }}<span
+      class="label"
       data-hn-ui-button
-    ><slot name="badge" /></span></a>
+    ><slot /></span>{{ ' ' }}<span class="badge" data-hn-ui-button><slot name="badge" /></span></a>
   <button
     v-else
     class="ui-button"
@@ -944,10 +944,10 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
       v-if="checkedProps.loading || checkedProps.pending"
       class="spinner-wrap"
       data-hn-ui-button
-    ><UiSpinner class="ui-spinner" size="sm" /></span>{{ ' ' }}<slot />{{ ' ' }}<span
-      class="badge"
+    ><UiSpinner class="ui-spinner" size="sm" /></span>{{ ' ' }}<span
+      class="label"
       data-hn-ui-button
-    ><slot name="badge" /></span>
+    ><slot /></span>{{ ' ' }}<span class="badge" data-hn-ui-button><slot name="badge" /></span>
   </button>
 </template>
 
@@ -1031,6 +1031,8 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
 /* A count is an adornment, not another line of label text. Keep the standard control height
    with enough inset for a 24px mark; large content can still grow the button naturally. */
 
+/* Trim the text line itself: an anonymous flex item retains font-metric space in some fonts. */
+
 /* Short numeric and icon actions share a minimum box; large values remain readable. */
 
 /* Card actions inherit Button's palette and behavior; only their shared layout changes.
@@ -1125,6 +1127,7 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
 
   :global(:scope:where([data-hn-ui-button])) {
     --_button-square-size: var(--ui-button-min-block-size, var(--ui-control-size-md));
+    box-sizing: border-box !important;
     appearance: none;
     min-block-size: var(--ui-button-min-block-size, var(--ui-control-size-md));
     border-style: solid;
@@ -1166,6 +1169,19 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
   :global(:scope:not([data-appearance="link"]):has(.badge:not(:empty)):where([data-hn-ui-button])) {
     padding-block: var(--ui-space-0-5) !important;
   }
+  :global(.label:where([data-hn-ui-button])) {
+    display: block !important;
+    align-content: center !important;
+    min-inline-size: 0 !important;
+    min-block-size: 1lh !important;
+  }
+
+  :global(.label:has(svg):where([data-hn-ui-button])) {
+    display: inline-flex !important;
+    align-items: center !important;
+    gap: var(--ui-space-2) !important;
+    text-box-trim: none;
+  }
 
   :global(.badge:where([data-hn-ui-button])) {
     display: inline-flex !important;
@@ -1178,7 +1194,7 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
   }
 
   @supports (text-box-trim: trim-both) {
-    :global(:scope:where([data-hn-ui-button])) {
+    :global(.label:not(:has(svg)):where([data-hn-ui-button])) {
       text-box-trim: trim-both;
       text-box-edge: cap alphabetic;
     }
@@ -1499,6 +1515,11 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
       text-decoration-color var(--ui-motion-fast) var(--ui-motion-ease);
   }
 
+  :global(:scope[data-appearance="link"] .label:where([data-hn-ui-button])) {
+    display: inline !important;
+    text-box-trim: none;
+  }
+
   :global(:scope[data-appearance="link"]:hover:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button])) {
     color: var(--ui-button-link-hover-text, var(--ui-text-primary));
     text-decoration-color: currentColor;

package/vue/UiCheckbox.vue

@@ -377,20 +377,21 @@ useComponentHost(() => import('../components/ui-checkbox/ui-checkbox.js'), {
 
 /* The label, and under it an optional line saying what the choice means. */
 
-/* Centre the tick's box and lift it slightly for the rotated check shape. */
+/* The SVG's painted bounds are centred in its viewBox, including its round stroke.
+   Centre that box directly; rotated border boxes do not centre the visible check. */
 
 @keyframes ui-checkbox-check {
   from {
     opacity: 0;
-    transform: translateY(calc(var(--_ui-checkbox-size) * -0.09 / 1.125)) rotate(45deg) scale(0.55);
+    scale: 0.55;
   }
   65% {
     opacity: 1;
-    transform: translateY(calc(var(--_ui-checkbox-size) * -0.09 / 1.125)) rotate(45deg) scale(1.12);
+    scale: 1.12;
   }
   to {
     opacity: 1;
-    transform: translateY(calc(var(--_ui-checkbox-size) * -0.09 / 1.125)) rotate(45deg) scale(1);
+    scale: 1;
   }
 }
 
@@ -484,7 +485,8 @@ useComponentHost(() => import('../components/ui-checkbox/ui-checkbox.js'), {
 
   :global(input:where([data-hn-ui-checkbox])::after) {
     content: "";
-    position: absolute;
+    position: absolute !important;
+    transform: none !important;
     opacity: 0;
     transition: opacity var(--ui-motion-fast) var(--ui-motion-ease);
   }
@@ -497,29 +499,28 @@ useComponentHost(() => import('../components/ui-checkbox/ui-checkbox.js'), {
     box-shadow: var(--ui-control-inset);
   }
   :global(input:checked:where([data-hn-ui-checkbox])::after) {
-    inset: 0;
-    margin: auto !important;
-    inline-size: calc(var(--_ui-checkbox-size) * 0.28 / 1.125);
-    block-size: calc(var(--_ui-checkbox-size) * 0.5 / 1.125);
-    /* Longhands, not `border: solid var(...)`: lowering drops a shorthand that omits a
-       component, which left the tick with no style and no colour. */
-    border-style: solid;
-    border-color: var(--ui-text-on-accent);
-    border-width: 0 calc(var(--_ui-checkbox-size) * 0.125 / 1.125)
-      calc(var(--_ui-checkbox-size) * 0.125 / 1.125) 0;
+    inset: 50% auto auto 50% !important;
+    inline-size: calc(var(--_ui-checkbox-size) * 0.7) !important;
+    block-size: calc(var(--_ui-checkbox-size) * 0.7) !important;
+    background: var(--ui-text-on-accent);
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 11.5 5 5 9-9'/%3E%3C/svg%3E")
+      center / contain no-repeat;
     opacity: 1;
-    transform: translateY(calc(var(--_ui-checkbox-size) * -0.09 / 1.125)) rotate(45deg);
+    translate: -50% -50% !important;
     animation: ui-checkbox-check var(--ui-motion-base)
       var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
   }
 
   :global(input:indeterminate:where([data-hn-ui-checkbox])::after) {
-    inset: 50% calc(var(--_ui-checkbox-size) * 0.23 / 1.125) auto;
-    block-size: calc(var(--_ui-checkbox-size) * 0.125 / 1.125);
+    mask: none;
+    animation: none;
+    inset: 50% calc(var(--_ui-checkbox-size) * 0.23 / 1.125) auto !important;
+    inline-size: auto !important;
+    block-size: calc(var(--_ui-checkbox-size) * 0.125 / 1.125) !important;
     border-radius: var(--ui-radius-round);
     background: var(--ui-text-on-accent);
     opacity: 1;
-    transform: translateY(-50%);
+    translate: 0 -50% !important;
   }
 
   @media (prefers-reduced-motion: reduce) {
@@ -529,6 +530,20 @@ useComponentHost(() => import('../components/ui-checkbox/ui-checkbox.js'), {
     }
   }
 
+  @media (forced-colors: active) {
+    :global(input:checked:where([data-hn-ui-checkbox])),
+    :global(input:indeterminate:where([data-hn-ui-checkbox])) {
+      forced-color-adjust: none;
+      background: Highlight;
+      border-color: Highlight;
+    }
+    :global(input:checked:where([data-hn-ui-checkbox])::after),
+    :global(input:indeterminate:where([data-hn-ui-checkbox])::after) {
+      forced-color-adjust: none;
+      background: HighlightText;
+    }
+  }
+
   :global(input:hover:enabled:where([data-hn-ui-checkbox])) {
     border-color: var(--ui-accent-solid);
   }

package/vue/UiCombobox.vue

@@ -2276,10 +2276,15 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
     color: inherit;
   }
   :global(input:where([data-hn-ui-combobox])) {
+    --_ui-combobox-inset-block: var(--ui-control-inset-block-md, var(--ui-space-2));
     appearance: none;
     width: 100%;
     min-inline-size: 0;
     min-block-size: calc(var(--_row) - 2 * var(--ui-border-width));
+    max-block-size: max(
+      calc(var(--_row) - 2 * var(--ui-border-width)),
+      calc(1em * var(--ui-line-height-tight) + 2 * var(--_ui-combobox-inset-block))
+    );
     box-sizing: border-box !important;
     border: 0;
     border-radius: inherit;
@@ -2287,7 +2292,7 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
     color: inherit;
     font: inherit;
     line-height: var(--ui-line-height-tight);
-    padding: var(--ui-control-inset-block-md, var(--ui-space-2)) var(--ui-space-3) !important;
+    padding: var(--_ui-combobox-inset-block) var(--ui-space-3) !important;
     margin: 0 !important;
     outline: none;
   }
@@ -2295,14 +2300,16 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
     --_row: var(--ui-control-size-sm);
   }
   :global(:scope[data-ui-combobox-state~="size=sm"] input:where([data-hn-ui-combobox])) {
-    padding: var(--ui-control-inset-block-sm, var(--ui-space-1)) var(--ui-space-2) !important;
+    --_ui-combobox-inset-block: var(--ui-control-inset-block-sm, var(--ui-space-1));
+    padding: var(--_ui-combobox-inset-block) var(--ui-space-2) !important;
     font-size: var(--ui-font-size-sm);
   }
   :global(:scope[data-ui-combobox-state~="size=lg"]:where([data-hn-ui-combobox])) {
     --_row: var(--ui-control-size-lg);
   }
   :global(:scope[data-ui-combobox-state~="size=lg"] input:where([data-hn-ui-combobox])) {
-    padding: var(--ui-control-inset-block-lg, var(--ui-space-3)) var(--ui-space-4) !important;
+    --_ui-combobox-inset-block: var(--ui-control-inset-block-lg, var(--ui-space-3));
+    padding: var(--_ui-combobox-inset-block) var(--ui-space-4) !important;
     font-size: var(--ui-font-size-md);
   }
   :global(button:where([data-hn-ui-combobox])) {
@@ -2448,6 +2455,7 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
     display: none !important;
   }
   :global(:scope[data-ui-combobox-state~="multiple"] input:where([data-hn-ui-combobox])) {
+    max-block-size: none;
     flex: 1 0 var(--_ui-combobox-item-input-min-inline-size, 5rem);
     width: auto;
     min-block-size: 1.75rem;
@@ -2631,10 +2639,15 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
     color: inherit;
   }
   :global(input:where(:scope, :scope *):where([data-hn-ui-combobox])) {
+    --_ui-combobox-inset-block: var(--ui-control-inset-block-md, var(--ui-space-2));
     appearance: none;
     width: 100%;
     min-inline-size: 0;
     min-block-size: calc(var(--_row) - 2 * var(--ui-border-width));
+    max-block-size: max(
+      calc(var(--_row) - 2 * var(--ui-border-width)),
+      calc(1em * var(--ui-line-height-tight) + 2 * var(--_ui-combobox-inset-block))
+    );
     box-sizing: border-box !important;
     border: 0;
     border-radius: inherit;
@@ -2642,7 +2655,7 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
     color: inherit;
     font: inherit;
     line-height: var(--ui-line-height-tight);
-    padding: var(--ui-control-inset-block-md, var(--ui-space-2)) var(--ui-space-3) !important;
+    padding: var(--_ui-combobox-inset-block) var(--ui-space-3) !important;
     margin: 0 !important;
     outline: none;
   }
@@ -2651,7 +2664,8 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
   }
   :global(:where(.ui-combobox)[data-ui-combobox-state~="size=sm"]
     input:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox])) {
-    padding: var(--ui-control-inset-block-sm, var(--ui-space-1)) var(--ui-space-2) !important;
+    --_ui-combobox-inset-block: var(--ui-control-inset-block-sm, var(--ui-space-1));
+    padding: var(--_ui-combobox-inset-block) var(--ui-space-2) !important;
     font-size: var(--ui-font-size-sm);
   }
   :global(:where(.ui-combobox)[data-ui-combobox-state~="size=lg"]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox])) {
@@ -2659,7 +2673,8 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
   }
   :global(:where(.ui-combobox)[data-ui-combobox-state~="size=lg"]
     input:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox])) {
-    padding: var(--ui-control-inset-block-lg, var(--ui-space-3)) var(--ui-space-4) !important;
+    --_ui-combobox-inset-block: var(--ui-control-inset-block-lg, var(--ui-space-3));
+    padding: var(--_ui-combobox-inset-block) var(--ui-space-4) !important;
     font-size: var(--ui-font-size-md);
   }
   :global(button:where(:scope, :scope *):where([data-hn-ui-combobox])) {
@@ -2814,6 +2829,7 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
   }
   :global(:where(.ui-combobox)[data-ui-combobox-state~="multiple"]
     input:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox])) {
+    max-block-size: none;
     flex: 1 0 var(--_ui-combobox-item-input-min-inline-size, 5rem);
     width: auto;
     min-block-size: 1.75rem;

package/vue/UiDialog.d.ts

@@ -1,10 +1,10 @@
 import type { PropType } from 'vue';
 import { type InputBindings } from './props.js';
-declare var __VLS_7: {}, __VLS_9: {};
+declare var __VLS_20: {}, __VLS_22: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_7) => any;
+    default?: (props: typeof __VLS_20) => any;
 } & {
-    actions?: (props: typeof __VLS_9) => any;
+    actions?: (props: typeof __VLS_22) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     alert: {