@threadlabs/looma 0.39.1 → 0.39.3

package/vue/components.css

@@ -1115,6 +1115,8 @@ svg,.arc {
 /* 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.
@@ -1204,6 +1206,7 @@ svg,.arc {
 }
 :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;
@@ -1244,6 +1247,18 @@ svg,.arc {
 :scope:not([data-appearance="link"]):has(.badge:not(:empty)):where([data-hn-ui-button]) {
     padding-block: var(--ui-space-0-5) !important;
 }
+.label:where([data-hn-ui-button]) {
+    display: block !important;
+    align-content: center !important;
+    min-inline-size: 0 !important;
+    min-block-size: 1lh !important;
+}
+.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;
+}
 .badge:where([data-hn-ui-button]) {
     display: inline-flex !important;
     align-items: center !important;
@@ -1253,7 +1268,7 @@ svg,.arc {
     display: none !important;
 }
 @supports (text-box-trim: trim-both) {
-:scope:where([data-hn-ui-button]) {
+.label:not(:has(svg)):where([data-hn-ui-button]) {
       text-box-trim: trim-both;
       text-box-edge: cap alphabetic;
 }
@@ -1545,6 +1560,10 @@ html[data-ui-input-modality="touch"]
       color var(--ui-motion-fast) var(--ui-motion-ease),
       text-decoration-color var(--ui-motion-fast) var(--ui-motion-ease);
 }
+:scope[data-appearance="link"] .label:where([data-hn-ui-button]) {
+    display: inline !important;
+    text-box-trim: none;
+}
 :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;
@@ -1908,19 +1927,20 @@ html[data-ui-input-modality="touch"]
 
 /* 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. */
-@keyframes ui-checkbox-check-d551a32f {
+/* 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-570a9f0b {
 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;
 }
 }
 
@@ -2008,7 +2028,8 @@ input:where([data-hn-ui-checkbox]) {
 }
 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);
 }
@@ -2019,27 +2040,26 @@ input:checked:where([data-hn-ui-checkbox]),input:indeterminate:where([data-hn-ui
     box-shadow: var(--ui-control-inset);
 }
 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);
-    animation: ui-checkbox-check-d551a32f var(--ui-motion-base) var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
+    translate: -50% -50% !important;
+    animation: ui-checkbox-check-570a9f0b var(--ui-motion-base) var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
 }
 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) {
 input:where([data-hn-ui-checkbox])::after {
@@ -2047,6 +2067,17 @@ input:where([data-hn-ui-checkbox])::after {
       animation: none;
 }
 }
+@media (forced-colors: active) {
+input:checked:where([data-hn-ui-checkbox]),input:indeterminate:where([data-hn-ui-checkbox]) {
+      forced-color-adjust: none;
+      background: Highlight;
+      border-color: Highlight;
+}
+input:checked:where([data-hn-ui-checkbox])::after,input:indeterminate:where([data-hn-ui-checkbox])::after {
+      forced-color-adjust: none;
+      background: HighlightText;
+}
+}
 input:hover:enabled:where([data-hn-ui-checkbox]) {
     border-color: var(--ui-accent-solid);
 }
@@ -2231,6 +2262,14 @@ input:focus-visible:where([data-hn-ui-checkbox]) {
   syntax: "*";
   inherits: false;
 }
+/* Normalize a unitless zero border to a length before the box calculation. */
+@property --_ui-input-stroke {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 1px;
+}
+
+/* Cap Safari's excess text metrics without changing native date, file, color or range widgets. */
 
 /* Each size reads the hook and then an Input Group's default first, so a group, which draws the frame, can zero it. */
 
@@ -2248,6 +2287,12 @@ input:focus-visible:where([data-hn-ui-checkbox]) {
 /* A component that sets its display still honours the hidden attribute on its root. */
 @scope (.ui-input) to ([data-hn]) {
 :scope {
+    --_ui-input-size: var(--ui-control-size-md);
+    --_ui-input-inset-block: var(--ui-control-inset-block-md, var(--ui-space-2));
+    --_ui-input-stroke: var(
+      --ui-input-border-width,
+      var(--_ui-default-input-border-width, var(--ui-border-width))
+    );
     box-sizing: border-box !important;
     display: inline-block !important;
     inline-size: var(--ui-input-inline-size, 100%);
@@ -2257,7 +2302,7 @@ input:focus-visible:where([data-hn-ui-checkbox]) {
       var(--_ui-default-input-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-input-inset-block) var(--ui-space-3) !important;
     appearance: none;
     padding-inline-start: var(--_ui-default-input-padding-inline-start, var(--ui-space-3))
       !important;
@@ -2287,20 +2332,33 @@ input:focus-visible:where([data-hn-ui-checkbox]) {
       box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
       background-color var(--ui-motion-fast) var(--ui-motion-ease);
 }
+:scope:is([type="text"], [type="search"], [type="tel"], [type="url"], [type="email"], [type="password"], [type="number"]) {
+    max-block-size: max(
+      calc(var(--_ui-input-size) - var(--_ui-default-input-frame-width, 0px)),
+      calc(
+        1em * var(--ui-line-height-tight) + 2 * var(--_ui-input-inset-block) +
+          2 * var(--_ui-input-stroke)
+      )
+    );
+}
 :scope[data-ui-input-state~="size=sm"] {
+    --_ui-input-size: var(--ui-control-size-sm);
+    --_ui-input-inset-block: var(--ui-control-inset-block-sm, var(--ui-space-1));
     min-block-size: var(
       --ui-input-min-block-size,
       var(--_ui-default-input-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-input-inset-block) var(--ui-space-2) !important;
     font-size: var(--ui-font-size-sm);
 }
 :scope[data-ui-input-state~="size=lg"] {
+    --_ui-input-size: var(--ui-control-size-lg);
+    --_ui-input-inset-block: var(--ui-control-inset-block-lg, var(--ui-space-3));
     min-block-size: var(
       --ui-input-min-block-size,
       var(--_ui-default-input-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-input-inset-block) var(--ui-space-4) !important;
     font-size: var(--ui-font-size-md);
 }
 @media (pointer: coarse) {
@@ -2989,10 +3047,15 @@ input:where([data-hn-ui-combobox])::selection {
     color: inherit;
 }
 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;
@@ -3000,7 +3063,7 @@ input:where([data-hn-ui-combobox]) {
     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;
 }
@@ -3008,14 +3071,16 @@ input:where([data-hn-ui-combobox]) {
     --_row: var(--ui-control-size-sm);
 }
 :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);
 }
 :scope[data-ui-combobox-state~="size=lg"]:where([data-hn-ui-combobox]) {
     --_row: var(--ui-control-size-lg);
 }
 :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);
 }
 button:where([data-hn-ui-combobox]) {
@@ -3157,6 +3222,7 @@ input:disabled:where([data-hn-ui-combobox]),button:disabled:where([data-hn-ui-co
     display: none !important;
 }
 :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;
@@ -3331,10 +3397,15 @@ input:where(:not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):
     color: inherit;
 }
 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;
@@ -3342,7 +3413,7 @@ input:where(:scope, :scope *):where([data-hn-ui-combobox]) {
     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;
 }
@@ -3351,7 +3422,8 @@ input:where(:scope, :scope *):where([data-hn-ui-combobox]) {
 }
 :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);
 }
 :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]) {
@@ -3359,7 +3431,8 @@ input:where(:scope, :scope *):where([data-hn-ui-combobox]) {
 }
 :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);
 }
 button:where(:scope, :scope *):where([data-hn-ui-combobox]) {
@@ -3508,6 +3581,7 @@ input:disabled:where(:scope, :scope *):where([data-hn-ui-combobox]),button:disab
 }
 :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;
@@ -4616,17 +4690,13 @@ dd:where([data-hn-ui-description-item]) {
 /* Alerts have no close target to add height above the title. */
 
 /* :host-qualified so page heading rules that reach in cannot outrank the dialog chrome. */
-
-/* A CSS-drawn X. */
-
-/* A touch target, like Button on coarse pointers. */
-@keyframes ui-dialog-enter-6cfda64d {
+@keyframes ui-dialog-enter-45428506 {
 from {
     opacity: 0;
     transform: scale(0.96);
 }
 }
-@keyframes ui-dialog-backdrop-enter-6cfda64d {
+@keyframes ui-dialog-backdrop-enter-45428506 {
 from {
     background-color: transparent;
 }
@@ -4761,7 +4831,7 @@ from {
     pointer-events: auto;
     opacity: 1;
     transform: scale(1);
-    animation: ui-dialog-enter-6cfda64d var(--ui-dialog-duration, var(--ui-motion-base))
+    animation: ui-dialog-enter-45428506 var(--ui-dialog-duration, var(--ui-motion-base))
       var(--ui-motion-ease);
 }
 :scope[data-ui-dialog-state~="size=sm"]:where([data-hn-ui-dialog]) {
@@ -4807,51 +4877,10 @@ header:where([data-hn-ui-dialog]) {
     line-height: var(--ui-line-height-tight);
 }
 .close:where([data-hn-ui-dialog]) {
-    display: inline-grid !important;
-    place-items: center;
-    flex: none;
+    display: flex !important;
+    align-items: center !important;
+    flex: none !important;
     margin-inline-start: auto !important;
-    inline-size: var(--ui-control-size-sm);
-    block-size: var(--ui-control-size-sm);
-    padding: 0 !important;
-    border: 0;
-    border-radius: var(--ui-radius-round);
-    background: transparent;
-    color: var(--ui-text-secondary);
-    cursor: pointer;
-    transition:
-      background-color var(--ui-motion-fast) var(--ui-motion-ease),
-      color var(--ui-motion-fast) var(--ui-motion-ease);
-}
-.close:where([data-hn-ui-dialog])::before,.close:where([data-hn-ui-dialog])::after {
-    content: "";
-    grid-area: 1 / 1;
-    inline-size: 0.875rem;
-    block-size: 1.5px;
-    border-radius: 1px;
-    background: currentColor;
-    transform: rotate(45deg);
-}
-.close:where([data-hn-ui-dialog])::after {
-    transform: rotate(-45deg);
-}
-.close:hover:where([data-hn-ui-dialog]) {
-    background: var(--ui-surface-muted);
-    color: var(--ui-text-primary);
-}
-.close:focus-visible:where([data-hn-ui-dialog]) {
-    outline: var(--ui-focus-width) solid var(--ui-focus-ring);
-    outline-offset: var(--ui-focus-width);
-}
-@media (pointer: coarse) {
-.close:where([data-hn-ui-dialog]) {
-      inline-size: var(--ui-control-min-block-size);
-      block-size: var(--ui-control-min-block-size);
-}
-}
-html[data-ui-input-modality="touch"] :scope .close:where([data-hn-ui-dialog]) {
-    inline-size: var(--ui-control-min-block-size);
-    block-size: var(--ui-control-min-block-size);
 }
 .body:where([data-hn-ui-dialog]) {
     display: flex !important;
@@ -4882,7 +4911,7 @@ footer:empty:where([data-hn-ui-dialog]) {
 }
 :scope[open]:modal:where([data-hn-ui-dialog])::backdrop {
     background-color: var(--ui-overlay-backdrop);
-    animation: ui-dialog-backdrop-enter-6cfda64d var(--_ui-dialog-duration, var(--ui-motion-base))
+    animation: ui-dialog-backdrop-enter-45428506 var(--_ui-dialog-duration, var(--ui-motion-base))
       var(--ui-motion-ease);
 }
 :scope[open][data-ui-backdrop-hidden]:where([data-hn-ui-dialog])::backdrop {
@@ -5021,7 +5050,7 @@ footer:empty:where([data-hn-ui-dialog]) {
     pointer-events: auto;
     opacity: 1;
     transform: scale(1);
-    animation: ui-dialog-enter-6cfda64d var(--ui-dialog-duration, var(--ui-motion-base))
+    animation: ui-dialog-enter-45428506 var(--ui-dialog-duration, var(--ui-motion-base))
       var(--ui-motion-ease);
 }
 :where(.ui-dialog)[data-ui-dialog-state~="size=sm"]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog]) {
@@ -5070,56 +5099,10 @@ header:where(:scope, :scope *):where([data-hn-ui-dialog]) {
     line-height: var(--ui-line-height-tight);
 }
 .close:where(:scope, :scope *):where([data-hn-ui-dialog]) {
-    display: inline-grid !important;
-    place-items: center;
-    flex: none;
+    display: flex !important;
+    align-items: center !important;
+    flex: none !important;
     margin-inline-start: auto !important;
-    inline-size: var(--ui-control-size-sm);
-    block-size: var(--ui-control-size-sm);
-    padding: 0 !important;
-    border: 0;
-    border-radius: var(--ui-radius-round);
-    background: transparent;
-    color: var(--ui-text-secondary);
-    cursor: pointer;
-    transition:
-      background-color var(--ui-motion-fast) var(--ui-motion-ease),
-      color var(--ui-motion-fast) var(--ui-motion-ease);
-}
-.close:where(:not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where(:scope, :scope
-    *):where([data-hn-ui-dialog])::before,.close:where(:not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where(:scope, :scope
-    *):where([data-hn-ui-dialog])::after {
-    content: "";
-    grid-area: 1 / 1;
-    inline-size: 0.875rem;
-    block-size: 1.5px;
-    border-radius: 1px;
-    background: currentColor;
-    transform: rotate(45deg);
-}
-.close:where(:not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where(:scope, :scope
-    *):where([data-hn-ui-dialog])::after {
-    transform: rotate(-45deg);
-}
-.close:hover:where(:scope, :scope *):where([data-hn-ui-dialog]) {
-    background: var(--ui-surface-muted);
-    color: var(--ui-text-primary);
-}
-.close:focus-visible:where(:scope, :scope *):where([data-hn-ui-dialog]) {
-    outline: var(--ui-focus-width) solid var(--ui-focus-ring);
-    outline-offset: var(--ui-focus-width);
-}
-@media (pointer: coarse) {
-.close:where(:scope, :scope *):where([data-hn-ui-dialog]) {
-      inline-size: var(--ui-control-min-block-size);
-      block-size: var(--ui-control-min-block-size);
-}
-}
-html[data-ui-input-modality="touch"]
-    :where(.ui-dialog)
-    .close:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog]) {
-    inline-size: var(--ui-control-min-block-size);
-    block-size: var(--ui-control-min-block-size);
 }
 .body:where(:scope, :scope *):where([data-hn-ui-dialog]) {
     display: flex !important;
@@ -5150,7 +5133,7 @@ footer:empty:where(:scope, :scope *):where([data-hn-ui-dialog]) {
 }
 :where(.ui-dialog)[open]:modal:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog])::backdrop {
     background-color: var(--ui-overlay-backdrop);
-    animation: ui-dialog-backdrop-enter-6cfda64d var(--_ui-dialog-duration, var(--ui-motion-base))
+    animation: ui-dialog-backdrop-enter-45428506 var(--_ui-dialog-duration, var(--ui-motion-base))
       var(--ui-motion-ease);
 }
 :where(.ui-dialog)[open][data-ui-backdrop-hidden]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog])::backdrop {
@@ -6197,6 +6180,7 @@ legend.sr-only:where([data-hn-ui-radio-group]) {
        Hooks do not inherit, so these are defaults for the input; its own hooks still win. */
     --_ui-default-input-border-width: 0;
     --_ui-default-input-min-block-size: 0;
+    --_ui-default-input-frame-width: calc(2 * var(--ui-border-width));
     --_ui-default-input-border: transparent;
     --_ui-default-input-border-hover: transparent;
     --_ui-default-input-focus-border: transparent;
@@ -8746,6 +8730,122 @@ path:where([data-hn-ui-light-editor]) {
 }
 }
 }
+@scope ([data-slotted~="ui-light-editor"]:not([data-hn])) to ([data-hn], [data-slotted]) {
+:where(.ui-light-editor):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-light-editor"]))):where([data-hn-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 *):where([data-hn-ui-light-editor]) {
+    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 *):where([data-hn-ui-light-editor]) {
+    position: relative;
+    display: block !important;
+    inline-size: 100%;
+    block-size: 100%;
+}
+svg:where(:scope, :scope *):where([data-hn-ui-light-editor]) {
+    inline-size: 100%;
+    block-size: 100%;
+    overflow: visible;
+}
+path:where(:scope, :scope *):where([data-hn-ui-light-editor]) {
+    fill: none;
+    stroke: var(--ui-border);
+    stroke-width: 1;
+    vector-effect: non-scaling-stroke;
+}
+.specimen:where(:scope, :scope *):where([data-hn-ui-light-editor]) {
+    position: absolute;
+    inset: 0;
+    display: grid !important;
+    place-items: center !important;
+}
+.source:where(:scope, :scope *):where([data-hn-ui-light-editor]) {
+    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 *):where([data-hn-ui-light-editor]) {
+    position: relative;
+    z-index: 1;
+    display: inline-flex !important;
+    color: var(--ui-accent);
+    font-size: var(--ui-font-size-lg);
+}
+.source:where(:not([data-hn], [data-slotted]:not([data-slotted~="ui-light-editor"]))):where(:scope, :scope
+    *):where([data-hn-ui-light-editor])::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 *):where([data-hn-ui-light-editor]) {
+    cursor: grabbing;
+}
+.source:focus-visible:where(:scope, :scope *):where([data-hn-ui-light-editor]) {
+    outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+    outline-offset: var(--ui-space-1);
+}
+.source:disabled:where(:scope, :scope *):where([data-hn-ui-light-editor]) {
+    cursor: not-allowed;
+}
+.source:disabled:where(:not([data-hn], [data-slotted]:not([data-slotted~="ui-light-editor"]))):where(:scope, :scope
+    *):where([data-hn-ui-light-editor])::after {
+    background: var(--ui-disabled-surface);
+    border-color: var(--ui-disabled-border);
+    box-shadow: none;
+}
+.coordinates:where(:scope, :scope *):where([data-hn-ui-light-editor]) {
+    display: grid !important;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    gap: var(--ui-space-2) !important;
+}
+.hint:where(:scope, :scope *):where([data-hn-ui-light-editor]) {
+    font-size: var(--ui-font-size-sm);
+    color: var(--ui-text-secondary);
+}
+@media (forced-colors: active) {
+.source-glyph:where(:scope, :scope *):where([data-hn-ui-light-editor]) {
+      color: CanvasText;
+}
+.source:where(:not([data-hn], [data-slotted]:not([data-slotted~="ui-light-editor"]))):where(:scope, :scope
+      *):where([data-hn-ui-light-editor])::after {
+      background: Canvas;
+      border-color: CanvasText;
+}
+.source:focus-visible:where(:scope, :scope *):where([data-hn-ui-light-editor]) {
+      outline-color: Highlight;
+}
+}
+}
 
 /* This component's hooks style the element they are set on, and never a nested one. */
 @property --ui-list-gap {
@@ -10108,13 +10208,22 @@ dialog:where([data-hn-ui-search-shell]) {
 /* A component that sets its display still honours the hidden attribute on its root. */
 @scope (.ui-select) to ([data-hn]) {
 :scope:where([data-hn-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)));
@@ -10190,8 +10299,10 @@ dialog:where([data-hn-ui-search-shell]) {
     cursor: not-allowed;
 }
 :scope[data-ui-select-state~="size=sm"]:where([data-hn-ui-select]) {
+    --_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;
@@ -10201,8 +10312,10 @@ dialog:where([data-hn-ui-search-shell]) {
     font-size: var(--ui-font-size-sm);
 }
 :scope[data-ui-select-state~="size=lg"]:where([data-hn-ui-select]) {
+    --_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);
@@ -13714,6 +13827,7 @@ html[data-ui-input-modality="touch"]
 
     :scope:where([data-component~="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;
@@ -13760,6 +13874,21 @@ html[data-ui-input-modality="touch"]
       padding-block: var(--ui-space-0-5) !important;
     }
 
+    /* Trim the text line itself: an anonymous flex item retains font-metric space in some fonts. */
+    .label {
+      display: block !important;
+      align-content: center !important;
+      min-inline-size: 0 !important;
+      min-block-size: 1lh !important;
+    }
+
+    .label:has(svg) {
+      display: inline-flex !important;
+      align-items: center !important;
+      gap: var(--ui-space-2) !important;
+      text-box-trim: none;
+    }
+
     .badge {
       display: inline-flex !important;
       align-items: center !important;
@@ -13771,7 +13900,7 @@ html[data-ui-input-modality="touch"]
     }
 
     @supports (text-box-trim: trim-both) {
-      :scope:where([data-component~="ui-button"]) {
+      .label:not(:has(svg)) {
         text-box-trim: trim-both;
         text-box-edge: cap alphabetic;
       }
@@ -14099,6 +14228,11 @@ html[data-ui-input-modality="touch"]
       transition: color var(--ui-motion-fast) var(--ui-motion-ease), text-decoration-color var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
+    :scope:where([data-component~="ui-button"])[data-appearance="link"] .label {
+      display: inline !important;
+      text-box-trim: none;
+    }
+
     :scope:where([data-component~="ui-button"])[data-appearance="link"]:hover:not(:disabled, [aria-disabled="true"]) {
       color: var(--ui-button-link-hover-text, var(--ui-text-primary));
       text-decoration-color: currentColor;
@@ -14136,6 +14270,8 @@ html[data-ui-input-modality="touch"]
     /* 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. */
+
     @supports (text-box-trim: trim-both) {
     }
 
@@ -16474,7 +16610,8 @@ html[data-ui-input-modality="touch"]
 
     input:where(:not([data-component], [data-slotted]))::after {
       content: "";
-      position: absolute;
+      position: absolute !important;
+      transform: none !important;
       opacity: 0;
       transition: opacity var(--ui-motion-fast) var(--ui-motion-ease);
     }
@@ -16487,43 +16624,44 @@ html[data-ui-input-modality="touch"]
       box-shadow: var(--ui-control-inset);
     }
 
-    /* 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. */
     input:checked:where(:not([data-component], [data-slotted]))::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;
     }
 
     input:indeterminate:where(:not([data-component], [data-slotted]))::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;
     }
 
     @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;
       }
     }
 
@@ -16534,6 +16672,20 @@ html[data-ui-input-modality="touch"]
       }
     }
 
+    @media (forced-colors: active) {
+      input:checked,
+      input:indeterminate {
+        forced-color-adjust: none;
+        background: Highlight;
+        border-color: Highlight;
+      }
+      input:checked:where(:not([data-component], [data-slotted]))::after, 
+      input:indeterminate:where(:not([data-component], [data-slotted]))::after {
+        forced-color-adjust: none;
+        background: HighlightText;
+      }
+    }
+
     input:hover:enabled {
       border-color: var(--ui-accent-solid);
     }
@@ -16591,11 +16743,15 @@ html[data-ui-input-modality="touch"]
 
     /* 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. */
 
     @media (prefers-reduced-motion: reduce) {
     }
 
+    @media (forced-colors: active) {
+    }
+
     /* A sized choice keeps its box and aligns instead: the label takes that size's field type size,
        and the first line centres in that control height, so the label shares a row's baseline.
        Multi-line labels and descriptions still grow downward from that first line. */
@@ -16889,15 +17045,24 @@ html[data-ui-input-modality="touch"]
       syntax: "*";
       inherits: false;
     }
+    /* Normalize a unitless zero border to a length before the box calculation. */
+    @property --_ui-input-stroke {
+      syntax: "<length>";
+      inherits: false;
+      initial-value: 1px;
+    }
 
     :scope:where([data-component~="ui-input"]) {
+      --_ui-input-size: var(--ui-control-size-md);
+      --_ui-input-inset-block: var(--ui-control-inset-block-md, var(--ui-space-2));
+      --_ui-input-stroke: var(--ui-input-border-width, var(--_ui-default-input-border-width, var(--ui-border-width)));
       box-sizing: border-box !important;
       display: inline-block !important;
       inline-size: var(--ui-input-inline-size, 100%);
       min-inline-size: 0;
       min-block-size: var(--ui-input-min-block-size, var(--_ui-default-input-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-input-inset-block) var(--ui-space-3) !important;
       appearance: none;
       padding-inline-start: var(--_ui-default-input-padding-inline-start, var(--ui-space-3)) !important;
       border: var(--ui-input-border-width, var(--_ui-default-input-border-width, var(--ui-border-width))) solid
@@ -16915,16 +17080,25 @@ html[data-ui-input-modality="touch"]
         background-color var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
+    /* Cap Safari's excess text metrics without changing native date, file, color or range widgets. */
+    :scope:where([data-component~="ui-input"]):is([type="text"], [type="search"], [type="tel"], [type="url"], [type="email"], [type="password"], [type="number"]) {
+      max-block-size: max(calc(var(--_ui-input-size) - var(--_ui-default-input-frame-width, 0px)), calc(1em * var(--ui-line-height-tight) + 2 * var(--_ui-input-inset-block) + 2 * var(--_ui-input-stroke)));
+    }
+
     /* Each size reads the hook and then an Input Group's default first, so a group, which draws the frame, can zero it. */
     :scope:where([data-component~="ui-input"])[data-ui-input-state~="size=sm"] {
+      --_ui-input-size: var(--ui-control-size-sm);
+      --_ui-input-inset-block: var(--ui-control-inset-block-sm, var(--ui-space-1));
       min-block-size: var(--ui-input-min-block-size, var(--_ui-default-input-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-input-inset-block) var(--ui-space-2) !important;
       font-size: var(--ui-font-size-sm);
     }
 
     :scope:where([data-component~="ui-input"])[data-ui-input-state~="size=lg"] {
+      --_ui-input-size: var(--ui-control-size-lg);
+      --_ui-input-inset-block: var(--ui-control-inset-block-lg, var(--ui-space-3));
       min-block-size: var(--ui-input-min-block-size, var(--_ui-default-input-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-input-inset-block) var(--ui-space-4) !important;
       font-size: var(--ui-font-size-md);
     }
 
@@ -17005,6 +17179,9 @@ html[data-ui-input-modality="touch"]
 @scope ([data-component~="ui-input"]) to ([data-component]) {
 /* This component's hooks style the element they are set on, and never a nested one. An Input
        Group sets --_ui-default-input-* for the input inside it, below the input's own hooks. */
+    /* Normalize a unitless zero border to a length before the box calculation. */
+
+    /* Cap Safari's excess text metrics without changing native date, file, color or range widgets. */
 
     /* Each size reads the hook and then an Input Group's default first, so a group, which draws the frame, can zero it. */